封装table组件,封装上传组件,修改消息发布,修改bug

“dzb”

2022-10-19 e500f3ad66d88053118d76f4c838f6f176736615

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

@@ -51,12 +51,15 @@
                <!-- 文书照片上传 -->
                <el-form-item label="文书照片上传:" prop="writPic">
                    <div class="upImg">
                        <div class="img-list">
                            <img :src="item" alt="" v-for="(item,index) in book.writPic" :key="index">
                        <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="http://42.193.1.25:8082/sccg/file/medias" multiple :show-file-list="false"
                                action="/sccg/file/medias" multiple :show-file-list="false"
                                :limit="4" :on-success="handleSuccess1" :headers="getToken()">
                                <i class="el-icon-plus"></i>
                            </el-upload>
@@ -67,12 +70,15 @@
                <!-- 整改前照片 -->
                <el-form-item label="整改前照片:" prop="originalPic">
                    <div class="upImg">
                        <div class="img-list">
                            <img :src="item" alt="" v-for="(item,index) in book.originalPic" :key="index">
                        <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://42.193.1.25:8082/sccg/file/medias" multiple :show-file-list="false"
                                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>
@@ -83,12 +89,15 @@
                <!-- 整改后照片 -->
                <el-form-item label="整改后照片:" prop="rectifiedPic">
                    <div class="upImg">
                        <div class="img-list">
                            <img :src="item" alt="" v-for="(item,index) in book.rectifiedPic" :key="index">
                        <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>
                        </div>
                        <div class="upload" v-if="book.rectifiedPic.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"
                                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>
@@ -99,12 +108,15 @@
                <!-- 其他照片 -->
                <el-form-item label="其他:" prop="otherPic">
                    <div class="upImg">
                        <div class="img-list">
                            <img :src="item" alt="" v-for="(item,index) in book.otherPic" :key="index">
                        <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://42.193.1.25:8082/sccg/file/medias" multiple :show-file-list="false"
                                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>
@@ -182,6 +194,27 @@
                callback(new Error('发放内容不能为空'));
            }
        }
        const checkRectPic = (rule, value, callback) => {
            if (value.length!==0) {
                callback();
            } else {
                callback(new Error('整改后照片不能为空'));
            }
        }
        const checkWritPic = (rule, value, callback) => {
            if (value.length!==0) {
                callback();
            } else {
                callback(new Error('文书照片不能为空'));
            }
        }
        const checkOrgPic = (rule, value, callback) => {
            if (value.length !==0) {
                callback();
            } else {
                callback(new Error('整改前照片不能为空'));
            }
        }
        return {
            book: {
                writPic: [],
@@ -192,10 +225,10 @@
            bookRules: {
                writType: [
                    {
                        trigger: 'blur', validator: checkKind
                        trigger: 'change', validator: checkKind
                    }
                ],
                idwritCode: [
                writCode: [
                    {
                        trigger: 'blur', validator: checkId
                    }
@@ -233,6 +266,19 @@
                noremark: [
                    {
                        trigger: 'blur', validator: checkNote
                    }
                ],
                writPic: [{
                    trigger: 'blur', validator: checkWritPic
                }],
                rectifiedPic: [
                    {
                        trigger: 'blur', validator: checkRectPic
                    }
                ],
                originalPic: [
                    {
                        trigger: 'blur', validator: checkOrgPic
                    }
                ],
            },
@@ -291,6 +337,45 @@
                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);
            }

        }
    },
    watch: {
        'book.writPic.length': {
            handler(newLen, oldLen) {
                if (newLen !== 0) {
                    this.$refs.bookForm.validateField('writPic');
                }
            },
            deep: true,
        },
        'book.rectifiedPic.length': {
            handler(newLen, oldLen) {
                if (newLen !== 0) {
                    this.$refs.bookForm.validateField('rectifiedPic');
                }
            },
            deep: true,
        },
        'book.originalPic.length': {
            handler(newLen, oldLen) {
                if (newLen !== 0) {
                    this.$refs.bookForm.validateField('originalPic');
                }
            },
            deep: true,
        }
    }
}
</script>
@@ -331,13 +416,26 @@
    }

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

        img {
            width: 60px;
            height: 60px;
        }

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

        .myicon {
            position: absolute;
            top: 0px;
            right: 0px;
            color: #4b9bb7;
        }
    }
}