ybxf-security-uniapp/pagesA/fire/fire_station/people_fireStation/people_fireStation.vue

<template>
	<view style="position: relative;">
		<div class="useBox">
			<!-- <button @click="addNewPeople" class="antherBtn">{{tomole}}</button> -->
			<!-- <u-button type="primary" @click="addSure" class="antherBtn">提交</u-button> -->
		</div>
		<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" style="background-color: red;">删除</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;">
			<u--form ref="forms">
				<u-form-item class="typeStyle" :prop="'name' + (index + 1)">
					<p style="width: 150rpx;margin-left: 20rpx;">姓名</p>
					<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 @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" @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">
					<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>
			<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>
		<div>
			<u-popup :show="showDel" title="确认删除？" mode="center">
				<div style="width: 300rpx;height: 200rpx;">
					<p>是否删除该内容？</p>
					<button class="antherBtn" @click="makeSureDel">确认</button>
					<button class="antherBtn" @click="showDel = false">取消</button>
				</div>
			</u-popup>
		</div>
		<button @click="addNewPeople" class="circleBtn">+</button>
	</view>
</template>

<script>
	import {
		creatFirePeople,
		delFirePeople,
		outexcel,
		getMesbyid,
		getfirelist,
		getfirepage,
		editFirePeople,
		getuserfireid
	} from "../../../../api/peoplefire/index.js"
	export default {
		data() {
			return {
				membersList: [], //添加的人员数组
				resultId: '',
				value: 0,
				range: [{
						value: '2',
						text: "负责人"
					},
					{
						value: '1',
						text: "值班人员"
					},
					{
						value: '0',
						text: "普通人员"
					},
				],
				range1: [{
						value: '2',
						text: "负责人"
					},
					{
						value: '1',
						text: "值班人员"
					},
					{
						value: '0',
						text: "普通人员"
					},
				],
				tomole: "添加人员",
				tableList: [], //显示的人员数组
				userId: '', //用户id
				smallFireId: '',
				fireStationId: 0, //消防站id
				showModal: false, //模态框开关
				formbox: {
					fname: '',
					fphone: '',
					fworker: '',
					fuserNum: '',
					fpower: '',
				},
				editPeopleId: '', //需要修改人员的id
				nameRules: false, //对name的正则验证
				userRules: false, //对身份证的正则验证
				phoneRules: false, //对电话的正则验证
				showDel: false,
				delId: '',
			}
		},
		methods: {
			addNewPeople() {
				const MAX_LENGTH = 1; // 假设你想限制数组最大长度为6
				if (this.membersList.length < MAX_LENGTH) {
					const newPerson = {
						name: '',
						userNum: '',
						phone: '',
						worker: '',
						power: '',
						// 其他字段
					};
					this.membersList.push(newPerson);
				} 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);
						}
					});
				}
			},

			addSure() {
				if (this.$route.query.addId) {
					if (!this.userRules && !this.phoneRules && !this.nameRules) {
						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 = []
							}
						})
					} 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);
							}
						});
					}
				} else {
					localStorage.setItem("empList", JSON.stringify(this.membersList))
					uni.navigateBack({
						delta: 1
					})
				}
			},
			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');
				})
				// console.log(x.data.userInfo.id, 'xxx');
			},
			getAllFire() {
				let num = 0
				if (this.$route.query.addId === '1') {
					num = '1'
					getfirepage({
						pageNo: 1,
						pageSize: 10,
						microstationid: this.fireStationId,
						duty: num
					}).then(res => {
						// console.log(res, '888');
						this.tableList = res.data.list
					})
				} else if (this.$route.query.addId === '2') {
					num = '2'
					getfirepage({
						pageNo: 1,
						pageSize: 10,
						microstationid: this.fireStationId,
						duty: num
					}).then(res => {
						// console.log(res, '888');
						this.tableList = res.data.list
					})
				} else if (this.$route.query.addId === '0') {
					num = '0'
					getfirepage({
						pageNo: 1,
						pageSize: 10,
						microstationid: this.fireStationId,
						duty: num
					}).then(res => {
						// console.log(res, '888');
						this.tableList = res.data.list
					})
				}

			},
			delUser(row) {
				this.showDel = true
				this.delId = row.id

			},
			makeSureDel() {
				delFirePeople(this.delId).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()
						this.showDel = false
					}
				})
			},
			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
				}
			},
			cleanList() {
				this.membersList = []
			}
		},
		onLoad(options) {
			let ids = localStorage.getItem("fireId")
			if (ids) {
				this.fireStationId = ids
			}
		},
		onShow() {
			if (this.$route.query.addId) {
				this.getAllFire()
				this.getbackid()
				// console.log(options, 'options')
				this.resultId = this.$route.query.addId
				if (this.resultId === '2') {
					this.tomole = '添加负责人'
				} else if (this.resultId === '1') {
					this.tomole = '添加值班人'
				} else {
					this.tomole = '添加人员信息'
				}

				// console.log(this.$route.query, 'query'); // 输出传递的参数值
			} else {
				return
			}
		},
		computed: {
			getDuty() {
				return (num) => {
					if (num === '1') {
						return '值班人';
					} else if (num === '2') {
						return '负责人';
					} else {
						return '普通人员';
					}
				};
			}
		}

	}
</script>

<style>
	/deep/ .typeStyle {
		width: 650rpx !important;
	}

	/deep/ .antherStyle {
		width: 630rpx;
		height: 100rpx;
		margin-left: 20rpx;
	}

	/deep/ .antherBtn {
		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;
		margin-right: 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;
	}

	.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>