inspection_details.vue 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125
  1. <template>
  2. <view class="container uni-container">
  3. <uni-section title="详情" type="line">
  4. <view class=" flex flex-direction width100">
  5. <text class="text-cut padding-sm">巡检位置:{{formData.createTime}}</text>
  6. <text class="text-cut padding-sm">巡检人:{{formData.createTime}}</text>
  7. <text class="text-cut padding-sm">巡检时间:{{formData.createTime}}</text>
  8. </view>
  9. </uni-section>
  10. <uni-section title="巡检结果" type="line">
  11. <u--textarea v-model="textareaValue" placeholder="请输入巡检结果" :maxlength="1000" count height="200">
  12. </u--textarea>
  13. </uni-section>
  14. <uni-section title="现场图片" type="line">
  15. <u-upload :fileList="fileList3" @afterRead="afterRead" @delete="deletePic" name="3" multiple :maxCount="10"
  16. :previewFullImage="true"></u-upload>
  17. </uni-section>
  18. <uni-row :gutter="20">
  19. <uni-col :span="12">
  20. <u-button shape="circle" size="small" color="#2563EB" text="立即整改"></u-button>
  21. </uni-col>
  22. <uni-col :span="12">
  23. <u-button shape="circle" size="small" color="#2563EB" text="生成隐患"></u-button>
  24. </uni-col>
  25. </uni-row>
  26. </view>
  27. </template>
  28. <script>
  29. import {
  30. addRole,
  31. changeRoleStatus,
  32. delRole,
  33. exportRole,
  34. getRole,
  35. listRole,
  36. updateRole
  37. } from "@/api/system/role";
  38. import {
  39. uploadAvatar
  40. } from "@/api/system/user"
  41. let that = null;
  42. export default {
  43. data() {
  44. return {
  45. // 数据
  46. tableData: [],
  47. // 每页数据量
  48. pageSize: 20,
  49. // 当前页
  50. pageNo: 1,
  51. // 数据总量
  52. total: 0,
  53. // tableData数据加载中
  54. loading: false,
  55. // 自定义表单数据
  56. formData: {},
  57. // 输入框的内容
  58. textareaValue: '统计字数',
  59. fileList3: [{
  60. url: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
  61. }],
  62. }
  63. },
  64. computed: {},
  65. // 在 vue页面,向起始页通过事件传递数据
  66. onLoad: function(option) {
  67. that = this;
  68. const eventChannel = this.getOpenerEventChannel();
  69. // eventChannel.emit('acceptDataFromOpenedPage', {
  70. // 监听acceptDataFromOpenerPage事件,获取上一页面通过eventChannel传送到当前页面的数据
  71. eventChannel.on('acceptDataFromOpenerPage', function(val) {
  72. that.formData = val
  73. })
  74. },
  75. onReady() {},
  76. methods: {
  77. // 删除图片
  78. deletePic(event) {
  79. this[`fileList${event.name}`].splice(event.index, 1)
  80. },
  81. // 新增图片
  82. async afterRead(event) {
  83. // 当设置 mutiple 为 true 时, file 为数组格式,否则为对象格式
  84. let lists = [].concat(event.file)
  85. let fileListLen = this[`fileList${event.name}`].length
  86. lists.map((item) => {
  87. this[`fileList${event.name}`].push({
  88. ...item,
  89. status: 'uploading',
  90. message: '上传中'
  91. })
  92. })
  93. for (let i = 0; i < lists.length; i++) {
  94. const result = await this.uploadFilePromise(lists[i].url)
  95. let item = this[`fileList${event.name}`][fileListLen]
  96. this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
  97. status: 'success',
  98. message: '',
  99. url: result
  100. }))
  101. fileListLen++
  102. }
  103. },
  104. uploadFilePromise(url) {
  105. let data = {
  106. name: 'avatarFile',
  107. filePath: url
  108. }
  109. this.loading = true
  110. return uploadAvatar(data).then(response => {
  111. uni.showToast({
  112. title: "修改成功",
  113. icon: 'success'
  114. })
  115. })
  116. },
  117. }
  118. }
  119. </script>
  120. <style lang="scss">
  121. .buttomBorder {
  122. height: 0px;
  123. border: 1px dashed #CBD5E1;
  124. }
  125. </style>