diff.vue 2.29 KB
<template>
    <LayoutBody>
        <LayoutFilter>
            <FilterItem :label="filterOptions.handleActions.label">
                <Select v-model.trim="filters.handleActions">
                    <Option v-for="option in filterOptions.handleActions.options"
                            :value="option.value"
                            :key="option.value">{{option.label}}</Option>
                </Select>
            </FilterItem>
            <FilterItem :label="filterOptions.handleStatus.label">
                <Select v-model.trim="filters.handleStatus">
                    <Option v-for="option in filterOptions.handleStatus.options"
                            :value="option.value"
                            :key="option.value">{{option.label}}</Option>
                </Select>
            </FilterItem>
            <FilterItem>
                <Button type="primary" @click="filterSearch">筛选</Button>
                <Button @click="clearFilter">清空条件</Button>
            </FilterItem>
        </LayoutFilter>

        <LayoutList>
            <Table border :context="self" :columns="table.cols" :data="table.data"></Table>
            <Page :total="pager.total" :current="pager.current"
                  @on-change="pageChange" :page-size="20" show-total></Page>
        </LayoutList>
    </LayoutBody>
</template>

<script>
    import Vue from 'vue';
    import _ from 'lodash';
    import {filterFields, table} from './store';

    export default {
        data() {
            return {
                self: this,
                filters: {
                    handleActions: '',
                    handleStatus: ''
                },
                filterOptions: filterFields,
                table: {
                    cols: table.cols,
                    data: []
                },
                pager: {
                    total: 0,
                    current: 1
                }
            }
        },
        created() {
        },
        methods: {
            clearFilter() {
                this.filters.handleActions = '';
                this.filters.handleStatus = '';
            },
            filterSearch() {

            },
            pageChange() {

            }
        },
    }
</script>

<style lang="scss">
    .btn-row-space {
        margin-top: 10px;
    }
</style>