|
|
@@ -1,16 +1,13 @@
|
|
|
<template>
|
|
|
<div class="tree-panel">
|
|
|
<el-tree
|
|
|
- ref="cusTreeRef"
|
|
|
- :data="arealist"
|
|
|
- node-key="sa_saleareaid"
|
|
|
+ ref="treeRef"
|
|
|
+ :data="deplist"
|
|
|
+ node-key="departmentid"
|
|
|
+ :current-node-key="currentKey"
|
|
|
default-expand-all
|
|
|
highlight-current
|
|
|
- :show-checkbox="checked"
|
|
|
- :check-strictly="true"
|
|
|
- :check-on-click-node="true"
|
|
|
:expand-on-click-node="false"
|
|
|
- :default-checked-keys="area_default"
|
|
|
@node-click="handleClick">
|
|
|
<span class="custom-tree-node" slot-scope="{ node, data }">
|
|
|
<span>{{ node.label }}</span>
|
|
|
@@ -24,39 +21,30 @@
|
|
|
|
|
|
<script>
|
|
|
|
|
|
-import {mapGetters} from 'vuex'
|
|
|
|
|
|
export default {
|
|
|
- props:['checked','area_default'],
|
|
|
components:{
|
|
|
},
|
|
|
- computed:{
|
|
|
- ...mapGetters({
|
|
|
- pageOnlyRead:"pageOnlyRead"
|
|
|
- })
|
|
|
- },
|
|
|
data () {
|
|
|
return {
|
|
|
- arealist:[],
|
|
|
- cusChecked: [],
|
|
|
- responseData:[]
|
|
|
+ deplist:[],
|
|
|
+ departmentid:0,
|
|
|
+ currentKey:null
|
|
|
}
|
|
|
},
|
|
|
methods:{
|
|
|
- handleClick (row,node,VueComponent) {
|
|
|
- this.$emit('onClick',node.data)
|
|
|
- },
|
|
|
- async query_arealist () {
|
|
|
+ async department (callback) {
|
|
|
const res = await this.$api.requested({
|
|
|
- "classname": "webmanage.sale.salearea.salearea",
|
|
|
- "method": "query_area",
|
|
|
+ "classname": "webmanage.department.department",
|
|
|
+ "method": "querydepartment",
|
|
|
"content": {
|
|
|
}
|
|
|
})
|
|
|
// 数据格式转换成elementui-tree所需的格式
|
|
|
- this.responseData = res.data
|
|
|
- this.arealist = this.createMenu(res.data)
|
|
|
- this.$emit('onClick',this.arealist[0])
|
|
|
+ this.deplist = this.createMenu(res.data)
|
|
|
+
|
|
|
+ this.$store.dispatch('setDeplistData',this.deplist)
|
|
|
+ callback?callback():""
|
|
|
},
|
|
|
createMenu (array) {
|
|
|
var that = this
|
|
|
@@ -64,20 +52,26 @@ export default {
|
|
|
function convertToElementTree(node) {
|
|
|
// 新节点
|
|
|
var elNode = {
|
|
|
- label: node["areaname"],
|
|
|
+ label: node["depname"],
|
|
|
+ parentid:node['parentid'],
|
|
|
+ departmentid:node["departmentid"],
|
|
|
+ value:node["departmentid"],
|
|
|
remarks:node["remarks"],
|
|
|
isused:node["isused"],
|
|
|
- sa_saleareaid:node['sa_saleareaid'],
|
|
|
- parentid:node['parentid'],
|
|
|
- disabled:that.pageOnlyRead,
|
|
|
+ changedate:node['changedate'],
|
|
|
+ changeby:node['changeby'],
|
|
|
+ createdate:node['createdate'],
|
|
|
+ createby:node['createby'],
|
|
|
+ depno:node['depno'],
|
|
|
+ sequence:node['sequence'],
|
|
|
children: []
|
|
|
}
|
|
|
|
|
|
- if (node.subarea && node.subarea.length > 0) {
|
|
|
+ if (node.subdep && node.subdep.length > 0) {
|
|
|
// 如果存在子节点
|
|
|
- for (var index = 0; index < node.subarea.length; index++) {
|
|
|
+ for (var index = 0; index < node.subdep.length; index++) {
|
|
|
// 遍历子节点, 把每个子节点看做一颗独立的树, 传入递归构造子树, 并把结果放回到新node的children中
|
|
|
- elNode.children.push(convertToElementTree(node.subarea[index]));
|
|
|
+ elNode.children.push(convertToElementTree(node.subdep[index]));
|
|
|
}
|
|
|
}
|
|
|
return elNode;
|
|
|
@@ -87,59 +81,24 @@ export default {
|
|
|
});
|
|
|
return arr
|
|
|
},
|
|
|
- handleCheck (currentNode, treeStatus) {
|
|
|
- /**
|
|
|
- * @des 根据父元素的勾选或取消勾选，将所有子级处理为选择或非选中状态
|
|
|
- * @param { node: Object } 当前节点
|
|
|
- * @param { status: Boolean } （true ： 处理为勾选状态 ； false： 处理非选中）
|
|
|
- */
|
|
|
- const setChildStatus = (node, status) => {
|
|
|
- /* 这里的 id children 也可以是其它字段，根据实际的业务更改 */
|
|
|
- this.$refs.cusTreeRef.setChecked(node.sa_saleareaid, status)
|
|
|
- if (node.children) {
|
|
|
- /* 循环递归处理子节点 */
|
|
|
- for (let i = 0; i < node.children.length; i++) {
|
|
|
- setChildStatus(node.children[i], status)
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- /* 设置父节点为选中状态 */
|
|
|
- const setParentStatus = (nodeObj) => {
|
|
|
- /* 拿到tree组件中的node,使用该方法的原因是第一次传入的 node 没有 parent */
|
|
|
- const node = this.$refs.cusTreeRef.getNode(nodeObj)
|
|
|
- if (node.parent.key) {
|
|
|
- this.$refs.cusTreeRef.setChecked(node.parent, true)
|
|
|
- setParentStatus(node.parent)
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- /* 判断当前点击是选中还是取消选中操作 */
|
|
|
- if (treeStatus.checkedKeys.includes(currentNode.sa_saleareaid)) {
|
|
|
- setParentStatus(currentNode)
|
|
|
- setChildStatus(currentNode, true)
|
|
|
- } else {
|
|
|
- /* 取消选中 */
|
|
|
- if (currentNode.children) {
|
|
|
- setChildStatus(currentNode, false)
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- this.cusChecked = [...this.$refs.cusTreeRef.getCheckedKeys()]
|
|
|
- this.$emit('onAreaChecked',this.cusChecked)
|
|
|
- }
|
|
|
+ handleClick (row,node,VueComponent) {
|
|
|
+ console.log(row)
|
|
|
+ this.$emit('onClick',row)
|
|
|
+ },
|
|
|
+ setCurrentKey (id) {
|
|
|
+ this.currentKey = id
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs['treeRef'].setCurrentKey(this.currentKey)
|
|
|
+ })
|
|
|
+ },
|
|
|
},
|
|
|
- mounted () {
|
|
|
- this.query_arealist()
|
|
|
+ watch: {
|
|
|
},
|
|
|
- watch:{
|
|
|
- pageOnlyRead (val) {
|
|
|
- console.log(val)
|
|
|
- this.query_arealist()
|
|
|
- },
|
|
|
- area_default (val) {
|
|
|
- // 如果存在默认组织数据就执行
|
|
|
- this.$emit('onAreaChecked',this.area_default)
|
|
|
- }
|
|
|
+ mounted () {
|
|
|
+ this.department(()=>{
|
|
|
+ this.$emit('onClick',{departmentid:this.deplist[0].departmentid})
|
|
|
+ this.setCurrentKey(this.deplist[0].departmentid)
|
|
|
+ })
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -165,4 +124,5 @@ export default {
|
|
|
/* width:300px; */
|
|
|
background: #FAFAFA;
|
|
|
}
|
|
|
+
|
|
|
</style>
|
