element-ui-for-gov/packages/user-picker/src/transfer.js

element-ui for gov

import ElRow from 'element-ui-for-gov/packages/row';
import ElCol from 'element-ui-for-gov/packages/col';
import ElButton from 'element-ui-for-gov/packages/button';
import ElTree from 'element-ui-for-gov/packages/tree';
import Store from 'element-ui-for-gov/src/utils/tree-store';

import SectionHeader from './section-header';
import SelectedList from './selected-list';

const prefix = 'el-user-picker';
export default {
  name: 'Transfer',
  inject: ['handleChangeUser', 'clearChecked', 'nodeKey', 'setTreeInstance'],
  props: {
    treeProps: Object,
    fieldNames: Object,
    grid: Object,
    checkedUsers: Array,
    filterNodeMethod: Function,
    defaultChecked: Array
  },
  components: {ElRow, ElCol, ElButton, ElTree, SectionHeader, SelectedList},
  data() {
    return {
      treeData: [],
      store: null,
      totalData: [],
      prevChecked: []
    };
  },
  created() {
    const {lazy, loadData, children, disabled} = this.treeProps;
    const {fieldNames} = this;
    this.store = new Store({
      key: this.nodeKey,
      label: data => data[fieldNames.parent] || data[fieldNames.userName],
      isLeaf: (data) => !!data[fieldNames.userName],
      children: children || 'children',
      disabled: disabled || 'disabled',
      data: []
    });
    !lazy ? loadData().then((data) => {
      this.store.initData(data);
      this.treeData = this.store.data;
      this.totalData = this.treeData;
      this.setDefaultChecked(this.defaultChecked);
    }) : this.setDefaultChecked(this.defaultChecked);
  },

  mounted() {
    this.setTreeInstance(this.treeProps.key, this);
  },

  watch: {
    defaultChecked(users) {
      this.$nextTick(() => {
        this.setDefaultChecked(users);
      });
    },
    checkedUsers(arr) {
      let nodes = [];
      arr.forEach(item => {
        const cache = this.store.getNodes(item);
        nodes = nodes.concat(cache);
      });
      this.prevChecked = [].concat(nodes);
      // console.log('selected nodes: ', nodes);
      this.$nextTick(() => {
        this.setCheckedNodes(nodes);
      });
    }
  },
  methods: {
    setDefaultChecked(keys) {
      // console.log(ids);
      let users = [];
      keys.forEach(user => {
        // console.log(user);
        let nodes = typeof user === 'object' ? [{data: user}] : this.store.getNodesByKey(user);
        if (nodes.length) {
          users.push(nodes[0].data);
        }
      });
      this.handleChangeUser(users);
    },
    handleCheck(node, {checkedNodes}) {
      // console.log(this.prevChecked, checkedNodes);
      const deleteArr = this.store.difference(this.prevChecked, checkedNodes.filter(node => node.isLeaf));
      // console.log(deleteArr);
      const users = checkedNodes.filter(node => node.isLeaf).map(item => item.data);
      const deleteUsers = deleteArr.filter(node => node.isLeaf).map(item => item.data);
      this.handleChangeUser(users, deleteUsers);
    },
    getCheckedNodes() {
      const nodes = this.$refs['tree'].getCheckedNodes();
      const users = nodes.filter(node => node.isLeaf).map(item => item.data);
      this.handleChangeUser(users, []);
    },
    checkAll() {
      // console.log('checkAll');
      const {checkAllMethod} = this.treeProps;
      if (checkAllMethod) {
        checkAllMethod(this, (users) => {
          this.handleChangeUser(users);
        });
      } else {
        const users = [];
        const traverse = (arr) => {
          arr.forEach(item => {
            if (item.isLeaf && !item.disabled) {
              users.push(item.data);
            } else if (item.children) {
              traverse(item.children);
            }
          });
        };
        traverse(this.totalData);
        this.handleChangeUser(users);
      }
    },
    setCheckedNodes(nodes) {
      this.$refs['tree'].setCheckedNodes(nodes);
    },
    filter(value) {
      this.$refs['tree'].filter(value);
    },

    setTreeData(data) {
      this.store.initData(data, this.treeProps.lazy);
      this.treeData = this.store.data;
      this.setDefaultChecked(this.defaultChecked);
    },

    loadDataAsync(node, resolve, isCheck) {
      const {loadDataAsync} = this.treeProps;
      // console.log('load', node);
      loadDataAsync(node.data ? node.data : node, data => {
        if (data && data.length > 0) {
          const childList = data.map(item => {
            return this.store.registerNode(item);
          });
          this.totalData = this.totalData.concat(childList);
          if (!isCheck) {
            this.setDefaultChecked(this.defaultChecked);
          } else {
            const selectList = childList.filter((node) => {
              return !node.disabled && node.isLeaf;
            }).map((node) => {
              return node.key;
            });
            this.defaultChecked.forEach((item) => {
              if (!selectList.includes(item)) {
                selectList.push(item);
              }
            });
            this.setDefaultChecked(selectList);
          }
          return resolve(childList);
        } else {
          return resolve([]);
        }
      });
    }
  },

  render() {
    const {treeData, fieldNames, treeProps, checkedUsers, $slots} = this;
    return (<ElRow>
      <ElCol span={10}>
        <div class={`${prefix}__section-wrapper`}>
          <SectionHeader title="待选列表" />
          {$slots.filter && <div class="filter-wrapper">{$slots.filter}</div> }
          <div class={`${prefix}__section-content`}>
            <ElTree ref="tree"
              lazy={treeProps.lazy}
              data={treeData}
              nodeKey="id"
              load={this.loadDataAsync}
              props={{
                isLeaf: item => item.isLeaf
              }}
              show-checkbox
              expand-on-check={treeProps.lazy}
              filterNodeMethod={this.filterNodeMethod}
              {...{
                on: {
                  // 'check-change': treeProps.lazy ? this.handleCheckChange : this.getCheckedNodes,
                  'node-expand': treeProps.lazy ? this.getCheckedNodes : () => {},
                  'check': this.handleCheck
                }
              }}
            />
          </div>
        </div>
      </ElCol>
      <ElCol span={4} class={`${prefix}__section-btns`}>
        <ElButton {...{on: {click: this.checkAll}}}>全选<i class="el-icon-arrow-right"/></ElButton>
        <br />
        <ElButton {...{on: {click: this.clearChecked}}}>清空已选</ElButton>
      </ElCol>
      <ElCol span={10}>
        <SelectedList checkedUsers={checkedUsers} label={fieldNames.userName} />
      </ElCol>
    </ElRow>);
  }
};