<template>
|
<!--动态模板-->
|
<avue-form ref="basicform" :option="option" v-model="form" v-loading="loading">
|
<template v-for="item in allColumn" :slot="item.prop+ ''">
|
<vciWebRefer
|
v-if="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-else-if="item.type === 'richText'"
|
:key="item.prop"
|
:data-key="item.prop"
|
:disabled="item.disabled || false"
|
:display="item.display || true"
|
:value="form[subitemName]" @input="form[subitemName] = $event"></rich-text>
|
<!-- 表单上传文件组件 -->
|
<form-upload v-else-if="item.type === 'upload'"
|
:key="item.prop"
|
:data-key="item.prop"
|
:disabled="item.disabled || false"
|
:display="item.display || true"></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
|
},
|
isEdit:{
|
//表单是否可编辑
|
type:Boolean,
|
default:true
|
},
|
initValue:{
|
type: Object,
|
default: () => {},
|
},
|
uploadattachment:{
|
//是否显示上传附件
|
type:Boolean,
|
default:false
|
},
|
},
|
data() {
|
return {
|
loading:false,
|
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",
|
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);
|
}
|
if (this.initValue) {
|
Object.assign(this.form, this.initValue);
|
}
|
},
|
deep:true,
|
immediate: true,
|
},
|
formData: {
|
handler(val) {
|
this.form=this.$props.formData;
|
},
|
immediate: true,
|
},
|
form: {
|
handler(val) {
|
for (let code of this.option.column) {
|
if (
|
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.type == 'refer'&&
|
col.referConfig &&
|
col.referConfig.useFormKey
|
) {
|
col.referConfig.formValues = val;
|
col.referConfigTemp.options = col.referConfig;
|
}
|
}
|
}
|
this.$emit("getFormData", 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);
|
}
|
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;
|
item.text=item.text || item.label;
|
let col= {
|
...item,
|
label: item.text,
|
prop: item.prop || item.field,
|
showProp: item.showProp || item.showField,
|
type: type,
|
labelWidth: item.labelWidth || this.labelWidth || (item.text.length >= 6 ? 115 : 90),
|
disabled: item.disabled || this.disabled,
|
readonly: item.readonly || item.readOnly,
|
span: item.span
|
? item.span
|
: item.type === "textarea"
|
? 24
|
: this.span,
|
value: item.value || item.defaultValue,
|
display: item.display || !item.hidden,
|
suffixIcon: item.suffixIcon || item.prefix,
|
labelSuffix: item.labelSuffix || item.suffix,
|
tip: item.tip || item.tooltips,
|
dictCode: item.dictCode || item.comboxKey,
|
valueFormat: item.valueFormat || item.dateFormate,
|
format: item.format || item.dateFormate,
|
};
|
if(!item.rules || item.rules.length==0){
|
col.rules=this.isEdit ? (type == "select" || type == "refer" || type == "date" || type == "datetime" ? [{
|
required: item.required || false,
|
message: `请选择${item.text}!`,
|
trigger: "change"
|
}, {
|
required: item.required || false,
|
message: `请选择${item.text}!`,
|
trigger: "submit"
|
}] : [{
|
required: item.required || false,
|
message: `请输入${item.text}!`,
|
trigger: "blur"
|
}, {
|
required: item.required || false,
|
message: `请输入${item.text}!`,
|
trigger: "submit"
|
}]) : []
|
}
|
if(!this.isEdit){
|
col.placeholder=col.label;
|
col.disabled=true;
|
}
|
if(col.type === 'richText'){
|
this.subitemName = col.field;
|
}else if(col.type === 'upload'){
|
console.log('col',col)
|
}else if(col.type=="multiFile"){
|
if(this.uploadattachment == "false" || this.uploadattachment == false){
|
col.display=false
|
}
|
}
|
if (col.type === "select" || col.type==='radio' || col.type==='checkbox') {
|
if (col.data && col.data.length > 0) {
|
col.dicData = col.data.map((d) => {
|
return {
|
label: d.key,
|
key: d.value,
|
value: d.value,
|
attributes: d.attributes
|
};
|
});
|
} else 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.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(",");
|
}
|
}
|
}
|
},
|
// 表单校验
|
validate(done) {
|
return new Promise((resolve) => {
|
this.$refs.basicform.validate((valid,fields) => {
|
done(valid,fields);
|
if (valid) {
|
resolve(true);
|
this.ValidataValue = true;
|
} else {
|
resolve(false);
|
return false;
|
}
|
});
|
});
|
},
|
resetFields(){
|
this.$refs.basicform.resetFields()
|
},
|
clearValidate(props){
|
this.$refs.basicform.clearValidate(props)
|
},
|
updateDic(prop,data){
|
this.$refs.basicform.updateDic(prop,data)
|
},
|
dicInit(){
|
this.$refs.basicform.dicInit()
|
},
|
getPropRef(){
|
this.$refs.basicform.getPropRef()
|
}
|
},
|
};
|
</script>
|
