feat: 模态框选择表格

stories/SelectTableModal.stories.ts

@@ -1,10 +1,62 @@
+/*
+ * @Author: zhaojinfeng 121016171@qq.com
+ * @Date: 2023-07-18 12:30:07
+ * @LastEditors: zhaojinfeng 121016171@qq.com
+ * @LastEditTime: 2023-07-21 21:40:46
+ * @FilePath: \vue3\stories\SelectTableModal.stories.ts
+ * @Description:
+ *
+ */
 import type { Meta, StoryObj } from '@storybook/vue3'
 import ThSelectTableModal from '../packages/select-table-modal/index.vue'
 
+// 模拟1秒钟的接口请求
+function request() {
+  return new Promise<Page>((resolve) => {
+    setTimeout(() => {
+      resolve({
+        code: 200,
+        rows: [{ prop1: 'prop1', prop2: 'prop2', prop3: 'prop3' }],
+        total: 10,
+        message: 'ok',
+      })
+    }, 1000)
+  })
+}
+
 const meta = {
   title: '表单组件/SelectTableModal',
-  component: ThSelectTableModal,
-  tags: ['autodocs'],
+  tags: ['表单组件', 'autodocs'],
+  args: {
+    value: '',
+    rowKey: 'prop1',
+    show: false,
+    columns: [{ label: 'label1', prop: 'prop1' }, { label: 'label2', prop: 'prop2' }, { label: 'label3', prop: 'prop3' }],
+    formItems: [{ label: 'label1', prop: 'prop1' }, { label: 'label2', prop: 'prop2', selectOptions: [{ label: '1', value: '1' }, { label: '2', value: '2' }] }],
+    defaultParams: {},
+    request,
+    layout: 'total, sizes, prev, pager, next, jumper',
+    pageSizes: [10, 20, 30, 50],
+    pagerCount: document.body.clientWidth < 992 ? 5 : 7,
+    hidePagination: false,
+  },
+  render: args => ({
+    components: { ThSelectTableModal },
+    setup() {
+      return { args }
+    },
+    template: `<th-select-table-modal
+                 v-model:show="args.show"
+                 :row-key="args.rowKey"
+                 :columns="args.columns"
+                 :form-items="args.formItems"
+                 :default-params="args.defaultParams"
+                 :request="args.request"
+                 layout="args.layout"
+                 :page-sizes="args.pageSizes"
+                 :pager-count="args.pagerCount"
+              />`,
+  }),
 } satisfies Meta<typeof ThSelectTableModal>
 export default meta