edit_device.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596
  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="fpdName" :required="true">
  8. <u-input v-model="formData.fpdName" placeholder="必填。请输入设施名称" />
  9. </u-form-item>
  10. <u-form-item label="所属单位" @click="
  11. showSex5 = true;
  12. hideKeyboard();
  13. " :required="true" prop="orgName">
  14. <u--input v-model="formData.orgName" disabled disabledColor="#ffffff" placeholder="请选择所属单位">
  15. </u--input>
  16. </u-form-item>
  17. <u-form-item label="设施编号 " prop="fpdCode">
  18. <u-input v-model="formData.fpdCode" placeholder="请输入设施编号 " />
  19. </u-form-item>
  20. <u-form-item label="设施二维码">
  21. <img :src="formData.fpdQcode" alt="设施二维码" style='width: 300upx;height: 300upx;'>
  22. </u-form-item>
  23. <!-- <u-form-item label="设备状态" @click="
  24. showSex4 = true;
  25. hideKeyboard();
  26. ">
  27. <u--input v-model="fpdStatus" disabled disabledColor="#ffffff" placeholder="请选择设备状态"></u--input>
  28. </u-form-item> -->
  29. <u-form-item label="所在位置 " prop="fpdLocal">
  30. <u-input v-model="formData.fpdLocal" placeholder="请输入所在位置" />
  31. </u-form-item>
  32. <u-form-item label="所属建筑 ">
  33. <u-input v-model="formData.buildingId" placeholder="请输入所属建筑" />
  34. </u-form-item>
  35. <u-form-item label="设施类别" prop="fpdType" @click="
  36. showSex = true;
  37. hideKeyboard();
  38. ">
  39. <u--input v-model="formData.fpdTypeName" disabled disabledColor="#ffffff" placeholder="请选择设施类别">
  40. </u--input>
  41. </u-form-item>
  42. </view>
  43. <view class="show-title">
  44. <view class="paizhao">现场照片:<text style="color:#822e2e;"></text></view>
  45. <view class="">
  46. <image :src="photograph" @click="photoUpload()" class="tiantupian"></image>
  47. </view>
  48. <view>
  49. 拍照上传
  50. </view>
  51. <uni-load-more v-show="loading" status="loading" :content-text="contentText" />
  52. </view>
  53. <view class="uni-grid-wraps" v-if="formData.picVOList">
  54. <view v-for="(items,indexs) in formData.picVOList" :key="indexs">
  55. <view style="display:flex;align-items:center;justify-content:space-between;">
  56. <view style="position: relative;width: 180rpx;float: left;margin: 10rpx 15rpx 0 0rpx;">
  57. <image :src="items.url"
  58. style="width: 160rpx;height: 160rpx;border-radius: 30rpx;float: left;">
  59. <u-icon name="close" color="#4CB2B6" size="19" @click="closeImage(items,indexs)">
  60. </u-icon>
  61. </view>
  62. <view class="">
  63. <view>
  64. 图片名称
  65. </view>
  66. <view style="margin-top:20rpx">
  67. <u-input v-model="items.picname" placeholder="请输入图片名称" />
  68. </view>
  69. </view>
  70. </view>
  71. </view>
  72. </view>
  73. </u--form>
  74. <u-action-sheet :show="showSex" :actions="actions2" title="设施类别" @close="showSex = false"
  75. @select="sexSelect2"></u-action-sheet>
  76. <u-action-sheet :show="showSex4" :actions="actions4" title="设备状态" @close="showSex4 = false"
  77. @select="sexSelect4"></u-action-sheet>
  78. <u-action-sheet :show="showSex5" :actions="actions5" title="请选择单位" @close="showSex5 = false"
  79. @select="sexSelect5"></u-action-sheet>
  80. <!-- 加载中 -->
  81. <!-- <isLodingModel></isLodingModel> -->
  82. </view>
  83. <uni-row class="heigthButton">
  84. <u-button @click="submit('customForm')" type="primary" shape="circle" size="large" color="#4CB2B6"
  85. text="确认修改"></u-button>
  86. </uni-row>
  87. </view>
  88. </template>
  89. <script>
  90. import {
  91. updateDevice, //获取消防设施列表
  92. getOrgId,
  93. fpdGet
  94. } from '@/api/fire_device';
  95. import {
  96. DICT_TYPE,
  97. getDictDatas
  98. } from '@/utils/dict';
  99. import config from '@/config'
  100. import {
  101. getAccessToken
  102. } from '@/utils/auth'
  103. import loadImage from 'blueimp-load-image';
  104. const baseUrlImg = config.baseUrlImg
  105. const baseUrl = config.baseUrl
  106. let that = null;
  107. export default {
  108. data() {
  109. return {
  110. contentText: {
  111. contentrefresh: '上传照片中',
  112. },
  113. screenHeight: this.$screenHeight,
  114. wheight: '',
  115. photograph: `${baseUrlImg}/checkActive/photograph.png`,
  116. showSex: false, //有无避难层
  117. showSex4: false, //设备状态
  118. showSex5: false, //所属单位
  119. actions2: getDictDatas(DICT_TYPE.FPD_TYPE),
  120. actions4: [{
  121. id: 0,
  122. name: '正常'
  123. }, {
  124. id: 1,
  125. name: '有问题'
  126. }],
  127. actions5: [],
  128. // 每页数据量
  129. pageSize: 5,
  130. // 当前页
  131. pageNo: 1,
  132. // 数据总量
  133. total: 0,
  134. // tableData数据加载中
  135. loading: false,
  136. // 自定义表单数据
  137. formData: {
  138. status: '0',
  139. orgName: '',
  140. picVOList: [],
  141. fpdTypeName:'',
  142. fpdType:''
  143. },
  144. fileList1: [],
  145. // 用于显示下拉确认内容,不作为提交
  146. fpdStatus: '',
  147. // 自定义表单校验规则
  148. customRules: {
  149. fpdName: {
  150. type: 'string',
  151. required: true,
  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. watch: {
  165. loading: {
  166. handler(newLength, oldLength) {
  167. this.$modal.isLoadingModel(this.loading)
  168. },
  169. immediate: true
  170. }
  171. },
  172. // 在 vue页面,向起始页通过事件传递数据
  173. onLoad: function(option) {
  174. this.actions2.map(i => {
  175. i.name = i.label;
  176. i.id = i.value;
  177. });
  178. this.loading = true
  179. // 接收传值
  180. var data = option.id;
  181. that = this;
  182. fpdGet({
  183. id: option.id
  184. }).then(res => {
  185. this.formData = res.data
  186. that.formData.orgName = res.data.orgDO.orgName
  187. this.actions2.map(i => {
  188. if (res.data.fpdType == i.id) {
  189. this.formData.fpdTypeName = i.name
  190. this.formData.fpdType=i.id
  191. }
  192. })
  193. })
  194. // const eventChannel = this.getOpenerEventChannel();
  195. // eventChannel.on('acceptDataFromOpenerPage', function(val) {
  196. // that.formData = val;
  197. // });
  198. //
  199. if (that.formData.fpdStatus === '' || that.formData.fpdStatus === null) {
  200. that.fpdStatus = ''
  201. } else if (that.formData.fpdStatus == 0) {
  202. that.fpdStatus = '正常'
  203. } else if (that.formData.fpdStatus == 1) {
  204. that.fpdStatus = '有问题'
  205. }
  206. // 获取单位id
  207. getOrgId({
  208. pageNo: this.pageNo,
  209. pageSize: this.pageSize,
  210. userId: this.$store.state.user.id
  211. }).then(response => {
  212. this.loading = false
  213. // 取到用户对应的单位名称与id
  214. response.data.map(v => {
  215. this.actions5.push({
  216. id: v.id,
  217. name: v.orgName
  218. });
  219. });
  220. });
  221. },
  222. onReady() {
  223. this.$refs.customForm.setRules(this.customRules);
  224. },
  225. methods: {
  226. closeImage(val, index) {
  227. this.formData.picVOList.splice(index, 1)
  228. },
  229. photoUpload() {
  230. let pictures = [];
  231. let that = this;
  232. uni.chooseImage({
  233. sourceType: ['camera'], //实现拍照
  234. count: 3,
  235. sizeType: ['original', 'compressed'],
  236. // sourceType: ['album','camera'], //打开系统相册
  237. success(res) {
  238. that.loading = true
  239. if (Array.isArray(res.tempFilePaths)) { //从相册选择有三张的情况
  240. res.tempFilePaths.forEach(item => {
  241. loadImage(
  242. item,
  243. function(canvas) {
  244. canvas.toBlob(function(blob) {
  245. // 压缩后的 Blob 对象
  246. const compressedFile = blob;
  247. // 将压缩后的文件 `compressedFile` 转换为临时URL
  248. const fileUrl = URL.createObjectURL(
  249. compressedFile);
  250. uni.uploadFile({
  251. url: baseUrl +
  252. '/admin-api/infra/file/upload', //后端用于处理图片并返回图片地址的接口
  253. filePath: item,
  254. name: 'file',
  255. header: {
  256. "Authorization": 'Bearer ' +
  257. getAccessToken(),
  258. }, //请求token
  259. success: (res) => {
  260. let imgUrl = JSON.parse(res
  261. .data)
  262. that.loading = false
  263. //拍照下展示的图片
  264. that.formData.picVOList.push({
  265. url: imgUrl.data,
  266. picname: ''
  267. })
  268. that.$forceUpdate();
  269. // // 返回的url
  270. },
  271. fail: () => {
  272. that.loading = false
  273. }
  274. })
  275. URL.revokeObjectURL(fileUrl);
  276. }, 'image/jpeg', 0.6); // 设置压缩后的图片格式为 JPEG,压缩质量为 0.6
  277. }, {
  278. canvas: true,
  279. maxWidth: 800
  280. } // 设置最大宽度为 800px
  281. );
  282. })
  283. }
  284. }
  285. })
  286. },
  287. submit(ref) {
  288. this.$refs[ref]
  289. .validate()
  290. .then(res => {
  291. this.formData['status'] = 0;
  292. this.formData.picVOList.forEach((item) => {
  293. // 删除除了feildname和url以外的多余字段
  294. Object.keys(item).forEach((key) => {
  295. if (key !== 'picname' && key !== 'url' && key !== 'fpdid') {
  296. delete item[key];
  297. }
  298. });
  299. // 如果feildname为空,赋值为默认名称
  300. if (!item.picname) {
  301. item.picname = '默认名称';
  302. }
  303. if (!item.fpdid) {
  304. item.fpdid = this.formData.id
  305. }
  306. });
  307. var jsdata = JSON.stringify(this.formData);
  308. updateDevice(jsdata).then(response => {
  309. uni.showLoading({
  310. title: response.data.msg
  311. });
  312. setTimeout(() => {
  313. uni.navigateBack({
  314. delta: 1
  315. })
  316. }, 0);
  317. });
  318. })
  319. .catch(err => {
  320. uni.showToast({
  321. icon: 'none',
  322. title: '错误!' + err[0].message
  323. })
  324. });
  325. },
  326. // 隐藏键盘
  327. hideKeyboard() {
  328. uni.hideKeyboard();
  329. },
  330. // 有无避难层
  331. sexSelect2(e) {
  332. this.formData.fpdTypeName = e.label;
  333. this.formData.fpdType = e.id;
  334. },
  335. // 设备状态
  336. sexSelect4(e) {
  337. this.formData.fpdStatus = e.id;
  338. this.fpdStatus = e.name;
  339. },
  340. // 所属单位
  341. sexSelect5(e) {
  342. this.formData.orgId = e.id;
  343. this.formData.orgName = e.name;
  344. },
  345. // 生成隐患弹出层 //暂存为草稿箱弹出层
  346. cancel() {
  347. this.show = false;
  348. },
  349. confirm() {
  350. setTimeout(() => {
  351. // 0.5秒后自动关闭
  352. this.show = false;
  353. }, 500);
  354. },
  355. // 触底的事件
  356. scrolltolower() {
  357. // 判断是否还有下一页数据
  358. if (this.pageNo * this.pageSize >= this.total)
  359. return uni.showToast({
  360. title: `数据加载完毕`
  361. });
  362. // 判断是否正在请求其它数据,如果是,则不发起额外的请求
  363. if (this.loading) return;
  364. this.pageNo += 1;
  365. this.showCheckboxShow(this.pageNo);
  366. }
  367. }
  368. };
  369. </script>
  370. <style lang="scss" scoped>
  371. page {
  372. height: 100%;
  373. background-color: #f5f7f9;
  374. position: relative;
  375. }
  376. .buttomBorder {
  377. height: 0px;
  378. border: 1px dashed #cbd5e1;
  379. }
  380. /deep/ .uni-section .uni-section-header {
  381. padding: 0px;
  382. }
  383. /deep/ .u-form-item__body {
  384. font-weight: 500;
  385. flex-direction: column !important;
  386. }
  387. /deep/ .u-form-item__body__left__content__label {
  388. margin-bottom: 16rpx;
  389. font-size: 30rpx !important;
  390. color: #274647 !important;
  391. }
  392. .arrow-icon {
  393. //主动检查箭头
  394. position: absolute;
  395. right: 14px;
  396. top: 49px;
  397. transform: rotate(90deg);
  398. }
  399. /deep/ .u-input[data-v-fdbb9fe6],
  400. /deep/ .u-input.data-v-fdbb9fe6,
  401. /deep/ .u-input {
  402. background-color: #fff;
  403. }
  404. /deep/.u-button[data-v-3bf2dba7],
  405. /deep/.u-button.data-v-3bf2dba7,
  406. /deep/.u-button {
  407. width: 60% !important;
  408. }
  409. //弹框样式
  410. .btnList {
  411. // width: 40%;
  412. display: flex;
  413. // display:flex;
  414. .u-button[data-v-3bf2dba7] {
  415. width: 30%;
  416. }
  417. }
  418. /deep/ .u-popup__content {
  419. //弹出的宽高
  420. height: 100%;
  421. }
  422. /deep/ .u-form-item__body__right__message {
  423. //校验的文字的位置
  424. margin-left: 10rpx !important;
  425. }
  426. /deep/ .uicon-close {
  427. //关闭按钮背景色
  428. background-color: rgba(199, 203, 210, 0.9);
  429. border-radius: 10%;
  430. }
  431. .checkbox {
  432. .checkbox-item {
  433. box-sizing: border-box;
  434. padding-top: 40px;
  435. }
  436. }
  437. //侧边联动
  438. .page-body {
  439. display: flex;
  440. background: #fff;
  441. overflow: hidden;
  442. }
  443. .nav {
  444. display: flex;
  445. width: 100%;
  446. }
  447. .nav-left {
  448. width: 25%;
  449. background: #fafafa;
  450. }
  451. .nav-left-item {
  452. height: 100upx;
  453. border-right: solid 1px #f1f1f1;
  454. border-bottom: solid 1px #f1f1f1;
  455. font-size: 30upx;
  456. display: flex;
  457. align-items: center;
  458. justify-content: center;
  459. }
  460. /deep/.nav-right-item[data-v-73caef23],
  461. /deep/.nav-right-item {
  462. display: flex;
  463. flex-wrap: wrap;
  464. }
  465. .nav-left-item:last-child {
  466. border-bottom: none;
  467. }
  468. .nav-right {
  469. width: 75%;
  470. }
  471. .box {
  472. display: block;
  473. overflow: hidden;
  474. border-bottom: 20upx solid #f3f3f3;
  475. /* min-height: 100vh; */
  476. /*若您的子分类过少想使得每个子分类占满屏请放开上边注视 */
  477. }
  478. .box:last-child {
  479. border: none;
  480. // min-height: 100vh;
  481. }
  482. .nav-right-item {
  483. margin-top: 20px;
  484. // width: 28%;
  485. // min-height: 200upx;
  486. float: left;
  487. text-align: center;
  488. padding: 11upx;
  489. font-size: 28upx;
  490. background: #fff;
  491. /deep/.u-checkbox__icon-wrap[data-v-532d01c7],
  492. /deep/.u-checkbox__icon-wrap {
  493. //复选框的样式
  494. margin: 0 20rpx;
  495. }
  496. /deep/ uni-view[data-v-3d1b15f2] {
  497. //复选框上线的间距
  498. margin: 20rpx 0 !important;
  499. }
  500. // /deep/ .u-checkbox__icon-wrap--square{
  501. // margin: 20rpx;
  502. // }
  503. .u-checkbox-label--right[data-v-532d01c7],
  504. .u-checkbox-label--right {
  505. margin-right: 40rpx;
  506. }
  507. }
  508. .nav-right-item image {
  509. width: 150upx;
  510. height: 150upx;
  511. }
  512. .active {
  513. font-weight: 700;
  514. color: #274647;
  515. background: #fff;
  516. border-right: 0;
  517. }
  518. ::-webkit-scrollbar {
  519. /*取消小程序的默认导航条样式*/
  520. width: 0;
  521. height: 0;
  522. color: transparent;
  523. }
  524. .selectBtn {
  525. width: 250rpx;
  526. margin-left: 0;
  527. font-size: 30rpx;
  528. background-color: #4cb2b6;
  529. }
  530. .tiantupian {
  531. width: 95rpx;
  532. height: 95rpx;
  533. }
  534. .example {
  535. overflow-y: auto;
  536. }
  537. /deep/.u-action-sheet {
  538. overflow-y: auto;
  539. height: 1000rpx;
  540. background-color: #fff;
  541. }
  542. </style>