perf: update form types

vben
1 parent 3713487c
Showing 12 changed files with 100 additions and 22 deletions
CHANGELOG.zh_CN.md
README.en-US.md
README.md
src/components/Button/types.ts
src/components/Form/src/types/form.ts
src/components/Table/src/const.ts
src/views/demo/comp/transition/index.vue
src/views/demo/form/CustomerForm.vue
src/views/demo/form/DynamicForm.vue
src/views/demo/form/RefForm.vue
src/views/demo/form/RuleForm.vue
src/views/demo/form/UseForm.vue
@@ -2,6 +2,7 @@
  
 ### ✨ Features
  
+- 更新组件文档
 - 面包屑支持显示图标
 - 新增 tinymce 富文本组件
 - 表单新增 submitOnReset 控制是否在重置时重新发起请求
@@ -19,7 +20,6 @@
 - 关闭多标签页 tabs 动画
 - 升级 vite 版本为`v1.0.0.rc6`
 - 删除中文路径警告。rc6 已修复
-- 更新部分组件文档
  
 ### 🐛 Bug Fixes
  
@@ -228,11 +228,11 @@ yarn clean:lib # Delete node_modules, supported window
 - [x] System performance optimization
 - [x] Data import and export
 - [x] Global error handling
+- [x] Rich text component
  
 ## Developing features
  
 - [ ] Upload component
-- [ ] Rich text component
 - [ ] Theme configuration
 - [ ] Dark theme
 - [ ] Build CDN
@@ -226,11 +226,11 @@ yarn clean:lib # 删除node_modules，兼容window系统
 - [x] 数据导入导出
 - [x] 系统性能优化
 - [x] 全局错误处理
+- [x] 富文本组件
  
 ## 正在开发的功能
  
 - [ ] 上传组件
-- [ ] 富文本组件
 - [ ] 主题配置
 - [ ] 黑暗主题
 - [ ] 打包 CDN
+import { VNodeChild } from 'vue';
+
+export interface BasicButtonProps {
+  /**
+   * can be set to primary ghost dashed danger(added in 2.7) or omitted (meaning default)
+   * @default 'default'
+   * @type string
+   */
+  type?: 'primary' | 'danger' | 'dashed' | 'ghost' | 'default';
+
+  /**
+   * set the original html type of button
+   * @default 'button'
+   * @type string
+   */
+  htmlType?: 'button' | 'submit' | 'reset' | 'menu';
+
+  /**
+   * set the icon of button
+   * @type string
+   */
+  icon?: VNodeChild | JSX.Element;
+
+  /**
+   * can be set to circle or circle-outline or omitted
+   * @type string
+   */
+  shape?: 'circle' | 'circle-outline';
+
+  /**
+   * can be set to small large or omitted
+   * @default 'default'
+   * @type string
+   */
+  size?: 'small' | 'large' | 'default';
+
+  /**
+   * set the loading status of button
+   * @default false
+   * @type boolean | { delay: number }
+   */
+  loading?: boolean | { delay: number };
+
+  /**
+   * disabled state of button
+   * @default false
+   * @type boolean
+   */
+  disabled?: boolean;
+
+  /**
+   * make background transparent and invert text and border colors, added in 2.7
+   * @default false
+   * @type boolean
+   */
+  ghost?: boolean;
+
+  /**
+   * option to fit button width to its parent width
+   * @default false
+   * @type boolean
+   */
+  block?: boolean;
+
+  onClick?: (e?: Event) => void;
+}
-import type { Form, ValidationRule } from 'ant-design-vue/types/form/form';
+import type { Form, NamePath, ValidationRule } from 'ant-design-vue/types/form/form';
 import type { VNode } from 'vue';
 import type { BasicButtonProps } from '/@/components/Button/types';
 import type { FormItem } from './formItem';
@@ -12,16 +12,23 @@ export interface RenderCallbackParams {
   model: any;
   field: string;
 }
+
+export interface ButtonProps extends BasicButtonProps {
+  text?: string;
+}
+
 export interface FormActionType extends Form {
-  submit(): Promise<void>;
-  setFieldsValue<T>(values: T): void;
-  resetFields(): Promise<any>;
+  submit: () => Promise<void>;
+  setFieldsValue: <T>(values: T) => void;
+  resetFields: () => Promise<any>;
   getFieldsValue: () => any;
   clearValidate: (name?: string | string[]) => void;
-  updateSchema(data: Partial<FormSchema> | Partial<FormSchema>[]): void;
-  setProps(formProps: Partial<FormProps>): void;
-  removeSchemaByFiled(field: string | string[]): void;
-  appendSchemaByField(schema: FormSchema, prefixField?: string): void;
+  updateSchema: (data: Partial<FormSchema> | Partial<FormSchema>[]) => void;
+  setProps: (formProps: Partial<FormProps>) => void;
+  removeSchemaByFiled: (field: string | string[]) => void;
+  appendSchemaByField: (schema: FormSchema, prefixField?: string) => void;
+  validateFields: (nameList?: NamePath[]) => Promise<any>;
+  validate: (nameList?: NamePath[]) => Promise<any>;
 }
 export type RegisterFn = (formInstance: FormActionType) => void;
  
@@ -38,7 +45,7 @@ export interface FormProps {
   wrapperCol?: Partial<ColEx>;
  
   // 通用col配置
-  baseColProps?: any;
+  baseColProps?: Partial<ColEx>;
  
   // 表单配置规则
   schemas?: FormSchema[];
@@ -55,7 +62,7 @@ export interface FormProps {
   // 时间区间字段映射成多个
   fieldMapToTime?: FieldMapToTime;
   // 自动设置placeholder
-  autoSetPlaceHolder: boolean;
+  autoSetPlaceHolder?: boolean;
   // 校验信息是否加入label
   rulesMessageJoinLabel?: boolean;
   // 是否显示收起展开按钮
@@ -66,10 +73,10 @@ export interface FormProps {
   showActionButtonGroup?: boolean;
  
   // 重置按钮配置
-  resetButtonOptions?: Partial<BasicButtonProps>;
+  resetButtonOptions?: Partial<ButtonProps>;
  
   // 确认按钮配置
-  submitButtonOptions?: Partial<BasicButtonProps>;
+  submitButtonOptions?: Partial<ButtonProps>;
  
   // 操作列配置
   actionColOptions?: Partial<ColEx>;
@@ -129,7 +136,7 @@ export interface FormSchema {
   render?: (renderCallbackParams: RenderCallbackParams) => VNode | VNode[] | string;
  
   // 渲染 col内容,需要外层包裹 form-item
-  renderColContent?: (renderCallbackParams: RenderCallbackParams) => VNode | VNode[];
+  renderColContent?: (renderCallbackParams: RenderCallbackParams) => VNode | VNode[] | string;
  
   renderComponentContent?: (renderCallbackParams: RenderCallbackParams) => any;
  
@@ -2,21 +2,32 @@ import { SorterResult } from &#39;ant-design-vue/types/table/table&#39;;
  
 export const ROW_KEY = 'key';
  
+// 可选的每页显示条数;
 export const PAGE_SIZE_OPTIONS = ['10', '50', '80', '100'];
  
+// 每页显示条数
 export const PAGE_SIZE = ~~PAGE_SIZE_OPTIONS[0];
  
+// 通用接口字段设置
+// 支持 xxx.xxx.xxx格式
 export const FETCH_SETTING = {
+  // 传给后台的当前页字段名
   pageField: 'page',
+  // 传给后台的每页显示记录数字段名
   sizeField: 'pageSize',
+  // 接口返回的表格数据字段名
   listField: 'items',
+  // 接口返回的表格总数字段名
   totalField: 'total',
 };
  
+// 配置通用排序函数
 export function DEFAULT_SORT_FN(sortInfo: SorterResult<any>) {
   const { field, order } = sortInfo;
   return {
+    // 传给后台的排序字段你
     field,
+    // 传给后台的排序方式  asc/desc
     order,
   };
 }
@@ -59,7 +59,6 @@
       Select,
       FadeTransition,
       ScaleTransition,
-
       SlideYTransition,
       ScrollYTransition,
       SlideYReverseTransition,
 <template>
   <div class="m-4">
-    <div class="mb-4"> </div>
     <CollapseContainer title="自定义表单">
       <BasicForm @register="register" @submit="handleSubmit" />
     </CollapseContainer>
@@ -6,7 +6,6 @@
       <a-button @click="appendField" class="mr-2">往字段3后面插入字段10</a-button>
       <a-button @click="deleteField" class="mr-2">删除字段11</a-button>
     </div>
-    <div class="mb-4"> </div>
     <CollapseContainer title="动态表单示例,动态根据表单内其他值改变">
       <BasicForm @register="register" />
     </CollapseContainer>
@@ -53,7 +53,6 @@
         修改查询按钮
       </a-button>
     </div>
-    <div class="mb-4"> </div>
     <CollapseContainer title="使用ref调用表单内部函数示例">
       <BasicForm
         :schemas="schemas"
@@ -6,7 +6,6 @@
       <a-button @click="getFormValues" class="mr-2">获取表单值</a-button>
       <a-button @click="setFormValues" class="mr-2">设置表单值</a-button>
     </div>
-    <div class="mb-4"> </div>
     <CollapseContainer title="表单校验">
       <BasicForm @register="register" @submit="handleSubmit" />
     </CollapseContainer>
@@ -53,7 +53,6 @@
         修改查询按钮
       </a-button>
     </div>
-    <div class="mb-4"> </div>
     <CollapseContainer title="useForm示例">
       <BasicForm @register="register" @submit="handleSubmit" />
     </CollapseContainer>