2025.9.18 数据产品（待完成）

riku

2025-09-18 c1d2051abc8ca88cd07f0d7c56c0dbf8165d5c33

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

@@ -1,84 +1,83 @@
<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" :loading="loading"
          >保存</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>
    <ArbitraryPhoto
      :max-select="3"
      v-if="anyPhotoDialog"
      v-model:dialog-visible="anyPhotoDialog"
      @selectByAnyPhonoEvent="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 {
  components: {
    ArbitraryPhoto,
    LedgerPic
  },
  emits: ['submit', 'cancel'],
  components: {},
  watch: {
    oldChangeFileList: {
      handler(nv, ov) {
        this.initParams();
      },
      immediate: true
    },
    fileList: {
      handler(newFileList, oldFileList) {
        this.pictureValidate();
@@ -108,6 +107,10 @@
  },
  data() {
    return {
      // 初始图片预览index
      initialIndex: -1,
      // 图片选择最大数量
      maxSelectImgCount: 3,
      previewDialogImageUrl: '',
      previewDialogVisible: false,
      fileList: [],
@@ -115,15 +118,15 @@
      deleteImg: [],

      ledgerPicDialog: false,
      anyPhotoDialog: false
      anyPhotoDialog: false,

      loading: false
    };
  },
  mounted() {
    this.initParams();
  },
  mounted() {},
  methods: {
    pictureValidate() {
      if (this.changeType == 1 && this.fileList.length < 1) {
      if (this.fileList.length < 1) {
        ElMessage({
          message: '至少上传一张图片',
          type: 'error'
@@ -140,7 +143,7 @@
      return true;
    },
    initParams() {
      if (this.changeType == 0) {
      if (!this.changeType || this.changeType == 0) {
        return;
      }
      let beforeEditImgList = [];
@@ -160,10 +163,15 @@
      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()) {
        return;
      }
      this.loading = true;
      // 数据准备
      let data = new FormData();
      var picUrls = [];
@@ -186,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('submited', 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('submited', true);
          problemApi
            .changeProblem(data)
            .then((res) => {
              this.$emit('submit', true);
            })
            .finally(() => (this.loading = false));
        });
      }
    },
@@ -218,48 +233,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() {
@@ -270,24 +246,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;
    }
  }
};
@@ -316,4 +274,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>