BoundLink-Plate-UI/src/views/table-demo/index.vue

<template>
  <div class="table-demo">
    <bs-table v-bind="tableOptions">
      <template #searchRight>
        <a-space>
          <a-button type="primary" @click="openEditDrawer">
            <template #icon>
              <PlusOutlined />
            </template>
            <span>新增</span>
          </a-button>
        </a-space>
      </template>

      <template #toolbarTop>
        <a-space>
          <a-button type="primary" size="small">新增</a-button>
          <a-button danger size="small">删除</a-button>
        </a-space>
      </template>

      <template #toolbarLeft>
        <a-space>
          <a-button type="primary" size="small" @click="openModal"> 表格选择器弹窗 </a-button>

          <a-button type="primary" size="small" @click="openModalBase"> 弹窗 </a-button>

          <a-button type="primary" size="small" @click="handleRefreshTable"> 刷新表格事件 </a-button>
          <span>累计客户：XXX｜黑名单客户：XXX｜S级客户 </span>
        </a-space>
      </template>

      <template #slotVue_default="{ row, column }">
        <span style="color: blue">{{ row[column?.field] }}</span>
      </template>

      <template #opt1_default="{ row, column }">
        <a-button type="primary" :disabled="true" size="small">编辑</a-button>
      </template>
    </bs-table>

    <add-or-edit-drawer ref="addOrEditDrawerRef" />
    <demo-table-selector-modal ref="demoTableSelectorModal" />
    <demo-base-modal ref="demoBaseModal" />
  </div>
</template>

<script setup lang="jsx">
  import BsTable, { useBsTable } from '/@/components/BsUi/Table/index.js';
  import { onMounted, ref } from 'vue';
  import AddOrEditDrawer from '/@/views/table-demo/components/AddOrEditDrawer.vue';
  import DemoTableSelectorModal from '/@/views/table-demo/components/DemoTableSelectorModal.vue';
  import DemoBaseModal from '/@/views/table-demo/components/DemoBaseModal.vue';

  const addOrEditDrawerRef = ref(null);
  const demoTableSelectorModal = ref(null);
  const demoBaseModal = ref(null);

  const openModal = () => {
    demoTableSelectorModal.value.showModal();
  };

  const openModalBase = () => {
    console.log('demoBaseModal', demoBaseModal);

    demoBaseModal.value.showModal();
  };

  const handleRefreshTable = () => {
    fetchTableData({ a: new Date() });
  };

  const handleEdit = (row) => {
    addOrEditDrawerRef.value.showDrawer({
      type: 'edit',
      row,
    });
  };

  const {
    tableOptions,
    setTablePropsValue: setValue,
    getTablePropsValue: getValue,
    fetchTableData,
  } = useBsTable({
    tableOptions: {
      url: '/api/get-table',
      gridOptions: {
        loading: false,
        columns: [
          {
            type: 'seq',
            width: 80,
          },
          {
            field: 'id',
            title: 'ID',
          },
          {
            field: 'slotVue',
            title: '插槽Vue写法',
            slots: {
              default: 'slotVue_default',
            },
          },
          {
            field: 'dictField',
            title: '字典',
            cellRender: {
              name: 'CellDict',
            },
          },
          {
            field: 'name',
            title: 'JSX插槽渲染',
            visible: true,
            slots: {
              default({ row, column }) {
                return <span style={{ color: 'red' }}>{row.name}</span>;
              },
            },
          },
          {
            field: 'opt',
            title: '操作JSX写法',
            width: '120px',
            fixed: 'right',
            visible: true,
            slots: {
              default({ row, column }) {
                return (
                  <a-button
                    type='text'
                    size='small'
                    disabled={false}
                    onClick={() => {
                      handleEdit(row);
                    }}
                  >
                    编辑
                  </a-button>
                );
              },
            },
          },
          {
            field: 'opt1',
            title: '操作Vue插槽写法',
            width: '120px',
            fixed: 'right',
            slots: {
              default: 'opt1_default',
            },
          },
        ],
        data: [
          {
            id: 1,
            name: '测试数据',
            dictField: [
              {
                dictKeyId: '',
                dictValueId: '',
                remark: '',
                sort: 3,
                status: 1,
                valueCode: '03',
                valueName: '微信公众号',
                slotVue: '1111',
              },
            ],
          },
        ], // 模拟数据源
      },
      searchConfig: {
        enabled: true,
        fieldSpan: 6,
        fields: Array.from({ length: 10 }, (_, i) => {
          return {
            field: `name${i}`,
            label: `名称${i}`,
            component: 'a-input',
            componentProps: {
              placeholder: `请输入名称${i}`,
            },
          };
        }),
      },
      pagerConfig: {
        enabled: true,
        pageSize: 10,
        pageNum: 1,
      },
      toolbarConfig: {},
      // 每次查询接口之前，都会调用这个回调函数
      tableSearchBeforeBiz() {
        const searchParams = getValue('searchConfig.data');
        setValue('searchConfig.data', { ...searchParams, otherField: 'abc' });
      },
      // 表格初始化之前,只加载一次
      beforeMount() {
        console.log('表格加载前');
      },
      // 表格初始化完成,只加载一次
      mounted(gridRef) {
        console.log('表格加载后', gridRef);
      },
    },
  });

  const openEditDrawer = () => {
    addOrEditDrawerRef.value.showDrawer({ type: 'add', row: null });
  };
</script>

<style scoped lang="scss">
  .table-demo {
  }
</style>