<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>整改检验</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="!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>
|
<div class="dialog-wrapper">
|
<el-dialog
|
title="问题更正"
|
width="80%"
|
v-model="proAddOrUpdDialogVisible"
|
:before-close="proAddOrUpdDialogClose"
|
>
|
<CompProblemAddOrUpd
|
v-if="proAddOrUpdDialogVisible"
|
:problem="deepCopyPro"
|
:subtask="deepCopySubtask"
|
:topTask="deepCopyTopTask"
|
ref="compProblemAddOrUpdRef"
|
@submited="onProSubmited"
|
/>
|
</el-dialog>
|
</div>
|
<el-dialog width="80%" title="整改提交" v-model="addChangeDialogVisible">
|
<ComChangeEdit
|
:changeType="0"
|
v-if="addChangeDialogVisible"
|
:problemId="problem.guid"
|
:subtask="subtask"
|
:month="month"
|
@submited="onAddChangeSubmited"
|
/>
|
</el-dialog>
|
<el-dialog
|
width="80%"
|
title="整改检验"
|
v-model="changeEditDialogVisible"
|
:before-close="changeEditDialogClose"
|
>
|
<ComChangeEdit
|
:changeType="1"
|
v-if="changeEditDialogVisible"
|
:problemId="problem.guid"
|
:oldChangeFileList="problem.mediafileList"
|
:subtask="subtask"
|
:month="month"
|
@submited="onChangeSubmited"
|
/>
|
</el-dialog>
|
<!-- 问题复现 -->
|
<el-dialog
|
width="80%"
|
title="问题复现"
|
v-model="proRecentDialogVisible"
|
:before-close="proRecentDialogClose"
|
>
|
<CompProRecent
|
v-if="proRecentDialogVisible"
|
:subtask="subtask"
|
:topTask="topTask"
|
:problem="problem"
|
/>
|
</el-dialog>
|
</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 {
|
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
|
}
|
},
|
emits: ['submit'],
|
data() {
|
return {
|
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: {
|
onAddChangeSubmited() {
|
this.$emit('updated', true);
|
this.addChangeDialogVisible = false;
|
},
|
// 近期情况弹窗关闭
|
proRecentDialogClose() {
|
this.proRecentDialogVisible = false;
|
},
|
newProblem() {
|
this.proAddOrUpdDialogVisible = true;
|
},
|
onProSubmited(isOk) {
|
this.$emit('updated', isOk);
|
this.proAddOrUpdDialogVisible = false;
|
},
|
onChangeSubmited(isOk) {
|
this.$emit('updated', isOk);
|
this.changeEditDialogVisible = false;
|
},
|
proAddOrUpdDialogClose() {
|
this.proAddOrUpdDialogVisible = false;
|
},
|
changeEditDialogClose() {
|
this.changeEditDialogVisible = 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);
|
},
|
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');
|
}
|
});
|
}
|
});
|
},
|
addChange() {
|
this.addChangeDialogVisible = true;
|
},
|
updatePro() {
|
this.deepCopyPro = useCloned(this.problem).cloned.value;
|
this.deepCopySubtask = useCloned(this.subtask).cloned.value;
|
this.deepCopyTopTask = useCloned(this.topTask).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.addChange();
|
} else {
|
this.changeEditDialogVisible = true;
|
}
|
},
|
currProRecent() {
|
this.proRecentDialogVisible = true;
|
}
|
}
|
};
|
</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>
|
