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>
|