<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>