Browse Source

feat(components): 新增 dictSelect 组件并集成到表单系统

新增字典选择组件 dictSelect,支持通过 dictCode 获取数据,并可配置 immediate 和 multiple 属性。
该组件已注册至 form 组件映射中,可在 schema 中通过 component: 'dictSelect' 使用。

同时更新了多个模块的表单及搜索条件,增加“人员属性”字段,使用新组件进行展示与筛选。
该字段根据权限控制是否显示,提升了系统的灵活性与安全性。

此外,调整了部分 UI 显示逻辑,优化了字典管理页面标题展示方式,并移除了未使用的导入模块。
zhangtao 2 weeks ago
parent
commit
e0a9a0fa9b

+ 1 - 0
.env.test

@@ -3,6 +3,7 @@
 # VITE_SERVICE_BASE_URL=http://192.168.1.253:8114 #付
 # VITE_SERVICE_BASE_URL=http://192.168.0.157:8114 #王
 VITE_SERVICE_BASE_URL=http://192.168.1.166:8114 #张
+# VITE_SERVICE_BASE_URL=http://192.168.1.66:8114 #邓
 # VITE_SERVICE_BASE_URL=https://mock.apifox.cn/m1/3109515-0-default
 # VITE_SERVICE_BASE_URL=https://shop.platform.zswlgz.com #服务器
 # VITE_SERVICE_BASE_URL=/plt #测试打包服务器

+ 2 - 1
src/components/zt/Form/helper.ts

@@ -16,7 +16,8 @@ export function createPlaceholderMessage(component: keyof ComponentMap, label: s
       'NTimePicker',
       'NCheckboxGroup',
       'ApiSelect',
-      'ApiTreeSelect'
+      'ApiTreeSelect',
+      'dictSelect'
     ].includes(component)
   )
     return `请选择${label}`;

+ 6 - 2
src/components/zt/Form/types/form.ts

@@ -51,11 +51,13 @@ import {
 import type { GridItemProps, GridProps } from 'naive-ui/lib/grid';
 import type { ButtonProps } from 'naive-ui/lib/button';
 import { zUpload } from '@/components/zt/upload';
+import dictSelect from '@/components/zt/dict-select/index.vue';
 import { ApiSelect } from '../../ApiSelect';
 import type { ApiSelectProps } from '../../ApiSelect/type';
 import type { ApiTreeSelectProps } from '../../ApiTreeSelect/type';
 import { ApiTreeSelect } from '../../ApiTreeSelect';
 import type { zuploadProps } from '../../upload';
+import type { disctSelectProps } from '../../dict-select';
 // componentMap.ts
 export interface FormProps {
   model?: Recordable;
@@ -133,7 +135,8 @@ export type FormSchema =
   | FormSchemaWithType<'ApiTreeSelect', ApiTreeSelectProps>
   | FormSchemaWithType<'zUpload', zuploadProps>
   | FormSchemaWithType<'NDynamicInput', DynamicInputProps>
-  | FormSchemaWithType<'NGradientText', GradientTextProps>;
+  | FormSchemaWithType<'NGradientText', GradientTextProps>
+  | FormSchemaWithType<'dictSelect', disctSelectProps>;
 
 export interface RenderCallbackParams {
   schema: FormSchema;
@@ -217,7 +220,8 @@ export const componentMap = {
   ApiTreeSelect,
   zUpload,
   NDynamicInput,
-  NGradientText
+  NGradientText,
+  dictSelect
 } as const;
 
 export type ComponentMap = typeof componentMap;

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

@@ -0,0 +1,6 @@
+export interface disctSelectProps {
+  dictCode: string;
+  immediate?: boolean;
+  multiple?: boolean;
+  [key: string]: any;
+}

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

@@ -2,17 +2,11 @@
 import { useAttrs } from 'vue';
 import type { SelectProps } from 'naive-ui';
 import { useDict } from '@/hooks/business/dict';
+import type { disctSelectProps } from '.';
 
 defineOptions({ name: 'DictSelect' });
 
-interface Props {
-  dictCode: string;
-  immediate?: boolean;
-  multiple?: boolean;
-  [key: string]: any;
-}
-
-const props = withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<disctSelectProps>(), {
   immediate: false,
   multiple: false
 });

+ 4 - 1
src/views/config/dict/dict.data.ts

@@ -93,7 +93,10 @@ export const modelDataDict: FormSchema[] = [
     label: '字典排序',
     field: 'dictSort',
     component: 'NInputNumber',
-    defaultValue: 1
+    defaultValue: 1,
+    componentProps: {
+      min: 1
+    }
   },
   {
     label: '标签样式',

+ 6 - 15
src/views/config/dict/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="tsx">
 import { ref } from 'vue';
 import { useRoute } from 'vue-router';
-import { NEllipsis, NTooltip, type TreeOption } from 'naive-ui';
+import { NTooltip, type TreeOption } from 'naive-ui';
 import {
   fetchBatchDeleteDictData,
   fetchBatchDeleteDictType,
@@ -13,7 +13,6 @@ import {
   fetchUpdateDictType
 } from '@/service/api/config/dict';
 import { useDict } from '@/hooks/business/dict';
-import { copyTextToClipboard } from '@/utils/zt';
 import { useTable } from '@/components/zt/Table/hooks/useTable';
 import { $t } from '@/locales';
 import ButtonIcon from '@/components/custom/button-icon.vue';
@@ -23,8 +22,8 @@ const [registerTable, { refresh, getTableLoding, setTableConfig, setFieldsValue,
   searchFormConfig: {
     schemas: [
       {
-        label: '字典名称',
-        field: 'dictName',
+        label: '字典标签',
+        field: 'dictLabel',
         component: 'NInput'
       },
       {
@@ -45,7 +44,8 @@ const [registerTable, { refresh, getTableLoding, setTableConfig, setFieldsValue,
   },
   tableConfig: {
     keyField: 'dictCode',
-    title: '字典列表'
+    title: '字典列表',
+    showAddButton: false
   }
 });
 const [
@@ -115,16 +115,7 @@ async function handleClickTree(keys: string[]) {
   const dictDataType = dictData.value.find(item => item.dictType === dictType);
 
   setTableConfig({
-    title: dictDataType
-      ? () => (
-          <NEllipsis lineClamp={2} class="flex">
-            <span>{dictDataType.dictName}</span>
-            <span class="cursor-copy" onClick={async () => await copyTextToClipboard(dictDataType.dictType)}>
-              {` (${dictDataType.dictType} )`}
-            </span>
-          </NEllipsis>
-        )
-      : '字典列表',
+    title: dictDataType ? `${dictDataType.dictName}(${dictDataType.dictType} )` : '字典列表',
     keyField: 'dictCode',
     showAddButton: Boolean(dictDataType)
   });

+ 12 - 0
src/views/delivery/after-sales-order/after-sales-order.ts

@@ -1,6 +1,7 @@
 import { h } from 'vue';
 import { NImage } from 'naive-ui';
 import { fetchGetAllStoreList } from '@/service/api/goods/desk-category';
+import { useAuth } from '@/hooks/business/auth';
 import type { FormSchema } from '@/components/zt/Form/types/form';
 export const SearchForm: FormSchema[] = [
   {
@@ -13,6 +14,7 @@ export const SearchForm: FormSchema[] = [
       valueFeild: 'shopId'
     }
   },
+
   {
     label: '订单类型',
     component: 'NSelect',
@@ -107,6 +109,16 @@ export const SearchForm: FormSchema[] = [
     componentProps: {
       type: 'datetimerange'
     }
+  },
+  {
+    field: 'userAttrType',
+    label: '人员属性',
+    component: 'dictSelect',
+    componentProps: {
+      dictCode: 'user_attr_type',
+      immediate: true
+    },
+    show: useAuth().hasAuth('user:attr:type')
   }
 ];
 export enum refundEnum {

+ 12 - 0
src/views/delivery/normal-order/normal-order.ts

@@ -2,6 +2,7 @@ import { h } from 'vue';
 import { NFlex, NImage, NTag } from 'naive-ui';
 import { fetchGetAllStoreList } from '@/service/api/goods/desk-category';
 import { fetchGetDevList } from '@/service/api/delivery/normal-orde';
+import { useAuth } from '@/hooks/business/auth';
 import type { FormSchema } from '@/components/zt/Form/types/form';
 
 export const SearchForm: FormSchema[] = [
@@ -15,6 +16,7 @@ export const SearchForm: FormSchema[] = [
       valueFeild: 'shopId'
     }
   },
+
   {
     label: '订单类型',
     component: 'NSelect',
@@ -83,6 +85,16 @@ export const SearchForm: FormSchema[] = [
     componentProps: {
       type: 'datetimerange'
     }
+  },
+  {
+    field: 'userAttrType',
+    label: '人员属性',
+    component: 'dictSelect',
+    componentProps: {
+      dictCode: 'user_attr_type',
+      immediate: true
+    },
+    show: useAuth().hasAuth('user:attr:type')
   }
 ];
 

+ 11 - 0
src/views/government/government-list/index.vue

@@ -3,6 +3,7 @@ import { nextTick } from 'vue';
 import { NSwitch } from 'naive-ui';
 import { fetchAddChannel, fetchGetChannelList, fetchUpdateChannel } from '@/service/api/government/government-list';
 import { fetchGetLoginUserList } from '@/service/api/common';
+import { useAuth } from '@/hooks/business/auth';
 import { useTable } from '@/components/zt/Table/hooks/useTable';
 import { useModalFrom } from '@/components/zt/ModalForm/hooks/useModalForm';
 
@@ -91,6 +92,16 @@ const [registerTable, { refresh, setFieldsValue: setSearchValues }] = useTable({
             }
           ]
         }
+      },
+      {
+        field: 'userAttrType',
+        label: '人员属性',
+        component: 'dictSelect',
+        componentProps: {
+          dictCode: 'user_attr_type',
+          immediate: true
+        },
+        show: useAuth().hasAuth('user:attr:type')
       }
     ],
     inline: false,

+ 10 - 0
src/views/government/points/index.vue

@@ -91,6 +91,16 @@ const searchSchemas: FormSchema[] = [
       }
     }
   },
+  {
+    field: 'userAttrType',
+    label: '人员属性',
+    component: 'dictSelect',
+    componentProps: {
+      dictCode: 'user_attr_type',
+      immediate: true
+    },
+    show: useAuth().hasAuth('user:attr:type')
+  },
   {
     field: 'userPhone',
     label: '员工手机号',

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

@@ -107,6 +107,16 @@ const [registerTable, { refresh, setTableLoading, setFieldsValue: setSearchValue
         field: 'userMobile',
         label: '手机号码',
         component: 'NInput'
+      },
+      {
+        field: 'userAttrType',
+        label: '人员属性',
+        component: 'dictSelect',
+        componentProps: {
+          dictCode: 'user_attr_type',
+          immediate: true
+        },
+        show: useAuth().hasAuth('user:attr:type')
       }
     ],
     inline: false,
@@ -196,7 +206,7 @@ const [registerModalForm, { openModal, closeModal, getFieldsValue, setFieldsValu
     title: '员工 ',
     width: 600,
     isShowHeaderText: true,
-    height: 200
+    height: 400
   },
   formConfig: {
     schemas: [
@@ -248,6 +258,16 @@ const [registerModalForm, { openModal, closeModal, getFieldsValue, setFieldsValu
           valueFeild: 'id'
         },
         required: true
+      },
+      {
+        field: 'userAttrType',
+        label: '人员属性',
+        component: 'dictSelect',
+        componentProps: {
+          dictCode: 'user_attr_type',
+          immediate: true
+        },
+        required: true
       }
     ],
     gridProps: {