ybxf-security-uniapp/pagesA/fire/metting_regsiter/metting_sigin.vue

<template>
	<view>
		<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><br>
							<text>职务:{{item.ppDuty}}</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="excelOut">导出excel</button> -->
			</div>
			<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;">姓名</p>
						<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-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="typeStyle">
						<p style="width: 150rpx;margin-left: 20rpx;">职务</p>
						<!-- <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>
			<div>
				<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;" prop="modalList.name" borderBottom ref="item1">
								<span style="width: 100rpx;">姓名</span>
								<u--input class="modalInput" v-model="modalList.mname" border="none"></u--input>
							</u-form-item>
							<u-form-item style="width: 500rpx;" prop="modalList.mphone" borderBottom ref="item2">
								<span style="width: 100rpx;">电话号</span>
								<u--input class="modalInput" v-model="modalList.mphone" border="none"></u--input>
							</u-form-item>
							<u-form-item style="width: 500rpx;" prop="modalList.mpower" borderBottom ref="item3">
								<span style="width: 100rpx;">职务</span>
								<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--input class="modalInput" v-model="modalList.mstatus" border="none"></u--input>
							</u-form-item> -->
						</u--form>
						<div style="display: flex;justify-content: space-around;align-items: center;">
							<button class="useBtn" @click="sureUpdate">确认修改</button>
							<button class="useBtn" @click="showModal = false">关闭</button>
						</div>
					</view>
				</u-popup>
			</div>
			<button class="circleBtn" @click="addNewPeople">+</button>
		</view>
	</view>
</template>

<script>
	import {
		creatPeople, //创建参会人员明细
		delPeople, //删除参会人员
		outExcel, //导出excel
		getOne, //获取参会人员明细
		getList, //获取参会人员列表
		getListPage, //获取参会人员分页
		editPeople, //修改参会人员明细
	} from '../../../api/meetpeople/index.js'
	import {
		getUserProfile,
	} from "@/api/system/user"
	export default {
		data() {
			return {
				doorId: '', //部门id
				meetId: '', //会议id
				meetList: [],
				range: [{
						value: 0,
						text: "负责人"
					},
					{
						value: 1,
						text: "值班人员"
					},
					{
						value: 2,
						text: "普通人员"
					},
				],
				tableList: [], //已经报名参会的人员
				editId: "", //需要修改人员的id
				showModal: false, //修改的模态框
				modalList: {
					mname: '',
					mphone: "",
					mpower: '',
					mstatus: '',
				},
				nameRules: false,
				userRules: false,
				phoneRules: false,
			}
		},
		methods: {
			getUser() {
				getUserProfile().then(res => {
					this.doorId = res.data.dept.id
				})
			},
			getAllPeople() {
				getListPage({
					meetingId: this.meetId,
					pageNo: 1,
					pageSize: 10
				}).then(res => {
					this.tableList = res.data.list
					console.log(res, 'all');
				})
			},
			addNewPeople() {
				if (this.meetList.length === 0) {
					const newPerson = {
						name: '',
						phone: '',
						power: "",
						status: "",
					};
					this.meetList.push(newPerson);
				}
			},
			addSure() {
				if (this.meetList.length !== 0) {
					let result = this.meetList
					result = JSON.stringify(result)
					localStorage.setItem('meetPeople', result)
				}
				console.log(this.meetList);
			},
			change(e) {
				console.log("e:", e);
			},
			sureAdd() {
				console.log(this.meetList[0], '123');
				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: 1,
					}).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');
				delPeople(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.getAllPeople()
					}
				})
			},
			editUser(row) {
				getOne({
					id: row.id
				}).then(res => {
					console.log(res.data, 'data');
					this.editId = res.data.id
					this.modalList.mname = row.ppName
					this.modalList.mphone = res.data.ppTel
					this.modalList.mpower = res.data.ppDuty
					this.modalList.mstatus = res.data.status
					this.showModal = true
				})
			},
			excelOut() {
				outExcel().then(res => {
					if (res) {
						uni.showToast({
							title: '导出成功',
							icon: 'success', // 图标类型，可选值：'success', 'loading', 'none'
							duration: 2000, // 持续时间，单位为毫秒，默认值为 1500
							mask: false, // 是否显示透明蒙层，防止触摸穿透，默认值为 false
							success() {
								console.log('toast消息提示显示成功');
							},
							fail(err) {
								console.error('toast消息提示显示失败', err);
							}
						});
					}
				})
			},
			closeModal() {
				this.showModal = false
			},
			sureUpdate() {
				editPeople({
					id: this.editId,
					meetingId: parseInt(this.meetId),
					orgId: this.doorId,
					ppDuty: this.modalList.mpower,
					ppName: this.modalList.mname,
					ppTel: this.modalList.mphone,
					status: this.modalList.mstatus,
				}).then(res => {
					console.log(res, 'update');
					if (res.data) {
						this.showModal = false
						this.getAllPeople()
						uni.showToast({
							title: '修改成功',
							icon: 'success', // 图标类型，可选值：'success', 'loading', 'none'
							duration: 2000, // 持续时间，单位为毫秒，默认值为 1500
							mask: false, // 是否显示透明蒙层，防止触摸穿透，默认值为 false
							success() {
								console.log('toast消息提示显示成功');
							},
							fail(err) {
								console.error('toast消息提示显示失败', err);
							}
						});
					}
				})
			},
			// 对表单内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()
			this.getAllPeople()
		},
		onLoad() {
			console.log(this.$route.query, '111');
			this.meetId = this.$route.query.metId
		}
	}
</script>

<style>
	.biBox {
		position: relative;
	}

	.custom-table {
		border-collapse: collapse;
		/* 合并边框 */
	}

	.custom-table th,
	.custom-table td {
		width: 39.5%;
		border: 1px solid #4DB1B6;
		/* 添加边框样式 */
		padding: 8px;
		/* 设置单元格内边距 */
	}

	.tableBox {
		width: 90%;
		height: auto;
		margin: 20rpx auto;
		margin-left: 60rpx;
		/* background-color: aqua; */
	}

	.aTd {
		width: 60%;
	}

	.modalBox {
		width: 600rpx;
		height: 400rpx;
		margin-left: 60rpx;
	}

	.text {
		color: #4DB1B6;
	}

	.useBox {
		width: 90%;
		height: auto;
		margin: 20rpx auto;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.useBtn {
		width: 200rpx;
		height: 60rpx;
		background-color: #4DB1B6;
		color: white;
		text-align: center;
		line-height: 60rpx;
		border-radius: 10rpx;
		font-size: 20rpx;
	}

	.editBtn {
		width: 100rpx;
		height: 60rpx;
		background-color: #4DB1B6;
		color: white;
		text-align: center;
		line-height: 60rpx;
		border-radius: 10rpx;
		font-size: 20rpx;
		margin-right: 5rpx;
		margin-bottom: 10rpx;
	}

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