|
|
@@ -0,0 +1,131 @@
|
|
|
+<template>
|
|
|
+ <div class="tree">
|
|
|
+ <a-tree
|
|
|
+ v-if="treeData && treeData.length > 0"
|
|
|
+ :tree-data="treeData"
|
|
|
+ :title="'11'"
|
|
|
+ :replaceFields="replaceFields"
|
|
|
+ @select="onSelect"
|
|
|
+ :checkable="checkable"
|
|
|
+ @check="onCheck"
|
|
|
+ v-model="checkList"
|
|
|
+ :auto-expand-parent="autoExpandParent"
|
|
|
+ :expanded-keys="expandedKeys"
|
|
|
+ @expand="onExpand"
|
|
|
+ ref="tree"
|
|
|
+ :load-data="onLoadData"
|
|
|
+ >
|
|
|
+ <template slot="custom" slot-scope="item">
|
|
|
+ <span>{{ item }}</span>
|
|
|
+ <!-- <span style="color: #f50">({{ item.num }})</span> -->
|
|
|
+ </template>
|
|
|
+ </a-tree>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+ <script>
|
|
|
+// import mixin from "../../minins/mixin";
|
|
|
+import { mapState } from "vuex";
|
|
|
+export default {
|
|
|
+ name: "FormRow",
|
|
|
+ // mixins: [mixin],
|
|
|
+ props: {
|
|
|
+ checkable: {
|
|
|
+ default: false,
|
|
|
+ },
|
|
|
+ // defaultCheckList: {
|
|
|
+ // default: [],
|
|
|
+ // },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ treeData: [],
|
|
|
+ replaceFields: {
|
|
|
+ children: "children",
|
|
|
+ title: "name",
|
|
|
+ key: "id",
|
|
|
+ },
|
|
|
+ checkList: [],
|
|
|
+ autoExpandParent: true,
|
|
|
+ expandedKeys: [],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState("setting", ["userInfo"]),
|
|
|
+ },
|
|
|
+ watch: {},
|
|
|
+ created() {},
|
|
|
+ mounted() {
|
|
|
+ this.getUserTree();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ onExpand(expandedKeys) {
|
|
|
+ this.expandedKeys = expandedKeys;
|
|
|
+ //expandedKeys
|
|
|
+ this.autoExpandParent = true;
|
|
|
+ },
|
|
|
+ setExpandKys(item) {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ // this.$refs.tree.expandedKeys = ["99D17"];
|
|
|
+ // this.$refs.tree.defaultExpandedKeys = ["99D17"];
|
|
|
+ // console.log(this.$refs.tree);
|
|
|
+ // this.expandedKeys = ["99D17"];
|
|
|
+ // this.checkList = ["99D17"];
|
|
|
+ this.$API.sysManage
|
|
|
+ .getUserItem({
|
|
|
+ userId: item.userId,
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ if (res.data.code === 200) {
|
|
|
+ this.expandedKeys = res.data.data.deptIds;
|
|
|
+ this.checkList = res.data.data.deptIds;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getUserTree() {
|
|
|
+ // console.log(this.userInfo);
|
|
|
+ this.$API.business.findNextAgentTree({}).then((res) => {
|
|
|
+ if (res.data.code === 200) {
|
|
|
+ this.treeData = res.data.data;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ onLoadData(treeNode) {
|
|
|
+ return new Promise((resolve) => {
|
|
|
+ if (treeNode.dataRef.children) {
|
|
|
+ resolve();
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.$API.business
|
|
|
+ .findNextAgentTree({ pid: treeNode.eventKey })
|
|
|
+ .then((res) => {
|
|
|
+ if (res.data.code === 200) {
|
|
|
+ treeNode.dataRef.children = [...res.data.data];
|
|
|
+ // this.treeData = [];
|
|
|
+ this.treeData = [...this.treeData];
|
|
|
+ resolve();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ onSelect(keys) {
|
|
|
+ this.$emit("getList", keys[0]);
|
|
|
+ },
|
|
|
+ onCheck(checkedKeys) {
|
|
|
+ this.$emit("checkTree", checkedKeys);
|
|
|
+
|
|
|
+ // this.checkedKeys = checkedKeys;
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+ <style lang="less" scoped>
|
|
|
+.tree {
|
|
|
+ height: 900px;
|
|
|
+ overflow-y: auto;
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|