361 lines
11 KiB
Vue
361 lines
11 KiB
Vue
<template>
|
||
<a-modal
|
||
:visible="visible"
|
||
:title="modalTitle"
|
||
width="800px"
|
||
@ok="handleSubmit"
|
||
@cancel="handleCancel"
|
||
@update:visible="(value) => emit('update:visible', value)"
|
||
:confirm-loading="submitLoading"
|
||
>
|
||
<a-form
|
||
ref="formRef"
|
||
:model="formData"
|
||
:rules="rules"
|
||
layout="vertical"
|
||
class="procurement-application-form"
|
||
>
|
||
<a-row :gutter="16">
|
||
<a-col :span="12">
|
||
<a-form-item label="设备名称" field="equipmentName">
|
||
<a-input
|
||
v-model="formData.equipmentName"
|
||
placeholder="请输入设备名称"
|
||
allow-clear
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="设备类型" field="equipmentType">
|
||
<a-select
|
||
v-model="formData.equipmentType"
|
||
placeholder="请选择设备类型"
|
||
allow-clear
|
||
>
|
||
<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-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="equipmentModel">
|
||
<a-input
|
||
v-model="formData.equipmentModel"
|
||
placeholder="请输入设备型号"
|
||
allow-clear
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="品牌" field="brand">
|
||
<a-input
|
||
v-model="formData.brand"
|
||
placeholder="请输入品牌"
|
||
allow-clear
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
</a-row>
|
||
|
||
<a-row :gutter="16">
|
||
<a-col :span="12">
|
||
<a-form-item label="供应商名称" field="supplierName">
|
||
<a-input
|
||
v-model="formData.supplierName"
|
||
placeholder="请输入供应商名称"
|
||
allow-clear
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="数量" field="quantity">
|
||
<a-input-number
|
||
v-model="formData.quantity"
|
||
placeholder="请输入数量"
|
||
:min="1"
|
||
:precision="0"
|
||
style="width: 100%"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
</a-row>
|
||
|
||
<a-row :gutter="16">
|
||
<a-col :span="12">
|
||
<a-form-item label="预算金额" field="budgetAmount">
|
||
<a-input-number
|
||
v-model="formData.budgetAmount"
|
||
placeholder="请输入预算金额"
|
||
:min="0"
|
||
:precision="2"
|
||
style="width: 100%"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="紧急程度" field="urgencyLevel">
|
||
<a-select
|
||
v-model="formData.urgencyLevel"
|
||
placeholder="请选择紧急程度"
|
||
allow-clear
|
||
>
|
||
<a-option value="LOW">低</a-option>
|
||
<a-option value="NORMAL">普通</a-option>
|
||
<a-option value="HIGH">高</a-option>
|
||
<a-option value="URGENT">紧急</a-option>
|
||
</a-select>
|
||
</a-form-item>
|
||
</a-col>
|
||
</a-row>
|
||
|
||
<a-row :gutter="16">
|
||
<a-col :span="12">
|
||
<a-form-item label="采购类型" field="procurementType">
|
||
<a-select
|
||
v-model="formData.procurementType"
|
||
placeholder="请选择采购类型"
|
||
allow-clear
|
||
>
|
||
<a-option value="NEW_PURCHASE">新采购</a-option>
|
||
<a-option value="REPLACEMENT">更换</a-option>
|
||
<a-option value="UPGRADE">升级</a-option>
|
||
</a-select>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="预期交付日期" field="expectedDeliveryDate">
|
||
<a-date-picker
|
||
v-model="formData.expectedDeliveryDate"
|
||
placeholder="请选择预期交付日期"
|
||
style="width: 100%"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
</a-row>
|
||
|
||
<a-form-item label="申请原因" field="applyReason">
|
||
<a-textarea
|
||
v-model="formData.applyReason"
|
||
placeholder="请详细说明采购原因"
|
||
:rows="4"
|
||
allow-clear
|
||
/>
|
||
</a-form-item>
|
||
|
||
<a-form-item label="技术要求" field="technicalRequirements">
|
||
<a-textarea
|
||
v-model="formData.technicalRequirements"
|
||
placeholder="请描述设备的技术要求（可选）"
|
||
:rows="3"
|
||
allow-clear
|
||
/>
|
||
</a-form-item>
|
||
|
||
<a-form-item label="业务合理性说明" field="businessJustification">
|
||
<a-textarea
|
||
v-model="formData.businessJustification"
|
||
placeholder="请说明采购的业务合理性（可选）"
|
||
:rows="3"
|
||
allow-clear
|
||
/>
|
||
</a-form-item>
|
||
</a-form>
|
||
</a-modal>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, reactive, watch } from 'vue'
|
||
import { Message } from '@arco-design/web-vue'
|
||
import { equipmentApprovalApi } from '@/apis/equipment/approval'
|
||
import notificationService from '@/services/notificationService'
|
||
|
||
interface Props {
|
||
visible: boolean
|
||
equipmentData?: any
|
||
}
|
||
|
||
interface Emits {
|
||
(e: 'update:visible', value: boolean): void
|
||
(e: 'success'): void
|
||
}
|
||
|
||
const props = defineProps<Props>()
|
||
const emit = defineEmits<Emits>()
|
||
|
||
const modalTitle = ref('申请采购')
|
||
const submitLoading = ref(false)
|
||
const formRef = ref()
|
||
|
||
// 表单数据
|
||
const formData = reactive({
|
||
equipmentId: '', // 添加设备ID字段
|
||
equipmentName: '',
|
||
equipmentType: '',
|
||
equipmentModel: '',
|
||
brand: '',
|
||
supplierName: '',
|
||
quantity: 1,
|
||
budgetAmount: undefined,
|
||
urgencyLevel: 'NORMAL',
|
||
procurementType: 'NEW_PURCHASE',
|
||
expectedDeliveryDate: null,
|
||
applyReason: '',
|
||
technicalRequirements: '',
|
||
businessJustification: ''
|
||
})
|
||
|
||
// 表单验证规则
|
||
const rules = {
|
||
equipmentId: [{ required: true, message: '设备ID不能为空' }],
|
||
equipmentName: [{ required: true, message: '请输入设备名称' }],
|
||
equipmentType: [{ required: true, message: '请选择设备类型' }],
|
||
quantity: [{ required: true, message: '请输入数量' }],
|
||
budgetAmount: [{ required: true, message: '请输入预算金额' }],
|
||
urgencyLevel: [{ required: true, message: '请选择紧急程度' }],
|
||
procurementType: [{ required: true, message: '请选择采购类型' }],
|
||
applyReason: [
|
||
{ required: true, message: '请输入申请原因' },
|
||
{
|
||
validator: (value: string) => {
|
||
if (!value || value.trim() === '') {
|
||
return new Error('申请原因不能为空')
|
||
}
|
||
return true
|
||
}
|
||
}
|
||
]
|
||
}
|
||
|
||
// 监听设备数据变化，填充表单
|
||
watch(() => props.equipmentData, (newData) => {
|
||
if (newData) {
|
||
console.log('采购申请弹窗 - 接收到设备数据:', newData)
|
||
// 填充设备数据到表单
|
||
Object.assign(formData, {
|
||
equipmentId: newData.equipmentId || '', // 添加设备ID
|
||
equipmentName: newData.equipmentName || '',
|
||
equipmentType: newData.equipmentType || '',
|
||
equipmentModel: newData.equipmentModel || '',
|
||
brand: newData.brand || '',
|
||
supplierName: newData.supplierName || '',
|
||
quantity: newData.quantity || 1,
|
||
budgetAmount: newData.unitPrice || undefined,
|
||
urgencyLevel: 'NORMAL',
|
||
procurementType: 'NEW_PURCHASE',
|
||
expectedDeliveryDate: null,
|
||
applyReason: '', // 申请原因需要用户填写
|
||
technicalRequirements: '',
|
||
businessJustification: ''
|
||
})
|
||
console.log('采购申请弹窗 - 填充后的表单数据:', formData)
|
||
}
|
||
}, { immediate: true })
|
||
|
||
// 监听模态框显示状态
|
||
watch(() => props.visible, (visible) => {
|
||
if (visible) {
|
||
// 模态框打开时，如果有设备数据则填充，否则重置表单
|
||
if (props.equipmentData) {
|
||
// 设备数据会在上面的 watch 中处理
|
||
} else {
|
||
// 没有设备数据时重置表单
|
||
formRef.value?.resetFields()
|
||
}
|
||
}
|
||
})
|
||
|
||
// 提交表单
|
||
const handleSubmit = async () => {
|
||
try {
|
||
// 手动验证 applyReason 字段
|
||
if (!formData.applyReason || formData.applyReason.trim() === '') {
|
||
Message.error('请输入申请原因')
|
||
return
|
||
}
|
||
|
||
await formRef.value.validate()
|
||
submitLoading.value = true
|
||
|
||
const submitData = {
|
||
...formData,
|
||
applyReason: formData.applyReason.trim(), // 确保去除空格
|
||
expectedDeliveryDate: formData.expectedDeliveryDate ?
|
||
(formData.expectedDeliveryDate as any).format('YYYY-MM-DD') : null
|
||
}
|
||
|
||
// 调试信息：打印提交的数据
|
||
console.log('提交的表单数据:', submitData)
|
||
console.log('设备ID:', submitData.equipmentId)
|
||
console.log('设备名称:', submitData.equipmentName)
|
||
console.log('applyReason 值:', submitData.applyReason)
|
||
console.log('applyReason 类型:', typeof submitData.applyReason)
|
||
console.log('applyReason 长度:', submitData.applyReason?.length)
|
||
|
||
// 确保设备ID存在
|
||
if (!submitData.equipmentId) {
|
||
Message.error('设备ID不能为空，请检查设备数据')
|
||
return
|
||
}
|
||
|
||
await equipmentApprovalApi.submitProcurementApplication(submitData)
|
||
|
||
// 添加采购申请通知
|
||
const currentUser = JSON.parse(localStorage.getItem('userInfo') || '{}')
|
||
const applicantName = currentUser.nickname || currentUser.username || '未知用户'
|
||
|
||
notificationService.addProcurementNotification(
|
||
submitData.equipmentName,
|
||
applicantName
|
||
)
|
||
|
||
Message.success('采购申请提交成功')
|
||
emit('success')
|
||
handleCancel()
|
||
} catch (error: any) {
|
||
console.error('提交采购申请失败:', error)
|
||
Message.error(error?.message || '提交失败')
|
||
} finally {
|
||
submitLoading.value = false
|
||
}
|
||
}
|
||
|
||
// 取消
|
||
const handleCancel = () => {
|
||
emit('update:visible', false)
|
||
// 清空用户输入的数据，保留设备基本信息
|
||
formData.equipmentId = ''
|
||
formData.applyReason = ''
|
||
formData.technicalRequirements = ''
|
||
formData.businessJustification = ''
|
||
formData.expectedDeliveryDate = null
|
||
formRef.value?.resetFields()
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.procurement-application-form {
|
||
.arco-form-item {
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.arco-input,
|
||
.arco-select,
|
||
.arco-input-number,
|
||
.arco-date-picker {
|
||
border-radius: 6px;
|
||
}
|
||
|
||
.arco-textarea {
|
||
border-radius: 6px;
|
||
}
|
||
}
|
||
</style>
|