From bc24e4f04130f26dd8f89fda65420c79e0d4ae45 Mon Sep 17 00:00:00 2001
From: Kane Wang <wangkane@qq.com>
Date: Thu, 19 Jan 2023 18:01:35 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=9D=E5=AD=98=E8=BF=9B=E5=BA=A6=EF=BC=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../web/admin_system/src/App.vue              |  14 +-
 .../web/admin_system/src/layout/Index.vue     |  82 ++++++------
 .../src/layout/components/Header.vue          | 121 +++++++++---------
 .../admin_system/src/views/info/StaffInfo.vue |  84 +++++++++---
 4 files changed, 182 insertions(+), 119 deletions(-)

diff --git a/企业级管理系统/web/admin_system/src/App.vue b/企业级管理系统/web/admin_system/src/App.vue
index 91a00da..64fe4bd 100644
--- a/企业级管理系统/web/admin_system/src/App.vue
+++ b/企业级管理系统/web/admin_system/src/App.vue
@@ -2,21 +2,29 @@
  * @Author: Kane
  * @Date: 2022-12-14 15:12:46
  * @LastEditors: Kane
- * @LastEditTime: 2022-12-14 17:03:58
+ * @LastEditTime: 2023-01-19 14:26:17
  * @FilePath: \admin_system\src\App.vue
  * @Description: 
  * 
  * Copyright (c) ${2022} by Kane, All Rights Reserved. 
 -->
 <template>
-  <router-view></router-view>
+  <el-config-provider :locale="this.locale">
+    <router-view></router-view>
+  </el-config-provider>
 </template>
 
 <script>
-// import HelloWorld from "./components/HelloWorld.vue";
+//引入语言组件
+import zhCn from "element-plus/lib/locale/lang/zh-cn";
 
 export default {
   name: "App",
+  data() {
+    return {
+      locale: zhCn, //语言属性
+    };
+  },
   components: {
     // HelloWorld,
   },
diff --git a/企业级管理系统/web/admin_system/src/layout/Index.vue b/企业级管理系统/web/admin_system/src/layout/Index.vue
index 62896e9..2a1e955 100644
--- a/企业级管理系统/web/admin_system/src/layout/Index.vue
+++ b/企业级管理系统/web/admin_system/src/layout/Index.vue
@@ -2,26 +2,26 @@
  * @Author: Kane
  * @Date: 2023-01-04 11:05:44
  * @LastEditors: Kane
- * @LastEditTime: 2023-01-18 23:05:42
+ * @LastEditTime: 2023-01-19 14:52:24
  * @FilePath: \admin_system\src\layout\Index.vue
  * @Description: 
  * 
  * Copyright (c) ${2022} by Kane, All Rights Reserved. 
 -->
 <template>
-    <el-container id="layout-container">
-        <el-header id="layout-header">
-            <LayoutHeader />
-        </el-header>
-        <el-container id="layout-container-down">
-            <el-aside :width="asideWidth" id="layout-aside">
-                <LayoutAside />
-            </el-aside>
-            <el-main id="layout-main">
-                <LayoutMain />
-            </el-main>
-        </el-container>
+  <el-container id="layout-container">
+    <el-header id="layout-header">
+      <LayoutHeader />
+    </el-header>
+    <el-container id="layout-container-down">
+      <el-aside :width="asideWidth" id="layout-aside">
+        <LayoutAside />
+      </el-aside>
+      <el-main id="layout-main">
+        <LayoutMain />
+      </el-main>
     </el-container>
+  </el-container>
 </template>
 
 <script>
@@ -30,51 +30,51 @@ import LayoutHeader from "./components/Header.vue";
 import LayoutMain from "./components/Main.vue";
 
 export default {
-    name: "layoutPage",
-    components: {
-        LayoutAside, LayoutHeader, LayoutMain,
-    },
-    computed: {
-        asideWidth()
-        {
-            const collapse = this.$store.state.app.asideBarCollapse;
+  name: "layoutPage",
+  components: {
+    LayoutAside,
+    LayoutHeader,
+    LayoutMain,
+  },
+  computed: {
+    asideWidth() {
+      const collapse = this.$store.state.app.asideBarCollapse;
 
-            return collapse === true ? "65px" : "175px";
-        }
-    }
+      return collapse === true ? "65px" : "180px";
+    },
+  },
 };
 </script>
 
 <style scoped>
 #layout-container {
-    height: 100vh;
-    max-height: 100vh;
-    /* overflow: hiddens; */
+  height: 100vh;
+  max-height: 100vh;
+  /* overflow: hiddens; */
 }
 
 #layout-aside {
-    /* width: 175px; */
-    background-color: #223142;
-    overflow-x: hidden;
+  /* width: 175px; */
+  background-color: #223142;
+  overflow-x: hidden;
 }
 
 #layout-header {
-    height: 50px;
-    /* background-color: #77bc99; */
-    padding: 0px;
-    flex-grow: 0;
+  height: 50px;
+  /* background-color: #77bc99; */
+  padding: 0px;
+  flex-grow: 0;
 }
 
 #layout-main {
-    background-color: #ecf2f9;
-    /* height: 0; */
-    /* flex-grow: 1; */
-    overflow: overlay;
+  background-color: #ecf2f9;
+  /* height: 0; */
+  /* flex-grow: 1; */
+  overflow: overlay;
 }
 
 #layout-container-down {
-    height: calc(100vh - 50px);
-    /* max-height: calc(100vh - 50px); */
-
+  height: calc(100vh - 50px);
+  /* max-height: calc(100vh - 50px); */
 }
 </style>
\ No newline at end of file
diff --git a/企业级管理系统/web/admin_system/src/layout/components/Header.vue b/企业级管理系统/web/admin_system/src/layout/components/Header.vue
index 248820f..d98a26c 100644
--- a/企业级管理系统/web/admin_system/src/layout/components/Header.vue
+++ b/企业级管理系统/web/admin_system/src/layout/components/Header.vue
@@ -2,24 +2,29 @@
  * @Author: Kane
  * @Date: 2023-01-04 11:39:04
  * @LastEditors: Kane
- * @LastEditTime: 2023-01-18 14:18:28
+ * @LastEditTime: 2023-01-19 14:53:38
  * @FilePath: \admin_system\src\layout\components\Header.vue
  * @Description: 
  * 
  * Copyright (c) ${2022} by Kane, All Rights Reserved. 
 -->
 <template>
-    <div class="app_banner no_select">
-        <span class="company_name">CPIC</span>
-        <div class="version_div">
-            <div>测试版</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 class="app_banner no_select">
+    <span class="company_name">CPIC</span>
+    <div class="version_div">
+      <div>测试版</div>
+      <div>3.6.7 x64 Build 202208301257</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>
 
 <script>
@@ -27,73 +32,69 @@
 import { Logout } from "../../utils/api/info/account";
 
 export default {
-    name: "AppBanner",
-    data()
-    {
-        return {};
-    },
-    // created() {
-    //   console.log("banner请求数据！");
-    // },
-    mounted()
-    {
-        //console.log("banner请求数据！");
-    },
-    methods: {
-        logout()
-        {
-            this.$confirm("是否退出系统？", "请确认", {
-                confirmButtonText: "是",
-                cancelButtonText: "否",
-                type: "warning",
-            }).then(() =>
-            {
-                Logout();
-            });
-        },
+  name: "AppBanner",
+  data() {
+    return {};
+  },
+  // created() {
+  //   console.log("banner请求数据！");
+  // },
+  mounted() {
+    //console.log("banner请求数据！");
+  },
+  methods: {
+    logout() {
+      this.$confirm("是否退出系统？", "请确认", {
+        confirmButtonText: "是",
+        cancelButtonText: "否",
+        type: "warning",
+      }).then(() => {
+        Logout();
+      });
     },
+  },
 };
 </script>
 <style scoped>
 .app_banner {
-    background-color: var(--banner-background-color);
-    color: #fff;
-    display: flex;
-    justify-content: left;
-    align-items: center;
-    padding: 0px 15px 0px 15px;
-    height: 100%;
-    position: relative;
+  background-color: var(--banner-background-color);
+  color: #fff;
+  display: flex;
+  justify-content: left;
+  align-items: center;
+  padding: 0px 15px 0px 15px;
+  height: 100%;
+  position: relative;
 }
 
 .no_select {
-    -webkit-touch-callout: none;
-    -moz-user-select: none;
-    /*火狐*/
-    -webkit-user-select: none;
-    /*webkit浏览器*/
-    -ms-user-select: none;
-    /*IE10*/
-    -khtml-user-select: none;
-    /*早期浏览器*/
-    user-select: none;
+  -webkit-touch-callout: none;
+  -moz-user-select: none;
+  /*火狐*/
+  -webkit-user-select: none;
+  /*webkit浏览器*/
+  -ms-user-select: none;
+  /*IE10*/
+  -khtml-user-select: none;
+  /*早期浏览器*/
+  user-select: none;
 }
 
-.app_banner>*+* {
-    margin-left: 10px;
+.app_banner > * + * {
+  margin-left: 10px;
 }
 
 .company_name {
-    font-size: 2rem;
+  font-size: 2rem;
 }
 
 .version_div {
-    font-size: 0.5rem;
+  font-size: 0.5rem;
 }
 
 .buttons_div {
-    margin-left: auto;
-    padding-top: 5px;
-    /* border: 1px solid salmon; */
+  margin-left: auto;
+  padding-top: 5px;
+  /* border: 1px solid salmon; */
 }
 </style>
\ No newline at end of file
diff --git a/企业级管理系统/web/admin_system/src/views/info/StaffInfo.vue b/企业级管理系统/web/admin_system/src/views/info/StaffInfo.vue
index e1b8f3b..0d07407 100644
--- a/企业级管理系统/web/admin_system/src/views/info/StaffInfo.vue
+++ b/企业级管理系统/web/admin_system/src/views/info/StaffInfo.vue
@@ -3,7 +3,7 @@
  * @Author: Kane
  * @Date: 2023-01-12 14:43:46
  * @LastEditors: Kane
- * @LastEditTime: 2023-01-18 23:24:41
+ * @LastEditTime: 2023-01-19 15:40:26
  * @FilePath: \admin_system\src\views\info\StaffInfo.vue
  * @Description: 
  * 
@@ -26,7 +26,7 @@
             <el-table-column type="selection" min-width="30" align="center"></el-table-column>
             <el-table-column min-width="200" label="员工名称" align="left" fixed="left">
                 <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
                     }}</span>
                 </template>
@@ -40,6 +40,17 @@
                 </template>
             </el-table-column>
         </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>
 </template>
 
@@ -53,20 +64,38 @@ export default {
             query_param: {
                 staff_code: "",
             },
+            table_current_page: 1,
             table_data: [
-                { 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" },
+                {
+                    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: {
-        onTableEdit(row)
-        {
-
-        },
+        onTableEdit(row) { },
         /**
          * 根据表格行index返回样式，实现斑马纹
          * @param row
@@ -78,13 +107,25 @@ export default {
             let index = rowIndex + 1;
             if (index % 2 == 0)
             {
-                return 'warning-row';
+                return "warning-row";
             }
         },
+        /**
+         * 点击表格 用户名称 时的消息处理函数
+         * @param {*} staff
+         */
         onShowStaffInfo(staff)
         {
             console.log("点击名称", staff);
         },
+        /**
+         * 表格页显示数量变更时消息处理函数
+         */
+        onTablePageSizeChange() { },
+        /**
+         * 用户变更当前页时消息处理函数
+         */
+        onCurrentPageIndexChange() { },
     },
 };
 </script>
@@ -122,10 +163,9 @@ export default {
 }
 
 .el-table .warning-row {
-    background-color: #F3F9FF;
+    background-color: #f3f9ff;
 }
 
-
 .query_box:hover,
 .info_box:hover {
     box-shadow: 0px 0px 3px 3px #cccccc;
@@ -134,4 +174,18 @@ export default {
 div.cell {
     height: 100%;
 }
-</style>
\ No newline at end of file
+
+.pull_left {
+    margin-left: 15px;
+    margin-right: auto;
+}
+
+.pull_right {
+    display: flex;
+    justify-content: right;
+}
+
+.pull_right:last-child {
+    margin-right: 15px;
+}
+</style>