trouble_solve.vue 7.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251
  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. this.getData(data)
  122. },
  123. // onLoad: function(option) {
  124. // that = this;
  125. // const eventChannel = this.getOpenerEventChannel();
  126. // // eventChannel.emit('acceptDataFromOpenedPage', {
  127. // // 监听acceptDataFromOpenerPage事件,获取上一页面通过eventChannel传送到当前页面的数据
  128. // eventChannel.on('acceptDataFromOpenerPage', function(val) {
  129. // console.log(' val', val)
  130. // that.getData(val.id)
  131. // })
  132. // },
  133. onReady() {
  134. //onReady 为uni-app支持的生命周期之一
  135. // console.log('this.$refs.uForm', this.$refs.uForm);
  136. // 如果需要兼容微信小程序,并且校验规则中含有方法等,只能通过setRules方法设置规则
  137. this.$refs.uForm.setRules(this.rules)
  138. },
  139. methods: {
  140. // =================数据转换==================
  141. statusListTran(val) { //status状态转换
  142. return this.statusList[val]
  143. },
  144. // =============获取数据===================s
  145. // 获取数据
  146. getData(id) {
  147. this.loading = true
  148. getTaskDetails({
  149. id: id
  150. }).then(response => {
  151. // 为数据赋值:通过展开运算符的形式,进行新旧数据的拼接
  152. this.formData = response.data
  153. this.loading = false;
  154. });
  155. },
  156. // ==============照片处理=================
  157. // 删除图片
  158. deletePic(event) {
  159. this.formData.img.splice(event.index, 1)
  160. },
  161. // 新增图片
  162. async afterRead(event) {
  163. // 当设置 multiple 为 true 时, file 为数组格式,否则为对象格式
  164. let lists = [].concat(event.file)
  165. let fileListLen = this.formData.img.length
  166. lists.map((item) => {
  167. this.formData.img.push({
  168. ...item,
  169. status: 'uploading',
  170. message: '上传中'
  171. })
  172. })
  173. for (let i = 0; i < lists.length; i++) {
  174. const result = await this.uploadFilePromise(lists[i].url)
  175. let item = this.formData.img[fileListLen]
  176. this.formData.img.splice(fileListLen, 1, Object.assign(item, {
  177. status: 'success',
  178. message: '',
  179. url: result
  180. }))
  181. fileListLen++
  182. }
  183. },
  184. uploadFilePromise(url) {
  185. let data = {
  186. name: 'avatarFile',
  187. filePath: url
  188. }
  189. return uploadAvatar(data).then(response => {
  190. uni.showToast({
  191. title: "成功",
  192. icon: 'success'
  193. })
  194. })
  195. // return new Promise((resolve, reject) => {
  196. // let a = uni.uploadFile({
  197. // url: 'http://192.168.2.21:7001/upload', // 仅为示例,非真实的接口地址
  198. // filePath: url,
  199. // name: 'file',
  200. // formData: {
  201. // user: 'test'
  202. // },
  203. // success: (res) => {
  204. // setTimeout(() => {
  205. // resolve(res.data.data)
  206. // }, 1000)
  207. // }
  208. // });
  209. // })
  210. },
  211. // ==============照片处理结束==================
  212. // ===================扫码=======================
  213. signInClick() {
  214. uni.scanCode({
  215. // 只允许从相机扫码
  216. onlyFromCamera: true,
  217. success: function(res) {
  218. }
  219. });
  220. },
  221. // ==============提交================================
  222. // 待完成任务提交
  223. submit() {
  224. // 如果有错误,会在catch中返回报错信息数组,校验通过则在then中返回true
  225. this.$refs.uForm.validate().then(res => {
  226. getTaskSubmit(this.formData).then(response => {
  227. uni.showLoading({
  228. title: response.data.msg
  229. });
  230. setTimeout(() => {
  231. uni.hideLoading();
  232. this.$tab.navigateTo('/pagesA/fire/hidden_trouble/index')
  233. }, 2000);
  234. });
  235. }).catch(errors => {
  236. uni.$u.toast('校验失败')
  237. })
  238. },
  239. }
  240. }
  241. </script>
  242. <style lang="scss">
  243. /deep/ .u-form-item__body {
  244. padding: 5rpx 0rpx;
  245. }
  246. /deep/ .u-form-item {
  247. font-size: 13px;
  248. }
  249. </style>