Compare commits
No commits in common. "38d3071ff960e32d932e6f7087c96ad4c1d754aa" and "a66959fd224840ee63f3907f9b0dc554dbd7b740" have entirely different histories.
38d3071ff9
...
a66959fd22
|
|
@ -1,3 +1,3 @@
|
|||
VITE_API_BASE_URL=http://m.oms.unissense.top
|
||||
VITE_API_BASE_URL=https://your-api-domain.com
|
||||
VITE_APP_TITLE=订单审批系统
|
||||
VITE_FILE_BASE_URL=http://m.oms.unissense.top
|
||||
VITE_FILE_BASE_URL=https://your-api-domain.com
|
||||
|
|
@ -9,7 +9,6 @@ declare module 'vue' {
|
|||
export interface GlobalComponents {
|
||||
RouterLink: typeof import('vue-router')['RouterLink']
|
||||
RouterView: typeof import('vue-router')['RouterView']
|
||||
VanBadge: typeof import('vant/es')['Badge']
|
||||
VanButton: typeof import('vant/es')['Button']
|
||||
VanCellGroup: typeof import('vant/es')['CellGroup']
|
||||
VanEmpty: typeof import('vant/es')['Empty']
|
||||
|
|
|
|||
18
package.json
18
package.json
|
|
@ -5,20 +5,18 @@
|
|||
"description": "微信小程序H5审批系统",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": " vite build",
|
||||
"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": {
|
||||
"@vant/touch-emulator": "^1.4.0",
|
||||
"axios": "^1.5.0",
|
||||
"pdfjs-dist": "^5.4.449",
|
||||
"vue": "^3.3.4",
|
||||
"vue-router": "^4.2.4",
|
||||
"pinia": "^2.1.6",
|
||||
"vant": "^4.6.6",
|
||||
"vue": "^3.3.4",
|
||||
"vue-pdf-embed": "^2.1.3",
|
||||
"vue-router": "^4.2.4"
|
||||
"axios": "^1.5.0",
|
||||
"@vant/touch-emulator": "^1.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^20.5.9",
|
||||
|
|
@ -31,9 +29,9 @@
|
|||
"prettier": "^3.0.2",
|
||||
"sass": "^1.66.1",
|
||||
"typescript": "~5.1.6",
|
||||
"unplugin-auto-import": "^0.16.6",
|
||||
"unplugin-vue-components": "^0.25.2",
|
||||
"vite": "^4.4.9",
|
||||
"vue-tsc": "^1.8.8"
|
||||
"vue-tsc": "^1.8.8",
|
||||
"unplugin-auto-import": "^0.16.6",
|
||||
"unplugin-vue-components": "^0.25.2"
|
||||
}
|
||||
}
|
||||
11
src/App.vue
11
src/App.vue
|
|
@ -5,16 +5,7 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted } from 'vue'
|
||||
import { useAuthStore } from '@/store/auth'
|
||||
|
||||
onMounted(() => {
|
||||
const authStore = useAuthStore()
|
||||
// 检查本地存储的认证状态，如果已认证，则获取用户信息
|
||||
if (authStore.isAuthenticated) {
|
||||
authStore.getInfo()
|
||||
}
|
||||
})
|
||||
// App根组件
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
|
|
|||
|
|
@ -18,17 +18,3 @@ export const login = (params: LoginParams): Promise<AxiosResponse<ApiResponse<{
|
|||
|
||||
return http.post('/login', formData)
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取用户信息
|
||||
*/
|
||||
export const getInfo = (): Promise<AxiosResponse<ApiResponse<any>>> => {
|
||||
return http.get('/getInfo')
|
||||
}
|
||||
|
||||
/**
|
||||
* 用户退出登录
|
||||
*/
|
||||
export const logout = (): Promise<AxiosResponse<ApiResponse<any>>> => {
|
||||
return http.post('/logout')
|
||||
}
|
||||
|
|
@ -1,55 +0,0 @@
|
|||
import http from '@/utils/http'
|
||||
import type { ApiResponse, FinancePayable, FinancePayableListParams } from '@/types'
|
||||
import type { AxiosResponse } from 'axios'
|
||||
|
||||
/**
|
||||
* 获取应付审批列表
|
||||
*/
|
||||
export const getPayableList = (params: FinancePayableListParams): Promise<AxiosResponse<ApiResponse<{
|
||||
total: number
|
||||
rows: FinancePayable[]
|
||||
}>>> => {
|
||||
// 使用 FormData 传递参数
|
||||
const formData = new FormData()
|
||||
formData.append('pageNum', params.pageNum.toString())
|
||||
formData.append('pageSize', params.pageSize.toString())
|
||||
formData.append('processKey', params.processKey)
|
||||
|
||||
// 如果有其他参数，也可以追加
|
||||
if (params.keyword) {
|
||||
// 虽然prompt没 explicitly ask for keyword search in the list params beyond page/processKey,
|
||||
// usually search is needed. But strict adherence to prompt: "参数为分页参数pageNum 和pageSize processKey:finance_payment"
|
||||
// I will adhere to prompt strict parameters for now.
|
||||
}
|
||||
|
||||
return http.post('/finance/payment/approve/list', formData)
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取应付审批详情
|
||||
*/
|
||||
export const getPayableDetail = (paymentBillCode: string | number): Promise<AxiosResponse<ApiResponse<any>>> => {
|
||||
return http.get(`/finance/payment/code/${paymentBillCode}`)
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取退款审批列表
|
||||
*/
|
||||
export const getReceiveList = (params: FinancePayableListParams): Promise<AxiosResponse<ApiResponse<{
|
||||
total: number
|
||||
rows: any[] // 使用 generic any 或 FinanceReceive
|
||||
}>>> => {
|
||||
const formData = new FormData()
|
||||
formData.append('pageNum', params.pageNum.toString())
|
||||
formData.append('pageSize', params.pageSize.toString())
|
||||
formData.append('processKey', params.processKey)
|
||||
|
||||
return http.post('/finance/receipt/approve/list', formData)
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取退款审批详情
|
||||
*/
|
||||
export const getReceiveDetail = (code: string | number): Promise<AxiosResponse<ApiResponse<any>>> => {
|
||||
return http.get(`/finance/receipt/code/${code}`)
|
||||
}
|
||||
|
|
@ -1,18 +1,18 @@
|
|||
import http from '@/utils/http'
|
||||
import type { ApiResponse, Order, OrderDetailResponse, ListParams, CompletedApprovalItem, CompletedListParams, BatchApprovalParams } from '@/types'
|
||||
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对象
|
||||
// 创建FormData对象
|
||||
const formData = new FormData()
|
||||
|
||||
// 动态地将params中的所有键值对添加到formData中
|
||||
// 添加参数到FormData
|
||||
if (params.approve) formData.append('approve', params.approve)
|
||||
formData.append('page', params.page.toString())
|
||||
formData.append('pageSize', params.pageSize.toString())
|
||||
|
|
@ -29,23 +29,23 @@ export const getOrderDetail = (id: string | number): Promise<AxiosResponse<ApiRe
|
|||
}
|
||||
|
||||
/**
|
||||
* 提交审批
|
||||
* 提交审批结果
|
||||
*/
|
||||
export const submitApproval = (params: any): Promise<AxiosResponse<ApiResponse<any>>> => {
|
||||
// 创建一个新的FormData对象
|
||||
// 创建FormData对象
|
||||
const formData = new FormData()
|
||||
|
||||
// 动态地将params中的所有键值对添加到formData中
|
||||
// 将所有参数添加到FormData中
|
||||
Object.keys(params).forEach(key => {
|
||||
if (params[key] !== undefined && params[key] !== null) {
|
||||
// 如果字段是variables，它是一个对象，需要特殊处理
|
||||
// 特殊处理variables参数，它应该是一个对象
|
||||
if (key === 'variables' && typeof params[key] === 'object' && params[key] !== null) {
|
||||
// 将variables对象中的每个键值对添加到formData
|
||||
// 将variables对象的每个属性单独添加到FormData中
|
||||
Object.keys(params[key]).forEach(variableKey => {
|
||||
if (params[key][variableKey] !== undefined && params[key][variableKey] !== null) {
|
||||
formData.append(`variables[${variableKey}]`, params[key][variableKey].toString());
|
||||
formData.append(`variables[${variableKey}]`, params[key][variableKey].toString())
|
||||
}
|
||||
});
|
||||
})
|
||||
} else if (key === 'taxRateData' && Array.isArray(params[key])) {
|
||||
// 特殊处理taxRateData数组
|
||||
params[key].forEach((item: any, index: number) => {
|
||||
|
|
@ -63,29 +63,3 @@ export const submitApproval = (params: any): Promise<AxiosResponse<ApiResponse<a
|
|||
|
||||
return http.post('/project/order/order/approve', formData)
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取已审批列表
|
||||
*/
|
||||
export const getCompletedOrderList = (params: CompletedListParams): Promise<AxiosResponse<ApiResponse<{
|
||||
total: number
|
||||
rows: CompletedApprovalItem[]
|
||||
}>>> => {
|
||||
// 创建一个新的FormData对象
|
||||
const formData = new FormData()
|
||||
|
||||
// 动态地将params中的所有键值对添加到formData中
|
||||
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.join(','))
|
||||
|
||||
return http.post('/flow/completed/list', formData)
|
||||
}
|
||||
|
||||
/**
|
||||
* 批量审批
|
||||
*/
|
||||
export const batchApproval = (params: BatchApprovalParams): Promise<AxiosResponse<ApiResponse<any>>> => {
|
||||
return http.post('/project/order/order/approve/batch', params)
|
||||
}
|
||||
|
|
@ -1,59 +0,0 @@
|
|||
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)
|
||||
}
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
import http from '@/utils/http'
|
||||
import type { ApiResponse } from '@/types'
|
||||
import type { AxiosResponse } from 'axios'
|
||||
|
||||
export interface DictData {
|
||||
dictCode: number
|
||||
dictSort: number
|
||||
dictLabel: string
|
||||
dictValue: string
|
||||
dictType: string
|
||||
cssClass: string
|
||||
listClass: string
|
||||
isDefault: string
|
||||
status: string
|
||||
default: boolean
|
||||
remark?: string
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据字典类型查询字典数据信息
|
||||
* @param dictType 字典类型
|
||||
*/
|
||||
export const getDicts = (dictType: string): Promise<AxiosResponse<ApiResponse<DictData[]>>> => {
|
||||
return http.get(`/system/dict/data/type/${dictType}`)
|
||||
}
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
import http from '@/utils/http'
|
||||
import type { ApiResponse } from '@/types'
|
||||
import type { AxiosResponse } from 'axios'
|
||||
|
||||
export interface TodoStatistics {
|
||||
purchase_order_online: number
|
||||
order_approve: number
|
||||
finance_payment: number
|
||||
finance_receipt_refound: number
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取待办事项统计
|
||||
*/
|
||||
export const getTodoStatistics = (): Promise<AxiosResponse<ApiResponse<TodoStatistics>>> => {
|
||||
return http.get('/flow/todo/statistics')
|
||||
}
|
||||
|
|
@ -5,8 +5,6 @@ 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: 'Home',
|
||||
component: () => import('@/views/Home/index.vue'),
|
||||
name: 'OrderList',
|
||||
component: () => import('@/views/List/index.vue'),
|
||||
meta: {
|
||||
title: '审批中心',
|
||||
title: '订单列表',
|
||||
requiresAuth: true
|
||||
}
|
||||
},
|
||||
|
|
@ -34,33 +34,6 @@ const routes: RouteRecordRaw[] = [
|
|||
title: '订单详情',
|
||||
requiresAuth: true
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/purchase-detail/:id',
|
||||
name: 'PurchaseDetail',
|
||||
component: () => import('@/views/PurchaseDetail/index.vue'),
|
||||
meta: {
|
||||
title: '采购详情',
|
||||
requiresAuth: true
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/finance/payable/detail/:paymentBillCode',
|
||||
name: 'FinancePayableDetail',
|
||||
component: () => import('@/views/finance/payable/detail.vue'),
|
||||
meta: {
|
||||
title: '应付详情',
|
||||
requiresAuth: true
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/finance/receive/detail/:code',
|
||||
name: 'FinanceReceiveDetail',
|
||||
component: () => import('@/views/finance/receive/detail.vue'),
|
||||
meta: {
|
||||
title: '退款详情',
|
||||
requiresAuth: true
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { defineStore } from 'pinia'
|
||||
import { login, getInfo, logout as logoutApi } from '@/api/auth'
|
||||
import { login } from '@/api/auth'
|
||||
import type { LoginParams } from '@/types'
|
||||
|
||||
interface AuthState {
|
||||
|
|
@ -52,46 +52,18 @@ export const useAuthStore = defineStore('auth', {
|
|||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取用户信息
|
||||
*/
|
||||
async getInfo() {
|
||||
if (this.userInfo) return; // 如果已有用户信息，则不再获取
|
||||
try {
|
||||
const response = await getInfo();
|
||||
if (response.data.code === 0) {
|
||||
const user = response.data.data.user;
|
||||
this.userInfo = user;
|
||||
} else {
|
||||
throw new Error(response.data.msg || '获取用户信息失败');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取用户信息失败:', error);
|
||||
// 这里可以选择是否要登出
|
||||
// await this.logout();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 用户登出
|
||||
*/
|
||||
async logout() {
|
||||
try {
|
||||
// 调用后端logout接口清除session
|
||||
await logoutApi()
|
||||
} catch (error) {
|
||||
console.warn('服务器退出登录失败，仅清除本地状态:', error)
|
||||
} finally {
|
||||
// 清除本地状态
|
||||
this.token = null
|
||||
this.userInfo = null
|
||||
this.isAuthenticated = false
|
||||
logout() {
|
||||
this.token = null
|
||||
this.userInfo = null
|
||||
this.isAuthenticated = false
|
||||
|
||||
// 清除localStorage中的认证状态
|
||||
localStorage.removeItem('isAuthenticated')
|
||||
// 清除localStorage中的认证状态
|
||||
localStorage.removeItem('isAuthenticated')
|
||||
|
||||
// 注意：这里不清除保存的用户名和密码，以便下次自动填充
|
||||
}
|
||||
// 注意：这里不清除保存的用户名和密码，以便下次自动填充
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -1,237 +0,0 @@
|
|||
import { defineStore } from 'pinia'
|
||||
import { ref } from 'vue'
|
||||
import { getPayableList } from '@/api/finance' // borrowing completed from finance api if I add it, or use generic
|
||||
// Actually I didn't add getCompleted to finance.ts, I should probably add it or use the one from purchase/order?
|
||||
// Better to add a generic one or specific one in finance.ts
|
||||
// Let's modify api/finance.ts to include getCompletedPayableList which calls /flow/completed/list
|
||||
import type { FinancePayable } from '@/types'
|
||||
|
||||
// Re-importing getCompletedPurchaseList is wrong if it's not there.
|
||||
// I will just use the same pattern as PurchaseStore.
|
||||
import http from '@/utils/http' // Direct call if needed or add to api
|
||||
|
||||
export const useFinanceStore = defineStore('finance', () => {
|
||||
// State
|
||||
const payableList = ref<FinancePayable[]>([])
|
||||
const loading = ref(false)
|
||||
const finished = ref(false)
|
||||
const page = ref(1)
|
||||
const pageSize = ref(10)
|
||||
const total = ref(0)
|
||||
|
||||
// Completed State
|
||||
const completedList = ref<any[]>([])
|
||||
const completedLoading = ref(false)
|
||||
const completedFinished = ref(false)
|
||||
const completedPage = ref(1)
|
||||
const completedPageSize = ref(10)
|
||||
|
||||
// Detail State
|
||||
const currentPayable = ref<any>({})
|
||||
const currentPayableTodo = ref<any>(null)
|
||||
const detailLoading = ref(false)
|
||||
|
||||
// Receive State
|
||||
const receiveList = ref<any[]>([])
|
||||
const receiveLoading = ref(false)
|
||||
const receiveFinished = ref(false)
|
||||
const receivePage = ref(1)
|
||||
const receiveTotal = ref(0)
|
||||
const currentReceive = ref<any>({})
|
||||
const currentReceiveTodo = ref<any>(null)
|
||||
|
||||
// Actions
|
||||
const loadPayableList = async (refresh = false) => {
|
||||
if (refresh) {
|
||||
page.value = 1
|
||||
finished.value = false
|
||||
payableList.value = []
|
||||
}
|
||||
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await getPayableList({
|
||||
pageNum: page.value,
|
||||
pageSize: pageSize.value,
|
||||
processKey: 'finance_payment'
|
||||
})
|
||||
|
||||
if (res.data.code === 0) {
|
||||
const rows = res.data.rows || []
|
||||
|
||||
if (refresh) {
|
||||
payableList.value = rows
|
||||
} else {
|
||||
payableList.value = [...payableList.value, ...rows]
|
||||
}
|
||||
|
||||
total.value = res.data.total || 0
|
||||
if (payableList.value.length >= total.value || rows.length < pageSize.value) {
|
||||
finished.value = true
|
||||
} else {
|
||||
page.value++
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to load payable list', error)
|
||||
finished.value = true
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const loadReceiveList = async (refresh = false) => {
|
||||
if (refresh) {
|
||||
receivePage.value = 1
|
||||
receiveFinished.value = false
|
||||
receiveList.value = []
|
||||
}
|
||||
|
||||
receiveLoading.value = true
|
||||
try {
|
||||
const { getReceiveList } = await import('@/api/finance')
|
||||
const res = await getReceiveList({
|
||||
pageNum: receivePage.value,
|
||||
pageSize: pageSize.value, // reusing pageSize from payable or create new? reusing is fine for now
|
||||
processKey: 'finance_receipt_refound'
|
||||
})
|
||||
|
||||
if (res.data.code === 0) {
|
||||
const rows = res.data.rows || []
|
||||
|
||||
if (refresh) {
|
||||
receiveList.value = rows
|
||||
} else {
|
||||
receiveList.value = [...receiveList.value, ...rows]
|
||||
}
|
||||
|
||||
receiveTotal.value = res.data.total || 0
|
||||
if (receiveList.value.length >= receiveTotal.value || rows.length < pageSize.value) {
|
||||
receiveFinished.value = true
|
||||
} else {
|
||||
receivePage.value++
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to load receive list', error)
|
||||
receiveFinished.value = true
|
||||
} finally {
|
||||
receiveLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const loadCompletedList = async (refresh = false, processKey = 'finance_payment') => {
|
||||
if (refresh) {
|
||||
completedPage.value = 1
|
||||
completedFinished.value = false
|
||||
completedList.value = []
|
||||
}
|
||||
|
||||
completedLoading.value = true
|
||||
try {
|
||||
const formData = new FormData()
|
||||
formData.append('page', completedPage.value.toString())
|
||||
formData.append('pageSize', completedPageSize.value.toString())
|
||||
formData.append('processKeyList', processKey)
|
||||
|
||||
const res = await http.post('/flow/completed/list', formData)
|
||||
|
||||
if (res.data.code === 0) {
|
||||
const rows = res.data.rows || []
|
||||
if (refresh) {
|
||||
completedList.value = rows
|
||||
} else {
|
||||
completedList.value = [...completedList.value, ...rows]
|
||||
}
|
||||
|
||||
if (rows.length < completedPageSize.value) {
|
||||
completedFinished.value = true
|
||||
} else {
|
||||
completedPage.value++
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to load completed list', error)
|
||||
completedFinished.value = true
|
||||
} finally {
|
||||
completedLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const fetchPayableDetail = async (id: string | number) => {
|
||||
detailLoading.value = true
|
||||
try {
|
||||
// Import getPayableDetail dynamically to avoid circular dependency if any? No, it's fine.
|
||||
// But I need to import it at the top.
|
||||
const { getPayableDetail } = await import('@/api/finance')
|
||||
const res = await getPayableDetail(id)
|
||||
if (res.data.code === 0) {
|
||||
currentPayable.value = res.data.data || res.data.rows || {} // handle structure
|
||||
// Attempt to extract todo info from response if available, similar to Purchase/Order
|
||||
// If not available in detail, we might need to rely on list passing it or separate call.
|
||||
// For now, assume it's in the detail or passed via other means.
|
||||
// If the detail response has 'todo' field:
|
||||
if (res.data.data?.todo) {
|
||||
currentPayableTodo.value = res.data.data.todo
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to load payable detail', error)
|
||||
} finally {
|
||||
detailLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const fetchReceiveDetail = async (id: string | number) => {
|
||||
detailLoading.value = true
|
||||
try {
|
||||
const { getReceiveDetail } = await import('@/api/finance')
|
||||
const res = await getReceiveDetail(id)
|
||||
if (res.data.code === 0) {
|
||||
currentReceive.value = res.data.data || res.data.rows || {}
|
||||
if (res.data.data?.todo) {
|
||||
currentReceiveTodo.value = res.data.data.todo
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to load receive detail', error)
|
||||
} finally {
|
||||
detailLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const resetState = () => {
|
||||
page.value = 1
|
||||
payableList.value = []
|
||||
finished.value = false
|
||||
loading.value = false
|
||||
|
||||
receivePage.value = 1
|
||||
receiveList.value = []
|
||||
receiveFinished.value = false
|
||||
receiveLoading.value = false
|
||||
}
|
||||
|
||||
return {
|
||||
payableList,
|
||||
loading,
|
||||
finished,
|
||||
loadPayableList,
|
||||
completedList,
|
||||
completedLoading,
|
||||
completedFinished,
|
||||
loadCompletedList,
|
||||
currentPayable,
|
||||
currentPayableTodo,
|
||||
detailLoading,
|
||||
fetchPayableDetail,
|
||||
receiveList,
|
||||
receiveLoading,
|
||||
receiveFinished,
|
||||
loadReceiveList,
|
||||
currentReceive,
|
||||
currentReceiveTodo,
|
||||
fetchReceiveDetail,
|
||||
resetState
|
||||
}
|
||||
})
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
import { defineStore } from 'pinia'
|
||||
import type { Order, OrderDetailResponse, ListParams, CompletedApprovalItem, CompletedListParams, BatchApprovalParams } from '@/types'
|
||||
import { getOrderList, getOrderDetail, getCompletedOrderList, batchApproval } from '@/api/order'
|
||||
import type { Order, OrderDetailResponse, ListParams } from '@/types'
|
||||
import { getOrderList, getOrderDetail } from '@/api/order'
|
||||
|
||||
interface OrderState {
|
||||
// 待审批列表相关
|
||||
// 列表相关
|
||||
orderList: Order[]
|
||||
loading: boolean
|
||||
finished: boolean
|
||||
|
|
@ -12,15 +12,6 @@ interface OrderState {
|
|||
total: number
|
||||
keyword: string
|
||||
|
||||
// 已审批列表相关
|
||||
completedList: CompletedApprovalItem[]
|
||||
completedLoading: boolean
|
||||
completedFinished: boolean
|
||||
completedCurrentPage: number
|
||||
completedPageSize: number
|
||||
completedTotal: number
|
||||
completedKeyword: string
|
||||
|
||||
// 详情相关
|
||||
currentOrder: any | null // 临时改为any来避免类型问题
|
||||
detailLoading: boolean
|
||||
|
|
@ -28,7 +19,6 @@ interface OrderState {
|
|||
|
||||
export const useOrderStore = defineStore('order', {
|
||||
state: (): OrderState => ({
|
||||
// 待审批列表状态
|
||||
orderList: [],
|
||||
loading: false,
|
||||
finished: false,
|
||||
|
|
@ -37,15 +27,6 @@ export const useOrderStore = defineStore('order', {
|
|||
total: 0,
|
||||
keyword: '',
|
||||
|
||||
// 已审批列表状态
|
||||
completedList: [],
|
||||
completedLoading: false,
|
||||
completedFinished: false,
|
||||
completedCurrentPage: 1,
|
||||
completedPageSize: 20,
|
||||
completedTotal: 0,
|
||||
completedKeyword: '',
|
||||
|
||||
currentOrder: null,
|
||||
detailLoading: false
|
||||
}),
|
||||
|
|
@ -60,11 +41,8 @@ export const useOrderStore = defineStore('order', {
|
|||
// 获取当前用户信息
|
||||
currentUser: (state) => state.currentOrder?.user,
|
||||
|
||||
// 检查待审批是否还有更多数据
|
||||
hasMore: (state) => state.orderList.length < state.total,
|
||||
|
||||
// 检查已审批是否还有更多数据
|
||||
completedHasMore: (state) => state.completedList.length < state.completedTotal
|
||||
// 检查是否还有更多数据
|
||||
hasMore: (state) => state.orderList.length < state.total
|
||||
},
|
||||
|
||||
actions: {
|
||||
|
|
@ -100,17 +78,16 @@ export const useOrderStore = defineStore('order', {
|
|||
}
|
||||
|
||||
this.total = total
|
||||
this.currentPage++
|
||||
|
||||
// 判断是否已加载完所有数据
|
||||
if (this.orderList.length >= total || rows.length === 0) {
|
||||
if (this.orderList.length >= total) {
|
||||
this.finished = true
|
||||
} else {
|
||||
// 只有当还有更多数据时才递增页码
|
||||
this.currentPage++
|
||||
}
|
||||
|
||||
return response
|
||||
} catch (error) {
|
||||
console.error('加载订单列表失败:', error)
|
||||
throw error
|
||||
} finally {
|
||||
this.loading = false
|
||||
|
|
@ -130,24 +107,30 @@ export const useOrderStore = defineStore('order', {
|
|||
*/
|
||||
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
|
||||
|
|
@ -161,108 +144,16 @@ export const useOrderStore = defineStore('order', {
|
|||
this.currentOrder = null
|
||||
},
|
||||
|
||||
/**
|
||||
* 加载已审批列表
|
||||
*/
|
||||
async loadCompletedOrderList(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: CompletedListParams = {
|
||||
page: this.completedCurrentPage,
|
||||
pageSize: this.completedPageSize,
|
||||
processKeyList:['order_approve_online','order_approve_offline'],
|
||||
businessName: this.completedKeyword || undefined
|
||||
}
|
||||
|
||||
|
||||
const response = await getCompletedOrderList(params)
|
||||
|
||||
const { total, rows } = response.data
|
||||
|
||||
|
||||
if (refresh) {
|
||||
this.completedList = rows
|
||||
} else {
|
||||
this.completedList.push(...rows)
|
||||
}
|
||||
|
||||
this.completedTotal = total
|
||||
|
||||
// 判断是否已加载完所有数据
|
||||
if (this.completedList.length >= total || rows.length === 0) {
|
||||
this.completedFinished = true
|
||||
console.log('已审批列表加载完成')
|
||||
} else {
|
||||
// 只有当还有更多数据时才递增页码
|
||||
this.completedCurrentPage++
|
||||
}
|
||||
return response
|
||||
} catch (error) {
|
||||
console.error('加载已审批列表失败:', error)
|
||||
// 发生错误时重置加载状态，但不标记为完成
|
||||
this.completedLoading = false
|
||||
throw error
|
||||
} finally {
|
||||
this.completedLoading = false
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 批量审批
|
||||
*/
|
||||
async batchApproval(params: BatchApprovalParams) {
|
||||
try {
|
||||
const response = await batchApproval(params)
|
||||
return response
|
||||
} catch (error) {
|
||||
throw error
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 搜索已审批订单
|
||||
*/
|
||||
async searchCompletedOrders(keyword: string) {
|
||||
this.completedKeyword = keyword
|
||||
await this.loadCompletedOrderList(true)
|
||||
},
|
||||
|
||||
/**
|
||||
* 重置列表状态
|
||||
*/
|
||||
resetListState() {
|
||||
// 重置待审批列表状态
|
||||
this.orderList = []
|
||||
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
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
@ -1,255 +0,0 @@
|
|||
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
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
import { defineStore } from 'pinia'
|
||||
import { getTodoStatistics } from '@/api/todo'
|
||||
import type { TodoStatistics } from '@/api/todo'
|
||||
|
||||
interface TodoState {
|
||||
statistics: TodoStatistics | null
|
||||
}
|
||||
|
||||
export const useTodoStore = defineStore('todo', {
|
||||
state: (): TodoState => ({
|
||||
statistics: null
|
||||
}),
|
||||
|
||||
actions: {
|
||||
/**
|
||||
* 获取待办事项统计
|
||||
*/
|
||||
async fetchTodoStatistics() {
|
||||
try {
|
||||
const response = await getTodoStatistics()
|
||||
if (response.status === 200 && response.data.code === 0) {
|
||||
// The actual data is in response.data.data
|
||||
this.statistics = response.data.data
|
||||
} else {
|
||||
throw new Error(response.data.msg || '获取待办统计失败')
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error('获取待办统计接口调用失败:', error)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
export interface ApiResponse<T = any> {
|
||||
code: number
|
||||
msg: string | null
|
||||
rows: any[T]
|
||||
data: T
|
||||
total?: number
|
||||
}
|
||||
|
||||
|
|
@ -20,7 +20,6 @@ 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 {
|
||||
|
|
@ -198,170 +197,3 @@ export interface ApprovalParams {
|
|||
updateTime?: string
|
||||
[property: string]: any
|
||||
}
|
||||
|
||||
// 已审批列表项类型
|
||||
export interface CompletedApprovalItem {
|
||||
allApproveUserName: string
|
||||
applyTime: string
|
||||
applyUserName: string
|
||||
approveOpinion: string
|
||||
approveStatus: ApprovalStatus
|
||||
approveTime: string
|
||||
approveUser: string
|
||||
approveUserName: string
|
||||
businessId: number
|
||||
businessKey: string
|
||||
businessName: 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
|
||||
taxRateData?: any
|
||||
todoId: string
|
||||
updateBy?: string
|
||||
updateTime?: string
|
||||
variables?: any
|
||||
}
|
||||
|
||||
// 已审批列表查询参数
|
||||
export interface CompletedListParams {
|
||||
businessName?: string
|
||||
page: number
|
||||
pageSize: number
|
||||
processKeyList: Array<string>
|
||||
}
|
||||
|
||||
// 批量审批参数
|
||||
export interface BatchApprovalParams {
|
||||
variables: {
|
||||
approveBtn: ApproveBtn
|
||||
comment: 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[] // 采购产品列表
|
||||
contractFileList?: AttachmentFile[] // 合同附件列表
|
||||
attachmentList?: AttachmentFile[] // 其他附件列表
|
||||
fileLog?: AttachmentFile // 单个附件
|
||||
[key: string]: any
|
||||
}
|
||||
|
||||
// ============= 应付审批相关类型定义 =============
|
||||
|
||||
export interface PayableDetailItem {
|
||||
payableBillCode: string
|
||||
projectName: string
|
||||
productType: string
|
||||
totalPriceWithTax: number
|
||||
paymentAmount: number
|
||||
[key: string]: any
|
||||
}
|
||||
|
||||
export interface FinancePayable {
|
||||
paymentBillCode: string // 付款单编号 (was businessKey)
|
||||
vendorName: string // 制造商名称
|
||||
totalPriceWithTax: number // 含税总价
|
||||
applyTime: string // 申请时间
|
||||
|
||||
// Detail fields
|
||||
payType?: string // 付款条件
|
||||
payConfigDay?: number // 付款周期
|
||||
totalPriceWithoutTax?: number // 未税总价
|
||||
taxAmount?: number // 税额
|
||||
paymentMethod?: string // 支付方式
|
||||
payBankNumber?: string // 银行账号
|
||||
payName?: string // 账户名称
|
||||
payBankOpenAddress?: string // 银行开户行
|
||||
bankNumber?: string // 银行行号
|
||||
|
||||
payableDetails?: PayableDetailItem[] // 应付单列表
|
||||
|
||||
[key: string]: any
|
||||
}
|
||||
|
||||
export interface FinancePayableListParams {
|
||||
pageNum: number
|
||||
pageSize: number
|
||||
processKey: string
|
||||
[key: string]: any
|
||||
}
|
||||
|
||||
export interface FinanceReceive {
|
||||
receiptBillCode: string // 退款单编号
|
||||
partnerName: string // 客户名称
|
||||
totalPriceWithTax: number // 退款金额
|
||||
applyTime: string // 申请时间
|
||||
|
||||
// Detail fields
|
||||
refundReason?: string // 退款原因
|
||||
refundMethod?: string // 退款方式
|
||||
bankAccount?: string // 银行账号
|
||||
bankName?: string // 银行名称
|
||||
|
||||
[key: string]: any
|
||||
}
|
||||
|
||||
export interface FinanceReceiveListParams {
|
||||
pageNum: number
|
||||
pageSize: number
|
||||
processKey: string
|
||||
[key: string]: any
|
||||
}
|
||||
|
|
@ -77,9 +77,7 @@ class HttpClient {
|
|||
message = data?.msg || `请求失败 (${status})`
|
||||
}
|
||||
} else if (error.request) {
|
||||
message = '会话已过期，请重新登录'
|
||||
localStorage.removeItem('isAuthenticated')
|
||||
window.location.href = '/login'
|
||||
message = '网络连接失败'
|
||||
}
|
||||
|
||||
showFailToast(message)
|
||||
|
|
|
|||
|
|
@ -17,12 +17,9 @@
|
|||
<div class="project-title">
|
||||
{{ currentOrderInfo.projectName }}REV.{{ currentOrderInfo.versionCode }}
|
||||
</div>
|
||||
<div class="project-status" v-if="route.query.readonly !== 'true'">
|
||||
<div class="project-status">
|
||||
待审批
|
||||
</div>
|
||||
<div class="project-status completed" v-else>
|
||||
已审批
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab标签页 -->
|
||||
|
|
@ -188,17 +185,13 @@
|
|||
<span class="product-label">单价</span>
|
||||
<span class="product-value">{{ formatAmount(product.price) }}</span>
|
||||
</div>
|
||||
<div class="product-row">
|
||||
<span class="product-label">折扣</span>
|
||||
<span class="product-value">{{ getProductDiscountRate(product.discount) }}</span>
|
||||
</div>
|
||||
<div class="product-row">
|
||||
<span class="product-label">税率</span>
|
||||
<span class="product-value">
|
||||
<input
|
||||
type="text"
|
||||
v-model="product.taxRate"
|
||||
:disabled="isTaxRateDisabled"
|
||||
:disabled="!isBusinessApproval"
|
||||
@change="updateTaxRate(product)"
|
||||
class="tax-rate-input"
|
||||
/>
|
||||
|
|
@ -237,17 +230,13 @@
|
|||
<span class="product-label">单价</span>
|
||||
<span class="product-value">{{ formatAmount(product.price) }}</span>
|
||||
</div>
|
||||
<div class="product-row">
|
||||
<span class="product-label">折扣</span>
|
||||
<span class="product-value">{{ getProductDiscountRate(product.discount) }}</span>
|
||||
</div>
|
||||
<div class="product-row">
|
||||
<span class="product-label">税率</span>
|
||||
<span class="product-value">
|
||||
<input
|
||||
type="text"
|
||||
v-model="product.taxRate"
|
||||
:disabled="isTaxRateDisabled"
|
||||
:disabled="!isBusinessApproval"
|
||||
@change="updateTaxRate(product)"
|
||||
class="tax-rate-input"
|
||||
/>
|
||||
|
|
@ -286,17 +275,13 @@
|
|||
<span class="product-label">单价</span>
|
||||
<span class="product-value">{{ formatAmount(product.price) }}</span>
|
||||
</div>
|
||||
<div class="product-row">
|
||||
<span class="product-label">折扣</span>
|
||||
<span class="product-value">{{ getProductDiscountRate(product.discount) }}</span>
|
||||
</div>
|
||||
<div class="product-row">
|
||||
<span class="product-label">税率</span>
|
||||
<span class="product-value">
|
||||
<input
|
||||
type="text"
|
||||
v-model="product.taxRate"
|
||||
:disabled="isTaxRateDisabled"
|
||||
:disabled="!isBusinessApproval"
|
||||
@change="updateTaxRate(product)"
|
||||
class="tax-rate-input"
|
||||
/>
|
||||
|
|
@ -529,11 +514,6 @@ const isBusinessApproval = computed(() => {
|
|||
return currentOrder.value?.todo?.taskName?.startsWith('商务')
|
||||
})
|
||||
|
||||
// 是否禁用税率输入框
|
||||
const isTaxRateDisabled = computed(() => {
|
||||
return !isBusinessApproval.value || route.query.readonly === 'true'
|
||||
})
|
||||
|
||||
// Tab页签
|
||||
const activeTab = ref('order')
|
||||
|
||||
|
|
@ -548,11 +528,7 @@ const hasProductInfo = computed(() => {
|
|||
})
|
||||
|
||||
const showApprovalButtons = computed(() => {
|
||||
// 如果是只读模式（来自已审批列表），则不显示审批按钮
|
||||
if (route.query.readonly === 'true') {
|
||||
return false
|
||||
}
|
||||
// 其他情况显示审批按钮
|
||||
// 直接展示审批按钮，无需条件控制
|
||||
return true
|
||||
})
|
||||
|
||||
|
|
@ -629,9 +605,6 @@ const getTotalAmount = () => {
|
|||
return total
|
||||
}
|
||||
|
||||
const getProductDiscountRate=(discount: number)=>{
|
||||
return (discount * 100).toFixed(1) + '%'
|
||||
}
|
||||
// 获取现金折扣率
|
||||
const getDiscountRate = () => {
|
||||
if (!currentOrderInfo.value || !currentOrderInfo.value.discountFold) {
|
||||
|
|
@ -649,16 +622,7 @@ const getFinalTotalAmount = () => {
|
|||
|
||||
// 返回上一页
|
||||
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('/');
|
||||
}
|
||||
}
|
||||
router.back()
|
||||
}
|
||||
|
||||
// 预览文件
|
||||
|
|
@ -821,10 +785,10 @@ const submitApproval = async () => {
|
|||
showSuccessToast(currentApprovalStatus.value === 0 ? '驳回成功' : '审批通过')
|
||||
approvalDialogVisible.value = false
|
||||
|
||||
// 如果是审批通过，跳转到订单列表页面
|
||||
// 如果是审批通过，跳转到列表页面
|
||||
if (currentApprovalStatus.value !== 0) {
|
||||
// 跳转到订单列表页面
|
||||
router.push('/list?tab=order')
|
||||
// 跳转到列表页面
|
||||
router.push('/list')
|
||||
} else {
|
||||
// 驳回情况下重新加载详情
|
||||
await orderStore.fetchOrderDetail(route.params.id as string)
|
||||
|
|
@ -903,12 +867,6 @@ onMounted(async () => {
|
|||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
border: 1px solid #FFD591;
|
||||
|
||||
&.completed {
|
||||
background: #F6FFED;
|
||||
color: #52C41A;
|
||||
border: 1px solid #B7EB8F;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
|
|
|
|||
|
|
@ -1,335 +0,0 @@
|
|||
<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" >
|
||||
|
||||
</van-icon>
|
||||
|
||||
|
||||
<span class="menu-title">{{ menu.title }} <van-badge :content="menu.count" class="menu-badge" v-if="menu.count > 0" /></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'" />
|
||||
|
||||
<!-- 应付审批 -->
|
||||
<FinancePayableList v-if="currentMenu === 'finance_payment'" />
|
||||
|
||||
<!-- 应收-退款审批 -->
|
||||
<FinanceReceiveList v-if="currentMenu === 'finance_receipt_refound'" />
|
||||
</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 { useTodoStore } from '@/store/todo'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import OrderList from '@/views/List/index.vue'
|
||||
import PurchaseList from '@/views/Purchase/index.vue'
|
||||
import FinancePayableList from '@/views/finance/payable/index.vue'
|
||||
import FinanceReceiveList from '@/views/finance/receive/index.vue'
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const authStore = useAuthStore()
|
||||
const todoStore = useTodoStore()
|
||||
const { statistics } = storeToRefs(todoStore)
|
||||
|
||||
// 抽屉显示状态
|
||||
const showDrawer = ref(true)
|
||||
|
||||
// 当前选中的菜单
|
||||
const currentMenu = ref('order')
|
||||
|
||||
// 菜单列表
|
||||
const menuList = computed(() => [
|
||||
{
|
||||
key: 'order',
|
||||
title: '订单审批',
|
||||
icon: 'notes-o',
|
||||
count: statistics.value?.order_approve || 0
|
||||
},
|
||||
{
|
||||
key: 'purchase',
|
||||
title: '采购审批',
|
||||
icon: 'shopping-cart-o',
|
||||
count: statistics.value?.purchase_order_online || 0
|
||||
},
|
||||
{
|
||||
key: 'finance_payment',
|
||||
title: '应付审批',
|
||||
icon: 'gold-coin-o',
|
||||
count: statistics.value?.finance_payment || 0
|
||||
},
|
||||
{
|
||||
key: 'finance_receipt_refound',
|
||||
title: '应收-退款审批',
|
||||
icon: 'refund-o',
|
||||
count: statistics.value?.finance_receipt_refound || 0
|
||||
}
|
||||
])
|
||||
|
||||
// 当前菜单标题
|
||||
const currentMenuTitle = computed(() => {
|
||||
const menu = menuList.value.find(m => m.key === currentMenu.value)
|
||||
return menu ? menu.title : '审批'
|
||||
})
|
||||
|
||||
// 选择菜单
|
||||
const selectMenu = (key: string) => {
|
||||
currentMenu.value = key
|
||||
showDrawer.value = false
|
||||
}
|
||||
|
||||
// 初始化菜单
|
||||
onMounted(() => {
|
||||
todoStore.fetchTodoStatistics()
|
||||
const tab = route.query.tab as string
|
||||
if (tab && ['order', 'purchase', 'finance_payment', 'finance_receipt_refound'].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-badge {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.menu-arrow {
|
||||
font-size: 16px;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
// 内容区域
|
||||
.content-area {
|
||||
min-height: calc(100vh - 56px);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
<div class="search-container">
|
||||
<van-search
|
||||
v-model="searchKeyword"
|
||||
:placeholder="currentTab === 'pending' ? '搜索订单编号、客户名称' : '搜索合同名称'"
|
||||
placeholder="搜索订单编号、客户名称"
|
||||
@search="handleSearch"
|
||||
@clear="handleClear"
|
||||
class="custom-search"
|
||||
|
|
@ -18,231 +18,77 @@
|
|||
</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="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 pending">
|
||||
待审批
|
||||
</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>
|
||||
</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="order-item" @click="goToCompletedDetail(item.businessId)">
|
||||
<div class="order-header">
|
||||
<div class="order-code">{{ item.businessKey }}</div>
|
||||
<div class="status-tag" :class="getCompletedStatusClass(item.approveStatus)">
|
||||
{{ getCompletedStatusText(item.approveStatus) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="order-info">
|
||||
<div class="info-row">
|
||||
<span class="label">合同名称：</span>
|
||||
<span class="value">{{ item.businessName }}</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 v-if="canBatchApprove && currentTab === 'pending' && orderList.length > 0" class="batch-actions-footer">
|
||||
<div class="footer-content">
|
||||
<van-button
|
||||
type="primary"
|
||||
size="large"
|
||||
@click="showBatchApprovalDialog"
|
||||
:loading="batchSubmitting"
|
||||
class="batch-approve-btn"
|
||||
>
|
||||
一键审批
|
||||
</van-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 批量审批意见弹窗 -->
|
||||
<van-popup
|
||||
v-model:show="batchApprovalDialogVisible"
|
||||
position="bottom"
|
||||
round
|
||||
:style="{ height: '50%' }"
|
||||
>
|
||||
<div class="approval-dialog">
|
||||
<div class="dialog-header">
|
||||
<span>审批意见</span>
|
||||
<van-icon name="cross" @click="batchApprovalDialogVisible = 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 getBatchOpinionTags()"
|
||||
:key="tag"
|
||||
:type="selectedBatchTag === tag ? 'primary' : 'default'"
|
||||
size="medium"
|
||||
@click="selectBatchTag(tag)"
|
||||
class="opinion-tag"
|
||||
>
|
||||
{{ tag }}
|
||||
</van-tag>
|
||||
<!-- 下拉刷新 -->
|
||||
<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 pending">
|
||||
待审批
|
||||
</div>
|
||||
</div>
|
||||
<div class="opinion-input">
|
||||
<van-field
|
||||
v-model="batchApprovalOpinion"
|
||||
type="textarea"
|
||||
placeholder="请输入审批意见"
|
||||
rows="4"
|
||||
autosize
|
||||
maxlength="500"
|
||||
show-word-limit
|
||||
/>
|
||||
|
||||
<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 class="dialog-footer">
|
||||
<div class="footer-buttons">
|
||||
<van-button
|
||||
type="default"
|
||||
block
|
||||
@click="submitBatchApproval(0)"
|
||||
:loading="batchSubmitting"
|
||||
class="action-btn reject-btn"
|
||||
>
|
||||
驳回
|
||||
</van-button>
|
||||
<van-button
|
||||
type="primary"
|
||||
block
|
||||
@click="submitBatchApproval(1)"
|
||||
:loading="batchSubmitting"
|
||||
class="action-btn approve-btn"
|
||||
>
|
||||
通过
|
||||
</van-button>
|
||||
</div>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<div v-if="!loading && orderList.length === 0" class="empty-state">
|
||||
<van-empty description="暂无订单数据" />
|
||||
</div>
|
||||
</div>
|
||||
</van-popup>
|
||||
</van-list>
|
||||
</van-pull-refresh>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, computed } from 'vue'
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { useOrderStore } from '@/store/order'
|
||||
import { useAuthStore } from '@/store/auth'
|
||||
import { formatAmount, formatDate } from '@/utils'
|
||||
import type { ApprovalStatus, ApproveBtn, BatchApprovalParams } from '@/types'
|
||||
import { showToast, showSuccessToast } from 'vant'
|
||||
import { formatOrderStatus, formatAmount, formatDate } from '@/utils'
|
||||
import type { OrderStatus } from '@/types'
|
||||
|
||||
const router = useRouter()
|
||||
const orderStore = useOrderStore()
|
||||
const authStore = useAuthStore()
|
||||
|
||||
// 用户信息
|
||||
const { userInfo } = storeToRefs(authStore)
|
||||
|
||||
// 待审批列表相关状态
|
||||
const { orderList, loading, finished } = storeToRefs(orderStore)
|
||||
|
||||
// 已审批列表相关状态
|
||||
const { completedList, completedLoading, completedFinished } = storeToRefs(orderStore)
|
||||
|
||||
// Tab相关
|
||||
const currentTab = ref('pending')
|
||||
|
||||
// 搜索相关
|
||||
const searchKeyword = ref('')
|
||||
const refreshing = ref(false)
|
||||
const completedRefreshing = ref(false)
|
||||
|
||||
// 批量审批相关
|
||||
const batchApprovalDialogVisible = ref(false)
|
||||
const batchApprovalOpinion = ref('')
|
||||
const batchSubmitting = ref(false)
|
||||
const selectedBatchTag = ref('')
|
||||
|
||||
// 计算是否可以显示批量审批按钮
|
||||
const canBatchApprove = computed(() => {
|
||||
if (!userInfo.value || !Array.isArray(userInfo.value.roles)) {
|
||||
return true // 如果没有用户信息或角色信息，默认显示
|
||||
// 获取状态样式类
|
||||
const getStatusClass = (status: OrderStatus) => {
|
||||
const classMap = {
|
||||
'0': 'pending',
|
||||
'1': 'approved',
|
||||
'2': 'rejected'
|
||||
}
|
||||
// 如果角色名包含“商务”，则不显示
|
||||
return !userInfo.value.roles.some(role => role.roleName && role.roleName.includes('商务'))
|
||||
})
|
||||
return classMap[status] || 'pending'
|
||||
}
|
||||
|
||||
// 加载数据
|
||||
const onLoad = async () => {
|
||||
|
|
@ -264,46 +110,10 @@ const onRefresh = async () => {
|
|||
}
|
||||
}
|
||||
|
||||
// Tab切换处理
|
||||
const onTabChange = (name: string) => {
|
||||
currentTab.value = name
|
||||
searchKeyword.value = ''
|
||||
|
||||
if (name === 'completed' && completedList.value.length === 0) {
|
||||
onCompletedLoad()
|
||||
}
|
||||
}
|
||||
|
||||
// 已审批列表加载
|
||||
const onCompletedLoad = async () => {
|
||||
try {
|
||||
await orderStore.loadCompletedOrderList()
|
||||
} catch (error) {
|
||||
console.error('加载已审批列表失败:', error)
|
||||
orderStore.completedLoading = false
|
||||
}
|
||||
}
|
||||
|
||||
// 已审批列表刷新
|
||||
const onCompletedRefresh = async () => {
|
||||
try {
|
||||
await orderStore.loadCompletedOrderList(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 orderStore.searchOrders(keyword)
|
||||
} else {
|
||||
await orderStore.searchCompletedOrders(keyword)
|
||||
}
|
||||
await orderStore.searchOrders(searchKeyword.value.trim())
|
||||
} catch (error) {
|
||||
console.error('搜索失败:', error)
|
||||
}
|
||||
|
|
@ -313,100 +123,20 @@ const handleSearch = async () => {
|
|||
const handleClear = async () => {
|
||||
searchKeyword.value = ''
|
||||
try {
|
||||
if (currentTab.value === 'pending') {
|
||||
await orderStore.searchOrders('')
|
||||
} else {
|
||||
await orderStore.searchCompletedOrders('')
|
||||
}
|
||||
await orderStore.searchOrders('')
|
||||
} 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 = (id: number) => {
|
||||
router.push({ path: `/detail/${id}`, query: { from: 'order' } })
|
||||
router.push(`/detail/${id}`)
|
||||
}
|
||||
|
||||
// 跳转到已审批详情页
|
||||
const goToCompletedDetail = (businessId: number) => {
|
||||
router.push({ path: `/detail/${businessId}`, query: { readonly: 'true', from: 'order' } })
|
||||
}
|
||||
|
||||
// 显示批量审批弹窗
|
||||
const showBatchApprovalDialog = () => {
|
||||
batchApprovalOpinion.value = ''
|
||||
selectedBatchTag.value = ''
|
||||
batchApprovalDialogVisible.value = true
|
||||
}
|
||||
|
||||
// 获取默认通过意见标签
|
||||
const getBatchOpinionTags = () => {
|
||||
return [
|
||||
'所有信息已阅,审核通过'
|
||||
]
|
||||
}
|
||||
|
||||
// 选择标签
|
||||
const selectBatchTag = (tag: string) => {
|
||||
if (selectedBatchTag.value === tag) {
|
||||
selectedBatchTag.value = ''
|
||||
batchApprovalOpinion.value = ''
|
||||
} else {
|
||||
selectedBatchTag.value = tag
|
||||
batchApprovalOpinion.value = tag
|
||||
}
|
||||
}
|
||||
|
||||
// 提交批量审批
|
||||
const submitBatchApproval = async (approveStatus: ApproveBtn) => {
|
||||
const opinion = batchApprovalOpinion.value.trim()
|
||||
if (approveStatus === 0 && !opinion) {
|
||||
showToast('请输入驳回原因')
|
||||
return
|
||||
}
|
||||
|
||||
batchSubmitting.value = true
|
||||
try {
|
||||
const params: BatchApprovalParams = {
|
||||
variables: {
|
||||
approveBtn: approveStatus,
|
||||
comment: opinion || (approveStatus === 1 ? '同意' : '')
|
||||
}
|
||||
}
|
||||
|
||||
await orderStore.batchApproval(params)
|
||||
|
||||
showSuccessToast(approveStatus === 1 ? '一键审批通过成功' : '一键驳回成功')
|
||||
batchApprovalDialogVisible.value = false
|
||||
await onRefresh()
|
||||
} catch (error) {
|
||||
console.error('一键审批失败:', error)
|
||||
showToast('一键审批失败，请稍后重试')
|
||||
} finally {
|
||||
batchSubmitting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
onMounted(() => {
|
||||
// 重置状态并加载数据
|
||||
orderStore.resetListState()
|
||||
orderStore.resetCompletedListState()
|
||||
// 如果已经登录，则确保获取了用户信息
|
||||
if (authStore.isAuthenticated && !authStore.userInfo) {
|
||||
await authStore.getInfo()
|
||||
}
|
||||
onLoad()
|
||||
})
|
||||
</script>
|
||||
|
|
@ -414,34 +144,10 @@ onMounted(async () => {
|
|||
<style lang="scss" scoped>
|
||||
.order-list-page {
|
||||
min-height: 100vh;
|
||||
background-color: var(--van-background-color);
|
||||
padding-bottom: 80px; /* 为底部批量操作栏留出空间 */
|
||||
}
|
||||
|
||||
// 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 - 56px);
|
||||
}
|
||||
|
||||
:deep(.van-tab) {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
:deep(.van-tab--active) {
|
||||
color: var(--van-primary-color);
|
||||
font-weight: 600;
|
||||
}
|
||||
background: #ffffff;
|
||||
padding: 16px;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.order-item {
|
||||
|
|
@ -561,7 +267,7 @@ onMounted(async () => {
|
|||
.search-container {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
margin: 16px 20px 20px 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
// 搜索栏样式优化
|
||||
|
|
@ -602,94 +308,4 @@ onMounted(async () => {
|
|||
color: #666;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.batch-actions-footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: #fff;
|
||||
padding: 10px 16px;
|
||||
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
|
||||
z-index: 100;
|
||||
|
||||
.footer-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.batch-approve-btn {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.approval-dialog {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.dialog-header {
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid #ebedf0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.dialog-body {
|
||||
flex: 1;
|
||||
padding: 16px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
padding: 16px;
|
||||
border-top: 1px solid #ebedf0;
|
||||
.footer-buttons {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.opinion-tags {
|
||||
margin-bottom: 16px;
|
||||
|
||||
.tags-title {
|
||||
font-size: 14px;
|
||||
color: #646566;
|
||||
margin-bottom: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.tags-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
|
||||
.opinion-tag {
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.opinion-input {
|
||||
.van-field {
|
||||
border: 1px solid #ebedf0;
|
||||
border-radius: 8px;
|
||||
background: #f7f8fa;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,458 +0,0 @@
|
|||
<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>
|
||||
|
|
@ -1,965 +0,0 @@
|
|||
<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="attachment">
|
||||
<div class="tab-content">
|
||||
<div class="card" v-if="attachmentList.length">
|
||||
<div class="card-body">
|
||||
<div class="file-list">
|
||||
<div v-for="file in attachmentList" :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"> {{ 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: '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>
|
||||
<!-- PDF预览弹窗 -->
|
||||
<van-popup
|
||||
v-model:show="pdfPreviewVisible"
|
||||
position="bottom"
|
||||
round
|
||||
:style="{ height: '90%' }"
|
||||
closeable
|
||||
>
|
||||
<div class="pdf-preview-container">
|
||||
<div class="pdf-content">
|
||||
<vue-pdf-embed
|
||||
v-if="pdfUrl"
|
||||
:source="pdfUrl"
|
||||
class="vue-pdf-embed"
|
||||
@loaded="handlePdfLoaded"
|
||||
@loading-failed="handlePdfError"
|
||||
/>
|
||||
</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, getFilePreviewUrl } from '@/utils'
|
||||
import type {ApprovalStatus, ApproveBtn, AttachmentFile, FileType} from '@/types'
|
||||
import VuePdfEmbed from 'vue-pdf-embed'
|
||||
import * as pdfjsLib from 'pdfjs-dist'
|
||||
|
||||
// 设置 PDF worker
|
||||
// 使用 import.meta.url 来确保在 Vite 环境下正确加载 worker
|
||||
const workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.js', import.meta.url).toString()
|
||||
pdfjsLib.GlobalWorkerOptions.workerSrc = workerSrc
|
||||
|
||||
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 pdfPreviewVisible = ref(false)
|
||||
const pdfUrl = ref('')
|
||||
const pdfLoading = ref(false)
|
||||
const approvalOpinion = ref('')
|
||||
const currentApprovalStatus = ref<ApproveBtn>(3)
|
||||
const submitting = ref(false)
|
||||
const selectedTag = ref('')
|
||||
|
||||
// 获取附件列表
|
||||
const attachmentList = computed(() => {
|
||||
if (!currentPurchase.value) return []
|
||||
|
||||
// 如果有fileLog且不为空，则将其包装为数组返回
|
||||
if ((currentPurchase.value as any).fileLog) {
|
||||
return [(currentPurchase.value as any).fileLog]
|
||||
}
|
||||
})
|
||||
|
||||
// 是否显示审批按钮
|
||||
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 previewFile = (file: AttachmentFile) => {
|
||||
if (!file.filePath) {
|
||||
showToast('文件路径不存在')
|
||||
return
|
||||
}
|
||||
|
||||
const url = getFilePreviewUrl(file.filePath)
|
||||
const isPdf = file.fileName?.toLowerCase().endsWith('.pdf') || file.filePath?.toLowerCase().endsWith('.pdf')
|
||||
|
||||
if (isPdf) {
|
||||
pdfUrl.value = url
|
||||
pdfPreviewVisible.value = true
|
||||
pdfLoading.value = true
|
||||
} else {
|
||||
window.open(url, '_blank')
|
||||
}
|
||||
}
|
||||
|
||||
const handlePdfLoaded = () => {
|
||||
pdfLoading.value = true
|
||||
}
|
||||
|
||||
const handlePdfError = (error: any) => {
|
||||
console.error('PDF加载失败:', error)
|
||||
pdfLoading.value = false
|
||||
showToast('PDF加载失败')
|
||||
}
|
||||
|
||||
// 计算总金额
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
// 附件列表样式
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
: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);
|
||||
}
|
||||
}
|
||||
|
||||
.pdf-preview-container {
|
||||
height: 100%;
|
||||
padding-top: 40px;
|
||||
background: var(--background-color-secondary);
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.pdf-loading {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.pdf-content {
|
||||
min-height: 100%;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.vue-pdf-embed {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,489 +0,0 @@
|
|||
<template>
|
||||
<div class="payable-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 class="page-content">
|
||||
<div class="header-info">
|
||||
<div class="title">{{ currentPayable.paymentBillCode || '未知编号' }}</div>
|
||||
<div class="status-badge" :class="isReadOnly ? 'completed' : 'pending'">
|
||||
{{ isReadOnly ? '已审批' : '待审批' }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<van-tabs v-model:active="activeTab" sticky>
|
||||
<!-- Tab 1: 付款信息 -->
|
||||
<van-tab title="付款信息" name="info">
|
||||
<div class="info-card">
|
||||
<div class="card-title">基本信息</div>
|
||||
<div class="info-row">
|
||||
<span class="label">付款单编号</span>
|
||||
<span class="value">{{ currentPayable.paymentBillCode }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="label">制造商名称</span>
|
||||
<span class="value">{{ currentPayable.vendorName }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="label">付款条件</span>
|
||||
<span class="value">{{ currentPayable.payType }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="label">付款周期</span>
|
||||
<span class="value">{{ currentPayable.payConfigDay }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="label">含税总价</span>
|
||||
<span class="value amount">{{ formatAmount(currentPayable.totalPriceWithTax) }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="label">未税总价</span>
|
||||
<span class="value">{{ formatAmount(currentPayable.totalPriceWithoutTax) }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="label">税额</span>
|
||||
<span class="value">{{ formatAmount(currentPayable.taxAmount) }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="label">支付方式</span>
|
||||
<span class="value">{{ formatDictLabel(paymentMethodOptions, currentPayable.paymentMethod) }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="label">银行账号</span>
|
||||
<span class="value">{{ currentPayable.payBankNumber }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="label">账户名称</span>
|
||||
<span class="value">{{ currentPayable.payName }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="label">银行开户行</span>
|
||||
<span class="value">{{ currentPayable.payBankOpenAddress }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="label">银行行号</span>
|
||||
<span class="value">{{ currentPayable.bankNumber }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</van-tab>
|
||||
|
||||
<!-- Tab 2: 应付单列表 -->
|
||||
<van-tab title="应付单列表" name="list">
|
||||
<div class="detail-list-container">
|
||||
<div v-if="currentPayable.payableDetails && currentPayable.payableDetails.length > 0">
|
||||
<div
|
||||
v-for="(item, index) in currentPayable.payableDetails"
|
||||
:key="index"
|
||||
class="detail-item"
|
||||
>
|
||||
<div class="item-header">
|
||||
<span class="code">应付单信息</span>
|
||||
<span class="amount">{{ formatAmount(item.paymentAmount) }}</span>
|
||||
</div>
|
||||
<div class="item-body">
|
||||
<div class="info-row">
|
||||
<span class="label">应付单编号：</span>
|
||||
<span class="value">{{ item.payableBillCode }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="label">项目名称：</span>
|
||||
<span class="value">{{ item.projectName }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="label">产品类型：</span>
|
||||
<span class="value">{{ formatDictLabel(productTypeOptions, item.productType) }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="label">含税总价：</span>
|
||||
<span class="value">{{ formatAmount(item.totalPriceWithTax) }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="label">本次付款金额：</span>
|
||||
<span class="value">{{ formatAmount(item.paymentAmount) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<van-empty v-else description="暂无应付单数据"/>
|
||||
</div>
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
|
||||
<!-- Approval Action Bar -->
|
||||
<div v-if="!isReadOnly" class="action-bar">
|
||||
<van-button type="danger" block plain @click="showApprovalDialog(0)">驳回</van-button>
|
||||
<van-button type="primary" block @click="showApprovalDialog(1)">通过</van-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Approval Dialog -->
|
||||
<van-popup v-model:show="showDialog" position="bottom" round>
|
||||
<div class="dialog-content">
|
||||
<div class="dialog-header">
|
||||
<span>{{ actionType === 1 ? '审批通过' : '审批驳回' }}</span>
|
||||
<van-icon name="cross" @click="showDialog = 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>
|
||||
|
||||
<van-field
|
||||
v-model="comment"
|
||||
rows="3"
|
||||
autosize
|
||||
type="textarea"
|
||||
placeholder="请输入审批意见"
|
||||
/>
|
||||
</div>
|
||||
<div class="dialog-footer">
|
||||
<van-button block type="primary" :loading="submitting" @click="submit">
|
||||
提交
|
||||
</van-button>
|
||||
</div>
|
||||
</div>
|
||||
</van-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref, onMounted, computed} from 'vue'
|
||||
import {useRoute, useRouter} from 'vue-router'
|
||||
import {storeToRefs} from 'pinia'
|
||||
import {useFinanceStore} from '@/store/finance'
|
||||
import {formatAmount} from '@/utils'
|
||||
import {showToast, showSuccessToast} from 'vant'
|
||||
import http from '@/utils/http'
|
||||
import {getDicts, type DictData} from '@/api/system'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const financeStore = useFinanceStore()
|
||||
const {currentPayable, currentPayableTodo, detailLoading} = storeToRefs(financeStore)
|
||||
|
||||
const activeTab = ref('info')
|
||||
const showDialog = ref(false)
|
||||
const actionType = ref(1) // 1: pass, 0: reject
|
||||
const comment = ref('')
|
||||
const submitting = ref(false)
|
||||
const selectedTag = ref('')
|
||||
|
||||
const paymentMethodOptions = ref<DictData[]>([])
|
||||
const productTypeOptions = ref<DictData[]>([])
|
||||
|
||||
const isReadOnly = computed(() => route.query.readonly === 'true')
|
||||
|
||||
const goBack = () => {
|
||||
router.back()
|
||||
}
|
||||
|
||||
// 字典翻译
|
||||
const formatDictLabel = (datas: DictData[], value: string | undefined) => {
|
||||
if (!value) return ''
|
||||
const action = datas.find(d => d.dictValue === value)
|
||||
return action ? action.dictLabel : value
|
||||
}
|
||||
|
||||
const loadDicts = async () => {
|
||||
try {
|
||||
const [paymentRes, productRes] = await Promise.all([
|
||||
getDicts('payment_method'),
|
||||
getDicts('product_type')
|
||||
])
|
||||
|
||||
if (paymentRes.data.code === 0) {
|
||||
paymentMethodOptions.value = paymentRes.data.data || []
|
||||
}
|
||||
if (productRes.data.code === 0) {
|
||||
productTypeOptions.value = productRes.data.data || []
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载字典数据失败', error)
|
||||
}
|
||||
}
|
||||
|
||||
const showApprovalDialog = (type: number) => {
|
||||
actionType.value = type
|
||||
comment.value = '' // Clear comment initially
|
||||
selectedTag.value = '' // Clear selected tag
|
||||
showDialog.value = true
|
||||
}
|
||||
|
||||
// 获取默认意见标签
|
||||
const getOpinionTags = () => {
|
||||
if (actionType.value === 0) {
|
||||
// 驳回常用意见
|
||||
return ['经审查有问题,驳回']
|
||||
} else {
|
||||
// 通过常用意见
|
||||
return ['所有信息已阅,审核通过']
|
||||
}
|
||||
}
|
||||
|
||||
// 选择标签
|
||||
const selectTag = (tag: string) => {
|
||||
if (selectedTag.value === tag) {
|
||||
// 如果点击的是已选中的标签,则取消选择并清空输入框
|
||||
selectedTag.value = ''
|
||||
comment.value = ''
|
||||
} else {
|
||||
// 选择新标签并填入输入框
|
||||
selectedTag.value = tag
|
||||
comment.value = tag
|
||||
}
|
||||
}
|
||||
|
||||
const submit = async () => {
|
||||
if (!comment.value && actionType.value === 0) {
|
||||
showToast('请输入驳回意见')
|
||||
return
|
||||
}
|
||||
|
||||
// 优先从列表传递的 taskId 获取
|
||||
const taskId = (route.query.taskId as string) || currentPayableTodo.value?.taskId;
|
||||
|
||||
if (!taskId && !isReadOnly.value) {
|
||||
showToast('无法获取审批任务ID')
|
||||
return
|
||||
}
|
||||
|
||||
submitting.value = true
|
||||
try {
|
||||
await http.post('/flow/todo/approve', {
|
||||
taskId: taskId,
|
||||
processKey: 'finance_payment',
|
||||
businessKey: currentPayable.value.paymentBillCode, // Updated to use paymentBillCode
|
||||
variables: {
|
||||
approveBtn: actionType.value,
|
||||
comment: comment.value
|
||||
}
|
||||
})
|
||||
showSuccessToast('审批成功')
|
||||
showDialog.value = false
|
||||
router.back()
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
showToast('审批失败')
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
const paymentBillCode = route.params.paymentBillCode
|
||||
if (paymentBillCode) {
|
||||
financeStore.fetchPayableDetail(paymentBillCode as string)
|
||||
}
|
||||
loadDicts()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.payable-detail-page {
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
|
||||
.loading-container {
|
||||
text-align: center;
|
||||
padding: 50px;
|
||||
}
|
||||
|
||||
.header-info {
|
||||
background: #fff;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #eee;
|
||||
|
||||
.title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
padding: 4px 12px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
|
||||
&.pending {
|
||||
background: #fff7e6;
|
||||
color: #fa8c16;
|
||||
}
|
||||
|
||||
&.completed {
|
||||
background: #f6ffed;
|
||||
color: #52c41a;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info-card {
|
||||
background: #fff;
|
||||
margin: 12px 0;
|
||||
padding: 16px;
|
||||
|
||||
.card-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 12px;
|
||||
border-left: 4px solid #1989fa;
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
margin-bottom: 12px;
|
||||
font-size: 14px;
|
||||
|
||||
.label {
|
||||
color: #666;
|
||||
width: 100px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.value {
|
||||
flex: 1;
|
||||
color: #333;
|
||||
word-break: break-all;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.amount {
|
||||
color: #f5222d;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.detail-list-container {
|
||||
padding: 12px;
|
||||
|
||||
.detail-item {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
margin-bottom: 12px;
|
||||
|
||||
.item-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
padding-bottom: 8px;
|
||||
margin-bottom: 8px;
|
||||
|
||||
.code {
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.amount {
|
||||
color: #f5222d;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.item-body {
|
||||
.info-row {
|
||||
display: flex;
|
||||
margin-bottom: 6px;
|
||||
font-size: 13px;
|
||||
|
||||
.label {
|
||||
color: #666;
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.value {
|
||||
flex: 1;
|
||||
color: #333;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.action-bar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
background: #fff;
|
||||
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.dialog-content {
|
||||
padding: 16px;
|
||||
|
||||
.dialog-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
// 意见标签样式
|
||||
.opinion-tags {
|
||||
margin-bottom: 12px;
|
||||
|
||||
.tags-title {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.tags-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
|
||||
.opinion-tag {
|
||||
cursor: pointer;
|
||||
padding: 4px 12px;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,234 +0,0 @@
|
|||
<template>
|
||||
<div class="payable-list-page">
|
||||
<van-tabs v-model:active="currentTab" class="approval-tabs">
|
||||
<!-- 待审批 -->
|
||||
<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="item in payableList"
|
||||
:key="item.paymentBillCode"
|
||||
class="list-item"
|
||||
@click="goToDetail(item)"
|
||||
>
|
||||
<div class="item-header">
|
||||
<span class="code">{{ item.paymentBillCode }}</span>
|
||||
</div>
|
||||
<div class="item-content">
|
||||
<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 amount">¥ {{ formatAmount(item.totalPriceWithTax) }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="label">申请时间：</span>
|
||||
<span class="value">{{ item.applyTime }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<van-empty v-if="!loading && payableList.length === 0" description="暂无待审批数据" />
|
||||
</van-list>
|
||||
</van-pull-refresh>
|
||||
</van-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.businessKey"
|
||||
class="list-item"
|
||||
@click="goToDetail(item, true)"
|
||||
>
|
||||
<div class="item-header">
|
||||
<span class="code">{{ item.businessKey }}</span>
|
||||
<span :class="['status-tag', getStatusClass(item.approveStatus)]">
|
||||
{{ getStatusText(item.approveStatus) }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="item-content">
|
||||
<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>
|
||||
</div>
|
||||
<van-empty v-if="!completedLoading && completedList.length === 0" description="暂无已审批数据" />
|
||||
</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 { useFinanceStore } from '@/store/finance'
|
||||
import { formatAmount } from '@/utils' // Assuming this exists or I'll implement a simple one locally if not found?
|
||||
// Checking imports: src/utils/index.ts usually has formatAmount. I saw it used in Purchase/index.vue.
|
||||
|
||||
const router = useRouter()
|
||||
const financeStore = useFinanceStore()
|
||||
const { payableList, loading, finished, completedList, completedLoading, completedFinished } = storeToRefs(financeStore)
|
||||
|
||||
const currentTab = ref('pending')
|
||||
const refreshing = ref(false)
|
||||
const completedRefreshing = ref(false)
|
||||
|
||||
const onLoad = async () => {
|
||||
await financeStore.loadPayableList()
|
||||
}
|
||||
|
||||
const onRefresh = async () => {
|
||||
await financeStore.loadPayableList(true)
|
||||
refreshing.value = false
|
||||
}
|
||||
|
||||
const onCompletedLoad = async () => {
|
||||
await financeStore.loadCompletedList()
|
||||
}
|
||||
|
||||
const onCompletedRefresh = async () => {
|
||||
await financeStore.loadCompletedList(true)
|
||||
completedRefreshing.value = false
|
||||
}
|
||||
|
||||
const goToDetail = (item: any, isCompleted = false) => {
|
||||
// 如果是待审批，将待办信息存储到 store
|
||||
if (!isCompleted) {
|
||||
financeStore.currentPayableTodo = {
|
||||
taskId: item.taskId,
|
||||
processKey: 'finance_payment',
|
||||
paymentBillCode: item.businessKey
|
||||
}
|
||||
}
|
||||
|
||||
// Note: The detail interface is finance/payment/code/{paymentBillCode}.
|
||||
router.push({
|
||||
name: 'FinancePayableDetail',
|
||||
params: { paymentBillCode: item.paymentBillCode || item.businessKey },
|
||||
query: {
|
||||
readonly: isCompleted ? 'true' : 'false',
|
||||
taskId: item.taskId
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const getStatusText = (status: number) => {
|
||||
switch (status) {
|
||||
case 2: return '驳回'
|
||||
case 3: return '通过'
|
||||
default: return '审批中'
|
||||
}
|
||||
}
|
||||
|
||||
const getStatusClass = (status: number) => {
|
||||
switch (status) {
|
||||
case 2: return 'rejected'
|
||||
case 3: return 'approved'
|
||||
default: return 'pending'
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
financeStore.resetState()
|
||||
financeStore.loadPayableList(true)
|
||||
// completed list lazy load when tab clicked usually? or just load.
|
||||
// Purchase/index.vue loads on tab change.
|
||||
// But here I'll just let the list component trigger load via v-model:loading which calls @load immediately if not full.
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.payable-list-page {
|
||||
min-height: 100vh;
|
||||
background-color: var(--van-background-color);
|
||||
}
|
||||
|
||||
.approval-tabs {
|
||||
:deep(.van-tabs__wrap) {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
|
||||
.list-item {
|
||||
background: #fff;
|
||||
margin: 12px;
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 4px rgba(0,0,0,0.05);
|
||||
|
||||
.item-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
|
||||
.code {
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.item-content {
|
||||
.info-row {
|
||||
display: flex;
|
||||
margin-bottom: 8px;
|
||||
font-size: 14px;
|
||||
|
||||
.label {
|
||||
color: #666;
|
||||
width: 90px;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: #333;
|
||||
flex: 1;
|
||||
|
||||
&.amount {
|
||||
color: #1989fa;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status-tag {
|
||||
font-size: 12px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
|
||||
&.pending { color: #ff976a; background: #fff3e0; }
|
||||
&.approved { color: #07c160; background: #e8f5e9; }
|
||||
&.rejected { color: #ee0a24; background: #ffebee; }
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,433 +0,0 @@
|
|||
<template>
|
||||
<div class="receive-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 class="page-content">
|
||||
<div class="header-info">
|
||||
<div class="title">{{ currentReceive.receiptBillCode || '未知编号' }}</div>
|
||||
<div class="status-badge" :class="isReadOnly ? 'completed' : 'pending'">
|
||||
{{ isReadOnly ? '已审批' : '待审批' }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<van-tabs v-model:active="activeTab" sticky>
|
||||
<!-- Tab 1: 退款信息 -->
|
||||
<van-tab title="退款信息" name="info">
|
||||
<div class="info-card">
|
||||
<div class="card-title">基本信息</div>
|
||||
<div class="info-row">
|
||||
<span class="label">收款单编号</span>
|
||||
<span class="value">{{ currentReceive.receiptBillCode }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="label">进货商名称</span>
|
||||
<span class="value">{{ currentReceive.partnerName }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="label">含税总价(元)</span>
|
||||
<span class="value amount">{{ formatAmount(currentReceive.totalPriceWithTax) }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="label">未税总价(元)</span>
|
||||
<span class="value amount">{{ formatAmount(currentReceive.totalPriceWithoutTax) }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="label">税额</span>
|
||||
<span class="value amount">{{ formatAmount(currentReceive.taxAmount) }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="label">支付方式</span>
|
||||
<span class="value">{{ formatDictLabel(paymentMethodOptions, currentReceive.receiptMethod) }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="label">银行账号</span>
|
||||
<span class="value">{{ currentReceive.receiptBankNumber }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="label">账户名称</span>
|
||||
<span class="value">{{ currentReceive.receiptAccountName }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="label">银行开户行</span>
|
||||
<span class="value">{{ currentReceive.receiptBankOpenAddress }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="label">银行行号</span>
|
||||
<span class="value">{{ currentReceive.bankNumber }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</van-tab>
|
||||
|
||||
<!-- Tab 2: 关联单据 (if any, keeping structure flexible) -->
|
||||
<!-- Maybe list of items being refunded? -->
|
||||
<van-tab title="应收单信息" name="list">
|
||||
<div class="detail-list-container">
|
||||
<div v-if="currentReceive.detailDTOList && currentReceive.detailDTOList.length > 0">
|
||||
<div
|
||||
v-for="(item, index) in currentReceive.detailDTOList"
|
||||
:key="index"
|
||||
class="detail-item"
|
||||
>
|
||||
<!-- Assuming some fields for refund details -->
|
||||
<div class="item-header">
|
||||
<span class="code"> 应收单信息 </span>
|
||||
<span class="amount">{{ formatAmount(item.receiptAmount) }}</span>
|
||||
</div>
|
||||
<div class="item-body">
|
||||
<div class="info-row">
|
||||
<span class="label">应收单编号：</span>
|
||||
<span class="value">{{ item.receivableBillCode }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="label">项目名称：</span>
|
||||
<span class="value">{{ item.projectName }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="label">产品类型：</span>
|
||||
<span class="value">{{ formatDictLabel(productTypeOptions, item.productType) }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="label">含税总价：</span>
|
||||
<span class="value amount">{{ formatAmount(item.totalPriceWithTax) }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="label">本次收款金额：</span>
|
||||
<span class="value amount">{{ formatAmount(item.receiptAmount) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<van-empty v-else description="暂无明细数据" />
|
||||
</div>
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
|
||||
<!-- Approval Action Bar -->
|
||||
<div v-if="!isReadOnly" class="action-bar">
|
||||
<van-button type="danger" block plain @click="showApprovalDialog(0)">驳回</van-button>
|
||||
<van-button type="primary" block @click="showApprovalDialog(1)">通过</van-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Approval Dialog -->
|
||||
<van-popup v-model:show="showDialog" position="bottom" round>
|
||||
<div class="dialog-content">
|
||||
<div class="dialog-header">
|
||||
<span>{{ actionType === 1 ? '审批通过' : '审批驳回' }}</span>
|
||||
<van-icon name="cross" @click="showDialog = 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>
|
||||
|
||||
<van-field
|
||||
v-model="comment"
|
||||
rows="3"
|
||||
autosize
|
||||
type="textarea"
|
||||
placeholder="请输入审批意见"
|
||||
/>
|
||||
</div>
|
||||
<div class="dialog-footer">
|
||||
<van-button block type="primary" :loading="submitting" @click="submit">
|
||||
提交
|
||||
</van-button>
|
||||
</div>
|
||||
</div>
|
||||
</van-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, computed } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { useFinanceStore } from '@/store/finance'
|
||||
import { formatAmount } from '@/utils'
|
||||
import { showToast, showSuccessToast } from 'vant'
|
||||
import http from '@/utils/http'
|
||||
import { getDicts, type DictData } from '@/api/system'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const financeStore = useFinanceStore()
|
||||
const { currentReceive, currentReceiveTodo, detailLoading } = storeToRefs(financeStore)
|
||||
|
||||
const activeTab = ref('info')
|
||||
const showDialog = ref(false)
|
||||
const actionType = ref(1) // 1: pass, 0: reject
|
||||
const comment = ref('')
|
||||
const submitting = ref(false)
|
||||
const selectedTag = ref('')
|
||||
|
||||
const paymentMethodOptions = ref<DictData[]>([])
|
||||
const productTypeOptions = ref<DictData[]>([])
|
||||
const isReadOnly = computed(() => route.query.readonly === 'true')
|
||||
|
||||
const goBack = () => {
|
||||
router.back()
|
||||
}
|
||||
|
||||
// 字典翻译
|
||||
const formatDictLabel = (datas: DictData[], value: string | undefined) => {
|
||||
if (!value) return ''
|
||||
const action = datas.find(d => d.dictValue === value)
|
||||
return action ? action.dictLabel : value
|
||||
}
|
||||
|
||||
const loadDicts = async () => {
|
||||
try {
|
||||
const [paymentRes, productRes] = await Promise.all([
|
||||
getDicts('payment_method'),
|
||||
getDicts('product_type')
|
||||
])
|
||||
|
||||
if (paymentRes.data.code === 0) {
|
||||
paymentMethodOptions.value = paymentRes.data.data || []
|
||||
}
|
||||
if (productRes.data.code === 0) {
|
||||
productTypeOptions.value = productRes.data.data || []
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载字典数据失败', error)
|
||||
}
|
||||
}
|
||||
|
||||
const showApprovalDialog = (type: number) => {
|
||||
actionType.value = type
|
||||
comment.value = ''
|
||||
selectedTag.value = ''
|
||||
showDialog.value = true
|
||||
}
|
||||
|
||||
// 获取默认意见标签
|
||||
const getOpinionTags = () => {
|
||||
if (actionType.value === 0) {
|
||||
return ['经审查有问题,驳回']
|
||||
} else {
|
||||
return ['所有信息已阅,审核通过']
|
||||
}
|
||||
}
|
||||
|
||||
// 选择标签
|
||||
const selectTag = (tag: string) => {
|
||||
if (selectedTag.value === tag) {
|
||||
selectedTag.value = ''
|
||||
comment.value = ''
|
||||
} else {
|
||||
selectedTag.value = tag
|
||||
comment.value = tag
|
||||
}
|
||||
}
|
||||
|
||||
const submit = async () => {
|
||||
if (!comment.value && actionType.value === 0) {
|
||||
showToast('请输入驳回意见')
|
||||
return
|
||||
}
|
||||
|
||||
const taskId = (route.query.taskId as string) || currentReceiveTodo.value?.taskId;
|
||||
|
||||
if (!taskId && !isReadOnly.value) {
|
||||
showToast('无法获取审批任务ID')
|
||||
return
|
||||
}
|
||||
|
||||
submitting.value = true
|
||||
try {
|
||||
await http.post('/flow/todo/approve', {
|
||||
taskId: taskId,
|
||||
processKey: 'finance_receipt_refound',
|
||||
businessKey: currentReceive.value.receiptBillCode,
|
||||
variables: {
|
||||
approveBtn: actionType.value,
|
||||
comment: comment.value
|
||||
}
|
||||
})
|
||||
showSuccessToast('审批成功')
|
||||
showDialog.value = false
|
||||
router.back()
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
showToast('审批失败')
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
const code = route.params.code
|
||||
if (code) {
|
||||
financeStore.fetchReceiveDetail(code as string)
|
||||
}
|
||||
loadDicts()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.receive-detail-page {
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
.loading-container {
|
||||
text-align: center;
|
||||
padding: 50px;
|
||||
}
|
||||
.header-info {
|
||||
background: #fff;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #eee;
|
||||
|
||||
.title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
padding: 4px 12px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
&.pending { background: #fff7e6; color: #fa8c16; }
|
||||
&.completed { background: #f6ffed; color: #52c41a; }
|
||||
}
|
||||
}
|
||||
.info-card {
|
||||
background: #fff;
|
||||
margin: 12px 0;
|
||||
padding: 16px;
|
||||
|
||||
.card-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 12px;
|
||||
border-left: 4px solid #1989fa;
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
margin-bottom: 12px;
|
||||
font-size: 14px;
|
||||
|
||||
.label { color: #666; width: 150px; flex-shrink: 0;}
|
||||
.value { flex: 1; color: #333; word-break: break-all; text-align: right;}
|
||||
.amount { color: #f5222d; font-weight: 500; }
|
||||
}
|
||||
}
|
||||
|
||||
.detail-list-container {
|
||||
padding: 12px;
|
||||
|
||||
.detail-item {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
margin-bottom: 12px;
|
||||
|
||||
.item-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
padding-bottom: 8px;
|
||||
margin-bottom: 8px;
|
||||
|
||||
.code { font-weight: 600; font-size: 15px;}
|
||||
.amount { color: #f5222d; font-weight: 500; }
|
||||
}
|
||||
|
||||
.item-body {
|
||||
.info-row {
|
||||
display: flex;
|
||||
margin-bottom: 6px;
|
||||
font-size: 13px;
|
||||
|
||||
.label { color: #666; width: 150px;}
|
||||
.value { flex: 1; color: #333; word-break: break-all;}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.action-bar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
background: #fff;
|
||||
box-shadow: 0 -2px 8px rgba(0,0,0,0.05);
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
z-index: 99;
|
||||
}
|
||||
.dialog-content {
|
||||
padding: 16px;
|
||||
.dialog-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.dialog-footer {
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.opinion-tags {
|
||||
margin-bottom: 12px;
|
||||
|
||||
.tags-title {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.tags-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
|
||||
.opinion-tag {
|
||||
cursor: pointer;
|
||||
padding: 4px 12px;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,230 +0,0 @@
|
|||
<template>
|
||||
<div class="receive-list-page">
|
||||
<van-tabs v-model:active="currentTab" class="approval-tabs">
|
||||
<!-- 待审批 -->
|
||||
<van-tab name="pending" title="待审批">
|
||||
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
|
||||
<van-list
|
||||
v-model:loading="receiveLoading"
|
||||
:finished="receiveFinished"
|
||||
finished-text="没有更多了"
|
||||
@load="onLoad"
|
||||
>
|
||||
<div
|
||||
v-for="item in receiveList"
|
||||
:key="item.receiptBillCode"
|
||||
class="list-item"
|
||||
@click="goToDetail(item)"
|
||||
>
|
||||
<div class="item-header">
|
||||
<span class="code">{{ item.receiptBillCode }}</span>
|
||||
</div>
|
||||
<div class="item-content">
|
||||
<div class="info-row">
|
||||
<span class="label">客户名称：</span>
|
||||
<span class="value">{{ item.partnerName }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="label">退款金额：</span>
|
||||
<span class="value amount">{{ formatAmount(item.totalPriceWithTax) }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="label">申请时间：</span>
|
||||
<span class="value">{{ item.applyTime }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<van-empty v-if="!receiveLoading && receiveList.length === 0" description="暂无待审批数据" />
|
||||
</van-list>
|
||||
</van-pull-refresh>
|
||||
</van-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.businessKey"
|
||||
class="list-item"
|
||||
@click="goToDetail(item, true)"
|
||||
>
|
||||
<div class="item-header">
|
||||
<span class="code">{{ item.businessKey }}</span>
|
||||
<span :class="['status-tag', getStatusClass(item.approveStatus)]">
|
||||
{{ getStatusText(item.approveStatus) }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="item-content">
|
||||
<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>
|
||||
</div>
|
||||
<van-empty v-if="!completedLoading && completedList.length === 0" description="暂无已审批数据" />
|
||||
</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 { useFinanceStore } from '@/store/finance'
|
||||
import { formatAmount } from '@/utils'
|
||||
|
||||
const router = useRouter()
|
||||
const financeStore = useFinanceStore()
|
||||
const { receiveList, receiveLoading, receiveFinished, completedList, completedLoading, completedFinished } = storeToRefs(financeStore)
|
||||
|
||||
const currentTab = ref('pending')
|
||||
const refreshing = ref(false)
|
||||
const completedRefreshing = ref(false)
|
||||
const processKey = 'finance_receipt_refound'
|
||||
|
||||
const onLoad = async () => {
|
||||
await financeStore.loadReceiveList()
|
||||
}
|
||||
|
||||
const onRefresh = async () => {
|
||||
await financeStore.loadReceiveList(true)
|
||||
refreshing.value = false
|
||||
}
|
||||
|
||||
const onCompletedLoad = async () => {
|
||||
await financeStore.loadCompletedList(false, processKey)
|
||||
}
|
||||
|
||||
const onCompletedRefresh = async () => {
|
||||
await financeStore.loadCompletedList(true, processKey)
|
||||
completedRefreshing.value = false
|
||||
}
|
||||
|
||||
const goToDetail = (item: any, isCompleted = false) => {
|
||||
// 如果是待审批，将待办信息存储到 store
|
||||
if (!isCompleted) {
|
||||
financeStore.currentReceiveTodo = {
|
||||
taskId: item.taskId,
|
||||
processKey: processKey,
|
||||
receiptBillCode: item.businessKey
|
||||
}
|
||||
}
|
||||
|
||||
router.push({
|
||||
name: 'FinanceReceiveDetail',
|
||||
params: { code: item.receiptBillCode || item.businessKey },
|
||||
query: {
|
||||
readonly: isCompleted ? 'true' : 'false',
|
||||
taskId: item.taskId
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const getStatusText = (status: number) => {
|
||||
switch (status) {
|
||||
case 2: return '驳回'
|
||||
case 3: return '通过'
|
||||
default: return '审批中'
|
||||
}
|
||||
}
|
||||
|
||||
const getStatusClass = (status: number) => {
|
||||
switch (status) {
|
||||
case 2: return 'rejected'
|
||||
case 3: return 'approved'
|
||||
default: return 'pending'
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
financeStore.resetState()
|
||||
financeStore.loadReceiveList(true)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.receive-list-page {
|
||||
min-height: 100vh;
|
||||
background-color: var(--van-background-color);
|
||||
}
|
||||
|
||||
.approval-tabs {
|
||||
:deep(.van-tabs__wrap) {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
|
||||
.list-item {
|
||||
background: #fff;
|
||||
margin: 12px;
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 4px rgba(0,0,0,0.05);
|
||||
|
||||
.item-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
|
||||
.code {
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.item-content {
|
||||
.info-row {
|
||||
display: flex;
|
||||
margin-bottom: 8px;
|
||||
font-size: 14px;
|
||||
|
||||
.label {
|
||||
color: #666;
|
||||
width: 90px;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: #333;
|
||||
flex: 1;
|
||||
|
||||
&.amount {
|
||||
color: #1989fa;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status-tag {
|
||||
font-size: 12px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
|
||||
&.pending { color: #ff976a; background: #fff3e0; }
|
||||
&.approved { color: #07c160; background: #e8f5e9; }
|
||||
&.rejected { color: #ee0a24; background: #ffebee; }
|
||||
}
|
||||
</style>
|
||||
|
|
@ -28,7 +28,6 @@ export default defineConfig({
|
|||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://localhost:28080',
|
||||
// target: 'http://oms.unissense.top',
|
||||
changeOrigin: true,
|
||||
secure: false,
|
||||
rewrite: (path) => path.replace(/^\/api/, ''),
|
||||
|
|
|
|||
Loading…
Reference in New Issue