laws_weilai/jero-web/src/components/PersonnelSelection/index.vue

<template>
  <div>
    <div class="box-title-text" v-if="!isInput">
      <a-input class="box-input" :value="value" @input="indexclick($event)"
               :disabled="true"
               :placeholder="$t('PleaseSelect')+query.db_field_txt"/>
      <a-button type="primary" class="button-box" @click="standardClick">
        {{this.$t('PersonnelSelection')}}
      </a-button>
    </div>
    <div class="box-title-text" v-if="isInput">
      <a-input class="box-input" :value="value"
               readonly
               @click.native="standardClick"
               :placeholder="$t('PleaseSelect')+query.db_field_txt"/>
    </div>
    <a-drawer
      :title="$t('PersonnelSelection')"
      :maskClosable="false"
      :width="600"
      placement="right"
      :closable="true"
      @close="handleCancel"
      :visible="visible"
      style="height: 100%;overflow: auto;padding-bottom: 53px;">
      <a-input-search style="margin-bottom: 8px" :placeholder="$t('NodeQuickLookup')"
                      v-model="searchModel" @search="onSearch"/>
      <div class="drawer-content">
        <a-tree
          style="margin-bottom: 60px;height: 600px"
          v-if="treeVisible"
          checkable
          checkStrictly
          :loading="loading"
          :tree-data="gData"
          @check="onCheck"
          @expand="onExpand"
          v-model:checkedKeys="defaultCheckedKeys"
          :defaultExpandedKeys="defaultExpandedKeys"
        >
        </a-tree>
      </div>

      <div class="drawer-bootom-button">
        <a-button @click="handleCancel" type="danger" style="margin-right: 16px">{{$t('cancel')}}</a-button>
        <a-button @click="handleSubmit" type="primary">{{$t('submit')}}</a-button>
      </div>
    </a-drawer>
  </div>
</template>

<script>
  import { getAction, postAction } from '@/api/manage'

  export default {
    name: 'index',
    props: ['query', 'value', 'personneQuery', 'isSingleChoice', 'isInput'],
    data() {
      return {
        loading: true,
        gData: [],
        autoExpandParent: true,
        expandedKeys: [],
        visible: false,
        treeVisible: false,
        confirmLoading: false,
        departId: '',
        selectedKey: [],
        userIds: [],
        searchModel: '',
        defaultExpandedKeys: [],
        defaultCheckedKeys: [],
        content: []
      }
    },
    mounted() {

    },
    methods: {
      standardClick() {
        this.treeVisible = false
        this.departId = ''
        this.searchModel = ''
        this.userIds = []
        this.userName = []
        this.queryDepartUserTreeList()
        this.visible = true
      },
      // onSelect(selectedKeys, info) {
      //   console.log(selectedKeys)
      //   this.selectedKey = selectedKeys
      // },

      onCheck(checkedKeys, info) {
        this.userIds = checkedKeys.checked
        this.userName = []
        if (info.checkedNodes && info.checkedNodes.length > 0) {
          info.checkedNodes.forEach(res => {
            if (res.data.props.dataRef.key) {
              this.content.push({
                id: res.data.props.dataRef.key,
                title: res.data.props.dataRef.title
              })
            } else {
              this.content.push({
                id: res.data.props.id,
                title: res.data.props.title
              })
            }
          })
        }
        if (this.content && this.content.length > 0) {
          for (let i = 0; i < this.content.length; i++) {
            for (let j = i + 1; j < this.content.length; j++) {
              if (this.content[i].id == this.content[j].id) {
                this.content.splice(j, 1)
                j--
              }
            }
          }
          this.userIds.forEach(res => {
            this.content.forEach(val => {
              if (res == val.id) {
                this.userName.push(val.title)
              }
            })
          })
        }
      },
      handleCancel() {
        this.visible = false
        this.treeVisible = false
      },
      handleSubmit() {
        if (this.userIds && this.userIds.length > 0) {
          if (this.isSingleChoice) {
            if (this.userIds.length > 1) {
              this.$message.warning(this.$t('onlyOnePersonCanBeSelected'))
              return
            }
          }
          let userIds = JSON.parse(JSON.stringify(this.userIds))
          let userName = JSON.parse(JSON.stringify(this.userName))
          this.$emit('input', userName.join(','))
          this.$emit('change', this.query.db_field_name, userIds.join(','))
          this.visible = false
          this.treeVisible = false
        } else {
          this.$message.warning(this.$t('pleaseSelectPersonFirst'))
        }
      },
      indexclick(event) {
        this.$emit('input', event.target.value)
      },
      onSearch(e) {
        this.gData = []
        this.departId = ''
        this.visibleTree = false
        if (e) {
          this.getUserAndDepart()
        } else {
          this.queryDepartUserTreeList()
        }
      },
      getUserAndDepart() {
        getAction('sys/user/getUserAndDepart', { name: this.searchModel }).then((res) => {
          this.gData = res || []
          this.visibleTree = true
        })
      },
      onExpand(selectedKeys, val) {
        if (this.searchModel == '' || !this.searchModel) {
          if (val.expanded) {
            if (this.departId == val.node.value) {
            } else {
              this.departId = val.node.value
              this.queryDepartUserTreeList()
            }
          }
        }
      },
      queryDepartUserTreeList() {
        let gData = JSON.parse(JSON.stringify(this.gData))
        if (gData && gData.length > 0) {
          gData = JSON.stringify(gData)
        } else {
          gData = ''
        }
        this.confirmLoading = true
        postAction('sys/user/queryDepartUserTreeList', {
          departId: this.departId,
          json: gData,
          flag: '1'
        }).then((res) => {
          this.confirmLoading = false
          if (res.success) {
            this.gData = res.result
            this.defaultExpandedKeys = [this.departId]
            if (this.userName && this.userName.length == 0) {
              if (this.personneQuery[this.query.db_field_name + 'Name']) {
                this.userName = this.personneQuery[this.query.db_field_name + 'Name'].split(',')
              } else if (this.personneQuery[this.query.db_field_name]) {
                this.userName = this.personneQuery[this.query.db_field_name].split(',')
              } else {
                this.userName = []
              }
            }
            if (this.userIds && this.userIds.length == 0) {
              if (this.personneQuery[this.query.db_field_name + '_id']) {
                this.userIds = this.personneQuery[this.query.db_field_name + '_id'].split(',')
              } else if (this.personneQuery[this.query.db_field_name]) {
                this.userIds = this.personneQuery[this.query.db_field_name].split(',')
              } else {
                this.userIds = []
              }
            }
            this.defaultCheckedKeys = this.userIds
            this.treeVisible = true
          } else {
            this.gData = []
          }
        })
      }
    }
  }
</script>

<style scoped>
  .box-title-text {
    line-height: 1.4;
    display: flex;
  }

  .box-input {
    display: inline-block;
    height: 38px;
    width: 100%;
  }

  .button-box {
    margin-left: 10px;
    height: 38px;
    line-height: 38px;

  }

  .drawer-bootom-button {
    position: absolute;
    bottom: 0;
    width: 100%;
    z-index: 100;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    left: 0;
    background: #fff;
    border-radius: 0 0 2px 2px;
  }

  .drawer-content {
    height: calc(100% - 60px);
    overflow: auto;
  }
</style>