中航光电热表web
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

459 lines
12 KiB

<template>
<basic-container>
<!-- 重点工作管理 -->
<avue-crud
:option="option"
:table-loading="loading"
:data="data"
v-model="form"
v-model:page="page"
ref="crud"
@search-change="searchChange"
@search-reset="searchReset"
@current-change="currentChange"
@size-change="sizeChange"
@refresh-change="refreshChange"
@on-load="onLoad"
>
<template #menu-left>
<el-button type="primary" @click="handleAdd">新增</el-button>
</template>
<template #menu="{ row }">
<el-button type="text" @click="handleView(row)">详情</el-button>
<el-button type="text" v-if="row.approvalStatus == 1" @click="handleEdit(row)"
>修改</el-button
>
<el-button type="text" v-if="row.approvalStatus == 1" @click="checkRow(row)"
>审核</el-button
>
<el-button type="text" v-if="row.approvalStatus == 1" @click="deleteRow(row)"
>删除</el-button
>
</template>
<!-- 项目开始时间 -->
<template #projectStartTime="scope">
{{ scope.row.projectStartTime ? scope.row.projectStartTime.substring(0, 10) : '' }}
</template>
<template #projectDesiredEnd="scope">
{{ scope.row.projectDesiredEnd ? scope.row.projectDesiredEnd.substring(0, 10) : '' }}
</template>
<!-- 列表嵌套表格 -->
<template #expand="{ row }">
<el-table :data="row.stoneList">
<el-table-column label="里程碑计划" align="center" prop="milestonePlan"></el-table-column>
<el-table-column
label="里程碑负责人"
align="center"
prop="milestoneMan"
></el-table-column>
<el-table-column
label="里程碑输出物"
align="center"
prop="outputMaterial"
></el-table-column>
<el-table-column
label="里程碑节点"
width="200"
align="center"
prop="milestoneNode"
></el-table-column>
<el-table-column align="center" label="执行类型" prop="executeType"></el-table-column>
<el-table-column align="center" label="状态" prop="statusTitle"></el-table-column>
<el-table-column align="center" label="延期时间" prop="delayTime"></el-table-column>
<el-table-column
align="center"
label="核查结果"
prop="checkResultTitle"
></el-table-column>
<el-table-column align="center" label="核查人" prop="checkMan.userName"></el-table-column>
<el-table-column align="center" label="评价等级" prop="gradeTitle"></el-table-column>
<el-table-column align="center" label="评价人" prop="gradeMan.userName"></el-table-column>
<el-table-column align="center" label="业务领导评价" prop="evaluate"></el-table-column>
<el-table-column label="操作">
<template #default="scope">
<el-button
type="text"
v-if="scope.row.status == 3"
@click="executeRow(row, scope.row)"
>执行</el-button
>
<el-button type="text" v-if="scope.row.status == 4" @click="auditRow(row, scope.row)"
>核查</el-button
>
<el-button
type="text"
v-if="scope.row.status == 6"
@click="examineRow(row, scope.row)"
>核准</el-button
>
</template>
</el-table-column>
</el-table>
</template>
</avue-crud>
<!-- 新增弹窗 -->
<add-dialog
v-if="addDialogVisible"
:title="title"
:visible="addDialogVisible"
:rowItem="rowItem"
@close="closeDialog"
></add-dialog>
<!-- 审核弹窗 -->
<review
v-if="checkDialog"
:showDialog="checkDialog"
@closeDialog="closeDialog"
:rowItem="rowItem"
></review>
<!-- 执行/核查/核准弹窗 -->
<milestoneDialog :title="subTitle" :showDialog='executeDialog' v-if="executeDialog" @closeDialog="closeDialog" :rowItem="detailForm"></milestoneDialog>
</basic-container>
</template>
<script>
import {
getProcessList,
addProcess,
updateProcess,
delProcess,
} from '../../api/flowManagement/index';
import AddDialog from './addDialog.vue';
import review from './review.vue';
import milestoneDialog from './milestoneDialog.vue';
export default {
components: { AddDialog, review,milestoneDialog },
data() {
return {
// 状态
// 0-立项待提交、1-立项待审核、2-立项审批不通过、3-项目进行中、
// 4-项目待核查、5-项目核查不通过、6-项目待核准、7-项目核准不通过、
// 8-项目已核准
addDialogVisible: false, // 新增弹窗显隐控制
title: '新增',
loading: false,
checkDialog: false,
subTitle: '执行',
detailForm: {},
checkForm: {},
detailListSelectList: [],
checkRules: {
checkResult: [{ required: true, message: '请选择审核结果', trigger: 'blur' }],
},
executeDialog: false,
data: [],
form: {},
existingFiles: [], // 已有附件列表
addForm: {},
page: {
pageSize: 10,
currentPage: 1,
total: 0,
},
option: {
columnSort: true,
tip: false,
expand: true,
rowKey: 'id',
height: 'auto',
align: 'center',
calcHeight: 32,
simplePage: false,
searchShow: true,
searchMenuSpan: 6,
searchIcon: true,
searchIndex: 3,
tree: false,
border: true,
index: false,
selection: false,
viewBtn: false,
delBtn: false,
editBtn: false,
editBtnText: '修改',
addBtn: false,
labelWidth: 120,
menu: true,
menuWidth: 190,
dialogWidth: 600,
dialogClickModal: false,
searchEnter: true,
excelBtn: true,
gridBtn: false,
searchShowBtn: false,
showOverflowTooltip: true,
searchLabelPosition: 'left',
searchGutter: 24,
searchSpan: 6,
menuAlign: 'left',
gridBtn: false,
searchMenuPosition: 'right',
addBtnIcon: ' ',
viewBtnIcon: ' ',
delBtnIcon: ' ',
editBtnIcon: ' ',
searchShowBtn: false,
column: [
{
label: '单据号',
prop: 'paCode',
overflow: true,
search: true,
},
{
label: '项目名称',
prop: 'projectName',
overflow: true,
search: true,
},
{
label: '项目负责人',
prop: 'projectHead',
overflow: true,
search: true,
searchLabelWidth: 100,
},
{
label: '项目开始时间',
prop: 'projectStartTime',
overflow: true,
search: false,
},
{
label: '项目预期结束时间',
prop: 'projectDesiredEnd',
overflow: true,
search: false,
},
{
label: '制单人',
prop: 'touchingMan',
overflow: true,
search: false,
},
{
label: '制单部门',
prop: 'touchingDept',
overflow: true,
search: false,
},
{
label: '制单时间',
prop: 'touchingTime',
overflow: true,
search: false,
},
{
label: '状态',
prop: 'approvalStatus',
overflow: true,
search: false,
type: 'select',
dicUrl: '/blade-system/dict/dictionary?code=flow_status',
props: {
label: 'dictValue',
value: 'dictKey',
},
},
],
},
rowItem: {}, //存储每一行的数据
};
},
mounted() {},
methods: {
closeDialog(type) {
this.checkDialog = false;
this.addDialogVisible = false
this.executeDialog = false
if (type) {
this.onLoad(this.page, this.query);
}
},
handleAdd() {
this.title = '新增';
this.rowItem = {}
this.addDialogVisible = true;
},
// 查看详情
handleView(row) {
this.title = '详情';
this.rowItem = row;
this.addDialogVisible = true;
},
// 修改
handleEdit(row) {
this.rowItem = row;
this.title = '修改';
this.addDialogVisible = true;
},
// 删除
deleteRow(row) {
this.$confirm('确定将选择数据删除?', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}).then(res => {
delProcess({ ids: row.id }).then(res => {
this.$message.success('删除成功');
this.onLoad(this.page, this.query);
});
});
},
// 审核立项
checkRow(row) {
this.checkDialog = true;
this.rowItem = row;
},
//确定审核立项
submitCheck() {
this.$refs.checkForm.validate(valid => {
if (valid) {
let query = {
id: this.rowItem.id,
approvalStatus: this.checkForm.checkResult == 1 ? 3 : 2,
};
updateProcess(query).then(res => {
this.checkDialog = false;
this.onLoad(this.page, this.query);
});
}
});
},
// 执行
executeRow(row, detail) {
this.detailForm = row;
this.subTitle = '执行';
this.executeDialog = true;
},
// 核查
auditRow(row, detail) {
this.subTitle = '核查';
this.detailForm = row;
// 模拟加载已有附件
this.existingFiles = [
{ name: '项目计划书.pdf', url: '#' },
{ name: '进度报告.docx', url: '#' },
];
this.executeDialog = true;
},
// 核准
examineRow(row, detail) {
this.subTitle = '核准';
this.detailForm = row;
// 模拟加载已有附件
this.existingFiles = [
{ name: '项目计划书.pdf', url: '#' },
{ name: '进度报告.docx', url: '#' },
{ name: '验收单.xlsx', url: '#' },
];
this.executeDialog = true;
},
// 下载附件
downloadFile(file) {
const link = document.createElement('a');
link.href = file.url;
link.download = file.name;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
},
// 删除已有附件
removeExistingFile(index) {
this.$confirm('确定删除该附件?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
this.existingFiles.splice(index, 1);
this.$message.success('删除成功');
})
.catch(() => {});
},
searchReset() {
this.query = {};
this.onLoad(this.page, this.query);
},
searchChange(params, done) {
this.query = params;
this.page.currentPage = 1;
this.onLoad(this.page, params);
done();
},
currentChange(currentPage) {
this.page.currentPage = currentPage;
this.onLoad(this.page, this.query);
},
sizeChange(pageSize) {
this.page.pageSize = pageSize;
this.onLoad(this.page, this.query);
},
refreshChange() {
this.onLoad(this.page, this.query);
},
onLoad(page, params = {}) {
this.loading = true;
getProcessList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(
res => {
this.data = res.data.data.records;
this.loading = false;
this.page.total = res.data.data.total;
}
);
},
},
};
</script>
<style scoped>
.attachment-list {
margin-top: 10px;
padding: 10px;
border: 1px solid #ebeef5;
border-radius: 4px;
background-color: #fafafa;
}
.attachment-list h4 {
margin: 0 0 10px 0;
font-size: 14px;
color: #606266;
}
.attachment-list ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.attachment-list li {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 0;
border-bottom: 1px solid #ebeef5;
}
.attachment-list li:last-child {
border-bottom: none;
}
.attachment-list a {
color: #409eff;
text-decoration: none;
}
.attachment-list a:hover {
color: #66b1ff;
text-decoration: underline;
}
</style>