<template>
|
<el-form
|
ref="dynamincsFormRef"
|
:model="ruleForm"
|
:label-width="labelWidth"
|
:rules="rules"
|
>
|
<el-row :gutter="row">
|
<el-col
|
:xs="ft.col"
|
:sm="ft.col"
|
:md="ft.col"
|
:lg="ft.col"
|
:xl="ft.col"
|
:class="ft.inputType === 'textarea' ? 'mb20' : 'form-col'"
|
v-for="ft in formTemplateData"
|
:key="ft.fieldId"
|
>
|
<el-form-item :label="ft.label" :prop="ft.prop">
|
<!--date，datetime组件-->
|
<template v-if="ft.type == 'date'">
|
<el-date-picker
|
class="w100"
|
v-model="ruleForm[ft.prop]"
|
:disabled="ft.disabled || false"
|
:type="ft.type"
|
clearable
|
:format="ft.format"
|
:value-format="ft.format"
|
:placeholder="
|
ft.placeholder ? ft.placeholder : ` 请选择${ft.label}`
|
"
|
>
|
</el-date-picker>
|
</template>
|
<!--date，datetime组件-->
|
<template v-if="ft.type == 'datetime'">
|
<el-date-picker
|
class="w100"
|
v-model="ruleForm[ft.prop]"
|
:disabled="ft.disabled || false"
|
:type="ft.type"
|
clearable
|
:format="ft.format"
|
:value-format="ft.format"
|
:placeholder="
|
ft.placeholder ? ft.placeholder : ` 请选择${ft.label}`
|
"
|
>
|
</el-date-picker>
|
</template>
|
<!--time组件-->
|
<template v-if="ft.type == 'time'">
|
<el-time-picker
|
class="w100"
|
clearable
|
v-model="ruleForm[ft.prop]"
|
:disabled="ft.disabled || false"
|
arrow-control
|
:default-value="new Date()"
|
:value-format="ft.format"
|
:placeholder="`请选择${ft.label}`"
|
>
|
</el-time-picker>
|
</template>
|
<!--单选组件-->
|
<template v-if="ft.type == 'radio'">
|
<el-radio-group v-model="ruleForm[ft.prop]" :disabled="ft.disabled">
|
<el-radio
|
:label="r[props.value]"
|
v-for="r in ft.dictData"
|
:key="r[props.key]"
|
>{{ r[props.label] }}
|
</el-radio>
|
</el-radio-group>
|
</template>
|
<!--数字组件-->
|
<template v-if="ft.type == 'number'">
|
<el-input-number
|
class="w100"
|
v-model.number="ruleForm[ft.prop]"
|
controls-position="right"
|
clearable
|
:disabled="ft.disabled || false"
|
></el-input-number>
|
</template>
|
<!--开关组件-->
|
<template v-if="ft.type == 'switch'">
|
<el-switch
|
v-model="ruleForm[ft.prop]"
|
:disabled="ft.disabled || false"
|
:active-text="ft.activeText || ''"
|
:inactive-text="ft.inactiveText || ''"
|
>
|
</el-switch>
|
</template>
|
<!--文本组件-->
|
<template v-if="ft.type == 'input'">
|
<el-input
|
class="w100"
|
:type="ft.inputType || 'text'"
|
v-model="ruleForm[ft.prop]"
|
:disabled="ft.disabled || false"
|
:maxlength="ft.maxlength"
|
clearable
|
:show-password="ft.inputType === 'password' ? true : false"
|
:autosize="{ minRows: 3, maxRows: 6 }"
|
:placeholder="
|
ft.placeholder ? ft.placeholder : ` 请输入${ft.label}`
|
"
|
></el-input>
|
</template>
|
<!--选择器-->
|
<template v-if="ft.type == 'select'">
|
<el-select
|
class="w100"
|
v-model="ruleForm[ft.prop]"
|
:disabled="ft.disabled || false"
|
clearable
|
:placeholder="
|
ft.placeholder ? ft.placeholder : ` 请选择${ft.label}`
|
"
|
>
|
<el-option
|
v-for="item in ft.dictData"
|
:key="item.key"
|
:label="item.label"
|
:value="item.value"
|
>
|
</el-option>
|
</el-select>
|
</template>
|
<!--参照-->
|
<template v-if="ft.type == 'refer'">
|
<vciWebRefer
|
:key="ft.prop"
|
referType="master"
|
:data-key="ft.prop"
|
:disabled="ft.disabled || false"
|
:display="ft.display || true"
|
:referConfig="ft.referConfigTemp || {}"
|
:reloadFormKey="(ft.referConfig.useFormKey && ft.referConfig.formValues && ft.referConfig.formValues[ft.referConfig.useFormKey]) || ''"
|
:text="ruleForm[ft.referConfig.showProp]"
|
:value="ruleForm[ft.prop]"
|
@setReferValue="setReferValue"
|
:ref="'referFormRef'+ft.prop"
|
></vciWebRefer>
|
</template>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
</template>
|
<script>
|
import vciWebRefer from "@/components/refer/vciWebRefer.vue";
|
import { handlerObj } from "@/util/platformUtils";
|
import { verifySlash, verifyNull } from "@/util/validate";
|
export default {
|
name: "DynamicsFrom",
|
components: { vciWebRefer },
|
props: {
|
// 表单数组
|
formData: {
|
type: Array,
|
default: () => [],
|
},
|
// row：栅格间隔
|
row: {
|
type: Number,
|
default: 35,
|
},
|
// 表单配置
|
labelWidth: {
|
type: String,
|
default: "120px",
|
},
|
formProp: {
|
type: Object,
|
default: () => {},
|
},
|
},
|
data() {
|
return {
|
ruleForm: {},
|
formTemplateData: [],
|
rules: {},
|
props: {
|
key: "value",
|
label: "label",
|
value: "value",
|
},
|
};
|
},
|
watch: {
|
//formProp一定要写在formData上面,否则影响referConfig里formValues的构建
|
formProp: {
|
handler(val) {
|
this.ruleForm = val;
|
},
|
immediate: true,
|
},
|
formData: {
|
handler(val) {
|
this.rules = val;
|
this.getDictList(val);
|
},
|
immediate: true,
|
},
|
ruleForm: {
|
handler(val) {
|
for (let code of val) {
|
if (
|
code.type == "refer" &&
|
code.referConfig &&
|
code.referConfig.useFormKey
|
) {
|
code.referConfig.formValues = val;
|
|
// code.referConfigTemp.options = code.referConfig;
|
}
|
}
|
this.$emit("input", val);
|
},
|
deep: true,
|
immediate: true,
|
},
|
},
|
methods: {
|
//数据字典
|
async getDictList(val) {
|
for (let code of val) {
|
if (!verifyNull(code.dictData) && code.type == "select") {
|
if (
|
verifySlash(code.dictCode) &&
|
Object.prototype.hasOwnProperty.call(code, "dictCode")
|
) {
|
const res = await getlistByCode(code.dictCode);
|
if (res.success) {
|
const dic = res.data;
|
code.dictData = dic.map((d) => {
|
return {
|
label: d.name,
|
key: d.code,
|
value: d.id,
|
};
|
});
|
}
|
} else {
|
this.getDicts(code.dictCode)
|
.then((res) => {
|
if (res.success) {
|
const dic = res.obj.datas;
|
code.dictData = dic.map((d) => {
|
return {
|
label: d.name,
|
key: d.code,
|
value: d.code,
|
};
|
});
|
}
|
})
|
.catch(() => {
|
this.$message.error(` 数据字典${code.dictCode}错误`);
|
});
|
}
|
}
|
if (code.type == "refer") {
|
if (code.referConfig && code.referConfig.useFormKey) {
|
if (verifyNull(code.referConfig.formValuesKey)) {
|
code.referConfig.formValuesKey = "ruleForm";
|
}
|
code.referConfig.formValues = this[code.referConfig.formValuesKey];
|
}
|
code.referConfigTemp = {
|
title: code.label,
|
showProp:
|
code.showProp || code.referConfig.showProp || code.prop + "Name",
|
prop: code.prop,
|
propMap: code.propMap || {},
|
placeholder: code.placeholder
|
? code.placeholder
|
: ` 请选择` + code.label,
|
options: code.referConfig,
|
};
|
}
|
}
|
this.formTemplateData = val;
|
},
|
// 打开参照
|
openReferDialog(refer, lable) {
|
const e = { refer: refer, lable: lable };
|
this.$refs.referDialogRef.openDialog(e);
|
},
|
// 验证
|
validate(callback) {
|
this.$refs.dynamincsFormRef.validate((valid) => {
|
callback(valid, this.ruleForm);
|
});
|
},
|
clearValidate() {
|
this.$refs.dynamincsFormRef.clearValidate();
|
},
|
// 清除校验
|
reset() {
|
this.$refs.dynamincsFormRef.resetFields();
|
},
|
// 清除校验
|
resetFields() {
|
this.$refs.dynamincsFormRef.resetFields();
|
},
|
setReferValue(data) {
|
if (data.prop) {
|
this.ruleForm[data.prop] = data.value || "";
|
this.ruleForm[data.showProp] = data.text || "";
|
if (data.propMap) {
|
//说明需要映射
|
for (let key in data.propMap) {
|
let mapFields = data.propMap[key].split(",");
|
let value = [];
|
data.rawData.forEach((_item) => {
|
var temp;
|
if (!_item.extendData) {
|
_item.extendData = {};
|
}
|
if (mapFields.length == 1) {
|
var mapField = mapFields[0];
|
temp = _item[mapField] || _item["extendData"][mapField];
|
} else {
|
//有多个
|
var mutiTemp = [];
|
mapFields.forEach((_itemField) => {
|
mutiTemp.push(
|
_item[_itemField] || _item["extendData"][_itemField]
|
);
|
});
|
temp = mutiTemp.join(" ");
|
}
|
if (temp != null && temp != "") {
|
value.push(temp);
|
}
|
});
|
this.ruleForm[key] = value.join(",");
|
}
|
}
|
}
|
},
|
},
|
};
|
</script>
|
