refactor(biz): 优化采购订单界面布局和字段配置
This commit is contained in:
parent
cd99537ba5
commit
e2b337a7d0
@ -39,7 +39,7 @@ public class PurOrderSaveReqVO {
|
||||
private String purDeptName;
|
||||
|
||||
@Schema(description = "部门id", example = "4640")
|
||||
private String purDeptId;
|
||||
private Integer purDeptId;
|
||||
|
||||
@Schema(description = "申请类型(1 原材料 2 辅料 3设备)", example = "1")
|
||||
private String applyType;
|
||||
@ -48,7 +48,7 @@ public class PurOrderSaveReqVO {
|
||||
private String purEmpName;
|
||||
|
||||
@Schema(description = "采购人id", example = "5929")
|
||||
private String purEmpId;
|
||||
private Integer purEmpId;
|
||||
|
||||
@Schema(description = "验收方式(1 数量验收 2金额验收)")
|
||||
private String acceptMeth;
|
||||
|
||||
@ -1,14 +1,13 @@
|
||||
package com.ningxia.yunxi.chemmes.module.biz.dal.dataobject.purorder;
|
||||
|
||||
import com.baomidou.mybatisplus.annotation.KeySequence;
|
||||
import com.baomidou.mybatisplus.annotation.TableId;
|
||||
import com.baomidou.mybatisplus.annotation.TableName;
|
||||
import com.ningxia.yunxi.chemmes.framework.mybatis.core.dataobject.BaseDO;
|
||||
import lombok.*;
|
||||
|
||||
import java.time.LocalDate;
|
||||
import java.util.*;
|
||||
import java.time.LocalDateTime;
|
||||
import java.time.LocalDateTime;
|
||||
import java.time.LocalDateTime;
|
||||
import com.baomidou.mybatisplus.annotation.*;
|
||||
import com.ningxia.yunxi.chemmes.framework.mybatis.core.dataobject.BaseDO;
|
||||
|
||||
/**
|
||||
* 采购订单主 DO
|
||||
|
||||
@ -14,7 +14,7 @@ const appStore = useAppStore()
|
||||
const title = computed(() => appStore.getTitle)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- <template>
|
||||
<div
|
||||
:class="prefixCls"
|
||||
class="h-[var(--app-footer-height)] bg-[var(--app-content-bg-color)] text-center text-[var(--el-text-color-placeholder)] dark:bg-[var(--el-bg-color)]"
|
||||
@ -33,4 +33,4 @@ const title = computed(() => appStore.getTitle)
|
||||
</el-row>
|
||||
<span class="text-14px"></span>
|
||||
</div>
|
||||
</template>
|
||||
</template> -->
|
||||
|
||||
@ -3,62 +3,68 @@
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
label-width="100px"
|
||||
label-width="120px"
|
||||
v-loading="formLoading"
|
||||
>
|
||||
<!-- 基础信息 -->
|
||||
<el-card class="mb-4">
|
||||
<template #header>
|
||||
<span>基础信息</span>
|
||||
<span>基本信息</span>
|
||||
</template>
|
||||
<!-- 第一行:单据类型、申请类型、采购日期 -->
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="采购单号">
|
||||
<el-input v-model="formData.purOrdNo" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="订单日期">
|
||||
<el-input v-model="formData.purDate" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="单据类型">
|
||||
<el-input :value="formData.billType === '1' ? '标准采购申请' : '设备采购申请'" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="单据状态">
|
||||
<el-input v-model="formData.purStatus" disabled :value="formData.purStatus === '1' ? '已创建' : formData.purStatus === '2' ? '已确认' : formData.purStatus === '3' ? '已审批' : '已驳回'" />
|
||||
<el-col :span="8">
|
||||
<el-form-item label="申请类型">
|
||||
<el-input :value="formData.applyType === '1' ? '采购申请' : '紧急采购'" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="采购日期">
|
||||
<el-input v-model="formData.purDate" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- 第二行:采购部门、采购人员、单据状态 -->
|
||||
<el-row :gutter="20" class="mt-4">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="供应商">
|
||||
<el-input v-model="formData.supplierName" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="采购部门">
|
||||
<el-input v-model="formData.purDeptName" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="采购人员">
|
||||
<el-input v-model="formData.purEmpName" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="验收方式">
|
||||
<el-input :value="formData.acceptMeth === '1' ? '数量验收' : '金额验收'" disabled />
|
||||
<el-col :span="8">
|
||||
<el-form-item label="单据状态">
|
||||
<el-input :value="formData.purStatus === '1' ? '已创建' : formData.purStatus === '2' ? '已确认' : formData.purStatus === '3' ? '已审批' : '已驳回'" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- 第三行:供应商名称、备注 -->
|
||||
<el-row :gutter="20" class="mt-4">
|
||||
<el-col :span="24">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="供应商名称">
|
||||
<el-input v-model="formData.supplierName" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="备注">
|
||||
<el-input v-model="formData.remark" type="textarea" :rows="2" disabled />
|
||||
<el-input v-model="formData.remark" type="textarea" :rows="1" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- 第四行:验收方式 -->
|
||||
<el-row :gutter="20" class="mt-4">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="验收方式">
|
||||
<el-input :value="formData.acceptMeth === '1' ? '数量验收' : '金额验收'" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@ -71,29 +77,24 @@
|
||||
</template>
|
||||
<el-table :data="itemList" show-summary border :summary-method="getSummary">
|
||||
<el-table-column label="序号" type="index" width="60px" align="center" />
|
||||
<el-table-column label="物料编码" prop="materialCode" align="center" />
|
||||
<el-table-column label="物料名称" prop="materialName" align="center" />
|
||||
<el-table-column label="收货状态" prop="acceptStatus" align="center">
|
||||
<template #default="scope">
|
||||
{{ scope.row.acceptStatus === '1' ? '已收货' : '未收货' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="收货数量" prop="acceptQty" align="center" />
|
||||
<el-table-column label="单位" prop="unit" align="center" />
|
||||
<el-table-column label="规格型号" prop="spec" align="center" />
|
||||
<el-table-column label="采购数量" prop="purQty" align="center" />
|
||||
<el-table-column label="要求交货日期" prop="reqDeliveryDate" align="center" />
|
||||
<el-table-column label="采购单价" prop="priceTax" align="center">
|
||||
<el-table-column label="物料编码" prop="materialCode" align="center" />
|
||||
<el-table-column label="物料名称" prop="materialName" align="center" />
|
||||
<el-table-column label="规格型号" prop="spec" align="center" />
|
||||
<el-table-column label="单位" prop="unit" align="center" />
|
||||
<el-table-column label="采购数量" prop="purQty" align="center" />
|
||||
<el-table-column label="要求到货日期" prop="reqDeliveryDate" align="center" />
|
||||
<el-table-column label="含税单价" prop="priceTax" align="center">
|
||||
<template #default="scope">
|
||||
<span style="color: #409EFF;">{{ scope.row.priceTax }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="采购总价" prop="totalPrice" align="center" />
|
||||
<el-table-column label="税率" prop="taxRatio" align="center">
|
||||
<el-table-column label="税率" prop="taxRatio" align="center">
|
||||
<template #default="scope">
|
||||
{{ scope.row.taxRatio }}%
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="含税总价" prop="totalPrice" align="center" />
|
||||
<el-table-column label="备注" prop="remark" align="center" />
|
||||
</el-table>
|
||||
</el-card>
|
||||
</el-form>
|
||||
@ -119,6 +120,7 @@ const formData = reactive({
|
||||
purOrdNo: undefined,
|
||||
purDate: undefined,
|
||||
billType: undefined,
|
||||
applyType: undefined,
|
||||
purStatus: undefined,
|
||||
supplierName: undefined,
|
||||
purDeptName: undefined,
|
||||
|
||||
@ -15,8 +15,8 @@
|
||||
<!-- 第一行:单据类型、申请类型、采购日期 -->
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="单据类型" prop="billType">
|
||||
<el-select v-model="formData.billType" placeholder="请选择" style="width: 100%">
|
||||
<el-form-item label="单据类型" prop="billType" >
|
||||
<el-select v-model="formData.billType" placeholder="请选择" style="width: 100%" disabled>
|
||||
<el-option label="标准采购申请" value="1" />
|
||||
<el-option label="设备采购申请" value="2" />
|
||||
</el-select>
|
||||
@ -24,7 +24,7 @@
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="申请类型" prop="applyType">
|
||||
<el-select v-model="formData.applyType" placeholder="请选择" style="width: 100%">
|
||||
<el-select v-model="formData.applyType" placeholder="请选择" style="width: 100%" disabled>
|
||||
<el-option label="采购申请" value="1" />
|
||||
<el-option label="紧急采购" value="2" />
|
||||
</el-select>
|
||||
@ -53,7 +53,7 @@
|
||||
placeholder="请选择采购部门"
|
||||
filterable
|
||||
check-strictly
|
||||
style="width: 100%"
|
||||
class="w-full"
|
||||
@change="handleDeptChange"
|
||||
/>
|
||||
</el-form-item>
|
||||
@ -68,8 +68,8 @@
|
||||
reserve-keyword
|
||||
:remote-method="searchUsers"
|
||||
:loading="userSelectLoading"
|
||||
style="width: 100%"
|
||||
@change="handleUserChange"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="user in userList"
|
||||
@ -199,17 +199,34 @@
|
||||
:decimal-places="2"
|
||||
:allow-negative="false"
|
||||
:show-prefix="false"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="税率" prop="taxRatio" width="95px" align="center">
|
||||
<template #default="scope">
|
||||
<MoneyInput
|
||||
v-model="scope.row.taxRatio"
|
||||
:decimal-places="2"
|
||||
:allow-negative="false"
|
||||
:show-prefix="false"
|
||||
placeholder="请输入"
|
||||
@change="() => calculateTotal(scope.row)"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="含税总价" prop="totalPrice" width="150px" align="center">
|
||||
<template #default="scope">
|
||||
<el-input :model-value="formatTotalPrice(scope.row)" placeholder="自动计算" readonly />
|
||||
<MoneyInput
|
||||
v-model="scope.row.totalPrice"
|
||||
:decimal-places="2"
|
||||
:allow-negative="false"
|
||||
:show-prefix="false"
|
||||
placeholder="请输入"
|
||||
@change="() => calculatePrice(scope.row)"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="单位" prop="unit" width="80px" align="center">
|
||||
|
||||
<el-table-column label="单位" prop="unit" width="70px" align="center">
|
||||
<template #default="scope">
|
||||
{{ getUnitName(scope.row.unit) }}
|
||||
</template>
|
||||
@ -219,7 +236,7 @@
|
||||
<el-input v-model="scope.row.remark" placeholder="请输入" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="80px" align="center">
|
||||
<el-table-column label="操作" width="70px" align="center">
|
||||
<template #default="scope" >
|
||||
<el-button link type="danger" @click="removeItem(scope.$index)" >删除</el-button>
|
||||
</template>
|
||||
@ -420,32 +437,56 @@ const open = async (type: string, id?: number) => {
|
||||
if (type === 'update' && id) {
|
||||
formLoading.value = true
|
||||
try {
|
||||
const data = await PurOrderApi.getPurOrder(id)
|
||||
const response = await PurOrderApi.getPurOrder(id)
|
||||
// 兼容两种响应格式:response可能是CommonResult或直接是data
|
||||
const data = response.data || response
|
||||
|
||||
// 先加载人员列表用于回显,再赋值表单数据
|
||||
if (!data || typeof data !== 'object') {
|
||||
console.error('API响应数据格式异常:', response)
|
||||
return
|
||||
}
|
||||
|
||||
// 先搜索用户列表,确保在赋值表单数据前加载完成
|
||||
if (data.purDeptId) {
|
||||
await searchUsers('')
|
||||
} else {
|
||||
await searchUsers('')
|
||||
}
|
||||
|
||||
// 确保人员列表中包含当前选中的人员
|
||||
if (data.purEmpId && !userList.value.find((u: any) => u.id === data.purEmpId)) {
|
||||
try {
|
||||
const user = await UserApi.getUser(data.purEmpId)
|
||||
if (user) {
|
||||
userList.value.unshift(user.data || user)
|
||||
if (data.purEmpId) {
|
||||
if (!userList.value.find((u: any) => u.id === data.purEmpId)) {
|
||||
try {
|
||||
const user = await UserApi.getUser(data.purEmpId)
|
||||
if (user) {
|
||||
userList.value.unshift(user.data || user)
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('加载当前采购人员失败', e)
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('加载当前采购人员失败', e)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 赋值表单数据
|
||||
Object.assign(formData, data)
|
||||
|
||||
// 获取部门名称回显
|
||||
if (formData.purDeptId) {
|
||||
try {
|
||||
const deptName = await getDeptSimpleName(formData.purDeptId)
|
||||
formData.purDeptName = deptName
|
||||
} catch (e) {
|
||||
console.error('获取部门名称失败', e)
|
||||
}
|
||||
}
|
||||
|
||||
// 获取采购人员名称回显
|
||||
if (formData.purEmpId) {
|
||||
try {
|
||||
formData.purEmpName = await getUserNameById(formData.purEmpId)
|
||||
} catch (e) {
|
||||
console.error('获取采购人员名称失败', e)
|
||||
}
|
||||
}
|
||||
|
||||
// 加载子表数据
|
||||
const itemData = data.itemList
|
||||
console.log('明细数据:', itemData)
|
||||
@ -552,7 +593,7 @@ const removeItem = (index: number) => {
|
||||
itemList.value.splice(index, 1)
|
||||
}
|
||||
|
||||
// 计算总价
|
||||
// 计算总价(根据数量和单价)
|
||||
const calculateTotal = (row: any) => {
|
||||
if (!row) return
|
||||
const qty = Number(row.purQty) || 0
|
||||
@ -561,6 +602,18 @@ const calculateTotal = (row: any) => {
|
||||
row.totalPrice = total > 0 ? total.toFixed(2) : '0.00'
|
||||
}
|
||||
|
||||
// 根据含税总价反算含税单价
|
||||
const calculatePrice = (row: any) => {
|
||||
if (!row) return
|
||||
const total = Number(row.totalPrice) || 0
|
||||
const qty = Number(row.purQty) || 0
|
||||
// 避免除以0
|
||||
if (qty > 0) {
|
||||
const price = total / qty
|
||||
row.priceTax = price > 0 ? price.toFixed(2) : '0.00'
|
||||
}
|
||||
}
|
||||
|
||||
// 格式化含税总价显示
|
||||
const formatTotalPrice = (row: any) => {
|
||||
if (!row) return ''
|
||||
|
||||
@ -82,9 +82,9 @@
|
||||
</ContentWrap>
|
||||
|
||||
<!-- 采购单信息 -->
|
||||
<ContentWrap>
|
||||
<ContentWrap style="height: calc(50vh - 150px);">
|
||||
<div style="font-weight: bold; margin-bottom: 8px;">采购单信息</div>
|
||||
<div style="display: flex; gap: 16px;">
|
||||
<div style="display: flex; gap: 16px; height: calc(100% - 32px);">
|
||||
<!-- 主表 -->
|
||||
<div style="flex: 1;">
|
||||
<el-table
|
||||
@ -95,6 +95,7 @@
|
||||
highlight-current-row
|
||||
@row-click="handleRowClick"
|
||||
@selection-change="handleSelectionChange"
|
||||
max-height="100%"
|
||||
>
|
||||
<el-table-column type="selection" width="50px" align="center" />
|
||||
<el-table-column label="序号" align="center" type="index" width="60px" />
|
||||
@ -133,7 +134,7 @@
|
||||
<el-button
|
||||
link
|
||||
type="danger"
|
||||
v-if="scope.row.purStatus === '1'"
|
||||
v-if="scope.row.purStatus === '1' || scope.row.purStatus === '4'"
|
||||
@click.stop="handleDelete(scope.row.id)"
|
||||
v-hasPermi="['biz:pur-order:delete']"
|
||||
>
|
||||
@ -162,13 +163,13 @@
|
||||
</ContentWrap>
|
||||
|
||||
<!-- 采购物料信息 -->
|
||||
<ContentWrap>
|
||||
<ContentWrap style="height: calc(50vh - 100px);">
|
||||
<div style="font-weight: bold; margin-bottom: 8px;">采购物料信息</div>
|
||||
<el-table
|
||||
v-loading="itemLoading"
|
||||
:data="itemList"
|
||||
:stripe="true"
|
||||
:show-overflow-tooltip="true"
|
||||
:stripe="true"
|
||||
:show-overflow-tooltip="true"
|
||||
show-summary
|
||||
:summary-method="getItemSummary"
|
||||
border
|
||||
@ -398,7 +399,7 @@ const getItemSummary = (param: any) => {
|
||||
|
||||
/** 初始化 */
|
||||
onMounted(() => {
|
||||
getList()
|
||||
// getList()
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
@ -71,9 +71,9 @@
|
||||
</el-form>
|
||||
</ContentWrap>
|
||||
|
||||
<!-- 表格区域:主列表 + 明细表格上下各占一半 -->
|
||||
<ContentWrap class="!p-15px">
|
||||
<div style="display: flex; flex-direction: column; height: calc(100vh - 280px);">
|
||||
<!-- 表格区域:主列表 -->
|
||||
<ContentWrap class="!p-15px" style="height: calc(50vh - 150px);">
|
||||
<div style="display: flex; flex-direction: column; ">
|
||||
<!-- 主列表 -->
|
||||
<div style="flex: 1; min-height: 0;">
|
||||
<div style="font-weight: bold; margin-bottom: 8px;">出库单列表</div>
|
||||
@ -150,9 +150,11 @@
|
||||
style="margin-top: 8px;"
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</ContentWrap>
|
||||
<ContentWrap class="!p-15px" style="height: calc(50vh - 100px);">
|
||||
<!-- 明细表格 -->
|
||||
<div style="flex: 1; min-height: 0;" >
|
||||
<div style="flex: 1; min-height: 0;" >
|
||||
<div style="font-weight: bold; margin-bottom: 8px;">出库单明细</div>
|
||||
<el-table v-loading="detailLoading" :data="detailList" :stripe="true" :show-overflow-tooltip="true" :summary-method="getDetailSummary" show-summary border style="width: 50%">
|
||||
<el-table-column label="序号" align="center" type="index" width="60px"/>
|
||||
@ -171,7 +173,6 @@
|
||||
<el-table-column label="备注" align="center" prop="remark" />
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</ContentWrap>
|
||||
|
||||
<!-- 表单弹窗:添加/修改 -->
|
||||
@ -332,6 +333,6 @@ const viewDetail = async (row: any) => {
|
||||
|
||||
/** 初始化 **/
|
||||
onMounted(() => {
|
||||
getList()
|
||||
// getList()
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -102,7 +102,7 @@
|
||||
</ContentWrap>
|
||||
|
||||
<!-- 列表 -->
|
||||
<ContentWrap>
|
||||
<ContentWrap style="height: calc(100vh - 240px);">
|
||||
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" border @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55px" />
|
||||
<el-table-column label="序号" align="center" type="index" width="60px" fixed="left" />
|
||||
|
||||
Loading…
Reference in New Issue
Block a user