子组件刷新父组件不刷新页面，表单验证，upload组件预览图片，弹窗放在组件内部，bug修复

hcong

2024-11-20 f2138817fdd6e9141c5911514280b8d0b6ca08f1

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

@@ -1,15 +1,24 @@
<template>
  <div>
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane v-for="(item, i) in ranges" :key="i" :label="item" :name="item"> </el-tab-pane>
    </el-tabs>
    <div class="proList">
      <el-card class="card-style" shadow="hover">
        <el-descriptions v-loading="loading">
          <el-descriptions-item label="总出现次数">{{ curProList.length }}</el-descriptions-item>
          <!-- <el-descriptions-item label="复现率">{{ repeteRate }}%</el-descriptions-item> -->
        </el-descriptions>
        <!-- <el-descriptions v-loading="loading" column="3">
  <CompGenericWrapper type="dialog">
    <template #content>
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane
          v-for="(item, i) in ranges"
          :key="i"
          :label="item"
          :name="item"
        >
        </el-tab-pane>
      </el-tabs>
      <div class="proList">
        <el-card class="card-style" shadow="hover" v-loading="loading">
          <el-descriptions>
            <el-descriptions-item label="总出现次数">{{
              curProList.length
            }}</el-descriptions-item>
            <!-- <el-descriptions-item label="复现率">{{ repeteRate }}%</el-descriptions-item> -->
          </el-descriptions>
          <!-- <el-descriptions v-loading="loading" column="3">
          <div v-for="pro in curProList">
            <el-descriptions-item>{{ pro.problemname }}</el-descriptions-item>
            <el-descriptions-item label="任务名称">{{ pro._stName }}</el-descriptions-item>
@@ -18,43 +27,42 @@
            </el-descriptions-item>
          </div>
        </el-descriptions> -->
        <el-table :data="curProList" style="width: 100%">
          <el-table-column type="index" width="50" />
          <el-table-column prop="problemname" label="问题"/>
          <el-table-column prop="_time" label="时间" width="250" />
          <el-table-column label="操作" width="180">
            <template v-slot="scope">
              <el-button link type="primary" @click="info(scope.row)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <el-dialog
          <el-table :data="curProList" style="width: 100%">
            <el-table-column type="index" width="50" />
            <el-table-column prop="problemname" label="问题" />
            <el-table-column prop="_time" label="时间" width="250" />
            <el-table-column label="操作" width="180">
              <template v-slot="scope">
                <el-button link type="primary" @click="info(scope.row)"
                  >详情</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </div>
      <CompProblemAddOrUpd
        v-model:visible="proAddOrUpdDialogVisible"
        title="预览"
        v-model="proAddOrUpdDialogVisible"
        :before-close="proAddOrUpdDialogClose"
        width="80%"
      >
        <CompProblemAddOrUpd
          v-if="proAddOrUpdDialogVisible"
          :subtask="subtask"
          :topTask="topTask"
          :problem="previewPro"
          :readonly="true"
          ref="compProblemAddOrUpdRef"
        />
      </el-dialog>
    </div>
  </div>
        :subtask="subtask"
        :topTask="topTask"
        :problem="previewPro"
        :readonly="true"
        ref="compProblemAddOrUpdRef"
      />
      <el-dialog destroy-on-close> </el-dialog>
    </template>
  </CompGenericWrapper>
</template>
<script>
import CompGenericWrapper from './CompGenericWrapper.vue';
import CompProblemAddOrUpd from './CompProblemAddOrUpd.vue';
import taskApi from '@/api/fysp/taskApi';
import { useCloned } from '@vueuse/core';
export default {
  computed: {
    // repeteRate() {
    //   return this.curProList.length !== 0 ? (this.curProList.length - 1) / this.subtaskCount * 1.0 : 0 
    //   return this.curProList.length !== 0 ? (this.curProList.length - 1) / this.subtaskCount * 1.0 : 0
    // },
  },
  props: {
@@ -80,16 +88,20 @@
      handler(newObj, oldObj) {
        this.handleClick();
      }
    },
    problem: {
      handler(nv, ov) {
        this.deepCopyPro = useCloned(this.problem).cloned.value;
        this.getRecentPros();
      },
      immediate: true
    }
  },
  components: {
    CompProblemAddOrUpd
    CompProblemAddOrUpd,
    CompGenericWrapper
  },
  mounted() {

    this.deepCopyPro = useCloned(this.problem).cloned.value;
    this.getRecentPros();
  },
  mounted() {},
  data() {
    return {
      proAddOrUpdDialogVisible: false,
@@ -114,10 +126,6 @@
    info(pro) {
      this.previewPro = pro;
      this.proAddOrUpdDialogVisible = true;
    },
    // 关闭详情弹窗
    proAddOrUpdDialogClose() {
      this.proAddOrUpdDialogVisible = false;
    },
    // 切换时间范围
    handleClick() {
@@ -153,19 +161,21 @@
     * */
    async getRecentPros() {
      this.loading = true;
      this.subtaskCount = 0
      this.subtaskCount = 0;
      // 获取子任务列表
      await taskApi.getSubtaskByScene(this.generateQueryParam()).then((subtasks) => {
        this.curProList = [];
        if (subtasks) {
          subtasks.forEach((subtask) => {
            // 获取问题列表
            this.getProBySubtask(subtask);
          });
        }
      });
      await taskApi
        .getSubtaskByScene(this.generateQueryParam())
        .then((subtasks) => {
          this.curProList = [];
          if (subtasks) {
            subtasks.forEach((subtask) => {
              // 获取问题列表
              this.getProBySubtask(subtask);
            });
          }
        });
      // 额外处理
      this.curProList.sort((o1, o2) => o2.getTime() - o1.getTime());
      this.curProList.sort((o1, o2) => o2.getDate() - o1.getDate());
      this.loading = false;
    },
    // 根据子任务获取里面的问题列表
@@ -175,7 +185,7 @@
          pros.forEach((pro) => {
            if (pro.ptguid == this.deepCopyPro.ptguid) {
              pro._stName = subtask.stName;
              pro._time = this.$fm.formatYMD(subtask.stPlanTime)
              pro._time = this.$fm.formatYMD(subtask.stPlanTime);
              this.curProList.push(pro);
            }
          });