feat: dict utils

apps/web-antd/src/adapter/vxe-table.ts

@@ -1,10 +1,11 @@
 import { h } from 'vue';
 
 import { setupVbenVxeTable, useVbenVxeGrid } from '@vben/plugins/vxe-table';
-import { useDictStore } from '@vben/stores';
 
 import { Button, Image, Tag } from 'ant-design-vue';
 
+import { getDictObj } from '#/utils/dict';
+
 import { useVbenForm } from './form';
 
 setupVbenVxeTable({
@@ -76,13 +77,12 @@ setupVbenVxeTable({
     // 表格配置项可以用 cellRender: { name: 'CellDict',props:{dictType: ''} },
     vxeUI.renderer.add('CellDict', {
       renderTableDefault(renderOpts, params) {
-        const dictStore = useDictStore();
         const { props } = renderOpts;
         const { column, row } = params;
         if (!props) {
           return '';
         }
-        const dict = dictStore.getDictData(props.type, row[column.field]);
+        const dict = getDictObj(props.type, row[column.field]);
         // 转义
         if (dict) {
           if (`${dict.colorType}` === 'primary') dict.colorType = 'processing';

apps/web-antd/src/utils/dict.ts

@@ -0,0 +1,56 @@
+import type { DefaultOptionType } from 'ant-design-vue/es/select';
+
+import { useDictStore } from '@vben/stores';
+import { isObject } from '@vben/utils';
+
+const dictStore = useDictStore();
+
+/**
+ * 获取字典对象
+ * @param dictType 字典类型
+ * @param value 字典值
+ * @returns 字典对象
+ */
+function getDictObj(dictType: string, value: any) {
+  const dictObj = dictStore.getDictData(dictType, value);
+  return isObject(dictObj) ? dictObj : null;
+}
+
+/**
+ * 获取字典数组 用于select radio 等
+ * @param dictType 字典类型
+ * @returns 字典数组
+ */
+function getDictOptions(
+  dictType: string,
+  valueType: 'boolean' | 'number' | 'string' = 'string',
+) {
+  const dictOpts = dictStore.getDictOptions(dictType);
+  const dictOptions: DefaultOptionType = [];
+  if (dictOpts.length > 0) {
+    let dictValue: boolean | number | string = '';
+    dictOpts.forEach((d) => {
+      switch (valueType) {
+        case 'boolean': {
+          dictValue = `${d.value}` === 'true';
+          break;
+        }
+        case 'number': {
+          dictValue = Number.parseInt(`${d.value}`);
+          break;
+        }
+        case 'string': {
+          dictValue = `${d.value}`;
+          break;
+        }
+        // No default
+      }
+      dictOptions.push({
+        value: dictValue,
+        label: d.label,
+      });
+    });
+  }
+  return dictOptions.length > 0 ? dictOptions : [];
+}
+export { getDictObj, getDictOptions };

apps/web-antd/src/views/system/post/post.data.ts

@@ -3,6 +3,7 @@ import type { VxeGridProps } from '#/adapter/vxe-table';
 import { $t } from '@vben/locales';
 
 import { type VbenFormSchema } from '#/adapter/form';
+import { getDictOptions } from '#/utils/dict';
 
 export const formSchema: VbenFormSchema[] = [
   {
@@ -20,16 +21,7 @@ export const formSchema: VbenFormSchema[] = [
     component: 'Select',
     componentProps: {
       allowClear: true,
-      options: [
+      options: getDictOptions('common_status', 'number'),
-        {
-          label: 'Color1',
-          value: '1',
-        },
-        {
-          label: 'Color2',
-          value: '2',
-        },
-      ],
       placeholder: '请选择',
     },
     fieldName: 'status',
@@ -90,10 +82,7 @@ export const modalSchema: VbenFormSchema[] = [
   {
     component: 'Select',
     componentProps: {
-      options: [
+      options: getDictOptions('common_status', 'number'),
-        { label: '选项1', value: '1' },
-        { label: '选项2', value: '2' },
-      ],
     },
     fieldName: 'status',
     label: '状态',