wang_zhuang_daping/src.mobile/views/FireTable.vue

<template>
    <div>
        <van-search
            v-model="value"
            placeholder="姓名、部门、类型模糊查询"
            input-align="center"
            left-icon=""
            show-action
            shape="round"
            @search="onSearch"
        >
            <template #action>
                <div @click="onSearch"><van-icon name="search" />搜索</div>
            </template>
        </van-search>
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
            >
                <van-cell style="background-color: #ca8caf">
                    <template #title>
                        <van-row>
                            <van-col
                                v-for="(column, idx) in columns"
                                :key="column.name + idx"
                                :span="24 / columns.length"
                            >
                                {{ column.name }}
                                <van-icon :name="column.icon" @click="onSort(column.key)" />
                            </van-col>
                        </van-row>
                    </template>
                </van-cell>

                <van-cell v-for="item in list" :key="item">
                    <template #title>
                        <van-row>
                            <van-col
                                v-for="(column, idx) in columns"
                                :key="column.key + idx"
                                :span="24 / columns.length"
                            >
                                {{ item[column.key] }}
                            </van-col>
                        </van-row>
                    </template>
                </van-cell>
            </van-list>
        </van-pull-refresh>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
    name: 'FireTable',
    props: {
        queryType: {
            type: String,
            default: '1'
        },
        allColumns: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            value: '',
            list: [],
            loading: false,
            finished: false,
            refreshing: false,
            page: 1,
            sorts: ['', 'desc', 'asc'],
            icons: ['sort', 'descending', 'ascending'],
            columns: [
                {
                    name: '部门',
                    key: 'bm',
                    sort: '',
                    icon: 'sort'
                },
                {
                    name: '姓名',
                    key: 'xm',
                    sort: '',
                    icon: 'sort'
                },
                {
                    name: '类型',
                    key: 'lx',
                    sort: '',
                    icon: 'sort'
                },
                {
                    name: '签到时间',
                    key: 'qdrq',
                    sort: '',
                    icon: 'sort'
                }
            ]
        }
    },
    computed: {
        ...mapGetters(['gValue'])
    },
    watch: {
        gValue: function (n, o) {
            if (n) {
                this.finished = false
                this.loading = true
                this.onLoad(1)
            }
        }
    },
    mounted() {
        if (!this.allColumns) {
            this.columns = [
                {
                    name: '部门',
                    key: 'bm',
                    sort: '',
                    icon: 'sort'
                },
                {
                    name: '姓名',
                    key: 'xm',
                    sort: '',
                    icon: 'sort'
                },
                {
                    name: '类型',
                    key: 'lx',
                    sort: '',
                    icon: 'sort'
                }
            ]
        }
    },
    methods: {
        onLoad(page) {
            if (!this.gValue) {
                this.finished = true
                this.loading = false
                return
            }
            if (page) {
                this.page = page
            }
            page = this.page
            this.page += 1

            let sort = ''
            this.columns.forEach(function (v) {
                if (v.sort) {
                    sort += v.key + ' ' + v.sort
                }
            })

            // 查询类型 queryType
            // 演习id=gValue
            // 排序情况= columns . sort
            // 搜索情况 this.value
            const postData = {
                yxid: this.gValue,
                cxlx: this.queryType,
                sort: sort,
                gjz: this.value,
                page: page
            }

            this.$apis.requestBase('list', postData).then(res => {
                if (res.data && res.data.length > 0) {
                    if (page === 1) {
                        this.list = res.data
                    } else {
                        this.list.push(res.data)
                    }
                } else {
                    if (page === 1) {
                        this.list = []
                    }
                    this.finished = true
                }
                this.loading = false
                if (this.refreshing) {
                    this.refreshing = false
                }
            })
        },
        onRefresh() {
            this.finished = false
            this.loading = true
            this.onLoad(1)
        },
        onSearch() {
            this.finished = false
            this.loading = true
            this.onLoad(1)
        },
        onSort(key) {
            const _this = this
            this.columns.forEach(function (v) {
                if (v.key === key) {
                    let idx = _this.sorts.indexOf(v.sort) + 1
                    if (idx > 2) {
                        idx = 0
                    }
                    v.sort = _this.sorts[idx]
                    v.icon = _this.icons[idx]
                } else {
                    v.sort = _this.sorts[0]
                    v.icon = _this.icons[0]
                }
            })
            this.finished = false
            this.loading = true
            this.onLoad(1)
        }
    }
}
</script>

<style scoped></style>