350 lines
12 KiB
Vue
350 lines
12 KiB
Vue
<template>
|
|
<div class="business-details-container">
|
|
<el-row>
|
|
<el-col :span="18">
|
|
<div class="left-container">
|
|
<div class="pages-title">减免申请详情</div>
|
|
<TitleTip :title="`基本信息`" />
|
|
|
|
<el-form size="small" style="padding: 20px" disabled label-width="120px" :model="detailsInfo">
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<el-form-item label="减免开始日期">
|
|
<el-input v-model="detailsInfo.reduceStartTime" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="减免结束日期">
|
|
<el-input v-model="detailsInfo.reduceEndTime" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="24">
|
|
<el-form-item label="减免原因">
|
|
<el-input
|
|
type="textarea"
|
|
v-model="detailsInfo.remark"
|
|
:autosize="{ minRows: 2, maxRows: 4 }"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
<TitleTip :title="`明细信息`" />
|
|
|
|
<el-table style="margin: 20px 0" :data="detailsList">
|
|
<el-table-column prop="num" label="减免数量" align="center" show-overflow-tooltip />
|
|
<el-table-column prop="maName" label="机具名称" align="center" show-overflow-tooltip />
|
|
<el-table-column prop="maModel" label="规格型号" align="center" show-overflow-tooltip />
|
|
<el-table-column prop="num" label="领料数量" align="center" show-overflow-tooltip />
|
|
<el-table-column prop="startTime" label="领料日期" align="center" show-overflow-tooltip />
|
|
<el-table-column prop="endTime" label="退料日期" align="center" show-overflow-tooltip />
|
|
<el-table-column
|
|
prop="reduceStartTime"
|
|
label="减免开始时间"
|
|
align="center"
|
|
show-overflow-tooltip
|
|
/>
|
|
<el-table-column
|
|
prop="reduceEndTime"
|
|
label="减免结束时间"
|
|
align="center"
|
|
show-overflow-tooltip
|
|
/>
|
|
<el-table-column
|
|
prop="leasePrice"
|
|
label="租赁单价(元/天)"
|
|
align="center"
|
|
show-overflow-tooltip
|
|
/>
|
|
<el-table-column prop="reduceDays" label="减免天数" align="center" show-overflow-tooltip />
|
|
<el-table-column
|
|
prop="reduceLeaseMoney"
|
|
label="减免费用(元)"
|
|
align="center"
|
|
show-overflow-tooltip
|
|
/>
|
|
</el-table>
|
|
<div class="total-amount">
|
|
<span>合计:</span>
|
|
<span>{{ totalAmount.toFixed(2) }} / 元</span>
|
|
</div>
|
|
<TitleTip :title="`附件信息`" />
|
|
|
|
<div class="file-box">
|
|
<div v-for="img in fileList" :key="img.id">
|
|
<el-image style="width: 100%; height: 100%" :src="img.url" fit="cover"></el-image>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<div class="right-container">
|
|
<div class="right-title">
|
|
<div></div>
|
|
<div></div>
|
|
<div>流程记录</div>
|
|
</div>
|
|
|
|
<div class="process-record">
|
|
<el-steps :active="active" :space="120" direction="vertical">
|
|
<el-step v-for="step in auditingList" :key="step.id" :title="step.nodeName">
|
|
<template slot="description">
|
|
<div class="custom-description">
|
|
<!-- {{ step.description }} -->
|
|
审核结果:
|
|
<el-tag size="mini" type="primary" v-if="step.isAccept === 0">待审批</el-tag>
|
|
<el-tag size="mini" type="success" v-if="step.isAccept === 1">已通过</el-tag>
|
|
<el-tag size="mini" type="danger" v-if="step.isAccept === 2">已驳回</el-tag>
|
|
</div>
|
|
|
|
<div class="node-info" v-if="step.createTime">
|
|
审核时间:
|
|
{{ step.createTime }}
|
|
</div>
|
|
|
|
<div class="node-info" v-if="step.remark">
|
|
审核意见:
|
|
{{ step.remark }}
|
|
</div>
|
|
</template>
|
|
</el-step>
|
|
</el-steps>
|
|
</div>
|
|
|
|
<div class="auditing-container" v-if="pagesType === 1">
|
|
<el-input
|
|
type="textarea"
|
|
v-model="auditingParams.remark"
|
|
placeholder="请输入审核意见"
|
|
:autosize="{ minRows: 2, maxRows: 6 }"
|
|
/>
|
|
|
|
<el-row class="btn-container">
|
|
<el-button type="success" size="mini" @click="onHandleAuditing(1)">通过</el-button>
|
|
<el-button type="danger" size="mini" @click="onHandleAuditing(2)">驳回</el-button>
|
|
</el-row>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import TitleTip from './components/title-tip.vue'
|
|
import { submitAuditingApi, getAuditingDetailsApi } from '@/api/reduction-apply/index.js'
|
|
import { getDiscountViewList } from '@/api/cost/cost'
|
|
export default {
|
|
components: {
|
|
TitleTip
|
|
},
|
|
data() {
|
|
return {
|
|
detailsInfo: {},
|
|
active: 1,
|
|
detailsList: [],
|
|
auditingList: [],
|
|
fileList: [],
|
|
totalAmount: 0,
|
|
auditingParams: {
|
|
nodeId: '', // 当前审核记录的id
|
|
remark: '', // 审核意见
|
|
typeId: '', // 当前审核记录中的 typeId
|
|
taskId: '', // 外层列表的taskId
|
|
isAccept: '', // 审批结果 1. 通过 2. 驳回
|
|
recordId: '',
|
|
nextNodeId: '' // 下个流程节点ID
|
|
},
|
|
pagesType: 1,
|
|
userId: '',
|
|
currentNodeId: ''
|
|
}
|
|
},
|
|
created() {
|
|
// 判断当前路由页面是否有查询参数
|
|
if (this.$route.query) {
|
|
const { id, taskId, type, nodeId } = this.$route.query
|
|
this.auditingParams.taskId = taskId
|
|
this.pagesType = type
|
|
this.currentNodeId = nodeId
|
|
this.getLeaseTaskDetailFun(id, taskId)
|
|
}
|
|
|
|
this.userId = sessionStorage.getItem('userId')
|
|
},
|
|
methods: {
|
|
// 通过 或 驳回
|
|
async onHandleAuditing(type) {
|
|
// 组装参数
|
|
const currentAuditing = this.auditingList.filter(e => e.configValues.includes(this.userId)) // 获取当前审核的节点
|
|
const currentIndex = this.auditingList.findIndex(e => e.configValues.includes(this.userId)) // 获取当前的索引
|
|
|
|
const { recordId, id, typeId, isAccept } = currentAuditing[0]
|
|
|
|
// if (isAccept != 0) {
|
|
// this.$modal.msgError('当前已审核，不可重复审核')
|
|
// return
|
|
// }
|
|
Object.assign(this.auditingParams, {
|
|
typeId,
|
|
recordId,
|
|
nodeId: id
|
|
})
|
|
this.auditingParams.isAccept = type
|
|
if (currentIndex !== this.auditingList.length - 1) {
|
|
this.auditingParams.nextNodeId = this.auditingList[currentIndex + 1].id
|
|
}
|
|
|
|
const res = await submitAuditingApi(this.auditingParams)
|
|
console.log(res, '提交结果')
|
|
|
|
if (res.code === 200) {
|
|
this.$modal.msgSuccess('审核成功')
|
|
setTimeout(() => {
|
|
const obj = { path: '/business-examine/reduction-apply' }
|
|
this.$tab.closeOpenPage(obj)
|
|
}, 500)
|
|
}
|
|
|
|
console.log(this.auditingParams, ' this.auditingParams组装好的参数')
|
|
},
|
|
// 获取数据详情 和 审核记录详情
|
|
async getLeaseTaskDetailFun(id, taskId) {
|
|
const { data: res } = await getDiscountViewList(id)
|
|
|
|
this.detailsInfo = res
|
|
this.detailsList = res.detailList
|
|
this.fileList = res.bmFileInfos
|
|
|
|
this.detailsList.forEach(e => {
|
|
this.totalAmount += e.reduceLeaseMoney * 1
|
|
})
|
|
|
|
const { rows: result } = await getAuditingDetailsApi({ taskId })
|
|
this.auditingList = result
|
|
console.log('result审核记录详情', result)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.business-details-container {
|
|
padding: 20px;
|
|
}
|
|
|
|
.pages-title {
|
|
padding: 10px 0 30px 0;
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
letter-spacing: 2px;
|
|
text-align: center;
|
|
color: #19a4a0;
|
|
}
|
|
|
|
.file-box {
|
|
padding: 10px;
|
|
display: grid;
|
|
grid-template-columns: repeat(12, 1fr);
|
|
grid-gap: 10px;
|
|
div {
|
|
height: 80px;
|
|
text-align: center;
|
|
}
|
|
|
|
& div:nth-child(12n) {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
.right-container {
|
|
padding: 0 20px;
|
|
}
|
|
|
|
.right-title {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 14px;
|
|
& div:first-child {
|
|
width: 16px;
|
|
height: 16px;
|
|
border-radius: 50%;
|
|
background-color: #19a4a0;
|
|
z-index: 9;
|
|
}
|
|
& div:nth-child(2) {
|
|
width: 16px;
|
|
height: 16px;
|
|
border-radius: 50%;
|
|
background-color: #b2e1e0;
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
|
|
.process-record {
|
|
margin-top: 20px;
|
|
// height: 60vh;
|
|
}
|
|
|
|
.btn-container {
|
|
margin-top: 10px;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
::v-deep .el-step__icon.is-text {
|
|
background-color: #19a4a0;
|
|
color: #19a4a0;
|
|
border: none;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
::v-deep .el-step.is-vertical .el-step__line {
|
|
width: 2px;
|
|
top: 26px;
|
|
bottom: 8px;
|
|
left: 7px;
|
|
}
|
|
|
|
::v-deep .el-step__title.is-finish {
|
|
font-weight: bold;
|
|
color: #303133;
|
|
font-size: 16px;
|
|
}
|
|
|
|
::v-deep .el-step__title.is-wait {
|
|
font-weight: bold;
|
|
color: #303133;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.total-amount {
|
|
margin-bottom: 10px;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
font-size: 14px;
|
|
align-items: center;
|
|
|
|
& span:last-child {
|
|
margin: 0 6px;
|
|
color: red;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.custom-description {
|
|
padding: 8px 0 8px 20px;
|
|
color: #666;
|
|
}
|
|
|
|
.node-info {
|
|
// padding: 2px 0;
|
|
padding-left: 20px;
|
|
color: #666;
|
|
letter-spacing: 1px;
|
|
}
|
|
</style>
|