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

riku

2024-11-22 d28223384922de5fb08c20516eb3f99981c8136a

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

 src/components/FYImageSelectDialog.vue

@@ -3,39 +3,42 @@
    :model-value="dialogVisible"
    @opened="handleOpen"
    @closed="handleClose"
    width="66%"
    top="5vh"
    width="68%"
    destroy-on-close
    :close-on-press-escape="false"
  >
    <div class="main">
      <el-row justify="end" v-if="!readonly">
        <el-text size="small" type="info" class="m-r-8"
          >最多选择{{ maxSelect }}张图片</el-text
        >
        <el-button
          size="small"
          type="primary"
          @click="handleSubmit"
          :disabled="selectedImgUrlList.length == 0"
          >确定</el-button
        >
        <el-button size="small" type="primary" @click="handleCancel"
          >取消</el-button
        >
      </el-row>
    <!-- <div class="main"> -->
    <el-row justify="end" v-if="!readonly">
      <el-text size="small" type="info" class="m-r-8"
        >最多选择{{ maxSelect }}张图片</el-text
      >
      <el-button
        size="small"
        type="primary"
        @click="handleSubmit"
        :disabled="selectedImgUrlList.length == 0"
        >确定</el-button
      >
      <el-button size="small" type="primary" @click="handleCancel"
        >取消</el-button
      >
    </el-row>

      <div class="center">
        <el-tabs v-if="typeList.length > 0" v-model="activeId" type="card">
          <el-tab-pane
            v-for="item in typeList"
            :key="item.typeId"
            :label="
              item.typeName + ' (' + typeImgMap.get(item.typeId).length + ')'
            "
            :name="item.typeId"
          >
          </el-tab-pane>
        </el-tabs>
        <el-scrollbar
    <div class="center">
      <el-tabs v-if="typeList.length > 0" v-model="activeId" type="card">
        <el-tab-pane
          v-for="item in typeList"
          :key="item.typeId"
          :label="
            item.typeName + ' (' + typeImgMap.get(item.typeId).length + ')'
          "
          :name="item.typeId"
        >
        </el-tab-pane>
      </el-tabs>
      <el-scrollbar height="70vh">
        <div
          v-if="typeImgMap.get(activeId) && typeImgMap.get(activeId).length > 0"
          class="imgs"
        >
@@ -46,16 +49,19 @@
            :class="[img.isSelect ? 'selected' : 'noActive', 'image']"
            fit="cover"
            :src="img.url"
            :preview-src-list="readonly ? typeImgMap.get(activeId).map((v) => v.url) : []"
            :initial-index="i"
            @click="onSelect(img, i)"
            @load="onOneImgLoadSuccess(img)"
            @error="onOneImgLoadError(img)"
          />
        </el-scrollbar>
        </div>
        <el-row v-else justify="space-between">
          <el-empty description="暂无记录" />
        </el-row>
      </div>
      </el-scrollbar>
    </div>
    <!-- </div> -->
  </el-dialog>
</template>
<script setup>
@@ -110,11 +116,11 @@
  );
});
function onOneImgLoadError(img) {
  img.loading = false
  img.loading = false;
  loadedImgCount.value++;
}
function onOneImgLoadSuccess(img) {
  img.loading = false
  img.loading = false;
  loadedImgCount.value++;
}
watch(
@@ -166,12 +172,12 @@
  //       }
  //     });
  //   });
  emit('update:dialogVisible', true)
  emit('update:dialogVisible', true);
}
function handleClose() {
  selectedImgUrlList.value.forEach(item => item.isSelect = false)
  selectedImgUrlList.value = []
  emit('update:dialogVisible', false)
  selectedImgUrlList.value.forEach((item) => (item.isSelect = false));
  selectedImgUrlList.value = [];
  emit('update:dialogVisible', false);
}
function handleSubmit() {
  emit('submit', selectedImgUrlList.value);
@@ -245,15 +251,13 @@
}

.main {
  margin: 0 auto; /* 使父元素居中 */
  height: 72vh;
  width: 100%;
  /* 使父元素居中 */
  /* margin: 0 auto;  */
  /* width: 100%; */
}

.imgs {
  height: 60vh;
  width: 100%;
  min-height: 100px !important;
  /* border-style:solid;
    border-radius: 1px; */
  /* height: 100%; */
@@ -267,16 +271,9 @@

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

.active {
  padding: 5px;
  width: 20%;
  height: 200px;
  border: 0.5rem outset rgb(52, 155, 4);
}

.selected {

 src/components/ToolBar.vue

@@ -58,7 +58,9 @@
.layout {
  /* background-color: beige; */
  height: var(--height-toolbar);
  /* border-bottom: 1px solid var(--el-color-info-light-7); */
  border-bottom: 1px solid var(--el-color-info-light-7);
  box-shadow: 6px 4px 4px rgba(0, 0, 0, 0.12);
  margin-bottom: 4px;
}

.cell-item {

 src/components/core/BaseContentLayout.vue

@@ -53,6 +53,7 @@
  /* background-color: aqua; */
  /* overflow-y: auto; */
  border-right: 1px solid var(--el-color-info-light-7);
  /* box-shadow: -10px 0px 4px rgba(0, 0, 0, 0.12) inset; */
}

.el-header {

 src/constants/menu.js

@@ -177,11 +177,11 @@
];

const MENU_FYTZ = [
  {
    path: '/fytz/ledger',
    icon: 'Search',
    name: '台账审核'
  },
  // {
  //   path: '/fytz/ledger',
  //   icon: 'Search',
  //   name: '台账审核'
  // },
  {
    path: '/fytz/notice',
    icon: 'Message',

 src/views/fysp/check/ProCheck.vue

@@ -271,8 +271,7 @@
          this.mainLoading = false;
        });
    },
    onAddProCanceled() {
    },
    onAddProCanceled() {},
    // 问题卡片组件主动发起刷新父组件数据
    updateSubtask(refresh = false) {
      this.curSubtask.data.proCheckedNum++;
@@ -285,8 +284,8 @@
    // 刷新当前选中子任务
    refreshCurrSubtask(refresh) {
      this.sideLoading = false;
      // this.mainLoading = true;
      setTimeout(() => {
        this.mainLoading = true;
        taskApi
          .getProBySubtask(this.curSubtask.data.stGuid)
          .then((res) => {
@@ -307,18 +306,18 @@
            // this.curSubtask = s;
          })
          .finally(() => {
            // this.mainLoading = false;
            this.mainLoading = false;
          });
      }, 150);
      }, 500);
    },
    // 问题审核完成后，更新左侧列表对应子任务状态
    handleProblemCheck(){
      const status = ProCheckProxy.calProStatus(this.curProList)
      this.curSubtask.data.proNum = status.proNum
      this.curSubtask.data.proCheckedNum = status.proCheckedNum
      this.curSubtask.data.changeNum = status.changeNum
      this.curSubtask.data.changeCheckedNum = status.changeCheckedNum
      this.curSubtask.type = ProCheckProxy.getSubtaskType(this.curSubtask.data)
    handleProblemCheck() {
      const status = ProCheckProxy.calProStatus(this.curProList);
      this.curSubtask.data.proNum = status.proNum;
      this.curSubtask.data.proCheckedNum = status.proCheckedNum;
      this.curSubtask.data.changeNum = status.changeNum;
      this.curSubtask.data.changeCheckedNum = status.changeCheckedNum;
      this.curSubtask.type = ProCheckProxy.getSubtaskType(this.curSubtask.data);
    }
  },
  mounted() {}

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

@@ -46,17 +46,19 @@
        </el-col>
      </el-row>
      <div class="flex-div">
        <el-button type="primary" @click="onSubmit">保存</el-button>
        <el-button type="primary" @click="onSubmit" :loading="loading"
          >保存</el-button
        >
        <el-button @click="onCancel">取消</el-button>
      </div>
      <el-image-viewer
          v-if="previewDialogVisible"
          :url-list="fileList.map((item) => item.url)"
          :initial-index="initialIndex"
          @close="previewDialogVisible = false"
          alt="预览"
          class="preview-pic"
        />
        v-if="previewDialogVisible"
        :url-list="fileList.map((item) => item.url)"
        :initial-index="initialIndex"
        @close="previewDialogVisible = false"
        alt="预览"
        class="preview-pic"
      />
    </template>
  </CompGenericWrapper>
</template>
@@ -68,8 +70,7 @@
import { ElMessage } from 'element-plus';
export default {
  emits: ['submit', 'cancel'],
  components: {
  },
  components: {},
  watch: {
    oldChangeFileList: {
      handler(nv, ov) {
@@ -117,7 +118,9 @@
      deleteImg: [],

      ledgerPicDialog: false,
      anyPhotoDialog: false
      anyPhotoDialog: false,

      loading: false
    };
  },
  mounted() {},
@@ -161,13 +164,14 @@
      this.oldFileList = useCloned(beforeEditImgList).cloned.value;
    },
    onCancel() {
      this.$emit("cancel")
      this.$emit('update:visible', false)
      this.$emit('cancel');
      this.$emit('update:visible', false);
    },
    onSubmit() {
      if (!this.pictureValidate()) {
        return;
      }
      this.loading = true;
      // 数据准备
      let data = new FormData();
      var picUrls = [];
@@ -190,28 +194,35 @@
        }
      });

      const that = this;
      let deleteImgCopy = this.deleteImg;

      if (this.changeType == 1) {
        fileUtil.getImageFiles(picUrls, function (files) {
        fileUtil.getImageFiles(picUrls, (files) => {
          data.append('deleteImg', deleteImgCopy);
          data.append('problemId', that.problemId);
          data.append('problemId', this.problemId);
          files.forEach((image) => {
            data.append('images', image);
          });

          problemApi.updateChange(data).then((res) => {});
          problemApi
            .updateChange(data)
            .then((res) => {
              this.$emit('submit', true);
            })
            .finally(() => (this.loading = false));
        });
        that.$emit('submit', true);
      } else {
        fileUtil.getImageFiles(picUrls, function (files) {
          data.append('problemId', that.problemId);
        fileUtil.getImageFiles(picUrls, (files) => {
          data.append('problemId', this.problemId);
          files.forEach((image) => {
            data.append('images', image);
          });
          problemApi.changeProblem(data).then((res) => {});
          that.$emit('submit', true);
          problemApi
            .changeProblem(data)
            .then((res) => {
              this.$emit('submit', true);
            })
            .finally(() => (this.loading = false));
        });
      }
    },
@@ -222,7 +233,7 @@
      }
    },
    handlePictureCardPreview(uploadFile) {
      this.initialIndex = this.fileList.indexOf(uploadFile)
      this.initialIndex = this.fileList.indexOf(uploadFile);
      this.previewDialogVisible = true;
      this.previewDialogImageUrl = uploadFile.url;
    },

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

@@ -167,9 +167,7 @@
            <el-button type="primary" @click="onSubmit" v-show="!readonly"
              >保存</el-button
            >
            <el-button @click="onCancel" v-show="!readonly"
              >取消</el-button
            >
            <el-button @click="onCancel" v-show="!readonly">取消</el-button>
          </el-form-item>
        </el-form>
        <ArbitraryPhoto
@@ -230,7 +228,7 @@
  components: {
    ArbitraryPhoto,
    CompDevicePhoto,
    CompLedgerPhoto,
    CompLedgerPhoto
  },
  props: {
    readonly: {
@@ -586,8 +584,8 @@
      return true;
    },
    onCancel() {
      this.$emit("cancel")
      this.$emit('update:visible', false)
      this.$emit('cancel');
      this.$emit('update:visible', false);
    },
    onSubmit() {
      this.$refs.formRef.validate((valid) => {
@@ -629,9 +627,10 @@
              files.forEach((image) => {
                data.append('images', image);
              });
              problemApi.updateProblem(data).then((res) => {});
              problemApi.updateProblem(data).then((res) => {
                this.$emit('submit', false);
              });
            });
            this.$emit('submit', false);
          } else {
            const deepCopySubTask = useCloned(this.subtask).cloned.value;
            const that = this;
@@ -651,9 +650,10 @@
              files.forEach((image) => {
                data.append('images', image);
              });
              problemApi.newProblem(data).then((res) => {});
              problemApi.newProblem(data).then((res) => {
                this.$emit('submit', true);
              });
            });
            this.$emit('submit', true);
          }
        }
      });

 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,11 +89,7 @@
      </el-col>
      <el-col :span="12">
        <el-row justify="end" class="btn-group">
          <el-button
            type="danger"
            size="small"
            @click="deletePro"
            disabled
          <el-button type="danger" size="small" @click="deletePro" disabled
            >删除</el-button
          >
          <!-- <el-button
@@ -100,7 +100,7 @@
            >删除</el-button
          > -->
          <!-- 审核驳回操作 -->
          <!-- <el-button
          <el-button
            v-if="
              this.problem.extension3 == 'fail' ||
              this.problem.extension3 == 'change_fail'
@@ -118,7 +118,7 @@
            @click="rejectPro"
            :disabled="!proStatus.checkable"
            >审核驳回</el-button
          > -->
          >
          <el-button
            v-if="
              this.problem.extension3 == 'pass' ||
@@ -244,11 +244,11 @@
        },
        {
          bef: '问题待整改',
          aft: '问题已整改'
          aft: '整改已上传'
        },
        {
          bef: '整改待审核',
          aft: '整改已审核'
          aft: '问题已整改'
        }
      ]
    };
@@ -301,8 +301,7 @@
      this.$emit('submit', isOk);
      this.proAddOrUpdDialogVisible = false;
    },
    onChangeCanceled() {
    },
    onChangeCanceled() {},
    onChangeSubmited(isOk) {
      this.$emit('submit', isOk);
      this.changeDialogVisible = false;
@@ -350,7 +349,7 @@
            .checkProblem({ pId: pro.guid, action: action })
            .then((res) => {
              if (res.success) {
                pro.extension3 = status
                pro.extension3 = status;
                this.$emit('check');
              }
            });
@@ -372,7 +371,7 @@
            .checkProblem({ pId: pro.guid, action: action })
            .then((res) => {
              if (res.success) {
                pro.extension3 = status
                pro.extension3 = status;
                this.$emit('check');
              }
            });
@@ -415,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;
}

@@ -457,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>

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

@@ -16,7 +16,7 @@
      <el-descriptions-item
        label="整改率"
        label-class-name="problem-label"
        :class-name="summary.changePer < 0.6 ? 'danger-content' : 'secondary-content'"
        :class-name="summary.changePer < 1 ? 'danger-content' : 'secondary-content'"
        >{{ formatPercent(summary.changePer) }}</el-descriptions-item
      >
    </el-descriptions>