|
|
@@ -1,54 +1,54 @@
|
|
|
<template>
|
|
|
<view>
|
|
|
- <view class="">
|
|
|
+ <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>
|
|
|
+ </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="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>
|
|
|
+ <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;">姓名{{(index + 1)}}</p>
|
|
|
- <u-input v-model="person.name" :placeholder="'请输入姓名'" />
|
|
|
+ <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-input v-model="person.status" :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" :placeholder="'请输入电话号'" />
|
|
|
+ <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">
|
|
|
+ <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>
|
|
|
+ <!-- <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>
|
|
|
@@ -56,16 +56,20 @@
|
|
|
<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-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-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-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-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>
|
|
|
@@ -76,6 +80,7 @@
|
|
|
</view>
|
|
|
</u-popup>
|
|
|
</div>
|
|
|
+ <button class="circleBtn" @click="addNewPeople">+</button>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
@@ -120,7 +125,10 @@
|
|
|
mphone: "",
|
|
|
mpower: '',
|
|
|
mstatus: '',
|
|
|
- }
|
|
|
+ },
|
|
|
+ nameRules: false,
|
|
|
+ userRules: false,
|
|
|
+ phoneRules: false,
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
@@ -130,7 +138,11 @@
|
|
|
})
|
|
|
},
|
|
|
getAllPeople() {
|
|
|
- getListPage({meetingId:this.meetId,pageNo:1,pageSize:10}).then(res => {
|
|
|
+ getListPage({
|
|
|
+ meetingId: this.meetId,
|
|
|
+ pageNo: 1,
|
|
|
+ pageSize: 10
|
|
|
+ }).then(res => {
|
|
|
this.tableList = res.data.list
|
|
|
console.log(res, 'all');
|
|
|
})
|
|
|
@@ -159,34 +171,50 @@
|
|
|
},
|
|
|
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()
|
|
|
- }
|
|
|
- })
|
|
|
+ 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: 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()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } 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');
|
|
|
@@ -270,7 +298,32 @@
|
|
|
});
|
|
|
}
|
|
|
})
|
|
|
- }
|
|
|
+ },
|
|
|
+ // 对表单内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()
|
|
|
@@ -284,6 +337,10 @@
|
|
|
</script>
|
|
|
|
|
|
<style>
|
|
|
+ .biBox {
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
.custom-table {
|
|
|
border-collapse: collapse;
|
|
|
/* 合并边框 */
|
|
|
@@ -348,6 +405,7 @@
|
|
|
line-height: 60rpx;
|
|
|
border-radius: 10rpx;
|
|
|
font-size: 20rpx;
|
|
|
+ margin-right: 5rpx;
|
|
|
margin-bottom: 10rpx;
|
|
|
}
|
|
|
|
|
|
@@ -355,4 +413,46 @@
|
|
|
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>
|
liyangzheng