| | |
| | | <div class="input-form"> |
| | | <el-form ref="user" label-width="160px" autoComplete="on" :model="ill" :rules="createillRules" |
| | | label-position="right"> |
| | | <!-- 问题类型 |
| | | <el-form-item class="optionItem" label="问题类型:" prop="category"> |
| | | <el-select v-model="ill.type" placeholder="违建"> |
| | | <el-option v-for="item in typeList" :key="item.name" :label="item.name" :value="item.value" |
| | | :disabled="item.disabled"> |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> --> |
| | | <!-- 违建类别 --> |
| | | <el-form-item class="optionItems" label="违建类别:" prop="categoryId"> |
| | | <el-select v-model="ill.categoryId" placeholder="请选择违建类别" size="small"> |
| | | <el-option v-for="item in bigKindList" :key="item.id" :label="item.name" :value="item.id" |
| | | :disabled="item.disabled"> |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <div class="user-item"> |
| | | <!-- 问题类型 --> |
| | | <el-form-item class="optionItem" label="问题类型:" prop="category"> |
| | | <el-select v-model="ill.type" placeholder="违建" disabled> |
| | | <el-option v-for="item in typeList" :key="item.name" :label="item.name" |
| | | :value="item.value" :disabled="item.disabled"> |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <!-- 违建类别 --> |
| | | <el-form-item class="optionItems" label="违建类别:" prop="categoryId"> |
| | | <el-select v-model="ill.categoryId" placeholder="请选择违建类别" size="small"> |
| | | <el-option v-for="item in bigKindList" :key="item.id" :label="item.name" |
| | | :value="item.id" :disabled="item.disabled"> |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | </div> |
| | | <!-- 当事人姓名 --> |
| | | <el-form-item class="optionItems" label="当事人姓名:" prop="partyName"> |
| | | <el-input placeholder="请填写当事人姓名" v-model="ill.partyName"></el-input> |
| | | </el-form-item> |
| | | <!-- 当事人身份证号 --> |
| | | <el-form-item class="optionItems" label="当事人身份证号:" prop="partyIdCard"> |
| | | <el-input placeholder="请填写当事人身份证号" v-model="ill.partyIdCard"></el-input> |
| | | <el-input placeholder="请填写当事人身份证号" maxlength="18" v-model="ill.partyIdCard"></el-input> |
| | | </el-form-item> |
| | | <!-- 当事人联系电话 --> |
| | | <el-form-item class="optionItem" label="当事人联系电话:" prop="partyPhone"> |
| | | <el-input v-model="ill.partyPhone" placeholder="请填写当事人联系电话"></el-input> |
| | | <el-input v-model="ill.partyPhone" maxlength="11" placeholder="请填写当事人联系电话"></el-input> |
| | | </el-form-item> |
| | | <!-- 违建地点 --> |
| | | <el-form-item class="optionItems" label="违建地点:" prop="site"> |
| | | <el-input placeholder="请填写违建地点" v-model="ill.site"></el-input> |
| | | </el-form-item> |
| | | <!-- 所属社区 --> |
| | | <el-form-item class="optionItems" label="所属社区:" prop="communityId"> |
| | | <el-select v-model="ill.communityId" placeholder="请选择所属社区"> |
| | | <el-option v-for="item in typeList" :key="item.name" :label="item.name" :value="item.value"> |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <div class="user-item"> |
| | | <!-- 违建地点 --> |
| | | <el-form-item class="optionItems" label="违建地点:" prop="site"> |
| | | <el-input placeholder="请填写违建地点" v-model="ill.site"></el-input> |
| | | </el-form-item> |
| | | <!-- 所属社区 --> |
| | | <el-form-item class="optionItems" label="所属社区:" prop="communityId"> |
| | | <el-select v-model="ill.communityId" placeholder="请选择所属社区"> |
| | | <el-option v-for="item in typeList" :key="item.name" :label="item.name" |
| | | :value="item.value"> |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | </div> |
| | | <!-- 身份证正反面照片 --> |
| | | <el-form-item class="optionItems" label="身份证正反面照片:" prop="positive"> |
| | | <template> |
| | |
| | | <el-form-item class="optionItems" label="违建具体位置:" prop="position"> |
| | | <el-input placeholder="请填写违建具体位置" v-model="ill.position"></el-input> |
| | | </el-form-item> |
| | | <el-form-item class="optionItems" label="违法建设长、宽、高:" prop="buildingLength"> |
| | | <div class="area"> |
| | | <div class="area"> |
| | | <el-form-item class="optionItems" label="违法建设长、宽、高:" prop="buildingLength"> |
| | | <el-input placeholder="单位米" v-model="ill.buildingLength"></el-input> |
| | | </el-form-item> |
| | | <el-form-item class="optionItems" label-width='0px' prop="buildingWidth"> |
| | | <el-input placeholder="单位米" v-model="ill.buildingWidth"></el-input> |
| | | </el-form-item> |
| | | <el-form-item class="optionItems" label-width='0px' prop="buildingHigh"> |
| | | <el-input placeholder="单位米" v-model="ill.buildingHigh"></el-input> |
| | | </div> |
| | | </el-form-item> |
| | | </el-form-item> |
| | | </div> |
| | | <el-form-item class="optionItems" label="违法建设面积:" prop="buildingArea"> |
| | | <el-input placeholder="请填写违法建设面积" v-model="ill.buildingArea"></el-input> |
| | | </el-form-item> |
| | |
| | | </div> |
| | | <div class="input-footer"> |
| | | <el-button type="primary" class="confirm" @click="handleUser">确定</el-button> |
| | | <el-button class="back">返回</el-button> |
| | | <el-button class="back" @click="handleBack">返回</el-button> |
| | | </div> |
| | | </div> |
| | | <div class="map-area"> |
| | |
| | | </template> |
| | | <script> |
| | | import MyMap from '@/components/map' |
| | | import { validateName, validatePhone, validateCardId, validateNum } from '@/utils/validate' |
| | | export default { |
| | | components: { |
| | | MyMap |
| | |
| | | data() { |
| | | const checkArea = (rule, value, callback) => { |
| | | if (value) { |
| | | callback(); |
| | | validateNum(value) ? callback() : callback(new Error('请输入正确的违法建设面积')) |
| | | } else { |
| | | callback(new Error('违法建设面积不能为空')) |
| | | } |
| | | } |
| | | const checkHigh = (rule, value, callback) => { |
| | | if (value) { |
| | | callback(); |
| | | validateNum(value) ? callback() : callback(new Error('请输入正确的违法建设高度')) |
| | | } else { |
| | | callback(new Error('违法建设高度不能为空')); |
| | | |
| | |
| | | } |
| | | const checkWidth = (rule, value, callback) => { |
| | | if (value) { |
| | | callback(); |
| | | validateNum(value) ? callback() : callback(new Error('请输入正确的违法建设宽度')) |
| | | } else { |
| | | callback(new Error('违法建设宽度不能为空')); |
| | | |
| | |
| | | } |
| | | const checkLength = (rule, value, callback) => { |
| | | if (value) { |
| | | callback(); |
| | | validateNum(value) ? callback() : callback(new Error('请输入正确的违法建设长度')) |
| | | } else { |
| | | callback(new Error('违法建设长度不能为空')); |
| | | |
| | |
| | | } |
| | | const checkIdCard = (rule, value, callback) => { |
| | | if (value) { |
| | | callback(); |
| | | validateCardId(value) ? callback() : callback(new Error('请输入正确的身份证号码')) |
| | | } else { |
| | | callback(new Error('当事人身份证号码不能为空')); |
| | | } |
| | | } |
| | | const checkName = (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('当事人联系电话不能为空')); |
| | | } |
| | |
| | | } |
| | | return { |
| | | ill: { |
| | | buildingArea: 2.0, |
| | | buildingHigh: 2.0, |
| | | buildingLength: 2.0, |
| | | buildingWidth: 1.0, |
| | | buildingArea: '', |
| | | buildingHigh: '', |
| | | buildingLength: '', |
| | | buildingWidth: '', |
| | | // category: '', |
| | | categoryId: '', |
| | | communityId: '', |
| | | materials: "钢筋", |
| | | partyIdCard: "511025184612310213", |
| | | partyName: "单数大", |
| | | partyPhone: "17844631885", |
| | | position: "新地方新低点", |
| | | materials: "", |
| | | partyIdCard: "", |
| | | partyName: "", |
| | | partyPhone: "", |
| | | position: "", |
| | | positive: "", |
| | | negative: "", |
| | | site: "新地方", |
| | | site: "", |
| | | alarmTime: '', |
| | | }, |
| | | createillRules: { |
| | | buildingArea: [ |
| | | { |
| | | required: true, trigger: 'change', validator: checkArea |
| | | required: true, trigger: 'blur', validator: checkArea |
| | | } |
| | | ], |
| | | buildingHigh: [ |
| | |
| | | } |
| | | }, |
| | | created() { |
| | | const { getBigKind } = this; |
| | | const { getBigKind, getCommityList } = this; |
| | | // this.ill.category = this.mytype + 1; |
| | | getBigKind(); |
| | | getCommityList(); |
| | | }, |
| | | methods: { |
| | | handleUser() { |
| | |
| | | } |
| | | }) |
| | | }, |
| | | handleStop() { |
| | | this.refresh(); |
| | | }, |
| | | // 获取大类列表 |
| | | getBigKind() { |
| | | this.$axios({ |
| | |
| | | // console.log(res); |
| | | }) |
| | | }, |
| | | // 获取行政区域 |
| | | // 获取token |
| | | getToken() { |
| | | const token = sessionStorage.getItem('token'); |
| | |
| | | const baseUrl = 'http://140.143.152.226:8410/'; |
| | | console.log(res); |
| | | this.ill.negative = baseUrl + res.data.url1; |
| | | }, |
| | | // 查询社区 |
| | | getCommityList() { |
| | | this.$axios({ |
| | | method: 'get', |
| | | url: 'sccg/dict/query_type?level=1&typeCode=' + '10' |
| | | }) |
| | | .then(res => { |
| | | console.log(res); |
| | | }) |
| | | }, |
| | | handleBack(){ |
| | | this.$emit('changeDialog', { flag: false }); |
| | | } |
| | | }, |
| | | props: ['mytype', 'changeDialog','refresh'] |
| | | watch: { |
| | | 'ill.buildingLength': { |
| | | handler(newVal, oldVal) { |
| | | if (newVal) { |
| | | this.ill.buildingWidth !== '' && validateNum(newVal) && validateNum(this.ill.buildingWidth) ? this.ill.buildingArea = newVal * this.ill.buildingWidth : ''; |
| | | } |
| | | }, |
| | | deep: true, |
| | | }, |
| | | 'ill.buildingWidth': { |
| | | handler(newVal, oldVal) { |
| | | if (newVal) { |
| | | this.ill.buildingLength !== '' && validateNum(newVal) && validateNum(this.ill.buildingLength) ? this.ill.buildingArea = newVal * this.ill.buildingLength : ''; |
| | | } |
| | | }, |
| | | deep: true, |
| | | } |
| | | }, |
| | | props: ['mytype', 'changeDialog', 'refresh'] |
| | | } |
| | | </script> |
| | | <style lang="scss" scoped> |
| | |
| | | display: flex; |
| | | padding: 20px 50px; |
| | | |
| | | .user-item { |
| | | display: flex; |
| | | } |
| | | |
| | | .input-area { |
| | | flex: 1; |
| | | flex: 3; |
| | | padding: 10px 20px; |
| | | |
| | | .input-header { |
| | |
| | | line-height: 40px; |
| | | } |
| | | } |
| | | .el-form { |
| | | &::v-deep .el-form-item__label { |
| | | color: #4b9bb7; |
| | | } |
| | | |
| | | &::v-deep .el-input__inner { |
| | | background-color: #09152f; |
| | | border: 1px solid #17324c; |
| | | } |
| | | |
| | | &::v-deep .el-textarea__inner { |
| | | background-color: #09152f; |
| | | border: 1px solid #17324c; |
| | | } |
| | | } |
| | | .input-form { |
| | | |
| | | &::v-deep .el-input__inner { |
| | | background-color: #09152f; |
| | | border: 1px solid #17324c; |
| | | } |
| | | |
| | | &::v-deep .el-textarea__inner { |
| | | background-color: #09152f; |
| | | border: 1px solid #17324c; |
| | | } |
| | | |
| | | |
| | | .upload-demo { |
| | | position: relative; |
| | | |
| | |
| | | } |
| | | |
| | | .map-area { |
| | | flex: 1; |
| | | flex: 2; |
| | | } |
| | | } |
| | | </style> |