<template>
|
<div class="flex_column">
|
<div>
|
<TableCard title="年度计划表">
|
<template v-slot:form>
|
<div class="items_center">
|
<span>编制人</span>
|
<el-input v-model="yearForm.organizationPerson" class="search" placeholder="请输入"
|
size="small"></el-input>
|
<el-button size="small" type="primary" @click="getYearPlanList">查询</el-button>
|
<el-button size="small" @click="clearYear">清空</el-button>
|
</div>
|
<!-- <UploadExcel v-if="isShowButton" @upload="getYearPlanList"></UploadExcel> -->
|
<el-upload ref="upload" :action="action" :data="uploadData" :headers="uploadHeader"
|
:before-upload="beforeUpload" :on-success="onSuccess">
|
<el-button size="small" type="primary">导入</el-button>
|
</el-upload>
|
|
|
|
|
</template>
|
<template v-slot:table>
|
<limsTable ref="yearTable" :column="yearColumnData" :height="'calc(100vh - 38em)'"
|
:highlightCurrentRow="true" :rowClick="rowClick" :table-data="yearTableData"
|
:table-loading="yearLoading" style="margin-top: 0.5em;
|
padding: 0 15px;" :page="yearPage" @pagination="yearPagination">
|
</limsTable>
|
</template>
|
</TableCard>
|
</div>
|
<div style="width: 100%; height: 0.5em; background-color: #f5f7fb;"></div>
|
<div>
|
<TableCard title="年度计划明细表">
|
<template v-slot:form>
|
<div class="items_center">
|
<span>监督日期</span>
|
<el-date-picker v-model="yearDetailForm.date" class="date_box" format="yyyy-MM-dd"
|
placeholder="选择日期" size="small" type="date" value-format="yyyy-MM-dd">
|
</el-date-picker>
|
<span>监督项目</span>
|
<el-input v-model="yearDetailForm.project" class="search" placeholder="请输入"
|
size="small"></el-input>
|
<el-button size="small" type="primary" @click="getYearDetailPlanList">查询</el-button>
|
<el-button size="small" @click="clearDetail">清空</el-button>
|
</div>
|
<div>
|
<el-button v-if="isOperation" size="small" type="primary"
|
@click="showDialog('add')">新增</el-button>
|
</div>
|
</template>
|
<template v-slot:table>
|
<limsTable :column="yearDetailColumnData" :height="'calc(100vh - 38em)'"
|
:table-data="yearDetailTableData" :table-loading="yearDetailLoading"
|
style="margin-top: 18px; padding: 0 15px;" :page="yearDeatilPage"
|
@pagination="yearDeatilPagination">
|
</limsTable>
|
</template>
|
</TableCard>
|
</div>
|
<PlanAdd ref="planModal" :planId="planId" @submit="handleForm"></PlanAdd>
|
</div>
|
</template>
|
<script>
|
import TableCard from '@/components/TableCard/index.vue';
|
import PlanAdd from "./Add.vue"
|
import limsTable from "@/components/Table/lims-table.vue";
|
import UploadExcel from "./UploadExcel.vue"
|
import {
|
yearPlanList,
|
yearPlanDetailList,
|
yearPlanDel,
|
yearPlanDetailDel,
|
yearPlanDetailApproval,
|
exportSuperVisePlan
|
} from '@/api/cnas/personnel/personnelInfo.js'
|
|
export default {
|
props: {
|
departId: {
|
type: Number,
|
default: null
|
}
|
},
|
|
|
components: {
|
TableCard,
|
PlanAdd,
|
limsTable,
|
UploadExcel
|
},
|
data() {
|
return {
|
uploadData: {},
|
isShowButton: false,
|
planId: undefined,
|
yearForm: {
|
organizationPerson: undefined,
|
},
|
yearTableData: [], // 年表
|
yearPage: {
|
current: 1,
|
size: 20,
|
total: 0
|
},
|
yearColumnData: [
|
{
|
label: '文件名称',
|
prop: 'fileName',
|
minWidth: '150px'
|
}, {
|
label: '编制人',
|
prop: 'organizationPersonName',
|
minWidth: '100'
|
}, {
|
label: '编制日期',
|
prop: 'organizationDate',
|
minWidth: '160'
|
}, {
|
label: '批准人',
|
prop: 'approvalName',
|
minWidth: '100'
|
}, {
|
label: '批准日期',
|
prop: 'approvalDate',
|
minWidth: '160'
|
}, {
|
label: '审核人',
|
prop: 'examine'
|
}, {
|
dataType: 'tag',
|
label: '批准状态',
|
prop: 'approvalStatus',
|
minWidth: '130',
|
formatData: (params) => {
|
if (params == 1) {
|
return '批准'
|
} else {
|
return '不批准'
|
}
|
},
|
formatType: (params) => {
|
if (params == 1) {
|
return 'success'
|
} else {
|
return 'danger'
|
}
|
}
|
}, {
|
label: '创建日期',
|
prop: 'createTime',
|
minWidth: '160'
|
}, {
|
label: '创建人',
|
prop: 'createName',
|
minWidth: '100'
|
}, {
|
dataType: 'action',
|
minWidth: '160',
|
label: '操作',
|
fixed: 'right',
|
operation: [
|
{
|
name: '导出',
|
type: 'text',
|
clickFun: (row) => {
|
this.downLoadPost(row)
|
}
|
},
|
{
|
name: '批准',
|
type: 'text',
|
disabled: (row) => {
|
if (row.approvalStatus == 1 || (row.departId == 18 && ![12, 11, 16].includes(row.currentId)) || (row.departId == 19 && ![35, 41, 16].includes(row.currentId))) {
|
return true
|
} else {
|
return false
|
}
|
},
|
clickFun: (row) => {
|
this.approvalYearPlan(row)
|
}
|
},
|
{
|
name: '删除',
|
type: 'text',
|
color: '#f56c6c',
|
clickFun: (row) => {
|
this.delYearPlan(row.id)
|
}
|
}
|
]
|
}],
|
yearLoading: false,
|
yearDetailForm: {
|
date: undefined,
|
project: undefined
|
},
|
yearDetailTableData: [], // 年明细表
|
yearDeatilPage: {
|
current: 1,
|
size: 20,
|
total: 0
|
},
|
yearDetailColumnData: [
|
{
|
label: '监督日期',
|
prop: 'superviseDate'
|
}, {
|
label: '监督目的',
|
prop: 'superviseDes'
|
}, {
|
label: '被监督人员',
|
prop: 'supervisePerson'
|
}, {
|
label: '备注',
|
prop: 'remarks'
|
}, {
|
label: '培训日期',
|
prop: 'trainDate'
|
}, {
|
label: '创建',
|
prop: 'createBy'
|
}, {
|
dataType: 'action',
|
width: '180',
|
label: '操作',
|
operation: [
|
{
|
name: '编辑',
|
type: 'text',
|
clickFun: (row) => {
|
this.$refs.planModal.showDialog(row, true)
|
}
|
},
|
{
|
name: '删除',
|
type: 'text',
|
color: '#f56c6c',
|
clickFun: (row) => {
|
this.delYearPlanDetail(row.id)
|
}
|
}
|
]
|
}
|
],
|
yearDetailLoading: false,
|
isOperation: false,
|
}
|
},
|
mounted() {
|
this.getYearPlanList()
|
// this.getPower()
|
// this.getYearDetailPlanList()
|
|
},
|
computed: {
|
action() {
|
return this.javaApi + '/superVisePlan/yearPlanDetailImport'
|
},
|
},
|
watch: {
|
departId(newValue, oldValue) {
|
this.getYearPlanList();
|
}
|
},
|
methods: {
|
// 上传前的钩子
|
beforeUpload(file) {
|
let list = file.name.split(".")
|
let fileName = list[list.length - 1]
|
this.$set(this.uploadData, "suffix", fileName)
|
},
|
// 成功之后的钩子
|
onSuccess(response, file, fileList) {
|
this.getYearPlanList();
|
this.$message.success("导入成功")
|
this.$refs.upload.clearFiles()
|
},
|
getPower() {
|
let power = JSON.parse(sessionStorage.getItem('power'))
|
let up = false
|
for (var i = 0; i < power.length; i++) {
|
if (power[i].menuMethod == 'yearPlanDetailImport') {
|
up = true
|
}
|
}
|
if (!up) {
|
this.isShowButton = false
|
} else {
|
this.isShowButton = true
|
}
|
},
|
/**
|
* @desc 查询年度计划列表
|
*/
|
async getYearPlanList() {
|
this.yearLoading = true
|
const { code, data } = await yearPlanList({
|
current: this.yearPage.current,
|
size: this.yearPage.size,
|
organizationPerson: this.yearForm.organizationPerson,
|
departId: this.departId
|
})
|
if (code == 200) {
|
this.yearTableData = data.records
|
this.yearPage.total = data.total
|
if (this.yearTableData.length > 0) {
|
this.rowClick(this.yearTableData[0])
|
} else {
|
this.yearDetailTableData = []
|
}
|
}
|
console.log('主表数据', this.yearTableData);
|
this.yearLoading = false
|
},
|
// 年计划分页
|
yearPagination({ page, limit }) {
|
this.yearPage.current = page;
|
this.yearPage.size = limit;
|
this.getYearPlanList();
|
},
|
// 年度计划表格，点击行数据后刷新详情
|
rowClick(row) {
|
const now = new Date();
|
const currentYear = now.getFullYear();
|
if (row.createTime.slice(0, 4) == currentYear) {
|
this.isOperation = true;
|
} else {
|
this.isOperation = false;
|
}
|
this.planId = row.id
|
this.getYearDetailPlanList()
|
},
|
// 新增|编辑完成后做什么
|
handleForm() {
|
this.getYearDetailPlanList()
|
},
|
// 清除年
|
clearYear() {
|
this.$refs.yearTable.setCurrent()
|
this.yearForm.organizationPerson = undefined
|
this.getYearPlanList()
|
},
|
// 清除明细
|
clearDetail() {
|
this.yearDetailForm.date = undefined
|
this.yearDetailForm.project = undefined
|
this.getYearDetailPlanList()
|
},
|
|
/**
|
* @desc 查询年度计划明细
|
*/
|
async getYearDetailPlanList() {
|
this.yearDetailLoading = true
|
const { code, data } = await yearPlanDetailList({
|
planId: this.planId,
|
current: this.yearDeatilPage.current,
|
size: this.yearDeatilPage.size,
|
date: this.yearDetailForm.date,
|
project: this.yearDetailForm.project
|
})
|
if (code == 200) {
|
this.yearDetailTableData = data.records
|
this.yearDeatilPage.total = data.total
|
}
|
this.yearDetailLoading = false
|
},
|
showDialog(operationType, row, type = false) {
|
if (operationType === 'add') {
|
if (!this.planId) {
|
this.$message.warning('请选择一条计划进行新增')
|
return
|
}
|
}
|
this.$refs.planModal.showDialog({ planId: this.planId, ...row }, type)
|
},
|
|
|
|
// 年明细计划分页
|
yearDeatilPagination({ page, limit }) {
|
this.yearDeatilPage.current = page;
|
this.yearDeatilPage.size = limit;
|
this.getYearDetailPlanList();
|
},
|
// 删除年计划
|
delYearPlan(id) {
|
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(async () => {
|
const { code } = await yearPlanDel({ id })
|
if (code == 200) {
|
this.$message.success('删除成功')
|
this.getYearPlanList()
|
this.getYearDetailPlanList()
|
} else {
|
this.$message.error('删除失败')
|
}
|
})
|
},
|
// 删除年计划明细
|
delYearPlanDetail(id) {
|
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(async () => {
|
const { code } = await yearPlanDetailDel({ id })
|
if (code == 200) {
|
this.$message.success('删除成功')
|
this.getYearDetailPlanList()
|
} else {
|
this.$message.error('删除失败')
|
}
|
})
|
},
|
// 批准年度计划
|
approvalYearPlan(row) {
|
this.$confirm('确认批准该年度计划?', '提示', {
|
confirmButtonText: '批准',
|
cancelButtonText: '不批准',
|
type: 'info'
|
}).then(() => {
|
this.approvalYearPlanFun(1, row.id)
|
}).catch(action => {
|
this.approvalYearPlanFun(0, row.id)
|
})
|
},
|
// 年度计划表-下载
|
downLoadPost(row) {
|
exportSuperVisePlan({ id: row.id }).then(res => {
|
this.outLoading = false
|
const blob = new Blob([res], { type: 'application/msword' });
|
this.$download.saveAs(blob, row.fileName + '.docx')
|
})
|
},
|
async approvalYearPlanFun(approvalStatus, rowId) {
|
const { code } = await yearPlanDetailApproval({
|
id: rowId,
|
approvalStatus: approvalStatus
|
})
|
if (code == 200) {
|
this.$message.success('操作成功！')
|
this.getYearPlanList()
|
} else {
|
this.$message.error('操作成功！')
|
}
|
}
|
}
|
}
|
</script>
|
<style scoped>
|
.flex_column {
|
display: flex;
|
height: 80vh;
|
flex-direction: column;
|
overflow: auto;
|
justify-content: space-between;
|
}
|
|
.pagination {
|
display: flex;
|
justify-content: space-between
|
}
|
|
.items_center {
|
display: flex;
|
align-items: center;
|
}
|
|
.date_box {
|
margin: 0 5px;
|
}
|
|
.search {
|
width: 150px;
|
padding: 0 16px;
|
}
|
</style>
|
