“dzb”
2022-10-04 797cc9c1a5c90f413d46c5cb88e1ee5e3a84b071
src/views/operate/disposal/casepool/dispatch/updateUser/uploadResult/components/evidence/index.vue
@@ -25,7 +25,7 @@
                    <el-input v-model="evidence.caseAction" placeholder="请输入案由"></el-input>
                </el-form-item>
                <!-- 当事人信息 -->
                <el-form-item label="当事人信息">
                <el-form-item label="当事人信息:" prop="userInfo">
                    <el-input suffix-icon="el-icon-s-order" @focus="openDialog"></el-input>
                </el-form-item>
                <!-- 情况描述 -->
@@ -51,11 +51,89 @@
                </el-form-item>
            </el-form>
        </div>
        <div class="user-form">
            <el-dialog :visible.sync="dialogUser" width="80%" title="调度信息" v-if="dialogUser" :before-close="handleClose"
                append-to-body>
                11111
            </el-dialog>
        <div class="user-form" v-show="userFlag">
            <div class="user-form-header">
                <span>调度信息</span>
                <i class="el-icon-close" @click="closeUserForm"></i>
            </div>
            <div class="user-form-content">
                <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-form-item>
                    <!-- 姓名、手机号 -->
                    <div class="user-item">
                        <!-- 姓名 -->
                        <el-form-item label="当事人姓名:" prop="name">
                            <el-input v-model="user.name"></el-input>
                        </el-form-item>
                        <!-- 手机号 -->
                        <el-form-item label="手机号码:" prop="phoneCode">
                            <el-input v-model="user.phoneCode"></el-input>
                        </el-form-item>
                    </div>
                    <!-- 证件 -->
                    <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>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="证件号码:" prop="certificateCode">
                            <el-input v-model="user.certificateCode"></el-input>
                        </el-form-item>
                    </div>
                    <!-- 文化程度\职业 -->
                    <div class="user-item">
                        <!-- 文化程度 -->
                        <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>
                            </el-select>
                        </el-form-item>
                        <!-- 职业 -->
                        <el-form-item label="职业:" prop="career">
                            <el-input v-model="user.career"></el-input>
                        </el-form-item>
                    </div>
                    <!-- 工作单位及职务 -->
                    <el-form-item label="工作单位及职务:" prop="work">
                        <el-input v-model="user.work"></el-input>
                    </el-form-item>
                    <!-- 民族\籍贯 -->
                    <div class="user-item">
                        <!-- 民族 -->
                        <el-form-item label="民族:" prop="nation">
                            <el-input v-model="user.nation"></el-input>
                        </el-form-item>
                        <!-- 籍贯 -->
                        <el-form-item label="籍贯:" prop="nativePlace">
                            <el-input v-model="user.nativePlace"></el-input>
                        </el-form-item>
                    </div>
                    <!-- 现住址 -->
                    <el-form-item label="现住址:" prop="liveAddress">
                        <el-input v-model="user.liveAddress"></el-input>
                    </el-form-item>
                    <!-- 户籍所在地 -->
                    <el-form-item label="户籍所在地:" prop="registerAddress">
                        <el-input v-model="user.registerAddress"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div class="user-form-footer">
                <el-button type="primary" @click="checkUser">确定</el-button>
                <el-button>返回</el-button>
            </div>
        </div>
    </div>
</template>
@@ -111,11 +189,106 @@
                callback();
            }
        }
        const checkIll = (rule, value, callback) => {
            if (value) {
                callback()
            } else {
                callback(new Error('案件类型不能为空'));
            }
        }
        const checkName3 = (rule, value, callback) => {
            if (value) {
                callback()
            } else {
                callback(new Error('当事人姓名不能为空'));
            }
        }
        const checkPhone = (rule, value, callback) => {
            if (value) {
                callback()
            } else {
                callback(new Error('手机号码不能为空'));
            }
        }
        const checkCard = (rule, value, callback) => {
            if (value) {
                callback()
            } else {
                callback(new Error('证件类型不能为空'));
            }
        }
        const checkCode = (rule, value, callback) => {
            if (value) {
                callback()
            } else {
                callback(new Error('证件号码不能为空'));
            }
        }
        const checkWh = (rule, value, callback) => {
            if (value) {
                callback()
            } else {
                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 checkNation = (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()
            } else {
                callback(new Error('现住址不能为空'));
            }
        }
        const checkRegAdd = (rule, value, callback) => {
            if (value) {
                callback()
            } else {
                callback(new Error('户籍所在地不能为空'));
            }
        }
        const checkFlag = (rule, value, callback) => {
            if (value) {
                callback();
            } else {
                callback(new Error('用户信息不能为空'))
            }
        }
        return {
            evidence: {
                pic: []
                pic: [],
                userInfo: false,
            },
            evidenceRules: {
                userInfo: [
                    { trigger: 'change', validator: checkFlag }
                ],
                undertaker: [
                    {
                        trigger: 'blur', validator: checkName
@@ -153,10 +326,124 @@
                ],
            },
            fileList: [],
            user: {},
            dialogUser: false,
            user: {
                illegalType: '',
                name: '',
                phoneCode: '',
                certificateType: '',
                certificateCode: '',
                educationDegree: '',
                career: '',
                work: '',
                nation: '',
                nativePlace: '',
                liveAddress: '',
                registerAddress: '',
            },
            userRules: {
                illegalType: [
                    {
                        trigger: 'change', validator: checkIll,
                    }
                ],
                name: [
                    {
                        trigger: 'blur', validator: checkName3
                    }
                ],
                phoneCode: [
                    {
                        trigger: 'blur', validator: checkPhone
                    }
                ],
                certificateType: [
                    {
                        trigger: 'change', validator: checkCard
                    }
                ],
                certificateCode: [
                    {
                        trigger: 'blur', validator: checkCode
                    }
                ],
                educationDegree: [
                    {
                        trigger: 'change', validator: checkWh
                    }
                ],
                career: [
                    {
                        trigger: 'blur', validator: checkCareer
                    }
                ],
                work: [
                    {
                        trigger: 'blur', validator: checkWork
                    }
                ],
                nation: [
                    {
                        trigger: 'blur', validator: checkNation
                    }
                ],
                nativePlace: [
                    {
                        trigger: 'blur', validator: checkNaP
                    }
                ],
                liveAddress: [
                    {
                        trigger: 'blur', validator: checkLiveAdd
                    }
                ],
                registerAddress: [
                    {
                        trigger: 'blur', validator: checkRegAdd
                    }
                ],
            },
            userFlag: false,
            typeOptions: [
                {
                    label: '违法',
                    value: 1,
                },
                {
                    label: '违建',
                    value: 2
                }
            ],
            cardOptions: [
                {
                    label: '身份证',
                    value: 1,
                },
                {
                    label: '其他',
                    value: 2
                }
            ],
            degreeOptions:[
                {
                    label:'小学',
                    value:1
                },
                {
                    label:'初中',
                    value:2
                },
                {
                    label:'高中',
                    value:3
                },
                {
                    label:'大学及以上',
                    value:4
                },
            ]
        }
    },
    props:['getEvidence'],
    methods: {
        handleSuccess2(res, file, filelist) {
            const baseUrl = 'http://140.143.152.226:8410/';
@@ -174,24 +461,39 @@
        },
        // 打开当事人信息填写表
        openDialog(e) {
            this.dialogUser = true
            this.userFlag = true;
            this.userInfo = true;
        },
        // 关闭当事人信息
        handleClose(done) {
            this.$confirm('确认关闭?')
                .then(_ => {
                    this.dialogUser = false;
                    done();
                })
                .catch(_ => { });
        // 检验user
        checkUser() {
            // console.log(this.$refs.userForm.validate);
            this.$refs.userForm.validate((valid) => {
                console.log(valid);
                if (valid) {
                    this.evidence.userInfo = true;
                    this.userFlag = false;
                } else {
                    this.evidence.userInfo = false;
                    return false;
                }
            })
        },
        // 关闭当事人信息界面
        closeUserForm(){
            this.userFlag = false;
        },
        // 返回当前evidence和user对象
        backData(){
            const {user,evidence} = this;
            this.$emit('getEvidence',{user,evidence});
        }
    }
}
</script>
<style lang="scss" scoped>
.evidence {
    line-height: 60px;
    position: relative;
    .evidence-title {
        line-height: 60px;
        font-weight: 650;
@@ -233,6 +535,55 @@
    background-color: #fbfdff;
    border-radius: 4px;
}
.user-form{
    position: absolute;
    top: 0;
    z-index: 3000;
    background-color: #06122c;
    .user-form-header{
        background-color: #fff;
        color: #4b9bb7;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20px;
    }
    padding-bottom: 60px;
}
.user-form-content {
    padding-top:20px;
    .user-item {
        display: flex;
        .el-input {
            flex: 1;
        }
    }
    ::v-deep .el-textarea__inner {
        background-color: #09152f;
        border: 1px solid #17324c;
    }
    ::v-deep .el-input__count {
        background-color: #09152f;
    }
    ::v-deep .el-form-item__label {
        color: #4b9bb7;
    }
    ::v-deep .el-input__inner {
        background-color: #09152f;
        border: 1px solid #17324c;
    }
}
.user-form-footer {
    display: flex;
    justify-content: flex-end;
}
::v-deep .el-textarea__inner {
    background-color: #09152f;