1. 图片选择组件移动到全局组件文件夹 2. 涉及到使用图片选择组件添加图片区域loading 3. 无用页面删除

hcong

2024-11-21 87958d6d33603fa673cb7c8f5caf2394689959bf

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

@@ -1,88 +1,82 @@
<template>
  <div>
    <div class="t-card_item">
      整改图片&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <div>
        <el-button @click="choseChangePic" :disabled="fileList.length >= 3">从文件夹选取</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/*"
    >
      <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>
    <div class="flex-div">
      <el-button type="primary" @click="onSubmit">保存</el-button>
      <el-button @click="this.$emit('submited', false)">取消</el-button>
    </div>
    <ArbitraryPhoto
      :max-select="maxSelectImgCount - fileList.length"
      v-if="anyPhotoDialog"
      v-model:dialog-visible="anyPhotoDialog"
      @submit="handleSelectedAnyPhono"
      :subtask="subtask"
      :defaultFile="fileList"
      ref="arbitraryPhotoRef"
    >
    </ArbitraryPhoto>
    <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();
@@ -112,6 +106,8 @@
  },
  data() {
    return {
      // 初始图片预览index
      initialIndex: -1,
      // 图片选择最大数量
      maxSelectImgCount: 3,
      previewDialogImageUrl: '',
@@ -124,9 +120,7 @@
      anyPhotoDialog: false
    };
  },
  mounted() {
    this.initParams();
  },
  mounted() {},
  methods: {
    pictureValidate() {
      if (this.changeType == 1 && this.fileList.length < 1) {
@@ -146,7 +140,7 @@
      return true;
    },
    initParams() {
      if (this.changeType == 0) {
      if (!this.changeType || this.changeType == 0) {
        return;
      }
      let beforeEditImgList = [];
@@ -165,6 +159,9 @@
      );
      this.fileList = useCloned(beforeEditImgList).cloned.value;
      this.oldFileList = useCloned(beforeEditImgList).cloned.value;
    },
    onCancel() {
      this.$emit("cancel")
    },
    onSubmit() {
      if (!this.pictureValidate()) {
@@ -205,7 +202,7 @@

          problemApi.updateChange(data).then((res) => {});
        });
        that.$emit('submited', true);
        that.$emit('submit', true);
      } else {
        fileUtil.getImageFiles(picUrls, function (files) {
          data.append('problemId', that.problemId);
@@ -213,7 +210,7 @@
            data.append('images', image);
          });
          problemApi.changeProblem(data).then((res) => {});
          that.$emit('submited', true);
          that.$emit('submit', true);
        });
      }
    },
@@ -224,48 +221,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() {
@@ -276,24 +234,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;
    }
  }
};
@@ -323,6 +263,10 @@
  height: 100%;
}
::v-deep .el-upload--picture-card {
  border: 0 !important;
  display: none;
}
/* 隐藏el-upload上传成功组件 */
::v-deep .el-upload-list__item-status-label {
  display: none !important;
}
</style>