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

<template>
	<view>
		<view class="">
			<div class="useBox">
				<button class="useBtn" @click="addNewPeople">新增参会人员</button>
				<button class="useBtn" @click="sureAdd">确认新增测试</button>
				<button class="useBtn" @click="excelOut">导出excel</button>
			</div>
			<div class="tableBox">
				<table class="custom-table">
					<thead>
						<tr>
							<th>名字</th>
							<th>电话</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="item in tableList" :key="item.id">
							<td>{{ item.ppName }}</td>
							<td>{{ item.ppTel }}</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 meetList" :key="index" style="border-bottom: 1px solid black;">
				<u--form>
					<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-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" :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.worker" :placeholder="'请输入人员类型'" />
					</u-form-item> -->
					<u-form-item class="antherStyle">
						<p style="width: 150rpx;margin-left: 20rpx;">职务</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="modalList" ref="uForm">
							<u-form-item style="width: 500rpx;" label="姓名" prop="modalList.name" borderBottom ref="item1">
								<u--input class="modalInput" v-model="modalList.mname" border="none"></u--input>
							</u-form-item>
							<u-form-item style="width: 500rpx;" label="电话号" prop="modalList.mphone" borderBottom ref="item2">
								<u--input class="modalInput" v-model="modalList.mphone" border="none"></u--input>
							</u-form-item>
							<u-form-item style="width: 500rpx;" label="职务" prop="modalList.mpower" borderBottom ref="item3">
								<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>
		</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: '',
				}
			}
		},
		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');
				creatPeople({
					meetingId: parseInt(this.meetId),
					orgId: this.doorId,
					ppDuty: this.meetList[0].power,
					ppName: this.meetList[0].name,
					ppTel: this.meetList[0].phone,
					status: parseInt(this.meetList[0].status)
				}).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()
					}
				})
			},
			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);
							}
						});
					}
				})
			}
		},
		onShow() {
			this.getUser()
			this.getAllPeople()
		},
		onLoad() {
			console.log(this.$route.query, '111');
			this.meetId = this.$route.query.metId
		}
	}
</script>

<style>
	.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: 600rpx;
	}

	.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-bottom: 10rpx;
	}

	.modalInput {
		width: 200rpx;
		border: 1px solid #4DB1B6;
	}
</style>