DeXun/klp-oa
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(aps): 新增APS排产管理模块完整功能

Browse Source 
本次提交完成APS（高级计划与排程）模块的全量开发：
1.  新增CRM订单相关API接口，包含列表、详情、明细查询
2.  新增产需单相关CRUD API与页面，支持排产单管理与订单绑定
3.  新增按日期查询排产单、订单下钻详情页面
4.  为排产单实体类添加日期格式化注解，修复参数绑定问题
5.  统一封装APS模块主题样式，提供通用混入与变量
6.  实现产需单与销售订单的绑定解绑、明细自动生成功能
This commit is contained in:
砂糖
2026-06-25 15:44:26 +08:00
parent 7e9caf9bb7
commit 289555fd44
8 changed files with 2111 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

445
klp-ui/src/views/wms/post/aps/order.vue Normal file
View File

@@ -0,0 +1,445 @@
<template>
<div class="app-container" style="height: calc(100vh - 84px); display: flex;">
<!-- 左侧订单列表 -->
<div class="left-panel" v-loading="orderLoading" style="width: 30%; border-right: 1px solid #e4e7ed; overflow-y: auto;">
<!-- 筛选区 -->
<div class="filter-section" style="padding: 10px; border-bottom: 1px solid #e4e7ed;">
<!-- 第一行：搜索 + 按钮 + 记录数 -->
<div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;">
<div style="display: flex; align-items: center; gap: 4px; flex-wrap: wrap;">
<el-input v-model="queryParams.keyword" placeholder="请输入关键字" clearable
@keyup.enter.native="handleSearch" style="width: 160px;" />
<el-button class="aps-btn-red" icon="el-icon-search" size="mini" @click="handleSearch">筛选</el-button>
<el-button icon="el-icon-sort" size="mini" @click="toggleMoreFilter"
:class="showMoreFilter ? 'aps-btn-red' : 'aps-btn-silver'"></el-button>
</div>
<div style="font-size: 12px; color: #909399;">
共 <span class="aps-total-count">{{ total }}</span> 条记录
</div>
</div>
<!-- 第二行：日期范围 -->
<div style="display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 4px;">
<div style="display: flex; align-items: center; gap: 4px; font-size: 13px; color: #606266;">
<span style="white-space: nowrap;">签订日期：</span>
<el-date-picker clearable v-model="queryParams.signDateStart" type="date" value-format="yyyy-MM-dd"
placeholder="签订开始" style="width: 150px;" @change="handleSearch" />
<span>~</span>
<el-date-picker clearable v-model="queryParams.signDateEnd" type="date" value-format="yyyy-MM-dd"
placeholder="签订结束" style="width: 150px;" @change="handleSearch" />
</div>
<div style="display: flex; align-items: center; gap: 4px; font-size: 13px; color: #606266;">
<span style="white-space: nowrap;">交货日期：</span>
<el-date-picker clearable v-model="queryParams.deliveryDateStart" type="date" value-format="yyyy-MM-dd"
placeholder="交货开始" style="width: 150px;" @change="handleSearch" />
<span>~</span>
<el-date-picker clearable v-model="queryParams.deliveryDateEnd" type="date" value-format="yyyy-MM-dd"
placeholder="交货结束" style="width: 150px;" @change="handleSearch" />
</div>
</div>
<!-- 第三行：更多筛选条件 -->
<div v-show="showMoreFilter" class="more-filter"
style="margin-top: 8px; padding-top: 10px; border-top: 1px dashed #e4e7ed;">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="80px">
<el-form-item label="订单编号" prop="orderCode">
<el-input v-model="queryParams.orderCode" placeholder="请输入订单编号" clearable
@keyup.enter.native="handleSearch" />
</el-form-item>
<el-form-item label="销售员" prop="salesman">
<el-select v-model="queryParams.salesman" placeholder="请选择销售员" clearable style="width: 140px;">
<el-option v-for="item in dict.type.wip_pack_saleman" :key="item.value" :label="item.label"
:value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="订单状态" prop="orderStatus">
<el-select v-model="queryParams.orderStatus" placeholder="请选择订单状态" clearable style="width: 140px;">
<el-option v-for="(value, key) in ORDER_STATUS" :key="value" :label="key" :value="value" />
</el-select>
</el-form-item>
<el-form-item>
<el-button class="aps-btn-silver" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
</div>
</div>
<!-- 列表区域 -->
<div class="custom-list">
<div class="list-body">
<div
v-for="item in orderList"
:key="item.orderId"
class="list-item"
:class="{ 'list-item-active': currentOrder && currentOrder.orderId === item.orderId }"
@click="handleOrderClick(item)"
>
<!-- 第一行：订单编号 + 客户公司 -->
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
<div style="display: flex; align-items: center; gap: 8px;">
<div style="font-weight: bold;">{{ item.contractName }}</div>
</div>
<div style="font-size: 12px; color: #606266;">{{ item.companyName }}</div>
</div>
<!-- 第二行：销售员 + 合同号 -->
<div style="font-size: 12px; color: #909399; margin-bottom: 6px;">
<span>销售员: {{ item.salesman }}</span>
<span style="margin-left: 20px;">合同号: {{ item.contractCode }}</span>
</div>
<!-- 第三行：签订时间 + 交货日期 -->
<div style="font-size: 12px; color: #909399; margin-bottom: 6px;">
<span>签订时间: {{ item.signTime }}</span>
<span style="margin-left: 20px;">交货日期: {{ item.deliveryDate }}</span>
</div>
<!-- 第四行：签订地点 + 状态 -->
<div style="display: flex; justify-content: space-between; align-items: center;">
<div style="font-size: 12px; color: #909399;">
签订地点: {{ item.signLocation || '-' }}
</div>
<el-tag
:type="statusTagType(item.orderStatus)"
size="small"
>{{ statusLabel(item.orderStatus) }}</el-tag>
</div>
</div>
<div v-if="orderList.length === 0 && !orderLoading" style="padding: 40px; text-align: center; color: #909399;">
暂无订单数据
</div>
</div>
</div>
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
style="padding: 10px; margin-bottom: 10px !important;"
/>
</div>
<!-- 右侧内容区域 -->
<div class="right-panel" v-if="currentOrder && currentOrder.orderId" style="flex: 1; display: flex; flex-direction: column;">
<div class="detail-panel">
<!-- 订单基本信息（含甲乙双方）卡片 -->
<div class="detail-card">
<div class="detail-card-header">
<span>订单基本信息</span>
</div>
<div class="detail-card-body">
<div class="form-grid-2">
<div class="form-field"><label>销售员</label><div class="field-value">{{ currentOrder.salesman }}</div></div>
<div class="form-field"><label>合同号</label><div class="field-value">{{ currentOrder.contractCode }}</div></div>
<div class="form-field"><label>签订时间</label><div class="field-value">{{ currentOrder.signTime }}</div></div>
<div class="form-field"><label>交货日期</label><div class="field-value">{{ currentOrder.deliveryDate }}</div></div>
<div class="form-field"><label>订单总金额</label><div class="field-value">{{ currentOrder.orderAmount }}</div></div>
<div class="form-field"><label>签订地点</label><div class="field-value">{{ currentOrder.signLocation }}</div></div>
<div class="form-field" style="grid-column:1/3;"><label>备注</label><div class="field-value">{{ currentOrder.remark }}</div></div>
</div>
<div class="section-divider"></div>
<div class="form-grid-2">
<div class="form-field"><label>供方名称（甲方）</label><div class="field-value">{{ currentOrder.supplier }}</div></div>
<div class="form-field"><label>供方地址</label><div class="field-value">{{ currentOrder.supplierAddress }}</div></div>
<div class="form-field"><label>供方电话</label><div class="field-value">{{ currentOrder.supplierPhone }}</div></div>
<div class="form-field"><label>供方开户行</label><div class="field-value">{{ currentOrder.supplierBank }}</div></div>
<div class="form-field"><label>供方账号</label><div class="field-value">{{ currentOrder.supplierAccount }}</div></div>
<div class="form-field"><label>供方税号</label><div class="field-value">{{ currentOrder.supplierTaxNo }}</div></div>
<div class="form-field" style="border-top:1px solid #e8e8e8;padding-top:8px;margin-top:4px;grid-column:1/3;"></div>
<div class="form-field"><label>需方名称（乙方）</label><div class="field-value">{{ currentOrder.customer }}</div></div>
<div class="form-field"><label>需方地址</label><div class="field-value">{{ currentOrder.customerAddress }}</div></div>
<div class="form-field"><label>需方电话</label><div class="field-value">{{ currentOrder.customerPhone }}</div></div>
<div class="form-field"><label>需方开户行</label><div class="field-value">{{ currentOrder.customerBank }}</div></div>
<div class="form-field"><label>需方账号</label><div class="field-value">{{ currentOrder.customerAccount }}</div></div>
<div class="form-field"><label>需方税号</label><div class="field-value">{{ currentOrder.customerTaxNo }}</div></div>
</div>
</div>
</div>
<!-- 订单明细卡片 -->
<div class="detail-card">
<div class="detail-card-header">
<span>订单明细（{{ productList.length }} 条）</span>
</div>
<div class="detail-card-body" style="padding:0;">
<div v-if="productList.length > 0" class="aps-product-table-wrap">
<el-table :data="productList" border size="small" class="aps-product-table">
<el-table-column label="规格" prop="spec" min-width="120" />
<el-table-column label="材质" prop="material" width="100" align="center" />
<el-table-column label="数量(吨)" prop="quantity" width="90" align="right" />
<el-table-column label="含税单价" prop="taxPrice" width="100" align="right" />
<el-table-column label="含税总额" prop="taxTotal" width="100" align="right" />
<el-table-column label="无税单价" prop="noTaxPrice" width="100" align="right" />
<el-table-column label="无税总额" prop="noTaxTotal" width="100" align="right" />
<el-table-column label="税额" prop="taxAmount" width="90" align="right" />
<el-table-column label="备注" prop="remark" min-width="120" />
</el-table>
<div class="aps-product-summary">
<span>产品名称：{{ productName }}</span>
<span>总数量：{{ totalQuantity }} 吨</span>
<span>含税总额：{{ totalTaxTotal }}</span>
</div>
</div>
<el-empty v-else description="暂无产品明细" />
</div>
</div>
</div>
</div>
<div v-else style="flex: 1; display: flex; flex-direction: column;">
<el-empty description="选择订单后查看内容" />
</div>
</div>
</template>
<script>
import { listCrmOrder } from '@/api/aps/order'
import { parseProductContent } from '@/utils/productContent'
import { ORDER_STATUS } from '@/views/crm/js/enum'
import FileList from '@/components/FileList'
export default {
name: 'ApsOrder',
components: { FileList },
dicts: ['wip_pack_saleman'],
data() {
return {
ORDER_STATUS,
showMoreFilter: false,
orderLoading: false,
orderList: [],
total: 0,
currentOrder: null,
productList: [],
productName: '',
totalQuantity: 0,
totalTaxTotal: 0,
queryParams: {
keyword: '',
orderCode: '',
salesman: '',
orderStatus: undefined,
signDateStart: undefined,
signDateEnd: undefined,
deliveryDateStart: undefined,
deliveryDateEnd: undefined,
pageNum: 1,
pageSize: 10
}
}
},
created() {
this.getList()
},
methods: {
toggleMoreFilter() {
this.showMoreFilter = !this.showMoreFilter
},
handleSearch() {
this.queryParams.pageNum = 1
this.getList()
},
resetQuery() {
this.queryParams.orderCode = ''
this.queryParams.salesman = ''
this.queryParams.orderStatus = undefined
this.queryParams.signDateStart = undefined
this.queryParams.signDateEnd = undefined
this.queryParams.deliveryDateStart = undefined
this.queryParams.deliveryDateEnd = undefined
this.handleSearch()
},
getList() {
this.orderLoading = true
listCrmOrder(this.queryParams).then(res => {
this.orderList = res.rows || []
this.total = res.total || 0
}).catch(() => {
this.orderList = []
this.total = 0
}).finally(() => {
this.orderLoading = false
})
},
handleOrderClick(order) {
this.currentOrder = order
this.parseProductContent(order)
},
parseProductContent(order) {
if (!order || !order.productContent) {
this.productList = []
this.productName = ''
this.totalQuantity = 0
this.totalTaxTotal = 0
return
}
const parsed = parseProductContent(order.productContent)
this.productList = parsed.products || []
this.productName = parsed.productName || ''
this.totalQuantity = parsed.totalQuantity || 0
this.totalTaxTotal = parsed.totalTaxTotal || 0
},
statusTagType(status) {
const map = { 0: 'info', 1: 'warning', 2: 'primary', 3: 'success', 4: 'success' }
return map[status] || 'info'
},
statusLabel(status) {
const labels = { 0: '待生产', 1: '生产中', 2: '部分发货', 3: '已发货', 4: '已签收' }
return labels[status] || '未知'
}
}
}
</script>
<style scoped lang="scss">
@import './scss/aps-theme.scss';
.app-container {
overflow: hidden;
padding: 0;
}
.left-panel {
height: calc(100vh - 84px);
box-sizing: border-box;
overflow-y: auto;
}
.right-panel {
height: calc(100vh - 84px);
overflow: hidden;
min-height: 0;
}
// ====== 左侧列表（参照 ContractList.vue） ======
.custom-list {
border: 1px solid #e4e7ed;
border-radius: 4px;
overflow: hidden;
}
.list-item {
padding: 10px;
border-bottom: 2px solid #dddddd;
cursor: pointer;
}
.list-item:hover {
background-color: $aps-silver-1;
}
.list-item-active {
background-color: $aps-red-1;
border-left: 3px solid $aps-red-2;
}
.aps-total-count {
color: $aps-red-2;
font-weight: bold;
}
.aps-btn-red {
@include aps-btn-red;
}
.aps-btn-silver {
@include aps-btn-silver;
}
// ====== 右侧详情面板（参照 HTML 设计稿） ======
.detail-panel {
flex: 1;
overflow-y: scroll;
padding: 16px;
display: flex;
flex-direction: column;
gap: 16px;
background: $aps-bg;
min-height: 0;
}
.detail-card {
background: $aps-white;
border: 1px solid $aps-border;
border-radius: $aps-radius;
box-shadow: $aps-shadow-sm;
}
.detail-card-header {
background: linear-gradient(to right, $aps-red-2, $aps-red-3);
color: white;
padding: 8px 14px;
font-size: 13px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: space-between;
}
.detail-card-body {
padding: 14px;
}
.form-grid-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px 16px;
}
.form-field {
display: flex;
flex-direction: column;
gap: 3px;
}
.form-field label {
font-size: 11px;
color: $aps-text-muted;
font-weight: 500;
}
.form-field .field-value {
font-size: 13px;
color: $aps-text;
padding: 4px 0;
border-bottom: 1px solid $aps-silver-mid;
}
// ====== 产品明细 ======
.aps-detail-title {
font-size: 15px;
font-weight: 600;
color: $aps-silver-5;
border-left: 3px solid $aps-red-2;
padding-left: 8px;
}
.aps-product-table-wrap {
border: 1px solid $aps-silver-3;
border-radius: 4px;
overflow: hidden;
}
.aps-product-table {
width: 100%;
::v-deep th {
background: $aps-silver-1 !important;
color: $aps-silver-5 !important;
font-weight: 600 !important;
}
}
.aps-product-summary {
display: flex;
gap: 24px;
padding: 8px 16px;
background: $aps-silver-1;
border-top: 1px solid $aps-silver-3;
font-size: 13px;
color: $aps-silver-5;
font-weight: 500;
}
</style>