Merge remote-tracking branch 'supervisionVue/hc-dataproduct-v1112' into lsf...

riku

2024-11-21 c4bcc6e78ecaec6e9ea68802be7c1d3a7b063512

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

@@ -1,85 +1,82 @@
<template>
  <div>
    <div class="t-card_item">
      整改图片&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <div>
        <!-- <el-button @click="chosePicFromAnyPic">从任意图片选取</el-button> -->
        <!-- <el-button type="primary" @click="chosePicFromLedgerPic">从台账选取</el-button> -->
        <el-button @click="choseChangePic">从文件夹选取</el-button>
  <CompGenericWrapper type="dialog">
    <template #content>
      <el-row>
        <el-col>
          <el-form-item label="整改图片">
            <el-button @click="choseChangePic" :disabled="fileList.length >= 3"
              >从文件夹选取</el-button
            >
          </el-form-item>
        </el-col>
        <el-col v-if="!fileList || fileList.length <= 0">
          <el-empty style="height: 145px" description="请添加图片" />
        </el-col>
        <el-col>
          <el-upload
            class="img-upload"
            ref="uploadRef"
            v-model:file-list="fileList"
            list-type="picture-card"
            multiple
            :auto-upload="false"
            crossorigin="Anonymous"
            :before-remove="beforeRemoveFile"
            :on-preview="handlePictureCardPreview"
            :disabled="readonly"
            accept="image/*"
          >
            <template #trigger v-if="fileList.length < 3 && !readonly">
              <el-button
                v-if="fileList.length < 3"
                type="primary"
                id="uploadBtnId"
                style="display: none"
              ></el-button>
              <el-icon>
                <Plus />
              </el-icon>
            </template>
            <template #tip>
              <div style="color: #f56c6c">
                最少上传一张图片，最多选择三张图片
              </div>
            </template>
          </el-upload>
        </el-col>
      </el-row>
      <div class="flex-div">
        <el-button type="primary" @click="onSubmit">保存</el-button>
        <el-button @click="onCancel">取消</el-button>
      </div>
    </div>
    <el-upload
      class="img-upload"
      ref="uploadRef"
      v-model:file-list="fileList"
      list-type="picture-card"
      multiple
      :auto-upload="false"
      crossorigin="Anonymous"
      :before-remove="beforeRemoveFile"
      :on-preview="handlePictureCardPreview"
      :disabled="readonly"
      accept="image/*"
    >
      <el-button type="primary" id="uploadBtnId" style="display: none"></el-button>
      <el-icon>
        <Plus />
      </el-icon>
    </el-upload>
    <div class="flex-div">
      <el-button type="primary" @click="onSubmit">保存</el-button>
      <el-button @click="this.$emit('submited', false)">取消</el-button>
    </div>
    <el-dialog
      title="任意图片"
      width="80%"
      v-model="anyPhotoDialog"
      :before-close="beforeAnyPhotoDialogclose"
    >
      <ArbitraryPhoto
        v-if="anyPhotoDialog"
        @selectByAnyPhonoEvent="handleSelectedAnyPhono"
        :subtask="subtask"
        :defaultFile="fileList"
        ref="arbitraryPhotoRef"
      >
      </ArbitraryPhoto>
    </el-dialog>
    <el-dialog
      title="台账图片"
      width="80%"
      v-model="ledgerPicDialog"
      :before-close="beforeLedgerPicDialogclose"
    >
      <LedgerPic
        v-if="ledgerPicDialog"
        @selectByLedgerPicEvent="handleLedgerPicPhono"
        :month="month"
        :subtask="subtask"
        ref="ledgerPicRef"
      >
      </LedgerPic>
    </el-dialog>
  </div>
  <el-dialog v-model="previewDialogVisible">
    <img w-full :src="previewDialogImageUrl" alt="预览" class="preview-pic" />
  </el-dialog>
      <el-image-viewer
          v-if="previewDialogVisible"
          :url-list="fileList.map((item) => item.url)"
          :initial-index="initialIndex"
          @close="previewDialogVisible = false"
          alt="预览"
          class="preview-pic"
        />
    </template>
  </CompGenericWrapper>
</template>
<script>
import ArbitraryPhoto from './ArbitraryPhoto.vue';
import LedgerPic from './CompLedgerPic.vue';
import problemApi from '@/api/fysp/problemApi.js';

import { $fysp } from '@/api/index.js';
import fileUtil from '@/utils/fileUtils.js';
import { useCloned } from '@vueuse/core';
import { ElMessage } from 'element-plus';
export default {
  emits: ['submit', 'cancel'],
  components: {
    ArbitraryPhoto,
    LedgerPic
  },
  watch: {
    oldChangeFileList: {
      handler(nv, ov) {
        this.initParams();
      },
      immediate: true
    },
    fileList: {
      handler(newFileList, oldFileList) {
        this.pictureValidate();
@@ -109,6 +106,10 @@
  },
  data() {
    return {
      // 初始图片预览index
      initialIndex: -1,
      // 图片选择最大数量
      maxSelectImgCount: 3,
      previewDialogImageUrl: '',
      previewDialogVisible: false,
      fileList: [],
@@ -119,9 +120,7 @@
      anyPhotoDialog: false
    };
  },
  mounted() {
    this.initParams();
  },
  mounted() {},
  methods: {
    pictureValidate() {
      if (this.changeType == 1 && this.fileList.length < 1) {
@@ -141,20 +140,29 @@
      return true;
    },
    initParams() {
      if (this.changeType == 0) {
      if (!this.changeType || this.changeType == 0) {
        return;
      }
      let beforeEditImgList = [];
      useCloned(this.oldChangeFileList).cloned.value.forEach((oldChangeFileitem) => {
        if (oldChangeFileitem.ischanged == 1) {
          oldChangeFileitem.url =
            $fysp.imgUrl + oldChangeFileitem.extension1 + oldChangeFileitem.guid + '.jpg';
          oldChangeFileitem.name = '1';
          beforeEditImgList.push(oldChangeFileitem);
      useCloned(this.oldChangeFileList).cloned.value.forEach(
        (oldChangeFileitem) => {
          if (oldChangeFileitem.ischanged == 1) {
            oldChangeFileitem.url =
              $fysp.imgUrl +
              oldChangeFileitem.extension1 +
              oldChangeFileitem.guid +
              '.jpg';
            oldChangeFileitem.name = '1';
            beforeEditImgList.push(oldChangeFileitem);
          }
        }
      });
      );
      this.fileList = useCloned(beforeEditImgList).cloned.value;
      this.oldFileList = useCloned(beforeEditImgList).cloned.value;
    },
    onCancel() {
      this.$emit("cancel")
      this.$emit('update:visible', false)
    },
    onSubmit() {
      if (!this.pictureValidate()) {
@@ -184,7 +192,7 @@

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

      if (this.changeType == 1) {
        fileUtil.getImageFiles(picUrls, function (files) {
          data.append('deleteImg', deleteImgCopy);
@@ -192,18 +200,18 @@
          files.forEach((image) => {
            data.append('images', image);
          });
          

          problemApi.updateChange(data).then((res) => {});
        });
        that.$emit('submited', true);
      }else {
        that.$emit('submit', true);
      } else {
        fileUtil.getImageFiles(picUrls, function (files) {
          data.append('problemId', that.problemId);
          files.forEach((image) => {
            data.append('images', image);
          });
          problemApi.changeProblem(data).then((res) => {});
          that.$emit('submited', true);
          that.$emit('submit', true);
        });
      }
    },
@@ -214,48 +222,9 @@
      }
    },
    handlePictureCardPreview(uploadFile) {
      this.initialIndex = this.fileList.indexOf(uploadFile)
      this.previewDialogVisible = true;
      this.previewDialogImageUrl = uploadFile.url;
    },
    handleSelectedAnyPhono(data) {
      this.beforeAnyPhotoDialogclose();
      let isExist = false;
      for (const item of data) {
        for (const already of this.fileList) {
          if (item.url == already.url) {
            isExist = true;
          }
        }
        if (!isExist) {
          this.fileList.push({
            url: item.url,
            name: '1'
          });
        }
        isExist = false;
      }
    },
    handleLedgerPicPhono(data) {
      let isExist = false;
      for (const item of data) {
        for (const already of this.fileList) {
          if (item.url == already.url) {
            isExist = true;
          }
        }
        if (!isExist) {
          this.fileList.push({
            url: item.url,
            name: '1'
          });
        }
        isExist = false;
      }

      this.beforeAnyPhotoDialogclose();
    },
    chosePicFromAnyPic() {
      this.anyPhotoDialog = true;
    },
    // 从文件夹中
    choseChangePic() {
@@ -266,24 +235,6 @@
        // 触发点击事件
        btnElement.click();
      }
    },
    chosePicFromLedgerPic() {
      // 使用Date对象解析日期字符串
      var date = new Date(this.subtask.subtask.planstarttime.splice(0, 7));
      // 获取月份信息，月份是从0开始的，所以需要加1
      this.month = date.getMonth() + 1;
      if (String(this.month).length == 1) {
        this.month = `0${this.month}`;
      }
      var year = date.getFullYear();
      this.month = `${year}-${this.month}`;
      this.ledgerPicDialog = true;
    },
    beforeAnyPhotoDialogclose() {
      this.anyPhotoDialog = false;
    },
    beforeLedgerPicDialogclose() {
      this.ledgerPicDialog = false;
    }
  }
};
@@ -312,4 +263,11 @@
  width: 100%;
  height: 100%;
}
::v-deep .el-upload--picture-card {
  display: none;
}
/* 隐藏el-upload上传成功组件 */
::v-deep .el-upload-list__item-status-label {
  display: none !important;
}
</style>