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

<template>
	<view>
		<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 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" 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>
		</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>

<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: '0',
						text: "负责人"
					},
					{
						value: '1',
						text: "值班人员"
					},
					{
						value: '2',
						text: "普通人员"
					},
				],
				range1: [{
						value: '0',
						text: "负责人"
					},
					{
						value: '1',
						text: "值班人员"
					},
					{
						value: '2',
						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, //对电话的正则验证
			}
		},
		methods: {
			addNewPeople() {
				const newPerson = {
					name: '',
					userNum: '',
					phone: '',
					worker: "",
					power: "",
					// 其他字段
				};
				this.membersList.push(newPerson);
			},
			addSure() {
				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');
				})
				// console.log(x.data.userInfo.id, 'xxx');
			},
			getAllFire() {
				getfirepage({
					pageNo: 1,
					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) {
			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 = '添加人员信息'
			}
			let ids = localStorage.getItem("fireId")
			if (ids) {
				this.fireStationId = ids
				// console.log(this.fireStationId, 'fireid');
			}
			// console.log(this.$route.query, 'query'); // 输出传递的参数值
		},
		onShow() {
			this.getAllFire()
			this.getbackid()
		}
	}
</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;
	}

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