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

feat(采购模块): 实现订单选择组件并优化UI交互

Browse Source 
refactor(采购管理): 替换输入框为选择组件提升用户体验
style(表格样式): 调整表格边框和间距优化视觉效果
This commit is contained in:
砂糖
2025-11-19 17:16:19 +08:00
parent 7d0492a545
commit 90f88bc36c
8 changed files with 251 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
klp-ui/src/views/erp/purchase/index.vue
View File

@@ -30,14 +30,16 @@
</div>
</header>
<el-table :data="mappingRows" border size="small" class="mapping-table">
<el-table-column label="产品ID">
<el-table-column label="产品">
<template slot-scope="scope">
<el-input v-model="scope.row.productId" placeholder="产品ID" />
<!-- <el-input v-model="scope.row.productId" placeholder="产品ID" /> -->
<ProductSelect v-model="scope.row.productId" placeholder="选择产品" />
</template>
</el-table-column>
<el-table-column label="原料ID">
<el-table-column label="原料">
<template slot-scope="scope">
<el-input v-model="scope.row.rawMaterialId" placeholder="原料ID" />
<!-- <el-input v-model="scope.row.rawMaterialId" placeholder="原料ID" /> -->
<RawMaterialSelect v-model="scope.row.rawMaterialId" placeholder="选择原料" />
</template>
</el-table-column>
<el-table-column label="转换率">
@@ -91,7 +93,8 @@
<el-tabs v-model="activeTab" class="plain-tabs">
<el-tab-pane label="收货记录" name="receipt">
<div class="inline-filter">
<el-input v-model="receiptQuery.orderId" placeholder="订单ID" size="small" clearable />
<!-- <el-input v-model="receiptQuery.orderId" placeholder="订单ID" size="small" clearable /> -->
<OrderSelect v-model="receiptQuery.orderId" size="small" clearable />
<el-input v-model="receiptQuery.itemId" placeholder="明细ID" size="small" clearable />
<div class="filter-actions">
<el-button size="small" type="primary" @click="loadReceipts">查询</el-button>
@@ -130,7 +133,8 @@
<el-tab-pane label="退货管理" name="return">
<div class="inline-filter">
<el-input v-model="returnQuery.orderId" placeholder="订单ID" size="small" clearable />
<!-- <el-input v-model="returnQuery.orderId" placeholder="订单ID" size="small" clearable /> -->
<OrderSelect v-model="returnQuery.orderId" placeholder="选择订单" size="small" clearable />
<el-select v-model="returnQuery.status" placeholder="状态" size="small" clearable>
<el-option label="草稿" :value="0" />
<el-option label="完成" :value="1" />
@@ -226,10 +230,12 @@
<el-dialog :title="receiptDialog.title" :visible.sync="receiptDialog.visible" width="480px">
<el-form :model="receiptDialog.form" :rules="receiptRules" ref="receiptForm" label-width="100px" size="small">
<el-form-item label="订单ID" prop="orderId">
<el-input v-model="receiptDialog.form.orderId" />
<!-- <el-input v-model="receiptDialog.form.orderId" /> -->
<OrderSelect v-model="receiptDialog.form.orderId" />
</el-form-item>
<el-form-item label="明细ID" prop="itemId">
<el-input v-model="receiptDialog.form.itemId" />
<!-- <el-input v-model="receiptDialog.form.itemId" /> -->
<OrderDetailSelect v-model="receiptDialog.form.itemId" :orderId="receiptDialog.form.orderId" />
</el-form-item>
<el-form-item label="收货数量" prop="receivedQty">
<el-input-number v-model="receiptDialog.form.receivedQty" :min="0" :precision="3" />
@@ -259,10 +265,10 @@
</el-dialog>
<!-- 退货弹窗 -->
<el-dialog :title="returnDialog.title" :visible.sync="returnDialog.visible" width="500px">
<el-dialog :title="returnDialog.title" :visible.sync="returnDialog.visible" width="600px">
<el-form :model="returnDialog.form" :rules="returnRules" ref="returnForm" label-width="100px" size="small">
<el-form-item label="订单ID" prop="orderId">
<el-input v-model="returnDialog.form.orderId" />
<OrderSelect v-model="returnDialog.form.orderId" placeholder="选择订单" size="small" clearable />
</el-form-item>
<el-form-item label="退货类型">
<el-select v-model="returnDialog.form.returnType" clearable>
@@ -292,10 +298,11 @@
</el-dialog>
<!-- 退货明细弹窗 -->
<el-dialog :title="returnItemDialog.title" :visible.sync="returnItemDialog.visible" width="520px">
<el-dialog :title="returnItemDialog.title" :visible.sync="returnItemDialog.visible" width="600px">
<div class="toolbar">
<el-input v-model="returnItemQuery.returnId" placeholder="退货单ID" size="small" clearable class="toolbar-input" />
<el-input v-model="returnItemQuery.itemId" placeholder="订单明细ID" size="small" clearable class="toolbar-input" />
<OrderSelect v-model="returnItemQuery.orderId" />
<OrderDetailSelect v-model="returnItemQuery.itemId" :orderId="returnItemQuery.orderId" placeholder="选择订单明细" size="small" clearable />
<el-button size="small" type="primary" @click="loadReturnItems">查询</el-button>
<el-button size="small" @click="resetReturnItemQuery">重置</el-button>
<div class="toolbar-spacer"></div>
@@ -328,8 +335,11 @@
<el-form-item label="退货单ID" prop="returnId">
<el-input v-model="returnItemFormDialog.form.returnId" />
</el-form-item>
<el-form-item label="订单ID" prop="orderId">
<OrderSelect v-model="returnItemFormDialog.form.orderId" placeholder="选择订单" size="small" clearable />
</el-form-item>
<el-form-item label="订单明细ID" prop="itemId">
<el-input v-model="returnItemFormDialog.form.itemId" />
<OrderDetailSelect v-model="returnItemFormDialog.form.itemId" :orderId="returnItemFormDialog.form.orderId" placeholder="选择订单明细" size="small" clearable />
</el-form-item>
<el-form-item label="退货数量" prop="returnQty">
<el-input-number v-model="returnItemFormDialog.form.returnQty" :min="0" :precision="3" />
@@ -368,9 +378,19 @@ import {
getPurchasePriceTrend,
getSupplierQuality
} from '@/api/erp/purchase'
import RawMaterialSelect from '@/components/KLPService/RawMaterialSelect'
import ProductSelect from '@/components/KLPService/ProductSelect'
import OrderSelect from '@/components/KLPService/OrderSelect'
import OrderDetailSelect from '@/components/KLPService/OrderDetailSelect'
export default {
name: 'ErpPurchaseWorkbench',
components: {
RawMaterialSelect,
ProductSelect,
OrderSelect,
OrderDetailSelect,
},
data() {
return {
mappingRows: [{ productId: '', rawMaterialId: '', conversionRate: 1 }],
@@ -585,6 +605,7 @@ export default {
// 退货明细
openReturnItemDialog() {
this.returnItemDialog.visible = true
this.loadReturnItems()
},
loadReturnItems() {
@@ -607,7 +628,7 @@ export default {
this.returnItemFormDialog.form = { ...row }
this.returnItemFormDialog.title = '编辑退货明细'
} else {
this.returnItemFormDialog.form = { returnId: '', itemId: '', returnQty: 0 }
this.returnItemFormDialog.form = { returnId: '', itemId: '', returnQty: 0, orderId: row.orderId }
this.returnItemFormDialog.title = '新增退货明细'
}
this.returnItemFormDialog.visible = true

18
klp-ui/src/views/erp/receipt/index.vue
View File

@@ -6,8 +6,10 @@
<el-button type="primary" size="small" @click="openDialog()">新增收货</el-button>
</header>
<div class="inline-filter">
<el-input v-model="query.orderId" placeholder="订单ID" size="small" clearable />
<el-input v-model="query.itemId" placeholder="订单明细ID" size="small" clearable />
<!-- <el-input v-model="query.orderId" placeholder="订单ID" size="small" clearable /> -->
<OrderSelect v-model="query.orderId" placeholder="订单号" size="small" />
<!-- <el-input v-model="query.itemId" placeholder="订单明细ID" size="small" clearable /> -->
<OrderDetailSelect :orderId="query.orderId" v-model="query.itemId"></OrderDetailSelect>
<el-select v-model="query.quality" placeholder="质检结果" size="small" clearable>
<el-option label="合格" value="OK" />
<el-option label="不合格" value="NG" />
@@ -62,10 +64,12 @@
<el-dialog :title="dialog.title" :visible.sync="dialog.visible" width="480px">
<el-form :model="dialog.form" :rules="rules" ref="form" label-width="100px" size="small">
<el-form-item label="订单ID" prop="orderId">
<el-input v-model="dialog.form.orderId" />
<!-- <el-input v-model="dialog.form.orderId" /> -->
<OrderSelect v-model="dialog.form.orderId" placeholder="订单号" size="small" />
</el-form-item>
<el-form-item label="明细ID" prop="itemId">
<el-input v-model="dialog.form.itemId" />
<!-- <el-input v-model="dialog.form.itemId" /> -->
<OrderDetailSelect :orderId="dialog.form.orderId" v-model="dialog.form.itemId"></OrderDetailSelect>
</el-form-item>
<el-form-item label="收货数量" prop="receivedQty">
<el-input-number v-model="dialog.form.receivedQty" :min="0" :precision="3" />
@@ -98,9 +102,15 @@ import {
updatePurchaseReceipt,
delPurchaseReceipt
} from '@/api/erp/purchase'
import OrderSelect from '@/components/KLPService/OrderSelect'
import OrderDetailSelect from '@/components/KLPService/OrderDetailSelect'
export default {
name: 'ErpPurchaseReceipt',
components: {
OrderSelect,
OrderDetailSelect
},
data() {
return {
query: { pageNum: 1, pageSize: 10, orderId: null, itemId: null },

16
klp-ui/src/views/erp/requirement/index.vue
View File

@@ -9,14 +9,16 @@
</div>
</header>
<el-table :data="mappingRows" border size="small" class="mapping-table">
<el-table-column label="产品ID">
<el-table-column label="产品">
<template slot-scope="scope">
<el-input v-model="scope.row.productId" placeholder="产品ID" />
<!-- <el-input v-model="scope.row.productId" placeholder="产品ID" /> -->
<ProductSelect v-model="scope.row.productId" placeholder="选择产品" />
</template>
</el-table-column>
<el-table-column label="原料ID">
<el-table-column label="原料">
<template slot-scope="scope">
<el-input v-model="scope.row.rawMaterialId" placeholder="原料ID" />
<!-- <el-input v-model="scope.row.rawMaterialId" placeholder="原料ID" /> -->
<RawMaterialSelect v-model="scope.row.rawMaterialId" placeholder="选择原料" />
</template>
</el-table-column>
<el-table-column label="转换率">
@@ -82,9 +84,15 @@
<script>
import { analyzePurchaseRequirement } from '@/api/erp/purchase'
import RawMaterialSelect from '@/components/KLPService/RawMaterialSelect'
import ProductSelect from '@/components/KLPService/ProductSelect'
export default {
name: 'ErpPurchaseRequirement',
components: {
RawMaterialSelect,
ProductSelect
},
data() {
return {
mappingRows: [{ productId: '', rawMaterialId: '', conversionRate: 1 }],

30
klp-ui/src/views/erp/return/index.vue
View File

@@ -6,7 +6,8 @@
<el-button type="primary" size="small" @click="openReturnDialog()">新增退货单</el-button>
</header>
<div class="inline-filter">
<el-input v-model="returnQuery.orderId" placeholder="订单ID" size="small" clearable />
<!-- <el-input v-model="returnQuery.orderId" placeholder="订单ID" size="small" clearable /> -->
<OrderSelect v-model="returnQuery.orderId" placeholder="订单ID" size="small" clearable />
<el-select v-model="returnQuery.status" placeholder="状态" size="small" clearable>
<el-option label="草稿" :value="0" />
<el-option label="完成" :value="1" />
@@ -55,7 +56,8 @@
</header>
<div class="inline-filter">
<el-input v-model="returnItemQuery.returnId" placeholder="退货单ID" size="small" clearable />
<el-input v-model="returnItemQuery.itemId" placeholder="订单明细ID" size="small" clearable />
<OrderSelect v-model="returnItemQuery.orderId" />
<OrderDetailSelect v-model="returnItemQuery.itemId" :orderId="returnItemQuery.orderId" />
<div class="filter-actions">
<el-button size="small" type="primary" @click="loadReturnItems">查询</el-button>
<el-button size="small" @click="resetReturnItemQuery">重置</el-button>
@@ -86,7 +88,8 @@
<el-dialog :title="returnDialog.title" :visible.sync="returnDialog.visible" width="520px">
<el-form :model="returnDialog.form" :rules="returnRules" ref="returnForm" label-width="100px" size="small">
<el-form-item label="订单ID" prop="orderId">
<el-input v-model="returnDialog.form.orderId" />
<!-- <el-input v-model="returnDialog.form.orderId" /> -->
<OrderSelect v-model="returnDialog.form.orderId" />
</el-form-item>
<el-form-item label="退货类型">
<el-select v-model="returnDialog.form.returnType">
@@ -121,7 +124,8 @@
<el-input v-model="returnItemDialog.form.returnId" />
</el-form-item>
<el-form-item label="订单明细ID" prop="itemId">
<el-input v-model="returnItemDialog.form.itemId" />
<!-- <el-input v-model="returnItemDialog.form.itemId" /> -->
<OrderDetailSelect v-model="returnItemDialog.form.itemId" :orderId="returnItemDialog.form.orderId" />
</el-form-item>
<el-form-item label="退货数量" prop="returnQty">
<el-input-number v-model="returnItemDialog.form.returnQty" :min="0" :precision="3" />
@@ -152,9 +156,15 @@ import {
updatePurchaseReturnItem,
delPurchaseReturnItem
} from '@/api/erp/purchase'
import OrderSelect from '@/components/KLPService/OrderSelect'
import OrderDetailSelect from '@/components/KLPService/OrderDetailSelect'
export default {
name: 'ErpPurchaseReturn',
components: {
OrderSelect,
OrderDetailSelect
},
data() {
return {
returnQuery: { pageNum: 1, pageSize: 10, orderId: null, status: null },
@@ -166,7 +176,9 @@ export default {
returnItemQuery: { pageNum: 1, pageSize: 10, returnId: null, itemId: null },
returnItemList: [],
returnItemLoading: false,
returnItemDialog: { visible: false, title: '', form: {} },
returnItemDialog: { visible: false, title: '', form: {
orderId: '',
} },
returnItemRules: {
returnId: [{ required: true, message: '请输入退货单ID', trigger: 'blur' }],
itemId: [{ required: true, message: '请输入订单明细ID', trigger: 'blur' }],
@@ -216,7 +228,9 @@ export default {
})
},
selectReturn(row) {
this.selectedReturnId = row.returnId
this.selectedReturnId = row.returnId;
this.returnItemDialog.form.orderId = row.orderId
this.returnItemQuery.orderId = row.orderId
this.openReturnItems(row)
},
openReturnItems(row) {
@@ -246,10 +260,10 @@ export default {
},
openReturnItemDialog(row) {
if (row) {
this.returnItemDialog.form = { ...row }
this.returnItemDialog.form = { ...row, orderId: this.returnItemDialog.form.orderId }
this.returnItemDialog.title = '编辑退货明细'
} else {
this.returnItemDialog.form = { returnId: this.returnItemQuery.returnId || '', itemId: '', returnQty: 0 }
this.returnItemDialog.form = { returnId: this.returnItemQuery.returnId || '', itemId: '', returnQty: 0, orderId: this.returnItemDialog.form.orderId }
this.returnItemDialog.title = '新增退货明细'
}
this.returnItemDialog.visible = true