|
@@ -0,0 +1,227 @@
|
|
|
+<template>
|
|
|
+ <div class="treebox" v-loading="loading" style="height: 30rem">
|
|
|
+ <el-checkbox-group v-model="userList">
|
|
|
+ <div v-for="(item, index) in treeList" :key="index">
|
|
|
+ <el-checkbox :label="item" @change="checkChange(item)">{{
|
|
|
+ item.loginNameStr
|
|
|
+ }}</el-checkbox>
|
|
|
+ </div>
|
|
|
+ </el-checkbox-group>
|
|
|
+ <!-- <el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input> -->
|
|
|
+ <!-- <el-tree-->
|
|
|
+ <!-- :highlight-current="true"-->
|
|
|
+ <!-- :check-strictly="true"-->
|
|
|
+ <!-- ref="tree"-->
|
|
|
+ <!-- @check-change="handleCheckChange"-->
|
|
|
+ <!-- :data="treeList"-->
|
|
|
+ <!-- node-key="id"-->
|
|
|
+ <!-- :default-checked-keys="defaultListc"-->
|
|
|
+ <!-- :default-expanded-keys="defaultListc"-->
|
|
|
+ <!-- @node-click="handleNodeClick"-->
|
|
|
+ <!-- :filter-node-method="filterNode"-->
|
|
|
+ <!-- >-->
|
|
|
+ <!-- <span class="custom-tree-node" slot-scope="{ node }" @click="cs(node)">-->
|
|
|
+ <!-- <em-->
|
|
|
+ <!-- style="display: inline-block; width: 20px"-->
|
|
|
+ <!-- v-if="node.data.haveUserFlag == 'N' && node.data.children.length == 0"-->
|
|
|
+ <!-- ></em>-->
|
|
|
+ <!-- <i-->
|
|
|
+ <!-- class="el-icon-caret-right"-->
|
|
|
+ <!-- v-if="node.data.haveUserFlag == 'Y' && node.data.children.length == 0"-->
|
|
|
+ <!-- ></i>-->
|
|
|
+ <!-- <el-checkbox-->
|
|
|
+ <!-- style="margin-right: 10px"-->
|
|
|
+ <!-- v-model="node.checked"-->
|
|
|
+ <!-- v-if="node.data.type == 1"-->
|
|
|
+ <!-- ></el-checkbox>-->
|
|
|
+ <!-- <span>{{ node.label }}</span>-->
|
|
|
+ <!-- </span>-->
|
|
|
+ <!-- </el-tree>-->
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ props: ["defaultList", "type", "closeList", "treeList"],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ userList: [],
|
|
|
+ // treeList: [],
|
|
|
+ opt: [],
|
|
|
+ defaultProps: {
|
|
|
+ children: "children",
|
|
|
+ label: "label",
|
|
|
+ },
|
|
|
+ defaultListc: [],
|
|
|
+ loading: false,
|
|
|
+ filterText: "",
|
|
|
+ list: [],
|
|
|
+ };
|
|
|
+ },
|
|
|
+// watch: {
|
|
|
+// immediate: true,
|
|
|
+// treeList: {
|
|
|
+// handler(oldVal,newVal) {
|
|
|
+// console.log(oldVal);
|
|
|
+// console.log(newVal);
|
|
|
+// },
|
|
|
+// },
|
|
|
+// },
|
|
|
+ methods: {
|
|
|
+ checkChange(e) {
|
|
|
+ // console.log(this.userList)
|
|
|
+ // let newList = []
|
|
|
+ // this.userList.map((item) =>{
|
|
|
+ // let array = {
|
|
|
+ // userid:item,
|
|
|
+ // taskid:e.id_,
|
|
|
+ // nextid:e.id
|
|
|
+ // }
|
|
|
+ // newList.push(array)
|
|
|
+ // // newList.map((items,i) =>{
|
|
|
+ // // if(item !== items.userid){
|
|
|
+ // // newList.splice(i,1)
|
|
|
+ // // }
|
|
|
+ // // })
|
|
|
+ //
|
|
|
+ // })
|
|
|
+ // this.list = newList
|
|
|
+ // this.userList.map((item) =>{
|
|
|
+ // newList.map((items,i) =>{
|
|
|
+ // if(item !==items.id){
|
|
|
+ // newList.splice(i,1)
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ // })
|
|
|
+ // console.log(newList)
|
|
|
+ this.$emit("changeTree", this.userList);
|
|
|
+ this.$emit("changeUserName", e);
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+// filterNode(value, data) {
|
|
|
+// if (!value) return true;
|
|
|
+// return data.label.indexOf(value) !== -1;
|
|
|
+// },
|
|
|
+// cs(v) {
|
|
|
+// // console.log(v)
|
|
|
+// },
|
|
|
+// getTree(v) {
|
|
|
+// this.loading = true;
|
|
|
+// this.$http({
|
|
|
+// url: "/sysmgr/csysdept/queryAllList",
|
|
|
+// method: "post",
|
|
|
+// headers: {
|
|
|
+// "Content-Type": "application/json",
|
|
|
+// },
|
|
|
+// data: {
|
|
|
+// parentorgid: '00440089000000000000',
|
|
|
+// },
|
|
|
+// }).then((res) => {
|
|
|
+// console.log(res);
|
|
|
+// // this.treeList = res.data;
|
|
|
+// // this.loading = false;
|
|
|
+// });
|
|
|
+// },
|
|
|
+// handleCheckChange(v) {
|
|
|
+// let opt = [];
|
|
|
+// let list = this.$refs.tree.getCheckedNodes();
|
|
|
+// for (let i = 0; i < list.length; i++) {
|
|
|
+// if (list[i].type == 1) {
|
|
|
+// opt.push({
|
|
|
+// receiveNo: list[i].loginNoStr,
|
|
|
+// receiveName: list[i].label,
|
|
|
+// deptName: list[i].displayname,
|
|
|
+// deptCode: list[i].groupId,
|
|
|
+// id: list[i].id,
|
|
|
+// type: list[i].type,
|
|
|
+// label: list[i].label,
|
|
|
+// });
|
|
|
+// }
|
|
|
+// }
|
|
|
+// this.$emit("treeCheck", opt);
|
|
|
+// },
|
|
|
+// handleNodeClick(v) {
|
|
|
+// console.log(v);
|
|
|
+// let s = false;
|
|
|
+// if (v.children && v.children.length == 0) {
|
|
|
+// s = true;
|
|
|
+// }
|
|
|
+// if (v.type) {
|
|
|
+// return;
|
|
|
+// }
|
|
|
+// if (
|
|
|
+// v.children &&
|
|
|
+// v.children.length > 0 &&
|
|
|
+// v.children[v.children.length - 1].type == 1
|
|
|
+// ) {
|
|
|
+// return;
|
|
|
+// }
|
|
|
+// this.$http({
|
|
|
+// url: "/sysmgr/sysuserinfo/queryList",
|
|
|
+// method: "post",
|
|
|
+// headers: {
|
|
|
+// "Content-Type": "application/json",
|
|
|
+// },
|
|
|
+// data: {
|
|
|
+// groupId: v.o,
|
|
|
+// },
|
|
|
+// }).then((res) => {
|
|
|
+// res.data.forEach((item) => {
|
|
|
+// v.children.push({
|
|
|
+// id: item.id,
|
|
|
+// label: item.loginNameStr,
|
|
|
+// type: 1,
|
|
|
+// displayname: v.displayname,
|
|
|
+// groupId: item.groupId,
|
|
|
+// loginNoStr: item.loginNoStr,
|
|
|
+// });
|
|
|
+// });
|
|
|
+// });
|
|
|
+// for (let i = 0; i < this.$refs.tree.store._getAllNodes().length; i++) {
|
|
|
+// if (s && v.o == this.$refs.tree.store._getAllNodes()[i].data.o) {
|
|
|
+// this.$refs.tree.store._getAllNodes()[i].expanded = true;
|
|
|
+// return;
|
|
|
+// }
|
|
|
+// }
|
|
|
+// },
|
|
|
+// },
|
|
|
+// created() {
|
|
|
+// console.log(this.treeList);
|
|
|
+// // this.getTree();
|
|
|
+// this.defaultListc = this.defaultList;
|
|
|
+// },
|
|
|
+// watch: {
|
|
|
+// filterText(val) {
|
|
|
+// this.$refs.tree.filter(val);
|
|
|
+// },
|
|
|
+// type() {
|
|
|
+// this.defaultListc = this.defaultList;
|
|
|
+// this.$forceUpdate();
|
|
|
+// },
|
|
|
+// defaultList() {
|
|
|
+// this.$forceUpdate();
|
|
|
+// },
|
|
|
+// closeList() {
|
|
|
+// this.$refs.tree.setCheckedNodes(this.closeList);
|
|
|
+// },
|
|
|
+// },
|
|
|
+// };
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.el-icon-caret-right {
|
|
|
+ color: #ccc;
|
|
|
+ margin: 0 5px;
|
|
|
+}
|
|
|
+.treebox {
|
|
|
+ border: 1px solid #ddd;
|
|
|
+}
|
|
|
+::v-deep .el-checkbox-group {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: baseline;
|
|
|
+ /* font-size: 38px; */
|
|
|
+ margin-left: 20px;
|
|
|
+}
|
|
|
+</style>
|