图片资料显示优化

fangyuan

2022-12-26 666b2f488b9f64c75cd0c9fa28aa3d78791aa199

图片资料显示优化

 src/views/common/Audit.vue

@@ -28,11 +28,10 @@
            <el-button type="primary" @click="addAduitDialogOpen">添加</el-button>
          </el-form-item>
          <el-form-item>
           <el-upload name="multipartFile" class="upload-demo" action="/api/cause/reporterUpload"
                  :show-file-list="false" :before-upload="beforeAvatarUpload"
                  :on-success="reporterRespond" :limit="1">
                  <el-button type="primary">导入</el-button>
                </el-upload>
            <el-upload name="multipartFile" class="upload-demo" action="/api/cause/reporterUpload"
              :show-file-list="false" :before-upload="beforeAvatarUpload" :on-success="reporterRespond" :limit="1">
              <el-button type="primary">导入</el-button>
            </el-upload>
          </el-form-item>
        </el-form>
      </template>
@@ -115,8 +114,9 @@
          </el-col>
          <el-col :span="12">
            <el-form-item label="被骗时间" prop="cheatTime">
              <el-date-picker v-model="auditFrom.cheatTime" type="datetime" placeholder="选择日期时间" :style="{ width: '100%' }"
                format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
              <el-date-picker v-model="auditFrom.cheatTime" type="datetime" placeholder="选择日期时间"
                :style="{ width: '100%' }" format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
@@ -127,7 +127,8 @@
          </el-col>
          <el-col :span="24">
            <el-form-item label="案件描述" prop="reportDescription">
              <el-input v-model="auditFrom.reportDescription" placeholder="请输入案件描述" clearable :style="{ width: '100%' }">
              <el-input v-model="auditFrom.reportDescription" placeholder="请输入案件描述" clearable
                :style="{ width: '100%' }">
              </el-input>
            </el-form-item>
          </el-col>
@@ -138,7 +139,7 @@
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="上传" prop="fileList" >
            <el-form-item label="上传" prop="fileList">
              <el-upload ref="reportMaterials" :file-list="auditFrom.fileList" action="/api/minio/upload"
                list-type="picture" :on-success="handleMaterialSuccess">
                <el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
@@ -193,8 +194,9 @@
          </el-col>
          <el-col :span="12">
            <el-form-item label="被骗时间">
              <el-date-picker v-model="auditInfo.tmpTime" type="datetime" placeholder="选择日期时间" :style="{ width: '100%' }"
                format="yyyy-MM-dd HH:mm:ss" :value-format="auditFrom.cheatTime" disabled></el-date-picker>
              <el-date-picker v-model="auditInfo.tmpTime" type="datetime" placeholder="选择日期时间"
                :style="{ width: '100%' }" format="yyyy-MM-dd HH:mm:ss" :value-format="auditFrom.cheatTime"
                disabled></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
@@ -218,7 +220,7 @@
          <el-col :span="24">
            <el-form-item label="材料">
              <div class="metalL">
                <el-image :src="reportData" style="height: 200px;width: 200px;"></el-image>
                <el-image v-for="(img,index) in reportData" :src="img" style="height: 200px;width: 200px;"></el-image>
              </div>
            </el-form-item>
          </el-col>
@@ -270,8 +272,9 @@
          </el-col>
          <el-col :span="12">
            <el-form-item label="被骗时间">
              <el-date-picker v-model="auditInfo.tmpTime" type="datetime" placeholder="选择日期时间" :style="{ width: '100%' }"
                format="yyyy-MM-dd HH:mm:ss" :value-format="auditFrom.cheatTime" disabled></el-date-picker>
              <el-date-picker v-model="auditInfo.tmpTime" type="datetime" placeholder="选择日期时间"
                :style="{ width: '100%' }" format="yyyy-MM-dd HH:mm:ss" :value-format="auditFrom.cheatTime"
                disabled></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
@@ -295,7 +298,7 @@
          <el-col :span="24">
            <el-form-item label="材料">
              <div class="metalL">
                <el-image :src="reportData" style="height: 200px;width: 200px;"></el-image>
                <el-image v-for="(img,index) in reportData" :src="img" style="height: 200px;width: 200px;"></el-image>
              </div>
            </el-form-item>
          </el-col>
@@ -345,7 +348,7 @@
      },
      auditInfo: {},
      picShow: "",
      reportData: "",
      reportData: [],
      optionsGroup: [
        {
          value: null,
@@ -386,7 +389,7 @@
          message: '请输入报案人 ',
          trigger: 'blur'
        }],
       mobile:
        mobile:
          [{ required: true, message: '请输入手机号码', trigger: 'blur' },
          {
            validator: function (rule, value, callback) {
@@ -438,7 +441,7 @@
  },

  methods: {
     //案件人员导入成功后
    //案件人员导入成功后
    reporterRespond(res) {
      if (res.code == 200) {
        this.$message({
@@ -452,9 +455,9 @@
          type: 'error'
        })
      }
   this.getList()
      this.getList()
    },
       beforeAvatarUpload(file) {
    beforeAvatarUpload(file) {
      let Xls = file.name.split('.');
      if (Xls[1] === 'xls' || Xls[1] === 'xlsx') {
        return file
@@ -484,12 +487,15 @@
            this.picShow = res
          })
        }
        if (res.reportMaterials === '' || res.reportMaterials === null) {
          this.reportData = './logo.jpg';
        } else {
          getImgUrl(res.reportMaterials).then(res => {
            this.reportData = res
          })
        var addressList = res.reportMaterials.split(",")
        for (let item of addressList) {
          if (item === '' || item === null) {
            // this.reportData.push('./logo.jpg');
          } else {
            getImgUrl(item).then(res => {
              this.reportData.push(res);
            })
          }
        }
        this.checkVisible = true
      })
@@ -497,10 +503,12 @@
    infoAduitClose() {
      this.checkVisible = false
      this.$refs.infoAduitForm.resetFields()
      this.reportData=[]
    },
   detailsClose() {
    detailsClose() {
      this.infoAduitDialogVisible = false
      this.$refs.infoAduitForm.resetFields()
      this.reportData=[]
    },
    addAduit() {
      this.$refs.addAduitForm.validate(async (vaild) => {
@@ -585,13 +593,15 @@
            this.picShow = res
          })
        }
        
        if (res.reportMaterials === '' || res.reportMaterials === null) {
          this.reportData = './logo.jpg';
        } else {
          getImgUrl(res.reportMaterials).then(res => {
            this.reportData = res
          })
        var addressList = res.reportMaterials.split(",")
        for (let item of addressList) {
          if (item === '' || item === null) {
            // this.reportData.push('./logo.jpg');
          } else {
            getImgUrl(item).then(res => {
              this.reportData.push(res);
            })
          }
        }
        this.infoAduitDialogVisible = true
      })