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

element-ui for gov

import ElDialog from 'element-ui-for-gov/packages/dialog';
import ElTabs from 'element-ui-for-gov/packages/tabs';
import ElTabPane from 'element-ui-for-gov/packages/tabs/src/tab-pane';
import ElButton from 'element-ui-for-gov/packages/button';
import Message from 'element-ui-for-gov/packages/message';

import PickerPanel from './picker-panel';

export default {
  name: 'UserPicker',
  components: {ElDialog, ElTabs, ElTabPane, ElButton, PickerPanel},
  props: {
    title: {
      type: String,
      default: '选择人员'
    },
    visible: {
      type: Boolean
    },
    required: {
      type: Boolean,
      default: true
    },

    requiredTips: {
      type: String,
      default: '请选择人员'
    },

    userUniqueId: {type: String, default: 'id'},

    defaultChecked: {
      type: Array,
      default: () => []
    },

    tabs: {
      type: Array,
      default: () => []
    },

    confirmText: {
      type: String,
      default: '确定'
    },

    cancelText: {
      type: String,
      default: '取消'
    }
  },

  data() {
    return {
      checkedUsers: [],
      defaultCheckUsers: [],
      treeInstances: {}
    };
  },

  provide() {
    return {
      handleChangeUser: this.handleChangeUser,
      clearChecked: this.clearChecked,
      nodeKey: this.userUniqueId,
      setTreeInstance: this.setTreeInstance
    };
  },

  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.defaultCheckUsers = this.defaultChecked.slice();
        }
      },
      immediate: true
    }
  },

  methods: {
    getTreeInstance() {
      return this.treeInstances;
    },
    setTreeInstance(key, $tree) {
      this.treeInstances[key] = $tree;
      this.$emit('mounted-tree', {key, $tree});
    },
    handleChangeUser(users, deleteUsers = []) {
      const arr = [];
      let unique = {};
      this.checkedUsers.concat(users).forEach(user => {
        let del = deleteUsers.find(del => del[this.userUniqueId] === user[this.userUniqueId]);
        if (!unique[user[this.userUniqueId]] && !del) {
          arr.push(user);
          unique[user[this.userUniqueId]] = user;
        }
      });
      this.checkedUsers = arr;
    },

    clearChecked() {
      this.checkedUsers = [];
    },

    handleCancel(e) {
      this.checkedUsers = [];
      this.$emit('cancel');
    },
    handleConfirm() {
      if (this.required && this.checkedUsers.length === 0) {
        Message.error(this.requiredTips);
        return;
      }
      this.$emit('confirm', this.checkedUsers.slice(0));
      this.checkedUsers = [];
    }
  },

  render() {
    const { title, visible,
      checkedUsers,
      defaultCheckUsers,
      tabs,
      confirmText,
      cancelText
    } = this;

    return <ElDialog
      append-to-body={true}
      close-on-click-modal={false}
      title={title}
      visible={visible}
      {...{on: {'update:visible': this.handleCancel}}}
      width={'1000px'} >
      <div class="el-user-picker">
        {tabs.length > 1 && <ElTabs>
          {tabs.map(tab => (<ElTabPane key={tab.key} label={tab.title}>
            <PickerPanel defaultChecked={defaultCheckUsers} checkedUsers={checkedUsers} treeProps={tab} />
          </ElTabPane>))}
        </ElTabs> }
        {tabs.length === 1 && <PickerPanel defaultChecked={defaultCheckUsers} checkedUsers={checkedUsers} treeProps={tabs[0]} />}
      </div>

      <span class="dialog-footer" slot="footer">
        <ElButton {...{
          on: {
            click: this.handleCancel
          }
        }}>{cancelText}</ElButton>
        <ElButton type="primary" {...{
          on: {
            click: this.handleConfirm
          }
        }}>{confirmText}</ElButton>
      </span>
    </ElDialog>;
  }
};