perf: 优化查看任务附件菜单

language/original-web.txt

@@ -54,7 +54,6 @@
 仅限项目或任务负责人操作
 仅限项目或任务负责人添加
 任务列表不存在或已被删除
-你确定要删除这个文件吗？
 密码错误，请输入正确密码
 开放：所有人都可以发言。
 强大易用的协同创作云文档
@@ -1600,3 +1599,4 @@ License Key
 长按语音消息可转换成文字。
 需要在应用中开启 ChatGPT AI 机器人
 关闭语音转文字功能。
+你确定要删除文件【(*)】吗？

resources/assets/js/pages/manage/components/FileContent.vue

@@ -14,7 +14,7 @@
             <div v-else class="edit-header">
                 <div class="header-title">
                     <EPopover v-if="!equalContent" v-model="unsaveTip" class="file-unsave-tip">
-                        <div class="task-detail-delete-file-popover">
+                        <div class="confirm-popover">
                             <p>{{$L('未保存当前修改内容？')}}</p>
                             <div class="buttons">
                                 <Button size="small" type="text" @click="unSaveGive">{{$L('放弃')}}</Button>

resources/assets/js/pages/manage/components/TaskDetail.vue

@@ -277,25 +277,11 @@
                         </div>
                         <ul class="item-content file">
                             <li v-if="taskDetail.file_num > 50" class="tip">{{$L(`共${taskDetail.file_num}个文件，仅显示最新50个`)}}</li>
-                            <li v-for="file in fileList">
+                            <li v-for="file in fileList" @click="showFileDropdown(file, $event)">
                                 <img v-if="file.id" class="file-ext" :src="file.thumb"/>
                                 <Loading v-else class="file-load"/>
                                 <div class="file-name">{{file.name}}</div>
                                 <div class="file-size">{{$A.bytesToSize(file.size)}}</div>
-                                <div class="file-menu" :class="{show:file._show_menu}">
-                                    <Icon @click="viewFile(file)" type="md-eye" />
-                                    <Icon @click="downFile(file)" type="md-arrow-round-down" />
-                                    <EPopover v-model="file._show_menu" class="file-delete">
-                                        <div class="task-detail-delete-file-popover">
-                                            <p>{{$L('你确定要删除这个文件吗？')}}</p>
-                                            <div class="buttons">
-                                                <Button size="small" type="text" @click="file._show_menu=false">{{$L('取消')}}</Button>
-                                                <Button size="small" type="primary" @click="deleteFile(file)">{{$L('确定')}}</Button>
-                                            </div>
-                                        </div>
-                                        <i slot="reference" class="taskfont del">&#xe6ea;</i>
-                                    </EPopover>
-                                </div>
                             </li>
                         </ul>
                         <ul class="item-content">
@@ -365,21 +351,21 @@
                     <div class="calculate-content"></div>
                     <EDropdownMenu slot="dropdown">
                         <EDropdownItem :command="1">
-                            <div class="task-menu-icon" >
+                            <div class="task-menu-icon">
                                 <Icon v-if="taskDetail.visibility == 1" class="completed" :type="'md-checkmark-circle'"/>
                                 <Icon v-else class="uncomplete" :type="'md-radio-button-off'"/>
                                 {{$L('项目人员')}}
                             </div>
                         </EDropdownItem>
                         <EDropdownItem :command="2">
-                            <div class="task-menu-icon" >
+                            <div class="task-menu-icon">
                                 <Icon v-if="taskDetail.visibility == 2" class="completed" :type="'md-checkmark-circle'"/>
                                 <Icon v-else class="uncomplete" :type="'md-radio-button-off'"/>
                                 {{$L('任务人员')}}
                             </div>
                         </EDropdownItem>
                         <EDropdownItem :command="3">
-                            <div class="task-menu-icon" >
+                            <div class="task-menu-icon">
                                 <Icon v-if="taskDetail.visibility == 3" class="completed" :type="'md-checkmark-circle'"/>
                                 <Icon v-else class="uncomplete" :type="'md-radio-button-off'"/>
                                 {{$L('指定成员')}}
@@ -391,14 +377,24 @@
                     <div class="calculate-content"></div>
                     <EDropdownMenu slot="dropdown">
                         <EDropdownItem :command="1">
-                            <div class="task-menu-icon" >
+                            {{$L('任务延期')}}
-                                {{$L('任务延期')}}
-                            </div>
                         </EDropdownItem>
                         <EDropdownItem :command="2">
-                            <div class="task-menu-icon" >
+                            {{$L('修改时间')}}
-                                {{$L('修改时间')}}
+                        </EDropdownItem>
-                            </div>
+                    </EDropdownMenu>
+                </EDropdown>
+                <EDropdown ref="eFileRef" class="calculate-dropdown" trigger="click" placement="bottom" @command="dropFile">
+                    <div class="calculate-content"></div>
+                    <EDropdownMenu slot="dropdown">
+                        <EDropdownItem :command="1">
+                            {{$L('查看附件')}}
+                        </EDropdownItem>
+                        <EDropdownItem :command="2">
+                            {{$L('下载附件')}}
+                        </EDropdownItem>
+                        <EDropdownItem :command="3" class="task-calc-warn-text">
+                            {{$L('删除附件')}}
                         </EDropdownItem>
                     </EDropdownMenu>
                 </EDropdown>
@@ -1679,6 +1675,22 @@ export default {
             });
         },
 
+        showDropdown(ref, eRect){
+            const boxRect = this.$refs.scroller.$el.getBoundingClientRect()
+            const refEl = ref.$el
+            refEl.style.top = (eRect.top - boxRect.top) + 'px'
+            refEl.style.left = (eRect.left - boxRect.left) + 'px'
+            refEl.style.width = eRect.width + 'px'
+            refEl.style.height = eRect.height + 'px'
+            //
+            if (ref.visible) {
+                ref.hide()
+            }
+            setTimeout(() => {
+                ref.show()
+            }, 0)
+        },
+
         showCisibleDropdown(e){
             let eRect = null
             if (e === null) {
@@ -1689,37 +1701,12 @@ export default {
             if (eRect === null) {
                 return
             }
-            const boxRect = this.$refs.scroller.$el.getBoundingClientRect()
+            this.showDropdown(this.$refs.eDropdownRef, eRect)
-            const refEl = this.$refs.eDropdownRef.$el
-            refEl.style.top = (eRect.top - boxRect.top) + 'px'
-            refEl.style.left = (eRect.left - boxRect.left) + 'px'
-            refEl.style.width = eRect.width + 'px'
-            refEl.style.height = eRect.height + 'px'
-            //
-            if (this.$refs.eDropdownRef.visible) {
-                this.$refs.eDropdownRef.hide()
-            }
-            setTimeout(() => {
-                this.$refs.eDropdownRef.show()
-            }, 0)
         },
 
         showAtDropdown({target}){
             this.timeOpen = false
-            const eRect = target.getBoundingClientRect()
+            this.showDropdown(this.$refs.eDeadlineRef, target.getBoundingClientRect())
-            const boxRect = this.$refs.scroller.$el.getBoundingClientRect()
-            const refEl = this.$refs.eDeadlineRef.$el
-            refEl.style.top = (eRect.top - boxRect.top) + 'px'
-            refEl.style.left = (eRect.left - boxRect.left) + 'px'
-            refEl.style.width = eRect.width + 'px'
-            refEl.style.height = eRect.height + 'px'
-            //
-            if (this.$refs.eDeadlineRef.visible) {
-                this.$refs.eDeadlineRef.hide()
-            }
-            setTimeout(() => {
-                this.$refs.eDeadlineRef.show()
-            }, 0)
         },
 
         visibleUserSelectShowChange(isShow){
@@ -1794,6 +1781,31 @@ export default {
             })
         },
 
+        showFileDropdown(file, {target}){
+            this.operationFile = file
+            this.showDropdown(this.$refs.eFileRef, target.getBoundingClientRect())
+        },
+
+        dropFile(command) {
+            switch (command) {
+                case 1:
+                    this.viewFile(this.operationFile)
+                    break;
+                case 2:
+                    this.downFile(this.operationFile)
+                    break;
+                case 3:
+                    $A.modalConfirm({
+                        title: '删除文件',
+                        content: `你确定要删除文件【${this.operationFile.name}】吗？`,
+                        onOk: () => {
+                            this.deleteFile(this.operationFile)
+                        }
+                    });
+                    break;
+            }
+        },
+
         updateVisible() {
             this.updateData(['visibility', 'visibility_appointor'])
         }

resources/assets/sass/pages/common.scss

@@ -834,3 +834,13 @@ body.window-portrait {
 .block-setting-space {
     height: 8px;
 }
+.confirm-popover {
+    max-width: 200px;
+    .buttons {
+        text-align: right;
+        margin-top: 12px;
+        .ivu-btn-small {
+            font-size: 12px
+        }
+    }
+}

resources/assets/sass/pages/components/task-detail.scss

@@ -251,6 +251,7 @@
                     &.file {
                         margin-bottom: -3px;
                         > li {
+                            cursor: pointer;
                             margin-bottom: 2px;
                             &.tip {
                                 color: #999;
@@ -281,38 +282,12 @@
                                 font-size: 12px;
                                 color: #bbbbbb;
                             }
-                            .file-menu {
-                                display: flex;
-                                align-items: center;
-                                opacity: 0;
-                                transition: all 0.3s;
-                                padding-left: 12px;
-                                &.show {
-                                    opacity: 1;
-                                }
-                                i {
-                                    font-size: 14px;
-                                    color: #aaaaaa;
-                                    transition: color 0.3s;
-                                    cursor: pointer;
-                                    padding: 0 4px;
-                                    &:hover {
-                                        color: #777777;
-                                    }
-                                    &.del {
-                                        font-size: 13px;
-                                        &:hover {
-                                            color: #ff0000;
-                                        }
-                                    }
-                                }
-                            }
                             &:hover {
                                 .file-name {
                                     color: $primary-title-color;
                                 }
-                                .file-menu {
+                                .file-size {
-                                    opacity: 1;
+                                    color: $primary-text-color;
                                 }
                             }
                         }
@@ -528,6 +503,9 @@
                     width: 100%;
                     height: 100%;
                 }
+                .calculate-text {
+                    color: $flow-status-start-color;
+                }
             }
         }
         .upload {
@@ -855,23 +833,16 @@
     }
 }
 
-.task-detail-delete-file-popover {
-    max-width: 200px;
-    .buttons {
-        text-align: right;
-        margin-top: 12px;
-        .ivu-btn-small {
-            font-size: 12px
-        }
-    }
-}
-
 .task-detail-loop {
     > li {
         text-align: center;
     }
 }
 
+.task-calc-warn-text {
+    color: $flow-status-start-color !important;
+}
+
 body.window-portrait {
     .task-detail {
         .task-info {