wanda-bm-guide-h5/src/views/otherMatter/ComprehensiveMatter.vue

<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' finished-text :offset='300' @load='onLoad'>
                <!-- :immediate-check='false' -->
                <div class='container' v-for='(item,index) in list' :key='index'>
                    <!-- 政府部门 -->
                    <div class='government-department' v-if='item.department.indexOf("其他")'>
                        <van-cell :title='item.department' is-link :value='`${item.count}`' @click='goToMattersFetail(item,1)' />
                    </div>
                    <!-- 其他部门 -->
                    <div class='other-department' v-else>
                        <van-cell title='其他' :arrow-direction='arrowDirection' is-link @click='changeOtherShowStatus(item)' />
                        <div class='other-container' v-if='item.showOther'>
                            <van-cell
                                :title='detail.otherdescription'
                                title-class='other-cell'
                                :value='detail.count'
                                is-link
                                @click='goToMattersFetail(detail,2)'
                                v-for='(detail,dIndex) in item.children'
                                :key='dIndex'
                            />
                        </div>
                    </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() {},
    beforeMount() {},
    mounted() {},
    methods: {
        /**
         * 更改时间
         */
        async changeTime(active) {
            this.active = active
            this.list = []
            this.page = 1
            this.count = 0
            this.currentCount = 0
            this.loading = false
            this.finished = false
            this.noData = false
            await this.sleep(1000)
            this.getList()
        },
        async getList() {
            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 }) //TODO: 123
            // TODO:
            if (!res?.data) {
                if (!this.list.length) {
                    this.noData = true
                } else {
                    this.noData = false
                }
                return false
            }

            let data = res.data
            this.count = res.count //TODO: count
            this.currentCount += data.length
            data.map((item) => {
                item.children = []

                if (item.cnt) {
                    item.count = item.cnt + '项'
                } else {
                    item.count = '--'
                    item.disabled = true
                }
            })
            if (['其他部门', '其他', '其它'].includes(data[0].department)) {
                console.log(123123123123123123)
                let item = data[0]
                item.showOther = true
                item.children.push({ department: item.department, cnt: item.cnt, otherdescription: item.otherdescription })
            }
            // 处理其他部门,将在一起的其他部门,合并到一起
            for (let index = 1, len = data.length; index < len; index++) {
                const item = data[index]
                // 出现的第一个其他部门加入children
                console.log(index, item, item.department)
                if (['其他部门', '其他', '其它'].includes(item.department) && !['其他部门', '其他', '其它'].includes(data[index - 1].department)) {
                    item.showOther = true
                    if (
                        !item.children.some(({ department, cnt, otherdescription }) => {
                            return item.otherdescription === otherdescription && item.cnt === cnt && item.department === item.department
                        })
                    ) {
                        item.children.push({ department: item.department, cnt: item.cnt, otherdescription: item.otherdescription })
                    }
                } else if (data[index - 1].department === item.department && ['其他部门', '其他', '其它'].includes(item.department)) {
                    data[index - 1].children.push({ department: item.department, cnt: item.cnt, otherdescription: item.otherdescription })
                    data.splice(index--, 1)
                    len--
                }
            }
            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() {
            await this.sleep(1000)
            // 异步更新数据
            await this.getList()
            this.page++
            // 加载状态结束
            this.loading = false
            // 查询完成
            if (this.currentCount >= this.count) {
                this.finished = true
            }
            console.log(this.loading, this.finished)
        },
        /**
         * 同步延迟器
         * @param { Number } timeout 延迟时间,ms
         */
        async sleep(timeout) {
            await new Promise((resolve) => {
                setTimeout(() => {
                    resolve()
                }, timeout)
            })
        },
        /**
         * 点击其他右侧上下箭头,显隐其他部门
         */
        changeOtherShowStatus(item) {
            console.log(item)
            if (item.showOther) {
                item.showOther = false
                item.arrowDirection = 'down'
            } else {
                item.showOther = true
                item.arrowDirection = 'up'
            }
        },
        /**
         *  跳转 列表页面
         *  @param { Number } 1:政府部门 2:其他部门
         */
        goToMattersFetail(data, type) {
            console.log(data)
            let { department, otherdescription, cnt } = data
            let params = {
                type,
                department,
                size: cnt,
                startDate: this.createdateStartDate,
                endDate: this.createdateEndDate,
            }
            if (this.active === 3) {
                delete params.startDate
                delete params.endDate
            }
            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;
        }
        .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>