index.vue

<template>
  <div class="outer-layer">
    <div class="left-column">
      <div class="card-head">{{totalTitle}}</div>
      <div class="ant-descriptions ant-descriptions-bordered">
          <div class="ant-descriptions-view">
            <table>
              <tbody>
                <tr class="ant-descriptions-row">
                  <th class="ant-descriptions-item-label ant-descriptions-item-colon" style="text-align:center;" v-for="(col, index) in colunms1" :key="index">{{col.title}}</th>
                </tr>
                <tr class="ant-descriptions-row" v-for="item in tableData1" :key="item.knowledge2Id">
                  <td class="ant-descriptions-item-label ant-descriptions-item-colon" style="text-align:center;" v-if="item.visiable" :rowspan="item.rowspan" >{{item.knowledge1Name}}</td>
                  <td class="ant-descriptions-item-content">{{item.knowledge2Name}}</td>
                  <td class="ant-descriptions-item-content">{{item.knowledgeCount}}</td>
                </tr>
              </tbody>
            </table>
          </div>
      </div>
    </div>
    <div class="right-column">
      <div class="app-content">
        <div>
          <a-drawer title="项目分配" placement="left" :destroyOnClose="true" :closable="true" :visible="drawerVisible" :get-container="false" :wrap-style="{ position: 'absolute' }" @close="onDrawerClose">
            <div class="drawer-content">
              <group-expert-select ref="expertS" :projGroupSelectedRowKeys="projGroupSelectedRowKeys" @close="onDrawerClose" />
            </div>
          </a-drawer>
          <a-form :form="form" :model="searchForm" layout="inline" class="search_form">
            <a-form-item>
              <a-input placeholder="项目组名称" v-model="searchForm.groupName" :maxLength="100" style="width: 150px" />
            </a-form-item>
            <a-form-item>
              <a-select default-value="" placeholder="分配状态" v-model="searchForm.assignState" style="width: 160px" @change="handleAssignChange">
                <a-select-option value="">--请选择分配状态--</a-select-option>
                <a-select-option value="1">已分配</a-select-option>
                <a-select-option value="0">未分配</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item>
              <para-select v-model="searchForm.knowledgeId" :typeId="56" :width="150" />
              <!-- <para-multi-select v-model="searchForm.knowledgeId" @parentChange="parChange" :title="'学科'" :objType="'project'" :typeId="57" :width="150" /> -->
            </a-form-item>
            <a-form-item>
              <a-button type="primary" icon="search" @click="projSearch">搜索</a-button>
              <a-button icon="reload" style="margin-left: 10px" @click="projReset" class="bt-normal">重置</a-button>
            </a-form-item>
          </a-form>
          <a-divider style="height: 1px; background-color: #e8e8e8;" />
          <div class="submit-btn">
            <a-button icon="plus-circle" type="primary" @click="onAddProjectGroup">添加项目组</a-button>
            <a-button icon="plus-circle" type="primary" @click="onAddProject">添加项目</a-button>
            <!-- <a-button icon="deployment-unit" type="primary" @click="onGroupAdjust">项目组调整</a-button> -->
            <!-- <a-button icon="share-alt" type="primary" @click="onDistribute">批量分配</a-button> -->
          </div>
          <a-table :dataSource="tableData2" :columns="columns2" rowKey="id" :pagination="false" :loading="loading" :row-selection="{ selectedRowKeys: projGroupSelectedRowKeys, onChange: onProjGroupSelectChange }" @expand="getInnerData" :expandedRowKeys="expandedRowKeys">
            <template slot="groupName" slot-scope="record">
              <a @click="recordClick(record, 'groupView')">{{record.groupName}}</a>
            </template>
            <template slot="assignInfo" slot-scope="record">
              <a-tag v-if="!record.expertList||record.expertList.length===0" :color="'red'">未分配</a-tag>
              <a-tag v-else v-for="data in record.expertList" :key="data.id" :color="'orange'" @click="evaluationView(data)">{{data.personName}}</a-tag>
            </template>
            <template slot="option" slot-scope="record">
              <a-button type="link" size="small" @click="recordClick(record, 'edit')">修改</a-button>
              <a-button type="link" size="small" @click="recordClick(record, 'delete')" v-if="!record.projectList||record.projectList.length===0">删除</a-button>
              <a-button type="link" size="small" @click="recordClick(record, 'assign')" v-if="record.projectList&&record.projectList.length>0">分配</a-button>
              <!-- <a-button type="link" size="small" @click="recordClick(record, 'expertView')" v-if="!record.expertList||record.expertList.length!==0">专家明细</a-button> -->
            </template>
            <a-table style="margin:5px" slot="expandedRowRender" size="small" rowKey="index" :columns="innerColumns" :loading="loading" :data-source="innerData" :pagination="false">
            </a-table>
          </a-table>
          <a-pagination v-if="pagination.total > 0" :total="pagination.total" show-size-changer show-quick-jumper v-model="pagination.pageIndex" :page-size="pagination.pageSize" :page-size-options="pagination.pageSizeOptions" @showSizeChange="showSizeChange" @change="change" :showTotal="() => `共 ${pagination.total} 条`" />

          <s-modal :title="projectGroupTitle" v-model="projDetailVisible" v-if="projDetailVisible" ref="childWindow" :loading="false">
            <div slot="content">
              <group-detail v-model="groupId" @close="closeProjDetail" />
            </div>
          </s-modal>
          <a-modal v-model="projGroupVisible" title="项目组调整" width="70%" :dialog-style="{ top: '15%' }" @cancel="closeProjectGroupAdjust" :footer="null" destroyOnClose>
            <project-group-adjust :groupInfo1="groupInfo1" :groupInfo2="groupInfo2" @close="() =>  this.projGroupVisible = false"></project-group-adjust>
          </a-modal>
          <a-modal v-model="groupEditVisible" title="项目组编辑" width="60%" :dialog-style="{ top: '15%' }" :maskClosable="false" destroyOnClose>
            <template slot="footer">
              <a-button type="primary" @click="() => this.$refs.childEdit.submit()">
                提交
              </a-button>
            </template>
            <group-edit v-model="groupId" @close="closeWindow" ref="childEdit"></group-edit>
          </a-modal>
          <a-modal v-model="evaluationVisible" title="专家查看" width="900px" :dialog-style="{ top: '15%' }" :footer="null" destroyOnClose>
            <assign-group-expert-view v-model="evaluationId" @close="closeAssignExpertView" />
          </a-modal>
          <!-- <a-modal v-model="projDetailVisible" title="项目组明细" width="70%" :dialog-style="{ top: '15%' }" :footer="null" destroyOnClose>
            <group-detail v-model="groupId" @close="() =>  this.projDetailVisible = false" />
          </a-modal> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getType } from '@/views/utils/auth'
import { isEmptyParams } from '@/views/utils/common'
import paraSelect from '@/views/components/common/paraSelect'
import groupDetail from '@/views/peAssign/components/groupDetail'
import groupEdit from '@/views/peAssign/components/groupEdit'
import projectGroupAdjust from '@/views/assign/components/projectGroupAdjust'
import groupExpertSelect from '@/views/assign/components/groupExpertSelect'
import assignGroupExpertView from '@/views/assign/components/assignGroupExpertView'

export default {
  name: 'projectAssgin',
  components: {
    paraSelect, groupDetail, projectGroupAdjust, groupEdit, groupExpertSelect, assignGroupExpertView
  },
  data() {
    return {
      totalTitle: '',
      colunms1: [ 
        { title: "一级学科" },
        { title: "二级学科" },
        { title: "项目个数" }
      ],
      tableData1: [],
      reportYear: null,
      form: this.$form.createForm(this, { name: "projGroupSearch" }),
      searchForm: { groupYear: null, groupName: null, knowledgeParentId: null, knowledgeId: null, assignState: '' },
      columns2: [
        { title: "项目分组名称", scopedSlots: { customRender: 'groupName' } },
        { title: "年度", dataIndex: "groupYear", align: 'center' },
        { title: "项目分组序号", dataIndex: "displayOrder", align: 'center' },
        { title: "项目数", dataIndex: "projCount", align: 'center' },
        { title: "专家数", dataIndex: "expertCount", align: 'center' },
        { title: '分配信息', scopedSlots: { customRender: 'assignInfo' }, align: 'center' },
        { title: '操作', scopedSlots: { customRender: 'option' }, align: 'center', width: 200 }, //fixed: 'right',
      ],
      tableData2: [],
      pagination: {
        pageIndex: 1,
        pageSize: 100,
        total: 0,
        pageSizeOptions: this.$defaultPageSizeOptions,
      },
      expandedRowKeys:[],
      innerColumns: [
        { title: "二级学科", dataIndex: "knowledgeName", align: 'left' },
        { title: "项目数", dataIndex: "projCount", align: 'center' },
        { title: "操作", dataIndex: "option", align: 'center' },
      ],
      innerData: [],
      loading: false,
      projGroupSelectedRowKeys: [],
      projDetailVisible: false,
      groupId: null,
      projGroupVisible: false,
      groupInfo1: null,
      groupInfo2: null,
      groupEditVisible: false,
      drawerVisible: false,
      evaluationVisible: false,
      evaluationId: null,
      projectGroupTitle: '',
    };
  },
  created () {
    this.getYear()
    this.getListByPage()
  },
  methods: {
    isEmptyParams,
    getYear () {
      this.$api.batch.getCurrentYearBatch({ type: 1, projType: getType() }).then(({ data = {} }) => {
        if (data) {
          this.reportYear = data.year
          this.searchForm.groupYear = data.year
          this.totalTitle = this.reportYear + '年度委科学技术基金项目评审分组情况一览表'
          this.getKnowledgeStatistic()
        }
      }).catch(() => { })
    },
    getKnowledgeStatistic () {
      this.$api.statistical.getKnowledgeStatistic({ reportYear: this.reportYear, auditType: 1, projType: getType() }).then(({ data = {} }) => {
        if (data) {
          this.tableData1 = data
        }
      }).catch(() => { })
    },
    getListByPage () {
      this.loading = true
      let pars = isEmptyParams(this.searchForm)
      let par = { ...pars, pageIndex: this.pagination.pageIndex, pageSize: this.pagination.pageSize }
      this.$api.projectGroupAssign.getProjectGroupListByPage(par).then(({ data = {} }) => {
        if (data) {
          const { dataList = [], total = 0 } = data
          this.tableData2 = dataList
          this.pagination.total = total
          this.loading = false
          this.projGroupSelectedRowKeys = []
        } else { this.loading = false }
      }).catch(() => {
        this.loading = false
      })
    },
    change () {
      this.getListByPage()
    },
    showSizeChange (current, pageSize) {
      this.pagination.pageIndex = current
      this.pagination.pageSize = pageSize
      this.getListByPage()
    },
    handleAssignChange (value) {
      this.searchForm.assignState = value
    },
    projSearch () {
      this.getListByPage()
    },
    projReset () {
      this.searchForm = { groupName: null, knowledgeParentId: null, knowledgeId: null, assignState: '', }
      this.getListByPage()
    },
    parChange (value) {
      this.searchForm.knowledgeParentId = value
    },
    onProjGroupSelectChange (selectedRowKeys) {
      this.projGroupSelectedRowKeys = selectedRowKeys
    },
    recordClick (record, type) {
      switch (type) {
        case 'groupView':
          this.projectGroupTitle = '[' + record.groupName + ']-项目组明细'
          this.projDetailVisible = true
          this.groupId = record.id
          break
        case 'edit':
          this.groupEditVisible = true
          this.groupId = record.id
          break
        case 'delete':
          let self = this
          this.$confirm({
            title: '项目组删除',
            content: '确定要删除该项目组？',
            okText: '确定',
            okType: 'danger',
            cancelText: '取消',
            onOk () {
              self.$api.projectGroupAssign.deleteByGroupId({ id: record.id }).then(({ data = {} }) => {
                if (data) {
                  self.$message.success('删除成功！')
                  self.getListByPage()
                }
              })
            },
            onCancel () {
            },
          })
          break
        case 'assign':
          this.projGroupSelectedRowKeys = [record.id]
          this.drawerVisible = true
          break
        case 'expertView':
          break
      }
    },
    onGroupAdjust () {
      if (this.projGroupSelectedRowKeys.length !== 2) {
        this.$message.info('请选择两个项目组！')
        return
      }

      const groupId1 = this.projGroupSelectedRowKeys[0]
      const groupId2 = this.projGroupSelectedRowKeys[1]

      this.groupInfo1 = this.tableData.filter(e => { return e.id === groupId1 })[0]
      this.groupInfo2 = this.tableData.filter(e => { return e.id === groupId2 })[0]
      if (this.groupInfo1.expertCount > 0 || this.groupInfo2.expertCount > 0) {
        this.$message.error('项目组已经分配有专家，不能进行项目调整！')
        return
      }

      this.projGroupVisible = true
    },
    closeProjectGroupAdjust () {
      this.projGroupVisible = false
      this.getListByPage()
    },
    onAddProjectGroup () {
      this.groupId = null
      this.groupEditVisible = true
    },
    onAddProject () {
      if (this.projGroupSelectedRowKeys.length !== 1) {
        this.$message.info('请选择一个项目组！')
        return
      }
      this.projDetailVisible = true
      this.groupId = this.projGroupSelectedRowKeys[0]
    },
    closeWindow (value) {
      if (value === 'edit') {
        this.groupEditVisible = false
        this.getListByPage()
      }
      // else
      //   this.visibleView = false
    },
    onDrawerClose (value) {
      this.projGroupSelectedRowKeys = []
      this.drawerVisible = false
      if (value === 'assign') {
        this.getListByPage()
      }
      else {

      }
    },
    onDistribute () {
      if (this.projGroupSelectedRowKeys.length == 0) {
        this.$message.warning('请选择项目组！')
        return
      }
    },
    evaluationColor (record) {
      if (record.gradeScore)
        return 'orange'
      else
        return 'green'
    },
    evaluationView (record) {
      this.evaluationId = record.id
      this.groupId = record.groupId
      this.evaluationVisible = true
    },
    closeAssignExpertView () {
      this.evaluationId = null
      this.groupId = null
      this.evaluationVisible = false
      this.getListByPage()
    },
    closeProjDetail() {
      this.projDetailVisible = false
      this.getListByPage()
    },
    getInnerData (expanded, record) {
      if (record.projCount == 0) {
        this.$message.info('该项目组还没有分配项目！')
        return
      }
      this.expandedRowKeys = []
      this.innerData = []
      if (expanded) {
        this.expandedRowKeys.push(record.id)
        this.getProjectKnowledgeStatistic(record.id)
      }
    },
    getProjectKnowledgeStatistic (groupId) {
      this.loading = true
      this.$api.projectGroupAssign.getProjectKnowledgeStatisticByGroupId({ groupId: groupId }).then(({ data = {} }) => {
        if (data) {
          this.innerData = data
          this.loading = false
        } else { this.loading = false }
      }).catch(() => {
        this.loading = false
      })
    }
  }
};
</script>

<style scoped lang="less">
.outer-layer {
  margin: 5px;
  height: 100%;
}
.card-head {
  min-height: 30px;
  margin-bottom: -1px;
  padding: 0 5px;
  color: rgba(0,0,0,.85);
  font-weight: 500;
  font-size: 16px;
  background: transparent;
  border-bottom: 1px solid #e8e8e8;
  border-radius: 2px 2px 0 0;
  zoom: 1;
  text-align: center;
}
.left-column {
  float: left;
  width: 30%;
  height: 100%;
}
.right-column {
  float: right;
  width: 69.6%;
  height: 100%;
}
.ant-descriptions {
  height: calc(100% - 50px);
}
.ant-descriptions-view {
  overflow-x: hidden;
  overflow-y: scroll;
  height: 100%;
}
.app-content {
  ::v-deep .ant-radio-group {
    margin: 14px 0px 0px 0px !important;
  }
  ::v-deep .ant-drawer .ant-drawer-content-wrapper {
    width: 480px !important;
    .ant-drawer-content .ant-drawer-wrapper-body {
      .ant-drawer-header {
        padding: 10px 10px !important;
        height: 40px;
      }
      .ant-drawer-body {
        height: calc(100% - 40px);
        padding: 0px !important;
      }
    }
  }
  .drawer-content {
    height: 95%;
    width: 100%;
    padding: 3px;
  }
  .ant-tag {
    margin-top: 2px !important;
    margin-right: 5px !important;
    padding: 0 5px !important;
    cursor: pointer;
  }
}
</style>