fix: 自定义枚举字段交互变更 (#1435)

TencentBlueKing · Nov 30, 2023 · 8eb8be6 · 8eb8be6
1 parent e79131e
commit 8eb8be6
Show file tree

Hide file tree

Showing 9 changed files with 139 additions and 49 deletions.
diff --git a/src/pages/src/hooks/use-validate.ts b/src/pages/src/hooks/use-validate.ts
@@ -78,6 +78,12 @@ export default () => {
     trigger: 'blur',
   };
 
+  const checkSpace = {
+    validator: (value: string) => /^[^\s]*$/.test(value),
+    message: '不能使用空格符',
+    trigger: 'blur',
+  };
+
   return {
     required,
     name,
@@ -90,5 +96,6 @@ export default () => {
     serverBaseUrl,
     apiPath,
     sourceField,
+    checkSpace,
   };
 };
diff --git a/src/pages/src/views/data-source/local-details/EditUser.vue b/src/pages/src/views/data-source/local-details/EditUser.vue
@@ -203,7 +203,7 @@ const files = computed(() => {
 
 const rules = {
   username: [validate.required, validate.userName],
-  full_name: [validate.required, validate.name],
+  full_name: [validate.required, validate.name, validate.checkSpace],
   email: [validate.required, validate.email],
   phone: [validate.required, validate.phone],
 };

diff --git a/src/pages/src/views/data-source/new-data/Http.vue b/src/pages/src/views/data-source/new-data/Http.vue
@@ -284,7 +284,7 @@ const pageSizeList = ref([
 ]);
 
 const rulesServerConfig = {
-  name: [validate.required, validate.name],
+  name: [validate.required, validate.name, validate.checkSpace],
   'server_config.server_base_url': [validate.required, validate.serverBaseUrl],
   'server_config.user_api_path': [validate.required, validate.apiPath],
   'server_config.department_api_path': [validate.required, validate.apiPath],

diff --git a/src/pages/src/views/data-source/new-data/Local.vue b/src/pages/src/views/data-source/new-data/Local.vue
@@ -272,7 +272,7 @@ const formData = reactive({
 });
 
 const rulesInfo = {
-  name: [validate.required, validate.name],
+  name: [validate.required, validate.name, validate.checkSpace],
   min_length: [validate.required],
 };
 

diff --git a/src/pages/src/views/organization/details/EditDetailsInfo.vue b/src/pages/src/views/organization/details/EditDetailsInfo.vue
@@ -418,4 +418,10 @@ const handleChange = () => {
     margin-right: 8px;
   }
 }
+
+::v-deep .bk-select {
+  .angle-up {
+    display: none !important;
+  }
+}
 </style>
diff --git a/src/pages/src/views/setting/FieldSetting.vue b/src/pages/src/views/setting/FieldSetting.vue
@@ -37,16 +37,16 @@
             <i :class="fieldStatus(row.required)"></i>
           </template>
         </bk-table-column>
-        <!-- <bk-table-column prop="unique" label="是否唯一">
+        <bk-table-column prop="unique" label="是否唯一">
           <template #default="{ row }">
             <i :class="fieldStatus(row.unique)"></i>
           </template>
-        </bk-table-column> -->
-        <bk-table-column prop="builtin" label="是否可编辑">
+        </bk-table-column>
+        <!-- <bk-table-column prop="builtin" label="是否可编辑">
           <template #default="{ row }">
             <i :class="fieldStatus(!row.builtin)"></i>
           </template>
-        </bk-table-column>
+        </bk-table-column> -->
         <bk-table-column label="操作">
           <template #default="{ row }">
             <span v-bk-tooltips="{ content: '该内置字段，不支持修改', disabled: !row.builtin }">
@@ -163,9 +163,10 @@ const addField = () => {
     builtin: false,
     default: 0,
     options: [
-      { id: 0, value: '' },
-      { id: 1, value: '' },
+      { id: '', value: '' },
+      { id: '', value: '' },
     ],
+    unique: false,
   };
   fieldData.isShow = true;
 };

diff --git a/src/pages/src/views/setting/FieldsAdd.vue b/src/pages/src/views/setting/FieldsAdd.vue
@@ -88,12 +88,18 @@
               </div>
             </div>
             <div class="select-box icon-box">
-              <bk-form ref="enumRef" :model="item" :rules="rulesEnum">
-                <bk-form-item property="value" required>
+              <bk-form class="enum-form" ref="enumRef" :model="item" :rules="rulesEnum">
+                <bk-form-item class="enum-id" property="id" required>
+                  <bk-input
+                    v-model="item.id"
+                    placeholder="请输入ID" />
+                </bk-form-item>
+                <bk-form-item class="enum-value" property="value" required>
                   <bk-input
                     type="text"
                     class="select-text"
                     v-model="item.value"
+                    placeholder="请输入值"
                     @change="handleChange"
                   />
                 </bk-form-item>
@@ -117,17 +123,17 @@
     <div class="select-type">
       <bk-checkbox
         :value="fieldsInfor.required"
-        :disabled="fieldsInfor.builtin"
+        :disabled="isEdit"
         v-model="fieldsInfor.required"
         @change="handleChange">
         <span v-bk-tooltips="{ content: '该字段在用户信息里必须填写' }">必填</span>
       </bk-checkbox>
-      <!-- <bk-checkbox
+      <bk-checkbox
         :value="fieldsInfor.unique"
         :disabled="isEdit"
         v-model="fieldsInfor.unique">
         <span v-bk-tooltips="{ content: '该字段在不同用户信息里不能相同' }">唯一</span>
-      </bk-checkbox> -->
+      </bk-checkbox>
       <!-- <bk-checkbox
         :value="fieldsInfor.editable"
         v-model="fieldsInfor.editable"
@@ -164,9 +170,7 @@ const emit = defineEmits(['handleCancel', 'submitData']);
 const validate = useValidate();
 const fieldsRef = ref();
 const enumRef = ref();
-const fieldsInfor = reactive({
-  ...props.currentEditorData,
-});
+const fieldsInfor = reactive(JSON.parse(JSON.stringify({ ...props.currentEditorData })));
 const state = reactive({
   defaultSelected: 'string',
   isDeleteOption: true,
@@ -196,20 +200,54 @@ const typeList = [
 ];
 
 const rulesFields = {
-  display_name: [validate.required, validate.fieldsDisplayName],
+  display_name: [validate.required, validate.fieldsDisplayName, validate.checkSpace],
   name: [validate.required, validate.fieldsName],
 };
 
 const rulesEnum = {
-  value: [validate.required],
+  id: [
+    validate.required,
+    validate.checkSpace,
+    {
+      validator: (value: string) => {
+        const result = blurId();
+        return value !== result;
+      },
+      message: 'id不能重复',
+      trigger: 'blur',
+    },
+  ],
+  value: [
+    validate.required,
+    validate.checkSpace,
+    {
+      validator: (value: string) => {
+        const result = blurValue();
+        return value !== result;
+      },
+      message: 'value不能重复',
+      trigger: 'blur',
+    },
+  ],
 };
 
 const isEdit = computed(() => props?.setType === 'edit');
 
 watch(() => fieldsInfor.data_type, (val) => {
   if (!props?.currentEditorData?.id) {
     fieldsInfor.default = val === 'multi_enum' ? [0] : 0;
+  } else {
+    const defaultIndex = id => fieldsInfor.options.findIndex(item => item.id === id);
+
+    if (val === 'enum') {
+      fieldsInfor.default = defaultIndex(fieldsInfor.default);
+    } else if (val === 'multi_enum') {
+      fieldsInfor.default = fieldsInfor.default.map(defaultIndex);
+    }
   }
+}, {
+  deep: true,
+  immediate: true,
 });
 
 watch(() => fieldsInfor.options.length, (val) => {
@@ -250,6 +288,9 @@ const handleChange = () => {
 // 删除枚举
 const deleteEg = (index) => {
   window.changeInput = true;
+  if (fieldsInfor.data_type === 'enum' && index > 0 && index === fieldsInfor.options.length - 1) {
+    fieldsInfor.default = index - 1;
+  }
   if (fieldsInfor.options.length <= 1) {
     return;
   }
@@ -262,12 +303,12 @@ const addEg = () => {
     return;
   }
   const param = {
-    id: fieldsInfor.options.length,
+    id: '',
     value: '',
   };
   fieldsInfor.options.push(param);
   nextTick(() => {
-    const inputList = document.querySelectorAll('.content-list input');
+    const inputList = document.querySelectorAll('.enum-id input');
     inputList[inputList.length - 1].focus();
   });
 };
@@ -288,37 +329,59 @@ const submitInfor = async () => {
 
     state.btnLoading = true;
 
-    if (isEdit.value) {
-      await putCustomFields({
-        id: fieldsInfor.id,
-        display_name: fieldsInfor.display_name,
-        required: fieldsInfor.required,
-        default: fieldsInfor.default,
-        options: fieldsInfor.options,
-      });
-      emit('submitData', '修改字段成功');
-    } else {
-      const newFieldData = {
-        name: fieldsInfor.name,
-        display_name: fieldsInfor.display_name,
-        required: fieldsInfor.required,
-        data_type: fieldsInfor.data_type,
-      };
-
-      if (isEnumType) {
-        newFieldData.options = fieldsInfor.options;
-        newFieldData.default = fieldsInfor.default;
-      }
+    const newFieldData = {
+      ...(isEdit.value ? { id: fieldsInfor.id } : { name: fieldsInfor.name }),
+      display_name: fieldsInfor.display_name,
+      required: fieldsInfor.required,
+      data_type: fieldsInfor.data_type,
+      unique: fieldsInfor.unique,
+    };
 
-      await newCustomFields(newFieldData);
-      emit('submitData', '添加字段成功');
+    if (isEnumType) {
+      const defaultIndex = fieldsInfor.data_type === 'enum' ? [fieldsInfor.default] : fieldsInfor.default;
+      newFieldData.options = fieldsInfor.options;
+      newFieldData.default = fieldsInfor.options
+        .filter((_, index) => defaultIndex.includes(index))
+        .map(item => item.id);
+      if (fieldsInfor.data_type === 'enum') {
+        newFieldData.default = newFieldData.default[0] || null;
+      }
     }
+
+    const action = isEdit.value ? putCustomFields : newCustomFields;
+    const successMessage = isEdit.value ? '修改字段成功' : '添加字段成功';
+
+    await action(newFieldData);
+    emit('submitData', successMessage);
   } catch (e) {
     console.warn(e);
   } finally {
     state.btnLoading = false;
   }
 };
+
+// 校验重复值
+const findFirstDuplicate = (key) => {
+  const obj = {};
+  const result = ref('');
+  fieldsInfor.options.forEach((item, index) => {
+    if (!obj[item[key]]) {
+      obj[item[key]] = new Set();
+    }
+    obj[item[key]].add(index);
+  });
+
+  for (const [itemKey, value] of Object.entries(obj)) {
+    if (value.size > 1) {
+      result.value = itemKey;
+      break;
+    }
+  }
+  return result.value;
+};
+
+const blurId = () => findFirstDuplicate('id');
+const blurValue = () => findFirstDuplicate('value');
 </script>
 
 <style lang="less" scoped>
@@ -327,7 +390,7 @@ const submitInfor = async () => {
   padding: 24px 0;
 
   .bk-form {
-    padding: 0 24px;
+    padding: 0 16px;
   }
 
   .enumerate-wrapper {
@@ -455,6 +518,17 @@ const submitInfor = async () => {
             }
           }
 
+          ::v-deep .enum-form {
+            display: flex;
+
+            .enum-id {
+              .bk-form-content {
+                width: 100px;
+                margin-right: 10px;
+              }
+            }
+          }
+
           ::v-deep .bk-form-content {
             width: 200px;
             margin-left: 0 !important;

diff --git a/src/pages/src/views/tenant/group-details/MemberSelector.vue b/src/pages/src/views/tenant/group-details/MemberSelector.vue
@@ -105,10 +105,6 @@ const handleScrollEnd = () => {
         border-color: #3a84ff;
       }
     }
-
-    .angle-up {
-      display: none !important;
-    }
   }
 }
 

diff --git a/src/pages/src/views/tenant/group-details/OperationDetails.vue b/src/pages/src/views/tenant/group-details/OperationDetails.vue
@@ -570,4 +570,10 @@ const handleRandomPassword = async () => {
   align-items: center;
   justify-content: center;
 }
+
+::v-deep .bk-select {
+  .angle-up {
+    display: none !important;
+  }
+}
 </style>