处理图片显示问题

zhanghua

2025-04-14 829f5116884f98643ffc5b2a548a600d40c0cedb

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

@@ -1,11 +1,12 @@
<template>
    <div class="arrive">
        <div class="arrive-title">到大现场情况</div>
        <div class="arrive-title">到达现场情况</div>
        <div class="arrive-form">
            <el-form ref="arriveForm" label-width="160px" :model="arrive" :rules="arriveRules" autoComplete="on">
                <!-- 到达时间 -->
                <el-form-item label="到达时间:" prop="arrivalTime">
                    <el-date-picker v-model="arrive.arrivalTime" type="datetime" placeholder="选择到达时间">
                    <el-date-picker v-model="arrive.arrivalTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetime"
                        placeholder="选择到达时间">
                    </el-date-picker>
                </el-form-item>
                <!-- 到达地址 -->
@@ -14,28 +15,22 @@
                </el-form-item>
                <!-- 现场情况说明 -->
                <el-form-item label="现场情况说明:" prop="situationExplain">
                    <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" maxlength="200" show-word-limit
                    <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" maxlength="200" show-word-limit
                        v-model="arrive.situationExplain" placeholder="请输入情况说明,限制200字以内"></el-input>
                </el-form-item>
                <!-- 信访回复说明 -->
                <el-form-item label="信访回复说明:" prop="replyExplain">
                    <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" maxlength="200" show-word-limit
                    <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" maxlength="200" show-word-limit
                        v-model="arrive.replyExplain" placeholder="请输入回访说明,限制200字以内"></el-input>
                </el-form-item>
                <!-- 现场情况照片 -->
                <el-form-item label="现场情况照片:" prop="situationPic">
                    <div class="upImg">
                        <div class="img-list">
                            <img :src="item" alt="" v-for="(item,index) in arrive.situationPic" :key="index">
                        <MyUpload :picture-list="arrive.situationPic" @setPictureUrl="setPicUrl"
                            @delPictureUrl="delPicUrl"></MyUpload>
                        <div class="tip">
                            {{ arrive.situationPic.length }} / 4
                        </div>
                        <div class="upload" v-if="arrive.situationPic.length<4">
                            <el-upload :file-list="fileList" class="upload-demo"
                                action="http://42.193.1.25:8082/sccg/file/medias" multiple :show-file-list="false"
                                :limit="4" :on-success="handleSuccess" :headers="getToken()">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                        </div>
                        <div class="tip">{{arrive.situationPic.length}} / 4</div>
                    </div>
                </el-form-item>
            </el-form>
@@ -43,7 +38,19 @@
    </div>
</template>
<script>
import MyUpload from "@/components/myUpload"
import { deepClone } from "@/utils/helper";
import { FILE_ORIGINAL_PATH } from "@/utils";
export default {
    components: {
        MyUpload
    },
    props: {
        arriveData: {
            type: Object,
            default: () => null
        }
    },
    data() {
        const checkTime = (rule, value, callback) => {
            if (value) {
@@ -66,18 +73,11 @@
                callback(new Error('现场情况说明不能为空'));
            }
        }
        const checkReplay = (rule, value, callback) => {
            if (value) {
                callback()
            } else {
                callback(new Error('信访回复说明不能为空'));
            }
        }
        const checkSitPic = (rule, value, callback) => {
            if (value) {
            if (value.length !== 0) {
                callback()
            } else {
                callback();
                callback(new Error('请上传现场情况照片'));
            }
        }
        return {
@@ -94,21 +94,26 @@
                situationExplain: [
                    { trigger: 'blur', validator: checkSit }
                ],
                replyExplain: [
                    { trigger: 'blur', validator: checkReplay }
                ],
                situationPic: [
                    { trigger: 'change', validator: checkSitPic }
                    { trigger: 'blur', validator: checkSitPic }
                ],
            },
            fileList: [],
        }
    },
    props:['getArrive'],
    created() {
        if (this.arriveData) {
            this.arrive = deepClone(this.arriveData);
            this.arrive.situationPic = this.arriveData.situationPic.split(',');
            this.arrive.situationPic.forEach(item => {
                item = FILE_ORIGINAL_PATH + item
            });

        }
    },
    methods: {
        handleSuccess(res, file, filelist) {
            const baseUrl = 'http://140.143.152.226:8410/';
            console.log(res);
            const baseUrl = '';
            if (this.arrive.situationPic.length < 4) {
                this.arrive.situationPic.push(baseUrl + res.data.url1)
            }
@@ -121,15 +126,31 @@
            }
        },
        // 获取arrive对象
        backData(){
        backData() {
            const { arrive } = this;
            this.$emit('getArrive',{arrive});
            this.$emit('getArrive', { arrive });
        },
        // 删除图片
        handleRemove(index) {
            this.arrive.situationPic.splice(index, 1);
        },
        // 设置上传成功之后的图片地址
        setPicUrl({ url }) {
            const baseUrl = '';
            if (this.arrive.situationPic.length < 4) {
                this.arrive.situationPic.push(url)
            }
        },
        //删除图片
        delPicUrl({ url }) {
            const baseUrl = '';
            this.arrive.situationPic.splice(this.arrive.situationPic.indexOf(baseUrl + url), 1);
        }
    }
}
</script>
<style lang="scss" scoped>
.arrive-title{
.arrive-title {
    line-height: 60px;
    font-weight: 650;
    font-size: 20px;
@@ -141,6 +162,7 @@

.upImg {
    display: flex;
    overflow: auto;

    .tip {
        position: absolute;
@@ -149,12 +171,26 @@
    }

    .img-list {
        height: 80px;
        height: 60px;
        position: relative;
        display: flex;

        img {
            width: 60px;
            height: 60px;
            margin-right: 10px;
        }

        .img {
            height: 60px;
            position: relative;
        }

        .myicon {
            position: absolute;
            top: 0px;
            right: 0px;
            color: #4b9bb7;
        }
    }
}
@@ -170,16 +206,15 @@
    border-radius: 4px;
}

::v-deep .el-textarea__inner {
    background-color: #09152f;
    border: 1px solid #17324c;
}
// ::v-deep .el-textarea__inner {
//     // background-color: #09152f;
//     border: 1px solid #17324c;
// }

::v-deep .el-input__count {
    background-color: #09152f;
}
// ::v-deep .el-input__count {
//     // background-color: #09152f;
// }

::v-deep .el-form-item__label {
    color: #4b9bb7;
}
</style>
// ::v-deep .el-form-item__label {
//     color: #4b9bb7;
// }</style>