@wyfex/ivue 0.19.4 → 0.20.0

package/src/components/UseCrud/types.ts

@@ -1,4 +1,10 @@
-import type { Component, ExtractPropTypes } from 'vue'
+import type {
+  Component,
+  ComputedRef,
+  ExtractPropTypes,
+  Ref,
+  ShallowRef
+} from 'vue'
 import componentProps from './props'
 import type { FormColumn } from '../UseElForm/types'
 import type {
@@ -15,51 +21,54 @@ export type Props = ExtractPropTypes<typeof componentProps>
  * emits类型
  */
 export type Emits = {
-  /**
-   * dictKeys事件
-   */
+  /** dictKeys事件 */
   (e: 'onDictKeys', value?: string[]): void
 }
 
 /**
  * 基础配置类型
  */
-export type BaseConfigs = Omit<FormColumn, 'prop'> & Omit<TableColumn, 'prop'>
+export type BaseConfigs = FormColumn & TableColumn
 
 /**
  * 配置项接口
  */
 export interface Configs extends BaseConfigs {
-  prop: string
+  /** 查询表单项标签 当查询表单项标签和表格项标签不一致使使用 */
+  queryLabel?: string
+  /** 查询表单项属性 当查询表单项属性和表格项属性不一致使使用，可传以逗号分隔的字符串，组件内部自动拆解*/
+  queryProp?: string
+  /** 是否仅搜索 */
   onlySearch?: boolean
+  /** 表格排序 */
   tableOrder?: number
 }
 
 /**
  * 分割线配置接口
- * show：是否显示分割线
- * borderStyle：分割线边框样式
  */
 export interface Divider {
+  /** 是否显示分割线 */
   show?: boolean
+  /** 分割线边框样式 */
   borderStyle?: 'none' | 'solid' | 'hidden' | 'dashed'
 }
 
 /**
  * 操作栏配置接口
- * margin：操作栏外边距
- * showControlFormDisplayBtn：是否显示【收起/展开查询】按钮
- * controlFormDisplayBtnWithOpenedIcon：【收起/展开查询】按钮展开时图标
- * controlFormDisplayBtnWithClosedIcon：【收起/展开查询】按钮收起时图标
- * reverse：是否反转操作栏按钮 仅showControlFormDisplayBtn为true时生效
- * divider：操作栏底部分割线
  */
 export interface ActionBar {
+  /** 操作栏外边距 */
   margin?: string
+  /** 是否显示【收起/展开查询】按钮 */
   showControlFormDisplayBtn?: boolean
+  /** 【收起/展开查询】按钮展开时图标 */
   controlFormDisplayBtnWithOpenedIcon?: Component
+  /** 【收起/展开查询】按钮收起时图标 */
   controlFormDisplayBtnWithClosedIcon?: Component
+  /** 是否反转操作栏按钮 仅showControlFormDisplayBtn为true时生效 */
   reverse?: boolean
+  /** 操作栏底部分割线 */
   divider?: Divider
 }
 
@@ -67,19 +76,86 @@ export interface ActionBar {
  * extConfig接口
  */
 export interface ExtConfig {
-  /**
-   * 操作栏配置项
-   */
+  /** 增删改查请求配置项 */
+  crudFetch?: {
+    /** 查询api */
+    queryApi?: Function
+    /** 是否立即查询 */
+    queryImmediate?: boolean
+    /** 自动取消查询策略 配合signal实现接口取消请求 */
+    autoCancelQueryStrategy?: 'none' | 'unmount' | 'deactivate' | 'both'
+    /** 开始查询前钩子 用于注入字典数据等 */
+    onQueryBefore?: (done: () => void) => void
+    /** 查询错误钩子  */
+    onQueryError?: (err: any) => void
+    /** 删除api */
+    deleteApi?: Function
+  }
+  /** 操作栏配置项 */
   actionBar?: ActionBar
-  /**
-   * 弹窗配置项
-   * type：弹窗类型 支持Drawer和Dialog
-   * 其他配置项由于组件内部已进行v-bind透传，不不在此重复声明接口，详见UseElDrawer和UseElDialog组件types
-   */
-  modal?: { type?: 'Drawer' | 'Dialog' }
+  /** 弹窗配置项 */
+  modal?: {
+    /** 弹窗类型 支持Drawer和Dialog */
+    type?: 'Drawer' | 'Dialog'
+    /** 其他配置项由于组件内部已进行v-bind透传，故不在此重复声明接口，详见UseElDrawer和UseElDialog组件types */
+  }
 }
 
 /**
  * 合并后的extConfig类型 本组件ExtConfig和UseElTable组件ExtConfig合并
  */
 export type MergedExtConfig = ExtConfig & TableExtConfig
+
+/**
+ * Crud状态类型
+ */
+export interface UseCrudState {
+  /** 表单列配置 */
+  formColumns: FormColumn[]
+  /** 表格列配置 */
+  tableColumns: TableColumn[]
+  /** 表单模型 查询表单的原始数据模型 */
+  formModel: Record<string, any>
+  /** 表单参数 查询表单提交接口的数据参数 */
+  formParams: Record<string, any>
+  /** 表格loading */
+  tableLoading: boolean
+  /** 表格数据 */
+  tableData: any[]
+  /** 当前页码 */
+  currentPage: number
+  /** 分页大小 */
+  pageSize: number
+  /** 分页总数 */
+  total: number
+  /** 字典映射 */
+  dictMap: Record<string, any>
+}
+
+/**
+ * Crud返回类型
+ */
+export interface UseCrudReturn {
+  state: Ref<UseCrudState>
+  heightComputed: ComputedRef<string>
+  fetchTableData: (
+    options?: { params?: Record<string, any>; isPageApi?: boolean },
+    cb?: () => void
+  ) => Promise<any>
+  onQuery: (e: Record<string, unknown>, done?: () => void) => void
+  onCancelQueryRequest: () => void
+  handleDelete: (
+    payload: { id?: string | number; ids?: string | Array<string | number> },
+    loadingConfig: { source?: Record<string, unknown>; key?: string },
+    successCb?: () => void,
+    errorCb?: (err: unknown) => void,
+    successMsg?: string
+  ) => Promise<void>
+  margin: ComputedRef<string | undefined>
+  actionBar: any
+  handleDisplayQueryForm: () => void
+  showModal: Ref<boolean>
+  modalComponent: ShallowRef<Component | null>
+  handleShowModal: () => Promise<void>
+  handleCloseModal: ComputedRef<() => void>
+}

package/src/components/UseElButton/types.ts

@@ -10,9 +10,7 @@ export type Props = ExtractPropTypes<typeof componentProps>
  * emits类型
  */
 export type Emits = {
-  /**
-   * 点击事件 默认自带防抖
-   */
+  /** 点击事件 默认自带防抖 */
   (e: 'click', value?: string | number | Record<string, unknown>): void
 }
 
@@ -20,31 +18,18 @@ export type Emits = {
  * extConfig接口
  */
 export interface ExtConfig {
-  /**
-   * 防抖配置项 无需防抖将delay设置为0即可
-   */
+  /** 防抖配置项 无需防抖将delay设置为0即可 */
   debounce?: {
-    /**
-     * 防抖时间
-     */
+    /** 防抖时间 */
     delay?: number
-    /**
-     * 是否立即开启防抖
-     */
+    /** 是否立即开启防抖 */
     immediate?: boolean
   }
-  /**
-   * 二次确认配置项
-   */
+  /** 二次确认配置项 */
   confirm?: {
-    /**
-     * 二次确认数据 显式设置则开启二次确认
-     * 可为String、Number、Object、Array，无需传递数据则显式设置为null
-     */
+    /** 二次确认数据 显式设置则开启二次确认，可为String、Number、Object、Array，无需传递数据则显式设置为null */
     data?: string | number | Record<string, unknown> | unknown[] | null
-    /**
-     * 二次确认类型 同ElButton类型
-     */
+    /** 二次确认类型 同ElButton类型 */
     type?:
       | 'default'
       | 'primary'
@@ -53,25 +38,15 @@ export interface ExtConfig {
       | 'danger'
       | 'info'
       | ''
-    /**
-     * 二次确认数据主键key 对象或对象数组需要
-     */
+    /** 二次确认数据主键key 对象或对象数组需要 */
     dataKey?: string
-    /**
-     * 是否将数组转换为以逗号分隔的字符串 如：[1,2] => '1,2'
-     */
+    /** 是否将数组转换为以逗号分隔的字符串 如：[1,2] => '1,2' */
     toJoin?: boolean
-    /**
-     * 是否追加s到dataKey后面 如：id => ids
-     */
+    /** 是否追加s到dataKey后面 如：id => ids */
     appendS?: boolean
-    /**
-     * 二次确认弹框标题
-     */
+    /** 二次确认弹框标题 */
     title?: string
-    /**
-     * 二次确认弹框内容
-     */
+    /** 二次确认弹框内容 */
     content?: string
   }
 }

package/src/components/UseElCheckbox/types.ts

@@ -10,6 +10,6 @@ export type Props = ExtractPropTypes<typeof componentProps>
  * emits类型
  */
 export type Emits = {
-  // 更新value值
+  /** 更新value值 */
   (e: 'update:modelValue', value: string | number | (string | number)[]): void
 }

package/src/components/UseElConfigProvider/types.ts

@@ -11,34 +11,26 @@ export type Props = ExtractPropTypes<typeof componentProps>
  * extConfig接口
  */
 export interface ExtConfig {
-  /**
-   * 字典属性配置项
-   */
+  /** 字典属性配置项 */
   dictProps?: DictProps
-  /**
-   * crud配置项
-   * pageHeight：crud表格页面高度 extConfig.mode.type='PAGE'时生效，显式设置则表格自适应高度不生效，否则默认使用表格自适应高度
-   * modalHeight：crud表格弹窗高度 extConfig.mode.type='MODAL'时生效，显式设置则表格自适应高度不生效，否则默认使用表格自适应高度
-   */
+  /** crud配置项 */
   crud?: {
+    /** crud表格页面高度 extConfig.mode.type='PAGE'时生效，显式设置则表格自适应高度不生效，否则默认使用表格自适应高度 */
     pageHeight?: string
+    /** crud表格弹窗高度 extConfig.mode.type='MODAL'时生效，显式设置则表格自适应高度不生效，否则默认使用表格自适应高度 */
     modalHeight?: string
   }
-  /**
-   * 表格配置项
-   * pageHeight：表格页面高度 extConfig.mode.type='PAGE'时生效，显式设置则表格自适应高度不生效，否则默认使用表格自适应高度
-   * modalHeight：表格弹窗高度 extConfig.mode.type='MODAL'时生效，显式设置则表格自适应高度不生效，否则默认使用表格自适应高度
-   * pageBottomOffset：表格页面底部预留偏移
-   * modalBottomOffset：表格弹窗底部预留偏移
-   */
+  /** 表格配置项 */
   table?: {
+    /** 表格页面高度 extConfig.mode.type='PAGE'时生效，显式设置则表格自适应高度不生效，否则默认使用表格自适应高度 */
     pageHeight?: string
+    /** 表格弹窗高度 extConfig.mode.type='MODAL'时生效，显式设置则表格自适应高度不生效，否则默认使用表格自适应高度 */
     modalHeight?: string
+    /** 表格页面底部预留偏移 */
     pageBottomOffset?: number
+    /** 表格弹窗底部预留偏移 */
     modalBottomOffset?: number
   }
-  /**
-   * 上传配置项
-   */
+  /** 上传配置项 */
   upload?: UploadConfig
 }

package/src/components/UseElDatePicker/types.ts

@@ -7,9 +7,9 @@ import componentProps from './props'
 export type Props = ExtractPropTypes<typeof componentProps>
 
 /**
- * emits接口
+ * emits类型
  */
-export interface Emits {
-  // 更新value值
+export type Emits = {
+  /** 更新value值 */
   (e: 'update:modelValue', value: string | number | any[]): void
 }

package/src/components/UseElDialog/props.ts

@@ -17,11 +17,18 @@ export default {
     default: true
   },
   /**
-   * el-dialog内容区域最大高度
+   * el-dialog CSS 中的 margin-top 值 默认12dvh
+   */
+  top: {
+    type: String,
+    default: '12dvh'
+  },
+  /**
+   * el-dialog内容区域最大高度 默认为autoMax，内部自动根据浏览器高度进行计算最大高度
    */
   maxHeight: {
     type: [String, Number],
-    default: ''
+    default: 'autoCalcMaxHeight'
   },
   /**
    * el-scrollbar不响应容器尺寸变化，如果容器尺寸不会发生变化，最好设置它可以优化性能
@@ -108,6 +115,13 @@ export default {
     type: String,
     default: '取消'
   },
+  /**
+   * 确定按钮loading状态
+   */
+  confirmLoading: {
+    type: Boolean,
+    default: false
+  },
   /**
    * 取消按钮类型
    */

package/src/components/UseElDrawer/props.ts

@@ -87,6 +87,13 @@ export default {
     type: String,
     default: '取消'
   },
+  /**
+   * 确定按钮loading状态
+   */
+  confirmLoading: {
+    type: Boolean,
+    default: false
+  },
   /**
    * 取消按钮类型 同ElButton类型
    */

package/src/components/UseElForm/types.ts

@@ -11,9 +11,7 @@ export type Props = ExtractPropTypes<typeof componentProps>
  * emits类型
  */
 export type Emits = {
-  /**
-   * dictKeys事件
-   */
+  /** dictKeys事件 */
   (e: 'onDictKeys', value?: string[]): void
 }
 
@@ -369,15 +367,10 @@ export interface FormColumn {
   label?: string
   /**
    * el-form-item的prop
+   * 一般情况下为必传 为适配UseCrud组件类型特将此属性设置为非必传
    * 可传以逗号分隔的字符串，组件内部自动拆解，如'startDate,endDate' => { startDate: xxx, endDate: yyy }
    */
-  prop: string
-  /**
-   * 查询prop
-   * 当查询表单（如起止时间字段拆分）和列表prop字段不一致时传入该配置项
-   * 可传以逗号分隔的字符串，组件内部自动拆解，亦可传入字符串数组
-   */
-  queryProp?: string | string[]
+  prop?: string
   /**
    * 是否为必填项
    * 如为boolean则使用基础必填校验