Browse Source

feat(dict-select): 添加禁用标签功能并优化选项逻辑

新增 `disabledLables` 属性,用于指定需要禁用的选项标签。
在组件内部通过计算属性 `newOptions` 处理选项的禁用状态,
并将该属性应用到选择器的选项配置中。

同时,在用户列表和字典管理页面中,
针对特定类型字段限制了部分操作按钮的显示条件,
避免对关键数据进行误操作。
zhangtao 1 week ago
parent
commit
a89a28e5b5

+ 4 - 0
src/components/zt/dict-select/index.ts

@@ -2,5 +2,9 @@ export interface disctSelectProps {
   dictCode: string;
   immediate?: boolean;
   multiple?: boolean;
+  /**
+   * 禁用的标签
+   */
+  disabledLables?: string[];
   [key: string]: any;
 }

+ 11 - 2
src/components/zt/dict-select/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useAttrs } from 'vue';
+import { computed, useAttrs } from 'vue';
 import type { SelectProps } from 'naive-ui';
 import { useDict } from '@/hooks/business/dict';
 import type { disctSelectProps } from '.';
@@ -15,6 +15,15 @@ const value = defineModel<string | string[] | null>('value', { required: false }
 
 const attrs: SelectProps = useAttrs();
 const { options } = useDict(props.dictCode, props.immediate);
+const newOptions = computed(() => {
+  return options.value.map(item => {
+    return {
+      label: item.label,
+      value: item.value,
+      disabled: Boolean(props.disabledLables?.includes(item.label))
+    };
+  });
+});
 </script>
 
 <template>
@@ -22,7 +31,7 @@ const { options } = useDict(props.dictCode, props.immediate);
     v-model:value="value"
     :multiple="multiple"
     :loading="!options.length"
-    :options="options"
+    :options="newOptions"
     :clear-filter-after-select="false"
     v-bind="attrs"
   />

+ 2 - 0
src/views/config/dict/index.vue

@@ -280,6 +280,7 @@ async function handleDelete(row: Api.System.DictData) {
       >
         <template #op="{ row }">
           <ButtonIcon
+            v-if="row.dictType != 'user_attr_type'"
             size="small"
             icon="material-symbols:drive-file-rename-outline-outline"
             type="primary"
@@ -288,6 +289,7 @@ async function handleDelete(row: Api.System.DictData) {
             @click.stop="() => handleEditData(row)"
           />
           <ButtonIcon
+            v-if="row.dictType != 'user_attr_type'"
             size="small"
             icon="material-symbols:delete-outline"
             type="error"

+ 2 - 1
src/views/government/user-list/index.vue

@@ -265,7 +265,8 @@ const [registerModalForm, { openModal, closeModal, getFieldsValue, setFieldsValu
         component: 'dictSelect',
         componentProps: {
           dictCode: 'user_attr_type',
-          immediate: true
+          immediate: true,
+          disabledLables: ['全部']
         },
         required: true
       }