perf: 优化通用菜单

resources/assets/js/components/DropdownMenu.vue

@@ -4,17 +4,18 @@
         trigger="click"
         class="general-operation-dropdown"
         placement="bottom"
-        size="small"
+        :size="size"
         :style="styles"
         @command="onCommand"
         @visible-change="visibleChange">
         <div ref="icon" class="general-operation-icon"></div>
         <EDropdownMenu ref="dropdownMenu" slot="dropdown" class="general-operation-more-dropdown menu-dropdown">
-            <li class="general-operation-more-warp small">
+            <li class="general-operation-more-warp" :class="[size]">
                 <ul :style="ulStyle">
                     <EDropdownItem
                         v-for="(item, key) in list"
                         :key="key"
+                        :class="item.className"
                         :command="item.value"
                         :divided="!!item.divided"
                         :disabled="(active === item.value && !activeClick) || !!item.disabled">
@@ -40,6 +41,7 @@ export default {
 
             list: [],           // 数据列表: [{label: '', value: ''}]
             active: '',         // 当前选中的值
+            size: 'small',      // 下拉框大小
             activeClick: false, // 当前选中的值是否可以被点击
             onUpdate: null,     // 选中后的回调函数
             scrollHide: true,   // 滚动立即隐藏
@@ -82,6 +84,7 @@ export default {
                 }
                 this.list = data.list;
                 this.active = data.active && this.list.find(item => item.value === data.active) ? data.active : '';
+                this.size = ['small', 'medium', 'large'].includes(data.size) ? data.size : 'small';
                 this.activeClick = typeof data.activeClick === "boolean" ? data.activeClick : false;
                 this.onUpdate = typeof data.onUpdate === "function" ? data.onUpdate : null;
                 this.scrollHide = typeof data.scrollHide === "boolean" ? data.scrollHide : true;

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

@@ -123,32 +123,6 @@
                     @on-show-change="visibleUserSelectShowChange"
                     border/>
             </FormItem>
-            <EDropdown ref="eDropdownRef" class="calculate-dropdown" trigger="click" placement="bottom" @command="dropVisible">
-                <div class="calculate-content"></div>
-                <EDropdownMenu slot="dropdown">
-                    <EDropdownItem :command="1">
-                        <div class="task-menu-icon" >
-                            <Icon v-if="addData.visibility_appoint == 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" >
-                            <Icon v-if="addData.visibility_appoint == 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" >
-                            <Icon v-if="addData.visibility_appoint == 3" class="completed" :type="'md-checkmark-circle'"/>
-                            <Icon v-else class="uncomplete" :type="'md-radio-button-off'"/>
-                            {{$L('指定成员')}}
-                        </div>
-                    </EDropdownItem>
-                </EDropdownMenu>
-            </EDropdown>
             <div class="subtasks">
                 <div v-if="addData.subtasks.length > 0" class="sublist">
                     <Row>
@@ -575,29 +549,21 @@ export default {
             this.$emit("input", !this.value)
         },
 
-        showCisibleDropdown(e){
+        showCisibleDropdown(event){
-            let eRect = null
+            const list = [
-            if (e === null) {
+                {label: '项目人员', value: 1},
-                eRect = this.$refs.visibilityText?.getBoundingClientRect()
+                {label: '任务人员', value: 2},
-            } else {
+                {label: '指定成员', value: 3},
-                eRect = e.target.getBoundingClientRect()
+            ];
+            this.$store.state.menuOperation = {
+                event,
+                list,
+                size: 'large',
+                active: this.addData.visibility_appoint,
+                onUpdate: (value) => {
+                    this.dropVisible(value)
+                }
             }
-            if (eRect === null) {
-                return
-            }
-            const boxRect = this.$el.getBoundingClientRect()
-            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)
         },
 
         visibleUserSelectShowChange(isShow){

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

@@ -374,60 +374,6 @@
                         </EDropdownMenu>
                     </EDropdown>
                 </div>
-                <EDropdown ref="eDropdownRef" class="calculate-dropdown" trigger="click" placement="bottom" @command="dropVisible">
-                    <div class="calculate-content"></div>
-                    <EDropdownMenu slot="dropdown">
-                        <EDropdownItem :command="1">
-                            <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">
-                                <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">
-                                <Icon v-if="taskDetail.visibility == 3" class="completed" :type="'md-checkmark-circle'"/>
-                                <Icon v-else class="uncomplete" :type="'md-radio-button-off'"/>
-                                {{$L('指定成员')}}
-                            </div>
-                        </EDropdownItem>
-                    </EDropdownMenu>
-                </EDropdown>
-                <EDropdown ref="eDeadlineRef" class="calculate-dropdown" trigger="click" placement="bottom" @command="dropDeadline">
-                    <div class="calculate-content"></div>
-                    <EDropdownMenu slot="dropdown">
-                        <EDropdownItem :command="1">
-                            {{$L('任务延期')}}
-                        </EDropdownItem>
-                        <EDropdownItem :command="2">
-                            {{$L('修改时间')}}
-                        </EDropdownItem>
-                        <EDropdownItem :command="3">
-                            {{$L('清除时间')}}
-                        </EDropdownItem>
-                    </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>
             </Scrollbar>
             <TaskUpload ref="upload" class="upload" @on-select-file="onSelectFile"/>
         </div>
@@ -1623,7 +1569,9 @@ export default {
                 case 'visible':
                     this.visibleForce = true;
                     this.$nextTick(() => {
-                        this.showCisibleDropdown(null);
+                        this.showCisibleDropdown({
+                            target: this.$refs.visibilityText
+                        });
                     });
                     break;
 
@@ -1963,22 +1911,38 @@ export default {
             }, 0)
         },
 
-        showCisibleDropdown(e){
+        showCisibleDropdown(event){
-            let eRect = null
+            const list = [
-            if (e === null) {
+                {label: '项目人员', value: 1},
-                eRect = this.$refs.visibilityText?.getBoundingClientRect()
+                {label: '任务人员', value: 2},
-            } else {
+                {label: '指定成员', value: 3},
-                eRect = e.target.getBoundingClientRect()
+            ];
+            this.$store.state.menuOperation = {
+                event,
+                list,
+                size: 'large',
+                active: this.taskDetail.visibility,
+                onUpdate: (value) => {
+                    this.dropVisible(value)
+                }
             }
-            if (eRect === null) {
-                return
-            }
-            this.showDropdown(this.$refs.eDropdownRef, eRect)
         },
 
-        showAtDropdown({target}){
+        showAtDropdown(event){
             this.timeOpen = false
-            this.showDropdown(this.$refs.eDeadlineRef, target.getBoundingClientRect())
+            const list = [
+                {label: '任务延期', value: 1},
+                {label: '修改时间', value: 2},
+                {label: '清除时间', value: 3},
+            ];
+            this.$store.state.menuOperation = {
+                event,
+                list,
+                size: 'large',
+                onUpdate: (value) => {
+                    this.dropDeadline(value)
+                }
+            }
         },
 
         visibleUserSelectShowChange(isShow){
@@ -2064,9 +2028,21 @@ export default {
             })
         },
 
-        showFileDropdown(file, {target}){
+        showFileDropdown(file, event){
             this.operationFile = file
-            this.showDropdown(this.$refs.eFileRef, target.getBoundingClientRect())
+            const list = [
+                {label: '查看附件', value: 1},
+                {label: '下载附件', value: 2},
+                {label: '删除附件', value: 3, className: 'task-calc-warn-text'},
+            ];
+            this.$store.state.menuOperation = {
+                event,
+                list,
+                size: 'large',
+                onUpdate: (value) => {
+                    this.dropFile(value)
+                }
+            }
         },
 
         dropFile(command) {

resources/assets/sass/pages/components/general-operation.scss

@@ -44,6 +44,9 @@
                             height: 26px;
                             text-align: right;
                             margin-left: 6px;
+                            display: flex;
+                            justify-content: flex-end;
+                            align-items: center;
 
                             > i {
                                 font-size: 14px;

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

@@ -95,17 +95,6 @@
     }
     .task-add-form,
     .task-add-advanced {
-        .calculate-dropdown {
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            width: 0;
-            height: 0;
-            z-index: -1;
-            pointer-events: none;
-        }
         .title {
             .ivu-input {
                 font-weight: 500;

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

@@ -605,30 +605,6 @@
                     color: $primary-desc-color;
                 }
             }
-
-            .calculate-dropdown {
-                position: absolute;
-                top: 0;
-                left: 0;
-                right: 0;
-                bottom: 0;
-                width: 0;
-                height: 0;
-                z-index: -1;
-                pointer-events: none;
-                .calculate-content {
-                    position: absolute;
-                    top: 0;
-                    left: 0;
-                    right: 0;
-                    bottom: 0;
-                    width: 100%;
-                    height: 100%;
-                }
-                .calculate-text {
-                    color: $flow-status-start-color;
-                }
-            }
         }
         .upload {
             display: none;