<template> <div class="app-content"> <a-radio-group button-style="solid" :defaultValue="defaultValue" @change="onChange"> <a-radio-button value="1"> 项目分配 </a-radio-button> <a-radio-button value="2"> 分配详情 </a-radio-button> </a-radio-group> <div v-if="defaultValue=='1'"> <a-drawer title="项目分配" placement="left" :destroyOnClose="true" :closable="true" :visible="drawerVisible" :get-container="false" :wrap-style="{ position: 'absolute' }" :after-visible-change="afterVisibleChange" @close="onDrawerClose"> <div class="drawer-content"> <expert-select ref="expertS" :projSelectedRowKeys="projSelectedRowKeys" @close="onDrawerClose" /> </div> </a-drawer> <a-form :form="form" :model="searchForm" layout="inline" class="search_form cs"> <a-form-item> <a-input placeholder="项目名称" v-model="searchForm.projName" :maxLength="100" style="width: 150px" /> </a-form-item> <!-- <a-form-item> <a-input placeholder="项目编号" v-model="searchForm.projNo" :maxLength="100" style="width: 150px" /> </a-form-item> --> <a-form-item> <a-input placeholder="申报单位" v-model="searchForm.appUnitName" :maxLength="100" style="width: 150px" /> </a-form-item> <!-- <a-form-item> <a-input placeholder="申报人" v-model="searchForm.appPersonName" :maxLength="50" 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-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="deployment-unit" type="primary" @click="onDistribute">批量分配</a-button> </div> <a-table :dataSource="tableData" :columns="columns" rowKey="projId" :pagination="false" :loading="loading" :row-selection="{ selectedRowKeys: projSelectedRowKeys, onChange: onProjSelectChange }"> <template slot="projName" slot-scope="record"> <a @click="recordClick(record,'projView')">{{record.projName}}</a> </template> <template slot="assignInfo" slot-scope="record"> <a-tag v-if="!record.assignList||record.assignList.length===0" :color="'red'">未分配</a-tag> <a-tag v-else v-for="data in record.assignList" :key="data.id" :color="evaluationColor(data)" @click="evaluationView(data)">{{data.personName}}</a-tag> </template> <template slot="option" slot-scope="record"> <a-button type="link" size="small" @click="recordClick(record, 'assign')">分配</a-button> <a-button type="link" size="small" @click="recordClick(record, 'view')">详情</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="projectVisible" v-if="projectVisible"> <div slot="content"> <project-view v-model="projId" @close="() => this.projectVisible = false"></project-view> </div> </s-modal> <a-modal v-model="assignInfoVisible" title="分配详情" width="80%" :dialog-style="{ top: '15%' }" :footer="null" destroyOnClose> <project-assign-detail v-model="projId" @close="() => this.assignInfoVisible = false" /> </a-modal> <a-modal v-model="evaluationVisible" title="专家查看" width="800px" :dialog-style="{ top: '15%' }" :footer="null" destroyOnClose> <assign-expert-view v-model="evaluationId" @close="closeAssignExpertView" /> </a-modal> </div> <div v-else> <assign-detail /> </div> </div> </template> <script> import { isEmptyParams } from '@/views/utils/common' import projectView from '@/views/report/project/components/projectView' import expertSelect from './components/expertSelect' import projectAssignDetail from './components/projectAssignDetail' import assignDetail from './components/assignDetail' import moment from 'moment' import assignExpertView from './components/assignExpertView' export default { name: "projectAssign", components: { projectView, expertSelect, projectAssignDetail, assignExpertView, assignDetail }, data () { return { defaultValue: '1', //项目 form: this.$form.createForm(this, { name: "projSearch" }), searchForm: { projName: null, projNo: null, appUnitName: null, appPersonName: null, knowledgeParentId: null, knowledgeId: null, assignState: '', }, tableData: [], columns: [ { title: "项目名称", scopedSlots: { customRender: 'projName' } }, { title: "申报学科", dataIndex: "knowledgeName", align: 'center' }, { title: "申报单位", dataIndex: "appUnitName", align: 'center' }, { title: '分配信息', scopedSlots: { customRender: 'assignInfo' }, align: 'center', }, { title: '操作', scopedSlots: { customRender: 'option' }, align: 'center', fixed: 'right', width: 150, }, ], pagination: { pageIndex: 1, pageSize: 100, total: 0, pageSizeOptions: this.$defaultPageSizeOptions, }, loading: false, projSelectedRowKeys: [], projId: null, projectVisible: false, drawerVisible: false, assignInfoVisible: false, evaluationVisible: false, evaluationId: null, }; }, created () { this.getListByPage() }, methods: { moment, onChange (value) { this.defaultValue = value.target.value }, change () { this.getListByPage() }, showSizeChange (current, pageSize) { this.pagination.pageIndex = current this.pagination.pageSize = pageSize this.getListByPage() }, getListByPage () { this.loading = true let pars = isEmptyParams(this.searchForm) let par = { ...pars, pageIndex: -1, pageSize: 10000 } this.$api.projectAssign.getProjectListByPage(par).then(({ data = {} }) => { if (data) { const { dataList = [], total = 0 } = data this.pagination.total = total this.tableData = dataList this.loading = false this.projSelectedRowKeys = [] } }).catch(() => { this.loading = false }) }, projSearch () { this.getListByPage() }, projReset () { this.searchForm = { projName: null, projNo: null, appUnitName: null, appPersonName: null, knowledgeParentId: null, knowledgeId: null, assignState: '', } this.getListByPage() }, parChange (value) { this.searchForm.knowledgeParentId = value }, handleAssignChange (value) { this.projSearchForm.assignState = value }, onProjSelectChange (selectedRowKeys) { this.projSelectedRowKeys = selectedRowKeys }, recordClick (record, type) { if (type === 'projView') { this.projectVisible = true this.projId = record.projId } else if (type === 'assign') { this.projSelectedRowKeys = [record.projId] this.drawerVisible = true } else { this.projId = record.projId this.assignInfoVisible = true } }, afterVisibleChange () { }, onDrawerClose (value) { this.projSelectedRowKeys = [] this.drawerVisible = false; if (value === 'assign') { this.getListByPage() } else { } }, onDistribute () { if (this.projSelectedRowKeys.length == 0) { this.$message.warning('请选择项目!') return } this.drawerVisible = true; }, evaluationView (record) { this.evaluationId = record.id this.evaluationVisible = true }, closeAssignExpertView () { this.evaluationId = null this.evaluationVisible = false this.getListByPage() }, evaluationColor (record) { if (record.gradeScore) return 'orange' else return 'green' }, }, }; </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>