no message

resources/assets/js/components/DropdownMenu.vue

@@ -19,7 +19,10 @@
                         :divided="!!item.divided"
                         :disabled="(active === item.value && !activeClick) || !!item.disabled">
                         <div class="item-box" :style="item.style" :class="item.className">
-                            <div class="item">{{language ? $L(item.label) : item.label}}</div>
+                            <div class="item">
+                                <div v-if="item.prefix" class="item-prefix" v-html="item.prefix"></div>
+                                <div class="item-label">{{language ? $L(item.label) : item.label}}</div>
+                            </div>
                             <div v-if="tickShow" class="tick">
                                 <i v-if="active === item.value && !item.disabled" class="taskfont">&#xe684;</i>
                             </div>
@@ -46,17 +49,17 @@ export default {
             scrollHide: true,   // 滚动立即隐藏
             tickShow: true,     // 是否显示打勾（默认为：true，如果 active === undefined 默认为：false）
             maxHeight: 0,       // 滚动区域最大高度
-            language: true,     // 是否国际化 item.label
+            language: true,     // 是否国际化 item.label（默认：true）
 
-            element: null,
+            scrollTarget: null,
-            target: null,
+            menuTarget: null,
             styles: {},
         }
     },
 
     beforeDestroy() {
-        if (this.target) {
+        if (this.scrollTarget) {
-            this.target.removeEventListener('scroll', this.handlerEventListeners);
+            this.scrollTarget.removeEventListener('scroll', this.handlerEventListeners);
         }
     },
 
@@ -71,7 +74,7 @@ export default {
     watch: {
         menuOperation(data) {
             if (data.event && data.list) {
-                if (this.$refs.dropdown.visible && this.element === data.event.target) {
+                if (this.$refs.dropdown.visible && this.menuTarget === data.event.target) {
                     this.hide();
                     return;
                 }
@@ -99,7 +102,21 @@ export default {
             } else {
                 this.hide()
             }
-        }
+        },
+
+        windowScrollY() {
+            if (!this.visible || !this.menuTarget) {
+                return
+            }
+            const eventRect = this.menuTarget.getBoundingClientRect();
+            this.styles = {
+                left: `${eventRect.left}px`,
+                top: `${eventRect.top}px`,
+                width: `${eventRect.width}px`,
+                height: `${eventRect.height}px`,
+            };
+            this.updatePopper();
+        },
     },
 
     methods: {
@@ -129,23 +146,23 @@ export default {
         },
 
         setupEventListeners(event) {
-            this.element = event.target;
+            this.menuTarget = event.target;
-            let target = this.getScrollParent(this.element);
+            let target = this.getScrollParent(this.menuTarget);
             if (target === window.document.body || target === window.document.documentElement) {
                 target = window;
             }
-            if (this.target) {
+            if (this.scrollTarget) {
-                if (this.target === target) {
+                if (this.scrollTarget === target) {
                     return;
                 }
-                this.target.removeEventListener('scroll', this.handlerEventListeners);
+                this.scrollTarget.removeEventListener('scroll', this.handlerEventListeners);
             }
-            this.target = target;
+            this.scrollTarget = target;
-            this.target.addEventListener('scroll', this.handlerEventListeners);
+            this.scrollTarget.addEventListener('scroll', this.handlerEventListeners);
         },
 
         handlerEventListeners(e) {
-            if (!this.visible || !this.element) {
+            if (!this.visible || !this.menuTarget) {
                 return
             }
             if (this.scrollHide) {
@@ -153,7 +170,7 @@ export default {
                 return;
             }
             const scrollRect = e.target.getBoundingClientRect();
-            const eventRect = this.element.getBoundingClientRect();
+            const eventRect = this.menuTarget.getBoundingClientRect();
             if (eventRect.top < scrollRect.top || eventRect.top > scrollRect.top + scrollRect.height) {
                 this.hide();
                 return;

resources/assets/js/pages/manage/components/ChatInput/index.vue

@@ -652,16 +652,7 @@ export default {
         },
 
         sendContent() {
-            const {sendTip} = this.$refs
+            this.tempHiddenSendTip();
-            if (sendTip && sendTip.$refs.popper) {
-                sendTip.$refs.popper.style.visibility = 'hidden'
-                sendTip.showPopper = false
-                setTimeout(_ => {
-                    if (sendTip.$refs.popper) {
-                        sendTip.$refs.popper.style.visibility = 'visible'
-                    }
-                }, 300)
-            }
             return this.sendClass === 'recorder' ? '长按录音' : '发送'
         },
 
@@ -1370,6 +1361,10 @@ export default {
                     break;
 
                 case 'click':
+                    if (this.showMenu) {
+                        this.tempHiddenSendTip()
+                        this.showMenu = false;
+                    }
                     if (this.touchFocus) {
                         this.quill.blur();
                         this.quill.focus();
@@ -2318,6 +2313,19 @@ export default {
                 mention.setMentionContainerPosition()
             }
         },
+
+        tempHiddenSendTip() {
+            const {sendTip} = this.$refs
+            if (sendTip && sendTip.$refs.popper) {
+                sendTip.$refs.popper.style.visibility = 'hidden'
+                sendTip.showPopper = false
+                setTimeout(_ => {
+                    if (sendTip.$refs.popper) {
+                        sendTip.$refs.popper.style.visibility = 'visible'
+                    }
+                }, 300)
+            }
+        },
     }
 }
 </script>

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

@@ -174,22 +174,7 @@
                         </div>
                         <ul class="item-content priority">
                             <li>
-                                <EDropdown
+                                <TaskPriority :backgroundColor="taskDetail.p_color"><span ref="priorityText" @click="onPriority">{{taskDetail.p_name}}</span></TaskPriority>
-                                    ref="priority"
-                                    trigger="click"
-                                    placement="bottom"
-                                    @command="updateData('priority', $event)">
-                                    <TaskPriority :backgroundColor="taskDetail.p_color">{{taskDetail.p_name}}</TaskPriority>
-                                    <EDropdownMenu slot="dropdown">
-                                        <EDropdownItem v-for="(item, key) in taskPriority" :key="key" :command="item">
-                                            <i
-                                                class="taskfont"
-                                                :style="{color:item.color}"
-                                                v-html="taskDetail.p_name == item.name ? '&#xe61d;' : '&#xe61c;'"></i>
-                                            {{item.name}}
-                                        </EDropdownItem>
-                                    </EDropdownMenu>
-                                </EDropdown>
                             </li>
                         </ul>
                     </FormItem>
@@ -279,22 +264,11 @@
                         <div class="item-label" slot="label">
                             <i class="taskfont">&#xe93f;</i>{{$L('重复周期')}}
                         </div>
-                        <ul class="item-content">
+                        <ul class="item-content loop">
                             <li>
-                                <EDropdown
+                                <ETooltip :disabled="$isEEUiApp || windowTouch || !taskDetail.loop_at" :content="`${$L('下个周期')}: ${taskDetail.loop_at}`" placement="right">
-                                    ref="loop"
+                                    <span ref="loopText" @click="onLoop">{{$L(loopLabel(taskDetail.loop))}}</span>
-                                    trigger="click"
+                                </ETooltip>
-                                    placement="bottom"
-                                    @command="updateData('loop', $event)">
-                                    <ETooltip :disabled="$isEEUiApp || windowTouch || !taskDetail.loop_at" :content="`${$L('下个周期')}: ${taskDetail.loop_at}`" placement="right">
-                                        <span>{{$L(loopLabel(taskDetail.loop))}}</span>
-                                    </ETooltip>
-                                    <EDropdownMenu slot="dropdown" class="task-detail-loop">
-                                        <EDropdownItem v-for="item in loops" :key="item.key" :command="item.key">
-                                            {{$L(item.label)}}
-                                        </EDropdownItem>
-                                    </EDropdownMenu>
-                                </EDropdown>
                             </li>
                         </ul>
                     </FormItem>
@@ -356,23 +330,13 @@
                     </FormItem>
                 </Form>
                 <div v-if="menuList.length > 0" class="add">
-                    <EDropdown
+                    <div class="add-wrap">
-                        trigger="click"
+                        <div class="add-button" @click="onAddItem">
-                        placement="bottom"
-                        @command="dropAdd">
-                        <div class="add-button">
                             <i class="taskfont">&#xe6f2;</i>
                             <span>{{$L('添加')}}</span>
                             <em>{{menuText}}</em>
                         </div>
-                        <EDropdownMenu slot="dropdown">
+                    </div>
-                            <EDropdownItem v-for="(item, key) in menuList" :key="key" :command="item.command">
-                                <div class="item">
-                                    <i class="taskfont" v-html="item.icon"></i>{{$L(item.name)}}
-                                </div>
-                            </EDropdownItem>
-                        </EDropdownMenu>
-                    </EDropdown>
                 </div>
             </Scrollbar>
             <TaskUpload ref="upload" class="upload" @on-select-file="onSelectFile"/>
@@ -1542,7 +1506,61 @@ export default {
             this.logLoadIng = load
         },
 
-        dropAdd(command) {
+        onPriority(event) {
+            const list = this.taskPriority.map(item => {
+                return {
+                    label: item.name,
+                    value: item,
+                    prefix: `<i class="taskfont" style="color:${item.color};font-size:18px">${this.taskDetail.p_name == item.name ? '&#xe61d;' : '&#xe61c;'}</i>`,
+                }
+            });
+            this.$store.commit('menu/operation', {
+                event,
+                list,
+                size: 'large',
+                language: false,
+                onUpdate: (value) => {
+                    this.updateData('priority', value)
+                }
+            })
+        },
+
+        onLoop(event) {
+            const list = this.loops.map(item => {
+                return {
+                    label: item.label,
+                    value: item.key,
+                }
+            });
+            this.$store.commit('menu/operation', {
+                event,
+                list,
+                size: 'large',
+                onUpdate: (value) => {
+                    this.updateData('loop', value)
+                }
+            })
+        },
+
+        onAddItem(event) {
+            const list = this.menuList.map(item => {
+                return {
+                    label: item.name,
+                    value: item.command,
+                    prefix: `<i class="taskfont">${item.icon}</i>`,
+                }
+            });
+            this.$store.commit('menu/operation', {
+                event,
+                list,
+                size: 'large',
+                onUpdate: (value) => {
+                    this.dropAddItem(value)
+                }
+            })
+        },
+
+        dropAddItem(command) {
             switch (command) {
                 case 'tag':
                     this.tagForce = true;
@@ -1554,7 +1572,7 @@ export default {
                 case 'priority':
                     this.$set(this.taskDetail, 'p_name', this.$L('未设置'));
                     this.$nextTick(() => {
-                        this.$refs.priority.show();
+                        this.onPriority({target: this.$refs.priorityText})
                     })
                     break;
 
@@ -1584,7 +1602,7 @@ export default {
                 case 'loop':
                     this.loopForce = true;
                     this.$nextTick(() => {
-                        this.$refs.loop.show();
+                        this.onLoop({target: this.$refs.loopText})
                     })
                     break;
 
@@ -1870,22 +1888,6 @@ 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(event){
             const list = [
                 {label: '项目人员', value: 1},

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

@@ -61,6 +61,12 @@
                         text-overflow: ellipsis;
                         white-space: nowrap;
 
+                        .item-prefix,
+                        .item-label {
+                            display: flex;
+                            align-items: center;
+                        }
+
                         > i {
                             flex-shrink: 0;
                             width: 18px;

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

@@ -44,6 +44,10 @@
                         .task-info {
                             .scroller {
                                 margin-bottom: 4px;
+
+                                .scrollbar-content {
+                                    overflow: visible;
+                                }
                             }
                         }
 
@@ -523,7 +527,17 @@
                             }
                         }
                     }
-
+                    &.priority {
+                        .task-priority {
+                            cursor: pointer;
+                        }
+                    }
+                    &.loop {
+                        margin-top: 6px;
+                        .el-tooltip {
+                            cursor: pointer;
+                        }
+                    }
                     &.subtask-add {
                         margin-top: 2px;
                         > li {
@@ -552,7 +566,8 @@
             .add {
                 margin-top: 12px;
                 margin-bottom: 10px;
-                .el-dropdown {
+                .add-wrap {
+                    display: inline-block;
                     max-width: 100%;
                     .add-button {
                         > em {