feat: 初始化订单审批系统项目- 创建项目基础结构和配置文件
- 添加全局样式和工具函数 - 实现订单状态和审批状态的格式化及颜色处理- 添加金额和日期格式化函数 - 实现防抖和节流函数 - 添加微信小程序环境检查和文件预览URL生成函数 - 实现复制到剪贴板功能 - 添加项目路由配置 - 实现HTTP客户端和拦截器 - 添加订单、审批记录等类型定义master
commit
781d598ae7
|
|
@ -0,0 +1,10 @@
|
|||
{
|
||||
"permissions": {
|
||||
"allow": [
|
||||
"Bash(npm install)",
|
||||
"Bash(npm run dev:*)"
|
||||
],
|
||||
"deny": [],
|
||||
"ask": []
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
VITE_API_BASE_URL=http://localhost:8080
|
||||
VITE_APP_TITLE=订单审批系统
|
||||
VITE_FILE_BASE_URL=http://localhost:8080
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
VITE_API_BASE_URL=http://localhost:8080
|
||||
VITE_APP_TITLE=订单审批系统
|
||||
VITE_FILE_BASE_URL=http://localhost:8080
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
VITE_API_BASE_URL=https://your-api-domain.com
|
||||
VITE_APP_TITLE=订单审批系统
|
||||
VITE_FILE_BASE_URL=https://your-api-domain.com
|
||||
|
|
@ -0,0 +1,203 @@
|
|||
# 微信小程序H5审批系统
|
||||
|
||||
基于Vue 3 + TypeScript + Vant 4开发的移动端H5应用，主要用于在微信小程序WebView中运行的订单审批系统。
|
||||
|
||||
## 项目特性
|
||||
|
||||
- 🚀 Vue 3 + TypeScript + Vite 开发
|
||||
- 📱 Vant 4 移动端组件库
|
||||
- 🎯 专为微信小程序WebView优化
|
||||
- 📋 订单列表查看和搜索
|
||||
- 📄 订单详情展示
|
||||
- ✅ 审批操作功能
|
||||
- 📊 审批历史记录
|
||||
- 📎 附件预览功能
|
||||
|
||||
## 技术栈
|
||||
|
||||
- **前端框架**: Vue 3
|
||||
- **开发语言**: TypeScript
|
||||
- **构建工具**: Vite
|
||||
- **UI组件库**: Vant 4
|
||||
- **路由管理**: Vue Router 4
|
||||
- **状态管理**: Pinia
|
||||
- **HTTP客户端**: Axios
|
||||
- **样式预处理**: Sass
|
||||
|
||||
## 目录结构
|
||||
|
||||
```
|
||||
oms_h5/
|
||||
├── public/ # 静态资源
|
||||
├── src/
|
||||
│ ├── api/ # API接口
|
||||
│ ├── components/ # 公共组件
|
||||
│ ├── views/ # 页面组件
|
||||
│ │ ├── List/ # 列表页面
|
||||
│ │ └── Detail/ # 详情页面
|
||||
│ ├── store/ # 状态管理
|
||||
│ ├── utils/ # 工具函数
|
||||
│ ├── types/ # TypeScript类型定义
|
||||
│ ├── styles/ # 全局样式
|
||||
│ └── router/ # 路由配置
|
||||
├── docs/ # 文档和设计稿
|
||||
│ └── ui-mockups/ # UI设计图
|
||||
├── package.json
|
||||
└── vite.config.ts
|
||||
```
|
||||
|
||||
## 开发环境搭建
|
||||
|
||||
### 环境要求
|
||||
|
||||
- Node.js >= 16
|
||||
- npm >= 7 或 yarn >= 1.22
|
||||
|
||||
### 安装依赖
|
||||
|
||||
```bash
|
||||
npm install
|
||||
# 或
|
||||
yarn install
|
||||
```
|
||||
|
||||
### 启动开发服务器
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
# 或
|
||||
yarn dev
|
||||
```
|
||||
|
||||
### 构建生产版本
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
# 或
|
||||
yarn build
|
||||
```
|
||||
|
||||
### 预览构建结果
|
||||
|
||||
```bash
|
||||
npm run preview
|
||||
# 或
|
||||
yarn preview
|
||||
```
|
||||
|
||||
## 环境配置
|
||||
|
||||
项目支持多环境配置，通过`.env`文件管理：
|
||||
|
||||
- `.env` - 通用环境变量
|
||||
- `.env.development` - 开发环境
|
||||
- `.env.production` - 生产环境
|
||||
|
||||
主要配置项：
|
||||
|
||||
```bash
|
||||
VITE_API_BASE_URL=http://localhost:8080 # API基础URL
|
||||
VITE_APP_TITLE=订单审批系统 # 应用标题
|
||||
VITE_FILE_BASE_URL=http://localhost:8080 # 文件服务URL
|
||||
```
|
||||
|
||||
## 主要功能
|
||||
|
||||
### 1. 订单列表
|
||||
- ✅ 订单列表展示
|
||||
- ✅ 下拉刷新和上拉加载
|
||||
- ✅ 搜索功能
|
||||
- ✅ 状态筛选
|
||||
- ✅ 订单状态标识
|
||||
|
||||
### 2. 订单详情
|
||||
- ✅ 订单基本信息展示
|
||||
- ✅ 产品信息列表（软件/硬件/维保）
|
||||
- ✅ 合同附件展示和预览
|
||||
- ✅ 审批历史时间线
|
||||
|
||||
### 3. 审批操作
|
||||
- ✅ 审批通过/驳回
|
||||
- ✅ 审批意见输入
|
||||
- ✅ 操作结果反馈
|
||||
|
||||
### 4. 微信小程序适配
|
||||
- ✅ WebView环境检测
|
||||
- ✅ 移动端样式适配
|
||||
- ✅ 触摸手势支持
|
||||
|
||||
## API接口
|
||||
|
||||
### 订单列表接口
|
||||
```
|
||||
POST /project/order/list
|
||||
```
|
||||
|
||||
### 订单详情接口
|
||||
```
|
||||
GET /project/order/h5/approve/:id
|
||||
```
|
||||
|
||||
### 审批操作接口
|
||||
```
|
||||
POST /project/order/order/approve
|
||||
```
|
||||
|
||||
## 开发规范
|
||||
|
||||
### 代码风格
|
||||
项目使用ESLint + Prettier进行代码规范检查和格式化。
|
||||
|
||||
```bash
|
||||
npm run lint # 代码检查
|
||||
npm run type-check # 类型检查
|
||||
```
|
||||
|
||||
### Git提交规范
|
||||
建议使用Angular提交信息规范：
|
||||
|
||||
```
|
||||
feat: 新增功能
|
||||
fix: 修复问题
|
||||
docs: 文档更新
|
||||
style: 代码格式调整
|
||||
refactor: 代码重构
|
||||
test: 测试相关
|
||||
chore: 构建/工具链更新
|
||||
```
|
||||
|
||||
## 部署说明
|
||||
|
||||
### 生产构建
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
构建完成后，`dist`目录包含所有静态资源文件。
|
||||
|
||||
### 服务器配置
|
||||
由于是SPA应用，需要配置服务器将所有路由指向`index.html`。
|
||||
|
||||
#### Nginx配置示例
|
||||
```nginx
|
||||
location / {
|
||||
try_files $uri $uri/ /index.html;
|
||||
}
|
||||
```
|
||||
|
||||
### 微信小程序配置
|
||||
1. 在微信小程序管理后台配置业务域名
|
||||
2. 确保HTTPS协议部署
|
||||
3. 配置webview组件的src属性
|
||||
|
||||
## 浏览器兼容性
|
||||
|
||||
- Chrome >= 64
|
||||
- Firefox >= 78
|
||||
- Safari >= 12
|
||||
- 微信内置浏览器
|
||||
- 各主流移动端浏览器
|
||||
|
||||
## 许可证
|
||||
|
||||
MIT License
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
/* eslint-disable */
|
||||
/* prettier-ignore */
|
||||
// @ts-nocheck
|
||||
// noinspection JSUnusedGlobalSymbols
|
||||
// Generated by unplugin-auto-import
|
||||
export {}
|
||||
declare global {
|
||||
const EffectScope: typeof import('vue')['EffectScope']
|
||||
const acceptHMRUpdate: typeof import('pinia')['acceptHMRUpdate']
|
||||
const computed: typeof import('vue')['computed']
|
||||
const createApp: typeof import('vue')['createApp']
|
||||
const createPinia: typeof import('pinia')['createPinia']
|
||||
const customRef: typeof import('vue')['customRef']
|
||||
const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
|
||||
const defineComponent: typeof import('vue')['defineComponent']
|
||||
const defineStore: typeof import('pinia')['defineStore']
|
||||
const effectScope: typeof import('vue')['effectScope']
|
||||
const getActivePinia: typeof import('pinia')['getActivePinia']
|
||||
const getCurrentInstance: typeof import('vue')['getCurrentInstance']
|
||||
const getCurrentScope: typeof import('vue')['getCurrentScope']
|
||||
const h: typeof import('vue')['h']
|
||||
const inject: typeof import('vue')['inject']
|
||||
const isProxy: typeof import('vue')['isProxy']
|
||||
const isReactive: typeof import('vue')['isReactive']
|
||||
const isReadonly: typeof import('vue')['isReadonly']
|
||||
const isRef: typeof import('vue')['isRef']
|
||||
const mapActions: typeof import('pinia')['mapActions']
|
||||
const mapGetters: typeof import('pinia')['mapGetters']
|
||||
const mapState: typeof import('pinia')['mapState']
|
||||
const mapStores: typeof import('pinia')['mapStores']
|
||||
const mapWritableState: typeof import('pinia')['mapWritableState']
|
||||
const markRaw: typeof import('vue')['markRaw']
|
||||
const nextTick: typeof import('vue')['nextTick']
|
||||
const onActivated: typeof import('vue')['onActivated']
|
||||
const onBeforeMount: typeof import('vue')['onBeforeMount']
|
||||
const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
|
||||
const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
|
||||
const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
|
||||
const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
|
||||
const onDeactivated: typeof import('vue')['onDeactivated']
|
||||
const onErrorCaptured: typeof import('vue')['onErrorCaptured']
|
||||
const onMounted: typeof import('vue')['onMounted']
|
||||
const onRenderTracked: typeof import('vue')['onRenderTracked']
|
||||
const onRenderTriggered: typeof import('vue')['onRenderTriggered']
|
||||
const onScopeDispose: typeof import('vue')['onScopeDispose']
|
||||
const onServerPrefetch: typeof import('vue')['onServerPrefetch']
|
||||
const onUnmounted: typeof import('vue')['onUnmounted']
|
||||
const onUpdated: typeof import('vue')['onUpdated']
|
||||
const onWatcherCleanup: typeof import('vue')['onWatcherCleanup']
|
||||
const provide: typeof import('vue')['provide']
|
||||
const reactive: typeof import('vue')['reactive']
|
||||
const readonly: typeof import('vue')['readonly']
|
||||
const ref: typeof import('vue')['ref']
|
||||
const resolveComponent: typeof import('vue')['resolveComponent']
|
||||
const setActivePinia: typeof import('pinia')['setActivePinia']
|
||||
const setMapStoreSuffix: typeof import('pinia')['setMapStoreSuffix']
|
||||
const shallowReactive: typeof import('vue')['shallowReactive']
|
||||
const shallowReadonly: typeof import('vue')['shallowReadonly']
|
||||
const shallowRef: typeof import('vue')['shallowRef']
|
||||
const storeToRefs: typeof import('pinia')['storeToRefs']
|
||||
const toRaw: typeof import('vue')['toRaw']
|
||||
const toRef: typeof import('vue')['toRef']
|
||||
const toRefs: typeof import('vue')['toRefs']
|
||||
const toValue: typeof import('vue')['toValue']
|
||||
const triggerRef: typeof import('vue')['triggerRef']
|
||||
const unref: typeof import('vue')['unref']
|
||||
const useAttrs: typeof import('vue')['useAttrs']
|
||||
const useCssModule: typeof import('vue')['useCssModule']
|
||||
const useCssVars: typeof import('vue')['useCssVars']
|
||||
const useId: typeof import('vue')['useId']
|
||||
const useLink: typeof import('vue-router')['useLink']
|
||||
const useModel: typeof import('vue')['useModel']
|
||||
const useRoute: typeof import('vue-router')['useRoute']
|
||||
const useRouter: typeof import('vue-router')['useRouter']
|
||||
const useSlots: typeof import('vue')['useSlots']
|
||||
const useTemplateRef: typeof import('vue')['useTemplateRef']
|
||||
const watch: typeof import('vue')['watch']
|
||||
const watchEffect: typeof import('vue')['watchEffect']
|
||||
const watchPostEffect: typeof import('vue')['watchPostEffect']
|
||||
const watchSyncEffect: typeof import('vue')['watchSyncEffect']
|
||||
}
|
||||
// for type re-export
|
||||
declare global {
|
||||
// @ts-ignore
|
||||
export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
|
||||
import('vue')
|
||||
}
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
/* eslint-disable */
|
||||
/* prettier-ignore */
|
||||
// @ts-nocheck
|
||||
// Generated by unplugin-vue-components
|
||||
// Read more: https://github.com/vuejs/core/pull/3399
|
||||
export {}
|
||||
|
||||
declare module 'vue' {
|
||||
export interface GlobalComponents {
|
||||
RouterLink: typeof import('vue-router')['RouterLink']
|
||||
RouterView: typeof import('vue-router')['RouterView']
|
||||
VanButton: typeof import('vant/es')['Button']
|
||||
VanEmpty: typeof import('vant/es')['Empty']
|
||||
VanField: typeof import('vant/es')['Field']
|
||||
VanIcon: typeof import('vant/es')['Icon']
|
||||
VanList: typeof import('vant/es')['List']
|
||||
VanLoading: typeof import('vant/es')['Loading']
|
||||
VanNavBar: typeof import('vant/es')['NavBar']
|
||||
VanPopup: typeof import('vant/es')['Popup']
|
||||
VanPullRefresh: typeof import('vant/es')['PullRefresh']
|
||||
VanSearch: typeof import('vant/es')['Search']
|
||||
VanStep: typeof import('vant/es')['Step']
|
||||
VanSteps: typeof import('vant/es')['Steps']
|
||||
VanTab: typeof import('vant/es')['Tab']
|
||||
VanTabs: typeof import('vant/es')['Tabs']
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
# UI设计图存放目录
|
||||
|
||||
此目录用于存放项目相关的UI设计图和原型图。
|
||||
|
||||
## 目录结构
|
||||
|
||||
```
|
||||
ui-mockups/
|
||||
├── README.md # 本文件
|
||||
├── wireframes/ # 线框图
|
||||
│ ├── list-page.png # 列表页面线框图
|
||||
│ └── detail-page.png # 详情页面线框图
|
||||
├── designs/ # 设计稿
|
||||
│ ├── list-page.png # 列表页面设计稿
|
||||
│ └── detail-page.png # 详情页面设计稿
|
||||
├── prototypes/ # 交互原型
|
||||
└── specifications/ # 设计规范
|
||||
└── style-guide.md # 样式指南
|
||||
```
|
||||
|
||||
## 设计要求
|
||||
|
||||
### 1. 移动端适配
|
||||
- 屏幕宽度：375px - 414px
|
||||
- 适配iPhone和Android主流设备
|
||||
- 支持横竖屏切换
|
||||
|
||||
### 2. 微信小程序WebView适配
|
||||
- 适配微信小程序导航栏高度
|
||||
- 考虑安全区域（刘海屏等）
|
||||
- 遵循微信小程序设计规范
|
||||
|
||||
### 3. 页面设计规范
|
||||
|
||||
#### 列表页面
|
||||
- 顶部搜索栏
|
||||
- 筛选条件（状态筛选）
|
||||
- 工单卡片列表
|
||||
- 下拉刷新、上拉加载更多
|
||||
- 空状态提示
|
||||
|
||||
#### 详情页面
|
||||
- 工单基本信息展示
|
||||
- 产品信息列表
|
||||
- 附件展示区域
|
||||
- 审批历史时间线
|
||||
- 底部审批操作按钮
|
||||
|
||||
### 4. 交互设计
|
||||
- 页面切换动画
|
||||
- 加载状态提示
|
||||
- 操作反馈（成功/失败提示）
|
||||
- 确认弹窗设计
|
||||
|
||||
### 5. 视觉设计
|
||||
- 主色调：#1890ff（蓝色）
|
||||
- 辅助色：#52c41a（成功绿）、#f5222d（错误红）
|
||||
- 背景色：#f5f5f5
|
||||
- 文字颜色：#333333（主要）、#666666（次要）、#999999（辅助）
|
||||
|
||||
## 文件命名规范
|
||||
|
||||
- 使用英文命名，单词间用连字符分隔
|
||||
- 包含页面/组件名称和版本号
|
||||
- 示例：`order-list-v1.0.png`、`approval-dialog-v2.1.png`
|
||||
|
||||
## 版本管理
|
||||
|
||||
每次设计更新时请：
|
||||
1. 更新版本号
|
||||
2. 在文件名中体现版本
|
||||
3. 保留历史版本以便回溯
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 72 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 281 KiB |
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
|
||||
<meta name="format-detection" content="telephone=no" />
|
||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
||||
<title>订单审批系统</title>
|
||||
<script>
|
||||
// 防止页面缩放
|
||||
document.addEventListener('touchstart', function (event) {
|
||||
if (event.touches.length > 1) {
|
||||
event.preventDefault();
|
||||
}
|
||||
});
|
||||
|
||||
// 微信小程序webview适配
|
||||
if (window.__wxjs_environment === 'miniprogram') {
|
||||
// 微信小程序环境
|
||||
console.log('Running in WeChat MiniProgram WebView');
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,37 @@
|
|||
{
|
||||
"name": "oms-h5",
|
||||
"version": "1.0.0",
|
||||
"type": "module",
|
||||
"description": "微信小程序H5审批系统",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vue-tsc && vite build",
|
||||
"preview": "vite preview",
|
||||
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
|
||||
"type-check": "vue-tsc --noEmit"
|
||||
},
|
||||
"dependencies": {
|
||||
"vue": "^3.3.4",
|
||||
"vue-router": "^4.2.4",
|
||||
"pinia": "^2.1.6",
|
||||
"vant": "^4.6.6",
|
||||
"axios": "^1.5.0",
|
||||
"@vant/touch-emulator": "^1.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^20.5.9",
|
||||
"@vitejs/plugin-vue": "^4.3.4",
|
||||
"@vue/eslint-config-prettier": "^8.0.0",
|
||||
"@vue/eslint-config-typescript": "^11.0.3",
|
||||
"@vue/tsconfig": "^0.4.0",
|
||||
"eslint": "^8.47.0",
|
||||
"eslint-plugin-vue": "^9.17.0",
|
||||
"prettier": "^3.0.2",
|
||||
"sass": "^1.66.1",
|
||||
"typescript": "~5.1.6",
|
||||
"vite": "^4.4.9",
|
||||
"vue-tsc": "^1.8.8",
|
||||
"unplugin-auto-import": "^0.16.6",
|
||||
"unplugin-vue-components": "^0.25.2"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<router-view />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// App根组件
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
#app {
|
||||
min-height: 100vh;
|
||||
background-color: var(--van-background-color);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
import http from '@/utils/http'
|
||||
import type { ApiResponse, Order, OrderDetailResponse, ListParams, ApprovalParams } from '@/types'
|
||||
import type { AxiosResponse } from 'axios'
|
||||
|
||||
/**
|
||||
* 获取订单列表
|
||||
*/
|
||||
export const getOrderList = (params: ListParams): Promise<AxiosResponse<ApiResponse<{
|
||||
total: number
|
||||
rows: Order[]
|
||||
}>>> => {
|
||||
// 创建FormData对象
|
||||
const formData = new FormData()
|
||||
|
||||
// 添加参数到FormData
|
||||
if (params.approve) formData.append('approve', params.approve)
|
||||
formData.append('page', params.page.toString())
|
||||
formData.append('pageSize', params.pageSize.toString())
|
||||
if (params.keyword) formData.append('keyword', params.keyword)
|
||||
|
||||
return http.post('/project/order/list', formData)
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取订单详情
|
||||
*/
|
||||
export const getOrderDetail = (id: string | number): Promise<AxiosResponse<ApiResponse<OrderDetailResponse>>> => {
|
||||
return http.get(`/project/order/h5/approve/${id}`)
|
||||
}
|
||||
|
||||
/**
|
||||
* 提交审批结果
|
||||
*/
|
||||
export const submitApproval = (params: any): Promise<AxiosResponse<ApiResponse<any>>> => {
|
||||
// 创建FormData对象
|
||||
const formData = new FormData()
|
||||
|
||||
// 将所有参数添加到FormData中
|
||||
Object.keys(params).forEach(key => {
|
||||
if (params[key] !== undefined && params[key] !== null) {
|
||||
formData.append(key, params[key].toString())
|
||||
}
|
||||
})
|
||||
|
||||
return http.post('/project/order/order/approve', formData)
|
||||
}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
/// <reference types="vite/client" />
|
||||
|
||||
declare module '*.vue' {
|
||||
import type { DefineComponent } from 'vue'
|
||||
const component: DefineComponent<{}, {}, any>
|
||||
export default component
|
||||
}
|
||||
|
||||
interface ImportMetaEnv {
|
||||
readonly VITE_API_BASE_URL: string
|
||||
readonly VITE_APP_TITLE: string
|
||||
}
|
||||
|
||||
interface ImportMeta {
|
||||
readonly env: ImportMetaEnv
|
||||
}
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import { createPinia } from 'pinia'
|
||||
|
||||
// Vant样式
|
||||
import 'vant/lib/index.css'
|
||||
// 触摸模拟器 (开发环境使用)
|
||||
import '@vant/touch-emulator'
|
||||
|
||||
// 全局样式
|
||||
import '@/styles/index.scss'
|
||||
|
||||
const app = createApp(App)
|
||||
|
||||
app.use(createPinia())
|
||||
app.use(router)
|
||||
|
||||
app.mount('#app')
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import type { RouteRecordRaw } from 'vue-router'
|
||||
|
||||
const routes: RouteRecordRaw[] = [
|
||||
{
|
||||
path: '/',
|
||||
redirect: '/list'
|
||||
},
|
||||
{
|
||||
path: '/list',
|
||||
name: 'OrderList',
|
||||
component: () => import('@/views/List/index.vue'),
|
||||
meta: {
|
||||
title: '订单列表'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/detail/:id',
|
||||
name: 'OrderDetail',
|
||||
component: () => import('@/views/Detail/index.vue'),
|
||||
meta: {
|
||||
title: '订单详情'
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(),
|
||||
routes,
|
||||
scrollBehavior() {
|
||||
return { top: 0 }
|
||||
}
|
||||
})
|
||||
|
||||
// 全局路由守卫
|
||||
router.beforeEach((to, from, next) => {
|
||||
// 设置页面标题
|
||||
if (to.meta?.title) {
|
||||
document.title = to.meta.title as string
|
||||
}
|
||||
next()
|
||||
})
|
||||
|
||||
export default router
|
||||
|
|
@ -0,0 +1,159 @@
|
|||
import { defineStore } from 'pinia'
|
||||
import type { Order, OrderDetailResponse, ListParams } from '@/types'
|
||||
import { getOrderList, getOrderDetail } from '@/api/order'
|
||||
|
||||
interface OrderState {
|
||||
// 列表相关
|
||||
orderList: Order[]
|
||||
loading: boolean
|
||||
finished: boolean
|
||||
currentPage: number
|
||||
pageSize: number
|
||||
total: number
|
||||
keyword: string
|
||||
|
||||
// 详情相关
|
||||
currentOrder: any | null // 临时改为any来避免类型问题
|
||||
detailLoading: boolean
|
||||
}
|
||||
|
||||
export const useOrderStore = defineStore('order', {
|
||||
state: (): OrderState => ({
|
||||
orderList: [],
|
||||
loading: false,
|
||||
finished: false,
|
||||
currentPage: 1,
|
||||
pageSize: 20,
|
||||
total: 0,
|
||||
keyword: '',
|
||||
|
||||
currentOrder: null,
|
||||
detailLoading: false
|
||||
}),
|
||||
|
||||
getters: {
|
||||
// 获取当前订单基本信息
|
||||
currentOrderInfo: (state) => state.currentOrder?.projectOrderInfo,
|
||||
|
||||
// 获取审批历史
|
||||
approvalHistory: (state) => state.currentOrder?.approveLog || [],
|
||||
|
||||
// 获取当前用户信息
|
||||
currentUser: (state) => state.currentOrder?.user,
|
||||
|
||||
// 检查是否还有更多数据
|
||||
hasMore: (state) => state.orderList.length < state.total
|
||||
},
|
||||
|
||||
actions: {
|
||||
/**
|
||||
* 加载订单列表
|
||||
*/
|
||||
async loadOrderList(refresh = false) {
|
||||
if (this.loading) return
|
||||
|
||||
if (refresh) {
|
||||
this.currentPage = 1
|
||||
this.finished = false
|
||||
this.orderList = []
|
||||
}
|
||||
|
||||
this.loading = true
|
||||
|
||||
try {
|
||||
const params: ListParams = {
|
||||
approve:'approve',
|
||||
page: this.currentPage,
|
||||
pageSize: this.pageSize,
|
||||
keyword: this.keyword || undefined
|
||||
}
|
||||
|
||||
const response = await getOrderList(params)
|
||||
const { total, rows } = response.data
|
||||
|
||||
if (refresh) {
|
||||
this.orderList = rows
|
||||
} else {
|
||||
this.orderList.push(...rows)
|
||||
}
|
||||
|
||||
this.total = total
|
||||
this.currentPage++
|
||||
|
||||
// 判断是否已加载完所有数据
|
||||
if (this.orderList.length >= total) {
|
||||
this.finished = true
|
||||
}
|
||||
|
||||
return response
|
||||
} catch (error) {
|
||||
console.error('加载订单列表失败:', error)
|
||||
throw error
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 搜索订单
|
||||
*/
|
||||
async searchOrders(keyword: string) {
|
||||
this.keyword = keyword
|
||||
await this.loadOrderList(true)
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取订单详情
|
||||
*/
|
||||
async fetchOrderDetail(id: string | number) {
|
||||
this.detailLoading = true
|
||||
console.log('开始获取订单详情，ID:', id)
|
||||
|
||||
try {
|
||||
const response = await getOrderDetail(id)
|
||||
console.log('API响应:', response)
|
||||
console.log('响应数据:', response.data)
|
||||
console.log('实际数据:', response.data.data)
|
||||
|
||||
// 直接获取数据对象
|
||||
const orderData = response.data.data
|
||||
console.log('订单数据对象:', orderData)
|
||||
|
||||
// 确保数据存在再赋值
|
||||
if (orderData) {
|
||||
this.currentOrder = orderData
|
||||
console.log('赋值后的存储数据:', this.currentOrder)
|
||||
console.log('项目订单信息:', this.currentOrder.projectOrderInfo)
|
||||
} else {
|
||||
console.error('订单数据为空')
|
||||
}
|
||||
|
||||
return response
|
||||
} catch (error) {
|
||||
console.error('获取订单详情失败:', error)
|
||||
throw error
|
||||
} finally {
|
||||
this.detailLoading = false
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 清空当前订单详情
|
||||
*/
|
||||
clearCurrentOrder() {
|
||||
this.currentOrder = null
|
||||
},
|
||||
|
||||
/**
|
||||
* 重置列表状态
|
||||
*/
|
||||
resetListState() {
|
||||
this.orderList = []
|
||||
this.currentPage = 1
|
||||
this.finished = false
|
||||
this.loading = false
|
||||
this.keyword = ''
|
||||
this.total = 0
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
@ -0,0 +1,294 @@
|
|||
// 全局CSS变量
|
||||
:root {
|
||||
// 主色系
|
||||
--primary-color: #1890ff;
|
||||
--primary-color-dark: #096dd9;
|
||||
--primary-color-light: #e6f7ff;
|
||||
|
||||
// 功能色系
|
||||
--success-color: #52c41a;
|
||||
--warning-color: #faad14;
|
||||
--error-color: #f5222d;
|
||||
--info-color: #1890ff;
|
||||
|
||||
// 中性色系
|
||||
--text-color-primary: #333333;
|
||||
--text-color-secondary: #666666;
|
||||
--text-color-tertiary: #999999;
|
||||
--text-color-disabled: #cccccc;
|
||||
|
||||
--background-color-primary: #ffffff;
|
||||
--background-color-secondary: #f5f5f5;
|
||||
--background-color-tertiary: #fafafa;
|
||||
|
||||
--border-color: #d9d9d9;
|
||||
--divider-color: #f0f0f0;
|
||||
|
||||
// 间距
|
||||
--spacing-xs: 4px;
|
||||
--spacing-sm: 8px;
|
||||
--spacing-md: 12px;
|
||||
--spacing-lg: 16px;
|
||||
--spacing-xl: 20px;
|
||||
--spacing-xxl: 24px;
|
||||
|
||||
// 圆角
|
||||
--border-radius-sm: 4px;
|
||||
--border-radius-md: 8px;
|
||||
--border-radius-lg: 12px;
|
||||
|
||||
// 阴影
|
||||
--shadow-light: 0 1px 3px rgba(0, 0, 0, 0.12);
|
||||
--shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
--shadow-heavy: 0 8px 24px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
// 重置样式
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
color: var(--text-color-primary);
|
||||
background-color: var(--background-color-secondary);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
// 滚动条样式
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--background-color-secondary);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--border-color);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--text-color-tertiary);
|
||||
}
|
||||
|
||||
// 通用工具类
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.text-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.flex-center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.flex-between {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.flex-column {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.flex-1 {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.overflow-hidden {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.text-ellipsis {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.text-primary {
|
||||
color: var(--primary-color) !important;
|
||||
}
|
||||
|
||||
.text-success {
|
||||
color: var(--success-color) !important;
|
||||
}
|
||||
|
||||
.text-warning {
|
||||
color: var(--warning-color) !important;
|
||||
}
|
||||
|
||||
.text-error {
|
||||
color: var(--error-color) !important;
|
||||
}
|
||||
|
||||
.text-secondary {
|
||||
color: var(--text-color-secondary) !important;
|
||||
}
|
||||
|
||||
.text-tertiary {
|
||||
color: var(--text-color-tertiary) !important;
|
||||
}
|
||||
|
||||
// 自定义状态标签样式
|
||||
.status-tag {
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
font-size: 12px;
|
||||
border-radius: var(--border-radius-sm);
|
||||
font-weight: 500;
|
||||
|
||||
&.pending {
|
||||
background-color: #fff7e6;
|
||||
color: var(--warning-color);
|
||||
border: 1px solid #ffd591;
|
||||
}
|
||||
|
||||
&.approved {
|
||||
background-color: #f6ffed;
|
||||
color: var(--success-color);
|
||||
border: 1px solid #b7eb8f;
|
||||
}
|
||||
|
||||
&.rejected {
|
||||
background-color: #fff2f0;
|
||||
color: var(--error-color);
|
||||
border: 1px solid #ffb3b3;
|
||||
}
|
||||
}
|
||||
|
||||
// 页面容器
|
||||
.page-container {
|
||||
min-height: 100vh;
|
||||
background-color: var(--background-color-secondary);
|
||||
}
|
||||
|
||||
.page-content {
|
||||
padding: var(--spacing-lg);
|
||||
}
|
||||
|
||||
// 卡片样式
|
||||
.card {
|
||||
background: var(--background-color-primary);
|
||||
border-radius: var(--border-radius-md);
|
||||
box-shadow: var(--shadow-light);
|
||||
margin-bottom: var(--spacing-lg);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
padding: var(--spacing-lg);
|
||||
border-bottom: 1px solid var(--divider-color);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: var(--spacing-lg);
|
||||
}
|
||||
|
||||
// 列表项样式
|
||||
.list-item {
|
||||
padding: var(--spacing-lg);
|
||||
background: var(--background-color-primary);
|
||||
border-bottom: 1px solid var(--divider-color);
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: var(--background-color-tertiary);
|
||||
}
|
||||
}
|
||||
|
||||
// 空状态样式
|
||||
.empty-state {
|
||||
padding: 60px var(--spacing-lg);
|
||||
text-align: center;
|
||||
color: var(--text-color-tertiary);
|
||||
|
||||
.empty-icon {
|
||||
font-size: 64px;
|
||||
color: var(--text-color-disabled);
|
||||
margin-bottom: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 16px;
|
||||
margin-bottom: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.empty-desc {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
// 加载状态样式
|
||||
.loading-container {
|
||||
padding: var(--spacing-xl);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// Vant组件自定义样式
|
||||
.van-nav-bar {
|
||||
background: var(--background-color-primary);
|
||||
|
||||
.van-nav-bar__title {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.van-search {
|
||||
padding: var(--spacing-lg) var(--spacing-lg) 0;
|
||||
background: transparent;
|
||||
|
||||
.van-search__content {
|
||||
background: var(--background-color-primary);
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
}
|
||||
|
||||
.van-pull-refresh {
|
||||
background: var(--background-color-secondary);
|
||||
}
|
||||
|
||||
.van-list {
|
||||
background: var(--background-color-secondary);
|
||||
}
|
||||
|
||||
// 响应式适配
|
||||
@media (max-width: 375px) {
|
||||
.page-content {
|
||||
padding: var(--spacing-md);
|
||||
}
|
||||
|
||||
.card-header,
|
||||
.card-body {
|
||||
padding: var(--spacing-md);
|
||||
}
|
||||
|
||||
.list-item {
|
||||
padding: var(--spacing-md);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,190 @@
|
|||
// 通用API响应类型
|
||||
export interface ApiResponse<T = any> {
|
||||
code: number
|
||||
msg: string | null
|
||||
data: T
|
||||
total?: number
|
||||
}
|
||||
|
||||
// 订单状态类型
|
||||
export type OrderStatus = '0' | '1' | '2' // 待审批、已审批、已拒绝
|
||||
|
||||
// 审批状态类型
|
||||
export type ApprovalStatus = 1 | 2 | 3 // 待审批、驳回、通过
|
||||
|
||||
// 订单信息类型
|
||||
export interface Order {
|
||||
id: number
|
||||
projectId: number
|
||||
projectCode: string
|
||||
projectName: string
|
||||
versionCode: string
|
||||
industryType: string
|
||||
bgProperty: string
|
||||
province: string
|
||||
orderCode: string
|
||||
customerName: string
|
||||
customerCode: string
|
||||
customerPhone: string
|
||||
customerUserName: string
|
||||
shipmentAmount: number
|
||||
orderStatus: OrderStatus
|
||||
duty: string
|
||||
dutyName: string
|
||||
agentName: string
|
||||
agentCode: string
|
||||
businessPerson: string
|
||||
businessEmail: string
|
||||
businessPhone: string
|
||||
currencyType: string
|
||||
partnerCode: string
|
||||
partnerName: string
|
||||
projectPartnerName: string
|
||||
actualPurchaseAmount: number
|
||||
deliveryTime: string
|
||||
estimatedOrderTime: string
|
||||
orderEndTime: string
|
||||
approveTime: string
|
||||
discountFold: number
|
||||
supplier: string
|
||||
createTime: string
|
||||
updateTime: string
|
||||
remark: string
|
||||
}
|
||||
|
||||
// 审批记录类型
|
||||
export interface ApprovalRecord {
|
||||
id?: number
|
||||
todoId: string
|
||||
businessKey: string
|
||||
processKey: string
|
||||
processName: string
|
||||
taskName: string
|
||||
approveUserName: string
|
||||
allApproveUserName: string
|
||||
nextAllApproveUserName: string
|
||||
approveUser: string
|
||||
applyUserName: string
|
||||
applyTime: string
|
||||
extendField1: string
|
||||
extendField2?: string
|
||||
taskId: string
|
||||
processInstanceId: string
|
||||
approveOpinion?: string
|
||||
approveStatus?: ApprovalStatus
|
||||
approveTime: string
|
||||
formKey?: string
|
||||
roleName: string
|
||||
recoveryType?: number
|
||||
variables?: any
|
||||
}
|
||||
|
||||
// 附件文件类型
|
||||
export interface AttachmentFile {
|
||||
id: number
|
||||
orderId: number
|
||||
fileName: string
|
||||
uploadUser: string
|
||||
uploadUserName: string
|
||||
uploadTime: string
|
||||
filePath: string
|
||||
fileType: string
|
||||
fileSort: string
|
||||
fileVersionCode: string
|
||||
}
|
||||
|
||||
// 产品信息类型
|
||||
export interface ProductInfo {
|
||||
id: number
|
||||
projectId: number
|
||||
productBomCode: string
|
||||
productName: string
|
||||
model: string
|
||||
productCode?: string
|
||||
productDesc: string
|
||||
quantity: number
|
||||
cataloguePrice: number
|
||||
catalogueAllPrice: number
|
||||
price: number
|
||||
allPrice: number
|
||||
allPriceDisCount?: number
|
||||
guidanceDiscount: number
|
||||
vendorCode?: string
|
||||
discount: number
|
||||
type: string
|
||||
value?: string
|
||||
remark: string
|
||||
}
|
||||
|
||||
// 用户信息类型
|
||||
export interface UserInfo {
|
||||
userId: number
|
||||
userName: string
|
||||
loginName: string
|
||||
userType: string
|
||||
email: string
|
||||
phonenumber: string
|
||||
sex: string
|
||||
avatar: string
|
||||
status: string
|
||||
delFlag: string
|
||||
loginIp: string
|
||||
loginDate: string
|
||||
pwdUpdateDate: string
|
||||
admin: boolean
|
||||
}
|
||||
|
||||
// 订单详情响应类型
|
||||
export interface OrderDetailResponse {
|
||||
todo?: any
|
||||
approveLog: ApprovalRecord[]
|
||||
projectOrderInfo: Order & {
|
||||
contractFileList: AttachmentFile[]
|
||||
configFileList?: AttachmentFile[]
|
||||
contractTableData: Record<string, AttachmentFile[]>
|
||||
softwareProjectProductInfoList: ProductInfo[]
|
||||
hardwareProjectProductInfoList: ProductInfo[]
|
||||
maintenanceProjectProductInfoList: ProductInfo[]
|
||||
}
|
||||
user: UserInfo
|
||||
}
|
||||
|
||||
// 列表查询参数
|
||||
export interface ListParams {
|
||||
approve?: string
|
||||
page: number
|
||||
pageSize: number
|
||||
keyword?: string
|
||||
}
|
||||
|
||||
// 审批操作参数
|
||||
export interface ApprovalParams {
|
||||
allApproveUserName?: string
|
||||
applyTime?: string
|
||||
applyUserName?: string
|
||||
approveOpinion?: string
|
||||
approveStatus?: ApprovalStatus
|
||||
approveTime?: string
|
||||
approveUser?: string
|
||||
approveUserName?: string
|
||||
businessKey?: string
|
||||
createBy?: string
|
||||
createTime?: string
|
||||
extendField1?: string
|
||||
extendField2?: string
|
||||
formKey?: string
|
||||
id?: number
|
||||
nextAllApproveUserName?: string
|
||||
processInstanceId?: string
|
||||
processKey?: string
|
||||
processName?: string
|
||||
recoveryType?: number
|
||||
remark?: string
|
||||
roleName?: string
|
||||
taskId?: string
|
||||
taskName?: string
|
||||
todoId?: string
|
||||
updateBy?: string
|
||||
updateTime?: string
|
||||
[property: string]: any
|
||||
}
|
||||
|
|
@ -0,0 +1,113 @@
|
|||
import axios from 'axios'
|
||||
import type { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios'
|
||||
import type { ApiResponse } from '@/types'
|
||||
import { showToast, showFailToast } from 'vant'
|
||||
|
||||
class HttpClient {
|
||||
private instance: AxiosInstance
|
||||
|
||||
constructor(baseURL: string = '/api') {
|
||||
this.instance = axios.create({
|
||||
baseURL,
|
||||
timeout: 30000,
|
||||
headers: {
|
||||
'Content-Type': 'application/json;charset=UTF-8'
|
||||
}
|
||||
})
|
||||
|
||||
this.setupInterceptors()
|
||||
}
|
||||
|
||||
private setupInterceptors(): void {
|
||||
// 请求拦截器
|
||||
this.instance.interceptors.request.use(
|
||||
(config) => {
|
||||
// 在这里可以添加token等认证信息
|
||||
const token = localStorage.getItem('token')
|
||||
if (token) {
|
||||
config.headers.Authorization = `Bearer ${token}`
|
||||
}
|
||||
|
||||
// 如果数据是FormData，删除Content-Type让浏览器自动设置
|
||||
if (config.data instanceof FormData) {
|
||||
delete config.headers['Content-Type']
|
||||
}
|
||||
|
||||
return config
|
||||
},
|
||||
(error) => {
|
||||
return Promise.reject(error)
|
||||
}
|
||||
)
|
||||
|
||||
// 响应拦截器
|
||||
this.instance.interceptors.response.use(
|
||||
(response: AxiosResponse) => {
|
||||
// 直接返回完整响应对象
|
||||
return response
|
||||
},
|
||||
(error) => {
|
||||
let message = '网络错误'
|
||||
|
||||
if (error.response) {
|
||||
const { status, data } = error.response
|
||||
switch (status) {
|
||||
case 401:
|
||||
message = '未授权，请重新登录'
|
||||
// 这里可以处理登录跳转逻辑
|
||||
break
|
||||
case 403:
|
||||
message = '拒绝访问'
|
||||
break
|
||||
case 404:
|
||||
message = '请求地址不存在'
|
||||
break
|
||||
case 500:
|
||||
message = '服务器内部错误'
|
||||
break
|
||||
default:
|
||||
message = data?.msg || `请求失败 (${status})`
|
||||
}
|
||||
} else if (error.request) {
|
||||
message = '网络连接失败'
|
||||
}
|
||||
|
||||
showFailToast(message)
|
||||
return Promise.reject(error)
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
public async get<T = any>(
|
||||
url: string,
|
||||
config?: AxiosRequestConfig
|
||||
): Promise<ApiResponse<T>> {
|
||||
return this.instance.get(url, config)
|
||||
}
|
||||
|
||||
public async post<T = any>(
|
||||
url: string,
|
||||
data?: any,
|
||||
config?: AxiosRequestConfig
|
||||
): Promise<ApiResponse<T>> {
|
||||
return this.instance.post(url, data, config)
|
||||
}
|
||||
|
||||
public async put<T = any>(
|
||||
url: string,
|
||||
data?: any,
|
||||
config?: AxiosRequestConfig
|
||||
): Promise<ApiResponse<T>> {
|
||||
return this.instance.put(url, data, config)
|
||||
}
|
||||
|
||||
public async delete<T = any>(
|
||||
url: string,
|
||||
config?: AxiosRequestConfig
|
||||
): Promise<ApiResponse<T>> {
|
||||
return this.instance.delete(url, config)
|
||||
}
|
||||
}
|
||||
|
||||
export const http = new HttpClient()
|
||||
export default http
|
||||
|
|
@ -0,0 +1,211 @@
|
|||
import type { OrderStatus, ApprovalStatus } from '@/types'
|
||||
|
||||
/**
|
||||
* 格式化订单状态
|
||||
*/
|
||||
export const formatOrderStatus = (status: OrderStatus): string => {
|
||||
const statusMap = {
|
||||
'0': '待审批',
|
||||
'1': '已审批',
|
||||
'2': '已拒绝'
|
||||
}
|
||||
return statusMap[status] || '未知状态'
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取订单状态颜色
|
||||
*/
|
||||
export const getOrderStatusColor = (status: OrderStatus): string => {
|
||||
const colorMap = {
|
||||
'0': '#fa8c16', // 橙色 - 待审批
|
||||
'1': '#52c41a', // 绿色 - 已审批
|
||||
'2': '#f5222d' // 红色 - 已拒绝
|
||||
}
|
||||
return colorMap[status] || '#666666'
|
||||
}
|
||||
|
||||
/**
|
||||
* 格式化审批状态
|
||||
*/
|
||||
export const formatApprovalStatus = (status?: ApprovalStatus): string => {
|
||||
if (status === undefined || status === null) return '待审批'
|
||||
|
||||
const statusMap = {
|
||||
1: '待审批',
|
||||
2: '已驳回',
|
||||
3: '已通过'
|
||||
}
|
||||
return statusMap[status] || '待审批'
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取审批状态颜色
|
||||
*/
|
||||
export const getApprovalStatusColor = (status?: ApprovalStatus): string => {
|
||||
if (status === undefined || status === null) return '#fa8c16'
|
||||
|
||||
const colorMap = {
|
||||
1: '#fa8c16', // 橙色 - 待审批
|
||||
2: '#f5222d', // 红色 - 已驳回
|
||||
3: '#52c41a' // 绿色 - 已通过
|
||||
}
|
||||
return colorMap[status] || '#fa8c16'
|
||||
}
|
||||
|
||||
/**
|
||||
* 格式化金额
|
||||
*/
|
||||
export const formatAmount = (amount: number): string => {
|
||||
return new Intl.NumberFormat('zh-CN', {
|
||||
style: 'currency',
|
||||
currency: 'CNY',
|
||||
minimumFractionDigits: 2
|
||||
}).format(amount)
|
||||
}
|
||||
|
||||
/**
|
||||
* 格式化日期
|
||||
*/
|
||||
export const formatDate = (date: string | Date, format: string = 'YYYY-MM-DD'): string => {
|
||||
if (!date) return ''
|
||||
|
||||
const d = new Date(date)
|
||||
if (isNaN(d.getTime())) return ''
|
||||
|
||||
const year = d.getFullYear()
|
||||
const month = String(d.getMonth() + 1).padStart(2, '0')
|
||||
const day = String(d.getDate()).padStart(2, '0')
|
||||
const hours = String(d.getHours()).padStart(2, '0')
|
||||
const minutes = String(d.getMinutes()).padStart(2, '0')
|
||||
const seconds = String(d.getSeconds()).padStart(2, '0')
|
||||
|
||||
return format
|
||||
.replace('YYYY', year.toString())
|
||||
.replace('MM', month)
|
||||
.replace('DD', day)
|
||||
.replace('HH', hours)
|
||||
.replace('mm', minutes)
|
||||
.replace('ss', seconds)
|
||||
}
|
||||
|
||||
/**
|
||||
* 格式化相对时间
|
||||
*/
|
||||
export const formatRelativeTime = (date: string | Date): string => {
|
||||
if (!date) return ''
|
||||
|
||||
const d = new Date(date)
|
||||
if (isNaN(d.getTime())) return ''
|
||||
|
||||
const now = new Date()
|
||||
const diff = now.getTime() - d.getTime()
|
||||
|
||||
const minute = 60 * 1000
|
||||
const hour = 60 * minute
|
||||
const day = 24 * hour
|
||||
|
||||
if (diff < minute) {
|
||||
return '刚刚'
|
||||
} else if (diff < hour) {
|
||||
return `${Math.floor(diff / minute)}分钟前`
|
||||
} else if (diff < day) {
|
||||
return `${Math.floor(diff / hour)}小时前`
|
||||
} else if (diff < 3 * day) {
|
||||
return `${Math.floor(diff / day)}天前`
|
||||
} else {
|
||||
return formatDate(date, 'YYYY-MM-DD')
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 防抖函数
|
||||
*/
|
||||
export const debounce = <T extends (...args: any[]) => any>(
|
||||
func: T,
|
||||
wait: number
|
||||
): ((...args: Parameters<T>) => void) => {
|
||||
let timeout: NodeJS.Timeout | null = null
|
||||
|
||||
return (...args: Parameters<T>) => {
|
||||
if (timeout) clearTimeout(timeout)
|
||||
timeout = setTimeout(() => func(...args), wait)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 节流函数
|
||||
*/
|
||||
export const throttle = <T extends (...args: any[]) => any>(
|
||||
func: T,
|
||||
wait: number
|
||||
): ((...args: Parameters<T>) => void) => {
|
||||
let timeout: NodeJS.Timeout | null = null
|
||||
let previous = 0
|
||||
|
||||
return (...args: Parameters<T>) => {
|
||||
const now = Date.now()
|
||||
const remaining = wait - (now - previous)
|
||||
|
||||
if (remaining <= 0 || remaining > wait) {
|
||||
if (timeout) {
|
||||
clearTimeout(timeout)
|
||||
timeout = null
|
||||
}
|
||||
previous = now
|
||||
func(...args)
|
||||
} else if (!timeout) {
|
||||
timeout = setTimeout(() => {
|
||||
previous = Date.now()
|
||||
timeout = null
|
||||
func(...args)
|
||||
}, remaining)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 检查是否在微信小程序环境
|
||||
*/
|
||||
export const isWeixinMiniProgram = (): boolean => {
|
||||
return (window as any).__wxjs_environment === 'miniprogram'
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取文件预览URL
|
||||
*/
|
||||
export const getFilePreviewUrl = (filePath: string): string => {
|
||||
if (!filePath) return ''
|
||||
|
||||
// 如果已经是完整URL，直接返回
|
||||
if (filePath.startsWith('http')) {
|
||||
return filePath
|
||||
}
|
||||
|
||||
// 拼接基础URL
|
||||
const baseUrl = import.meta.env.VITE_FILE_BASE_URL || '/api'
|
||||
return `${baseUrl}${filePath}`
|
||||
}
|
||||
|
||||
/**
|
||||
* 复制到剪贴板
|
||||
*/
|
||||
export const copyToClipboard = async (text: string): Promise<boolean> => {
|
||||
try {
|
||||
if (navigator.clipboard) {
|
||||
await navigator.clipboard.writeText(text)
|
||||
return true
|
||||
} else {
|
||||
// 降级方案
|
||||
const textarea = document.createElement('textarea')
|
||||
textarea.value = text
|
||||
document.body.appendChild(textarea)
|
||||
textarea.select()
|
||||
document.execCommand('copy')
|
||||
document.body.removeChild(textarea)
|
||||
return true
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('复制失败:', error)
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,999 @@
|
|||
<template>
|
||||
<div class="order-detail-page">
|
||||
<!-- 导航栏 -->
|
||||
<van-nav-bar
|
||||
title="订单详情"
|
||||
left-arrow
|
||||
@click-left="goBack"
|
||||
/>
|
||||
|
||||
<van-loading v-if="detailLoading" class="loading-container" size="24px">
|
||||
加载中...
|
||||
</van-loading>
|
||||
|
||||
<div v-else-if="currentOrderInfo" class="page-content">
|
||||
<!-- 项目信息标题 -->
|
||||
<div class="project-header">
|
||||
<div class="project-title">
|
||||
{{ currentOrderInfo.projectName }}REV.{{ currentOrderInfo.versionCode }}
|
||||
</div>
|
||||
<div class="project-status">
|
||||
待审批
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab标签页 -->
|
||||
<van-tabs v-model:active="activeTab" sticky>
|
||||
<!-- 订单信息 -->
|
||||
<van-tab title="订单信息" name="order">
|
||||
<div class="tab-content">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<span>基本信息</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="info-grid">
|
||||
<div class="info-item">
|
||||
<span class="label">项目名称</span>
|
||||
<span class="value">{{ currentOrderInfo.projectName || '' }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">版本号</span>
|
||||
<span class="value">{{ currentOrderInfo.versionCode || '' }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">项目编号</span>
|
||||
<span class="value">{{ currentOrderInfo.projectCode || '' }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">最终客户</span>
|
||||
<span class="value">{{ currentOrderInfo.customerName || '' }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">BG</span>
|
||||
<span class="value">{{ currentOrderInfo.bgProperty || '' }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">行业</span>
|
||||
<span class="value">{{ currentOrderInfo.industryType || '' }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">代表处</span>
|
||||
<span class="value">{{ currentOrderInfo.agentName || '' }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">进货商接口人</span>
|
||||
<span class="value">{{ currentOrderInfo.businessPerson || '' }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">Email</span>
|
||||
<span class="value">{{ currentOrderInfo.businessEmail || '' }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">联系方式</span>
|
||||
<span class="value">{{ currentOrderInfo.businessPhone || '' }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">合同编号</span>
|
||||
<span class="value">{{ currentOrderInfo.orderCode || '' }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">执行单有效截止时间</span>
|
||||
<span class="value">{{ currentOrderInfo.orderEndTime? formatDate(currentOrderInfo.orderEndTime, 'YYYY-MM-DD') : '' }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">币种</span>
|
||||
<span class="value">{{ currentOrderInfo.currencyType || '' }}</span>
|
||||
</div>
|
||||
|
||||
<div class="info-item">
|
||||
<span class="label">总代进货金额</span>
|
||||
<span class="value">{{ currentOrderInfo.actualPurchaseAmount ? formatAmount(currentOrderInfo.actualPurchaseAmount) : '' }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">总代出货金额</span>
|
||||
<span class="value">{{ currentOrderInfo.shipmentAmount ? formatAmount(currentOrderInfo.shipmentAmount) : '' }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">要求到货时间</span>
|
||||
<span class="value">{{ currentOrderInfo.deliveryTime ? formatDate(currentOrderInfo.deliveryTime) : '' }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">公司直发</span>
|
||||
<span class="value">{{ currentOrderInfo.companyDelivery}}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">下单通路</span>
|
||||
<span class="value">{{ currentOrderInfo.orderChannel}}</span>
|
||||
</div><div class="info-item">
|
||||
<span class="label">供货商</span>
|
||||
<span class="value">{{ currentOrderInfo.supplier}}</span>
|
||||
</div><div class="info-item">
|
||||
<span class="label">进货商</span>
|
||||
<span class="value">{{ currentOrderInfo.partnerName}}</span>
|
||||
</div><div class="info-item">
|
||||
<span class="label">进货商类型</span>
|
||||
<span class="value">{{ currentOrderInfo.level}}</span>
|
||||
</div><div class="info-item">
|
||||
<span class="label">进货商联系人</span>
|
||||
<span class="value">{{ currentOrderInfo.partnerUserName}}</span>
|
||||
</div><div class="info-item">
|
||||
<span class="label">Email</span>
|
||||
<span class="value">{{ currentOrderInfo.partnerEmail}}</span>
|
||||
</div><div class="info-item">
|
||||
<span class="label">联系方式</span>
|
||||
<span class="value">{{ currentOrderInfo.partnerPhone}}</span>
|
||||
</div><div class="info-item">
|
||||
<span class="label">收货地址</span>
|
||||
<span class="value">{{ currentOrderInfo.notifierAddress}}</span>
|
||||
</div><div class="info-item">
|
||||
<span class="label">收货人</span>
|
||||
<span class="value">{{ currentOrderInfo.notifier}}</span>
|
||||
</div><div class="info-item">
|
||||
<span class="label">Email</span>
|
||||
<span class="value">{{ currentOrderInfo.notifierEmail}}</span>
|
||||
</div><div class="info-item">
|
||||
<span class="label">联系方式</span>
|
||||
<span class="value">{{ currentOrderInfo.notifierPhone}}</span>
|
||||
</div><div class="info-item">
|
||||
<span class="label">其他特别说明</span>
|
||||
<span class="value">{{ currentOrderInfo.remark}}</span>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</van-tab>
|
||||
|
||||
<!-- 产品信息 -->
|
||||
<van-tab title="产品信息" name="product">
|
||||
<div class="tab-content">
|
||||
<div v-if="hasProductInfo">
|
||||
<!-- 软件产品 -->
|
||||
<div v-if="currentOrderInfo.softwareProjectProductInfoList?.length">
|
||||
<div v-for="(product, index) in currentOrderInfo.softwareProjectProductInfoList" :key="product.id" class="product-card">
|
||||
<div class="product-header">
|
||||
<span class="product-index">{{ index + 1 }}</span>
|
||||
<div class="product-main-info">
|
||||
<div class="product-code-price">
|
||||
<span class="product-code">{{ product.productBomCode }}</span>
|
||||
<span class="product-total-price">{{ formatAmount(product.allPrice) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-details">
|
||||
<div class="product-row">
|
||||
<span class="product-label">产品型号</span>
|
||||
<span class="product-value">{{ product.model }}</span>
|
||||
</div>
|
||||
<div class="product-row">
|
||||
<span class="product-label">描述</span>
|
||||
<span class="product-value">{{ product.productDesc }}</span>
|
||||
</div>
|
||||
<div class="product-row">
|
||||
<span class="product-label">数量</span>
|
||||
<span class="product-value">{{ product.quantity }}</span>
|
||||
</div>
|
||||
<div class="product-row">
|
||||
<span class="product-label">单价</span>
|
||||
<span class="product-value">{{ formatAmount(product.price) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 硬件产品 -->
|
||||
<div v-if="currentOrderInfo.hardwareProjectProductInfoList?.length">
|
||||
<div v-for="(product, index) in currentOrderInfo.hardwareProjectProductInfoList" :key="product.id" class="product-card">
|
||||
<div class="product-header">
|
||||
<span class="product-index">{{ index + 1 + (currentOrderInfo.softwareProjectProductInfoList?.length || 0) }}</span>
|
||||
<div class="product-main-info">
|
||||
<div class="product-code-price">
|
||||
<span class="product-code">{{ product.productBomCode }}</span>
|
||||
<span class="product-total-price">{{ formatAmount(product.allPrice) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-details">
|
||||
<div class="product-row">
|
||||
<span class="product-label">产品型号</span>
|
||||
<span class="product-value">{{ product.model }}</span>
|
||||
</div>
|
||||
<div class="product-row">
|
||||
<span class="product-label">描述</span>
|
||||
<span class="product-value">{{ product.productDesc }}</span>
|
||||
</div>
|
||||
<div class="product-row">
|
||||
<span class="product-label">数量</span>
|
||||
<span class="product-value">{{ product.quantity }}</span>
|
||||
</div>
|
||||
<div class="product-row">
|
||||
<span class="product-label">单价</span>
|
||||
<span class="product-value">{{ formatAmount(product.price) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 维保产品 -->
|
||||
<div v-if="currentOrderInfo.maintenanceProjectProductInfoList?.length">
|
||||
<div v-for="(product, index) in currentOrderInfo.maintenanceProjectProductInfoList" :key="product.id" class="product-card">
|
||||
<div class="product-header">
|
||||
<span class="product-index">{{ index + 1 + (currentOrderInfo.softwareProjectProductInfoList?.length || 0) + (currentOrderInfo.hardwareProjectProductInfoList?.length || 0) }}</span>
|
||||
<div class="product-main-info">
|
||||
<div class="product-code-price">
|
||||
<span class="product-code">{{ product.productBomCode }}</span>
|
||||
<span class="product-total-price">{{ formatAmount(product.allPrice) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-details">
|
||||
<div class="product-row">
|
||||
<span class="product-label">产品型号</span>
|
||||
<span class="product-value">{{ product.model }}</span>
|
||||
</div>
|
||||
<div class="product-row">
|
||||
<span class="product-label">描述</span>
|
||||
<span class="product-value">{{ product.productDesc }}</span>
|
||||
</div>
|
||||
<div class="product-row">
|
||||
<span class="product-label">数量</span>
|
||||
<span class="product-value">{{ product.quantity }}</span>
|
||||
</div>
|
||||
<div class="product-row">
|
||||
<span class="product-label">单价</span>
|
||||
<span class="product-value">{{ formatAmount(product.price) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 配置组总计 -->
|
||||
<div class="product-summary">
|
||||
<div class="summary-row">
|
||||
<span class="summary-label">配置组总计</span>
|
||||
<span class="summary-value">{{ getTotalProductCount() }}</span>
|
||||
</div>
|
||||
<div class="summary-row">
|
||||
<span class="summary-label">总价</span>
|
||||
<span class="summary-value total-amount">{{ formatAmount(getTotalAmount()) }}</span>
|
||||
</div>
|
||||
<div class="summary-row">
|
||||
<span class="summary-label">现金折扣率</span>
|
||||
<span class="summary-value">{{ getDiscountRate() }}</span>
|
||||
</div>
|
||||
<div class="summary-row final-total">
|
||||
<span class="summary-label">折后总价</span>
|
||||
<span class="summary-value final-amount">{{ formatAmount(getFinalTotalAmount()) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 无产品信息时的提示 -->
|
||||
<div v-else class="empty-state">
|
||||
<van-empty description="暂无产品信息"/>
|
||||
</div>
|
||||
</div>
|
||||
</van-tab>
|
||||
|
||||
<!-- 合同附件 -->
|
||||
<van-tab title="合同附件" name="attachment">
|
||||
<div class="tab-content">
|
||||
<div class="card" v-if="currentOrderInfo.contractFileList?.length">
|
||||
<div class="card-body">
|
||||
<div class="file-list">
|
||||
<div v-for="file in currentOrderInfo.contractFileList" :key="file.id" class="file-item"
|
||||
@click="previewFile(file)">
|
||||
<van-icon name="description"/>
|
||||
<div class="file-info">
|
||||
<div class="file-name">{{ file.fileName }}</div>
|
||||
<div class="file-meta">{{ file.uploadUserName }} · {{ formatDate(file.uploadTime) }}</div>
|
||||
</div>
|
||||
<van-icon name="arrow"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 无附件时的提示 -->
|
||||
<div v-else class="empty-state">
|
||||
<van-empty description="暂无合同附件"/>
|
||||
</div>
|
||||
</div>
|
||||
</van-tab>
|
||||
|
||||
<!-- 审批历史 -->
|
||||
<van-tab title="审批历史" name="approval">
|
||||
<div class="tab-content">
|
||||
<div class="card" v-if="approvalHistory.length">
|
||||
<div class="card-body">
|
||||
<van-steps direction="vertical" :active="approvalHistory.length">
|
||||
<van-step v-for="(record, index) in approvalHistory" :key="record.todoId || index">
|
||||
<template #inactive-icon>
|
||||
<van-icon
|
||||
:name="getStepIcon(record.approveStatus)"
|
||||
:color="getApprovalStatusColor(record.approveStatus)"
|
||||
/>
|
||||
</template>
|
||||
<template #active-icon>
|
||||
<van-icon
|
||||
:name="getStepIcon(record.approveStatus)"
|
||||
:color="getApprovalStatusColor(record.approveStatus)"
|
||||
/>
|
||||
</template>
|
||||
<div class="approval-item">
|
||||
<div class="approval-user">提交人：{{ record.approveUserName }}</div>
|
||||
<div v-if="record.nextAllApproveUserName" class="approval-next-user">
|
||||
接受人：{{ record.nextAllApproveUserName }}
|
||||
</div>
|
||||
<div class="approval-time">{{ formatDate(record.approveTime, 'YYYY-MM-DD HH:mm') }}</div>
|
||||
<div v-if="record.approveOpinion" class="approval-opinion">
|
||||
审批意见：{{ record.approveOpinion }}
|
||||
</div>
|
||||
</div>
|
||||
</van-step>
|
||||
</van-steps>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 无审批历史时的提示 -->
|
||||
<div v-else class="empty-state">
|
||||
<van-empty description="暂无审批历史"/>
|
||||
</div>
|
||||
</div>
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
</div>
|
||||
|
||||
<!-- 审批操作按钮 -->
|
||||
<div v-if="showApprovalButtons" class="approval-actions">
|
||||
<van-button
|
||||
type="default"
|
||||
size="large"
|
||||
@click="showApprovalDialog(0)"
|
||||
:loading="submitting"
|
||||
>
|
||||
驳回
|
||||
</van-button>
|
||||
<van-button
|
||||
type="primary"
|
||||
size="large"
|
||||
@click="showApprovalDialog(1)"
|
||||
:loading="submitting"
|
||||
>
|
||||
通过
|
||||
</van-button>
|
||||
</div>
|
||||
|
||||
<!-- 审批意见弹窗 -->
|
||||
<van-popup
|
||||
v-model:show="approvalDialogVisible"
|
||||
position="bottom"
|
||||
round
|
||||
:style="{ height: '40%' }"
|
||||
>
|
||||
<div class="approval-dialog">
|
||||
<div class="dialog-header">
|
||||
<span>审批意见</span>
|
||||
<van-icon name="cross" @click="approvalDialogVisible = false"/>
|
||||
</div>
|
||||
<div class="dialog-body">
|
||||
<van-field
|
||||
v-model="approvalOpinion"
|
||||
type="textarea"
|
||||
:placeholder="currentApprovalStatus === 0 ? '请输入驳回原因' : '请输入审批意见'"
|
||||
rows="4"
|
||||
autosize
|
||||
maxlength="500"
|
||||
show-word-limit
|
||||
/>
|
||||
</div>
|
||||
<div class="dialog-footer">
|
||||
<van-button
|
||||
type="primary"
|
||||
block
|
||||
@click="submitApproval"
|
||||
:loading="submitting"
|
||||
>
|
||||
确认{{ currentApprovalStatus === 0 ? '驳回' : '通过' }}
|
||||
</van-button>
|
||||
</div>
|
||||
</div>
|
||||
</van-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref, computed, onMounted} from 'vue'
|
||||
import {useRoute, useRouter} from 'vue-router'
|
||||
import {storeToRefs} from 'pinia'
|
||||
import {showToast, showSuccessToast} from 'vant'
|
||||
import {useOrderStore} from '@/store/order'
|
||||
import {submitApproval as submitApprovalApi} from '@/api/order'
|
||||
import {
|
||||
formatOrderStatus,
|
||||
formatAmount,
|
||||
formatDate,
|
||||
formatApprovalStatus,
|
||||
getApprovalStatusColor,
|
||||
getFilePreviewUrl
|
||||
} from '@/utils'
|
||||
import type {OrderStatus, ApprovalStatus, AttachmentFile} from '@/types'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const orderStore = useOrderStore()
|
||||
const {currentOrder, currentOrderInfo, approvalHistory, detailLoading} = storeToRefs(orderStore)
|
||||
|
||||
// 审批相关
|
||||
const approvalDialogVisible = ref(false)
|
||||
const approvalOpinion = ref('')
|
||||
const currentApprovalStatus = ref<ApprovalStatus>(3)
|
||||
const submitting = ref(false)
|
||||
|
||||
// Tab页签
|
||||
const activeTab = ref('order')
|
||||
|
||||
// 计算属性
|
||||
const hasProductInfo = computed(() => {
|
||||
if (!currentOrderInfo.value) return false
|
||||
return (
|
||||
currentOrderInfo.value.softwareProjectProductInfoList?.length ||
|
||||
currentOrderInfo.value.hardwareProjectProductInfoList?.length ||
|
||||
currentOrderInfo.value.maintenanceProjectProductInfoList?.length
|
||||
)
|
||||
})
|
||||
|
||||
const showApprovalButtons = computed(() => {
|
||||
// 直接展示审批按钮，无需条件控制
|
||||
return true
|
||||
})
|
||||
|
||||
// 获取状态样式类
|
||||
const getStatusClass = (status: OrderStatus) => {
|
||||
const classMap = {
|
||||
'0': 'pending',
|
||||
'1': 'approved',
|
||||
'2': 'rejected'
|
||||
}
|
||||
return classMap[status] || 'pending'
|
||||
}
|
||||
|
||||
// 获取步骤图标
|
||||
const getStepIcon = (status?: ApprovalStatus) => {
|
||||
if (status === undefined || status === null) return 'clock'
|
||||
const iconMap = {
|
||||
1: 'clock',
|
||||
2: 'close',
|
||||
3: 'success'
|
||||
}
|
||||
return iconMap[status] || 'clock'
|
||||
}
|
||||
|
||||
// 计算产品总数量
|
||||
const getTotalProductCount = () => {
|
||||
if (!currentOrderInfo.value) return 0
|
||||
|
||||
const softwareCount = currentOrderInfo.value.softwareProjectProductInfoList?.length || 0
|
||||
const hardwareCount = currentOrderInfo.value.hardwareProjectProductInfoList?.length || 0
|
||||
const maintenanceCount = currentOrderInfo.value.maintenanceProjectProductInfoList?.length || 0
|
||||
|
||||
return softwareCount + hardwareCount + maintenanceCount
|
||||
}
|
||||
|
||||
// 计算总金额
|
||||
const getTotalAmount = () => {
|
||||
if (!currentOrderInfo.value) return 0
|
||||
|
||||
let total = 0
|
||||
|
||||
// 软件产品总金额
|
||||
if (currentOrderInfo.value.softwareProjectProductInfoList) {
|
||||
total += currentOrderInfo.value.softwareProjectProductInfoList.reduce((sum, product) => sum + (product.allPrice || 0), 0)
|
||||
}
|
||||
|
||||
// 硬件产品总金额
|
||||
if (currentOrderInfo.value.hardwareProjectProductInfoList) {
|
||||
total += currentOrderInfo.value.hardwareProjectProductInfoList.reduce((sum, product) => sum + (product.allPrice || 0), 0)
|
||||
}
|
||||
|
||||
// 维保产品总金额
|
||||
if (currentOrderInfo.value.maintenanceProjectProductInfoList) {
|
||||
total += currentOrderInfo.value.maintenanceProjectProductInfoList.reduce((sum, product) => sum + (product.allPrice || 0), 0)
|
||||
}
|
||||
|
||||
return total
|
||||
}
|
||||
|
||||
// 获取现金折扣率
|
||||
const getDiscountRate = () => {
|
||||
if (!currentOrderInfo.value || !currentOrderInfo.value.discountFold) {
|
||||
return '100%'
|
||||
}
|
||||
return (currentOrderInfo.value.discountFold * 100).toFixed(1) + '%'
|
||||
}
|
||||
|
||||
// 计算折后总价
|
||||
const getFinalTotalAmount = () => {
|
||||
const totalAmount = getTotalAmount()
|
||||
const discount = currentOrderInfo.value?.discountFold || 1
|
||||
return totalAmount * discount
|
||||
}
|
||||
|
||||
// 返回上一页
|
||||
const goBack = () => {
|
||||
router.back()
|
||||
}
|
||||
|
||||
// 预览文件
|
||||
const previewFile = (file: AttachmentFile) => {
|
||||
if (!file.filePath) {
|
||||
showToast('文件路径不存在')
|
||||
return
|
||||
}
|
||||
|
||||
const url = getFilePreviewUrl(file.filePath)
|
||||
window.open(url, '_blank')
|
||||
}
|
||||
|
||||
// 显示审批弹窗
|
||||
const showApprovalDialog = (status: ApprovalStatus) => {
|
||||
currentApprovalStatus.value = status
|
||||
approvalOpinion.value = ''
|
||||
approvalDialogVisible.value = true
|
||||
}
|
||||
|
||||
// 提交审批
|
||||
const submitApproval = async () => {
|
||||
if (!currentOrder.value || !currentOrder.value.todo) {
|
||||
showToast('审批信息不完整')
|
||||
return
|
||||
}
|
||||
|
||||
const opinion = approvalOpinion.value.trim()
|
||||
if (currentApprovalStatus.value === 0 && !opinion) {
|
||||
showToast('请输入驳回原因')
|
||||
return
|
||||
}
|
||||
|
||||
submitting.value = true
|
||||
|
||||
try {
|
||||
|
||||
const params = {
|
||||
...currentOrder.value.todo, // 展开todo中的所有参数
|
||||
|
||||
approveOpinion: opinion || undefined , // 添加审批意见
|
||||
variables:{
|
||||
approveBtn:currentApprovalStatus.value,
|
||||
comment:opinion
|
||||
}
|
||||
}
|
||||
|
||||
console.log('提交审批参数:', params)
|
||||
|
||||
await submitApprovalApi(params)
|
||||
|
||||
showSuccessToast(currentApprovalStatus.value === 0 ? '驳回成功' : '审批通过')
|
||||
approvalDialogVisible.value = false
|
||||
|
||||
// 重新加载详情
|
||||
await orderStore.fetchOrderDetail(route.params.id as string)
|
||||
} catch (error) {
|
||||
console.error('提交审批失败:', error)
|
||||
showToast('提交审批失败')
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
const id = route.params.id as string
|
||||
if (id) {
|
||||
console.log('详情页面加载，订单ID:', id)
|
||||
try {
|
||||
const result = await orderStore.fetchOrderDetail(id)
|
||||
console.log('获取订单详情结果:', result)
|
||||
console.log('当前订单信息:', currentOrder.value)
|
||||
console.log('当前订单基本信息:', currentOrderInfo.value)
|
||||
} catch (error) {
|
||||
console.error('获取订单详情失败:', error)
|
||||
showToast('获取订单详情失败')
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.order-detail-page {
|
||||
min-height: 100vh;
|
||||
background-color: var(--background-color-secondary);
|
||||
padding-bottom: 80px; // 为底部按钮留出空间
|
||||
}
|
||||
|
||||
.page-content {
|
||||
// 移除原来的padding，让tabs组件自己控制间距
|
||||
}
|
||||
|
||||
.project-header {
|
||||
background: var(--background-color-primary);
|
||||
padding: var(--spacing-lg);
|
||||
border-bottom: 1px solid var(--divider-color);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.project-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: var(--text-color-primary);
|
||||
flex: 1;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.project-status {
|
||||
background: #FFF7E6;
|
||||
color: #D48806;
|
||||
padding: 4px 12px;
|
||||
border-radius: var(--border-radius-sm);
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
border: 1px solid #FFD591;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
padding: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.loading-container {
|
||||
padding: 60px var(--spacing-lg);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
padding: 60px var(--spacing-lg);
|
||||
}
|
||||
|
||||
.info-grid {
|
||||
display: grid;
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
|
||||
.label {
|
||||
color: var(--text-color-secondary);
|
||||
font-size: 14px;
|
||||
min-width: 100px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: var(--text-color-primary);
|
||||
font-size: 14px;
|
||||
text-align: right;
|
||||
word-break: break-all;
|
||||
|
||||
&.amount {
|
||||
color: var(--error-color);
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product-section {
|
||||
&:not(:last-child) {
|
||||
margin-bottom: var(--spacing-lg);
|
||||
padding-bottom: var(--spacing-lg);
|
||||
border-bottom: 1px solid var(--divider-color);
|
||||
}
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: var(--text-color-primary);
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.product-item {
|
||||
background: var(--background-color-tertiary);
|
||||
padding: var(--spacing-md);
|
||||
border-radius: var(--border-radius-sm);
|
||||
margin-bottom: var(--spacing-md);
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--text-color-primary);
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.product-desc {
|
||||
font-size: 12px;
|
||||
color: var(--text-color-secondary);
|
||||
margin-bottom: var(--spacing-sm);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.product-info {
|
||||
display: flex;
|
||||
gap: var(--spacing-md);
|
||||
font-size: 12px;
|
||||
color: var(--text-color-tertiary);
|
||||
}
|
||||
}
|
||||
|
||||
.file-list {
|
||||
.file-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: var(--spacing-md);
|
||||
background: var(--background-color-tertiary);
|
||||
border-radius: var(--border-radius-sm);
|
||||
margin-bottom: var(--spacing-sm);
|
||||
cursor: pointer;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: var(--border-color);
|
||||
}
|
||||
|
||||
.van-icon:first-child {
|
||||
color: var(--primary-color);
|
||||
margin-right: var(--spacing-md);
|
||||
}
|
||||
|
||||
.file-info {
|
||||
flex: 1;
|
||||
|
||||
.file-name {
|
||||
font-size: 14px;
|
||||
color: var(--text-color-primary);
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.file-meta {
|
||||
font-size: 12px;
|
||||
color: var(--text-color-tertiary);
|
||||
}
|
||||
}
|
||||
|
||||
.van-icon:last-child {
|
||||
color: var(--text-color-tertiary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.approval-item {
|
||||
.approval-user,
|
||||
.approval-time,
|
||||
.approval-next-user {
|
||||
font-size: 12px;
|
||||
color: var(--text-color-secondary);
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.approval-next-user {
|
||||
color: var(--primary-color);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.approval-opinion {
|
||||
font-size: 12px;
|
||||
color: var(--text-color-primary);
|
||||
background: var(--background-color-tertiary);
|
||||
padding: var(--spacing-sm);
|
||||
border-radius: var(--border-radius-sm);
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
|
||||
.approval-actions {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: var(--spacing-lg);
|
||||
background: var(--background-color-primary);
|
||||
border-top: 1px solid var(--divider-color);
|
||||
display: flex;
|
||||
gap: var(--spacing-lg);
|
||||
|
||||
.van-button {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.approval-dialog {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.dialog-header {
|
||||
padding: var(--spacing-lg);
|
||||
border-bottom: 1px solid var(--divider-color);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
|
||||
.van-icon {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-body {
|
||||
flex: 1;
|
||||
padding: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
padding: var(--spacing-lg);
|
||||
border-top: 1px solid var(--divider-color);
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.van-steps--vertical) {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
:deep(.van-step__content) {
|
||||
padding-bottom: var(--spacing-lg);
|
||||
}
|
||||
|
||||
// 产品相关样式
|
||||
.product-card {
|
||||
background: var(--background-color-primary);
|
||||
border-radius: var(--border-radius-md);
|
||||
margin-bottom: var(--spacing-md);
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.product-header {
|
||||
background: var(--background-color-secondary);
|
||||
padding: var(--spacing-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
.product-index {
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.product-main-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.product-code-price {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.product-code {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--text-color-primary);
|
||||
}
|
||||
|
||||
.product-total-price {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
.product-details {
|
||||
padding: var(--spacing-md);
|
||||
}
|
||||
|
||||
.product-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: var(--spacing-sm);
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.product-label {
|
||||
color: var(--text-color-secondary);
|
||||
font-size: 14px;
|
||||
min-width: 80px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.product-value {
|
||||
color: var(--text-color-primary);
|
||||
font-size: 14px;
|
||||
text-align: right;
|
||||
flex: 1;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
// 产品总计样式
|
||||
.product-summary {
|
||||
background: var(--background-color-primary);
|
||||
border-radius: var(--border-radius-md);
|
||||
padding: var(--spacing-lg);
|
||||
margin-top: var(--spacing-lg);
|
||||
border: 2px solid var(--primary-color);
|
||||
}
|
||||
|
||||
.summary-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: var(--spacing-md);
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.summary-label {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: var(--text-color-primary);
|
||||
}
|
||||
|
||||
.summary-value {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--text-color-primary);
|
||||
|
||||
&.total-amount {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
&.final-amount {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
}
|
||||
|
||||
.final-total {
|
||||
border-top: 2px solid var(--divider-color);
|
||||
padding-top: var(--spacing-md);
|
||||
margin-top: var(--spacing-md);
|
||||
|
||||
.summary-label {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,198 @@
|
|||
<template>
|
||||
<div class="order-list-page">
|
||||
<!-- 搜索栏 -->
|
||||
<van-search
|
||||
v-model="searchKeyword"
|
||||
placeholder="搜索订单编号、客户名称"
|
||||
@search="handleSearch"
|
||||
@clear="handleClear"
|
||||
/>
|
||||
|
||||
<!-- 下拉刷新 -->
|
||||
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
|
||||
<!-- 订单列表 -->
|
||||
<van-list
|
||||
v-model:loading="loading"
|
||||
:finished="finished"
|
||||
finished-text="没有更多了"
|
||||
@load="onLoad"
|
||||
>
|
||||
<div v-for="order in orderList" :key="order.id" class="order-item" @click="goToDetail(order.id)">
|
||||
<div class="order-header">
|
||||
<div class="order-code">{{ order.orderCode }}</div>
|
||||
<div class="status-tag" :class="getStatusClass(order.orderStatus)">
|
||||
{{ formatOrderStatus(order.orderStatus) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="order-info">
|
||||
<div class="info-row">
|
||||
<span class="label">项目名称：</span>
|
||||
<span class="value">{{ order.projectName }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="label">客户名称：</span>
|
||||
<span class="value">{{ order.customerName }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="label">订单金额：</span>
|
||||
<span class="value amount">{{ formatAmount(order.shipmentAmount) }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="label">创建时间：</span>
|
||||
<span class="value">{{ formatDate(order.createTime, 'YYYY-MM-DD HH:mm') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<div v-if="!loading && orderList.length === 0" class="empty-state">
|
||||
<van-empty description="暂无订单数据" />
|
||||
</div>
|
||||
</van-list>
|
||||
</van-pull-refresh>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { useOrderStore } from '@/store/order'
|
||||
import { formatOrderStatus, formatAmount, formatDate } from '@/utils'
|
||||
import type { OrderStatus } from '@/types'
|
||||
|
||||
const router = useRouter()
|
||||
const orderStore = useOrderStore()
|
||||
const { orderList, loading, finished } = storeToRefs(orderStore)
|
||||
|
||||
// 搜索相关
|
||||
const searchKeyword = ref('')
|
||||
const refreshing = ref(false)
|
||||
|
||||
// 获取状态样式类
|
||||
const getStatusClass = (status: OrderStatus) => {
|
||||
const classMap = {
|
||||
'0': 'pending',
|
||||
'1': 'approved',
|
||||
'2': 'rejected'
|
||||
}
|
||||
return classMap[status] || 'pending'
|
||||
}
|
||||
|
||||
// 加载数据
|
||||
const onLoad = async () => {
|
||||
try {
|
||||
await orderStore.loadOrderList()
|
||||
} catch (error) {
|
||||
console.error('加载订单列表失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 下拉刷新
|
||||
const onRefresh = async () => {
|
||||
try {
|
||||
await orderStore.loadOrderList(true)
|
||||
refreshing.value = false
|
||||
} catch (error) {
|
||||
refreshing.value = false
|
||||
console.error('刷新失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 搜索处理
|
||||
const handleSearch = async () => {
|
||||
try {
|
||||
await orderStore.searchOrders(searchKeyword.value.trim())
|
||||
} catch (error) {
|
||||
console.error('搜索失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 清空搜索
|
||||
const handleClear = async () => {
|
||||
searchKeyword.value = ''
|
||||
try {
|
||||
await orderStore.searchOrders('')
|
||||
} catch (error) {
|
||||
console.error('清空搜索失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 跳转到详情页
|
||||
const goToDetail = (id: number) => {
|
||||
router.push(`/detail/${id}`)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// 重置状态并加载数据
|
||||
orderStore.resetListState()
|
||||
onLoad()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.order-list-page {
|
||||
min-height: 100vh;
|
||||
background-color: var(--background-color-secondary);
|
||||
}
|
||||
|
||||
.order-item {
|
||||
background: var(--background-color-primary);
|
||||
margin-bottom: var(--spacing-sm);
|
||||
padding: var(--spacing-lg);
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
|
||||
&:active {
|
||||
background-color: var(--background-color-tertiary);
|
||||
}
|
||||
}
|
||||
|
||||
.order-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.order-code {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: var(--text-color-primary);
|
||||
}
|
||||
|
||||
.order-info {
|
||||
.info-row {
|
||||
display: flex;
|
||||
margin-bottom: var(--spacing-sm);
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.label {
|
||||
width: 80px;
|
||||
color: var(--text-color-secondary);
|
||||
font-size: 14px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.value {
|
||||
flex: 1;
|
||||
color: var(--text-color-primary);
|
||||
font-size: 14px;
|
||||
word-break: break-all;
|
||||
|
||||
&.amount {
|
||||
color: var(--error-color);
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
padding: 60px var(--spacing-lg);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
{
|
||||
"extends": "@vue/tsconfig/tsconfig.dom.json",
|
||||
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
|
||||
"exclude": ["src/**/__tests__/*"],
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
},
|
||||
"types": ["vite/client"]
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import { resolve } from 'path'
|
||||
import AutoImport from 'unplugin-auto-import/vite'
|
||||
import Components from 'unplugin-vue-components/vite'
|
||||
import { VantResolver } from 'unplugin-vue-components/resolvers'
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
vue(),
|
||||
AutoImport({
|
||||
imports: ['vue', 'vue-router', 'pinia'],
|
||||
resolvers: [VantResolver()]
|
||||
}),
|
||||
Components({
|
||||
resolvers: [VantResolver()]
|
||||
})
|
||||
],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': resolve(__dirname, 'src')
|
||||
}
|
||||
},
|
||||
server: {
|
||||
host: '0.0.0.0',
|
||||
port: 3000,
|
||||
open: true,
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://192.168.2.134:28080',
|
||||
changeOrigin: true,
|
||||
secure: false,
|
||||
rewrite: (path) => path.replace(/^\/api/, ''),
|
||||
configure: (proxy, options) => {
|
||||
// proxy.on('proxyReq', (proxyReq, req, res) => {
|
||||
// // 设置请求头
|
||||
// proxyReq.setHeader('Access-Control-Allow-Origin', '*')
|
||||
// proxyReq.setHeader('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,PATCH,OPTIONS')
|
||||
// proxyReq.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization, Content-Length, X-Requested-With')
|
||||
// })
|
||||
proxy.on('proxyReq', (proxyReq, req, res) => {
|
||||
proxyReq.setHeader('Origin', options.target);
|
||||
proxyReq.setHeader('Referer', options.target);
|
||||
});
|
||||
proxy.on('proxyRes', (proxyRes, req, res) => {
|
||||
res.setHeader('Access-Control-Allow-Origin', '*');
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
build: {
|
||||
target: 'es2015',
|
||||
outDir: 'dist',
|
||||
assetsDir: 'assets',
|
||||
sourcemap: false,
|
||||
rollupOptions: {
|
||||
output: {
|
||||
chunkFileNames: 'js/[name]-[hash].js',
|
||||
entryFileNames: 'js/[name]-[hash].js',
|
||||
assetFileNames: '[ext]/[name]-[hash].[ext]'
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
Loading…
Reference in New Issue