处理图片显示问题

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" 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>
                <!-- 地址 -->
@@ -27,31 +28,20 @@
                    <el-input v-model="evidence.caseAction" placeholder="请输入案由"></el-input>
                </el-form-item>
                <!-- 当事人信息 -->
                <el-form-item label="当事人信息:" prop="userInfo">
                <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-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-form-item>
                <!-- 照片附件 -->
                <el-form-item label="照片附件:" prop="pic">
                    <div class="upImg">
                        <div class="img-list" v-if="evidence.pic.length!==0">
                            <div class="img" v-for="(item,index) in evidence.pic" :key="index">
                                <img :src="item" alt="">
                                <i class="el-icon-close myicon" @click="handleRemove(index)"></i>
                            </div>
                        </div>
                        <div class="upload" v-if="evidence.pic.length<4">
                            <el-upload :file-list="fileList" class="upload-demo"
                                action="/sccg/file/medias" multiple :show-file-list="false"
                                :limit="4" :on-success="handleSuccess2" :headers="getToken()">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                        </div>
                        <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>
@@ -64,12 +54,8 @@
            <div class="user-form-content">
                <el-form ref="userForm" label-width="120px" :model="user" :rules="userRules" autoComplete="on">
                    <!-- 类型 -->
                    <el-form-item label="类型:" prop="illegalType">
                        <el-select v-model="user.illegalType" placeholder="请选择">
                            <el-option v-for="item in typeOptions" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    <el-form-item label="类型:" prop="illegalType" :disabled="true">
                        <el-input v-model="user.illegalType"></el-input>
                    </el-form-item>
                    <!-- 姓名、手机号 -->
                    <div class="user-item">
@@ -118,13 +104,11 @@
                    <div class="user-item">
                        <!-- 民族 -->
                        <el-form-item label="民族:" prop="nation">
                            <!-- <el-select v-model="user.nation" placeholder="请选择民族"> -->
                            <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-input v-model="user.nation"></el-input> -->
                        </el-form-item>
                        <!-- 籍贯 -->
                        <el-form-item label="籍贯:" prop="nativePlace">
@@ -143,58 +127,21 @@
            </div>
            <div class="user-form-footer">
                <el-button type="primary" @click="checkUser">确定</el-button>
                <el-button>返回</el-button>
                <el-button @click="userFlag = false">返回</el-button>
            </div>
        </div>
    </div>
</template>
<script>
import { getTypeList } from '@/utils/helper'
import {validateName,validatePhone,validateCardId} from '@/utils/validate'
import { deepClone, getTypeList } from '@/utils/helper'
import { validateName, validatePhone, validateCardId } from '@/utils/validate'
import MyUpload from "@/components/myUpload"
import { FILE_ORIGINAL_PATH } from "@/utils";
export default {
    components: {
        MyUpload
    },
    data() {
        const checkName = (rule, value, callback) => {
            if (value) {
                callback()
            } else {
                callback(new Error('承办队员名字不能为空'));
            }
        }
        const checkName2 = (rule, value, callback) => {
            if (value) {
                callback()
            } else {
                callback(new Error('协办队员名字不能为空'));
            }
        }
        const checkTime2 = (rule, value, callback) => {
            if (value) {
                callback()
            } else {
                callback(new Error('此处时间不能为空'));
            }
        }
        const checkAddress2 = (rule, value, callback) => {
            if (value) {
                callback()
            } else {
                callback(new Error('此处地址不能为空'));
            }
        }
        const checkCase = (rule, value, callback) => {
            if (value) {
                callback()
            } else {
                callback(new Error('案由不能空'));
            }
        }
        const checkDesc = (rule, value, callback) => {
            if (value) {
                callback()
            } else {
                callback(new Error('情况描述不能为空'));
            }
        }
        const checkPic = (rule, value, callback) => {
            if (value.length !== 0) {
                callback()
@@ -202,14 +149,7 @@
                callback(new Error('请上传照片附件'));
            }
        }
        const checkIll = (rule, value, callback) => {
            if (value) {
                callback()
            } else {
                callback(new Error('案件类型不能为空'));
            }
        }
        const checkName3 = (rule, value, callback) => {
        const checkUserName = (rule, value, callback) => {
            if (value) {
                validateName(value) ? callback() : callback(new Error('请输入正确的姓名'))
            } else {
@@ -237,55 +177,6 @@
                callback(new Error('证件号码不能为空'));
            }
        }
        const checkWh = (rule, value, callback) => {
            if (value) {
                callback()
            } else {
                callback(new Error('文化程度不能为空'));
            }
        }
        // const checkCareer = (rule, value, callback) => {
        //     if (value) {
        //         callback()
        //     } else {
        //         callback();
        //     }
        // }
        // const checkWork = (rule, value, callback) => {
        //     if (value) {
        //         callback()
        //     } else {
        //         callback(new Error('工作单位及职务不能为空'));
        //     }
        // }
        const checkNation = (rule, value, callback) => {
            if (value) {
                callback()
            } else {
                callback(new Error('民族不能为空'));
            }
        }
        // const checkNaP = (rule, value, callback) => {
        //     if (value) {
        //         callback()
        //     } else {
        //         callback(new Error('籍贯不能为空'));
        //     }
        // }
        const checkLiveAdd = (rule, value, callback) => {
            if (value) {
                callback()
            } else {
                callback(new Error('现住址不能为空'));
            }
        }
        // const checkRegAdd = (rule, value, callback) => {
        //     if (value) {
        //         callback()
        //     } else {
        //         callback(new Error('户籍所在地不能为空'));
        //     }
        // }
        const checkFlag = (rule, value, callback) => {
            if (value) {
                callback();
@@ -295,48 +186,24 @@
        }
        return {
            evidence: {
                undertaker: null,
                assistant: null,
                investigationTime: null,
                address: null,
                caseAction: null,
                description: null,
                pic: [],
                userInfo: '',
                userInfo: null
            },
            evidenceRules: {
                userInfo: [
                    { trigger: 'change', validator: checkFlag }
                ],
                undertaker: [
                    {
                        trigger: 'blur', validator: checkName
                    }
                ],
                assistant: [
                    {
                        trigger: 'blur', validator: checkName2
                    }
                ],
                investigationTime: [
                    {
                        trigger: 'change', validator: checkTime2
                    }
                ],
                address: [
                    {
                        trigger: 'blur', validator: checkAddress2
                    }
                ],
                caseAction: [
                    {
                        trigger: 'blur', validator: checkCase
                    }
                ],
                description: [
                    {
                        trigger: 'blur', validator: checkDesc
                    }
                ],
                pic: [
                    {
                        trigger: 'blur', validator: checkPic
                    }
                ],
                userInfo: [{ trigger: ['change', 'blur'], validator: checkFlag }],
                undertaker: [{ trigger: ['change', 'blur'], message: '承办队员名字不能为空', required: true }],
                assistant: [{ trigger: ['change', 'blur'], message: '协办队员名字不能为空', required: true }],
                investigationTime: [{ trigger: ['change', 'blur'], message: '此处时间不能为空', required: true }],
                address: [{ trigger: ['change', 'blur'], message: '此处地址不能为空', required: true }],
                caseAction: [{ trigger: ['change', 'blur'], message: '案由不能空', required: true }],
                description: [{ trigger: ['change', 'blur'], message: '情况描述不能为空', required: true }],
                pic: [{ trigger: ['change', 'blur'], validator: checkPic }],
            },
            fileList: [],
            user: {
@@ -354,66 +221,14 @@
                registerAddress: '',
            },
            userRules: {
                illegalType: [
                    {
                        trigger: 'change', validator: checkIll,
                    }
                ],
                name: [
                    {
                        required:true,trigger: 'blur', validator: checkName3
                    }
                ],
                phoneCode: [
                    {
                        required:true,trigger: 'blur', validator: checkPhone
                    }
                ],
                certificateType: [
                    {
                        trigger: 'change', validator: checkCard
                    }
                ],
                certificateCode: [
                    {
                        required:true,trigger: 'blur', validator: checkCode
                    }
                ],
                educationDegree: [
                    {
                        trigger: 'change', validator: checkWh
                    }
                ],
                // career: [
                //     {
                //         trigger: 'blur', validator: checkCareer
                //     }
                // ],
                // work: [
                //     {
                //         trigger: 'blur', validator: checkWork
                //     }
                // ],
                nation: [
                    {
                        trigger: 'change', validator: checkNation
                    }
                ],
                // nativePlace: [
                //     {
                //         trigger: 'blur', validator: checkNaP
                //     }
                // ],
                liveAddress: [
                    {
                        required:true,trigger: 'blur', validator: checkLiveAdd
                    }
                ],
                // registerAddress: [
                //     {
                //         trigger: 'blur', validator: checkRegAdd
                //     }
                // ],
                illegalType: [{ trigger: ['change', 'blur'], message: '案件类型不能为空', required: true }],
                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 }],
                educationDegree: [{ required: true, trigger: ['change', 'blur'], message: '文化程度不能为空' }],
                nation: [{ required: true, trigger: ['change', 'blur'], message: '民族不能为空' }],
                liveAddress: [{ required: true, trigger: ['change', 'blur'], message: '现住址不能为空' }],
            },
            userFlag: false,
            typeOptions: [
@@ -454,20 +269,27 @@
                    label: '大学及以上',
                    value: 4
                },
            ]
            ],
            basecase: null
        }
    },
    created() {
        this.getCardTypeList();
        this.getSchoolList();
        this.getNationList();
        console.log(this.mytype);
        this.user.illegalType = JSON.parse(JSON.stringify(this.mytype));
    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);
            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: {
        handleSuccess2(res, file, filelist) {
            const baseUrl = 'http://140.143.152.226:8410/';
            console.log(res);
            const baseUrl = '';
            if (this.evidence.pic.length < 4) {
                this.evidence.pic.push(baseUrl + res.data.url1)
            }
@@ -483,18 +305,17 @@
        openDialog(e) {
            this.userFlag = true;
            this.userInfo = true;
            this.$set(this.user, 'illegalType', this.illegalType);
        },
        // 检验user
        checkUser() {
            // console.log(this.$refs.userForm.validate);
            this.$refs.userForm.validate((valid) => {
                console.log(valid);
                if (valid) {
                    this.evidence.userInfo = this.user.name;
                    this.evidence.userInfo = this.user.name + '...';
                    this.userFlag = false;
                } else {
                    this.evidence.userInfo = false;
                    return false;
                    this.evidence.userInfo = null;
                    this.$message.warning('请检查必填项');
                }
            })
        },
@@ -522,32 +343,32 @@
        // 获取民族列表
        async getNationList() {
            this.nationOptions = await getTypeList(1, '05');
        },
        // 设置上传成功之后的图片地址
        setPicUrl({ url }) {
            const baseUrl = '';
            if (this.evidence.pic.length < 4) {
                this.evidence.pic.push(url)
            }
        },
        //删除图片
        delPicUrl({ url }) {
            const baseUrl = '';
            this.evidence.pic.splice(this.evidence.pic.indexOf(baseUrl + url), 1);
        }
    },
    watch: {
        'evidence.pic.length': {
            handler(newLen, oldLen) {
                if (newLen !== 0) {
                    this.$refs.evidenceForm.validate((valid) => {
                        if (valid) {

                        } else { return false }
                    })
                }
            },
            deep: true,
        }
    },
    props:['mytype']
    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;
@@ -607,7 +428,7 @@
    position: absolute;
    top: 0;
    z-index: 3000;
    background-color: #06122c;
    background-color: #fff;

    .user-form-header {
        background-color: #fff;
@@ -619,6 +440,12 @@
    }

    padding-bottom: 60px;
}

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

.user-form-content {
@@ -635,29 +462,29 @@
        .el-select {
            flex: 1;

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

    ::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;
    }
    // ::v-deep .el-form-item__label {
    //     color: #4b9bb7;
    // }

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

.user-form-footer {
@@ -665,18 +492,18 @@
    justify-content: flex-end;
}

::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;
}
// ::v-deep .el-form-item__label {
//     color: #4b9bb7;
// }

::v-deep .el-dialog__header,
::v-deep .el-dialog__body {