edit_fireStation.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512
  1. <template>
  2. <view class="uni-container">
  3. <view class="example container" :style="'height: ' + (screenHeight - wheight - 75) + 'px'">
  4. <!-- 自定义表单校验 1-->
  5. <u--form ref="customForm" :model="formData" labelPosition="left" labelWidth="150" labelAlign="left">
  6. <view class=" flex flex-direction width100">
  7. <u-form-item label="社区名称" prop="microName" :required="true">
  8. <u-input v-model="formData.microName" placeholder="请输入社区名称" />
  9. </u-form-item>
  10. <u-form-item prop="org_name" label="所属单位" @click="
  11. showSex5 = true;
  12. hideKeyboard();
  13. " :required="true">
  14. <u--input v-model="formData.orgName" disabled disabledColor="#ffffff"
  15. placeholder="请选择所属单位"></u--input>
  16. </u-form-item>
  17. <u-form-item label="所属区县 " prop="county">
  18. <u-textarea auto-height maxlength=-1 v-model="formData.county"
  19. placeholder="请输入所属区县"></u-textarea>
  20. </u-form-item>
  21. <u-form-item label="建站日期" prop="builtOn">
  22. <!-- <u-button
  23. customStyle="background-color: #4cb2b6;"
  24. plain
  25. shape="circle"
  26. size="small"
  27. color="#fff"
  28. @click="unitTime = true"
  29. :text="formData.builtOn"
  30. ></u-button> -->
  31. <uni-datetime-picker :show="unitTime" v-model="formData.builtOn" mode="date" closeOnClickOverlay
  32. @confirm="ActiveUnitTime" @cancel="unitTime = false" @change="changetime"
  33. @close="unitTime = false"></uni-datetime-picker>
  34. </u-form-item>
  35. <u-form-item label="详细地址">
  36. <u-input v-model="formData.addr" placeholder="请输入详细地址" />
  37. </u-form-item>
  38. <u-form-item label="控制室值班人数" prop="dutyer">
  39. <u-input v-model="formData.dutyer" placeholder="请输入控制室值班人数 " />
  40. </u-form-item>
  41. <button @click="goWorkNum" class="manyBtn">添加值班人</button>
  42. <u-form-item label="报警电话">
  43. <u-input v-model="formData.alarmTel" placeholder="请输入报警电话 " />
  44. </u-form-item>
  45. <u-form-item label="负责人">
  46. <u-input v-model="formData.charger" placeholder="请输入负责人" />
  47. </u-form-item>
  48. <button @click="goBigNum" class="manyBtn">添加负责人</button>
  49. <u-form-item label="人员信息" prop="members">
  50. <u-input v-model="formData.members" placeholder="请输入队员人数" />
  51. </u-form-item>
  52. <button @click="goPeopleMes" class="manyBtn">添加人员信息</button>
  53. <u-form-item label="水罐车数量" prop="waterTanker">
  54. <u-input v-model="formData.waterTanker" placeholder="请输入水罐车" />
  55. </u-form-item>
  56. <u-form-item label="泡沫车数量" prop="foamCar">
  57. <u-input v-model="formData.foamCar" placeholder="请输入泡沫车" />
  58. </u-form-item>
  59. <u-form-item label="消防摩托数量" prop="fireMoto">
  60. <u-input v-model="formData.fireMoto" placeholder="请输入消防摩托数量" />
  61. </u-form-item>
  62. <u-form-item label="其它数量" prop="others">
  63. <u-input v-model="formData.others" placeholder="请输入其它" />
  64. </u-form-item>
  65. </view>
  66. </u--form>
  67. <u-action-sheet :show="showSex5" :actions="actions5" title="请选择单位" @close="showSex5 = false"
  68. @select="sexSelect5"></u-action-sheet>
  69. </view>
  70. <uni-row class="heigthButton">
  71. <u-button @click="submit('customForm')" type="primary" shape="circle" size="large" color="#4CB2B6"
  72. text="确认修改"></u-button>
  73. </uni-row>
  74. </view>
  75. </template>
  76. <script>
  77. import {
  78. getOrgId,
  79. updateStation,
  80. }
  81. from '@/api/fire_station/index';
  82. import config from '@/config';
  83. import store from '@/store';
  84. var that = null;
  85. export default {
  86. data() {
  87. return {
  88. screenHeight: this.$screenHeight,
  89. wheight: '',
  90. showSex: false, //有无避难层
  91. showSex5: false, //所属单位
  92. actions: [],
  93. actions5: [],
  94. // 每页数据量
  95. pageSize: 5,
  96. // 当前页
  97. pageNo: 1,
  98. // 数据总量
  99. total: 0,
  100. unitTime: false,
  101. loading: false,
  102. title: '生成隐患',
  103. content: '确认将此检查项目生成为隐患',
  104. // 自定义表单数据
  105. formData: {
  106. status: '0',
  107. File: [],
  108. builtOn: ''
  109. },
  110. // 自定义表单校验规则
  111. customRules: {
  112. microName: {
  113. type: 'string',
  114. required: true,
  115. message: '社区名称不能为空',
  116. trigger: ['blur', 'change']
  117. },
  118. orgName: {
  119. type: 'string',
  120. required: true,
  121. message: '所属单位不能为空',
  122. trigger: ['blur', 'change']
  123. },
  124. dutyer: {
  125. type: 'number',
  126. message: '所填项为数字类型',
  127. trigger: ['blur', 'change']
  128. },
  129. members: {
  130. type: 'number',
  131. message: '所填项为数字类型',
  132. trigger: ['blur', 'change']
  133. },
  134. foamCar: {
  135. type: 'number',
  136. message: '所填项为数字类型',
  137. trigger: ['blur', 'change']
  138. },
  139. fireMoto: {
  140. type: 'number',
  141. message: '所填项为数字类型',
  142. trigger: ['blur', 'change']
  143. },
  144. waterTanker: {
  145. type: 'number',
  146. message: '所填项为数字类型',
  147. trigger: ['blur', 'change']
  148. },
  149. others: {
  150. type: 'number',
  151. message: '所填项为数字类型',
  152. trigger: ['blur', 'change']
  153. },
  154. }
  155. };
  156. },
  157. computed: {},
  158. mounted() {
  159. uni.createSelectorQuery().in(this).select('.heigthButton').boundingClientRect(data => {
  160. this.wheight = data.height
  161. }).exec()
  162. },
  163. // 在 vue页面,向起始页通过事件传递数据
  164. onLoad: function(option) {
  165. var data = option.id;
  166. that = this;
  167. const eventChannel = this.getOpenerEventChannel();
  168. eventChannel.on('acceptDataFromOpenerPage', function(val) {
  169. that.formData = val;
  170. console.log('edit页面的val的值', that.formData);
  171. });
  172. // 获取单位id
  173. getOrgId({
  174. pageNo: this.pageNo,
  175. pageSize: this.pageSize,
  176. userId: this.$store.state.user.id
  177. }).then(response => {
  178. console.log(response, 'response');
  179. // 取到用户对应的单位名称与id
  180. response.data.map(v => {
  181. this.actions5.push({
  182. id: v.id,
  183. name: v.orgName
  184. });
  185. });
  186. });
  187. },
  188. onReady() {
  189. this.$refs.customForm.setRules(this.customRules);
  190. },
  191. methods: {
  192. submit(ref) {
  193. this.$refs[ref]
  194. .validate()
  195. .then(res => {
  196. // 因为需要提交的数据和绑定的数据不一样,所以要转换
  197. this.formData['status'] = 0;
  198. // this.formData.alarmTel=this.formData.alarm_tel
  199. // this.formData.builtOn=this.formData.built_on
  200. // this.formData.fireMoto=this.formData.fire_moto
  201. // this.formData.foamCar=this.formData.foam_car
  202. // this.formData.microName=this.formData.micro_name
  203. // this.formData.waterTanker=this.formData.water_tanker
  204. this.formData.builtOn = new Date(this.formData.builtOn).getTime()
  205. console.log(this.formData);
  206. var jsdata = JSON.stringify(this.formData);
  207. updateStation(jsdata).then(response => {
  208. console.log('response.data.msg,', response.data);
  209. uni.showLoading({
  210. title: response.data.msg
  211. });
  212. setTimeout(() => {
  213. console.log('修改成功!');
  214. uni.hideLoading();
  215. uni.navigateBack({
  216. delta: 2
  217. })
  218. }, 0);
  219. });
  220. })
  221. .catch(err => {
  222. console.log('err错误信息为:', err);
  223. uni.showToast({
  224. icon: 'none',
  225. title: '错误!' + err[0].message
  226. })
  227. });
  228. },
  229. // 隐藏键盘
  230. hideKeyboard() {
  231. uni.hideKeyboard();
  232. },
  233. // 记录类型
  234. // 单位成立时间
  235. ActiveUnitTime(e) {
  236. this.unitTime = false;
  237. console.log(e.value, e.mode);
  238. let value = new Date(e.value);
  239. this.formData.builtOn = uni.$u.timeFormat(e.value, 'yyyy-MM-dd mm:ss');
  240. },
  241. changetime(e) {
  242. console.log('change', e);
  243. },
  244. // 所属单位
  245. sexSelect5(e) {
  246. this.formData.org_id = e.id;
  247. this.formData.org_name = e.name;
  248. console.log(this.formData.orgId);
  249. },
  250. // 生成隐患弹出层 //暂存为草稿箱弹出层
  251. cancel() {
  252. this.show = false;
  253. },
  254. confirm() {
  255. setTimeout(() => {
  256. // 0.5秒后自动关闭
  257. this.show = false;
  258. }, 500);
  259. },
  260. // 触底的事件
  261. scrolltolower() {
  262. // 判断是否还有下一页数据
  263. if (this.pageNo * this.pageSize >= this.total)
  264. return uni.showToast({
  265. title: `数据加载完毕`
  266. });
  267. // 判断是否正在请求其它数据,如果是,则不发起额外的请求
  268. if (this.loading) return;
  269. this.pageNo += 1;
  270. this.showCheckboxShow(this.pageNo);
  271. },
  272. // 值班
  273. goWorkNum(){
  274. uni.navigateTo({
  275. url:"/pagesA/fire/fire_station/people_fireStation/people_fireStation?addId=1"
  276. })
  277. },
  278. // 负责人
  279. goBigNum(){
  280. uni.navigateTo({
  281. url:"/pagesA/fire/fire_station/people_fireStation/people_fireStation?addId=2"
  282. })
  283. },
  284. // 普通人
  285. goPeopleMes(){
  286. uni.navigateTo({
  287. url:"/pagesA/fire/fire_station/people_fireStation/people_fireStation?addId=0"
  288. })
  289. }
  290. }
  291. };
  292. </script>
  293. <style lang="scss" scoped>
  294. page {
  295. height: 100%;
  296. background-color: #f5f7f9;
  297. position: relative;
  298. }
  299. .buttomBorder {
  300. height: 0px;
  301. border: 1px dashed #cbd5e1;
  302. }
  303. /deep/ .uni-section .uni-section-header {
  304. padding: 0px;
  305. }
  306. /deep/ .u-form-item__body {
  307. font-weight: 500;
  308. flex-direction: column !important;
  309. }
  310. /deep/ .u-form-item__body__left__content__label {
  311. margin-bottom: 16rpx;
  312. font-size: 30rpx !important;
  313. color: #274647 !important;
  314. }
  315. .arrow-icon {
  316. //主动检查箭头
  317. position: absolute;
  318. right: 14px;
  319. top: 49px;
  320. transform: rotate(90deg);
  321. }
  322. /deep/ .u-input[data-v-fdbb9fe6],
  323. /deep/ .u-input.data-v-fdbb9fe6,
  324. /deep/ .u-input {
  325. background-color: #fff;
  326. }
  327. /deep/.u-button[data-v-3bf2dba7],
  328. /deep/.u-button.data-v-3bf2dba7,
  329. /deep/.u-button {
  330. width: 60% !important;
  331. }
  332. //弹框样式
  333. .btnList {
  334. // width: 40%;
  335. display: flex;
  336. // display:flex;
  337. .u-button[data-v-3bf2dba7],
  338. .u-button {
  339. width: 30%;
  340. }
  341. }
  342. /deep/ .u-popup__content {
  343. //弹出的宽高
  344. height: 100%;
  345. }
  346. /deep/ .u-form-item__body__right__message {
  347. //校验的文字的位置
  348. margin-left: 10rpx !important;
  349. }
  350. /deep/ .uicon-close {
  351. //关闭按钮背景色
  352. background-color: rgba(199, 203, 210, 0.9);
  353. border-radius: 10%;
  354. }
  355. .checkbox {
  356. .checkbox-item {
  357. box-sizing: border-box;
  358. padding-top: 40px;
  359. }
  360. }
  361. //侧边联动
  362. .page-body {
  363. display: flex;
  364. background: #fff;
  365. overflow: hidden;
  366. }
  367. .nav {
  368. display: flex;
  369. width: 100%;
  370. }
  371. .nav-left {
  372. width: 25%;
  373. background: #fafafa;
  374. }
  375. .nav-left-item {
  376. height: 100upx;
  377. border-right: solid 1px #f1f1f1;
  378. border-bottom: solid 1px #f1f1f1;
  379. font-size: 30upx;
  380. display: flex;
  381. align-items: center;
  382. justify-content: center;
  383. }
  384. /deep/.nav-right-item[data-v-73caef23],
  385. /deep/.nav-right-item {
  386. display: flex;
  387. flex-wrap: wrap;
  388. }
  389. .nav-left-item:last-child {
  390. border-bottom: none;
  391. }
  392. .nav-right {
  393. width: 75%;
  394. }
  395. .box {
  396. display: block;
  397. overflow: hidden;
  398. border-bottom: 20upx solid #f3f3f3;
  399. /* min-height: 100vh; */
  400. /*若您的子分类过少想使得每个子分类占满屏请放开上边注视 */
  401. }
  402. .box:last-child {
  403. border: none;
  404. // min-height: 100vh;
  405. }
  406. .nav-right-item {
  407. margin-top: 20px;
  408. // width: 28%;
  409. // min-height: 200upx;
  410. float: left;
  411. text-align: center;
  412. padding: 11upx;
  413. font-size: 28upx;
  414. background: #fff;
  415. /deep/.u-checkbox__icon-wrap[data-v-532d01c7],
  416. /deep/.u-checkbox__icon-wrap {
  417. //复选框的样式
  418. margin: 0 20rpx;
  419. }
  420. /deep/ uni-view[data-v-3d1b15f2] {
  421. //复选框上线的间距
  422. margin: 20rpx 0 !important;
  423. }
  424. // /deep/ .u-checkbox__icon-wrap--square{
  425. // margin: 20rpx;
  426. // }
  427. .u-checkbox-label--right[data-v-532d01c7],
  428. .u-checkbox-label--right {
  429. margin-right: 40rpx;
  430. }
  431. }
  432. .nav-right-item image {
  433. width: 150upx;
  434. height: 150upx;
  435. }
  436. .active {
  437. font-weight: 700;
  438. color: #274647;
  439. background: #fff;
  440. border-right: 0;
  441. }
  442. ::-webkit-scrollbar {
  443. /*取消小程序的默认导航条样式*/
  444. width: 0;
  445. height: 0;
  446. color: transparent;
  447. }
  448. .selectBtn {
  449. width: 200rpx;
  450. margin-left: 0;
  451. font-size: 30rpx;
  452. background-color: #4cb2b6;
  453. }
  454. /deep/.u-action-sheet {
  455. overflow-y: auto;
  456. height: 1000rpx;
  457. background-color: #fff;
  458. }
  459. .example {
  460. overflow-y: auto;
  461. }
  462. .manyBtn{
  463. width: 200rpx;
  464. height: 40rpx;
  465. font-size: 20rpx;
  466. line-height: 40rpx;
  467. text-align: center;
  468. border-radius: 20rpx;
  469. background-color: #4DB1B6;
  470. color: white;
  471. }
  472. </style>