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,95 +89,92 @@
      </el-col>
      <el-col :span="12">
        <el-row justify="end" class="btn-group">
          <el-button
          <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="beforePro"
            @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 +186,7 @@
import CompProRecent from './CompProRecent.vue';
import { useCloned } from '@vueuse/core';
export default {
  emits: ['check', 'submit', 'cancel'],
  components: {
    CompProblemAddOrUpd,
    ComChangeEdit,
@@ -221,9 +223,10 @@
      default: 1
    }
  },
  emits: ['submit'],
  data() {
    return {
      changeDialogVisible: false,
      changeType: -1,
      addChangeDialogVisible: false,
      // 近期情况
      proRecentDialogVisible: false,
@@ -241,11 +244,11 @@
        },
        {
          bef: '问题待整改',
          aft: '问题已整改'
          aft: '整改已上传'
        },
        {
          bef: '整改待审核',
          aft: '整改已审核'
          aft: '问题已整改'
        }
      ]
    };
@@ -291,30 +294,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 +329,7 @@
    passPro() {
      this.checkPro(true);
    },
    beforePro() {
    revokePro() {
      const pro = this.problem;
      let status = this.proStatus;
      let doneMsg;
@@ -360,7 +350,7 @@
            .then((res) => {
              if (res.success) {
                pro.extension3 = status;
                this.$emit('submit', false);
                this.$emit('check');
              }
            });
        }
@@ -382,19 +372,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 +399,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,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;
}
@@ -470,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>