完成审批台基础页面搭建并实现查询功能
This commit is contained in:
Mr.j
parent
36db98a343
commit
e83579dc57
|
|
@ -0,0 +1,49 @@
|
||||||
|
import http from '@/utils/http'
|
||||||
|
import type { EquipmentApprovalReq, EquipmentApprovalResp, EquipmentApprovalListReq } from './type'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 设备审批管理API
|
||||||
|
*/
|
||||||
|
export const equipmentApprovalApi = {
|
||||||
|
/**
|
||||||
|
* 分页查询待审批的设备采购申请
|
||||||
|
*/
|
||||||
|
getPendingApprovals: (params: EquipmentApprovalListReq) => {
|
||||||
|
return http.get<ApiRes<PageRes<EquipmentApprovalResp>>>('/equipment/approval/pending', { params })
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 分页查询已审批的设备采购申请
|
||||||
|
*/
|
||||||
|
getApprovedApprovals: (params: EquipmentApprovalListReq) => {
|
||||||
|
return http.get<ApiRes<PageRes<EquipmentApprovalResp>>>('/equipment/approval/approved', { params })
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 审批通过
|
||||||
|
*/
|
||||||
|
approve: (approvalId: string, data: EquipmentApprovalReq) => {
|
||||||
|
return http.post<ApiRes<null>>(`/equipment/approval/${approvalId}/approve`, data)
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 审批拒绝
|
||||||
|
*/
|
||||||
|
reject: (approvalId: string, data: EquipmentApprovalReq) => {
|
||||||
|
return http.post<ApiRes<null>>(`/equipment/approval/${approvalId}/reject`, data)
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取审批详情
|
||||||
|
*/
|
||||||
|
getApprovalDetail: (approvalId: string) => {
|
||||||
|
return http.get<ApiRes<EquipmentApprovalResp>>(`/equipment/approval/${approvalId}`)
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取审批统计信息
|
||||||
|
*/
|
||||||
|
getApprovalStats: () => {
|
||||||
|
return http.get<ApiRes<unknown>>('/equipment/approval/stats')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -275,3 +275,117 @@ export interface EquipmentReq {
|
||||||
/** 动态记录 */
|
/** 动态记录 */
|
||||||
dynamicRecord?: string
|
dynamicRecord?: string
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 设备审批状态枚举
|
||||||
|
*/
|
||||||
|
export enum ApprovalStatus {
|
||||||
|
PENDING = 'PENDING',
|
||||||
|
APPROVED = 'APPROVED',
|
||||||
|
REJECTED = 'REJECTED'
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 设备审批业务类型枚举
|
||||||
|
*/
|
||||||
|
export enum BusinessType {
|
||||||
|
PROCUREMENT = 'PROCUREMENT',
|
||||||
|
BORROW = 'BORROW',
|
||||||
|
RETURN = 'RETURN'
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 设备审批列表查询请求
|
||||||
|
*/
|
||||||
|
export interface EquipmentApprovalListReq {
|
||||||
|
/** 设备名称 */
|
||||||
|
equipmentName?: string
|
||||||
|
/** 申请人 */
|
||||||
|
applicantName?: string
|
||||||
|
/** 审批状态 */
|
||||||
|
approvalStatus?: ApprovalStatus
|
||||||
|
/** 业务类型 */
|
||||||
|
businessType?: BusinessType
|
||||||
|
/** 申请时间开始 */
|
||||||
|
applyTimeStart?: string
|
||||||
|
/** 申请时间结束 */
|
||||||
|
applyTimeEnd?: string
|
||||||
|
/** 审批时间开始 */
|
||||||
|
approvalTimeStart?: string
|
||||||
|
/** 审批时间结束 */
|
||||||
|
approvalTimeEnd?: string
|
||||||
|
/** 当前页码 */
|
||||||
|
page?: number
|
||||||
|
/** 页码（后端可能期望的字段名） */
|
||||||
|
pageNum?: number
|
||||||
|
/** 每页大小 */
|
||||||
|
pageSize?: number
|
||||||
|
/** 排序字段 */
|
||||||
|
orderBy?: string
|
||||||
|
/** 排序方向 */
|
||||||
|
orderDirection?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 设备审批请求
|
||||||
|
*/
|
||||||
|
export interface EquipmentApprovalReq {
|
||||||
|
/** 审批意见 */
|
||||||
|
approvalComment?: string
|
||||||
|
/** 审批结果 */
|
||||||
|
approvalResult: 'APPROVED' | 'REJECTED'
|
||||||
|
/** 审批人 */
|
||||||
|
approverName?: string
|
||||||
|
/** 审批人ID */
|
||||||
|
approverId?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 设备审批响应
|
||||||
|
*/
|
||||||
|
export interface EquipmentApprovalResp {
|
||||||
|
/** 审批ID */
|
||||||
|
approvalId: string
|
||||||
|
/** 设备ID */
|
||||||
|
equipmentId: string
|
||||||
|
/** 设备名称 */
|
||||||
|
equipmentName: string
|
||||||
|
/** 设备类型 */
|
||||||
|
equipmentType: string
|
||||||
|
/** 设备型号 */
|
||||||
|
equipmentModel: string
|
||||||
|
/** 品牌 */
|
||||||
|
brand?: string
|
||||||
|
/** 供应商名称 */
|
||||||
|
supplierName?: string
|
||||||
|
/** 采购价格 */
|
||||||
|
purchasePrice?: number
|
||||||
|
/** 总价 */
|
||||||
|
totalPrice?: number
|
||||||
|
/** 数量 */
|
||||||
|
quantity?: number
|
||||||
|
/** 申请人 */
|
||||||
|
applicantName: string
|
||||||
|
/** 申请人ID */
|
||||||
|
applicantId: string
|
||||||
|
/** 申请时间 */
|
||||||
|
applyTime: string
|
||||||
|
/** 申请原因 */
|
||||||
|
applyReason?: string
|
||||||
|
/** 业务类型 */
|
||||||
|
businessType: BusinessType
|
||||||
|
/** 审批状态 */
|
||||||
|
approvalStatus: ApprovalStatus
|
||||||
|
/** 审批人 */
|
||||||
|
approverName?: string
|
||||||
|
/** 审批人ID */
|
||||||
|
approverId?: string
|
||||||
|
/** 审批时间 */
|
||||||
|
approvalTime?: string
|
||||||
|
/** 审批意见 */
|
||||||
|
approvalComment?: string
|
||||||
|
/** 创建时间 */
|
||||||
|
createTime: string
|
||||||
|
/** 更新时间 */
|
||||||
|
updateTime: string
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -297,7 +297,7 @@ export const systemRoutes: RouteRecordRaw[] = [
|
||||||
name: 'AssetManagement',
|
name: 'AssetManagement',
|
||||||
component: Layout,
|
component: Layout,
|
||||||
redirect: '/asset-management/device-management/device-center',
|
redirect: '/asset-management/device-management/device-center',
|
||||||
meta: { title: '资产管理', icon: 'property-safety', hidden: true, sort: 3 },
|
meta: { title: '资产管理', icon: 'property-safety', hidden: false, sort: 3 },
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
path: '/asset-management/device-management',
|
path: '/asset-management/device-management',
|
||||||
|
|
@ -340,49 +340,7 @@ export const systemRoutes: RouteRecordRaw[] = [
|
||||||
hidden: false,
|
hidden: false,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
|
||||||
path: '/asset-management/device-management/online',
|
|
||||||
name: 'DeviceOnline',
|
|
||||||
component: () => import('@/components/ParentView/index.vue'),
|
|
||||||
redirect: '/asset-management/device-management/online/drone',
|
|
||||||
meta: {
|
|
||||||
title: '在线管理',
|
|
||||||
icon: 'cloud',
|
|
||||||
hidden: false,
|
|
||||||
},
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
path: '/asset-management/device-management/online/drone',
|
|
||||||
name: 'DeviceDrone',
|
|
||||||
component: () => import('@/views/system-resource/device-management/index.vue'),
|
|
||||||
meta: {
|
|
||||||
title: '无人机',
|
|
||||||
icon: 'drone',
|
|
||||||
hidden: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/asset-management/device-management/online/nest',
|
|
||||||
name: 'DeviceNest',
|
|
||||||
component: () => import('@/views/system-resource/device-management/index.vue'),
|
|
||||||
meta: {
|
|
||||||
title: '机巢',
|
|
||||||
icon: 'nest',
|
|
||||||
hidden: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/asset-management/device-management/online/smart-terminal',
|
|
||||||
name: 'DeviceSmartTerminal',
|
|
||||||
component: () => import('@/views/system-resource/device-management/index.vue'),
|
|
||||||
meta: {
|
|
||||||
title: '其他智能终端',
|
|
||||||
icon: 'terminal',
|
|
||||||
hidden: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
@ -1231,7 +1189,7 @@ export const systemRoutes: RouteRecordRaw[] = [
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/system-resource/device-management/online',
|
path: '/system-resource/device-management/online',
|
||||||
name: 'DeviceOnline',
|
name: 'SystemResourceDeviceOnline',
|
||||||
component: () => import('@/components/ParentView/index.vue'),
|
component: () => import('@/components/ParentView/index.vue'),
|
||||||
redirect: '/system-resource/device-management/online/drone',
|
redirect: '/system-resource/device-management/online/drone',
|
||||||
meta: {
|
meta: {
|
||||||
|
|
@ -1242,7 +1200,7 @@ export const systemRoutes: RouteRecordRaw[] = [
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
path: '/system-resource/device-management/online/drone',
|
path: '/system-resource/device-management/online/drone',
|
||||||
name: 'DeviceDrone',
|
name: 'SystemResourceDeviceDrone',
|
||||||
component: () => import('@/views/system-resource/device-management/index.vue'),
|
component: () => import('@/views/system-resource/device-management/index.vue'),
|
||||||
meta: {
|
meta: {
|
||||||
title: '无人机',
|
title: '无人机',
|
||||||
|
|
@ -1252,7 +1210,7 @@ export const systemRoutes: RouteRecordRaw[] = [
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/system-resource/device-management/online/nest',
|
path: '/system-resource/device-management/online/nest',
|
||||||
name: 'DeviceNest',
|
name: 'SystemResourceDeviceNest',
|
||||||
component: () => import('@/views/system-resource/device-management/index.vue'),
|
component: () => import('@/views/system-resource/device-management/index.vue'),
|
||||||
meta: {
|
meta: {
|
||||||
title: '机巢',
|
title: '机巢',
|
||||||
|
|
@ -1262,7 +1220,7 @@ export const systemRoutes: RouteRecordRaw[] = [
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/system-resource/device-management/online/smart-terminal',
|
path: '/system-resource/device-management/online/smart-terminal',
|
||||||
name: 'DeviceSmartTerminal',
|
name: 'SystemResourceDeviceSmartTerminal',
|
||||||
component: () => import('@/views/system-resource/device-management/index.vue'),
|
component: () => import('@/views/system-resource/device-management/index.vue'),
|
||||||
meta: {
|
meta: {
|
||||||
title: '其他智能终端',
|
title: '其他智能终端',
|
||||||
|
|
|
||||||
|
|
@ -212,6 +212,79 @@ const storeSetup = () => {
|
||||||
{
|
{
|
||||||
id: 2013,
|
id: 2013,
|
||||||
parentId: 2010,
|
parentId: 2010,
|
||||||
|
title: '审批台',
|
||||||
|
type: 2,
|
||||||
|
path: '/asset-management/device-management/approval',
|
||||||
|
name: 'DeviceApproval',
|
||||||
|
component: 'system-resource/device-management/approval/index',
|
||||||
|
icon: 'check-circle',
|
||||||
|
isExternal: false,
|
||||||
|
isCache: false,
|
||||||
|
isHidden: false,
|
||||||
|
sort: 3,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2014,
|
||||||
|
parentId: 2010,
|
||||||
|
title: '在线管理',
|
||||||
|
type: 1,
|
||||||
|
path: '/asset-management/device-management/online',
|
||||||
|
name: 'DeviceOnline',
|
||||||
|
component: 'Layout',
|
||||||
|
redirect: '/asset-management/device-management/online/drone',
|
||||||
|
icon: 'cloud',
|
||||||
|
isExternal: false,
|
||||||
|
isCache: false,
|
||||||
|
isHidden: false,
|
||||||
|
sort: 4,
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
id: 20141,
|
||||||
|
parentId: 2014,
|
||||||
|
title: '无人机',
|
||||||
|
type: 2,
|
||||||
|
path: '/asset-management/device-management/online/drone',
|
||||||
|
name: 'DeviceDrone',
|
||||||
|
component: 'system-resource/device-management/index',
|
||||||
|
icon: 'drone',
|
||||||
|
isExternal: false,
|
||||||
|
isCache: false,
|
||||||
|
isHidden: false,
|
||||||
|
sort: 1,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 20142,
|
||||||
|
parentId: 2014,
|
||||||
|
title: '机巢',
|
||||||
|
type: 2,
|
||||||
|
path: '/asset-management/device-management/online/nest',
|
||||||
|
name: 'DeviceNest',
|
||||||
|
component: 'system-resource/device-management/index',
|
||||||
|
icon: 'nest',
|
||||||
|
isExternal: false,
|
||||||
|
isCache: false,
|
||||||
|
isHidden: false,
|
||||||
|
sort: 2,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 20143,
|
||||||
|
parentId: 2014,
|
||||||
|
title: '其他智能终端',
|
||||||
|
type: 2,
|
||||||
|
path: '/asset-management/device-management/online/smart-terminal',
|
||||||
|
name: 'DeviceSmartTerminal',
|
||||||
|
component: 'system-resource/device-management/index',
|
||||||
|
icon: 'terminal',
|
||||||
|
isExternal: false,
|
||||||
|
isCache: false,
|
||||||
|
isHidden: false,
|
||||||
|
sort: 3,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2015,
|
||||||
|
parentId: 2010,
|
||||||
title: '设备详情',
|
title: '设备详情',
|
||||||
type: 2,
|
type: 2,
|
||||||
path: '/asset-management/device-management/device-detail/:id',
|
path: '/asset-management/device-management/device-detail/:id',
|
||||||
|
|
@ -221,7 +294,7 @@ const storeSetup = () => {
|
||||||
isExternal: false,
|
isExternal: false,
|
||||||
isCache: false,
|
isCache: false,
|
||||||
isHidden: true,
|
isHidden: true,
|
||||||
sort: 3,
|
sort: 5,
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,339 @@
|
||||||
|
<template>
|
||||||
|
<a-modal
|
||||||
|
v-model:visible="visible"
|
||||||
|
:title="modalTitle"
|
||||||
|
width="600px"
|
||||||
|
@ok="handleSubmit"
|
||||||
|
@cancel="handleCancel"
|
||||||
|
:confirm-loading="loading"
|
||||||
|
>
|
||||||
|
<div class="approval-action" v-if="approvalData">
|
||||||
|
<!-- 审批信息预览 -->
|
||||||
|
<div class="preview-section">
|
||||||
|
<h4 class="preview-title">
|
||||||
|
<IconInfoCircle style="margin-right: 8px; color: var(--color-primary);" />
|
||||||
|
审批信息预览
|
||||||
|
</h4>
|
||||||
|
<a-descriptions :column="1" bordered size="small">
|
||||||
|
<a-descriptions-item label="设备名称">
|
||||||
|
{{ approvalData.equipmentName }}
|
||||||
|
</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="设备类型">
|
||||||
|
{{ approvalData.equipmentType }}
|
||||||
|
</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="设备型号">
|
||||||
|
{{ approvalData.equipmentModel }}
|
||||||
|
</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="申请人">
|
||||||
|
{{ approvalData.applicantName }}
|
||||||
|
</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="申请时间">
|
||||||
|
{{ formatDateTime(approvalData.applyTime) }}
|
||||||
|
</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="总价">
|
||||||
|
<span v-if="approvalData.totalPrice" class="price-text">
|
||||||
|
¥{{ formatPrice(approvalData.totalPrice) }}
|
||||||
|
</span>
|
||||||
|
<span v-else class="no-data">-</span>
|
||||||
|
</a-descriptions-item>
|
||||||
|
</a-descriptions>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 审批表单 -->
|
||||||
|
<div class="form-section">
|
||||||
|
<h4 class="form-title">
|
||||||
|
<IconEdit style="margin-right: 8px; color: var(--color-warning);" />
|
||||||
|
审批意见
|
||||||
|
</h4>
|
||||||
|
<a-form
|
||||||
|
ref="formRef"
|
||||||
|
:model="formData"
|
||||||
|
:rules="rules"
|
||||||
|
layout="vertical"
|
||||||
|
>
|
||||||
|
<a-form-item field="approvalComment" label="审批意见" class="form-item">
|
||||||
|
<a-textarea
|
||||||
|
v-model="formData.approvalComment"
|
||||||
|
:placeholder="actionType === 'approve' ? '请输入审批通过的意见（可选）' : '请输入审批拒绝的原因（必填）'"
|
||||||
|
:rows="4"
|
||||||
|
class="form-textarea"
|
||||||
|
allow-clear
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 确认提示 -->
|
||||||
|
<div class="confirm-section">
|
||||||
|
<a-alert
|
||||||
|
:type="actionType === 'approve' ? 'success' : 'error'"
|
||||||
|
:title="actionType === 'approve' ? '审批通过确认' : '审批拒绝确认'"
|
||||||
|
:description="actionType === 'approve' ? '确认通过此设备采购申请吗？通过后该申请将进入采购流程。' : '确认拒绝此设备采购申请吗？拒绝后申请人将收到通知。'"
|
||||||
|
show-icon
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-modal>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { computed, reactive, ref, watch } from 'vue'
|
||||||
|
import { IconInfoCircle, IconEdit } from '@arco-design/web-vue/es/icon'
|
||||||
|
import message from '@arco-design/web-vue/es/message'
|
||||||
|
import type { EquipmentApprovalResp, EquipmentApprovalReq } from '@/apis/equipment/type'
|
||||||
|
import { equipmentApprovalApi } from '@/apis/equipment/approval'
|
||||||
|
|
||||||
|
defineOptions({ name: 'ApprovalActionModal' })
|
||||||
|
|
||||||
|
// Props
|
||||||
|
interface Props {
|
||||||
|
visible: boolean
|
||||||
|
approvalData: EquipmentApprovalResp | null
|
||||||
|
actionType: 'approve' | 'reject'
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = defineProps<Props>()
|
||||||
|
|
||||||
|
// Emits
|
||||||
|
const emit = defineEmits<{
|
||||||
|
'update:visible': [value: boolean]
|
||||||
|
success: []
|
||||||
|
}>()
|
||||||
|
|
||||||
|
// 计算属性
|
||||||
|
const visible = computed({
|
||||||
|
get: () => props.visible,
|
||||||
|
set: (value) => emit('update:visible', value)
|
||||||
|
})
|
||||||
|
|
||||||
|
const modalTitle = computed(() => {
|
||||||
|
return props.actionType === 'approve' ? '审批通过' : '审批拒绝'
|
||||||
|
})
|
||||||
|
|
||||||
|
// 表单相关
|
||||||
|
const formRef = ref()
|
||||||
|
const loading = ref(false)
|
||||||
|
const formData = reactive<EquipmentApprovalReq>({
|
||||||
|
approvalComment: '',
|
||||||
|
approvalResult: props.actionType === 'approve' ? 'APPROVED' : 'REJECTED',
|
||||||
|
approverName: '当前用户', // 这里应该从用户认证系统获取
|
||||||
|
approverId: 'current-user-id' // 这里应该从用户认证系统获取
|
||||||
|
})
|
||||||
|
|
||||||
|
// 表单验证规则
|
||||||
|
const rules = computed(() => ({
|
||||||
|
approvalComment: props.actionType === 'reject' ? [
|
||||||
|
{ required: true, message: '请输入审批拒绝的原因' }
|
||||||
|
] : []
|
||||||
|
}))
|
||||||
|
|
||||||
|
// 格式化价格
|
||||||
|
const formatPrice = (price: number) => {
|
||||||
|
return price.toLocaleString('zh-CN', {
|
||||||
|
minimumFractionDigits: 2,
|
||||||
|
maximumFractionDigits: 2,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 格式化日期时间
|
||||||
|
const formatDateTime = (dateTime: string) => {
|
||||||
|
if (!dateTime) return '-'
|
||||||
|
const date = new Date(dateTime)
|
||||||
|
return date.toLocaleString('zh-CN', {
|
||||||
|
year: 'numeric',
|
||||||
|
month: '2-digit',
|
||||||
|
day: '2-digit',
|
||||||
|
hour: '2-digit',
|
||||||
|
minute: '2-digit',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 提交审批
|
||||||
|
const handleSubmit = async () => {
|
||||||
|
try {
|
||||||
|
await formRef.value.validate()
|
||||||
|
|
||||||
|
if (!props.approvalData) {
|
||||||
|
message.error('审批数据不存在')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
loading.value = true
|
||||||
|
|
||||||
|
const approvalId = props.approvalData.approvalId
|
||||||
|
const submitData: EquipmentApprovalReq = {
|
||||||
|
approvalComment: formData.approvalComment,
|
||||||
|
approvalResult: props.actionType === 'approve' ? 'APPROVED' : 'REJECTED',
|
||||||
|
approverName: formData.approverName,
|
||||||
|
approverId: formData.approverId
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('提交审批数据:', submitData)
|
||||||
|
|
||||||
|
if (props.actionType === 'approve') {
|
||||||
|
await equipmentApprovalApi.approve(approvalId, submitData)
|
||||||
|
message.success('审批通过成功')
|
||||||
|
} else {
|
||||||
|
await equipmentApprovalApi.reject(approvalId, submitData)
|
||||||
|
message.success('审批拒绝成功')
|
||||||
|
}
|
||||||
|
|
||||||
|
emit('success')
|
||||||
|
visible.value = false
|
||||||
|
resetForm()
|
||||||
|
} catch (error: any) {
|
||||||
|
console.error('审批操作失败:', error)
|
||||||
|
message.error(error?.message || '审批操作失败')
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 取消
|
||||||
|
const handleCancel = () => {
|
||||||
|
visible.value = false
|
||||||
|
resetForm()
|
||||||
|
}
|
||||||
|
|
||||||
|
// 重置表单
|
||||||
|
const resetForm = () => {
|
||||||
|
Object.assign(formData, {
|
||||||
|
approvalComment: '',
|
||||||
|
approvalResult: props.actionType === 'approve' ? 'APPROVED' : 'REJECTED',
|
||||||
|
approverName: '当前用户',
|
||||||
|
approverId: 'current-user-id'
|
||||||
|
})
|
||||||
|
formRef.value?.resetFields()
|
||||||
|
}
|
||||||
|
|
||||||
|
// 监听弹窗显示状态，重置表单
|
||||||
|
watch(() => props.visible, (newVal) => {
|
||||||
|
if (newVal) {
|
||||||
|
resetForm()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.approval-action {
|
||||||
|
.preview-section {
|
||||||
|
margin-bottom: 24px;
|
||||||
|
|
||||||
|
.preview-title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--color-text-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.arco-descriptions {
|
||||||
|
.arco-descriptions-item-label {
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--color-text-1);
|
||||||
|
background-color: var(--color-fill-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.arco-descriptions-item-value {
|
||||||
|
color: var(--color-text-2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-section {
|
||||||
|
margin-bottom: 24px;
|
||||||
|
|
||||||
|
.form-title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--color-text-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-item {
|
||||||
|
.arco-form-item-label {
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--color-text-1);
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-textarea {
|
||||||
|
border-radius: 6px;
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: var(--color-primary-light-3);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus,
|
||||||
|
&.arco-textarea-focus {
|
||||||
|
border-color: var(--color-primary);
|
||||||
|
box-shadow: 0 0 0 2px rgba(var(--primary-6), 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.arco-textarea-inner {
|
||||||
|
padding: 12px;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.confirm-section {
|
||||||
|
.arco-alert {
|
||||||
|
border-radius: 6px;
|
||||||
|
|
||||||
|
.arco-alert-title {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arco-alert-description {
|
||||||
|
color: var(--color-text-2);
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.price-text {
|
||||||
|
color: #f56c6c;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-data {
|
||||||
|
color: var(--color-text-4);
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 响应式设计
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.approval-action {
|
||||||
|
.preview-section,
|
||||||
|
.form-section {
|
||||||
|
.arco-descriptions {
|
||||||
|
.arco-descriptions-item {
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
.arco-descriptions-item-label {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
text-align: left;
|
||||||
|
padding: 8px 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arco-descriptions-item-value {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
padding: 8px 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,362 @@
|
||||||
|
<template>
|
||||||
|
<a-modal
|
||||||
|
v-model:visible="visible"
|
||||||
|
title="审批详情"
|
||||||
|
width="800px"
|
||||||
|
:footer="false"
|
||||||
|
@cancel="handleCancel"
|
||||||
|
>
|
||||||
|
<div class="approval-detail" v-if="approvalData">
|
||||||
|
<!-- 基本信息 -->
|
||||||
|
<div class="detail-section">
|
||||||
|
<h3 class="section-title">
|
||||||
|
<IconInfoCircle style="margin-right: 8px; color: var(--color-primary);" />
|
||||||
|
基本信息
|
||||||
|
</h3>
|
||||||
|
<a-descriptions :column="2" bordered>
|
||||||
|
<a-descriptions-item label="设备名称">
|
||||||
|
{{ approvalData.equipmentName }}
|
||||||
|
</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="设备类型">
|
||||||
|
{{ approvalData.equipmentType }}
|
||||||
|
</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="业务类型">
|
||||||
|
<a-tag :color="getBusinessTypeColor(approvalData.businessType)">
|
||||||
|
{{ getBusinessTypeText(approvalData.businessType) }}
|
||||||
|
</a-tag>
|
||||||
|
</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="设备型号">
|
||||||
|
{{ approvalData.equipmentModel }}
|
||||||
|
</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="品牌">
|
||||||
|
{{ approvalData.brand || '-' }}
|
||||||
|
</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="供应商">
|
||||||
|
{{ approvalData.supplierName || '-' }}
|
||||||
|
</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="数量">
|
||||||
|
{{ approvalData.quantity || '-' }}
|
||||||
|
</a-descriptions-item>
|
||||||
|
</a-descriptions>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 价格信息 -->
|
||||||
|
<div class="detail-section">
|
||||||
|
<h3 class="section-title">
|
||||||
|
<IconFile style="margin-right: 8px; color: var(--color-success);" />
|
||||||
|
价格信息
|
||||||
|
</h3>
|
||||||
|
<a-descriptions :column="2" bordered>
|
||||||
|
<a-descriptions-item label="采购价格">
|
||||||
|
<span v-if="approvalData.purchasePrice" class="price-text">
|
||||||
|
¥{{ formatPrice(approvalData.purchasePrice) }}
|
||||||
|
</span>
|
||||||
|
<span v-else class="no-data">-</span>
|
||||||
|
</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="总价">
|
||||||
|
<span v-if="approvalData.totalPrice" class="price-text">
|
||||||
|
¥{{ formatPrice(approvalData.totalPrice) }}
|
||||||
|
</span>
|
||||||
|
<span v-else class="no-data">-</span>
|
||||||
|
</a-descriptions-item>
|
||||||
|
</a-descriptions>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 申请信息 -->
|
||||||
|
<div class="detail-section">
|
||||||
|
<h3 class="section-title">
|
||||||
|
<IconUser style="margin-right: 8px; color: var(--color-warning);" />
|
||||||
|
申请信息
|
||||||
|
</h3>
|
||||||
|
<a-descriptions :column="2" bordered>
|
||||||
|
<a-descriptions-item label="申请人">
|
||||||
|
{{ approvalData.applicantName }}
|
||||||
|
</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="申请时间">
|
||||||
|
{{ formatDateTime(approvalData.applyTime) }}
|
||||||
|
</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="申请原因" :span="2">
|
||||||
|
{{ approvalData.applyReason || '暂无申请原因' }}
|
||||||
|
</a-descriptions-item>
|
||||||
|
</a-descriptions>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 审批信息 -->
|
||||||
|
<div class="detail-section" v-if="approvalData.approvalStatus !== ApprovalStatus.PENDING">
|
||||||
|
<h3 class="section-title">
|
||||||
|
<IconCheckCircle style="margin-right: 8px; color: var(--color-success);" />
|
||||||
|
审批信息
|
||||||
|
</h3>
|
||||||
|
<a-descriptions :column="2" bordered>
|
||||||
|
<a-descriptions-item label="审批状态">
|
||||||
|
<a-tag :color="getApprovalStatusColor(approvalData.approvalStatus)">
|
||||||
|
{{ getApprovalStatusText(approvalData.approvalStatus) }}
|
||||||
|
</a-tag>
|
||||||
|
</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="审批人">
|
||||||
|
{{ approvalData.approverName || '-' }}
|
||||||
|
</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="审批时间">
|
||||||
|
{{ formatDateTime(approvalData.approvalTime) }}
|
||||||
|
</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="审批意见" :span="2">
|
||||||
|
{{ approvalData.approvalComment || '暂无审批意见' }}
|
||||||
|
</a-descriptions-item>
|
||||||
|
</a-descriptions>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 审批状态 -->
|
||||||
|
<div class="detail-section" v-else>
|
||||||
|
<h3 class="section-title">
|
||||||
|
<IconClockCircle style="margin-right: 8px; color: var(--color-warning);" />
|
||||||
|
审批状态
|
||||||
|
</h3>
|
||||||
|
<a-descriptions :column="1" bordered>
|
||||||
|
<a-descriptions-item label="当前状态">
|
||||||
|
<a-tag :color="getApprovalStatusColor(approvalData.approvalStatus)">
|
||||||
|
{{ getApprovalStatusText(approvalData.approvalStatus) }}
|
||||||
|
</a-tag>
|
||||||
|
</a-descriptions-item>
|
||||||
|
</a-descriptions>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 操作按钮 -->
|
||||||
|
<div class="detail-footer">
|
||||||
|
<a-space>
|
||||||
|
<a-button
|
||||||
|
v-if="approvalData.approvalStatus === ApprovalStatus.PENDING"
|
||||||
|
type="primary"
|
||||||
|
@click="handleApprove"
|
||||||
|
>
|
||||||
|
<template #icon><IconCheckCircle /></template>
|
||||||
|
审批通过
|
||||||
|
</a-button>
|
||||||
|
<a-button
|
||||||
|
v-if="approvalData.approvalStatus === ApprovalStatus.PENDING"
|
||||||
|
status="danger"
|
||||||
|
@click="handleReject"
|
||||||
|
>
|
||||||
|
<template #icon><IconCloseCircle /></template>
|
||||||
|
审批拒绝
|
||||||
|
</a-button>
|
||||||
|
<a-button @click="handleCancel">
|
||||||
|
关闭
|
||||||
|
</a-button>
|
||||||
|
</a-space>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-modal>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { computed } from 'vue'
|
||||||
|
import {
|
||||||
|
IconInfoCircle,
|
||||||
|
IconFile,
|
||||||
|
IconUser,
|
||||||
|
IconCheckCircle,
|
||||||
|
IconCloseCircle,
|
||||||
|
IconClockCircle
|
||||||
|
} from '@arco-design/web-vue/es/icon'
|
||||||
|
import type { EquipmentApprovalResp } from '@/apis/equipment/type'
|
||||||
|
import { ApprovalStatus, BusinessType } from '@/apis/equipment/type'
|
||||||
|
|
||||||
|
defineOptions({ name: 'ApprovalDetailModal' })
|
||||||
|
|
||||||
|
// Props
|
||||||
|
interface Props {
|
||||||
|
visible: boolean
|
||||||
|
approvalData: EquipmentApprovalResp | null
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = defineProps<Props>()
|
||||||
|
|
||||||
|
// Emits
|
||||||
|
const emit = defineEmits<{
|
||||||
|
'update:visible': [value: boolean]
|
||||||
|
success: []
|
||||||
|
approve: [data: EquipmentApprovalResp]
|
||||||
|
reject: [data: EquipmentApprovalResp]
|
||||||
|
}>()
|
||||||
|
|
||||||
|
// 计算属性
|
||||||
|
const visible = computed({
|
||||||
|
get: () => props.visible,
|
||||||
|
set: (value) => emit('update:visible', value)
|
||||||
|
})
|
||||||
|
|
||||||
|
// 格式化价格
|
||||||
|
const formatPrice = (price: number) => {
|
||||||
|
return price.toLocaleString('zh-CN', {
|
||||||
|
minimumFractionDigits: 2,
|
||||||
|
maximumFractionDigits: 2,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 格式化日期时间
|
||||||
|
const formatDateTime = (dateTime: string) => {
|
||||||
|
if (!dateTime) return '-'
|
||||||
|
const date = new Date(dateTime)
|
||||||
|
return date.toLocaleString('zh-CN', {
|
||||||
|
year: 'numeric',
|
||||||
|
month: '2-digit',
|
||||||
|
day: '2-digit',
|
||||||
|
hour: '2-digit',
|
||||||
|
minute: '2-digit',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取业务类型颜色
|
||||||
|
const getBusinessTypeColor = (type: BusinessType) => {
|
||||||
|
const colorMap: Record<string, string> = {
|
||||||
|
[BusinessType.PROCUREMENT]: 'blue',
|
||||||
|
[BusinessType.BORROW]: 'green',
|
||||||
|
[BusinessType.RETURN]: 'orange',
|
||||||
|
}
|
||||||
|
return colorMap[type] || 'gray'
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取业务类型文本
|
||||||
|
const getBusinessTypeText = (type: BusinessType) => {
|
||||||
|
const textMap: Record<string, string> = {
|
||||||
|
[BusinessType.PROCUREMENT]: '采购',
|
||||||
|
[BusinessType.BORROW]: '借用',
|
||||||
|
[BusinessType.RETURN]: '归还',
|
||||||
|
}
|
||||||
|
return textMap[type] || '未知'
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取审批状态颜色
|
||||||
|
const getApprovalStatusColor = (status: ApprovalStatus) => {
|
||||||
|
const colorMap: Record<string, string> = {
|
||||||
|
[ApprovalStatus.PENDING]: 'orange',
|
||||||
|
[ApprovalStatus.APPROVED]: 'green',
|
||||||
|
[ApprovalStatus.REJECTED]: 'red',
|
||||||
|
}
|
||||||
|
return colorMap[status] || 'blue'
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取审批状态文本
|
||||||
|
const getApprovalStatusText = (status: ApprovalStatus) => {
|
||||||
|
const textMap: Record<string, string> = {
|
||||||
|
[ApprovalStatus.PENDING]: '待审批',
|
||||||
|
[ApprovalStatus.APPROVED]: '已通过',
|
||||||
|
[ApprovalStatus.REJECTED]: '已拒绝',
|
||||||
|
}
|
||||||
|
return textMap[status] || '未知'
|
||||||
|
}
|
||||||
|
|
||||||
|
// 审批通过
|
||||||
|
const handleApprove = () => {
|
||||||
|
if (props.approvalData) {
|
||||||
|
emit('approve', props.approvalData)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 审批拒绝
|
||||||
|
const handleReject = () => {
|
||||||
|
if (props.approvalData) {
|
||||||
|
emit('reject', props.approvalData)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 取消
|
||||||
|
const handleCancel = () => {
|
||||||
|
visible.value = false
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.approval-detail {
|
||||||
|
.detail-section {
|
||||||
|
margin-bottom: 24px;
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--color-text-1);
|
||||||
|
border-bottom: 2px solid var(--color-border);
|
||||||
|
padding-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arco-descriptions {
|
||||||
|
.arco-descriptions-item-label {
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--color-text-1);
|
||||||
|
background-color: var(--color-fill-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.arco-descriptions-item-value {
|
||||||
|
color: var(--color-text-2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.price-text {
|
||||||
|
color: #f56c6c;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-data {
|
||||||
|
color: var(--color-text-4);
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-footer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: 24px;
|
||||||
|
padding-top: 16px;
|
||||||
|
border-top: 1px solid var(--color-border);
|
||||||
|
|
||||||
|
.arco-btn {
|
||||||
|
border-radius: 6px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 响应式设计
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.approval-detail {
|
||||||
|
.detail-section {
|
||||||
|
.arco-descriptions {
|
||||||
|
.arco-descriptions-item {
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
.arco-descriptions-item-label {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
text-align: left;
|
||||||
|
padding: 8px 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arco-descriptions-item-value {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
padding: 8px 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-footer {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.arco-space {
|
||||||
|
flex-direction: column;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.arco-btn {
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,240 @@
|
||||||
|
<template>
|
||||||
|
<div class="approval-search-container">
|
||||||
|
<a-form layout="inline" :model="searchForm" class="search-form">
|
||||||
|
<a-form-item label="设备名称">
|
||||||
|
<a-input
|
||||||
|
v-model="searchForm.equipmentName"
|
||||||
|
placeholder="请输入设备名称"
|
||||||
|
allow-clear
|
||||||
|
style="width: 200px"
|
||||||
|
@input="debouncedSearch"
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
|
||||||
|
<a-form-item label="申请人">
|
||||||
|
<a-input
|
||||||
|
v-model="searchForm.applicantName"
|
||||||
|
placeholder="请输入申请人"
|
||||||
|
allow-clear
|
||||||
|
style="width: 150px"
|
||||||
|
@input="debouncedSearch"
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
|
||||||
|
<a-form-item label="业务类型">
|
||||||
|
<a-select
|
||||||
|
v-model="searchForm.businessType"
|
||||||
|
placeholder="请选择业务类型"
|
||||||
|
allow-clear
|
||||||
|
style="width: 150px"
|
||||||
|
@change="debouncedSearch"
|
||||||
|
>
|
||||||
|
<a-option value="">全部</a-option>
|
||||||
|
<a-option :value="BusinessType.PROCUREMENT">采购</a-option>
|
||||||
|
<a-option :value="BusinessType.BORROW">借用</a-option>
|
||||||
|
<a-option :value="BusinessType.RETURN">归还</a-option>
|
||||||
|
</a-select>
|
||||||
|
</a-form-item>
|
||||||
|
|
||||||
|
<a-form-item label="审批状态">
|
||||||
|
<a-select
|
||||||
|
v-model="searchForm.approvalStatus"
|
||||||
|
placeholder="请选择状态"
|
||||||
|
allow-clear
|
||||||
|
style="width: 150px"
|
||||||
|
@change="debouncedSearch"
|
||||||
|
>
|
||||||
|
<a-option value="">全部</a-option>
|
||||||
|
<a-option :value="ApprovalStatus.PENDING">待审批</a-option>
|
||||||
|
<a-option :value="ApprovalStatus.APPROVED">已通过</a-option>
|
||||||
|
<a-option :value="ApprovalStatus.REJECTED">已拒绝</a-option>
|
||||||
|
</a-select>
|
||||||
|
</a-form-item>
|
||||||
|
|
||||||
|
<a-form-item label="申请时间">
|
||||||
|
<a-range-picker
|
||||||
|
v-model="dateRange"
|
||||||
|
style="width: 240px"
|
||||||
|
@change="handleDateChange"
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
|
||||||
|
<a-form-item>
|
||||||
|
<a-space>
|
||||||
|
<a-button type="primary" @click="search" :loading="loading">
|
||||||
|
<template #icon><icon-search /></template>
|
||||||
|
搜索
|
||||||
|
</a-button>
|
||||||
|
<a-button @click="reset" :loading="loading">
|
||||||
|
<template #icon><icon-refresh /></template>
|
||||||
|
重置
|
||||||
|
</a-button>
|
||||||
|
</a-space>
|
||||||
|
</a-form-item>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref, reactive, watch } from 'vue'
|
||||||
|
import { IconSearch, IconRefresh } from '@arco-design/web-vue/es/icon'
|
||||||
|
import type { EquipmentApprovalListReq } from '@/apis/equipment/type'
|
||||||
|
import { ApprovalStatus, BusinessType } from '@/apis/equipment/type'
|
||||||
|
|
||||||
|
// 防抖函数
|
||||||
|
const debounce = (func: Function, delay: number) => {
|
||||||
|
let timeoutId: NodeJS.Timeout
|
||||||
|
return (...args: any[]) => {
|
||||||
|
clearTimeout(timeoutId)
|
||||||
|
timeoutId = setTimeout(() => func.apply(null, args), delay)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
defineOptions({ name: 'ApprovalSearch' })
|
||||||
|
|
||||||
|
// Props
|
||||||
|
interface Props {
|
||||||
|
loading?: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = withDefaults(defineProps<Props>(), {
|
||||||
|
loading: false
|
||||||
|
})
|
||||||
|
|
||||||
|
// Emits
|
||||||
|
const emit = defineEmits<{
|
||||||
|
search: [params: EquipmentApprovalListReq]
|
||||||
|
reset: []
|
||||||
|
}>()
|
||||||
|
|
||||||
|
// 搜索表单
|
||||||
|
const searchForm = reactive<EquipmentApprovalListReq>({
|
||||||
|
equipmentName: '',
|
||||||
|
applicantName: '',
|
||||||
|
businessType: undefined,
|
||||||
|
approvalStatus: undefined,
|
||||||
|
applyTimeStart: '',
|
||||||
|
applyTimeEnd: ''
|
||||||
|
})
|
||||||
|
|
||||||
|
// 日期范围
|
||||||
|
const dateRange = ref<[string, string] | null>(null)
|
||||||
|
|
||||||
|
// 防抖搜索函数
|
||||||
|
const debouncedSearch = debounce(() => {
|
||||||
|
search()
|
||||||
|
}, 300)
|
||||||
|
|
||||||
|
// 搜索
|
||||||
|
const search = () => {
|
||||||
|
console.log('🔍 ApprovalSearch - 搜索按钮被点击')
|
||||||
|
console.log('🔍 ApprovalSearch - 搜索表单数据:', searchForm)
|
||||||
|
console.log('🔍 ApprovalSearch - 搜索表单数据类型:', typeof searchForm)
|
||||||
|
console.log('🔍 ApprovalSearch - 搜索表单的键值对:')
|
||||||
|
Object.entries(searchForm).forEach(([key, value]) => {
|
||||||
|
console.log(` ${key}: ${value} (${typeof value})`)
|
||||||
|
})
|
||||||
|
|
||||||
|
// 构建搜索参数
|
||||||
|
const searchParams: EquipmentApprovalListReq = {
|
||||||
|
equipmentName: searchForm.equipmentName || undefined,
|
||||||
|
applicantName: searchForm.applicantName || undefined,
|
||||||
|
businessType: searchForm.businessType,
|
||||||
|
approvalStatus: searchForm.approvalStatus,
|
||||||
|
applyTimeStart: searchForm.applyTimeStart,
|
||||||
|
applyTimeEnd: searchForm.applyTimeEnd
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('🔍 ApprovalSearch - 发送的搜索参数:', searchParams)
|
||||||
|
console.log('🔍 ApprovalSearch - 发送参数的类型:', typeof searchParams)
|
||||||
|
console.log('🔍 ApprovalSearch - 发送参数的键值对:')
|
||||||
|
Object.entries(searchParams).forEach(([key, value]) => {
|
||||||
|
console.log(` ${key}: ${value} (${typeof value})`)
|
||||||
|
})
|
||||||
|
|
||||||
|
emit('search', searchParams)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 重置
|
||||||
|
const reset = () => {
|
||||||
|
console.log('🔄 ApprovalSearch - 重置操作')
|
||||||
|
|
||||||
|
// 重置表单
|
||||||
|
Object.assign(searchForm, {
|
||||||
|
equipmentName: '',
|
||||||
|
applicantName: '',
|
||||||
|
businessType: undefined,
|
||||||
|
approvalStatus: undefined,
|
||||||
|
applyTimeStart: '',
|
||||||
|
applyTimeEnd: ''
|
||||||
|
})
|
||||||
|
|
||||||
|
// 重置日期范围
|
||||||
|
dateRange.value = null
|
||||||
|
|
||||||
|
emit('reset')
|
||||||
|
}
|
||||||
|
|
||||||
|
// 处理日期变化
|
||||||
|
const handleDateChange = (dates: [string, string] | null) => {
|
||||||
|
if (dates && dates.length === 2) {
|
||||||
|
searchForm.applyTimeStart = dates[0]
|
||||||
|
searchForm.applyTimeEnd = dates[1]
|
||||||
|
} else {
|
||||||
|
searchForm.applyTimeStart = ''
|
||||||
|
searchForm.applyTimeEnd = ''
|
||||||
|
}
|
||||||
|
debouncedSearch()
|
||||||
|
}
|
||||||
|
|
||||||
|
// 监听loading状态
|
||||||
|
watch(() => props.loading, (newVal) => {
|
||||||
|
console.log('🔄 ApprovalSearch - loading状态变化:', newVal)
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.approval-search-container {
|
||||||
|
.search-form {
|
||||||
|
.arco-form-item {
|
||||||
|
margin-bottom: 0;
|
||||||
|
margin-right: 16px;
|
||||||
|
|
||||||
|
.arco-form-item-label {
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--color-text-1);
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.arco-input,
|
||||||
|
.arco-select,
|
||||||
|
.arco-picker {
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arco-btn {
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 响应式设计
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.approval-search-container {
|
||||||
|
.search-form {
|
||||||
|
.arco-form-item {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
margin-right: 0;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.arco-input,
|
||||||
|
.arco-select,
|
||||||
|
.arco-picker {
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,813 @@
|
||||||
|
<template>
|
||||||
|
<div class="equipment-approval-container">
|
||||||
|
<!-- 页面头部 -->
|
||||||
|
<div class="page-header">
|
||||||
|
<div class="header-content">
|
||||||
|
<div class="header-left">
|
||||||
|
<div class="page-title">
|
||||||
|
<IconCheckCircle style="font-size: 24px; margin-right: 12px; color: var(--color-primary);" />
|
||||||
|
<h1>设备审批控制台</h1>
|
||||||
|
</div>
|
||||||
|
<div class="page-description">
|
||||||
|
管理设备采购申请的审批流程，包括待审批、已审批等状态管理
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="header-right">
|
||||||
|
<a-space>
|
||||||
|
<ApprovalSearch
|
||||||
|
:loading="loading"
|
||||||
|
@search="handleSearch"
|
||||||
|
@reset="handleReset"
|
||||||
|
/>
|
||||||
|
<a-button type="primary" size="large" @click="refreshData">
|
||||||
|
<template #icon>
|
||||||
|
<IconRefresh />
|
||||||
|
</template>
|
||||||
|
刷新
|
||||||
|
</a-button>
|
||||||
|
</a-space>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 统计卡片 -->
|
||||||
|
<div class="stats-container">
|
||||||
|
<a-row :gutter="16">
|
||||||
|
<a-col :span="6">
|
||||||
|
<a-card class="stat-card" :bordered="false">
|
||||||
|
<div class="stat-content">
|
||||||
|
<div class="stat-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
|
||||||
|
<IconClockCircle />
|
||||||
|
</div>
|
||||||
|
<div class="stat-info">
|
||||||
|
<div class="stat-number">{{ getPendingCount() }}</div>
|
||||||
|
<div class="stat-label">待审批</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-card>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="6">
|
||||||
|
<a-card class="stat-card" :bordered="false">
|
||||||
|
<div class="stat-content">
|
||||||
|
<div class="stat-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
|
||||||
|
<IconCheckCircle />
|
||||||
|
</div>
|
||||||
|
<div class="stat-info">
|
||||||
|
<div class="stat-number">{{ getApprovedCount() }}</div>
|
||||||
|
<div class="stat-label">已通过</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-card>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="6">
|
||||||
|
<a-card class="stat-card" :bordered="false">
|
||||||
|
<div class="stat-content">
|
||||||
|
<div class="stat-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
|
||||||
|
<IconCloseCircle />
|
||||||
|
</div>
|
||||||
|
<div class="stat-info">
|
||||||
|
<div class="stat-number">{{ getRejectedCount() }}</div>
|
||||||
|
<div class="stat-label">已拒绝</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-card>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="6">
|
||||||
|
<a-card class="stat-card" :bordered="false">
|
||||||
|
<div class="stat-content">
|
||||||
|
<div class="stat-icon" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);">
|
||||||
|
<IconApps />
|
||||||
|
</div>
|
||||||
|
<div class="stat-info">
|
||||||
|
<div class="stat-number">¥{{ getTotalAmount() }}</div>
|
||||||
|
<div class="stat-label">审批总额</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-card>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 标签页 -->
|
||||||
|
<a-card class="table-card" :bordered="false">
|
||||||
|
<template #title>
|
||||||
|
<div class="card-title">
|
||||||
|
<a-tabs v-model:active-key="activeTab" @change="handleTabChange">
|
||||||
|
<a-tab-pane key="pending" title="待审批">
|
||||||
|
<template #title>
|
||||||
|
<span>
|
||||||
|
<IconClockCircle style="margin-right: 4px;" />
|
||||||
|
待审批 ({{ getPendingCount() }})
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
</a-tab-pane>
|
||||||
|
<a-tab-pane key="approved" title="已审批">
|
||||||
|
<template #title>
|
||||||
|
<span>
|
||||||
|
<IconCheckCircle style="margin-right: 4px;" />
|
||||||
|
已审批 ({{ getApprovedCount() + getRejectedCount() }})
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
</a-tab-pane>
|
||||||
|
</a-tabs>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<a-table
|
||||||
|
:columns="columns"
|
||||||
|
:data="tableData"
|
||||||
|
:loading="loading"
|
||||||
|
:pagination="pagination"
|
||||||
|
row-key="approvalId"
|
||||||
|
@change="handleTableChange"
|
||||||
|
>
|
||||||
|
<!-- 业务类型 -->
|
||||||
|
<template #businessType="{ record }">
|
||||||
|
<a-tag :color="getBusinessTypeColor(record.businessType)">
|
||||||
|
{{ getBusinessTypeText(record.businessType) }}
|
||||||
|
</a-tag>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- 审批状态 -->
|
||||||
|
<template #approvalStatus="{ record }">
|
||||||
|
<a-tag :color="getApprovalStatusColor(record.approvalStatus)">
|
||||||
|
{{ getApprovalStatusText(record.approvalStatus) }}
|
||||||
|
</a-tag>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- 采购价格 -->
|
||||||
|
<template #purchasePrice="{ record }">
|
||||||
|
<span v-if="record.purchasePrice" class="price-text">
|
||||||
|
¥{{ formatPrice(record.purchasePrice) }}
|
||||||
|
</span>
|
||||||
|
<span v-else class="no-data">-</span>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- 总价 -->
|
||||||
|
<template #totalPrice="{ record }">
|
||||||
|
<span v-if="record.totalPrice" class="price-text">
|
||||||
|
¥{{ formatPrice(record.totalPrice) }}
|
||||||
|
</span>
|
||||||
|
<span v-else class="no-data">-</span>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- 申请时间 -->
|
||||||
|
<template #applyTime="{ record }">
|
||||||
|
<span v-if="record.applyTime" class="time-text">
|
||||||
|
{{ formatDateTime(record.applyTime) }}
|
||||||
|
</span>
|
||||||
|
<span v-else class="no-data">-</span>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- 审批时间 -->
|
||||||
|
<template #approvalTime="{ record }">
|
||||||
|
<span v-if="record.approvalTime" class="time-text">
|
||||||
|
{{ formatDateTime(record.approvalTime) }}
|
||||||
|
</span>
|
||||||
|
<span v-else class="no-data">-</span>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- 操作 -->
|
||||||
|
<template #action="{ record }">
|
||||||
|
<a-space>
|
||||||
|
<a-button type="text" size="small" @click="handleView(record)">
|
||||||
|
查看详情
|
||||||
|
</a-button>
|
||||||
|
<a-button
|
||||||
|
v-if="record.approvalStatus === ApprovalStatus.PENDING"
|
||||||
|
type="primary"
|
||||||
|
size="small"
|
||||||
|
@click="handleApprove(record)"
|
||||||
|
>
|
||||||
|
审批通过
|
||||||
|
</a-button>
|
||||||
|
<a-button
|
||||||
|
v-if="record.approvalStatus === ApprovalStatus.PENDING"
|
||||||
|
type="text"
|
||||||
|
size="small"
|
||||||
|
status="danger"
|
||||||
|
@click="handleReject(record)"
|
||||||
|
>
|
||||||
|
审批拒绝
|
||||||
|
</a-button>
|
||||||
|
</a-space>
|
||||||
|
</template>
|
||||||
|
</a-table>
|
||||||
|
</a-card>
|
||||||
|
|
||||||
|
<!-- 审批详情弹窗 -->
|
||||||
|
<ApprovalDetailModal
|
||||||
|
v-model:visible="detailModalVisible"
|
||||||
|
:approval-data="currentApproval"
|
||||||
|
@success="handleModalSuccess"
|
||||||
|
@approve="handleApproveFromDetail"
|
||||||
|
@reject="handleRejectFromDetail"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- 审批操作弹窗 -->
|
||||||
|
<ApprovalActionModal
|
||||||
|
v-model:visible="actionModalVisible"
|
||||||
|
:approval-data="currentApproval"
|
||||||
|
:action-type="actionType"
|
||||||
|
@success="handleModalSuccess"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'
|
||||||
|
import { Modal } from '@arco-design/web-vue'
|
||||||
|
import {
|
||||||
|
IconApps,
|
||||||
|
IconCheckCircle,
|
||||||
|
IconClockCircle,
|
||||||
|
IconCloseCircle,
|
||||||
|
IconRefresh,
|
||||||
|
} from '@arco-design/web-vue/es/icon'
|
||||||
|
import message from '@arco-design/web-vue/es/message'
|
||||||
|
import ApprovalDetailModal from './components/ApprovalDetailModal.vue'
|
||||||
|
import ApprovalActionModal from './components/ApprovalActionModal.vue'
|
||||||
|
import ApprovalSearch from './components/ApprovalSearch.vue'
|
||||||
|
import { equipmentApprovalApi } from '@/apis/equipment/approval'
|
||||||
|
import type { EquipmentApprovalListReq, EquipmentApprovalResp } from '@/apis/equipment/type'
|
||||||
|
import { ApprovalStatus, BusinessType } from '@/apis/equipment/type'
|
||||||
|
|
||||||
|
defineOptions({ name: 'EquipmentApproval' })
|
||||||
|
|
||||||
|
// 当前搜索参数
|
||||||
|
const currentSearchParams = ref<EquipmentApprovalListReq>({})
|
||||||
|
|
||||||
|
// 表格数据
|
||||||
|
const tableData = ref<EquipmentApprovalResp[]>([])
|
||||||
|
const loading = ref(false)
|
||||||
|
|
||||||
|
// 分页配置
|
||||||
|
const pagination = reactive<any>({
|
||||||
|
current: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
total: 0,
|
||||||
|
showPageSize: true,
|
||||||
|
showJumper: true,
|
||||||
|
showTotal: (total: number) => `共 ${total} 条记录`,
|
||||||
|
})
|
||||||
|
|
||||||
|
// 弹窗控制
|
||||||
|
const detailModalVisible = ref(false)
|
||||||
|
const actionModalVisible = ref(false)
|
||||||
|
const currentApproval = ref<EquipmentApprovalResp | null>(null)
|
||||||
|
const actionType = ref<'approve' | 'reject'>('approve')
|
||||||
|
|
||||||
|
// 当前标签页
|
||||||
|
const activeTab = ref('pending')
|
||||||
|
|
||||||
|
// 表格列配置
|
||||||
|
const columns = [
|
||||||
|
{
|
||||||
|
title: '设备名称',
|
||||||
|
dataIndex: 'equipmentName',
|
||||||
|
key: 'equipmentName',
|
||||||
|
width: 150,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '设备类型',
|
||||||
|
dataIndex: 'equipmentType',
|
||||||
|
key: 'equipmentType',
|
||||||
|
width: 120,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '业务类型',
|
||||||
|
dataIndex: 'businessType',
|
||||||
|
key: 'businessType',
|
||||||
|
slotName: 'businessType',
|
||||||
|
width: 100,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '设备型号',
|
||||||
|
dataIndex: 'equipmentModel',
|
||||||
|
key: 'equipmentModel',
|
||||||
|
width: 120,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '品牌',
|
||||||
|
dataIndex: 'brand',
|
||||||
|
key: 'brand',
|
||||||
|
width: 100,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '供应商',
|
||||||
|
dataIndex: 'supplierName',
|
||||||
|
key: 'supplierName',
|
||||||
|
width: 150,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '采购价格',
|
||||||
|
dataIndex: 'purchasePrice',
|
||||||
|
key: 'purchasePrice',
|
||||||
|
slotName: 'purchasePrice',
|
||||||
|
width: 120,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '总价',
|
||||||
|
dataIndex: 'totalPrice',
|
||||||
|
key: 'totalPrice',
|
||||||
|
slotName: 'totalPrice',
|
||||||
|
width: 120,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '数量',
|
||||||
|
dataIndex: 'quantity',
|
||||||
|
key: 'quantity',
|
||||||
|
width: 80,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '申请人',
|
||||||
|
dataIndex: 'applicantName',
|
||||||
|
key: 'applicantName',
|
||||||
|
width: 120,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '申请时间',
|
||||||
|
dataIndex: 'applyTime',
|
||||||
|
key: 'applyTime',
|
||||||
|
slotName: 'applyTime',
|
||||||
|
width: 160,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '审批状态',
|
||||||
|
dataIndex: 'approvalStatus',
|
||||||
|
key: 'approvalStatus',
|
||||||
|
slotName: 'approvalStatus',
|
||||||
|
width: 120,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '审批人',
|
||||||
|
dataIndex: 'approverName',
|
||||||
|
key: 'approverName',
|
||||||
|
width: 120,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '审批时间',
|
||||||
|
dataIndex: 'approvalTime',
|
||||||
|
key: 'approvalTime',
|
||||||
|
slotName: 'approvalTime',
|
||||||
|
width: 160,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '操作',
|
||||||
|
key: 'action',
|
||||||
|
slotName: 'action',
|
||||||
|
width: 200,
|
||||||
|
fixed: 'right',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
// 获取审批状态颜色
|
||||||
|
const getApprovalStatusColor = (status: ApprovalStatus) => {
|
||||||
|
const colorMap: Record<string, string> = {
|
||||||
|
[ApprovalStatus.PENDING]: 'orange',
|
||||||
|
[ApprovalStatus.APPROVED]: 'green',
|
||||||
|
[ApprovalStatus.REJECTED]: 'red',
|
||||||
|
}
|
||||||
|
return colorMap[status] || 'blue'
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取业务类型颜色
|
||||||
|
const getBusinessTypeColor = (type: BusinessType) => {
|
||||||
|
const colorMap: Record<string, string> = {
|
||||||
|
[BusinessType.PROCUREMENT]: 'blue',
|
||||||
|
[BusinessType.BORROW]: 'green',
|
||||||
|
[BusinessType.RETURN]: 'orange',
|
||||||
|
}
|
||||||
|
return colorMap[type] || 'gray'
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取业务类型文本
|
||||||
|
const getBusinessTypeText = (type: BusinessType) => {
|
||||||
|
const textMap: Record<string, string> = {
|
||||||
|
[BusinessType.PROCUREMENT]: '采购',
|
||||||
|
[BusinessType.BORROW]: '借用',
|
||||||
|
[BusinessType.RETURN]: '归还',
|
||||||
|
}
|
||||||
|
return textMap[type] || '未知'
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取审批状态文本
|
||||||
|
const getApprovalStatusText = (status: ApprovalStatus) => {
|
||||||
|
const textMap: Record<string, string> = {
|
||||||
|
[ApprovalStatus.PENDING]: '待审批',
|
||||||
|
[ApprovalStatus.APPROVED]: '已通过',
|
||||||
|
[ApprovalStatus.REJECTED]: '已拒绝',
|
||||||
|
}
|
||||||
|
return textMap[status] || '未知'
|
||||||
|
}
|
||||||
|
|
||||||
|
// 格式化价格
|
||||||
|
const formatPrice = (price: number) => {
|
||||||
|
return price.toLocaleString('zh-CN', {
|
||||||
|
minimumFractionDigits: 2,
|
||||||
|
maximumFractionDigits: 2,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 格式化日期时间
|
||||||
|
const formatDateTime = (dateTime: string) => {
|
||||||
|
if (!dateTime) return '-'
|
||||||
|
const date = new Date(dateTime)
|
||||||
|
return date.toLocaleString('zh-CN', {
|
||||||
|
year: 'numeric',
|
||||||
|
month: '2-digit',
|
||||||
|
day: '2-digit',
|
||||||
|
hour: '2-digit',
|
||||||
|
minute: '2-digit',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 转换后端数据
|
||||||
|
const transformBackendData = (data: any[]): EquipmentApprovalResp[] => {
|
||||||
|
return data.map((item: any) => ({
|
||||||
|
approvalId: item.approvalId || item.id,
|
||||||
|
equipmentId: item.equipmentId,
|
||||||
|
equipmentName: item.equipmentName,
|
||||||
|
equipmentType: item.equipmentType,
|
||||||
|
equipmentModel: item.equipmentModel,
|
||||||
|
brand: item.brand,
|
||||||
|
supplierName: item.supplierName,
|
||||||
|
purchasePrice: item.purchasePrice,
|
||||||
|
totalPrice: item.totalPrice,
|
||||||
|
quantity: item.quantity,
|
||||||
|
applicantName: item.applicantName,
|
||||||
|
applicantId: item.applicantId,
|
||||||
|
applyTime: item.applyTime,
|
||||||
|
applyReason: item.applyReason,
|
||||||
|
businessType: item.businessType || BusinessType.PROCUREMENT,
|
||||||
|
approvalStatus: item.approvalStatus,
|
||||||
|
approverName: item.approverName,
|
||||||
|
approverId: item.approverId,
|
||||||
|
approvalTime: item.approvalTime,
|
||||||
|
approvalComment: item.approvalComment,
|
||||||
|
createTime: item.createTime,
|
||||||
|
updateTime: item.updateTime,
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
|
||||||
|
// 加载数据
|
||||||
|
const loadData = async (searchParams?: EquipmentApprovalListReq) => {
|
||||||
|
console.log('📊 loadData - 开始加载数据')
|
||||||
|
console.log('📊 loadData - 接收到的搜索参数:', searchParams)
|
||||||
|
console.log('📊 loadData - 当前标签页:', activeTab.value)
|
||||||
|
|
||||||
|
loading.value = true
|
||||||
|
try {
|
||||||
|
const params: EquipmentApprovalListReq = {
|
||||||
|
pageSize: pagination.pageSize || 10,
|
||||||
|
page: pagination.current || 1,
|
||||||
|
pageNum: pagination.current || 1, // 添加 pageNum 参数，以防后端期望这个名称
|
||||||
|
...(searchParams || {}),
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('📊 loadData - 构建的完整请求参数:', params)
|
||||||
|
|
||||||
|
let res: any
|
||||||
|
if (activeTab.value === 'pending') {
|
||||||
|
console.log('📊 loadData - 调用待审批API')
|
||||||
|
res = await equipmentApprovalApi.getPendingApprovals(params)
|
||||||
|
} else {
|
||||||
|
console.log('📊 loadData - 调用已审批API')
|
||||||
|
res = await equipmentApprovalApi.getApprovedApprovals(params)
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('API响应:', res)
|
||||||
|
|
||||||
|
// 处理不同的响应格式
|
||||||
|
let dataList: any[] = []
|
||||||
|
let total = 0
|
||||||
|
|
||||||
|
if (res && res.data) {
|
||||||
|
if (Array.isArray(res.data)) {
|
||||||
|
dataList = res.data
|
||||||
|
total = res.data.length
|
||||||
|
} else if (res.data && Array.isArray((res.data as any).records)) {
|
||||||
|
dataList = (res.data as any).records
|
||||||
|
total = (res.data as any).total || 0
|
||||||
|
} else if (res.data && Array.isArray((res.data as any).list)) {
|
||||||
|
dataList = (res.data as any).list
|
||||||
|
total = (res.data as any).total || 0
|
||||||
|
} else if (res.data && Array.isArray((res.data as any).rows)) {
|
||||||
|
dataList = (res.data as any).rows
|
||||||
|
total = (res.data as any).total || 0
|
||||||
|
} else if (res.data && Array.isArray((res.data as any).data)) {
|
||||||
|
dataList = (res.data as any).data
|
||||||
|
total = (res.data as any).total || 0
|
||||||
|
}
|
||||||
|
} else if (Array.isArray(res)) {
|
||||||
|
dataList = res
|
||||||
|
total = res.length
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('处理后的数据列表:', dataList)
|
||||||
|
console.log('总数:', total)
|
||||||
|
|
||||||
|
if (dataList.length > 0) {
|
||||||
|
const transformedData = transformBackendData(dataList)
|
||||||
|
console.log('转换后的数据:', transformedData)
|
||||||
|
tableData.value = transformedData
|
||||||
|
} else {
|
||||||
|
console.log('没有数据，设置空数组')
|
||||||
|
tableData.value = []
|
||||||
|
}
|
||||||
|
|
||||||
|
pagination.total = total
|
||||||
|
console.log('设置分页总数:', pagination.total)
|
||||||
|
} catch (error: any) {
|
||||||
|
console.error('加载数据失败:', error)
|
||||||
|
message.error(error?.message || '加载数据失败')
|
||||||
|
tableData.value = []
|
||||||
|
pagination.total = 0
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
console.log('📊 loadData - 加载完成')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 搜索
|
||||||
|
const handleSearch = (searchParams: EquipmentApprovalListReq) => {
|
||||||
|
console.log('🔍 主组件 - 接收到的搜索参数:', searchParams)
|
||||||
|
pagination.current = 1
|
||||||
|
currentSearchParams.value = { ...searchParams }
|
||||||
|
loadData(searchParams)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 重置
|
||||||
|
const handleReset = () => {
|
||||||
|
console.log('🔄 主组件 - 重置操作')
|
||||||
|
pagination.current = 1
|
||||||
|
currentSearchParams.value = {}
|
||||||
|
loadData({}) // 传递空对象而不是 undefined
|
||||||
|
}
|
||||||
|
|
||||||
|
// 表格变化
|
||||||
|
const handleTableChange = (pag: any) => {
|
||||||
|
pagination.current = pag.current || 1
|
||||||
|
pagination.pageSize = pag.pageSize || 10
|
||||||
|
loadData(currentSearchParams.value || {})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 标签页变化
|
||||||
|
const handleTabChange = (key: string) => {
|
||||||
|
activeTab.value = key
|
||||||
|
pagination.current = 1
|
||||||
|
loadData(currentSearchParams.value || {})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 查看详情
|
||||||
|
const handleView = (record: EquipmentApprovalResp) => {
|
||||||
|
currentApproval.value = { ...record }
|
||||||
|
detailModalVisible.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
// 审批通过
|
||||||
|
const handleApprove = (record: EquipmentApprovalResp) => {
|
||||||
|
currentApproval.value = { ...record }
|
||||||
|
actionType.value = 'approve'
|
||||||
|
actionModalVisible.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
// 审批拒绝
|
||||||
|
const handleReject = (record: EquipmentApprovalResp) => {
|
||||||
|
currentApproval.value = { ...record }
|
||||||
|
actionType.value = 'reject'
|
||||||
|
actionModalVisible.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
// 从详情弹窗审批通过
|
||||||
|
const handleApproveFromDetail = (record: EquipmentApprovalResp) => {
|
||||||
|
currentApproval.value = { ...record }
|
||||||
|
actionType.value = 'approve'
|
||||||
|
actionModalVisible.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
// 从详情弹窗审批拒绝
|
||||||
|
const handleRejectFromDetail = (record: EquipmentApprovalResp) => {
|
||||||
|
currentApproval.value = { ...record }
|
||||||
|
actionType.value = 'reject'
|
||||||
|
actionModalVisible.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
// 弹窗成功回调
|
||||||
|
const handleModalSuccess = () => {
|
||||||
|
detailModalVisible.value = false
|
||||||
|
actionModalVisible.value = false
|
||||||
|
loadData(currentSearchParams.value || {})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 刷新数据
|
||||||
|
const refreshData = () => {
|
||||||
|
loadData(currentSearchParams.value || {})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 统计函数
|
||||||
|
const getPendingCount = () => {
|
||||||
|
return tableData.value.filter(item =>
|
||||||
|
item.approvalStatus === ApprovalStatus.PENDING
|
||||||
|
).length
|
||||||
|
}
|
||||||
|
|
||||||
|
const getApprovedCount = () => {
|
||||||
|
return tableData.value.filter(item =>
|
||||||
|
item.approvalStatus === ApprovalStatus.APPROVED
|
||||||
|
).length
|
||||||
|
}
|
||||||
|
|
||||||
|
const getRejectedCount = () => {
|
||||||
|
return tableData.value.filter(item =>
|
||||||
|
item.approvalStatus === ApprovalStatus.REJECTED
|
||||||
|
).length
|
||||||
|
}
|
||||||
|
|
||||||
|
const getTotalAmount = () => {
|
||||||
|
const total = tableData.value.reduce((sum, item) => {
|
||||||
|
return sum + (item.totalPrice || 0)
|
||||||
|
}, 0)
|
||||||
|
return formatPrice(total)
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
loadData({}) // 传递空对象而不是 undefined
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.equipment-approval-container {
|
||||||
|
.page-header {
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 24px;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
|
||||||
|
.header-content {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.header-left {
|
||||||
|
.page-title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin: 0;
|
||||||
|
color: white;
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: 600;
|
||||||
|
background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-description {
|
||||||
|
color: rgba(255, 255, 255, 0.8);
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-right {
|
||||||
|
.arco-btn {
|
||||||
|
border-radius: 8px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-container {
|
||||||
|
margin-bottom: 24px;
|
||||||
|
|
||||||
|
.stat-card {
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: translateY(-4px);
|
||||||
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-content {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.stat-icon {
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
border-radius: 12px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-right: 16px;
|
||||||
|
|
||||||
|
.arco-icon {
|
||||||
|
font-size: 24px;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-info {
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
|
.stat-number {
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--color-text-1);
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-label {
|
||||||
|
font-size: 14px;
|
||||||
|
color: var(--color-text-3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-card {
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||||
|
|
||||||
|
.card-title {
|
||||||
|
.arco-tabs {
|
||||||
|
.arco-tabs-nav {
|
||||||
|
background: transparent;
|
||||||
|
|
||||||
|
.arco-tabs-tab {
|
||||||
|
border-radius: 8px;
|
||||||
|
margin-right: 8px;
|
||||||
|
|
||||||
|
&.arco-tabs-tab-active {
|
||||||
|
background: var(--color-primary-light-1);
|
||||||
|
color: var(--color-primary);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.arco-table {
|
||||||
|
.arco-table-th {
|
||||||
|
background-color: var(--color-fill-2);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arco-table-tr:hover {
|
||||||
|
background-color: var(--color-fill-1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.price-text {
|
||||||
|
color: #f56c6c;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-text {
|
||||||
|
color: var(--color-text-2);
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-data {
|
||||||
|
color: var(--color-text-4);
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 响应式设计
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.equipment-approval-container {
|
||||||
|
.page-header {
|
||||||
|
.header-content {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
|
||||||
|
.header-right {
|
||||||
|
margin-top: 16px;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.arco-space {
|
||||||
|
width: 100%;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-container {
|
||||||
|
.arco-col {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue