fix: 表格demo修改

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

@@ -41,7 +41,7 @@
     },
   });
 
-  const { formOptions } = useBsForm({
+  const { formOptions, setFormPropsValue: setFVal } = useBsForm({
     formOptions: {
       formFields: [
         {
@@ -67,7 +67,6 @@
           },
         },
       ],
-
       formData: {
         name: '韩晓辉',
       },
@@ -82,11 +81,14 @@
 
   const handleOk = async (setLoading) => {
     setLoading(true);
-    bsFormRef.value.handlerFormValidator().then((res) => {
-      closeDrawer();
-    }).finally(() => {
-      setLoading(false);
-    });
+    bsFormRef.value
+      .handlerFormValidator()
+      .then((res) => {
+        closeDrawer();
+      })
+      .finally(() => {
+        setLoading(false);
+      });
   };
 
   const handleCancel = async () => {
@@ -97,12 +99,21 @@
     setDVal('visible', false);
   };
 
-  const showDrawer = () => {
+  const showDrawer = ({ type, row }) => {
     setDVal('visible', true);
-    setDVal('title', '修改标题');
+
+    if(type === 'add') {
+      setDVal('title', '新增标题');
+    } else {
+      setDVal('title', '编辑标题');
+      setFVal('formData', {
+        name: "王宗帅"
+      })
+    }
+
   };
 
   defineExpose({
-    showDrawer
+    showDrawer,
   });
 </script>

src/views/table-demo/index.vue

@@ -12,9 +12,7 @@
         </a-space>
       </template>
       <template #toolbarLeft>
-        <a-space>
-          累计客户：XXX｜黑名单客户：XXX｜S级客户
-        </a-space>
+        <a-space> 累计客户：XXX｜黑名单客户：XXX｜S级客户 </a-space>
       </template>
     </bs-table>
 
@@ -22,20 +20,27 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="jsx">
   import BsTable, { useBsTable } from '/@/components/BsUi/Table/index.js';
   import { onMounted, ref } from 'vue';
-  import { pick } from 'lodash';
   import AddOrEditDrawer from '/@/views/table-demo/components/AddOrEditDrawer.vue';
 
   const addOrEditDrawerRef = ref(null);
 
+  const handleEdit = (row) => {
+    addOrEditDrawerRef.value.showDrawer({
+      type: 'edit',
+      row,
+    });
+  };
+
   const {
     tableOptions,
     setTablePropsValue: setValue,
     getTablePropsValue: getValue,
   } = useBsTable({
     tableOptions: {
+      // url: "/api/get-table",
       gridOptions: {
         loading: false,
         columns: [
@@ -47,11 +52,61 @@
             field: 'id',
             title: 'ID',
           },
+          {
+            field: 'dictField',
+            title: '字典',
+            cellRender: {
+              name: 'CellDict',
+            },
+          },
           {
             field: 'name',
-            title: '名称',
+            title: 'JSX插槽渲染',
+            slots: {
+              default({ row, column }) {
+                return <span style={{ color: 'red' }}>{row.name}</span>;
+              },
+            },
+          },
+          {
+            field: 'opt',
+            title: '操作',
+            width: '120px',
+            fixed: 'right',
+            slots: {
+              default({ row, column }) {
+                return (
+                  <a-button
+                    type='text'
+                    size='small'
+                    onClick={() => {
+                      handleEdit(row);
+                    }}
+                  >
+                    编辑
+                  </a-button>
+                );
+              },
+            },
           },
         ],
+        data: [
+          {
+            id: 1,
+            name: '测试数据',
+            dictField: [
+              {
+                dictKeyId: '',
+                dictValueId: '',
+                remark: '',
+                sort: 3,
+                status: 1,
+                valueCode: '03',
+                valueName: '微信公众号',
+              },
+            ],
+          },
+        ], // 模拟数据源
       },
       searchConfig: {
         enabled: true,
@@ -66,68 +121,23 @@
             },
           };
         }),
-        onSearch() {
-          fetchTableData()
-        },
-        onReset() {
-          fetchTableData()
-        },
       },
       pagerConfig: {
         enabled: true,
         pageSize: 10,
         pageNum: 1,
-        total: 100,
-        onChange: () => {
-          fetchTableData()
-        },
-      },
-      toolbarConfig: {
-        onRefresh() {
-          fetchTableData()
-        },
       },
+      toolbarConfig: {},
     },
   });
 
-  const getSearchParams = () => {
-    return getValue('searchConfig.data');
-  };
-  const getPageInfo = () => {
-    return pick(getValue('pagerConfig.pageInfo'), ['pageNum', 'pageSize']);
-  };
-
-  const fetchTableData = () => {
-    setValue('gridOptions.loading', true);
-
-    const params = {
-      ...getSearchParams(),
-      ...getPageInfo(),
-    };
-
-    setTimeout(() => {
-      setValue('gridOptions.data', [
-        {
-          id: '1111111',
-          name: 'John Doe',
-        },
-      ]);
-
-      setValue('gridOptions.loading', false);
-    }, 1000);
-  };
-
   onMounted(() => {
     console.log('表格已加载');
-    fetchTableData();
   });
 
-
   const openEditDrawer = () => {
-    addOrEditDrawerRef.value.showDrawer();
-
-  }
-
+    addOrEditDrawerRef.value.showDrawer({type: 'add', row: null});
+  };
 </script>
 
 <style scoped lang="scss">