Kane/vue-learning
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

保存进度！

Browse Source
This commit is contained in:
Kane Wang
2023-01-19 18:01:35 +08:00
parent aaf25460a4
commit bc24e4f041
4 changed files with 182 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
企业级管理系统/web/admin_system/src/App.vue
View File

@@ -2,21 +2,29 @@
* @Author: Kane * @Author: Kane
* @Date: 2022-12-14 15:12:46 * @Date: 2022-12-14 15:12:46
* @LastEditors: Kane * @LastEditors: Kane
* @LastEditTime: 2022-12-14 17:03:58 * @LastEditTime: 2023-01-19 14:26:17
* @FilePath: \admin_system\src\App.vue * @FilePath: \admin_system\src\App.vue
* @Description: * @Description:
* *
* Copyright (c) ${2022} by Kane, All Rights Reserved. * Copyright (c) ${2022} by Kane, All Rights Reserved.
--> -->
<template> <template>
<router-view></router-view> <el-config-provider :locale="this.locale">
<router-view></router-view>
</el-config-provider>
</template> </template>
<script> <script>
// import HelloWorld from "./components/HelloWorld.vue"; //引入语言组件
import zhCn from "element-plus/lib/locale/lang/zh-cn";
export default { export default {
name: "App", name: "App",
data() {
return {
locale: zhCn, //语言属性
};
},
components: { components: {
// HelloWorld, // HelloWorld,
}, },

82
企业级管理系统/web/admin_system/src/layout/Index.vue
View File

@@ -2,26 +2,26 @@
* @Author: Kane * @Author: Kane
* @Date: 2023-01-04 11:05:44 * @Date: 2023-01-04 11:05:44
* @LastEditors: Kane * @LastEditors: Kane
* @LastEditTime: 2023-01-18 23:05:42 * @LastEditTime: 2023-01-19 14:52:24
* @FilePath: \admin_system\src\layout\Index.vue * @FilePath: \admin_system\src\layout\Index.vue
* @Description: * @Description:
* *
* Copyright (c) ${2022} by Kane, All Rights Reserved. * Copyright (c) ${2022} by Kane, All Rights Reserved.
--> -->
<template> <template>
<el-container id="layout-container"> <el-container id="layout-container">
<el-header id="layout-header"> <el-header id="layout-header">
<LayoutHeader /> <LayoutHeader />
</el-header> </el-header>
<el-container id="layout-container-down"> <el-container id="layout-container-down">
<el-aside :width="asideWidth" id="layout-aside"> <el-aside :width="asideWidth" id="layout-aside">
<LayoutAside /> <LayoutAside />
</el-aside> </el-aside>
<el-main id="layout-main"> <el-main id="layout-main">
<LayoutMain /> <LayoutMain />
</el-main> </el-main>
</el-container>
</el-container> </el-container>
</el-container>
</template> </template>
<script> <script>
@@ -30,51 +30,51 @@ import LayoutHeader from "./components/Header.vue";
import LayoutMain from "./components/Main.vue"; import LayoutMain from "./components/Main.vue";
export default { export default {
name: "layoutPage", name: "layoutPage",
components: { components: {
LayoutAside, LayoutHeader, LayoutMain, LayoutAside,
}, LayoutHeader,
computed: { LayoutMain,
asideWidth() },
{ computed: {
const collapse = this.$store.state.app.asideBarCollapse; asideWidth() {
const collapse = this.$store.state.app.asideBarCollapse;
return collapse === true ? "65px" : "175px"; return collapse === true ? "65px" : "180px";
} },
} },
}; };
</script> </script>
<style scoped> <style scoped>
#layout-container { #layout-container {
height: 100vh; height: 100vh;
max-height: 100vh; max-height: 100vh;
/* overflow: hiddens; */ /* overflow: hiddens; */
} }
#layout-aside { #layout-aside {
/* width: 175px; */ /* width: 175px; */
background-color: #223142; background-color: #223142;
overflow-x: hidden; overflow-x: hidden;
} }
#layout-header { #layout-header {
height: 50px; height: 50px;
/* background-color: #77bc99; */ /* background-color: #77bc99; */
padding: 0px; padding: 0px;
flex-grow: 0; flex-grow: 0;
} }
#layout-main { #layout-main {
background-color: #ecf2f9; background-color: #ecf2f9;
/* height: 0; */ /* height: 0; */
/* flex-grow: 1; */ /* flex-grow: 1; */
overflow: overlay; overflow: overlay;
} }
#layout-container-down { #layout-container-down {
height: calc(100vh - 50px); height: calc(100vh - 50px);
/* max-height: calc(100vh - 50px); */ /* max-height: calc(100vh - 50px); */
} }
</style> </style>

121
企业级管理系统/web/admin_system/src/layout/components/Header.vue
View File

@@ -2,24 +2,29 @@
* @Author: Kane * @Author: Kane
* @Date: 2023-01-04 11:39:04 * @Date: 2023-01-04 11:39:04
* @LastEditors: Kane * @LastEditors: Kane
* @LastEditTime: 2023-01-18 14:18:28 * @LastEditTime: 2023-01-19 14:53:38
* @FilePath: \admin_system\src\layout\components\Header.vue * @FilePath: \admin_system\src\layout\components\Header.vue
* @Description: * @Description:
* *
* Copyright (c) ${2022} by Kane, All Rights Reserved. * Copyright (c) ${2022} by Kane, All Rights Reserved.
--> -->
<template> <template>
<div class="app_banner no_select"> <div class="app_banner no_select">
<span class="company_name">CPIC</span> <span class="company_name">CPIC</span>
<div class="version_div"> <div class="version_div">
<div>测试版</div> <div>测试版</div>
<div>3.6.7 x64 Build 202208301257</div> <div>3.6.7 x64 Build 202208301257</div>
</div>
<div class="buttons_div">
<User style="width: 25px; height; 25px; margin-right: 8px" />
<SwitchButton style="width: 25px; height; 25px; margin-right: 8px; cursor:pointer;" @click="logout" />
</div>
</div> </div>
<div class="buttons_div">
<User
style="width: 25px; height; 25px; margin-right: 8px; cursor:pointer;"
/>
<SwitchButton
style="width: 25px; height; 25px; margin-right: 8px; cursor:pointer;"
@click="logout"
/>
</div>
</div>
</template> </template>
<script> <script>
@@ -27,73 +32,69 @@
import { Logout } from "../../utils/api/info/account"; import { Logout } from "../../utils/api/info/account";
export default { export default {
name: "AppBanner", name: "AppBanner",
data() data() {
{ return {};
return {}; },
}, // created() {
// created() { // console.log("banner请求数据！");
// console.log("banner请求数据！"); // },
// }, mounted() {
mounted() //console.log("banner请求数据！");
{ },
//console.log("banner请求数据！"); methods: {
}, logout() {
methods: { this.$confirm("是否退出系统？", "请确认", {
logout() confirmButtonText: "是",
{ cancelButtonText: "否",
this.$confirm("是否退出系统？", "请确认", { type: "warning",
confirmButtonText: "是", }).then(() => {
cancelButtonText: "否", Logout();
type: "warning", });
}).then(() =>
{
Logout();
});
},
}, },
},
}; };
</script> </script>
<style scoped> <style scoped>
.app_banner { .app_banner {
background-color: var(--banner-background-color); background-color: var(--banner-background-color);
color: #fff; color: #fff;
display: flex; display: flex;
justify-content: left; justify-content: left;
align-items: center; align-items: center;
padding: 0px 15px 0px 15px; padding: 0px 15px 0px 15px;
height: 100%; height: 100%;
position: relative; position: relative;
} }
.no_select { .no_select {
-webkit-touch-callout: none; -webkit-touch-callout: none;
-moz-user-select: none; -moz-user-select: none;
/*火狐*/ /*火狐*/
-webkit-user-select: none; -webkit-user-select: none;
/*webkit浏览器*/ /*webkit浏览器*/
-ms-user-select: none; -ms-user-select: none;
/*IE10*/ /*IE10*/
-khtml-user-select: none; -khtml-user-select: none;
/*早期浏览器*/ /*早期浏览器*/
user-select: none; user-select: none;
} }
.app_banner>*+* { .app_banner > * + * {
margin-left: 10px; margin-left: 10px;
} }
.company_name { .company_name {
font-size: 2rem; font-size: 2rem;
} }
.version_div { .version_div {
font-size: 0.5rem; font-size: 0.5rem;
} }
.buttons_div { .buttons_div {
margin-left: auto; margin-left: auto;
padding-top: 5px; padding-top: 5px;
/* border: 1px solid salmon; */ /* border: 1px solid salmon; */
} }
</style> </style>

84
企业级管理系统/web/admin_system/src/views/info/StaffInfo.vue
View File

@@ -3,7 +3,7 @@
* @Author: Kane * @Author: Kane
* @Date: 2023-01-12 14:43:46 * @Date: 2023-01-12 14:43:46
* @LastEditors: Kane * @LastEditors: Kane
* @LastEditTime: 2023-01-18 23:24:41 * @LastEditTime: 2023-01-19 15:40:26
* @FilePath: \admin_system\src\views\info\StaffInfo.vue * @FilePath: \admin_system\src\views\info\StaffInfo.vue
* @Description: * @Description:
* *
@@ -26,7 +26,7 @@
<el-table-column type="selection" min-width="30" align="center"></el-table-column> <el-table-column type="selection" min-width="30" align="center"></el-table-column>
<el-table-column min-width="200" label="员工名称" align="left" fixed="left"> <el-table-column min-width="200" label="员工名称" align="left" fixed="left">
<template #default="rowdata"> <template #default="rowdata">
<span @click="onShowStaffInfo(rowdata.row)" style="cursor:pointer;display:block;height:100%;">{{ <span @click="onShowStaffInfo(rowdata.row)" style="cursor: pointer; display: block; height: 100%">{{
rowdata.row.staff_name rowdata.row.staff_name
}}</span> }}</span>
</template> </template>
@@ -40,6 +40,17 @@
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<el-row :gutter="10" width="100%">
<el-col :span="18"></el-col>
<el-pagination class="pull_left" @current-change="onCurrentPageIndexChange"
@size-change="onTablePageSizeChange" size="small" background :current-page="this.table_current_page"
:page-size="10" :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, nex, jumper"
:total="table_data.length"></el-pagination>
<el-col :span="6" class="pull_right">
<el-button type="primary">重置</el-button>
<el-button type="danger">批量删除</el-button>
</el-col>
</el-row>
</div> </div>
</template> </template>
@@ -53,20 +64,38 @@ export default {
query_param: { query_param: {
staff_code: "", staff_code: "",
}, },
table_current_page: 1,
table_data: [ table_data: [
{ staff_name: "王炜", staff_code: "588", p13uid: "wangwei-202" }, {
{ staff_name: "王炜", staff_code: "588", p13uid: "wangwei-202" }, staff_name: "王炜",
{ staff_name: "王炜", staff_code: "588", p13uid: "wangwei-202" }, staff_code: "588",
{ staff_name: "王炜", staff_code: "588", p13uid: "wangwei-202" }, p13uid: "wangwei-202",
{ staff_name: "王炜", staff_code: "588", p13uid: "wangwei-202" }, },
{
staff_name: "王炜",
staff_code: "588",
p13uid: "wangwei-202",
},
{
staff_name: "王炜",
staff_code: "588",
p13uid: "wangwei-202",
},
{
staff_name: "王炜",
staff_code: "588",
p13uid: "wangwei-202",
},
{
staff_name: "王炜",
staff_code: "588",
p13uid: "wangwei-202",
},
], ],
}; };
}, },
methods: { methods: {
onTableEdit(row) onTableEdit(row) { },
{
},
/** /**
* 根据表格行index返回样式，实现斑马纹 * 根据表格行index返回样式，实现斑马纹
* @param row * @param row
@@ -78,13 +107,25 @@ export default {
let index = rowIndex + 1; let index = rowIndex + 1;
if (index % 2 == 0) if (index % 2 == 0)
{ {
return 'warning-row'; return "warning-row";
} }
}, },
/**
* 点击表格 用户名称 时的消息处理函数
* @param {*} staff
*/
onShowStaffInfo(staff) onShowStaffInfo(staff)
{ {
console.log("点击名称", staff); console.log("点击名称", staff);
}, },
/**
* 表格页显示数量变更时消息处理函数
*/
onTablePageSizeChange() { },
/**
* 用户变更当前页时消息处理函数
*/
onCurrentPageIndexChange() { },
}, },
}; };
</script> </script>
@@ -122,10 +163,9 @@ export default {
} }
.el-table .warning-row { .el-table .warning-row {
background-color: #F3F9FF; background-color: #f3f9ff;
} }
.query_box:hover, .query_box:hover,
.info_box:hover { .info_box:hover {
box-shadow: 0px 0px 3px 3px #cccccc; box-shadow: 0px 0px 3px 3px #cccccc;
@@ -134,4 +174,18 @@ export default {
div.cell { div.cell {
height: 100%; height: 100%;
} }
</style>
.pull_left {
margin-left: 15px;
margin-right: auto;
}
.pull_right {
display: flex;
justify-content: right;
}
.pull_right:last-child {
margin-right: 15px;
}
</style>