feat: 穿梭框选择组件

2023-08-14 16:46:59 +08:00
parent 8d0778aa5b
commit 8daf487cac
4 changed files with 304 additions and 3 deletions
--- a/stories/SelectTransferModal.stories.ts
+++ b/stories/SelectTransferModal.stories.ts
@ -0,0 +1,84 @@
+/*
+ * @Author: zhaojinfeng 121016171@qq.com
+ * @Date: 2023-08-14 11:07:15
+ * @LastEditors: zhaojinfeng 121016171@qq.com
+ * @LastEditTime: 2023-08-14 16:45:09
+ * @FilePath: \vue3\stories\SelectTransferModal.stories.ts
+ * @Description:
+ *
+ */
+import type { Meta, StoryObj } from '@storybook/vue3'
+import ThSelectTransferModal from '../packages/select-transfer-modal/index.vue'
+
+// 模拟800毫秒钟的接口请求
+function request(e: Record<'pageNum' | 'pageSize', number>) {
+  return new Promise<Page>((resolve) => {
+    setTimeout(() => {
+      const rows: any[] = []
+      for (let index = 0; index < e.pageSize; index++) {
+        const id = (e.pageNum - 1) * e.pageSize + index
+        rows.push({
+          id,
+          name: `name${id}`,
+          value: `value${id}`,
+        })
+      }
+      resolve({
+        code: 200,
+        rows,
+        total: 9999,
+        message: 'ok',
+      })
+    }, 800)
+  })
+}
+
+const meta = {
+  title: '表单组件/SelectTransferModal',
+  tags: ['表单组件', 'autodocs'],
+  args: {
+    value: [2],
+    show: false,
+    defaultParams: {},
+    formItems: [{ label: 'label1', prop: 'prop1' }, { label: 'label2', prop: 'prop2', selectOptions: [{ label: '1', value: '1' }, { label: '2', value: '2' }] }],
+    request,
+    optionRight: 'value',
+    layout: 'total, sizes, prev, pager, next, jumper',
+    pageSizes: [10, 20, 30, 50],
+    pagerCount: document.body.clientWidth < 992 ? 5 : 7,
+    props: { key: 'id', label: 'name', disabled: 'disabled' },
+    hidePagination: false,
+    title: '选择',
+    width: '70%',
+    zIndex: 2023,
+  },
+  render: args => ({
+    components: { ThSelectTransferModal },
+    setup() {
+      return { args }
+    },
+    template: `<th-select-transfer-modal
+                 v-model:value="args.value"
+                 v-model:show="args.show"
+                 :form-items="args.formItems"
+                 :default-params="args.defaultParams"
+                 :hide-pagination="args.hidePagination"
+                 :request="args.request"
+                 :layout="args.layout"
+                 :optionRight="args.optionRight"
+                 :page-sizes="args.pageSizes"
+                 :pager-count="args.pagerCount"
+                 :props="args.props"
+                 :title="args.title"
+                 :width="args.width"
+                 :z-index="args.zIndex"
+               />`,
+  }),
+} satisfies Meta<typeof ThSelectTransferModal>
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Base: Story = {
+  name: '基本使用',
+}