<template>
|
<!--动态模板-->
|
<avue-form ref="formRef" :option="option" v-model="form">
|
<template v-for="item in allColumn" :slot="item.prop+ ''">
|
<vciWebRefer
|
v-if="item.propType === 'refer' || item.type === 'refer'"
|
:key="item.prop"
|
referType="master"
|
:data-key="item.prop"
|
:disabled="item.disabled || false"
|
:display="item.display || true"
|
:referConfig="item.referConfigTemp || {}"
|
:reloadFormKey="(item.referConfig.useFormKey && item.referConfig.formValues && item.referConfig.formValues[item.referConfig.useFormKey]) || ''"
|
:text="form[item.referConfig.showProp]"
|
:value="form[item.prop]"
|
@setReferValue="setReferValue"
|
></vciWebRefer>
|
<!-- 富文本控件 -->
|
<rich-text v-if="item.type === 'richText'" :value="form[subitemName]" @input="form[subitemName] = $event"></rich-text>
|
<!-- 表单上传文件组件 -->
|
<form-upload v-if="item.type === 'upload'"></form-upload>
|
</template>
|
</avue-form>
|
</template>
|
<script>
|
// 表单模板
|
import vciWebRefer from "@/components/refer/vciWebRefer.vue";
|
import { formatMilliseconds } from "@/util/formatTime";
|
import { validatenull } from "@/util/validate";
|
import { getDicts } from "@/api/system/dict";
|
|
export default {
|
name: "basicForm",
|
components: { vciWebRefer },
|
props: {
|
formItems:{
|
type: Array,
|
default: () => [],
|
},
|
formData:{
|
type: Object,
|
default: () => {},
|
},
|
labelWidth:{
|
type:Number,
|
default:120
|
},
|
span:{
|
type:Number,
|
default:12
|
},
|
detail:{
|
type:Boolean,
|
default:false
|
},
|
disabled:{
|
type:Boolean,
|
default:false
|
},
|
},
|
data() {
|
return {
|
form: this.formData,
|
option: {
|
menuBtn:false,
|
submitBtn: false,
|
emptyBtn: false,
|
detail: this.$props.detail,
|
labelWidth: this.$props.labelWidth,
|
column: [],
|
group: [],
|
},
|
allColumn:[],
|
columnType: {
|
text: "input",
|
combox: "select",
|
truefalse: "switch",
|
number: "number",
|
textarea: "textarea",
|
datetime: "datetime",
|
date: "date",
|
refer: "refer",
|
multiFile:"upload",
|
richText:'richText'
|
},
|
subitemName:""
|
};
|
},
|
watch: {
|
formItems: {
|
handler(val) {
|
if(val[0] &&val[0].column && val[0].column.isArray()){
|
this.getInitGroup(val);
|
}else{
|
this.getInit(val);
|
}
|
},
|
immediate: true,
|
},
|
formData: {
|
handler(val) {
|
this.form=this.$props.formData;
|
},
|
immediate: true,
|
},
|
form: {
|
handler(val) {
|
for (let code of this.option.column) {
|
if (
|
(code.propType == "refer" || code.type == 'refer' )&&
|
code.referConfig &&
|
code.referConfig.useFormKey
|
) {
|
code.referConfig.formValues = val;
|
code.referConfigTemp.options = code.referConfig;
|
}
|
}
|
for (let code of this.option.group) {
|
for (let col of code.column) {
|
if (
|
(col.propType == "refer" || col.type == 'refer')&&
|
col.referConfig &&
|
col.referConfig.useFormKey
|
) {
|
col.referConfig.formValues = val;
|
col.referConfigTemp.options = col.referConfig;
|
}
|
}
|
}
|
this.$emit("input", val);
|
},
|
deep: true,
|
immediate: true
|
},
|
},
|
methods: {
|
getInit(val) {
|
const column=[];
|
for (let code of val) {
|
code = this.initItem(code);
|
column.push(code);
|
this.allColumn.push(code);
|
console.log('allColumn',this.allColumn)
|
}
|
this.option.column = column;
|
},
|
getInitGroup(val) {
|
const group=[];
|
for (let code of val) {
|
const column=[];
|
for (let col of code.column) {
|
col = this.initItem(col)
|
column.push(col);
|
this.allColumn.push(col);
|
}
|
group.push(column)
|
}
|
this.option.group = group;
|
},
|
initItem(item){
|
const type=this.columnType[item.type] || item.type
|
const col= {
|
...item,
|
label: item.text,
|
prop: item.field,
|
showProp:item.showField,
|
type: type,
|
labelWidth: this.labelWidth || (item.text.length >= 6 ? 115 : 90),
|
disabled: item.readOnly || this.disabled,
|
span: item.span
|
? item.span
|
: item.type === "textarea"
|
? 24
|
: this.span,
|
value: item.defaultValue,
|
dicData: type === 'select' ? item.dicData : item.dicUrl,
|
display: !item.hidden,
|
labelSuffix: item.suffix,
|
suffixIcon: item.prefix,
|
tip: item.tooltips,
|
dictCode: item.comboxKey,
|
rules: [{
|
required: item.required,
|
message: `请输入${item.text}!`,
|
trigger: "blur"
|
}]
|
}
|
if(col.type === 'richText'){
|
this.subitemName = col.field;
|
}else if(col.type === 'upload'){
|
console.log('col',col)
|
}
|
if (col.type === "select") {
|
// console.log('col',col)
|
if(!validatenull(col.dictCode)) {
|
getDicts(col.dictCode).then((res) => {
|
if (res.data.success){
|
if(res.data.data && res.data.obj == null){
|
res.data.obj = res.data.data
|
}
|
const dic = res.data.obj;
|
col.dicData = dic.map((d) => {
|
return {
|
label: d.value,
|
key: d.key,
|
value: d.key,
|
attributes:d.attributes
|
};
|
});
|
}
|
});
|
}
|
}
|
if (col.propType === "refer"|| col.type==='refer') {
|
if (col.referConfig && col.referConfig.useFormKey) {
|
if (validatenull(col.referConfig.formValuesKey)) {
|
col.referConfig.formValuesKey = "form";
|
}
|
col.referConfig.formValues = this[col.referConfig.formValuesKey];
|
}
|
col.referConfigTemp = {
|
title: col.label,
|
showProp: col.showProp || col.referConfig.showProp || col.prop + "Name",
|
prop: col.prop,
|
propMap: col.propMap || {},
|
placeholder: col.placeholder
|
? col.placeholder
|
: ` 请选择` + col.label,
|
options: col.referConfig,
|
};
|
}
|
return col;
|
},
|
setReferValue(data) {
|
if (data.prop) {
|
this.form[data.prop] = data.value || "";
|
this.form[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.form[key] = value.join(",");
|
}
|
}
|
}
|
}
|
},
|
};
|
</script>
|
