vue3-element-dict 2.1.2 → 3.0.1

package/README.md

@@ -377,6 +377,22 @@ getGlobalConfigApi().then(data => {
 
 ## 更新日志
 
+### 3.0.1
+
+1. 【修复】修复动态表单组件隐藏的表单变成显示后会校验错误的问题
+
+### 3.0.0
+
+1. 【新增】新增`ElInputDict`、`ElDynamicComponentsDict`、`ElDescriptionsDict`、`ElButtonsDict`组件
+
+2. 【优化】原`disableObj`字段配置改为`disabledObj`, 原先`disableObj`对象中的`disableValue`改为`disabledValues`
+
+3. 【优化】新增`mask`全局配置，用于替换字典包内置的脱敏方法
+
+4. 【优化】字典包配置项新增`mask`、`formatDate`、`validator`、`dynamicComponentsConfig`四个配置项用于新增或覆盖自定义脱敏方法、日期格式化方法、表单校验方法、动态组件配置。
+
+5. 【修复】调整几处细微的逻辑和样式细节
+
 ### 2.1.2
 
 1. 【优化】usuallyGetDictTypes配置了localDictCodes重复的字典类型时，给出警告，并且过滤掉本地存在的字典类型。

package/lib/style.css

@@ -0,0 +1 @@
+.el-buttons-dict[data-v-bcf5096d]{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;width:100%}.dict-dynamic-components.container-class[data-v-ccd77baf]{width:100%;box-sizing:border-box;display:flex;align-items:flex-start;flex-wrap:wrap;container-type:inline-size;container-name:dynamic-components}@container dynamic-components (min-width: 768px){.dict-dynamic-components[data-v-ccd77baf]>.comp-item.form:not(.full):not(.half):not(.three):not(.four){width:50%!important}}@container dynamic-components (min-width: 1024px){.dict-dynamic-components[data-v-ccd77baf]>.comp-item.form:not(.full):not(.half):not(.three):not(.four){width:33.33333%!important}}@container dynamic-components (min-width: 1400px){.dict-dynamic-components[data-v-ccd77baf]>.comp-item.form:not(.full):not(.half):not(.three):not(.four){width:25%!important}}.dict-dynamic-components[data-v-ccd77baf]>.comp-item{width:100%!important}.dict-dynamic-components[data-v-ccd77baf]>.comp-item.full{width:100%!important}.dict-dynamic-components[data-v-ccd77baf]>.comp-item.half{width:50%!important}.dict-dynamic-components[data-v-ccd77baf]>.comp-item.three{width:33.33333%!important}.dict-dynamic-components[data-v-ccd77baf]>.comp-item.four{width:25%!important}

package/lib/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/lib/vue3-element-dict-types/index.d.ts

@@ -0,0 +1,350 @@
+/**
+ * 字典配置相关开始
+ */
+export type TreeSetting = {
+  idField: string, //唯一标识字段名
+  parentIdField: string, //父节点唯一标识字段名
+  childrenField: string, //子节点标识字段名
+  firstId: string|number, // 根节点值
+  labelField: string, //label字段名
+  labelArrField: string, //给对象新增的中文数组字段名
+  idArrField: string, //给对象新增的id数组字段名
+  levelField: string, //给对象新增的层级字段名
+  level: number, // 给根目录配置的层级
+  leafField: string //叶子节点标识字段名
+}
+
+export interface IFilterDataFun {
+  (list: {[key: string]: any}[]): {key: string}[]
+}
+export interface IDisabledDataFun extends IFilterDataFun {}
+
+export type DictConfig = {
+  getDictCodeApi: any; // 获取字典的接口
+  version: string; // 当前字典最新版本号
+  localDictCodes: { [key: string]: object[] }; // 本地字典数据
+  versionKey: string; // 版本号缓存键名
+  dictDataKey: string; // 字典数据缓存键名
+  query: string; // 请求字典的参数名
+  format: {
+    // 格式化字典数据的 值和名 字段
+    value: string;
+    label: string;
+    disabled: string;
+    type: string;
+    color: string;
+  };
+  formatterDictList: (
+    data: { dictData: object; version: string },
+    query?: string
+  ) => object; //格式化字典数据
+  formatterDictVersion: (data: {
+    dictData: object;
+    version: string;
+  }) => string; // 格式化返回的最新字典版本号
+  filterDataFun: IFilterDataFun; // 字典数据过滤方法
+  disabledDataFun: IDisabledDataFun; // 字典数据禁用方法
+  formatterRequest: (query: string, dictType: string) => object; // 格式化请求体
+  storage: any; // localstorage   sessionstorage
+
+  isGetAll?: boolean; // 是否请求全部
+  usuallyGetDictTypes?: string; // 经常获取的字典数据
+  usuallyGetDictTypesByApi?: boolean; // 是否每次都通过接口获取数据
+  treeSetting: TreeSetting;
+}
+
+// 可选的字典配置
+export type OptionalDictConfig = {
+  getDictCodeApi: any; // 获取字典的接口
+  version: string; // 当前字典最新版本号
+  localDictCodes?: { [key: string]: object[] }; // 本地字典数据
+  versionKey?: string; // 版本号缓存键名
+  dictDataKey?: string; // 字典数据缓存键名
+  query?: string; // 请求字典的参数名
+  format?: {
+    // 格式化字典数据的 值和名 字段
+    value: string;
+    label: string;
+    disabled: string;
+    type: string;
+    color: string;
+  };
+  formatterDictList?: (
+    data: { dictCodeList: object; version: string },
+    query?: string
+  ) => object; //格式化字典数据
+  formatterDictVersion?: (data: {
+    dictCodeList: object;
+    version: string;
+  }) => string; // 格式化返回的最新字典版本号
+  filterDataFun?: (list: object[]) => object[]; // 字典数据过滤方法
+  disabledDataFun?: (list: object[]) => object[]; // 字典数据禁用方法
+
+  formatterRequest?: (query: string, dictType: string) => object; // 格式化请求体
+  storage?: any; // localstorage   sessionstorage
+  isGetAll?: boolean; // 是否请求全部
+  usuallyGetDictTypes?: string; // 经常获取的字典数据
+  usuallyGetDictTypesByApi?: boolean; // 是否每次都通过接口获取数据
+  treeSetting?: FewTreeSetting;
+}
+
+
+// 可选的树形配置
+export type OptionalTreeSetting = {
+  idField?: "id", //唯一标识字段名
+  parentIdField?: "parentId", //父节点唯一标识字段名
+  childrenField?: "children", //子节点标识字段名
+  firstId?: "0", // 根节点值
+  labelField?: "label", //label字段名
+  labelArrField?: "labelArr", //给对象新增的中文数组字段名
+  idArrField?: "idArr", //给对象新增的id数组字段名
+  levelField?: "level", //给对象新增的层级字段名
+  level?: 0, // 给根目录配置的层级
+  leafField?: "leaf" //叶子节点标识字段名
+}
+
+// 通过code获取树形数据配置
+export type GetTreeItemByCodeOptions = {
+  idField: string, 
+  parentIdField: string
+}
+
+export type GetTreeItemByLabelOptions = {
+  idField: string,
+  labelField: string, //唯一标识字段名
+  parentIdField: string //父节点唯一标识字段名
+}
+
+/**
+ * 字典配置相关结束
+ */
+
+/**
+ * 脱敏相关开始
+ */
+export type OptionalMaskOptions = {
+  start?: number; // 从前往后保留的位数，默认为 1
+  end?: number; // 从后往前保留的位数，默认为 0
+  middle?: number; // 中间展示几个symbol
+  symbol?: string; // 替换的字符，默认为 *
+}
+
+export type MaskOptions = {
+  start: number; // 从前往后保留的位数，默认为 1
+  end: number; // 从后往前保留的位数，默认为 0
+  symbol: string; // 替换的字符，默认为 *
+  middle?: number; // 中间展示几个symbol
+}
+
+export type MaskType = "name" | "mobile" |"address" | "idCard" | "none" | ""
+
+// 必填的脱敏配置
+export type DesensitizationOptions = MaskOptions & {
+  defaultVal: string,
+  maskType: MaskType,
+  middle?: number;
+}
+
+// 可选的脱敏方法配置
+export type OptionalDesensitizationOptions = OptionalMaskOptions & {
+  middle?: number,
+  defaultVal?: string,
+  maskType?: MaskType
+}
+/**
+ * 脱敏相关结束
+ */
+
+/**
+ * 日期格式化 开始
+ */
+export type DefaultForamt = {
+  date: string,
+  month: string,
+  datetime: string,
+  time: string,
+  year: string
+}
+
+export type FormatType = "date" | "month" | "datetime" | "time" | "year"
+
+/**
+ * 日期格式化 结束
+ */
+
+// 获取字典配置接口
+export interface IGetDictConfig {
+  (): DictConfig
+}
+
+// 通过key获取对应字典配置接口
+export interface IGetDictConfigByKey {
+  (string): any
+}
+
+// 判断是否是日期接口
+export interface IIsDate {
+  (string): boolean
+}
+
+// 格式化日期接口
+export interface IFormatDate {
+  (date: Date|string|number, format: string, defaultVal?:string): string
+}
+
+
+// 通过code获取字典数据接口
+export interface IGetLabelByCode {
+  (val: string | number, type: string, defaultVal?: string | number): Promise<string | number>
+}
+
+export interface IGetLabelByCodeFilter {
+  (val: string | number, type: string, defaultVal?: string | number): string | number | undefined
+}
+
+export type Format = { label: string | number; value: string | number }
+
+export type GetLabelByCodesOptions = {
+  defaultVal?: string | number,
+  formatFun?: (arr: object[], format: Format) => string|number,
+  spacer?: string
+}
+
+// 通过多个code获取多个label
+export interface IGetLabelByCodes {
+  (vals: string | (string | number)[], type: string, options?: GetLabelByCodesOptions): Promise<string|number>
+}
+
+export interface IGetLabelByCodesFilter {
+  (vals: string | (string | number)[], type: string, options?: GetLabelByCodesOptions): string | number | undefined
+}
+
+
+export interface IGetCodeByLabel {
+  (val: string | number, type: string, defaultVal?: string | number): Promise<string | number>
+}
+
+export interface IGetCodeByLabelFilter {
+  (val: string | number, type: string, defaultVal?: string | number): string | number | undefined
+}
+
+
+export type GetCodeByLabelsOptions = GetLabelByCodesOptions
+export interface IGetCodeByLabels {
+  (vals: string | (string | number)[], type: string, options?: GetCodeByLabelsOptions): Promise<string|number>
+}
+
+export interface IGetCodeByLabelsFilter {
+  (vals: string | (string | number)[], type: string, options?: GetCodeByLabelsOptions): string|number|undefined
+}
+
+export interface IGetDictObjByDictTypes {
+  (dictTypes: string | string[]): Promise<object>
+}
+
+export interface IListToTree {
+  (data: object[], config?: OptionalTreeSetting, parentObj?:{ [key: string]: any }): object[]
+}
+
+export interface IGetTreeItemByCode {
+  (id: string | number, arr: {[key: string]: any}[], options: GetTreeItemByCodeOptions): object[]
+}
+
+export interface IGetTreeItemByLabel {
+  (label: string | number, arr: {[key: string]: any}[], options: GetTreeItemByLabelOptions): object[]
+}
+
+export interface IMask {
+  (str: string, paramsOptions: OptionalMaskOptions): string
+}
+
+export interface IMaskName {
+  (name: string, symbol:string): string
+}
+
+export interface IMaskIdCard {
+  (idcard: string, symbol: string): string
+}
+
+export interface IMaskPhone {
+  (phone: string | number, symbol: string): string
+}
+
+export interface IMaskAddress {
+  (address: string, symbol: string): string
+}
+
+export type MaskTypeObj = {
+  mobile: IMaskPhone
+  name: IMaskName
+  address: IMaskAddress
+  idCard: IMaskIdCard
+}
+
+export interface IDesensitization {
+  (str: string, options: OptionalDesensitizationOptions): string
+}
+
+export interface IFormatFun {
+  (arr: any, treeSetting: TreeSetting): string|number
+}
+export type GetTreeLabelByCodeOptions = {
+  defaultVal?: string | number,
+  formatFun?: IFormatFun,
+  treeSetting?: OptionalTreeSetting
+}
+export interface IGetTreeLabelByCode {
+  (val: string, type: string, options?:GetTreeLabelByCodeOptions): Promise<string|number>
+}
+
+export interface IGetTreeLabelByCodeFilter {
+  (val: string, type: string, options?:GetTreeLabelByCodeOptions): string | number | undefined
+}
+
+export interface IFormatFunIn {
+  (arr: any, treeSetting: TreeSetting): string
+}
+
+export interface IFormatFunOut {
+  (arr: any, treeSetting: TreeSetting): string
+}
+
+export type GetTreeLabelByCodesOptions = {
+  defaultVal?: string | number,
+  formatFunIn?: IFormatFunIn,
+  treeSetting?: OptionalTreeSetting,
+  formatFunOut?: IFormatFunOut, 
+  spacer?: string
+}
+
+export interface IGetTreeLabelByCodes {
+  (vals: string[] | string, type: string, options?: GetTreeLabelByCodesOptions): Promise<string|number>
+}
+
+export interface IGetTreeLabelByCodesFilter {
+  (vals: string[] | string, type: string, options?: GetTreeLabelByCodesOptions): string | number | undefined
+}
+
+export type GetTreeCodeByLabelOptions = GetTreeLabelByCodeOptions
+export interface IGetTreeCodeByLabel {
+  ( val: string, type: string, options?: GetTreeCodeByLabelOptions): Promise<string | number>
+}
+
+export interface IGetTreeCodeByLabelFilter {
+  ( val: string, type: string, options?: GetTreeCodeByLabelOptions): string | number | undefined
+}
+
+export type GetTreeCodeByLabelsOptions = GetTreeLabelByCodesOptions
+export interface IGetTreeCodeByLabels {
+  ( vals: string[] | string, type: string, options?: GetTreeCodeByLabelsOptions): Promise<string|number>
+}
+
+export interface IGetTreeCodeByLabelsFilter {
+  ( vals: string[] | string, type: string, options?: GetTreeCodeByLabelsOptions): string | number | undefined
+}
+
+
+
+export interface IGetItemByCode {
+  (val: string | number, type: string, defaultVal?: string | number): Promise<object | string | number>
+}