处理图片显示问题

zhanghua

2025-04-14 829f5116884f98643ffc5b2a548a600d40c0cedb

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

@@ -2,88 +2,45 @@
    <div class="evidence">
        <div class="evidence-title">调查取证</div>
        <div class="evidence-form">
            <el-form
                ref="evidenceForm"
                label-width="160px"
                :model="evidence"
                :rules="evidenceRules"
                autoComplete="on"
            >
            <el-form ref="evidenceForm" label-width="160px" :model="evidence" :rules="evidenceRules" autoComplete="on">
                <div class="evidence-item">
                    <!-- 承办队员 -->
                    <el-form-item label="承办队员:" prop="undertaker">
                        <el-input
                            v-model="evidence.undertaker"
                            placeholder="请输入姓名"
                        ></el-input>
                        <el-input v-model="evidence.undertaker" placeholder="请输入姓名"></el-input>
                    </el-form-item>
                    <!-- 协办队员 -->
                    <el-form-item
                        label="协办队员:"
                        label-width="100px"
                        prop="assistant"
                    >
                        <el-input
                            v-model="evidence.assistant"
                            placeholder="请输入姓名"
                        ></el-input>
                    <el-form-item label="协办队员:" label-width="100px" prop="assistant">
                        <el-input v-model="evidence.assistant" placeholder="请输入姓名"></el-input>
                    </el-form-item>
                </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>
                <!-- 地址 -->
                <el-form-item label="地址:" prop="address">
                    <el-input
                        v-model="evidence.address"
                        placeholder="请输入地址"
                    ></el-input>
                    <el-input v-model="evidence.address" placeholder="请输入地址"></el-input>
                </el-form-item>
                <!-- 案由 -->
                <el-form-item label="案由:" prop="caseAction">
                    <el-input
                        v-model="evidence.caseAction"
                        placeholder="请输入案由"
                    ></el-input>
                    <el-input v-model="evidence.caseAction" placeholder="请输入案由"></el-input>
                </el-form-item>
                <!-- 当事人信息 -->
                <el-form-item
                    label="当事人信息:"
                    prop="userInfo"
                    class="sp-user-info"
                >
                    <el-input
                        suffix-icon="el-icon-s-order"
                        v-model="evidence.userInfo"
                        @focus="openDialog"
                    ></el-input>
                <el-form-item label="当事人信息:" prop="userInfo" class="sp-user-info">
                    <el-input suffix-icon="el-icon-s-order" v-model="evidence.userInfo" @focus="openDialog"></el-input>
                </el-form-item>
                <!-- 情况描述 -->
                <el-form-item label="处置结果:" prop="description">
                    <el-input
                        type="textarea"
                        :autosize="{ minRows: 2, maxRows: 4 }"
                        maxlength="200"
                        show-word-limit
                        v-model="evidence.description"
                        placeholder="请输入处置结果,限制200字以内"
                    ></el-input>
                    <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" maxlength="200" show-word-limit
                        v-model="evidence.description" placeholder="请输入处置结果,限制200字以内"></el-input>
                </el-form-item>
                <!-- 照片附件 -->
                <el-form-item label="照片附件:" prop="pic">
                    <div class="upImg">
                        <MyUpload
                            :picture-list="evidence.pic"
                            @setPictureUrl="setPicUrl"
                            @delPictureUrl="delPicUrl"
                        ></MyUpload>
                        <MyUpload :picture-list="evidence.pic" @setPictureUrl="setPicUrl" @delPictureUrl="delPicUrl">
                        </MyUpload>
                        <div class="tip">{{ evidence.pic.length }} / 4</div>
                    </div>
                </el-form-item>
@@ -95,19 +52,9 @@
                <i class="el-icon-close" @click="closeUserForm"></i>
            </div>
            <div class="user-form-content">
                <el-form
                    ref="userForm"
                    label-width="120px"
                    :model="user"
                    :rules="userRules"
                    autoComplete="on"
                >
                <el-form ref="userForm" label-width="120px" :model="user" :rules="userRules" autoComplete="on">
                    <!-- 类型 -->
                    <el-form-item
                        label="类型:"
                        prop="illegalType"
                        :disabled="true"
                    >
                    <el-form-item label="类型:" prop="illegalType" :disabled="true">
                        <el-input v-model="user.illegalType"></el-input>
                    </el-form-item>
                    <!-- 姓名、手机号 -->
@@ -124,16 +71,9 @@
                    <!-- 证件 -->
                    <div class="user-item">
                        <el-form-item label="证件类型:" prop="certificateType">
                            <el-select
                                v-model="user.certificateType"
                                placeholder="请选择"
                            >
                                <el-option
                                    v-for="item in cardOptions"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                                >
                            <el-select v-model="user.certificateType" placeholder="请选择">
                                <el-option v-for="item in cardOptions" :key="item.id" :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
@@ -145,16 +85,9 @@
                    <div class="user-item">
                        <!-- 文化程度 -->
                        <el-form-item label="文化程度:" prop="educationDegree">
                            <el-select
                                v-model="user.educationDegree"
                                placeholder="请选择"
                            >
                                <el-option
                                    v-for="item in degreeOptions"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                                >
                            <el-select v-model="user.educationDegree" placeholder="请选择">
                                <el-option v-for="item in degreeOptions" :key="item.id" :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
@@ -171,16 +104,9 @@
                    <div class="user-item">
                        <!-- 民族 -->
                        <el-form-item label="民族:" prop="nation">
                            <el-select
                                v-model="user.nation"
                                placeholder="请选择"
                            >
                                <el-option
                                    v-for="item in nationOptions"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                                >
                            <el-select v-model="user.nation" placeholder="请选择">
                                <el-option v-for="item in nationOptions" :key="item.id" :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
@@ -354,6 +280,8 @@
        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;
@@ -420,8 +348,7 @@
        setPicUrl({ url }) {
            const baseUrl = '';
            if (this.evidence.pic.length < 4) {

                this.evidence.pic.push(FILE_ORIGINAL_PATH + url)
                this.evidence.pic.push(url)
            }
        },
        //删除图片
@@ -437,9 +364,11 @@
.evidence {
    line-height: 60px;
    position: relative;

    .evidence-item {
        display: flex;
    }

    .evidence-title {
        line-height: 60px;
        font-weight: 650;
@@ -512,11 +441,13 @@

    padding-bottom: 60px;
}

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

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