You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
233 lines
6.5 KiB
233 lines
6.5 KiB
<template>
|
|
<div>
|
|
<div v-for="(item, index) in formConfig" :key="index">
|
|
<template v-if="item.type === 'cardItem'">
|
|
<div class="grid-container">
|
|
<div v-for="(sItem, sIndex) in item.config" class="form-item" :class="sItem.span == 1 ? 'full-row' : ''"
|
|
:key="sIndex">
|
|
<template v-if="sItem.type === 'input'">
|
|
<div class="form-title">{{ sItem.label }}</div>
|
|
<el-input :maxlength="sItem.maxlength || 30" :disabled="sItem.disabled"
|
|
v-model="formFields[sIndex]" :class="sItem.borderType | getBorderType"
|
|
:placeholder="sItem.placeholder ? sItem.placeholder : ('请输入' + sItem.label)" />
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template v-else-if="item.type === 'conditionItem'">
|
|
<div class="form-item ">
|
|
<div class="form-title fs-16">{{ item.label }}</div>
|
|
<div v-for="(sItem, sIndex) in item.config" class="flex">
|
|
<div class="flex1 mr-24">
|
|
<div class="form-title">{{ sItem.label }}</div>
|
|
<div class="flex">
|
|
<el-select class="flex1" v-model="formFields[sIndex]" multiple placeholder="请选择">
|
|
<el-option
|
|
v-for="op in sItem.options"
|
|
:key="op.value"
|
|
:label="op.label"
|
|
:value="op.value">
|
|
</el-option>
|
|
</el-select>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="flex1" v-show = "isShowOther(formFields[sIndex])">
|
|
<div class="form-title">其他</div>
|
|
<div class="flex">
|
|
<el-input v-model="formFields[sItem.otherCode]" :class="sItem.borderType | getBorderType"></el-input>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
components: {
|
|
},
|
|
props: {
|
|
formConfig: {
|
|
type: Array,
|
|
value: () => [],
|
|
},
|
|
formData: {
|
|
type: Object,
|
|
value: () => ({})
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
formFields: {},//表单双休绑定字段
|
|
allFieldsConfig: {},//包含config的所有字段,主要用于校验表单是否填写
|
|
};
|
|
},
|
|
watch: {
|
|
immediate: true,
|
|
formData: {
|
|
handler(v) {
|
|
this.handleFormField();
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.handleFormField();
|
|
},
|
|
filters: {
|
|
getBorderType(type) {
|
|
const typeObj = {
|
|
orange: "orange-border",
|
|
green: "green-border",
|
|
blue: "blue-border",
|
|
}
|
|
return typeObj[type] || ""
|
|
},
|
|
|
|
},
|
|
methods: {
|
|
isShowOther(v = []){
|
|
return v.includes(-1);
|
|
},
|
|
//根据formConifg回填form表单数据
|
|
handleFormField() {
|
|
const result = {};
|
|
let config = {};
|
|
const { formConfig, formData } = this;
|
|
formConfig.forEach((item) => {
|
|
if (item.config) {
|
|
config = { ...config, ...item.config }
|
|
Object.keys(item.config).forEach(key => {
|
|
const currentConfig = item.config[key];
|
|
result[key] = formData[key];
|
|
if(currentConfig.otherCode){//如果有其它的字段需要赋值给formData
|
|
const {otherCode} = currentConfig;
|
|
result[otherCode] = formData[otherCode]
|
|
config[otherCode] = {label:"其他",type:"input"}
|
|
}
|
|
});
|
|
console.log(item.config,"config")
|
|
if(item.config?.otherCode){
|
|
config[item.config?.otherCode] = item.config?.otherCode;
|
|
}
|
|
}
|
|
|
|
})
|
|
this.formFields = result;
|
|
this.allFieldsConfig = config;
|
|
console.log(config, "allFieldsConfig")
|
|
},
|
|
getFormData() {
|
|
const { formFields, allFieldsConfig } = this;
|
|
for (const key in formFields) {
|
|
if (!formFields[key]) {
|
|
const o = allFieldsConfig[key];
|
|
let prefix = "";
|
|
if (o.type === "input") {
|
|
prefix = "填写"
|
|
} else {
|
|
prefix = "选择"
|
|
}
|
|
this.$message.error(`${o.label}还未${prefix}请${prefix}后再提交`);
|
|
return;
|
|
}
|
|
}
|
|
return formFields;
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" >
|
|
.grid-container {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
/* 默认2列 */
|
|
gap: 0 24px;
|
|
}
|
|
|
|
.form-item {
|
|
background: #fff;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
|
|
margin-top: 24px;
|
|
padding: 24px;
|
|
border-radius: 5px 5px;
|
|
|
|
}
|
|
|
|
/* 或者使用 span 语法 */
|
|
.full-row {
|
|
grid-column: span 2;
|
|
}
|
|
|
|
.form-title {
|
|
margin-bottom: 12px;
|
|
font-size: 14px;
|
|
font-weight: normal;
|
|
color:#606266;
|
|
}
|
|
|
|
.orange-border {
|
|
input {
|
|
border-color: #f9c588;
|
|
|
|
&:focus {
|
|
border-color: #f9c588;
|
|
}
|
|
|
|
&:hover {
|
|
border-color: #f9c588;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.green-border {
|
|
input {
|
|
border-color: green;
|
|
|
|
&:focus {
|
|
border-color: green;
|
|
}
|
|
|
|
&:hover {
|
|
border-color: green;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.blue-border {
|
|
input {
|
|
border-color: #4ea2ff;
|
|
|
|
&:focus {
|
|
border-color: #4ea2ff;
|
|
}
|
|
|
|
&:hover {
|
|
border-color: #4ea2ff;
|
|
}
|
|
}
|
|
|
|
}
|
|
.fs-16{
|
|
font-size: 0.96rem;
|
|
font-weight: bold;
|
|
color:#464647
|
|
}
|
|
.flex1{
|
|
flex:1;
|
|
}
|
|
.flex{
|
|
display: flex;
|
|
}
|
|
.mr-24{
|
|
margin-right: 24px;
|
|
}
|
|
</style>
|