feat: 新增功能: 🚀 登录功能完成；员工列表简单渲染完成

.eslintrc.js

@@ -11,5 +11,6 @@ module.exports = {
 		'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
 		'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
 		'vue/multi-word-component-names': 'off',
+		'@typescript-eslint/no-explicit-any': 'off',
 	},
 };

package-lock.json

@@ -1,23 +1,23 @@
 {
-	"name": "vue_ts_pina",
+  "name": "sky-admin",
   "version": "0.1.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-			"name": "vue_ts_pina",
+      "name": "sky-admin",
       "version": "0.1.0",
       "dependencies": {
         "axios": "^1.6.2",
         "core-js": "^3.8.3",
         "dayjs": "^1.11.10",
         "element-plus": "^2.5.5",
+        "js-cookie": "^3.0.5",
         "loadsh": "^0.0.4",
         "pinia": "^2.1.7",
         "unplugin-element-plus": "^0.8.0",
         "uuid": "^9.0.1",
         "vue": "^3.4.19",
-				"vue-cookies": "^1.8.3",
         "vue-lazyload": "^3.0.0",
         "vue-router": "^4.0.3",
         "webpackbar": "^6.0.0"
@@ -9428,6 +9428,14 @@
         "@sideway/pinpoint": "^2.0.0"
       }
     },
+    "node_modules/js-cookie": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmmirror.com/js-cookie/-/js-cookie-3.0.5.tgz",
+      "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==",
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/js-message": {
       "version": "1.0.7",
       "resolved": "https://registry.npmmirror.com/js-message/-/js-message-1.0.7.tgz",
@@ -14577,11 +14585,6 @@
         }
       }
     },
-		"node_modules/vue-cookies": {
-			"version": "1.8.3",
-			"resolved": "https://mirrors.cloud.tencent.com/npm/vue-cookies/-/vue-cookies-1.8.3.tgz",
-			"integrity": "sha512-VBRsyRMVdahBgFfh389TMHPmDdr4URDJNMk4FKSCfuNITs7+jitBDhwyL4RJd3WUsfOYNNjPAkfbehyH9AFuoA=="
-		},
     "node_modules/vue-demi": {
       "version": "0.14.7",
       "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.7.tgz",

package.json

@@ -19,12 +19,12 @@
     "core-js": "^3.8.3",
     "dayjs": "^1.11.10",
     "element-plus": "^2.5.5",
+    "js-cookie": "^3.0.5",
     "loadsh": "^0.0.4",
     "pinia": "^2.1.7",
     "unplugin-element-plus": "^0.8.0",
     "uuid": "^9.0.1",
     "vue": "^3.4.19",
-    "vue-cookies": "^1.8.3",
     "vue-lazyload": "^3.0.0",
     "vue-router": "^4.0.3",
     "webpackbar": "^6.0.0"

src/api/employee.ts

@@ -0,0 +1,24 @@
+import Request from '@/utils/request';
+
+/**
+ * 员工登录
+ * @param data
+ */
+export const reqLogin = (data: any) => {
+	return Request({ url: '/admin/employee/login', method: 'POST', data });
+};
+
+/**
+ * 员工分页查询
+ * @param data
+ */
+export const reqGetEmployeePage = (data: any) => {
+	return Request({ url: '/admin/employee/page', method: 'GET', params: data });
+};
+
+/**
+ * 根据id查询员工
+ */
+export const reqGetEmployeeById = (id: number) => {
+	return Request({ url: `/admin/employee/${id}`, method: 'GET' });
+};

src/api/test.js

@@ -1,8 +0,0 @@
-import Request from '@/utils/request';
-
-export const reqGetLoadBoard = () => {
-	return Request({
-		url: '/board/loadBoard',
-		method: 'GET',
-	});
-};

src/commpent/aside.vue

@@ -1,5 +1,5 @@
 <template>
-	<el-menu :collapse="store.isCollapse">
+	<el-menu :collapse="store.isCollapse" default-active="1">
 		<div :style="!store.isCollapse ? 'width: 100%' : 'width: 63px'" class="logo">
 			<img v-show="!store.isCollapse" alt="图标" src="../assets/login/logo.png" srcset="../assets/login/logo.png" />
 			<img v-show="store.isCollapse" alt="图标" src="../assets/login/mini-logo.png" srcset="../assets/login/mini-logo.png" />
@@ -8,43 +8,18 @@
 			<el-icon>
 				<component :is="item.icon" />
 			</el-icon>
-			<template #title> {{ item.label }}</template>
+			<template #title>
+				<RouterLink :to="item.path" style="width: 100%; height: 100%; color: #bfcbd9">{{ item.label }}</RouterLink>
+			</template>
 		</el-menu-item>
 	</el-menu>
 </template>
 
 <script lang="ts" setup>
 import { headerStore } from '@/store/header';
+import { menuData } from '@/config/menuData';
 
 const store = headerStore();
-
-const menuData = [
-	{
-		path: '/',
-		name: 'home',
-		label: '首页',
-		icon: 'Menu',
-		url: 'Home/Home',
-	},
-	{
-		path: '/mall',
-		name: 'mall',
-		label: '商品管理',
-		icon: 'Document',
-		url: 'MallManage/MallManage',
-	},
-	{
-		path: '/user',
-		name: 'user',
-		label: '用户管理',
-		icon: 'Setting',
-		url: 'UserManage/UserManage',
-	},
-	{
-		label: '其他',
-		icon: 'location',
-	},
-];
 </script>
 
 <style lang="scss" scoped>

src/commpent/table/table-plus.vue

@@ -0,0 +1,32 @@
+<!-- tablePlus:二次封装table -->
+<template>
+	<el-table :data="tableData" v-bind="$attrs">
+		<el-table-column v-for="item in column" :key="item.prop" v-bind="item">
+			<template v-if="$slots[item.prop]" #default="scope">
+				<slot :name="item.prop" v-bind="scope"></slot>
+			</template>
+		</el-table-column>
+	</el-table>
+</template>
+
+<script lang="ts" setup>
+import { defineProps } from 'vue';
+
+interface TableData {
+	[propName: string]: any;
+}
+
+interface Column {
+	prop: string;
+	label: string;
+
+	[propName: string]: any;
+}
+
+defineProps<{
+	tableData: TableData[];
+	column: Column[];
+}>();
+</script>
+
+<style lang="scss" scoped></style>

src/config/globalProperties.ts

@@ -0,0 +1,7 @@
+import JSCookies from 'js-cookie';
+
+declare module 'vue' {
+	interface ComponentCustomProperties {
+		$cookies: typeof JSCookies;
+	}
+}

src/config/menuData.ts

@@ -0,0 +1,44 @@
+export const menuData = [
+	{
+		path: '/dashboard',
+		name: 'dashboard',
+		label: '工作台',
+		icon: 'HomeFilled',
+	},
+	{
+		path: '/statistics',
+		name: 'statistics',
+		label: '数据统计',
+		icon: 'TrendCharts',
+	},
+	{
+		path: '/order',
+		name: 'order',
+		label: '订单管理',
+		icon: 'List',
+	},
+	{
+		path: '/setmeal',
+		name: 'setmeal',
+		label: '套餐管理',
+		icon: 'Menu',
+	},
+	{
+		path: '/dish',
+		name: 'dish',
+		label: '菜品管理',
+		icon: 'Dish',
+	},
+	{
+		path: '/category',
+		name: 'category',
+		label: '分类管理',
+		icon: 'Menu',
+	},
+	{
+		path: '/employee',
+		name: 'employee',
+		label: '员工管理',
+		icon: 'UserFilled',
+	},
+];

src/main.ts

@@ -7,10 +7,12 @@ import zhCn from 'element-plus/dist/locale/zh-cn.mjs';
 import './assets/css/reset.css';
 import './assets/css/index.scss';
 import * as ElementPlusIconsVue from '@element-plus/icons-vue';
+import '@/config/globalProperties';
 
 const app = createApp(App);
 
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
 	app.component(key, component);
 }
+
 app.use(router).use(createPinia()).use(ElementPlus, { locale: zhCn }).mount('#app');

src/router/index.ts

@@ -6,6 +6,11 @@ const routes: Array<RouteRecordRaw> = [
 		name: 'layout',
 		component: () => import(/* webpackChunkName: "Layout" */ '@/views/layout.vue'),
 		children: [
+			{
+				path: 'dashboard',
+				name: 'dashboard',
+				component: () => import(/* webpackChunkName: "dashboard" */ '@/views/dashboard/index.vue'),
+			},
 			{
 				path: 'statistics',
 				name: 'statistics',

src/shims-vue.d.ts

@@ -5,3 +5,4 @@ declare module '*.vue' {
 	export default component
 }
 declare module 'element-plus/dist/locale/zh-cn.mjs';
+declare module "js-cookie"

src/store/employee.ts

@@ -0,0 +1,46 @@
+import { defineStore } from 'pinia';
+import { reqGetEmployeeById, reqGetEmployeePage, reqLogin } from '@/api/employee';
+import Cookies from 'js-cookie';
+import router from '@/router';
+import { ElMessage } from 'element-plus';
+
+export const employeeStore = defineStore('employeeStore', {
+	state: () => ({
+		employeeList: [],
+	}),
+	getters: {},
+	actions: {
+		/**
+		 * 员工登录
+		 * @param data
+		 */
+		async login(data: any) {
+			const response: any = await reqLogin(data);
+			if (response.code === 1) {
+				Cookies.set('token', response.data.token);
+				Cookies.set('user_info', JSON.stringify(response.data));
+				Cookies.set('username', response.data.name);
+				router.push('/').catch();
+			} else {
+				ElMessage.error(response.msg);
+			}
+		},
+		/**
+		 * 员工分页查询
+		 * @param data
+		 */
+		async getEmployeePage(data: any) {
+			const response: any = await reqGetEmployeePage(data);
+			this.employeeList = response.data.records;
+		},
+
+		/**
+		 * 根据id查询员工
+		 * @param id
+		 */
+		async getEmployeeListById(id: number) {
+			const response = await reqGetEmployeeById(id);
+			this.employeeList = response.data;
+		},
+	},
+});

src/utils/request.ts

@@ -1,4 +1,7 @@
 import axios from 'axios';
+import router from '@/router';
+import Cookies from 'js-cookie';
+import { ElMessage } from 'element-plus';
 
 const request = axios.create({
 	baseURL: '/api',
@@ -7,6 +10,9 @@ const request = axios.create({
 
 // 请求拦截器
 request.interceptors.request.use(config => {
+	if (Cookies.get('token')) {
+		config.headers.token = Cookies.get('token');
+	}
 	return config;
 });
 
@@ -16,7 +22,11 @@ request.interceptors.response.use(
 		return response.data;
 	},
 	error => {
-		return Promise.reject(new Error('网络错误'));
+		if (error.response.status === 401) {
+			ElMessage.error('登录超时，请重新登录');
+			router.push('/login').catch();
+		}
+		return Promise.reject('网络错误');
 	},
 );
 

src/views/dashboard/index.vue

@@ -0,0 +1,5 @@
+<script lang="ts" setup></script>
+
+<template>工作台</template>
+
+<style lang="scss" scoped></style>

src/views/employee/index.vue

@@ -1,5 +1,55 @@
-<script lang="ts" setup></script>
+<template>
+	<TablePlus :column="column" :table-data="store.employeeList" stripe>
+		<template #status="props">
+			<span v-show="props.row.status === 1" class="status"><i class="start"></i> 启用</span>
+			<span v-show="props.row.status === 0" class="status"><i class="disabled"></i> 禁用</span>
+		</template>
+	</TablePlus>
+</template>
 
-<template>员工管理</template>
+<script lang="ts" setup>
+import TablePlus from '@/commpent/table/table-plus.vue';
+import { employeeStore } from '@/store/employee';
+import { onMounted, reactive, toRaw } from 'vue';
 
-<style lang="scss" scoped></style>
+const store = employeeStore();
+const requestData = reactive({
+	name: '',
+	page: 1,
+	pageSize: 10,
+});
+const column = [
+	{ prop: 'name', label: '员工姓名' },
+	{ prop: 'username', label: '账号' },
+	{ prop: 'phone', label: '手机号' },
+	{ prop: 'status', label: '状态' },
+	{ prop: 'updateTime', label: '最后登录时间' },
+];
+
+onMounted(() => {
+	store.getEmployeePage(toRaw(requestData));
+});
+</script>
+<style lang="scss" scoped>
+.status {
+	position: relative;
+
+	i {
+		position: absolute;
+		top: 50%;
+		left: -10px;
+		transform: translateY(-50%);
+		width: 5px;
+		height: 5px;
+		border-radius: 50%;
+	}
+
+	.start {
+		background-color: var(--el-color-success);
+	}
+
+	.disabled {
+		background-color: var(--el-color-danger);
+	}
+}
+</style>

src/views/login/index.vue

@@ -14,7 +14,7 @@
 							<el-input v-model="form.username" :prefix-icon="User" />
 						</el-form-item>
 						<el-form-item prop="password">
-							<el-input v-model="form.password" :prefix-icon="Lock" type="password" />
+							<el-input v-model="form.password" :prefix-icon="Lock" show-password type="password" />
 						</el-form-item>
 						<el-form-item>
 							<el-button class="login-btn" type="primary" @click="submitForm(ruleFormRef)">登录</el-button>
@@ -28,14 +28,16 @@
 
 <script lang="ts" setup>
 import { Lock, User } from '@element-plus/icons-vue';
-import { reactive, ref } from 'vue';
+import { reactive, ref, toRaw } from 'vue';
 import type { FormInstance, FormRules } from 'element-plus';
+import { employeeStore } from '@/store/employee';
 
 interface RuleForm {
 	username: string;
 	password: string;
 }
 
+const store = employeeStore();
 const ruleFormRef = ref<FormInstance>();
 const form = reactive({
 	username: 'admin',
@@ -55,7 +57,7 @@ const submitForm = async (formEl: FormInstance | undefined) => {
 	if (!formEl) return;
 	await formEl.validate((valid, fields) => {
 		if (valid) {
-			console.log('submit!');
+			store.login(toRaw(form));
 		} else {
 			console.log('error submit!', fields);
 		}

vue.config.js

@@ -9,11 +9,9 @@ module.exports = defineConfig({
 	devServer: {
 		proxy: {
 			'/api': {
-				// target: 'http://192.168.3.98:1001',
-				target: 'https://192.168.2.148:7158',
-				// target: process.env.VUE_APP_START_PORT_DEV2,
+				target: 'http://localhost:8080',
 				changeOrigin: true,
-				pathRewrite: {'^/api': '/api'},
+				pathRewrite: {'^/api': ''},
 			},
 		},
 	},