您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符

progress-query-business.vue 7.8KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309
  1. <template>
  2. <view class="content">
  3. <view class="top-content">
  4. <!-- <view class="item">
  5. <text>车牌号:</text><input placeholder="请输入车牌号" v-model="state.vehiclePlate" />
  6. </view>
  7. <view class="item">
  8. <text>车牌颜色:</text>
  9. <view>
  10. <uni-data-select v-model="state.vehiclePlateColor" :localdata="state.vehiclePlateColorArr"
  11. @change="changeColor" :clear="false"></uni-data-select>
  12. </view>
  13. <text style="margin-left: 20rpx;">审核状态:</text>
  14. <view>
  15. <uni-data-select v-model="state.status" :localdata="state.statusArr" @change="changeStatus"
  16. :clear="false"></uni-data-select>
  17. </view>
  18. </view> -->
  19. <view class="item last">
  20. <text>业务类型:</text>
  21. <uni-data-select v-model="state.businessTypeVal" :localdata="state.businessRange"
  22. @change="changeBusiness" :clear="false"></uni-data-select>
  23. </view>
  24. <view class="example-body">
  25. <uni-datetime-picker v-model="state.range" type="daterange" />
  26. <button size="mini" style="color: #ffffff;
  27. backgroundColor: rgb(118, 200, 77);
  28. borderColor: rgb(118, 200, 77);
  29. font-size: 26rpx;
  30. flex-shrink: 0;margin-left: 20rpx;" @click="search(1)">搜索</button>
  31. </view>
  32. </view>
  33. <view class="uni-container">
  34. <view class="list-item" v-for="(item,index) in state.listData" @click="go(item)">
  35. <view>
  36. <view><text>车牌号:</text><text>{{item.vehiclePlate}}</text></view>
  37. <view><text>车牌颜色:</text><text>{{item.vehiclePlateColorC}}</text></view>
  38. <view><text>状态:</text><text>{{item.statusC}}</text></view>
  39. <view><text>业务类型:</text><text>{{item.businessTypeC}}</text></view>
  40. <view><text>时间:</text><text>{{item.insertTime}}</text></view>
  41. </view>
  42. <image class="right" src="../../../static/image/icon-back.png" mode=""></image>
  43. </view>
  44. </view>
  45. <view class="bottom-line" v-if="state.flags">我是有底线的~~~</view>
  46. </view>
  47. </template>
  48. <script setup lang="ts">
  49. import { reactive } from "vue";
  50. import {
  51. businessType
  52. } from "@/datas/businessType.js"
  53. import { onLoad, onReachBottom } from "@dcloudio/uni-app";
  54. import { auditQueryApi } from "@/utils/network/api.js";
  55. import { stringToJson } from "@/utils/network/encryption";
  56. import { request } from "@/utils/network/request.js";
  57. import { getItem, StorageKeys } from "@/utils/storage";
  58. import { vehiclePlateColor, getVehiclePlateColorPai } from "@/datas/vehiclePlateColor";
  59. const state = reactive({
  60. startTime: Date.now(), //日期
  61. businessTypeVal: "",
  62. businessRange: [],
  63. listData: [],
  64. range: ['', ''],
  65. pageSize: 10, //每页数据量
  66. pageNo: 1, // 当前页
  67. total: 0, // 数据总量
  68. flags: false,
  69. vehiclePlate: "",//车牌号
  70. vehiclePlateColor: "",
  71. status: "",
  72. statusArr: [], //AUDIT_STATUS
  73. vehiclePlateColorArr: []
  74. })
  75. onLoad((option) => {
  76. // 车牌颜色
  77. let getVehiclePlateColorArr = getItem('key')['VEHICLE_COLOR_TYPE']
  78. for (var k = 0; k < getVehiclePlateColorArr.length; k++) {
  79. let obj2 = {};
  80. obj2['value'] = getVehiclePlateColorArr[k]['code']
  81. obj2['text'] = getVehiclePlateColorArr[k]['name']
  82. state.vehiclePlateColorArr.push(obj2)
  83. }
  84. // 审核状态
  85. let getStatusArr = getItem('key')['AUDIT_STATUS'];
  86. for (var k = 0; k < getStatusArr.length; k++) {
  87. let obj1 = {};
  88. obj1['value'] = getStatusArr[k]['code']
  89. obj1['text'] = getStatusArr[k]['name']
  90. state.statusArr.push(obj1)
  91. }
  92. // 业务类型
  93. let getBusiness = getItem('key')['BUSINESS_TYPE'];
  94. for (var k = 0; k < getBusiness.length; k++) {
  95. let obj = {};
  96. obj['value'] = getBusiness[k]['code']
  97. obj['text'] = getBusiness[k]['name']
  98. state.businessRange.push(obj)
  99. }
  100. state.vehiclePlate = option.vehiclePlate
  101. state.vehiclePlateColor = option.vehiclePlateColor
  102. search(1)
  103. })
  104. const changeColor = (e) => {
  105. console.log("changeColor", e)
  106. state.vehiclePlateColor = e
  107. }
  108. const changeStatus = (e) => {
  109. console.log("changeColor", e)
  110. state.status = e
  111. }
  112. const changeBusiness = (e) => {
  113. state.businessTypeVal = e
  114. console.log(e)
  115. }
  116. //业务完成日志
  117. const search = (val) => {
  118. if (val == 1) {
  119. state.pageNo = 1
  120. }
  121. if (state.pageNo == 1 && state.listData.length > 0) {
  122. state.listData = []
  123. }
  124. var data = {
  125. vehiclePlate: state.vehiclePlate,
  126. vehiclePlateColor: state.vehiclePlateColor,
  127. status: state.status,
  128. businessType: state.businessTypeVal,
  129. startTime: state.range[0] ? state.range[0] + 'T00:00:00' : state.range[0],
  130. endTime: state.range[1] ? state.range[1] + 'T00:00:00' : state.range[1],
  131. pageNo: state.pageNo,
  132. pageSize: state.pageSize,
  133. };
  134. for (var index in data) {
  135. console.log(index, data[index], data[index] == "")
  136. if (data[index].toString() == "") {
  137. delete data[index]
  138. }
  139. }
  140. const options = {
  141. type: 2,
  142. data: data,
  143. method: "POST",
  144. showLoading: true,
  145. };
  146. request(auditQueryApi, options).then((res) => {
  147. const data = stringToJson(res.bizContent);
  148. var getData = [...stringToJson(res.bizContent).data, ...state.listData]
  149. for (var i = 0; i < getData.length; i++) {
  150. getData[i]['vehiclePlateColorC'] = getVehiclePlateColorPai(getData[i]['vehiclePlateColor'])
  151. if (getData[i]['status'] == 'AUDIT') {
  152. getData[i]['statusC'] = "审核中"
  153. } else if (getData[i]['status'] == 'FAIL') {
  154. getData[i]['statusC'] = "未通过"
  155. } else if (getData[i]['status'] == 'COMPLETE') {
  156. getData[i]['statusC'] = "审核通过"
  157. }
  158. for (var m = 0; m < state.businessRange.length; m++) {
  159. if (getData[i]['businessType'] == state.businessRange[m]['value']) {
  160. getData[i]['businessTypeC'] = state.businessRange[m]['text']
  161. break;
  162. }
  163. }
  164. }
  165. state.listData = getData
  166. state.total = data.data.length
  167. console.log("业务完成日志", state.listData, state.pageNo,)
  168. });
  169. }
  170. const change = (e) => {
  171. console.log("e", e)
  172. state.pageNo = e.current
  173. search(2)
  174. }
  175. // 触底加载
  176. onReachBottom(() => {
  177. if (state.listData.length < state.pageNo * 10) return state.flags = true
  178. console.log("触底了")
  179. state.pageNo++
  180. search(2)
  181. })
  182. const go = (item) => {
  183. const params = encodeURIComponent(JSON.stringify(item))
  184. uni.navigateTo({
  185. url: `/subpackage/after-sale/progress-query/progress-query-business-details?params=${params}`
  186. })
  187. }
  188. </script>
  189. <style scoped>
  190. .top-content {
  191. position: fixed;
  192. left: 0;
  193. top: 0;
  194. background-color: white;
  195. width: 100%;
  196. padding: 0 20rpx 20rpx 20rpx;
  197. box-sizing: border-box;
  198. z-index: 999999;
  199. }
  200. .content {
  201. font-size: 32rpx;
  202. padding: 20rpx 30rpx;
  203. background-color: #EEF7F7;
  204. min-height: 100vh;
  205. }
  206. .card {
  207. display: flex;
  208. margin: 0 20rpx;
  209. align-items: center;
  210. }
  211. .title {
  212. margin-bottom: 20rpx;
  213. }
  214. .uni-container {
  215. margin: 50rpx 0;
  216. margin-top: 180rpx;
  217. }
  218. /deep/.uni-table-th,
  219. /deep/.uni-table-td {
  220. padding: 0 !important;
  221. font-size: 12px !important;
  222. }
  223. /deep/.uni-date__x-input,
  224. /deep/.uni-select {
  225. font-size: 13px;
  226. height: 24px;
  227. line-height: 24px;
  228. }
  229. /deep/.last .uni-stat__select {
  230. width: 320rpx;
  231. }
  232. /deep/.uni-select__selector-empty,
  233. /deep/.uni-select__selector-item {
  234. font-size: 13px !important;
  235. }
  236. /deep/.uni-date {
  237. width: 73% !important;
  238. }
  239. .example-body {
  240. display: flex;
  241. align-items: center;
  242. margin-top: 20rpx;
  243. }
  244. /deep/.uni-date-x {
  245. height: 56rpx !important;
  246. }
  247. .list-item {
  248. width: 95%;
  249. border-radius: 10rpx;
  250. margin: 30rpx auto;
  251. font-size: 28rpx;
  252. border: 1rpx solid #ccc;
  253. padding: 12rpx;
  254. box-sizing: border-box;
  255. background-color: white;
  256. display: flex;
  257. align-items: center;
  258. }
  259. .list-item>view {
  260. margin-bottom: 10rpx;
  261. width: 90%;
  262. }
  263. .bottom-line {
  264. text-align: center;
  265. margin: 30rpx 0;
  266. }
  267. .item {
  268. display: flex;
  269. font-size: 30rpx;
  270. margin: 20rpx 0 0 20rpx;
  271. align-items: center;
  272. }
  273. input,
  274. .uni-input {
  275. border: 1rpx solid #ccc;
  276. padding: 0 10rpx;
  277. height: 28rpx;
  278. line-height: 28rpx;
  279. }
  280. .right {
  281. width: 40rpx;
  282. height: 40rpx;
  283. transform: rotateY(180deg);
  284. }
  285. </style>