保存进度！
This commit is contained in:
56
code/web/task_schedule/src/assets/css/public/_public.scss
Normal file
56
code/web/task_schedule/src/assets/css/public/_public.scss
Normal file
@@ -0,0 +1,56 @@
|
||||
/*
|
||||
* @Author: Kane
|
||||
* @Date: 2023-02-24 09:36:08
|
||||
* @LastEditors: Kane
|
||||
* @LastEditTime: 2023-06-15 15:50:00
|
||||
* @FilePath: /task_schedule/src/assets/css/public/_public.scss
|
||||
* @Description: 公共变量
|
||||
*
|
||||
* Copyright (c) ${2022} by Kane, All Rights Reserved.
|
||||
*/
|
||||
|
||||
//背景色
|
||||
$wrap-bg-color:#fff;
|
||||
$span-font-color:#5f5f5f;
|
||||
|
||||
//阴影
|
||||
$box-shadow:0px 0px 20px -10px rgb(14 18 22 / 25%);
|
||||
$box-shadow-hover:0px 0px 20px -10px rgb(14 18 22 / 50%);
|
||||
|
||||
//文字大小
|
||||
$font-size-normal:14px;
|
||||
|
||||
//查询框
|
||||
@mixin query-box-wrap {
|
||||
padding: 0px 10px;
|
||||
|
||||
span {
|
||||
font-weight: normal;
|
||||
display: block;
|
||||
text-align: right;
|
||||
font-size: $font-size-normal;
|
||||
color: $span-font-color;
|
||||
}
|
||||
|
||||
:deep(.el-row) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: left;
|
||||
}
|
||||
|
||||
.el-row+.el-row {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.button-wrapper-right {
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.button-wrapper-left {
|
||||
display: flex;
|
||||
justify-content: left;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
@@ -2,25 +2,190 @@
|
||||
* @Author: Kane
|
||||
* @Date: 2023-03-23 16:05:08
|
||||
* @LastEditors: Kane
|
||||
* @FilePath: /task_schedule/src/views/DataManagemant.vue
|
||||
* @FilePath: /task_schedule/src/views/StaffManagement.vue
|
||||
* @Description:
|
||||
*
|
||||
* Copyright (c) ${2022} by Kane, All Rights Reserved.
|
||||
-->
|
||||
<template>
|
||||
<div>
|
||||
人员管理
|
||||
<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()
|
||||
{
|
||||
return {};
|
||||
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 ) =>
|
||||
{
|
||||
ui.table_current_page_index = pageIndex;
|
||||
};
|
||||
|
||||
/**
|
||||
* 设置表格每页显示记录的数量
|
||||
* @param pageSize 表格页记录数量
|
||||
*/
|
||||
const onTablePageSizeChange = ( pageSize: number ) =>
|
||||
{
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user