BoundLink-Plate-UI/src/components/BsUi/Render/cell.jsx

import { VxeUI } from 'vxe-pc-ui';
import dayjs from 'dayjs';
import { get, has, isEmpty, isFunction } from 'lodash';
import { formatMoney, formatPercentage } from '/@/components/BsUi/uitl.js';
import { DISPLAY_STATE, FILE_TYPE_ICON_MAP } from '/@/components/BsUi/constant.js';
import { DeleteOutlined, EditOutlined, EyeOutlined, PlusOutlined } from '@ant-design/icons-vue';
import { h } from 'vue';

const getValue = (params) => {
  const { column, row } = params;
  return get(row, column.field, '');
};

// 格式化人民币
VxeUI.renderer.add('CellRmb', {
  // 默认显示模板
  renderTableDefault(renderOpts, params) {
    return <>￥{formatMoney(getValue(params))}</>;
  },
});

// 格式化百分比
VxeUI.renderer.add('CellPercent', {
  // 默认显示模板
  renderTableDefault(renderOpts, params) {
    return <>{formatPercentage(getValue(params))}</>;
  },
});

// 格式化日期
VxeUI.renderer.add('CellDate', {
  // 默认显示模板
  renderTableDefault(renderOpts, params) {
    if (isEmpty(getValue(params))) return <></>;
    return <>{dayjs(getValue(params)).format('YYYY-MM-DD')}</>;
  },
});

// 格式化时间
VxeUI.renderer.add('CellDateTime', {
  // 默认显示模板
  renderTableDefault(renderOpts, params) {
    if (isEmpty(getValue(params))) return <></>;
    return <>{dayjs(getValue(params)).format('YYYY-MM-DD HH:mm:ss')}</>;
  },
});

// 字典渲染
VxeUI.renderer.add('CellDict', {
  // 默认显示模板
  renderTableDefault(renderOpts, params) {
    if (isEmpty(getValue(params))) return <></>;
    return <bs-dic-tag dicts={getValue(params)}></bs-dic-tag>;
  },
});

// 字典渲染
VxeUI.renderer.add('CellOption', {
  // 默认显示模板
  renderTableDefault(renderOpts, params) {
    const { extraProps } = renderOpts;
    const { row, column } = params;

    const { buttons } = extraProps;
    const visibleBtn = buttons.filter(
      (v) => !has(v, 'display') || (isFunction(v.display) && v.display(params) === DISPLAY_STATE.VISIBLE) || v.display === DISPLAY_STATE.VISIBLE
    );
    column.title = '操作';
    column.width = 'auto';

    const iconMap = {
      add: h(PlusOutlined),
      edit: h(EditOutlined),
      delete: h(DeleteOutlined),
      view: h(EyeOutlined),
    };

    return (
      <a-space>
        {visibleBtn.map((v) => {
          const disabled = has(v, 'disabled') && isFunction(v.disabled) ? v.disabled(params) : v.props?.disabled;
          return (
            <a-button
              style={{ padding: '0' }}
              type='link'
              onClick={() => {
                v?.onClick(params);
              }}
              disabled={disabled}
              icon={iconMap[v?.code]}
              {...v.extraProps}
            >
              {v.title}
            </a-button>
          );
        })}
      </a-space>
    );
  },
});

// 文件类型
VxeUI.renderer.add('CellFileType', {
  // 默认显示模板
  renderTableDefault(renderOpts, params) {
    const { extraProps } = renderOpts;
    const { row, column } = params;
    const fileTypeName = row[column.field]?.toUpperCase();
    const iconName = FILE_TYPE_ICON_MAP[fileTypeName] || 'undefined_icon.svg';
    column.title = '文件类型';
    column.width = '80';
    column.align = 'center';

    return <a-image preview={false} width={30} height={30} src={`/src/components/BsUi/images/${iconName}`}></a-image>;
  },
});