1. 修复上传问题或整改图片后，界面更新错误问题； 2. 优化问题整改界面展示效果； 3. 场景图片对话框添加查看状态下可以点击图片放大功能

riku

2024-11-22 d28223384922de5fb08c20516eb3f99981c8136a

 src/views/fysp/check/components/CompProblemCard.vue

@@ -1,13 +1,17 @@
<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-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>
@@ -85,15 +89,22 @@
      </el-col>
      <el-col :span="12">
        <el-row justify="end" class="btn-group">
          <el-button
          <el-button type="danger" size="small" @click="deletePro" disabled
            >删除</el-button
          >
          <!-- <el-button
            type="danger"
            size="small"
            @click="deletePro"
            :disabled="!proStatus.deletable"
            >删除</el-button
          >
          > -->
          <!-- 审核驳回操作 -->
          <el-button
            v-if="proStatus.name.indexOf('不通过') != -1"
            v-if="
              this.problem.extension3 == 'fail' ||
              this.problem.extension3 == 'change_fail'
            "
            type="danger"
            size="small"
            @click="revokePro"
@@ -106,12 +117,12 @@
            size="small"
            @click="rejectPro"
            :disabled="!proStatus.checkable"
            >驳回</el-button
            >审核驳回</el-button
          >
          <el-button
            v-if="
              proStatus.name.indexOf('不通过') == -1 &&
              proStatus.name.indexOf('通过') != -1
              this.problem.extension3 == 'pass' ||
              this.problem.extension3 == 'change_pass'
            "
            type="danger"
            size="small"
@@ -125,7 +136,7 @@
            size="small"
            @click="passPro"
            :disabled="!proStatus.checkable"
            >通过</el-button
            >审核通过</el-button
          >
        </el-row>
      </el-col>
@@ -139,6 +150,7 @@
    :subtask="subtask"
    :topTask="topTask"
    ref="compProblemAddOrUpdRef"
    @cancel="onProCanceled"
    @submit="onProSubmited"
  />
  <!-- 整改 -->
@@ -151,6 +163,7 @@
    :subtask="subtask"
    :month="month"
    :oldChangeFileList="problem.mediafileList"
    @cancel="onChangeCanceled"
    @submit="onChangeSubmited"
  />
  <!-- 问题复现 -->
@@ -173,7 +186,7 @@
import CompProRecent from './CompProRecent.vue';
import { useCloned } from '@vueuse/core';
export default {
  emits: ['submmit'],
  emits: ['check', 'submit', 'cancel'],
  components: {
    CompProblemAddOrUpd,
    ComChangeEdit,
@@ -231,11 +244,11 @@
        },
        {
          bef: '问题待整改',
          aft: '问题已整改'
          aft: '整改已上传'
        },
        {
          bef: '整改待审核',
          aft: '整改已审核'
          aft: '问题已整改'
        }
      ]
    };
@@ -281,10 +294,14 @@
    }
  },
  methods: {
    onProCanceled() {
      this.proAddOrUpdDialogVisible = false;
    },
    onProSubmited(isOk) {
      this.$emit('submit', isOk);
      this.proAddOrUpdDialogVisible = false;
    },
    onChangeCanceled() {},
    onChangeSubmited(isOk) {
      this.$emit('submit', isOk);
      this.changeDialogVisible = false;
@@ -332,7 +349,8 @@
            .checkProblem({ pId: pro.guid, action: action })
            .then((res) => {
              if (res.success) {
                this.$emit('submit', false);
                pro.extension3 = status;
                this.$emit('check');
              }
            });
        }
@@ -353,7 +371,8 @@
            .checkProblem({ pId: pro.guid, action: action })
            .then((res) => {
              if (res.success) {
                this.$emit('submit', false);
                pro.extension3 = status;
                this.$emit('check');
              }
            });
        }
@@ -395,14 +414,14 @@
<style scoped>
.layout {
  background-color: transparent;
  margin-top: 20px;
  margin-bottom: 20px;
  /* border: none; */
  border-color: rgba(0, 0, 0, 0.308);
  /* border-color: rgba(0, 0, 0, 0.308); */
}

.image {
  width: 200px;
  height: 210px;
  width: 240px;
  height: 250px;
  border-radius: 4px;
}

@@ -437,3 +456,61 @@
  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>