attiya/ebike-plus-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 分步表单

Browse Source
This commit is contained in:
wf 2024-06-18 17:21:31 +08:00
parent 4136dd2a9e
commit 70620070d1
1 changed files with 104 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

174
src/views/form-management/step-form/step-form.vue
View File

@ -1,81 +1,107 @@
<template> <template>
<div class="dc-page container"> <a-spin :loading="loading" style="display: block">
<a-row> <div class="dc-page container">
<a-col :span="12" :offset="6"> <a-row>
<a-steps :current="currentStep" line-less> <a-col :span="12" :offset="6">
<a-step description="创建渠道活动">基本信息</a-step> <a-steps :current="currentStep" line-less>
<a-step description="完善活动渠道信息">活动渠道</a-step> <a-step description="创建渠道活动">基本信息</a-step>
<a-step description="创建成功">完成创建</a-step> <a-step description="完善活动渠道信息">活动渠道</a-step>
</a-steps> <a-step description="创建成功">完成创建</a-step>
</a-col> </a-steps>
</a-row> </a-col>
<a-row class="margin-top"> </a-row>
<a-col :span="8" :offset="8"> <a-row class="margin-top">
<a-form ref="formRef" :model="form" :rules="rules" @submit="handleSubmit"> <a-col :span="8" :offset="8">
<div v-if="currentStep == 1"> <a-form ref="formRef" :model="form" :rules="rules" @submit="handleSubmit">
<a-form-item field="name" label="活动名称"> <div v-if="currentStep == 1">
<a-input v-model="form.name" placeholder="请输入活动名称" /> <a-form-item field="name" label="活动名称">
</a-form-item> <a-input v-model="form.name" placeholder="请输入活动名称" />
<a-form-item field="type" label="渠道类型"> </a-form-item>
<a-select v-model="form.type" placeholder="请选择渠道类型" allow-clear> <a-form-item field="type" label="渠道类型">
<a-option value="1">gitee</a-option> <a-select v-model="form.type" placeholder="请选择渠道类型" allow-clear>
<a-option value="2">github</a-option> <a-option value="1">互联网</a-option>
</a-select> <a-option value="2">线下</a-option>
</a-form-item> </a-select>
<a-form-item field="date" label="推广时间"> </a-form-item>
<a-date-picker v-model="form.date" placeholder="请选择推广时间" style="width: 100%" /> <a-form-item field="date" label="推广时间">
</a-form-item> <a-range-picker v-model="form.date" style="width: 100%" />
<a-form-item field="address" label="推广地址"> </a-form-item>
<a-input v-model="form.address" placeholder="请输入推广地址" /> <a-form-item field="address" label="推广地址">
<template #extra> <a-input v-model="form.address" placeholder="请输入推广地址" />
<div>从哪些渠道了解到该项目，例如gitee：https://gitee.com/wang_fan_w/dc-admin</div> <template #extra>
</template> <div>从哪些渠道了解到该项目，例如gitee：https://gitee.com/wang_fan_w/dc-admin</div>
</a-form-item> </template>
</div> </a-form-item>
<div v-if="currentStep == 2"> </div>
<a-form-item field="source" label="广告来源"> <div v-if="currentStep == 2">
<a-input v-model="form.source" placeholder="请输入广告来源" /> <a-form-item field="source" label="广告来源">
</a-form-item> <a-input v-model="form.source" placeholder="请输入广告来源" />
<a-form-item field="medium" label="广告媒介"> </a-form-item>
<a-input v-model="form.medium" placeholder="请输入广告媒介" /> <a-form-item field="medium" label="广告媒介">
</a-form-item> <a-input v-model="form.medium" placeholder="请输入广告媒介" />
<a-form-item field="keyword" label="关键词"> </a-form-item>
<a-select v-model="form.keyword" placeholder="请选择关键词" allow-clear> <a-form-item field="keyword" label="关键词">
<a-option value="1">gitee</a-option> <a-select v-model="form.keyword" placeholder="请选择关键词" allow-clear multiple>
<a-option value="2">github</a-option> <a-option value="1">gitee</a-option>
</a-select> <a-option value="2">github</a-option>
</a-form-item> </a-select>
<a-form-item field="tip" label="推送提醒"> </a-form-item>
<a-switch v-model="form.tip" /> <a-form-item field="tip" label="推送提醒">
</a-form-item> <a-switch v-model="form.tip" />
<a-form-item field="content" label="广告内容"> </a-form-item>
<a-textarea v-model="form.content" placeholder="请输入广告内容" allow-clear /> <a-form-item field="content" label="广告内容">
</a-form-item> <a-textarea v-model="form.content" placeholder="请输入广告内容" allow-clear />
</div> </a-form-item>
</div>
<a-form-item> <div v-if="currentStep == 3">
<a-space> <a-result status="success" title="提交成功">
<a-button @click="onLastStep">上一步</a-button> <template #subtitle> 提交表单成功 </template>
<a-button html-type="submit" type="primary">下一步</a-button> <template #extra>
</a-space> <a-space>
</a-form-item> <a-button type="primary">查看详情</a-button>
</a-form> <a-button @click="currentStep = 1">再次创建</a-button>
</a-col> </a-space>
</a-row> </template>
</div> </a-result>
</div>
<a-form-item v-if="currentStep != 3">
<a-space>
<a-button @click="onLastStep" v-if="currentStep != 1">上一步</a-button>
<a-button html-type="submit" type="primary">下一步</a-button>
</a-space>
</a-form-item>
</a-form>
</a-col>
</a-row>
<a-row v-if="currentStep == 3">
<a-col :span="16" :offset="4">
<a-typography style="background: var(--color-fill-2); padding: 24px">
<a-typography-paragraph>提示</a-typography-paragraph>
<ul>
<li>您可以在github或者gitee上完整预览该项目</li>
<li>如果您觉得该项目对您有用，可以动动小手，点亮一下star噢</li>
</ul>
</a-typography>
</a-col>
</a-row>
</div>
</a-spin>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
const loading = ref(false);
const currentStep = ref(1); const currentStep = ref(1);
const form = ref({ const form = ref({
name: "", name: "",
type: null, type: null,
date: "", date: [],
address: "", address: "https://gitee.com/wang_fan_w/dc-admin",
source: "", source: "",
medium: "", medium: "",
keyword: "", keyword: [],
tip: false, tip: true,
content: "" content: ""
}); });
const rules = ref({ const rules = ref({
@ -143,7 +169,15 @@ const handleSubmit = ({ values, errors }: ISubmit) => {
console.log("values:", values, "\nerrors:", errors); console.log("values:", values, "\nerrors:", errors);
if (errors) return; if (errors) return;
if (currentStep.value == 3) return; if (currentStep.value == 3) return;
currentStep.value += 1; if (currentStep.value == 2) {
loading.value = true;
setTimeout(() => {
loading.value = false;
currentStep.value += 1;
}, 500);
} else {
currentStep.value += 1;
}
}; };
const onLastStep = () => { const onLastStep = () => {
@ -154,9 +188,9 @@ const onLastStep = () => {
<style lang="scss" scoped> <style lang="scss" scoped>
.container { .container {
padding: 80px 0; padding: 60px 0;
} }
.margin-top { .margin-top {
margin-top: 80px; margin-top: 60px;
} }
</style> </style>