<template> <div class="app-content"> <a-tabs :tab-position="'top'" v-model="activeTab" @change="callback"> <a-tab-pane key="1" :tab="'未上报('+panes.count1+')'"> </a-tab-pane> <a-tab-pane key="2" :tab="'已上报('+panes.count2+')'"> </a-tab-pane> </a-tabs> <a-form layout="horizontal" :form="form" :model="searchForm"> <a-row :gutter="30"> <a-col :span="8"> <a-form-item label="项目名称"> <a-input placeholder="项目名称" v-model="searchForm.projName" :maxLength="100" style="width: 272px" /> </a-form-item> </a-col> <a-col :span="8"> <a-form-item label="项目编号"> <a-input placeholder="项目编号" v-model="searchForm.projNo" :maxLength="100" style="width: 272px" /> </a-form-item> </a-col> <a-col :span="8"> <a-form-item> <a-button type="primary" icon="search" @click="searchList">搜索</a-button> <a-button icon="reload" style="margin-left: 10px" @click="searchFormReset" class="bt-normal">重置</a-button> </a-form-item> </a-col> </a-row> <a-row> <a-col :span="30"> <a-form-item> <a-button type="primary" style="margin-right:8px;" v-if="(display&&isButten)" @click="checkReport">填报中期考核</a-button> <a-button type="primary" @click="exportData">导出Excel</a-button> <span :style="{color:'#DC143C'}"> 填报时间:{{description}}</span> </a-form-item> </a-col> </a-row> </a-form> <a-table :dataSource="tableData" :columns="columns" rowKey="id" :pagination="false" :loading="loading" :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange, type: 'radio' }"> <template slot="option" slot-scope="record"> <a-button type="link" size="small" @click="recordClick(record, 3)">考核表</a-button> <a-button type="link" size="small" @click="recordClick(record, 1)">申请书</a-button> <a-button type="link" size="small" @click="recordClick(record, 2)">任务书</a-button> <a-button type="primary" size="small" v-if="(record.checkState==30 && isButten)" @click="recordClick(record,4)">修改</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} 条`" /> <a-modal v-model="visibleEdit" :title="modalTitle" :width="'86%'" :dialog-style="{ top: '20px' }" :maskClosable="false" :footer="null" destroyOnClose class="sc_modal"> <check-edit v-model="selectCheckId" @close="closeWindow" /> </a-modal> <a-modal v-model="visibleView3" :title="'查看'" :width="'80%'" :dialog-style="{ top: '20px' }" destroyOnClose> <template slot="footer"> <a-button type="primary" @click="() => visibleView3 = false"> 确定 </a-button> </template> <check-view v-model="selectCheckId"></check-view> </a-modal> <a-modal v-model="visibleView1" :title="'项目查看'" :width="'80%'" :dialog-style="{ top: '20px' }" destroyOnClose> <template slot="footer"> <a-button type="primary" @click="() => visibleView1 = false"> 确定 </a-button> </template> <project-view v-model="selectProjId"></project-view> </a-modal> <a-modal v-model="visibleView2" title="查看任务书" :width="'86%'" :dialog-style="{ top: '20px' }" :maskClosable="false" :footer="null" destroyOnClose class="sc_modal"> <template slot="footer"> <a-button type="primary" @click="() => visibleView2 = false"> 确定 </a-button> </template> <test-view v-model="selectProjId" @close="closeWindow" /> </a-modal> </div> </template> <script> import { isEmptyParams, filterExportExcelData, tableColumnsName } from "@/views/utils/common" import CheckEdit from "@/views/report/check/components/checkEdit.vue" import CheckView from "@/views/report/check/components/checkView.vue" import TestView from "@/views/report/task/components/taskView.vue" import projectView from '@/views/report/project/components/projectView' export default { name: 'reportCheck', components: { CheckEdit, CheckView, TestView, projectView }, data () { return { // 选项卡 activeTab: '1', form: this.$form.createForm(this, { name: 'advanced_search' }), panes: { count1: 0, count2: 0, count3: 0, count4: 0, count5: 0, }, searchForm: { projName: '', projNo: '', checkState: 1, checkYear: null }, tableData: [], selectedRowKeys: [], columns: [ { title: '项目名称', dataIndex: 'projName' }, { title: '项目编号', dataIndex: 'projNo' }, { title: '项目类别', dataIndex: 'projClassName' }, { title: '开始时间', dataIndex: 'startDate' }, { title: '结束时间', dataIndex: 'endDate' }, { title: '申报年度', dataIndex: 'reportYear' }, { title: '考核年度', dataIndex: 'checkYear' }, { title: '状态', dataIndex: 'checkStateName' }, { title: '操作', fixed: 'right', width: '200px', scopedSlots: { customRender: 'option' } } ], pagination: { pageIndex: 1, pageSize: this.$defaultPageSize, total: 0, pageSizeOptions: this.$defaultPageSizeOptions, }, loading: false, // 弹窗标志 visibleView1: false, visibleView2: false, visibleView3: false, visibleEdit: false, modalTitle: '中期考核上报', isButten: false, display: true, description: '', selectCheckId: null, selectProjId: null, } }, created () { this.getYear() }, methods: { getYear () { let pars = { type: 3 } this.$api.year.getYearByTreeCode(pars).then(({ data = {} }) => { if (data) { this.isButten = data.disabled this.description = data.description this.searchForm.checkYear = data.reportYear this.getListByPage() } }).catch(() => { this.loading = false }) }, getListByPage () { this.getCount() this.loading = true let pars = isEmptyParams(this.searchForm) let par = { ...pars, pageIndex: this.pagination.pageIndex, pageSize: this.pagination.pageSize } this.$api.check.getListByPage(par).then(({ data = {} }) => { if (data) { const { dataList = [], total = 0 } = data this.tableData = dataList this.pagination.total = total this.loading = false } }).catch(() => { this.loading = false }) }, getCount () { let pars = isEmptyParams({ checkYear: this.searchForm.checkYear }); this.$api.check.getCount(pars).then(({ data = {} }) => { if (data) { this.panes = data } }).catch(() => { }) }, searchList () {//查询按钮 this.pagination.pageIndex = 1 this.getListByPage() }, searchFormReset () {//重置 this.searchForm = { projName: '', projNo: '', checkState: 1 } }, callback (key) { if (key == '1') this.display = true else this.display = false this.searchForm.checkState = key; this.getListByPage() }, change () { this.getListByPage() }, showSizeChange (current, pageSize) { this.pagination.pageIndex = current this.pagination.pageSize = pageSize this.getListByPage() }, checkReport () {//中期考核上报 if (this.selectCheckId === null) { this.$message.info('请选择项目!') return } this.visibleEdit = true }, closeWindow (value) { if (value === 'edit') { this.visibleEdit = false this.getListByPage() } else this.visibleView = false }, onSelectChange (selectedRowKeys, selectedRows) { this.selectedRowKeys = selectedRowKeys this.selectProjId = selectedRows[0].projId this.selectCheckId = selectedRows[0].id }, recordClick (record, type) { switch (type) { case 1: this.selectProjId = record.projId this.visibleView1 = true break; case 2: this.selectProjId = record.projId this.visibleView2 = true break; case 3: this.selectCheckId = record.id this.visibleView3 = true break; case 4: this.selectCheckId = record.id this.visibleEdit = true break; } }, exportData () { let pars = isEmptyParams(this.searchForm) let par = { ...pars, pageIndex: -1, pageSize: -1 } this.$api.check.getListByPage(par).then(({ data = {} }) => { if (data) { const { dataList = [], total = 0 } = data this.$ToDoExcel(`中期考核列表`, tableColumnsName(this.columns), filterExportExcelData(this.columns, dataList)) } }).catch(() => { }) } } } </script> <style scoped lang="less"> .app-content { border: 1px solid #e8e8e8; padding: 0px 10px 10px 10px; } .ant-form-item { display: flex !important; } .ant-form-item-control-wrapper { flex: 1 !important; width: 100% !important; } .ant-pagination { float: inherit !important; margin-top: 15px; } </style>