feature: 所有管理空间下的人员选择器编辑组件支持默认为空，编辑不可为空限制

frontend/src/views/grading-admin/index.vue

@@ -68,6 +68,7 @@
                     :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"
@@ -183,6 +184,7 @@
               :ref="`managerRef${$index}`"
               :placeholder="$t(`m.verify['请输入']`)"
               :allow-empty="true"
+              :is-edit-allow-empty="false"
               :value="row.members"
               :index="$index"
               @on-change="handleUpdateMembers"
@@ -642,10 +644,6 @@
           members: members || this.formData.members,
           id: this.formData.id
         };
-        if (!params.members.length) {
-          this.messageWarn(this.$t(`m.verify['管理员不能为空']`), 3000);
-          return;
-        }
         try {
           await this.$store.dispatch(url, params);
           this.messageSuccess(this.$t(`m.info['编辑成功']`), 3000);

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);

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 () {
@@ -201,6 +207,12 @@
 
       triggerChange () {
         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({

frontend/src/views/my-manage-space/index.vue

@@ -92,6 +92,8 @@
                     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"
@@ -229,6 +231,7 @@
               :ref="`managerRef${$index}`"
               :placeholder="$t(`m.verify['请输入']`)"
               :allow-empty="true"
+              :is-edit-allow-empty="false"
               :value="row.members"
               :index="$index"
               @on-change="handleUpdateMembers"
@@ -611,10 +614,6 @@
           members: members || this.formData.members,
           id: this.formData.id
         };
-        if (!params.members.length) {
-          this.messageWarn(this.$t(`m.verify['管理员不能为空']`), 3000);
-          return;
-        }
         try {
           await this.$store.dispatch(url, params);
           this.messageSuccess(this.$t(`m.info['编辑成功']`), 3000);