post-ui/src/views/sets/setList.vue

<template>
    <div>
        <el-card>
            <el-page-header @back="goback" content="套系列表"></el-page-header>
        </el-card>
        <el-container>
            <el-header style="height: 120px;">
                <div id="header-one">
                    <h3 class="el-icon-search" style="margin-left: 10px;">筛选搜索</h3>
                    <div id="header-one-btu">
                        <el-button @click="empty">重置</el-button>
                        <el-button type="primary" @click="check">搜索</el-button>
                    </div>
                </div>
                <div id="header-two">
                    <el-row>
                        <el-col :span="5" id="header-two-left">
                            <el-form ref="anFormRef" :model="anForm" label-width="80px">
                                <el-form-item label="藏品名称(套):" label-width="102px">
                                    <el-input v-model="anForm.anName" class="anInput" placeholder="筛选公告标题"
                                        center></el-input>
                                </el-form-item>
                            </el-form>
                        </el-col>
                        <el-col :span="8">
                            <el-form label-width="80px">
                                <el-form-item label="创建时间:">
                                    <el-date-picker v-model="dataput" type="datetimerange" class="up-input-right"
                                        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right">
                                    </el-date-picker>
                                </el-form-item>
                            </el-form>
                        </el-col>
                    </el-row>
                </div>
            </el-header>
            <el-main style="height: 110px;">
                <h3 class="el-icon-tickets">套系列表 共有0条数据</h3>
                <el-button id="main-btu" @click="addNotice()">添加</el-button>
            </el-main>
            <div class="footer">
                <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                    <el-tab-pane label="在售" name="first">
                        <el-table :data="tableData" border style="width: 100%">
                            <el-table-column prop="date" label="日期" width="180">
                            </el-table-column>
                            <el-table-column prop="name" label="姓名" width="180">
                            </el-table-column>
                            <el-table-column prop="address" label="地址">
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>
                    <el-tab-pane label="预售" name="second">预售列表</el-tab-pane>
                    <el-tab-pane label="已过期" name="third">已过期</el-tab-pane>
                </el-tabs>
            </div>
        </el-container>
    </div>
</template>
<script>
import { getNotice, searchNotice } from "@/api/notice/notice"
export default {
    data() {
        return {
            anForm: {
                anName: '',
            },


            total: 1,
            dataput: '',
            activeName: 'first',
            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }]
        }
    },
    watch: {
        activeName(newVal, oldVal) {
            console.log(newVal, "\n", oldVal)
        }
    },
    created() {
        this.getnotice()
    },
    methods: {
        goback() {
            window.history.go(-1)
        },
        //tag点击
        handleClick(tab, event) {
            console.log(tab, event);
        }
    }
};

</script>
<style scoped>
.el-main {
    color: #333;
    border: 1px solid #d3d7d4;
    border-radius: 5px;
    margin-left: 30px;
    margin-right: 30px;
}

.el-header {
    color: #333;
    border: 1px solid #d3d7d4;
    border-radius: 5px;
    margin: 30px;
}

/* .el-footer {} */

#footer-t {
    color: #333;
    border: 1px solid #d3d7d4;
    border-radius: 5px;
    margin-left: 10px;
    margin-top: 30px;
}

/* #header-one {} */

#header-two {
    /* background-color: aqua; */
    margin-left: 90px;
}

#header-one-btu {
    margin: 20px 20px 0px 0px;
    float: right;
}

#header-two-left {
    margin-right: 150px;
}

#main-btu {
    float: right;
    margin-top: 10px;
}

#page {
    float: right;
    margin-top: 15px;
}

.footer {
    margin: 20px auto;
    width: 97%;
}
</style>