处理图片显示问题

zhanghua

2025-04-14 829f5116884f98643ffc5b2a548a600d40c0cedb

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

@@ -2,126 +2,136 @@
    <div class="book">
        <div class="book-title">文种书类</div>
        <div class="book-form">
            <el-form ref="bookForm" label-width="120px" :model="book" :rules="bookRules" autoComplete="on">
            <el-form
                ref="bookForm"
                label-width="120px"
                :model="book"
                :rules="bookRules"
                autoComplete="on"
            >
                <div class="book-item">
                    <!-- 文书种类 -->
                    <el-form-item label="文书种类:" prop="writType">
                        <el-select v-model="book.writType" placeholder="请输入文书种类">
                            <el-option v-for="item in kindList" :key="item.value" :label="item.label"
                                :value="item.value">
                        <el-select
                            v-model="book.writType"
                            placeholder="请输入文书种类"
                        >
                            <el-option
                                v-for="item in kindList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <!-- 文书编号 -->
                    <el-form-item label="文书编号:" prop="writCode">
                        <el-input v-model="book.writCode" placeholder="请输入文书编号"></el-input>
                        <el-input
                            v-model="book.writCode"
                            placeholder="请输入文书编号"
                        ></el-input>
                    </el-form-item>
                </div>
                <!-- 违法类型 -->
                <el-form-item label="违法类型:" prop="illegalType" placeholder="请输入违法类型">
                    <el-input v-model="book.illegalType" placeholder="请输入违法类型"></el-input>
                <el-form-item label="违法类型:" prop="illegalType">
                    <el-input v-model="basecase"></el-input>
                </el-form-item>
                <!-- 文书发放时间 -->
                <el-form-item label="文书发放时间:" prop="sendTime">
                    <el-date-picker v-model="book.sendTime" type="datetime" placeholder="请选择年月日">
                    <el-date-picker
                        v-model="book.sendTime"
                        type="datetime"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        placeholder="请选择年月日"
                    >
                    </el-date-picker>
                </el-form-item>
                <!-- 文书限定时间 -->
                <el-form-item label="文书限定时间" prop="limitTime">
                    <el-date-picker v-model="book.limitTime" type="datetime" placeholder="请选择年月日">
                    <el-date-picker
                        v-model="book.limitTime"
                        type="datetime"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        placeholder="请选择年月日"
                    >
                    </el-date-picker>
                </el-form-item>
                <!-- 文书发放内容 -->
                <el-form-item label="文书发放内容:" prop="sendContent">
                    <el-input v-model="book.sendContent" placeholder="请输入文书发放内容"></el-input>
                    <el-input
                        v-model="book.sendContent"
                        placeholder="请输入文书发放内容"
                    ></el-input>
                </el-form-item>
                <!-- 实际整改时间 -->
                <el-form-item label="实际整改时间:" prop="rectifyTime">
                    <el-date-picker v-model="book.rectifyTime" type="datetime" placeholder="请选择年月日">
                    <el-date-picker
                        v-model="book.rectifyTime"
                        type="datetime"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        placeholder="请选择年月日"
                    >
                    </el-date-picker>
                </el-form-item>
                <!-- 整改情况 -->
                <el-form-item label="整改情况:" prop="rectifySituation">
                    <el-input v-model="book.rectifySituation" placeholder="请输入整改情况"></el-input>
                    <el-input
                        v-model="book.rectifySituation"
                        placeholder="请输入整改情况"
                    ></el-input>
                </el-form-item>
                <!-- 备注 -->
                <el-form-item label="备注:" prop="remark">
                    <el-input v-model="book.remark" placeholder="请输入备注"></el-input>
                    <el-input
                        v-model="book.remark"
                        placeholder="请输入备注"
                    ></el-input>
                </el-form-item>
                <!-- 文书照片上传 -->
                <el-form-item label="文书照片上传:" prop="writPic">
                    <div class="upImg">
                        <div class="img-list" v-if="book.writPic.length!==0">
                            <div class="img" v-for="(item,index) in book.writPic" :key="index">
                                <img :src="item" alt="">
                                <i class="el-icon-close myicon" @click="handleRemove(index,1)"></i>
                            </div>
                        </div>
                        <div class="upload" v-if="book.writPic.length<4">
                            <el-upload :file-list="fileList" class="upload-demo"
                                action="/sccg/file/medias" multiple :show-file-list="false"
                                :limit="4" :on-success="handleSuccess1" :headers="getToken()">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                        </div>
                        <div class="tip">{{book.writPic.length}} / 4</div>
                        <MyUpload
                            @setPictureUrl="writPic"
                            @delPictureUrl="delWritPic"
                            :picture-list="book.writPic"
                        ></MyUpload>
                        <div class="tip">{{ book.writPic.length }} / 4</div>
                    </div>
                </el-form-item>
                <!-- 整改前照片 -->
                <el-form-item label="整改前照片:" prop="originalPic">
                    <div class="upImg">
                        <div class="img-list" v-if="book.originalPic.length!==0">
                            <div class="img" v-for="(item,index) in book.originalPic" :key="index">
                                <img :src="item" alt="">
                                <i class="el-icon-close myicon" @click="handleRemove(index,2)"></i>
                            </div>
                        </div>
                        <div class="upload" v-if="book.originalPic.length<4">
                            <el-upload :file-list="fileList" class="upload-demo"
                                action="http:///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">{{book.originalPic.length}} / 4</div>
                        <MyUpload
                            @setPictureUrl="originalPic"
                            @delPictureUrl="delOriginalPic"
                            :picture-list="book.originalPic"
                        ></MyUpload>
                        <div class="tip">{{ book.originalPic.length }} / 4</div>
                    </div>
                </el-form-item>
                <!-- 整改后照片 -->
                <el-form-item label="整改后照片:" prop="rectifiedPic">
                    <div class="upImg">
                        <div class="img-list" v-if="book.rectifiedPic.length!==0">
                            <div class="img" v-for="(item,index) in book.rectifiedPic" :key="index">
                                <img :src="item" alt="">
                                <i class="el-icon-close myicon" @click="handleRemove(index,3)"></i>
                            </div>
                        <MyUpload
                            @setPictureUrl="rectifiedPic"
                            @delPictureUrl="delRectifiedPic"
                            :picture-list="book.rectifiedPic"
                        ></MyUpload>
                        <div class="tip">
                            {{ book.rectifiedPic.length }} / 4
                        </div>
                        <div class="upload" v-if="book.rectifiedPic.length<4">
                            <el-upload :file-list="fileList" class="upload-demo"
                                action="http:///sccg/file/medias" multiple :show-file-list="false"
                                :limit="4" :on-success="handleSuccess3" :headers="getToken()">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                        </div>
                        <div class="tip">{{book.rectifiedPic.length}} / 4</div>
                    </div>
                </el-form-item>
                <!-- 其他照片 -->
                <el-form-item label="其他:" prop="otherPic">
                    <div class="upImg">
                        <div class="img-list" v-if="book.otherPic.length!==0">
                            <div class="img" v-for="(item,index) in book.otherPic" :key="index">
                                <img :src="item" alt="">
                                <i class="el-icon-close myicon" @click="handleRemove(index,4)"></i>
                            </div>
                        </div>
                        <div class="upload" v-if="book.otherPic.length<4">
                            <el-upload :file-list="fileList" class="upload-demo"
                                action="http:///sccg/file/medias" multiple :show-file-list="false"
                                :limit="4" :on-success="handleSuccess4" :headers="getToken()">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                        </div>
                        <div class="tip">{{book.otherPic.length}} / 4</div>
                        <MyUpload
                            @setPictureUrl="otherPic"
                            @delPictureUrl="delOtherPic"
                            :picture-list="book.otherPic"
                        ></MyUpload>
                        <div class="tip">{{ book.otherPic.length }} / 4</div>
                    </div>
                </el-form-item>
            </el-form>
@@ -129,7 +139,13 @@
    </div>
</template>
<script>
import { deepClone, getCodeList } from '@/utils/helper'
import MyUpload from "@/components/myUpload"
import { FILE_ORIGINAL_PATH } from "@/utils";
export default {
    components: {
        MyUpload
    },
    data() {
        const checkKind = (rule, value, callback) => {
            if (value) {
@@ -195,21 +211,21 @@
            }
        }
        const checkRectPic = (rule, value, callback) => {
            if (value.length!==0) {
            if (value.length !== 0) {
                callback();
            } else {
                callback(new Error('整改后照片不能为空'));
            }
        }
        const checkWritPic = (rule, value, callback) => {
            if (value.length!==0) {
            if (value.length !== 0) {
                callback();
            } else {
                callback(new Error('文书照片不能为空'));
            }
        }
        const checkOrgPic = (rule, value, callback) => {
            if (value.length !==0) {
            if (value.length !== 0) {
                callback();
            } else {
                callback(new Error('整改前照片不能为空'));
@@ -231,11 +247,6 @@
                writCode: [
                    {
                        trigger: 'blur', validator: checkId
                    }
                ],
                illegalType: [
                    {
                        trigger: 'blur', validator: checkVio
                    }
                ],
                sendTime: [
@@ -292,40 +303,43 @@
                    label: '书籍2',
                    value: 2,
                },
            ]
            ],
            basecase: ""
        }
    },
    created() {
        console.log(this.book.writPic)
        this.getBookType();
        this.basecase = this.illegalType;
        if (this.writ) {
            this.book = deepClone(this.writ);
            this.book.originalPic = this.writ.originalPic.split(',');
            this.book.writPic = this.writ.writPic.split(',');
            this.book.otherPic = this.writ.otherPic.split(',');
            this.book.rectifiedPic = this.writ.rectifiedPic.split(',');
        }
    },
    props: ['caseId', 'closeDialog'],
    props: ['caseId', 'closeDialog', 'mycode', 'writ', 'illegalType'],
    methods: {
        handleSuccess1(res, file, filelist) {
            const baseUrl = 'http://140.143.152.226:8410/';
            console.log(res);
            // this.$set(this.book, 'writPic', baseUrl + res.data.url1);
            // console.log(this.book.writPic);
            const baseUrl = '';
            if (this.book.writPic.length < 4) {
                this.book.writPic.push(baseUrl + res.data.url1)
            }
        },
        handleSuccess2(res, file, filelist) {
            const baseUrl = 'http://140.143.152.226:8410/';
            console.log(res);
            const baseUrl = '';
            if (this.book.originalPic.length < 4) {
                this.book.originalPic.push(baseUrl + res.data.url1)
            }
        },
        handleSuccess3(res, file, filelist) {
            const baseUrl = 'http://140.143.152.226:8410/';
            console.log(res);
            const baseUrl = '';
            if (this.book.rectifiedPic.length < 4) {
                this.book.rectifiedPic.push(baseUrl + res.data.url1)
            }
        },
        handleSuccess4(res, file, filelist) {
            const baseUrl = 'http://140.143.152.226:8410/';
            console.log(res);
            const baseUrl = '';
            if (this.book.otherPic.length < 4) {
                this.book.otherPic.push(baseUrl + res.data.url1)
            }
@@ -337,18 +351,67 @@
                return { Authorization: tokenHead + token }
            }
        },
        // 删除图片
        handleRemove(index, flag) {
            if (flag === 1) {
                this.book.writPic.splice(index, 1);
            } else if (flag === 2) {
                this.book.originalPic.splice(index, 1);
            } else if (flag === 3) {
                this.book.rectifiedPic.splice(index, 1);
            } else {
                this.book.otherPic.splice(index, 1);
            }

        // 设置上传成功之后的图片地址
        writPic({ url }) {
            const baseUrl = '';
            if (this.book.originalPic.length < 4) {

                this.book.writPic.push(FILE_ORIGINAL_PATH + url)
            }
        },
        //删除图片
        delWritPic({ url }) {
            const baseUrl = '';
            this.book.writPic.splice(this.book.writPic.indexOf(baseUrl + url), 1);
        },

        // 设置上传成功之后的图片地址
        otherPic({ url }) {
            const baseUrl = '';
            if (this.book.otherPic.length < 4) {

                this.book.otherPic.push(FILE_ORIGINAL_PATH + url)
            }
        },
        //删除图片
        delOtherPic({ url }) {
            const baseUrl = '';
            this.book.otherPic.splice(this.book.otherPic.indexOf(baseUrl + url), 1);
        },

        // 设置上传成功之后的图片地址
        rectifiedPic({ url }) {
            const baseUrl = '';
            if (this.book.otherPic.length < 4) {

                this.book.rectifiedPic.push(FILE_ORIGINAL_PATH + url)
            }
        },
        //删除图片
        delRectifiedPic({ url }) {
            const baseUrl = '';
            this.book.rectifiedPic.splice(this.book.rectifiedPic.indexOf(baseUrl + url), 1);
        },
        // 设置上传成功之后的图片地址
        originalPic({ url }) {
            const baseUrl = '';
            if (this.book.otherPic.length < 4) {

                this.book.originalPic.push(FILE_ORIGINAL_PATH + url)
            }
        },
        //删除图片
        delOriginalPic({ url }) {
            const baseUrl = '';
            this.book.originalPic.splice(this.book.originalPic.indexOf(baseUrl + url), 1);
        },

        // 获取文书种类
        async getBookType() {
            let arr
            arr = await getCodeList('15');
            this.kindList = arr;
        }
    },
    watch: {
@@ -428,6 +491,7 @@
        .img {
            height: 60px;
            position: relative;
            margin-right: 10px;
        }

        .myicon {
@@ -439,16 +503,16 @@
    }
}

::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;
// }
</style>