<template>
|
<el-card class="layout" shadow="never">
|
<!-- <el-row justify="space-between"> -->
|
<div >
|
<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>
|
</div>
|
<!-- </el-row> -->
|
|
<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
|
>整改检验</el-button
|
>
|
<el-button type="info" size="small" @click="currProRecent" plain
|
>问题复现</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="false"
|
>删除</el-button
|
>
|
<!-- <el-button
|
type="danger"
|
size="small"
|
@click="deletePro"
|
:disabled="!proStatus.deletable"
|
>删除</el-button
|
> -->
|
<!-- 审核驳回操作 -->
|
<el-button
|
v-if="
|
this.problem.extension3 == 'fail' ||
|
this.problem.extension3 == 'change_fail'
|
"
|
type="danger"
|
size="small"
|
@click="revokePro"
|
:disabled="proStatus.checkable"
|
>撤销驳回</el-button
|
>
|
<el-button
|
v-else
|
type="warning"
|
size="small"
|
@click="rejectPro"
|
:disabled="!proStatus.checkable"
|
>审核驳回</el-button
|
>
|
<el-button
|
v-if="
|
this.problem.extension3 == 'pass' ||
|
this.problem.extension3 == 'change_pass'
|
"
|
type="danger"
|
size="small"
|
@click="revokePro"
|
:disabled="proStatus.checkable"
|
>撤销通过</el-button
|
>
|
<el-button
|
v-else
|
type="success"
|
size="small"
|
@click="passPro"
|
:disabled="!proStatus.checkable"
|
>审核通过</el-button
|
>
|
</el-row>
|
</el-col>
|
</el-row>
|
</el-card>
|
<CompProblemAddOrUpd
|
title="问题更正"
|
v-if="proAddOrUpdDialogVisible"
|
v-model:visible="proAddOrUpdDialogVisible"
|
:problem="deepCopyPro"
|
:subtask="subtask"
|
:topTask="topTask"
|
ref="compProblemAddOrUpdRef"
|
@cancel="onProCanceled"
|
@submit="onProSubmited"
|
/>
|
<!-- 整改 -->
|
<ComChangeEdit
|
:title="changeType == 1 ? '整改检验' : '整改提交'"
|
v-if="changeDialogVisible"
|
v-model:visible="changeDialogVisible"
|
:changeType="changeType"
|
:problemId="problem.guid"
|
:subtask="subtask"
|
:month="month"
|
:oldChangeFileList="problem.mediafileList"
|
@cancel="onChangeCanceled"
|
@submit="onChangeSubmited"
|
/>
|
<!-- 问题复现 -->
|
<CompProRecent
|
title="问题复现"
|
v-if="proRecentDialogVisible"
|
v-model:visible="proRecentDialogVisible"
|
:subtask="subtask"
|
:topTask="topTask"
|
:problem="problem"
|
/>
|
</template>
|
|
<script>
|
import ProCheckProxy from '../ProCheckProxy';
|
import problemApi from '@/api/fysp/problemApi';
|
import { useMessageBoxTip } from '@/composables/messageBox';
|
import CompProblemAddOrUpd from './CompProblemAddOrUpd.vue';
|
import ComChangeEdit from './ComChangeEdit.vue';
|
import CompProRecent from './CompProRecent.vue';
|
import { useCloned } from '@vueuse/core';
|
export default {
|
emits: ['check', 'submit', 'cancel'],
|
components: {
|
CompProblemAddOrUpd,
|
ComChangeEdit,
|
CompProRecent
|
},
|
props: {
|
// 只读选项
|
readonly: {
|
type: Boolean,
|
default: () => {
|
return false;
|
}
|
},
|
topTask: {
|
type: Object,
|
default: () => {}
|
},
|
subtask: {
|
type: Object,
|
default: () => {}
|
},
|
insGuid: {
|
type: String,
|
default: () => ''
|
},
|
problem: {
|
type: Object,
|
default: () => {
|
return {};
|
}
|
},
|
index: {
|
type: Number,
|
default: 1
|
}
|
},
|
data() {
|
return {
|
changeDialogVisible: false,
|
changeType: -1,
|
addChangeDialogVisible: false,
|
// 近期情况
|
proRecentDialogVisible: false,
|
month: -1,
|
deepCopyPro: {},
|
deepCopySubtask: {},
|
deepCopyTopTask: {},
|
proAddOrUpdDialogVisible: false,
|
changeEditDialogVisible: false,
|
// 审核步骤
|
steps: [
|
{
|
bef: '问题待审核',
|
aft: '问题已审核'
|
},
|
{
|
bef: '问题待整改',
|
aft: '整改已上传'
|
},
|
{
|
bef: '整改待审核',
|
aft: '问题已整改'
|
}
|
]
|
};
|
},
|
mounted() {},
|
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: {
|
onProCanceled() {
|
this.proAddOrUpdDialogVisible = false;
|
},
|
onProSubmited(isOk) {
|
this.$emit('submit', isOk);
|
this.proAddOrUpdDialogVisible = false;
|
},
|
onChangeCanceled() {},
|
onChangeSubmited(isOk) {
|
this.$emit('submit', isOk);
|
this.changeDialogVisible = false;
|
},
|
deletePro() {
|
useMessageBoxTip({
|
confirmMsg: '是否删除问题',
|
confirmTitle: '确定',
|
onConfirm: () => {
|
return problemApi
|
.deleteProblem({
|
pid: this.problem.guid
|
})
|
.then((res) => {
|
if (res.success) {
|
this.$emit('submit');
|
}
|
});
|
}
|
});
|
},
|
rejectPro() {
|
this.checkPro(false);
|
},
|
passPro() {
|
this.checkPro(true);
|
},
|
revokePro() {
|
const pro = this.problem;
|
let status = this.proStatus;
|
let doneMsg;
|
if (status.index <= 2) {
|
doneMsg = '问题未审核';
|
} else if (status.index <= 3) {
|
doneMsg = '整改未审核';
|
}
|
useMessageBoxTip({
|
confirmMsg: `确认撤回到${doneMsg}？`,
|
confirmTitle: '审核撤回',
|
onConfirm: () => {
|
const { status, action } = ProCheckProxy.proBeforeStatus(
|
pro.extension3
|
);
|
return problemApi
|
.checkProblem({ pId: pro.guid, action: action })
|
.then((res) => {
|
if (res.success) {
|
pro.extension3 = status;
|
this.$emit('check');
|
}
|
});
|
}
|
});
|
},
|
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('check');
|
}
|
});
|
}
|
});
|
},
|
updatePro() {
|
this.deepCopyPro = useCloned(this.problem).cloned.value;
|
this.$nextTick(() => {
|
this.proAddOrUpdDialogVisible = true;
|
});
|
},
|
getCurrentMouth() {
|
// 使用Date对象解析日期字符串
|
var date = new Date(this.subtask.subtask.planstarttime);
|
// 获取月份信息，月份是从0开始的，所以需要加1
|
this.month = date.getMonth() + 1;
|
if (String(this.month).length == 1) {
|
this.month = `0${this.month}`;
|
}
|
// 获取年份
|
var year = date.getFullYear();
|
this.month = `${year}-${this.month}`;
|
},
|
updateChange() {
|
this.getCurrentMouth();
|
if (!this.problem.ischanged) {
|
this.changeType = 0;
|
} else {
|
this.changeType = 1;
|
}
|
this.changeDialogVisible = true;
|
},
|
currProRecent() {
|
this.proRecentDialogVisible = true;
|
}
|
}
|
};
|
</script>
|
<style scoped>
|
.layout {
|
background-color: transparent;
|
margin-bottom: 20px;
|
/* border: none; */
|
/* border-color: rgba(0, 0, 0, 0.308); */
|
}
|
|
.image {
|
width: 240px;
|
height: 250px;
|
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>
|
|
<!-- 步骤条自定义样式 -->
|
<style scoped>
|
:deep(.el-steps--simple){
|
background: #fffbf731;
|
}
|
|
:deep(.is-wait .el-step__icon){
|
height: 17px;
|
width: 17px;
|
margin-top: 3px;
|
}
|
|
:deep(.is-wait .is-text .el-step__icon-inner) {
|
font-size: var(--el-font-size-small);
|
}
|
|
:deep(.is-success .el-step__icon){
|
height: 17px;
|
width: 17px;
|
margin-top: 3px;
|
}
|
|
:deep(.is-success .is-text .el-step__icon-inner) {
|
font-size: var(--el-font-size-small);
|
}
|
|
:deep(.el-step__head.is-process) {
|
border-color: var(--el-color-danger);
|
color: var(--el-color-danger)
|
}
|
|
:deep(.el-step__head.is-wait) {
|
border-color: var(--el-text-color-placeholder);
|
color: var(--el-text-color-placeholder)
|
}
|
|
:deep(.el-step__head.is-success) {
|
border-color: var(--el-color-success-light-3);
|
color: var(--el-color-success-light-3)
|
}
|
|
:deep(.el-step__title.is-process) {
|
color: var(--el-color-danger);
|
font-weight: bolder;
|
font-size: var(--el-font-size-large);
|
}
|
|
:deep(.el-step__title.is-wait) {
|
color: var(--el-text-color-placeholder);
|
font-size: var(--el-font-size-small);
|
}
|
|
:deep(.el-step__title.is-success) {
|
color: var(--el-color-success-light-3);
|
font-size: var(--el-font-size-small);
|
}
|
</style>
|
