task_details.vue 9.0 KB

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