1. 将场景图片的分类修改为从服务端动态获取； 2. 问题整改节目中的问题复现功能修改为可拖动对话框且移除背景模态框；

riku

2025-07-02 6f3fac4493995e16ee0f37c6cf2b06e5de2a6a72

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

@@ -1,15 +1,19 @@
<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">
    <el-descriptions :column="2" size="small" border>
      <template #title>
        <span class="d-index">{{ index }}</span>
        <span class="d-title">{{ title }}</span>
@@ -30,8 +34,14 @@
        v-for="(d, i) in descriptions"
        :key="i"
        :label="d.name"
        >{{ d.value }}</el-descriptions-item
      >
        <template #label>
          <el-text tag="b" size="small">
            {{ d.name }}
          </el-text>
        </template>
        {{ d.value }}
      </el-descriptions-item>
    </el-descriptions>

    <el-scrollbar>
@@ -50,6 +60,11 @@
                t == 0 ? 'descriptions-label-1' : 'descriptions-label-2'
              "
            >
              <template #label>
                <el-text tag="b" size="small">
                  {{ pic.title }}
                </el-text>
              </template>
              <el-space>
                <el-image
                  v-for="(p, i) in pic.path"
@@ -89,91 +104,92 @@
            type="danger"
            size="small"
            @click="deletePro"
            :disabled="!proStatus.deletable"
            :disabled="true"
            >删除</el-button
          >
          <el-button
          <!-- <el-button
            type="danger"
            size="small"
            @click="beforePro"
            @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
          >
          <el-button
            v-else
            type="warning"
            size="small"
            @click="rejectPro"
            :disabled="!proStatus.checkable"
            >驳回</el-button
            >审核驳回</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-button
          >
        </el-row>
      </el-col>
    </el-row>
  </el-card>
  <div class="dialog-wrapper">
    <el-dialog
      title="问题更正"
      width="50%"
      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="50%"
    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>
  <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"
  />
  <!-- 问题复现 -->
  <el-dialog
    width="50%"
  <CompProRecent
    title="问题复现"
    v-model="proRecentDialogVisible"
    :before-close="proRecentDialogClose"
  >
    <CompProRecent
      v-if="proRecentDialogVisible"
      :subtask="subtask"
      :topTask="topTask"
      :problem="problem"
    />
  </el-dialog>
    v-if="proRecentDialogVisible"
    v-model:visible="proRecentDialogVisible"
    :subtask="subtask"
    :topTask="topTask"
    :problem="problem"
  />
</template>

<script>
@@ -185,6 +201,7 @@
import CompProRecent from './CompProRecent.vue';
import { useCloned } from '@vueuse/core';
export default {
  emits: ['check', 'submit', 'cancel'],
  components: {
    CompProblemAddOrUpd,
    ComChangeEdit,
@@ -221,9 +238,10 @@
      default: 1
    }
  },
  emits: ['submit'],
  data() {
    return {
      changeDialogVisible: false,
      changeType: -1,
      addChangeDialogVisible: false,
      // 近期情况
      proRecentDialogVisible: false,
@@ -241,11 +259,11 @@
        },
        {
          bef: '问题待整改',
          aft: '问题已整改'
          aft: '整改已上传'
        },
        {
          bef: '整改待审核',
          aft: '整改已审核'
          aft: '问题已整改'
        }
      ]
    };
@@ -258,16 +276,28 @@
    },
    // 问题描述
    descriptions() {
      return [
      const des = [
        {
          icon: 'Location',
          name: '问题位置',
          value: this.problem.location
        },
        {
          icon: 'Clock',
          name: '提交时间',
          value: this.problem.time.replace('T', ' ').split('.')[0]
        }
      ];
      if (this.problem.ischanged) {
        des.push({
          icon: 'Clock',
          name: '整改时间',
          value: this.problem.changedtime
            ? this.problem.changedtime.replace('T', ' ').split('.')[0]
            : this.problem.time.replace('T', ' ').split('.')[0]
        });
      }
      return des;
    },
    // 问题图片
    pics() {
@@ -291,30 +321,17 @@
    }
  },
  methods: {
    onAddChangeSubmited() {
      this.$emit('updated', true);
      this.addChangeDialogVisible = false;
    },
    // 近期情况弹窗关闭
    proRecentDialogClose() {
      this.proRecentDialogVisible = false;
    },
    newProblem() {
      this.proAddOrUpdDialogVisible = true;
    onProCanceled() {
      this.proAddOrUpdDialogVisible = false;
    },
    onProSubmited(isOk) {
      this.$emit('updated', isOk);
      this.$emit('submit', isOk);
      this.proAddOrUpdDialogVisible = false;
    },
    onChangeCanceled() {},
    onChangeSubmited(isOk) {
      this.$emit('updated', isOk);
      this.changeEditDialogVisible = false;
    },
    proAddOrUpdDialogClose() {
      this.proAddOrUpdDialogVisible = false;
    },
    changeEditDialogClose() {
      this.changeEditDialogVisible = false;
      this.$emit('submit', isOk);
      this.changeDialogVisible = false;
    },
    deletePro() {
      useMessageBoxTip({
@@ -339,7 +356,7 @@
    passPro() {
      this.checkPro(true);
    },
    beforePro() {
    revokePro() {
      const pro = this.problem;
      let status = this.proStatus;
      let doneMsg;
@@ -360,7 +377,7 @@
            .then((res) => {
              if (res.success) {
                pro.extension3 = status;
                this.$emit('submit', false);
                this.$emit('check');
              }
            });
        }
@@ -382,19 +399,14 @@
            .then((res) => {
              if (res.success) {
                pro.extension3 = status;
                this.$emit('submit', false);
                this.$emit('check');
              }
            });
        }
      });
    },
    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;
      });
@@ -414,10 +426,11 @@
    updateChange() {
      this.getCurrentMouth();
      if (!this.problem.ischanged) {
        this.addChange();
        this.changeType = 0;
      } else {
        this.changeEditDialogVisible = true;
        this.changeType = 1;
      }
      this.changeDialogVisible = true;
    },
    currProRecent() {
      this.proRecentDialogVisible = true;
@@ -428,15 +441,16 @@
<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;
  margin-bottom: 6px;
}

.d-index {
@@ -460,13 +474,71 @@
.d-extra {
}

.descriptions-label-1 {
  color: whitesmoke;
  background: var(--el-color-danger-light-3);
:deep(.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);
  /* 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>