fix: demo表格修改

src/views/table-demo/components/DemoTableSelectorModal.vue

@@ -0,0 +1,124 @@
+<template>
+  <bs-modal-table-selector :selected-keys="selectedKeys" :bs-modal="bsModalBean" :bs-table="bsTableBean" @ok="handleConfirm"
+  ></bs-modal-table-selector>
+</template>
+
+<script setup lang="jsx">
+  import BsModalTableSelector from '/@/components/BsUi/ModalTableSelector/index.vue';
+  import { ref } from 'vue';
+  import { useBsTable } from '/@/components/BsUi/Table/index.js';
+  import { useBsModal } from '/@/components/BsUi/Modal/index.js';
+
+  // 用于回显勾中的行
+  const selectedKeys = ref([]);
+  const bsTableBean = useBsTable({
+    tableOptions: {
+      isLoadRequest: false,
+      url: '/api/get-table',
+      gridOptions: {
+        loading: false,
+        columns: [
+          {
+            field: 'id',
+            title: 'ID',
+          },
+          {
+            field: 'dictField',
+            title: '字典',
+            cellRender: {
+              name: 'CellDict',
+            },
+          },
+          {
+            field: 'name',
+            title: 'JSX插槽渲染',
+            visible: true,
+            slots: {
+              default({ row, column }) {
+                return <span style={{ color: 'red' }}>{row.name}</span>;
+              },
+            },
+          },
+        ],
+        data: [
+          {
+            id: 1,
+            name: '测试数据',
+            dictField: [
+              {
+                dictKeyId: '',
+                dictValueId: '',
+                remark: '',
+                sort: 3,
+                status: 1,
+                valueCode: '03',
+                valueName: '微信公众号',
+              },
+            ],
+          },
+        ], // 模拟数据源
+      },
+      searchConfig: {
+        enable: true,
+        fieldSpan: 6,
+        fields: Array.from({ length: 10 }, (_, i) => {
+          return {
+            field: `name${i}`,
+            label: `名称${i}`,
+            component: 'a-input',
+            componentProps: {
+              placeholder: `请输入名称${i}`,
+            },
+          };
+        }),
+      },
+      pagerConfig: {
+        enable: true,
+        pageSize: 10,
+        pageNum: 1,
+      },
+      toolbarConfig: {
+        enable: false,
+      },
+      // 每次查询接口之前，都会调用这个回调函数
+      tableSearchBeforeBiz() {
+        console.log("表格搜索前");
+      },
+      // 表格初始化之前,只加载一次
+      beforeMount() {
+        console.log('表格加载前');
+      },
+      // 表格初始化完成,只加载一次
+      mounted(gridRef) {
+        console.log('表格加载后', gridRef);
+      },
+    },
+  });
+  const bsModalBean = useBsModal({
+    modalOptions: {
+      width: '900px',
+      visible: false,
+      title: '表格选择器开窗',
+      modalExtraProps: {
+        destroyOnClose: true
+      }
+    },
+  });
+
+  const { setModalPropsValue: setMVal } = bsModalBean;
+
+  const handleConfirm = ({value, setLoading, close}) => {
+    close();
+    setLoading(false);
+  }
+
+  const showModal = () => {
+    selectedKeys.value = [];
+    setMVal('visible', true)
+  }
+
+  defineExpose({
+    showModal
+  })
+
+</script>

src/views/table-demo/index.vue

@@ -12,11 +12,16 @@
         </a-space>
       </template>
       <template #toolbarLeft>
-        <a-space> 累计客户：XXX｜黑名单客户：XXX｜S级客户 </a-space>
+        <a-space>
+          <a-button type="primary" size="small" @click="openModal"> 表格选择器弹窗 </a-button>
+          <a-button type="primary" size="small" @click="handleRefreshTable"> 刷新表格事件 </a-button>
+          <span>累计客户：XXX｜黑名单客户：XXX｜S级客户 </span>
+        </a-space>
       </template>
     </bs-table>
 
     <add-or-edit-drawer ref="addOrEditDrawerRef" />
+    <demo-table-selector-modal ref="demoTableSelectorModal" />
   </div>
 </template>
 
@@ -24,8 +29,18 @@
   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";
 
   const addOrEditDrawerRef = ref(null);
+  const demoTableSelectorModal = ref(null);
+
+  const openModal = () => {
+    demoTableSelectorModal.value.showModal();
+  }
+
+  const handleRefreshTable = () => {
+    fetchTableData({ a: new Date() });
+  }
 
   const handleEdit = (row) => {
     addOrEditDrawerRef.value.showDrawer({
@@ -38,9 +53,10 @@
     tableOptions,
     setTablePropsValue: setValue,
     getTablePropsValue: getValue,
+    fetchTableData,
   } = useBsTable({
     tableOptions: {
-      // url: "/api/get-table",
+      url: "/api/get-table",
       gridOptions: {
         loading: false,
         columns: [
@@ -62,6 +78,7 @@
           {
             field: 'name',
             title: 'JSX插槽渲染',
+            visible: true,
             slots: {
               default({ row, column }) {
                 return <span style={{ color: 'red' }}>{row.name}</span>;
@@ -73,12 +90,14 @@
             title: '操作',
             width: '120px',
             fixed: 'right',
+            visible: true,
             slots: {
               default({ row, column }) {
                 return (
                   <a-button
                     type='text'
                     size='small'
+                    disabled={false}
                     onClick={() => {
                       handleEdit(row);
                     }}
@@ -128,17 +147,22 @@
         pageNum: 1,
       },
       toolbarConfig: {},
-      // tableSearchBeforeBiz() {
-      //   // 每次查询接口之前，都会调用这个回调函数
-      //   const searchParams = getValue("searchConfig.data");
-      //   setValue("searchConfig.data", {...searchParams, otherField: "abc"})
-      // }
+      // 每次查询接口之前，都会调用这个回调函数
+      tableSearchBeforeBiz() {
+        const searchParams = getValue("searchConfig.data");
+        setValue("searchConfig.data", {...searchParams, otherField: "abc"})
+      },
+      // 表格初始化之前,只加载一次
+      beforeMount() {
+        console.log('表格加载前');
+      },
+      // 表格初始化完成,只加载一次
+      mounted(gridRef) {
+        console.log('表格加载后', gridRef);
+      },
     },
   });
 
-  onMounted(() => {
-    console.log('表格已加载');
-  });
 
   const openEditDrawer = () => {
     addOrEditDrawerRef.value.showDrawer({type: 'add', row: null});