Merge branch 'master' of http://113.200.75.45:82/monitor_v3/hg-monitor-web into master-v32-xwx
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 | } |
-
Please register or login to post a comment