Merge pull request #2830 from TencentBlueKing/develop

Develop
TencentBlueKing · Nov 12, 2024 · 6d71d6e · 6d71d6e
2 parents b6ebbfe + c3cef5b
commit 6d71d6e
Show file tree

Hide file tree

Showing 7 changed files with 284 additions and 51 deletions.
diff --git a/frontend/src/views/grading-admin/index.vue b/frontend/src/views/grading-admin/index.vue
@@ -61,13 +61,30 @@
             </bk-table-column>
             <bk-table-column prop="members" width="300">
               <template slot-scope="child">
-                <iam-edit-member-selector
-                  field="members"
-                  width="200"
-                  :placeholder="$t(`m.verify['请输入']`)"
-                  :value="child.row.members"
-                  :index="child.$index"
-                  @on-change="handleUpdateSubMembers" />
+                <template v-if="child.row.isEdit || child.row.members.length > 0">
+                  <IamEditMemberSelector
+                    field="members"
+                    width="200"
+                    :ref="`subManagerRef${child.$index}`"
+                    :placeholder="$t(`m.verify['请输入']`)"
+                    :allow-empty="true"
+                    :is-edit-allow-empty="false"
+                    :value="child.row.members"
+                    :index="child.$index"
+                    @on-change="handleUpdateSubMembers"
+                    @on-empty-change="handleEmptyMemberChange(...arguments, child.row)"
+                  />
+                </template>
+                <template v-else>
+                  <IamManagerEditInput
+                    field="members"
+                    style="width: 100%;"
+                    :is-show-other="true"
+                    :placeholder="$t(`m.verify['请输入']`)"
+                    :value="getMemberFilter(child.row.members)"
+                    @handleShow="handleOpenSubManagerEdit(child.row, child.$index)"
+                  />
+                </template>
               </template>
             </bk-table-column>
             <bk-table-column prop="description" :min-width="200">
@@ -160,13 +177,30 @@
       </bk-table-column>
       <bk-table-column :label="$t(`m.levelSpace['管理员']`)" prop="members" width="300">
         <template slot-scope="{ row , $index }">
-          <iam-edit-member-selector
-            field="members"
-            width="200"
-            :placeholder="$t(`m.verify['请输入']`)"
-            :value="row.members"
-            :index="$index"
-            @on-change="handleUpdateMembers" />
+          <template v-if="row.isEdit || row.members.length > 0">
+            <IamEditMemberSelector
+              field="members"
+              width="200"
+              :ref="`managerRef${$index}`"
+              :placeholder="$t(`m.verify['请输入']`)"
+              :allow-empty="true"
+              :is-edit-allow-empty="false"
+              :value="row.members"
+              :index="$index"
+              @on-change="handleUpdateMembers"
+              @on-empty-change="handleEmptyMemberChange(...arguments, row)"
+            />
+          </template>
+          <template v-else>
+            <IamManagerEditInput
+              field="members"
+              style="width: 100%;"
+              :is-show-other="true"
+              :placeholder="$t(`m.verify['请输入']`)"
+              :value="getMemberFilter(row.members)"
+              @handleShow="handleOpenManagerEdit(row, $index)"
+            />
+          </template>
         </template>
       </bk-table-column>
       <bk-table-column :label="$t(`m.common['描述']`)" :min-width="200">
@@ -279,6 +313,7 @@
   import IamEditInput from '@/views/my-manage-space/components/iam-edit/input';
   import IamEditMemberSelector from '@/views/my-manage-space/components/iam-edit/member-selector';
   import IamEditTextarea from '@/views/my-manage-space/components/iam-edit/textarea';
+  import IamManagerEditInput from '@/components/iam-edit/input';
   import IamSearchSelect from '@/components/iam-search-select';
   import ManageInterviewDialog from '@/components/manage-interview-dialog';
 
@@ -288,6 +323,7 @@
       ConfirmDialog,
       ApplyDialog,
       IamEditInput,
+      IamManagerEditInput,
       IamEditMemberSelector,
       IamEditTextarea,
       IamSearchSelect,
@@ -418,6 +454,13 @@
         return !['child-operate'].includes(column.property) ? 'iam-table-cell-1-cls' : '';
       },
 
+      getMemberFilter (value) {
+        if (value.length) {
+          return _.isArray(value) ? value.map(item => item.username).join(';') : value;
+        }
+        return '--';
+      },
+
       handleExpandChange (row, expandedRows) {
         // if (row.id !== this.gradingAdminId) return;
         this.gradingAdminId = row.id;
@@ -469,6 +512,40 @@
         return JSON.parse(window.localStorage.getItem('gradeManagerList'));
       },
 
+      handleOpenManagerEdit (payload, index) {
+        this.$set(this.tableList[index], 'isEdit', true);
+        this.$nextTick(() => {
+          const managerRef = this.$refs[`managerRef${index}`];
+          if (managerRef) {
+            managerRef.isEditable = true;
+            if (!payload.members.length) {
+              setTimeout(() => {
+                this.$refs[`managerRef${index}`].$refs.selector.focus();
+              }, 10);
+            }
+          }
+        });
+      },
+
+      handleOpenSubManagerEdit (payload, index) {
+        this.$set(payload, 'isEdit', true);
+        this.$nextTick(() => {
+          const subManagerRef = this.$refs[`subManagerRef${index}`];
+          if (subManagerRef) {
+            subManagerRef.isEditable = true;
+            if (!payload.members.length) {
+              setTimeout(() => {
+                subManagerRef.$refs.selector.focus();
+              }, 10);
+            }
+          }
+        });
+      },
+
+      handleEmptyMemberChange (index, row) {
+        row.isEdit = false;
+      },
+
       async fetchGradingAdmin (isTableLoading = false) {
         this.tableLoading = isTableLoading;
         this.setCurrentQueryCache(this.refreshCurrentQuery());
@@ -479,9 +556,12 @@
             name: this.searchValue
           });
           this.pagination.count = data.count || 0;
-          data.results = data.results.map(e => {
-            e.children = [];
-            return e;
+          data.results = data.results.map((item) => {
+            item = Object.assign(item, {
+              isEdit: false,
+              children: []
+            });
+            return item;
           });
           this.tableList.splice(0, this.tableList.length, ...(data.results || []));
           if (this.isStaff) {

diff --git a/frontend/src/views/manage-spaces/secondary-manage-space/index.vue b/frontend/src/views/manage-spaces/secondary-manage-space/index.vue
@@ -29,13 +29,30 @@
       </bk-table-column>
       <bk-table-column :label="$t(`m.levelSpace['管理员']`)" prop="members" width="300">
         <template slot-scope="{ row, $index }">
-          <iam-edit-member-selector
-            field="members"
-            width="200"
-            :placeholder="$t(`m.verify['请输入']`)"
-            :value="row.members"
-            :index="$index"
-            @on-change="handleUpdateMembers(...arguments, row)" />
+          <template v-if="row.isEdit || row.members.length > 0">
+            <IamEditMemberSelector
+              field="members"
+              width="200"
+              :ref="`managerRef${$index}`"
+              :placeholder="$t(`m.verify['请输入']`)"
+              :allow-empty="true"
+              :is-edit-allow-empty="false"
+              :value="row.members"
+              :index="$index"
+              @on-change="handleUpdateMembers"
+              @on-empty-change="handleEmptyMemberChange(...arguments, row)"
+            />
+          </template>
+          <template v-else>
+            <IamManagerEditInput
+              field="members"
+              style="width: 100%;"
+              :is-show-other="true"
+              :placeholder="$t(`m.verify['请输入']`)"
+              :value="getMemberFilter(row.members)"
+              @handleShow="handleOpenManagerEdit(row, $index)"
+            />
+          </template>
         </template>
       </bk-table-column>
       <bk-table-column :label="$t(`m.common['描述']`)">
@@ -89,11 +106,13 @@
   import { buildURLParams } from '@/common/url';
   import { formatCodeData, getWindowHeight } from '@/common/util';
   import IamEditMemberSelector from '@/views/my-manage-space/components/iam-edit/member-selector';
+  import IamManagerEditInput from '@/components/iam-edit/input';
 
   export default {
     name: 'secondaryManageSpace',
     components: {
-      IamEditMemberSelector
+      IamEditMemberSelector,
+      IamManagerEditInput
     },
     data () {
       return {
@@ -215,6 +234,32 @@
         await this.fetchGradingAdmin(true);
       },
 
+      getMemberFilter (value) {
+        if (value.length) {
+          return Array.isArray(value) ? value.map(item => item.username).join(';') : value;
+        }
+        return '--';
+      },
+
+      handleOpenManagerEdit (payload, index) {
+        this.$set(this.tableList[index], 'isEdit', true);
+        this.$nextTick(() => {
+          const managerRef = this.$refs[`managerRef${index}`];
+          if (managerRef) {
+            managerRef.isEditable = true;
+            if (!payload.members.length) {
+              setTimeout(() => {
+                this.$refs[`managerRef${index}`].$refs.selector.focus();
+              }, 10);
+            }
+          }
+        });
+      },
+
+      handleEmptyMemberChange (index, row) {
+        row.isEdit = false;
+      },
+
       handleNavAuthBoundary (payload) {
         window.localStorage.setItem('iam-header-name-cache', payload.name);
         this.$store.commit('updateIndex', 1);

diff --git a/frontend/src/views/my-manage-space/components/iam-edit/member-selector.vue b/frontend/src/views/my-manage-space/components/iam-edit/member-selector.vue
@@ -86,9 +86,15 @@
           return ['detail', 'edit'].includes(value);
         }
       },
+      // 默认允许空
       allowEmpty: {
         type: Boolean,
         default: false
+      },
+      // 编辑不允许空
+      isEditAllowEmpty: {
+        type: Boolean,
+        default: true
       }
     },
     data () {
@@ -110,6 +116,9 @@
       },
       isEditMode () {
         return this.mode === 'edit';
+      },
+      isAllowTrigger () {
+        return JSON.stringify(this.displayValue) !== JSON.stringify(this.value);
       }
     },
     watch: {
@@ -169,10 +178,9 @@
       handleEnter (event) {
         if (!this.isEditable) return;
         const { key, keyCode } = event;
-        const isUpdate = JSON.stringify(this.displayValue) !== JSON.stringify(this.value);
         if (key === 'Enter' && keyCode === 13) {
           this.handleDefaultEmpty();
-          if (isUpdate) {
+          if (this.isAllowTrigger) {
             this.handleEmptyChange();
             this.isEditable = false;
           } else {
@@ -198,7 +206,14 @@
       },
             
       triggerChange () {
-        if (JSON.stringify(this.displayValue) !== JSON.stringify(this.value)) {
+        console.log(this.isAllowTrigger, this.displayValue, '显示内容');
+        // 单独处理初始化为空但编辑不能为空数据
+        if (!this.displayValue.length && !this.isEditAllowEmpty) {
+          this.displayValue = [...this.value];
+          this.messageWarn(this.$t(`m.verify['管理员不能为空']`), 3000);
+          return;
+        }
+        if (this.isAllowTrigger) {
           this.isLoading = true;
           this.remoteHandler({
             [this.field]: this.displayValue
@@ -229,7 +244,7 @@
       handleRtxBlur () {
         this.isEditable = false;
         this.handleDefaultEmpty();
-        if (JSON.stringify(this.displayValue) !== JSON.stringify(this.value)) {
+        if (this.isAllowTrigger) {
           this.handleEmptyChange();
         }
       },