<template>
|
<div class="UI-dynamic" :id="'UI-dynamic-'+areasName+componentVO.oid">
|
<avue-form v-model="form" :option="option">
|
<template v-for="item in slotData" :slot="item.prop + 'Label'">
|
<span>
|
<span>{{ item.label }} </span>
|
<el-tooltip
|
v-if="item.keyAttr"
|
class="item"
|
content="该属性为关键属性"
|
effect="dark"
|
placement="top-start"
|
>
|
<i class="el-icon-star-on" style="font-size: 17px !important; color: red;vertical-align: baseline;"></i>
|
</el-tooltip>
|
</span>
|
</template>
|
<template slot="menuForm">
|
<dynamic-button type="form" :butttonList="componentVO.buttons" @buttonClick="buttonClick"></dynamic-button>
|
</template>
|
|
<template v-for="item in slotData" :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.referConfig || {}"
|
:reloadFormKey="(item.referConfig.useFormKey && item.referConfig.formValues && item.referConfig.formValues[item.referConfig.useFormKey]) || ''"
|
:text="item.referConfig.showProp"
|
:value="item.prop || item.value"
|
@setReferValue="setReferValue"
|
:ref="'referFormRef'+item.prop">
|
|
</vciWebRefer>
|
</template>
|
</avue-form>
|
</div>
|
</template>
|
|
<script>
|
import vciWebRefer from '@/components/refer/vciWebRefer'
|
import VciWebRefer from "@/components/refer/vciWebRefer";
|
import {verifyNull, verifySlash} from "@/util/validate";
|
export default {
|
name: "dynamic-form",
|
components: {VciWebRefer},
|
props: {
|
componentVO: {
|
type: Object,
|
default: {}
|
},
|
inDialog: {
|
type: Boolean,
|
default: false
|
},
|
areasName: {
|
type: String,
|
default: ''
|
},
|
sourceData:{
|
//菜单源数据或者弹窗时按钮所属区域的上一区域选中数据
|
type:Object,
|
default: {}
|
},
|
dataStore:{
|
//弹窗时按钮所属区域选中数据
|
type:Array,
|
default: []
|
},
|
paramVOS: {
|
type: Object,
|
default: {}
|
},
|
isShow: {
|
//所在区域是否已显示，针对tab和collapse
|
type: Boolean,
|
default: true
|
},
|
},
|
data() {
|
return {
|
form: {},
|
ruleForm:{}
|
}
|
},
|
mounted() {
|
},
|
computed: {
|
option() {
|
return {
|
submitBtn: false,
|
emptyBtn: false,
|
height: 300,
|
column: this.getColumnData()
|
}
|
},
|
slotData() {
|
return this.getColumnData()
|
}
|
},
|
watch:{
|
slotData:{
|
handler(newV){
|
this.getDictList(newV)
|
},
|
immediate: true,
|
},
|
ruleForm: {
|
handler(val) {
|
if (val) {
|
if (Array.isArray(val)) { // 检查 val 是否为数组
|
for (let code of val) {
|
if (
|
code.type == "refer" &&
|
code.referConfig &&
|
code.referConfig.useFormKey
|
) {
|
code.referConfig.formValues = val;
|
// code.referConfigTemp.options = code.referConfig;
|
}
|
}
|
} else if (typeof val === 'object') { // 检查 val 是否为对象
|
// 迭代对象的逻辑
|
}
|
this.$emit("input", val);
|
}
|
},
|
deep: true,
|
immediate: true,
|
},
|
sourceData:{
|
handler(newval) {
|
//源数据有变化时变更当前区域数据
|
console.log(this.areasName);
|
console.log(newval);
|
}
|
}
|
},
|
methods: {
|
//转化数据
|
formColumn(formList) {
|
return formList.map(item => {
|
const typeValue = item.type === 'text' ? 'input' : item.type === 'combox' ? 'select' : item.type;
|
|
const focusFunc = item.type === 'refer' ? (i) => {
|
|
} : undefined;
|
|
|
return {
|
label: item.text,
|
prop: item.field,
|
type: typeValue,
|
labelWidth:item.text.length >= 6 ? 115 : 90,
|
value: item.defaultValue,
|
dicData: item.type === 'combox' ? item.dicData : item.dicUrl,
|
readonly: item.readOnly,
|
disabled: item.disabled,
|
display: !item.hidden,
|
labelSuffix: item.suffix,
|
suffixIcon: item.prefix,
|
placeholder: item.placeholder,
|
clearable: item.clearable,
|
tip: item.tooltips,
|
keyAttr: item.keyAttr,
|
focus:focusFunc,
|
referConfig:item.referConfig,
|
rules: [{
|
required: item.required,
|
message: `请输入${item.text}!`,
|
trigger: "blur"
|
}]
|
};
|
});
|
},
|
|
//数据判空
|
getColumnData() {
|
if (this.componentVO && this.componentVO.formDefineVO && this.componentVO.formDefineVO.items && this.componentVO.formDefineVO.items.length > 0) {
|
return this.formColumn(this.componentVO.formDefineVO.items)
|
} else {
|
return null;
|
}
|
},
|
|
buttonClick(item) {
|
console.log(item.id)
|
},
|
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;
|
},
|
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>
|
|
<style scoped>
|
|
</style>
|
