edit_detection.vue 17 KB

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