feat: ele table-toolbar

apps/web-ele/src/adapter/style.css

@@ -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;
-}

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<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';

apps/web-ele/src/components/table-toolbar/index.ts

@@ -1 +0,0 @@
-export { default as TableToolbar } from './table-toolbar.vue';

apps/web-ele/src/components/table-toolbar/table-toolbar.vue

@@ -1,75 +0,0 @@
-<!-- add by puhui999：vxe table 工具栏二次封装，提供给 vxe 原生列表使用 -->
-<script setup lang="ts">
-import type { VxeToolbarInstance } from '#/adapter/vxe-table';
-
-import { ref } from 'vue';
-
-import { useContentMaximize, useRefresh } from '@vben/hooks';
-import { Expand, MsRefresh, Search, TMinimize } from '@vben/icons';
-
-import { ElButton, ElTooltip } from 'element-plus';
-
-import { VxeToolbar } from '#/adapter/vxe-table';
-
-/** 列表工具栏封装 */
-defineOptions({ name: 'TableToolbar' });
-
-const props = defineProps<{
-  hiddenSearch: boolean;
-}>();
-
-const emits = defineEmits(['update:hiddenSearch']);
-
-const toolbarRef = ref<VxeToolbarInstance>();
-const { toggleMaximizeAndTabbarHidden, contentIsMaximize } =
-  useContentMaximize();
-const { refresh } = useRefresh();
-
-/** 隐藏搜索栏 */
-function onHiddenSearchBar() {
-  emits('update:hiddenSearch', !props.hiddenSearch);
-}
-
-defineExpose({
-  getToolbarRef: () => toolbarRef.value,
-});
-</script>
-
-<template>
-  <VxeToolbar ref="toolbarRef" custom>
-    <template #toolPrefix>
-      <slot></slot>
-      <ElTooltip placement="bottom">
-        <template #content>
-          <div class="max-w-[200px]">搜索</div>
-        </template>
-        <ElButton class="ml-2 font-[8px]" circle @click="onHiddenSearchBar">
-          <Search :size="15" />
-        </ElButton>
-      </ElTooltip>
-      <ElTooltip placement="bottom">
-        <template #content>
-          <div class="max-w-[200px]">刷新</div>
-        </template>
-        <ElButton class="ml-2 font-[8px]" circle @click="refresh">
-          <MsRefresh :size="15" />
-        </ElButton>
-      </ElTooltip>
-      <ElTooltip placement="bottom">
-        <template #content>
-          <div class="max-w-[200px]">
-            {{ contentIsMaximize ? '还原' : '全屏' }}
-          </div>
-        </template>
-        <ElButton
-          class="ml-2 font-[8px]"
-          circle
-          @click="toggleMaximizeAndTabbarHidden"
-        >
-          <Expand v-if="!contentIsMaximize" :size="15" />
-          <TMinimize v-else :size="15" />
-        </ElButton>
-      </ElTooltip>
-    </template>
-  </VxeToolbar>
-</template>

apps/web-ele/src/hooks/index.ts

@@ -1 +0,0 @@
-export * from './use-table-toolbar';

apps/web-ele/src/hooks/use-table-toolbar.ts

@@ -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<InstanceType<typeof TableToolbar>>();
-  const tableRef = ref<VxeTableInstance>();
-  const isBound = ref<boolean>(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,
-  };
-}