员工调动信息查询系统

<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-item>
            <el-button type="primary" icon="el-icon-refresh" @click="flushed"></el-button>
        </el-form-item>
    </el-form>
    <!--表数据-->
    <template>
        <el-table
                :data="tableData"
                border="1"
                style="width: 100%">
            <el-table-column
                    prop="sid"
                    label="调动编号"
                    width="60">
            </el-table-column>
            <el-table-column
                    prop="staffname"
                    label="员工姓名"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="branchname"
                    label="所属分店"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="deptname"
                    label="部门名称"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="rolename"
                    label="职位名称"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="newbranchname"
                    label="新所属分店"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="newdeptname"
                    label="新部门名称"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="newrolename"
                    label="新职位名称"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="transfertime"
                    label="执行时间"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="st"
                    label="执行人"
                    width="150">
            </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"
            :current-page.sync="this.pagenum"
            layout="total, sizes, prev, pager, next, jumper"
            :total="t">
    </el-pagination>
</div>
<script>
    // 创建axios实例
    const instance = axios.create({
        baseURL: 'http://localhost:8080',
        timeout: 1000,
    });
    new Vue({
        el: '#app',
        data: {
            param:'',
            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,
            index:1,
            size:5,
            pagenum:1,
            /*表数据*/
            tableData: []
        },
        methods: {
            flushed() {
                this.index = 1;
                this.page();
                // 重置为默认值
                this.formInline = {
                    pickerOptions: '',
                    end: '',
                    start: ''
                };
            },
            /*设置时间*/
            formatDate(date) {
                const year = date.getFullYear();
                const month = String(date.getMonth() + 1).padStart(2, '0');
                const day = String(date.getDate()).padStart(2, '0');
                return year + '-' + month + '-' + day;
            },
            onSubmit() {
                console.log(this.formInline)
                const starTime = this.formatDate(this.value2[0]);
                const endTime = this.formatDate(this.value2[1]);
                const params = {
                    start: starTime,
                    end: endTime
                };
               this.param= params
                this.handleCurrentChange(1, params)
            },
            /*分页*/
            handleCurrentChange(val, params) {
<pre><code>            this.index = val
            console.log(this.index)
</code></pre>
<p>/*                instance.get(<code>/shopkeeperchange?index=${val}</code>, {params: params}).then(res =&gt; {
this.tableData = res.data.data.list;
this.t = res.data.data.total
});<em>/
this.page()
},
handleSizeChange(val) {
this.size = val
console.log(this.size)
this.page()
/</em>                instance.get(<code>/shopkeeperchange?size=${val}</code>, {params: this.formInline}).then(res =&gt; {
this.tableData = res.data.data.list;
this.t = res.data.data.total
})*/;            },
page(){
instance.get(<code>/shopkeeperchange?index=${this.index}&amp;size=${this.size}</code>, {params: this.param}).then(res =&gt; {
this.tableData = res.data.data.list;
this.t = res.data.data.total;
this.pagenum = res.data.data.pageNum;
});
}
},
created() {
/<em>整表后端数据接收</em>/
instance.get(&quot;/shopkeeperchange&quot;).then(res =&gt; {
console.log(res)
/<em>拿数据</em>/
this.tableData = res.data.data.list;
/<em>分页</em>/
this.t = res.data.data.total
});
}
})
</script>
&lt;/htm</p>