Ant Design Vue Transfer 省市穿梭框

这是我参与8月更文挑战的第7天，活动详情查看：8月更文挑战

树形穿梭框

官方树穿梭框如下，左右是树结构，右边是列表。

本质上是有两套数据源，tree 使用的是树状数据源，transfer 使用的是列表数据源，将多维的树状数据源转为一维的，就是列表数据了。

具体使用可以查看官方文档之带搜索框的穿梭框

城市穿梭框

改造穿梭框的原因：

1. targetKeys只需要城市数据，不需要省份数据
2. 源穿梭框中，子节点和父节点没有关联选中关系，需要处理，毕竟省市级是需要联动的
3. 目标穿梭框，也要支持树状结构

主要实现功能点：

1. 树形结构数据处理：关键词过滤；已选数据禁用状态；
2. 实现父节点和节点的关联选中
3. 穿梭框右侧仅展示城市数据，不显示省份数据
4. 选中城市数据：带省级信息返回，满足接口要求，即返回树状结构

改造的本质：基于transfer的二次改造，主要是对数据的处理，组件基本没啥改变

组件参数和事件

自定义参数：考虑对外暴露的参数，参数的作用，属性等 自定义事件：考虑暴露出去的回调事件

// 自定义参数
export default {
  props: {
    dataSource: {
      // 数据源
      type: Array,
      default: () => [],
    },
    targetKey: {
      // 右侧框数据的 key 集合
      type: Array,
      default: () => [],
    },
  },
};

// handleChange回调函数：treeData-左侧树结构数据，toArray-右侧树结构数据，targetKeys-选中城市key集合
this.$emit("handleChange", this.treeData, toArray, this.targetKeys);

穿梭框处理

<template>
  <!-- 穿梭框组件，数据源为列表形式 -->
  <a-transfer
    class="mcd-transfer"
    ref="singleTreeTransfer"
    show-search
    :locale="localeConfig"
    :titles="['所有城市', '已选城市']"
    :data-source="transferDataSource"
    :target-keys="targetKeys"
    :render="(item) => item.label"
    :show-select-all="true"
    @change="handleTransferChange"
    @search="handleTransferSearch"
  >
    <template
      slot="children"
      slot-scope="{
        props: { direction, selectedKeys },
        on: { itemSelect, itemSelectAll },
      }"
    >
      <!-- 左边源数据框：树形控件 -->
      <a-tree
        v-if="direction === 'left'"
        class="mcd-tree"
        blockNode
        checkable
        :checked-keys="[...selectedKeys, ...targetKeys]"
        :expanded-keys="expandedKeys"
        :tree-data="treeData"
        @expand="handleTreeExpanded"
        @check="
          (_, props) => {
            handleTreeChecked(
              _,
              props,
              [...selectedKeys, ...targetKeys],
              itemSelect,
              itemSelectAll
            );
          }
        "
        @select="
          (_, props) => {
            handleTreeChecked(
              _,
              props,
              [...selectedKeys, ...targetKeys],
              itemSelect,
              itemSelectAll
            );
          }
        "
      />
    </template>
  </a-transfer>
</template>

数据源处理

1. 穿梭框数据处理（transferDataSource）：多维数据转为一维数据
2. 树数据处理（treeData）：数据源过滤处理，数据禁止操作处理

// 数据源示例
const dataSource = [
  {
    pid: "0",
    key: "1000",
    label: "黑龙江省",
    title: "黑龙江省",
    children: [
      {
        pid: "1000",
        key: "1028",
        label: "大兴安岭地区",
        title: "大兴安岭地区",
      },
    ],
  },
];

// ant-transfer穿梭框数据源
transferDataSource() {
  // 穿梭框数据源
  let transferDataSource = [];
  // 穿梭框数据转换，多维转为一维
  function flatten(list = []) {
    list.forEach((item) => {
      transferDataSource.push(item);
      // 子数据处理
      if (item.children && item.children.length) {
        flatten(item.children);
      }
    });
  }
  if (this.dataSource && this.dataSource.length) {
    flatten(JSON.parse(JSON.stringify(this.dataSource)));
  }
  return transferDataSource;
}

// ant-tree树数据源
treeData() {
  // 树形控件数据源
  const validate = (node, map) => {
    // 数据过滤处理 includes
    return node.title.includes(this.keyword);
  };
  const result = filterTree(
    this.dataSource,
    this.targetKeys,
    validate,
    this.keyword
  );
  return result;
}

// 树形结构数据过滤
const filterTree = (tree = [], targetKeys = [], validate = () => {}) => {
  if (!tree.length) {
    return [];
  }
  const result = [];
  for (let item of tree) {
    if (item.children && item.children.length) {
      let node = {
        ...item,
        children: [],
        disabled: targetKeys.includes(item.key), // 禁用属性
      };
      // 子级处理
      for (let o of item.children) {
        if (!validate.apply(null, [o, targetKeys])) continue;
        node.children.push({ ...o, disabled: targetKeys.includes(o.key) });
      }
      if (node.children.length) {
        result.push(node);
      }
    }
  }
  return result;
};

穿梭框事件处理

1. change 事件，回调数据（handleTransferChange）
2. search 搜索事件（handleTransferSearch）

// 穿梭框：change事件
handleTransferChange(targetKeys, direction, moveKeys) {
  // 过滤：避免头部操作栏“全选”将省级key选中至右边
  this.targetKeys = targetKeys.filter((o) => !this.pidKeys.includes(o));
  // 选中城市数据：带省级信息返回，满足接口要求
  const validate = (node, map) => {
    return map.includes(node.key) && node.title.includes(this.keyword);
  };
  let toArray = filterTree(this.dataSource, this.targetKeys, validate);
  // handleChange回调函数：treeData-左侧树结构数据，toArray-右侧树结构数据，targetKeys-选中城市key集合
  this.$emit("handleChange", this.treeData, toArray, this.targetKeys);
},

// 穿梭框：搜索事件
handleTransferSearch(dir, value) {
  if (dir === "left") {
    this.keyword = value;
  }
},

树事件

1. change 事件，处理父节点和子节点的联动关系（handleTreeChecked）
2. expand 事件：树的展开和收缩（handleTreeExpanded）

// 树形控件：change事件
handleTreeChecked(keys, e, checkedKeys, itemSelect, itemSelectAll) {
  const {
    eventKey,
    checked,
    dataRef: { children },
  } = e.node;
  if (this.pidKeys && this.pidKeys.includes(eventKey)) {
    // 父节点选中：将所有子节点也选中
    let childKeys = children ? children.map((item) => item.key) : [];
    if (childKeys.length) itemSelectAll(childKeys, !checked);
  }
  itemSelect(eventKey, !isChecked(checkedKeys, eventKey)); // 子节点选中
},
// 树形控件：expand事件
handleTreeExpanded(expandedKeys) {
  this.expandedKeys = expandedKeys;
},

清除事件

重新打开时，需要还原组件状态，例如滚动条位置，搜索框关键字等

handleReset() {
  this.keyword = "";
  this.$nextTick(() => {
    // 搜索框关键字清除
    const ele = this.$refs.singleTreeTransfer.$el.getElementsByClassName(
      "anticon-close-circle"
    );
    if (ele && ele.length) {
      ele[0] && ele[0].click();
      ele[1] && ele[1].click();
    }
    // 滚动条回到顶部
    if (this.$el.querySelector(".mcd-tree")) {
      this.$el.querySelector(".mcd-tree").scrollTop = 0;
    }
    // 展开数据还原
    this.expandedKeys = [];
  });
}

完整代码

1.工具函数

import * as R from "ramda";

// ====== 基础函数 ======
// 1. 树的遍历（深度优先遍历）
export const dfsTransFn = (tree, func) => {
  tree.forEach((node) => {
    func(node);
    // 如果子树存在，递归调用
    if (node.children?.length) {
      dfsTransFn(node.children, func);
    }
  });
  return tree;
};

// 2. 树结构转列表结构（深度优先递归）
export const dfsTreeToListFn = (tree = [], result = []) => {
  if (!tree?.length) {
    return [];
  }

  tree.forEach((node) => {
    result.push(node);
    node.children && dfsTreeToListFn(node.children, result);
  });
  return result;
};

// 树转列表（广度优先递归）
export const bfsTreeToListFn = (tree, result = []) => {
  let node,
    list = [...tree];
  while ((node = list.shift())) {
    result.push(node);
    // 如果子树存在，递归调用
    node.children && list.push(...node.children);
  }
  return result;
};

// 3. 列表结构转为树结构
export const listToTreeFn = (list) => {
  // 建立了id=>node的映射
  let obj = list.reduce(
    (map, node) => ((map[node.id] = node), (node.children = []), map),
    {}
  );
  return list.filter((node) => {
    // 寻找父元素的处理：
    // 1. 遍历list：时间复杂度是O(n)，而且在循环中遍历，总体时间复杂度会变成O(n^2)
    // 2. 对象取值：时间复杂度是O(1)，总体时间复杂度是O(n)
    obj[node.pid] && obj[node.pid].children.push(node);
    // 根节点没有pid，可当成过滤条件
    return !node.pid;
  });
};

// 4. 查找节点：判断某个节点是否存在
export const treeFindFn = (tree, func) => {
  for (let node of tree) {
    if (func(node)) return node;
    if (node.children) {
      let result = treeFindFn(node.children, func);
      if (result) return result;
    }
  }
  return null;
};

// 5. 查找节点路径（回溯法）
// 查找路径要使用先序遍历，维护一个队列存储路径上每个节点的id，假设节点就在当前分支，如果当前分支查不到，则回溯。
export const treeFindPathFn = (tree, func, path = []) => {
  if (!tree) return [];
  for (let node of tree) {
    path.push(node.id);
    if (func(node)) return path;
    if (node.children) {
      const findChild = treeFindPathFn(node.children, func, path);
      if (findChild.length) return findChild;
    }
    path.pop();
  }
  return [];
};

// ====== 实际应用函数 ======
// (1)树数据转化（遍历处理）
export const treeTransFn = (tree) => {
  if (!tree?.length) {
    return [];
  }
  return dfsTransFn(tree, (o) => {
    o["key"] = o.id;
    o["title"] = o.value;
  });
};

// (2)选中节点禁用（遍历处理）
export const disabledTreeFn = (tree, targetKeys) => {
  if (!tree.length) {
    return [];
  }
  if (!targetKeys.length) {
    return tree;
  }

  return R.forEach((o) => {
    let flag = targetKeys.includes(o.id);
    o["key"] = o.id;
    o["title"] = flag ? `${o.label}(已配置)` : o.label;
    o["disabled"] = flag;
    o.children && disabledTreeFn(o.children, targetKeys);
  }, R.clone(tree));
};

// (3)关键词过滤
export const filterKeywordTreeFn = (tree = [], keyword = "") => {
  if (!(tree && tree.length)) {
    return [];
  }
  if (!keyword) {
    return tree;
  }

  return R.filter((o) => {
    // 1. 父节点满足条件，直接返回
    if (o.title.includes(keyword)) {
      return true;
    }
    if (o.children?.length) {
      // 2. 否则，存在子节点时，递归处理
      o.children = filterKeywordTreeFn(o.children, keyword);
    }
    // 3. 子节点满足条件时，返回
    return o.children && o.children.length;
    // 避免修改原数据，此处用R.clone()处理一下
  }, R.clone(tree));
};

/**
 *   (3)选中节点过滤
 *  @params {Array} tree 树数据
 *  @params {Array} targetKeys 选中数据key集合
 * 描述：源数据处理，不展示选中节点
 * 过滤条件：当前节点且其后代节点都没有符合条件的数据
 */
export const filterSourceTreeFn = (tree = [], targetKeys = [], result = []) => {
  // 父节点和子节点都存在才返回
  R.forEach((o) => {
    // 1. 判断当前节点是否含符合条件的数据：是-继续；否-过滤
    if (targetKeys.indexOf(o.id) < 0) {
      // 2. 判断是否含有子节点：是-继续；否-直接返回
      if (o.children?.length) {
        // 3. 子节点递归处理
        o.children = filterSourceTreeFn(o.children, targetKeys);
        // 4. 存在子节点，且子节点也有符合条件的子节点，直接返回
        if (o.children.length) result.push(o);
      } else {
        result.push(o);
      }
    }
  }, R.clone(tree));
  return result;
};

// (4)选中节点保留：目标数据处理，仅仅展示选中节点
// 过滤条件：当前节点或者是其后代节点有符合条件的数据
export const filterTargetTreeFn = (tree = [], targetKeys = []) => {
  if (!(tree && tree.length)) {
    return [];
  }
  if (!targetKeys?.length) {
    return tree;
  }
  return R.filter((o) => {
    // 存在子节点时，递归处理
    if (o.children?.length) {
      o.children = filterTargetTreeFn(o.children, targetKeys);
    }
    return (
      R.indexOf(o.id, targetKeys) > -1 || (o.children && o.children.length)
    );
  }, R.clone(tree));
};

2. 组件封装

<template>
  <!-- 单树穿梭框：用于编辑地区->省市选择 -->
  <a-transfer
    class="mcd-transfer"
    ref="singleTreeTransfer"
    show-search
    :locale="localeConfig"
    :titles="['所有城市', '已选城市']"
    :data-source="transferDataSource"
    :target-keys="target_keys"
    :render="(item) => item.title"
    :show-select-all="true"
    @change="handleTransferChange"
    @search="handleTransferSearch"
  >
    <template
      slot="children"
      slot-scope="{
        props: { direction, selectedKeys },
        on: { itemSelect, itemSelectAll },
      }"
    >
      <!-- 树形控件 -->
      <a-tree
        v-if="direction === 'left'"
        class="mcd-tree"
        blockNode
        checkable
        :checked-keys="[...selectedKeys, ...target_keys]"
        :expanded-keys="expandedKeys"
        :tree-data="treeData"
        @expand="handleTreeExpanded"
        @check="
          (_, props) => {
            handleTreeChecked(
              _,
              props,
              [...selectedKeys, ...target_keys],
              itemSelect,
              itemSelectAll
            );
          }
        "
        @select="
          (_, props) => {
            handleTreeChecked(
              _,
              props,
              [...selectedKeys, ...target_keys],
              itemSelect,
              itemSelectAll
            );
          }
        "
      />
    </template>
  </a-transfer>
</template>

<script>
import { dfsTreeToListFn } from "./treeUtils";

function isChecked(selectedKeys, eventKey) {
  return selectedKeys.indexOf(eventKey) !== -1;
}

// 树形结构数据过滤
const filterTree = (tree = [], targetKeys = [], validate = () => {}) => {
  if (!tree.length) {
    return [];
  }
  const result = [];
  for (let item of tree) {
    if (item.children && item.children.length) {
      let node = {
        ...item,
        children: [],
        disabled: targetKeys.includes(item.key),
      };
      for (let o of item.children) {
        if (!validate.apply(null, [o, targetKeys])) continue;
        node.children.push({ ...o, disabled: targetKeys.includes(o.key) });
      }
      if (node.children.length) {
        result.push(node);
      }
    }
  }
  return result;
};

export default {
  name: "SingleTreeTransfer",
  props: {
    dataSource: {
      // 数据源
      type: Array,
      default: () => [],
    },
    targetKeys: {
      // 右侧框数据的 key 集合
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      localeConfig: {
        itemUnit: "项",
        itemsUnit: "项",
        notFoundContent: "暂无数据",
        searchPlaceholder: "输入关键字进行过滤",
      }, // 语言配置
      expandedKeys: [], // 展开key集合
      target_keys: [], // 已选城市数据的key集合
      keyword: "", // 搜索框关键字
    };
  },
  computed: {
    // 树形控件数据源
    treeData() {
      const validate = (node, map) => {
        return node.title.includes(this.keyword);
      };
      const result = filterTree(
        this.dataSource,
        this.target_keys,
        validate,
        this.keyword
      );
      return result;
    },
    // 列表结构数据源
    transferDataSource() {
      return dfsTreeToListFn(this.dataSource);
    },
    pidKeys() {
      // 所有pid为0的key集合
      let keys = [];
      if (this.dataSource && this.dataSource.length) {
        keys = this.dataSource.map((item) => item.key);
      }
      return keys;
    },
  },
  watch: {
    targetKeys: {
      handler: function(val) {
        this.target_keys = val;
        this.handleReset();
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    // 穿梭框：change事件
    handleTransferChange(targetKeys, direction, moveKeys) {
      // 过滤：避免头部操作栏“全选”将省级key选中至右边
      this.target_keys = targetKeys.filter((o) => !this.pidKeys.includes(o));
      // 选中城市数据：带省级信息返回，满足接口要求
      const validate = (node, map) => {
        return map.includes(node.key) && node.title.includes(this.keyword);
      };
      let toArray = filterTree(this.dataSource, this.target_keys, validate);
      // handleChange回调函数：treeData-左侧树结构数据，toArray-右侧树结构数据，targetKeys-选中城市key集合
      this.$emit("handleChange", this.treeData, toArray, this.target_keys);
    },
    // 穿梭框：搜索事件
    handleTransferSearch(dir, value) {
      if (dir === "left") {
        this.keyword = value;
      }
    },
    // 树形控件：change事件
    handleTreeChecked(keys, e, checkedKeys, itemSelect, itemSelectAll) {
      const {
        eventKey,
        checked,
        dataRef: { children },
      } = e.node;
      if (this.pidKeys && this.pidKeys.includes(eventKey)) {
        // 父节点选中：将所有子节点也选中
        let childKeys = children ? children.map((item) => item.key) : [];
        if (childKeys.length) itemSelectAll(childKeys, !checked);
      }
      itemSelect(eventKey, !isChecked(checkedKeys, eventKey)); // 子节点选中
    },
    // 树形控件：expand事件
    handleTreeExpanded(expandedKeys) {
      this.expandedKeys = expandedKeys;
    },
    // 清除事件
    handleReset() {
      this.keyword = "";
      this.$nextTick(() => {
        // 搜索框关键字清除
        const ele = this.$refs.singleTreeTransfer.$el.getElementsByClassName(
          "anticon-close-circle"
        );
        if (ele && ele.length) {
          ele[0] && ele[0].click();
          ele[1] && ele[1].click();
        }
        // 滚动条回到顶部
        if (this.$el.querySelector(".mcd-tree")) {
          this.$el.querySelector(".mcd-tree").scrollTop = 0;
        }
      });
    },
  },
};
</script>

<style lang="scss">
$px: 1px;
.mcd {
  &-transfer {
    .ant-transfer-list {
      flex: 1;
    }
    .ant-transfer-list-content {
      height: 660 * $px;
      overflow-y: auto;
      margin: 12 * $px 12 * $px 0 0;
    }
  }
  &-tree {
    height: 660 * $px;
    overflow-y: auto;
  }
}
</style>