85 lines
2.5 KiB
TypeScript
85 lines
2.5 KiB
TypeScript
/*
|
|
* @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: '基本使用',
|
|
}
|