员工调动信息管理系统

<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.value2 = []; // 清空选择某个时间段的数据
            },
            /*设置时间*/
            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('/shopkeeperchange').then(res =&gt; {
console.log(res)
/<em>拿数据</em>/
this.tableData = res.data.data.list;
/<em>分页</em>/
this.t = res.data.data.total
});
}
})
</script></p>
</html>