feat：【antd/ele】【组件】form-create 封装的代码统一评审

2025-11-20 16:10:41 +08:00
parent 4aef96a8f8
commit 342a948bc0
17 changed files with 73 additions and 102 deletions
--- a/apps/web-antd/src/components/description/typing.ts
+++ b/apps/web-antd/src/components/description/typing.ts
@@ -8,37 +8,24 @@ import type { Recordable } from '@vben/types';
 export interface DescriptionItemSchema {
  labelMinWidth?: number;
  contentMinWidth?: number;
-  // 自定义标签样式
-  labelStyle?: CSSProperties;
-  // 对应 data 中的字段名
-  field: string;
-  // 内容的描述
-  label: JSX.Element | string | VNode;
-  // 包含列的数量
-  span?: number;
-  // 是否显示
-  show?: (...arg: any) => boolean;
-  // 插槽名称
-  slot?: string;
-  // 自定义需要展示的内容
+  labelStyle?: CSSProperties; // 自定义标签样式
+  field: string; // 对应 data 中的字段名
+  label: JSX.Element | string | VNode; // 内容的描述
+  span?: number; // 包含列的数量
+  show?: (...arg: any) => boolean; // 是否显示
+  slot?: string; // 插槽名称
  render?: (
    val: any,
    data?: Recordable<any>,
-  ) => Element | JSX.Element | number | string | undefined | VNode;
+  ) => Element | JSX.Element | number | string | undefined | VNode; // 自定义需要展示的内容
 }

 export interface DescriptionProps extends DescriptionsProps {
-  // 是否包含卡片组件
-  useCard?: boolean;
-  // 描述项配置
-  schema: DescriptionItemSchema[];
-  // 数据
-  data: Recordable<any>;
-  // 标题
-  title?: string;
-  // 是否包含边框
-  bordered?: boolean;
-  // 列数
+  useCard?: boolean; // 是否包含卡片组件
+  schema: DescriptionItemSchema[]; // 描述项配置
+  data: Recordable<any>; // 数据
+  title?: string; // 标题
+  bordered?: boolean; // 是否包含边框
  column?:
    | number
    | {
@@ -48,7 +35,7 @@ export interface DescriptionProps extends DescriptionsProps {
        xl: number;
        xs: number;
        xxl: number;
-      };
+      }; // 列数
 }

 export interface DescInstance {
--- a/apps/web-antd/src/components/form-create/components/dict-select.vue
+++ b/apps/web-antd/src/components/form-create/components/dict-select.vue
@@ -24,7 +24,7 @@ const props = withDefaults(defineProps<DictSelectProps>(), {

 const attrs = useAttrs();

-// 获得字典配置
+/** 获得字典配置 */
 const getDictOption = computed(() => {
  switch (props.valueType) {
    case 'bool': {
--- a/apps/web-antd/src/components/form-create/components/use-images-upload.tsx
+++ b/apps/web-antd/src/components/form-create/components/use-images-upload.tsx
@@ -16,7 +16,7 @@ export function useImagesUpload() {
      },
    },
    setup() {
-      // TODO: @dhb52 其实还是靠 props 默认参数起作用，没能从 formCreate 传递
+      // TODO: @puhui999：@dhb52 其实还是靠 props 默认参数起作用，没能从 formCreate 传递
      return (props: { maxNumber?: number; multiple?: boolean }) => (
        <ImageUpload maxNumber={props.maxNumber} multiple={props.multiple} />
      );
--- a/apps/web-antd/src/components/form-create/helpers.ts
+++ b/apps/web-antd/src/components/form-create/helpers.ts
@@ -19,12 +19,12 @@ import {
  useUploadImagesRule,
 } from './rules';

-// 编码表单 Conf
+/** 编码表单 Conf */
 export function encodeConf(designerRef: any) {
  return JSON.stringify(designerRef.value.getOption());
 }

-// 编码表单 Fields
+/** 编码表单 Fields */
 export function encodeFields(designerRef: any) {
  const rule = JSON.parse(designerRef.value.getJson());
  const fields: string[] = [];
@@ -34,7 +34,7 @@ export function encodeFields(designerRef: any) {
  return fields;
 }

-// 解码表单 Fields
+/** 解码表单 Fields */
 export function decodeFields(fields: string[]) {
  const rule: Rule[] = [];
  fields.forEach((item) => {
@@ -43,7 +43,7 @@ export function decodeFields(fields: string[]) {
  return rule;
 }

-// 设置表单的 Conf 和 Fields，适用 FcDesigner 场景
+/** 设置表单的 Conf 和 Fields，适用 FcDesigner 场景 */
 export function setConfAndFields(
  designerRef: any,
  conf: string,
@@ -55,7 +55,7 @@ export function setConfAndFields(
  designerRef.value.setRule(decodeFields(fieldsArray));
 }

-// 设置表单的 Conf 和 Fields，适用 form-create 场景
+/** 设置表单的 Conf 和 Fields，适用 form-create 场景 */
 export function setConfAndFields2(
  detailPreview: any,
  conf: string,
@@ -155,9 +155,7 @@ export async function useFormCreateDesigner(designer: Ref) {
  const uploadImageRule = useUploadImageRule();
  const uploadImagesRule = useUploadImagesRule();

-  /**
-   * 构建表单组件
-   */
+  /** 构建表单组件 */
  function buildFormComponents() {
    // 移除自带的上传组件规则，使用 uploadFileRule、uploadImgRule、uploadImgsRule 替代
    designer.value?.removeMenuItem('upload');
@@ -200,9 +198,7 @@ export async function useFormCreateDesigner(designer: Ref) {
    event: ['click', 'change', 'visibleChange', 'clear', 'blur', 'focus'],
  });

-  /**
-   * 构建系统字段菜单
-   */
+  /** 构建系统字段菜单 */
  function buildSystemMenu() {
    // 移除自带的下拉选择器组件，使用 currencySelectRule 替代
    // designer.value?.removeMenuItem('select')
--- a/apps/web-antd/src/components/form-create/rules/use-dict-select.ts
+++ b/apps/web-antd/src/components/form-create/rules/use-dict-select.ts
@@ -11,9 +11,7 @@ import {
 } from '#/components/form-create/helpers';
 import { selectRule } from '#/components/form-create/rules/data';

-/**
- * 字典选择器规则，如果规则使用到动态数据则需要单独配置不能使用 useSelectRule
- */
+/** 字典选择器规则，如果规则使用到动态数据则需要单独配置不能使用 useSelectRule */
 export function useDictSelectRule() {
  const label = '字典选择器';
  const name = 'DictSelect';
--- a/apps/web-ele/src/components/description/typing.ts
+++ b/apps/web-ele/src/components/description/typing.ts
@@ -8,30 +8,21 @@ import type { Recordable } from '@vben/types';
 export interface DescriptionItemSchema {
  labelMinWidth?: number;
  contentMinWidth?: number;
-  // 自定义标签样式
-  labelStyle?: CSSProperties;
-  // 对应 data 中的字段名
-  field: string;
-  // 内容的描述
-  label: JSX.Element | string | VNode;
-  // 包含列的数量
-  span?: number;
-  // 是否显示
-  show?: (...arg: any) => boolean;
-  // 插槽名称
-  slot?: string;
-  // 自定义需要展示的内容
+  labelStyle?: CSSProperties; // 自定义标签样式
+  field: string; // 对应 data 中的字段名
+  label: JSX.Element | string | VNode; // 内容的描述
+  span?: number; // 包含列的数量
+  show?: (...arg: any) => boolean; // 是否显示
+  slot?: string; // 插槽名称
  render?: (
    val: any,
    data?: Recordable<any>,
-  ) => Element | JSX.Element | number | string | undefined | VNode;
+  ) => Element | JSX.Element | number | string | undefined | VNode; // 自定义需要展示的内容
 }

 export interface DescriptionProps extends ElDescriptionProps {
-  // 描述项配置
-  schema: DescriptionItemSchema[];
-  // 数据
-  data: Recordable<any>;
+  schema: DescriptionItemSchema[]; // 描述项配置
+  data: Recordable<any>; // 数据
 }

 export interface DescInstance {
--- a/apps/web-ele/src/components/form-create/components/dict-select.vue
+++ b/apps/web-ele/src/components/form-create/components/dict-select.vue
@@ -24,8 +24,8 @@ const props = withDefaults(defineProps<DictSelectProps>(), {

 const attrs = useAttrs();

-// 获得字典配置
-const dictOptions = computed(() => {
+/** 获得字典配置 */
+const getDictOption = computed(() => {
  switch (props.valueType) {
    case 'bool': {
      return getDictOptions(props.dictType, 'boolean');
@@ -46,7 +46,7 @@ const dictOptions = computed(() => {
 <template>
  <ElSelect v-if="selectType === 'select'" class="w-1/1" v-bind="attrs">
    <ElOption
-      v-for="(dict, index) in dictOptions"
+      v-for="(dict, index) in getDictOption"
      :key="index"
      :value="dict.value"
      :label="dict.label"
@@ -54,7 +54,7 @@ const dictOptions = computed(() => {
  </ElSelect>
  <ElRadioGroup v-if="selectType === 'radio'" class="w-1/1" v-bind="attrs">
    <ElRadio
-      v-for="(dict, index) in dictOptions"
+      v-for="(dict, index) in getDictOption"
      :key="index"
      :label="dict.value"
    >
@@ -67,7 +67,7 @@ const dictOptions = computed(() => {
    v-bind="attrs"
  >
    <ElCheckbox
-      v-for="(dict, index) in dictOptions"
+      v-for="(dict, index) in getDictOption"
      :key="index"
      :label="dict.value"
    >
--- a/apps/web-ele/src/components/form-create/components/use-api-select.tsx
+++ b/apps/web-ele/src/components/form-create/components/use-api-select.tsx
@@ -15,7 +15,7 @@ import {

 import { requestClient } from '#/api/request';

-export const useApiSelect = (option: ApiSelectProps) => {
+export function useApiSelect(option: ApiSelectProps) {
  return defineComponent({
    name: option.name,
    props: {
@@ -285,4 +285,4 @@ export const useApiSelect = (option: ApiSelectProps) => {
      );
    },
  });
-};
+}
--- a/apps/web-ele/src/components/form-create/components/use-images-upload.tsx
+++ b/apps/web-ele/src/components/form-create/components/use-images-upload.tsx
@@ -2,7 +2,7 @@ import { defineComponent } from 'vue';

 import ImageUpload from '#/components/upload/image-upload.vue';

-export const useImagesUpload = () => {
+export function useImagesUpload() {
  return defineComponent({
    name: 'ImagesUpload',
    props: {
@@ -16,10 +16,10 @@ export const useImagesUpload = () => {
      },
    },
    setup() {
-      // TODO: @dhb52 其实还是靠 props 默认参数起作用，没能从 formCreate 传递
+      // TODO: @puhui999：@dhb52 其实还是靠 props 默认参数起作用，没能从 formCreate 传递
      return (props: { maxNumber?: number; multiple?: boolean }) => (
        <ImageUpload maxNumber={props.maxNumber} multiple={props.multiple} />
      );
    },
  });
-};
+}
--- a/apps/web-ele/src/components/form-create/helpers.ts
+++ b/apps/web-ele/src/components/form-create/helpers.ts
@@ -1,9 +1,13 @@
+import type { Rule } from '@form-create/element-ui';
+
 import type { Ref } from 'vue';

 import type { Menu } from '#/components/form-create/typing';

 import { isRef, nextTick, onMounted } from 'vue';

+import formCreate from '@form-create/element-ui';
+
 import { apiSelectRule } from '#/components/form-create/rules/data';

 import {
@@ -15,12 +19,12 @@ import {
  useUploadImagesRule,
 } from './rules';

-// 编码表单 Conf
+/** 编码表单 Conf */
 export function encodeConf(designerRef: any) {
  return JSON.stringify(designerRef.value.getOption());
 }

-// 编码表单 Fields
+/** 编码表单 Fields */
 export function encodeFields(designerRef: any) {
  const rule = JSON.parse(designerRef.value.getJson());
  const fields: string[] = [];
@@ -30,28 +34,28 @@ export function encodeFields(designerRef: any) {
  return fields;
 }

-// 解码表单 Fields
+/** 解码表单 Fields */
 export function decodeFields(fields: string[]) {
-  const rule: object[] = [];
+  const rule: Rule[] = [];
  fields.forEach((item) => {
-    rule.push(JSON.parse(item));
+    rule.push(formCreate.parseJson(item));
  });
  return rule;
 }

-// 设置表单的 Conf 和 Fields，适用 FcDesigner 场景
+/** 设置表单的 Conf 和 Fields，适用 FcDesigner 场景 */
 export function setConfAndFields(
  designerRef: any,
  conf: string,
  fields: string | string[],
 ) {
-  designerRef.value.setOption(JSON.parse(conf));
+  designerRef.value.setOption(formCreate.parseJson(conf));
  // 处理 fields 参数类型，确保传入 decodeFields 的是 string[] 类型
  const fieldsArray = Array.isArray(fields) ? fields : [fields];
  designerRef.value.setRule(decodeFields(fieldsArray));
 }

-// 设置表单的 Conf 和 Fields，适用 form-create 场景
+/** 设置表单的 Conf 和 Fields，适用 form-create 场景 */
 export function setConfAndFields2(
  detailPreview: any,
  conf: string,
@@ -61,7 +65,7 @@ export function setConfAndFields2(
  if (isRef(detailPreview)) {
    detailPreview = detailPreview.value;
  }
-  detailPreview.option = JSON.parse(conf);
+  detailPreview.option = formCreate.parseJson(conf);
  detailPreview.rule = decodeFields(fields);
  if (value) {
    detailPreview.value = value;
@@ -151,9 +155,7 @@ export async function useFormCreateDesigner(designer: Ref) {
  const uploadImageRule = useUploadImageRule();
  const uploadImagesRule = useUploadImagesRule();

-  /**
-   * 构建表单组件
-   */
+  /** 构建表单组件 */
  function buildFormComponents() {
    // 移除自带的上传组件规则，使用 uploadFileRule、uploadImgRule、uploadImgsRule 替代
    designer.value?.removeMenuItem('upload');
@@ -196,9 +198,7 @@ export async function useFormCreateDesigner(designer: Ref) {
    event: ['click', 'change', 'visibleChange', 'clear', 'blur', 'focus'],
  });

-  /**
-   * 构建系统字段菜单
-   */
+  /** 构建系统字段菜单 */
  function buildSystemMenu() {
    // 移除自带的下拉选择器组件，使用 currencySelectRule 替代
    // designer.value?.removeMenuItem('select')
--- a/apps/web-ele/src/components/form-create/rules/data.ts
+++ b/apps/web-ele/src/components/form-create/rules/data.ts
@@ -121,7 +121,7 @@ const apiSelectRule = [
            field: 'data',
            title: '请求参数 JSON 格式',
            props: {
-              autosize: true,
+              autosize: true, // TODO @puhui999：这里时 autoSize 还是 autosize 哈？和 antd 不同
              type: 'textarea',
              placeholder: '{"type": 1}',
            },
@@ -155,7 +155,7 @@ const apiSelectRule = [
    info: `data 为接口返回值,需要写一个匿名函数解析返回值为选择器 options 列表
    (data: any)=>{ label: string; value: any }[]`,
    props: {
-      autosize: true,
+      autosize: true, // TODO @puhui999：这里时 autoSize 还是 autosize 哈？和 antd 不同
      rows: { minRows: 2, maxRows: 6 },
      type: 'textarea',
      placeholder: `
--- a/apps/web-ele/src/components/form-create/rules/use-dict-select.ts
+++ b/apps/web-ele/src/components/form-create/rules/use-dict-select.ts
@@ -11,10 +11,8 @@ import {
 } from '#/components/form-create/helpers';
 import { selectRule } from '#/components/form-create/rules/data';

-/**
- * 字典选择器规则，如果规则使用到动态数据则需要单独配置不能使用 useSelectRule
- */
-export const useDictSelectRule = () => {
+/** 字典选择器规则，如果规则使用到动态数据则需要单独配置不能使用 useSelectRule */
+export function useDictSelectRule() {
  const label = '字典选择器';
  const name = 'DictSelect';
  const rules = cloneDeep(selectRule);
@@ -41,6 +39,7 @@ export const useDictSelectRule = () => {
        title: label,
        info: '',
        $required: false,
+        // TODO @puhui999：vben 版本里，这里有个 modelField: 'value', 需要添加么？
      };
    },
    props(_: any, { t }: any) {
@@ -68,4 +67,4 @@ export const useDictSelectRule = () => {
      ]);
    },
  };
-};
+}
--- a/apps/web-ele/src/components/form-create/rules/use-editor-rule.ts
+++ b/apps/web-ele/src/components/form-create/rules/use-editor-rule.ts
@@ -5,7 +5,7 @@ import {
  makeRequiredRule,
 } from '#/components/form-create/helpers';

-export const useEditorRule = () => {
+export function useEditorRule() {
  const label = '富文本';
  const name = 'Tinymce';
  return {
@@ -33,4 +33,4 @@ export const useEditorRule = () => {
      ]);
    },
  };
-};
+}
--- a/apps/web-ele/src/components/form-create/rules/use-select-rule.ts
+++ b/apps/web-ele/src/components/form-create/rules/use-select-rule.ts
@@ -13,7 +13,7 @@ import { selectRule } from '#/components/form-create/rules/data';
 *
 * @param option 规则配置
 */
-export const useSelectRule = (option: SelectRuleOption) => {
+export function useSelectRule(option: SelectRuleOption) {
  const label = option.label;
  const name = option.name;
  const rules = cloneDeep(selectRule);
@@ -42,4 +42,4 @@ export const useSelectRule = (option: SelectRuleOption) => {
      ]);
    },
  };
-};
+}
--- a/apps/web-ele/src/components/form-create/rules/use-upload-file-rule.ts
+++ b/apps/web-ele/src/components/form-create/rules/use-upload-file-rule.ts
@@ -5,7 +5,7 @@ import {
  makeRequiredRule,
 } from '#/components/form-create/helpers';

-export const useUploadFileRule = () => {
+export function useUploadFileRule() {
  const label = '文件上传';
  const name = 'FileUpload';
  return {
@@ -81,4 +81,4 @@ export const useUploadFileRule = () => {
      ]);
    },
  };
-};
+}
--- a/apps/web-ele/src/components/form-create/rules/use-upload-image-rule.ts
+++ b/apps/web-ele/src/components/form-create/rules/use-upload-image-rule.ts
@@ -5,7 +5,7 @@ import {
  makeRequiredRule,
 } from '#/components/form-create/helpers';

-export const useUploadImageRule = () => {
+export function useUploadImageRule() {
  const label = '单图上传';
  const name = 'ImageUpload';
  return {
@@ -90,4 +90,4 @@ export const useUploadImageRule = () => {
      ]);
    },
  };
-};
+}
--- a/apps/web-ele/src/components/form-create/rules/use-upload-images-rule.ts
+++ b/apps/web-ele/src/components/form-create/rules/use-upload-images-rule.ts
@@ -5,7 +5,7 @@ import {
  makeRequiredRule,
 } from '#/components/form-create/helpers';

-export const useUploadImagesRule = () => {
+export function useUploadImagesRule() {
  const label = '多图上传';
  const name = 'ImagesUpload';
  return {
@@ -86,4 +86,4 @@ export const useUploadImagesRule = () => {
      ]);
    },
  };
-};
+}