ComprehensiveMatter.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357
  1. <template>
  2. <div class='comprehensive-matter'>
  3. <div class='time'>
  4. <van-button round size='small' :class='active === 0?"active":""' @click='changeTime(0)'>一个月内</van-button>
  5. <van-button round size='small' :class='active === 1?"active":""' @click='changeTime(1)'>半年内</van-button>
  6. <van-button round size='small' :class='active === 2?"active":""' @click='changeTime(2)'>一年内</van-button>
  7. <van-button round size='small' :class='active === 3?"active":""' @click='changeTime(3)'>全部</van-button>
  8. </div>
  9. <div class='main' v-show='!noData'>
  10. <van-list class='matters-list' v-model='loading' :finished='finished' :immediate-check='false' finished-text :offset='300' @load='onLoad'>
  11. <!-- :immediate-check='false' -->
  12. <div class='container' v-for='(item,index) in list' :key='index'>
  13. <!-- 政府部门 -->
  14. <div class='government-department' v-if='item.department.indexOf("其他")'>
  15. <van-cell :title='item.department' is-link :value='`${item.count}`' @click='goToMattersFetail(item,1)' />
  16. </div>
  17. <!-- 其他部门 -->
  18. <div class='other-department' v-else>
  19. <van-cell title='其他' :arrow-direction='item.arrowDirection ||"up"' is-link @click='changeOtherShowStatus(item)' />
  20. <div class='other-container' v-if='item.showOther'>
  21. <van-cell
  22. :title='detail.otherdescription'
  23. title-class='other-cell'
  24. :value='detail.count'
  25. is-link
  26. @click='goToMattersFetail(detail,2)'
  27. v-for='(detail,dIndex) in item.children'
  28. :key='dIndex'
  29. />
  30. </div>
  31. </div>
  32. </div>
  33. </van-list>
  34. </div>
  35. <div class='main' v-show='noData'>
  36. <van-empty description='暂无数据' />
  37. </div>
  38. </div>
  39. </template>
  40. <script>
  41. /**
  42. * 综合事项
  43. */
  44. import Vue from 'vue'
  45. import { List, Cell, Button, Empty } from 'vant'
  46. Vue.use(List)
  47. Vue.use(Cell)
  48. Vue.use(Button)
  49. Vue.use(Empty)
  50. import { queryGlams } from '@/api/other.js'
  51. import { mapGetters } from 'vuex'
  52. import moment from 'moment'
  53. export default {
  54. name: 'ComprehensiveMatter',
  55. props: {},
  56. components: {},
  57. computed: {
  58. ...mapGetters(['plazaId']),
  59. },
  60. data() {
  61. return {
  62. active: 0,
  63. list: [],
  64. loading: false,
  65. finished: false,
  66. page: 1,
  67. size: 10,
  68. count: 0,
  69. currentCount: 0,
  70. arrowDirection: 'up', //其他 箭头方向
  71. noData: false,
  72. createdateStartDate: '',
  73. createdateEndDate: '',
  74. }
  75. },
  76. watch: {
  77. loading: {
  78. immediate: true,
  79. handler(val) {},
  80. },
  81. },
  82. created() {
  83. console.log('综合事项 created')
  84. this.getList()
  85. },
  86. beforeMount() {},
  87. mounted() {},
  88. methods: {
  89. /**
  90. * 更改时间
  91. */
  92. async changeTime(active) {
  93. this.active = active
  94. this.list = []
  95. this.page = 1
  96. this.count = 0
  97. this.currentCount = 0
  98. this.loading = true
  99. this.finished = false
  100. this.noData = false
  101. await this.sleep(1000)
  102. this.getList()
  103. },
  104. async getList() {
  105. if (this.page > 1 && this.count === 0) {
  106. return false
  107. }
  108. let getParams = {
  109. plazaId: this.plazaId,
  110. page: this.page,
  111. size: this.size,
  112. }
  113. switch (this.active) {
  114. // 近一个月
  115. case 0:
  116. this.createdateStartDate = moment().subtract(1, 'months').format('YYYYMMDD000000')
  117. this.createdateEndDate = moment().format('YYYYMMDD000000')
  118. break
  119. // 半年内
  120. case 1:
  121. this.createdateStartDate = moment().subtract(6, 'months').format('YYYYMMDD000000')
  122. this.createdateEndDate = moment().format('YYYYMMDD000000')
  123. break
  124. // 一年内
  125. case 2:
  126. this.createdateStartDate = moment().subtract(1, 'years').format('YYYYMMDD000000')
  127. this.createdateEndDate = moment().format('YYYYMMDD000000')
  128. break
  129. // 默认 全部
  130. default:
  131. this.createdateStartDate = null
  132. this.createdateEndDate = null
  133. break
  134. }
  135. this.createdateStartDate && (getParams.createdateStartDate = this.createdateStartDate)
  136. this.createdateEndDate && (getParams.createdateEndDate = this.createdateEndDate)
  137. let res = await queryGlams({ getParams }) //TODO: 123
  138. // TODO:
  139. if (!res?.data) {
  140. if (!this.list.length) {
  141. this.noData = true
  142. } else {
  143. this.noData = false
  144. }
  145. return false
  146. }
  147. let data = res.data
  148. this.count = res.count //TODO: count
  149. this.currentCount += data.length
  150. data.map((item) => {
  151. item.children = []
  152. if (item.cnt) {
  153. item.count = item.cnt + '项'
  154. } else {
  155. item.count = '--'
  156. item.disabled = true
  157. }
  158. })
  159. if (['其他部门', '其他', '其它'].includes(data[0].department)) {
  160. let item = data[0]
  161. item.showOther = true
  162. item.children.push({ department: item.department, count: item.count, cnt: item.cnt, otherdescription: item.otherdescription })
  163. }
  164. // 处理其他部门,将在一起的其他部门,合并到一起
  165. for (let index = 1, len = data.length; index < len; index++) {
  166. const item = data[index]
  167. // 出现的第一个其他部门加入children
  168. if (['其他部门', '其他', '其它'].includes(item.department) && !['其他部门', '其他', '其它'].includes(data[index - 1].department)) {
  169. item.showOther = true
  170. if (
  171. !item.children.some(({ department, count, otherdescription }) => {
  172. return item.otherdescription === otherdescription && item.count === count && item.department === item.department
  173. })
  174. ) {
  175. item.children.push({ department: item.department, count: item.count, cnt: item.cnt, otherdescription: item.otherdescription })
  176. }
  177. } else if (data[index - 1].department === item.department && ['其他部门', '其他', '其它'].includes(item.department)) {
  178. data[index - 1].children.push({
  179. department: item.department,
  180. count: item.count,
  181. cnt: item.cnt,
  182. otherdescription: item.otherdescription,
  183. })
  184. data.splice(index--, 1)
  185. len--
  186. }
  187. }
  188. if (this.page === 1) {
  189. this.list = data
  190. } else {
  191. this.list = this.list.concat(data)
  192. }
  193. this.loading = false
  194. if (this.currentCount >= this.count) {
  195. this.finished = true
  196. } else {
  197. this.finished = false
  198. }
  199. },
  200. async onLoad() {
  201. // 防止第一页没有数据,接着查询第二页
  202. if (this.page > 1 && this.count === 0) {
  203. return true
  204. }
  205. // 防止第一页不够
  206. if (this.currentCount >= this.count) {
  207. return true
  208. }
  209. // 异步更新数据
  210. await this.getList()
  211. this.page++
  212. // 加载状态结束
  213. this.loading = false
  214. // 查询完成
  215. if (this.currentCount >= this.count) {
  216. this.finished = true
  217. }
  218. },
  219. /**
  220. * 同步延迟器
  221. * @param { Number } timeout 延迟时间,ms
  222. */
  223. async sleep(timeout) {
  224. await new Promise((resolve) => {
  225. setTimeout(() => {
  226. resolve()
  227. }, timeout)
  228. })
  229. },
  230. /**
  231. * 点击其他右侧上下箭头,显隐其他部门
  232. */
  233. changeOtherShowStatus(item) {
  234. // console.log(item)
  235. if (item.showOther) {
  236. item.showOther = false
  237. item.arrowDirection = 'down'
  238. } else {
  239. item.showOther = true
  240. item.arrowDirection = 'up'
  241. }
  242. },
  243. /**
  244. * 跳转 列表页面
  245. * @param { Number } 1:政府部门 2:其他部门
  246. */
  247. goToMattersFetail(data, type) {
  248. // console.log(data)
  249. let { department, otherdescription, cnt } = data
  250. console.log(data)
  251. let params = {
  252. type, //部门类型
  253. department, //部门名称
  254. size: cnt, //分页,按照cnt(count)字段
  255. createdateStartDate: this.createdateStartDate,
  256. createdateEndDate: this.createdateEndDate,
  257. }
  258. // 全部时,不传时间字段
  259. if (this.active === 3) {
  260. delete params.createdateStartDate
  261. delete params.createdateEndDate
  262. }
  263. // 其他部门,传递 其他部门说明字段
  264. type == 2 && (params.otherdescription = otherdescription)
  265. this.$router.push({ name: 'ComprehensiveMatterList', params })
  266. },
  267. },
  268. }
  269. </script>
  270. <style lang='less' scoped>
  271. .comprehensive-matter {
  272. width: 100%;
  273. height: 100%;
  274. background-color: #f5f6f7;
  275. // 时间切换按钮
  276. .time {
  277. width: 100%;
  278. height: 60px;
  279. padding: 15px;
  280. display: flex;
  281. justify-content: space-between;
  282. align-items: center;
  283. box-sizing: border-box;
  284. background-color: #f5f6f7;
  285. /deep/ .van-button {
  286. width: 75px;
  287. text-align: center;
  288. font-size: 14px;
  289. font-weight: 400;
  290. color: #333333;
  291. background: #f1f1f1;
  292. border-radius: 16px;
  293. border: 1px solid #dcdcdc;
  294. }
  295. .active {
  296. background-color: #025baa !important;
  297. color: #fff;
  298. }
  299. }
  300. .main {
  301. width: 100%;
  302. height: calc(100% - 60px);
  303. // overflow: hidden;
  304. font-size: 14px;
  305. font-weight: 400;
  306. color: #333333;
  307. .matters-list {
  308. width: 100%;
  309. height: 100%;
  310. background-color: #fff;
  311. overflow: auto;
  312. .container {
  313. width: 100%;
  314. .government-department {
  315. width: 100%;
  316. padding: 0 15px;
  317. }
  318. /deep/ .van-cell {
  319. height: 55px;
  320. border-bottom: 1px solid #e6e6e6;
  321. display: flex;
  322. align-items: center;
  323. padding-left: 0;
  324. padding-right: 0;
  325. .van-cell__title {
  326. font-size: 14px;
  327. font-weight: 400;
  328. color: #333333;
  329. }
  330. }
  331. // 其他部门
  332. .other-department {
  333. width: 100%;
  334. padding: 0 15px;
  335. .other-container {
  336. width: 100%;
  337. padding-left: 15px;
  338. border-bottom: 1px solid #e6e6e6;
  339. /deep/ .van-cell:last-child {
  340. border-bottom: none;
  341. }
  342. }
  343. }
  344. }
  345. }
  346. /deep/ .van-empty {
  347. height: 100%;
  348. }
  349. }
  350. }
  351. </style>