vue3/stories/SelectTransferModal.stories.ts

/*
 * @Author: zhaojinfeng 121016171@qq.com
 * @Date: 2023-08-14 11:07:15
 * @LastEditors: zhaojinfeng 121016171@qq.com
 * @LastEditTime: 2024-01-02 18:28:12
 * @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: [],
    show: false,
    disabledButton: false,
    defaultParams: {},
    formItems: [{ label: 'label1', prop: 'prop1' }, { label: 'label2', prop: 'prop2', selectOptions: [{ label: '1', value: '1' }, { label: '2', value: '2' }] }],
    request,
    pageSizes: [20, 50, 100, 200],
    pagerCount: document.body.clientWidth < 992 ? 5 : 7,
    props: { key: 'id', label: 'name', disabled: 'disabled' },
    hidePagination: false,
    title: '选择',
    width: '70%',
    zIndex: 2001,
    lockList: undefined,
  },
  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"
                :lock-list="args.lockList"
                :request="args.request"
                :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: '基本使用',
}

export const Data: Story = {
  name: '数据回显',
  args: {
    value: [{
      id: 1,
      name: 'name1',
      value: 'value1',
    }, {
      id: 12,
      name: 'name1',
      value: 'value1',
    }],
    show: false,
    defaultParams: {},
    formItems: [{ label: 'label1', prop: 'prop1' }, { label: 'label2', prop: 'prop2', selectOptions: [{ label: '1', value: '1' }, { label: '2', value: '2' }] }],
    request,
    pageSizes: [20, 50, 100, 200],
    pagerCount: document.body.clientWidth < 992 ? 5 : 7,
    props: { key: 'id', label: 'name', disabled: 'disabled' },
    hidePagination: false,
    title: '选择',
    width: '70%',
    zIndex: 2023,
  },
  render: meta.render,
}

export const TransferLock: Story = {
  name: '锁定已编辑项',
  args: {
    ...Data.args,
    value: [{
      id: 1,
      name: 'name1',
      value: 'value1',
    }, {
      id: 12,
      name: 'name12',
      value: 'value12',
    }, {
      id: 33,
      name: 'name33',
      value: 'value33',
    }],
    lockList: [1, 12, 33],
  },
  render: meta.render,
}

export const TransferSlot: Story = {
  name: '穿梭框插槽',
  args: {
    ...meta.args,
  },
  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"
                :lock-list="args.lockList"
                :page-sizes="args.pageSizes"
                :pager-count="args.pagerCount"
                :props="args.props"
                :title="args.title"
                :width="args.width"
                :z-index="args.zIndex"
               >
                <template #transfer="{ option }"> 
                  <span flex-grow>{{ option.name }}</span>
                  <span>（{{ option.value }}）</span> 
                </template>
               </th-select-transfer-modal>
              `,
  }),
}

export const LeftSlot: Story = {
  name: '左插槽',
  args: {
    ...meta.args,
    width: '90%',
    defaultParams: {
      name: '',
    },
  },
  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"
                :lock-list="args.lockList"
                :page-sizes="args.pageSizes"
                :pager-count="args.pagerCount"
                :props="args.props"
                :title="args.title"
                :width="args.width"
                :z-index="args.zIndex"
               >
                <template #left>
                  <div style="width:200px">
                    <input v-model="args.defaultParams.name">
                  </div>
                </template>
               </th-select-transfer-modal>
              `,
  }),
}