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 12:59:43 +08:00
parent ceef194a6e
commit 4136dd2a9e
1 changed files with 88 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -12,26 +12,52 @@
<a-row class="margin-top"> <a-row class="margin-top">
<a-col :span="8" :offset="8"> <a-col :span="8" :offset="8">
<a-form ref="formRef" :model="form" :rules="rules" @submit="handleSubmit"> <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">gitee</a-option>
</a-select> <a-option value="2">github</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-date-picker v-model="form.date" placeholder="请选择推广时间" 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>
</a-form-item>
</div>
<div v-if="currentStep == 2">
<a-form-item field="source" label="广告来源">
<a-input v-model="form.source" placeholder="请输入广告来源" />
</a-form-item>
<a-form-item field="medium" label="广告媒介">
<a-input v-model="form.medium" placeholder="请输入广告媒介" />
</a-form-item>
<a-form-item field="keyword" label="关键词">
<a-select v-model="form.keyword" placeholder="请选择关键词" allow-clear>
<a-option value="1">gitee</a-option>
<a-option value="2">github</a-option>
</a-select>
</a-form-item>
<a-form-item field="tip" label="推送提醒">
<a-switch v-model="form.tip" />
</a-form-item>
<a-form-item field="content" label="广告内容">
<a-textarea v-model="form.content" placeholder="请输入广告内容" allow-clear />
</a-form-item>
</div>
<a-form-item> <a-form-item>
<a-button html-type="submit" type="primary">下一步</a-button> <a-space>
<a-button @click="onLastStep">上一步</a-button>
<a-button html-type="submit" type="primary">下一步</a-button>
</a-space>
</a-form-item> </a-form-item>
</a-form> </a-form>
</a-col> </a-col>
@ -45,7 +71,12 @@ const form = ref({
name: "", name: "",
type: null, type: null,
date: "", date: "",
address: "" address: "",
source: "",
medium: "",
keyword: "",
tip: false,
content: ""
}); });
const rules = ref({ const rules = ref({
name: [ name: [
@ -71,6 +102,36 @@ const rules = ref({
required: true, required: true,
message: "请输入推广地址" message: "请输入推广地址"
} }
],
source: [
{
required: true,
message: "请输入广告来源"
}
],
medium: [
{
required: true,
message: "请输入广告媒介"
}
],
keyword: [
{
required: true,
message: "请选择关键词"
}
],
tip: [
{
required: true,
message: "请选择推送提醒"
}
],
content: [
{
required: true,
message: "请输入广告内容"
}
] ]
}); });
const formRef = ref(); const formRef = ref();
@ -81,6 +142,13 @@ interface ISubmit {
const handleSubmit = ({ values, errors }: ISubmit) => { 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;
currentStep.value += 1;
};
const onLastStep = () => {
if (currentStep.value == 1) return;
currentStep.value -= 1;
}; };
</script> </script>