基于VUE2+el-tree-transfer的穿梭框实现

基于Vue2+el-tree-transfer的穿梭框实现

1. 达到的效果

源表列 , 目标列 : 分级展示树状图,多单选某子项 , 勾选父项默认勾选全部子项 , 可全选项目
左移: 将源表列移动添加到目标列-->左移之后,源表列的勾选项会消失,目标列会增加勾选项
右移: 则反向效果
保存会将目标列数据打印数据

2. 效果展示

在这里插入图片描述

3. 准备组件

前端引入: import treeTransfer from 'el-tree-transfer'
后端无组件引入,数据接口的开发

4.前端代码

4.1: 父级使用

 <el-dialog title="数据源配置" :visible.sync="dispositionDataShow" width="60%" >
      <CascaderTransfer
      :dispositionDataId="dispositionDataId"
      @closeDispositionDatDialog="closeDispositionDatDialog"
      :key="dialogKey"/>
    </el-dialog>
import CascaderTransfer from "./CascaderTransfer.vue";
components: { normalizedMonitoring, CascaderTransfer },

4.2: 具体穿梭框组件

<template>
  <div>
    <tree-transfer
     :from_data="fromData"
     :to_data="toData"
     :defaultProps="{ label: 'label' }"
     @add-btn="add"
     @remove-btn="remove"
     :mode="mode"
     height="540px"
     filter
     openAll
     >
</tree-transfer>
<div class="button-group">
      <!-- 确认按钮，添加加载状态 -->
      <el-button type="primary" @click="dispositionDataSubmit()"
        >确认</el-button
      >
      <el-button @click="cancel">取 消</el-button>
    </div>
  </div>
</template>
 
<script>
import treeTransfer from 'el-tree-transfer' // 引入
import { listIndicatorsTwo,saveDispositionData,getListDispositionByTemplateId } from "../js/index.js";

export default {
  props: {
    dispositionDataId: {
      type: String,
      default: '',
    },
  },
  data () {
    return {
      title: ['源列表', '目标列表'],
      mode: 'transfer', // transfer addressList
      fromData: [],
      toData: [],
      rightIds: [],
      form: {
        templateId: "",
        rightToLeft: [],
        leftToRight: [],
      },
    }
  },
  methods: {
    changeMode() {
      if (this.mode == "transfer") {
        this.mode = "addressList";
      } else {
        this.mode = "transfer";
      }
    },
    // 监听穿梭框组件添加
    add(fromData, toData, obj) {
      // 树形穿梭框模式transfer时，返回参数为左侧树移动后数据、右侧树移动后数据、移动的{keys,nodes,halfKeys,halfNodes}对象
      // 通讯录模式addressList时，返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
      console.log("fromData:", fromData);
      console.log("toData:", toData);
      console.log("obj:", obj);
    },
    // 监听穿梭框组件移除
    remove(fromData, toData, obj) {
      // 树形穿梭框模式transfer时，返回参数为左侧树移动后数据、右侧树移动后数据、移动的{keys,nodes,halfKeys,halfNodes}对象
      // 通讯录模式addressList时，返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
      console.log("fromData:", fromData);
      console.log("toData:", toData);
      console.log("obj:", obj);

    },
  generateData() {
      const data = [];
    },
    async  getDispositionByTemplateId() {
      getListDispositionByTemplateId(this.dispositionDataId).then((response) => {
        const dispositionData = response.data;
         this.toData = dispositionData.toData;
         this.toData.forEach((item) => {
        //el-tree-transfer组件的第一个pid必须为0
        item.pid = 0;
      });
      this.fromData = response.data.fromData;
        this.fromData.forEach((item) => {
        //el-tree-transfer组件的第一个pid必须为0
        item.pid = 0;
      });
      });
    },
    getLastLevelIds(nodes) {
      const result = [];
      nodes.forEach(node => {
        if (node.children && node.children.length > 0) {
          // 如果有子节点，递归处理子节点
          result.push(this.getLastLevelIds(node.children));
        } else {
          // 如果没有子节点，将该节点的 id 添加到结果数组中
          result.push(node.id);
        }
      });
      return result;
    },
    flattenNestedArray(arr) {
      let result = [];
      arr.forEach(item => {
        if (Array.isArray(item)) {
          // 如果元素是数组，递归调用 flattenNestedArray 方法
          result = result.concat(this.flattenNestedArray(item));
        } else {
          // 如果元素不是数组，直接添加到结果数组
          result.push(item);
        }
      });
      return result;
    },
    dispositionDataSubmit() {
      // 提交表单
      this.form.templateId = this.dispositionDataId;
       // 将  this.toData 循环出第三级的ID组合成新的数组
 
       this.form.leftToRight = this.flattenNestedArray(this.getLastLevelIds(this.toData));
       
       console.log("提交的参数"+this.form.leftToRight);
 
      saveDispositionData(this.form).then((response) => {
        this.msgSuccess("保存成功");
        this.$emit("closeDispositionDatDialog");
      });
    },
    cancel() {
      this.$emit("closeDispositionDatDialog");
    },
  },
  components: { treeTransfer }, // 注册
  mounted () {
  },
  async  created() {
    await  this.getDispositionByTemplateId();
    this.form.leftToRight = [];
    this.form.rightToLeft = [];
  },
}
</script>
 
<style>
</style>