373 lines
8.1 KiB
Vue
373 lines
8.1 KiB
Vue
<template>
|
||
<view class="container">
|
||
<view class="form">
|
||
<view class="form_item">
|
||
<view class="form_top">
|
||
选择站点:
|
||
</view>
|
||
<view class="form_bot">
|
||
<picker @change="bindPickerChange" :value="index" :range="array">
|
||
<view class="dates">
|
||
<view class="uni-input" v-if="!details.stationName" style="color: #808080;">请选择监测站点</view>
|
||
<view class="uni-input" v-else>{{details.stationName}}</view>
|
||
</view>
|
||
<image class="dateimg" src="../../../static/xiala.png" mode="" style="width: 32rpx;height: 16rpx;"></image>
|
||
</picker>
|
||
</view>
|
||
</view>
|
||
<view class="form_item" v-if="details.maintainData3">
|
||
<view class="form_top">
|
||
站点位置:
|
||
</view>
|
||
<input type="text" placeholder="" disabled="true" v-model="details.maintainData3">
|
||
</view>
|
||
<view class="form_item">
|
||
<view class="form_top">
|
||
监测情况:
|
||
</view>
|
||
<view class="form_bot">
|
||
<view class="uni-textarea">
|
||
<textarea placeholder-style="color:#808080" auto-height placeholder="请输入内容" @blur="bindTextAreaBlur"/>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="form_item">
|
||
<view class="form_top">
|
||
负责人:
|
||
</view>
|
||
<input type="text" placeholder="请输入负责人姓名" v-model="details.maintainPerson">
|
||
</view>
|
||
<view class="form_item">
|
||
<view class="form_top">
|
||
联系方式:
|
||
</view>
|
||
<input
|
||
type="text"
|
||
placeholder="请输入联系方式"
|
||
v-model="details.maintainData2"
|
||
@blur="validatePhone"
|
||
maxlength="11"
|
||
/>
|
||
<view class="error-text" v-if="phoneError">{{phoneError}}</view>
|
||
</view>
|
||
<view class="form_item">
|
||
<view class="form_top">
|
||
维护时间:
|
||
</view>
|
||
<view class="form_bot">
|
||
<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
|
||
<view class="dates">
|
||
<view class="uni-input" style="color: #808080;" v-if="!details.maintainTime">请选择维护时间</view>
|
||
<view class="uni-input" v-else>{{details.maintainTime}}</view>
|
||
</view>
|
||
<image class="dateimg" src="../../static/data.png" mode=""></image>
|
||
</picker>
|
||
</view>
|
||
</view>
|
||
<view class="bz_item">
|
||
<view class="bz_top">
|
||
备<span class="bz">注:</span>
|
||
</view>
|
||
<view class="bz_bot">
|
||
<textarea v-model="details.maintainNote" style="width: 100%;"/>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="bot_btn">
|
||
<button class="primary" @click="tosubmit()">提 交</button>
|
||
</view>
|
||
<view class="pagebot"></view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default{
|
||
data(){
|
||
return{
|
||
array:[],
|
||
arrays:[],
|
||
details:{
|
||
createTime: "",
|
||
createdBy: "",
|
||
id: "",
|
||
isDel: 0,
|
||
itemId: "",
|
||
maintainData1: "",
|
||
maintainNote: "",
|
||
maintainPerson: "",
|
||
maintainData2:"",
|
||
maintainData3: "",
|
||
maintainTime: "",
|
||
reVision: 0,
|
||
stationCode: "",
|
||
stationName: "",
|
||
tenantId: "",
|
||
updatedBy: "",
|
||
updatedTime: "",
|
||
},
|
||
index:'',
|
||
date:'',
|
||
year:'',
|
||
number:'',
|
||
tag:'',
|
||
hobby: [],
|
||
checkbox1: [],
|
||
reload:'true',
|
||
phoneError: '', // 添加错误提示信息
|
||
}
|
||
},
|
||
onLoad() {
|
||
},
|
||
onShow() {
|
||
this.getazsurvMulchRecord()
|
||
this.getazsurvMulchRecord1()
|
||
},
|
||
methods:{
|
||
// 站点
|
||
getazsurvMulchRecord(){
|
||
this.array = []
|
||
this.arrays = []
|
||
this.$http.get('/applet/survStationInfo/list').then(res=>{
|
||
for(var i=0;i<res.data.data.length;i++){
|
||
this.arrays.push({
|
||
label:res.data.data[i].stationName,
|
||
value:res.data.data[i].stationCode,
|
||
add:res.data.data[i].stationLocation
|
||
})
|
||
this.array.push(res.data.data[i].stationName)
|
||
}
|
||
})
|
||
},
|
||
bindTextAreaBlur(e) {
|
||
this.details.maintainData1 = e.detail.value
|
||
},
|
||
// 维护内容
|
||
getazsurvMulchRecord1(){
|
||
this.hobby = []
|
||
this.$http.get('/applet/survMaintainItem/list').then(res=>{
|
||
for(var i=0;i<res.data.data.length;i++){
|
||
this.hobby.push({
|
||
text:res.data.data[i].maintainData1,
|
||
value:res.data.data[i].id
|
||
})
|
||
}
|
||
})
|
||
},
|
||
bindPickerChange: function(e) {
|
||
this.index = e.detail.value
|
||
this.details.stationName = this.array[this.index]
|
||
for(var i=0;i<this.arrays.length;i++){
|
||
if(this.details.stationName == this.arrays[i].label){
|
||
this.details.stationCode = this.arrays[i].value
|
||
}
|
||
}
|
||
this.details.maintainData3 = this.arrays[this.index].add
|
||
},
|
||
bindDateChange: function(e) {
|
||
this.details.maintainTime = e.detail.value
|
||
},
|
||
// 联系方式格式校验
|
||
validatePhone() {
|
||
const phone = this.details.maintainData2;
|
||
if (!phone) {
|
||
this.phoneError = '';
|
||
return true;
|
||
}
|
||
|
||
// 手机号正则表达式
|
||
const phoneRegex = /^1[3-9]\d{9}$/;
|
||
|
||
if (!phoneRegex.test(phone)) {
|
||
this.phoneError = '请输入正确的手机号码';
|
||
return false;
|
||
} else {
|
||
this.phoneError = '';
|
||
return true;
|
||
}
|
||
},
|
||
// 提交
|
||
tosubmit(){
|
||
if(!this.details.stationName){
|
||
uni.showToast({
|
||
title: "请选择站点",
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
return
|
||
}
|
||
if(!this.details.maintainData1){
|
||
uni.showToast({
|
||
title: "请填写监测情况",
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
return
|
||
}
|
||
if(!this.details.maintainPerson){
|
||
uni.showToast({
|
||
title: "请输入负责人姓名",
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
return
|
||
}
|
||
if(!this.details.maintainData2){
|
||
uni.showToast({
|
||
title: "请输入联系方式",
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
return
|
||
}
|
||
// 添加联系方式格式校验
|
||
if (!this.validatePhone()) {
|
||
uni.showToast({
|
||
title: "请输入正确的手机号码",
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
return;
|
||
}
|
||
if(!this.details.maintainTime){
|
||
uni.showToast({
|
||
title: "请选择维护时间",
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
return
|
||
}
|
||
this.$http.post('/applet/survMaintainRecord/add',this.details).then(res=>{
|
||
uni.showLoading({
|
||
title: '正在提交...'
|
||
});
|
||
if(res.data.code == 0){
|
||
uni.hideLoading();
|
||
uni.navigateBack()
|
||
let pages = getCurrentPages();
|
||
let prevPage = pages[ pages.length - 2 ];
|
||
prevPage.$vm.reload = this.reload;
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page{
|
||
height: 100%;
|
||
background-color: white;
|
||
}
|
||
.form{
|
||
padding: 0 30rpx;
|
||
}
|
||
.form_item{
|
||
padding-top: 33rpx;
|
||
padding-bottom: 25rpx;
|
||
border-bottom: 1rpx solid #e6e6e6;
|
||
}
|
||
.form_top{
|
||
margin-bottom: 26rpx;
|
||
font-weight: bold;
|
||
}
|
||
.form_bot{
|
||
position: relative;
|
||
}
|
||
.dates{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
.dateimg{
|
||
height: 32rpx;
|
||
width: 32rpx;
|
||
position: absolute;
|
||
right: 0;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
}
|
||
.dw{
|
||
color: #2ac066;
|
||
}
|
||
.item_pic{
|
||
border-bottom:1rpx solid #e4e4e4;
|
||
padding: 30rpx 0rpx;
|
||
font-weight: 500;
|
||
}
|
||
.imgList{
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
}
|
||
.imgList image{
|
||
width: 130rpx;
|
||
height: 130rpx;
|
||
margin-right: 24rpx;
|
||
margin-top: 20rpx;
|
||
}
|
||
.imgList image:nth-child(4n){
|
||
margin-right: 0rpx;
|
||
}
|
||
.bz_item{
|
||
padding: 40rpx 0rpx;
|
||
}
|
||
.bz_top{
|
||
font-weight: bold;
|
||
margin-bottom: 26rpx;
|
||
}
|
||
.bz{
|
||
margin-left: 30rpx;
|
||
}
|
||
.bz_bot{
|
||
color: #767676;
|
||
line-height: 50rpx;
|
||
border: 1rpx solid #ececec;
|
||
border-radius: 10rpx;
|
||
padding: 16rpx;
|
||
}
|
||
.bot_btn{
|
||
padding: 0 30rpx;
|
||
margin-top: 30rpx;
|
||
}
|
||
.primary{
|
||
width: 100%;
|
||
height: 90rpx;
|
||
background-color: #0F6EFF;
|
||
border: none;
|
||
border-radius: 50rpx;
|
||
color:#fff;
|
||
font-weight: bold;
|
||
}
|
||
.pagebot{
|
||
height: 200rpx;
|
||
}
|
||
.text {
|
||
font-size: 12px;
|
||
color: #666;
|
||
margin-top: 5px;
|
||
}
|
||
.uni-px-5 {
|
||
padding-left: 10px;
|
||
padding-right: 10px;
|
||
}
|
||
.uni-pb-5 {
|
||
padding-bottom: 10px;
|
||
}
|
||
.checkpeople{
|
||
width: 187rpx;
|
||
height: 57rpx;
|
||
border: 1rpx dashed #0472e3;
|
||
line-height: 57rpx;
|
||
text-align: center;
|
||
color: #0472e3;
|
||
}
|
||
.error-text {
|
||
color: #ff0000;
|
||
font-size: 24rpx;
|
||
margin-top: 10rpx;
|
||
}
|
||
|
||
// 如果有错误，给输入框添加红色边框
|
||
.form_item input:focus {
|
||
border: 1rpx solid #ff0000;
|
||
}
|
||
</style> |