monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by xwx
Commit 39d4f8546be93eeff4d23b61ce9e7c74b036c79a 2 parents 4a80bc4e e245a275

Merge branch 'master' of http://113.200.75.45:82/monitor_v3/hg-monitor-web into master-v32-xwx

Inline Side-by-side
Showing 4 changed files with 128 additions and 7 deletions
@@ -55,4 +55,7 @@ custom-class="config-dialog" @@ -55,4 +55,7 @@ custom-class="config-dialog"
55 } 55 }
56 .select-all .el-button{ 56 .select-all .el-button{
57 height:42px; 57 height:42px;
  58 +}
  59 +.button-more{
  60 + position: absolute;right: 0;top: 33px;z-index: 1;background: #f5f7fa;width: 80px; padding: 10px;
58 } 61 }
@@ -92,8 +92,43 @@ @@ -92,8 +92,43 @@
92 <!--列表--> 92 <!--列表-->
93 <div v-if="activeBtn == 'list'"> 93 <div v-if="activeBtn == 'list'">
94 <cm-table-page :columns="columns" :dataList="dataList" @loaddata="getPage" :showIndex="true" 94 <cm-table-page :columns="columns" :dataList="dataList" @loaddata="getPage" :showIndex="true"
95 - :showBorder="false" :showSelection="false"  
96 - :showPage="false" :height="height - 54"></cm-table-page> 95 + :showBorder="false" :showSelection="false" :showTools="isEditName"
  96 + :showPage="false" :height="height - 54">
  97 + <template #default="{row,prop,column}">
  98 + <div class="fileName-div" style="display: flex; align-items: center;" v-if="isEditName && prop == 'fileName'" @click="getFile(row)">
  99 + <i :class="['iconfont', iconclass[row.type] == undefined ? 'icon-wenjian' : iconclass[row.type]]" style="font-size: 22px;margin-right: 10px;"></i>
  100 + <div>
  101 + <span @click.stop="editFileName(row,index)" v-if="isInput!=row.id">{{row.fileName}}</span>
  102 + </div>
  103 +
  104 + <el-input @click.stop="" @blur="reNameFile(row,true)" v-if="isInput==row.id" type="text" v-model="row.fileName"></el-input>
  105 + </div>
  106 + </template>
  107 +
  108 + <template #tools="{scope}" >
  109 + <div >
  110 + <el-button type="text" size="small" @click.prevent="getFile(scope.row)">
  111 + <i class="el-icon-view"/>查看 <i @mouseenter="moreShow=scope.row.id" :class="{'el-icon-arrow-down':moreShow!=scope.row.id,'el-icon-arrow-up':moreShow==scope.row.id}"></i>
  112 + </el-button>
  113 + <div class="button-more" v-if="moreShow==scope.row.id" @mouseleave="moreShow=''">
  114 + <ul>
  115 + <li>
  116 + <el-button type="text" size="small" @click.prevent="handleDownloadFile(scope.row,scope.$index)">
  117 + <i class="el-icon-download"/>下载
  118 + </el-button>
  119 + </li>
  120 + <li>
  121 + <el-button type="text" size="small" @click.prevent="handleDelete(scope.row,scope.$index)">
  122 + <i class="el-icon-delete"/>删除
  123 + </el-button>
  124 + </li>
  125 + </ul>
  126 +
  127 + </div>
  128 +
  129 + </div>
  130 + </template>
  131 + </cm-table-page>
97 </div> 132 </div>
98 <div v-if="activeBtn == 'view'" style="background-color: white" :style="{'height':(height -50) +'px','max-height':(height -50) + 'px','overflow':'auto'}"> 133 <div v-if="activeBtn == 'view'" style="background-color: white" :style="{'height':(height -50) +'px','max-height':(height -50) + 'px','overflow':'auto'}">
99 <div style="text-align: left;margin: 6px;border-bottom: solid 1px #F2F6FC;padding-bottom: 5px;"> 134 <div style="text-align: left;margin: 6px;border-bottom: solid 1px #F2F6FC;padding-bottom: 5px;">
@@ -46,6 +46,11 @@ export default { @@ -46,6 +46,11 @@ export default {
46 isSelect:{ 46 isSelect:{
47 type:Boolean, 47 type:Boolean,
48 default:false 48 default:false
  49 + },
  50 + //是否编辑文件名称
  51 + isEditName:{
  52 + type:Boolean,
  53 + default:false
49 } 54 }
50 }, 55 },
51 data() { 56 data() {
@@ -67,6 +72,8 @@ export default { @@ -67,6 +72,8 @@ export default {
67 }, 72 },
68 setup(props, {attrs, slots, emit}) { 73 setup(props, {attrs, slots, emit}) {
69 const {proxy} = Vue.getCurrentInstance(); 74 const {proxy} = Vue.getCurrentInstance();
  75 + //是否编辑文档名称
  76 + const isInput=Vue.ref();
70 let height = Vue.ref(window.innerHeight - 20); 77 let height = Vue.ref(window.innerHeight - 20);
71 let iconclass = { 78 let iconclass = {
72 'folder': 'icon-wenjianjia', 79 'folder': 'icon-wenjianjia',
@@ -173,7 +180,8 @@ export default { @@ -173,7 +180,8 @@ export default {
173 // return `<i class="iconfont ${cls}" style="font-size: 22px;margin-right: 10px;"></i><input value="${inputFileName}"></input>` 180 // return `<i class="iconfont ${cls}" style="font-size: 22px;margin-right: 10px;"></i><input value="${inputFileName}"></input>`
174 return `<i class="iconfont ${cls}" style="font-size: 22px;margin-right: 10px;"></i><span>${row.fileName}</span>` 181 return `<i class="iconfont ${cls}" style="font-size: 22px;margin-right: 10px;"></i><span>${row.fileName}</span>`
175 } 182 }
176 - }, { 183 + },
  184 + {
177 prop: 'createUser', 185 prop: 'createUser',
178 label: '提交人', 186 label: '提交人',
179 sortable: true, 187 sortable: true,
@@ -184,8 +192,8 @@ export default { @@ -184,8 +192,8 @@ export default {
184 sortable: true, 192 sortable: true,
185 width: '180px' 193 width: '180px'
186 } 194 }
187 - /* ,{  
188 - prop: '', 195 + /*,{
  196 + prop: 'handle',
189 label: '操作', 197 label: '操作',
190 sortable: false, 198 sortable: false,
191 width: '180px', 199 width: '180px',
@@ -330,6 +338,31 @@ export default { @@ -330,6 +338,31 @@ export default {
330 } 338 }
331 } 339 }
332 340
  341 + /*
  342 + * 单个删除文档
  343 + * lu
  344 + * */
  345 + let handleDelete =(row,index)=>{
  346 + dataList.value.filter((v)=>{
  347 + if(v.id==row.id){
  348 + v.checked = true
  349 + }
  350 + })
  351 + deleteDocument(row.id,row.type)
  352 + }
  353 + /*
  354 + * 下载单个文档
  355 + * lu
  356 + * */
  357 + let handleDownloadFile=(row,index)=>{
  358 + dataList.value.filter((v)=>{
  359 + if(v.id==row.id){
  360 + v.checked = true
  361 + }
  362 + })
  363 + downloadFile();
  364 + }
  365 + const moreShow=Vue.ref();//更多按钮是否显示
333 366
334 /** 367 /**
335 * 将文档放入回收站 368 * 将文档放入回收站
@@ -702,17 +735,55 @@ export default { @@ -702,17 +735,55 @@ export default {
702 proxy.$global.showMsg(msg, 'warning'); 735 proxy.$global.showMsg(msg, 'warning');
703 } 736 }
704 } 737 }
  738 + isInput.value='';
705 }) 739 })
706 reNameFileFlg.value[item.id] = false; 740 reNameFileFlg.value[item.id] = false;
707 } 741 }
708 742
709 } 743 }
  744 + /*表格列表添加文件大小列
  745 + *lu
  746 + * */
  747 + let addColumns=()=>{
  748 + let newColumns= {
  749 + prop: 'fileSize',
  750 + label:'文件大小',
  751 + width:'120px',
  752 + render:function (row){
  753 + let fileSizeB=0;
  754 + if(row.fileSize){
  755 + fileSizeB=row.fileSize;
  756 +
  757 + }
  758 + let fileSize=filterType(fileSizeB)
  759 + return `<span>${fileSize}</span>`
  760 + }
  761 +
  762 + }
  763 + if(props.isEditName){
  764 + columns.value.splice(1,0,newColumns)
  765 +
  766 + }
  767 + }
  768 + /*文件大小单位转换
  769 + * lu
  770 + * */
  771 + let filterType=(val)=>{
  772 + if (val==0) return "0 B";
  773 + let k=1024;
  774 + let sizes=["B","KB","GB","TB","PB","EB","ZB","YB"];
  775 + let i=Math.floor(Math.log(val) / Math.log(k));
  776 + return (val/Math.pow(k,i)).toPrecision(3) + " "+sizes[i];
  777 + }
710 778
711 779
712 /** 780 /**
713 * 挂载完 781 * 挂载完
714 */ 782 */
715 Vue.onMounted(() => { 783 Vue.onMounted(() => {
  784 + //表格列表添加文件大小列
  785 + addColumns();
  786 +
716 getUserList(); 787 getUserList();
717 // 预览模式 不展示左侧树 788 // 预览模式 不展示左侧树
718 if (!props.isView) { 789 if (!props.isView) {
@@ -782,8 +853,15 @@ export default { @@ -782,8 +853,15 @@ export default {
782 },function (){},false) 853 },function (){},false)
783 } 854 }
784 855
  856 + //点击文件名称编辑
  857 + const editFileName=(item)=>{
  858 + isInput.value=item.id;
  859 + }
  860 +
785 return { 861 return {
786 /* viewEdit,*/ 862 /* viewEdit,*/
  863 + editFileName,
  864 + isInput,
787 iconclass, 865 iconclass,
788 layout, 866 layout,
789 height, 867 height,
@@ -832,7 +910,12 @@ export default { @@ -832,7 +910,12 @@ export default {
832 editType, 910 editType,
833 selectAll, 911 selectAll,
834 isAllSelect, 912 isAllSelect,
835 - selectText 913 + selectText,
  914 + handleDelete,
  915 + handleDownloadFile,
  916 + moreShow,
  917 + addColumns,
  918 + filterType
836 919
837 } 920 }
838 } 921 }
1 <div class="container"> 1 <div class="container">
2 - <cm-document :isSelect="true"></cm-document> 2 + <cm-document :isSelect="true" :isEditName="true"></cm-document>
3 </div> 3 </div>