From d2b8d0372e7d4b6d3855b1ec8791a6e2e473ed45 Mon Sep 17 00:00:00 2001
From: kuaifan <aipaw@live.cn>
Date: Wed, 20 Mar 2024 13:44:22 +0900
Subject: [PATCH] =?UTF-8?q?perf(client):=20=E4=BC=98=E5=8C=96=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E4=BB=BB=E5=8A=A1=E5=8F=AF=E8=A7=81=E6=80=A7=E7=82=B9?=
 =?UTF-8?q?=E5=87=BB=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../js/pages/manage/components/TaskAdd.vue    | 98 ++++++++++++-------
 .../sass/pages/components/task-add.scss       | 12 +++
 2 files changed, 73 insertions(+), 37 deletions(-)

diff --git a/resources/assets/js/pages/manage/components/TaskAdd.vue b/resources/assets/js/pages/manage/components/TaskAdd.vue
index 2dea1b3d5..5016b130f 100644
--- a/resources/assets/js/pages/manage/components/TaskAdd.vue
+++ b/resources/assets/js/pages/manage/components/TaskAdd.vue
@@ -93,50 +93,53 @@
                     border/>
             </FormItem>
             <FormItem>
-                <div slot="label">
-                    <EDropdown ref="eDropdownRef" trigger="click" placement="bottom" @command="dropVisible">
-                        <span class="visibility-text">{{$L('可见性')}}
-                            <i class="taskfont">&#xe740;</i>
-                        </span>
-                        <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 slot="label" class="visibility-text" @click="showCisibleDropdown">
+                    {{ $L('可见性') }}
+                    <i class="taskfont">&#xe740;</i>
                 </div>
-                <div class="ivu-input task-add-visibility" v-if="addData.visibility_appoint < 3" @click="showCisibleDropdown">
-                    <span v-if="addData.visibility_appoint == 1">{{$L('项目人员可见')}}</span>
-                    <span v-else-if="addData.visibility_appoint == 2">{{$L('任务人员可见')}}</span>
+                <div
+                    v-if="addData.visibility_appoint == 1 || addData.visibility_appoint == 2"
+                    ref="visibilityText"
+                    class="ivu-input task-add-visibility"
+                    @click="showCisibleDropdown">
+                    {{ addData.visibility_appoint == 1 ? $L('项目人员可见') : $L('任务人员可见') }}
                 </div>
-                <UserSelect v-else
+                <UserSelect
+                    v-else
                     ref="visibleUserSelectRef"
                     v-model="addData.visibility_appointor"
                     :avatar-size="24"
                     :title="$L('选择指定人员')"
                     :project-id="addData.project_id"
                     @on-show-change="visibleUserSelectShowChange"
-                    border
-                />
+                    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>
@@ -559,8 +562,29 @@ export default {
             this.$emit("input", !this.value)
         },
 
-        showCisibleDropdown(){
-            this.$refs.eDropdownRef.show()
+        showCisibleDropdown(e){
+            let eRect = null
+            if (e === null) {
+                eRect = this.$refs.visibilityText?.getBoundingClientRect()
+            } else {
+                eRect = e.target.getBoundingClientRect()
+            }
+            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){
diff --git a/resources/assets/sass/pages/components/task-add.scss b/resources/assets/sass/pages/components/task-add.scss
index 1046bedea..5a98a3913 100644
--- a/resources/assets/sass/pages/components/task-add.scss
+++ b/resources/assets/sass/pages/components/task-add.scss
@@ -1,4 +1,5 @@
 .task-add {
+    position: relative;
     .head {
         display: flex;
         align-items: center;
@@ -54,6 +55,17 @@
     }
     .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;