最近接手vben后台管理模块,上手体验了一下,官方文档比较复杂及网上vben内容发布较少,个人也是研究了不少时间,发布文章也是希望大家有思路快速脱离问题的坑。
1.基础表单设置
代码如下(示例):
const [
register,
{
validateFields,
resetFields,
setFieldsValue,
appendSchemaByField,
updateSchema,
removeSchemaByFiled,
},
] = useForm({
labelWidth: 120,
schemas: [
{
field: 'id',
label: 'id',
required: true,
defaultValue: 0,
component: 'InputNumber',
show: false,
},
{
field: 'code',
label: 'code',
required: true,
defaultValue: 0,
component: 'InputNumber',
show: false,
},
{
field: 'divider-api-select',
component: 'Divider',
label: '每日打卡奖励',
},
{
field: 'integral_start',
component: 'Input',
label: '积分范围起始值',
colProps: {
span: 12,
},
componentProps: {
placeholder: '请输入积分',
},
required: true,
},
{
field: 'integral_end',
component: 'Input',
label: '积分范围终止值',
colProps: {
span: 12,
},
componentProps: {
placeholder: '请输入积分',
},
required: true,
},
{
field: `type`,
component: 'Select',
label: '额外奖励类型',
colProps: {
span: 8,
},
componentProps: {
options: [],
placeholder: '请选择类型',
},
required: true,
},
{
field: 'product_id',
component: 'Input',
label: '奖品ID',
colProps: {
span: 8,
},
componentProps: {
placeholder: '请输入奖品ID',
},
required: true,
},
{
field: 'probability',
component: 'Input',
label: '获得概率(%)',
colProps: {
span: 8,
},
componentProps: {
placeholder: '请输入获得概率,不低于0.0001',
},
required: true,
},
{
field: 'continuity-select',
component: 'Divider',
label: '连续签到奖励',
},
],
// submitButtonOptions: { text: '提交' },
showActionButtonGroup: false,
});
// 获取后端返回数据
getPunchInInfo({
id: params.id,
}).then((res: any) => {
//处理字段‘type’的数据
let type_list = Object.keys(res.type_list).map(item => ({ label: res.type_list[item], value: String(item) }));
updateSchema({
field: 'type',
componentProps: { options: type_list },
});
setFieldsValue(res);
test.value = res;
setFormValues(res.continuity_list);
});
表单内容如下:
表单里边‘filed’填写的是后端返回对象的字段
2.增加表单及位置设置
代码如下(示例):
// 动态表单设置 函数
const setDynamicForms = (i) => {
appendSchemaByField(
{
field: `continuity_day_${i}`,
component: 'Input',
label: '天数',
colProps: {
span: 6,
},
required: true,
},
'',
);
appendSchemaByField(
{
field: `continuity_type_${i}`,
component: 'Select',
label: '奖品类型',
colProps: {
span: 6,
},
componentProps: {
options: [],
placeholder: '请选择类型',
},
required: true,
},
'',
);
appendSchemaByField(
{
field: `continuity_product_id_${i}`,
component: 'Input',
label: '奖品ID',
colProps: {
span: 6,
},
required: true,
},
'',
);
appendSchemaByField(
{
field: `${i}`,
component: 'Input',
label: ' ',
colProps: {
span: 6,
},
slot: 'add',
},
'',
);
let type_list = Object.keys(test.value.type_list).map(item => ({ label: test.value.type_list[item], value: Number(item) }));
updateSchema({
field: `continuity_type_${i}`,
componentProps: { options: type_list },
});
};
// 设置
const setFormValues = (product_id_rule) => {
let defaultRule = [
{type: '', day: '', product_id: ''},
];
if (product_id_rule.length > 0) {
defaultRule = product_id_rule;
}
const obj = {};
// 动态 n 递增赋值
n.value = defaultRule.length;
for (let i = 0; i < defaultRule.length; i++) {
// 组装渲染表单数据源
const {type, day, product_id} = defaultRule[i];
obj[`continuity_type_${i}`] = type
obj[`continuity_day_${i}`] = day;
obj[`continuity_product_id_${i}`] = product_id;
// 组装表单 Element
setDynamicForms(i);
}
setFieldsValue({
...obj,
});
};
新表单如下:
appendSchemaByField方法默认在表单的最后面增加此表单元素,可在appendSchemaByField方法中的‘’,这里面添加filed的字段名,则会在填写的字段名后面增加此元素
如:appendSchemaByField(
{
field: `${i}`,
component: 'Input',
label: ' ',
colProps: {
span: 6,
},
slot: 'add',
},
'title',
);
3.全部代码如下
<template>
<PageWrapper>
<div
style="
display: flex;
align-items: center;
justify-content: flex-end;
gap: 20px;
margin-bottom: 6px;
"
>
<a-button @click="resetFields">重置</a-button>
<a-button type="primary" @click="validateForm">提交</a-button>
</div>
<CollapseContainer title="基础信息" class="mb-6">
<BasicForm @register="register">
<template #add="{ field }">
<Button v-if="Number(field) === 0" @click="add">+</Button>
<Button v-if="field > 0" @click="del(field)">-</Button>
</template>
</BasicForm>
</CollapseContainer>
</PageWrapper>
</template><script lang="ts">
import { defineComponent, unref, ref } from 'vue';
import { useRouter } from 'vue-router';
import { useGo } from '/@/hooks/web/usePage';
import { PageWrapper } from '/@/components/Page';
import { CollapseContainer } from '/@/components/Container';
import { BasicForm, useForm } from '/@/components/Form/index';
import { Button } from '/@/components/Button';
import { useMessage } from '/@/hooks/web/useMessage';
import { Tinymce } from '/@/components/Tinymce/index';
import { getPunchInInfo, postPunchInInfo } from '/@/api/punchIn/index';export default defineComponent({
components: {
PageWrapper,
CollapseContainer,
BasicForm,
Button,
Tinymce,
},
setup() {
const go = useGo();
const { currentRoute } = useRouter();
const test = ref();
// 动态
const n = ref(0);
const params = unref(currentRoute).params;
const { createMessage } = useMessage();
const [
register,
{
validateFields,
resetFields,
setFieldsValue,
appendSchemaByField,
updateSchema,
removeSchemaByFiled,
},
] = useForm({
labelWidth: 120,
schemas: [
{
field: 'id',
label: 'id',
required: true,
defaultValue: 0,
component: 'InputNumber',
show: false,
},
{
field: 'code',
label: 'code',
required: true,
defaultValue: 0,
component: 'InputNumber',
show: false,
},
{
field: 'divider-api-select',
component: 'Divider',
label: '每日打卡奖励',
},
{
field: 'integral_start',
component: 'Input',
label: '积分范围起始值',
colProps: {
span: 12,
},
componentProps: {
placeholder: '请输入积分',
},
required: true,
},
{
field: 'integral_end',
component: 'Input',
label: '积分范围终止值',
colProps: {
span: 12,
},
componentProps: {
placeholder: '请输入积分',
},
required: true,
},
{
field: `type`,
component: 'Select',
label: '额外奖励类型',
colProps: {
span: 8,
},
componentProps: {
options: [],
placeholder: '请选择类型',
},
required: true,
},
{
field: 'product_id',
component: 'Input',
label: '奖品ID',
colProps: {
span: 8,
},
componentProps: {
placeholder: '请输入奖品ID',
},
required: true,
},
{
field: 'probability',
component: 'Input',
label: '获得概率(%)',
colProps: {
span: 8,
},
componentProps: {
placeholder: '请输入获得概率,不低于0.0001',
},
required: true,
},
{
field: 'continuity-select',
component: 'Divider',
label: '连续签到奖励',
},
],
// submitButtonOptions: { text: '提交' },
showActionButtonGroup: false,
});// 动态表单设置 函数
const setDynamicForms = (i) => {
appendSchemaByField(
{
field: `continuity_day_${i}`,
component: 'Input',
label: '天数',
colProps: {
span: 6,
},
required: true,
},
'',
);
appendSchemaByField(
{
field: `continuity_type_${i}`,
component: 'Select',
label: '奖品类型',
colProps: {
span: 6,
},
componentProps: {
options: [],
placeholder: '请选择类型',
},
required: true,
},
'',
);
appendSchemaByField(
{
field: `continuity_product_id_${i}`,
component: 'Input',
label: '奖品ID',
colProps: {
span: 6,
},
required: true,
},
'',
);
appendSchemaByField(
{
field: `${i}`,
component: 'Input',
label: ' ',
colProps: {
span: 6,
},
slot: 'add',
},
'',
);
let type_list = Object.keys(test.value.type_list).map(item => ({ label: test.value.type_list[item], value: Number(item) }));
updateSchema({
field: `continuity_type_${i}`,
componentProps: { options: type_list },
});
};
// 设置
const setFormValues = (product_id_rule) => {
let defaultRule = [
{type: '', day: '', product_id: ''},
];
if (product_id_rule.length > 0) {
defaultRule = product_id_rule;
}
const obj = {};
// 动态 n 递增赋值
n.value = defaultRule.length;
for (let i = 0; i < defaultRule.length; i++) {
// 组装渲染表单数据源
const {type, day, product_id} = defaultRule[i];
obj[`continuity_type_${i}`] = type
obj[`continuity_day_${i}`] = day;
obj[`continuity_product_id_${i}`] = product_id;
// 组装表单 Element
setDynamicForms(i);
}
setFieldsValue({
...obj,
});
};// 获取数据
getPunchInInfo({
id: params.id,
}).then((res: any) => {
let type_list = Object.keys(res.type_list).map(item => ({ label: res.type_list[item], value: String(item) }));
updateSchema({
field: 'type',
componentProps: { options: type_list },
});
setFieldsValue(res);
test.value = res;
setFormValues(res.continuity_list);
});// 提交
const validateForm = async () => {
try {
const values = await validateFields();
const continuity_list = Object.keys(values)
.filter((f: any) => f.startsWith('continuity_type_'))
.map((m: any, m_i: number) => ({
type: values[m],
day: values[`continuity_day_${m_i}`],
product_id: values[`continuity_product_id_${m_i}`],
}));
postPunchInInfo({
...values,
continuity_list: continuity_list,
}).then((res: any) => {
createMessage.success('提交成功');
go(`/punchIn/index`);
});
} catch (error) {
createMessage.error('系统错误,请稍后重试');
}
};
const handleChange = (value: string) => {
console.log(value);
};
const add = () => {
setDynamicForms(n.value);
n.value++;
};
const del = (field) => {
removeSchemaByFiled([
`continuity_type_${field}`,
`continuity_day_${field}`,
`continuity_product_id_${field}`,
`${field}`,
]);
n.value--;
};
return {
register,
resetFields,
validateForm,
setFormValues,
handleChange,
add,
del,
};
},
});
</script>
总结
提示:这里对文章进行总结:
例如:以上就是今天要讲的内容,本文仅仅简单介绍了userform的使用,更多方便快捷vben的userform的使用还需要更加深入了解,如有什么问题欢迎私信我。