tqApp-webView/pagesBase/driverManage/add.vue

<template>
	<view class="page-container">
		<view class="page-body">
			<u--form label-width="auto" labelAlign="left"
				ref="uForm"
				:model="model"
				:rules="rules"
				:labelStyle="{
					fontSize: '28rpx',
					fontWeight: '500',
				}"
			>
				<u-cell-group :border="false">
					<view class="box">
						
						<template v-if="hasPlat(['sanitation'])">
							<u-cell :border="true" :isLink="true" :clickable="false" class="hidde-cell-title"
								@click="$refs.coverageRef.show()"
							>
								<view slot="value" class="value">
									<u-form-item label="所属行政区" prop="form.bindAreaCode" :required="true">
										<u--input
											:value="model.form.bindAreaName" 
											placeholder="请选择" 
											border="none"
											inputAlign="right"
											:disabled="true"
											disabledColor="none"
											:customStyle="{
												pointerEvents: 'none',
											}"
										>
										</u--input>
									</u-form-item>
								</view>	
							</u-cell>
							
							<tq-area-coverage ref="coverageRef"
								@confirm="(data) => {
									model.form.bindAreaCode = data.code
									model.form.bindAreaName = data.areaName
								}"
							>
							</tq-area-coverage>
						</template>
						
						<template>
							<u-cell :border="true" :isLink="true" :clickable="false" class="hidde-cell-title"
								@click="() => {
									if(!hasHostPlat(['dingH5'])) $refs.deptChooseRef.show()
									
								}"
							>
								<view slot="value" class="value">
									<u-form-item label="所属单位" prop="form.deptId" :required="true">
										<u--input
											:value="model.form.deptName" 
											placeholder="请选择" 
											border="none"
											inputAlign="right"
											:disabled="true"
											disabledColor="none"
											:customStyle="{
												pointerEvents: 'none',
											}"
										>
										</u--input>
									</u-form-item>
								</view>	
							</u-cell>
							
							<tq-dept ref="deptChooseRef"
								@confirm="(data) => {
									model.form.deptId = data.deptId
									model.form.deptName = data.deptName
								}"
							>
							</tq-dept>
						</template>
						
						<template>
							<u-cell title="" :border="true" :isLink="false" :clickable="false" class="hidde-cell-title">
								<view slot="value" class="value">
									<u-form-item label="名称" prop="form.nickName" :required="true">
										<u--input
											v-model="model.form.nickName" 
											placeholder="请输入" 
											border="none"
											type="text"
											:clearable="true"
											inputAlign="right"
											maxlength="10"
											:disabled="hasHostPlat(['dingH5'])"
										>
										</u--input>
									</u-form-item>
								</view>	
							</u-cell> 
						</template>
						
						<template>
							<u-cell title="" :border="true" :isLink="false" :clickable="false" class="hidde-cell-title">
								<view slot="value" class="value">
									<u-form-item label="联系方式" prop="form.phonenumber" :required="true">
										<u--input
											v-model="model.form.phonenumber" 
											placeholder="请输入" 
											border="none"
											type="number"
											:clearable="true"
											inputAlign="right"
											maxlength="11"
										>
										</u--input>
									</u-form-item>
								</view>	
							</u-cell> 
						</template>
						
						
						<template>
							<u-cell :border="true" :isLink="true" :clickable="false" class="hidde-cell-title"
								@click="$refs.sexRef.show()"
							>
								<view slot="value" class="value">
									<u-form-item label="性别" prop="form.sex" :required="true">
										<u--input
											:value="model.form.sexName" 
											placeholder="请选择" 
											border="none"
											inputAlign="right"
											:disabled="true"
											disabledColor="none"
											:customStyle="{
												pointerEvents: 'none',
											}"
										>
										</u--input>
									</u-form-item>
								</view>	
							</u-cell>
							
							<tq-dict-select ref="sexRef"
								dictType="sys_user_sex"
								@confirm="(data) => {
									model.form.sex = data.dictValue
									model.form.sexName = data.dictLabel
								}"
							>
							</tq-dict-select>
						</template>
						
						<template>
							<u-cell :border="true" :isLink="true" :clickable="false" class="hidde-cell-title"
								@click="$refs.roleRef.show()"
							>
								<view slot="value" class="value">
									<u-form-item label="选择角色" prop="form.bindRoleIds" :required="true">
										<u--input
											:value="model.form.bindRoleName" 
											placeholder="请选择" 
											border="none"
											inputAlign="right"
											:disabled="true"
											disabledColor="none"
											:customStyle="{
												pointerEvents: 'none',
											}"
										>
										</u--input>
									</u-form-item>
								</view>	
							</u-cell>
							
							<tq-search-select ref="roleRef"
								:dataList="roleOptions"
								:multiple="true"
								:objMap="{
									label: 'roleName',
									value: 'roleId',
								}"
								@confirm="(data) => {
									model.form.bindRoleIds = data.map(e => e.roleId).join(',')
									model.form.bindRoleName = data.map(e => e.roleName).join(',')
								}"
							>
							</tq-search-select>
						</template>
						
						<template v-if="!hasHostPlat(['dingH5'])">
							<u-cell title="" :border="true" :isLink="false" :clickable="false" class="hidde-cell-title">
								<view slot="value" class="value">
									<u-form-item label="账号" prop="form.userName" :required="true">
										<u--input
											v-model="model.form.userName" 
											placeholder="请输入" 
											border="none"
											type="text"
											:clearable="true"
											inputAlign="right"
											maxlength="20"
										>
										</u--input>
									</u-form-item>
								</view>	
							</u-cell> 
						</template>
						
						<template v-if="isNull(model.form.userId)">
							<u-cell title="" :border="true" :isLink="false" :clickable="false" class="hidde-cell-title">
								<view slot="value" class="value">
									<u-form-item label="登录密码" prop="form.password" :required="false">
										<u--input
											v-model="model.form.password" 
											placeholder="请输入" 
											border="none"
											type="text"
											:clearable="true"
											inputAlign="right"
											maxlength="20"
										>
										</u--input>
									</u-form-item>
								</view>	
							</u-cell> 
						</template>
						
						<template>
							<u-cell title="" :border="true" :isLink="false" :clickable="false" class="hidde-cell-title">
								<view slot="value" class="value">
									<u-form-item label="驾驶证号" prop="form.licenseNo" :required="false">
										<u--input
											v-model="model.form.licenseNo" 
											placeholder="请输入" 
											border="none"
											type="text"
											:clearable="true"
											inputAlign="right"
											maxlength="20"
										>
										</u--input>
									</u-form-item>
								</view>	
							</u-cell> 
						</template>
						
						<template>
							
							<u-cell title="" :border="true" :isLink="true" class="hidde-cell-title"
								@click="$refs.limitDateRef.show()"
							>
								<view slot="value" class="value">
									<u-form-item label="驾驶证到期" prop="form.limitDate" :required="false">
										<u--input
											:value="model.form.limitDate" 
											placeholder="请选择" 
											border="none"
											inputAlign="right"
											:disabled="true"
											disabledColor="none"
											:customStyle="{
												pointerEvents: 'none',
											}"
										>
										</u--input>
									</u-form-item>
								</view>	
							</u-cell>
							<tq-date-time ref="limitDateRef"
								mode="date"
								format="YYYY-MM-DD"
								@confirm="(data) => {
									model.form.limitDate = data
								}"
							>
							</tq-date-time>
							
						</template>

						<template>
							<u-cell title="绑定车辆" :border="true" :isLink="true" :clickable="false"
								@click="$refs.plateRef.show()"
							>
								<view slot="value">
									<u-form-item label="">
										<u--input
											:value="model.form.plate" 
											placeholder="请选择" 
											border="none"
											inputAlign="right"
											:disabled="true"
											disabledColor="none"
											:customStyle="{
												pointerEvents: 'none',
											}"
										>
										</u--input>
									</u-form-item>
								</view>	
							</u-cell>
							
							<tq-car-user ref="plateRef"
								:isGetIcon="false"
								:queryType="2"
								@confirm="(data) => {
									model.form.vehicleId = data.id
									model.form.plate = data.label
								}"
							>
							</tq-car-user>
						</template>
						
						<template>
							<u-cell :border="true" :isLink="true" :clickable="true" class="hidde-cell-title"
								@click="$refs.workStatusRef.show()"
							>
								<view slot="value" class="value">
									<u-form-item label="在职状态" prop="form.workStatus" :required="true">
										<u--input
											:value="model.form.workStatusName" 
											placeholder="请选择" 
											border="none"
											inputAlign="right"
											:disabled="true"
											disabledColor="none"
											:customStyle="{
												pointerEvents: 'none',
											}"
										>
										</u--input>
									</u-form-item>
								</view>	
							</u-cell>
							
							<tq-dict-select ref="workStatusRef"
								dictType="sys_onjob_status"
								@confirm="(data) => {
									model.form.workStatus = data.dictValue
									model.form.workStatusName = data.dictLabel
									$refs.uForm.validateField('form.workStatus')
								}"
							>
							</tq-dict-select>
							
						</template>
						
						<u-cell :border="false" :isLink="false" :clickable="false" class="hidde-cell-title">
							<view slot="value" class="value">
								<u-form-item label="备注" labelPosition="top" prop="form.remark" :required="false">
									<u--textarea
										v-model="model.form.remark" 
										placeholder="请输入备注" 
										border="none"
										:count="true"
										maxlength="200"
									>
									</u--textarea>
								</u-form-item>
							</view>	
						</u-cell> 
						
						<u-cell title="" :border="false" :isLink="false" :clickable="false" class="hidde-cell-title">
							<view slot="value" class="value">
								<u-form-item label="" labelPosition="top" prop="form.licensePhoto" :required="true">
									<view slot="label" class="item-label">
										<view class="item-label-left">
											<!-- <text>*</text> -->
											驾驶证照片
										</view>
										<view  class="item-label-right">{{model.form.licensePhoto?model.form.licensePhoto.split(',').length:0}}/1</view>
									</view>
									<view style="margin-top: 30rpx;">
										<tq-upload-img
											v-model="model.form.licensePhoto"
											:maxCount="1"
											width="80"
											height="80"
											uploadText=""
										>	
										</tq-upload-img>
									</view>
								</u-form-item>
							</view>	
						</u-cell> 	
										
						<u-cell title="" :border="false" :isLink="false" :clickable="false" class="hidde-cell-title">
							<view slot="value" class="value">
								<u-form-item label="" labelPosition="top" prop="form.photo" :required="true">
									<view slot="label" class="item-label">
										<view class="item-label-left">
											用户照片
										</view>
										<view  class="item-label-right">{{model.form.photo?model.form.photo.split(',').length:0}}/1</view>
									</view>
									<view style="margin-top: 30rpx;">
										<tq-upload-img
											v-model="model.form.photo"
											:maxCount="1"
											width="80"
											height="80"
											uploadText=""
										>	
										</tq-upload-img>
									</view>
								</u-form-item>
							</view>	
						</u-cell> 
					</view>
							
				</u-cell-group>
				
			</u--form>
		</view>
		
		<view class="page-footer">
			<u-row style="margin-top: 40rpx;">
				<u-col :span="6">
		
					<u-button type="info" shape="" :hairline="false" :custom-style="{
							width: '100%',
							borderRadius: '0',
							background: '#FFF',
							height: '100rpx',
							fontSize: '32rpx',
							fontWeight: '500',
						  }" @click="handleClear">返回
					</u-button>
					
				</u-col>	
				<u-col :span="6">
					
					
					<u-button type="primary" shape="" :hairline="false" 
					:custom-style="{
									width: '100%',
									borderRadius: '0',
									height: '100rpx',
									fontSize: '32rpx',
									fontWeight: '500',
					  background:'linear-gradient(to right, #41B5FF, #4573FC)'
						  }" @click="handleSubmit">提交
					</u-button>
				</u-col>
			</u-row>
		</view>
	</view>
</template>

<script>
import {userProfile} from '@/api/common/user.js'
import {addDriverManage,updateDriverManage,detailDriverManage,getUser,deptTreeSelect} from '@/api/system/driverManage.js'
import {clearProps,copyProps} from '@/utils/gdtq.js'
import {isEmpty} from 'lodash'
import { encrypt, decrypt } from "@/utils/jsencrypt";

export default {
	components: {
	},
	data() {
		return {
			model: {
				  form: {
					userId: "",
					bindAreaCode: "",
					bindAreaName: "",		
					deptId: "",
					deptName: "",
					nickName: '',
					phonenumber: '',
					sex: '',
					sexName: '',
					bindRoleIds: '',
					bindRoleName: '',
					userName: '',
					password: '',
					licenseNo: '',
					limitDate: '',
					vehicleId: '',
					plate: '',
					workStatus: '',
					workStatusName: '',
					remark: '',
					licensePhoto: '',
					photo: '',
				  }
			},
			rules: {
				
				'form.bindAreaCode': [
					{
						type: 'string',
						required: true,
						message: '请选择所属行政区',
						trigger: ['blur', 'change']
					},	
				],
				'form.deptId': [
					{
						type: 'string',
						required: true,
						message: '请选择所属单位',
						trigger: ['blur', 'change']
					},	
				],
				'form.nickName': [
					{
						type: 'string',
						required: true,
						message: '请输入名称',
						trigger: ['blur', 'change']
					},	
				],
			
				'form.sex': [
					{
						type: 'string',
						required: true,
						message: '请选择性别',
						trigger: ['blur', 'change']
					},	
				],
				'form.bindRoleIds': [
					{
						type: 'string',
						required: true,
						message: '请选择角色',
						trigger: ['blur', 'change']
					},	
				],
				'form.userName': [
					{
						type: 'string',
						required: true,
						message: '请输入账号',
						trigger: ['blur', 'change']
					},	
				],
				'form.phonenumber': [
					{
						type: 'string',
						required: true,
						message: '请输入联系方式',
						trigger: ['blur', 'change']
					},	
					{
						
						pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
						// 正则检验前先将值转为字符串
						transform(value) {
							return value?String(value):0;
						},
						message: '请输入正确的手机号码',
						// 触发器可以同时用blur和change
						trigger: ['change','blur'],
					}
				],
				'form.workStatus': [
					{
						type: 'string',
						required: true,
						message: '请选择',
						trigger: ['blur', 'change']
					},	
				],
				'form.loadWeight': [
				
					{
	
						pattern: /^\d+(\.\d{1,2})?$/,
						// 正则检验前先将值转为字符串
						transform(value) {
							return value?String(value):0;
						},
						message: '车辆载重需为正数且最多两位小数',
						// 触发器可以同时用blur和change
						trigger: ['change','blur'],
					}
				],
				
			},

			
			userInfo: null,
			roleOptions: [],
		}
	},
	onLoad({id}) {
		// console.log(id,'id')

		if(id) {
			this.getUserList(id)
			this.getInfo(id)
		} else {
			this.getUserList()
			// this.getUserInfo()
		}
		
	},
	onShow() {
		
	},
	onHide() {
		
	},
	onReady() {	
		this.resetRules()
	},
	methods: {
		
		resetRules() {
			this.$refs.uForm.setRules(this.rules)		
			
		},
		
		getUserList(userId) {
			 getUser(userId).then(res => {
			    this.roleOptions = res.roles;
			  });
		},

		async getInfo(userId) {
			let {code,data} = await detailDriverManage({userId})
			if(code == 0) {
				for (let key in this.model.form) {
					/* if (key === 'bindRoleIds') {
						this.model.form[key] = data[key] ? data[key].split(',') : []
					} else {
						this.model.form[key] = this.isNull(data[key]) ? undefined : data[key]
					} */
					this.model.form[key] = this.isNull(data[key]) ? undefined : data[key]
				}
								
				// copyProps(this.model.form,data)
			}
		},
		getUserInfo() {
			userProfile().then((res) => {
				this.userInfo = res.data
				
				this.roleOptions = res.data.roles
				// this.model.form.deptId = res.data.deptId
				// this.model.form.deptName = res.data.deptName
			})
		},
		// 提交
		async handleSubmit() {
			
	
			  this.$refs.uForm.validate().then(async res => {
				  
					  
					  let ajaxData = {
						  ...this.model.form,
						  password: this.model.form.password ? encrypt(this.model.form.password) : undefined,
					  }
					
					  let { data, code,msg } =ajaxData.userId? await updateDriverManage(ajaxData) : await addDriverManage(ajaxData) 
					  
					  if (code == 0) {
							
							uni.showModal({
								title: '提示',
								content: `提交成功~`,
								showCancel:false,
								confirmText: '好的',
								success: function(res) {
									if (res.confirm) {
										uni.navigateTo({url: `/pagesBase/driverManage/index`})
									}
								}
							})
							
					  }	
				  
			  }).catch(errors => {
				  console.log('校验失败',errors)
			  })
		},
		handleClear() {
			uni.navigateBack()
			// clearProps(this.model.form,['outflowUserId','outflowUser','deptId','deptName'])
		},
		
	}
}
</script>

<style lang="scss" scoped>
	.disflex-center {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.disflex-right {
		display: flex;
		justify-content: right;
		align-items: center;
	}
.page-container {
	
	font-size: 28rpx;
	min-height: 100%;
	position: relative;
	// padding-bottom: 60rpx;
	
	.box {
		margin: 20rpx;
		border-radius: 10rpx;
		background: #fff;
		
		.item-label {
			display: flex;
			justify-content: space-between;
			align-items: center;
			&-left {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				position: relative;
				text {
					color: #f56c6c;
					font-size: 40rpx;
					position: absolute;
					left: -18rpx;
				}
			}
			&-right {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 20rpx;
				color: #999999;
			}
		}
	}
	.page-body {
		padding-bottom: 120rpx;
	}
	.page-footer {
		padding: 0rpx 0;
		position: fixed;
		width: 100%;
		left: 0;
		bottom: 0;
	}
}	


::v-deep {
	.u-cell-group {
		.u-cell__title-text {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
		}
		
		.u-form-item__body__right__content__slot {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
			
			.u-input__content__field-wrapper__field {
				font-family: PingFangSC, PingFang SC !important;
				font-weight: 400 !important;
				font-size: 28rpx !important;
				color: #333333 !important;
			}
		}
	}
	
	.u-form-item__body {
		padding: 0;
	}
	.hidde-cell-title {
		
		.u-cell__body__content {
			width: auto;
			flex: none;
			
		}
		.u-cell__body {
			.value {
				flex: 1;
			}
		}
		
	}
	
}
</style>