处理图片显示问题

zhanghua

2025-04-14 829f5116884f98643ffc5b2a548a600d40c0cedb

 src/views/operate/disposal/casepool/dispatch/updateUser/uploadResult/components/evidence/index.vue

@@ -15,7 +15,8 @@
                </div>
                <!-- 时间 -->
                <el-form-item label="时间:" prop="investigationTime">
                    <el-date-picker v-model="evidence.investigationTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择时间">
                    <el-date-picker v-model="evidence.investigationTime" value-format="yyyy-MM-dd HH:mm:ss"
                        type="datetime" placeholder="选择时间">
                    </el-date-picker>
                </el-form-item>
                <!-- 地址 -->
@@ -38,8 +39,9 @@
                <!-- 照片附件 -->
                <el-form-item label="照片附件:" prop="pic">
                    <div class="upImg">
                        <MyUpload :picture-list="evidence.pic" @setPictureUrl="setPicUrl" @delPictureUrl="delPicUrl"></MyUpload>
                        <div class="tip">{{evidence.pic.length}} / 4</div>
                        <MyUpload :picture-list="evidence.pic" @setPictureUrl="setPicUrl" @delPictureUrl="delPicUrl">
                        </MyUpload>
                        <div class="tip">{{ evidence.pic.length }} / 4</div>
                    </div>
                </el-form-item>
            </el-form>
@@ -134,7 +136,7 @@
import { deepClone, getTypeList } from '@/utils/helper'
import { validateName, validatePhone, validateCardId } from '@/utils/validate'
import MyUpload from "@/components/myUpload"
import { FILE_ORIGINAL_URL } from "@/utils";
import { FILE_ORIGINAL_PATH } from "@/utils";
export default {
    components: {
        MyUpload
@@ -220,10 +222,10 @@
            },
            userRules: {
                illegalType: [{ trigger: ['change', 'blur'], message: '案件类型不能为空', required: true }],
                name: [{ required: true,trigger: ['change', 'blur'], validator: checkUserName }],
                phoneCode: [{ required: true,trigger: ['change', 'blur'], validator: checkPhone }],
                name: [{ required: true, trigger: ['change', 'blur'], validator: checkUserName }],
                phoneCode: [{ required: true, trigger: ['change', 'blur'], validator: checkPhone }],
                certificateType: [{ trigger: ['change', 'blur'], validator: checkCard }],
                certificateCode: [{ required: true,trigger: ['change', 'blur'], validator: checkCode }],
                certificateCode: [{ required: true, trigger: ['change', 'blur'], validator: checkCode }],
                educationDegree: [{ required: true, trigger: ['change', 'blur'], message: '文化程度不能为空' }],
                nation: [{ required: true, trigger: ['change', 'blur'], message: '民族不能为空' }],
                liveAddress: [{ required: true, trigger: ['change', 'blur'], message: '现住址不能为空' }],
@@ -272,15 +274,17 @@
        }
    },
    async created() {
      await this.getCardTypeList();
      await this.getSchoolList();
      await this.getNationList();
      this.$set(this.user, 'illegalType', this.illegalType);
      if (this.evidenceData) {
          this.evidence = deepClone(this.evidenceData);
          this.evidence.pic = this.evidenceData.pic.split(',');
          this.user = this.evidence.partyInfo;
          this.evidence.userInfo = this.evidence.partyInfo.name;
        await this.getCardTypeList();
        await this.getSchoolList();
        await this.getNationList();
        this.$set(this.user, 'illegalType', this.illegalType);
        if (this.evidenceData) {
            this.evidence = deepClone(this.evidenceData);
            console.log(this.evidenceData.pic);
            
            this.evidence.pic = this.evidenceData.pic.split(',');
            this.user = this.evidence.partyInfo;
            this.evidence.userInfo = this.evidence.partyInfo.name;
        }
    },
    methods: {
@@ -307,8 +311,8 @@
        checkUser() {
            this.$refs.userForm.validate((valid) => {
                if (valid) {
                  this.evidence.userInfo = this.user.name + '...';
                  this.userFlag = false;
                    this.evidence.userInfo = this.user.name + '...';
                    this.userFlag = false;
                } else {
                    this.evidence.userInfo = null;
                    this.$message.warning('请检查必填项');
@@ -340,29 +344,31 @@
        async getNationList() {
            this.nationOptions = await getTypeList(1, '05');
        },
         // 设置上传成功之后的图片地址
         setPicUrl({ url }) {
        // 设置上传成功之后的图片地址
        setPicUrl({ url }) {
            const baseUrl = '';
            if (this.evidence.pic.length < 4) {
                this.evidence.pic.push(`${FILE_ORIGINAL_URL}sccg/API/img?fileUrl=${url}`)
                this.evidence.pic.push(url)
            }
        },
        //删除图片
        delPicUrl({url}){
        delPicUrl({ url }) {
            const baseUrl = '';
            this.evidence.pic.splice(this.evidence.pic.indexOf(baseUrl + url),1);
            this.evidence.pic.splice(this.evidence.pic.indexOf(baseUrl + url), 1);
        }
    },
    props:['evidenceData', 'illegalType']
    props: ['evidenceData', 'illegalType']
}
</script>
<style lang="scss" scoped>
.evidence {
    line-height: 60px;
    position: relative;
    .evidence-item{

    .evidence-item {
        display: flex;
    }

    .evidence-title {
        line-height: 60px;
        font-weight: 650;
@@ -422,7 +428,7 @@
    position: absolute;
    top: 0;
    z-index: 3000;
    background-color: #06122c;
    background-color: #fff;

    .user-form-header {
        background-color: #fff;
@@ -435,11 +441,13 @@

    padding-bottom: 60px;
}
.sp-user-info{
    ::v-deep .el-input{

.sp-user-info {
    ::v-deep .el-input {
        width: 200px;
    }
}

.user-form-content {
    padding-top: 20px;

@@ -454,7 +462,7 @@
        .el-select {
            flex: 1;

            :deep(.el-input__inner){
            :deep(.el-input__inner) {
                padding: 0px 15px;
            }
        }