员工调动信息查询 - 员工管理系统

<div id="app">
    <!--搜索-->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-date-picker
                v-model="value2"
                type="datetimerange"
                :picker-options="pickerOptions"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                align="right">
        </el-date-picker>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
    </el-form>
    <!--表数据-->
    <template>
        <el-table
                :data="tableData"
                style="width: 100%">
            <el-table-column
                    prop="sid"
                    label="调动编号"
                    width="60">
            </el-table-column>
            <el-table-column
                    prop="staffname"
                    label="员工姓名"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="branchname"
                    label="所属分店">
            </el-table-column>
            <el-table-column
                    prop="deptname"
                    label="部门名称"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="rolename"
                    label="职位名称"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="newbranchname"
                    label="新所属分店">
            </el-table-column>
            <el-table-column
                    prop="newdeptname"
                    label="新部门名称"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="newrolename"
                    label="新职位名称"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="transfertime"
                    label="执行时间">
            </el-table-column>
            <el-table-column
                    prop="st"
                    label="执行人">
            </el-table-column>
        </el-table>
    </template>
    <!--分页-->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="5"
            layout="total, sizes, prev, pager, next, jumper"
            :total="t">
    </el-pagination>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            formInline: {
                pickerOptions:'',
                end:'',
                start:''
            },
            /*查询*/
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            // value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
            value2: '',
            /*分页*/
            currentPage1: 5,
            currentPage2: 5,
            currentPage3: 5,
            currentPage4: 1,
            /*表数据*/
            tableData: []
        },
        methods: {
            formatDate(date) {
                const year = date.getFullYear();
                const month = date.getMonth() + 1;
                const day = date.getDate();
                return `${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}`;
            },
            onSubmit() {
                const starTime = this.formatDate(this.value2[0]);
                const endTime = this.formatDate(this.value2[1]);
                const  params = {
                    start: starTime,
                    end: endTime
                };
                this.handleCurrentChange(1,params)
            },
            /*分页*/
            handleCurrentChange(val,params) {
                instance.get(`/shopkeeperchange?index=${val}`, {params: params}).then(res => {
                    this.tableData = res.data.data.list;
                    this.t = res.data.data.total
                });
            },
            handleSizeChange(val) {
                instance.get(`/shopkeeperchange?size=${val}`, {params: this.formInline}).then(res => {
                    this.tableData = res.data.data.list;
                    this.t = res.data.data.total
                });
            },
        },
        created(){
            /*整表后端数据接收*/
            instance.get('/shopkeeperchange').then(res => {
                console.log(res)
                /*拿数据*/
                this.tableData = res.data.data.list;
                /*分页*/
                this.t = res.data.data.total
            });
        }
    })
</scrip