diff --git a/apps/web-ele/src/adapter/style.css b/apps/web-ele/src/adapter/style.css deleted file mode 100644 index 01368a928..000000000 --- a/apps/web-ele/src/adapter/style.css +++ /dev/null @@ -1,79 +0,0 @@ -/* 来自 @vben/plugins/vxe-table style.css,覆盖 vxe-table 原有的样式定义,使用 vben 的样式主题 */ -:root { - --vxe-ui-font-color: hsl(var(--foreground)); - --vxe-ui-font-primary-color: hsl(var(--primary)); - - /* --vxe-ui-font-lighten-color: #babdc0; - --vxe-ui-font-darken-color: #86898e; */ - --vxe-ui-font-disabled-color: hsl(var(--foreground) / 50%); - - /* base */ - --vxe-ui-base-popup-border-color: hsl(var(--border)); - --vxe-ui-input-disabled-color: hsl(var(--border) / 60%); - - /* --vxe-ui-base-popup-box-shadow: 0px 12px 30px 8px rgb(0 0 0 / 50%); */ - - /* layout */ - --vxe-ui-layout-background-color: hsl(var(--background)); - --vxe-ui-table-resizable-line-color: hsl(var(--heavy)); - - /* --vxe-ui-table-fixed-left-scrolling-box-shadow: 8px 0px 10px -5px hsl(var(--accent)); - --vxe-ui-table-fixed-right-scrolling-box-shadow: -8px 0px 10px -5px hsl(var(--accent)); */ - - /* input */ - --vxe-ui-input-border-color: hsl(var(--border)); - - /* --vxe-ui-input-placeholder-color: #8d9095; */ - - /* --vxe-ui-input-disabled-background-color: #262727; */ - - /* loading */ - --vxe-ui-loading-background-color: hsl(var(--overlay-content)); - - /* table */ - --vxe-ui-table-header-background-color: hsl(var(--accent)); - --vxe-ui-table-border-color: hsl(var(--border)); - --vxe-ui-table-row-hover-background-color: hsl(var(--accent-hover)); - --vxe-ui-table-row-striped-background-color: hsl(var(--accent) / 60%); - --vxe-ui-table-row-hover-striped-background-color: hsl(var(--accent)); - --vxe-ui-table-row-radio-checked-background-color: hsl(var(--accent)); - --vxe-ui-table-row-hover-radio-checked-background-color: hsl( - var(--accent-hover) - ); - --vxe-ui-table-row-checkbox-checked-background-color: hsl(var(--accent)); - --vxe-ui-table-row-hover-checkbox-checked-background-color: hsl( - var(--accent-hover) - ); - --vxe-ui-table-row-current-background-color: hsl(var(--accent)); - --vxe-ui-table-row-hover-current-background-color: hsl(var(--accent-hover)); - --vxe-ui-font-primary-tinge-color: hsl(var(--primary)); - --vxe-ui-font-primary-lighten-color: hsl(var(--primary) / 60%); - --vxe-ui-font-primary-darken-color: hsl(var(--primary)); - - /* height: auto !important; */ - - /* --vxe-ui-table-fixed-scrolling-box-shadow-color: rgb(0 0 0 / 80%); */ -} - -.vxe-tools--operate { - margin-right: 0.25rem; - margin-left: 0.75rem; -} - -.vxe-table-custom--checkbox-option:hover { - background: none !important; -} - -.vxe-toolbar { - padding: 0; -} - -.vxe-buttons--wrapper:not(:empty), -.vxe-tools--operate:not(:empty), -.vxe-tools--wrapper:not(:empty) { - padding: 0.6em 0; -} - -.vxe-tools--operate:not(:has(button)) { - margin-left: 0; -} diff --git a/apps/web-ele/src/adapter/vxe-table.ts b/apps/web-ele/src/adapter/vxe-table.ts index 9c36e196a..c1c838050 100644 --- a/apps/web-ele/src/adapter/vxe-table.ts +++ b/apps/web-ele/src/adapter/vxe-table.ts @@ -6,7 +6,9 @@ import { h } from 'vue'; import { IconifyIcon } from '@vben/icons'; import { $te } from '@vben/locales'; import { - AsyncComponents, + AsyncVxeColumn, + AsyncVxeTable, + createRequiredValidation, setupVbenVxeTable, useVbenVxeGrid, } from '@vben/plugins/vxe-table'; @@ -19,15 +21,13 @@ import { isString, } from '@vben/utils'; -import { ElButton, ElImage, ElPopconfirm, ElSwitch } from 'element-plus'; +import { ElButton, ElImage, ElPopconfirm, ElSwitch, ElTag } 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({ @@ -101,6 +101,35 @@ setupVbenVxeTable({ }, }); + // 表格配置项可以用 cellRender: { name: 'CellTag' }, + vxeUI.renderer.add('CellTag', { + renderTableDefault(renderOpts, params) { + const { props } = renderOpts; + const { column, row } = params; + return h(ElTag, { color: props?.color }, () => row[column.field]); + }, + }); + + vxeUI.renderer.add('CellTags', { + renderTableDefault(renderOpts, params) { + const { props } = renderOpts; + const { column, row } = params; + if (!row[column.field] || row[column.field].length === 0) { + return ''; + } + return h( + 'div', + { class: 'flex items-center justify-center' }, + { + default: () => + row[column.field].map((item: any) => + h(ElTag, { color: props?.color }, { default: () => item }), + ), + }, + ); + }, + }); + // 表格配置项可以用 cellRender: { name: 'CellDict', props:{dictType: ''} }, vxeUI.renderer.add('CellDict', { renderTableDefault(renderOpts, params) { @@ -118,6 +147,7 @@ setupVbenVxeTable({ }); // 表格配置项可以用 cellRender: { name: 'CellSwitch', props: { beforeChange: () => {} } }, + // add by 芋艿:from https://github.com/vbenjs/vue-vben-admin/blob/main/playground/src/adapter/vxe-table.ts#L97-L123 vxeUI.renderer.add('CellSwitch', { renderTableDefault({ attrs, props }, { column, row }) { const loadingKey = `__loading_${column.field}`; @@ -149,6 +179,7 @@ setupVbenVxeTable({ }); // 注册表格的操作按钮渲染器 cellRender: { name: 'CellOperation', options: ['edit', 'delete'] } + // add by 芋艿:from https://github.com/vbenjs/vue-vben-admin/blob/main/playground/src/adapter/vxe-table.ts#L125-L255 vxeUI.renderer.add('CellOperation', { renderTableDefault({ attrs, options, props }, { column, row }) { const defaultProps = { @@ -278,8 +309,9 @@ setupVbenVxeTable({ }, }); - // 添加数量格式化,例如金额 - // TODO @xingyu:建议金额,和数量分开哈;原因是,有些团队希望金额,单独控制; + // 这里可以自行扩展 vxe-table 的全局配置,比如自定义格式化 + // vxeUI.formats.add + vxeUI.formats.add('formatPast2', { tableCellFormatMethod({ cellValue }) { return formatPast2(cellValue); @@ -308,18 +340,10 @@ setupVbenVxeTable({ useVbenForm, }); -export { useVbenVxeGrid }; +export { createRequiredValidation, useVbenVxeGrid }; -const [VxeTable, VxeColumn, VxeToolbar] = AsyncComponents; -export { VxeColumn, VxeTable, VxeToolbar }; +export const [VxeTable, VxeColumn] = [AsyncVxeTable, AsyncVxeColumn]; -// 导出操作按钮的回调函数类型 -export type OnActionClickParams> = { - code: string; - row: T; -}; -export type OnActionClickFn> = ( - params: OnActionClickParams, -) => void; export * from '#/components/table-action'; + export type * from '@vben/plugins/vxe-table'; diff --git a/apps/web-ele/src/components/table-toolbar/index.ts b/apps/web-ele/src/components/table-toolbar/index.ts deleted file mode 100644 index 720e3224b..000000000 --- a/apps/web-ele/src/components/table-toolbar/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as TableToolbar } from './table-toolbar.vue'; diff --git a/apps/web-ele/src/components/table-toolbar/table-toolbar.vue b/apps/web-ele/src/components/table-toolbar/table-toolbar.vue deleted file mode 100644 index f2f02e766..000000000 --- a/apps/web-ele/src/components/table-toolbar/table-toolbar.vue +++ /dev/null @@ -1,75 +0,0 @@ - - - - diff --git a/apps/web-ele/src/hooks/index.ts b/apps/web-ele/src/hooks/index.ts deleted file mode 100644 index 75f01b531..000000000 --- a/apps/web-ele/src/hooks/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './use-table-toolbar'; diff --git a/apps/web-ele/src/hooks/use-table-toolbar.ts b/apps/web-ele/src/hooks/use-table-toolbar.ts deleted file mode 100644 index c35b3a774..000000000 --- a/apps/web-ele/src/hooks/use-table-toolbar.ts +++ /dev/null @@ -1,47 +0,0 @@ -import type { VxeTableInstance, VxeToolbarInstance } from '#/adapter/vxe-table'; -import type { TableToolbar } from '#/components/table-toolbar'; - -import { ref, watch } from 'vue'; - -/** - * vxe 原生工具栏挂载封装 - * 解决每个组件使用 vxe-table 组件时都需要写一遍的问题 - */ -export function useTableToolbar() { - const hiddenSearchBar = ref(false); // 隐藏搜索栏 - const tableToolbarRef = ref>(); - const tableRef = ref(); - const isBound = ref(false); - - /** 挂载 toolbar 工具栏 */ - async function bindTableToolbar() { - const table = tableRef.value; - const tableToolbar = tableToolbarRef.value; - if (table && tableToolbar) { - // 延迟 1 秒,确保 toolbar 组件已经挂载 - setTimeout(async () => { - const toolbar = tableToolbar.getToolbarRef(); - if (!toolbar) { - console.error('[toolbar 挂载失败] Table toolbar not found'); - } - await table.connect(toolbar as VxeToolbarInstance); - isBound.value = true; - }, 1000); // 延迟挂载确保 toolbar 正确挂载 - } - } - - watch( - () => tableRef.value, - async (val) => { - if (!val || isBound.value) return; - await bindTableToolbar(); - }, - { immediate: true }, - ); - - return { - hiddenSearchBar, - tableToolbarRef, - tableRef, - }; -}