expertSelect.vue 6.13 KB
<template>
  <div class="layout-select">
    <a-spin :spinning="loading" style="width: 100%;height: 100%;">
      <div class="layout-select-header">
        <span>已选专家:</span>
        <div class="select-header-content">
          <a v-for="(item) in expertSelectKeys" :key="item.key">{{item.title}}</a>
        </div>
      </div>
      <div class="layout-select-content ">
        <div class="content-inner">
          <div class="tree-select">
            <a-tree v-model="checkedKeys" :expandedKeys="defaultExpandedKeys" :blockNode="true" style="width: 100%" :tree-data="treeData" @select="onClick" @check="onCheck" @expand="onExpand" />
          </div>
          <div class="content-select ">
            <select-item v-model="expertSelectKeys" :dataList="dataList" />
          </div>
        </div>
      </div>
      <div class="layout-select-bottom">
        <a-button class="bt-normal" @click="onCancel">取消</a-button>
        <a-button type="primary" style="margin-left: 10px;margin-right: 5px" @click="submit">提交</a-button>
      </div>
    </a-spin>
  </div>
</template>
<script>
import selectItem from './selectItem'
import { getType } from '@/views/utils/auth'
export default {
  name: 'expertSelect',
  components: {
    selectItem
  },
  data () {
    return {
      checkedKeys: [],
      treeData: [],
      defaultExpandedKeys: [],
      loading: true,
      expertSelectKeys: [],
      expertSelectedRowKeys: [],
      dataList: [],
    }
  },
  props: {
    value: {
      type: Array,
      default: () => {
        return []
      }
    },
    projSelectedRowKeys: {
      type: Array,
      default: () => {
        return []
      }
    },
  },
  created () {
    this.loadTreeSelect()
    let ids = [""]
    this.seachExpert(ids)
  },
  methods: {
    loadTreeSelect () {
      this.$api.parameter.getTreeListByType({ typeId: 41 }).then(({ data = {} }) => {
        if (data) {
          this.treeData = data
          this.defaultExpandedKeys = [this.treeData[0].key]
        }
      }).catch(() => { this.loading = true });
    },
    loadExpertList () {
      this.$api.parameter.getTreeListByType({ typeId: 41 }).then(({ data = {} }) => {
        if (data) {
          this.treeData = data
          this.defaultExpandedKeys = [this.treeData[0].key]
          this.loading = false
        }
      }).catch(() => { this.loading = true });
    },
    onClick (value) {
      this.seachExpert(value)
    },
    onCheck (value) {
      this.seachExpert(value)
    },
    onExpand (value) {
      this.defaultExpandedKeys = value
    },
    seachExpert (ids) {
      this.loading = true
      let projIds = '00000000-0000-0000-0000-000000000000'
      if (this.projSelectedRowKeys && this.projSelectedRowKeys.length > 0)
        projIds = this.projSelectedRowKeys.join(",")
      let specIds = ids.join(",")
      //this.$api.expertSpec.getExpertListBySpecId({ specId: ids }).then(({ data = {} }) => {
      this.$api.expertSpec.getExpertListBySpecIdProjId({ projIds: projIds, specIds: specIds }).then(({ data = {} }) => {
        if (data) {
          this.dataList = data
          this.expertFilter(this.expertSelectKeys, this.dataList)
          this.loading = false
        }
      }).catch(() => { });
      this.loading = false
    },
    onCancel () {
      this.$emit("close", 'cancel')
    },
    submit () {
      this.loading = true
      if (this.projSelectedRowKeys.length == 0) {
        this.$message.error('项目参数有误,请刷新页面重试!')
        this.loading = false
        return
      }
      if (this.expertSelectKeys.length == 0) {
        this.$message.error('请选择专家!')
        this.loading = false
        return
      }
      this.expertSelectedRowKeys = []
      for (let j = 0; j < this.expertSelectKeys.length; j++) {
        this.expertSelectedRowKeys.push(this.expertSelectKeys[j].key)
      }
      let pars = { type: '1', projects: this.projSelectedRowKeys, experts: this.expertSelectedRowKeys, projType: getType() }
      this.$api.projectAssign.assignProject(pars).then(({ data = {} }) => {
        if (data) {
          this.$message.success('分配成功!')
          this.$emit("close", 'assign')
        }
        this.loading = false
      }).catch(() => {
        this.$message.error('分配失败,请稍后再试!')
        this.loading = false
      })
    },
    expertFilter (expertSelectKeys, dataList) {
      if (!!expertSelectKeys.length && expertSelectKeys.length > 0) {
        for (let i = 0; i < dataList.length; i++) {
          for (let j = 0; j < expertSelectKeys.length; j++) {
            if (dataList[i].key == expertSelectKeys[j].key) {
              dataList[i].selected = true
            }
          }
        }
      }
    }
  },
  watch: {
    projSelectedRowKeys: {
      handler (value) {
        let ids = [""]
        this.seachExpert(ids)
      },
    }
  }
}
</script>
 <style scoped lang="less">
.layout-select {
  width: 100%;
  height: 100%;
  border: 1px solid #d9d9d9;
  border-radius: 4px 4px 4px 4px;

  .layout-select-header {
    position: relative;
    border-bottom: 1px solid #d9d9d9;
    width: 100%;
    height: 35px;
    padding: 7px 0px 0px 5px;
    .select-header-content {
      line-height: 35px;
      position: absolute;
      top: 0;
      left: 75px;
      width: calc(100% - 75px);
      height: 100%;
    }
    .select-header-content a {
      margin-left: 6px;
    }
  }
  .layout-select-content {
    width: 100%;
    height: calc(100% - 70px);
    padding: 3px;
    .content-inner {
      position: relative;
      width: 100%;
      height: 100%;
      border: 1px solid #e8e8e8;
      border-radius: 4px 4px 4px 4px;
    }
  }
  .layout-select-bottom {
    border-top: 1px solid #d9d9d9;
    width: 100%;
    height: 35px;
    vertical-align: middle;
    text-align: right;
    padding: 1px;
  }
  ::v-deep.ant-spin-nested-loading .ant-spin-container {
    width: 100%;
    height: 100%;
  }
}
.tree-select {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 100%;
  overflow-x: auto;
  overflow-y: auto;
  border-right: 1px solid #e8e8e8;
}
.content-select {
  margin-left: 200px;
  width: calc(100% - 200px);
  height: 100%;
  overflow-x: auto;
  overflow-y: auto;
}
</style>