412 lines
13 KiB
HTML
412 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>外来车辆登记</title>
|
|
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
|
|
<link rel="stylesheet" type="text/css" href="../../assets/css/vant.css" />
|
|
<script src="../../assets/js/axios.min.js"></script>
|
|
<script src="../../assets/js/moment.js"></script>
|
|
<!-- vue -->
|
|
<script src="../../../bi/js/vue.js"></script>
|
|
<!--全局配置-->
|
|
<script src="../../../config.js"></script>
|
|
<script src="../../assets/js/vant.min.js"></script>
|
|
<script type="text/javascript" src="../../../bi/js/jquery-3.7.1.min.js"></script>
|
|
<style>
|
|
.wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="app" style="padding: 50px 20px 0 20px;">
|
|
<van-form @submit="confirm" validate-trigger="onSubmit" colon label-width="90px">
|
|
<van-field
|
|
required
|
|
v-model="form.SOURCE_UNIT"
|
|
label="单位名称"
|
|
placeholder="单位名称"
|
|
:rules="[{ required: true, message: '请输入单位名称' }]"
|
|
></van-field>
|
|
<van-field
|
|
required
|
|
readonly
|
|
clickable
|
|
:value="form.MODEL_NAME"
|
|
label="车型"
|
|
placeholder="车型"
|
|
@click="modelShowPicker = true"
|
|
:rules="[{ required: true, message: '请选择车型' }]"
|
|
></van-field>
|
|
<van-popup v-model="modelShowPicker" position="bottom">
|
|
<van-picker
|
|
value-key="NAME"
|
|
show-toolbar
|
|
:columns="modelList"
|
|
@confirm="modelConfirm"
|
|
@cancel="modelShowPicker = false"
|
|
></van-picker>
|
|
</van-popup>
|
|
<van-field
|
|
required
|
|
v-model="form.LICENSE_PLATE"
|
|
label="车牌"
|
|
placeholder="车牌"
|
|
:rules="[{ required: true, message: '请输入车牌' }]"
|
|
></van-field>
|
|
<van-field
|
|
required
|
|
v-model="form.COMING_REASON"
|
|
label="来港事由"
|
|
placeholder="来港事由"
|
|
:rules="[{ required: true, message: '请输入来港事由' }]"
|
|
></van-field>
|
|
<van-field
|
|
required
|
|
readonly
|
|
clickable
|
|
:value="form.STARTTIME"
|
|
label="开始申请用时"
|
|
placeholder="开始申请用时"
|
|
@click="startTimeShowPicker = true"
|
|
:rules="[{ required: true, message: '请选择开始申请用时' }]"
|
|
></van-field>
|
|
<van-popup v-model="startTimeShowPicker" position="bottom">
|
|
<van-datetime-picker
|
|
:min-date="new Date()"
|
|
@confirm="startTimeConfirm"
|
|
@cancel="startTimeShowPicker = false"
|
|
></van-datetime-picker>
|
|
</van-popup>
|
|
<van-field
|
|
required
|
|
readonly
|
|
clickable
|
|
:value="form.ENDTIME"
|
|
label="结束申请用时"
|
|
placeholder="结束申请用时"
|
|
@click="endTimeShowPicker = true"
|
|
:rules="[{ required: true, message: '请选择结束申请用时' }]"
|
|
></van-field>
|
|
<van-popup v-model="endTimeShowPicker" position="bottom">
|
|
<van-datetime-picker
|
|
:min-date="new Date()"
|
|
@confirm="endTimeConfirm"
|
|
@cancel="endTimeShowPicker = false"
|
|
></van-datetime-picker>
|
|
</van-popup>
|
|
<!--<van-field
|
|
required
|
|
type="digit"
|
|
v-model="form.NUMBER_PEOPLE_CAR"
|
|
label="车内人员数"
|
|
placeholder="请输入车内人员数"
|
|
:rules="[{ required: true, message: '请输入车内人员数' }]"
|
|
></van-field>-->
|
|
<van-field name="form.driverImageList" required label="驾驶证照片">
|
|
<template #input>
|
|
<van-uploader
|
|
required
|
|
:max-count="1"
|
|
label="驾驶证照片"
|
|
v-model="form.driverImageList"
|
|
capture="capture"
|
|
:after-read="afterReadDriver"
|
|
:before-delete = "deleteDriver"
|
|
></van-uploader>
|
|
</template>
|
|
</van-field>
|
|
<van-field name="form.drivingImageList" required label="行驶证照片">
|
|
<template #input>
|
|
<van-uploader
|
|
required
|
|
:max-count="1"
|
|
label="行驶证照片"
|
|
v-model="form.drivingImageList"
|
|
capture="capture"
|
|
:after-read="afterReadDriving"
|
|
:before-delete = "deleteDriving"
|
|
></van-uploader>
|
|
</template>
|
|
</van-field>
|
|
<div v-for="(item,index) in form.other" :key="item.id">
|
|
<van-field
|
|
required
|
|
v-model="item.NAME"
|
|
label="姓名"
|
|
placeholder="请输入姓名"
|
|
:rules="[{ required: true, message: '请输入姓名' }]"
|
|
></van-field>
|
|
<van-field
|
|
required
|
|
v-model="item.PHONO_NUMBER"
|
|
type="digit"
|
|
label="手机号"
|
|
placeholder="请输入手机号"
|
|
maxlength="11"
|
|
:rules="[{ required: true, message: '请输入手机号' },
|
|
{ min: 11, max: 11, message: '请输入11位手机号码' },
|
|
{
|
|
pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
|
|
message: '请输入正确的手机号码'
|
|
}]"
|
|
></van-field>
|
|
<div v-if="index === 0" style="margin: 16px;">
|
|
<van-button round block type="primary" size="small" native-type="button" @click="addOther">添加成员</van-button>
|
|
</div>
|
|
<div v-if="index !== 0" style="margin: 16px;">
|
|
<van-button round block type="danger" size="small" native-type="button" @click="removeOther(index)">删除</van-button>
|
|
</div>
|
|
</div>
|
|
<van-field
|
|
required
|
|
readonly
|
|
clickable
|
|
:value="form.EXAMINE_DEPARTMENT_NAME"
|
|
label="审核部门"
|
|
placeholder="审核部门"
|
|
@click="departmentShowPicker = true"
|
|
:rules="[{ required: true, message: '请选择审核部门' }]"
|
|
></van-field>
|
|
<van-popup v-model="departmentShowPicker" position="bottom">
|
|
<van-picker
|
|
value-key="NAME"
|
|
show-toolbar
|
|
:columns="examineDeptList"
|
|
@confirm="departmentConfirm"
|
|
@cancel="departmentShowPicker = false"
|
|
></van-picker>
|
|
</van-popup>
|
|
<div style="margin: 16px;">
|
|
<van-button round block type="info" native-type="submit">提交</van-button>
|
|
</div>
|
|
</van-form>
|
|
<van-overlay :show="loading">
|
|
<div class="wrapper">
|
|
<van-loading color="#0094ff" size="24px" vertical>数据提交中...</van-loading>
|
|
</div>
|
|
</van-overlay>
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
var vm = new Vue({
|
|
el: '#app',
|
|
data: {
|
|
config: config,
|
|
loading: false,
|
|
CORPINFO_ID: "",
|
|
modelList: [],
|
|
examineDeptList: [],
|
|
form: {
|
|
FOREIGNCAR_ID: '',
|
|
SOURCE_UNIT: '',
|
|
LICENSE_PLATE: '',
|
|
APPLICATION_TIME: '',
|
|
MODEL: '',
|
|
MODEL_NAME: '',
|
|
COMING_REASON: '',
|
|
NUMBER_PEOPLE_CAR: '',
|
|
driverImageList: [],
|
|
drivingImageList: [],
|
|
other: [{ 'NAME': '', 'PHONO_NUMBER': '',id:Math.random() }],
|
|
STATE: '',
|
|
REJECTOPINION: '',
|
|
EXAMINE_DEPARTMENT_ID: '',
|
|
EXAMINE_DEPARTMENT_NAME: '',
|
|
STARTTIME: '',
|
|
ENDTIME: '',
|
|
},
|
|
modelShowPicker:false,
|
|
startTimeShowPicker:false,
|
|
endTimeShowPicker:false,
|
|
departmentShowPicker:false,
|
|
},
|
|
created() {
|
|
this.init();
|
|
this.getModelList()
|
|
this.getDeptList()
|
|
},
|
|
mounted() {
|
|
this.init();
|
|
},
|
|
methods: {
|
|
//初始执行
|
|
init() {
|
|
this.CORPINFO_ID = this.getUrlKey('CORPINFO_ID');
|
|
},
|
|
afterReadDriver(file) {
|
|
console.info(this.form.driverImageList)
|
|
},
|
|
deleteDriver(file, detail) {
|
|
this.$dialog.confirm({
|
|
title: '移除确认',
|
|
message: '确定要移除驾驶证照片吗',
|
|
})
|
|
.then(() => {
|
|
this.form.driverImageList.splice(detail.index, 1)
|
|
})
|
|
.catch(() => {
|
|
// on cancel
|
|
});
|
|
},
|
|
afterReadDriving(file) {
|
|
console.info(this.form.drivingImageList)
|
|
},
|
|
deleteDriving(file, detail) {
|
|
this.$dialog.confirm({
|
|
title: '移除确认',
|
|
message: '确定要移除行驶证照片吗',
|
|
})
|
|
.then(() => {
|
|
this.form.drivingImageList.splice(detail.index, 1)
|
|
})
|
|
.catch(() => {
|
|
// on cancel
|
|
});
|
|
},
|
|
// 动态--验收部门 添加
|
|
addOther() {
|
|
var o = { 'NAME': '', 'PHONO_NUMBER': '',id:Math.random() }
|
|
this.form.other.push(o)
|
|
},
|
|
// 动态--验收部门 删除
|
|
removeOther: function(index) {
|
|
this.form.other.splice(index, 1)
|
|
},
|
|
// 保存
|
|
confirm() {
|
|
if(moment(this.form.STARTTIME).valueOf() > moment(this.form.ENDTIME).valueOf()){
|
|
this.$toast.fail('结束用时不能晚于开始用时');
|
|
return false
|
|
}
|
|
if (moment(this.form.STARTTIME).diff(moment(this.form.ENDTIME), 'minute') < -1440) {
|
|
this.$toast.fail('申请用时不能超过24小时');
|
|
return false
|
|
}
|
|
var fileList = []
|
|
this.form.driverImageList.forEach(item => {
|
|
var file = {}
|
|
file.TYPE = 22
|
|
file.FILEPATH = item.content
|
|
fileList.push(file)
|
|
})
|
|
this.form.drivingImageList.forEach(item => {
|
|
var file = {}
|
|
file.TYPE = 23
|
|
file.FILEPATH = item.content
|
|
fileList.push(file)
|
|
})
|
|
var _this = this
|
|
this.loading = true
|
|
$.ajax({
|
|
xhrFields: {
|
|
withCredentials: true
|
|
},
|
|
type: "POST",
|
|
url: this.config.httpurlWaiwang+ 'depttoexamine/scanadd',
|
|
dataType: 'json',
|
|
data: {
|
|
SOURCE_UNIT: this.form.SOURCE_UNIT,
|
|
MODEL: this.form.MODEL,
|
|
LICENSE_PLATE:this.form.LICENSE_PLATE,
|
|
APPLICATION_TIME: this.form.STARTTIME+','+this.form.ENDTIME,
|
|
STARTTIME: this.form.STARTTIME,
|
|
ENDTIME: this.form.ENDTIME,
|
|
COMING_REASON: this.form.COMING_REASON,
|
|
PERSONJSON: JSON.stringify(this.form.other),
|
|
NUMBER_PEOPLE_CAR:this.form.other.length,
|
|
EXAMINE_DEPARTMENT_ID:this.form.EXAMINE_DEPARTMENT_ID,
|
|
CORPINFO_ID: this.CORPINFO_ID
|
|
},
|
|
success: function(data) {
|
|
if (data.result === 'success'){
|
|
_this.form.FOREIGNCAR_ID = data.pd.FOREIGNCAR_ID
|
|
var i = 0;
|
|
_this.uploadImg(fileList, i)
|
|
} else if(data.result === 'Error') {
|
|
alert("车牌号在黑名单中")
|
|
}
|
|
}
|
|
})
|
|
},
|
|
uploadImg(fileList, i) {
|
|
var _this = this
|
|
var fd = new FormData()
|
|
// fd.append('FILEPATH',fileList[i].FILEPATH)
|
|
fd.append('FFILE',this.dataURLtoFile(fileList[i].FILEPATH, 'apply_image'+i))
|
|
fd.append('TYPE',fileList[i].TYPE)
|
|
fd.append('FOREIGN_KEY',this.form.FOREIGNCAR_ID)
|
|
fd.append('CORPINFO_ID',this.CORPINFO_ID)
|
|
axios.post(this.config.httpurlWaiwang+'/app/imgfiles/add', fd).then((data) => {
|
|
if (i < (fileList.length - 1)) {
|
|
i++
|
|
_this.uploadImg(fileList, i)
|
|
} else {
|
|
window.location.href = './success.html'
|
|
}
|
|
}).catch((e) => {
|
|
console.info(e)
|
|
})
|
|
},
|
|
dataURLtoFile(dataurl, filename) {
|
|
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
|
|
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
|
|
while(n--){
|
|
u8arr[n] = bstr.charCodeAt(n);
|
|
}
|
|
return new File([u8arr], filename+'.'+mime.substr(mime.indexOf('/')+1), {type:mime});
|
|
},
|
|
getModelList() {
|
|
var fd = new FormData()
|
|
fd.append('DICTIONARIES_ID','c1d7ddc73eea4219952f28814d33b845')
|
|
axios.post(this.config.httpurlWaiwang+'/dictionaries/getLevels', fd).then((data) => {
|
|
this.modelList = data.data.list
|
|
}).catch((e) => {
|
|
console.info(e)
|
|
})
|
|
},
|
|
getDeptList() {
|
|
var fd = new FormData()
|
|
fd.append('FIELD_ITEM','IS_TO_EXAMINE')
|
|
fd.append('CORPINFO_ID',this.CORPINFO_ID)
|
|
axios.post(this.config.httpurlWaiwang+'/app/sys/listForDoor', fd).then((data) => {
|
|
this.examineDeptList = data.data.list
|
|
console.info(data)
|
|
console.info(this.examineDeptList)
|
|
}).catch((e) => {
|
|
console.info(e)
|
|
})
|
|
},
|
|
//根据url参数名称获取参数值
|
|
getUrlKey: function (name) {
|
|
return decodeURIComponent(
|
|
(new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ""])[1].replace(/\+/g, '%20')) || null;
|
|
},
|
|
modelConfirm(e){
|
|
this.form.MODEL = e.BIANMA
|
|
this.form.MODEL_NAME = e.NAME
|
|
this.modelShowPicker = false
|
|
},
|
|
startTimeConfirm(e){
|
|
this.form.STARTTIME = moment(e).format('YYYY-MM-DD HH:mm')
|
|
this.startTimeShowPicker = false
|
|
},
|
|
endTimeConfirm(e){
|
|
this.form.ENDTIME = moment(e).format('YYYY-MM-DD HH:mm')
|
|
this.endTimeShowPicker = false
|
|
},
|
|
departmentConfirm(e){
|
|
this.form.EXAMINE_DEPARTMENT_ID = e.DEPARTMENT_ID
|
|
this.form.EXAMINE_DEPARTMENT_NAME = e.NAME
|
|
this.departmentShowPicker = false
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
</body>
|
|
</html>
|