436 lines
12 KiB
Vue
436 lines
12 KiB
Vue
<template>
|
||
<view>
|
||
<view class="topTab">
|
||
<tabHeader title="设备领用"></tabHeader>
|
||
</view>
|
||
|
||
<view class="visitor-info">
|
||
<u--form class="visitor-form" :model="formData" :rules="rules" ref="vForm" :errorType="errorType">
|
||
<view class="visitor-input-box mb-40">
|
||
<text>领用班组</text><text style="color: red;">*</text>
|
||
<u-form-item prop='teamId' style="width:100%;height: 100%;">
|
||
<searchSelect readonly
|
||
v-model="formData.teamId" :localdata="teamList" @change="changeTeam"
|
||
dataKey="teamName" dataValue="teamId" placeholder="请选择领用班组"
|
||
clearable="true" :filterable="true" ></searchSelect>
|
||
</u-form-item>
|
||
</view>
|
||
<view class="visitor-input-box mb-40">
|
||
<text>班组长</text><text style="color: red;">*</text>
|
||
<u-form-item prop='teamLeader' style="width:100%;height: 100%;" >
|
||
<u--input
|
||
v-model="formData.teamLeader" disabled
|
||
type="text" 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='proName' style="width:100%;height: 100%;">
|
||
<u--input
|
||
v-model="formData.proName" disabled
|
||
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='powerId' style="width:100%;height: 100%;" @click="hideKeyboard">
|
||
<searchSelect
|
||
v-model="formData.powerId" :localdata="powerList"
|
||
dataKey="name" dataValue="id" placeholder="请选择作业杆塔"
|
||
clearable="true" :filterable="true" ></searchSelect>
|
||
</u-form-item>
|
||
</view>
|
||
<view class="visitor-input-box mb-40">
|
||
<text>领用设备类型</text><text style="color: red;">*</text>
|
||
<u-form-item prop='devType' style="width:100%;height: 100%;" >
|
||
<searchSelect
|
||
v-model="formData.devType" :localdata="devTypeList" @change="changeType"
|
||
dataKey="name" dataValue="id" placeholder="请选择领用设备类型"
|
||
clearable="true" :filterable="true" ></searchSelect>
|
||
</u-form-item>
|
||
</view>
|
||
<view class="visitor-input-box mb-40">
|
||
<text>领用设备编码</text><text style="color: red;">*</text>
|
||
<u-form-item prop='devId' style="width:100%;height: 100%;" >
|
||
<searchSelect
|
||
v-model="formData.devId" :localdata="devList" @change="changeDev"
|
||
dataKey="devCode" dataValue="devId" placeholder="请选择领用设备"
|
||
clearable="true" :filterable="true" ></searchSelect>
|
||
<image src="@/static/img/scan.png" mode="" style="width: 50rpx;height: 50rpx;margin-left:40rpx;margin-right: 20rpx;" @click="scanDev"></image>
|
||
</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;">
|
||
<image :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 { getTeamLists,getPowerLists,getDicts,getUseDevices,addEquipmentReq } from '@/service/url.js';
|
||
import tabHeader from '@/components/tab-Header.vue';
|
||
import searchSelect from '@/components/search-select.vue';
|
||
import AES from "@/utils/cryptoJs/aes.js";
|
||
import CONFIG from '@/service/config.js'
|
||
export default {
|
||
components: {
|
||
tabHeader,searchSelect
|
||
},
|
||
data() {
|
||
return {
|
||
teamList:[],//班组下拉数据
|
||
powerList:[],//杆塔下拉数据
|
||
devTypeList:[],//设备类型下拉数据
|
||
devList:[],//设备下拉数据
|
||
dateValue: Number(new Date()),
|
||
errorType: 'message',
|
||
formData: {
|
||
teamId:null,
|
||
teamLeader: '',
|
||
proName: '',
|
||
proId: '',
|
||
powerId: '',
|
||
devName: '',
|
||
devCode:'',
|
||
devType:'',
|
||
devId: null,
|
||
},
|
||
chosenImg:'',
|
||
rules: {
|
||
teamId: [{required: true,
|
||
type: 'number',
|
||
message: '请选择领用班组',
|
||
trigger: ['blur','change']
|
||
}],
|
||
teamLeader: [{
|
||
required: true,
|
||
message: '班组班组长',
|
||
trigger: ['blur','change']
|
||
}],
|
||
proName: [{required: true,
|
||
message: '班组所属工程',
|
||
trigger: ['blur','change']
|
||
}],
|
||
powerId: [{required: true,
|
||
type: 'number',
|
||
message: '请选择作业杆塔',
|
||
trigger: ['blur','change']
|
||
}],
|
||
devType: [{required: true,
|
||
message: '请选择领用设备类型',
|
||
trigger: ['blur','change']
|
||
}],
|
||
devId: [{required: true,
|
||
type: 'number',
|
||
message: '请选择领用设备',
|
||
trigger: ['change']
|
||
}]
|
||
},
|
||
};
|
||
},
|
||
onLoad(option) {
|
||
// console.log(option)
|
||
this.getTeamLists()
|
||
this.getDicts()
|
||
},
|
||
methods: {
|
||
// 隐藏键盘
|
||
hideKeyboard() {
|
||
uni.hideKeyboard()
|
||
},
|
||
//班组下拉数据
|
||
getTeamLists(){
|
||
let obj = {}
|
||
let param = {
|
||
// encryptedData: AES.encrypt(JSON.stringify(obj))
|
||
encryptedData: JSON.stringify(obj)
|
||
}
|
||
this.$http.get(getTeamLists,obj).then(res => {
|
||
if (res) {
|
||
if(res.code == 200){
|
||
this.teamList=res.data;
|
||
}
|
||
}
|
||
}).catch(error => {
|
||
console.log(error)
|
||
// this.$utils.showHttpError(error)
|
||
})
|
||
},
|
||
//选择班组
|
||
changeTeam(e){
|
||
// console.log(e)
|
||
this.formData.teamId = e.teamId;
|
||
this.formData.teamLeader=e.teamLeader;
|
||
this.formData.proId=e.proId;
|
||
this.formData.proName=e.proName;
|
||
this.$refs.vForm.clearValidate()
|
||
this.getPowerLists(e.proId)
|
||
},
|
||
//获取杆塔下拉
|
||
getPowerLists(proId){
|
||
let obj = {
|
||
"proId":proId
|
||
}
|
||
let param = {
|
||
// encryptedData: AES.encrypt(JSON.stringify(obj))
|
||
encryptedData: JSON.stringify(obj)
|
||
}
|
||
// console.log(obj)
|
||
this.$http.get(getPowerLists,obj).then(res => {
|
||
if (res) {
|
||
if(res.code == 200){
|
||
this.powerList=res.data
|
||
}
|
||
}
|
||
}).catch(error => {console.log(error)})
|
||
},
|
||
//获取设备类型
|
||
getDicts(){
|
||
let obj = {
|
||
"id":"sys_device_type",//设备类型
|
||
}
|
||
let param = {
|
||
// encryptedData: AES.encrypt(JSON.stringify(obj))
|
||
encryptedData: JSON.stringify(obj)
|
||
}
|
||
// console.log(obj)
|
||
this.$http.get(getDicts,obj).then(res => {
|
||
if (res) {
|
||
// console.log(res)
|
||
if(res.code == 200){
|
||
this.devTypeList=res.data
|
||
}
|
||
}
|
||
}).catch(error => {
|
||
console.log(error)
|
||
// this.$utils.showHttpError(error)
|
||
})
|
||
},
|
||
//选择设备类型
|
||
changeType(e){
|
||
// console.log(e)
|
||
let obj = {
|
||
"devType":e.id,//设备类型
|
||
}
|
||
let param = {
|
||
// encryptedData: AES.encrypt(JSON.stringify(obj))
|
||
encryptedData: JSON.stringify(obj)
|
||
}
|
||
// console.log(obj)
|
||
this.$http.get(getUseDevices,obj).then(res => {
|
||
if (res) {
|
||
// console.log(res)
|
||
if(res.code == 200){
|
||
this.formData.devId=null;
|
||
this.devList=res.data;
|
||
}
|
||
}
|
||
}).catch(error => {
|
||
console.log(error)
|
||
// this.$utils.showHttpError(error)
|
||
})
|
||
|
||
},
|
||
//选择设备
|
||
changeDev(e){
|
||
this.formData.devId=e.devId;
|
||
this.formData.devName=e.devName;
|
||
this.formData.devCode=e.devCode;
|
||
},
|
||
scanDev(){
|
||
console.log("扫码")
|
||
if(this.formData.devType==""){
|
||
uni.showToast({
|
||
title: "请先选择领用设备类型",
|
||
icon: 'none'
|
||
});
|
||
}else{
|
||
if(this.devList.length>0){
|
||
uni.scanCode({
|
||
success: (res) => {
|
||
console.log('扫码结果：' + res.result);
|
||
var index=-1
|
||
this.devList.forEach((item,i)=>{
|
||
if(item.devCode==res.result){
|
||
this.formData.devId=item.devId;
|
||
this.formData.devName=item.devName;
|
||
this.formData.devCode=item.devCode;
|
||
this.$refs.vForm.clearValidate()
|
||
uni.showToast({
|
||
title: '扫码添加成功',
|
||
icon: 'none'
|
||
});
|
||
index=i;
|
||
}
|
||
})
|
||
if(index==-1){
|
||
uni.showToast({
|
||
title: '扫码设备不属于所选设备类型或已领用！',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
},
|
||
fail: (err) => {
|
||
console.error('扫码失败：' + err);
|
||
uni.showToast({
|
||
title: '扫码失败',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
});
|
||
|
||
|
||
}else{
|
||
uni.showToast({
|
||
title: "当前设备类型下未添加设备",
|
||
icon: 'none'
|
||
});
|
||
}
|
||
}
|
||
},
|
||
//提交
|
||
formSubmit() {
|
||
this.$refs.vForm.validate().then(res => {
|
||
// console.log(this.formData)
|
||
let obj = {
|
||
"teamId": this.formData.teamId,
|
||
"powerId": this.formData.powerId,
|
||
"proId": this.formData.proId,
|
||
"list":[{
|
||
"devId": this.formData.devId,
|
||
"devName": this.formData.devName,
|
||
"devCode": this.formData.devCode,
|
||
"devType": this.formData.devType,
|
||
}]
|
||
}
|
||
let param = {
|
||
// encryptedData: AES.encrypt(JSON.stringify(obj))
|
||
encryptedData: JSON.stringify(obj)
|
||
}
|
||
let option = {
|
||
contentType:'form'
|
||
}
|
||
// console.log(obj)
|
||
this.$http.post(addEquipmentReq,obj,false,option).then(res => {
|
||
if (res) {
|
||
// console.log(res)
|
||
if(res.code == 200){
|
||
uni.$u.toast('提交成功')
|
||
uni.navigateBack({
|
||
delta: 1 // 返回到已存在的页面
|
||
});
|
||
}
|
||
}
|
||
}).catch(error => {console.log(error)})
|
||
}).catch(errors => {
|
||
console.log(errors)
|
||
uni.$u.toast('填写数据存在问题')
|
||
})
|
||
},
|
||
|
||
|
||
|
||
|
||
|
||
|
||
// //选择图片
|
||
// 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.formData.imageUrl = data.data;
|
||
// console.log(this.formData.imageUrl)
|
||
// }else{
|
||
// uni.$u.toast('上传失败，'+data.msg)
|
||
// }
|
||
// },
|
||
// fail: () => {}
|
||
// })
|
||
// },
|
||
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.mb-40{
|
||
margin-bottom: 40rpx;
|
||
}
|
||
.flex{
|
||
display: flex;
|
||
}
|
||
.visitor-info{
|
||
width: 100%;
|
||
height: 90vh;
|
||
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>
|