304 lines
8.4 KiB
Vue
304 lines
8.4 KiB
Vue
<template>
|
||
<view>
|
||
<view class="topTab">
|
||
<tabHeader title="设备领用"></tabHeader>
|
||
</view>
|
||
|
||
<view class="visitor-info">
|
||
<u--form class="visitor-form" :model="visitorInfo" :rules="rules" ref="vForm" :errorType="errorType">
|
||
<view class="visitor-input-box mb-40">
|
||
<text>领用班组</text><text style="color: red;">*</text>
|
||
<u-form-item prop='temporaryName' style="width:100%;height: 100%;" >
|
||
<u--input
|
||
v-model="visitorInfo.temporaryName"
|
||
type="text" placeholder="选择选项"
|
||
maxlength="15" border="surround"
|
||
clearable></u--input>
|
||
</u-form-item>
|
||
</view>
|
||
<view class="visitor-input-box mb-40">
|
||
<text>班组长</text><text style="color: red;">*</text>
|
||
<u-form-item prop='userPhone' style="width:100%;height: 100%;" >
|
||
<u--input
|
||
v-model="visitorInfo.userPhone"
|
||
type="number" placeholder="请输入班组长"
|
||
maxlength="11" border="surround"
|
||
clearable></u--input>
|
||
</u-form-item>
|
||
</view>
|
||
<view class="visitor-input-box mb-40">
|
||
<text>所属工程</text><text style="color: red;">*</text>
|
||
<u-form-item prop='userUnit' style="width:100%;height: 100%;" >
|
||
<u--input
|
||
v-model="visitorInfo.userUnit"
|
||
type="text" placeholder="选择选项"
|
||
maxlength="20" border="surround"
|
||
clearable></u--input>
|
||
</u-form-item>
|
||
</view>
|
||
<view class="visitor-input-box mb-40">
|
||
<text>作业杆塔编号</text><text style="color: red;">*</text>
|
||
<u-form-item prop='userName' style="width:100%;height: 100%;" >
|
||
<u--input
|
||
v-model="visitorInfo.userName"
|
||
type="text" placeholder="选择选项"
|
||
maxlength="15" border="surround"
|
||
clearable></u--input>
|
||
</u-form-item>
|
||
</view>
|
||
<view class="visitor-input-box mb-40">
|
||
<text>领用设备类型</text><text style="color: red;">*</text>
|
||
<u-form-item prop='IntervieweeDepartment' style="width:100%;height: 100%;" >
|
||
<u--input
|
||
v-model="visitorInfo.IntervieweeDepartment"
|
||
type="text" placeholder="选择选项"
|
||
maxlength="15" border="surround"
|
||
clearable></u--input>
|
||
</u-form-item>
|
||
</view>
|
||
<view class="visitor-input-box mb-40">
|
||
<text>领用设备编码</text><text style="color: red;">*</text>
|
||
<u-form-item prop='IntervieweeDepartment' style="width:100%;height: 100%;" >
|
||
<u--input
|
||
v-model="visitorInfo.IntervieweeDepartment"
|
||
type="text" placeholder="选择选项"
|
||
maxlength="15" border="surround"
|
||
clearable></u--input>
|
||
</u-form-item>
|
||
</view>
|
||
|
||
|
||
<!-- <view class="visitor-input-box mb-40 ">
|
||
<text>人脸照片</text><text style="color: red;">*</text>
|
||
<u-form-item prop='imageUrl' style="width:100%;height: 100%;">
|
||
<view class="flex" style="margin-top: 20rpx;">
|
||
<img :src="chosenImg" style="width: 120rpx;height: 120rpx; margin-right: 20rpx;" alt="" v-show="chosenImg!=''">
|
||
<u-avatar src="../../static/chosenImg.png" size="120" shape="square" v-show="chosenImg==''"
|
||
@click="chooseTheImg()"></u-avatar>
|
||
<u-avatar src="../../static/rechosenImg.png" size="120" shape="square" v-show="chosenImg!=''"
|
||
@click="chooseTheImg()"></u-avatar>
|
||
</view>
|
||
</u-form-item>
|
||
</view> -->
|
||
|
||
|
||
|
||
<view class="submit-box">
|
||
<u-button type="primary" shape="circle" class="submit-btn" @click="formSubmit">确 定</u-button>
|
||
</view>
|
||
</u--form>
|
||
</view>
|
||
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { addVisitor } from '@/service/url.js';
|
||
import tabHeader from '@/components/tab-Header.vue';
|
||
import AES from "@/utils/cryptoJs/aes.js";
|
||
import CONFIG from '@/service/config.js'
|
||
export default {
|
||
components: {
|
||
tabHeader
|
||
},
|
||
data() {
|
||
return {
|
||
dateValue: Number(new Date()),
|
||
errorType: 'message',
|
||
visitorInfo: {
|
||
temporaryName:'',
|
||
userPhone: '',
|
||
userUnit: '',
|
||
userName: '',
|
||
IntervieweeDepartment: '',
|
||
temporaryTime: '',
|
||
reason: '',
|
||
remarks:'',
|
||
imageUrl:'',
|
||
|
||
},
|
||
chosenImg:'',
|
||
rules: {
|
||
temporaryName: [{required: true,
|
||
message: '选择选项',
|
||
trigger: ['blur','change']
|
||
}],
|
||
userPhone: [{
|
||
required: true,
|
||
message: '请输入班组长',
|
||
trigger: ['blur','change']
|
||
},
|
||
// // 正则判断为数字
|
||
// {
|
||
// pattern: /^[0-9]*$/g,
|
||
// // 正则检验前先将值转为字符串
|
||
// transform(value) {
|
||
// return String(value);
|
||
// },
|
||
// message: '手机号是11位数字',
|
||
// trigger: 'blur'
|
||
// },
|
||
// // 字符判断
|
||
// {
|
||
// min: 11,
|
||
// max: 11,
|
||
// message: '手机号是11位数字',
|
||
// trigger: 'blur'
|
||
// }
|
||
],
|
||
userUnit: [{required: true,
|
||
message: '选择选项',
|
||
trigger: ['blur','change']
|
||
}],
|
||
userName: [{required: true,
|
||
message: '选择选项',
|
||
trigger: ['blur','change']
|
||
}],
|
||
// IntervieweeDepartment: [{required: true,
|
||
// message: '请输入被访人部门',
|
||
// trigger: ['blur','change']
|
||
// }],
|
||
temporaryTime: [{required: true,
|
||
message: '选择选项',
|
||
trigger: ['blur','change']
|
||
}],
|
||
reason: [{required: true,
|
||
message: '选择选项',
|
||
trigger: ['blur','change']
|
||
}],
|
||
imageUrl: [{required: true,
|
||
message: '选择选项',
|
||
trigger: ['blur','change']
|
||
}],
|
||
|
||
},
|
||
};
|
||
},
|
||
onLoad(option) {
|
||
console.log(option)
|
||
this.visitorInfo.userPhone = ''
|
||
this.visitorInfo.userPhone = option.phone;
|
||
},
|
||
methods: {
|
||
// 隐藏键盘
|
||
hideKeyboard() {
|
||
uni.hideKeyboard()
|
||
},
|
||
// //选择图片
|
||
// chooseTheImg() {
|
||
// uni.chooseImage({
|
||
// count: 1, //图片可选择数量
|
||
// sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有
|
||
// sourceType: ['album', 'camera',], //album 从相册选图，camera 使用相机，默认二者都有。
|
||
// success: res => {
|
||
// console.log(res)
|
||
// let imgFiles = res.tempFilePaths //图片的本地文件路径列表
|
||
// console.log('本地地址', imgFiles)
|
||
// this.chosenImg = imgFiles[0]
|
||
// this.uploadTheImg(imgFiles)
|
||
// }
|
||
// })
|
||
// },
|
||
// //上传图片
|
||
// uploadTheImg(imgFiles) {
|
||
// uni.uploadFile({
|
||
// url: CONFIG.TEST_URL+'/zhly_web_back/system/visitor/uploadFile', //后端用于处理图片并返回图片地址的接口
|
||
// filePath: imgFiles[0],
|
||
// name: 'file',
|
||
// success: res => {
|
||
// console.log(res)
|
||
// let data = JSON.parse(res.data) //返回的是字符串，需要转成对象格式，打印data如下图
|
||
// if (data.code == 200) {
|
||
// this.visitorInfo.imageUrl = data.data;
|
||
// console.log(this.visitorInfo.imageUrl)
|
||
// }else{
|
||
// uni.$u.toast('上传失败，'+data.msg)
|
||
// }
|
||
// },
|
||
// fail: () => {}
|
||
// })
|
||
// },
|
||
|
||
formSubmit() {
|
||
this.$refs.vForm.validate().then(res => {
|
||
|
||
uni.$u.toast('校验通过')
|
||
|
||
console.log(this.visitorInfo)
|
||
let option = {
|
||
contentType:'upload',
|
||
header:{
|
||
Authorization:'',
|
||
}
|
||
}
|
||
this.$http.postForm(addVisitor,this.visitorInfo,false,option).then(res => {
|
||
if (res) {
|
||
console.log(res)
|
||
if(res.code == 200){
|
||
console.log(res.data)
|
||
uni.$u.toast('提交成功')
|
||
uni.navigateTo ({
|
||
url: '/pages/visitor/visitor?phone='+this.visitorInfo.userPhone
|
||
})
|
||
}else{
|
||
uni.$u.toast('提交失败')
|
||
}
|
||
}
|
||
}).catch(error => {
|
||
console.log(error)
|
||
// this.$utils.showHttpError(error)
|
||
})
|
||
|
||
|
||
// uni.reLaunch ({
|
||
// url: '/pages/index/index'
|
||
// })
|
||
|
||
// uni.hideHomeButton();
|
||
}).catch(errors => {
|
||
console.log(errors)
|
||
uni.$u.toast('校验失败')
|
||
})
|
||
// return false
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.mb-40{
|
||
margin-bottom: 40rpx;
|
||
}
|
||
.flex{
|
||
display: flex;
|
||
}
|
||
.visitor-info{
|
||
width: 100%;
|
||
height: 80vh;
|
||
position: absolute;
|
||
top:15vh;
|
||
padding: 40rpx 0;
|
||
}
|
||
.visitor-form{
|
||
width: auto;
|
||
padding: 0 30rpx;
|
||
}
|
||
.visitor-input-box{
|
||
|
||
}
|
||
.submit-box {
|
||
margin-top: 86rpx;
|
||
margin-bottom: 80rpx;
|
||
.submit-btn {
|
||
width: 95%;
|
||
margin: 0 auto;
|
||
height: 66rpx;
|
||
font-size: 26rpx;
|
||
background: linear-gradient( 90deg, #5193FE 0%, #00EEF0 100%);
|
||
box-shadow: 0px 4px 2px 0px rgba(81,147,254,0.15);
|
||
border-radius: 32rpx;
|
||
}
|
||
}
|
||
</style>
|