123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363 |
- <template>
- <div class='comprehensive-matter'>
- <div class='time'>
- <van-button round size='small' :class='active === 0?"active":""' @click='changeTime(0)'>一个月内</van-button>
- <van-button round size='small' :class='active === 1?"active":""' @click='changeTime(1)'>半年内</van-button>
- <van-button round size='small' :class='active === 2?"active":""' @click='changeTime(2)'>一年内</van-button>
- <van-button round size='small' :class='active === 3?"active":""' @click='changeTime(3)'>全部</van-button>
- </div>
- <div class='main' v-show='!noData'>
- <van-list class='matters-list' v-model='loading' :finished='finished' :immediate-check='false' finished-text :offset='300' @load='onLoad'>
-
- <div class='container' v-for='(item,index) in list' :key='index'>
-
- <div class='government-department'>
-
- <van-cell :title='item.department' is-link :value='`${item.count}`' @click='goToMattersFetail(item,1)' />
- </div>
-
-
- </div>
- </van-list>
- </div>
- <div class='main' v-show='noData'>
- <van-empty description='暂无数据' />
- </div>
- </div>
- </template>
- <script>
- import Vue from 'vue'
- import { List, Cell, Button, Empty } from 'vant'
- Vue.use(List)
- Vue.use(Cell)
- Vue.use(Button)
- Vue.use(Empty)
- import { queryGlams } from '@/api/other.js'
- import { mapGetters } from 'vuex'
- import moment from 'moment'
- export default {
- name: 'ComprehensiveMatter',
- props: {},
- components: {},
- computed: {
- ...mapGetters(['plazaId']),
- },
- data() {
- return {
- active: 0,
- list: [],
- loading: false,
- finished: false,
- page: 1,
- size: 10,
- count: 0,
- currentCount: 0,
- arrowDirection: 'up',
- noData: false,
- createdateStartDate: '',
- createdateEndDate: '',
- }
- },
- watch: {
- loading: {
- immediate: true,
- handler(val) {},
- },
- },
- created() {
- console.log('综合事项 created')
- this.getList()
- },
- beforeMount() {},
- mounted() {},
- methods: {
-
- async changeTime(active) {
- this.active = active
- this.list = []
- this.page = 1
- this.count = 0
- this.currentCount = 0
- this.loading = true
- this.finished = false
- this.noData = false
- await this.sleep(1000)
- this.getList()
- },
- async getList() {
- if (this.page > 1 && this.count === 0) {
- return false
- }
- let getParams = {
- plazaId: this.plazaId,
- page: this.page,
- size: this.size,
- }
- switch (this.active) {
-
- case 0:
- this.createdateStartDate = moment().subtract(1, 'months').format('YYYYMMDD000000')
- this.createdateEndDate = moment().format('YYYYMMDD000000')
- break
-
- case 1:
- this.createdateStartDate = moment().subtract(6, 'months').format('YYYYMMDD000000')
- this.createdateEndDate = moment().format('YYYYMMDD000000')
- break
-
- case 2:
- this.createdateStartDate = moment().subtract(1, 'years').format('YYYYMMDD000000')
- this.createdateEndDate = moment().format('YYYYMMDD000000')
- break
-
- default:
- this.createdateStartDate = null
- this.createdateEndDate = null
- break
- }
- this.createdateStartDate && (getParams.createdateStartDate = this.createdateStartDate)
- this.createdateEndDate && (getParams.createdateEndDate = this.createdateEndDate)
- let res = await queryGlams({ getParams })
-
- if (!res?.data) {
- if (!this.list.length) {
- this.noData = true
- } else {
- this.noData = false
- }
- return false
- }
- let data = res.data
- this.count = res.count
- this.currentCount += data.length
- data.map((item) => {
-
- if (item.cnt) {
- item.count = item.cnt + '项'
- } else {
- item.count = '--'
- item.disabled = true
- }
- if (item.otherdescription) {
- let otherdescription = item.otherdescription.replace(/(\(无\)|\(无\))/g, '')
- otherdescription && (item.department = item.department + ' ' + otherdescription)
- }
- })
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- if (this.page === 1) {
- this.list = data
- } else {
- this.list = this.list.concat(data)
- }
- this.loading = false
- if (this.currentCount >= this.count) {
- this.finished = true
- } else {
- this.finished = false
- }
- },
- async onLoad() {
-
- if (this.page > 1 && this.count === 0) {
- return true
- }
-
- if (this.currentCount >= this.count) {
- return true
- }
-
- await this.getList()
- this.page++
-
- this.loading = false
-
- if (this.currentCount >= this.count) {
- this.finished = true
- }
- },
-
- async sleep(timeout) {
- await new Promise((resolve) => {
- setTimeout(() => {
- resolve()
- }, timeout)
- })
- },
-
- changeOtherShowStatus(item) {
-
- if (item.showOther) {
- item.showOther = false
- item.arrowDirection = 'down'
- } else {
- item.showOther = true
- item.arrowDirection = 'up'
- }
- },
-
- goToMattersFetail(data, type) {
-
- let { department, otherdescription, cnt } = data
- console.log(data)
- let params = {
- type,
- department,
- size: cnt,
- createdateStartDate: this.createdateStartDate,
- createdateEndDate: this.createdateEndDate,
- }
-
- if (this.active === 3) {
- delete params.createdateStartDate
- delete params.createdateEndDate
- }
-
- type == 2 && (params.otherdescription = otherdescription)
- this.$router.push({ name: 'ComprehensiveMatterList', params })
- },
- },
- }
- </script>
- <style lang='less' scoped>
- .comprehensive-matter {
- width: 100%;
- height: 100%;
- background-color: #f5f6f7;
- // 时间切换按钮
- .time {
- width: 100%;
- height: 60px;
- padding: 15px;
- display: flex;
- justify-content: space-between;
- align-items: center;
- box-sizing: border-box;
- background-color: #f5f6f7;
- /deep/ .van-button {
- width: 75px;
- text-align: center;
- font-size: 14px;
- font-weight: 400;
- color: #333333;
- background: #f1f1f1;
- border-radius: 16px;
- border: 1px solid #dcdcdc;
- padding: 0 !important;
- }
- .active {
- background-color: #025baa !important;
- color: #fff;
- }
- }
- .main {
- width: 100%;
- height: calc(100% - 60px);
- // overflow: hidden;
- font-size: 14px;
- font-weight: 400;
- color: #333333;
- .matters-list {
- width: 100%;
- height: 100%;
- background-color: #fff;
- overflow: auto;
- .container {
- width: 100%;
- .government-department {
- width: 100%;
- padding: 0 15px;
- }
- /deep/ .van-cell {
- height: 55px;
- border-bottom: 1px solid #e6e6e6;
- display: flex;
- align-items: center;
- padding-left: 0;
- padding-right: 0;
- .van-cell__title {
- font-size: 14px;
- font-weight: 400;
- color: #333333;
- }
- }
- // 其他部门
- .other-department {
- width: 100%;
- padding: 0 15px;
- .other-container {
- width: 100%;
- padding-left: 15px;
- border-bottom: 1px solid #e6e6e6;
- /deep/ .van-cell:last-child {
- border-bottom: none;
- }
- }
- }
- }
- }
- /deep/ .van-empty {
- height: 100%;
- }
- }
- }
- </style>
|