Browse Source

对样式以及表单的控制

liyangzheng 1 year ago
parent
commit
52b21dfa2a

+ 12 - 8
pagesA/fire/fire_station/edit_fireStation/edit_fireStation.vue

@@ -36,21 +36,24 @@
 					<u-form-item label="详细地址">
 						<u-input v-model="formData.addr" placeholder="请输入详细地址" />
 					</u-form-item>
-					<u-form-item label="控制室值班人数" prop="dutyer">
-						<u-input v-model="formData.dutyer" placeholder="请输入控制室值班人数	" />
+					<u-form-item style="width: 700rpx;" label="控制室值班人数" prop="dutyer">
+						<u-input  v-model="formData.dutyer" placeholder="请输入控制室值班人数	" />
+						<button @click="goWorkNum" class="manyBtn">添加值班人</button>
 					</u-form-item>
-					<button @click="goWorkNum" class="manyBtn">添加值班人</button>
+					<!-- <button @click="goWorkNum" class="manyBtn">添加值班人</button> -->
 					<u-form-item label="报警电话">
 						<u-input v-model="formData.alarmTel" placeholder="请输入报警电话	" />
 					</u-form-item>
-					<u-form-item label="负责人">
+					<u-form-item style="width: 700rpx;" label="负责人">
 						<u-input v-model="formData.charger" placeholder="请输入负责人" />
+						<button @click="goBigNum" class="manyBtn">添加负责人</button>
 					</u-form-item>
-					<button @click="goBigNum" class="manyBtn">添加负责人</button>
-					<u-form-item label="人员信息" prop="members">
+					
+					<u-form-item style="width: 700rpx;" label="人员信息" prop="members">
 						<u-input v-model="formData.members" placeholder="请输入队员人数" />
+						<button @click="goPeopleMes" class="manyBtn">添加人员信息</button>
 					</u-form-item>
-					<button @click="goPeopleMes" class="manyBtn">添加人员信息</button>
+					
 					<u-form-item label="水罐车数量" prop="waterTanker">
 						<u-input v-model="formData.waterTanker" placeholder="请输入水罐车" />
 					</u-form-item>
@@ -500,7 +503,7 @@
 		overflow-y: auto;
 	}
 	.manyBtn{
-		width: 200rpx;
+		width: 100rpx;
 		height: 40rpx;
 		font-size: 20rpx;
 		line-height: 40rpx;
@@ -508,5 +511,6 @@
 		border-radius: 20rpx;
 		background-color: #4DB1B6;
 		color: white;
+		margin-left: 10rpx;
 	}
 </style>

+ 47 - 27
pagesA/fire/fire_station/people_fireStation/people_fireStation.vue

@@ -1,33 +1,24 @@
 <template>
-	<view>
+	<view style="position: relative;">
 		<div class="useBox">
-			<button @click="addNewPeople" class="antherBtn">{{tomole}}</button>
-			<u-button type="primary" @click="addSure" class="antherBtn">提交</u-button>
+			<!-- <button @click="addNewPeople" class="antherBtn">{{tomole}}</button> -->
+			<!-- <u-button type="primary" @click="addSure" class="antherBtn">提交</u-button> -->
 		</div>
-		<div class="tableBox">
-			<table class="custom-table">
-				<thead>
-					<tr>
-						<th>名字</th>
-						<th>电话</th>
-						<th>身份证号</th>
-						<th>职务</th>
-						<th>操作</th>
-					</tr>
-				</thead>
-				<tbody>
-					<tr v-for="item in tableList" :key="item.id">
-						<td>{{ item.empName }}</td>
-						<td style="width: 150rpx;">{{ item.mobile }}</td>
-						<td style="width: 210rpx;">{{item.idcardno}}</td>
-						<td>{{getDuty(item.duty)}}</td>
-						<td class="aTd">
-							<button @click="delUser(item)" class="editBtn">删除</button>
-							<button @click="editUser(item)" class="editBtn">编辑</button>
-						</td>
-					</tr>
-				</tbody>
-			</table>
+		<div class="cardBox">
+			<uni-card v-for="item in tableList" style="border: 2rpx solid #4DB1B6;">
+				<div style="display: flex;justify-content: space-between;align-items: center;">
+					<div>
+						<text>姓名:{{item.empName}}</text><br>
+						<text>电话:{{ item.mobile }}</text><br>
+						<text>身份证号:{{item.idcardno}}</text><br>
+						<text>职务:{{getDuty(item.duty)}}</text>
+					</div>
+					<div style="display: flex;justify-content: space-around;align-items: center;">
+						<button @click="delUser(item)" class="editBtn">删除</button>
+						<button @click="editUser(item)" class="editBtn">编辑</button>
+					</div>
+				</div>
+			</uni-card>
 		</div>
 		<!-- 新增的人员表单项 -->
 		<div v-for="(person, index) in membersList" :key="index" style="border-bottom: 1px solid black;">
@@ -56,6 +47,10 @@
 					<p style="width: 150rpx;">职务</p>
 					<uni-data-select v-model="person.power" :localdata="range" @change="change"></uni-data-select>
 				</u-form-item>
+				<u-form-item>
+					<u-button type="primary" @click="addSure" class="antherBtn">提交</u-button>
+					<u-button type="primary" @click="cleanList" class="antherBtn">取消</u-button>
+				</u-form-item>
 			</u--form>
 		</div>
 		<div>
@@ -88,6 +83,7 @@
 				</view>
 			</u-popup>
 		</div>
+		<button @click="addNewPeople" class="circleBtn">+</button>
 	</view>
 </template>
 
@@ -373,6 +369,9 @@
 				} else {
 					this.phoneRules = true
 				}
+			},
+			cleanList() {
+				this.membersList = []
 			}
 		},
 		onLoad(options) {
@@ -472,6 +471,7 @@
 		border-radius: 10rpx;
 		font-size: 20rpx;
 		margin-bottom: 10rpx;
+		margin-right: 10rpx0;
 	}
 
 	.modalBox {
@@ -496,4 +496,24 @@
 		color: red;
 		font-size: 20rpx;
 	}
+
+	.circleBtn {
+		width: 100rpx;
+		height: 100rpx;
+		border-radius: 50%;
+		font-size: 90rpx;
+		text-align: center;
+		line-height: 100rpx;
+		color: white;
+		background-color: #4EB0B5;
+		position: absolute;
+		top: 1300rpx;
+		left: 590rpx;
+	}
+
+	.cardBox {
+		width: 650rpx;
+		margin: 30rpx auto;
+		border-radius: 30rpx;
+	}
 </style>

+ 166 - 66
pagesA/fire/metting_regsiter/metting_sigin.vue

@@ -1,54 +1,54 @@
 <template>
 	<view>
-		<view class="">
+		<view class="bigBox">
+			<div class="cardBox">
+				<uni-card v-for="item in tableList" class="mesCard">
+					<div style="display: flex;justify-content: space-between;align-items: center;">
+						<div>
+							<text>姓名:{{item.ppName}}</text><br>
+							<text>电话:{{ item.ppTel }}</text>
+						</div>
+						<div style="display: flex;justify-content: space-around;align-items: center;">
+							<button @click="delUser(item)" class="editBtn">删除</button>
+							<button @click="editUser(item)" class="editBtn">编辑</button>
+						</div>
+					</div>
+				</uni-card>
+			</div>
 			<div class="useBox">
-				<button class="useBtn" @click="addNewPeople">新增参会人员</button>
-				<button class="useBtn" @click="sureAdd">确认新增测试</button>
+				<!-- <button class="useBtn" @click="addNewPeople">新增参会人员</button> -->
+				<!-- <button class="useBtn" @click="sureAdd">确认新增</button> -->
 				<button class="useBtn" @click="excelOut">导出excel</button>
 			</div>
-			<div class="tableBox">
-				<table class="custom-table">
-					<thead>
-						<tr>
-							<th>名字</th>
-							<th>电话</th>
-							<th>操作</th>
-						</tr>
-					</thead>
-					<tbody>
-						<tr v-for="item in tableList" :key="item.id">
-							<td>{{ item.ppName }}</td>
-							<td>{{ item.ppTel }}</td>
-							<td class="aTd">
-								<button @click="delUser(item)" class="editBtn">删除</button>
-								<button @click="editUser(item)" class="editBtn">编辑</button>
-							</td>
-						</tr>
-					</tbody>
-				</table>
-			</div>
-			<div v-for="(person, index) in meetList" :key="index" style="border-bottom: 1px solid black;">
-				<u--form>
+			<div v-for="(person, index) in meetList" :key="index" class="addNewBox">
+				<u--form style="margin-left: 55rpx;">
 					<u-form-item class="typeStyle" :prop="'name' + (index + 1)">
 						<p style="width: 150rpx;margin-left: 20rpx;">姓名{{(index + 1)}}</p>
-						<u-input v-model="person.name" :placeholder="'请输入姓名'" />
+						<u-input v-model="person.name" @blur="nameBlur" :placeholder="'请输入姓名'" />
+						<span class="erroring" v-if="nameRules">请输入名称</span>
 					</u-form-item>
 					<u-form-item class="typeStyle" :prop="'age' + (index + 1)">
 						<p style="width: 150rpx;margin-left: 20rpx;">状态</p>
-						<u-input v-model="person.status" :placeholder="'请输入身份证号'" />
+						<u-input v-model="person.status" :placeholder="'请输入状态'" />
+						<!-- <span class="erroring" v-if="userRules">身份证号有误</span> -->
 					</u-form-item>
 					<!-- 其他人员信息字段 -->
 					<u-form-item class="typeStyle" :prop="'age' + (index + 1)">
 						<p style="width: 150rpx;margin-left: 20rpx;">电话号</p>
-						<u-input v-model="person.phone" :placeholder="'请输入电话号'" />
+						<u-input v-model="person.phone" @blur="phoneBlur" :placeholder="'请输入电话号'" />
+						<span class="erroring" v-if="phoneRules">电话号有误</span>
 					</u-form-item>
 					<!-- 	<u-form-item class="typeStyle" :prop="'age' + (index + 1)">
 						<p style="width: 150rpx;margin-left: 20rpx;">人员类型</p>
 						<u-input v-model="person.worker" :placeholder="'请输入人员类型'" />
 					</u-form-item> -->
-					<u-form-item class="antherStyle">
+					<u-form-item class="typeStyle">
 						<p style="width: 150rpx;margin-left: 20rpx;">职务</p>
-						<uni-data-select v-model="person.power" :localdata="range" @change="change"></uni-data-select>
+						<!-- <uni-data-select v-model="person.power" :localdata="range" @change="change"></uni-data-select> -->
+						<u-input v-model="person.power" :placeholder="'请输入职务'" />
+					</u-form-item>
+					<u-form-item class="antherStyle">
+						<button class="useBtn" @click="sureAdd">确认新增</button>
 					</u-form-item>
 				</u--form>
 			</div>
@@ -56,16 +56,20 @@
 				<u-popup :show="showModal" mode="center" @close="closeModal">
 					<view class="modalBox">
 						<u--form labelPosition="left" :model="modalList" ref="uForm">
-							<u-form-item style="width: 500rpx;" label="姓名" prop="modalList.name" borderBottom ref="item1">
+							<u-form-item style="width: 500rpx;" label="姓名" prop="modalList.name" borderBottom
+								ref="item1">
 								<u--input class="modalInput" v-model="modalList.mname" border="none"></u--input>
 							</u-form-item>
-							<u-form-item style="width: 500rpx;" label="电话号" prop="modalList.mphone" borderBottom ref="item2">
+							<u-form-item style="width: 500rpx;" label="电话号" prop="modalList.mphone" borderBottom
+								ref="item2">
 								<u--input class="modalInput" v-model="modalList.mphone" border="none"></u--input>
 							</u-form-item>
-							<u-form-item style="width: 500rpx;" label="职务" prop="modalList.mpower" borderBottom ref="item3">
+							<u-form-item style="width: 500rpx;" label="职务" prop="modalList.mpower" borderBottom
+								ref="item3">
 								<u--input class="modalInput" v-model="modalList.mpower" border="none"></u--input>
 							</u-form-item>
-							<u-form-item style="width: 500rpx;" label="状态" prop="modalList.mstatus" borderBottom ref="item4">
+							<u-form-item style="width: 500rpx;" label="状态" prop="modalList.mstatus" borderBottom
+								ref="item4">
 								<u--input class="modalInput" v-model="modalList.mstatus" border="none"></u--input>
 							</u-form-item>
 						</u--form>
@@ -76,6 +80,7 @@
 					</view>
 				</u-popup>
 			</div>
+			<button class="circleBtn" @click="addNewPeople">+</button>
 		</view>
 	</view>
 </template>
@@ -120,7 +125,10 @@
 					mphone: "",
 					mpower: '',
 					mstatus: '',
-				}
+				},
+				nameRules: false,
+				userRules: false,
+				phoneRules: false,
 			}
 		},
 		methods: {
@@ -130,7 +138,11 @@
 				})
 			},
 			getAllPeople() {
-				getListPage({meetingId:this.meetId,pageNo:1,pageSize:10}).then(res => {
+				getListPage({
+					meetingId: this.meetId,
+					pageNo: 1,
+					pageSize: 10
+				}).then(res => {
 					this.tableList = res.data.list
 					console.log(res, 'all');
 				})
@@ -159,34 +171,50 @@
 			},
 			sureAdd() {
 				console.log(this.meetList[0], '123');
-				creatPeople({
-					meetingId: parseInt(this.meetId),
-					orgId: this.doorId,
-					ppDuty: this.meetList[0].power,
-					ppName: this.meetList[0].name,
-					ppTel: this.meetList[0].phone,
-					status: parseInt(this.meetList[0].status)
-				}).then(res => {
-					if (res.data) {
-						uni.showToast({
-							title: '新增成功',
-							icon: 'success', // 图标类型,可选值:'success', 'loading', 'none'
-							duration: 2000, // 持续时间,单位为毫秒,默认值为 1500
-							mask: false, // 是否显示透明蒙层,防止触摸穿透,默认值为 false
-							success() {
-								console.log('toast消息提示显示成功');
-							},
-							fail(err) {
-								console.error('toast消息提示显示失败', err);
-							}
-						});
-						this.meetList = []
-						// uni.navigateBack({
-						// 	delta: 1 // 返回的页面数,1 表示返回上一级
-						// })
-						this.getAllPeople()
-					}
-				})
+				if (!this.userRules && !this.phoneRules && !this.nameRules) {
+					creatPeople({
+						meetingId: parseInt(this.meetId),
+						orgId: this.doorId,
+						ppDuty: this.meetList[0].power,
+						ppName: this.meetList[0].name,
+						ppTel: this.meetList[0].phone,
+						status: parseInt(this.meetList[0].status)
+					}).then(res => {
+						if (res.data) {
+							uni.showToast({
+								title: '新增成功',
+								icon: 'success', // 图标类型,可选值:'success', 'loading', 'none'
+								duration: 2000, // 持续时间,单位为毫秒,默认值为 1500
+								mask: false, // 是否显示透明蒙层,防止触摸穿透,默认值为 false
+								success() {
+									console.log('toast消息提示显示成功');
+								},
+								fail(err) {
+									console.error('toast消息提示显示失败', err);
+								}
+							});
+							this.meetList = []
+							// uni.navigateBack({
+							// 	delta: 1 // 返回的页面数,1 表示返回上一级
+							// })
+							this.getAllPeople()
+						}
+					})
+				} else {
+					uni.showToast({
+						title: '请检查表单项',
+						icon: 'none', // 图标类型,可选值:'success', 'loading', 'none'
+						duration: 2000, // 持续时间,单位为毫秒,默认值为 1500
+						mask: false, // 是否显示透明蒙层,防止触摸穿透,默认值为 false
+						success() {
+							console.log('toast消息提示显示成功');
+						},
+						fail(err) {
+							console.error('toast消息提示显示失败', err);
+						}
+					});
+				}
+
 			},
 			delUser(row) {
 				console.log(row, '123');
@@ -270,7 +298,32 @@
 						});
 					}
 				})
-			}
+			},
+			// 对表单内name的正则判断
+			nameBlur() {
+				console.log(this.meetList);
+				if (this.meetList[0].name === '') {
+					this.nameRules = true
+				} else {
+					this.nameRules = false
+				}
+			},
+			userBlur() {
+				const regex = /^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[1-2]\d|3[0-1])\d{3}[\dxX]$/;
+				if (regex.test(this.meetList[0].status)) {
+					this.userRules = false
+				} else {
+					this.userRules = true
+				}
+			},
+			phoneBlur() {
+				const regex = /^1[3-9]\d{9}$/;
+				if (regex.test(this.meetList[0].phone)) {
+					this.phoneRules = false
+				} else {
+					this.phoneRules = true
+				}
+			},
 		},
 		onShow() {
 			this.getUser()
@@ -284,6 +337,10 @@
 </script>
 
 <style>
+	.biBox {
+		position: relative;
+	}
+
 	.custom-table {
 		border-collapse: collapse;
 		/* 合并边框 */
@@ -348,6 +405,7 @@
 		line-height: 60rpx;
 		border-radius: 10rpx;
 		font-size: 20rpx;
+		margin-right: 5rpx;
 		margin-bottom: 10rpx;
 	}
 
@@ -355,4 +413,46 @@
 		width: 200rpx;
 		border: 1px solid #4DB1B6;
 	}
+
+	.circleBtn {
+		width: 100rpx;
+		height: 100rpx;
+		border-radius: 50%;
+		font-size: 90rpx;
+		text-align: center;
+		line-height: 100rpx;
+		color: white;
+		background-color: #4EB0B5;
+		position: absolute;
+		top: 1300rpx;
+		left: 590rpx;
+	}
+
+	.cardBox {
+		width: 600rpx;
+		margin: 30rpx auto;
+		border-radius: 30rpx;
+	}
+
+	.typeStyle {
+		width: 600rpx;
+	}
+
+	.addNewBox {
+		/* width: 800rpx; */
+		/* height: auto; */
+		border: none;
+		/* margin: 10rpx auto; */
+	}
+
+	.erroring {
+		font-size: 20rpx;
+		color: red;
+	}
+
+	.mesCard {
+		/* box-shadow: 1 1 1 1 #4DB1B6; */
+		/* background-color: red; */
+		border: 2rpx solid #4DB1B6;
+	}
 </style>