326 lines
9.0 KiB
TypeScript
326 lines
9.0 KiB
TypeScript
import type { VxeTableGridOptions } from '@vben/plugins/vxe-table';
|
||
import type { Recordable } from '@vben/types';
|
||
|
||
import { h } from 'vue';
|
||
|
||
import { IconifyIcon } from '@vben/icons';
|
||
import { $te } from '@vben/locales';
|
||
import {
|
||
AsyncComponents,
|
||
setupVbenVxeTable,
|
||
useVbenVxeGrid,
|
||
} from '@vben/plugins/vxe-table';
|
||
import {
|
||
erpCountInputFormatter,
|
||
erpNumberFormatter,
|
||
fenToYuan,
|
||
formatPast2,
|
||
isFunction,
|
||
isString,
|
||
} from '@vben/utils';
|
||
|
||
import { ElButton, ElImage, ElPopconfirm, ElSwitch } from 'element-plus';
|
||
|
||
import { DictTag } from '#/components/dict-tag';
|
||
import { $t } from '#/locales';
|
||
|
||
import { useVbenForm } from './form';
|
||
|
||
import '#/adapter/style.css';
|
||
|
||
setupVbenVxeTable({
|
||
configVxeTable: (vxeUI) => {
|
||
vxeUI.setConfig({
|
||
grid: {
|
||
align: 'center',
|
||
border: false,
|
||
columnConfig: {
|
||
resizable: true,
|
||
},
|
||
minHeight: 180,
|
||
formConfig: {
|
||
// 全局禁用vxe-table的表单配置，使用formOptions
|
||
enabled: false,
|
||
},
|
||
toolbarConfig: {
|
||
import: false, // 是否导入
|
||
export: false, // 是否导出
|
||
refresh: true, // 是否刷新
|
||
print: false, // 是否打印
|
||
zoom: true, // 是否缩放
|
||
custom: true, // 是否自定义配置
|
||
},
|
||
customConfig: {
|
||
mode: 'modal',
|
||
},
|
||
proxyConfig: {
|
||
autoLoad: true,
|
||
response: {
|
||
result: 'list',
|
||
total: 'total',
|
||
},
|
||
showActiveMsg: true,
|
||
showResponseMsg: false,
|
||
},
|
||
pagerConfig: {
|
||
enabled: true,
|
||
},
|
||
sortConfig: {
|
||
multiple: true,
|
||
},
|
||
round: true,
|
||
showOverflow: true,
|
||
size: 'small',
|
||
} as VxeTableGridOptions,
|
||
});
|
||
|
||
// 表格配置项可以用 cellRender: { name: 'CellImage' },
|
||
vxeUI.renderer.add('CellImage', {
|
||
renderTableDefault(renderOpts, params) {
|
||
const { props } = renderOpts;
|
||
const { column, row } = params;
|
||
const src = row[column.field];
|
||
return h(ElImage, {
|
||
src,
|
||
previewSrcList: [src],
|
||
class: props?.class,
|
||
previewTeleported: true,
|
||
});
|
||
},
|
||
});
|
||
|
||
// 表格配置项可以用 cellRender: { name: 'CellLink' },
|
||
vxeUI.renderer.add('CellLink', {
|
||
renderTableDefault(renderOpts) {
|
||
const { props } = renderOpts;
|
||
return h(
|
||
ElButton,
|
||
{ size: 'small', link: true },
|
||
{ default: () => props?.text },
|
||
);
|
||
},
|
||
});
|
||
|
||
// 表格配置项可以用 cellRender: { name: 'CellDict', props:{dictType: ''} },
|
||
vxeUI.renderer.add('CellDict', {
|
||
renderTableDefault(renderOpts, params) {
|
||
const { props } = renderOpts;
|
||
const { column, row } = params;
|
||
if (!props) {
|
||
return '';
|
||
}
|
||
// 使用 DictTag 组件替代原来的实现
|
||
return h(DictTag, {
|
||
type: props.type,
|
||
value: row[column.field]?.toString(),
|
||
});
|
||
},
|
||
});
|
||
|
||
// 表格配置项可以用 cellRender: { name: 'CellSwitch', props: { beforeChange: () => {} } },
|
||
vxeUI.renderer.add('CellSwitch', {
|
||
renderTableDefault({ attrs, props }, { column, row }) {
|
||
const loadingKey = `__loading_${column.field}`;
|
||
const finallyProps = {
|
||
activeText: $t('common.enabled'),
|
||
inactiveText: $t('common.disabled'),
|
||
activeValue: 1,
|
||
inactiveValue: 0,
|
||
...props,
|
||
modelValue: row[column.field],
|
||
loading: row[loadingKey] ?? false,
|
||
'onUpdate:modelValue': onChange,
|
||
};
|
||
|
||
async function onChange(newVal: any) {
|
||
row[loadingKey] = true;
|
||
try {
|
||
const result = await attrs?.beforeChange?.(newVal, row);
|
||
if (result !== false) {
|
||
row[column.field] = newVal;
|
||
}
|
||
} finally {
|
||
row[loadingKey] = false;
|
||
}
|
||
}
|
||
|
||
return h(ElSwitch, finallyProps);
|
||
},
|
||
});
|
||
|
||
// 注册表格的操作按钮渲染器 cellRender: { name: 'CellOperation', options: ['edit', 'delete'] }
|
||
vxeUI.renderer.add('CellOperation', {
|
||
renderTableDefault({ attrs, options, props }, { column, row }) {
|
||
const defaultProps = {
|
||
type: 'primary',
|
||
class: '!p-0',
|
||
...props,
|
||
};
|
||
let align = 'end';
|
||
switch (column.align) {
|
||
case 'center': {
|
||
align = 'center';
|
||
break;
|
||
}
|
||
case 'left': {
|
||
align = 'start';
|
||
break;
|
||
}
|
||
default: {
|
||
align = 'end';
|
||
break;
|
||
}
|
||
}
|
||
const presets: Recordable<Recordable<any>> = {
|
||
delete: {
|
||
type: 'danger',
|
||
text: $t('common.delete'),
|
||
},
|
||
edit: {
|
||
text: $t('common.edit'),
|
||
},
|
||
};
|
||
const operations: Array<Recordable<any>> = (
|
||
options || ['edit', 'delete']
|
||
)
|
||
.map((opt) => {
|
||
if (isString(opt)) {
|
||
return presets[opt]
|
||
? { code: opt, ...presets[opt], ...defaultProps }
|
||
: {
|
||
code: opt,
|
||
text: $te(`common.${opt}`) ? $t(`common.${opt}`) : opt,
|
||
...defaultProps,
|
||
};
|
||
} else {
|
||
return { ...defaultProps, ...presets[opt.code], ...opt };
|
||
}
|
||
})
|
||
.map((opt) => {
|
||
const optBtn: Recordable<any> = {};
|
||
Object.keys(opt).forEach((key) => {
|
||
optBtn[key] = isFunction(opt[key]) ? opt[key](row) : opt[key];
|
||
});
|
||
return optBtn;
|
||
})
|
||
.filter((opt) => opt.show !== false);
|
||
|
||
function renderBtn(opt: Recordable<any>, listen = true) {
|
||
return h(
|
||
ElButton,
|
||
{
|
||
...props,
|
||
...opt,
|
||
text: true,
|
||
icon: undefined,
|
||
onClick: listen
|
||
? () =>
|
||
attrs?.onClick?.({
|
||
code: opt.code,
|
||
row,
|
||
})
|
||
: undefined,
|
||
},
|
||
{
|
||
default: () => {
|
||
const content = [];
|
||
if (opt.icon) {
|
||
content.push(
|
||
h(IconifyIcon, { class: 'size-5', icon: opt.icon }),
|
||
);
|
||
}
|
||
content.push(opt.text);
|
||
return content;
|
||
},
|
||
},
|
||
);
|
||
}
|
||
|
||
function renderConfirm(opt: Recordable<any>) {
|
||
return h(
|
||
ElPopconfirm,
|
||
{
|
||
title: $t('ui.actionTitle.delete', [attrs?.nameTitle || '']),
|
||
width: 'auto',
|
||
'popper-class': 'popper-top-left',
|
||
onConfirm: () => {
|
||
attrs?.onClick?.({
|
||
code: opt.code,
|
||
row,
|
||
});
|
||
},
|
||
},
|
||
{
|
||
reference: () => renderBtn({ ...opt }, false),
|
||
default: () =>
|
||
h(
|
||
'div',
|
||
{ class: 'truncate' },
|
||
$t('ui.actionMessage.deleteConfirm', [
|
||
row[attrs?.nameField || 'name'],
|
||
]),
|
||
),
|
||
},
|
||
);
|
||
}
|
||
|
||
const btns = operations.map((opt) =>
|
||
opt.code === 'delete' ? renderConfirm(opt) : renderBtn(opt),
|
||
);
|
||
return h(
|
||
'div',
|
||
{
|
||
class: 'flex table-operations',
|
||
style: { justifyContent: align },
|
||
},
|
||
btns,
|
||
);
|
||
},
|
||
});
|
||
|
||
// 添加数量格式化，例如金额
|
||
// TODO @xingyu：建议金额，和数量分开哈；原因是，有些团队希望金额，单独控制；
|
||
vxeUI.formats.add('formatPast2', {
|
||
tableCellFormatMethod({ cellValue }) {
|
||
return formatPast2(cellValue);
|
||
},
|
||
});
|
||
|
||
// add by 星语：数量格式化，例如说：金额
|
||
vxeUI.formats.add('formatNumber', {
|
||
tableCellFormatMethod({ cellValue }) {
|
||
return erpCountInputFormatter(cellValue);
|
||
},
|
||
});
|
||
|
||
vxeUI.formats.add('formatAmount2', {
|
||
tableCellFormatMethod({ cellValue }, digits = 2) {
|
||
return `${erpNumberFormatter(cellValue, digits)}元`;
|
||
},
|
||
});
|
||
|
||
vxeUI.formats.add('formatFenToYuanAmount', {
|
||
tableCellFormatMethod({ cellValue }, digits = 2) {
|
||
return `${erpNumberFormatter(fenToYuan(cellValue), digits)}元`;
|
||
},
|
||
});
|
||
},
|
||
useVbenForm,
|
||
});
|
||
|
||
export { useVbenVxeGrid };
|
||
|
||
const [VxeTable, VxeColumn, VxeToolbar] = AsyncComponents;
|
||
export { VxeColumn, VxeTable, VxeToolbar };
|
||
|
||
// 导出操作按钮的回调函数类型
|
||
export type OnActionClickParams<T = Recordable<any>> = {
|
||
code: string;
|
||
row: T;
|
||
};
|
||
export type OnActionClickFn<T = Recordable<any>> = (
|
||
params: OnActionClickParams<T>,
|
||
) => void;
|
||
export * from '#/components/table-action';
|
||
export type * from '@vben/plugins/vxe-table';
|