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

<template>
  <BsPageWrapper>
    <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="middle">新增</a-button>
          <a-button danger size="middle">删除</a-button>
        </a-space>
      </template>

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

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

          <a-button type="primary" size="middle" @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" />
  </BsPageWrapper>
</template>

<script setup lang="jsx">
  import BsTable, { useBsTable } from '/@/components/BsUi/Table/index.js';
  import { h, 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';
  import { message } from 'ant-design-vue';
  import { BorderOuterOutlined, SearchOutlined } from '@ant-design/icons-vue';
  import { DISPLAY_STATE } from '/@/components/BsUi/constant.js';
  import { isFunction } from 'lodash';
  import { BsPageWrapper } from '/@/components/BsUi';

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

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

  const openModalBase = () => {
    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: {
      toolbarTopConfig: {
        enable: true,
        buttons: [
          {
            code: 'btn1',
            title: '新增',
            props: {
              type: 'primary',
              disabled: false,
              icon: h(SearchOutlined),
              onClick(event) {
                message.success('ok');
              },
            },
          },
          {
            code: 'btn2',
            title: '禁用新增',
            props: {
              type: 'primary',
              danger: true,
              onClick(event) {
                setValue('toolbarTopConfig.buttons.0.props.disabled', true);
              },
            },
          },
          {
            code: 'btn3',
            title: '解禁新增',
            props: {
              type: 'text',
              danger: true,
              onClick(event) {
                setValue('toolbarTopConfig.buttons.0.props.disabled', false);
              },
            },
          },
        ],
      },
      gridOptions: {
        loading: false,
        height: '100%',
        columns: [
          {
            type: 'seq',
            width: 80,
          },
          {
            field: 'id',
            title: 'ID',
          },
          {
            field: 'slotVue',
            title: '插槽Vue写法',
            slots: {
              default: 'slotVue_default',
            },
          },
          {
            field: 'dictField',
            title: '字典',
            cellRender: {
              name: 'CellDict',
            },
          },
          {
            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',
            },
          },
          {
            field: 'name',
            title: 'JSX插槽渲染',
            visible: true,
            slots: {
              default({ row, column }) {
                return <span style={{ color: 'red' }}>{row.name}</span>;
              },
            },
          },
          {
            // fixed: 'right',
            cellRender: {
              name: 'CellOption',
              extraProps: {
                buttons: [
                  {
                    title: '新增',
                    code: 'add',
                    display: ({ row }) => {
                      return row.name !== 'hanxiaohui0' ? DISPLAY_STATE.VISIBLE : DISPLAY_STATE.HIDDEN;
                    },
                    disabled({ row }) {
                      return false;
                    },
                    onClick({ row }) {
                      console.log('row', row);
                      message.success(row.name);
                    },
                    extraProps: {},
                  },
                  {
                    title: '禁用',
                    code: 'disabled',
                    display: ({ row }) => {
                      return DISPLAY_STATE.VISIBLE;
                    },
                    disabled({ row }) {
                      return true;
                    },
                    onClick({ row }) {},
                    extraProps: {
                      icon: h(BorderOuterOutlined),
                    },
                  },
                  {
                    title: '删除',
                    code: 'delete',
                    display: ({ row }) => {
                      return DISPLAY_STATE.VISIBLE;
                    },
                    disabled({ row }) {
                      return false;
                    },
                    onClick({ row }) {},
                    extraProps: {
                      danger: true,
                    },
                  },
                  {
                    title: '编辑',
                    code: 'edit',
                    display: ({ row }) => {
                      return DISPLAY_STATE.VISIBLE;
                    },
                    disabled({ row }) {
                      return false;
                    },
                    onClick({ row }) {},
                    extraProps: {},
                  },
                  {
                    title: '查看',
                    code: 'view',
                    display: ({ row }) => {
                      return DISPLAY_STATE.VISIBLE;
                    },
                    disabled({ row }) {
                      return false;
                    },
                    onClick({ row }) {},
                    extraProps: {},
                  },
                ],
              },
            },
          },
        ],
      },
      searchConfig: {
        fieldSpan: 6,
        fields: Array.from({ length: 10 }, (_, i) => {
          return {
            field: `name${i}`,
            label: `名称${i}`,
            component: 'a-input',
            componentProps: {
              placeholder: `请输入名称${i}`,
            },
          };
        }),
      },
      toolbarConfig: {
        displayToolbar: DISPLAY_STATE.VISIBLE,
        leftButtons: [
          {
            code: 'btn1',
            title: '左侧按钮',
            props: {
              type: 'info',
              disabled: false,
              onClick(event) {
                message.success('ok');
              },
            },
          },
        ],
        rightButtons: [
          {
            code: 'btn1',
            title: '右侧按钮',
            props: {
              type: 'info',
              disabled: false,
              onClick(event) {
                message.success('ok');
              },
            },
          },
        ],
      },
      // 每次查询接口之前，都会调用这个回调函数
      tableSearchBeforeBiz() {
        const searchParams = getValue('searchConfig.data');
        setValue('searchConfig.data', { ...searchParams, otherField: 'abc' });
      },
      // 表格初始化之前,只加载一次
      beforeMount() {
        console.log('表格加载前');
      },
      // 表格初始化完成,只加载一次
      mounted(gridRef) {
        console.log('表格加载后', gridRef, getValue('pagerConfig.total'));
      },

      tableSearchAfterBiz({gridRef}) {
        console.log('表格搜索后', gridRef, getValue('pagerConfig.total'));
      },

      async request(params) {
        console.log('params');
        return {
          list: Array.from({ length: 50 })
            .fill(1)
            .map((v, index) => ({ id: index })),
          total: 50,
        };
      },
    },
  });

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

<style scoped lang="scss">
  .sub-table-input {
    padding: 10px;
  }
</style>