CPICXIM
/
desktop_task_schedule
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

保存进度！

This commit is contained in:
Kane Wang 2023-06-16 09:54:26 +08:00
parent 20924be00e
commit 503a5bcdff
4 changed files with 230 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
code/web/task_schedule/package-lock.json generated
View File

@ -30,7 +30,7 @@
"eslint-config-standard-with-typescript": "^35.0.0",
"eslint-plugin-vue": "^9.14.1",
"node-sass": "^9.0.0",
"sass": "^1.63.3",
"sass": "^1.63.4",
"style-loader": "^3.3.3",
"typescript": "^5.1.3",
"vue-eslint-parser": "^9.3.1"
@ -12244,9 +12244,9 @@
"dev": true
},
"node_modules/sass": {
"version": "1.63.3",
"resolved": "https://registry.npmmirror.com/sass/-/sass-1.63.3.tgz",
"integrity": "sha512-ySdXN+DVpfwq49jG1+hmtDslYqpS7SkOR5GpF6o2bmb1RL/xS+wvPmegMvMywyfsmAV6p7TgwXYGrCZIFFbAHg==",
"version": "1.63.4",
"resolved": "https://registry.npmmirror.com/sass/-/sass-1.63.4.tgz",
"integrity": "sha512-Sx/+weUmK+oiIlI+9sdD0wZHsqpbgQg8wSwSnGBjwb5GwqFhYNwwnI+UWZtLjKvKyFlKkatRK235qQ3mokyPoQ==",
"devOptional": true,
"dependencies": {
"chokidar": ">=3.0.0 <4.0.0",

2
code/web/task_schedule/package.json
View File

@ -31,7 +31,7 @@
"eslint-config-standard-with-typescript": "^35.0.0",
"eslint-plugin-vue": "^9.14.1",
"node-sass": "^9.0.0",
"sass": "^1.63.3",
"sass": "^1.63.4",
"style-loader": "^3.3.3",
"typescript": "^5.1.3",
"vue-eslint-parser": "^9.3.1"

56
code/web/task_schedule/src/assets/css/public/_public.scss Normal file
View 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;
}
}

173
code/web/task_schedule/src/views/StaffManagement.vue
View File

@ -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>