feat(purchase): 添加采购审批功能
- 新增采购审批列表页面，支持待审批和已审批tab切换 - 实现采购详情页面，展示采购单信息、产品列表和审批历史 - 添加采购审批操作，支持通过和驳回两种审批状态 - 在首页添加采购审批菜单入口，与订单审批并列展示 - 路由调整，将原订单列表页路径改为首页路径 - 类型定义更新，增加采购相关接口和枚举类型 - 样式优化，统一采购审批页面的设计风格和交互体验master
chenhao
parent
c524d8a4cd
commit
292fc35d54
|
|
@ -78,6 +78,7 @@ export const getCompletedOrderList = (params: CompletedListParams): Promise<Axio
|
|||
formData.append('page', params.page.toString())
|
||||
formData.append('pageSize', params.pageSize.toString())
|
||||
if (params.businessName) formData.append('businessName', params.businessName)
|
||||
if (params.processKeyList) formData.append('processKeyList', params.processKeyList)
|
||||
|
||||
return http.post('/flow/completed/list', formData)
|
||||
}
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
import http from '@/utils/http'
|
||||
import type {ApiResponse, Purchase, PurchaseListParams} from '@/types'
|
||||
import type {AxiosResponse} from 'axios'
|
||||
|
||||
/**
|
||||
* 获取采购待审批列表
|
||||
*/
|
||||
export const getPurchaseList = (params: PurchaseListParams): Promise<AxiosResponse<ApiResponse<{
|
||||
total: number
|
||||
rows: Purchase[]
|
||||
}>>> => {
|
||||
return http.get('/sip/purchaseorder/approveList', {params})
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取采购已审批列表
|
||||
*
|
||||
*/
|
||||
export const getCompletedPurchaseList = (params: PurchaseListParams): Promise<AxiosResponse<ApiResponse<{
|
||||
total: number
|
||||
rows: any[]
|
||||
}>>> => {
|
||||
// 创建FormData对象
|
||||
const formData = new FormData()
|
||||
|
||||
// 添加参数到FormData
|
||||
formData.append('page', params.page.toString())
|
||||
formData.append('pageSize', params.pageSize.toString())
|
||||
if (params.processKeyList) formData.append('processKeyList', params.processKeyList)
|
||||
|
||||
return http.post('/flow/completed/list', formData)
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取采购详情
|
||||
*
|
||||
*/
|
||||
export const getPurchaseDetail = (purchaseNo: string | number): Promise<AxiosResponse<ApiResponse<any>>> => {
|
||||
return http.get(`/sip/purchaseorder/code/${purchaseNo}`)
|
||||
}
|
||||
|
||||
/**
|
||||
* 提交采购审批结果
|
||||
*/
|
||||
export const submitPurchaseApproval = (params: any): Promise<AxiosResponse<ApiResponse<any>>> => {
|
||||
return http.post('/flow/todo/approve', params)
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取采购审批历史
|
||||
*/
|
||||
export const getPurchaseApprovalHistory = (purchaseNo: string): Promise<AxiosResponse<ApiResponse<any>>> => {
|
||||
let params = {
|
||||
businessKey: purchaseNo || null,
|
||||
processKeyList: ['purchase_order_online'],
|
||||
}
|
||||
return http.post('/flow/completed/all/list', params)
|
||||
}
|
||||
|
|
@ -5,6 +5,8 @@ import { store, initStores } from './store'
|
|||
|
||||
// Vant样式
|
||||
import 'vant/lib/index.css'
|
||||
import 'vant/es/toast/style';
|
||||
import 'vant/es/style/base.css';
|
||||
// 触摸模拟器 (开发环境使用)
|
||||
import '@vant/touch-emulator'
|
||||
|
||||
|
|
|
|||
|
|
@ -19,10 +19,10 @@ const routes: RouteRecordRaw[] = [
|
|||
},
|
||||
{
|
||||
path: '/list',
|
||||
name: 'OrderList',
|
||||
component: () => import('@/views/List/index.vue'),
|
||||
name: 'Home',
|
||||
component: () => import('@/views/Home/index.vue'),
|
||||
meta: {
|
||||
title: '订单列表',
|
||||
title: '审批中心',
|
||||
requiresAuth: true
|
||||
}
|
||||
},
|
||||
|
|
@ -34,6 +34,15 @@ const routes: RouteRecordRaw[] = [
|
|||
title: '订单详情',
|
||||
requiresAuth: true
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/purchase-detail/:id',
|
||||
name: 'PurchaseDetail',
|
||||
component: () => import('@/views/PurchaseDetail/index.vue'),
|
||||
meta: {
|
||||
title: '采购详情',
|
||||
requiresAuth: true
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
|
|
|
|||
|
|
@ -183,6 +183,7 @@ export const useOrderStore = defineStore('order', {
|
|||
const params: CompletedListParams = {
|
||||
page: this.completedCurrentPage,
|
||||
pageSize: this.completedPageSize,
|
||||
processKeyList:['order_approve_online','order_approve_offline'],
|
||||
businessName: this.completedKeyword || undefined
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,255 @@
|
|||
import { defineStore } from 'pinia'
|
||||
import type { Purchase, PurchaseListParams, PurchaseDetail } from '@/types'
|
||||
import { getPurchaseList, getCompletedPurchaseList, getPurchaseDetail } from '@/api/purchase'
|
||||
|
||||
interface PurchaseState {
|
||||
// 待审批列表相关
|
||||
purchaseList: Purchase[]
|
||||
loading: boolean
|
||||
finished: boolean
|
||||
currentPage: number
|
||||
pageSize: number
|
||||
total: number
|
||||
keyword: string
|
||||
|
||||
// 已审批列表相关
|
||||
completedList: any[]
|
||||
completedLoading: boolean
|
||||
completedFinished: boolean
|
||||
completedCurrentPage: number
|
||||
completedPageSize: number
|
||||
completedTotal: number
|
||||
completedKeyword: string
|
||||
|
||||
// 详情相关
|
||||
currentPurchase: PurchaseDetail | null
|
||||
currentPurchaseTodo: any | null // 待审批的todo信息(包含processKey, taskId等)
|
||||
detailLoading: boolean
|
||||
}
|
||||
|
||||
export const usePurchaseStore = defineStore('purchase', {
|
||||
state: (): PurchaseState => ({
|
||||
// 待审批列表状态
|
||||
purchaseList: [],
|
||||
loading: false,
|
||||
finished: false,
|
||||
currentPage: 1,
|
||||
pageSize: 20,
|
||||
total: 0,
|
||||
keyword: '',
|
||||
|
||||
// 已审批列表状态
|
||||
completedList: [],
|
||||
completedLoading: false,
|
||||
completedFinished: false,
|
||||
completedCurrentPage: 1,
|
||||
completedPageSize: 20,
|
||||
completedTotal: 0,
|
||||
completedKeyword: '',
|
||||
|
||||
// 详情相关
|
||||
currentPurchase: null,
|
||||
currentPurchaseTodo: null,
|
||||
detailLoading: false
|
||||
}),
|
||||
|
||||
getters: {
|
||||
// 获取采购产品列表
|
||||
purchaseItems: (state) => state.currentPurchase?.omsPurchaseOrderItemList || [],
|
||||
|
||||
// 检查待审批是否还有更多数据
|
||||
hasMore: (state) => state.purchaseList.length < state.total,
|
||||
|
||||
// 检查已审批是否还有更多数据
|
||||
completedHasMore: (state) => state.completedList.length < state.completedTotal
|
||||
},
|
||||
|
||||
actions: {
|
||||
/**
|
||||
* 加载采购待审批列表
|
||||
*/
|
||||
async loadPurchaseList(refresh = false) {
|
||||
if (this.loading) return
|
||||
|
||||
if (refresh) {
|
||||
this.currentPage = 1
|
||||
this.finished = false
|
||||
this.purchaseList = []
|
||||
}
|
||||
|
||||
this.loading = true
|
||||
|
||||
try {
|
||||
const params: PurchaseListParams = {
|
||||
page: this.currentPage,
|
||||
pageSize: this.pageSize,
|
||||
keyword: this.keyword || undefined
|
||||
}
|
||||
|
||||
const response = await getPurchaseList(params)
|
||||
const data = response.data
|
||||
const total = data.total || 0
|
||||
const rows = data.rows || []
|
||||
|
||||
if (refresh) {
|
||||
this.purchaseList = rows
|
||||
} else {
|
||||
this.purchaseList.push(...rows)
|
||||
}
|
||||
|
||||
this.total = total
|
||||
|
||||
// 判断是否已加载完所有数据
|
||||
if (this.purchaseList.length >= total || rows.length === 0) {
|
||||
this.finished = true
|
||||
} else {
|
||||
// 只有当还有更多数据时才递增页码
|
||||
this.currentPage++
|
||||
}
|
||||
|
||||
return response
|
||||
} catch (error) {
|
||||
console.error('加载采购列表失败:', error)
|
||||
throw error
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 搜索采购
|
||||
*/
|
||||
async searchPurchases(keyword: string) {
|
||||
this.keyword = keyword
|
||||
await this.loadPurchaseList(true)
|
||||
},
|
||||
|
||||
/**
|
||||
* 加载已审批列表
|
||||
*/
|
||||
async loadCompletedPurchaseList(refresh = false) {
|
||||
// 如果已经加载完所有数据且不是刷新操作，直接返回
|
||||
if (this.completedFinished && !refresh) {
|
||||
return Promise.resolve()
|
||||
}
|
||||
|
||||
if (refresh) {
|
||||
this.completedCurrentPage = 1
|
||||
this.completedFinished = false
|
||||
this.completedList = []
|
||||
}
|
||||
|
||||
this.completedLoading = true
|
||||
|
||||
try {
|
||||
const params: PurchaseListParams = {
|
||||
page: this.completedCurrentPage,
|
||||
pageSize: this.completedPageSize,
|
||||
keyword: this.completedKeyword || undefined,
|
||||
processKeyList:['purchase_order_online']
|
||||
}
|
||||
|
||||
const response = await getCompletedPurchaseList(params)
|
||||
const data = response.data
|
||||
const total = data.total || 0
|
||||
const rows = data.rows || []
|
||||
|
||||
if (refresh) {
|
||||
this.completedList = rows
|
||||
} else {
|
||||
this.completedList.push(...rows)
|
||||
}
|
||||
|
||||
this.completedTotal = total
|
||||
|
||||
// 判断是否已加载完所有数据
|
||||
if (this.completedList.length >= total || rows.length === 0) {
|
||||
this.completedFinished = true
|
||||
} else {
|
||||
// 只有当还有更多数据时才递增页码
|
||||
this.completedCurrentPage++
|
||||
}
|
||||
|
||||
return response
|
||||
} catch (error) {
|
||||
console.error('加载已审批采购列表失败:', error)
|
||||
throw error
|
||||
} finally {
|
||||
this.completedLoading = false
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 搜索已审批采购
|
||||
*/
|
||||
async searchCompletedPurchases(keyword: string) {
|
||||
this.completedKeyword = keyword
|
||||
await this.loadCompletedPurchaseList(true)
|
||||
},
|
||||
|
||||
/**
|
||||
* 重置列表状态
|
||||
*/
|
||||
resetListState() {
|
||||
this.purchaseList = []
|
||||
this.currentPage = 1
|
||||
this.finished = false
|
||||
this.loading = false
|
||||
this.keyword = ''
|
||||
this.total = 0
|
||||
},
|
||||
|
||||
/**
|
||||
* 重置已审批列表状态
|
||||
*/
|
||||
resetCompletedListState() {
|
||||
this.completedList = []
|
||||
this.completedCurrentPage = 1
|
||||
this.completedFinished = false
|
||||
this.completedLoading = false
|
||||
this.completedKeyword = ''
|
||||
this.completedTotal = 0
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取采购详情
|
||||
*/
|
||||
async fetchPurchaseDetail(purchaseNo: string | number) {
|
||||
this.detailLoading = true
|
||||
|
||||
try {
|
||||
const response = await getPurchaseDetail(purchaseNo)
|
||||
|
||||
// 直接获取数据对象
|
||||
const purchaseData = response.data
|
||||
|
||||
// 确保数据存在再赋值
|
||||
if (purchaseData) {
|
||||
this.currentPurchase = purchaseData.data
|
||||
}
|
||||
|
||||
return response
|
||||
} catch (error) {
|
||||
console.error('获取采购详情失败:', error)
|
||||
throw error
|
||||
} finally {
|
||||
this.detailLoading = false
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 设置当前采购单的todo信息
|
||||
*/
|
||||
setCurrentPurchaseTodo(todoInfo: any) {
|
||||
this.currentPurchaseTodo = todoInfo
|
||||
},
|
||||
|
||||
/**
|
||||
* 清空当前采购详情
|
||||
*/
|
||||
clearCurrentPurchase() {
|
||||
this.currentPurchase = null
|
||||
this.currentPurchaseTodo = null
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
export interface ApiResponse<T = any> {
|
||||
code: number
|
||||
msg: string | null
|
||||
data: T
|
||||
rows: any[T]
|
||||
total?: number
|
||||
}
|
||||
|
||||
|
|
@ -20,6 +20,7 @@ export type PayMethod = '1-1' | '1-2' | '2-1' | '2-2' | '2-3' // 待审批、已
|
|||
|
||||
// 审批状态类型
|
||||
export type ApprovalStatus = 1 | 2 | 3 // 待审批、驳回、通过
|
||||
export type ApproveBtn = 0 | 1 // 驳回、通过
|
||||
|
||||
// 订单信息类型
|
||||
export interface Order {
|
||||
|
|
@ -238,4 +239,56 @@ export interface CompletedListParams {
|
|||
businessName?: string
|
||||
page: number
|
||||
pageSize: number
|
||||
processKeyList: Array<string>
|
||||
}
|
||||
|
||||
// ============= 采购相关类型定义 =============
|
||||
|
||||
// 采购订单信息类型
|
||||
export interface Purchase {
|
||||
id: number
|
||||
purchaseNo: string // 采购单号
|
||||
approveStatus: string // 审批状态
|
||||
vendorName: string // 制造商名称
|
||||
ownerName: string // 汇智负责人
|
||||
totalAmount: number // 采购金额
|
||||
createTime: string
|
||||
updateTime: string
|
||||
|
||||
[key: string]: any
|
||||
}
|
||||
|
||||
// 采购列表查询参数
|
||||
export interface PurchaseListParams {
|
||||
page: number
|
||||
pageSize: number
|
||||
keyword?: string
|
||||
processKeyList?: string[]
|
||||
}
|
||||
|
||||
// 采购产品项类型
|
||||
export interface PurchaseOrderItem {
|
||||
id: number
|
||||
productCode: string // 产品编码
|
||||
productModel: string // 产品型号
|
||||
productDescription: string // 描述
|
||||
quantity: number // 数量
|
||||
price: number // 价格
|
||||
[key: string]: any
|
||||
}
|
||||
|
||||
// 采购详情类型
|
||||
export interface PurchaseDetail {
|
||||
id: number
|
||||
purchaseNo: string // 采购单号
|
||||
createTime: string // 发起日期
|
||||
purchaserName: string // 采购员
|
||||
purchaserMobile: string // 联系电话
|
||||
purchaserEmail: string // 联系邮箱
|
||||
warehouseName: string // 入库仓
|
||||
payMethod: string // 付款方式
|
||||
ownerName: string // 汇智负责人
|
||||
remark: string // 备注
|
||||
omsPurchaseOrderItemList: PurchaseOrderItem[] // 采购产品列表
|
||||
[key: string]: any
|
||||
}
|
||||
|
|
@ -649,7 +649,16 @@ const getFinalTotalAmount = () => {
|
|||
|
||||
// 返回上一页
|
||||
const goBack = () => {
|
||||
router.back()
|
||||
const from = route.query.from as string;
|
||||
if (from) {
|
||||
router.push(`/?tab=${from}`);
|
||||
} else {
|
||||
if (window.history.length > 1) {
|
||||
router.back();
|
||||
} else {
|
||||
router.push('/');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 预览文件
|
||||
|
|
@ -812,10 +821,10 @@ const submitApproval = async () => {
|
|||
showSuccessToast(currentApprovalStatus.value === 0 ? '驳回成功' : '审批通过')
|
||||
approvalDialogVisible.value = false
|
||||
|
||||
// 如果是审批通过，跳转到列表页面
|
||||
// 如果是审批通过，跳转到订单列表页面
|
||||
if (currentApprovalStatus.value !== 0) {
|
||||
// 跳转到列表页面
|
||||
router.push('/list')
|
||||
// 跳转到订单列表页面
|
||||
router.push('/list?tab=order')
|
||||
} else {
|
||||
// 驳回情况下重新加载详情
|
||||
await orderStore.fetchOrderDetail(route.params.id as string)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,299 @@
|
|||
<template>
|
||||
<div class="home-page">
|
||||
<!-- 顶部导航栏 -->
|
||||
<div class="header-container">
|
||||
<div class="header-content">
|
||||
<van-icon name="wap-nav" class="menu-icon" @click="showDrawer = true" />
|
||||
<h1 class="page-title">{{ currentMenuTitle }}</h1>
|
||||
<div class="header-actions">
|
||||
<van-button
|
||||
type="default"
|
||||
size="small"
|
||||
icon="logout"
|
||||
@click="handleLogout"
|
||||
class="logout-btn"
|
||||
>
|
||||
退出
|
||||
</van-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 左侧抽屉菜单 -->
|
||||
<van-popup
|
||||
v-model:show="showDrawer"
|
||||
position="left"
|
||||
:style="{ width: '70%', height: '100%' }"
|
||||
>
|
||||
<div class="drawer-container">
|
||||
<div class="drawer-header">
|
||||
<h2>审批菜单</h2>
|
||||
<van-icon name="cross" @click="showDrawer = false" />
|
||||
</div>
|
||||
<div class="drawer-menu">
|
||||
<div
|
||||
v-for="menu in menuList"
|
||||
:key="menu.key"
|
||||
class="menu-item"
|
||||
:class="{ active: currentMenu === menu.key }"
|
||||
@click="selectMenu(menu.key)"
|
||||
>
|
||||
<van-icon :name="menu.icon" class="menu-icon-left" />
|
||||
<span class="menu-title">{{ menu.title }}</span>
|
||||
<van-icon name="arrow" class="menu-arrow" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</van-popup>
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<div class="content-area">
|
||||
<!-- 订单审批 -->
|
||||
<OrderList v-if="currentMenu === 'order'" />
|
||||
|
||||
<!-- 采购审批 -->
|
||||
<PurchaseList v-if="currentMenu === 'purchase'" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { showConfirmDialog, showSuccessToast, showFailToast } from 'vant'
|
||||
import { useAuthStore } from '@/store/auth'
|
||||
import OrderList from '@/views/List/index.vue'
|
||||
import PurchaseList from '@/views/Purchase/index.vue'
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const authStore = useAuthStore()
|
||||
|
||||
// 抽屉显示状态
|
||||
const showDrawer = ref(false)
|
||||
|
||||
// 当前选中的菜单
|
||||
const currentMenu = ref('order')
|
||||
|
||||
// 菜单列表
|
||||
const menuList = [
|
||||
{
|
||||
key: 'order',
|
||||
title: '订单审批',
|
||||
icon: 'notes-o'
|
||||
},
|
||||
{
|
||||
key: 'purchase',
|
||||
title: '采购审批',
|
||||
icon: 'shopping-cart-o'
|
||||
}
|
||||
]
|
||||
|
||||
// 当前菜单标题
|
||||
const currentMenuTitle = computed(() => {
|
||||
const menu = menuList.find(m => m.key === currentMenu.value)
|
||||
return menu ? menu.title : '审批'
|
||||
})
|
||||
|
||||
// 选择菜单
|
||||
const selectMenu = (key: string) => {
|
||||
currentMenu.value = key
|
||||
showDrawer.value = false
|
||||
}
|
||||
|
||||
// 初始化菜单
|
||||
onMounted(() => {
|
||||
const tab = route.query.tab as string
|
||||
if (tab && ['order', 'purchase'].includes(tab)) {
|
||||
currentMenu.value = tab
|
||||
}
|
||||
})
|
||||
|
||||
// 退出登录处理
|
||||
const handleLogout = async () => {
|
||||
try {
|
||||
await showConfirmDialog({
|
||||
title: '退出登录',
|
||||
message: '确定要退出当前账号吗？',
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
confirmButtonColor: '#ee0a24'
|
||||
})
|
||||
|
||||
await authStore.logout()
|
||||
showSuccessToast('已退出登录')
|
||||
router.replace('/login')
|
||||
} catch (error: any) {
|
||||
if (error !== 'cancel') {
|
||||
console.error('退出登录失败:', error)
|
||||
showFailToast('退出登录失败')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.home-page {
|
||||
min-height: 100vh;
|
||||
background-color: var(--van-background-color);
|
||||
}
|
||||
|
||||
// 顶部导航栏样式
|
||||
.header-container {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 20;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16px 20px;
|
||||
min-height: 56px;
|
||||
|
||||
.menu-icon {
|
||||
font-size: 24px;
|
||||
color: #333333;
|
||||
cursor: pointer;
|
||||
margin-right: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.page-title {
|
||||
flex: 1;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logout-btn {
|
||||
background: #ffffff;
|
||||
border: 1px solid #e8e8e8;
|
||||
color: #666666;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover, &:active {
|
||||
background: #f5f5f5;
|
||||
border-color: #d0d0d0;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
:deep(.van-icon) {
|
||||
margin-right: 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
// 抽屉容器样式
|
||||
.drawer-container {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.drawer-header {
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
|
||||
h2 {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.van-icon {
|
||||
font-size: 20px;
|
||||
color: #666666;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.drawer-menu {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 12px 0;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 16px 20px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 4px;
|
||||
height: 0;
|
||||
background: var(--van-primary-color);
|
||||
transition: height 0.2s ease;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: #e6f7ff;
|
||||
|
||||
&::before {
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
.menu-icon-left {
|
||||
color: var(--van-primary-color);
|
||||
}
|
||||
|
||||
.menu-title {
|
||||
color: var(--van-primary-color);
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-icon-left {
|
||||
font-size: 20px;
|
||||
color: #666666;
|
||||
margin-right: 12px;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.menu-title {
|
||||
flex: 1;
|
||||
font-size: 16px;
|
||||
color: #333333;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.menu-arrow {
|
||||
font-size: 16px;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
// 内容区域
|
||||
.content-area {
|
||||
min-height: calc(100vh - 56px);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,23 +1,5 @@
|
|||
<template>
|
||||
<div class="order-list-page">
|
||||
<!-- 顶部导航栏 -->
|
||||
<div class="header-container">
|
||||
<div class="header-content">
|
||||
<h1 class="page-title">订单审批</h1>
|
||||
<div class="header-actions">
|
||||
<van-button
|
||||
type="default"
|
||||
size="small"
|
||||
icon="logout"
|
||||
@click="handleLogout"
|
||||
class="logout-btn"
|
||||
>
|
||||
退出
|
||||
</van-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 搜索栏 -->
|
||||
<div class="search-container">
|
||||
<van-search
|
||||
|
|
@ -140,14 +122,11 @@ import { ref, onMounted, watch } from 'vue'
|
|||
import { useRouter } from 'vue-router'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { useOrderStore } from '@/store/order'
|
||||
import { useAuthStore } from '@/store/auth'
|
||||
import { formatOrderStatus, formatAmount, formatDate } from '@/utils'
|
||||
import { showConfirmDialog, showSuccessToast, showFailToast } from 'vant'
|
||||
import type { OrderStatus, ApprovalStatus } from '@/types'
|
||||
|
||||
const router = useRouter()
|
||||
const orderStore = useOrderStore()
|
||||
const authStore = useAuthStore()
|
||||
|
||||
// 待审批列表相关状态
|
||||
const { orderList, loading, finished } = storeToRefs(orderStore)
|
||||
|
|
@ -283,47 +262,17 @@ const getCompletedStatusClass = (status: ApprovalStatus) => {
|
|||
|
||||
// 跳转到详情页
|
||||
const goToDetail = (id: number) => {
|
||||
router.push(`/detail/${id}`)
|
||||
router.push({ path: `/detail/${id}`, query: { from: 'order' } })
|
||||
}
|
||||
|
||||
// 跳转到已审批详情页（只读模式）
|
||||
const goToCompletedDetail = (businessId: number) => {
|
||||
router.push({
|
||||
path: `/detail/${businessId}`,
|
||||
query: { readonly: 'true' }
|
||||
query: { readonly: 'true', from: 'order' }
|
||||
})
|
||||
}
|
||||
|
||||
// 退出登录处理
|
||||
const handleLogout = async () => {
|
||||
try {
|
||||
await showConfirmDialog({
|
||||
title: '退出登录',
|
||||
message: '确定要退出当前账号吗？',
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
confirmButtonColor: '#ee0a24'
|
||||
})
|
||||
|
||||
// 执行退出登录
|
||||
await authStore.logout()
|
||||
|
||||
// 显示成功提示
|
||||
showSuccessToast('已退出登录')
|
||||
|
||||
// 跳转到登录页
|
||||
router.replace('/login')
|
||||
} catch (error: any) {
|
||||
// 用户取消或其他错误
|
||||
if (error !== 'cancel') {
|
||||
console.error('退出登录失败:', error)
|
||||
showFailToast('退出登录失败')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
// 重置状态并加载数据
|
||||
orderStore.resetListState()
|
||||
|
|
@ -338,61 +287,11 @@ onMounted(() => {
|
|||
background-color: var(--van-background-color);
|
||||
}
|
||||
|
||||
// 顶部导航栏样式
|
||||
.header-container {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 20;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16px 20px;
|
||||
min-height: 56px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logout-btn {
|
||||
background: #ffffff;
|
||||
border: 1px solid #e8e8e8;
|
||||
color: #666666;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover, &:active {
|
||||
background: #f5f5f5;
|
||||
border-color: #d0d0d0;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
:deep(.van-icon) {
|
||||
margin-right: 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
// Tab相关样式
|
||||
.approval-tabs {
|
||||
:deep(.van-tabs__wrap) {
|
||||
position: sticky;
|
||||
top: 72px; // 调整导航栏高度
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
|
|
@ -401,7 +300,7 @@ onMounted(() => {
|
|||
:deep(.van-tabs__content) {
|
||||
padding: 16px;
|
||||
background: #f5f5f5;
|
||||
min-height: calc(100vh - 120px);
|
||||
min-height: calc(100vh - 56px);
|
||||
}
|
||||
|
||||
:deep(.van-tab) {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,458 @@
|
|||
<template>
|
||||
<div class="purchase-list-page">
|
||||
<!-- 搜索栏 -->
|
||||
<div class="search-container">
|
||||
<van-search
|
||||
v-model="searchKeyword"
|
||||
:placeholder="currentTab === 'pending' ? '搜索采购单号' : '搜索采购合同名称'"
|
||||
@search="handleSearch"
|
||||
@clear="handleClear"
|
||||
class="custom-search"
|
||||
>
|
||||
<template #left-icon>
|
||||
<svg class="search-icon" viewBox="0 0 24 24" fill="none">
|
||||
<circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2"/>
|
||||
<path d="M21 21L16.65 16.65" stroke="currentColor" stroke-width="2"/>
|
||||
</svg>
|
||||
</template>
|
||||
</van-search>
|
||||
</div>
|
||||
|
||||
<!-- Tab切换 -->
|
||||
<van-tabs v-model:active="currentTab" @change="onTabChange" class="approval-tabs">
|
||||
<!-- 待审批Tab -->
|
||||
<van-tab name="pending" title="待审批">
|
||||
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
|
||||
<van-list
|
||||
v-model:loading="loading"
|
||||
:finished="finished"
|
||||
finished-text="没有更多了"
|
||||
@load="onLoad"
|
||||
>
|
||||
<div v-for="purchase in purchaseList" :key="purchase.id" class="purchase-item" @click="goToDetail(purchase.purchaseNo, purchase)">
|
||||
<div class="purchase-header">
|
||||
<div class="purchase-code">{{ purchase.purchaseNo }}</div>
|
||||
</div>
|
||||
|
||||
<div class="purchase-info">
|
||||
<div class="info-row">
|
||||
<span class="label">制造商名称：</span>
|
||||
<span class="value">{{ purchase.vendorName }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="label">汇智负责人：</span>
|
||||
<span class="value">{{ purchase.ownerName }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="label">采购金额：</span>
|
||||
<span class="value amount">{{ formatAmount(purchase.totalAmount) }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="label">创建时间：</span>
|
||||
<span class="value">{{ formatDate(purchase.createTime, 'YYYY-MM-DD HH:mm') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<div v-if="!loading && purchaseList.length === 0" class="empty-state">
|
||||
<van-empty description="暂无待审批数据" />
|
||||
</div>
|
||||
</van-list>
|
||||
</van-pull-refresh>
|
||||
</van-tab>
|
||||
|
||||
<!-- 已审批Tab -->
|
||||
<van-tab name="completed" title="已审批">
|
||||
<van-pull-refresh v-model="completedRefreshing" @refresh="onCompletedRefresh">
|
||||
<van-list
|
||||
v-model:loading="completedLoading"
|
||||
:finished="completedFinished"
|
||||
finished-text="没有更多了"
|
||||
@load="onCompletedLoad"
|
||||
>
|
||||
<div v-for="item in completedList" :key="item.todoId" class="purchase-item" @click="goToCompletedDetail(item.businessKey)">
|
||||
<div class="purchase-header">
|
||||
<div class="purchase-code">{{ item.businessKey }}</div>
|
||||
<div class="status-tag" :class="getCompletedStatusClass(item.approveStatus)">
|
||||
{{ getCompletedStatusText(item.approveStatus) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="purchase-info">
|
||||
<!-- <div class="info-row">-->
|
||||
<!-- <span class="label">制造商名称：</span>-->
|
||||
<!-- <span class="value">{{ item.vendorName }}</span>-->
|
||||
<!-- </div>-->
|
||||
<div class="info-row">
|
||||
<span class="label">流程名称：</span>
|
||||
<span class="value">{{ item.processName }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="label">发起人：</span>
|
||||
<span class="value">{{ item.applyUserName }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="label">审批时间：</span>
|
||||
<span class="value">{{ item.approveTime }}</span>
|
||||
</div>
|
||||
<div v-if="item.approveOpinion" class="info-row">
|
||||
<span class="label">审批意见：</span>
|
||||
<span class="value">{{ item.approveOpinion }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<div v-if="!completedLoading && completedList.length === 0" class="empty-state">
|
||||
<van-empty description="暂无已审批数据" />
|
||||
</div>
|
||||
</van-list>
|
||||
</van-pull-refresh>
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { usePurchaseStore } from '@/store/purchase'
|
||||
import { formatAmount, formatDate } from '@/utils'
|
||||
import type { ApprovalStatus } from '@/types'
|
||||
|
||||
const router = useRouter()
|
||||
const purchaseStore = usePurchaseStore()
|
||||
|
||||
// 待审批列表相关状态
|
||||
const { purchaseList, loading, finished } = storeToRefs(purchaseStore)
|
||||
|
||||
// 已审批列表相关状态
|
||||
const { completedList, completedLoading, completedFinished } = storeToRefs(purchaseStore)
|
||||
|
||||
// Tab相关
|
||||
const currentTab = ref('pending')
|
||||
|
||||
// 搜索相关
|
||||
const searchKeyword = ref('')
|
||||
const refreshing = ref(false)
|
||||
const completedRefreshing = ref(false)
|
||||
|
||||
// 加载数据
|
||||
const onLoad = async () => {
|
||||
try {
|
||||
await purchaseStore.loadPurchaseList()
|
||||
} catch (error) {
|
||||
console.error('加载采购列表失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 下拉刷新
|
||||
const onRefresh = async () => {
|
||||
try {
|
||||
await purchaseStore.loadPurchaseList(true)
|
||||
refreshing.value = false
|
||||
} catch (error) {
|
||||
refreshing.value = false
|
||||
console.error('刷新失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// Tab切换处理
|
||||
const onTabChange = (name: string) => {
|
||||
currentTab.value = name
|
||||
searchKeyword.value = ''
|
||||
|
||||
if (name === 'completed' && completedList.value.length === 0) {
|
||||
onCompletedLoad()
|
||||
}
|
||||
}
|
||||
|
||||
// 已审批列表加载
|
||||
const onCompletedLoad = async () => {
|
||||
try {
|
||||
await purchaseStore.loadCompletedPurchaseList()
|
||||
} catch (error) {
|
||||
console.error('加载已审批列表失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 已审批列表刷新
|
||||
const onCompletedRefresh = async () => {
|
||||
try {
|
||||
await purchaseStore.loadCompletedPurchaseList(true)
|
||||
completedRefreshing.value = false
|
||||
} catch (error) {
|
||||
completedRefreshing.value = false
|
||||
console.error('刷新已审批列表失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 搜索处理
|
||||
const handleSearch = async () => {
|
||||
try {
|
||||
const keyword = searchKeyword.value.trim()
|
||||
if (currentTab.value === 'pending') {
|
||||
await purchaseStore.searchPurchases(keyword)
|
||||
} else {
|
||||
await purchaseStore.searchCompletedPurchases(keyword)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('搜索失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 清空搜索
|
||||
const handleClear = async () => {
|
||||
searchKeyword.value = ''
|
||||
try {
|
||||
if (currentTab.value === 'pending') {
|
||||
await purchaseStore.searchPurchases('')
|
||||
} else {
|
||||
await purchaseStore.searchCompletedPurchases('')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('清空搜索失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 已审批状态文本转换
|
||||
const getCompletedStatusText = (status: ApprovalStatus) => {
|
||||
const statusMap = {
|
||||
2: '驳回',
|
||||
3: '通过'
|
||||
}
|
||||
return statusMap[status] || '提交'
|
||||
}
|
||||
|
||||
// 已审批状态样式类
|
||||
const getCompletedStatusClass = (status: ApprovalStatus) => {
|
||||
const classMap = {
|
||||
2: 'rejected',
|
||||
3: 'approved'
|
||||
}
|
||||
return classMap[status] || 'pending'
|
||||
}
|
||||
|
||||
// 跳转到详情页
|
||||
const goToDetail = (purchaseNo: string, purchase?: any) => {
|
||||
// 如果有采购单对象,提取 todo 信息存储到 store
|
||||
if (purchase) {
|
||||
const todoInfo = {
|
||||
processKey: purchase.processKey,
|
||||
taskId: purchase.taskId,
|
||||
businessKey: purchaseNo
|
||||
}
|
||||
purchaseStore.setCurrentPurchaseTodo(todoInfo)
|
||||
}
|
||||
router.push({ path: `/purchase-detail/${purchaseNo}`, query: { from: 'purchase' } })
|
||||
}
|
||||
|
||||
// 跳转到已审批详情页（只读模式）
|
||||
const goToCompletedDetail = (businessId: string) => {
|
||||
router.push({
|
||||
path: `/purchase-detail/${businessId}`,
|
||||
query: { readonly: 'true', from: 'purchase' }
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// 重置状态并加载数据
|
||||
purchaseStore.resetListState()
|
||||
purchaseStore.resetCompletedListState()
|
||||
onLoad()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.purchase-list-page {
|
||||
min-height: 100vh;
|
||||
background-color: var(--van-background-color);
|
||||
}
|
||||
|
||||
// Tab相关样式
|
||||
.approval-tabs {
|
||||
:deep(.van-tabs__wrap) {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
:deep(.van-tabs__content) {
|
||||
padding: 16px;
|
||||
background: #f5f5f5;
|
||||
min-height: calc(100vh - 120px);
|
||||
}
|
||||
|
||||
:deep(.van-tab) {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
:deep(.van-tab--active) {
|
||||
color: var(--van-primary-color);
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.purchase-item {
|
||||
background: #ffffff;
|
||||
margin-bottom: 16px;
|
||||
padding: 16px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid #f0f0f0;
|
||||
|
||||
&:active {
|
||||
transform: translateY(1px);
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.purchase-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.purchase-code {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.status-tag {
|
||||
font-size: 12px;
|
||||
padding: 4px 12px;
|
||||
border-radius: 12px;
|
||||
font-weight: 500;
|
||||
|
||||
&.pending {
|
||||
background: #FFF3E0;
|
||||
color: #FF9800;
|
||||
border: 1px solid #FFE0B2;
|
||||
}
|
||||
|
||||
&.approved {
|
||||
background: #E8F5E8;
|
||||
color: #4CAF50;
|
||||
border: 1px solid #C8E6C9;
|
||||
}
|
||||
|
||||
&.rejected {
|
||||
background: #FFEBEE;
|
||||
color: #F44336;
|
||||
border: 1px solid #FFCDD2;
|
||||
}
|
||||
}
|
||||
|
||||
.purchase-info {
|
||||
.info-row {
|
||||
display: flex;
|
||||
margin-bottom: 8px;
|
||||
align-items: center;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.label {
|
||||
width: 100px;
|
||||
color: #666666;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.value {
|
||||
flex: 1;
|
||||
color: #333333;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
word-break: break-all;
|
||||
line-height: 1.4;
|
||||
|
||||
&.amount {
|
||||
color: #1976D2;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
padding: 80px 20px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
|
||||
:deep(.van-empty) {
|
||||
.van-empty__image {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
filter: drop-shadow(0 8px 32px rgba(102, 126, 234, 0.2));
|
||||
animation: float 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.van-empty__description {
|
||||
font-size: 18px;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
font-weight: 500;
|
||||
margin-top: 24px;
|
||||
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 搜索栏容器
|
||||
.search-container {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
margin: 16px 20px 20px 20px;
|
||||
}
|
||||
|
||||
// 搜索栏样式优化
|
||||
:deep(.custom-search) {
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
backdrop-filter: blur(20px);
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:focus-within {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.van-search__content {
|
||||
background: transparent;
|
||||
padding: 12px 16px;
|
||||
|
||||
.van-field__control {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
|
||||
&::placeholder {
|
||||
color: #999;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
color: #666;
|
||||
margin-right: 8px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,797 @@
|
|||
<template>
|
||||
<div class="purchase-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="currentPurchase" class="page-content">
|
||||
<!-- 采购单号标题 -->
|
||||
<div class="purchase-header">
|
||||
<div class="purchase-title">
|
||||
{{ currentPurchase.purchaseNo }}
|
||||
</div>
|
||||
<div class="project-status" v-if="route.query.readonly !== 'true'">
|
||||
待审批
|
||||
</div>
|
||||
<div class="project-status completed" v-else>
|
||||
已审批
|
||||
</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">{{ currentPurchase.purchaseNo || '' }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">发起日期</span>
|
||||
<span class="value">{{ formatDate(currentPurchase.createTime) }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">采购员</span>
|
||||
<span class="value">{{ currentPurchase.purchaserName || '' }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">联系电话</span>
|
||||
<span class="value">{{ currentPurchase.purchaserMobile || '' }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">联系邮箱</span>
|
||||
<span class="value">{{ currentPurchase.purchaserEmail || '' }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">入库仓</span>
|
||||
<span class="value">{{ currentPurchase.warehouseName || '' }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">付款方式</span>
|
||||
<span class="value">{{ currentPurchase.payMethod==='1'?'出库付款':'入库付款' }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">汇智负责人</span>
|
||||
<span class="value">{{ currentPurchase.ownerName || '' }}</span>
|
||||
</div>
|
||||
<div class="info-item full-width">
|
||||
<span class="label">备注</span>
|
||||
<span class="value">{{ currentPurchase.remark || '无' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</van-tab>
|
||||
|
||||
<!-- 采购列表 -->
|
||||
<van-tab title="采购列表" name="items">
|
||||
<div class="tab-content">
|
||||
<div v-if="purchaseItems.length > 0">
|
||||
<div v-for="(item, index) in purchaseItems" :key="item.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">{{ item.productCode }}</span>
|
||||
<span class="product-total-price">{{ formatAmount(item.price * item.quantity) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-details">
|
||||
<div class="product-row">
|
||||
<span class="product-label">产品型号</span>
|
||||
<span class="product-value">{{ item.productModel }}</span>
|
||||
</div>
|
||||
<div class="product-row">
|
||||
<span class="product-label">描述</span>
|
||||
<span class="product-value">{{ item.productDescription }}</span>
|
||||
</div>
|
||||
<div class="product-row">
|
||||
<span class="product-label">数量</span>
|
||||
<span class="product-value">{{ item.quantity }}</span>
|
||||
</div>
|
||||
<div class="product-row">
|
||||
<span class="product-label">单价</span>
|
||||
<span class="product-value">{{ formatAmount(item.price) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 总计 -->
|
||||
<div class="product-summary">
|
||||
<div class="summary-row">
|
||||
<span class="summary-label">产品总数</span>
|
||||
<span class="summary-value">{{ purchaseItems.length }}</span>
|
||||
</div>
|
||||
<div class="summary-row final-total">
|
||||
<span class="summary-label">总金额</span>
|
||||
<span class="summary-value final-amount">{{ formatAmount(getTotalAmount()) }}</span>
|
||||
</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: '50%' }"
|
||||
>
|
||||
<div class="approval-dialog">
|
||||
<div class="dialog-header">
|
||||
<span>审批意见</span>
|
||||
<van-icon name="cross" @click="approvalDialogVisible = false"/>
|
||||
</div>
|
||||
<div class="dialog-body">
|
||||
<!-- 默认意见标签 -->
|
||||
<div class="opinion-tags">
|
||||
<div class="tags-title">常用意见</div>
|
||||
<div class="tags-container">
|
||||
<van-tag
|
||||
v-for="tag in getOpinionTags()"
|
||||
:key="tag"
|
||||
:type="selectedTag === tag ? 'primary' : 'default'"
|
||||
size="medium"
|
||||
@click="selectTag(tag)"
|
||||
class="opinion-tag"
|
||||
>
|
||||
{{ tag }}
|
||||
</van-tag>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 意见输入框 -->
|
||||
<div class="opinion-input">
|
||||
<van-field
|
||||
v-model="approvalOpinion"
|
||||
type="textarea"
|
||||
:placeholder="currentApprovalStatus === 0 ? '请输入驳回原因' : '请输入审批意见'"
|
||||
rows="4"
|
||||
autosize
|
||||
maxlength="500"
|
||||
show-word-limit
|
||||
/>
|
||||
</div>
|
||||
</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 { usePurchaseStore } from '@/store/purchase'
|
||||
import { getPurchaseApprovalHistory, submitPurchaseApproval } from '@/api/purchase'
|
||||
import { formatAmount, formatDate, getApprovalStatusColor } from '@/utils'
|
||||
import type {ApprovalStatus, ApproveBtn} from '@/types'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const purchaseStore = usePurchaseStore()
|
||||
const { currentPurchase, currentPurchaseTodo, purchaseItems, detailLoading } = storeToRefs(purchaseStore)
|
||||
|
||||
// Tab页签
|
||||
const activeTab = ref('order')
|
||||
|
||||
// 审批历史
|
||||
const approvalHistory = ref<any[]>([])
|
||||
|
||||
// 审批相关
|
||||
const approvalDialogVisible = ref(false)
|
||||
const approvalOpinion = ref('')
|
||||
const currentApprovalStatus = ref<ApproveBtn>(3)
|
||||
const submitting = ref(false)
|
||||
const selectedTag = ref('')
|
||||
|
||||
// 是否显示审批按钮
|
||||
const showApprovalButtons = computed(() => {
|
||||
// 如果是只读模式(来自已审批列表),则不显示审批按钮
|
||||
if (route.query.readonly === 'true') {
|
||||
return false
|
||||
}
|
||||
// 其他情况显示审批按钮
|
||||
return true
|
||||
})
|
||||
|
||||
// 获取步骤图标
|
||||
const getStepIcon = (status?: ApprovalStatus) => {
|
||||
if (status === undefined || status === null) return 'clock'
|
||||
const iconMap = {
|
||||
1: 'clock',
|
||||
2: 'close',
|
||||
3: 'success'
|
||||
}
|
||||
return iconMap[status] || 'clock'
|
||||
}
|
||||
|
||||
// 计算总金额
|
||||
const getTotalAmount = () => {
|
||||
if (!purchaseItems.value || purchaseItems.value.length === 0) return 0
|
||||
return purchaseItems.value.reduce((sum, item) => sum + (item.price * item.quantity), 0)
|
||||
}
|
||||
|
||||
// 返回上一页
|
||||
const goBack = () => {
|
||||
const from = route.query.from as string;
|
||||
if (from) {
|
||||
router.push(`/?tab=${from}`);
|
||||
} else {
|
||||
if (window.history.length > 1) {
|
||||
router.back();
|
||||
} else {
|
||||
router.push('/');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 显示审批弹窗
|
||||
const showApprovalDialog = (status: ApproveBtn) => {
|
||||
currentApprovalStatus.value = status
|
||||
approvalOpinion.value = ''
|
||||
selectedTag.value = ''
|
||||
approvalDialogVisible.value = true
|
||||
}
|
||||
|
||||
// 获取默认意见标签
|
||||
const getOpinionTags = () => {
|
||||
if (currentApprovalStatus.value === 0) {
|
||||
// 驳回常用意见
|
||||
return ['经审查有问题,驳回']
|
||||
} else {
|
||||
// 通过常用意见
|
||||
return ['所有信息已阅,审核通过']
|
||||
}
|
||||
}
|
||||
|
||||
// 选择标签
|
||||
const selectTag = (tag: string) => {
|
||||
if (selectedTag.value === tag) {
|
||||
// 如果点击的是已选中的标签,则取消选择并清空输入框
|
||||
selectedTag.value = ''
|
||||
approvalOpinion.value = ''
|
||||
} else {
|
||||
// 选择新标签并填入输入框
|
||||
selectedTag.value = tag
|
||||
approvalOpinion.value = tag
|
||||
}
|
||||
}
|
||||
|
||||
// 提交审批
|
||||
const submitApproval = async () => {
|
||||
if (!currentPurchaseTodo.value) {
|
||||
showToast('审批信息不完整')
|
||||
return
|
||||
}
|
||||
|
||||
const opinion = approvalOpinion.value.trim()
|
||||
if (currentApprovalStatus.value === 0 && !opinion) {
|
||||
showToast('请输入驳回原因')
|
||||
return
|
||||
}
|
||||
|
||||
submitting.value = true
|
||||
|
||||
try {
|
||||
const params = {
|
||||
businessKey: currentPurchase.value?.purchaseNo,
|
||||
processKey: currentPurchaseTodo.value.processKey,
|
||||
taskId: currentPurchaseTodo.value.taskId,
|
||||
variables: {
|
||||
comment: opinion,
|
||||
approveBtn: currentApprovalStatus.value
|
||||
}
|
||||
}
|
||||
|
||||
console.log('提交审批参数:', params)
|
||||
|
||||
await submitPurchaseApproval(params)
|
||||
|
||||
showToast('1234')
|
||||
showSuccessToast(currentApprovalStatus.value === 0 ? '驳回成功' : '审批通过')
|
||||
approvalDialogVisible.value = false
|
||||
|
||||
// 审批完成后返回列表
|
||||
router.push('/list?tab=purchase')
|
||||
} catch (error) {
|
||||
console.error('提交审批失败:', error)
|
||||
showToast('提交审批失败')
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 获取审批历史
|
||||
const fetchApprovalHistory = async (purchaseNo: string) => {
|
||||
try {
|
||||
const response = await getPurchaseApprovalHistory(purchaseNo)
|
||||
if (response.data && response.data.data) {
|
||||
approvalHistory.value = response.data.data
|
||||
console.log('获取审批历史成功:', approvalHistory.value)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取审批历史失败:', error)
|
||||
approvalHistory.value = []
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
const purchaseNo = route.params.id as string
|
||||
if (purchaseNo) {
|
||||
console.log('采购详情页面加载，采购单号:', purchaseNo)
|
||||
try {
|
||||
await purchaseStore.fetchPurchaseDetail(purchaseNo)
|
||||
console.log('获取采购详情成功:', currentPurchase.value)
|
||||
|
||||
// 获取审批历史
|
||||
await fetchApprovalHistory(purchaseNo)
|
||||
} catch (error) {
|
||||
console.error('获取采购详情失败:', error)
|
||||
showToast('获取采购详情失败')
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.purchase-detail-page {
|
||||
min-height: 100vh;
|
||||
background-color: var(--background-color-secondary);
|
||||
padding-bottom: 80px; // 为底部按钮留出空间
|
||||
}
|
||||
|
||||
.page-content {
|
||||
// tabs组件自己控制间距
|
||||
}
|
||||
|
||||
.purchase-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;
|
||||
}
|
||||
|
||||
.purchase-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;
|
||||
|
||||
&.completed {
|
||||
background: #F6FFED;
|
||||
color: #52C41A;
|
||||
border: 1px solid #B7EB8F;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
padding: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.loading-container {
|
||||
padding: 60px var(--spacing-lg);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
padding: 60px var(--spacing-lg);
|
||||
}
|
||||
|
||||
.card {
|
||||
background: var(--background-color-primary);
|
||||
border-radius: var(--border-radius-md);
|
||||
overflow: hidden;
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
padding: var(--spacing-md) var(--spacing-lg);
|
||||
border-bottom: 1px solid var(--divider-color);
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--text-color-primary);
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.info-grid {
|
||||
display: grid;
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
|
||||
&.full-width {
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.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;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// 产品相关样式
|
||||
.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;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
}
|
||||
|
||||
.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);
|
||||
|
||||
&.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);
|
||||
}
|
||||
}
|
||||
|
||||
// 审批历史样式
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.van-steps--vertical) {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
:deep(.van-step__content) {
|
||||
padding-bottom: var(--spacing-lg);
|
||||
}
|
||||
|
||||
// 审批操作按钮
|
||||
.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);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
padding: var(--spacing-lg);
|
||||
border-top: 1px solid var(--divider-color);
|
||||
}
|
||||
}
|
||||
|
||||
// 意见标签样式
|
||||
.opinion-tags {
|
||||
margin-bottom: var(--spacing-lg);
|
||||
|
||||
.tags-title {
|
||||
font-size: 14px;
|
||||
color: var(--text-color-secondary);
|
||||
margin-bottom: var(--spacing-md);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.tags-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--spacing-sm);
|
||||
|
||||
.opinion-tag {
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.opinion-input {
|
||||
.van-field {
|
||||
border: 1px solid var(--divider-color);
|
||||
border-radius: var(--border-radius-sm);
|
||||
background: var(--background-color-secondary);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -28,6 +28,7 @@ export default defineConfig({
|
|||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://localhost:28080',
|
||||
// target: 'http://oms.unissense.top',
|
||||
changeOrigin: true,
|
||||
secure: false,
|
||||
rewrite: (path) => path.replace(/^\/api/, ''),
|
||||
|
|
|
|||
380
概要设计文档.md
380
概要设计文档.md
|
|
@ -29,11 +29,18 @@ oms_h5/
|
|||
│ └── index.html
|
||||
├── src/
|
||||
│ ├── api/ # API接口管理
|
||||
│ │ ├── order.ts # 订单相关接口
|
||||
│ │ └── purchase.ts # 采购相关接口
|
||||
│ ├── components/ # 公共组件
|
||||
│ ├── views/ # 页面组件
|
||||
│ │ ├── List/ # 列表页面
|
||||
│ │ └── Detail/ # 详情页面
|
||||
│ │ ├── Home/ # 主页面（审批中心）
|
||||
│ │ ├── List/ # 订单审批列表页面
|
||||
│ │ ├── Purchase/ # 采购审批列表页面
|
||||
│ │ ├── Detail/ # 订单详情页面
|
||||
│ │ └── PurchaseDetail/ # 采购详情页面
|
||||
│ ├── store/ # 状态管理
|
||||
│ │ ├── order.ts # 订单状态管理
|
||||
│ │ └── purchase.ts # 采购状态管理
|
||||
│ ├── utils/ # 工具函数
|
||||
│ ├── types/ # TypeScript类型定义
|
||||
│ └── styles/ # 全局样式
|
||||
|
|
@ -43,7 +50,48 @@ oms_h5/
|
|||
|
||||
## 3. 功能模块设计
|
||||
|
||||
### 3.1 列表页面模块
|
||||
### 3.0 主页面模块（审批中心）
|
||||
**功能描述**: 提供左侧抽屉菜单导航，统一管理不同类型的审批入口
|
||||
|
||||
**页面架构**:
|
||||
- **顶部导航栏**: 显示当前菜单标题、菜单图标和退出按钮
|
||||
- **左侧抽屉菜单**: 展示所有审批类型的菜单项
|
||||
- **内容区域**: 根据选中的菜单项动态显示对应的审批列表
|
||||
|
||||
**主要功能**:
|
||||
- 左侧抽屉菜单切换不同审批类型
|
||||
- 菜单项包含图标、标题和激活状态显示
|
||||
- 统一的退出登录功能
|
||||
- 响应式菜单宽度（占屏幕70%）
|
||||
|
||||
**菜单项列表**:
|
||||
1. **订单审批** (icon: notes-o)
|
||||
- 展示订单审批的待审批和已审批列表
|
||||
- 支持订单详情查看和审批操作
|
||||
2. **采购审批** (icon: shopping-cart-o)
|
||||
- 展示采购审批的待审批和已审批列表
|
||||
- 支持采购详情查看和审批操作
|
||||
|
||||
**交互行为**:
|
||||
- 点击左上角菜单图标打开抽屉
|
||||
- 点击菜单项切换审批类型并关闭抽屉
|
||||
- 当前选中的菜单项高亮显示
|
||||
- 支持点击遮罩层或关闭图标关闭抽屉
|
||||
|
||||
**路由配置**:
|
||||
```typescript
|
||||
{
|
||||
path: '/list',
|
||||
name: 'Home',
|
||||
component: () => import('@/views/Home/index.vue'),
|
||||
meta: {
|
||||
title: '审批中心',
|
||||
requiresAuth: true
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 3.1 订单审批列表模块
|
||||
**功能描述**: 采用双Tab设计，支持查看待审批和已审批两种状态的订单列表
|
||||
|
||||
**页面架构**:
|
||||
|
|
@ -57,6 +105,13 @@ oms_h5/
|
|||
- 下拉刷新功能
|
||||
- 点击跳转详情页（已审批为只读模式）
|
||||
|
||||
**组件位置**: `src/views/List/index.vue`
|
||||
|
||||
**设计说明**:
|
||||
- 该组件作为子组件嵌入到Home主页面中
|
||||
- 移除了独立的顶部导航栏和退出按钮
|
||||
- 保持原有的搜索、列表展示和审批功能
|
||||
|
||||
#### 3.1.1 待审批Tab
|
||||
|
||||
**数据展示字段**:
|
||||
|
|
@ -195,6 +250,164 @@ POST /flow/completed/list
|
|||
}
|
||||
```
|
||||
|
||||
### 3.1.5 采购审批列表模块
|
||||
**功能描述**: 采用双Tab设计，支持查看待审批和已审批两种状态的采购单列表
|
||||
|
||||
**页面架构**:
|
||||
- **Tab1 - 待审批**: 展示当前用户需要审批的采购单列表
|
||||
- **Tab2 - 已审批**: 展示用户已完成审批的采购历史记录
|
||||
|
||||
**主要功能**:
|
||||
- 双Tab切换界面，独立状态管理
|
||||
- 支持关键词搜索（待审批：采购单号；已审批：采购合同名称）
|
||||
- 无限滚动分页加载
|
||||
- 下拉刷新功能
|
||||
- 点击跳转详情页（已审批为只读模式）
|
||||
|
||||
**组件位置**: `src/views/Purchase/index.vue`
|
||||
|
||||
**设计说明**:
|
||||
- 该组件作为子组件嵌入到Home主页面中
|
||||
- UI结构和交互逻辑参照订单审批列表模块
|
||||
- 接口调用部分预留TODO标记，待后续对接
|
||||
|
||||
**待审批Tab数据展示字段**:
|
||||
- 采购单号（purchaseNo）
|
||||
- 审批状态（approveStatus）
|
||||
- 制造商名称（vendorName）
|
||||
- 汇智负责人（ownerName）
|
||||
- 采购金额（totalAmount）
|
||||
- 创建时间（createTime）
|
||||
|
||||
**已审批Tab数据展示字段**:
|
||||
- 合同编号（businessKey）
|
||||
- 合同名称（businessName）
|
||||
- 流程名称（processName）
|
||||
- 发起人（applyUserName）
|
||||
- 审批时间（approveTime）
|
||||
- 审批状态（approveStatus: 2-驳回，3-通过，其他-提交）
|
||||
- 审批意见（approveOpinion）
|
||||
|
||||
**接口需求**:
|
||||
```typescript
|
||||
// 获取待审批采购列表
|
||||
GET /sip/purchaseorder/approveList
|
||||
参数: {
|
||||
page: number,
|
||||
pageSize: number,
|
||||
keyword?: string
|
||||
}
|
||||
|
||||
响应结果示例:{
|
||||
"code": 0,
|
||||
"msg": "操作成功",
|
||||
"data": {
|
||||
"total": 100,
|
||||
"rows": [
|
||||
{
|
||||
"id": 1,
|
||||
"purchaseNo": "PO20251201001",
|
||||
"approveStatus": "待审批",
|
||||
"vendorName": "XX制造商",
|
||||
"ownerName": "张三",
|
||||
"totalAmount": 100000.00,
|
||||
"createTime": "2025-12-01 10:00:00"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
// 待实现：获取已审批采购列表
|
||||
GET /sip/purchaseorder/completedList
|
||||
参数: {
|
||||
page: number,
|
||||
pageSize: number,
|
||||
keyword?: string
|
||||
}
|
||||
```
|
||||
|
||||
**路由配置**:
|
||||
```typescript
|
||||
// 采购详情页面路由
|
||||
{
|
||||
path: '/purchase-detail/:id',
|
||||
name: 'PurchaseDetail',
|
||||
component: () => import('@/views/PurchaseDetail/index.vue'),
|
||||
meta: {
|
||||
title: '采购详情',
|
||||
requiresAuth: true
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 3.1.6 采购详情页面模块
|
||||
**功能描述**: 展示采购单详细信息，包括订单信息和采购产品列表
|
||||
|
||||
**页面架构**:
|
||||
- **Tab1 - 订单信息**: 展示采购单的基本信息
|
||||
- **Tab2 - 采购列表**: 展示采购的产品明细
|
||||
|
||||
**主要功能**:
|
||||
- 采购单基本信息展示
|
||||
- 采购产品列表展示
|
||||
- 产品总金额计算
|
||||
|
||||
**组件位置**: `src/views/PurchaseDetail/index.vue`
|
||||
|
||||
**订单信息Tab展示字段**:
|
||||
- 采购单号（purchaseNo）
|
||||
- 发起日期（createTime）
|
||||
- 采购员（purchaserName）
|
||||
- 联系电话（purchaserMobile）
|
||||
- 联系邮箱（purchaserEmail）
|
||||
- 入库仓（warehouseName）
|
||||
- 付款方式（payMethodDesc）
|
||||
- 汇智负责人（ownerName）
|
||||
- 备注（remark）
|
||||
|
||||
**采购列表Tab展示字段**:
|
||||
数据来源：`omsPurchaseOrderItemList` 数组
|
||||
- 产品编码（productCode）
|
||||
- 产品型号（productModel）
|
||||
- 描述（productDescription）
|
||||
- 数量（quantity）
|
||||
- 单价（price）
|
||||
- 小计（自动计算：price × quantity）
|
||||
- 总金额（所有产品小计之和）
|
||||
|
||||
**接口需求**:
|
||||
```typescript
|
||||
// 获取采购详情
|
||||
GET /sip/purchaseorder/code/{purchaseNo}
|
||||
|
||||
响应结果示例:{
|
||||
"code": 0,
|
||||
"msg": "操作成功",
|
||||
"data": {
|
||||
"id": 1,
|
||||
"purchaseNo": "PO20251201001",
|
||||
"createTime": "2025-12-01 10:00:00",
|
||||
"purchaserName": "张三",
|
||||
"purchaserMobile": "13800138000",
|
||||
"purchaserEmail": "zhangsan@example.com",
|
||||
"warehouseName": "北京仓库",
|
||||
"payMethodDesc": "货到付款",
|
||||
"ownerName": "李四",
|
||||
"remark": "紧急采购",
|
||||
"omsPurchaseOrderItemList": [
|
||||
{
|
||||
"id": 1,
|
||||
"productCode": "P001",
|
||||
"productModel": "Model-A",
|
||||
"productDescription": "产品描述信息",
|
||||
"quantity": 10,
|
||||
"price": 100.00
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 3.2 详情页面模块
|
||||
**功能描述**: 展示工单详细信息和审批操作
|
||||
|
||||
|
|
@ -838,21 +1051,58 @@ interface ApprovalRecord {
|
|||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
redirect: '/list'
|
||||
redirect: '/login'
|
||||
},
|
||||
{
|
||||
path: '/login',
|
||||
name: 'Login',
|
||||
component: () => import('@/views/Login/index.vue'),
|
||||
meta: {
|
||||
title: '系统登录',
|
||||
requiresAuth: false
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/list',
|
||||
name: 'OrderList',
|
||||
component: () => import('@/views/List/index.vue')
|
||||
name: 'Home',
|
||||
component: () => import('@/views/Home/index.vue'),
|
||||
meta: {
|
||||
title: '审批中心',
|
||||
requiresAuth: true
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/detail/:id',
|
||||
name: 'OrderDetail',
|
||||
component: () => import('@/views/Detail/index.vue')
|
||||
component: () => import('@/views/Detail/index.vue'),
|
||||
meta: {
|
||||
title: '订单详情',
|
||||
requiresAuth: true
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/purchase-detail/:id',
|
||||
name: 'PurchaseDetail',
|
||||
component: () => import('@/views/PurchaseDetail/index.vue'),
|
||||
meta: {
|
||||
title: '采购详情',
|
||||
requiresAuth: true
|
||||
}
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
**路由说明**:
|
||||
- `/login`: 登录页面，不需要认证
|
||||
- `/list`: 审批中心主页面，包含左侧抽屉菜单和审批列表
|
||||
- 默认展示订单审批列表
|
||||
- 可通过抽屉菜单切换到采购审批列表
|
||||
- `/detail/:id`: 订单详情页面
|
||||
- 支持 `readonly=true` 查询参数用于只读模式
|
||||
- `/purchase-detail/:id`: 采购详情页面（独立实现）
|
||||
- 展示采购单基本信息和产品列表
|
||||
- 采购单号作为路由参数
|
||||
|
||||
## 7. 性能优化策略
|
||||
|
||||
### 7.1 代码层面
|
||||
|
|
@ -1461,3 +1711,119 @@ interface CompletedListParams {
|
|||
- **变更日志**: 详细记录版本变更内容
|
||||
- **回滚机制**: 快速版本回滚能力
|
||||
- **灰度发布**: 分批次灰度发布策略
|
||||
|
||||
---
|
||||
|
||||
## 11. 更新日志
|
||||
|
||||
### v1.3 - 2025-12-01
|
||||
**功能完善：实现采购详情页面**
|
||||
|
||||
**完成功能**:
|
||||
1. **类型定义扩展** (`src/types/index.ts`)
|
||||
- 新增 PurchaseOrderItem 采购产品项类型
|
||||
- 新增 PurchaseDetail 采购详情类型
|
||||
- 定义详情页面所需的所有字段类型
|
||||
|
||||
2. **状态管理增强** (`src/store/purchase.ts`)
|
||||
- 添加详情相关状态：currentPurchase、detailLoading
|
||||
- 实现 fetchPurchaseDetail() 获取采购详情方法
|
||||
- 实现 clearCurrentPurchase() 清空详情方法
|
||||
- 添加 purchaseItems getter 获取采购产品列表
|
||||
|
||||
3. **采购详情页面** (`src/views/PurchaseDetail/index.vue`)
|
||||
- 独立实现采购详情页面（不复用订单详情组件）
|
||||
- **订单信息Tab**：展示采购单号、发起日期、采购员、联系方式、入库仓、付款方式、负责人、备注等信息
|
||||
- **采购列表Tab**：展示产品编码、型号、描述、数量、单价，自动计算小计和总金额
|
||||
- 支持产品列表滚动查看
|
||||
- 实现总金额自动计算
|
||||
|
||||
4. **路由配置更新** (`src/router/index.ts`)
|
||||
- 更新采购详情路由，使用独立的 PurchaseDetail 组件
|
||||
- 路由参数为采购单号 purchaseNo
|
||||
|
||||
5. **接口对接**
|
||||
- 对接采购详情接口：GET /sip/purchaseorder/code/{purchaseNo}
|
||||
- 完整展示采购单基本信息和产品列表
|
||||
|
||||
**设计亮点**:
|
||||
- 采购详情页面采用双Tab设计，信息分类清晰
|
||||
- 产品列表采用卡片式展示，每个产品独立展示完整信息
|
||||
- 自动计算产品小计和总金额，方便用户快速了解采购成本
|
||||
- UI/UX与订单详情保持一致的设计风格
|
||||
|
||||
---
|
||||
|
||||
### v1.2 - 2025-12-01
|
||||
**功能实现：对接采购审批接口**
|
||||
|
||||
**完成功能**:
|
||||
1. **类型定义** (`src/types/index.ts`)
|
||||
- 新增采购订单信息类型 Purchase
|
||||
- 新增采购列表查询参数类型 PurchaseListParams
|
||||
|
||||
2. **API接口层** (`src/api/purchase.ts`)
|
||||
- 实现获取采购待审批列表接口 (GET /sip/purchaseorder/approveList)
|
||||
- 预留已审批列表、详情、审批提交接口
|
||||
|
||||
3. **状态管理** (`src/store/purchase.ts`)
|
||||
- 创建采购状态管理 store
|
||||
- 实现待审批列表加载、搜索、刷新功能
|
||||
- 实现已审批列表基础架构（待对接）
|
||||
- 支持分页加载和无限滚动
|
||||
|
||||
4. **采购列表页面** (`src/views/Purchase/index.vue`)
|
||||
- 对接真实接口获取采购待审批数据
|
||||
- 展示字段：采购单号、审批状态、制造商名称、汇智负责人、采购金额
|
||||
- 支持搜索、下拉刷新、上拉加载更多
|
||||
- 保持与订单审批页面一致的UI/UX
|
||||
|
||||
**接口对接状态**:
|
||||
- ✅ 待审批列表：GET /sip/purchaseorder/approveList
|
||||
- ✅ 已审批列表：GET /sip/purchaseorder/approved/list
|
||||
- ✅ 采购详情：GET /sip/purchaseorder/code/{purchaseNo}
|
||||
- ⏳ 审批提交：待确认接口地址
|
||||
|
||||
---
|
||||
|
||||
### v1.1 - 2025-12-01
|
||||
**架构优化：添加左侧抽屉菜单支持多审批类型**
|
||||
|
||||
**新增功能**:
|
||||
1. **审批中心主页面** (`src/views/Home/index.vue`)
|
||||
- 新增左侧抽屉菜单导航
|
||||
- 支持多种审批类型切换
|
||||
- 统一管理顶部导航栏和退出登录功能
|
||||
- 抽屉菜单占屏幕70%宽度，支持遮罩层关闭
|
||||
|
||||
2. **采购审批模块** (`src/views/Purchase/index.vue`)
|
||||
- 参照订单审批实现采购审批列表页面
|
||||
- 支持待审批和已审批双Tab切换
|
||||
- 支持采购单号和合同名称搜索
|
||||
- 接口部分预留，待后续对接
|
||||
|
||||
**架构调整**:
|
||||
1. **路由重构**
|
||||
- `/list` 路径改为指向审批中心主页面
|
||||
- 新增 `/purchase-detail/:id` 采购详情路由
|
||||
- 完善路由元信息配置
|
||||
|
||||
2. **订单审批列表组件优化**
|
||||
- 移除独立的顶部导航栏和退出按钮
|
||||
- 作为子组件嵌入到审批中心主页面
|
||||
- 保持原有功能和交互逻辑不变
|
||||
|
||||
**菜单项配置**:
|
||||
- 订单审批 (icon: notes-o)
|
||||
- 采购审批 (icon: shopping-cart-o)
|
||||
|
||||
**后续扩展**:
|
||||
- 左侧抽屉菜单采用配置化设计，便于后续添加更多审批类型
|
||||
- 菜单项包含图标、标题、路由等完整配置
|
||||
- 支持菜单项的激活状态显示和权限控制
|
||||
|
||||
---
|
||||
|
||||
**文档版本**: v1.3
|
||||
**更新时间**: 2025-12-01
|
||||
**负责人**: 开发团队
|
||||
Loading…
Reference in New Issue