|
|
@@ -0,0 +1,423 @@
|
|
|
+<template>
|
|
|
+ <!-- 自定义树形穿梭框组件、理论上左右均可选择是否为树形结构，目前固定为左侧树形、右侧无层级结构 -->
|
|
|
+ <div class="tree-transfer">11111111111111111111</div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ components: {},
|
|
|
+ props: {},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ yuansiData: [],
|
|
|
+ dataLeft: [],
|
|
|
+ dataRight: [],
|
|
|
+ kxyzList: [
|
|
|
+ {
|
|
|
+ bsm: "BWG",
|
|
|
+ yxyzmc: "博物馆",
|
|
|
+ level: 1,
|
|
|
+ parent_bsm: "GGFWSS",
|
|
|
+ has_yxz: true,
|
|
|
+ spatial_type: "identity",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ bsm: "CZKFBJ",
|
|
|
+ yxyzmc: "城镇开发边界",
|
|
|
+ level: 1,
|
|
|
+ parent_bsm: "DXGK",
|
|
|
+ has_yxz: false,
|
|
|
+ spatial_type: "contain",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ bsm: "DL",
|
|
|
+ yxyzmc: "电力",
|
|
|
+ level: 2,
|
|
|
+ parent_bsm: "GX",
|
|
|
+ has_yxz: true,
|
|
|
+ spatial_type: "identity",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ bsm: "DX",
|
|
|
+ yxyzmc: "电信",
|
|
|
+ level: 2,
|
|
|
+ parent_bsm: "GX",
|
|
|
+ has_yxz: true,
|
|
|
+ spatial_type: "identity",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ bsm: "DXGK",
|
|
|
+ yxyzmc: "底线管控",
|
|
|
+ level: 0,
|
|
|
+ parent_bsm: null,
|
|
|
+ has_yxz: null,
|
|
|
+ spatial_type: null,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ bsm: "GGFWSS",
|
|
|
+ yxyzmc: "公共服务设施",
|
|
|
+ level: 0,
|
|
|
+ parent_bsm: null,
|
|
|
+ has_yxz: null,
|
|
|
+ spatial_type: null,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ bsm: "GL",
|
|
|
+ yxyzmc: "公路",
|
|
|
+ level: 2,
|
|
|
+ parent_bsm: "JT",
|
|
|
+ has_yxz: true,
|
|
|
+ spatial_type: "identity",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ bsm: "GS",
|
|
|
+ yxyzmc: "供水",
|
|
|
+ level: 2,
|
|
|
+ parent_bsm: "GX",
|
|
|
+ has_yxz: true,
|
|
|
+ spatial_type: "identity",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ bsm: "GX",
|
|
|
+ yxyzmc: "管线",
|
|
|
+ level: 1,
|
|
|
+ parent_bsm: "SZSS",
|
|
|
+ has_yxz: null,
|
|
|
+ spatial_type: null,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ bsm: "GY",
|
|
|
+ yxyzmc: "公园",
|
|
|
+ level: 1,
|
|
|
+ parent_bsm: "GGFWSS",
|
|
|
+ has_yxz: true,
|
|
|
+ spatial_type: "identity",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ bsm: "JT",
|
|
|
+ yxyzmc: "交通",
|
|
|
+ level: 1,
|
|
|
+ parent_bsm: "SZSS",
|
|
|
+ has_yxz: null,
|
|
|
+ spatial_type: null,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ bsm: "JYZ",
|
|
|
+ yxyzmc: "加油站",
|
|
|
+ level: 2,
|
|
|
+ parent_bsm: "JT",
|
|
|
+ has_yxz: true,
|
|
|
+ spatial_type: "identity",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ bsm: "LD",
|
|
|
+ yxyzmc: "绿地",
|
|
|
+ level: 1,
|
|
|
+ parent_bsm: "GGFWSS",
|
|
|
+ has_yxz: true,
|
|
|
+ spatial_type: "identity",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ bsm: "LJCLSS",
|
|
|
+ yxyzmc: "垃圾处理设施",
|
|
|
+ level: 2,
|
|
|
+ parent_bsm: "QT",
|
|
|
+ has_yxz: true,
|
|
|
+ spatial_type: "identity",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ bsm: "PS",
|
|
|
+ yxyzmc: "排水",
|
|
|
+ level: 2,
|
|
|
+ parent_bsm: "GX",
|
|
|
+ has_yxz: true,
|
|
|
+ spatial_type: "identity",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ bsm: "QT",
|
|
|
+ yxyzmc: "其他",
|
|
|
+ level: 1,
|
|
|
+ parent_bsm: "SZSS",
|
|
|
+ has_yxz: null,
|
|
|
+ spatial_type: null,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ bsm: "RQ",
|
|
|
+ yxyzmc: "燃气",
|
|
|
+ level: 2,
|
|
|
+ parent_bsm: "GX",
|
|
|
+ has_yxz: true,
|
|
|
+ spatial_type: "identity",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ bsm: "STBHHX",
|
|
|
+ yxyzmc: "生态保护红线",
|
|
|
+ level: 1,
|
|
|
+ parent_bsm: "DXGK",
|
|
|
+ has_yxz: false,
|
|
|
+ spatial_type: "contain",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ bsm: "SY",
|
|
|
+ yxyzmc: "输油",
|
|
|
+ level: 2,
|
|
|
+ parent_bsm: "GX",
|
|
|
+ has_yxz: true,
|
|
|
+ spatial_type: "identity",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ bsm: "SZSS",
|
|
|
+ yxyzmc: "市政设施",
|
|
|
+ level: 0,
|
|
|
+ parent_bsm: null,
|
|
|
+ has_yxz: null,
|
|
|
+ spatial_type: null,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ bsm: "TCC",
|
|
|
+ yxyzmc: "停车场",
|
|
|
+ level: 2,
|
|
|
+ parent_bsm: "JT",
|
|
|
+ has_yxz: true,
|
|
|
+ spatial_type: "identity",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ bsm: "TL",
|
|
|
+ yxyzmc: "铁路",
|
|
|
+ level: 2,
|
|
|
+ parent_bsm: "JT",
|
|
|
+ has_yxz: true,
|
|
|
+ spatial_type: "identity",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ bsm: "TSG",
|
|
|
+ yxyzmc: "图书馆",
|
|
|
+ level: 1,
|
|
|
+ parent_bsm: "GGFWSS",
|
|
|
+ has_yxz: true,
|
|
|
+ spatial_type: "identity",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ bsm: "TYG",
|
|
|
+ yxyzmc: "体育馆",
|
|
|
+ level: 1,
|
|
|
+ parent_bsm: "GGFWSS",
|
|
|
+ has_yxz: true,
|
|
|
+ spatial_type: "identity",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ bsm: "WSCLC",
|
|
|
+ yxyzmc: "污水处理厂",
|
|
|
+ level: 2,
|
|
|
+ parent_bsm: "QT",
|
|
|
+ has_yxz: true,
|
|
|
+ spatial_type: "identity",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ bsm: "XX",
|
|
|
+ yxyzmc: "学校",
|
|
|
+ level: 1,
|
|
|
+ parent_bsm: "GGFWSS",
|
|
|
+ has_yxz: true,
|
|
|
+ spatial_type: "identity",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ bsm: "YJJBNT",
|
|
|
+ yxyzmc: "永久基本农田",
|
|
|
+ level: 1,
|
|
|
+ parent_bsm: "DXGK",
|
|
|
+ has_yxz: false,
|
|
|
+ spatial_type: "identity",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ bsm: "YY",
|
|
|
+ yxyzmc: "医院",
|
|
|
+ level: 1,
|
|
|
+ parent_bsm: "GGFWSS",
|
|
|
+ has_yxz: true,
|
|
|
+ spatial_type: "identity",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ bsm: "ZRWHBHQ",
|
|
|
+ yxyzmc: "自然文化保护区",
|
|
|
+ level: 1,
|
|
|
+ parent_bsm: "DXGK",
|
|
|
+ has_yxz: false,
|
|
|
+ spatial_type: "identity",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ bsm: "ZYCRK",
|
|
|
+ yxyzmc: "主要出入口",
|
|
|
+ level: 2,
|
|
|
+ parent_bsm: "JT",
|
|
|
+ has_yxz: true,
|
|
|
+ spatial_type: "identity",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ defaultProps: {
|
|
|
+ children: "children",
|
|
|
+ label: "yxyzmc",
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ // mounted() {},
|
|
|
+ mounted() {
|
|
|
+ // this.dataLeft = this.datas;
|
|
|
+ // let aaa = []
|
|
|
+ // this.defaultProps.forEach(el => {
|
|
|
+
|
|
|
+ // });
|
|
|
+
|
|
|
+ // function flatToTree(flatData, level = 0) {
|
|
|
+ // const tree = [];
|
|
|
+
|
|
|
+ // // 遍历flatData，找到level对应的子节点
|
|
|
+ // for (const node of flatData) {
|
|
|
+ // if (node.level === level) {
|
|
|
+ // // 递归查找子节点
|
|
|
+ // const children = flatToTree(flatData, node.level);
|
|
|
+
|
|
|
+ // // 如果有子节点，则加入children属性中
|
|
|
+ // if (children.length > 0) {
|
|
|
+ // node.children = children;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // // 加入tree中
|
|
|
+ // tree.push(node);
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+
|
|
|
+ // return tree;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // const treeData = flatToTree(this.kxyzList);
|
|
|
+ // console.log(treeData); // 输出转换得到的Tree数据
|
|
|
+
|
|
|
+ // 定义一个新数组
|
|
|
+ var chapterTree = [];
|
|
|
+ this.kxyzList.forEach((c) => {
|
|
|
+ // 给扁平数据数组的每一个内容项加上一个children属性,属性值为[]
|
|
|
+ c.children = [];
|
|
|
+ if (c.level == 0) {
|
|
|
+ // 把没有父级的内容项添加到chapterTree新数组中，定义所有的初级父级
|
|
|
+ // 之后，往这些初级父级的children属性中添加内容项，见下面的else判断
|
|
|
+ chapterTree.push(c);
|
|
|
+ } else {
|
|
|
+ // 通过当前遍历的每一个内容项的pid属性,在flatArray数组中，通过level属性寻找其父级
|
|
|
+ const theparent = this.kxyzList.find(function (item) {
|
|
|
+ return item.bsm === c.parent_bsm;
|
|
|
+ });
|
|
|
+ console.log(theparent,'00000');
|
|
|
+ // 把当前遍历的内容项，添加到父级的children属性中去
|
|
|
+ theparent.children.push(c);
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ console.log(chapterTree);
|
|
|
+
|
|
|
+ // this.yuansiData = JSON.parse(JSON.stringify(this.datas));
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ add() {
|
|
|
+ // 定义一个递归过滤的方法，用来删掉父级中给的元素
|
|
|
+ // 获取所有选中的项并且去掉父级
|
|
|
+ let list = this.$refs.treeLeft.getCheckedNodes();
|
|
|
+ // 走原始数据中删掉已经选择的
|
|
|
+ // 1.父级的删除
|
|
|
+ const parList = list.filter((item) => {
|
|
|
+ return item.parameterInfoList;
|
|
|
+ });
|
|
|
+ for (let item1 of parList) {
|
|
|
+ let index = this.dataLeft.findIndex((item2) => {
|
|
|
+ return item2.id == item1.id;
|
|
|
+ });
|
|
|
+ if (index >= 0) {
|
|
|
+ this.dataLeft.splice(index, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 2.子级的删除
|
|
|
+ list = list.filter((item) => {
|
|
|
+ return !item.parameterInfoList;
|
|
|
+ });
|
|
|
+ // 这里做了三重循环，如果有可能需要对其进行优化
|
|
|
+ for (let item of list) {
|
|
|
+ for (let ind in this.dataLeft) {
|
|
|
+ if (this.dataLeft[ind].parameterInfoList.length) {
|
|
|
+ let index = this.dataLeft[ind].parameterInfoList.findIndex(
|
|
|
+ (item2) => {
|
|
|
+ return item2.id == item.id;
|
|
|
+ }
|
|
|
+ );
|
|
|
+ if (index >= 0) {
|
|
|
+ this.dataLeft[ind].parameterInfoList.splice(index, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.$refs.treeLeft.setCheckedNodes([]);
|
|
|
+ // 将选择的项添加到右侧
|
|
|
+ this.dataRight.push(...list);
|
|
|
+ },
|
|
|
+ remove() {
|
|
|
+ // 从右侧移除时的方法
|
|
|
+ // 1.从右侧删除选中的数据
|
|
|
+ let list = this.$refs.treeRight.getCheckedNodes();
|
|
|
+ for (let item of list) {
|
|
|
+ let index = this.dataRight.findIndex((item2) => {
|
|
|
+ return item.id == item2.id;
|
|
|
+ });
|
|
|
+ if (index >= 0) {
|
|
|
+ this.dataRight.splice(index, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 2.把右侧删除的数据添加给左侧,但是要注意父级的问题
|
|
|
+ this.dataLeft = JSON.parse(JSON.stringify(this.yuansiData));
|
|
|
+ for (let index in this.dataLeft) {
|
|
|
+ // 如果有子级去删除子级
|
|
|
+ for (let item of this.dataRight) {
|
|
|
+ let ind = this.dataLeft[index].parameterInfoList.findIndex(
|
|
|
+ (item2) => {
|
|
|
+ return item2.id == item.id;
|
|
|
+ }
|
|
|
+ );
|
|
|
+ if (ind >= 0) {
|
|
|
+ this.dataLeft[index].parameterInfoList.splice(ind, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.dataLeft = this.dataLeft.filter((item2) => {
|
|
|
+ return item2.parameterInfoList.length != 0;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getResult() {
|
|
|
+ return this.dataRight;
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.tree-transfer {
|
|
|
+ display: flex;
|
|
|
+ min-height: 250px;
|
|
|
+ .tree-transfer-left {
|
|
|
+ min-width: 200px;
|
|
|
+ border: 1px #e5e5e5 solid;
|
|
|
+ border-radius: 10px;
|
|
|
+ padding: 10px;
|
|
|
+ }
|
|
|
+ .tree-transfer-middle {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ min-width: 120px;
|
|
|
+ }
|
|
|
+ .tree-transfer-right {
|
|
|
+ min-width: 200px;
|
|
|
+ border: 1px #e5e5e5 solid;
|
|
|
+ border-radius: 10px;
|
|
|
+ padding: 10px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
