“dzb”
2022-10-21 a598d935a61fea27312fc57becd80e23bf09f788
src/views/operate/disposal/casepool/dispatch/updateUser/uploadResult/components/arrive/index.vue
@@ -25,13 +25,16 @@
                <!-- 现场情况照片 -->
                <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">
                        <div class="img-list" v-if="arrive.situationPic.length!==0">
                            <div class="img" v-for="(item,index) in arrive.situationPic" :key="index">
                                <img :src="item" alt="">
                                <i class="el-icon-close myicon" @click="handleRemove(index)"></i>
                            </div>
                        </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()">
                                action="/sccg/file/medias" multiple :show-file-list="false"
                                :limit="50" :on-success="handleSuccess" list-type="picture" :headers="getToken()">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                        </div>
@@ -74,10 +77,10 @@
            }
        }
        const checkSitPic = (rule, value, callback) => {
            if (value) {
            if (value.length !== 0) {
                callback()
            } else {
                callback();
                callback(new Error('请上传现场情况照片'));
            }
        }
        return {
@@ -98,17 +101,17 @@
                    { trigger: 'blur', validator: checkReplay }
                ],
                situationPic: [
                    { trigger: 'change', validator: checkSitPic }
                    { trigger: 'blur', validator: checkSitPic }
                ],
            },
            fileList: [],
        }
    },
    props:['getArrive'],
    methods: {
        handleSuccess(res, file, filelist) {
            const baseUrl = 'http://140.143.152.226:8410/';
            console.log(res);
            console.log(this.fileList);
            if (this.arrive.situationPic.length < 4) {
                this.arrive.situationPic.push(baseUrl + res.data.url1)
            }
@@ -121,15 +124,29 @@
            }
        },
        // 获取arrive对象
        backData(){
        backData() {
            const { arrive } = this;
            this.$emit('getArrive',{arrive});
            this.$emit('getArrive', { arrive });
        },
        // 删除图片
        handleRemove(index) {
            this.arrive.situationPic.splice(index,1);
        }
    },
    watch: {
        'arrive.situationPic.length': {
            handler(newLen, oldLen) {
                if (newLen !== 0) {
                    this.$refs.arriveForm.validateField('situationPic');
                }
            },
            deep: true,
        }
    }
}
</script>
<style lang="scss" scoped>
.arrive-title{
.arrive-title {
    line-height: 60px;
    font-weight: 650;
    font-size: 20px;
@@ -149,12 +166,23 @@
    }
    .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;
        }
    }
}