no message

resources/assets/js/app.js

@@ -32,12 +32,14 @@ Vue.component('UserAvatar', UserAvatar);
 import {
     Avatar,
     Tooltip,
+    Popover,
     Dropdown,
     DropdownMenu,
     DropdownItem,
 } from 'element-ui';
 Vue.component('EAvatar', Avatar);
 Vue.component('ETooltip', Tooltip);
+Vue.component('EPopover', Popover);
 Vue.component('EDropdown', Dropdown);
 Vue.component('EDropdownMenu', DropdownMenu);
 Vue.component('EDropdownItem', DropdownItem);

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

@@ -285,7 +285,16 @@
                                 <Loading v-else class="file-load"/>
                                 <a class="file-name" :href="file.path||'javascript:;'" target="_blank">{{file.name}}</a>
                                 <div class="file-size">{{$A.bytesToSize(file.size)}}</div>
-                                <i class="iconfont file-delete" @click="deleteFile(file.id)">&#xe6ea;</i>
+                                <EPopover v-model="file._deling" class="file-delete">
+                                    <div class="task-detail-delete-file-popover">
+                                        <p>{{$L('你确定要删除这个文件吗？')}}</p>
+                                        <div class="buttons">
+                                            <Button size="small" type="text" @click="file._deling=false">取消</Button>
+                                            <Button size="small" type="primary" @click="deleteFile(file)">确定</Button>
+                                        </div>
+                                    </div>
+                                    <i slot="reference" :class="['iconfont', file._deling ? 'deling' : '']">&#xe6ea;</i>
+                                </EPopover>
                             </li>
                         </ul>
                         <ul class="item-content">
@@ -1093,13 +1102,14 @@ export default {
             });
         },
 
-        deleteFile(file_id) {
+        deleteFile(file) {
-            this.$store.dispatch("forgetTaskFile", file_id)
+            this.$set(file, '_deling', false);
+            this.$store.dispatch("forgetTaskFile", file.id)
             //
             this.$store.dispatch("call", {
                 url: 'project/task/filedelete',
                 data: {
-                    file_id,
+                    file_id: file.id,
                 },
             }).catch(({msg}) => {
                 $A.modalError(msg);

resources/assets/sass/element.scss

@@ -8,6 +8,7 @@ $--dropdown-menuItem-hover-color: #606266;
 @import "~element-ui/packages/theme-chalk/src/common/transition";
 @import "~element-ui/packages/theme-chalk/src/avatar";
 @import "~element-ui/packages/theme-chalk/src/tooltip";
+@import "~element-ui/packages/theme-chalk/src/popover";
 @import "~element-ui/packages/theme-chalk/src/dropdown";
 @import "~element-ui/packages/theme-chalk/src/dropdown-menu";
 @import "~element-ui/packages/theme-chalk/src/dropdown-item";

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

@@ -183,19 +183,26 @@
                                 color: #bbbbbb;
                             }
                             .file-delete {
-                                display: none;
                                 padding-left: 12px;
-                                font-size: 14px;
+                                .iconfont {
-                                cursor: pointer;
+                                    display: none;
-                                color: #aaaaaa;
+                                    font-size: 14px;
-                                transition: color 0.3s;
+                                    color: #aaaaaa;
-                                &:hover {
+                                    transition: color 0.3s;
-                                    color: #ff0000;
+                                    cursor: pointer;
+                                    &:hover {
+                                        color: #ff0000;
+                                    }
+                                    &.deling {
+                                        display: inline-block;
+                                    }
                                 }
                             }
                             &:hover {
                                 .file-delete {
-                                    display: inline-block;
+                                    .iconfont {
+                                        display: inline-block;
+                                    }
                                 }
                             }
                         }
@@ -277,7 +284,6 @@
                             .subtask-avatar {
                                 height: 26px;
                                 line-height: 26px;
-                                margin-top: -2px;
                                 cursor: pointer;
                             }
                             .ivu-icon-ios-loading {
@@ -540,6 +546,17 @@
     }
 }
 
+.task-detail-delete-file-popover {
+    max-width: 200px;
+    .buttons {
+        text-align: right;
+        margin-top: 12px;
+        .ivu-btn-small {
+            font-size: 12px
+        }
+    }
+}
+
 .task-detail-avatar-buttons {
     margin-top: 12px;
     margin-bottom: 4px;