像这种由后端返回数据生成的表单应该都有做过吧,现在产品的要求真是越来越过分了,给用户的选择变的非常自由,这种自由只会增加程序员的代码量,无论是前端还是后端.所以想成为一个合格的产品经理需要会些什么?我想转产品去给程序员提需求了
<template>
<div>
<a-form ref="userform" :model="formState" name="basic" :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }"
autocomplete="off">
<a-row :gutter="[0, 10]">
<a-col :span="8" :key="item.id" v-for="item in specimenFields">
<a-form-item :label="item.name" :name="item.key" :rules="[
{
required: validateFields && item.fieldRequired === 1,
message: '该项不能为空',
},
]">
<!--字符串-->
<a-input v-model:value="formState[item.key]" :placeholder="item.memo"
v-if="item.valueType === 0 && item.editType === 1" clearable :disabled="!editable" />
<a-input v-model:value="formState[item.key]" :placeholder="item.memo"
v-else-if="item.valueType === 0 && item.editType != 1" clearable :disabled="!editable" />
<!--整数-->
<a-input-number v-model:value="formState[item.key]" :placeholder="item.memo"
v-else-if="item.valueType === 1 && item.editType === 1"
:style="{ width: item.key == 'count' ? '75%' : '100%' }" :min="0" :disabled="!editable" />
<a-input-number v-model:value="formState[item.key]" :placeholder="item.memo"
v-else-if="item.valueType === 1 && item.editType != 1" style="width: 100%" :min="0" :disabled="!editable" />
<!--浮点数-->
<a-input v-model:value="formState[item.key]" :placeholder="item.memo"
v-else-if="item.valueType === 2 && item.editType === 1" type="number" :min="0" :disabled="!editable" />
<a-input v-model:value="formState[item.key]" :placeholder="item.memo"
v-else-if="item.valueType === 2 && item.editType != 1" type="number" :min="0" :disabled="!editable" />
<!--日期-->
<a-date-picker v-model:value="formState[item.key]" :placeholder="item.memo"
v-else-if="item.valueType === 3 && item.editType === 1" clearable style="width: 100%"
:disabled="!editable"></a-date-picker>
<a-date-picker v-model:value="formState[item.key]" :placeholder="item.memo"
v-else-if="item.valueType === 3 && item.editType != 1" clearable style="width: 100%"
:disabled="!editable"></a-date-picker>
<!--枚举-->
<a-select v-model:value="formState[item.key]" :placeholder="item.memo"
v-else-if="item.valueType === 4 && item.editType === 1" filterable clearable :disabled="!editable">
<a-select-option v-for="j in item.valueRange.split('|')" :value="j" :key="j">{{ j }}</a-select-option>
</a-select>
<a-select v-model:value="formState[item.key]" :placeholder="item.memo"
v-else-if="item.valueType === 4 && item.editType != 1" filterable clearable :disabled="!editable">
<a-select-option v-for="j in item.valueRange.split('|')" :value="j" :key="j">{{ j }}</a-select-option>
</a-select>
<a-button type="primary" v-if="item.key == 'count'" style="margin-left: 4%; height: 30px;width:21%"
@click="submit">确定</a-button>
</a-form-item>
</a-col>
</a-row>
</a-form>
<div style="text-align: center; margin-top: 42px" v-if="showbon">
<a-button type="primary" :loading="false" @click="resetting" v-if="editable">重置</a-button>
<a-button type="primary" @click="preserve" style="margin-left: 10px">{{ okText }}</a-button>
</div>
</div>
</template>
<script setup lang="tsx">
import { ref, reactive, defineEmits, defineExpose } from 'vue';
import { message, Modal } from 'ant-design-vue';
import dayjs, { Dayjs } from 'dayjs';
import { useRoute } from 'vue-router';
const route = useRoute();
const emit = defineEmits(['handle', 'register', 'resetting', 'delhandle']);
const props = defineProps({
count: { type: Number, default: 0 },
// 是否可编辑
editable: { type: Boolean, default: true },
// 是否显示按钮
showbon: { type: Boolean, default: true },
// 保存按钮文字
okText: { type: String, default: '保存' },
// 取消按钮文字
cancelText: { type: String, default: '取消' },
// 是否对字段验证
validateFields: { type: Boolean, default: true },
});
const specimenFields = ref([]);
const userform = ref();
const formState: any = reactive({});
let editList = [];
const templateCV = async (id) => {
editList = [];
//请求拿数据
let { result } = await aaaaa({ groupId: id })
specimenFields.value = result;
};
const submit = async () => {
Modal.confirm({
title: '您确定要生成表格吗？',
onOk: async () => {
cancel();
},
});
};
// 回显
const Feedback = async (val) => {
};
defineExpose({
Feedback,
formState,
resetting,
preserve,
templateCV,
});
</script>
<style lang="less" scoped>
.ant-col {
height: 45px;
}
</style>
具体的自己去看吧,根据自己的数据去做处理
