edit_detection.vue 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683
  1. <template>
  2. <view class=" uni-container">
  3. <view class="example container" :style="'height: ' + (screenHeight - wheight - 75) + 'px'">
  4. <!-- 自定义表单校验 1-->
  5. <u-form ref="editDeteForm" :rules='customRules' :model="formData" labelPosition="left" labelWidth="150"
  6. labelAlign="left">
  7. <view class=" flex flex-direction width100">
  8. <u-form-item label="检测项目" prop="detinspect" :required="true"
  9. @click="showInspOption = true;hideKeyboard();">
  10. <u--input v-model="formData.detinspect" disabled disabledColor="#ffffff"
  11. placeholder="请输入检测维保结果"></u--input>
  12. <!-- <u-input v-model="formData.detinspect" placeholder="请输入检测项目" /> -->
  13. </u-form-item>
  14. <u-form-item label="预计检测时间" prop="detdate">
  15. <uni-datetime-picker :show="unitTime" v-model="formData.detdate" type="datetime"
  16. closeOnClickOverlay @confirm="ActiveUnitTime" @cancel="unitTime = false"
  17. @change="changetime" @close="unitTime = false"></uni-datetime-picker>
  18. </u-form-item>
  19. <u-form-item label="检测维保结果" prop="detresult" @click="
  20. showreOption = true;
  21. hideKeyboard();" :required="true">
  22. <u--input v-model="formData.detresult.name" disabled disabledColor="#ffffff"
  23. placeholder="请输入检测维保结果"></u--input>
  24. <!-- <u-input v-model="formData.detresult" placeholder="请输入检测维保结果" /> -->
  25. </u-form-item>
  26. <u-form-item label="所属单位" @click="
  27. showSex5 = true;
  28. hideKeyboard();" prop="orgName" :required="true">
  29. <u--input v-model="formData.orgName" disabled disabledColor="#ffffff"
  30. placeholder="请选择所属单位"></u--input>
  31. </u-form-item>
  32. <u-form-item label="附件">
  33. <!-- 选择文件上传 -->
  34. <uni-file-picker v-model="formData.File" del-icon limit="1" auto-upload file-mediatype="all"
  35. @select="select" @delete="deleteFile">
  36. <button type="primary" class="selectBtn">选择附件</button>
  37. <!-- 加载中 -->
  38. <isLodingModel v-if="loading"></isLodingModel>
  39. </uni-file-picker>
  40. </u-form-item>
  41. </view>
  42. </u-form>
  43. <u-action-sheet :show="showSex" :actions="actions2" title="*记录类型" @close="showSex = false"
  44. @select="sexSelect2"></u-action-sheet>
  45. <u-action-sheet :show="showSex5" :actions="actions5" title="请选择单位" @close="showSex5 = false"
  46. @select="sexSelect5"></u-action-sheet>
  47. <!-- 检测结果选项框 -->
  48. <u-action-sheet :show="showreOption" :actions="resultOptions" title="请选择检测维保结果"
  49. @close="showreOption = false" @select="setResult"></u-action-sheet>
  50. <!-- 检测项目选项框 -->
  51. <!-- <u-action-sheet :show="showInspOption" :actions="detinspectOptions" title="请选择检测项目"
  52. @close="showInspOption = false" @select="setInsp"></u-action-sheet> -->
  53. <!-- ----隐患 -->
  54. <u-popup :show="showInspOption" :round="10" @close="showInspOption=false">
  55. <view style="width: 70vw;overflow-y: auto;margin-bottom: 80rpx;padding:10px">
  56. <text class="text-xl">选择隐患类型:</text>
  57. <view class="" class="person-forward">
  58. <u-checkbox-group placement="column" v-model="checkArr" @change="checkboxChange2"
  59. activeColor="#4CB2B6" iconSize="red">
  60. <u-checkbox v-for="(items, indexs) in detinspectOptions" :key="indexs"
  61. :customStyle="{marginBottom: '60rpx'}" :label="items.name" :name="items.name">
  62. </u-checkbox>
  63. </u-checkbox-group>
  64. </view>
  65. <view class="flex flex-direction-row "
  66. style="position: fixed;bottom: 10px;left: 50%;transform: translate(-50%);height: 100rpx;width: 80%">
  67. <u-button shape="circle" type="primary" color="#4CB2B6" text="确定" @click="checkboxConfirm2()"
  68. customStyle="margin-right:20px;padding:0 30px">
  69. </u-button>
  70. <u-button type="primary" plain color="#4CB2B6" text="取消" shape="circle"
  71. @click="checkboxCancel2()" customStyle="padding:0 30px">
  72. </u-button>
  73. </view>
  74. </view>
  75. </u-popup>
  76. <!-- ----隐患 -->
  77. </view>
  78. <uni-row class="heigthButton">
  79. <u-button @click="submit('editDeteForm')" type="primary" shape="circle" size="large" color="#4CB2B6"
  80. text="确认修改"></u-button>
  81. </uni-row>
  82. </view>
  83. </template>
  84. <script>
  85. import {
  86. createFpdDetection, // 更新
  87. getOrgId,
  88. upload, //上传文件
  89. getFpdDetection, //根据id拿数据
  90. updateFpdDetection //更新消防设备维护和检测台账
  91. } from '@/api/fpdDetection/index.js';
  92. import {
  93. DICT_TYPE,
  94. getDictDatas
  95. } from '@/utils/dict';
  96. import {
  97. getAccessToken
  98. } from '@/utils/auth';
  99. import config from '@/config';
  100. import store from '@/store';
  101. import {
  102. uploadAvatar
  103. } from '@/api/system/user';
  104. const baseUrl = config.baseUrl;
  105. var that = null;
  106. export default {
  107. data() {
  108. return {
  109. screenHeight: this.$screenHeight,
  110. wheight: '',
  111. showSex: false, //有无避难层
  112. showSex5: false, //所属单位
  113. actions: [],
  114. actions2: getDictDatas(DICT_TYPE.TRAIN_DRILL),
  115. actions5: [],
  116. //检测维保结果
  117. showreOption: false,
  118. resultOptions: getDictDatas(DICT_TYPE.BACKEND_DET_RESULT), //检测维保结果选项
  119. //检测项目
  120. showInspOption: false,
  121. detinspectOptions: getDictDatas(DICT_TYPE.DICT_INSPECT_TYPE), //检测项目选项
  122. checkArr: [],
  123. // 每页数据量
  124. pageSize: 5,
  125. // 当前页
  126. pageNo: 1,
  127. // 数据总量
  128. total: 0,
  129. unitTime: false,
  130. loading: false,
  131. title: '生成隐患',
  132. content: '确认将此检查项目生成为隐患',
  133. // 自定义表单数据
  134. formData: {
  135. status: '0',
  136. File: [],
  137. detresult: {
  138. id: null,
  139. name: null
  140. }
  141. },
  142. // 自定义表单校验规则
  143. customRules: {
  144. detinspect: {
  145. type: 'string',
  146. required: true,
  147. message: ' 检测项目不能为空',
  148. trigger: ['blur', 'change']
  149. },
  150. detdate: {
  151. type: 'string',
  152. message: '预计检测时间不能为空',
  153. trigger: ['blur', 'change']
  154. },
  155. orgName: {
  156. type: 'string',
  157. message: '请选择所属单位',
  158. trigger: ['blur', 'change']
  159. }
  160. }
  161. };
  162. },
  163. watch: {
  164. loading: {
  165. handler(newLength, oldLength) {
  166. this.$modal.isLoadingModel(this.loading)
  167. },
  168. immediate: true
  169. }
  170. },
  171. computed: {},
  172. mounted() {
  173. // uni.createSelectorQuery().in(this).select('.heigthButton').boundingClientRect(data => {
  174. // this.wheight = data.height
  175. // }).exec()
  176. const query = uni.createSelectorQuery().in(this)
  177. // console.log('query',query);
  178. const thisNode = query.select('.heigthButton')
  179. // console.log('thisNode',thisNode);
  180. thisNode.boundingClientRect(data => {
  181. // console.log('data',data);
  182. this.wheight = data.height
  183. }).exec()
  184. },
  185. // 在 vue页面,向起始页通过事件传递数据
  186. // 在 vue页面,向起始页通过事件传递数据
  187. onLoad: function(option) {
  188. // console.log('op', option);
  189. this.actions2.map(i => {
  190. i.name = i.label;
  191. i.id = i.value;
  192. });
  193. //获取当前表单数据
  194. getFpdDetection(option.id).then(res => {
  195. // console.log('thisform', res);
  196. //对检测结果进行初始化
  197. const reArr = getDictDatas(DICT_TYPE.BACKEND_DET_RESULT)
  198. // console.log('reArr',reArr);
  199. const thisItem = reArr.find(par => par.value === res.data.detresult)
  200. // console.log('thisItem',thisItem);
  201. if (thisItem) {
  202. res.data.detresult = {
  203. id: thisItem.value,
  204. name: thisItem.label
  205. }
  206. }
  207. this.formData = res.data
  208. if (this.formData.detinspect) {
  209. const nowArr = this.formData.detinspect.split(',')
  210. this.checkArr = [...nowArr]
  211. }
  212. var File = this.formData.File = []
  213. if (this.formData.att != '') {
  214. File.push({
  215. url: this.formData.att,
  216. name: this.formData.att
  217. });
  218. } else {
  219. File = null
  220. }
  221. // 获取单位id
  222. getOrgId({
  223. pageNo: this.pageNo,
  224. pageSize: this.pageSize,
  225. userId: this.$store.state.user.id
  226. }).then(response => {
  227. // console.log(response, 'response');
  228. // 取到用户对应的单位名称与id
  229. response.data.forEach(v => {
  230. if (this.formData.orgId === v.dwid) {
  231. this.$set(this.formData, 'orgName', v.orgName)
  232. }
  233. });
  234. });
  235. // console.log('edit页面的val的值', this.formData);
  236. })
  237. // const navData = JSON.parse(option.navData)
  238. // console.log('navdata', navData);
  239. // this.formData = navData;
  240. // var File = this.formData.File = []
  241. // if (this.formData.att != '') {
  242. // File.push({
  243. // url: this.formData.att,
  244. // name: this.formData.att
  245. // });
  246. // } else {
  247. // File = null
  248. // }
  249. // console.log('edit页面的val的值', this.formData);
  250. // 获取单位id
  251. getOrgId({
  252. pageNo: this.pageNo,
  253. pageSize: this.pageSize,
  254. userId: this.$store.state.user.id
  255. }).then(response => {
  256. // console.log(response, 'response');
  257. // 取到用户对应的单位名称与id
  258. response.data.map(v => {
  259. this.actions5.push({
  260. id: v.dwid,
  261. name: v.orgName
  262. });
  263. });
  264. });
  265. //初始化检测结果选项
  266. const trueArr = []
  267. this.resultOptions.forEach(item => {
  268. trueArr.push({
  269. id: item.value,
  270. name: item.label
  271. })
  272. })
  273. this.resultOptions = [...trueArr]
  274. //初始化检测项目选项
  275. const trueArr1 = []
  276. // console.log('detinspectOptions', this.detinspectOptions);
  277. this.detinspectOptions.forEach(item => {
  278. trueArr1.push({
  279. id: item.value,
  280. name: item.label
  281. })
  282. })
  283. this.detinspectOptions = [...trueArr1]
  284. },
  285. onReady() {
  286. this.$refs.editDeteForm.setRules(this.customRules);
  287. },
  288. methods: {
  289. submit(ref) {
  290. // console.log(this.formData, 'alertalertalert');
  291. // if (!this.formData.orgName) {
  292. // return this.$modal.msgError('请选择所属单位')
  293. // }
  294. // if (this.formData.drillDate && this.formData.drillDate.indexOf(":") === -1) {
  295. // this.formData.drillDate = this.formData.drillDate + ' 00:00:00'
  296. // }
  297. this.$refs[ref]
  298. .validate()
  299. .then(res => {
  300. this.formData['status'] = 0;
  301. // console.log(this.formData);
  302. // if (this.formData.File.length > 0) {
  303. // this.formData.attId = this.formData.File[0].url.toString();
  304. // } else {
  305. // this.formData.attId = ''
  306. // }
  307. //对提交的数据进行处理
  308. this.$set(this.formData, 'detresult', this.formData.detresult.id)
  309. var jsdata = JSON.stringify(this.formData);
  310. // console.log(jsdata, 'jsdatajsdatajsdata');
  311. updateFpdDetection(jsdata).then(response => {
  312. // console.log('response.data.msg,', response.data);
  313. uni.showLoading({
  314. title: response.data.msg
  315. });
  316. setTimeout(() => {
  317. // console.log('修改成功!');
  318. uni.hideLoading();
  319. uni.navigateBack({
  320. delta: 2
  321. })
  322. // uni.navigateTo({
  323. // url: '/pagesA/fire/fpd_detection/detection_details/detection_details?id='+this.formData.id
  324. // })
  325. }, 0);
  326. }).catch(err => {});
  327. })
  328. .catch(err => {
  329. // console.log(err,'eeeeeeeeee');
  330. // uni.showToast({
  331. // icon:'none',
  332. // title:'错误!'+ err[0].message
  333. // })
  334. });
  335. },
  336. // 上传图片 获取上传状态
  337. // 选择上传触发函数
  338. select(e) {
  339. // 根据所选图片的个数,多次调用上传函数
  340. let promises = [];
  341. for (let i = 0; i < e.tempFilePaths.length; i++) {
  342. const promise = this.uploadFiles(e.tempFilePaths, i);
  343. promises.push(promise);
  344. }
  345. Promise.all(promises).then(result => {});
  346. },
  347. // 上传函数
  348. async uploadFiles(tempFilePaths, i) {
  349. const that = this;
  350. this.loading = true
  351. await uni.uploadFile({
  352. url: baseUrl + '/admin-api/infra/file/upload', //后端用于处理图片并返回图片地址的接口
  353. filePath: tempFilePaths[i],
  354. name: 'file',
  355. header: {
  356. Authorization: 'Bearer ' + getAccessToken()
  357. }, //请求token
  358. success: res => {
  359. // console.log('res', res);
  360. let data = JSON.parse(res.data);
  361. // 返回的url
  362. var fileLink = data.data;
  363. const code = data.code;
  364. // 如果成功,将返回的data数据给 formdata
  365. if (code == 0) {
  366. that.formData.File.push({
  367. url: fileLink,
  368. name: fileLink
  369. });
  370. uni.showToast({
  371. title: '文件上传成功!'
  372. });
  373. that.loading = false
  374. // that.formData.attId = fileLink
  375. }
  376. // this.formData.attId = this.formData.attId.toString();
  377. },
  378. fail: () => {
  379. // console.log('err');
  380. uni.showToast({
  381. icon: 'error',
  382. title: '文件上传失败!'
  383. });
  384. }
  385. });
  386. },
  387. // 移出图片函数
  388. async deleteFile(e) {
  389. // console.log(e);
  390. this.formData.attId = [];
  391. // console.log('移除了:', this.formData.attId);
  392. },
  393. //检测项目多选框选中
  394. checkboxChange2(arr) { //勾选的事件
  395. // console.log('arr', arr);
  396. this.checkArr = [...arr]
  397. },
  398. checkboxConfirm2() {
  399. this.showInspOption = false
  400. this.formData.detinspect = this.checkArr.join(',')
  401. // console.log('detinspect',this.formData.detinspect);
  402. },
  403. checkboxCancel2() {
  404. this.showInspOption = false
  405. if (this.formData.detinspect) {
  406. const nowArr = this.formData.detinspect.split(',')
  407. this.checkArr = [...nowArr]
  408. }
  409. },
  410. // 隐藏键盘
  411. hideKeyboard() {
  412. uni.hideKeyboard();
  413. },
  414. changetime(e) {
  415. // console.log('change', e);
  416. },
  417. // 所属单位
  418. sexSelect5(e) {
  419. this.formData.orgId = e.id;
  420. this.formData.orgName = e.name;
  421. // console.log(this.formData.orgId);
  422. },
  423. // 检测维保结果select事件
  424. setResult(e) {
  425. // console.log('e', e);
  426. // this.formData.detresult.id = e.id;
  427. // this.formData.detresult.name = e.name;
  428. this.$set(this.formData, 'detresult', {
  429. id: e.id,
  430. name: e.name
  431. })
  432. // this.formData.orgName = e.name;
  433. // console.log(this.formData.orgId);
  434. },
  435. // 检测检测项目select事件
  436. setInsp(e) {
  437. // console.log('e', e);
  438. this.formData.detinspect = e.name;
  439. // this.formData.orgName = e.name;
  440. // console.log(this.formData.orgId);
  441. },
  442. // 生成隐患弹出层 //暂存为草稿箱弹出层
  443. cancel() {
  444. this.show = false;
  445. },
  446. confirm() {
  447. setTimeout(() => {
  448. // 0.5秒后自动关闭
  449. this.show = false;
  450. }, 500);
  451. },
  452. // 触底的事件
  453. scrolltolower() {
  454. // 判断是否还有下一页数据
  455. if (this.pageNo * this.pageSize >= this.total)
  456. return uni.showToast({
  457. title: `数据加载完毕`
  458. });
  459. // 判断是否正在请求其它数据,如果是,则不发起额外的请求
  460. if (this.loading) return;
  461. this.pageNo += 1;
  462. this.showCheckboxShow(this.pageNo);
  463. }
  464. }
  465. };
  466. </script>
  467. <style lang="scss" scoped>
  468. page {
  469. height: 100%;
  470. background-color: #f5f7f9;
  471. position: relative;
  472. }
  473. .buttomBorder {
  474. height: 0px;
  475. border: 1px dashed #cbd5e1;
  476. }
  477. /deep/ .uni-section .uni-section-header {
  478. padding: 0px;
  479. }
  480. /deep/ .u-form-item__body {
  481. font-weight: 500;
  482. flex-direction: column !important;
  483. }
  484. /deep/ .u-form-item__body__left__content__label {
  485. margin-bottom: 16rpx;
  486. font-size: 30rpx !important;
  487. color: #274647 !important;
  488. }
  489. .arrow-icon {
  490. //主动检查箭头
  491. position: absolute;
  492. right: 14px;
  493. top: 49px;
  494. transform: rotate(90deg);
  495. }
  496. /deep/ .u-input[data-v-fdbb9fe6],
  497. /deep/ .u-input.data-v-fdbb9fe6,
  498. /deep/ .u-input {
  499. background-color: #fff;
  500. }
  501. /deep/.u-button[data-v-3bf2dba7],
  502. /deep/.u-button.data-v-3bf2dba7,
  503. /deep/.u-button {
  504. width: 60% !important;
  505. }
  506. //弹框样式
  507. .btnList {
  508. // width: 40%;
  509. display: flex;
  510. // display:flex;
  511. .u-button[data-v-3bf2dba7] {
  512. width: 30%;
  513. }
  514. }
  515. /deep/ .u-popup__content {
  516. //弹出的宽高
  517. height: 100%;
  518. }
  519. /deep/ .u-form-item__body__right__message {
  520. //校验的文字的位置
  521. margin-left: 10rpx !important;
  522. }
  523. /deep/ .uicon-close {
  524. //关闭按钮背景色
  525. background-color: rgba(199, 203, 210, 0.9);
  526. border-radius: 10%;
  527. }
  528. .checkbox {
  529. .checkbox-item {
  530. box-sizing: border-box;
  531. padding-top: 40px;
  532. }
  533. }
  534. //侧边联动
  535. .page-body {
  536. display: flex;
  537. background: #fff;
  538. overflow: hidden;
  539. }
  540. .nav {
  541. display: flex;
  542. width: 100%;
  543. }
  544. .nav-left {
  545. width: 25%;
  546. background: #fafafa;
  547. }
  548. .nav-left-item {
  549. height: 100upx;
  550. border-right: solid 1px #f1f1f1;
  551. border-bottom: solid 1px #f1f1f1;
  552. font-size: 30upx;
  553. display: flex;
  554. align-items: center;
  555. justify-content: center;
  556. }
  557. /deep/.nav-right-item[data-v-73caef23],
  558. /deep/.nav-right-item {
  559. display: flex;
  560. flex-wrap: wrap;
  561. }
  562. .nav-left-item:last-child {
  563. border-bottom: none;
  564. }
  565. .nav-right {
  566. width: 75%;
  567. }
  568. .box {
  569. display: block;
  570. overflow: hidden;
  571. border-bottom: 20upx solid #f3f3f3;
  572. /* min-height: 100vh; */
  573. /*若您的子分类过少想使得每个子分类占满屏请放开上边注视 */
  574. }
  575. .box:last-child {
  576. border: none;
  577. // min-height: 100vh;
  578. }
  579. .nav-right-item {
  580. margin-top: 20px;
  581. // width: 28%;
  582. // min-height: 200upx;
  583. float: left;
  584. text-align: center;
  585. padding: 11upx;
  586. font-size: 28upx;
  587. background: #fff;
  588. /deep/.u-checkbox__icon-wrap[data-v-532d01c7],
  589. /deep/.u-checkbox__icon-wrap {
  590. //复选框的样式
  591. margin: 0 20rpx;
  592. }
  593. /deep/ uni-view[data-v-3d1b15f2] {
  594. //复选框上线的间距
  595. margin: 20rpx 0 !important;
  596. }
  597. // /deep/ .u-checkbox__icon-wrap--square{
  598. // margin: 20rpx;
  599. // }
  600. .u-checkbox-label--right[data-v-532d01c7],
  601. .u-checkbox-label--right {
  602. margin-right: 40rpx;
  603. }
  604. }
  605. .nav-right-item image {
  606. width: 150upx;
  607. height: 150upx;
  608. }
  609. .active {
  610. font-weight: 700;
  611. color: #274647;
  612. background: #fff;
  613. border-right: 0;
  614. }
  615. ::-webkit-scrollbar {
  616. /*取消小程序的默认导航条样式*/
  617. width: 0;
  618. height: 0;
  619. color: transparent;
  620. }
  621. .selectBtn {
  622. width: 200rpx;
  623. margin-left: 0;
  624. font-size: 30rpx;
  625. background-color: #4cb2b6;
  626. }
  627. /deep/.u-action-sheet {
  628. overflow-y: auto;
  629. height: 1000rpx;
  630. background-color: #fff;
  631. }
  632. .example {
  633. overflow-y: auto;
  634. }
  635. </style>