完善支付弹窗和到货弹窗

This commit is contained in:
Mr.j 2025-08-13 14:22:11 +08:00
parent f1faa6df05
commit aa40502f82
7 changed files with 1148 additions and 109 deletions

View File

@ -4,8 +4,8 @@ VITE_API_PREFIX = '/dev-api'
# 接口地址
# VITE_API_BASE_URL = 'http://pms.dtyx.net:9158/'
# VITE_API_BASE_URL = 'http://localhost:8888/'
VITE_API_BASE_URL = 'http://10.18.34.163:8888/'
VITE_API_BASE_URL = 'http://localhost:8888/'
# VITE_API_BASE_URL = 'http://10.18.34.163:8888/'
# VITE_API_BASE_URL = 'http://10.18.34.213:8888/'
# 接口地址 (WebSocket)

View File

@ -99,6 +99,34 @@ export const equipmentProcurementApi = {
return http.get<ApiRes<EquipmentResp>>(`/equipment/procurement/detail/${equipmentId}`)
},
/**
*
*/
receiveGoods: (equipmentId: string, data: ReceiptRequest) => {
return http.post<ApiRes<null>>(`/equipment/procurement/receipt/${equipmentId}`, data)
},
/**
*
*/
getReceiptDetail: (equipmentId: string) => {
return http.get<ApiRes<ReceiptDetail>>(`/equipment/procurement/receipt/${equipmentId}`)
},
/**
*
*/
makePayment: (equipmentId: string, data: PaymentRequest) => {
return http.post<ApiRes<null>>(`/equipment/procurement/payment/${equipmentId}`, data)
},
/**
*
*/
getPaymentDetail: (equipmentId: string) => {
return http.get<ApiRes<PaymentDetail>>(`/equipment/procurement/payment/${equipmentId}`)
},
/**
*
*/
@ -117,9 +145,6 @@ export const equipmentProcurementApi = {
*
*/
export: (params: EquipmentListReq) => {
return http.get<Blob>('/equipment/procurement/export', {
params,
responseType: 'blob'
})
return http.get('/equipment/procurement/export', params, { responseType: 'blob' })
}
}

View File

@ -101,28 +101,28 @@ export interface EquipmentResp {
/** 资产编号 */
assetCode?: string
/** 设备名称 */
equipmentName: string
equipmentName?: string
/** 设备类型 */
equipmentType: string
/** 设备类型描述 */
equipmentType?: string
/** 设备类型标签 */
equipmentTypeLabel?: string
/** 设备型号 */
equipmentModel: string
/** 设备SN */
equipmentSn: string
equipmentModel?: string
/** 设备序列号 */
equipmentSn?: string
/** 品牌 */
brand?: string
/** 配置规格/参数 */
specification?: string
/** 设备状态 */
equipmentStatus: string
/** 设备状态描述 */
equipmentStatus?: string
/** 设备状态标签 */
equipmentStatusLabel?: string
/** 使用状态 */
useStatus: string
useStatus?: string
/** 位置状态 */
locationStatus?: string
/** 位置状态描述 */
/** 位置状态标签 */
locationStatusLabel?: string
/** 设备当前物理位置 */
physicalLocation?: string
@ -130,7 +130,7 @@ export interface EquipmentResp {
responsiblePerson?: string
/** 健康状态 */
healthStatus?: string
/** 健康状态描述 */
/** 健康状态标签 */
healthStatusLabel?: string
/** 采购时间 */
purchaseTime?: string
@ -138,13 +138,13 @@ export interface EquipmentResp {
inStockTime?: string
/** 启用时间 */
activationTime?: string
/** 预报废时间 */
/** 预报废时间 */
expectedScrapTime?: string
/** 实际报废时间 */
actualScrapTime?: string
/** 状态变更时间 */
statusChangeTime?: string
/** 采购订单 */
/** 采购订单 */
purchaseOrder?: string
/** 供应商名称 */
supplierName?: string
@ -158,9 +158,9 @@ export interface EquipmentResp {
depreciationYears?: number
/** 残值 */
salvageValue?: number
/** 保修截止日期 */
/** 保修到期日期 */
warrantyExpireDate?: string
/** 上次维护日期 */
/** 最后维护日期 */
lastMaintenanceDate?: string
/** 下次维护日期 */
nextMaintenanceDate?: string
@ -176,7 +176,7 @@ export interface EquipmentResp {
projectName?: string
/** 使用人ID */
userId?: string
/** 使用人 */
/** 使用人姓名 */
name?: string
/** 创建时间 */
createTime?: string
@ -194,12 +194,14 @@ export interface EquipmentResp {
inventoryBasis?: string
/** 动态记录 */
dynamicRecord?: string
/** 采购状态 */
procurementStatus?: string
/** 审批状态 */
approvalStatus?: string
/** 收货状态 */
receiptStatus?: string
/** 支付状态 */
paymentStatus?: string
}
/**
@ -406,3 +408,191 @@ export interface EquipmentApprovalResp {
/** 更新时间 */
updateTime: string
}
/**
*
*/
export interface ReceiptRequest {
/** 收货时间 */
receiptTime: string
/** 收货人 */
receiptPerson: string
/** 收货数量 */
receiptQuantity: number
/** 收货备注 */
receiptRemark?: string
/** 外观检查结果 */
appearanceCheck: string
/** 功能测试结果 */
functionTest: string
/** 包装完整性 */
packageIntegrity: string
/** 配件完整性 */
accessoryIntegrity: string
/** 检查结果 */
checkResult: 'PASS' | 'FAIL' | 'CONDITIONAL'
/** 检查备注 */
checkRemark?: string
/** 入库位置 */
storageLocation: string
/** 库管员 */
storageManager: string
}
/**
*
*/
export interface ReceiptDetail {
/** 设备ID */
equipmentId: string
/** 设备名称 */
equipmentName: string
/** 设备类型 */
equipmentType: string
/** 设备型号 */
equipmentModel: string
/** 品牌 */
brand: string
/** 供应商 */
supplierName: string
/** 采购订单 */
purchaseOrder: string
/** 收货状态 */
receiptStatus: string
/** 收货时间 */
receiptTime: string
/** 收货人 */
receiptPerson: string
/** 收货数量 */
receiptQuantity: number
/** 收货备注 */
receiptRemark?: string
/** 外观检查 */
appearanceCheck: string
/** 功能测试 */
functionTest: string
/** 包装完整性 */
packageIntegrity: string
/** 配件完整性 */
accessoryIntegrity: string
/** 检查结果 */
checkResult: string
/** 检查备注 */
checkRemark?: string
/** 入库状态 */
storageStatus: string
/** 入库时间 */
storageTime: string
/** 入库位置 */
storageLocation: string
/** 库管员 */
storageManager: string
}
/**
*
*/
export interface PaymentRequest {
/** 支付方式 */
paymentMethod: string
/** 支付金额 */
paymentAmount: number
/** 支付时间 */
paymentTime: string
/** 支付人 */
paymentPerson: string
/** 支付备注 */
paymentRemark?: string
/** 发票类型 */
invoiceType: string
/** 发票号码 */
invoiceNumber: string
/** 开票日期 */
invoiceDate: string
/** 发票金额 */
invoiceAmount: number
/** 税率 */
taxRate: number
/** 税额 */
taxAmount: number
/** 不含税金额 */
amountWithoutTax: number
/** 合同编号 */
contractNumber: string
/** 合同金额 */
contractAmount: number
/** 签订日期 */
contractDate: string
/** 付款条件 */
paymentTerms: string
/** 付款期限 */
paymentDeadline: string
}
/**
*
*/
export interface PaymentDetail {
/** 设备ID */
equipmentId: string
/** 设备名称 */
equipmentName: string
/** 设备类型 */
equipmentType: string
/** 设备型号 */
equipmentModel: string
/** 品牌 */
brand: string
/** 供应商 */
supplierName: string
/** 采购订单 */
purchaseOrder: string
/** 采购价格 */
purchasePrice: number
/** 采购数量 */
quantity: number
/** 总金额 */
totalPrice: number
/** 采购日期 */
purchaseTime: string
/** 支付状态 */
paymentStatus: string
/** 支付方式 */
paymentMethod: string
/** 支付金额 */
paymentAmount: number
/** 支付时间 */
paymentTime: string
/** 支付人 */
paymentPerson: string
/** 支付备注 */
paymentRemark?: string
/** 发票状态 */
invoiceStatus: string
/** 发票类型 */
invoiceType: string
/** 发票号码 */
invoiceNumber: string
/** 开票日期 */
invoiceDate: string
/** 发票金额 */
invoiceAmount: number
/** 税率 */
taxRate: number
/** 税额 */
taxAmount: number
/** 不含税金额 */
amountWithoutTax: number
/** 合同编号 */
contractNumber: string
/** 合同状态 */
contractStatus: string
/** 合同金额 */
contractAmount: number
/** 签订日期 */
contractDate: string
/** 付款条件 */
paymentTerms: string
/** 付款期限 */
paymentDeadline: string
}

View File

@ -7,70 +7,7 @@ export {}
declare module 'vue' {
export interface GlobalComponents {
ApprovalAssistant: typeof import('./../components/ApprovalAssistant/index.vue')['default']
ApprovalMessageItem: typeof import('./../components/NotificationCenter/ApprovalMessageItem.vue')['default']
Avatar: typeof import('./../components/Avatar/index.vue')['default']
Breadcrumb: typeof import('./../components/Breadcrumb/index.vue')['default']
CellCopy: typeof import('./../components/CellCopy/index.vue')['default']
Chart: typeof import('./../components/Chart/index.vue')['default']
CircularProgress: typeof import('./../components/CircularProgress/index.vue')['default']
ColumnSetting: typeof import('./../components/GiTable/src/components/ColumnSetting.vue')['default']
CronForm: typeof import('./../components/GenCron/CronForm/index.vue')['default']
CronModal: typeof import('./../components/GenCron/CronModal/index.vue')['default']
DateRangePicker: typeof import('./../components/DateRangePicker/index.vue')['default']
DayForm: typeof import('./../components/GenCron/CronForm/component/day-form.vue')['default']
FilePreview: typeof import('./../components/FilePreview/index.vue')['default']
GiCellAvatar: typeof import('./../components/GiCell/GiCellAvatar.vue')['default']
GiCellGender: typeof import('./../components/GiCell/GiCellGender.vue')['default']
GiCellStatus: typeof import('./../components/GiCell/GiCellStatus.vue')['default']
GiCellTag: typeof import('./../components/GiCell/GiCellTag.vue')['default']
GiCellTags: typeof import('./../components/GiCell/GiCellTags.vue')['default']
GiCodeView: typeof import('./../components/GiCodeView/index.vue')['default']
GiDot: typeof import('./../components/GiDot/index.tsx')['default']
GiEditTable: typeof import('./../components/GiEditTable/GiEditTable.vue')['default']
GiFooter: typeof import('./../components/GiFooter/index.vue')['default']
GiForm: typeof import('./../components/GiForm/src/GiForm.vue')['default']
GiIconBox: typeof import('./../components/GiIconBox/index.vue')['default']
GiIconSelector: typeof import('./../components/GiIconSelector/index.vue')['default']
GiIframe: typeof import('./../components/GiIframe/index.vue')['default']
GiOption: typeof import('./../components/GiOption/index.vue')['default']
GiOptionItem: typeof import('./../components/GiOptionItem/index.vue')['default']
GiPageLayout: typeof import('./../components/GiPageLayout/index.vue')['default']
GiSpace: typeof import('./../components/GiSpace/index.vue')['default']
GiSplitButton: typeof import('./../components/GiSplitButton/index.vue')['default']
GiSplitPane: typeof import('./../components/GiSplitPane/index.vue')['default']
GiSplitPaneFlexibleBox: typeof import('./../components/GiSplitPane/components/GiSplitPaneFlexibleBox.vue')['default']
GiSvgIcon: typeof import('./../components/GiSvgIcon/index.vue')['default']
GiTable: typeof import('./../components/GiTable/src/GiTable.vue')['default']
GiTag: typeof import('./../components/GiTag/index.tsx')['default']
GiThemeBtn: typeof import('./../components/GiThemeBtn/index.vue')['default']
HourForm: typeof import('./../components/GenCron/CronForm/component/hour-form.vue')['default']
Icon403: typeof import('./../components/icons/Icon403.vue')['default']
Icon404: typeof import('./../components/icons/Icon404.vue')['default']
Icon500: typeof import('./../components/icons/Icon500.vue')['default']
IconBorders: typeof import('./../components/icons/IconBorders.vue')['default']
IconTableSize: typeof import('./../components/icons/IconTableSize.vue')['default']
IconTreeAdd: typeof import('./../components/icons/IconTreeAdd.vue')['default']
IconTreeReduce: typeof import('./../components/icons/IconTreeReduce.vue')['default']
ImageImport: typeof import('./../components/ImageImport/index.vue')['default']
ImageImportWizard: typeof import('./../components/ImageImportWizard/index.vue')['default']
IndustrialImageList: typeof import('./../components/IndustrialImageList/index.vue')['default']
JsonPretty: typeof import('./../components/JsonPretty/index.vue')['default']
MinuteForm: typeof import('./../components/GenCron/CronForm/component/minute-form.vue')['default']
MonthForm: typeof import('./../components/GenCron/CronForm/component/month-form.vue')['default']
NotificationCenter: typeof import('./../components/NotificationCenter/index.vue')['default']
ParentView: typeof import('./../components/ParentView/index.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
SecondForm: typeof import('./../components/GenCron/CronForm/component/second-form.vue')['default']
SplitPanel: typeof import('./../components/SplitPanel/index.vue')['default']
TextCopy: typeof import('./../components/TextCopy/index.vue')['default']
TurbineGrid: typeof import('./../components/TurbineGrid/index.vue')['default']
UserSelect: typeof import('./../components/UserSelect/index.vue')['default']
Verify: typeof import('./../components/Verify/index.vue')['default']
VerifyPoints: typeof import('./../components/Verify/Verify/VerifyPoints.vue')['default']
VerifySlide: typeof import('./../components/Verify/Verify/VerifySlide.vue')['default']
WeekForm: typeof import('./../components/GenCron/CronForm/component/week-form.vue')['default']
YearForm: typeof import('./../components/GenCron/CronForm/component/year-form.vue')['default']
}
}

View File

@ -0,0 +1,505 @@
<template>
<a-modal
:visible="visible"
title="设备付款"
width="900px"
:confirm-loading="loading"
@cancel="handleCancel"
@ok="handleSubmit"
>
<a-form
ref="formRef"
:model="formData"
:rules="rules"
:label-col="{ span: 6 }"
:wrapper-col="{ span: 18 }"
layout="vertical"
>
<!-- 基本信息 -->
<a-card title="设备信息" class="detail-card" :bordered="false">
<a-descriptions :column="2" bordered>
<a-descriptions-item label="设备名称">
{{ equipmentData?.equipmentName || '-' }}
</a-descriptions-item>
<a-descriptions-item label="设备类型">
{{ equipmentData?.equipmentType || '-' }}
</a-descriptions-item>
<a-descriptions-item label="设备型号">
{{ equipmentData?.equipmentModel || '-' }}
</a-descriptions-item>
<a-col :span="12">
<a-form-item label="品牌">
{{ equipmentData?.brand || '-' }}
</a-form-item>
</a-col>
<a-descriptions-item label="供应商">
{{ equipmentData?.supplierName || '-' }}
</a-descriptions-item>
<a-descriptions-item label="采购订单">
{{ equipmentData?.purchaseOrder || '-' }}
</a-descriptions-item>
<a-descriptions-item label="采购价格">
¥{{ equipmentData?.purchasePrice || '-' }}
</a-descriptions-item>
<a-descriptions-item label="采购数量">
{{ equipmentData?.quantity || '-' }}
</a-descriptions-item>
</a-descriptions>
</a-card>
<!-- 支付信息 -->
<a-card title="支付信息" class="detail-card" :bordered="false">
<a-row :gutter="16">
<a-col :span="12">
<a-form-item label="支付方式" field="paymentMethod" required>
<a-select
v-model="formData.paymentMethod"
placeholder="请选择支付方式"
style="width: 100%"
>
<a-option value="银行转账">银行转账</a-option>
<a-option value="现金">现金</a-option>
<a-option value="支票">支票</a-option>
<a-option value="信用卡">信用卡</a-option>
<a-option value="其他">其他</a-option>
</a-select>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="支付金额" field="paymentAmount" required>
<a-input-number
v-model="formData.paymentAmount"
placeholder="请输入支付金额"
:min="0.01"
:max="999999.99"
:precision="2"
style="width: 100%"
/>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="16">
<a-col :span="12">
<a-form-item label="支付时间" field="paymentTime" required>
<a-date-picker
v-model="formData.paymentTime"
show-time
format="YYYY-MM-DD HH:mm:ss"
placeholder="请选择支付时间"
style="width: 100%"
/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="支付人" field="paymentPerson" required>
<a-input
v-model="formData.paymentPerson"
placeholder="请输入支付人姓名"
show-word-limit
:max-length="50"
/>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="16">
<a-col :span="24">
<a-form-item label="支付备注" field="paymentRemark">
<a-textarea
v-model="formData.paymentRemark"
placeholder="请输入支付备注"
:rows="3"
show-word-limit
:max-length="200"
/>
</a-form-item>
</a-col>
</a-row>
</a-card>
<!-- 发票信息 -->
<a-card title="发票信息" class="detail-card" :bordered="false">
<a-row :gutter="16">
<a-col :span="12">
<a-form-item label="发票类型" field="invoiceType" required>
<a-select
v-model="formData.invoiceType"
placeholder="请选择发票类型"
style="width: 100%"
>
<a-option value="增值税专用发票">增值税专用发票</a-option>
<a-option value="增值税普通发票">增值税普通发票</a-option>
<a-option value="电子发票">电子发票</a-option>
<a-option value="其他">其他</a-option>
</a-select>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="发票号码" field="invoiceNumber" required>
<a-input
v-model="formData.invoiceNumber"
placeholder="请输入发票号码"
show-word-limit
:max-length="50"
/>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="16">
<a-col :span="12">
<a-form-item label="开票日期" field="invoiceDate" required>
<a-date-picker
v-model="formData.invoiceDate"
format="YYYY-MM-DD"
placeholder="请选择开票日期"
style="width: 100%"
/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="发票金额" field="invoiceAmount" required>
<a-input-number
v-model="formData.invoiceAmount"
placeholder="请输入发票金额"
:min="0.01"
:max="999999.99"
:precision="2"
style="width: 100%"
/>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="16">
<a-col :span="12">
<a-form-item label="税率(%)" field="taxRate" required>
<a-input-number
v-model="formData.taxRate"
placeholder="请输入税率"
:min="0"
:max="100"
:precision="2"
style="width: 100%"
/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="税额" field="taxAmount" required>
<a-input-number
v-model="formData.taxAmount"
placeholder="请输入税额"
:min="0"
:max="999999.99"
:precision="2"
style="width: 100%"
/>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="16">
<a-col :span="12">
<a-form-item label="不含税金额" field="amountWithoutTax" required>
<a-input-number
v-model="formData.amountWithoutTax"
placeholder="请输入不含税金额"
:min="0.01"
:max="999999.99"
:precision="2"
style="width: 100%"
/>
</a-form-item>
</a-col>
</a-row>
</a-card>
<!-- 合同信息 -->
<a-card title="合同信息" class="detail-card" :bordered="false">
<a-row :gutter="16">
<a-col :span="12">
<a-form-item label="合同编号" field="contractNumber" required>
<a-input
v-model="formData.contractNumber"
placeholder="请输入合同编号"
show-word-limit
:max-length="50"
/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="合同金额" field="contractAmount" required>
<a-input-number
v-model="formData.contractAmount"
placeholder="请输入合同金额"
:min="0.01"
:max="999999.99"
:precision="2"
style="width: 100%"
/>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="16">
<a-col :span="12">
<a-form-item label="签订日期" field="contractDate" required>
<a-date-picker
v-model="formData.contractDate"
format="YYYY-MM-DD"
placeholder="请选择签订日期"
style="width: 100%"
/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="付款条件" field="paymentTerms" required>
<a-input
v-model="formData.paymentTerms"
placeholder="请输入付款条件"
show-word-limit
:max-length="100"
/>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="16">
<a-col :span="12">
<a-form-item label="付款期限" field="paymentDeadline" required>
<a-date-picker
v-model="formData.paymentDeadline"
format="YYYY-MM-DD"
placeholder="请选择付款期限"
style="width: 100%"
/>
</a-form-item>
</a-col>
</a-row>
</a-card>
</a-form>
</a-modal>
</template>
<script setup lang="ts">
import { ref, reactive, watch, computed } from 'vue'
import { Message } from '@arco-design/web-vue'
import type { FormInstance } from '@arco-design/web-vue'
import type { EquipmentResp, PaymentRequest } from '@/apis/equipment/type'
import { equipmentProcurementApi } from '@/apis/equipment/procurement'
interface Props {
visible: boolean
equipmentData?: EquipmentResp | null
}
const props = withDefaults(defineProps<Props>(), {
visible: false,
equipmentData: null,
})
const emit = defineEmits<{
'update:visible': [value: boolean]
'success': []
}>()
const formRef = ref<FormInstance>()
const loading = ref(false)
//
const formData = reactive<PaymentRequest>({
paymentMethod: '',
paymentAmount: 0,
paymentTime: '',
paymentPerson: '',
paymentRemark: '',
invoiceType: '',
invoiceNumber: '',
invoiceDate: '',
invoiceAmount: 0,
taxRate: 13,
taxAmount: 0,
amountWithoutTax: 0,
contractNumber: '',
contractAmount: 0,
contractDate: '',
paymentTerms: '',
paymentDeadline: '',
})
//
const calculatedTaxAmount = computed(() => {
if (formData.invoiceAmount && formData.taxRate) {
return (formData.invoiceAmount * formData.taxRate) / 100
}
return 0
})
const calculatedAmountWithoutTax = computed(() => {
if (formData.invoiceAmount && formData.taxAmount) {
return formData.invoiceAmount - formData.taxAmount
}
return 0
})
//
watch([() => formData.invoiceAmount, () => formData.taxRate], () => {
formData.taxAmount = calculatedTaxAmount.value
formData.amountWithoutTax = calculatedAmountWithoutTax.value
})
//
const rules = {
paymentMethod: [
{ required: true, message: '请选择支付方式' }
],
paymentAmount: [
{ required: true, message: '请输入支付金额' },
{ type: 'number', min: 0.01, message: '支付金额必须大于0' }
],
paymentTime: [
{ required: true, message: '请选择支付时间' }
],
paymentPerson: [
{ required: true, message: '请输入支付人姓名' },
{ min: 2, max: 50, message: '支付人姓名长度应在2-50个字符之间' }
],
invoiceType: [
{ required: true, message: '请选择发票类型' }
],
invoiceNumber: [
{ required: true, message: '请输入发票号码' },
{ min: 2, max: 50, message: '发票号码长度应在2-50个字符之间' }
],
invoiceDate: [
{ required: true, message: '请选择开票日期' }
],
invoiceAmount: [
{ required: true, message: '请输入发票金额' },
{ type: 'number', min: 0.01, message: '发票金额必须大于0' }
],
taxRate: [
{ required: true, message: '请输入税率' },
{ type: 'number', min: 0, max: 100, message: '税率应在0-100之间' }
],
contractNumber: [
{ required: true, message: '请输入合同编号' },
{ min: 2, max: 50, message: '合同编号长度应在2-50个字符之间' }
],
contractAmount: [
{ required: true, message: '请输入合同金额' },
{ type: 'number', min: 0.01, message: '合同金额必须大于0' }
],
contractDate: [
{ required: true, message: '请选择签订日期' }
],
paymentTerms: [
{ required: true, message: '请输入付款条件' },
{ min: 2, max: 100, message: '付款条件长度应在2-100个字符之间' }
],
paymentDeadline: [
{ required: true, message: '请选择付款期限' }
],
}
//
watch(() => props.visible, (visible) => {
if (visible && props.equipmentData) {
//
Object.assign(formData, {
paymentMethod: '',
paymentAmount: props.equipmentData.purchasePrice || 0,
paymentTime: '',
paymentPerson: '',
paymentRemark: '',
invoiceType: '增值税专用发票',
invoiceNumber: '',
invoiceDate: '',
invoiceAmount: props.equipmentData.purchasePrice || 0,
taxRate: 13,
taxAmount: 0,
amountWithoutTax: 0,
contractNumber: props.equipmentData.purchaseOrder || '',
contractAmount: props.equipmentData.purchasePrice || 0,
contractDate: '',
paymentTerms: '货到付款',
paymentDeadline: '',
})
//
formData.taxAmount = calculatedTaxAmount.value
formData.amountWithoutTax = calculatedAmountWithoutTax.value
formRef.value?.clearValidate()
}
})
//
const handleSubmit = async () => {
try {
await formRef.value?.validate()
loading.value = true
if (!props.equipmentData?.equipmentId) {
throw new Error('设备ID不能为空')
}
//
const paymentTime = formData.paymentTime ? new Date(formData.paymentTime).toISOString() : new Date().toISOString()
const invoiceDate = formData.invoiceDate ? new Date(formData.invoiceDate).toISOString() : new Date().toISOString()
const contractDate = formData.contractDate ? new Date(formData.contractDate).toISOString() : new Date().toISOString()
const paymentDeadline = formData.paymentDeadline ? new Date(formData.paymentDeadline).toISOString() : new Date().toISOString()
const requestData: PaymentRequest = {
...formData,
paymentTime,
invoiceDate,
contractDate,
paymentDeadline,
}
await equipmentProcurementApi.makePayment(props.equipmentData.equipmentId, requestData)
Message.success('付款成功')
emit('success')
emit('update:visible', false)
} catch (error: any) {
console.error('付款失败:', error)
Message.error(error?.message || '付款失败,请检查表单信息')
} finally {
loading.value = false
}
}
//
const handleCancel = () => {
emit('update:visible', false)
}
</script>
<style scoped lang="scss">
.detail-card {
margin-bottom: 16px;
&:last-child {
margin-bottom: 0;
}
}
.arco-form-item {
margin-bottom: 16px;
}
.arco-input,
.arco-select,
.arco-input-number,
.arco-date-picker,
.arco-textarea {
border-radius: 6px;
}
.arco-textarea {
resize: vertical;
}
</style>

View File

@ -0,0 +1,368 @@
<template>
<a-modal
:visible="visible"
title="确认收货"
width="800px"
:confirm-loading="loading"
@cancel="handleCancel"
@ok="handleSubmit"
>
<a-form
ref="formRef"
:model="formData"
:rules="rules"
:label-col="{ span: 6 }"
:wrapper-col="{ span: 18 }"
layout="vertical"
>
<!-- 基本信息 -->
<a-card title="设备信息" class="detail-card" :bordered="false">
<a-descriptions :column="2" bordered>
<a-descriptions-item label="设备名称">
{{ equipmentData?.equipmentName || '-' }}
</a-descriptions-item>
<a-descriptions-item label="设备类型">
{{ equipmentData?.equipmentType || '-' }}
</a-descriptions-item>
<a-descriptions-item label="设备型号">
{{ equipmentData?.equipmentModel || '-' }}
</a-descriptions-item>
<a-descriptions-item label="品牌">
{{ equipmentData?.brand || '-' }}
</a-descriptions-item>
<a-descriptions-item label="供应商">
{{ equipmentData?.supplierName || '-' }}
</a-descriptions-item>
<a-descriptions-item label="采购订单">
{{ equipmentData?.purchaseOrder || '-' }}
</a-descriptions-item>
</a-descriptions>
</a-card>
<!-- 收货信息 -->
<a-card title="收货信息" class="detail-card" :bordered="false">
<a-row :gutter="16">
<a-col :span="12">
<a-form-item label="收货时间" field="receiptTime" required>
<a-date-picker
v-model="formData.receiptTime"
show-time
format="YYYY-MM-DD HH:mm:ss"
placeholder="请选择收货时间"
style="width: 100%"
/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="收货人" field="receiptPerson" required>
<a-input
v-model="formData.receiptPerson"
placeholder="请输入收货人姓名"
show-word-limit
:max-length="50"
/>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="16">
<a-col :span="12">
<a-form-item label="收货数量" field="receiptQuantity" required>
<a-input-number
v-model="formData.receiptQuantity"
placeholder="请输入收货数量"
:min="1"
:max="9999"
style="width: 100%"
/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="入库位置" field="storageLocation" required>
<a-input
v-model="formData.storageLocation"
placeholder="请输入入库位置"
show-word-limit
:max-length="100"
/>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="16">
<a-col :span="12">
<a-form-item label="库管员" field="storageManager" required>
<a-input
v-model="formData.storageManager"
placeholder="请输入库管员姓名"
show-word-limit
:max-length="50"
/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="收货备注" field="receiptRemark">
<a-input
v-model="formData.receiptRemark"
placeholder="请输入收货备注"
show-word-limit
:max-length="200"
/>
</a-form-item>
</a-col>
</a-row>
</a-card>
<!-- 质量检查 -->
<a-card title="质量检查" class="detail-card" :bordered="false">
<a-row :gutter="16">
<a-col :span="12">
<a-form-item label="外观检查" field="appearanceCheck" required>
<a-select
v-model="formData.appearanceCheck"
placeholder="请选择外观检查结果"
style="width: 100%"
>
<a-option value="正常">正常</a-option>
<a-option value="轻微划痕">轻微划痕</a-option>
<a-option value="明显划痕">明显划痕</a-option>
<a-option value="变形">变形</a-option>
<a-option value="其他">其他</a-option>
</a-select>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="功能测试" field="functionTest" required>
<a-select
v-model="formData.functionTest"
placeholder="请选择功能测试结果"
style="width: 100%"
>
<a-option value="正常">正常</a-option>
<a-option value="部分正常">部分正常</a-option>
<a-option value="异常">异常</a-option>
<a-option value="未测试">未测试</a-option>
</a-select>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="16">
<a-col :span="12">
<a-form-item label="包装完整性" field="packageIntegrity" required>
<a-select
v-model="formData.packageIntegrity"
placeholder="请选择包装完整性"
style="width: 100%"
>
<a-option value="完整">完整</a-option>
<a-option value="轻微破损">轻微破损</a-option>
<a-option value="明显破损">明显破损</a-option>
<a-option value="严重破损">严重破损</a-option>
</a-select>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="配件完整性" field="accessoryIntegrity" required>
<a-select
v-model="formData.accessoryIntegrity"
placeholder="请选择配件完整性"
style="width: 100%"
>
<a-option value="完整">完整</a-option>
<a-option value="部分缺失">部分缺失</a-option>
<a-option value="严重缺失">严重缺失</a-option>
<a-option value="无配件">无配件</a-option>
</a-select>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="16">
<a-col :span="12">
<a-form-item label="检查结果" field="checkResult" required>
<a-select
v-model="formData.checkResult"
placeholder="请选择检查结果"
style="width: 100%"
>
<a-option value="PASS">通过</a-option>
<a-option value="FAIL">不通过</a-option>
<a-option value="CONDITIONAL">有条件通过</a-option>
</a-select>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="检查备注" field="checkRemark">
<a-input
v-model="formData.checkRemark"
placeholder="请输入检查备注"
show-word-limit
:max-length="200"
/>
</a-form-item>
</a-col>
</a-row>
</a-card>
</a-form>
</a-modal>
</template>
<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import { Message } from '@arco-design/web-vue'
import type { FormInstance } from '@arco-design/web-vue'
import type { EquipmentResp, ReceiptRequest } from '@/apis/equipment/type'
import { equipmentProcurementApi } from '@/apis/equipment/procurement'
interface Props {
visible: boolean
equipmentData?: EquipmentResp | null
}
const props = withDefaults(defineProps<Props>(), {
visible: false,
equipmentData: null,
})
const emit = defineEmits<{
'update:visible': [value: boolean]
'success': []
}>()
const formRef = ref<FormInstance>()
const loading = ref(false)
//
const formData = reactive<ReceiptRequest>({
receiptTime: '',
receiptPerson: '',
receiptQuantity: 1,
receiptRemark: '',
appearanceCheck: '',
functionTest: '',
packageIntegrity: '',
accessoryIntegrity: '',
checkResult: 'PASS',
checkRemark: '',
storageLocation: '',
storageManager: '',
})
//
const rules = {
receiptTime: [
{ required: true, message: '请选择收货时间' }
],
receiptPerson: [
{ required: true, message: '请输入收货人姓名' },
{ min: 2, max: 50, message: '收货人姓名长度应在2-50个字符之间' }
],
receiptQuantity: [
{ required: true, message: '请输入收货数量' },
{ type: 'number', min: 1, max: 9999, message: '收货数量应在1-9999之间' }
],
storageLocation: [
{ required: true, message: '请输入入库位置' },
{ min: 2, max: 100, message: '入库位置长度应在2-100个字符之间' }
],
storageManager: [
{ required: true, message: '请输入库管员姓名' },
{ min: 2, max: 50, message: '库管员姓名长度应在2-50个字符之间' }
],
appearanceCheck: [
{ required: true, message: '请选择外观检查结果' }
],
functionTest: [
{ required: true, message: '请选择功能测试结果' }
],
packageIntegrity: [
{ required: true, message: '请选择包装完整性' }
],
accessoryIntegrity: [
{ required: true, message: '请选择配件完整性' }
],
checkResult: [
{ required: true, message: '请选择检查结果' }
],
}
//
watch(() => props.visible, (visible) => {
if (visible) {
//
Object.assign(formData, {
receiptTime: '',
receiptPerson: '',
receiptQuantity: props.equipmentData?.quantity || 1,
receiptRemark: '',
appearanceCheck: '',
functionTest: '',
packageIntegrity: '',
accessoryIntegrity: '',
checkResult: 'PASS',
checkRemark: '',
storageLocation: '',
storageManager: '',
})
formRef.value?.clearValidate()
}
})
//
const handleSubmit = async () => {
try {
await formRef.value?.validate()
loading.value = true
if (!props.equipmentData?.equipmentId) {
throw new Error('设备ID不能为空')
}
//
const receiptTime = formData.receiptTime ? new Date(formData.receiptTime).toISOString() : new Date().toISOString()
const requestData: ReceiptRequest = {
...formData,
receiptTime,
}
await equipmentProcurementApi.receiveGoods(props.equipmentData.equipmentId, requestData)
Message.success('收货成功')
emit('success')
emit('update:visible', false)
} catch (error: any) {
console.error('收货失败:', error)
Message.error(error?.message || '收货失败,请检查表单信息')
} finally {
loading.value = false
}
}
//
const handleCancel = () => {
emit('update:visible', false)
}
</script>
<style scoped lang="scss">
.detail-card {
margin-bottom: 16px;
&:last-child {
margin-bottom: 0;
}
}
.arco-form-item {
margin-bottom: 16px;
}
.arco-input,
.arco-select,
.arco-input-number,
.arco-date-picker {
border-radius: 6px;
}
</style>

View File

@ -312,6 +312,20 @@
v-model:visible="paymentDetailModalVisible"
:payment-data="currentPaymentData"
/>
<!-- 收货弹窗 -->
<ReceiptModal
v-model:visible="receiptModalVisible"
:equipment-data="currentReceiptData"
@success="handleReceiptSuccess"
/>
<!-- 支付弹窗 -->
<PaymentModal
v-model:visible="paymentModalVisible"
:equipment-data="currentPaymentData"
@success="handlePaymentSuccess"
/>
</div>
</template>
@ -333,6 +347,8 @@ import ProcurementSearch from './components/ProcurementSearch.vue'
import ProcurementApplicationModal from './components/ProcurementApplicationModal.vue'
import ReceiptDetailModal from './components/ReceiptDetailModal.vue'
import PaymentDetailModal from './components/PaymentDetailModal.vue'
import ReceiptModal from './components/ReceiptModal.vue'
import PaymentModal from './components/PaymentModal.vue'
import { equipmentProcurementApi } from '@/apis/equipment/procurement'
import { equipmentApprovalApi } from '@/apis/equipment/approval'
import type { EquipmentListReq, EquipmentResp } from '@/apis/equipment/type'
@ -377,6 +393,10 @@ const currentReceiptData = ref<EquipmentResp | null>(null)
const paymentDetailModalVisible = ref(false)
const currentPaymentData = ref<EquipmentResp | null>(null)
//
const receiptModalVisible = ref(false)
const paymentModalVisible = ref(false)
//
const selectedRowKeys = ref<string[]>([])
const rowSelection = reactive({
@ -988,17 +1008,8 @@ const canReceiveGoods = (record: EquipmentResp) => {
//
const handleReceiveGoods = async (record: EquipmentResp) => {
try {
// API
// await equipmentProcurementApi.receiveGoods(record.equipmentId)
message.success('收货成功')
//
(record as any).receiptStatus = 'RECEIVED'
loadData(currentSearchParams.value)
} catch (error: any) {
console.error('收货失败:', error)
message.error(error?.message || '收货失败')
}
currentReceiptData.value = { ...record }
receiptModalVisible.value = true
}
//
@ -1007,6 +1018,12 @@ const handleViewReceipt = (record: EquipmentResp) => {
receiptDetailModalVisible.value = true
}
//
const handleReceiptSuccess = () => {
receiptModalVisible.value = false
loadData(currentSearchParams.value)
}
//
const canMakePayment = (record: EquipmentResp) => {
const paymentStatus = (record as any).paymentStatus
@ -1015,17 +1032,8 @@ const canMakePayment = (record: EquipmentResp) => {
//
const handleMakePayment = async (record: EquipmentResp) => {
try {
// API
// await equipmentProcurementApi.makePayment(record.equipmentId)
message.success('付款成功')
//
(record as any).paymentStatus = 'PAID'
loadData(currentSearchParams.value)
} catch (error: any) {
console.error('付款失败:', error)
message.error(error?.message || '付款失败')
}
currentPaymentData.value = { ...record }
paymentModalVisible.value = true
}
//
@ -1034,6 +1042,12 @@ const handleViewPayment = (record: EquipmentResp) => {
paymentDetailModalVisible.value = true
}
//
const handlePaymentSuccess = () => {
paymentModalVisible.value = false
loadData(currentSearchParams.value)
}
//
const getApprovalStatusColor = (status: string) => {
const colorMap: Record<string, string> = {