Data Descriptions 数据描述列表

该组件用于快速生成数据描述列表，内部封装了列表项渲染、文件处理等逻辑，只需传入data和fields属性即可。

全局配置

在全局配置组件属性。

DataDescriptions组件属性配置

app.provide(DATA_DESCRIPTIONS_KEY, {
  border: true,
  column: 2,
  // others props...
});

业务注入

在全局注入权限校验和处理文件相关业务。

注入权限校验业务

// 假设当前登录用户拥有以下权限标识
const authoritys = ['docAdmin'];
app.provide(CHECK_AUTHORITY_KEY, authority => authoritys.includes(authority));

注入处理文件地址业务

app.provide(HANDLE_FILE_URLS_KEY, urls => {
  return (
    urls
      ?.split(',')
      ?.map(
        url =>
          `${import.meta.env.VITE_FILE_URL}/ruralLivingEnv/fileControll/downLoadFile?swfName=${url}`,
      ) ?? []
  );
});

注入处理缩略图地址业务

app.provide(HANDLE_THUMB_URLS_KEY, urls => {
  return (
    urls?.split(',')?.map(url => {
      const fileSuffix = url.split('.').pop();
      return `${import.meta.env.VITE_FILE_URL}/ruralLivingEnv/fileControll/downLoadFile?swfName=${url.replace(
        '.' + fileSuffix,
        '_thumb.' + fileSuffix,
      )}`;
    }) ?? []
  );
});

基础用法

权限校验

组件内部封装了权限校验逻辑，使用前需要在全局注入权限校验相关方法。如果权限标识校验没有通过，则对应的内容不会被渲染。

格式化内容

传入formatter函数可以对描述项的内容进行格式化处理。

加密描述项2.1.0

组件提供了加密描述项对数据进行加密展示，通过传入解密逻辑可以实现描述项的解密查看功能。

提示

加密表单项功能内部基于Verify组件实现，使用前需要在全局配置好验证码组件的相关属性。

特殊描述项

为了更方便的在描述项列表中使用标签、链接等组件，组件内部对这些组件的部分属性进行了重写和扩展。

标签项2.1.0

对ElTag的type属性进行了重写。

自定义描述项内容

通过设置fieldType为slot，你可以自定义描述项的内容。

动态描述列表2.1.3

可以通过字段配置项的watchEffect实现描述列表内容的动态切换，注意需要动态切换的fields必须是响应式数据。

属性&事件&插槽透传

Data Descriptions基于ElDescriptions封装，所以你可以传入ElDescriptions的所有属性和事件，并且在字段配置属性fields中，你可以透传属性和事件给对应的ElDescriptionsItem。

属性

属性名	说明	类型	默认值
data	描述项列表数据	`T` / `Promise<T>`	—
fields	字段配置信息	`DataDescriptionsFields<T>`	[]

DataDescriptionsField

属性名	说明	类型	默认值
prop	字段名称	`string`	—
fieldType	描述项字段类型	`DescriptionsItemFieldType`	text
authority	权限标识	`string` / `string[]`	—
formatter	格式化字段内容	`Function`	—
show2.1.3	是否展示	`boolean`	true
watchEffect2.1.3	描述项副作用，通常用于实现动态描述列表功能	`Function`	—

fieldType值对应渲染组件

字段类型	说明	对应的渲染组件
`text`	文本	—
`ciphertext`2.1.0	加密文本	LivVerify
`tag`2.1.0	标签	ElTag
`link`2.1.0	链接	ElLink
`image`	图片	ElImage
`audio`	音频	audio标签
`video`	视频	video标签
`file`2.1.0	文件	ElLink
`qrcode`	二维码	LivQrCode
`richText`	富文本	div标签
`slot`	插槽	—

类型声明

import type {
  ImageProps,
  LinkProps,
  descriptionProps,
  descriptionItemProps,
  TagProps,
} from 'element-plus';
import type { ExtractPropTypes, MaybeRef } from 'vue';
import type { QrCodeProps } from '../../qr-code';
import type { VerifyProps, VerifyResult } from '../../verify';

/**
 * 描述列表属性
 * @template T 描述列表的数据类型
 */
export interface DataDescriptionsProps<T = Record<string | number | symbol, any>> {
  /**
   * 描述列表数据
   * @template T 描述列表的数据类型
   */
  data?: T | Promise<T>;
  /**
   * 描述列表字段配置项集合
   * @template T 描述列表的数据类型
   */
  fields: DataDescriptionsFields<T>;
}

/**
 * 描述项字段类型
 */
export type DescriptionsItemFieldType =
  | 'text'
  | 'ciphertext'
  | 'tag'
  | 'link'
  | 'image'
  | 'audio'
  | 'video'
  | 'file'
  | 'qrcode'
  | 'richText'
  | 'slot';

/**
 * 描述列表字段配置项
 * @template T 描述列表的数据类型
 */
export type DataDescriptionsField<T = Record<string | number | symbol, any>> =
  | TextDescriptionsItemField<T>
  | CiphertextDescriptionsItemField<T>
  | TagDescriptionsItemField<T>
  | LinkDescriptionsItemField<T>
  | ImageDescriptionsItemField<T>
  | AudioDescriptionsItemField<T>
  | VideoDescriptionsItemField<T>
  | FileDescriptionsItemField<T>
  | QrCodeDescriptionsItemField<T>
  | RichTextDescriptionsItemField<T>
  | SlotDescriptionsItemField<T>;

/**
 * 描述列表字段配置项集合
 * @template T 描述列表的数据类型
 */
export type DataDescriptionsFields<T = Record<string | number | symbol, any>> = MaybeRef<
  DataDescriptionsField<T>
>[];

/**
 * el-descriptions-item属性
 */
export type ElDescriptionsItemProps = ExtractPropTypes<typeof descriptionItemProps>;

/**
 * el-descriptions属性
 */
export type ElDescriptionsProps = ExtractPropTypes<typeof descriptionProps>;

/**
 * 描述项基类
 * @template T 描述列表的数据类型
 */
export interface DescriptionsItemField<T = Record<string | number | symbol, any>>
  extends Partial<ElDescriptionsItemProps> {
  /**
   * 字段名称
   */
  prop: string;
  /**
   * 描述项字段类型
   */
  fieldType?: DescriptionsItemFieldType;
  /**
   * 权限标识
   */
  authority?: string | string[];
  /**
   * 用来格式化内容
   * @template T 描述列表的数据类型
   * @param value 描述项数据对象对应的{@link prop}字段值
   * @param data 描述项数据对象
   * @returns 格式化后的内容
   */
  formatter?: (value: T[keyof T], data: T) => string;
  /**
   * 是否展示
   * @remarks 为`false`则不会渲染该描述项
   * @defaultValue true
   */
  show?: boolean;
  /**
   * 描述项副作用
   * @param data 描述列表数据
   * @remarks 可以在回调函数中拿到描述列表数据，并动态修改描述项配置，通常用于动态切换描述列表内容
   * @template T 表单的数据类型
   */
  watchEffect?: (data: T) => void;
}

/**
 * 文本描述项
 * @template T 描述列表的数据类型
 */
export type TextDescriptionsItemField<T> = Omit<DescriptionsItemField<T>, 'fieldType'> & {
  /**
   * 文本类型
   */
  fieldType?: 'text';
};

/**
 * 加密文本描述项
 * @template T 描述列表的数据类型
 */
export type CiphertextDescriptionsItemField<T> = Omit<DescriptionsItemField<T>, 'fieldType'> &
  VerifyProps & {
    /**
     * 加密文本类型
     */
    fieldType?: 'ciphertext';
    /**
     * 解密方法
     * @param params 验证成功后返回的参数
     * @param data 描述列表组件的数据对象
     * @returns 解密后的文本
     */
    decrypt: (params: VerifyResult, data: T) => string | Promise<string>;
  };

/**
 * 标签类型
 */
type TagType = 'success' | 'warning' | 'info' | 'primary' | 'danger';

/**
 * 标签描述项
 * @template T 描述列表的数据类型
 */
export type TagDescriptionsItemField<T> = Omit<DescriptionsItemField<T>, 'fieldType'> &
  Partial<Omit<TagProps, 'type'>> & {
    /**
     * 标签类型
     */
    fieldType: 'tag';
    /**
     * 标签的类型
     * @template T 表格的数据类型
     * @param row 行数据
     * @param index 数据索引
     * @param cellValue 列数据
     * @returns { TagType } 标签的类型
     */
    type?: TagType | ((value: T[keyof T], data: T) => TagType);
  };

/**
 * 链接描述项
 * @template T 描述列表的数据类型
 */
export type LinkDescriptionsItemField<T> = Omit<DescriptionsItemField<T>, 'fieldType'> &
  Partial<LinkProps> & {
    /**
     * 链接类型
     */
    fieldType: 'link';
  };

/**
 * 图片描述项
 * @template T 描述列表的数据类型
 */
export type ImageDescriptionsItemField<T> = Omit<DescriptionsItemField<T>, 'fieldType'> &
  Partial<ImageProps> & {
    /**
     * 图片类型
     */
    fieldType: 'image';
  };

/**
 * 音频描述项
 * @template T 描述列表的数据类型
 */
export type AudioDescriptionsItemField<T> = Omit<DescriptionsItemField<T>, 'fieldType'> & {
  /**
   * 音频类型
   */
  fieldType: 'audio';
};

/**
 * 视频描述项
 * @template T 描述列表的数据类型
 */
export type VideoDescriptionsItemField<T> = Omit<DescriptionsItemField<T>, 'fieldType'> & {
  /**
   * 视频类型
   */
  fieldType: 'video';
};

/**
 * 文件描述项
 * @template T 描述列表的数据类型
 */
export type FileDescriptionsItemField<T> = Omit<DescriptionsItemField<T>, 'fieldType'> &
  Partial<LinkProps> & {
    /**
     * 文件类型
     */
    fieldType: 'file';
  };

/**
 * 二维码描述项
 * @template T 描述列表的数据类型
 */
export type QrCodeDescriptionsItemField<T> = Omit<DescriptionsItemField<T>, 'fieldType'> &
  Partial<QrCodeProps> & {
    /**
     * 二维码类型
     */
    fieldType: 'qrcode';
  };

/**
 * 富文本描述项
 * @template T 描述列表的数据类型
 */
export type RichTextDescriptionsItemField<T> = Omit<DescriptionsItemField<T>, 'fieldType'> & {
  /**
   * 富文本类型
   */
  fieldType: 'richText';
  /**
   * 富文本展示高度
   * @defaultValue '200px'
   */
  richTextHeight?: string;
};

/**
 * 插槽描述项
 * @template T 描述列表的数据类型
 */
export type SlotDescriptionsItemField<T> = Omit<DescriptionsItemField<T>, 'fieldType'> & {
  /**
   * 插槽类型
   */
  fieldType: 'slot';
};

/**
 * 数据表述列表组件包含透传属性在内的全部属性
 * @template T 描述列表的数据类型
 */
export type DataDescriptionsFullProps<T> = Partial<ElDescriptionsProps & DataDescriptionsProps<T>>;

Data Descriptions 数据描述列表 ​

全局配置 ​

业务注入 ​

基础用法 ​

权限校验 ​

格式化内容 ​

加密描述项2.1.0 ​

特殊描述项 ​

标签项2.1.0 ​

自定义描述项内容 ​

动态描述列表2.1.3 ​

属性&事件&插槽透传 ​

属性 ​

DataDescriptionsField ​

fieldType值对应渲染组件 ​