people_fireStation.vue 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648
  1. <template>
  2. <view style="position: relative;">
  3. <navInfo :title="'编辑人员'"></navInfo>
  4. <view class="bgTopImg" style="height:200rpx;">
  5. <image slot="right" class="bgTopImg"></image>
  6. </view>
  7. <div class="cardBox">
  8. <uni-card v-for="item in tableList" style="border: 2rpx solid #4DB1B6;">
  9. <div style="display: flex;justify-content: space-between;align-items: center;">
  10. <div>
  11. <text>姓名:{{item.empName}}</text><br>
  12. <text>电话:{{ item.mobile }}</text><br>
  13. <text>身份证号:{{item.idcardno}}</text><br>
  14. <text>职务:{{getDuty(item.empType)}}</text>
  15. </div>
  16. <div style="display: flex;justify-content: space-around;align-items: center;">
  17. <button @click="delUser(item)" class="editBtn" style="background-color: red;">删除</button>
  18. <button @click="editUser(item)" class="editBtn">编辑</button>
  19. </div>
  20. </div>
  21. </uni-card>
  22. </div>
  23. <!-- 新增的人员表单项 -->
  24. <div v-for="(person, index) in membersList" :key="index"
  25. style="border-bottom: 1px solid black;margin-top: 100rpx;">
  26. <u--form ref="forms">
  27. <u-form-item class="typeStyle" :prop="'name' + (index + 1)">
  28. <p style="width: 150rpx;margin-left: 20rpx;">姓名</p>
  29. <u-input v-model="person.name" id="nameId" @change="nameBlur" :placeholder="'请输入姓名'" />
  30. <span class="erroring" v-if="nameRules">请输入名称</span>
  31. </u-form-item>
  32. <u-form-item class="typeStyle" :prop="'age' + (index + 1)">
  33. <p style="width: 150rpx;margin-left: 20rpx;">身份证号</p>
  34. <u-input @change="userBlur" v-model="person.userNum" :placeholder="'请输入身份证号'" />
  35. <span class="erroring" v-if="userRules">身份证号有误</span>
  36. </u-form-item>
  37. <!-- 其他人员信息字段 -->
  38. <u-form-item class="typeStyle" :prop="'age' + (index + 1)">
  39. <p style="width: 150rpx;margin-left: 20rpx;">电话号</p>
  40. <u-input v-model="person.phone" @change="phoneBlur" :placeholder="'请输入电话号'" />
  41. <span class="erroring" v-if="phoneRules">电话号有误</span>
  42. </u-form-item>
  43. <!-- <u-form-item class="typeStyle" :prop="'age' + (index + 1)">
  44. <p style="width: 150rpx;margin-left: 20rpx;">人员类型</p>
  45. <u-input v-model="person.worker" :placeholder="'请输入人员类型'" />
  46. </u-form-item> -->
  47. <u-form-item class="antherStyle">
  48. <p style="width: 150rpx;">人员类型</p>
  49. <uni-data-select v-model="person.power" :localdata="selectType" @change="change"></uni-data-select>
  50. <!-- <uni-data-select v-model="person.worker" :localdata="range" @change="change"></uni-data-select> -->
  51. </u-form-item>
  52. <u-form-item>
  53. <u-button type="primary" @click="addSure" class="antherBtn">提交</u-button>
  54. <u-button type="primary" @click="cleanList" class="antherBtn">取消</u-button>
  55. </u-form-item>
  56. </u--form>
  57. </div>
  58. <div>
  59. <u-popup :show="showModal" mode="center" @close="closeModal" :round="10">
  60. <view class="modalBox">
  61. <u--form labelPosition="left" :model="formbox" ref="uForm" style="width: 100%;">
  62. <u-form-item style="width: 400rpx;" label="姓名" prop="formbox.fname" borderBottom ref="item1">
  63. <u--input class="insides" v-model="formbox.fname" border="none"></u--input>
  64. </u-form-item>
  65. <u-form-item style="width: 350rpx;" label="电话号" prop="formbox.fphone" borderBottom ref="item1">
  66. <u--input class="insides" v-model="formbox.fphone" border="none"></u--input>
  67. </u-form-item>
  68. <u-form-item style="width: 490rpx;" label="人员类型" prop="formbox.fpower" borderBottom ref="item1">
  69. <uni-data-select v-model="formbox.fpower" :localdata="selectType"
  70. @change="change1"></uni-data-select>
  71. </u-form-item>
  72. <u-form-item style="width: 350rpx;" label="身份证号" prop="userInfo.fuserNum" borderBottom
  73. ref="item1">
  74. <u--input class="insides" v-model="formbox.fuserNum" border="none"></u--input>
  75. </u-form-item>
  76. <!-- <u-form-item style="width: 350rpx;" label="人员类型" prop="userInfo.fworker" borderBottom
  77. ref="item1">
  78. <u--input class="insides" v-model="formbox.fworker" border="none"></u--input>
  79. </u-form-item> -->
  80. </u--form>
  81. <div class="useBox">
  82. <button class="antherBtn" @click="makeSureEdit">确认修改</button>
  83. <button class="antherBtn" @click="showModal = false">取消</button>
  84. </div>
  85. </view>
  86. </u-popup>
  87. </div>
  88. <div>
  89. <u-popup :show="showDel" title="确认删除?" mode="center">
  90. <div style="width: 400rpx;height: 200rpx;margin: 20rpx 20rpx;">
  91. <p style="font-size: 35rpx;color: black;">是否删除该数据项?</p>
  92. <p style="font-size: 20rpx;color: gray;">确认删除?</p>
  93. <div style="display: flex;justify-content: space-around;align-items: center;margin-top: 40rpx;">
  94. <button class="antherBtn" @click="makeSureDel" style="background-color: red;">确认</button>
  95. <button class="antherBtn" @click="showDel = false">取消</button>
  96. </div>
  97. </div>
  98. </u-popup>
  99. </div>
  100. <div>
  101. <u-modal :show="show123" @confirm="confirm" @cancel="cancel" @close="close" asyncClose closeOnClickOverlay
  102. showCancelButton confirmColor="red" title="是否删除该数据项" content="确认删除?" ref="uModal"></u-modal>
  103. </div>
  104. <button @click="addNewPeople" class="circleBtn">+</button>
  105. </view>
  106. </template>
  107. <script>
  108. import {
  109. creatFirePeople,
  110. delFirePeople,
  111. outexcel,
  112. getMesbyid,
  113. getfirelist,
  114. getfirepage,
  115. editFirePeople,
  116. getuserfireid
  117. } from "../../../../api/peoplefire/index.js"
  118. import {
  119. getDict
  120. } from "../../../../api/dictName/index.js"
  121. import config from '@/config'
  122. const baseUrlImg = config.baseUrlImg
  123. import navInfo from '@/pagesA/components/my-nav/nav'
  124. export default {
  125. components: {
  126. navInfo
  127. },
  128. data() {
  129. return {
  130. membersList: [], //添加的人员数组
  131. resultId: '',
  132. value: 0,
  133. range: [{
  134. value: '2',
  135. text: "站长"
  136. },
  137. {
  138. value: '1',
  139. text: "值班人员"
  140. },
  141. {
  142. value: '0',
  143. text: "普通人员"
  144. },
  145. ],
  146. range1: [{
  147. value: '2',
  148. text: "负责人"
  149. },
  150. {
  151. value: '1',
  152. text: "值班人员"
  153. },
  154. {
  155. value: '0',
  156. text: "普通人员"
  157. },
  158. ],
  159. tomole: "添加人员",
  160. tableList: [], //显示的人员数组
  161. userId: '', //用户id
  162. smallFireId: '',
  163. fireStationId: 0, //消防站id
  164. showModal: false, //模态框开关
  165. formbox: {
  166. fname: '',
  167. fphone: '',
  168. fworker: '',
  169. fuserNum: '',
  170. },
  171. editPeopleId: '', //需要修改人员的id
  172. nameRules: false, //对name的正则验证
  173. userRules: false, //对身份证的正则验证
  174. phoneRules: false, //对电话的正则验证
  175. showDel: false,
  176. delId: '',
  177. show123: false,
  178. selectType: [], //选项
  179. }
  180. },
  181. methods: {
  182. getTypePeople() {
  183. getDict({
  184. pageNo: 1,
  185. pageSize: 10,
  186. dictType: "micro_emp_type"
  187. }).then(res => {
  188. this.selectType = res.data.list.map(item => {
  189. return {
  190. value: item.value,
  191. text: item.label
  192. }
  193. })
  194. })
  195. },
  196. addNewPeople() {
  197. if (this.$route.query.addId) {
  198. const MAX_LENGTH = 1; // 假设你想限制数组最大长度为6
  199. if (this.membersList.length < MAX_LENGTH) {
  200. const newPerson = {
  201. name: '',
  202. userNum: '',
  203. phone: '',
  204. worker: '',
  205. // 其他字段
  206. };
  207. this.membersList.push(newPerson);
  208. } else {
  209. // 达到最大数量,给出提示或执行其他操作
  210. uni.showToast({
  211. title: '只支持一位添加',
  212. icon: 'none', // 图标类型,可选值:'success', 'loading', 'none'
  213. duration: 2000, // 持续时间,单位为毫秒,默认值为 1500
  214. mask: false, // 是否显示透明蒙层,防止触摸穿透,默认值为 false
  215. success() {
  216. // console.log('toast消息提示显示成功');
  217. },
  218. fail(err) {
  219. // console.error('toast消息提示显示失败', err);
  220. }
  221. });
  222. }
  223. }else{
  224. const MAX_LENGTH = 1; // 假设你想限制数组最大长度为6
  225. if (this.membersList.length < MAX_LENGTH) {
  226. const newPerson = {
  227. name: '',
  228. userNum: '',
  229. phone: '',
  230. worker: '',
  231. // 其他字段
  232. };
  233. this.membersList.push(newPerson);
  234. } else {
  235. // 达到最大数量,给出提示或执行其他操作
  236. uni.showToast({
  237. title: '超出限制',
  238. icon: 'none', // 图标类型,可选值:'success', 'loading', 'none'
  239. duration: 2000, // 持续时间,单位为毫秒,默认值为 1500
  240. mask: false, // 是否显示透明蒙层,防止触摸穿透,默认值为 false
  241. success() {
  242. // console.log('toast消息提示显示成功');
  243. },
  244. fail(err) {
  245. // console.error('toast消息提示显示失败', err);
  246. }
  247. });
  248. }
  249. }
  250. },
  251. addSure() {
  252. if (this.$route.query.addId) {
  253. if (!this.userRules && !this.phoneRules && !this.nameRules) {
  254. // console.log(this.membersList[0].worker,'988');
  255. creatFirePeople({
  256. empName: this.membersList[0].name,
  257. empType: this.membersList[0].worker,
  258. idcardno: this.membersList[0].userNum,
  259. microstationid: this.fireStationId - 0,
  260. mobile: this.membersList[0].phone,
  261. }).then(res => {
  262. if (res.data) {
  263. this.getAllFire()
  264. uni.showToast({
  265. title: '添加成功',
  266. icon: 'success', // 图标类型,可选值:'success', 'loading', 'none'
  267. duration: 2000, // 持续时间,单位为毫秒,默认值为 1500
  268. mask: false, // 是否显示透明蒙层,防止触摸穿透,默认值为 false
  269. success() {
  270. // console.log('toast消息提示显示成功');
  271. },
  272. fail(err) {
  273. // console.error('toast消息提示显示失败', err);
  274. }
  275. });
  276. this.membersList = []
  277. }
  278. })
  279. } else {
  280. uni.showToast({
  281. title: '请检查表单项',
  282. icon: 'none', // 图标类型,可选值:'success', 'loading', 'none'
  283. duration: 2000, // 持续时间,单位为毫秒,默认值为 1500
  284. mask: false, // 是否显示透明蒙层,防止触摸穿透,默认值为 false
  285. success() {
  286. // console.log('toast消息提示显示成功');
  287. },
  288. fail(err) {
  289. // console.error('toast消息提示显示失败', err);
  290. }
  291. });
  292. }
  293. } else {
  294. // let ground = localStorage.getItem('empList')
  295. // if (ground) {
  296. // ground = JSON.parse(ground)
  297. // ground.push({
  298. // ...this.membersList[0]
  299. // })
  300. // localStorage.setItem('empList', JSON.stringify(ground))
  301. // } else {
  302. // localStorage.setItem("empList", JSON.stringify(this.membersList))
  303. // }
  304. localStorage.setItem("empList", JSON.stringify(this.membersList))
  305. uni.navigateBack({
  306. delta: 1
  307. })
  308. }
  309. },
  310. change(e) {
  311. this.membersList[0].worker = e
  312. // console.log("e:", e);
  313. },
  314. change1(e) {
  315. this.membersList[0].worker = e
  316. // console.log("e1:", e);
  317. },
  318. getbackid() {
  319. let x = localStorage.getItem('getUserInfo_key')
  320. x = JSON.parse(x)
  321. this.userId = x.data.userInfo.id
  322. getuserfireid({
  323. userId: this.userId
  324. }).then(res => {
  325. // console.log(res, 'userfire');
  326. })
  327. // console.log(x.data.userInfo.id, 'xxx');
  328. },
  329. getAllFire() {
  330. let num = 0
  331. if (this.$route.query.addId === '1') {
  332. num = '1'
  333. getfirepage({
  334. pageNo: 1,
  335. pageSize: 10,
  336. microstationid: this.fireStationId,
  337. empType: num
  338. }).then(res => {
  339. // console.log(res, '888');
  340. this.tableList = res.data.list
  341. })
  342. } else if (this.$route.query.addId === '2') {
  343. num = '2'
  344. getfirepage({
  345. pageNo: 1,
  346. pageSize: 10,
  347. microstationid: this.fireStationId,
  348. empType: num
  349. }).then(res => {
  350. // console.log(res, '888');
  351. this.tableList = res.data.list
  352. })
  353. } else if (this.$route.query.addId === '0') {
  354. num = '0'
  355. getfirepage({
  356. pageNo: 1,
  357. pageSize: 10,
  358. microstationid: this.fireStationId,
  359. empType: num
  360. }).then(res => {
  361. // console.log(res, '888');
  362. this.tableList = res.data.list
  363. })
  364. }
  365. },
  366. delUser(row) {
  367. this.show123 = true
  368. this.delId = row.id
  369. },
  370. makeSureDel() {
  371. },
  372. confirm() {
  373. delFirePeople(this.delId).then(res => {
  374. if (res.data) {
  375. uni.showToast({
  376. title: '删除成功',
  377. icon: 'success', // 图标类型,可选值:'success', 'loading', 'none'
  378. duration: 2000, // 持续时间,单位为毫秒,默认值为 1500
  379. mask: false, // 是否显示透明蒙层,防止触摸穿透,默认值为 false
  380. success() {
  381. // console.log('toast消息提示显示成功');
  382. },
  383. fail(err) {
  384. // console.error('toast消息提示显示失败', err);
  385. }
  386. });
  387. this.getAllFire()
  388. this.show123 = false
  389. }
  390. })
  391. },
  392. cancel() {
  393. this.show123 = false
  394. },
  395. close() {
  396. this.show123 = false
  397. },
  398. editUser(row) {
  399. this.editPeopleId = row.id
  400. getMesbyid({
  401. id: row.id
  402. }).then(res => {
  403. if (res.data) {
  404. this.formbox.fname = res.data.empName
  405. this.formbox.fphone = res.data.mobile
  406. this.formbox.fpower = res.data.empType
  407. // this.formbox.fworker = res.data.empType
  408. this.formbox.fuserNum = res.data.idcardno
  409. this.showModal = true
  410. }
  411. })
  412. },
  413. closeModal() {
  414. this.showModal = false
  415. },
  416. makeSureEdit() {
  417. editFirePeople({
  418. duty: this.formbox.fpower,
  419. empName: this.formbox.fname,
  420. // empType: this.formbox.fworker,
  421. id: this.editPeopleId,
  422. idcardno: this.formbox.fuserNum,
  423. microstationid: this.fireStationId - 0,
  424. mobile: this.formbox.fphone,
  425. }).then(res => {
  426. if (res.data) {
  427. this.showModal = false
  428. this.getAllFire()
  429. uni.showToast({
  430. title: '编辑成功',
  431. icon: 'success', // 图标类型,可选值:'success', 'loading', 'none'
  432. duration: 2000, // 持续时间,单位为毫秒,默认值为 1500
  433. mask: false, // 是否显示透明蒙层,防止触摸穿透,默认值为 false
  434. success() {
  435. // console.log('toast消息提示显示成功');
  436. },
  437. fail(err) {
  438. // console.error('toast消息提示显示失败', err);
  439. }
  440. });
  441. }
  442. // console.log(res, 'edit');
  443. })
  444. },
  445. // 对表单内name的正则判断
  446. nameBlur() {
  447. // console.log(this.membersList[0].name);
  448. if (this.membersList[0].name === '') {
  449. this.nameRules = true
  450. } else {
  451. this.nameRules = false
  452. }
  453. },
  454. userBlur() {
  455. 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]$/;
  456. if (regex.test(this.membersList[0].userNum)) {
  457. this.userRules = false
  458. } else {
  459. this.userRules = true
  460. }
  461. },
  462. phoneBlur() {
  463. const regex = /^1[3-9]\d{9}$/;
  464. if (regex.test(this.membersList[0].phone)) {
  465. this.phoneRules = false
  466. } else {
  467. this.phoneRules = true
  468. }
  469. },
  470. cleanList() {
  471. this.membersList = []
  472. let list = localStorage.getItem("empList")
  473. list = JSON.parse(list)
  474. if (list) {
  475. localStorage.removeItem('empList')
  476. }
  477. },
  478. // 读取本地缓存
  479. getGround() {
  480. let list = localStorage.getItem("empList")
  481. list = JSON.parse(list)
  482. if (list) {
  483. this.membersList = list
  484. } else {
  485. this.membersList = []
  486. }
  487. }
  488. },
  489. onLoad(options) {
  490. let ids = localStorage.getItem("fireId")
  491. if (ids) {
  492. this.fireStationId = ids
  493. }
  494. },
  495. onShow() {
  496. this.getTypePeople()
  497. this.getGround()
  498. if (this.$route.query.addId) {
  499. this.getAllFire()
  500. this.getbackid()
  501. // console.log(options, 'options')
  502. this.resultId = this.$route.query.addId
  503. if (this.resultId === '2') {
  504. this.tomole = '添加负责人'
  505. } else if (this.resultId === '1') {
  506. this.tomole = '添加值班人'
  507. } else {
  508. this.tomole = '添加人员信息'
  509. }
  510. // console.log(this.$route.query, 'query'); // 输出传递的参数值
  511. } else {
  512. return
  513. }
  514. },
  515. computed: {
  516. getDuty() {
  517. return (num) => {
  518. if (num === '1') {
  519. return '值班人';
  520. } else if (num === '2') {
  521. return '站长';
  522. } else {
  523. return '普通人员';
  524. }
  525. };
  526. }
  527. }
  528. }
  529. </script>
  530. <style>
  531. /deep/ .typeStyle {
  532. width: 650rpx !important;
  533. }
  534. /deep/ .antherStyle {
  535. width: 630rpx;
  536. height: 100rpx;
  537. margin-left: 20rpx;
  538. }
  539. /deep/ .antherBtn {
  540. width: 200rpx;
  541. height: 50rpx;
  542. margin-bottom: 30rpx;
  543. background-color: #4DB1B6;
  544. color: white;
  545. text-align: center;
  546. line-height: 50rpx;
  547. font-size: 30rpx;
  548. border-radius: 20rpx;
  549. }
  550. .tableBox {
  551. width: 90%;
  552. height: auto;
  553. margin: 20rpx auto;
  554. margin-left: 40rpx;
  555. /* background-color: aqua; */
  556. }
  557. .custom-table {
  558. border-collapse: collapse;
  559. /* 合并边框 */
  560. }
  561. .custom-table th,
  562. .custom-table td {
  563. /* width: 39.5%; */
  564. border: 1px solid #4DB1B6;
  565. /* 添加边框样式 */
  566. padding: 8px;
  567. /* 设置单元格内边距 */
  568. }
  569. .aTd {
  570. /* width: 60%; */
  571. }
  572. .editBtn {
  573. width: 100rpx;
  574. height: 60rpx;
  575. background-color: #4DB1B6;
  576. color: white;
  577. text-align: center;
  578. line-height: 60rpx;
  579. border-radius: 10rpx;
  580. font-size: 20rpx;
  581. margin-bottom: 10rpx;
  582. margin-right: 10rpx;
  583. }
  584. .modalBox {
  585. width: 700rpx;
  586. height: 880rpx;
  587. }
  588. .insides {
  589. width: 400rpx;
  590. height: 100rpx;
  591. border: 1px solid #4DB1B6;
  592. }
  593. .useBox {
  594. display: flex;
  595. justify-content: space-around;
  596. align-items: center;
  597. margin-top: 20rpx;
  598. }
  599. .erroring {
  600. color: red;
  601. font-size: 20rpx;
  602. }
  603. .circleBtn {
  604. width: 100rpx;
  605. height: 100rpx;
  606. border-radius: 50%;
  607. font-size: 90rpx;
  608. text-align: center;
  609. line-height: 100rpx;
  610. color: white;
  611. background-color: #4EB0B5;
  612. position: absolute;
  613. top: 1300rpx;
  614. left: 590rpx;
  615. }
  616. .cardBox {
  617. width: 650rpx;
  618. margin: 30rpx auto;
  619. border-radius: 30rpx;
  620. }
  621. .u-form-item__body__left {
  622. width: 100rpx;
  623. }
  624. </style>