fix: 体验问题修复

# Reviewed, transaction id: 1322
yuri0528 · Jan 3, 2024 · 20a3205 · 20a3205
1 parent 7d35332
commit 20a3205
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 54 deletions.
diff --git a/src/pages/src/components/custom-fields/view.vue b/src/pages/src/components/custom-fields/view.vue
@@ -6,25 +6,23 @@
       :key="index">
       <span class="details-content-key">{{ item.display_name }}：</span>
       <bk-overflow-title class="details-content-value" type="tips">
-        {{ ConvertVal(item) }}
+        {{ customFieldsMap(item) }}
       </bk-overflow-title>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { defineProps, ref } from 'vue';
+import { defineProps } from 'vue';
+
+import { customFieldsMap } from '@/utils';
 
 defineProps({
   extras: {
     type: Array,
     default: () => ([]),
   },
 });
-
-const ConvertVal = (item: any) => {
-  return item.value === '' ? '--' : (item.data_type === 'multi_enum' ? item.value?.join(' ; ') : item.value);
-};
 </script>
 
 <style lang="less" scoped>

diff --git a/src/pages/src/utils/index.ts b/src/pages/src/utils/index.ts
@@ -1,5 +1,6 @@
 import { Message } from 'bkui-vue';
 import moment from 'moment';
+import { ref } from 'vue';
 
 import abnormalImg from '@/images/abnormal.svg';
 import loadingImg from '@/images/loading.svg';
@@ -296,3 +297,15 @@ export const NOTIFICATION_METHODS = [
   { value: 'email', label: '邮箱', status: true },
   { value: 'sms', label: '短信', status: false },
 ];
+
+// 自定义字段转换
+export function customFieldsMap(item: any) {
+  const fields = ref('');
+  fields.value = item.value === '' ? '--'
+    : item.data_type === 'enum' ? item.options?.find(option => option.id === item.value)?.value
+      : item.data_type === 'multi_enum' ? item.value?.map(key => item.options?.find(option => option.id === key)?.value)
+        .filter(Boolean)
+        .join(' ; ')
+        : item.value;
+  return fields.value;
+};
diff --git a/src/pages/src/views/personal-center/index.vue b/src/pages/src/views/personal-center/index.vue
@@ -234,9 +234,9 @@
                 >
                   <bk-overflow-title class="key" type="tips">{{ item.display_name }}：</bk-overflow-title>
                   <div class="value-edit custom-input">
-                    <span v-if="!item.isEdit" class="value">
-                      {{ ConvertVal(item) }}
-                    </span>
+                    <bk-overflow-title v-if="!item.isEdit" class="value" type="tips">
+                      {{ customFieldsMap(item) }}
+                    </bk-overflow-title>
                     <div v-else class="input-list w-[240px]">
                       <bk-input
                         v-if="item.data_type === 'string'"
@@ -315,7 +315,7 @@ import {
   patchUsersPhone,
   putPersonalCenterUserExtrasFields,
 } from '@/http/personalCenterFiles';
-import { formatConvert, getBase64 } from '@/utils';
+import { customFieldsMap, formatConvert, getBase64 } from '@/utils';
 
 const validate = useValidate();
 const editLeaveBefore = inject('editLeaveBefore');
@@ -381,9 +381,6 @@ const getCurrentUser = async (id) => {
   }
 };
 
-const ConvertVal = (item: any) => {
-  return item.value === '' ? '--' : (item.data_type === 'multi_enum' ? item.value?.join(' ; ') : item.value);
-};
 // 获取当前编辑框焦点
 const editExtra = (item, index) => {
   item.isEdit = true;
@@ -446,7 +443,7 @@ const cancelCustomFields = (item, index) => {
 
 watch(() => currentUserInfo.value?.extras, (val) => {
   if (val.length) {
-    const allFalse = val.every((item) => !item.isEdit);
+    const allFalse = val.every(item => !item.isEdit);
     window.changeInput = !(allFalse && isEditEmail.value === false && isEditPhone.value === false);
   }
 }, {
@@ -590,7 +587,7 @@ const handleError = (file) => {
 
 // 是否是编辑状态
 const isEditFn = () => {
-  const allFalse = currentUserInfo.value?.extras.every((item) => !item.isEdit);
+  const allFalse = currentUserInfo.value?.extras.every(item => !item.isEdit);
   window.changeInput = !(allFalse && isEditEmail.value === false && isEditPhone.value === false);
 };
 </script>
@@ -948,6 +945,7 @@ const isEditFn = () => {
 
                 .value {
                   line-height: 32px;
+                  max-width: 400px;
                 }
 
                 .input-list {

diff --git a/src/pages/src/views/setting/FieldSetting.vue b/src/pages/src/views/setting/FieldSetting.vue
@@ -42,11 +42,21 @@
             <i :class="fieldStatus(row.unique)"></i>
           </template>
         </bk-table-column>
-        <!-- <bk-table-column prop="builtin" label="是否可编辑">
+        <bk-table-column prop="manager_editable" label="管理员可编辑">
           <template #default="{ row }">
-            <i :class="fieldStatus(!row.builtin)"></i>
+            <i :class="fieldStatus(row.manager_editable)"></i>
           </template>
-        </bk-table-column> -->
+        </bk-table-column>
+        <bk-table-column prop="personal_center_visible" label="个人中心展示">
+          <template #default="{ row }">
+            <i :class="fieldStatus(row.personal_center_visible)"></i>
+          </template>
+        </bk-table-column>
+        <bk-table-column prop="personal_center_editable" label="个人中心可编辑">
+          <template #default="{ row }">
+            <i :class="fieldStatus(row.personal_center_editable)"></i>
+          </template>
+        </bk-table-column>
         <bk-table-column label="操作">
           <template #default="{ row }">
             <span v-bk-tooltips="{ content: '该内置字段，不支持修改', disabled: !row.builtin }">

diff --git a/src/pages/src/views/setting/FieldsAdd.vue b/src/pages/src/views/setting/FieldsAdd.vue
@@ -78,37 +78,29 @@
             <bk-form-item class="w-[200px]" property="id" required error-display-type="tooltips">
               <bk-input
                 v-model="item.id"
-                placeholder="请输入ID" />
+                placeholder="请输入ID"
+                @change="handleChange" />
             </bk-form-item>
             <bk-form-item class="w-[184px]" property="value" required error-display-type="tooltips">
               <bk-input
-                type="text"
-                class="select-text"
                 v-model="item.value"
                 placeholder="请输入值"
                 @change="handleChange"
               />
             </bk-form-item>
             <div class="input-container">
-              <label
+              <bk-radio-group
                 v-if="fieldsInfor.data_type === 'enum'"
-                class="king-radio"
-              >
-                <input
-                  name="eg"
-                  type="radio"
-                  :value="index"
-                  v-model="fieldsInfor.default"
-                />
-              </label>
-              <label v-else class="king-checkbox">
-                <input
-                  name="egCheckbox"
-                  type="checkbox"
-                  :value="index"
-                  v-model="fieldsInfor.default"
-                />
-              </label>
+                :model-value="fieldsInfor.default"
+                @change="changeRadio(index)">
+                <bk-radio :label="index" :model-value="index" />
+              </bk-radio-group>
+              <bk-checkbox-group
+                v-else
+                :model-value="fieldsInfor.default"
+                @change="changeCheckbox(index)">
+                <bk-checkbox :label="index" :model-value="index" />
+              </bk-checkbox-group>
             </div>
             <i
               :class="['user-icon icon-delete', { 'forbid': fieldsInfor.options.length <= 1 }]"
@@ -137,7 +129,8 @@
       </bk-checkbox>
       <bk-checkbox
         :value="fieldsInfor.manager_editable"
-        v-model="fieldsInfor.manager_editable">
+        v-model="fieldsInfor.manager_editable"
+        :disabled="isEdit">
         <span v-bk-tooltips="{ content: '该字段在用户信息里可编辑' }">管理员可编辑</span>
       </bk-checkbox>
     </div>
@@ -153,7 +146,8 @@
           <bk-checkbox
             v-if="fieldsInfor.personal_center_visible"
             class="ml-[40px]"
-            v-model="fieldsInfor.personal_center_editable">
+            v-model="fieldsInfor.personal_center_editable"
+            :disabled="isEdit">
             个人中心可编辑
           </bk-checkbox>
         </div>
@@ -407,7 +401,7 @@ const changeEnumValue = async () => {
 
     const findIndexById = id => fieldsInfor.options.findIndex(item => item.id === id);
     fieldsInfor.default = fieldsInfor.data_type === 'enum' ? findIndexById(fieldsInfor.default)
-      : fieldsInfor.data_type === 'multi_enum' ? fieldsInfor.default.map(findIndexById)
+      : fieldsInfor.data_type === 'multi_enum' ? fieldsInfor.default?.map(findIndexById)
         : fieldsInfor.default;
   } catch (error) {
     console.warn(error);
@@ -465,7 +459,18 @@ const addEg = () => {
   };
   fieldsInfor.options.push(param);
 };
+// 变更枚举值
+const changeRadio = (val) => {
+  fieldsInfor.default = val;
+};
 
+const changeCheckbox = (val) => {
+  if (fieldsInfor.default.includes(val)) {
+    fieldsInfor.default = fieldsInfor.default.filter(item => item !== val);
+  } else {
+    fieldsInfor.default.push(val);
+  }
+};
 // 表单校验
 const submitInfor = async () => {
   try {
@@ -650,30 +655,25 @@ const blurValue = () => findFirstDuplicate('value');
       .enum-form {
         display: flex;
         padding: 0;
+        align-items: center;
+        margin-bottom: 12px;
 
         .bk-form-item {
-          margin: 0 12px 12px 0;
+          margin: 0 12px 0 0;
         }
 
-        .input-container {
+        ::v-deep .input-container {
           width: 60px;
-          margin: 0 0 12px 12px;
-
-          .king-radio, .king-checkbox {
-            line-height: 32px;
+          margin-left: 12px;
 
-            input {
-              width: 16px;
-              height: 16px;
-              cursor: pointer;
-            }
+          .bk-checkbox-label, .bk-radio-label {
+            visibility: hidden;
           }
         }
 
         .icon-delete {
           margin-left: 12px;
           font-size: 16px;
-          line-height: 24px;
           color: #FF5656;
           cursor: pointer;