<template>
|
<el-card class="layout" shadow="hover">
|
<el-steps :active="proStatus.index" finish-status="success" style="" align-center>
|
<el-step v-for="(s, i) in getSteps" :key="i" :title="s" />
|
</el-steps>
|
|
<el-descriptions :column="3" size="small">
|
<template #title>
|
<span class="d-index">{{ index }}</span>
|
<span class="d-title">{{ title }}</span>
|
</template>
|
<template #extra>
|
<!-- <span class="d-extra">{{ status }}</span> -->
|
<el-tag
|
style="font-size: 16px; line-height: 16px; padding: 14px"
|
:type="proStatus.type"
|
effect="plain"
|
size="large"
|
round
|
>{{ proStatus.name }}</el-tag
|
>
|
</template>
|
<el-descriptions-item
|
label-class-name="descriptions-label-1"
|
v-for="(d, i) in descriptions"
|
:key="i"
|
:label="d.name"
|
>{{ d.value }}</el-descriptions-item
|
>
|
</el-descriptions>
|
|
<el-scrollbar>
|
<el-descriptions title=" " :column="2" direction="vertical" size="small" border>
|
<template v-for="(pic, t) in pics" :key="t">
|
<template v-if="pic.path.length > 0">
|
<el-descriptions-item
|
:label="pic.title"
|
:label-class-name="t == 0 ? 'descriptions-label-1' : 'descriptions-label-2'"
|
>
|
<el-space>
|
<el-image
|
v-for="(p, i) in pic.path"
|
class="image"
|
:key="i"
|
:src="p"
|
:preview-src-list="pic.path"
|
:initial-index="i"
|
fit="cover"
|
lazy
|
/>
|
</el-space>
|
</el-descriptions-item>
|
</template>
|
</template>
|
</el-descriptions>
|
</el-scrollbar>
|
|
<!-- 问题操作 -->
|
<el-row v-if="true" style="margin-top: 16px">
|
<el-col :span="12">
|
<el-row justify="start" class="btn-group">
|
<el-button type="success" size="small" @click="updatePro" plain>修改问题</el-button>
|
<el-button
|
type="primary"
|
size="small"
|
@click="updateChange"
|
plain
|
:disabled="!proStatus.changeable"
|
>修改整改</el-button
|
>
|
</el-row>
|
</el-col>
|
<el-col :span="12">
|
<el-row justify="end" class="btn-group">
|
<el-button type="danger" size="small" @click="deletePro" :disabled="!proStatus.deletable"
|
>删除</el-button
|
>
|
<el-button type="warning" size="small" @click="rejectPro" :disabled="!proStatus.checkable"
|
>驳回</el-button
|
>
|
<el-button type="success" size="small" @click="passPro" :disabled="!proStatus.checkable"
|
>通过</el-button
|
>
|
</el-row>
|
</el-col>
|
</el-row>
|
</el-card>
|
</template>
|
|
<script>
|
import ProCheckProxy from '../ProCheckProxy'
|
import problemApi from '@/api/fysp/problemApi'
|
import { useMessageBoxTip } from '@/composables/messageBox'
|
|
export default {
|
props: {
|
problem: {
|
type: Object,
|
default: () => {
|
return {}
|
}
|
},
|
index: {
|
type: Number,
|
default: 1
|
}
|
},
|
emits:['submit'],
|
data() {
|
return {
|
// 审核步骤
|
steps: [
|
{
|
bef: '问题待审核',
|
aft: '问题已审核'
|
},
|
{
|
bef: '问题待整改',
|
aft: '问题已整改'
|
},
|
{
|
bef: '整改待审核',
|
aft: '整改已审核'
|
}
|
]
|
}
|
},
|
computed: {
|
// 问题名称
|
title() {
|
return this.problem.problemname
|
},
|
// 问题描述
|
descriptions() {
|
return [
|
{
|
name: '问题位置',
|
value: this.problem.location
|
},
|
{
|
name: '提交时间',
|
value: this.problem.time.replace('T', ' ').split('.')[0]
|
}
|
]
|
},
|
// 问题图片
|
pics() {
|
return ProCheckProxy.proPics(this.problem)
|
},
|
/**
|
* 获取当前问题审核步骤
|
*/
|
getSteps() {
|
return this.steps.map((v, i) => {
|
if (i >= this.proStatus.index) {
|
return v.bef
|
} else {
|
return v.aft
|
}
|
})
|
},
|
// 问题状态
|
proStatus() {
|
return ProCheckProxy.proStatusMap(this.problem.extension3)
|
}
|
},
|
methods: {
|
deletePro() {},
|
rejectPro() {
|
this.checkPro(false)
|
},
|
passPro() {
|
this.checkPro(true)
|
},
|
checkPro(pass) {
|
const pro = this.problem
|
let doneMsg = pass ? '通过' : '驳回'
|
useMessageBoxTip({
|
confirmMsg: `确认是否${doneMsg}该问题？`,
|
confirmTitle: '问题审核',
|
onConfirm: () => {
|
const { status, action } = ProCheckProxy.proNextStatus(pro.extension3, pass)
|
return problemApi.checkProblem({ pId: pro.guid, action: action }).then((res) => {
|
if (res.success) {
|
pro.extension3 = status
|
this.$emit('submit')
|
}
|
})
|
}
|
})
|
},
|
updatePro() {},
|
updateChange() {}
|
}
|
}
|
</script>
|
<style scoped>
|
.layout {
|
background-color: transparent;
|
margin-top: 20px;
|
/* border: none; */
|
border-color: rgba(0, 0, 0, 0.308);
|
}
|
|
.image {
|
width: 200px;
|
height: 210px;
|
border-radius: 4px;
|
}
|
|
.d-index {
|
display: inline-block;
|
width: 22px;
|
height: 22px;
|
line-height: 22px;
|
text-align: center;
|
border-radius: 50%;
|
color: var(--el-color-primary-light-3);
|
border: 2px solid var(--el-color-primary-light-3);
|
margin-right: 4px;
|
}
|
|
.d-title {
|
/* background: var(--el-color-danger-light-3); */
|
font-weight: 600;
|
font-size: var(--el-font-size-large);
|
}
|
|
.d-extra {
|
}
|
|
.descriptions-label-1 {
|
color: whitesmoke;
|
background: var(--el-color-danger-light-3);
|
}
|
|
.descriptions-label-2 {
|
color: whitesmoke;
|
background-color: var(--el-color-success-light-3);
|
}
|
</style>
|
