238 lines
10 KiB
Vue
238 lines
10 KiB
Vue
<template>
|
||
<el-col :sm="24" :md="pzoption.mdwidth">
|
||
<i class="iconfont icon-shezhi pull-right widgetset hidden-print" @click.stop="dialogInputVisible = true"></i>
|
||
<i class="iconfont icon-shanchu pull-right widgetdel hidden-print" @click.stop="delWid(pzoption.wigdetcode)"></i>
|
||
<el-form-item :label="pzoption.title" :prop="'wigetitems.' + index + '.value'" :rules="childpro.rules">
|
||
<el-input v-model="pzoption.value" style="display:none">
|
||
</el-input>
|
||
<el-cascader v-model="childpro.svalue"
|
||
:options="childpro.options"
|
||
|
||
:props="childpro.props" v-if="!childpro.props.multiple"
|
||
@change="handleChange" filterable collapse-tags ref="refcascader" size="small"></el-cascader>
|
||
<el-cascader v-model="childpro.mvalue"
|
||
:options="childpro.options"
|
||
|
||
:props="childpro.props" v-if="childpro.props.multiple"
|
||
@change="handleChange" size="small" filterable collapse-tags></el-cascader>
|
||
</el-form-item>
|
||
<el-dialog title="组件属性" :visible.sync="dialogInputVisible" width="30%">
|
||
<el-form :model="childpro">
|
||
|
||
<el-form-item label="是否多选">
|
||
<el-switch v-model="childpro.props.multiple" size="mini" style="width:100%">
|
||
</el-switch>
|
||
</el-form-item>
|
||
<el-form-item label="value对应字段">
|
||
<el-input v-model="childpro.props.value" autocomplete="off"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="label对应字段">
|
||
<el-input v-model="childpro.props.label" autocomplete="off"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="父节点对应字段">
|
||
<el-input v-model="childpro.props.pvalue" autocomplete="off"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="默认值">
|
||
<el-input v-model="childpro.defval" autocomplete="off"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="选项更改时执行代码">
|
||
<el-input v-model="childpro.jscode" :autosize="{ minRows: 6, maxRows: 9}" autocomplete="off" type="textarea"></el-input>
|
||
</el-form-item>
|
||
</el-form>
|
||
</el-dialog>
|
||
</el-col>
|
||
|
||
</template>
|
||
<style>
|
||
.el-cascader {
|
||
width: 100%;
|
||
}
|
||
</style>
|
||
<script>
|
||
module.exports = {
|
||
props: ['pzoption', 'index'],
|
||
data: function () {
|
||
return {
|
||
dialogInputVisible: false,
|
||
childpro: {
|
||
wigname: "级联选择器",
|
||
defval: "",
|
||
jscode: "",
|
||
multiple: false,
|
||
mvalue: [],
|
||
svalue: "",
|
||
props: {
|
||
multiple: false,
|
||
emitPath: false,
|
||
expandTrigger: "hover",
|
||
value: "value",
|
||
label: "label",
|
||
pvalue: "pval"
|
||
},
|
||
options: []
|
||
}
|
||
}
|
||
},
|
||
|
||
methods: {
|
||
handleChange(value) {
|
||
|
||
},
|
||
delWid: function (wigdetcode) {
|
||
// 子组件中触发父组件方法ee并传值cc12345
|
||
this.$root.nowwidget = {};
|
||
_.remove(this.$root.FormData.wigetitems, function (obj) {
|
||
return obj.wigdetcode == wigdetcode;
|
||
});
|
||
},
|
||
getvatext: function (val) {
|
||
var chi = this;
|
||
var vatext = "";
|
||
var wig = _.find(chi.pzoption.dataset, function (item) {
|
||
return item[chi.childpro.props.value] == val;
|
||
});
|
||
if (typeof (wig) != "undefined") {
|
||
var wigp = _.find(chi.pzoption.dataset, function (item) {
|
||
return item[chi.childpro.props.value] == wig[chi.childpro.props.pvalue];
|
||
});
|
||
if (_.isUndefined(wigp)) {
|
||
vatext = wig[chi.childpro.props.label]
|
||
} else {
|
||
vatext = wigp[chi.childpro.props.label] + "/" + wig[chi.childpro.props.label];
|
||
var pwigp = _.find(chi.pzoption.dataset, function (item) {
|
||
return item[chi.childpro.props.value] == wigp[chi.childpro.props.pvalue];
|
||
});
|
||
if (!_.isUndefined(pwigp)) {
|
||
vatext = pwigp[chi.childpro.props.label] + "/" + vatext;
|
||
}
|
||
}
|
||
}
|
||
return vatext;
|
||
},
|
||
jsonToTree: function (jsonData, id, pid, children) {
|
||
for (var i = 0; i < jsonData.length; i++) {
|
||
jsonData[i][id] = jsonData[i][id] + "";
|
||
jsonData[i][pid] = jsonData[i][pid] + "";
|
||
|
||
}//数组里不能为数字
|
||
let result = [],
|
||
temp = {};
|
||
for (let i = 0; i < jsonData.length; i++) {
|
||
temp[jsonData[i][id]] = jsonData[i]; // 以id作为索引存储元素，可以无需遍历直接定位元素
|
||
}
|
||
for (let j = 0; j < jsonData.length; j++) {
|
||
let currentElement = jsonData[j];
|
||
let tempCurrentElementParent = temp[currentElement[pid]]; // 临时变量里面的当前元素的父元素
|
||
if (tempCurrentElementParent) {
|
||
// 如果存在父元素
|
||
if (!tempCurrentElementParent[children]) {
|
||
// 如果父元素没有chindren键
|
||
tempCurrentElementParent[children] = []; // 设上父元素的children键
|
||
}
|
||
tempCurrentElementParent[children].push(currentElement); // 给父元素加上当前元素作为子元素
|
||
} else {
|
||
// 不存在父元素，意味着当前元素是一级元素
|
||
result.push(currentElement);
|
||
}
|
||
}
|
||
return result;
|
||
}
|
||
},
|
||
mounted: function () {
|
||
var pro = this;
|
||
pro.$nextTick(function () {
|
||
if (pro.$root.addchildwig) {
|
||
pro.$root.addchildwig();//不能缺少,dom加载完成
|
||
}
|
||
if (pro.pzoption.childpro.wigname) {
|
||
pro.childpro = pro.pzoption.childpro;
|
||
pro.$root.UpdateYBData(pro.pzoption, function (ybdata) {
|
||
if (app.isview) {//添加页面
|
||
pro.pzoption.value = app.jxparam(pro.childpro.defval);
|
||
}
|
||
});
|
||
} else {
|
||
if (pro.pzoption.datatype == '2') {
|
||
pro.pzoption.staticdata = JSON.stringify([
|
||
{ 'label': '一月', 'value': "1", 'pval': "0" },
|
||
{ 'label': '二月', 'value': "2", 'pval': "1" },
|
||
{ 'label': '三月', 'value': "3", 'pval': "1" },
|
||
{ 'label': '四月', 'value': "4", 'pval': "3" }
|
||
]);
|
||
pro.$root.jxfiled(pro.pzoption);
|
||
pro.$root.addwd("label", pro.pzoption);
|
||
pro.$root.addwd("value", pro.pzoption);
|
||
pro.pzoption.dataset = JSON.parse(pro.pzoption.staticdata);
|
||
|
||
}
|
||
pro.pzoption.childpro = pro.childpro;
|
||
}
|
||
|
||
|
||
|
||
})
|
||
|
||
},
|
||
watch: {
|
||
'pzoption.value': { //深度监听，可监听到对象、数组的变化
|
||
handler(newV, oldV) {
|
||
if (newV) {
|
||
var pro = this;
|
||
if (pro.pzoption.childpro.props.multiple) {
|
||
pro.pzoption.childpro.mvalue = newV.split(',');
|
||
pro.childpro.mvalue = newV.split(',');
|
||
} else {
|
||
pro.pzoption.childpro.svalue = newV;//为了变成字符
|
||
pro.childpro.svalue = newV;//为了变成字符
|
||
}
|
||
}
|
||
},
|
||
deep: true
|
||
},
|
||
'childpro.svalue': { //深度监听，可监听到对象、数组的变化
|
||
handler(newV, oldV) {
|
||
var pro = this;
|
||
if (newV && !pro.pzoption.childpro.multiple) {
|
||
pro.pzoption.value = newV;
|
||
pro.pzoption.valuetext = pro.getvatext(pro.pzoption.value)
|
||
} else {
|
||
pro.pzoption.value = "";
|
||
pro.pzoption.valuetext = "";
|
||
}
|
||
var data = pro.pzoption.value;
|
||
let jscode = pro.childpro.jscode;
|
||
let func = new Function('data', jscode);
|
||
func(data)
|
||
|
||
},
|
||
deep: true
|
||
},
|
||
'childpro.mvalue': { //深度监听，可监听到对象、数组的变化
|
||
handler(newV, oldV) {
|
||
var chi = this;
|
||
if (newV && chi.pzoption.childpro.multiple&&newV.length != 0 && JSON.stringify(newV) != JSON.stringify(oldV)) {
|
||
chi.pzoption.value = newV.join();
|
||
//多选valuetext没空搞
|
||
}
|
||
},
|
||
deep: true,
|
||
immediate: true//加载初始值
|
||
},
|
||
'pzoption.dataset': { //深度监听，可监听到对象、数组的变化
|
||
handler(newV, oldV) {
|
||
var pro = this;
|
||
if (newV && newV.length != 0 && JSON.stringify(newV) != JSON.stringify(oldV)) {
|
||
var opidata = pro.jsonToTree(newV, pro.pzoption.childpro.props.value, pro.pzoption.childpro.props.pvalue, "children");
|
||
pro.childpro.options = opidata;
|
||
}
|
||
if (newV.length == 0) {
|
||
pro.childpro.options = [];
|
||
}
|
||
|
||
},
|
||
deep: true
|
||
},
|
||
|
||
}
|
||
};
|
||
</script> |