Browse Source

fix: 表格Demo修改

hanxiaohui 2 months ago
parent
commit
dde66df968
1 changed files with 78 additions and 5 deletions
  1. 78 5
      src/views/table-demo/components/AddOrEditDrawer.vue

+ 78 - 5
src/views/table-demo/components/AddOrEditDrawer.vue

@@ -22,7 +22,11 @@
 <script setup lang="jsx">
   import BsDrawer, { useBsDrawer } from '/@/components/BsUi/Drawer/index.js';
   import BsForm, { useBsForm } from '/@/components/BsUi/Form/index.js';
-  import { ref } from 'vue';
+  import { h, ref } from 'vue';
+  import { useBsTable } from '/@/components/BsUi/index.js';
+  import { BorderOuterOutlined, SearchOutlined } from '@ant-design/icons-vue';
+  import { message } from 'ant-design-vue';
+  import { DISPLAY_STATE } from '/@/components/BsUi/constant.js';
 
   const bsFormRef = ref(null);
 
@@ -66,9 +70,75 @@
             ],
           },
         },
+        {
+          id: '2',
+          label: '表格选择器',
+          component: 'bs-table-selector',
+          componentProps: {
+            multiple: '1',
+            placeholder: '请选择',
+            labelField: 'name',
+            valueField: 'id',
+            tableOptions: {
+              gridOptions: {
+                loading: false,
+                columns: [
+                  {
+                    field: 'id',
+                    title: 'ID',
+                  },
+                  {
+                    field: 'name',
+                    title: '名字',
+                  },
+                ],
+                rowKey: 'id',
+                data: [],
+              },
+              async request() {
+                return {
+                  list: Array.from({ length: 10 })
+                    .fill(0)
+                    .map((v, idx) => ({
+                      id: idx,
+                      name: 'name' + idx,
+                    })),
+                  total: 10,
+                };
+              },
+            },
+            modalOptions: {
+              title: '表格选择器',
+            },
+          },
+          field: 'name1',
+          sort: '2',
+          visible: '1',
+          required: '1',
+          formItemExtraProps: {
+            rules: [
+              {
+                validator: (_, value) => {
+                  // return Promise.reject(new Error('报错'));
+                  return Promise.resolve();
+                },
+              },
+            ],
+          },
+        },
       ],
       formData: {
         name: '韩晓辉',
+        name1: [
+          {
+            id: 1,
+            name: 'name1',
+          },
+        ],
+        // name1: {
+        //   id: 1,
+        //   name: 'name1',
+        // },
       },
       formId: 'formId',
       formExtraProps: {},
@@ -102,15 +172,18 @@
   const showDrawer = ({ type, row }) => {
     setDVal('visible', true);
 
-    if(type === 'add') {
+    if (type === 'add') {
       setDVal('title', '新增标题');
+      setFVal('formData', {
+        name: undefined,
+        name1: undefined,
+      });
     } else {
       setDVal('title', '编辑标题');
       setFVal('formData', {
-        name: "王宗帅"
-      })
+        name: '王宗帅',
+      });
     }
-
   };
 
   defineExpose({