trouble_solve.vue 7.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258
  1. <template>
  2. <view class="container uni-container">
  3. <view class=" flex flex-direction width100">
  4. <text class="text-xl">检查信息</text>
  5. <!-- <view class="">
  6. 任务介绍
  7. </view> -->
  8. <!-- 注意,如果需要兼容微信小程序,最好通过setRules方法设置rules规则 -->
  9. <u--form ref="uForm" :model="formData" labelPosition="left" labelWidth="70" labelAlign="right">
  10. <u-form-item label="检查项目" prop="name" ref="item1">
  11. <text class="text-cut padding-sm">{{formData.name}}</text>
  12. </u-form-item>
  13. <u-form-item label="检查位置" prop="unit" ref="item1">
  14. <text class="text-cut padding-sm"> {{formData.unit}}</text>
  15. </u-form-item>
  16. <u-form-item label="检查时间" prop="starttime" ref="item1">
  17. <text class="text-cut padding-sm"> {{formData.starttime}} </text>
  18. </u-form-item>
  19. <u-form-item label="详情描述" prop="introduction" ref="item1">
  20. <text class=" padding-sm"> {{formData.introduction}}</text>
  21. </u-form-item>
  22. <text class="text-xl text-black">隐患解决</text>
  23. <u-form-item label="结果描述" prop="resultdescription" ref="item1">
  24. <u--textarea v-model="formData.resultdescription" placeholder="请输入内容"
  25. count height="100">
  26. </u--textarea>
  27. </u-form-item>
  28. <u-form-item label="现场图片" prop="sex" ref="item1">
  29. <u-upload :fileList="fileList1" @afterRead="afterRead"
  30. @delete="deletePic" name="1" multiple :maxCount="10"></u-upload>
  31. </u-form-item>
  32. <u-form-item label="设备扫码" prop="QRcode">
  33. <view @tap='signInClick' class="iconfont icon-saoma" style="color: #007AFF;font-size: 60px;">
  34. </view>
  35. </u-form-item>
  36. <!-- <u-form-item label="附件" prop="sex" ref="item1" >
  37. <u-upload ref="uUpload" :action="action" :auto-upload="true" :file-list="listImg"
  38. @on-remove="onRemove" @on-success="onSuccess" :max-size="2 * 1024 * 1024" max-count="9"
  39. width="300" height="300" :multiple="false" :limitstatus="limitstatus"></u-upload>
  40. </u-form-item> -->
  41. </u--form>
  42. <!-- 提交 -->
  43. <u-button shape="circle" size="small" color="#2563EB" text="确认提交"
  44. customStyle="margin-top: 50px" @click="submit">
  45. </u-button>
  46. </view>
  47. </view>
  48. </template>
  49. <script>
  50. import config from '@/config'
  51. import {
  52. getTaskDetails,
  53. getTaskSubmit,
  54. getTaskErrorsubmit,
  55. } from "@/api/task";
  56. import {
  57. uploadAvatar
  58. } from "@/api/system/user"
  59. import {
  60. getTasDetails
  61. } from "@/api/task";
  62. let that = null;
  63. const baseUrl = config.baseUrl + config.baseApi;
  64. export default {
  65. data() {
  66. return {
  67. statusList: {
  68. 0: "未完成",
  69. 1: "已完成",
  70. 2: "审核中",
  71. 3: "审核未通过"
  72. },
  73. // 自定义表单数据
  74. formData: {
  75. id: '',
  76. name: '',
  77. unit: '',
  78. starttime: '',
  79. endtime: '',
  80. status: '',
  81. introduction: '',
  82. resultdescription: '',
  83. img: [],
  84. },
  85. fileList1: [],
  86. limitstatus: ['png', 'jpg', 'jpeg'], // 允许的图片后缀
  87. rules: {
  88. name: [{
  89. status: 'string',
  90. required: true,
  91. message: '请填写姓名',
  92. trigger: ['blur', 'change']
  93. }, {
  94. min: 2,
  95. max: 12,
  96. message: '长度在2-12个字符之间'
  97. // // 此为同步验证,可以直接返回true或者false,如果是异步验证,稍微不同,见下方说明
  98. // validator: (rule, value, callback) => {
  99. // // 调用uView自带的js验证规则,详见:https://www.uviewui.com/js/test.html
  100. // return uni.$u.test.chinese(value);
  101. // },
  102. // message: "姓名必须为中文",
  103. // // 触发器可以同时用blur和change,二者之间用英文逗号隔开
  104. // trigger: ["change", "blur"],
  105. }],
  106. code: {
  107. status: 'string',
  108. required: true,
  109. len: 4,
  110. message: '请填写4位验证码',
  111. trigger: ['blur']
  112. },
  113. },
  114. }
  115. },
  116. computed: {},
  117. //目的页面接收
  118. //这里用onshow()也可以
  119. onLoad(options) {
  120. var data = options.id;
  121. console.log(data)
  122. this.getData(data)
  123. },
  124. // onLoad: function(option) {
  125. // that = this;
  126. // const eventChannel = this.getOpenerEventChannel();
  127. // // eventChannel.emit('acceptDataFromOpenedPage', {
  128. // // 监听acceptDataFromOpenerPage事件,获取上一页面通过eventChannel传送到当前页面的数据
  129. // eventChannel.on('acceptDataFromOpenerPage', function(val) {
  130. // console.log(' val', val)
  131. // that.getData(val.id)
  132. // })
  133. // },
  134. onReady() {
  135. //onReady 为uni-app支持的生命周期之一
  136. // console.log('this.$refs.uForm', this.$refs.uForm);
  137. // 如果需要兼容微信小程序,并且校验规则中含有方法等,只能通过setRules方法设置规则
  138. this.$refs.uForm.setRules(this.rules)
  139. },
  140. methods: {
  141. // =================数据转换==================
  142. statusListTran(val) { //status状态转换
  143. return this.statusList[val]
  144. },
  145. // =============获取数据===================s
  146. // 获取数据
  147. getData(id) {
  148. console.log('id', id);
  149. this.loading = true
  150. getTaskDetails({
  151. id: id
  152. }).then(response => {
  153. console.log(response);
  154. // 为数据赋值:通过展开运算符的形式,进行新旧数据的拼接
  155. this.formData = response.data
  156. this.loading = false;
  157. });
  158. },
  159. // ==============照片处理=================
  160. // 删除图片
  161. deletePic(event) {
  162. this.formData.img.splice(event.index, 1)
  163. },
  164. // 新增图片
  165. async afterRead(event) {
  166. // 当设置 multiple 为 true 时, file 为数组格式,否则为对象格式
  167. let lists = [].concat(event.file)
  168. let fileListLen = this.formData.img.length
  169. lists.map((item) => {
  170. this.formData.img.push({
  171. ...item,
  172. status: 'uploading',
  173. message: '上传中'
  174. })
  175. })
  176. for (let i = 0; i < lists.length; i++) {
  177. const result = await this.uploadFilePromise(lists[i].url)
  178. let item = this.formData.img[fileListLen]
  179. this.formData.img.splice(fileListLen, 1, Object.assign(item, {
  180. status: 'success',
  181. message: '',
  182. url: result
  183. }))
  184. fileListLen++
  185. }
  186. },
  187. uploadFilePromise(url) {
  188. let data = {
  189. name: 'avatarFile',
  190. filePath: url
  191. }
  192. return uploadAvatar(data).then(response => {
  193. uni.showToast({
  194. title: "成功",
  195. icon: 'success'
  196. })
  197. })
  198. // return new Promise((resolve, reject) => {
  199. // let a = uni.uploadFile({
  200. // url: 'http://192.168.2.21:7001/upload', // 仅为示例,非真实的接口地址
  201. // filePath: url,
  202. // name: 'file',
  203. // formData: {
  204. // user: 'test'
  205. // },
  206. // success: (res) => {
  207. // setTimeout(() => {
  208. // resolve(res.data.data)
  209. // }, 1000)
  210. // }
  211. // });
  212. // })
  213. },
  214. // ==============照片处理结束==================
  215. // ===================扫码=======================
  216. signInClick() {
  217. uni.scanCode({
  218. // 只允许从相机扫码
  219. onlyFromCamera: true,
  220. success: function(res) {
  221. console.log('条码类型:' + res.scanType);
  222. console.log('条码内容:' + res.result);
  223. }
  224. });
  225. },
  226. // ==============提交================================
  227. // 待完成任务提交
  228. submit() {
  229. // 如果有错误,会在catch中返回报错信息数组,校验通过则在then中返回true
  230. this.$refs.uForm.validate().then(res => {
  231. getTaskSubmit(this.formData).then(response => {
  232. console.log('response.data.msg0,', response.data.msg);
  233. uni.showLoading({
  234. title: response.data.msg
  235. });
  236. setTimeout(() => {
  237. uni.hideLoading();
  238. this.$tab.navigateTo('/pagesA/fire/hidden_trouble/index')
  239. }, 2000);
  240. });
  241. }).catch(errors => {
  242. console.log('err', errors);
  243. uni.$u.toast('校验失败')
  244. })
  245. },
  246. }
  247. }
  248. </script>
  249. <style lang="scss">
  250. /deep/ .u-form-item__body {
  251. padding: 5rpx 0rpx;
  252. }
  253. /deep/ .u-form-item {
  254. font-size: 13px;
  255. }
  256. </style>