toDoList.vue 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425
  1. <template>
  2. <view class="pagesCons">
  3. <!-- 自定义标题 -->
  4. <u-navbar :is-back="false" :border-bottom="false" :background="background" id="navbar">
  5. <view class="slot-wrap">
  6. <view class="back-icon" @click="goBack">
  7. <u-icon name="arrow-left" color="#fff" size="32"></u-icon>
  8. </view>
  9. <view class="left-icon">待办单</view>
  10. <view class="right-icon">
  11. <u-icon name="plus-circle" color="#fff" size="32"></u-icon>新增
  12. </view>
  13. </view>
  14. </u-navbar>
  15. <view class="tab-body">
  16. <view>
  17. <u-tabs-swiper ref="uTabs" :list="tabList" name="dispName" :current="current" @change="tabsChange" :is-scroll="false"
  18. swiperWidth="750"></u-tabs-swiper>
  19. </view>
  20. <swiper class="check-list" :current="swiperCurrent" @transition="transition" @change="swiperChange" @animationfinish="animationfinish">
  21. <swiper-item class="swiper-item" style="height: 100%;width: 100%;overflow: hidden;" v-for="(tabs, index) in tabList" :key="index">
  22. <scroll-view scroll-y style="height: 100%;width: 100%;overflow: auto;" @scrolltolower="onreachBottom">
  23. <view
  24. class="check-order-list"
  25. v-for="(item,index) in list"
  26. :key="item.id"
  27. >
  28. <view class="check-row" @click="viewRow(item)">
  29. <view>{{item.carModelName}}</view>
  30. <view class="createDate">{{item.createDate}}</view>
  31. </view>
  32. <view class="check-row" @click="viewRow(item)">
  33. <view>
  34. {{item.vehicleNumber}}
  35. </view>
  36. <view style="text-align: right;">
  37. <uni-font-icons size="14" type="icon-phone"></uni-font-icons>
  38. <text>{{item.customMobile}}</text>
  39. </view>
  40. <view style="width: 40upx;text-align: right;" v-if="item.resultState != 10">
  41. <uni-font-icons type="icon-xiangyoujiantou"></uni-font-icons>
  42. </view>
  43. </view>
  44. <view class="check-row">
  45. <view>
  46. {{item.orderSource}}
  47. </view>
  48. <view style="text-align: right;">
  49. </view>
  50. </view>
  51. </view>
  52. <u-empty :text="noDataText" img-width="120" v-if="list.length==0 && status!='loading'" mode="list"></u-empty>
  53. <view style="padding: 20upx;">
  54. <u-loadmore v-if="total>pageSize || status=='loading'" :status="status" />
  55. </view>
  56. </scroll-view>
  57. </swiper-item>
  58. </swiper>
  59. </view>
  60. <!-- 工单查询 -->
  61. <u-popup v-model="showSearch" class="search-popup" mode="right" :custom-style="{top:'var(--status-bar-height)'}" length="80%">
  62. <view class="search-title">工单查询</view>
  63. <view class="uni-list">
  64. <view class="uni-list-cell">
  65. <view class="uni-list-cell-left">
  66. 关键词:
  67. </view>
  68. <view class="uni-list-cell-db">
  69. <input class="uni-input" v-model="queryWord" placeholder="工单、客户姓名、手机号、车牌号" />
  70. </view>
  71. </view>
  72. </view>
  73. <view class="uni-list">
  74. <view class="uni-list-cell">
  75. <view class="uni-list-cell-left">
  76. 开始时间:
  77. </view>
  78. <view class="uni-list-cell-db">
  79. <picker mode="date" v-model="beginDate" :end="endDate" @change="bindBeginDateChange">
  80. <view class="uni-input">{{beginDate}}</view>
  81. </picker>
  82. </view>
  83. </view>
  84. </view>
  85. <view class="uni-list">
  86. <view class="uni-list-cell">
  87. <view class="uni-list-cell-left">
  88. 结束时间:
  89. </view>
  90. <view class="uni-list-cell-db">
  91. <picker mode="date" v-model="endDate" :start="beginDate" @change="bindEndDateChange">
  92. <view class="uni-input">{{endDate}}</view>
  93. </picker>
  94. </view>
  95. </view>
  96. </view>
  97. <view class="uni-list-btns">
  98. <button type="primary" @click="pageInit(false)">查询</button>
  99. <button type="info" @click="resetForm">重置</button>
  100. </view>
  101. </u-popup>
  102. </view>
  103. </template>
  104. <script>
  105. import {getCheckResult, deleteCheckResult} from '@/api/checkOrder'
  106. import { getLookUpDatas, listLookUp } from '@/api/data'
  107. import { orderQueryLike, deleteOrder, finishOrder, smAddSerPerson } from '@/api/order'
  108. import { clzConfirm } from '@/libs/tools.js'
  109. export default {
  110. components: {
  111. },
  112. data() {
  113. return {
  114. showSearch: false,
  115. status: 'loadmore',
  116. canEdit: false,
  117. canFinish: false,
  118. canDel: false,
  119. canView: false,
  120. canPay: false,
  121. noDataText: '暂无数据',
  122. background: {
  123. // 渐变色
  124. backgroundImage: 'linear-gradient(45deg, rgb(85, 170, 255), rgb(21, 102, 223))'
  125. },
  126. tabList: [
  127. {
  128. dispName: '发给我的',
  129. typeId: 3
  130. },
  131. {
  132. dispName: '我创建的',
  133. typeId: 1
  134. },
  135. {
  136. dispName: '全部',
  137. typeId: 2
  138. },
  139. ],
  140. current: 0,
  141. swiperCurrent: 0,
  142. // 查询条件
  143. queryWord: '',
  144. beginDate: '',
  145. endDate: '',
  146. typeId: '',
  147. finishFlag: '',
  148. orderFlag: '',
  149. orderFlags: [],
  150. pageNo: 1,
  151. pageSize: 10,
  152. list: [],
  153. total: 0,
  154. openAddServerStaff: false, // 是否打开选择服务人员弹框
  155. smOrderId: '', // 移动扫码洗车服务id
  156. }
  157. },
  158. onLoad() {
  159. this.getRow()
  160. },
  161. methods:{
  162. message(title){
  163. uni.showToast({
  164. icon:'none',
  165. title: title
  166. })
  167. },
  168. // tabs通知swiper切换
  169. tabsChange(index) {
  170. this.swiperCurrent = index;
  171. this.list = []
  172. this.status = "loading"
  173. },
  174. swiperChange(event){
  175. console.log(event.detail)
  176. this.list = []
  177. this.status = "loading"
  178. },
  179. // swiper-item左右移动,通知tabs的滑块跟随移动
  180. transition(e) {
  181. let dx = e.detail.dx;
  182. this.$refs.uTabs.setDx(dx);
  183. },
  184. // 由于swiper的内部机制问题,快速切换swiper不会触发dx的连续变化,需要在结束时重置状态
  185. // swiper滑动结束,分别设置tabs和swiper的状态
  186. animationfinish(e) {
  187. let current = e.detail.current;
  188. if(current != this.current){
  189. this.$refs.uTabs.setFinishCurrent(current);
  190. this.swiperCurrent = current;
  191. this.current = current;
  192. this.getRow()
  193. }
  194. },
  195. // scroll-view到底部加载更多
  196. onreachBottom() {
  197. console.log(this.list.length, this.total)
  198. if(this.list.length < this.total){
  199. this.pageNo += 1
  200. this.getRow()
  201. }else{
  202. this.status = "nomore"
  203. }
  204. },
  205. // 查询列表
  206. getRow (pageNo) {
  207. let _this = this
  208. if (pageNo) {
  209. this.pageNo = pageNo
  210. }
  211. let params = {
  212. pageNo: this.pageNo,
  213. pageSize: this.pageSize,
  214. queryWord: this.queryWord,
  215. queryBeginDate: this.beginDate,
  216. queryEndDate: this.endDate,
  217. typeId: this.typeId,
  218. finishFlag: this.finishFlag,
  219. orderFlag: this.orderFlag,
  220. orderFlags: this.orderFlags,
  221. orderSource: this.orderSource
  222. }
  223. this.status = "loading"
  224. orderQueryLike(params).then(res => {
  225. if (res.code == 200 || res.status == 204 || res.status == 200) {
  226. if(_this.pageNo>1){
  227. _this.list = _this.list.concat(res.data.list || [])
  228. }else{
  229. _this.list = res.data.list || []
  230. }
  231. _this.total = res.data.count || 0
  232. } else {
  233. _this.list = []
  234. _this.total = 0
  235. _this.noDataText = res.message
  236. }
  237. _this.status = "loadmore"
  238. })
  239. },
  240. // 查询条件
  241. openSearch(){
  242. this.showSearch = true
  243. },
  244. bindBeginDateChange(e){
  245. this.beginDate = e.target.value
  246. },
  247. bindEndDateChange(e){
  248. this.endDate = e.target.value
  249. },
  250. // 重置
  251. resetForm(){
  252. this.queryWord = ''
  253. this.beginDate = ''
  254. this.endDate = ''
  255. this.pageInit(true)
  256. },
  257. // 详细页
  258. viewRow(item){
  259. // 已完成的
  260. uni.navigateTo({
  261. url: "/pages/workOrder/orderDetails?id="+item.id
  262. })
  263. },
  264. }
  265. }
  266. </script>
  267. <style lang="scss" scoped>
  268. page{
  269. height: 100%;
  270. }
  271. /* 自定义导航栏样式 */
  272. .slot-wrap {
  273. display: flex;
  274. align-items: center;
  275. /* 如果您想让slot内容占满整个导航栏的宽度 */
  276. flex: 1;
  277. /* 如果您想让slot内容与导航栏左右有空隙 */
  278. padding: 0 30rpx;
  279. color: #fff;
  280. font-size: 28upx;
  281. .left-icon {
  282. flex-grow: 1;
  283. font-size: 32upx;
  284. margin-right: 10upx;
  285. text-align: center;
  286. }
  287. .right-icon {
  288. padding-left: 50upx;
  289. }
  290. .uni-icons {
  291. margin-right: 10upx;
  292. }
  293. }
  294. .pagesCons{
  295. height: 100%;
  296. display: flex;
  297. flex-direction: column;
  298. .tab-body{
  299. .check-list{
  300. height: calc(100vh - 120px);
  301. }
  302. .check-order-list{
  303. background: #ffffff;
  304. padding: 10upx 20upx;
  305. margin: 25upx;
  306. border-radius: 6upx;
  307. box-shadow: 1px 1px 3px #EEEEEE;
  308. .check-row{
  309. display: flex;
  310. align-items: center;
  311. padding: 20upx 10upx;
  312. font-size: 28upx;
  313. &:first-child{
  314. border-bottom: 1px dashed #F8F8F8;
  315. font-size: 26upx;
  316. .createDate{
  317. color: #666;
  318. }
  319. }
  320. &:last-child{
  321. border-top: 1px dashed #F8F8F8;
  322. }
  323. > view{
  324. &:first-child{
  325. flex-grow: 1;
  326. }
  327. }
  328. .action{
  329. margin: 0 6rpx;
  330. padding: 0 20rpx;
  331. color: #fff;
  332. }
  333. .edit{
  334. background-color: #f9ba09;
  335. }
  336. .view{
  337. background-color: #ff7801;
  338. }
  339. .del{
  340. background-color: #f72525;
  341. }
  342. .finish{
  343. background-color: #2d8cf0;
  344. }
  345. .pay{
  346. background-color: #10c71e;
  347. }
  348. .check-btns{
  349. width: '50%';
  350. display: flex;
  351. align-items: center;
  352. justify-content: flex-end;
  353. > view{
  354. margin-left: 35upx;
  355. font-size: 28upx;
  356. }
  357. }
  358. .u-tag{
  359. border-radius: 0;
  360. }
  361. .uni-icons{
  362. margin: 0 5upx;
  363. }
  364. }
  365. }
  366. }
  367. }
  368. .slot-wrap {
  369. display: flex;
  370. align-items: center;
  371. /* 如果您想让slot内容占满整个导航栏的宽度 */
  372. flex: 1;
  373. /* 如果您想让slot内容与导航栏左右有空隙 */
  374. padding: 0 30rpx 0 0;
  375. color: #fff;
  376. font-size: 28upx;
  377. .left-icon{
  378. flex-grow: 1;
  379. font-size: 32upx;
  380. }
  381. .right-icon{
  382. padding-left:50upx;
  383. }
  384. .uni-icons{
  385. margin-right: 10upx;
  386. }
  387. }
  388. .search-popup{
  389. .search-title{
  390. text-align: center;
  391. padding: 22upx;
  392. color: #333;
  393. border-bottom: 1px solid #eee;
  394. }
  395. .uni-list{
  396. margin: 20upx;
  397. .uni-list-cell{
  398. display: flex;
  399. align-items: center;
  400. border-bottom: 1px dashed #EEEEEE;
  401. .uni-list-cell-db{
  402. flex: 1;
  403. }
  404. .uni-input{
  405. height: 2.5em;
  406. line-height: 2.5em;
  407. }
  408. }
  409. }
  410. .uni-list-btns{
  411. display: flex;
  412. padding: 20upx;
  413. uni-button{
  414. font-size: 28upx;
  415. margin: 0 30upx;
  416. flex:1;
  417. }
  418. }
  419. }
  420. </style>