573 lines
18 KiB
573 lines
18 KiB
<template>
|
|
<div class="app-container" id="app-container">
|
|
<el-form id="I-form" :model="queryParams" ref="queryForm" size="small" :inline="true">
|
|
<el-form-item label="申报任务标题" prop="enterpriseDirectory">
|
|
<el-input
|
|
v-model="queryParams.enterpriseDirectory"
|
|
placeholder="请输入申报任务标题"
|
|
clearable
|
|
@keyup.enter.native="handleQuery"
|
|
/>
|
|
</el-form-item>
|
|
<!-- <el-form-item label="项目名称" prop="projectName">
|
|
<el-input
|
|
v-model="queryParams.projectName"
|
|
placeholder="请输入项目名称"
|
|
clearable
|
|
@keyup.enter.native="handleQuery"
|
|
/>
|
|
</el-form-item> -->
|
|
<el-form-item label="申报单位" prop="enterpriseName">
|
|
<el-input
|
|
v-model="queryParams.enterpriseName"
|
|
placeholder="请输入申报单位"
|
|
clearable
|
|
@keyup.enter.native="handleQuery"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item class="search_btn">
|
|
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
|
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery" class="btn">查询</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
<el-row class="mb8" id="I-rowOne">
|
|
<el-radio-group v-model="radio" @change="toggleOptions">
|
|
<el-radio-button label="">全部</el-radio-button>
|
|
<el-radio-button label="0">待审批</el-radio-button>
|
|
<el-radio-button label="1,2">已审批</el-radio-button>
|
|
</el-radio-group>
|
|
<!-- <el-col :span="1.5">
|
|
<el-button
|
|
type="info"
|
|
plain
|
|
size="mini"
|
|
@click="toggleOptions('')"
|
|
>全部</el-button>
|
|
</el-col>
|
|
<el-col :span="1.5">
|
|
<el-button
|
|
type="info"
|
|
plain
|
|
size="mini"
|
|
@click="toggleOptions('0')"
|
|
>待审批</el-button>
|
|
</el-col>
|
|
<el-col :span="1.5">
|
|
<el-button
|
|
type="info"
|
|
plain
|
|
size="mini"
|
|
@click="toggleOptions('1,2')"
|
|
>已审批</el-button>
|
|
</el-col> -->
|
|
</el-row>
|
|
|
|
<el-table
|
|
v-if="refreshTable"
|
|
v-loading="loading"
|
|
:data="checkList"
|
|
:height="tabHeader"
|
|
>
|
|
<el-table-column label="序号" align="center" width="50" fixed>
|
|
<template slot-scope="scope">
|
|
<span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="enterpriseDirectory" label="申报任务标题" :show-overflow-tooltip="true" min-width="160"></el-table-column>
|
|
<!-- <el-table-column prop="projectName" label="项目名称" :show-overflow-tooltip="true" min-width="180"></el-table-column>
|
|
<el-table-column prop="productArea" label="项目类型" :show-overflow-tooltip="true" min-width="120">
|
|
<template slot-scope="scope">
|
|
<dict-tag :options="dict.type.bms_product_area" :value="scope.row.productArea"/>
|
|
</template>
|
|
</el-table-column> -->
|
|
<el-table-column prop="enterpriseName" label="申报单位" min-width="180" :show-overflow-tooltip="true"></el-table-column>
|
|
<el-table-column prop="startTime" label="级别" min-width="80">
|
|
<template slot-scope="scope">
|
|
<span>{{ scope.row.level == 0 ? '本级' : scope.row.level == 1 ? '省级' : '' }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="createTime" label="年份" min-width="80">
|
|
<template slot-scope="scope">
|
|
<span>{{ parseTime(scope.row.createTime, '{y}') }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="责任单位" min-width="120">
|
|
<template slot-scope="scope">
|
|
<dict-tag :options="dict.type.bms_responsibility_unit" :value="scope.row.responsibilityUnit"/>
|
|
</template>
|
|
</el-table-column>
|
|
<!-- <el-table-column label="扶持方式" min-width="120">
|
|
<template slot-scope="scope">
|
|
<dict-tag :options="dict.type.bms_support_methods" :value="scope.row.supportMethods"/>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="startTime" label="项目开始时间" min-width="140">
|
|
<template slot-scope="scope">
|
|
<span>{{ parseTime(scope.row.startTime, '{y}-{m}-{d}') }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="endTime" label="项目结束时间" min-width="140">
|
|
<template slot-scope="scope">
|
|
<span>{{ parseTime(scope.row.endTime, '{y}-{m}-{d}') }}</span>
|
|
</template>
|
|
</el-table-column> -->
|
|
<el-table-column prop="status" label="审核状态" min-width="120">
|
|
<template slot-scope="scope">
|
|
<span v-if="scope.row.status == 5" class="approval_status5">评审通过</span>
|
|
<!-- <span v-if="scope.row.status == 4" class="approval_status3">市级评定中</span> -->
|
|
<span v-if="scope.row.status == 3" class="approval_status3">终审中</span>
|
|
<span v-if="scope.row.status == 2" class="approval_status1">复审中</span>
|
|
<span v-if="scope.row.status == 1" class="approval_status1">初审中</span>
|
|
<span v-if="scope.row.status == 0" class="approval_status0">待填报</span>
|
|
<span v-if="scope.row.status == 8" class="approval_status8">初审不通过</span>
|
|
<span v-if="scope.row.status == 7" class="approval_status9">复审不通过</span>
|
|
<!-- <span v-if="scope.row.status == 6" class="approval_status9">终审不通过</span> -->
|
|
<span v-if="scope.row.status == 9" class="approval_status9">终审不通过</span>
|
|
<span v-if="scope.row.status == 10" class="approval_status9">初审驳回</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="申报时间" align="center" prop="createTime" min-width="100">
|
|
<template slot-scope="scope">
|
|
<span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" align="center" width="140" fixed="right">
|
|
<template slot-scope="scope">
|
|
<el-button
|
|
size="mini"
|
|
type="text"
|
|
@click="handleApproval(scope.row)"
|
|
v-if="scope.row.approvalStatus == 0 && deptId != '104'"
|
|
>审批</el-button>
|
|
<el-button
|
|
size="mini"
|
|
type="text"
|
|
@click="handleView(scope.row)"
|
|
>查看详情</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<pagination
|
|
id="L-pagination"
|
|
v-show="total>0"
|
|
:total="total"
|
|
:page.sync="queryParams.pageNum"
|
|
:limit.sync="queryParams.pageSize"
|
|
@pagination="getList"
|
|
/>
|
|
<!-- 申报审核对话框 -->
|
|
<el-dialog title="申报审核" :visible.sync="open" width="600px" append-to-body :close-on-click-modal="false">
|
|
<el-form ref="form" :model="form" :rules="rules" label-width="100px" label-position="left">
|
|
<el-row>
|
|
<el-col :span="24">
|
|
<el-form-item label="审批状态" prop="approvalStatus">
|
|
<div>
|
|
<el-radio-group v-model="form.approvalStatus">
|
|
<el-radio label="1">审批通过</el-radio>
|
|
<el-radio label="2">审批不通过</el-radio>
|
|
<el-radio label="3" v-if="deptId == '105'">退回修改</el-radio>
|
|
</el-radio-group>
|
|
</div>
|
|
<div style="font-size: 12px;color: #999;line-height: 20px;">注：审批不通过（该企业的申报将被终止结束），退回修改（该申报将退回到企业，由企业重新填报）</div>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="24" v-if="deptId == '103'">
|
|
<el-form-item
|
|
label="审批意见"
|
|
prop="approvalOpinions"
|
|
>
|
|
<!-- :rules="deptId == '103' ? rules.approvalOpinions : [
|
|
{required: false, message: '请导入所需的文件', trigger: 'blur' }]" -->
|
|
<el-input v-model="form.approvalOpinions" type="textarea" placeholder="请输入审批意见" maxlength="200"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
|
|
<el-col :span="24">
|
|
<el-form-item label="审批附件" prop="fileList">
|
|
<el-upload
|
|
class="upload-demo"
|
|
:show-file-list="false"
|
|
action=""
|
|
accept=".xlsx,.XLSX,.XSL,.doc,.xls,.ppt,.pdf,.png,.jpg,.jpeg,.rar,.zip,.docx"
|
|
:http-request="handleFileUpload"
|
|
:file-list="fileList"
|
|
>
|
|
<el-button slot="trigger" size="small" type="success">上传文件</el-button>
|
|
<div slot="tip" class="el-upload__tip">请上传格式为<span style="color: red;">doc/xls/ppt/pdf/png/jpg/jpeg/rar/zip/docx/xlsx</span>的文件</div>
|
|
</el-upload>
|
|
<ul v-if="fileList.length >0" class="upload_ul">
|
|
<li v-for="item in uploadList" :key="item.url" class="upload_li">
|
|
<img src="../../../assets/images/uploadBgc.jpg" class="li_img" alt="">
|
|
<span class="icon_name">{{ item.name }}</span>
|
|
<el-button type="text" style="color: red;" @click="deleteUpload(item)">删除</el-button>
|
|
</li>
|
|
</ul>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button @click="cancel">取 消</el-button>
|
|
<el-button type="primary" @click="submitForm">确 定</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { approvalList, approvalEdit, uploadFile } from "@/api/onlineDeclartion/pendingReview"
|
|
|
|
export default {
|
|
name: "PendingReview",
|
|
dicts: ['bms_product_area', 'bms_declaration_type', 'bms_responsibility_unit', 'bms_level',
|
|
'bms_template_type', 'bms_declaration_channels', 'bms_support_methods'],
|
|
data() {
|
|
return {
|
|
// 遮罩层
|
|
loading: true,
|
|
// 审批列表数据
|
|
checkList: [],
|
|
// 重新渲染表格状态
|
|
refreshTable: true,
|
|
total: 10,
|
|
// 查询参数
|
|
queryParams: {
|
|
projectName: undefined,
|
|
enterpriseDirectory: undefined,
|
|
enterpriseName: undefined,
|
|
approvalStatusStr: undefined,
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
},
|
|
deptId: this.$store.state.user.deptId,
|
|
// 是否显示弹出层
|
|
open: false,
|
|
// 表单参数
|
|
form: {
|
|
enterpriseDirectoryList: [],
|
|
approvalOpinions: ''
|
|
},
|
|
// 表单校验
|
|
rules: {
|
|
approvalStatus: [
|
|
{ required: true, message: "请选择审批状态", trigger: "blur" }
|
|
],
|
|
approvalOpinions: [
|
|
{ required: true, message: "请输入审批意见", trigger: "blur" }
|
|
],
|
|
},
|
|
fileList: [],
|
|
uploadList: [],
|
|
tabHeader: undefined,
|
|
radio: '',
|
|
};
|
|
},
|
|
mounted() {
|
|
if(this.$route.params.approvalStatusStr) {
|
|
this.queryParams.approvalStatusStr = this.$route.params.approvalStatusStr
|
|
this.radio = this.$route.params.approvalStatusStr
|
|
}
|
|
this.cancalDebounce();
|
|
// console.log(this.deptId,"deptId");
|
|
window.addEventListener('resize', this.cancalDebounce);
|
|
this.getList();
|
|
},
|
|
destroyed() {
|
|
window.removeEventListener('resize', this.cancalDebounce);
|
|
},
|
|
methods: {
|
|
// 屏幕尺寸变化
|
|
cancalDebounce(){
|
|
const element = document.getElementById('app-container'); // 通过元素的 ID 获取元素
|
|
const header = document.getElementById('I-form'); // 通过元素的 ID 获取元素
|
|
const headerTwo = document.getElementById('I-rowOne'); // 通过元素的 ID 获取元素
|
|
const pagination = document.getElementById('L-pagination'); // 通过元素的 ID 获取元素
|
|
const elementHeight = element.offsetHeight;
|
|
const headerHeight = header.offsetHeight;
|
|
const headerOHeight = headerTwo.offsetHeight;
|
|
const paginationtHeight = pagination.offsetHeight;
|
|
this.tabHeader = elementHeight - headerHeight - headerOHeight - paginationtHeight - 100;
|
|
},
|
|
/** 查询审批列表 */
|
|
getList() {
|
|
this.loading = true;
|
|
approvalList(this.queryParams).then(response => {
|
|
this.checkList = response.rows;
|
|
this.total = response.total
|
|
this.loading = false;
|
|
});
|
|
},
|
|
/** 搜索按钮操作 */
|
|
handleQuery() {
|
|
this.getList();
|
|
},
|
|
/** 重置按钮操作 */
|
|
resetQuery() {
|
|
this.resetForm("queryForm");
|
|
this.handleQuery();
|
|
},
|
|
/** 新增按钮操作 */
|
|
handleView(row) {
|
|
this.$router.push({name: 'onlineDeclareInfo',query: {
|
|
templateId: row.templateId,
|
|
templateRecordId: row.templateRecordId,
|
|
pageType: "detail",
|
|
detailId: row.declarationRecordsId,
|
|
enterpriseId: row.enterpriseId
|
|
}})
|
|
},
|
|
/** 切换审批项 */
|
|
toggleOptions(value) {
|
|
this.queryParams.approvalStatusStr = value
|
|
this.handleQuery();
|
|
},
|
|
// 取消按钮
|
|
cancel() {
|
|
this.open = false;
|
|
this.reset();
|
|
},
|
|
// 表单重置
|
|
reset() {
|
|
this.form = {
|
|
approvalOpinions: '',
|
|
approvalStatus: '1',
|
|
approvalAttachment: '',
|
|
};
|
|
this.resetForm("form");
|
|
this.uploadList = []
|
|
},
|
|
handleApproval(row) {
|
|
this.reset();
|
|
this.form.declarationRecordsId = row.declarationRecordsId
|
|
this.open = true;
|
|
},
|
|
handleFileUpload(params) {
|
|
const file = params.file
|
|
let form = new FormData()
|
|
form.append('file', file)
|
|
uploadFile(form).then(response => {
|
|
this.fileList = []
|
|
this.fileList.push(file)
|
|
this.form.fileList = this.fileList
|
|
let data = {}
|
|
data.name = response.originalFilename;
|
|
data.url = response.fileName;
|
|
this.uploadList.push(data)
|
|
// console.log('this.fileList: ', this.fileList);
|
|
})
|
|
},
|
|
deleteUpload(value) {
|
|
this.uploadList = this.uploadList.filter(item => {
|
|
return item.url != value.url
|
|
})
|
|
},
|
|
submitForm() {
|
|
this.$refs["form"].validate(valid => {
|
|
if (valid) {
|
|
this.uploadList.forEach((item,index) => {
|
|
if(this.uploadList.length-1 == index){
|
|
this.form.approvalAttachment+=`${item.url}`
|
|
} else {
|
|
this.form.approvalAttachment+=`${item.url},`
|
|
}
|
|
})
|
|
// console.log("sdas", this.form);
|
|
approvalEdit(this.form).then(response => {
|
|
this.$modal.msgSuccess("审核完成");
|
|
this.open = false;
|
|
this.getList();
|
|
});
|
|
}
|
|
});
|
|
},
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
ul, li {
|
|
list-style: none; /* 清除列表项前的标记 */
|
|
margin: 0; /* 清除上下外边距 */
|
|
padding: 0; /* 清除左右内边距 */
|
|
}
|
|
.upload_ul {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-content: space-between;
|
|
.upload_li {
|
|
// width: 45%;
|
|
display: flex;
|
|
// justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0 5px;
|
|
// margin: 10px 10px 10px 0;
|
|
color: inherit;
|
|
border: 1px solid #e4e7ed;
|
|
border-radius: 2px;
|
|
margin: 10px 20px 10px 0;
|
|
.li_img {
|
|
width: 25px;
|
|
height: 30px;
|
|
margin-right: 10px;
|
|
padding: 2px;
|
|
}
|
|
.icon_name {
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
word-wrap: break-word;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
}
|
|
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
.mb8 {
|
|
::v-deep .el-radio-button__inner {
|
|
// width: 100px;
|
|
// height: 36px;
|
|
// font-size: 14px;
|
|
// font-weight: 400;
|
|
// color: #696969;
|
|
// line-height: 14px;
|
|
// outline: none;
|
|
// box-shadow: none;
|
|
background: #f5f7fa;
|
|
border-color: #DCDFE6;
|
|
}
|
|
// 修改激活后的样式
|
|
::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
|
|
background: #fff;
|
|
// border: 0 !important;
|
|
color: #000;
|
|
// line-height: 14px;
|
|
// outline: none;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
// .search_btn {
|
|
// position: absolute;
|
|
// top: 20px;
|
|
// right: 18px;
|
|
// .btn {
|
|
// background-color: #f1d78c;
|
|
// border: none;
|
|
// color: #000;
|
|
// }
|
|
// }
|
|
// .btn {
|
|
// background-color: #f1d78c;
|
|
// border: none;
|
|
// color: #000;
|
|
// }
|
|
/* 悬浮 */
|
|
// ::v-deep .el-button:hover {
|
|
// /* background: linear-gradient(#0165eb, #018ff2, #00b7f9) !important; */
|
|
// background: linear-gradient(100deg, #f1d78c, #f1c19d) !important;
|
|
// font-weight: bold;
|
|
// color: #606266;
|
|
// }
|
|
/*按钮点击*/
|
|
// ::v-deep .el-button:focus {
|
|
// background: linear-gradient(100deg, #f1d78c, #f1c19d) !important;
|
|
// /* background: linear-gradient(#0165eb, #018ff2, #00b7f9) !important; */
|
|
// font-weight: bold;
|
|
// color: #606266;
|
|
// }
|
|
.approval_status5 {
|
|
color: #24d3a9;
|
|
position: relative;
|
|
padding-left: 15px;
|
|
}
|
|
.approval_status5::after {
|
|
position: absolute;
|
|
content: '';
|
|
width: 7px;
|
|
height: 7px;
|
|
border-radius: 50%;
|
|
background-color: #24d3a9;
|
|
left: 5px;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
.approval_status3 {
|
|
color: #134ee6;
|
|
position: relative;
|
|
padding-left: 15px;
|
|
}
|
|
.approval_status3::after {
|
|
position: absolute;
|
|
content: '';
|
|
width: 7px;
|
|
height: 7px;
|
|
border-radius: 50%;
|
|
background-color: #134ee6;
|
|
left: 5px;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
.approval_status1 {
|
|
color: #1890ff;
|
|
position: relative;
|
|
padding-left: 15px;
|
|
}
|
|
.approval_status1::after {
|
|
position: absolute;
|
|
content: '';
|
|
width: 7px;
|
|
height: 7px;
|
|
border-radius: 50%;
|
|
background-color: #1890ff;
|
|
left: 5px;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
.approval_status0 {
|
|
color: #14ecd0;
|
|
position: relative;
|
|
padding-left: 15px;
|
|
}
|
|
.approval_status0::after {
|
|
position: absolute;
|
|
content: '';
|
|
width: 7px;
|
|
height: 7px;
|
|
border-radius: 50%;
|
|
background-color: #14ecd0;
|
|
left: 5px;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
.approval_status8 {
|
|
color: #f39801;
|
|
position: relative;
|
|
padding-left: 15px;
|
|
}
|
|
.approval_status8::after {
|
|
position: absolute;
|
|
content: '';
|
|
width: 7px;
|
|
height: 7px;
|
|
border-radius: 50%;
|
|
background-color: #f39801;
|
|
left: 5px;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
.approval_status9 {
|
|
color: red;
|
|
position: relative;
|
|
padding-left: 15px;
|
|
}
|
|
.approval_status9::after {
|
|
position: absolute;
|
|
content: '';
|
|
width: 7px;
|
|
height: 7px;
|
|
border-radius: 50%;
|
|
background-color: red;
|
|
left: 5px;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
</style>
|