Commit 12d8246d authored by 黄奎's avatar 黄奎

插件修改

parent 5343e18b
<template> <template>
<q-card style="width: 360px;"> <q-card style="width: 360px;">
<q-select ref="select" v-model="chooseArray" size="small" :clearable="true" :multiple="multiple" :label="tipText" <q-input ref="selectTree" standout="bg-primary text-white" v-model="showMsg" :label="tipText"
@click.native="isShowSelect = !isShowSelect" option-value="value" option-label="label" :options="options" @click.native="isShowSelect = !isShowSelect" />
:dense="false">
</q-select>
<q-tree v-if="isShowSelect" <q-tree v-if="isShowSelect"
style="width:100%;height:250px;overflow-y: scroll;position:absolute;z-index:99999;background:#fff;border:1px solid rgba(0, 0, 0, 0.12);" style="width:100%;height:250px;overflow-y: scroll;position:absolute;z-index:99999;background:#fff;border:1px solid rgba(0, 0, 0, 0.12);"
:nodes="treeData" :node-key="nodeKey" :label-key="labelKey" :children-key="childrenKey" tick-strategy="strict" :nodes="treeData" :node-key="nodeKey" :label-key="labelKey" :children-key="childrenKey" tick-strategy="strict"
...@@ -56,74 +54,103 @@ ...@@ -56,74 +54,103 @@
return { return {
//是否显示树状选择器 //是否显示树状选择器
isShowSelect: false, isShowSelect: false,
options: [], selectList: [],
showValueTmp: '',
defaultProps: { defaultProps: {
children: 'children', children: 'children',
label: 'label' label: 'label'
}, },
chooseArray: [] showMsg: "",
chooseArray: [],
resultObj: {},
} }
}, },
watch: { watch: {
isShowSelect(val) { isShowSelect(val) {
// 隐藏select自带的下拉框 //隐藏select自带的下拉框
this.$refs.select.blur(); this.$refs.selectTree.blur();
if (val) { if (val) {
// 下拉面板展开-选中节点-展开节点 // 下拉面板展开-选中节点-展开节点
this.setTreeCheckNode(this.chooseArray); this.setTreeCheckNode();
} }
}, },
chooseArray(val) { chooseArray(val) {
if (this.multiple) { if (!this.multiple && this.chooseArray && this.chooseArray.length > 1) {
this.$emit('update:id', this.chooseArray) var lastItem = this.chooseArray[this.chooseArray.length - 1];
} else { this.chooseArray = [lastItem];
this.$emit('update:id', this.chooseArray[0])
} }
this.setTreeCheckNode() this.setTreeCheckNode()
} }
}, },
mounted() { mounted() {
// 把传进来的参数转成数组处理 // 把传进来的参数转成数组处理
if (this.id) {
if (this.multiple && Array.isArray(this.id)) { if (this.multiple && Array.isArray(this.id)) {
this.chooseArray = this.id this.chooseArray = this.id
} else { } else {
if (this.id != '') {
this.chooseArray.push(this.id) this.chooseArray.push(this.id)
} }
}
}
this.setTreeCheckNode(); this.setTreeCheckNode();
}, },
methods: { methods: {
//设置节点下拉框选择 //设置下拉框选择
setTreeCheckNode() { setTreeCheckNode() {
this.options = [] var that = this;
this.selectList = [];
if (this.multiple) {
this.resultObj = [];
} else {
this.resultObj = "";
}
this.showMsg = "";
var tempStr = "";
var nodes = this.findTreeNode(this.treeData);
if (this.chooseArray && this.chooseArray.length > 0 && nodes && nodes.length > 0) {
this.chooseArray.forEach(id => { this.chooseArray.forEach(id => {
if (id != '') { nodes.forEach((item, index) => {
var tempStr = this.findTreeNode(this.treeData, id) if (item.value == id) {
this.options.push({ this.selectList.push({
value: id, value: item.value,
label: tempStr label: item.label
}); });
console.log("this.options",this.options) tempStr += "," + item.label;
if (this.multiple) {
this.resultObj.push(item.value);
} else {
this.resultObj = item.value;
}
} }
}) })
})
if (tempStr && tempStr != '') {
this.showMsg = tempStr.substring(1, tempStr.length);
}
}
}, },
//递归查询树形节点 //获取所有节点
findTreeNode(tree, id) { findTreeNode(tree) {
var temp = [];
var that = this;
//获取子节点
var getChildNodes = function (tree) {
if (tree && tree.length > 0) { if (tree && tree.length > 0) {
console.log("111")
for (var i = 0; i < tree.length; i++) { for (var i = 0; i < tree.length; i++) {
console.log("222") var item = tree[i];
if (tree[i][this.nodeKey] === id) { temp.push({
console.log("tree",tree[i][this.nodeKey]); label: tree[i][that.labelKey],
console.log("id",id); value: tree[i][that.nodeKey]
return tree[i][this.labelKey] });
} else if (tree[i][this.childrenKey] != null && tree[i][this.childrenKey].length > 0) { if (tree[i][that.childrenKey]) {
return this.findTreeNode(tree[i][this.childrenKey], id) getChildNodes(tree[i][that.childrenKey]);
} }
} }
} }
return ""; };
}, getChildNodes(tree);
return temp;
}
} }
} }
......
...@@ -8,7 +8,8 @@ ...@@ -8,7 +8,8 @@
</div> </div>
<div class="col-3"> <div class="col-3">
<select-tree v-if="TreeCategoryList&&TreeCategoryList.length>0" :treeData='TreeCategoryList' <select-tree v-if="TreeCategoryList&&TreeCategoryList.length>0" :treeData='TreeCategoryList'
:id.sync="returnString" nodeKey="CateId" labelKey="CateName" childrenKey="ChildList"></select-tree> :id.sync="returnString" nodeKey="CateId" :multiple="true" labelKey="CateName" childrenKey="ChildList"
tipText="课程分类"></select-tree>
</div> </div>
<div class="col-3"> <div class="col-3">
<q-select @input="resetSearch" standout="bg-primary text-white" v-model="msg.Status" :options="ShowOpts" <q-select @input="resetSearch" standout="bg-primary text-white" v-model="msg.Status" :options="ShowOpts"
...@@ -171,9 +172,7 @@ ...@@ -171,9 +172,7 @@
this.TreeCategoryList = []; this.TreeCategoryList = [];
var qMsg = {} var qMsg = {}
queryCourseCategoryTree(qMsg).then(res => { queryCourseCategoryTree(qMsg).then(res => {
this.TreeCategoryList = res.Data; this.TreeCategoryList = res.Data;
}) })
}, },
//重新查询 //重新查询
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment