toDoList.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462
  1. <template>
  2. <view class="pagesCons">
  3. <view class="tab-body">
  4. <view class="uTabs">
  5. <u-tabs-swiper ref="uTabs" :list="tabList" :active-color="$config('primaryColors')" name="dispName" :current="current" @change="tabsChange" :is-scroll="false"
  6. swiperWidth="750"></u-tabs-swiper>
  7. </view>
  8. <view class="all-filter" v-show="current==2">
  9. <u-row>
  10. <text>发起时间</text>
  11. <view @click="changeSort('createTime')" class="filter-icon">
  12. <u-icon name="arrow-up-fill" :color="(sortIndex===0)?'#2979ff':'#888888'" size="24"></u-icon>
  13. <u-icon name="arrow-down-fill" :color="(sortIndex===1)?'#2979ff':'#888888'" size="24"></u-icon>
  14. </view>
  15. </u-row>
  16. <u-row>
  17. <text>处理时间</text>
  18. <view @click="changeSort('handleTime')" class="filter-icon">
  19. <u-icon name="arrow-up-fill" :color="(sortIndex===2)?'#2979ff':'#888888'" size="24"></u-icon>
  20. <u-icon name="arrow-down-fill" :color="(sortIndex===3)?'#2979ff':'#888888'" size="24"></u-icon>
  21. </view>
  22. </u-row>
  23. <view class="filter" @click="showSearch=true">
  24. <text>筛选</text>
  25. <u-icon name="shaixuan" custom-prefix="xd-icon" size="32" color="#888888"></u-icon>
  26. </view>
  27. </view>
  28. <swiper class="check-list" :current="swiperCurrent" @transition="transition" @change="swiperChange" @animationfinish="animationfinish">
  29. <swiper-item class="swiper-item" v-for="(tabs, index) in tabList" :key="index">
  30. <scroll-view scroll-y class="scroll-view" @scrolltolower="onreachBottom">
  31. <view class="check-order-list" v-if="index==current" v-for="(item,sindex) in list" :key="item.id+'-'+sindex"
  32. @click="viewRow(item)">
  33. <view class="check-row">
  34. <view class="ellipsis-one">{{item.storeName}}</view>
  35. <view class="createDate">{{item.createDate}}</view>
  36. </view>
  37. <view class="check-row">
  38. <view v-if="item.clsName" class="ellipsis-one">
  39. {{item.clsName}}
  40. </view>
  41. <view v-else class="notext">
  42. <u-icon name="info-circle"></u-icon>
  43. 未关联问题项
  44. </view>
  45. <view class="text-right putUserName">
  46. <text>{{item.putUserName}}</text>
  47. </view>
  48. <view v-if="$hasPermissions('M_backlog_detail_mobile')" class="icon-xian">
  49. <u-icon name="icon-xian-11" custom-prefix="xd-icon" size="30" color="#888888"></u-icon>
  50. </view>
  51. </view>
  52. <view class="check-row">
  53. <view>
  54. {{item.sourceTypeDictValue}}
  55. </view>
  56. <view class="text-right">
  57. <text v-if="item.copyFlag && item.copyFlag == 1" class="mark">
  58. 抄送
  59. </text>
  60. <view :class="['status',clsStatus(item.statusDictValue)]">{{item.statusDictValue}}</view>
  61. </view>
  62. </view>
  63. </view>
  64. <u-empty style="padding-top: 10vh;height: auto;" :text="noDataText" img-width="120" v-if="list.length==0 && status!='loading'"
  65. mode="list"></u-empty>
  66. <view v-if="index==current" style="padding: 20upx;">
  67. <u-loadmore v-if="total>pageSize || status=='loading'" :status="status" />
  68. </view>
  69. </scroll-view>
  70. </swiper-item>
  71. </swiper>
  72. </view>
  73. <!-- 待办单查询弹框 -->
  74. <search-modal :visible="showSearch" @refresh="refresh" @close="showSearch=false"></search-modal>
  75. </view>
  76. </template>
  77. <script>
  78. import {
  79. getBackLogList
  80. } from '@/api/backLog.js'
  81. import {
  82. getLookUpDatas,
  83. listLookUp
  84. } from '@/api/data'
  85. import searchModal from './searchModal.vue'
  86. export default {
  87. components: {
  88. searchModal
  89. },
  90. data() {
  91. return {
  92. showSearch: false, // 是否显示搜索弹框
  93. searchParams: {}, // 全部查询数据参数
  94. status: 'loadmore',
  95. noDataText: '暂无数据',
  96. background: {
  97. // 渐变色
  98. backgroundImage: 'linear-gradient(45deg, rgb(85, 170, 255), rgb(21, 102, 223))'
  99. },
  100. tabList: [{
  101. dispName: '我创建的',
  102. typeId: 1,
  103. queryLabel: 'FROM_ME' // tab参数
  104. },
  105. {
  106. dispName: '发给我的',
  107. typeId: 3,
  108. queryLabel: 'TO_ME' // tab参数
  109. },
  110. {
  111. dispName: '全部',
  112. typeId: 2,
  113. queryLabel: 'ALL' // tab参数
  114. },
  115. ],
  116. current: 0,
  117. swiperCurrent: 0,
  118. pageNo: 1,
  119. pageSize: 10,
  120. list: [],
  121. total: 0,
  122. action: 'swiperChange', // 操作类型,上划分页,或左右滑动
  123. sortField: 'create_time', // 全部 排序字段 默认按发起时间
  124. sortOrder: 'desc', // 全部 排序字段 默认按发起时间降序
  125. sortList: [ // 排序列表
  126. {
  127. sortField: 'create_time',
  128. sortOrder: 'asc'
  129. },
  130. {
  131. sortField: 'create_time',
  132. sortOrder: 'desc'
  133. },
  134. {
  135. sortField: 'handle_time',
  136. sortOrder: 'asc'
  137. },
  138. {
  139. sortField: 'handle_time',
  140. sortOrder: 'desc'
  141. }
  142. ],
  143. sortIndex: 1, // 排序下标 默认按发起时间降序
  144. }
  145. },
  146. onLoad() {
  147. if (this.$hasPermissions("B_todoList_new_mobile")) {
  148. // #ifdef APP-PLUS
  149. // 设置标题栏按钮
  150. let currentWebview = this.$scope.$getAppWebview();
  151. currentWebview.setTitleNViewButtonStyle(0, {
  152. text: '\ue610 新增',
  153. fontSize: 16,
  154. color: '#eee',
  155. width: '80px',
  156. fontSrc: '/static/iconfont/iconfont.ttf'
  157. });
  158. // #endif
  159. }
  160. // 监听新增后刷新
  161. uni.$on('refreshBL', this.refresh)
  162. // 监听待办处理后刷新
  163. uni.$on('refreshBl-handle', this.handleRefresh)
  164. this.pageInit()
  165. },
  166. onUnload() {
  167. uni.$off('refreshBL', this.refresh)
  168. uni.$off('refreshBl-handle', this.handleRefresh)
  169. },
  170. methods: {
  171. pageInit() {
  172. this.sortIndex = 1
  173. this.searchParams = {}
  174. this.pageNo = 1
  175. this.getRow()
  176. },
  177. handleRefresh() {
  178. this.getRow()
  179. },
  180. // tabs通知swiper切换
  181. tabsChange(index) {
  182. this.swiperCurrent = index;
  183. },
  184. swiperChange(event) {
  185. this.action = 'swiperChange'
  186. this.status = 'loading'
  187. },
  188. // swiper-item左右移动,通知tabs的滑块跟随移动
  189. transition(e) {
  190. let dx = e.detail.dx;
  191. this.$refs.uTabs.setDx(dx);
  192. },
  193. // 由于swiper的内部机制问题,快速切换swiper不会触发dx的连续变化,需要在结束时重置状态
  194. // swiper滑动结束,分别设置tabs和swiper的状态
  195. animationfinish(e) {
  196. let current = e.detail.current;
  197. let isCurtab = this.current == current
  198. if (this.status != "nomore") {
  199. let loadData = this.action == 'swiperChange' ? !isCurtab : isCurtab;
  200. if (loadData) {
  201. this.$refs.uTabs.setFinishCurrent(current);
  202. this.swiperCurrent = current;
  203. this.current = current;
  204. this.resetPage();
  205. }
  206. }
  207. },
  208. // 全部 排序
  209. changeSort(type) {
  210. if (type === 'createTime') {
  211. this.sortIndex = this.sortIndex === 1 ? 0 : 1
  212. }
  213. if (type === 'handleTime') {
  214. this.sortIndex = this.sortIndex === 2 ? 3 : 2
  215. }
  216. this.getRow(1)
  217. },
  218. // scroll-view到底部加载更多
  219. onreachBottom() {
  220. this.action = 'onreachBottom'
  221. if (this.list.length < this.total) {
  222. this.pageNo += 1
  223. this.getRow()
  224. } else {
  225. uni.showToast({
  226. title: '已经到底了',
  227. icon: 'none'
  228. });
  229. this.status = "nomore"
  230. }
  231. },
  232. // 查询列表
  233. getRow(pageNo) {
  234. if (pageNo) {
  235. this.pageNo = pageNo
  236. }
  237. let params = {
  238. pageNo: this.pageNo,
  239. pageSize: this.pageSize,
  240. queryLabel: this.tabList[this.current].queryLabel, // tab分类
  241. }
  242. if (params.queryLabel == 'ALL') {
  243. // 排序字段 create_time 发起时间 handle_time 处理时间
  244. params.sortField = this.sortList[this.sortIndex].sortField
  245. // asc 升序 desc 降序
  246. params.sortOrder = this.sortList[this.sortIndex].sortOrder
  247. params.statusList = this.searchParams.status ? this.searchParams.status : [] // 状态(pending 待整改 check_pending待审核 finished 整改完成 expired 已过期)
  248. params.sourceTypeList = this.searchParams.sourceType ? this.searchParams.sourceType : [] // 问题来源(远程巡店 VIDEO_INSPECTION /现场巡店 SPOT_INSPECTION/点检 POINT_INSPECTION /手动创建 MANUAL)
  249. params.putUserName = this.searchParams.putUserName ? this.searchParams.putUserName : '' // 巡店人
  250. params.storeName = this.searchParams.storeName ? this.searchParams.storeName : '' // 门店名称
  251. params.beginDate = this.searchParams.beginDate ? this.searchParams.beginDate : '' // 发起开始时间
  252. params.endDate = this.searchParams.endDate ? this.searchParams.endDate : '' // 发起结束时间
  253. }
  254. this.status = "loading"
  255. getBackLogList(params).then(res => {
  256. if (res.status == 200) {
  257. if (this.pageNo > 1) {
  258. this.list = this.list.concat(res.data.list || [])
  259. } else {
  260. this.list = res.data.list || []
  261. }
  262. this.total = res.data.count || 0
  263. } else {
  264. this.list = []
  265. this.total = 0
  266. this.noDataText = res.message
  267. }
  268. this.status = "loadmore"
  269. })
  270. },
  271. resetPage() {
  272. this.status = 'loading';
  273. // 上划分页
  274. if (this.action == 'onreachBottom') {
  275. this.getRow();
  276. }
  277. // 左右切换tab
  278. if (this.action == 'swiperChange') {
  279. this.list = [];
  280. this.getRow(1);
  281. }
  282. },
  283. // 获取查询参数 刷新列表
  284. refresh(params) {
  285. // console.log(params,'1111111111')
  286. this.searchParams = params
  287. this.getRow(1)
  288. },
  289. // 新增页
  290. onNavigationBarButtonTap(e) {
  291. uni.navigateTo({
  292. url: "/pages/toDoList/addBacklog"
  293. })
  294. },
  295. // 详细页
  296. viewRow(item) {
  297. if (!this.$hasPermissions('M_backlog_detail_mobile')) {
  298. return
  299. }
  300. // 已完成的
  301. uni.navigateTo({
  302. url: "/pages/toDoList/backlogDetail?id=" + item.id
  303. })
  304. },
  305. // 状态颜色处理
  306. clsStatus(status) {
  307. if (status == '待审核') {
  308. return 'dsh'
  309. }
  310. if (status == '待整改') {
  311. return 'dzg'
  312. }
  313. if (status == '整改完成') {
  314. return 'ywc'
  315. }
  316. if (status == '已过期') {
  317. return 'ygq'
  318. }
  319. }
  320. }
  321. }
  322. </script>
  323. <style lang="scss">
  324. page {
  325. height: 100%;
  326. background: #F8F8F8;
  327. }
  328. .pagesCons {
  329. height: 100%;
  330. background: #F8F8F8;
  331. display: flex;
  332. flex-direction: column;
  333. .text-right {
  334. text-align: right;
  335. }
  336. .tab-body {
  337. flex: 1;
  338. display: flex;
  339. flex-direction: column;
  340. .uTabs {
  341. border-bottom: 1px solid #EEEEEE;
  342. box-shadow: 1px 1px 3px #eeeeee;
  343. }
  344. .check-list {
  345. flex: 1;
  346. overflow-y: scroll;
  347. .swiper-item {
  348. width: 100%;
  349. height: 100%;
  350. overflow: hidden;
  351. .scroll-view {
  352. width: 100%;
  353. height: 100%;
  354. overflow: auto;
  355. }
  356. }
  357. }
  358. // 全部筛选
  359. .all-filter {
  360. width: 100%;
  361. display: flex;
  362. align-items: center;
  363. justify-content: space-around;
  364. box-shadow: 1px 1px 3px #EEEEEE;
  365. .filter-icon {
  366. display: flex;
  367. flex-direction: column;
  368. padding: 20upx;
  369. }
  370. }
  371. // 列表样式
  372. .check-order-list {
  373. background: #ffffff;
  374. padding: 10upx 20upx;
  375. margin: 25upx;
  376. border-radius: 6upx;
  377. box-shadow: 1px 1px 3px #EEEEEE;
  378. .check-row {
  379. display: flex;
  380. align-items: center;
  381. padding: 20upx 10upx;
  382. font-size: 28upx;
  383. .icon-xian {
  384. text-align: right;
  385. width: 40upx;
  386. }
  387. &:first-child {
  388. border-bottom: 1px dashed #F8F8F8;
  389. .createDate {
  390. color: #666;
  391. font-size: 26upx;
  392. margin-left: 10upx;
  393. }
  394. }
  395. &:last-child {
  396. border-top: 1px dashed #F8F8F8;
  397. }
  398. >view {
  399. &:first-child {
  400. flex: 1;
  401. }
  402. }
  403. .notext{
  404. width: 50%;
  405. }
  406. .putUserName{
  407. width: 40%;
  408. }
  409. // 抄送标记
  410. .mark {
  411. color: #00C1DE;
  412. padding: 6upx;
  413. font-size: 24upx;
  414. border: 1px solid #00C1DE;
  415. border-radius: 6upx;
  416. margin-right: 10upx;
  417. }
  418. // 状态
  419. .status {
  420. display: inline-block;
  421. width: 200upx;
  422. }
  423. .dsh {
  424. color: #ffaa00;
  425. }
  426. .dzg {
  427. color: #ff736e;
  428. }
  429. .ygq {
  430. color: #999;
  431. }
  432. .ywc {
  433. color: #10c71e;
  434. }
  435. }
  436. }
  437. }
  438. }
  439. </style>