对微型消防站新增人员完善

api/peoplefire/index.js

@@ -4,15 +4,15 @@ export function creatFirePeople(data) {
 	return request({
 		url: '/admin-api/backend/micro-station-emp/create',
 		method: 'post',
-		query: data
+		data
 	})
 }
 // 删除微型消防站人员
 export function delFirePeople(data) {
 	return request({
-		url: '/admin-api/backend/micro-station-emp/delete',
+		url: `/admin-api/backend/micro-station-emp/delete?id=${data}`,
 		method: 'post',
-		query: data
+		// data
 	})
 }
 // 导出消防人员为excel
@@ -28,7 +28,7 @@ export function getMesbyid(data) {
 	return request({
 		url: '/admin-api/backend/micro-station-emp/get',
 		method: 'get',
-		query: data
+		params:data
 	})
 }
 // 获取人员列表
@@ -36,7 +36,7 @@ export function getfirelist(data) {
 	return request({
 		url: '/admin-api/backend/micro-station-emp/list',
 		method: 'get',
-		query: data
+		params: data
 	})
 }
 // 获取微信消防站人员分页
@@ -44,7 +44,7 @@ export function getfirepage(data) {
 	return request({
 		url: '/admin-api/backend/micro-station-emp/page',
 		method: 'get',
-		query: data
+		params: data
 	})
 }
 // 修改人员信息
@@ -52,7 +52,7 @@ export function editFirePeople(data) {
 	return request({
 		url: '/admin-api/backend/micro-station-emp/update',
 		method: 'post',
-		query: data
+		data
 	})
 }
 

pagesA/fire/fire_station/index.vue

@@ -207,9 +207,9 @@
 					this.isLoaded = true
 					this.tableData = [...this.tableData, ...response.data.list]
 					this.loading = false
-
 					// this.tableData = response.data.list;
-					console.log(this.tableData, 'ppp');
+					console.log(this.tableData[0].id, 'ppp');
+					localStorage.setItem('fireId',this.tableData[0].id)
 				});
 			},
 

pagesA/fire/fire_station/people_fireStation/people_fireStation.vue

@@ -1,22 +1,50 @@
 <template>
 	<view>
-		<button @click="addNewPeople" class="antherBtn">{{tomole}}</button>
-		<u-button type="primary" text="提交测试按钮" @click="addSure" class="antherBtn"></u-button>
+		<div class="useBox">
+			<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>
+					</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 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 membersList" :key="index" style="border-bottom: 1px solid black;">
-			<u--form>
+			<u--form ref="forms">
 				<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" id="nameId" @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.userNum" :placeholder="'请输入身份证号'" />
+					<u-input @blur="userBlur" v-model="person.userNum" :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>
@@ -28,6 +56,36 @@
 				</u-form-item>
 			</u--form>
 		</div>
+		<div>
+			<u-popup :show="showModal" mode="center" @close="closeModal">
+				<view class="modalBox">
+					<u--form labelPosition="left" :model="formbox" ref="uForm">
+						<u-form-item style="width: 350rpx;" label="姓名" prop="formbox.fname" borderBottom ref="item1">
+							<u--input class="insides" v-model="formbox.fname" border="none"></u--input>
+						</u-form-item>
+						<u-form-item style="width: 350rpx;" label="电话号" prop="formbox.fphone" borderBottom ref="item1">
+							<u--input class="insides" v-model="formbox.fphone" border="none"></u--input>
+						</u-form-item>
+						<u-form-item style="width: 490rpx;" label="职务" prop="formbox.fpower" borderBottom ref="item1">
+							<uni-data-select v-model="formbox.fpower" :localdata="range1"
+								@change="change1"></uni-data-select>
+						</u-form-item>
+						<u-form-item style="width: 350rpx;" label="身份证号" prop="userInfo.fuserNum" borderBottom
+							ref="item1">
+							<u--input class="insides" v-model="formbox.fuserNum" border="none"></u--input>
+						</u-form-item>
+						<u-form-item style="width: 350rpx;" label="人员类型" prop="userInfo.fworker" borderBottom
+							ref="item1">
+							<u--input class="insides" v-model="formbox.fworker" border="none"></u--input>
+						</u-form-item>
+					</u--form>
+					<div class="useBox">
+						<button class="antherBtn" @click="makeSureEdit">确认修改</button>
+						<button class="antherBtn" @click="showModal = false">取消修改</button>
+					</div>
+				</view>
+			</u-popup>
+		</div>
 	</view>
 </template>
 
@@ -49,22 +107,48 @@
 				resultId: '',
 				value: 0,
 				range: [{
-						value: 0,
+						value: '0',
 						text: "负责人"
 					},
 					{
-						value: 1,
+						value: '1',
 						text: "值班人员"
 					},
 					{
-						value: 2,
+						value: '2',
+						text: "普通人员"
+					},
+				],
+				range1: [{
+						value: '0',
+						text: "负责人"
+					},
+					{
+						value: '1',
+						text: "值班人员"
+					},
+					{
+						value: '2',
 						text: "普通人员"
 					},
 				],
 				tomole: "添加人员",
 				tableList: [], //显示的人员数组
-				userId:'',
-				smallFireId:'',
+				userId: '', //用户id
+				smallFireId: '',
+				fireStationId: 0, //消防站id
+				showModal: false, //模态框开关
+				formbox: {
+					fname: '',
+					fphone: '',
+					fworker: '',
+					fuserNum: '',
+					fpower: '',
+				},
+				editPeopleId: '', //需要修改人员的id
+				nameRules: false, //对name的正则验证
+				userRules: false, //对身份证的正则验证
+				phoneRules: false, //对电话的正则验证
 			}
 		},
 		methods: {
@@ -80,32 +164,154 @@
 				this.membersList.push(newPerson);
 			},
 			addSure() {
-				if (this.membersList.length !== 0) {
-					let result = this.membersList
-					result = JSON.stringify(result)
-					localStorage.setItem('peopleNum', result)
-				}
-				console.log(this.membersList);
+				creatFirePeople({
+					duty: this.membersList[0].power,
+					empName: this.membersList[0].name,
+					empType: this.membersList[0].worker,
+					idcardno: this.membersList[0].userNum,
+					microstationid: this.fireStationId - 0,
+					mobile: this.membersList[0].phone,
+				}).then(res => {
+					if (res.data) {
+						this.getAllFire()
+						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.membersList = []
+					}
+					console.log(res, 'r11111');
+				})
+				// console.log(this.membersList, 'memberList');
+
 			},
 			change(e) {
 				console.log("e:", e);
 			},
+			change1(e) {
+				console.log("e:", e);
+			},
 			getbackid() {
 				let x = localStorage.getItem('getUserInfo_key')
 				x = JSON.parse(x)
 				this.userId = x.data.userInfo.id
-				getuserfireid({userId:this.userId}).then(res=>{
-					console.log(res,'userfire');
+				getuserfireid({
+					userId: this.userId
+				}).then(res => {
+					console.log(res, 'userfire');
 				})
-				console.log(x.data.userInfo.id,'xxx');
+				// console.log(x.data.userInfo.id, 'xxx');
 			},
 			getAllFire() {
 				getfirepage({
 					pageNo: 1,
-					pageSize: 10
+					pageSize: 10,
+					microstationid: this.fireStationId
 				}).then(res => {
+					// console.log(res, '888');
 					this.tableList = res.data.list
+
+				})
+			},
+			delUser(row) {
+				delFirePeople(row.id).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.getAllFire()
+					}
+				})
+			},
+			editUser(row) {
+				this.editPeopleId = row.id
+				getMesbyid({
+					id: row.id
+				}).then(res => {
+					if (res.data) {
+						this.formbox.fname = res.data.empName
+						this.formbox.fphone = res.data.mobile
+						this.formbox.fpower = res.data.duty
+						this.formbox.fworker = res.data.empType
+						this.formbox.fuserNum = res.data.idcardno
+						this.showModal = true
+
+					}
+				})
+			},
+			closeModal() {
+				this.showModal = false
+			},
+			makeSureEdit() {
+				editFirePeople({
+					duty: this.formbox.fpower,
+					empName: this.formbox.fname,
+					empType: this.formbox.fworker,
+					id: this.editPeopleId,
+					idcardno: this.formbox.fuserNum,
+					microstationid: this.fireStationId - 0,
+					mobile: this.formbox.fphone,
+				}).then(res => {
+					if (res.data) {
+						this.showModal = false
+						this.getAllFire()
+						uni.showToast({
+							title: '编辑成功',
+							icon: 'success', // 图标类型，可选值：'success', 'loading', 'none'
+							duration: 2000, // 持续时间，单位为毫秒，默认值为 1500
+							mask: false, // 是否显示透明蒙层，防止触摸穿透，默认值为 false
+							success() {
+								console.log('toast消息提示显示成功');
+							},
+							fail(err) {
+								console.error('toast消息提示显示失败', err);
+							}
+						});
+					}
+					console.log(res, 'edit');
 				})
+			},
+			// 对表单内name的正则判断
+			nameBlur() {
+				console.log(this.membersList[0].name);
+				if (this.membersList[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.membersList[0].userNum)) {
+					this.userRules = false
+				} else {
+					this.userRules = true
+				}
+			},
+			phoneBlur(){
+				const regex = /^1[3-9]\d{9}$/;
+				if(regex.test(this.membersList[0].phone)){
+					this.phoneRules = false
+				}else{
+					this.phoneRules = true
+				}
 			}
 		},
 		onLoad(options) {
@@ -118,7 +324,12 @@
 			} else {
 				this.tomole = '添加人员信息'
 			}
-			console.log(this.$route.query, 'query'); // 输出传递的参数值
+			let ids = localStorage.getItem("fireId")
+			if (ids) {
+				this.fireStationId = ids
+				// console.log(this.fireStationId, 'fireid');
+			}
+			// console.log(this.$route.query, 'query'); // 输出传递的参数值
 		},
 		onShow() {
 			this.getAllFire()
@@ -139,9 +350,75 @@
 	}
 
 	/deep/ .antherBtn {
-		width: 300rpx;
+		width: 200rpx;
+		height: 50rpx;
 		margin-bottom: 30rpx;
 		background-color: #4DB1B6;
 		color: white;
+		text-align: center;
+		line-height: 50rpx;
+		font-size: 30rpx;
+		border-radius: 20rpx;
+	}
+
+	.tableBox {
+		width: 90%;
+		height: auto;
+		margin: 20rpx auto;
+		margin-left: 40rpx;
+		/* background-color: aqua; */
+	}
+
+	.custom-table {
+		border-collapse: collapse;
+		/* 合并边框 */
+	}
+
+	.custom-table th,
+	.custom-table td {
+		/* width: 39.5%; */
+		border: 1px solid #4DB1B6;
+		/* 添加边框样式 */
+		padding: 8px;
+		/* 设置单元格内边距 */
+	}
+
+	.aTd {
+		/* width: 60%; */
+	}
+
+	.editBtn {
+		width: 100rpx;
+		height: 60rpx;
+		background-color: #4DB1B6;
+		color: white;
+		text-align: center;
+		line-height: 60rpx;
+		border-radius: 10rpx;
+		font-size: 20rpx;
+		margin-bottom: 10rpx;
+	}
+
+	.modalBox {
+		width: 600rpx;
+		height: 880rpx;
+	}
+
+	.insides {
+		width: 400rpx;
+		height: 100rpx;
+		border: 1px solid #4DB1B6;
+	}
+
+	.useBox {
+		display: flex;
+		justify-content: space-around;
+		align-items: center;
+		margin-top: 20rpx;
+	}
+
+	.erroring {
+		color: red;
+		font-size: 20rpx;
 	}
 </style>