更换侧边栏图标，搭建基本表格结构,封装axios，搭建登录页面

7 months ago · f7b3203b60
parent 9a4f8bcc5f
commit f7b3203b60
11 changed files with 121 additions and 29 deletions
--- a/app/components.d.ts
+++ b/app/components.d.ts
@ -16,8 +16,12 @@ declare module 'vue' {
    ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
    ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
    ElButton: typeof import('element-plus/es')['ElButton']
+    ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
+    ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
+    ElCol: typeof import('element-plus/es')['ElCol']
    ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
    ElContainer: typeof import('element-plus/es')['ElContainer']
+    ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
    ElDialog: typeof import('element-plus/es')['ElDialog']
    ElDivider: typeof import('element-plus/es')['ElDivider']
    ElDropdown: typeof import('element-plus/es')['ElDropdown']
@ -36,12 +40,15 @@ declare module 'vue' {
    ElOption: typeof import('element-plus/es')['ElOption']
    ElPagination: typeof import('element-plus/es')['ElPagination']
    ElProgress: typeof import('element-plus/es')['ElProgress']
+    ElRadio: typeof import('element-plus/es')['ElRadio']
+    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
    ElSelect: typeof import('element-plus/es')['ElSelect']
    ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
    ElSwitch: typeof import('element-plus/es')['ElSwitch']
    ElTable: typeof import('element-plus/es')['ElTable']
    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
    ElTag: typeof import('element-plus/es')['ElTag']
+    ElTimePicker: typeof import('element-plus/es')['ElTimePicker']
    ElUpload: typeof import('element-plus/es')['ElUpload']
    ExportExcelCom: typeof import('./src/components/excel/ExportExcelCom.vue')['default']
    ImportExcelCom: typeof import('./src/components/excel/ImportExcelCom.vue')['default']
--- a/app/index.html
+++ b/app/index.html
@ -2,8 +2,8 @@
 * @Author: BINGWU
 * @Date: 2024-04-10 16:15:37
 * @LastEditors: BINGWU HuJiaCheng2003@163.com
- * @LastEditTime: 2024-04-11 17:08:12
- * @FilePath: \app\index.html
+ * @LastEditTime: 2024-05-14 00:18:47
+ * @FilePath: \employee-information-management-system\app\index.html
 * @Describe: 
 * @Mark: ૮(˶ᵔ ᵕ ᵔ˶)ა
 -->
@ -12,7 +12,7 @@
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
-    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_4503951_gwy78199vxn.css">
+    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_4545019_und3178mgz.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bingwu-admin</title>
  </head>
--- a/app/src/api/user.js
+++ b/app/src/api/user.js
@ -1,3 +1,12 @@
+/*
+ * @Author: BINGWU
+ * @Date: 2024-04-11 16:31:41
+ * @LastEditors: BINGWU HuJiaCheng2003@163.com
+ * @LastEditTime: 2024-05-13 23:50:42
+ * @FilePath: \employee-information-management-system\app\src\api\user.js
+ * @Describe:
+ * @Mark: ૮(˶ᵔ ᵕ ᵔ˶)ა
+ */
 import http from '@/utils/http'

 const getUser = () => {
@ -7,4 +16,7 @@ const getUser = () => {
    }
  })
 }
-export { getUser }
+const loginUser = (params) => {
+  return http.post('/user/login', params)
+}
+export { getUser, loginUser }
--- a/app/src/stores/modules/user.js
+++ b/app/src/stores/modules/user.js
@ -2,8 +2,8 @@
 * @Author: BINGWU
 * @Date: 2024-02-15 14:18:43
 * @LastEditors: BINGWU HuJiaCheng2003@163.com
- * @LastEditTime: 2024-04-11 17:38:14
- * @FilePath: \app\src\stores\modules\user.js
+ * @LastEditTime: 2024-05-14 00:23:33
+ * @FilePath: \employee-information-management-system\app\src\stores\modules\user.js
 * @Describe:
 * @Mark: ૮(˶ᵔ ᵕ ᵔ˶)ა
 */
@ -21,29 +21,29 @@ const useUserStore = defineStore(
    const asideData = ref([
      {
        index: '/home',
-        icon: 'icon iconfont icon-shouye',
-        name: '首页'
+        icon: 'icon iconfont icon-shujutongji',
+        name: '数据统计'
      },
      //
      {
        index: '/user-manage',
-        icon: 'icon iconfont icon-guanliyuan_jiaoseguanli',
+        icon: 'icon iconfont icon-yonghuguanli',
        name: '用户管理'
      },
      {
        index: '/employee-manage',
-        icon: 'icon iconfont icon-yuangongguanli',
+        icon: 'icon iconfont icon-shenfenzhongxin-xinxiguanlizhigongxinxiguanli',
        name: '职工管理'
      },
      {
        index: '/reward-manage',
-        icon: 'icon iconfont icon-wodejixiao',
+        icon: 'icon iconfont icon-gerenjixiao',
        name: '绩效管理'
      },
      // 二级
      {
        index: '/feedback',
-        icon: 'icon iconfont icon-xinxifankui',
+        icon: 'icon iconfont icon-fankui',
        name: '员工反馈与投诉管理',
        children: [
          {
@ -58,7 +58,7 @@ const useUserStore = defineStore(
      },
      {
        index: '/request',
-        icon: 'icon iconfont icon-qingjiatiao',
+        icon: 'icon iconfont icon-qingjiashenqing',
        name: '请假管理',
        children: [
          {
@ -73,7 +73,7 @@ const useUserStore = defineStore(
      },
      {
        index: '/person',
-        icon: 'icon iconfont icon-geren',
+        icon: 'icon iconfont icon-gerenxinxiguanli',
        name: '个人信息管理',
        children: [
          {
--- a/app/src/utils/http.js
+++ b/app/src/utils/http.js
@ -2,8 +2,8 @@
 * @Author: BINGWU
 * @Date: 2024-01-23 21:37:43
 * @LastEditors: BINGWU HuJiaCheng2003@163.com
- * @LastEditTime: 2024-04-11 16:27:14
- * @FilePath: \app\src\utils\http.js
+ * @LastEditTime: 2024-05-14 00:01:39
+ * @FilePath: \employee-information-management-system\app\src\utils\http.js
 * @Describe:
 * @Mark: ૮(˶ᵔ ᵕ ᵔ˶)ა
 */
@ -31,6 +31,9 @@ instance.interceptors.response.use(
  (response) => {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
+    if (response.data.code === 1000) {
+      return Promise.reject(response.data.msg)
+    }
    return response
  },
  (error) => {
--- a/app/src/views/EmployeeManageView.vue
+++ b/app/src/views/EmployeeManageView.vue
@ -1,7 +1,15 @@
 <template>
-  <div>职工信息管理</div>
+  <div class="employee-manage">
+    <el-button type="primary">添加职工</el-button>
+    <div clase="table">
+      <BaseTableCom></BaseTableCom>
+    </div>
+  </div>
 </template>

-<script setup></script>
+<script setup>
+import { ref } from 'vue'
+import BaseTableCom from '@/components/table/BaseTableCom.vue'
+</script>

 <style lang="scss" scoped></style>
--- a/app/src/views/LoginView.vue
+++ b/app/src/views/LoginView.vue
@ -1,21 +1,52 @@
 <template>
  <div class="login">
    <div class="content">
+      <el-form :model="form" label-width="auto" style="max-width: 600px">
+        <el-form-item label="用户名">
+          <el-input v-model="formData.username" />
+        </el-form-item>
+        <el-form-item label="密码">
+          <el-input type="password" v-model="formData.password" />
+        </el-form-item>
+      </el-form>
      <el-button type="primary" @click="login">登陆</el-button>
    </div>
  </div>
 </template>

 <script setup>
+import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { getUserStore } from '@/stores'
+import { loginUser } from '@/api/user'
 const modules = import.meta.glob('../views/**/**.vue')
 const router = useRouter()
 const userStore = getUserStore()
+const formData = ref({
+  username: '',
+  password: ''
+})
 const login = () => {
-  userStore.addUserRoute(router, modules)
-  userStore.setToken('my-token')
-  router.push('/home')
+  loginUser({
+    ...formData.value
+  })
+    .then((res) => {
+      ElMessage({
+        message: res.data.msg,
+        type: 'success',
+        plain: true
+      })
+      userStore.addUserRoute(router, modules)
+      userStore.setToken('my-token')
+      router.push('/home')
+    })
+    .catch((message) => {
+      ElMessage({
+        message,
+        type: 'error',
+        plain: true
+      })
+    })
 }
 </script>

@ -25,6 +56,7 @@ const login = () => {
  justify-content: center;
  .content {
    margin-top: 100px;
+    text-align: center;
  }
 }
 </style>
--- a/app/src/views/RewardManageView.vue
+++ b/app/src/views/RewardManageView.vue
@ -1,7 +1,15 @@
 <template>
-  <div>REWARD</div>
+  <div class="reward-manage">
+    <el-button type="primary">添加绩效</el-button>
+    <div clase="table">
+      <BaseTableCom></BaseTableCom>
+    </div>
+  </div>
 </template>

-<script setup></script>
+<script setup>
+import { ref } from 'vue'
+import BaseTableCom from '@/components/table/BaseTableCom.vue'
+</script>

 <style lang="scss" scoped></style>
--- a/app/src/views/UserManageView.vue
+++ b/app/src/views/UserManageView.vue
@ -8,9 +8,17 @@
 * @Mark: ૮(˶ᵔ ᵕ ᵔ˶)ა
 -->
 <template>
-  <div>用户管理</div>
+  <div class="user-manage">
+    <el-button type="primary">添加用户</el-button>
+    <div clase="table">
+      <BaseTableCom></BaseTableCom>
+    </div>
+  </div>
 </template>

-<script setup></script>
+<script setup>
+import { ref } from 'vue'
+import BaseTableCom from '@/components/table/BaseTableCom.vue'
+</script>

 <style lang="scss" scoped></style>
--- a/app/src/views/feedback/FeedbackManageView.vue
+++ b/app/src/views/feedback/FeedbackManageView.vue
@ -1,7 +1,14 @@
 <template>
-  <div>feedback管理</div>
+  <div class="feedback-manage">
+    <div clase="table">
+      <BaseTableCom></BaseTableCom>
+    </div>
+  </div>
 </template>

-<script setup></script>
+<script setup>
+import { ref } from 'vue'
+import BaseTableCom from '@/components/table/BaseTableCom.vue'
+</script>

 <style lang="scss" scoped></style>
--- a/app/src/views/request/RequestManageView.vue
+++ b/app/src/views/request/RequestManageView.vue
@ -1,7 +1,14 @@
 <template>
-  <div>请假信息管理</div>
+  <div class="request-manage">
+    <div clase="table">
+      <BaseTableCom></BaseTableCom>
+    </div>
+  </div>
 </template>

-<script setup></script>
+<script setup>
+import { ref } from 'vue'
+import BaseTableCom from '@/components/table/BaseTableCom.vue'
+</script>

 <style lang="scss" scoped></style>