655 lines
17 KiB
Vue
655 lines
17 KiB
Vue
|
<template>
|
|||
|
|
<view>
|
|||
|
|
<view class="header">
|
|||
|
|
<search v-if="searchIf" ref="sea" @confirm="confirmSearch" @add="addGroup" />
|
|||
|
|
<view class="title">
|
|||
|
|
<scroll-view scroll-x style="width: 100%;white-space: nowrap;" :scroll-left="scrollLeft">
|
|||
|
|
<view v-for="(item,index) in tree_stack" class="inline-item" :key="index">
|
|||
|
|
<view class="inline-item" v-if="index==0" @click="backTree(item,-1)">
|
|||
|
|
<text :class="[(index==tree_stack.length-1&&!isre)?'none':'active']">全部</text>
|
|||
|
|
</view>
|
|||
|
|
<view v-if="index==0&&isre" @click="backTree(item,-2)"
|
|||
|
|
:class="[index==tree_stack.length-1&&isre]?'none inline-item':'active inline-item'">
|
|||
|
|
<!-- <i class="iconfont icon-z043 iconclass" />-->
|
|||
|
|
<view style="display: inline-block;">
|
|||
|
|
<u-icon name="arrow-right" color="#D0D4DB" size="14"></u-icon>
|
|||
|
|
</view>
|
|||
|
|
搜索结果
|
|||
|
|
</view>
|
|||
|
|
<view class="inline-item" @click="backTree(item,index)" v-if="index!=0">
|
|||
|
|
<!-- <i class="iconfont icon-z043 iconclass" /> -->
|
|||
|
|
<view style="display: inline-block;">
|
|||
|
|
<u-icon name="arrow-right" color="#D0D4DB" size="14"></u-icon>
|
|||
|
|
</view>
|
|||
|
|
<text :class="index==tree_stack.length-1?'none inline-ite':'active'">
|
|||
|
|
{{item[props.label]}}
|
|||
|
|
</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</scroll-view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view>
|
|||
|
|
<view class="container-list">
|
|||
|
|
<u-swipe-action>
|
|||
|
|
<template v-for="(item, index) in tree">
|
|||
|
|
<u-swipe-action-item v-if="item.type=='user'" :options="options2"
|
|||
|
|
:disabled="item.type=='system'?true:false" :key="item.id" @click="operateClick"
|
|||
|
|
:name="item.type+item.id">
|
|||
|
|
<view class="common" @click="handleClick(item,index)">
|
|||
|
|
<label class="content">
|
|||
|
|
<view class="list-item" v-show="isCheck">
|
|||
|
|
<!-- 多选 -->
|
|||
|
|
<view class="checkbox" v-if="props.multiple" @click.stop="handleClick(item,-1)">
|
|||
|
|
<span v-if="isSelect(item)">
|
|||
|
|
<i v-if="item.bx&&newCheckList.length!=0"
|
|||
|
|
class="iconfont icon-banxuanzhongshousuo1-shi icons" />
|
|||
|
|
<i v-else class="iconfont icon-xuanzhong txt icon-selected" />
|
|||
|
|
</span>
|
|||
|
|
<i v-else-if="item.qx" class="iconfont icon-xuanzhong txt icon-selected" />
|
|||
|
|
<i v-else-if="item.bx"
|
|||
|
|
class="iconfont icon-banxuanzhongshousuo1-shi icons" />
|
|||
|
|
<i style="color: #b8b8b8;" v-else class="iconfont icon-weixuanzhong txt" />
|
|||
|
|
</view>
|
|||
|
|
<!-- 单选 -->
|
|||
|
|
<view class="checkbox" v-else-if="(props.nodes?item.user?true:false:true)"
|
|||
|
|
@click.stop="handleClick(item,-1)">
|
|||
|
|
<i v-if="radioSelect(item)" class="txt iconfont icon-selected" />
|
|||
|
|
<i style="color: #b8b8b8;" v-else class="txt iconfont icon-weixuanzhong1" />
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="avator" v-if="isAvator&&item.user" @click.stop="goDetails(item)">
|
|||
|
|
<img
|
|||
|
|
:src="item.avatar?(item.avatar.indexOf('http')!=-1?item.avatar:basePicUrl+item.avatar):avatorUrl">
|
|||
|
|
</view>
|
|||
|
|
<view class="lable-text">{{item[props.label]}}</view>
|
|||
|
|
<view class="right">
|
|||
|
|
<!-- <i v-if="!item.user&&item.children.length>0"
|
|||
|
|
class="iconfont icon-z043 iconclass"></i> -->
|
|||
|
|
<u-icon v-if="!item.user&&item.children.length>0" name="arrow-right"></u-icon>
|
|||
|
|
</view>
|
|||
|
|
</label>
|
|||
|
|
</view>
|
|||
|
|
</u-swipe-action-item>
|
|||
|
|
<u-swipe-action-item v-else :options="options1"
|
|||
|
|
:disabled="item.type=='system'?true:false" :key="item.id" @click="operateClick"
|
|||
|
|
:name="item.type+item.id">
|
|||
|
|
<view class="common" @click="handleClick(item,index)">
|
|||
|
|
<label class="content">
|
|||
|
|
<view class="list-item" v-show="isCheck">
|
|||
|
|
<!-- 多选 -->
|
|||
|
|
<view class="checkbox" v-if="props.multiple" @click.stop="handleClick(item,-1)">
|
|||
|
|
<span v-if="isSelect(item)">
|
|||
|
|
<i v-if="item.bx&&newCheckList.length!=0"
|
|||
|
|
class="iconfont icon-banxuanzhongshousuo1-shi icons" />
|
|||
|
|
<i v-else class="iconfont icon-xuanzhong txt icon-selected" />
|
|||
|
|
</span>
|
|||
|
|
<i v-else-if="item.qx" class="iconfont icon-xuanzhong txt icon-selected" />
|
|||
|
|
<i v-else-if="item.bx"
|
|||
|
|
class="iconfont icon-banxuanzhongshousuo1-shi icons" />
|
|||
|
|
<i style="color: #b8b8b8;" v-else class="iconfont icon-weixuanzhong txt" />
|
|||
|
|
</view>
|
|||
|
|
<!-- 单选 -->
|
|||
|
|
<view class="checkbox" v-else-if="(props.nodes?item.user?true:false:true)"
|
|||
|
|
@click.stop="handleClick(item,-1)">
|
|||
|
|
<i v-if="radioSelect(item)" class="txt iconfont icon-selected" />
|
|||
|
|
<i style="color: #b8b8b8;" v-else class="txt iconfont icon-weixuanzhong1" />
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="avator" v-if="isAvator&&item.user" @click.stop="goDetails(item)">
|
|||
|
|
<img
|
|||
|
|
:src="item.avatar?(item.avatar.indexOf('http')!=-1?item.avatar:basePicUrl+item.avatar):avatorUrl">
|
|||
|
|
</view>
|
|||
|
|
<view class="lable-text">{{item[props.label]}}</view>
|
|||
|
|
<view class="right">
|
|||
|
|
<!-- <i v-if="!item.user&&item.children.length>0"
|
|||
|
|
class="iconfont icon-z043 iconclass"></i> -->
|
|||
|
|
<u-icon v-if="!item.user&&item.children.length>0" name="arrow-right"></u-icon>
|
|||
|
|
</view>
|
|||
|
|
</label>
|
|||
|
|
</view>
|
|||
|
|
</u-swipe-action-item>
|
|||
|
|
</template>
|
|||
|
|
</u-swipe-action>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<u-picker :show="isShow" :columns="columns" keyName="groupName" title="将联系人添加至" closeOnClickOverlay
|
|||
|
|
@confirm="removeSure" @cancel="isShow=false" @close="isShow=false"></u-picker>
|
|||
|
|
<u-modal :show="isShow1" :content='content' showCancelButton closeOnClickOverlay @confirm="deleteSure"
|
|||
|
|
@cancel="isShow1=false" @close="isShow1=false"></u-modal>
|
|||
|
|
<!-- <view class="btn box_sizing">
|
|||
|
|
<button class="sureBtn" type="primary" @click="backConfirm">确认</button>
|
|||
|
|
</view> -->
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import search from './search/index.vue'
|
|||
|
|
import {
|
|||
|
|
deleteAddress,
|
|||
|
|
myAddressList,
|
|||
|
|
addAddressBook
|
|||
|
|
} from "@/common/api/api.js"
|
|||
|
|
export default {
|
|||
|
|
name: "treeComponent",
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
basePicUrl: this.$basePicUrl,
|
|||
|
|
content: "",
|
|||
|
|
value: "",
|
|||
|
|
isShow1: false,
|
|||
|
|
isShow: false,
|
|||
|
|
isre: false,
|
|||
|
|
tree: Object.freeze(this.treeNone),
|
|||
|
|
newNum: 0,
|
|||
|
|
oldNum: 0,
|
|||
|
|
catchTreeNone: [...this.treeNone],
|
|||
|
|
tree_stack: [1],
|
|||
|
|
searchResult: [],
|
|||
|
|
newCheckList: this.checkList,
|
|||
|
|
scrollLeft: 999,
|
|||
|
|
nodePathArray: [],
|
|||
|
|
options1: [{
|
|||
|
|
text: '删除',
|
|||
|
|
style: {
|
|||
|
|
backgroundColor: '#f56c6c',
|
|||
|
|
}
|
|||
|
|
}],
|
|||
|
|
options2: [{
|
|||
|
|
text: '添加至',
|
|||
|
|
style: {
|
|||
|
|
backgroundColor: '#3c9cff',
|
|||
|
|
}
|
|||
|
|
}, {
|
|||
|
|
text: '删除',
|
|||
|
|
style: {
|
|||
|
|
backgroundColor: '#f56c6c',
|
|||
|
|
}
|
|||
|
|
}],
|
|||
|
|
columns: [],
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
components: {
|
|||
|
|
search
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
isSelect() {
|
|||
|
|
return (item) => {
|
|||
|
|
const checkList = this.newCheckList
|
|||
|
|
if (checkList.length == 0) {
|
|||
|
|
this.props.checkStrictly ? (item.bx = 0, item.qx = 0) : ''
|
|||
|
|
return false
|
|||
|
|
}
|
|||
|
|
const i = checkList.findIndex(e => {
|
|||
|
|
return item[this.keyCode] == e[this.keyCode]
|
|||
|
|
}) > -1
|
|||
|
|
return i && !item.qx
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
radioSelect() {
|
|||
|
|
const list = this.newCheckList
|
|||
|
|
return (item) => {
|
|||
|
|
return list.length > 0 && item[this.keyCode] == list[0][this.keyCode]
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
keyCode() {
|
|||
|
|
return this.keyValue
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
created() {
|
|||
|
|
this.Init()
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
goDetails(item) {
|
|||
|
|
this.$emit("toPerson", item);
|
|||
|
|
},
|
|||
|
|
// 移动联系人
|
|||
|
|
removeSure(data) {
|
|||
|
|
console.log(data.value[0]);
|
|||
|
|
let params = {
|
|||
|
|
"addressUserId": this.personId,
|
|||
|
|
"createBy": "",
|
|||
|
|
"createTime": "",
|
|||
|
|
"groupName": "",
|
|||
|
|
"gruopId": data.value[0].id,
|
|||
|
|
"id": "",
|
|||
|
|
"type": "1",
|
|||
|
|
"updateBy": "",
|
|||
|
|
"updateTime": "",
|
|||
|
|
"userId": ""
|
|||
|
|
}
|
|||
|
|
addAddressBook(params).then(res => {
|
|||
|
|
if (res.code == 200) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: "添加成功",
|
|||
|
|
icon: "success",
|
|||
|
|
duration: 2000
|
|||
|
|
})
|
|||
|
|
this.isShow = false;
|
|||
|
|
this.$emit("reload")
|
|||
|
|
} else {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: "添加失败",
|
|||
|
|
icon: "none",
|
|||
|
|
duration: 2000
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
//删除联系人
|
|||
|
|
deleteSure() {
|
|||
|
|
deleteAddress(null, "?id=" + this.personId).then(res => {
|
|||
|
|
if (res.code == 200) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: "删除成功",
|
|||
|
|
icon: "success",
|
|||
|
|
duration: 2000
|
|||
|
|
})
|
|||
|
|
this.isShow1 = false;
|
|||
|
|
this.$emit("reload")
|
|||
|
|
} else {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: "删除失败",
|
|||
|
|
icon: "none",
|
|||
|
|
duration: 2000
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
sure() {
|
|||
|
|
this.show = false;
|
|||
|
|
},
|
|||
|
|
operateClick(data) {
|
|||
|
|
if (data.name.indexOf('user') != -1) {
|
|||
|
|
this.personId = data.name.replace("user", "");
|
|||
|
|
if (data.index == 0) {
|
|||
|
|
//移动 联系人
|
|||
|
|
//请求自建分组列表
|
|||
|
|
myAddressList().then(res => {
|
|||
|
|
if (res.code == 200) {
|
|||
|
|
this.columns = [
|
|||
|
|
[...res.result.records]
|
|||
|
|
];
|
|||
|
|
this.isShow = true;
|
|||
|
|
} else {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: "获取自建分组失败",
|
|||
|
|
icon: "none",
|
|||
|
|
duration: 2000
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
} else {
|
|||
|
|
//删除联系人
|
|||
|
|
this.content = "是否要删除该联系人"
|
|||
|
|
this.isShow1 = true;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
if (data.name.indexOf('my') != -1) {
|
|||
|
|
//删除自建分组
|
|||
|
|
this.personId = data.name.replace("my", "");
|
|||
|
|
this.content = "是否要删除该分组"
|
|||
|
|
this.isShow1 = true;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
addGroup(value) {
|
|||
|
|
this.$emit("add", value)
|
|||
|
|
},
|
|||
|
|
// 初始化
|
|||
|
|
Init() {
|
|||
|
|
if (this.newCheckList.length !== 0) {
|
|||
|
|
let {
|
|||
|
|
tree_stack,
|
|||
|
|
props,
|
|||
|
|
catchTreeNone,
|
|||
|
|
newCheckList
|
|||
|
|
} = this
|
|||
|
|
if (props.multiple) {
|
|||
|
|
if (props.checkStrictly) {
|
|||
|
|
this.checkAllChoose();
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
this.getNodeRoute(catchTreeNone, newCheckList[0][this.keyCode])
|
|||
|
|
let arr = this.nodePathArray.reverse()
|
|||
|
|
console.log(arr)
|
|||
|
|
if (arr.length == 0) return
|
|||
|
|
this.tree_stack = tree_stack.concat(arr);
|
|||
|
|
this.tree = this.tree_stack[this.tree_stack.length - 1].children;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 点击项目处理
|
|||
|
|
handleClick(item, index) {
|
|||
|
|
console.log(item);
|
|||
|
|
let children = item[this.props.children]
|
|||
|
|
if (index > -1 && children && children.length > 0) {
|
|||
|
|
console.log(index)
|
|||
|
|
this.toChildren(item)
|
|||
|
|
} else if (this.props.multiple) {
|
|||
|
|
this.checkboxChange(item, index, item.bx, item.qx)
|
|||
|
|
} else {
|
|||
|
|
this.checkbox(item, index)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 获取路径
|
|||
|
|
getPath() {
|
|||
|
|
const {
|
|||
|
|
keyCode,
|
|||
|
|
tree_stack,
|
|||
|
|
props
|
|||
|
|
} = this
|
|||
|
|
const path = [...tree_stack].map(e => {
|
|||
|
|
const item = Object.assign({}, e)
|
|||
|
|
delete item[props.children]
|
|||
|
|
return item
|
|||
|
|
})
|
|||
|
|
return path.slice(1, path.length) || []
|
|||
|
|
},
|
|||
|
|
//多选
|
|||
|
|
async checkboxChange(item, index, bx, qx) {
|
|||
|
|
let that = this;
|
|||
|
|
const {
|
|||
|
|
props
|
|||
|
|
} = that
|
|||
|
|
if (!props.multiple) return;
|
|||
|
|
let findIdex = that.newCheckList.findIndex(e => item[this.keyCode] == e[this.keyCode]);
|
|||
|
|
const path = this.getPath()
|
|||
|
|
if (findIdex > -1) { //反选
|
|||
|
|
if (props.checkStrictly) { //关联子级
|
|||
|
|
if (item.user) { //用户
|
|||
|
|
that.newCheckList.splice(findIdex, 1)
|
|||
|
|
} else { //非用户，取消所有下一级
|
|||
|
|
that.getIdBydelete(item.children)
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
that.newCheckList.splice(findIdex, 1)
|
|||
|
|
}
|
|||
|
|
} else { //选中
|
|||
|
|
if (!item.user && props.checkStrictly) { //选中下一级
|
|||
|
|
if (qx || bx) { //取消下级
|
|||
|
|
await that.getIdBydelete(item.children);
|
|||
|
|
item.qx = 0;
|
|||
|
|
item.bx = 0;
|
|||
|
|
} else {
|
|||
|
|
item.qx = 1;
|
|||
|
|
item.bx = 0;
|
|||
|
|
const {
|
|||
|
|
id,
|
|||
|
|
name,
|
|||
|
|
user
|
|||
|
|
} = item
|
|||
|
|
const newObj = {
|
|||
|
|
id,
|
|||
|
|
name,
|
|||
|
|
user
|
|||
|
|
}
|
|||
|
|
const pathList = this.tree_stack.length === 1 ? [newObj, ...path] : [...path, newObj]
|
|||
|
|
await that.chooseChild(item.children, pathList);
|
|||
|
|
}
|
|||
|
|
this.$forceUpdate()
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
that.newCheckList.push({
|
|||
|
|
...item,
|
|||
|
|
path
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 取消下一级的选中
|
|||
|
|
getIdBydelete(arr) {
|
|||
|
|
arr.forEach(e => {
|
|||
|
|
if (e.user) {
|
|||
|
|
for (var i = 0; i < this.newCheckList.length; i++) {
|
|||
|
|
if (e[this.keyCode] == this.newCheckList[i][this.keyCode]) {
|
|||
|
|
this.newCheckList.splice(i, 1)
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
this.getIdBydelete(e.children)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 关联下一级,选中
|
|||
|
|
chooseChild(arr, path) {
|
|||
|
|
let that = this;
|
|||
|
|
const oldPath = [...path]
|
|||
|
|
for (var i = 0, len = arr.length; i < len; i++) {
|
|||
|
|
let item = arr[i];
|
|||
|
|
if (item.user) {
|
|||
|
|
that.newCheckList.push({
|
|||
|
|
...item,
|
|||
|
|
path: oldPath
|
|||
|
|
})
|
|||
|
|
} else {
|
|||
|
|
const newItem = {
|
|||
|
|
...item
|
|||
|
|
}
|
|||
|
|
delete newItem[that.props.children]
|
|||
|
|
const newPath = [...oldPath, newItem]
|
|||
|
|
that.chooseChild(item.children, newPath)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// (tree为目标树，targetId为目标节点id)
|
|||
|
|
getNodeRoute(tree, targetId) {
|
|||
|
|
for (let index = 0; index < tree.length; index++) {
|
|||
|
|
if (tree[index].children) {
|
|||
|
|
let endRecursiveLoop = this.getNodeRoute(tree[index].children, targetId)
|
|||
|
|
if (endRecursiveLoop) {
|
|||
|
|
this.nodePathArray.push(tree[index])
|
|||
|
|
return true
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if (tree[index][this.keyCode] === targetId) {
|
|||
|
|
return true
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
//单选
|
|||
|
|
checkbox(item, index) {
|
|||
|
|
const path = this.getPath()
|
|||
|
|
this.$set(this, 'newCheckList', [{
|
|||
|
|
...item,
|
|||
|
|
path
|
|||
|
|
}])
|
|||
|
|
if (item.user) {
|
|||
|
|
//直接发起聊天
|
|||
|
|
console.log("12432");
|
|||
|
|
this.$emit("toChat", item)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
//到下一级
|
|||
|
|
toChildren(item) {
|
|||
|
|
if (item.user) return
|
|||
|
|
var that = this;
|
|||
|
|
uni.showLoading({
|
|||
|
|
title: '加载中'
|
|||
|
|
})
|
|||
|
|
let children = that.props.children;
|
|||
|
|
if (!item.user && item[children].length > 0 && !(that.tree_stack[0][this.keyCode] == item[this.keyCode])) {
|
|||
|
|
that.tree = item[children];
|
|||
|
|
that.tree_stack.push(item);
|
|||
|
|
}
|
|||
|
|
this.$nextTick(() => {
|
|||
|
|
uni.hideLoading()
|
|||
|
|
this.scrollLeft += 200;
|
|||
|
|
})
|
|||
|
|
if (this.props.checkStrictly) this.checkAllChoose();
|
|||
|
|
},
|
|||
|
|
//搜索
|
|||
|
|
confirmSearch(val) {
|
|||
|
|
this.searchResult = []
|
|||
|
|
this.search(this.catchTreeNone, val)
|
|||
|
|
this.isre = true
|
|||
|
|
this.tree_stack.splice(1, 1000)
|
|||
|
|
uni.showLoading({
|
|||
|
|
title: '正在查找'
|
|||
|
|
})
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.tree = this.searchResult
|
|||
|
|
uni.hideLoading()
|
|||
|
|
}, 300)
|
|||
|
|
},
|
|||
|
|
search(data, keyword) {
|
|||
|
|
var that = this
|
|||
|
|
let children = that.props.children
|
|||
|
|
for (var i = 0, len = data.length; i < len; i++) {
|
|||
|
|
if (data[i].name.indexOf(keyword) >= 0) {
|
|||
|
|
that.searchResult.push(data[i])
|
|||
|
|
}
|
|||
|
|
if (!data[i].user && data[i][children].length > 0) {
|
|||
|
|
that.search(data[i][children], keyword)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
checkAllChoose() {
|
|||
|
|
let o = false,
|
|||
|
|
t = true;
|
|||
|
|
this.tree.forEach((e, i) => {
|
|||
|
|
if (!e.user) {
|
|||
|
|
e.qx = o;
|
|||
|
|
e.bx = o;
|
|||
|
|
this.computAllNumber(e.children);
|
|||
|
|
// console.log(this.newNum,this.oldNum)
|
|||
|
|
if (this.newNum != 0 && this.oldNum != 0) {
|
|||
|
|
if (this.newNum == this.oldNum) {
|
|||
|
|
e.qx = t;
|
|||
|
|
e.bx = o;
|
|||
|
|
} else {
|
|||
|
|
e.qx = o;
|
|||
|
|
e.bx = t;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if (this.newNum != 0 && this.oldNum == 0) {
|
|||
|
|
this.$set(this.tree[i], 'bx', o);
|
|||
|
|
this.$set(this.tree[i], 'qx', o);
|
|||
|
|
}
|
|||
|
|
this.$forceUpdate()
|
|||
|
|
this.newNum = 0
|
|||
|
|
this.oldNum = 0
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
computAllNumber(arr) {
|
|||
|
|
for (let j = 0; j < arr.length; j++) {
|
|||
|
|
var e = arr[j];
|
|||
|
|
this.checkSum(e[this.keyCode])
|
|||
|
|
if (e.user) {
|
|||
|
|
this.newNum++;
|
|||
|
|
} else {
|
|||
|
|
this.computAllNumber(e.children)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
checkSum(id) {
|
|||
|
|
for (let i = 0; i < this.newCheckList.length; i++) {
|
|||
|
|
if (id == this.newCheckList[i][this.keyCode]) {
|
|||
|
|
this.oldNum++;
|
|||
|
|
break
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
//返回其它层
|
|||
|
|
backTree(item, index) {
|
|||
|
|
console.log(index);
|
|||
|
|
let that = this,
|
|||
|
|
tree_stack = that.tree_stack,
|
|||
|
|
max = 10000;
|
|||
|
|
if (index === -1) {
|
|||
|
|
that.tree = that.catchTreeNone
|
|||
|
|
that.tree_stack.splice(1, max)
|
|||
|
|
that.isre = false
|
|||
|
|
that.$refs.sea.clears()
|
|||
|
|
} else if (index === -2) {
|
|||
|
|
that.tree = that.searchResult
|
|||
|
|
that.tree_stack.splice(1, max)
|
|||
|
|
} else {
|
|||
|
|
if (tree_stack.length - index > 2) {
|
|||
|
|
tree_stack.forEach((item, i) => {
|
|||
|
|
if (i > index) {
|
|||
|
|
that.tree_stack.splice(i, max)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
} else if (index !== tree_stack.length - 1) {
|
|||
|
|
that.tree_stack.splice(tree_stack.length - 1, 1)
|
|||
|
|
}
|
|||
|
|
that.tree = item[that.props.children]
|
|||
|
|
}
|
|||
|
|
if (this.props.checkStrictly) this.checkAllChoose();
|
|||
|
|
this.$forceUpdate()
|
|||
|
|
},
|
|||
|
|
backConfirm() {
|
|||
|
|
this.$emit('sendValue', this.newCheckList, 'back')
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
props: {
|
|||
|
|
treeNone: {
|
|||
|
|
type: Array,
|
|||
|
|
default: () => {
|
|||
|
|
return []
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
//是否开启选中
|
|||
|
|
isCheck: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: () => {
|
|||
|
|
return false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
isAvator: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: () => {
|
|||
|
|
return false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
checkList: {
|
|||
|
|
type: Array,
|
|||
|
|
default: () => []
|
|||
|
|
},
|
|||
|
|
parentList: {
|
|||
|
|
type: Array,
|
|||
|
|
default: () => []
|
|||
|
|
},
|
|||
|
|
searchIf: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: () => true
|
|||
|
|
},
|
|||
|
|
keyValue: {
|
|||
|
|
type: String,
|
|||
|
|
default: 'id',
|
|||
|
|
},
|
|||
|
|
avatorUrl: {
|
|||
|
|
type: String,
|
|||
|
|
default: '',
|
|||
|
|
},
|
|||
|
|
props: {
|
|||
|
|
type: Object,
|
|||
|
|
default: () => {
|
|||
|
|
return {
|
|||
|
|
label: 'name',
|
|||
|
|
children: 'children',
|
|||
|
|
multiple: false,
|
|||
|
|
checkStrictly: false, //不关联
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
@import './css/style.scss';
|
|||
|
|
@import url("./css/icon.css");
|
|||
|
|
</style>
|