1
This commit is contained in:
雷欧（林平凡）
1774
package-lock.json
generated
Normal file
1774
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
24
package.json
Normal file
24
package.json
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
{
|
||||||
|
"name": "jarvis_vue",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"main": "index.js",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vite build",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"keywords": [],
|
||||||
|
"author": "",
|
||||||
|
"license": "ISC",
|
||||||
|
"description": "",
|
||||||
|
"dependencies": {
|
||||||
|
"axios": "^1.6.2",
|
||||||
|
"element-plus": "^2.4.10",
|
||||||
|
"vue": "^3.4.28",
|
||||||
|
"vue-router": "^4.2.5"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@vitejs/plugin-vue": "^5.0.4",
|
||||||
|
"vite": "^5.1.8"
|
||||||
|
}
|
||||||
|
}
|
||||||
101
src/App.vue
Normal file
101
src/App.vue
Normal file
@@ -0,0 +1,101 @@
|
|||||||
|
<template>
|
||||||
|
<div id="app">
|
||||||
|
<el-container v-if="isLoggedIn">
|
||||||
|
<!-- 顶部导航 -->
|
||||||
|
<el-header>
|
||||||
|
<div class="header-container">
|
||||||
|
<div class="logo">订单管理系统</div>
|
||||||
|
<div class="user-info">
|
||||||
|
<el-dropdown trigger="click">
|
||||||
|
<span class="el-dropdown-link">
|
||||||
|
{{ username }} <i class="el-icon-arrow-down el-icon--right"></i>
|
||||||
|
</span>
|
||||||
|
<template #dropdown>
|
||||||
|
<el-dropdown-menu>
|
||||||
|
<el-dropdown-item @click="logout">退出登录</el-dropdown-item>
|
||||||
|
</el-dropdown-menu>
|
||||||
|
</template>
|
||||||
|
</el-dropdown>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-header>
|
||||||
|
|
||||||
|
<!-- 主内容区 -->
|
||||||
|
<el-main>
|
||||||
|
<router-view />
|
||||||
|
</el-main>
|
||||||
|
</el-container>
|
||||||
|
|
||||||
|
<!-- 未登录时显示登录页 -->
|
||||||
|
<router-view v-else />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'App',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
username: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
isLoggedIn() {
|
||||||
|
return localStorage.getItem('token') !== null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
const userInfo = localStorage.getItem('userInfo')
|
||||||
|
if (userInfo) {
|
||||||
|
try {
|
||||||
|
const user = JSON.parse(userInfo)
|
||||||
|
this.username = user.username || '用户'
|
||||||
|
} catch (error) {
|
||||||
|
console.error('解析用户信息失败', error)
|
||||||
|
this.username = '用户'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
logout() {
|
||||||
|
localStorage.removeItem('token')
|
||||||
|
localStorage.removeItem('userInfo')
|
||||||
|
this.$axios.defaults.headers.common['Authorization'] = null
|
||||||
|
this.$router.push('/login')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
#app {
|
||||||
|
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
text-align: center;
|
||||||
|
color: #2c3e50;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-header {
|
||||||
|
background-color: #409EFF;
|
||||||
|
color: #fff;
|
||||||
|
line-height: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-info {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
13
src/components/HomeView.vue
Normal file
13
src/components/HomeView.vue
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<h1>首页</h1>
|
||||||
|
<p>欢迎来到首页！</p>
|
||||||
|
<router-link to="/login">去登录页</router-link>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'HomeView'
|
||||||
|
}
|
||||||
|
</script>
|
||||||
0
src/components/Login.vue
Normal file
0
src/components/Login.vue
Normal file
212
src/components/OrderList.vue
Normal file
212
src/components/OrderList.vue
Normal file
@@ -0,0 +1,212 @@
|
|||||||
|
<template>
|
||||||
|
<div class="order-container">
|
||||||
|
<el-card class="box-card">
|
||||||
|
<template #header>
|
||||||
|
<div class="clearfix">
|
||||||
|
<span>订单列表</span>
|
||||||
|
<el-button style="float: right; padding: 3px 0" type="text" @click="fetchOrders">刷新</el-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- 搜索表单 -->
|
||||||
|
<el-form :inline="true" :model="searchForm" class="demo-form-inline">
|
||||||
|
<el-form-item label="订单编号">
|
||||||
|
<el-input v-model="searchForm.orderNo" placeholder="请输入订单编号"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="客户名称">
|
||||||
|
<el-input v-model="searchForm.customerName" placeholder="请输入客户名称"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="订单状态">
|
||||||
|
<el-select v-model="searchForm.status" placeholder="请选择订单状态">
|
||||||
|
<el-option label="待支付" value="PENDING"></el-option>
|
||||||
|
<el-option label="已支付" value="PAID"></el-option>
|
||||||
|
<el-option label="已发货" value="SHIPPED"></el-option>
|
||||||
|
<el-option label="已完成" value="COMPLETED"></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" @click="fetchOrders">查询</el-button>
|
||||||
|
<el-button @click="resetForm">重置</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
|
||||||
|
<!-- 订单表格 -->
|
||||||
|
<el-table
|
||||||
|
:data="orders"
|
||||||
|
stripe
|
||||||
|
style="width: 100%">
|
||||||
|
<el-table-column prop="orderNo" label="订单编号"></el-table-column>
|
||||||
|
<el-table-column prop="customerName" label="客户名称"></el-table-column>
|
||||||
|
<el-table-column prop="orderAmount" label="订单金额"></el-table-column>
|
||||||
|
<el-table-column prop="createTime" label="创建时间"></el-table-column>
|
||||||
|
<el-table-column prop="status" label="订单状态">
|
||||||
|
<template #default="scope">
|
||||||
|
<el-tag
|
||||||
|
:type="statusMap[scope.row.status].type">
|
||||||
|
{{ statusMap[scope.row.status].label }}
|
||||||
|
</el-tag>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="操作">
|
||||||
|
<template #default="scope">
|
||||||
|
<el-button size="small" type="text" @click="viewDetail(scope.row)">查看详情</el-button>
|
||||||
|
<el-button size="small" type="text" @click="editOrder(scope.row)">编辑</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
|
||||||
|
<!-- 分页控件 -->
|
||||||
|
<el-pagination
|
||||||
|
@size-change="handleSizeChange"
|
||||||
|
@current-change="handleCurrentChange"
|
||||||
|
:current-page="currentPage"
|
||||||
|
:page-sizes="[10, 20, 30, 50]"
|
||||||
|
:page-size="pageSize"
|
||||||
|
layout="total, sizes, prev, pager, next, jumper"
|
||||||
|
:total="total">
|
||||||
|
</el-pagination>
|
||||||
|
</el-card>
|
||||||
|
|
||||||
|
<!-- 订单详情对话框 -->
|
||||||
|
<el-dialog :visible.sync="detailDialogVisible" title="订单详情">
|
||||||
|
<template #content>
|
||||||
|
<el-form :model="currentOrder">
|
||||||
|
<el-form-item label="订单编号" :label-width="formLabelWidth">
|
||||||
|
<span>{{ currentOrder.orderNo }}</span>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="客户名称" :label-width="formLabelWidth">
|
||||||
|
<span>{{ currentOrder.customerName }}</span>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="订单金额" :label-width="formLabelWidth">
|
||||||
|
<span>{{ currentOrder.orderAmount }}</span>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="订单状态" :label-width="formLabelWidth">
|
||||||
|
<el-tag :type="statusMap[currentOrder.status].type">
|
||||||
|
{{ statusMap[currentOrder.status].label }}
|
||||||
|
</el-tag>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="创建时间" :label-width="formLabelWidth">
|
||||||
|
<span>{{ currentOrder.createTime }}</span>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="订单详情" :label-width="formLabelWidth">
|
||||||
|
<el-table :data="currentOrder.items" stripe style="width: 100%">
|
||||||
|
<el-table-column prop="productName" label="商品名称"></el-table-column>
|
||||||
|
<el-table-column prop="quantity" label="数量"></el-table-column>
|
||||||
|
<el-table-column prop="price" label="单价"></el-table-column>
|
||||||
|
<el-table-column prop="subtotal" label="小计"></el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</template>
|
||||||
|
<template #footer>
|
||||||
|
<el-button @click="detailDialogVisible = false">关闭</el-button>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'OrderList',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// 状态映射
|
||||||
|
statusMap: {
|
||||||
|
PENDING: { label: '待支付', type: 'warning' },
|
||||||
|
PAID: { label: '已支付', type: 'success' },
|
||||||
|
SHIPPED: { label: '已发货', type: 'info' },
|
||||||
|
COMPLETED: { label: '已完成', type: 'primary' }
|
||||||
|
},
|
||||||
|
|
||||||
|
// 搜索表单
|
||||||
|
searchForm: {
|
||||||
|
orderNo: '',
|
||||||
|
customerName: '',
|
||||||
|
status: ''
|
||||||
|
},
|
||||||
|
|
||||||
|
// 分页信息
|
||||||
|
currentPage: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
total: 0,
|
||||||
|
orders: [],
|
||||||
|
|
||||||
|
// 详情对话框
|
||||||
|
detailDialogVisible: false,
|
||||||
|
currentOrder: {},
|
||||||
|
formLabelWidth: '120px'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.fetchOrders()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 获取订单列表
|
||||||
|
fetchOrders() {
|
||||||
|
this.$axios.get('/orders', {
|
||||||
|
params: {
|
||||||
|
...this.searchForm,
|
||||||
|
page: this.currentPage,
|
||||||
|
size: this.pageSize
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.then(response => {
|
||||||
|
this.orders = response.data.content
|
||||||
|
this.total = response.data.totalElements
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
this.$message.error('获取订单列表失败，请稍后重试')
|
||||||
|
console.error(error)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
// 重置表单
|
||||||
|
resetForm() {
|
||||||
|
this.searchForm.orderNo = ''
|
||||||
|
this.searchForm.customerName = ''
|
||||||
|
this.searchForm.status = ''
|
||||||
|
this.fetchOrders()
|
||||||
|
},
|
||||||
|
|
||||||
|
// 分页相关方法
|
||||||
|
handleSizeChange(newSize) {
|
||||||
|
this.pageSize = newSize
|
||||||
|
this.fetchOrders()
|
||||||
|
},
|
||||||
|
|
||||||
|
handleCurrentChange(newPage) {
|
||||||
|
this.currentPage = newPage
|
||||||
|
this.fetchOrders()
|
||||||
|
},
|
||||||
|
|
||||||
|
// 查看订单详情
|
||||||
|
viewDetail(order) {
|
||||||
|
this.$axios.get(`/orders/${order.id}`)
|
||||||
|
.then(response => {
|
||||||
|
this.currentOrder = response.data
|
||||||
|
this.detailDialogVisible = true
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
this.$message.error('获取订单详情失败，请稍后重试')
|
||||||
|
console.error(error)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
// 编辑订单
|
||||||
|
editOrder(order) {
|
||||||
|
this.$message.info(`编辑订单: ${order.orderNo}`)
|
||||||
|
// 实现编辑逻辑
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.order-container {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-card {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
57
src/main.js
Normal file
57
src/main.js
Normal file
@@ -0,0 +1,57 @@
|
|||||||
|
import { createApp } from 'vue'
|
||||||
|
import ElementPlus from 'element-plus'
|
||||||
|
import 'element-plus/dist/index.css'
|
||||||
|
import App from './App.vue'
|
||||||
|
import router from './router'
|
||||||
|
import axios from 'axios'
|
||||||
|
|
||||||
|
const app = createApp(App)
|
||||||
|
|
||||||
|
// 配置axios基础URL http://134.175.126.60:36666
|
||||||
|
axios.defaults.baseURL = 'http://134.175.126.60:36666/api'
|
||||||
|
|
||||||
|
// 请求拦截器 - 携带token
|
||||||
|
// axios.interceptors.request.use(
|
||||||
|
// config => {
|
||||||
|
// const token = localStorage.getItem('token')
|
||||||
|
// if (token) {
|
||||||
|
// config.headers['Authorization'] = `Bearer ${token}`
|
||||||
|
// }
|
||||||
|
// return config
|
||||||
|
// },
|
||||||
|
// error => {
|
||||||
|
// return Promise.reject(error)
|
||||||
|
// }
|
||||||
|
// )
|
||||||
|
|
||||||
|
// 响应拦截器 - 处理401未授权
|
||||||
|
// axios.interceptors.response.use(
|
||||||
|
// response => {
|
||||||
|
// return response
|
||||||
|
// },
|
||||||
|
// error => {
|
||||||
|
// if (error.response && error.response.status === 401) {
|
||||||
|
// localStorage.removeItem('token')
|
||||||
|
// localStorage.removeItem('userInfo')
|
||||||
|
// app.config.globalProperties.$message.error('登录已过期，请重新登录')
|
||||||
|
// router.push('/login')
|
||||||
|
// }
|
||||||
|
// return Promise.reject(error)
|
||||||
|
// }
|
||||||
|
// )
|
||||||
|
// 仅在开发环境启用调试模式
|
||||||
|
if (import.meta.env.DEV) {
|
||||||
|
app.config.performance = true // 启用性能追踪
|
||||||
|
app.config.devtools = true // 启用 DevTools 调试
|
||||||
|
}
|
||||||
|
// main.js
|
||||||
|
app.config.errorHandler = (err, instance, info) => {
|
||||||
|
console.error('全局错误捕获:', err, info)
|
||||||
|
// 可以添加错误上报逻辑
|
||||||
|
}
|
||||||
|
// 将axios挂载到全局
|
||||||
|
app.config.globalProperties.$axios = axios
|
||||||
|
|
||||||
|
app.use(ElementPlus)
|
||||||
|
app.use(router)
|
||||||
|
app.mount('#app')
|
||||||
14
src/public/index.html
Normal file
14
src/public/index.html
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>订单管理系统</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/src/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
41
src/router/index.js
Normal file
41
src/router/index.js
Normal file
@@ -0,0 +1,41 @@
|
|||||||
|
import { createRouter, createWebHistory } from 'vue-router'
|
||||||
|
import OrderList from '../components/OrderList.vue'
|
||||||
|
import Login from '../components/Login.vue'
|
||||||
|
|
||||||
|
const routes = [
|
||||||
|
// src/router/index.js
|
||||||
|
{
|
||||||
|
path: '/',
|
||||||
|
redirect: '/login'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/',
|
||||||
|
name: 'OrderList',
|
||||||
|
component: OrderList,
|
||||||
|
meta: { requiresAuth: true }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/login',
|
||||||
|
name: 'Login',
|
||||||
|
component: Login
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
const router = createRouter({
|
||||||
|
history: createWebHashHistory(),
|
||||||
|
routes
|
||||||
|
})
|
||||||
|
|
||||||
|
// 全局前置守卫 - 验证登录状态
|
||||||
|
router.beforeEach((to, from, next) => {
|
||||||
|
const requiresAuth = to.matched.some(record => record.meta.requiresAuth)
|
||||||
|
const isLoggedIn = localStorage.getItem('token') !== null
|
||||||
|
|
||||||
|
if (requiresAuth && !isLoggedIn) {
|
||||||
|
next('/login')
|
||||||
|
} else {
|
||||||
|
next()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
export default router
|
||||||
23
vite.config.js
Normal file
23
vite.config.js
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import vue from '@vitejs/plugin-vue'
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [vue()],
|
||||||
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
'@': '/src'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
server: {
|
||||||
|
host:'0.0.0.0',
|
||||||
|
port:9999,
|
||||||
|
// 解决开发环境跨域
|
||||||
|
proxy: {
|
||||||
|
'/api': {
|
||||||
|
target: 'http://134.175.126.206:6666',
|
||||||
|
changeOrigin: true,
|
||||||
|
rewrite: (path) => path.replace(/^\/api/, '')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
Reference in New Issue
Block a user