已上报到市批量操作按钮隐藏

fangyuan

2022-12-16 9ff66017debadfc89bc0c1b796684a4d1dbe2bc3

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

@@ -2,77 +2,385 @@
    <div class="book">
        <div class="book-title">文种书类</div>
        <div class="book-form">
            <el-form ref="bookForm" label-width="160px" :model="book" :rules="bookRules" autoComplete="on">
                <!-- 文书种类 -->
                <el-form-item label="文书种类:" prop="kind">
                    <el-input v-model="book.kind"></el-input>
                </el-form-item>
                <!-- 文书编号 -->
                <el-form-item label="文书编号:" prop="id">
                    <el-input v-model="book.id"></el-input>
                </el-form-item>
            <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.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-form-item>
                </div>
                <!-- 违法类型 -->
                <el-form-item label="违法类型:" prop="vioKind">
                    <el-input v-model="book.vioKind"></el-input>
                <el-form-item label="违法类型:" prop="illegalType" >
                    <el-input v-model="basecase" ></el-input>
                </el-form-item>
                <!-- 文书发放时间 -->
                <el-form-item label="文书发放时间:" prop="giveTime">
                    <el-input v-model="book.giveTime"></el-input>
                <el-form-item label="文书发放时间:" prop="sendTime">
                    <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-input v-model="book.limitTime"></el-input>
                    <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="content">
                    <el-input v-model="book.content"></el-input>
                <el-form-item label="文书发放内容:" prop="sendContent">
                    <el-input v-model="book.sendContent" placeholder="请输入文书发放内容"></el-input>
                </el-form-item>
                <!-- 实际整改时间 -->
                <el-form-item label="实际整改时间:" prop="updateTime">
                    <el-input v-model="book.updateTime"></el-input>
                <el-form-item label="实际整改时间:" prop="rectifyTime">
                    <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="condition">
                    <el-input v-model="book.condition"></el-input>
                <el-form-item label="整改情况:" prop="rectifySituation">
                    <el-input v-model="book.rectifySituation" placeholder="请输入整改情况"></el-input>
                </el-form-item>
                <!-- 备注 -->
                <el-form-item label="备注:" prop="note">
                    <el-input v-model="book.note"></el-input>
                <el-form-item label="备注:" prop="remark">
                    <el-input v-model="book.remark" placeholder="请输入备注"></el-input>
                </el-form-item>
                <!-- 文书照片上传 -->
                <el-form-item label="文书照片上传:" prop="bookPhoto">
                    <el-input v-model="book.bookPhoto"></el-input>
                <el-form-item label="文书照片上传:" prop="writPic">
                    <div class="upImg">
                        <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="beforeUpdate">
                    <el-input v-model="book.beforeUpdate"></el-input>
                <el-form-item label="整改前照片:" prop="originalPic">
                     <div class="upImg">
                        <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="afterUpdate">
                    <el-input v-model="book.afterUpdate"></el-input>
                <el-form-item label="整改后照片:" prop="rectifiedPic">
                    <div class="upImg">
                        <MyUpload  @setPictureUrl="rectifiedPic" @delPictureUrl="delRectifiedPic" :picture-list="book.rectifiedPic"></MyUpload>
                        <div class="tip">{{book.rectifiedPic.length}} / 4</div>
                    </div>
                </el-form-item>
                <!-- 其他照片 -->
                <el-form-item label="其他:" prop="other">
                    <el-input v-model="book.other"></el-input>
                <el-form-item label="其他:" prop="otherPic">
                    <div class="upImg">
                        <MyUpload  @setPictureUrl="otherPic" @delPictureUrl="delOtherPic" :picture-list="book.otherPic"></MyUpload>
                        <div class="tip">{{book.otherPic.length}} / 4</div>
                    </div>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
    export default{
        data(){
            return{
                book:{},
                bookRules:{

                }
import {deepClone, getCodeList} from '@/utils/helper'
import MyUpload from "@/components/myUpload"
export default {
    components: {
        MyUpload
    },
    data() {
        const checkKind = (rule, value, callback) => {
            if (value) {
                callback();
            } else {
                callback(new Error('文书种类不能为空'));
            }
        }
        const checkId = (rule, value, callback) => {
            if (value) {
                callback();
            } else {
                callback(new Error('文书编号不能为空'));
            }
        }
        const checkGiveTime = (rule, value, callback) => {
            if (value) {
                callback();
            } else {
                callback(new Error('发放时间不能为空'));
            }
        }
        const checkUpTime = (rule, value, callback) => {
            if (value) {
                callback();
            } else {
                callback(new Error('实际整改时间不能为空'));
            }
        }
        const checkNote = (rule, value, callback) => {
            if (value) {
                callback();
            } else {
                callback();
            }
        }
        const checkCondition = (rule, value, callback) => {
            if (value) {
                callback();
            } else {
                callback(new Error('整改情况不能为空'));
            }
        }
        const checkLimTime = (rule, value, callback) => {
            if (value) {
                callback();
            } else {
                callback(new Error('限定时间不能为空'));
            }
        }
        const checkVio = (rule, value, callback) => {
            if (value) {
                callback();
            } else {
                callback(new Error('违法类型不能为空'));
            }
        }
        const checkContent = (rule, value, callback) => {
            if (value) {
                callback();
            } else {
                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: [],
                otherPic: [],
                rectifiedPic: [],
                originalPic: [],
            },
            bookRules: {
                writType: [
                    {
                        trigger: 'change', validator: checkKind
                    }
                ],
                writCode: [
                    {
                        trigger: 'blur', validator: checkId
                    }
                ],
                sendTime: [
                    {
                        trigger: 'blur', validator: checkGiveTime
                    }
                ],
                limitTime: [
                    {
                        trigger: 'blur', validator: checkLimTime
                    }
                ],
                sendContent: [
                    {
                        trigger: 'blur', validator: checkContent
                    }
                ],
                rectifyTime: [
                    {
                        trigger: 'blur', validator: checkUpTime
                    }
                ],
                rectifySituation: [
                    {
                        trigger: 'blur', validator: checkCondition
                    }
                ],
                noremark: [
                    {
                        trigger: 'blur', validator: checkNote
                    }
                ],
                writPic: [{
                    trigger: 'blur', validator: checkWritPic
                }],
                rectifiedPic: [
                    {
                        trigger: 'blur', validator: checkRectPic
                    }
                ],
                originalPic: [
                    {
                        trigger: 'blur', validator: checkOrgPic
                    }
                ],
            },
            fileList: [],
            kindList: [
                {
                    label: '书籍1',
                    value: 1,
                },
                {
                    label: '书籍2',
                    value: 2,
                },
            ],
            basecase:""
        }
    },
    created() {
      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','mycode', 'writ', 'illegalType'],
    methods: {
        handleSuccess1(res, file, filelist) {
            const baseUrl = 'http://140.143.152.226:8410/';
            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/';
            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/';
            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/';
            if (this.book.otherPic.length < 4) {
                this.book.otherPic.push(baseUrl + res.data.url1)
            }
        },
        getToken() {
            const token = sessionStorage.getItem('token');
            const tokenHead = sessionStorage.getItem('tokenHead');
            if (token && tokenHead) {
                return { Authorization: tokenHead + token }
            }
        },
       
            // 设置上传成功之后的图片地址
            writPic({ url }) {
            const baseUrl = 'http://140.143.152.226:8410/';
            if (this.book.originalPic.length < 4) {
                this.book.writPic.push(baseUrl + url)
            }
        },
        //删除图片
        delWritPic({url}){
            const baseUrl = 'http://140.143.152.226:8410/';
            this.book.writPic.splice(this.book.writPic.indexOf(baseUrl + url),1);
        },

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

        // 获取文书种类
        async getBookType(){
            let arr 
            arr = await getCodeList('15');
            this.kindList = arr;
        }
    },
    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>
<style lang="scss" scoped>
.book-title{
.book-title {
    line-height: 60px;
    font-weight: 650;
    font-size: 20px;
@@ -81,6 +389,57 @@
    text-align: right;
    color: #4b9bb7;
}

.book-item {
    display: flex;
    width: 100%;
}

.upload {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    background-color: #fbfdff;
    border-radius: 4px;
}

.upImg {
    display: flex;

    .tip {
        position: absolute;
        bottom: 0;
        right: 0;
    }

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

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

        .img {
            height: 60px;
            position: relative;
            margin-right: 10px;
        }

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

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