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

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; // 自定义标签样式
-  labelStyle?: CSSProperties;
+  field: string; // 对应 data 中的字段名
-  // 对应 data 中的字段名
+  label: JSX.Element | string | VNode; // 内容的描述
-  field: string;
+  span?: number; // 包含列的数量
-  // 内容的描述
+  show?: (...arg: any) => boolean; // 是否显示
-  label: JSX.Element | string | VNode;
+  slot?: string; // 插槽名称
-  // 包含列的数量
-  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; // 是否包含卡片组件
-  useCard?: boolean;
+  schema: DescriptionItemSchema[]; // 描述项配置
-  // 描述项配置
+  data: Recordable<any>; // 数据
-  schema: DescriptionItemSchema[];
+  title?: string; // 标题
-  // 数据
+  bordered?: boolean; // 是否包含边框
-  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 {

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': {

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} />
       );

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')

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';

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; // 自定义标签样式
-  labelStyle?: CSSProperties;
+  field: string; // 对应 data 中的字段名
-  // 对应 data 中的字段名
+  label: JSX.Element | string | VNode; // 内容的描述
-  field: string;
+  span?: number; // 包含列的数量
-  // 内容的描述
+  show?: (...arg: any) => boolean; // 是否显示
-  label: JSX.Element | string | VNode;
+  slot?: string; // 插槽名称
-  // 包含列的数量
-  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[]; // 描述项配置
-  schema: DescriptionItemSchema[];
+  data: Recordable<any>; // 数据
-  // 数据
-  data: Recordable<any>;
 }
 
 export interface DescInstance {

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"
     >

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) => {
       );
     },
   });
-};
+}

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} />
       );
     },
   });
-};
+}

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')

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: `

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 */
- * 字典选择器规则，如果规则使用到动态数据则需要单独配置不能使用 useSelectRule
+export function useDictSelectRule() {
- */
-export const 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 = () => {
       ]);
     },
   };
-};
+}

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 = () => {
       ]);
     },
   };
-};
+}

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) => {
       ]);
     },
   };
-};
+}

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 = () => {
       ]);
     },
   };
-};
+}

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 = () => {
       ]);
     },
   };
-};
+}

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 = () => {
       ]);
     },
   };
-};
+}