“dzb”
2022-11-04 4b0df650a1fe818218e7f8ac0c6ff8f0150371b6
src/views/operate/disposal/casepool/dispatch/updateUser/uploadResult/components/evidence/index.vue
@@ -3,14 +3,16 @@
        <div class="evidence-title">调查取证</div>
        <div class="evidence-form">
            <el-form ref="evidenceForm" label-width="160px" :model="evidence" :rules="evidenceRules" autoComplete="on">
                <!-- 承办队员 -->
                <el-form-item label="承办队员:" prop="undertaker">
                    <el-input v-model="evidence.undertaker" placeholder="请输入姓名"></el-input>
                </el-form-item>
                <!-- 协办队员 -->
                <el-form-item label="协办队员:" prop="assistant">
                    <el-input v-model="evidence.assistant" placeholder="请输入姓名"></el-input>
                </el-form-item>
                <div class="evidence-item">
                    <!-- 承办队员 -->
                    <el-form-item label="承办队员:" prop="undertaker">
                        <el-input v-model="evidence.undertaker" placeholder="请输入姓名"></el-input>
                    </el-form-item>
                    <!-- 协办队员 -->
                    <el-form-item label="协办队员:" label-width="100px" prop="assistant">
                        <el-input v-model="evidence.assistant" placeholder="请输入姓名"></el-input>
                    </el-form-item>
                </div>
                <!-- 时间 -->
                <el-form-item label="时间:" prop="investigationTime">
                    <el-date-picker v-model="evidence.investigationTime" type="datetime" placeholder="选择时间">
@@ -25,27 +27,31 @@
                    <el-input v-model="evidence.caseAction" placeholder="请输入案由"></el-input>
                </el-form-item>
                <!-- 当事人信息 -->
                <el-form-item label="当事人信息:" prop="userInfo">
                    <el-input suffix-icon="el-icon-s-order" @focus="openDialog"></el-input>
                <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-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>
                        v-model="evidence.description" placeholder="请输入处置结果,限制200字以内"></el-input>
                </el-form-item>
                <!-- 照片附件 -->
                <el-form-item label="照片附件:" prop="photo">
                <el-form-item label="照片附件:" prop="pic">
                    <div class="upImg">
                        <div class="img-list">
                            <img :src="item" alt="" v-for="(item,index) in evidence.pic" :key="index">
                        </div>
                        <div class="upload" v-if="evidence.pic.length<4">
                        <!-- <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> -->
                        <MyUpload  @setPictureUrl="setPicUrl" @delPictureUrl="delPicUrl"></MyUpload>
                        <!-- <div class="upload" v-if="evidence.pic.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="handleSuccess2" :headers="getToken()">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                        </div>
                        </div> -->
                        <div class="tip">{{evidence.pic.length}} / 4</div>
                    </div>
                </el-form-item>
@@ -60,11 +66,7 @@
                <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-input v-model="basecase"></el-input>
                    </el-form-item>
                    <!-- 姓名、手机号 -->
                    <div class="user-item">
@@ -81,8 +83,8 @@
                    <div class="user-item">
                        <el-form-item label="证件类型:" prop="certificateType">
                            <el-select v-model="user.certificateType" placeholder="请选择">
                                <el-option v-for="item in cardOptions" :key="item.value" :label="item.label"
                                    :value="item.value">
                                <el-option v-for="item in cardOptions" :key="item.id" :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
@@ -95,8 +97,8 @@
                        <!-- 文化程度 -->
                        <el-form-item label="文化程度:" prop="educationDegree">
                            <el-select v-model="user.educationDegree" placeholder="请选择">
                                <el-option v-for="item in degreeOptions" :key="item.value" :label="item.label"
                                    :value="item.value">
                                <el-option v-for="item in degreeOptions" :key="item.id" :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
@@ -113,7 +115,13 @@
                    <div class="user-item">
                        <!-- 民族 -->
                        <el-form-item label="民族:" prop="nation">
                            <el-input v-model="user.nation"></el-input>
                            <!-- <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">
@@ -138,7 +146,13 @@
    </div>
</template>
<script>
import { getTypeList } from '@/utils/helper'
import {validateName,validatePhone,validateCardId} from '@/utils/validate'
import MyUpload from "@/components/myUpload"
export default {
    components: {
        MyUpload
    },
    data() {
        const checkName = (rule, value, callback) => {
            if (value) {
@@ -183,10 +197,10 @@
            }
        }
        const checkPic = (rule, value, callback) => {
            if (value) {
            if (value.length !== 0) {
                callback()
            } else {
                callback();
                callback(new Error('请上传照片附件'));
            }
        }
        const checkIll = (rule, value, callback) => {
@@ -198,14 +212,14 @@
        }
        const checkName3 = (rule, value, callback) => {
            if (value) {
                callback()
                validateName(value) ? callback() : callback(new Error('请输入正确的姓名'))
            } else {
                callback(new Error('当事人姓名不能为空'));
            }
        }
        const checkPhone = (rule, value, callback) => {
            if (value) {
                callback()
                validatePhone(value) ? callback() : callback(new Error('请输入正确的手机号码'))
            } else {
                callback(new Error('手机号码不能为空'));
            }
@@ -219,7 +233,7 @@
        }
        const checkCode = (rule, value, callback) => {
            if (value) {
                callback()
                validateCardId(value) ? callback() : callback(new Error('请输入正确的证件号码'))
            } else {
                callback(new Error('证件号码不能为空'));
            }
@@ -231,20 +245,20 @@
                callback(new Error('文化程度不能为空'));
            }
        }
        const checkCareer = (rule, value, callback) => {
            if (value) {
                callback()
            } else {
                callback(new Error('职业不能为空'));
            }
        }
        const checkWork = (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()
@@ -252,13 +266,13 @@
                callback(new Error('民族不能为空'));
            }
        }
        const checkNaP = (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()
@@ -266,13 +280,13 @@
                callback(new Error('现住址不能为空'));
            }
        }
        const checkRegAdd = (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();
@@ -283,7 +297,7 @@
        return {
            evidence: {
                pic: [],
                userInfo: false,
                userInfo: '',
            },
            evidenceRules: {
                userInfo: [
@@ -330,7 +344,7 @@
                illegalType: '',
                name: '',
                phoneCode: '',
                certificateType: '',
                certificateType: 703,
                certificateCode: '',
                educationDegree: '',
                career: '',
@@ -348,12 +362,12 @@
                ],
                name: [
                    {
                        trigger: 'blur', validator: checkName3
                        required:true,trigger: 'blur', validator: checkName3
                    }
                ],
                phoneCode: [
                    {
                        trigger: 'blur', validator: checkPhone
                        required:true,trigger: 'blur', validator: checkPhone
                    }
                ],
                certificateType: [
@@ -363,7 +377,7 @@
                ],
                certificateCode: [
                    {
                        trigger: 'blur', validator: checkCode
                        required:true,trigger: 'blur', validator: checkCode
                    }
                ],
                educationDegree: [
@@ -371,36 +385,36 @@
                        trigger: 'change', validator: checkWh
                    }
                ],
                career: [
                    {
                        trigger: 'blur', validator: checkCareer
                    }
                ],
                work: [
                    {
                        trigger: 'blur', validator: checkWork
                    }
                ],
                // career: [
                //     {
                //         trigger: 'blur', validator: checkCareer
                //     }
                // ],
                // work: [
                //     {
                //         trigger: 'blur', validator: checkWork
                //     }
                // ],
                nation: [
                    {
                        trigger: 'blur', validator: checkNation
                        trigger: 'change', validator: checkNation
                    }
                ],
                nativePlace: [
                    {
                        trigger: 'blur', validator: checkNaP
                    }
                ],
                // nativePlace: [
                //     {
                //         trigger: 'blur', validator: checkNaP
                //     }
                // ],
                liveAddress: [
                    {
                        trigger: 'blur', validator: checkLiveAdd
                        required:true,trigger: 'blur', validator: checkLiveAdd
                    }
                ],
                registerAddress: [
                    {
                        trigger: 'blur', validator: checkRegAdd
                    }
                ],
                // registerAddress: [
                //     {
                //         trigger: 'blur', validator: checkRegAdd
                //     }
                // ],
            },
            userFlag: false,
            typeOptions: [
@@ -413,6 +427,7 @@
                    value: 2
                }
            ],
            nationOptions: [],
            cardOptions: [
                {
                    label: '身份证',
@@ -423,28 +438,52 @@
                    value: 2
                }
            ],
            degreeOptions:[
            degreeOptions: [
                {
                    label:'小学',
                    value:1
                    label: '小学',
                    value: 1
                },
                {
                    label:'初中',
                    value:2
                    label: '初中',
                    value: 2
                },
                {
                    label:'高中',
                    value:3
                    label: '高中',
                    value: 3
                },
                {
                    label:'大学及以上',
                    value:4
                    label: '大学及以上',
                    value: 4
                },
            ]
            ],
            basecase:""
        }
    },
    props:['getEvidence'],
    created() {
        this.getCardTypeList();
        this.getSchoolList();
        this.getNationList();
        console.log(this.mytype);
        this.user.illegalType = JSON.parse(JSON.stringify(this.mytype));
        const {mycode}=this;
        this.getEventInfo(mycode)
    },
    methods: {
           // 获取案件信息
           async getEventInfo(mycode) {
            await this.$axios({
                method: 'get',
                url: `sccg/base_case/baseCaseDetail/${mycode}`
            })
                .then(res => {
                    if(this.mytype == 1){
                        this.basecase = res.data.baseCase.violations.typeText;
                    }else{
                        this.basecase = res.data.baseCase.illegalBuilding.categoryText;
                    }
                    console.log(this.basecase)
                })
        },
        handleSuccess2(res, file, filelist) {
            const baseUrl = 'http://140.143.152.226:8410/';
            console.log(res);
@@ -470,7 +509,7 @@
            this.$refs.userForm.validate((valid) => {
                console.log(valid);
                if (valid) {
                    this.evidence.userInfo = true;
                    this.evidence.userInfo = this.user.name;
                    this.userFlag = false;
                } else {
                    this.evidence.userInfo = false;
@@ -479,21 +518,70 @@
            })
        },
        // 关闭当事人信息界面
        closeUserForm(){
        closeUserForm() {
            this.userFlag = false;
        },
        // 返回当前evidence和user对象
        backData(){
            const {user,evidence} = this;
            this.$emit('getEvidence',{user,evidence});
        backData() {
            const { user, evidence } = this;
            this.$emit('getEvidence', { user, evidence });
        },
        // 删除图片
        handleRemove(index) {
            this.evidence.pic.splice(index, 1);
        },
        // 获取证件类型
        async getCardTypeList() {
            this.cardOptions = await getTypeList(1, '03');
        },
        // 获取学历
        async getSchoolList() {
            this.degreeOptions = await getTypeList(1, '04');
        },
        // 获取民族列表
        async getNationList() {
            this.nationOptions = await getTypeList(1, '05');
        },
         // 设置上传成功之后的图片地址
         setPicUrl({ url }) {
            const baseUrl = 'http://140.143.152.226:8410/';
            if (this.evidence.pic.length < 4) {
                this.evidence.pic.push(baseUrl + url)
            }
            console.log(url);
        },
        //删除图片
        delPicUrl({url}){
            const baseUrl = 'http://140.143.152.226:8410/';
            console.log(url);
            this.evidence.pic.splice(this.evidence.pic.indexOf(baseUrl + url),1);
            console.log(this.evidence.pic);
        }
    }
    },
    watch: {
        'evidence.pic.length': {
            handler(newLen, oldLen) {
                if (newLen !== 0) {
                    this.$refs.evidenceForm.validate((valid) => {
                        if (valid) {
                        } else { return false }
                    })
                }
            },
            deep: true,
        }
    },
    props:['mytype','mycode']
}
</script>
<style lang="scss" scoped>
.evidence {
    line-height: 60px;
    position: relative;
    .evidence-item{
        display: flex;
    }
    .evidence-title {
        line-height: 60px;
        font-weight: 650;
@@ -515,12 +603,25 @@
    }
    .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;
        }
    }
}
@@ -535,12 +636,14 @@
    background-color: #fbfdff;
    border-radius: 4px;
}
.user-form{
.user-form {
    position: absolute;
    top: 0;
    z-index: 3000;
    background-color: #06122c;
    .user-form-header{
    .user-form-header {
        background-color: #fff;
        color: #4b9bb7;
        display: flex;
@@ -548,17 +651,32 @@
        align-items: center;
        padding: 0 20px;
    }
    padding-bottom: 60px;
}
.sp-user-info{
    ::v-deep .el-input{
        width: 200px;
    }
}
.user-form-content {
    padding-top:20px;
    padding-top: 20px;
    .user-item {
        display: flex;
        justify-content: flex-start;
        .el-input {
            flex: 1;
        }
        .el-select {
            flex: 1;
            :deep(.el-input__inner){
                padding: 0px 15px;
            }
        }
    }
    ::v-deep .el-textarea__inner {