inspection_hislist.vue 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179
  1. <template>
  2. <view class="container uni-container uni-container-bg">
  3. <view class="">
  4. <u-list @scrolltolower="scrolltolower">
  5. <u-list-item v-for="(item, index) in tableData" :key="index" link
  6. :style="[{'border-left':(item.status==='0'||item.status==='3'?'10px solid red':item.status==='1'?'10px solid green':'10px solid blue')},{'border-radius': '10px'}]">
  7. <uni-row class="demo-uni-row padding-tb-sm" :gutter="20" width="100%">
  8. <uni-col :span="24">
  9. <text class="text-xl font-weight-700">
  10. {{item.name}}
  11. </text>
  12. <text class="text-cut padding-sm"
  13. :style="{color:(item.status==='0'||item.status==='3'?'red':item.status==='1'?'green':'blue'),}">
  14. {{statusListTran(item.status)}}</text>
  15. </uni-col>
  16. </uni-row>
  17. <uni-row class="demo-uni-row padding-bottom-sm" :gutter="20" width="100%">
  18. <uni-col :span="24" class="text-xl font-weight-700">
  19. <u-line></u-line>
  20. </uni-col>
  21. </uni-row>
  22. <view class="box2">
  23. <image :src="`${urls}/success.jpg`" style="width: 50rpx;height: 72rpx;">
  24. </image>
  25. </view>
  26. <u-scroll-list>
  27. <view v-for="(item, index) in list" :key="index">
  28. <image :src="item.thumb" style="width: 160rpx;height: 160rpx;"></image>
  29. </view>
  30. </u-scroll-list>
  31. </u-list-item>
  32. </u-list>
  33. </view>
  34. <!-- 卡片 -->
  35. <!-- <view class="uni-pagination-box">
  36. <uni-list @scrolltolower="scrolltolower">
  37. <uni-list-item v-for="(item, index) in tableData" :key="index" @click.native="onClick(item)" link>
  38. <uni-row class="demo-uni-row padding-tb-sm" :gutter="20" width="100%">
  39. <uni-col :span="24">
  40. <text class="text-xl font-weight-700">
  41. {{item.name}}
  42. </text>
  43. </uni-col>
  44. </uni-row>
  45. <view class="box2">
  46. <image src="../../../../static/images/success.jpg" style="width: 25rpx;height: 37rpx;">
  47. </image>
  48. </view>
  49. <u-scroll-list>
  50. <view v-for="(item, index) in list" :key="index">
  51. <image :src="item.thumb" style="width: 80rpx;height: 80rpx;"></image>
  52. </view>
  53. </u-scroll-list>
  54. </uni-list-item>
  55. </uni-list> -->
  56. <!-- <u--image :showLoading="true" :src="src" width="80rpx" height="80rpx" @click=""></u--image> -->
  57. <!-- 分页 -->
  58. <!-- <page-pagination :total="total" :pageSize="pageSize" :showAround="true" :btnText="true" :showGoPage="true"
  59. showPageInfo trigger="click" @change="change"></page-pagination> -->
  60. </view>
  61. </view>
  62. </template>
  63. <script>
  64. import {
  65. getDailyInspectionUndoneList, // 每日巡查已完成详情
  66. addDailyInspectionUndoneNormal, // 未完成正常提交
  67. } from "@/api/daily_inspection";
  68. import config from '@/config'
  69. const baseUrlImg=config.baseUrlImg
  70. export default {
  71. data() {
  72. return {
  73. urls:baseUrlImg,
  74. // 图片链接
  75. src: 'https://cdn.uviewui.com/uview/album/1.jpg',
  76. list: [{
  77. thumb: "https://cdn.uviewui.com/uview/goods/1.jpg"
  78. }, {
  79. thumb: "https://cdn.uviewui.com/uview/goods/2.jpg"
  80. }, {
  81. thumb: "https://cdn.uviewui.com/uview/goods/3.jpg"
  82. }, {
  83. thumb: "https://cdn.uviewui.com/uview/goods/4.jpg"
  84. }, {
  85. thumb: "https://cdn.uviewui.com/uview/goods/5.jpg"
  86. }],
  87. // 人员数据
  88. tableData: [],
  89. // 每页数据量
  90. pageSize: 20,
  91. // 当前页
  92. pageNo: 1,
  93. // 数据总量
  94. total: 0,
  95. // tableData数据加载中
  96. loading: false,
  97. // 基本案列数据
  98. radiolist1: [{
  99. name: '已完成',
  100. disabled: false,
  101. value: '1'
  102. }, {
  103. name: '有问题',
  104. disabled: false,
  105. value: '0'
  106. }],
  107. // u-radio-group的v-model绑定的值如果设置为某个radio的name,就会被默认选中
  108. radiovalue1: '已完成',
  109. statusList: {
  110. 0: "未完成",
  111. 1: "已完成",
  112. 2: "审核中",
  113. 3: "审核未通过"
  114. },
  115. }
  116. },
  117. //目的页面接收
  118. //这里用onshow()也可以
  119. onLoad(options) {
  120. this.selectedIndexs = []
  121. var id = options.id;
  122. this.getData(1, options.id)
  123. },
  124. methods: {
  125. // =================数据转换==================
  126. statusListTran(val) { //status状态转换
  127. return this.statusList[val]
  128. },
  129. // ================================
  130. groupChange(n) {
  131. },
  132. radioChange(n) {
  133. },
  134. // 分页触发
  135. change(e) {
  136. this.$refs.table.clearSelection()
  137. this.selectedIndexs.length = 0
  138. this.getData(e.current)
  139. },
  140. // 获取数据
  141. getData(pageNo, id) {
  142. this.loading = true
  143. this.pageNo = pageNo
  144. getDailyInspectionUndoneList({
  145. pageNo: this.pageNo,
  146. pageSize: this.pageSize,
  147. id: id,
  148. }).then(response => {
  149. this.tableData = response.data.list;
  150. this.total = response.data.total;
  151. this.loading = false;
  152. });
  153. },
  154. // 触底的事件
  155. scrolltolower() {
  156. // 判断是否还有下一页数据
  157. if (this.pageNo * this.pageSize >= this.total) return uni.showToast({
  158. title: `数据加载完毕`
  159. })
  160. // 判断是否正在请求其它数据,如果是,则不发起额外的请求
  161. if (this.loading) return
  162. this.pageNo += 1
  163. this.getData(this.pageNo)
  164. },
  165. }
  166. }
  167. </script>
  168. <style lang="scss" scoped>
  169. // --------------------
  170. ::v-deep .u-list-item {
  171. position: relative;
  172. }
  173. .box2 {
  174. position: absolute;
  175. right: 20rpx;
  176. top: 0rpx;
  177. }
  178. </style>