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

<template>
	<view>
		<navInfo :title="'编辑人员'"></navInfo>
		<view class="bgTopImg" style="height:200rpx;position: fixed;z-index: 9;">
			<image slot="right" class="bgTopImg"></image>
		</view>
		<view class="uni-container">
			<view class=" flex  flex-direction width100">
				<view class="cardBox">
					<uni-card v-for="item in tableList" style="border: 2rpx solid #4DB1B6;">
						<view style="display: flex;justify-content: space-between;align-items: center;">
							<view>
								<text>姓名：{{item.empName}}</text><br>
								<text>电话：{{ item.mobile }}</text><br>
								<text>身份证号：{{item.idcardno}}</text><br>
								<text>职务：{{getDuty(item.empType)}}</text>
							</view>
							<view 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>
							</view>
						</view>
					</uni-card>
				</view>
				<!-- 新增的人员表单项 -->
				<view v-for="(person, index) in membersList" :key="index" style="border-bottom: 1px solid #f8f8f8;">
					<u--form ref="forms" labelPosition="left" labelWidth="150" labelAlign="left">
						<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" @change="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 @change="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" @change="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="selectType"
								@change="change"></uni-data-select>
							<!-- <uni-data-select v-model="person.worker" :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>
				</view>
				<view>
					<u-popup :show="showModal" mode="center" @close="closeModal" :round="10">
						<view class="modalBox">
							<u--form labelPosition="left" :model="formbox" ref="uForm" labelWidth="100"
								labelAlign="left">
								<u-form-item 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 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 label="人员类型" prop="formbox.fpower" borderBottom ref="item1">
									<uni-data-select v-model="formbox.fpower" :localdata="selectType"
										@change="change1"></uni-data-select>
								</u-form-item>
								<u-form-item 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>
							<view class="useBox">
								<button class="antherBtn" @click="makeSureEdit">确认修改</button>

								<button class="antherBtn" @click="showModal = false">取消</button>
							</view>
						</view>
					</u-popup>
				</view>
				<view>
					<u-popup :show="showDel" title="确认删除？" mode="center">
						<view style="width: 400rpx;height: 200rpx;margin: 20rpx 20rpx;">
							<p style="font-size: 35rpx;color: black;">是否删除该数据项？</p>
							<p style="font-size: 20rpx;color: gray;">确认删除？</p>
							<view
								style="display: flex;justify-content: space-around;align-items: center;margin-top: 40rpx;">
								<button class="antherBtn" @click="makeSureDel"
									style="background-color: red;">确认</button>
								<button class="antherBtn" @click="showDel = false">取消</button>
							</view>
						</view>
					</u-popup>
				</view>
				<view>
					<u-modal :show="show123" @confirm="confirm" @cancel="cancel" @close="close" asyncClose
						closeOnClickOverlay showCancelButton confirmColor="red" title="是否删除该数据项" content="确认删除？"
						ref="uModal"></u-modal>
				</view>
				<button @click="addNewPeople" class="circleBtn">+</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		creatFirePeople,
		delFirePeople,
		outexcel,
		getMesbyid,
		getfirelist,
		getfirepage,
		editFirePeople,
		getuserfireid
	} from "../../../../api/peoplefire/index.js"
	import {
		getDict
	} from "../../../../api/dictName/index.js"
	import config from '@/config'
	const baseUrlImg = config.baseUrlImg
	import navInfo from '@/pagesA/components/my-nav/nav'
	export default {
		components: {
			navInfo
		},
		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: '',
				},
				editPeopleId: '', //需要修改人员的id
				nameRules: false, //对name的正则验证
				userRules: false, //对身份证的正则验证
				phoneRules: false, //对电话的正则验证
				showDel: false,
				delId: '',
				show123: false,
				selectType: [], //选项
			}
		},
		methods: {
			getTypePeople() {
				getDict({
					pageNo: 1,
					pageSize: 10,
					dictType: "micro_emp_type"
				}).then(res => {
					this.selectType = res.data.list.map(item => {
						return {
							value: item.value,
							text: item.label
						}
					})
				})
			},
			addNewPeople() {
				if (this.$route.query.addId) {
					const MAX_LENGTH = 1; // 假设你想限制数组最大长度为6
					if (this.membersList.length < MAX_LENGTH) {
						const newPerson = {
							name: '',
							userNum: '',
							phone: '',
							worker: '',
							// 其他字段
						};
						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);
							}
						});
					}
				}else{
					const MAX_LENGTH = 1; // 假设你想限制数组最大长度为6
					if (this.membersList.length < MAX_LENGTH) {
						const newPerson = {
							name: '',
							userNum: '',
							phone: '',
							worker: '',
							// 其他字段
						};
						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() {
				console.log(this.$route.query.addId, 'this.$route.query.addId');
				if (this.$route.query.addId) {
					if (!this.userRules && !this.phoneRules && !this.nameRules) {
						creatFirePeople({
							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 {
					// let ground = localStorage.getItem('empList')
					// if (ground) {
					// 	ground = JSON.parse(ground)
					// 	ground.push({
					// 		...this.membersList[0]
					// 	})
					// 	localStorage.setItem('empList', JSON.stringify(ground))
					// } else {
					// 	localStorage.setItem("empList", JSON.stringify(this.membersList))
					// }
					localStorage.setItem("empList", JSON.stringify(this.membersList))
					uni.navigateBack({
						delta: 1
					})
				}
			},
			change(e) {
				this.membersList[0].worker = e
				// console.log("e:", e);
			},
			change1(e) {
				this.membersList[0].worker = e
				// console.log("e1:", 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,
						empType: 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,
						empType: 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,
						empType: num
					}).then(res => {
						// console.log(res, '888');
						this.tableList = res.data.list
					})
				}

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

			},
			confirm() {
				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.show123 = false
					}
				})
			},
			cancel() {
				this.show123 = false
			},
			close() {
				this.show123 = 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.empType
						// 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 = []
				let list = localStorage.getItem("empList")
				list = JSON.parse(list)
				if (list) {
					localStorage.removeItem('empList')
				}
			},
			// 读取本地缓存
			getGround() {
				let list = localStorage.getItem("empList")
				list = JSON.parse(list)
				if (list) {
					this.membersList = list
				} else {
					this.membersList = []
				}
			}
		},
		onLoad(options) {
			let ids = localStorage.getItem("fireId")
			if (ids) {
				this.fireStationId = ids
			}
		},
		onShow() {
			this.getTypePeople()
			this.getGround()
			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 lang="scss" scoped>
	.uni-container {
		padding: 10px;
		background: #fff;
		// z-index: 9999999;
		position: relative;
	}

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

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

	/deep/ .antherBtn {
		width: 200rpx;
		height: 80rpx;
		margin-bottom: 30rpx;
		background-color: #4DB1B6;
		color: white;
		text-align: center;
		line-height: 80rpx;
		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: 120rpx;
		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: 700rpx;
		height: 750rpx;
		/deep/.uni-select {
			width: 100%;
			height: 50px;
			border: 1px solid #4DB1B6;
		}
		/deep/ .u-line{
			border:none !important;
		}
		/deep/ .uni-input-input{
			padding: 0 10rpx;
		}
		/deep/ .u-form-item__body{
			width: 90%;
		}
	}

	.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: fixed;
		bottom: 20rpx;
		right: 20rpx;
	}

	.cardBox {
		width: 650rpx;
		margin: 100rpx auto 20rpx;
		border-radius: 30rpx;
	}

	.u-form-item__body__left {
		width: 100rpx;
	}

	/deep/.u-button--primary {
		border: none
	}


</style>