97 lines
3.1 KiB
TypeScript
97 lines
3.1 KiB
TypeScript
/*
|
|
* @Author: zhaojinfeng 121016171@qq.com
|
|
* @Date: 2023-07-18 12:30:07
|
|
* @LastEditors: zhaojinfeng 121016171@qq.com
|
|
* @LastEditTime: 2023-07-22 17:51:34
|
|
* @FilePath: \vue3\stories\SelectTableModal.stories.ts
|
|
* @Description:
|
|
*
|
|
*/
|
|
import type { Meta, StoryObj } from '@storybook/vue3'
|
|
import ThSelectTableModal from '../packages/select-table-modal/index.vue'
|
|
|
|
// 模拟800毫秒钟的接口请求
|
|
function request() {
|
|
return new Promise<Page>((resolve) => {
|
|
setTimeout(() => {
|
|
resolve({
|
|
code: 200,
|
|
rows: [{ prop1: 'prop11', prop2: 'prop12', prop3: 'prop13' }, { prop1: 'prop21', prop2: 'prop22', prop3: 'prop23' }],
|
|
total: 10,
|
|
message: 'ok',
|
|
})
|
|
}, 800)
|
|
})
|
|
}
|
|
|
|
const meta = {
|
|
title: '表单组件/SelectTableModal',
|
|
tags: ['表单组件', 'autodocs'],
|
|
args: {
|
|
value: '',
|
|
rowKey: 'prop1',
|
|
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,
|
|
multiple: false,
|
|
zIndex: 2023,
|
|
},
|
|
render: args => ({
|
|
components: { ThSelectTableModal },
|
|
setup() {
|
|
return { args }
|
|
},
|
|
template: `<th-select-table-modal
|
|
v-model:value="args.value"
|
|
: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"
|
|
:multiple="args.multiple"
|
|
:z-index="args.zIndex"
|
|
><template #x>x</template></th-select-table-modal>`,
|
|
}),
|
|
} satisfies Meta<typeof ThSelectTableModal>
|
|
export default meta
|
|
|
|
type Story = StoryObj<typeof meta>
|
|
|
|
export const Base: Story = {
|
|
name: '基本使用',
|
|
}
|
|
|
|
export const TableSlot: Story = {
|
|
name: '自定义表格展示',
|
|
render: args => ({
|
|
components: { ThSelectTableModal },
|
|
setup() {
|
|
return { args }
|
|
},
|
|
args: {
|
|
value: '',
|
|
rowKey: 'prop1',
|
|
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' }] }],
|
|
request,
|
|
},
|
|
template: `<th-select-table-modal
|
|
v-model:value="args.value"
|
|
:row-key="args.rowKey"
|
|
:columns="args.columns"
|
|
:form-items="args.formItems"
|
|
:request="args.request"
|
|
>
|
|
<template #column-prop1="{row}">row:{{row}}</template>
|
|
</th-select-table-modal>`,
|
|
}),
|
|
}
|