assignProjectGroup.vue

<template>
  <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" />
          <!-- <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="deployment-unit" type="primary" @click="onGroupAdjust">项目组调整</a-button>
        <!-- <a-button icon="share-alt" type="primary" @click="onDistribute">批量分配</a-button> -->
      </div>
      <a-table :dataSource="tableData" :columns="columns" rowKey="id" :pagination="false" :loading="loading" :row-selection="{ selectedRowKeys: projGroupSelectedRowKeys, onChange: onProjGroupSelectChange }">
        <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>
      <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="项目组明细" v-model="projDetailVisible" v-if="projDetailVisible" ref="childWindow" :loading="false">
        <div slot="content">
          <group-detail v-model="groupId" @close="() =>  this.projDetailVisible = false" />
        </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>
</template>

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

export default {
  name: "projectGroupAssign",
  components: {
    paraSelect, groupDetail, projectGroupAdjust, groupEdit, groupExpertSelect, assignGroupExpertView
  },
  data () {
    return {
      form: this.$form.createForm(this, { name: "projGroupSearch" }),
      searchForm: { groupName: null, knowledgeParentId: null, knowledgeId: null, assignState: '' },
      tableData: [],
      columns: [
        { title: "项目组名称", scopedSlots: { customRender: 'groupName' } },
        { title: "年度", dataIndex: "groupYear", align: 'center' },
        { title: "项目组学科", dataIndex: "knowledgeName", align: 'center' },
        { title: "项目数", dataIndex: "projCount", align: 'center' },
        { title: "专家数", dataIndex: "expertCount", align: 'center' },
        { title: '分配信息', scopedSlots: { customRender: 'assignInfo' }, align: 'center' },
        { title: '操作', scopedSlots: { customRender: 'option' }, align: 'center', fixed: 'right', width: 200 },
      ],
      pagination: {
        pageIndex: 1,
        pageSize: 100,
        total: 0,
        pageSizeOptions: this.$defaultPageSizeOptions,
      },
      loading: false,
      projGroupSelectedRowKeys: [],
      projDetailVisible: false,
      groupId: null,
      projGroupVisible: false,
      groupInfo1: null,
      groupInfo2: null,
      groupEditVisible: false,
      drawerVisible: false,
      evaluationVisible: false,
      evaluationId: null,
    };
  },
  created () {
    this.getListByPage()
  },
  methods: {
    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.tableData = 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.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
    },
    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()
    },
  }
};
</script>

<style scoped lang="less">
.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: 100%;
    width: 100%;
    padding: 3px;
  }
  .ant-tag {
    margin-top: 2px !important;
    margin-right: 5px !important;
    padding: 0 5px !important;
    cursor: pointer;
  }
}
</style>