193 lines
4.9 KiB
Vue
193 lines
4.9 KiB
Vue
<!--
|
||
* @Author: Kane
|
||
* @Date: 2023-03-23 16:05:08
|
||
* @LastEditors: Kane
|
||
* @FilePath: /task_schedule/src/views/StaffManagement.vue
|
||
* @Description:
|
||
*
|
||
* Copyright (c) ${2022} by Kane, All Rights Reserved.
|
||
-->
|
||
<template>
|
||
<div class="wrapper">
|
||
<div class="query_wrapper">
|
||
<el-row :gutter="10">
|
||
<el-col :span="2">
|
||
<span>工号：</span>
|
||
</el-col>
|
||
<el-col :span="4">
|
||
<el-input v-model.trim.lazy="ui.caller_code" />
|
||
</el-col>
|
||
<el-col :span="2">
|
||
<span>姓名：</span>
|
||
</el-col>
|
||
<el-col :span="4">
|
||
<el-input />
|
||
</el-col>
|
||
<el-col :span="2">
|
||
<span>部门代码：</span>
|
||
</el-col>
|
||
<el-col :span="4">
|
||
<el-input />
|
||
</el-col>
|
||
<el-col :span="2">
|
||
<span>部门名称：</span>
|
||
</el-col>
|
||
<el-col :span="4">
|
||
<el-input />
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="10">
|
||
<el-col :span="2">
|
||
<span>团队：</span>
|
||
</el-col>
|
||
<el-col :span="10">
|
||
<el-input />
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div class="query-button">
|
||
<el-button
|
||
type="primary"
|
||
icon="search"
|
||
>
|
||
查询
|
||
</el-button>
|
||
<el-button icon="refresh">
|
||
重置
|
||
</el-button>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
<el-table
|
||
border
|
||
stripe
|
||
style="width:100%;"
|
||
:height="tableHeight"
|
||
>
|
||
<el-table-column
|
||
type="selection"
|
||
align="center"
|
||
/>
|
||
<el-table-column
|
||
label="工号"
|
||
align="center"
|
||
width="120"
|
||
/>
|
||
<el-table-column
|
||
label="名称"
|
||
align="center"
|
||
width="200"
|
||
/>
|
||
<el-table-column
|
||
label="团队名称"
|
||
align="center"
|
||
/>
|
||
<el-table-column
|
||
label="部门"
|
||
align="center"
|
||
width="300"
|
||
/>
|
||
</el-table>
|
||
<div class="pagination_wrapper">
|
||
<el-pagination
|
||
v-model="ui.table_current_page_index"
|
||
class="pull_left"
|
||
size="small"
|
||
background
|
||
:page-size="ui.table_page_size"
|
||
:page-sizes="[10, 20, 50, 100]"
|
||
layout="total, sizes, prev, pager, next, jumper"
|
||
:total="ui.callers.length"
|
||
@current-change="onCurrentPageIndexChange"
|
||
@size-change="onTablePageSizeChange"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script lang="ts">
|
||
import { reactive, computed } from "vue";
|
||
export default {
|
||
name: "StaffManagement",
|
||
setup()
|
||
{
|
||
const ui = reactive({
|
||
caller_code: "",
|
||
caller_name: "",
|
||
section_office_code: "",
|
||
section_office_name: "",
|
||
table_current_page_index: 1,
|
||
table_page_size: 50,
|
||
callers: [],
|
||
});
|
||
|
||
const onCurrentPageIndexChange = ( pageIndex: number ): void =>
|
||
{
|
||
ui.table_current_page_index = pageIndex;
|
||
};
|
||
|
||
/**
|
||
* 设置表格每页显示记录的数量
|
||
* @param pageSize 表格页记录数量
|
||
*/
|
||
const onTablePageSizeChange = ( pageSize: number ): void =>
|
||
{
|
||
ui.table_page_size = pageSize;
|
||
};
|
||
|
||
/**
|
||
* 表格高度
|
||
*/
|
||
const tableHeight = computed(() =>
|
||
{
|
||
return 10 * 50 + 40;
|
||
});
|
||
|
||
return { ui, onCurrentPageIndexChange, onTablePageSizeChange, tableHeight, };
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
@import "@/assets/css/public/_public.scss";
|
||
|
||
.wrapper {
|
||
margin: 10px;
|
||
padding: 10px;
|
||
|
||
background-color: #fff;
|
||
border-radius: 5px;
|
||
box-shadow: $box-shadow;
|
||
|
||
&:hover {
|
||
box-shadow: $box-shadow-hover;
|
||
}
|
||
|
||
min-width: 800px;
|
||
|
||
> *+* {
|
||
margin-top: 10px;
|
||
}
|
||
}
|
||
|
||
.query_wrapper {
|
||
// display: flex;
|
||
border-radius: 5px;
|
||
|
||
padding: 15px;
|
||
|
||
@include query-box-wrap;
|
||
|
||
.query-button {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
}
|
||
}
|
||
|
||
.pagination_wrapper
|
||
{
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
</style>
|