implement genfile

frontend/vben/src/views/dashboard/regex/index.vue

@@ -25,15 +25,15 @@
       const { createMessage } = useMessage()
       const [register, { validate, setProps }] = useForm({
         labelCol: {
-          span: 8,
+          span: 5,
         },
         wrapperCol: {
-          span: 15,
+          span: 16,
         },
         schemas: schemas,
         actionColOptions: {
-          offset: 8,
-          span: 23,
+          offset: 3,
+          span: 16,
         },
         submitButtonOptions: {
           text: '提交',

frontend/vben/src/views/page/genfile/Step1.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="step1">
+    <div class="step1-form">
+      <BasicForm @register="register">
+        <template #fac="{ model, field }">
+          <a-input-group compact>
+            <a-select v-model:value="model['pay']" class="pay-select">
+              <a-select-option value="zfb"> 支付宝 </a-select-option>
+              <a-select-option value="yl"> 银联 </a-select-option>
+            </a-select>
+            <a-input class="pay-input" v-model:value="model[field]" />
+          </a-input-group>
+        </template>
+      </BasicForm>
+    </div>
+    <a-divider />
+    <h3>说明</h3>
+    <h4>转账到支付宝账户</h4>
+    <p>
+      如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。
+    </p>
+
+    <h4>转账到银行卡</h4>
+    <p>
+      如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。
+    </p>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue'
+  import { BasicForm, useForm } from '/@/components/Form'
+  import { step1Schemas } from './data'
+
+  import { Select, Input, Divider } from 'ant-design-vue'
+  export default defineComponent({
+    components: {
+      BasicForm,
+      [Select.name]: Select,
+      ASelectOption: Select.Option,
+      [Input.name]: Input,
+      [Input.Group.name]: Input.Group,
+      [Divider.name]: Divider,
+    },
+    emits: ['next'],
+    setup(_, { emit }) {
+      const [register, { validate }] = useForm({
+        labelWidth: 100,
+        schemas: step1Schemas,
+        actionColOptions: {
+          span: 14,
+        },
+        showResetButton: false,
+        submitButtonOptions: {
+          text: '下一步',
+        },
+        submitFunc: customSubmitFunc,
+      })
+
+      async function customSubmitFunc() {
+        try {
+          const values = await validate()
+          emit('next', values)
+        } catch (error) {}
+      }
+
+      return { register }
+    },
+  })
+</script>
+<style lang="less" scoped>
+  .step1 {
+    &-form {
+      width: 450px;
+      margin: 0 auto;
+    }
+
+    h3 {
+      margin: 0 0 12px;
+      font-size: 16px;
+      line-height: 32px;
+      color: @text-color;
+    }
+
+    h4 {
+      margin: 0 0 4px;
+      font-size: 14px;
+      line-height: 22px;
+      color: @text-color;
+    }
+
+    p {
+      color: @text-color;
+    }
+  }
+
+  .pay-select {
+    width: 20%;
+  }
+
+  .pay-input {
+    width: 70%;
+  }
+</style>

frontend/vben/src/views/page/genfile/Step2.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="step2">
+    <a-alert message="确认转账后，资金将直接打入对方账户，无法退回。" show-icon />
+    <a-descriptions :column="1" class="mt-5">
+      <a-descriptions-item label="付款账户"> ant-design@alipay.com </a-descriptions-item>
+      <a-descriptions-item label="收款账户"> test@example.com </a-descriptions-item>
+      <a-descriptions-item label="收款人姓名"> Vben </a-descriptions-item>
+      <a-descriptions-item label="转账金额"> 500元 </a-descriptions-item>
+    </a-descriptions>
+    <a-divider />
+    <BasicForm @register="register" />
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue'
+  import { BasicForm, useForm } from '/@/components/Form'
+  import { step2Schemas } from './data'
+  import { Alert, Divider, Descriptions } from 'ant-design-vue'
+
+  export default defineComponent({
+    components: {
+      BasicForm,
+      [Alert.name]: Alert,
+      [Divider.name]: Divider,
+      [Descriptions.name]: Descriptions,
+      [Descriptions.Item.name]: Descriptions.Item,
+    },
+    emits: ['next', 'prev'],
+    setup(_, { emit }) {
+      const [register, { validate, setProps }] = useForm({
+        labelWidth: 80,
+        schemas: step2Schemas,
+        actionColOptions: {
+          span: 14,
+        },
+        resetButtonOptions: {
+          text: '上一步',
+        },
+        submitButtonOptions: {
+          text: '提交',
+        },
+        resetFunc: customResetFunc,
+        submitFunc: customSubmitFunc,
+      })
+
+      async function customResetFunc() {
+        emit('prev')
+      }
+
+      async function customSubmitFunc() {
+        try {
+          const values = await validate()
+          setProps({
+            submitButtonOptions: {
+              loading: true,
+            },
+          })
+          setTimeout(() => {
+            setProps({
+              submitButtonOptions: {
+                loading: false,
+              },
+            })
+            emit('next', values)
+          }, 1500)
+        } catch (error) {}
+      }
+
+      return { register }
+    },
+  })
+</script>
+<style lang="less" scoped>
+  .step2 {
+    width: 450px;
+    margin: 0 auto;
+  }
+</style>

frontend/vben/src/views/page/genfile/Step3.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="step3">
+    <a-result status="success" title="操作成功" sub-title="预计两小时内到账">
+      <template #extra>
+        <a-button type="primary" @click="redo"> 再转一笔 </a-button>
+        <a-button> 查看账单 </a-button>
+      </template>
+    </a-result>
+    <div class="desc-wrap">
+      <a-descriptions :column="1" class="mt-5">
+        <a-descriptions-item label="付款账户"> ant-design@alipay.com </a-descriptions-item>
+        <a-descriptions-item label="收款账户"> test@example.com </a-descriptions-item>
+        <a-descriptions-item label="收款人姓名"> Vben </a-descriptions-item>
+        <a-descriptions-item label="转账金额"> 500元 </a-descriptions-item>
+      </a-descriptions>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue'
+  import { Result, Descriptions } from 'ant-design-vue'
+  export default defineComponent({
+    components: {
+      [Result.name]: Result,
+      [Descriptions.name]: Descriptions,
+      [Descriptions.Item.name]: Descriptions.Item,
+    },
+    emits: ['redo'],
+    setup(_, { emit }) {
+      return {
+        redo: () => {
+          emit('redo')
+        },
+      }
+    },
+  })
+</script>
+<style lang="less" scoped>
+  .step3 {
+    width: 600px;
+    margin: 0 auto;
+  }
+
+  .desc-wrap {
+    padding: 24px 40px;
+    margin-top: 24px;
+    background-color: @background-color-light;
+  }
+</style>

frontend/vben/src/views/page/genfile/data.tsx

@@ -0,0 +1,78 @@
+import { FormSchema } from '/@/components/Form'
+
+export const step1Schemas: FormSchema[] = [
+  {
+    field: 'account',
+    component: 'Select',
+    label: '付款账户',
+    required: true,
+    defaultValue: '1',
+    componentProps: {
+      options: [
+        {
+          label: 'anncwb@126.com',
+          value: '1',
+        },
+      ],
+    },
+    colProps: {
+      span: 24,
+    },
+  },
+  {
+    field: 'fac',
+    component: 'InputGroup',
+    label: '收款账户',
+    required: true,
+    defaultValue: 'test@example.com',
+    slot: 'fac',
+    colProps: {
+      span: 24,
+    },
+  },
+  {
+    field: 'pay',
+    component: 'Input',
+    label: '',
+    defaultValue: 'zfb',
+    show: false,
+  },
+  {
+    field: 'payeeName',
+    component: 'Input',
+    label: '收款人姓名',
+    defaultValue: 'Vben',
+    required: true,
+    colProps: {
+      span: 24,
+    },
+  },
+  {
+    field: 'money',
+    component: 'Input',
+    label: '转账金额',
+    defaultValue: '500',
+    required: true,
+    renderComponentContent: () => {
+      return {
+        prefix: () => '￥',
+      }
+    },
+    colProps: {
+      span: 24,
+    },
+  },
+]
+
+export const step2Schemas: FormSchema[] = [
+  {
+    field: 'pwd',
+    component: 'InputPassword',
+    label: '支付密码',
+    required: true,
+    defaultValue: '123456',
+    colProps: {
+      span: 24,
+    },
+  },
+]

frontend/vben/src/views/page/genfile/index.vue

@@ -0,0 +1,96 @@
+<template>
+  <PageWrapper
+    title="分步表单"
+    contentBackground
+    content=" 将一个冗长或用户不熟悉的表单任务分成多个步骤，指导用户完成。"
+    contentClass="p-4"
+  >
+    <div class="step-form-form">
+      <a-steps :current="current">
+        <a-step title="填写转账信息" />
+        <a-step title="确认转账信息" />
+        <a-step title="完成" />
+      </a-steps>
+    </div>
+    <div class="mt-5">
+      <Step1 @next="handleStep1Next" v-show="current === 0" />
+      <Step2
+        @prev="handleStepPrev"
+        @next="handleStep2Next"
+        v-show="current === 1"
+        v-if="initSetp2"
+      />
+      <Step3 v-show="current === 2" @redo="handleRedo" v-if="initSetp3" />
+    </div>
+  </PageWrapper>
+</template>
+<script lang="ts">
+  import { defineComponent, ref, reactive, toRefs } from 'vue'
+  import Step1 from './Step1.vue'
+  import Step2 from './Step2.vue'
+  import Step3 from './Step3.vue'
+  import { PageWrapper } from '/@/components/Page'
+  import { Steps } from 'ant-design-vue'
+
+  export default defineComponent({
+    name: 'FormStepPage',
+    components: {
+      Step1,
+      Step2,
+      Step3,
+      PageWrapper,
+      [Steps.name]: Steps,
+      [Steps.Step.name]: Steps.Step,
+    },
+    setup() {
+      const current = ref(0)
+
+      const state = reactive({
+        initSetp2: false,
+        initSetp3: false,
+      })
+
+      function handleStep1Next(step1Values: any) {
+        current.value++
+        state.initSetp2 = true
+        console.log(step1Values)
+      }
+
+      function handleStepPrev() {
+        current.value--
+      }
+
+      function handleStep2Next(step2Values: any) {
+        current.value++
+        state.initSetp3 = true
+        console.log(step2Values)
+      }
+
+      function handleRedo() {
+        current.value = 0
+        state.initSetp2 = false
+        state.initSetp3 = false
+      }
+
+      return {
+        current,
+        handleStep1Next,
+        handleStep2Next,
+        handleRedo,
+        handleStepPrev,
+        ...toRefs(state),
+      }
+    },
+  })
+</script>
+<style lang="less" scoped>
+  .step-form-content {
+    padding: 24px;
+    background-color: @component-background;
+  }
+
+  .step-form-form {
+    width: 750px;
+    margin: 0 auto;
+  }
+</style>