<template>
|
<view class="">
|
<u-form labelPosition="left" :model="info" :rules="rules" ref="form" labelWidth="100"
|
:labelStyle="{fontSize:'30rpx'}">
|
<view class="content bgc-ff mb-20">
|
<view class="">
|
|
<view class="form-caption flex j-c-s-b a-i-c">
|
<text class="f-32 fw">当事人1信息</text>
|
<!-- #ifdef MP-WEIXIN -->
|
<ocr-navigator @onSuccess="recognizeSuccess($event,'one')" certificateType="idCard"
|
:opposite="false">
|
<view class="recognize-btn flex a-i-c">
|
<u-icon name="scan" color="#fff" size="24"></u-icon>
|
<text class="f-26 c-ff" style="margin-left: 10rpx;">身份证信息识别</text>
|
</view>
|
</ocr-navigator>
|
<!-- #endif -->
|
</view>
|
<u-form-item label="姓名" prop="nameOne" borderBottom required>
|
<u-input v-model="info.nameOne" border="none" placeholder="请输入当事人1姓名"
|
placeholderClass="f-28 c-99" inputAlign="right"></u-input>
|
</u-form-item>
|
<u-form-item label="手机号" prop="phoneOne" borderBottom required>
|
<u-input v-model="info.phoneOne" type="number" border="none" placeholder="请输入当事人1手机号"
|
placeholderClass="f-28 c-99" inputAlign="right"></u-input>
|
</u-form-item>
|
<u-form-item label="性别" prop="genderOne" borderBottom @click="showGenderPicker = true">
|
<u-input v-model="genderValue" border="none" placeholder="请选择当事人1性别"
|
placeholderClass="f-28 c-99" inputAlign="right" disabled disabledColor="#ffffff"></u-input>
|
<u-icon slot="right" name="arrow-right"></u-icon>
|
</u-form-item>
|
<u-form-item label="身份证号码" prop="idCardOne" borderBottom required>
|
<u-input v-model="info.idCardOne" type="idcard" border="none" placeholder="请输入当事人1身份证号码"
|
placeholderClass="f-28 c-99" inputAlign="right"></u-input>
|
</u-form-item>
|
|
</view>
|
|
<view class="">
|
<view class="form-caption flex j-c-s-b a-i-c">
|
<text class="f-32 fw">当事人2信息</text>
|
<!-- #ifdef MP-WEIXIN -->
|
<ocr-navigator @onSuccess="recognizeSuccess($event,'two')" certificateType="idCard"
|
:opposite="false">
|
<view class="recognize-btn flex a-i-c">
|
<u-icon name="scan" color="#fff" size="24"></u-icon>
|
<text class="f-26 c-ff" style="margin-left: 10rpx;">身份证信息识别</text>
|
</view>
|
</ocr-navigator>
|
<!-- #endif -->
|
</view>
|
|
<u-form-item label="姓名" prop="nameTwo" borderBottom required>
|
<u-input v-model="info.nameTwo" border="none" placeholder="请输入当事人2姓名"
|
placeholderClass="f-28 c-99" inputAlign="right"></u-input>
|
</u-form-item>
|
<u-form-item label="性别" prop="genderTwo" borderBottom @click="showGender2Picker = true">
|
<u-input v-model="genderValue2" border="none" placeholder="请选择当事人2性别"
|
placeholderClass="f-28 c-99" inputAlign="right" disabled disabledColor="#ffffff"></u-input>
|
<u-icon slot="right" name="arrow-right"></u-icon>
|
</u-form-item>
|
<u-form-item label="手机号" prop="phoneTwo" borderBottom ref="phoneTwo" required>
|
<u-input v-model="info.phoneTwo" type="number" border="none" placeholder="请输入当事人2手机号"
|
placeholderClass="f-28 c-99" inputAlign="right"></u-input>
|
</u-form-item>
|
<u-form-item label="身份证号码" prop="idCardTwo" required>
|
<u-input v-model="info.idCardTwo" type="idcard" border="none" placeholder="请输入当事人2身份证号码"
|
placeholderClass="f-28 c-99" inputAlign="right"></u-input>
|
</u-form-item>
|
</view>
|
</view>
|
|
<view class="content bgc-ff">
|
<u-form-item label="事发时间" prop="eventTime" required @click="showSelectDate = true">
|
<u-input v-model="info.eventTime" disabled disabledColor="#ffffff" border="none"
|
placeholder="请选择事发时间" placeholderClass="f-28 c-99" inputAlign="right"></u-input>
|
<u-icon slot="right" name="arrow-right"></u-icon>
|
</u-form-item>
|
<u-form-item label="事发位置" prop="address" borderBottom required>
|
<view class="address-row flex">
|
<view class="address-content f-28" v-if="info.address">
|
{{info.address}}
|
</view>
|
<view class="address-content f-28" style="color:#c0c4cc;" v-if="!info.address">
|
请选择事发位置
|
</view>
|
<view class="location-btn c-main f-24" @click="getLocation()">
|
获取地址
|
</view>
|
</view>
|
</u-form-item>
|
<u-form-item label="报警次数" prop="alarmNum" borderBottom ref="alarmNum" required>
|
<u-input v-model="info.alarmNum" border="none" type="number" placeholder="请输入报警次数"
|
placeholderClass="f-28 c-99" inputAlign="right"></u-input>
|
</u-form-item>
|
<u-form-item label="信息来源" prop="source" borderBottom @click="showSourcePicker = true" required>
|
<u-input v-model="sourceValue" border="none" placeholder="请选择信息来源" placeholderClass="f-28 c-99"
|
inputAlign="right" disabled disabledColor="#ffffff"></u-input>
|
<u-icon slot="right" name="arrow-right"></u-icon>
|
</u-form-item>
|
|
<u-form-item label="纠纷类型" prop="disputeType" borderBottom @click="showDisputeTypePicker = true"
|
required>
|
<u-input v-model="disputeTypeValue" border="none" placeholder="请选择处理情况" placeholderClass="f-28 c-99"
|
inputAlign="right" disabled disabledColor="#ffffff"></u-input>
|
<u-icon slot="right" name="arrow-right"></u-icon>
|
</u-form-item>
|
<u-form-item label="纠纷内容" prop="disputeContent" borderBottom ref="disputeContent" required>
|
<u-textarea v-model="info.disputeContent" border="none" placeholder="请输入纠纷内容"
|
placeholderClass="f-28 c-99" inputAlign="right"></u-textarea>
|
</u-form-item>
|
<u-form-item label="是否有人员受伤:" labelWidth="100" prop="injuryFlag" borderBottom required>
|
<u-radio-group v-model="info.injuryFlag">
|
<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in statusList" :key="index"
|
:label="item.name" :name="item.id">
|
</u-radio>
|
</u-radio-group>
|
</u-form-item>
|
<u-form-item v-if="info.injuryFlag == 1" label="受伤情况" prop="injuryDesc" borderBottom>
|
<u-textarea v-model="info.injuryDesc" border="none" placeholder="请输入受伤情况"
|
placeholderClass="f-28 c-99" inputAlign="right"></u-textarea>
|
</u-form-item>
|
<u-form-item label="处理情况" prop="handleResult" @click="showHandleResultPicker = true" required>
|
<u-input v-model="handleResultValue" border="none" placeholder="请选择处理情况"
|
placeholderClass="f-28 c-99" inputAlign="right" disabled disabledColor="#ffffff"></u-input>
|
<u-icon slot="right" name="arrow-right"></u-icon>
|
</u-form-item>
|
</view>
|
</u-form>
|
<view class="blank"></view>
|
|
<!-- <button class="submit-btn" @click="sumitInfo">提交</button> -->
|
<!-- <button class="list-btn" @click="navigatorPage">纠纷记录</button> -->
|
|
<footer-btn @click="sumitInfo" />
|
|
<u-picker :show="showGenderPicker" :defaultIndex="genderIndex" ref="uPicker" keyName="name"
|
:loading="pickerLoading" :columns="[genderList]" @confirm="confirmGender"
|
@cancel="showGenderPicker = false"></u-picker>
|
<u-picker :show="showGender2Picker" :defaultIndex="genderIndex2" ref="uPicker" keyName="name"
|
:loading="pickerLoading" :columns="[genderList]" @confirm="confirmGender2"
|
@cancel="showGender2Picker = false"></u-picker>
|
|
<u-picker :show="showDisputeTypePicker" :defaultIndex="disputeTypeIndex" ref="uPicker" keyName="name"
|
:loading="pickerLoading" :columns="[disputeTypeList]" @confirm="confirmDisputeType"
|
@cancel="showDisputeTypePicker = false"></u-picker>
|
|
<u-picker :show="showHandleResultPicker" :defaultIndex="handleResultIndex" ref="uPicker" keyName="name"
|
:loading="pickerLoading" :columns="[handleResultList]" @confirm="confirmHandleResult"
|
@cancel="showHandleResultPicker = false"></u-picker>
|
|
<u-picker :show="showSourcePicker" :defaultIndex="sourceIndex" ref="uPicker" keyName="name"
|
:loading="pickerLoading" :columns="[sourceList]" @confirm="confirmSource"
|
@cancel="showSourcePicker = false"></u-picker>
|
|
<u-datetime-picker ref="datetimePicker" :show="showSelectDate" v-model="eventTime" mode="datetime"
|
:formatter="formatter" @confirm="confirmDate" @cancel="showSelectDate = false"></u-datetime-picker>
|
|
|
</view>
|
</template>
|
|
<script>
|
import uploadMixin from "@/mixin/uploadMixin";
|
import {
|
save
|
} from "@/api/task/taskReportForRepairs";
|
import {
|
bizDictionary,
|
} from '@/api/system/dict.js'
|
|
import {
|
addContradiction
|
} from '@/api/contradiction/contradiction.js'
|
|
export default {
|
mixins: [uploadMixin],
|
data() {
|
return {
|
info: {
|
nameOne: "",
|
nameTwo: "",
|
phoneOne: "",
|
phoneTwo: "",
|
genderOne: "",
|
genderTwo: "",
|
idCardOne: "",
|
idCardTwo: "",
|
injuryDesc: "",
|
injuryFlag: "",
|
source: "",
|
disputeContent: "",
|
alarmNum: "",
|
address: "",
|
lat: "",
|
lng: "",
|
eventTime: ""
|
},
|
rules: {
|
'nameOne': {
|
type: 'string',
|
required: true,
|
message: '请输入当事人1姓名',
|
trigger: ['blur', 'change']
|
},
|
'phoneOne': [{
|
type: 'string',
|
required: true,
|
message: '请输入当事人1手机号',
|
trigger: ['blur', 'change']
|
},
|
{
|
|
validator: (rule, value, callback) => {
|
return uni.$u.test.mobile(value);
|
},
|
message: '手机号码不正确',
|
trigger: ['change', 'blur']
|
|
}
|
],
|
"info.genderOne": {
|
type: 'string',
|
required: true,
|
message: '请选择当事人1性别',
|
trigger: ['blur', 'change']
|
},
|
|
idCardOne: [{
|
type: 'string',
|
required: true,
|
message: '请输入当事人1身份证号码',
|
trigger: ['change', 'blur']
|
},
|
{
|
validator: (rule, value, callback) => {
|
const idCardRegex =
|
/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
|
return idCardRegex.test(value)
|
},
|
message: '身份证号码有误',
|
trigger: ['change', 'blur']
|
}
|
],
|
'nameTwo': {
|
type: 'string',
|
required: true,
|
message: '请输入当事人2姓名',
|
trigger: ['blur', 'change']
|
},
|
'phoneTwo': [{
|
type: 'string',
|
required: true,
|
message: '请输入当事人2手机号',
|
trigger: ['blur', 'change']
|
},
|
{
|
validator: (rule, value, callback) => {
|
return uni.$u.test.mobile(value);
|
},
|
message: '手机号码不正确',
|
trigger: ['change', 'blur']
|
|
}
|
],
|
'info.genderTwo': {
|
type: 'number',
|
required: true,
|
message: '请选择当事人2性别',
|
trigger: ['blur', 'change']
|
},
|
idCardTwo: [{
|
type: 'string',
|
required: true,
|
message: '请输入当事人2身份证号码',
|
trigger: ['change', 'blur']
|
},
|
{
|
validator: (rule, value, callback) => {
|
const idCardRegex =
|
/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
|
return idCardRegex.test(value)
|
},
|
message: '身份证号码有误',
|
trigger: ['change', 'blur']
|
}
|
],
|
|
eventTime: [{
|
type: 'string',
|
required: true,
|
message: '请选择事发时间',
|
trigger: ['blur', 'change']
|
}],
|
address: [{
|
type: 'string',
|
required: true,
|
message: '请选择事发位置',
|
trigger: ['blur', 'change']
|
}],
|
source: [{
|
type: 'number',
|
required: true,
|
message: '请选择信息来源',
|
trigger: ['blur', 'change']
|
}],
|
alarmNum: [{
|
type: 'number',
|
required: true,
|
message: '请输入报警次数',
|
trigger: ['blur', 'change']
|
}],
|
disputeContent: [{
|
type: 'string',
|
required: true,
|
message: '请输入纠纷内容',
|
trigger: ['blur', 'change']
|
}],
|
// injuryFlag: [{
|
// type: 'number',
|
// required: true,
|
// message: '请选择是否有人员受伤',
|
// trigger: ['blur', 'change']
|
// }],
|
handleResult: [{
|
type: 'number',
|
required: true,
|
message: '请选择处置情况',
|
trigger: ['blur', 'change']
|
}]
|
},
|
desc: "",
|
title: "",
|
curSelectSite: {},
|
statusList: [{
|
name: "是",
|
id: 1
|
},
|
{
|
name: "否",
|
id: 0
|
}
|
],
|
handleResultList: [{
|
name: "已化解",
|
value: 1
|
},
|
{
|
name: "未化解 ",
|
value: 2
|
},
|
{
|
name: "移送e呼即办",
|
value: 3
|
}
|
],
|
genderList: [{ //性别
|
value: 1,
|
name: '男',
|
},
|
{
|
value: 2,
|
name: '女',
|
}
|
],
|
genderIndex: [0],
|
genderValue: "",
|
genderIndex2: [0],
|
genderValue2: "",
|
showGenderPicker: false,
|
showGender2Picker: false,
|
disputeTypeList: [],
|
disputeTypeValue: "",
|
disputeTypeIndex: [0],
|
showDisputeTypePicker: false,
|
handleResultValue: "",
|
handleResultIndex: [0],
|
showHandleResultPicker: false,
|
sourceList: [],
|
sourceIndex: [0],
|
sourceValue: "",
|
showSourcePicker: false,
|
showSelectDate: false,
|
eventTime: Number(new Date()),
|
}
|
},
|
onLoad(option) {
|
this.getAllBizDict();
|
|
},
|
|
onReady() {
|
//onReady 为uni-app支持的生命周期之一
|
this.$refs.form.setRules(this.rules)
|
},
|
|
// onShow() {
|
// this.curSelectSite = uni.getStorageSync('siteInfo')
|
// this.info.addressCode = this.curSelectSite.houseCode
|
// console.log(this.curSelectSite);
|
// },
|
methods: {
|
|
async getAllBizDict() {
|
// 获取纠纷
|
await this.getBizDict('disputeType', this.disputeTypeList)
|
// 获取来源
|
await this.getBizDict('disputeSource', this.sourceList);
|
},
|
|
// 获取业务字典
|
async getBizDict(code, list) {
|
const param = {
|
code: code
|
}
|
const res = await bizDictionary(param)
|
res.data.forEach(e => {
|
list.push({
|
name: e.dictValue,
|
value: Number(e.dictKey)
|
})
|
})
|
},
|
|
|
|
|
getLocation() {
|
uni.chooseLocation({
|
success: (res) => {
|
this.$set(this.info, "address", res.address);
|
this.$set(this.info, "lat", res.latitude);
|
this.$set(this.info, "lng", res.longitude)
|
}
|
})
|
},
|
|
|
sumitInfo() {
|
this.$refs.form.validate().then(valid => {
|
if (this.info.injuryFlag == 1 && !this.info.injuryDesc) {
|
this.$showTips("请输入受伤情况")
|
return
|
}
|
if (this.info.injuryFlag === 0 && this.info.injuryDesc) {
|
this.info.injuryDesc = "";
|
}
|
addContradiction(this.info).then(res => {
|
this.$showTips("提交成功", "success")
|
setTimeout(() => {
|
uni.navigateBack()
|
}, 300)
|
})
|
})
|
},
|
navigatorPage() {
|
let url = "/subPackage/bs/views/repairList" + "?title=" + this.title + "&type=" + this.info.type
|
this.$u.func.globalNavigator(url, "navTo")
|
},
|
|
|
//选择性别
|
confirmGender(e) {
|
this.genderIndex = e.indexs;
|
this.genderValue = e.value[0].name;
|
this.info.genderOne = e.value[0].value;
|
this.showGenderPicker = false;
|
},
|
|
//选择性别2
|
confirmGender2(e) {
|
this.genderIndex2 = e.indexs;
|
this.genderValue2 = e.value[0].name;
|
this.info.genderTwo = e.value[0].value;
|
this.showGender2Picker = false;
|
},
|
|
//选择纠纷类型
|
confirmDisputeType(e) {
|
this.disputeTypeIndex = e.indexs;
|
this.disputeTypeValue = e.value[0].name;
|
this.info.disputeType = e.value[0].value;
|
this.showDisputeTypePicker = false;
|
},
|
|
//选择处理结果
|
confirmHandleResult(e) {
|
this.handleResultIndex = e.indexs;
|
this.handleResultValue = e.value[0].name;
|
|
this.$set(this.info, "handleResult", e.value[0].value)
|
// this.info.handleResult = e.value[0].value;
|
this.showHandleResultPicker = false;
|
},
|
|
//选择处理结果
|
confirmSource(e) {
|
this.sourcetIndex = e.indexs;
|
this.sourceValue = e.value[0].name;
|
this.info.source = e.value[0].value;
|
this.showSourcePicker = false;
|
},
|
|
confirmDate(e) {
|
this.showSelectDate = false;
|
this.info.eventTime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss')
|
},
|
|
|
//识别成功
|
recognizeSuccess(e, key) {
|
let {
|
detail: {
|
name,
|
id,
|
address,
|
gender,
|
nationality
|
}
|
} = e;
|
|
if (key == "one") {
|
this.info.nameOne = name.text;
|
this.info.idCardOne = id.text;
|
this.genderValue = gender.text;
|
this.genderIndex = [this.getValue(this.genderList, gender.text).index];
|
this.info.genderOne = this.getValue(this.genderList, gender.text).value;
|
} else {
|
this.info.nameTwo = name.text;
|
this.info.idCardTwo = id.text;
|
this.genderValue2 = gender.text;
|
this.genderIndex2 = [this.getValue(this.genderList, gender.text).index];
|
this.info.genderTwo = this.getValue(this.genderList, gender.text).value;
|
}
|
},
|
|
getValue(arr, name) {
|
for (let i = 0, ii = arr.length; i < ii; i++) {
|
if (arr[i].name == name) {
|
return {
|
index: i,
|
value: arr[i].value
|
}
|
}
|
}
|
}
|
|
}
|
}
|
</script>
|
|
<style lang="less">
|
page {
|
background-color: #F5F5F5;
|
}
|
|
.content {
|
margin: 20rpx 30rpx;
|
padding: 0 30rpx;
|
}
|
|
.site-box {
|
padding: 30rpx;
|
margin: 20rpx 30rpx;
|
border-radius: 4rpx;
|
|
.c-aa {
|
color: #aaa;
|
}
|
|
.address {
|
width: 60%;
|
margin-left: 25rpx;
|
}
|
}
|
|
.upload-item {
|
width: 140rpx;
|
height: 140rpx;
|
border: 1px solid #EEEEEE;
|
}
|
|
.upload {
|
margin: 0 30rpx;
|
padding: 30rpx;
|
|
|
}
|
|
.submit-btn {
|
width: 690rpx;
|
height: 78rpx;
|
line-height: 78rpx;
|
background: linear-gradient(163deg, #01BDFC 0%, #017BFC 100%);
|
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
font-size: 32rpx;
|
color: #fff;
|
margin-top: 50rpx;
|
}
|
|
.list-btn {
|
width: 690rpx;
|
height: 78rpx;
|
line-height: 78rpx;
|
background: linear-gradient(163deg, #c7d7dc 0%, #c3cdd8 100%);
|
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
font-size: 32rpx;
|
color: #fff;
|
margin-top: 50rpx;
|
}
|
|
.address-row {
|
flex: 1;
|
justify-content: flex-end;
|
align-items: center;
|
}
|
|
.address-content {
|
width: calc(100% - 116rpx - 20rpx);
|
margin-right: 20rpx;
|
text-align: right;
|
}
|
|
.location-btn {
|
width: 116rpx;
|
height: 46rpx;
|
line-height: 46rpx;
|
border-radius: 4rpx;
|
border: 1px solid currentColor;
|
padding: 0;
|
background-color: #fff;
|
text-align: center;
|
}
|
|
.blank {
|
width: 100%;
|
height: 200rpx;
|
}
|
|
/deep/ .u-radio-group {
|
justify-content: flex-end;
|
}
|
|
/deep/ .u-textarea__field {
|
text-align: right;
|
}
|
|
.form-caption {
|
padding: 20rpx 0;
|
}
|
|
.recognize-btn {
|
padding: 12rpx;
|
border-radius: 6rpx;
|
background-color: #3c9cff;
|
margin-left: 30rpx;
|
}
|
</style>
|
