metting_sigin.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459
  1. <template>
  2. <view>
  3. <view class="bigBox">
  4. <div class="cardBox">
  5. <uni-card v-for="item in tableList" class="mesCard">
  6. <div style="display: flex;justify-content: space-between;align-items: center;">
  7. <div>
  8. <text>姓名:{{item.ppName}}</text><br>
  9. <text>电话:{{ item.ppTel }}</text><br>
  10. <text>职务:{{item.ppDuty}}</text>
  11. </div>
  12. <div style="display: flex;justify-content: space-around;align-items: center;">
  13. <button @click="delUser(item)" class="editBtn">删除</button>
  14. <button @click="editUser(item)" class="editBtn">编辑</button>
  15. </div>
  16. </div>
  17. </uni-card>
  18. </div>
  19. <div class="useBox">
  20. <!-- <button class="useBtn" @click="addNewPeople">新增参会人员</button> -->
  21. <!-- <button class="useBtn" @click="sureAdd">确认新增</button> -->
  22. <!-- <button class="useBtn" @click="excelOut">导出excel</button> -->
  23. </div>
  24. <div v-for="(person, index) in meetList" :key="index" class="addNewBox">
  25. <u--form style="margin-left: 55rpx;">
  26. <u-form-item class="typeStyle" :prop="'name' + (index + 1)">
  27. <p style="width: 150rpx;margin-left: 20rpx;">姓名</p>
  28. <u-input v-model="person.name" @blur="nameBlur" :placeholder="'请输入姓名'" />
  29. <span class="erroring" v-if="nameRules">请输入名称</span>
  30. </u-form-item>
  31. <!-- <u-form-item class="typeStyle" :prop="'age' + (index + 1)">
  32. <p style="width: 150rpx;margin-left: 20rpx;">状态</p>
  33. <u-input v-model="person.status" :placeholder="'请输入状态'" />
  34. </u-form-item> -->
  35. <!-- 其他人员信息字段 -->
  36. <u-form-item class="typeStyle" :prop="'age' + (index + 1)">
  37. <p style="width: 150rpx;margin-left: 20rpx;">电话号</p>
  38. <u-input v-model="person.phone" @blur="phoneBlur" :placeholder="'请输入电话号'" />
  39. <span class="erroring" v-if="phoneRules">电话号有误</span>
  40. </u-form-item>
  41. <!-- <u-form-item class="typeStyle" :prop="'age' + (index + 1)">
  42. <p style="width: 150rpx;margin-left: 20rpx;">人员类型</p>
  43. <u-input v-model="person.worker" :placeholder="'请输入人员类型'" />
  44. </u-form-item> -->
  45. <u-form-item class="typeStyle">
  46. <p style="width: 150rpx;margin-left: 20rpx;">职务</p>
  47. <!-- <uni-data-select v-model="person.power" :localdata="range" @change="change"></uni-data-select> -->
  48. <u-input v-model="person.power" :placeholder="'请输入职务'" />
  49. </u-form-item>
  50. <u-form-item class="antherStyle">
  51. <button class="useBtn" @click="sureAdd">确认新增</button>
  52. </u-form-item>
  53. </u--form>
  54. </div>
  55. <div>
  56. <u-popup :show="showModal" mode="center" @close="closeModal">
  57. <view class="modalBox">
  58. <u--form labelPosition="left" :model="modalList" ref="uForm">
  59. <u-form-item style="width: 500rpx;" prop="modalList.name" borderBottom ref="item1">
  60. <span style="width: 100rpx;">姓名</span>
  61. <u--input class="modalInput" v-model="modalList.mname" border="none"></u--input>
  62. </u-form-item>
  63. <u-form-item style="width: 500rpx;" prop="modalList.mphone" borderBottom ref="item2">
  64. <span style="width: 100rpx;">电话号</span>
  65. <u--input class="modalInput" v-model="modalList.mphone" border="none"></u--input>
  66. </u-form-item>
  67. <u-form-item style="width: 500rpx;" prop="modalList.mpower" borderBottom ref="item3">
  68. <span style="width: 100rpx;">职务</span>
  69. <u--input class="modalInput" v-model="modalList.mpower" border="none"></u--input>
  70. </u-form-item>
  71. <!-- <u-form-item style="width: 500rpx;" label="状态" prop="modalList.mstatus" borderBottom
  72. ref="item4">
  73. <u--input class="modalInput" v-model="modalList.mstatus" border="none"></u--input>
  74. </u-form-item> -->
  75. </u--form>
  76. <div style="display: flex;justify-content: space-around;align-items: center;">
  77. <button class="useBtn" @click="sureUpdate">确认修改</button>
  78. <button class="useBtn" @click="showModal = false">关闭</button>
  79. </div>
  80. </view>
  81. </u-popup>
  82. </div>
  83. <button class="circleBtn" @click="addNewPeople">+</button>
  84. </view>
  85. </view>
  86. </template>
  87. <script>
  88. import {
  89. creatPeople, //创建参会人员明细
  90. delPeople, //删除参会人员
  91. outExcel, //导出excel
  92. getOne, //获取参会人员明细
  93. getList, //获取参会人员列表
  94. getListPage, //获取参会人员分页
  95. editPeople, //修改参会人员明细
  96. } from '../../../api/meetpeople/index.js'
  97. import {
  98. getUserProfile,
  99. } from "@/api/system/user"
  100. export default {
  101. data() {
  102. return {
  103. doorId: '', //部门id
  104. meetId: '', //会议id
  105. meetList: [],
  106. range: [{
  107. value: 0,
  108. text: "负责人"
  109. },
  110. {
  111. value: 1,
  112. text: "值班人员"
  113. },
  114. {
  115. value: 2,
  116. text: "普通人员"
  117. },
  118. ],
  119. tableList: [], //已经报名参会的人员
  120. editId: "", //需要修改人员的id
  121. showModal: false, //修改的模态框
  122. modalList: {
  123. mname: '',
  124. mphone: "",
  125. mpower: '',
  126. mstatus: '',
  127. },
  128. nameRules: false,
  129. userRules: false,
  130. phoneRules: false,
  131. }
  132. },
  133. methods: {
  134. getUser() {
  135. getUserProfile().then(res => {
  136. this.doorId = res.data.dept.id
  137. })
  138. },
  139. getAllPeople() {
  140. getListPage({
  141. meetingId: this.meetId,
  142. pageNo: 1,
  143. pageSize: 10
  144. }).then(res => {
  145. this.tableList = res.data.list
  146. console.log(res, 'all');
  147. })
  148. },
  149. addNewPeople() {
  150. if (this.meetList.length === 0) {
  151. const newPerson = {
  152. name: '',
  153. phone: '',
  154. power: "",
  155. status: "",
  156. };
  157. this.meetList.push(newPerson);
  158. }
  159. },
  160. addSure() {
  161. if (this.meetList.length !== 0) {
  162. let result = this.meetList
  163. result = JSON.stringify(result)
  164. localStorage.setItem('meetPeople', result)
  165. }
  166. console.log(this.meetList);
  167. },
  168. change(e) {
  169. console.log("e:", e);
  170. },
  171. sureAdd() {
  172. console.log(this.meetList[0], '123');
  173. if (!this.userRules && !this.phoneRules && !this.nameRules) {
  174. creatPeople({
  175. meetingId: parseInt(this.meetId),
  176. orgId: this.doorId,
  177. ppDuty: this.meetList[0].power,
  178. ppName: this.meetList[0].name,
  179. ppTel: this.meetList[0].phone,
  180. status: 1,
  181. }).then(res => {
  182. if (res.data) {
  183. uni.showToast({
  184. title: '新增成功',
  185. icon: 'success', // 图标类型,可选值:'success', 'loading', 'none'
  186. duration: 2000, // 持续时间,单位为毫秒,默认值为 1500
  187. mask: false, // 是否显示透明蒙层,防止触摸穿透,默认值为 false
  188. success() {
  189. console.log('toast消息提示显示成功');
  190. },
  191. fail(err) {
  192. console.error('toast消息提示显示失败', err);
  193. }
  194. });
  195. this.meetList = []
  196. // uni.navigateBack({
  197. // delta: 1 // 返回的页面数,1 表示返回上一级
  198. // })
  199. this.getAllPeople()
  200. }
  201. })
  202. } else {
  203. uni.showToast({
  204. title: '请检查表单项',
  205. icon: 'none', // 图标类型,可选值:'success', 'loading', 'none'
  206. duration: 2000, // 持续时间,单位为毫秒,默认值为 1500
  207. mask: false, // 是否显示透明蒙层,防止触摸穿透,默认值为 false
  208. success() {
  209. console.log('toast消息提示显示成功');
  210. },
  211. fail(err) {
  212. console.error('toast消息提示显示失败', err);
  213. }
  214. });
  215. }
  216. },
  217. delUser(row) {
  218. console.log(row, '123');
  219. delPeople(row.id).then(res => {
  220. if (res.data) {
  221. uni.showToast({
  222. title: '删除成功',
  223. icon: 'success', // 图标类型,可选值:'success', 'loading', 'none'
  224. duration: 2000, // 持续时间,单位为毫秒,默认值为 1500
  225. mask: false, // 是否显示透明蒙层,防止触摸穿透,默认值为 false
  226. success() {
  227. console.log('toast消息提示显示成功');
  228. },
  229. fail(err) {
  230. console.error('toast消息提示显示失败', err);
  231. }
  232. });
  233. this.getAllPeople()
  234. }
  235. })
  236. },
  237. editUser(row) {
  238. getOne({
  239. id: row.id
  240. }).then(res => {
  241. console.log(res.data, 'data');
  242. this.editId = res.data.id
  243. this.modalList.mname = row.ppName
  244. this.modalList.mphone = res.data.ppTel
  245. this.modalList.mpower = res.data.ppDuty
  246. this.modalList.mstatus = res.data.status
  247. this.showModal = true
  248. })
  249. },
  250. excelOut() {
  251. outExcel().then(res => {
  252. if (res) {
  253. uni.showToast({
  254. title: '导出成功',
  255. icon: 'success', // 图标类型,可选值:'success', 'loading', 'none'
  256. duration: 2000, // 持续时间,单位为毫秒,默认值为 1500
  257. mask: false, // 是否显示透明蒙层,防止触摸穿透,默认值为 false
  258. success() {
  259. console.log('toast消息提示显示成功');
  260. },
  261. fail(err) {
  262. console.error('toast消息提示显示失败', err);
  263. }
  264. });
  265. }
  266. })
  267. },
  268. closeModal() {
  269. this.showModal = false
  270. },
  271. sureUpdate() {
  272. editPeople({
  273. id: this.editId,
  274. meetingId: parseInt(this.meetId),
  275. orgId: this.doorId,
  276. ppDuty: this.modalList.mpower,
  277. ppName: this.modalList.mname,
  278. ppTel: this.modalList.mphone,
  279. status: this.modalList.mstatus,
  280. }).then(res => {
  281. console.log(res, 'update');
  282. if (res.data) {
  283. this.showModal = false
  284. this.getAllPeople()
  285. uni.showToast({
  286. title: '修改成功',
  287. icon: 'success', // 图标类型,可选值:'success', 'loading', 'none'
  288. duration: 2000, // 持续时间,单位为毫秒,默认值为 1500
  289. mask: false, // 是否显示透明蒙层,防止触摸穿透,默认值为 false
  290. success() {
  291. console.log('toast消息提示显示成功');
  292. },
  293. fail(err) {
  294. console.error('toast消息提示显示失败', err);
  295. }
  296. });
  297. }
  298. })
  299. },
  300. // 对表单内name的正则判断
  301. nameBlur() {
  302. console.log(this.meetList);
  303. if (this.meetList[0].name === '') {
  304. this.nameRules = true
  305. } else {
  306. this.nameRules = false
  307. }
  308. },
  309. userBlur() {
  310. 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]$/;
  311. if (regex.test(this.meetList[0].status)) {
  312. this.userRules = false
  313. } else {
  314. this.userRules = true
  315. }
  316. },
  317. phoneBlur() {
  318. const regex = /^1[3-9]\d{9}$/;
  319. if (regex.test(this.meetList[0].phone)) {
  320. this.phoneRules = false
  321. } else {
  322. this.phoneRules = true
  323. }
  324. },
  325. },
  326. onShow() {
  327. this.getUser()
  328. this.getAllPeople()
  329. },
  330. onLoad() {
  331. console.log(this.$route.query, '111');
  332. this.meetId = this.$route.query.metId
  333. }
  334. }
  335. </script>
  336. <style>
  337. .biBox {
  338. position: relative;
  339. }
  340. .custom-table {
  341. border-collapse: collapse;
  342. /* 合并边框 */
  343. }
  344. .custom-table th,
  345. .custom-table td {
  346. width: 39.5%;
  347. border: 1px solid #4DB1B6;
  348. /* 添加边框样式 */
  349. padding: 8px;
  350. /* 设置单元格内边距 */
  351. }
  352. .tableBox {
  353. width: 90%;
  354. height: auto;
  355. margin: 20rpx auto;
  356. margin-left: 60rpx;
  357. /* background-color: aqua; */
  358. }
  359. .aTd {
  360. width: 60%;
  361. }
  362. .modalBox {
  363. width: 600rpx;
  364. height: 400rpx;
  365. margin-left: 60rpx;
  366. }
  367. .text {
  368. color: #4DB1B6;
  369. }
  370. .useBox {
  371. width: 90%;
  372. height: auto;
  373. margin: 20rpx auto;
  374. display: flex;
  375. justify-content: space-around;
  376. align-items: center;
  377. }
  378. .useBtn {
  379. width: 200rpx;
  380. height: 60rpx;
  381. background-color: #4DB1B6;
  382. color: white;
  383. text-align: center;
  384. line-height: 60rpx;
  385. border-radius: 10rpx;
  386. font-size: 20rpx;
  387. }
  388. .editBtn {
  389. width: 100rpx;
  390. height: 60rpx;
  391. background-color: #4DB1B6;
  392. color: white;
  393. text-align: center;
  394. line-height: 60rpx;
  395. border-radius: 10rpx;
  396. font-size: 20rpx;
  397. margin-right: 5rpx;
  398. margin-bottom: 10rpx;
  399. }
  400. .modalInput {
  401. width: 200rpx;
  402. border: 1px solid #4DB1B6;
  403. }
  404. .circleBtn {
  405. width: 100rpx;
  406. height: 100rpx;
  407. border-radius: 50%;
  408. font-size: 90rpx;
  409. text-align: center;
  410. line-height: 100rpx;
  411. color: white;
  412. background-color: #4EB0B5;
  413. position: absolute;
  414. top: 1300rpx;
  415. left: 590rpx;
  416. }
  417. .cardBox {
  418. width: 600rpx;
  419. margin: 30rpx auto;
  420. border-radius: 30rpx;
  421. }
  422. .typeStyle {
  423. width: 600rpx;
  424. }
  425. .addNewBox {
  426. /* width: 800rpx; */
  427. /* height: auto; */
  428. border: none;
  429. /* margin: 10rpx auto; */
  430. }
  431. .erroring {
  432. font-size: 20rpx;
  433. color: red;
  434. }
  435. .mesCard {
  436. /* box-shadow: 1 1 1 1 #4DB1B6; */
  437. /* background-color: red; */
  438. border: 2rpx solid #4DB1B6;
  439. }
  440. </style>