| | |
| | | <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> |
| | | <!-- 情况描述 --> |
| | |
| | | </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> |
| | |
| | | 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 |
| | |
| | | ], |
| | | }, |
| | | 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/'; |
| | |
| | | }, |
| | | // 打开当事人信息填写表 |
| | | 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; |
| | |
| | | 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; |