136 lines
3.5 KiB
Vue
136 lines
3.5 KiB
Vue
<template>
|
||
<view>
|
||
<uni-easyinput @focus="open" v-model="selectText" placeholder="选择父级部门"></uni-easyinput>
|
||
<next-tree ref="nextTreeRef" funcMode="radio" uiMode="popup" :selectParent="true" labelKey="depart_name"
|
||
valueKey="_id" :multiple="false" :treeData="departTreeData" @confirm="onnodeclick" @change="onchange">
|
||
</next-tree>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import {
|
||
getJsonTree,
|
||
groupBy
|
||
} from "@/js_sdk/util/jsonData";
|
||
import {
|
||
saveDepartStore,
|
||
saveDictItemStore,
|
||
getDictItemStore,
|
||
getDepartStore
|
||
} from '@/js_sdk/util/dictTools.js';
|
||
export default {
|
||
data() {
|
||
return {
|
||
departTreeData: [],
|
||
selectText: "",
|
||
departID: "",
|
||
selectIDs:[]
|
||
|
||
}
|
||
},
|
||
props: {
|
||
selectID: {
|
||
type: String,
|
||
default: ""
|
||
},
|
||
},
|
||
watch: {
|
||
selectID: {
|
||
immediate: true,
|
||
deep: true,
|
||
handler(val) {
|
||
console.log(val)
|
||
this.departTreeData = getDepartStore()
|
||
this.selectIDs=[];
|
||
this.selectIDs.push(val)
|
||
this.echoDefault(this.selectIDs)
|
||
}
|
||
}
|
||
},
|
||
mounted() {
|
||
this.departTreeData = getDepartStore()
|
||
},
|
||
onShow() {
|
||
|
||
},
|
||
methods: {
|
||
open() {
|
||
this.departTreeData = getDepartStore();
|
||
setTimeout(() => {
|
||
this.$refs.nextTreeRef.showTree = true;
|
||
}, 500)
|
||
|
||
},
|
||
|
||
echoDefault(selectIds) {
|
||
this.checkedTreeData(this.departTreeData, selectIds)
|
||
console.log('treeData的数据：', this.departTreeData)
|
||
console.log('treeData的选中的：', selectIds)
|
||
this.funcMode = 'checkbox'
|
||
// this.$refs.nextTreeRef.showTree = true
|
||
},
|
||
checkedTreeData(treeData, selectIds) {
|
||
// 注意 vue2当数据深嵌套时，如果没有在treeData里面初始化checked属性，那在改变数据的时候直接将checked属性赋值为true，这时候ui界面有可能不会更新，
|
||
// 这时候建议使用this.$set去更新checked属性值，或者在初始化this.treeData的时候初始化checked属性
|
||
(treeData || []).map(item => {
|
||
if (selectIds.indexOf(item._id) !== -1) {
|
||
console.log('v选中的：', item)
|
||
this.selectText=item.depart_name
|
||
this.$emit("change", selectIds[0], this.selectText)
|
||
item.checked = true
|
||
|
||
} else {
|
||
item.checked = false
|
||
}
|
||
if (item.children && item.children.length) {
|
||
this.checkedTreeData(item.children, selectIds)
|
||
}
|
||
})
|
||
},
|
||
onchange(e) {
|
||
console.log("xzzzz---" + JSON.stringify(e))
|
||
let temp = this.getTreeName(e);
|
||
this.selectText = temp.strName;
|
||
let arrID = [];
|
||
let departParentID = "";
|
||
try {
|
||
arrID = temp.strID.split('/')
|
||
if (arrID.length > 1) {
|
||
departParentID = arrID[arrID.length - 1]
|
||
} else {
|
||
departParentID = arrID[0]
|
||
}
|
||
|
||
} catch (e) {
|
||
//TODO handle the exception
|
||
}
|
||
console.log(departParentID, this.selectText)
|
||
this.$emit("change", departParentID, this.selectText)
|
||
},
|
||
onnodeclick(e) {
|
||
// this.selectText = JSON.stringify(this.getTreeName(e));
|
||
// this.$emit("change",e[0]._id,this.selectText)
|
||
},
|
||
getTreeName(tree) {
|
||
// console.log("e", tree)
|
||
let treeParents = tree[0].parents
|
||
var strName = "";
|
||
var strID = "";
|
||
if (treeParents.length > 0) {
|
||
for (let i = 0; i < treeParents.length; i++) {
|
||
strName = strName + treeParents[i].depart_name + "/";
|
||
strID = strID + treeParents[i]._id + "/";
|
||
}
|
||
}
|
||
strName = strName + tree[0].depart_name;
|
||
strID = strID + tree[0]._id;
|
||
|
||
return {
|
||
"strName": strName,
|
||
"strID": strID
|
||
}
|
||
|
||
}
|
||
|
||
}
|
||
}
|
||
</script> |