<template>
|
<div :id="'UI-dynamic-'+areasName+componentVO.oid" class="UI-dynamic">
|
<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 :componentVO="componentVO" :butttonList="componentVO.buttons" :dataStore="[form]" :sourceData="sourceData" type="form" @buttonClick="buttonClick"></dynamic-button>
|
</template>
|
|
<template v-for="item in slotData" :slot="item.prop + ''">
|
<vciWebRefer v-if="item.type == 'refer'"
|
:key="item.prop"
|
:ref="'referFormRef'+item.prop"
|
: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"
|
referType="master"
|
@setReferValue="setReferValue">
|
|
</vciWebRefer>
|
<quill-editor ref="customQuillEditor" v-model="content" :options="editorOption" class="editor">
|
</quill-editor>
|
</template>
|
</avue-form>
|
</div>
|
</template>
|
|
<script>
|
import vciWebRefer from '@/components/refer/vciWebRefer'
|
import VciWebRefer from "@/components/refer/vciWebRefer";
|
import {verifyNull, verifySlash} from "@/util/validate";
|
|
const toolbarOptions = [
|
['bold', 'italic', 'underline', 'strike'], // toggled buttons
|
['blockquote', 'code-block'],
|
|
[{'header': 1}, {'header': 2}], // custom button values
|
[{'list': 'ordered'}, {'list': 'bullet'}],
|
[{'script': 'sub'}, {'script': 'super'}], // superscript/subscript
|
[{'indent': '-1'}, {'indent': '+1'}], // outdent/indent
|
[{'direction': 'rtl'}], // text direction
|
|
[{'size': ['small', false, 'large', 'huge']}], // custom dropdown
|
[{'header': [1, 2, 3, 4, 5, 6, false]}],
|
|
[{'color': []}, {'background': []}], // dropdown with defaults from theme
|
[{'font': []}],
|
[{'align': []}],
|
['link', 'image', 'video'],
|
['clean'] // remove formatting button
|
];
|
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: {},
|
content: '',
|
editorOption: {
|
placeholder: '你想说什么？',
|
modules: {
|
imageResize: {
|
displayStyles: {
|
backgroundColor: 'black',
|
border: 'none',
|
color: 'white'
|
},
|
modules: ['Resize', 'DisplaySize', 'Toolbar']
|
},
|
toolbar: {
|
container: toolbarOptions, // 工具栏
|
handlers: {
|
'image': function (value) {
|
if (value) {
|
document.querySelector('#quillEditorQiniu .avatar-uploader input').click()
|
} else {
|
this.quill.format('image', false);
|
}
|
},
|
'video': function (value) {
|
if (value) {
|
document.querySelector('#quillEditorQiniu .avatar-uploader input').click()
|
} else {
|
this.quill.format('video', false);
|
}
|
},
|
}
|
}
|
}
|
}
|
}
|
},
|
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,
|
},
|
form: {
|
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 = "form";
|
}
|
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 && 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>
|
|
<style scoped>
|
|
</style>
|
