edit_fireStation.vue 12 KB

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