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

Merge remote-tracking branch 'origin/0.8.X' into 0.8.X

Browse Source
This commit is contained in:
Joshi
2025-07-29 16:08:12 +08:00
parent ceda60e919 ae33b44468
commit 8692f875f5
20 changed files with 969 additions and 270 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
klp-ui/.env.development
View File

@@ -1,5 +1,5 @@
# 页面标题
VUE_APP_TITLE = RuoYi-Flowable-Plus后台管理系统
VUE_APP_TITLE = 科伦普WMS系统
# 开发环境配置
ENV = 'development'

2
klp-ui/.env.production
View File

@@ -1,5 +1,5 @@
# 页面标题
VUE_APP_TITLE = RuoYi-Flowable-Plus后台管理系统
VUE_APP_TITLE = 科伦普WMS系统
# 生产环境配置
ENV = 'production'

2
klp-ui/.env.stage
View File

@@ -1,5 +1,5 @@
# 页面标题
VUE_APP_TITLE = RuoYi-Flowable-Plus后台管理系统
VUE_APP_TITLE = 科伦普WMS系统
# 开发环境配置
ENV = 'development'

44
klp-ui/src/api/wms/bom.js Normal file
View File

@@ -0,0 +1,44 @@
import request from '@/utils/request'
// 查询BOM 头，关联产品或原材料列表
export function listBom(query) {
return request({
url: '/klp/bom/list',
method: 'get',
params: query
})
}
// 查询BOM 头，关联产品或原材料详细
export function getBom(bomId) {
return request({
url: '/klp/bom/' + bomId,
method: 'get'
})
}
// 新增BOM 头，关联产品或原材料
export function addBom(data) {
return request({
url: '/klp/bom',
method: 'post',
data: data
})
}
// 修改BOM 头，关联产品或原材料
export function updateBom(data) {
return request({
url: '/klp/bom',
method: 'put',
data: data
})
}
// 删除BOM 头，关联产品或原材料
export function delBom(bomId) {
return request({
url: '/klp/bom/' + bomId,
method: 'delete'
})
}

44
klp-ui/src/api/wms/bomItem.js Normal file
View File

@@ -0,0 +1,44 @@
import request from '@/utils/request'
// 查询BOM 明细，存放属性–值列表
export function listBomItem(query) {
return request({
url: '/wms/bomItem/list',
method: 'get',
params: query
})
}
// 查询BOM 明细，存放属性–值详细
export function getBomItem(itemId) {
return request({
url: '/wms/bomItem/' + itemId,
method: 'get'
})
}
// 新增BOM 明细，存放属性–值
export function addBomItem(data) {
return request({
url: '/wms/bomItem',
method: 'post',
data: data
})
}
// 修改BOM 明细，存放属性–值
export function updateBomItem(data) {
return request({
url: '/wms/bomItem',
method: 'put',
data: data
})
}
// 删除BOM 明细，存放属性–值
export function delBomItem(itemId) {
return request({
url: '/wms/bomItem/' + itemId,
method: 'delete'
})
}

41
klp-ui/src/components/KLPService/Renderer/BomInfo.vue Normal file
View File

@@ -0,0 +1,41 @@
<template>
<div>
<el-descriptions :column="1" border v-if="bomInfo.length > 0">
<el-descriptions-item v-for="item in bomInfo" :key="item.attrKey" :label="item.attrKey">
{{ item.attrValue }}
</el-descriptions-item>
</el-descriptions>
<div v-else>
<el-empty description="暂无BOM信息" />
</div>
</div>
</template>
<script>
import { listBomItem } from '../../../api/wms/bomItem';
export default {
name: 'BomInfo',
props: {
bomId: {
type: [String, Number],
required: true
}
},
data() {
return {
bomInfo: []
}
},
created() {
this.getBomInfo();
},
methods: {
getBomInfo() {
listBomItem({ bomId: this.bomId }).then(res => {
this.bomInfo = res.rows;
})
}
}
}
</script>

66
klp-ui/src/components/KLPService/Renderer/ProductInfo.vue
View File

@@ -1,45 +1,74 @@
<template>
<div>
<span class="product-name" @click="showDetail = true">
{{ product.productName ? product.productName : '--' }}
<span class="product-name" @click="clickHandle">
<slot name="default" :product="product">
{{ product.productName ? product.productName : '--' }}
</slot>
</span>
<el-dialog v-model="showDetail" @close="showDetail = false" :title="product.name" width="400px" v-if="product" append-to-body>
<div>
<p><strong>ID:</strong> {{ product.productId }}</p>
<p><strong>名称:</strong> {{ product.productName }}</p>
<p><strong>描述:</strong> {{ product.productCode }}</p>
</div>
<el-dialog
:visible="showDetail"
@close="showDetail = false"
title="产品信息"
width="500px"
append-to-body
>
<el-descriptions :column="1" border>
<el-descriptions-item label="ID">
{{ product.productId || '--' }}
</el-descriptions-item>
<el-descriptions-item label="名称">
{{ product.productName || '--' }}
</el-descriptions-item>
<el-descriptions-item label="产品编码">
{{ product.productCode || '--' }}
</el-descriptions-item>
</el-descriptions>
<BomInfo :bomId="product.bomId" />
</el-dialog>
</div>
</template>
<script>
import { mapState } from 'vuex';
import BomInfo from './BomInfo.vue';
export default {
name: 'ProductInfo',
components: {
BomInfo
},
props: {
productId: {
type: [String, Number],
required: true
}
},
},
data() {
return {
showDetail: false,
product: null,
product: {},
};
},
computed: {
...mapState({
productMap: state => state.category.productMap // 假设vuex中为product模块
productMap: state => state.category.productMap
}),
},
methods: {
clickHandle() {
console.log('clickHandle');
this.showDetail = true;
},
getStatusText(status) {
return status === 1 ? '启用中' : '已禁用';
}
},
watch: {
productId: {
handler: function(newVal) {
const res = this.productMap ? this.productMap[this.productId] : null;
console.log(this.productMap, this.productId, 'productMap', 'productId', res);
this.product = res;
handler(newVal) {
this.product = this.productMap && this.productMap[this.productId]
? { ...this.productMap[this.productId] }
: {};
},
immediate: true
}
@@ -53,4 +82,9 @@ export default {
cursor: pointer;
text-decoration: underline;
}
</style>
/* 可选：调整描述列表的外边距 */
:deep(.el-descriptions) {
margin-top: -10px;
}
</style>

26
klp-ui/src/components/KLPService/Renderer/RawMaterialInfo.vue
View File

@@ -1,14 +1,20 @@
<template>
<div>
<!-- 作用域插槽 -->
<span class="material-name" @click="showDetail = true">
{{ material.rawMaterialName ? material.rawMaterialName : '--' }}
<slot name="default" :material="material">
{{ material.rawMaterialName ? material.rawMaterialName : '--' }}
</slot>
</span>
<el-dialog :visible="showDetail" @close="showDetail = false" :title="material.name" width="400px" v-if="material" append-to-body>
<div>
<p><strong>ID:</strong> {{ material.rawMaterialId }}</p>
<p><strong>名称:</strong> {{ material.rawMaterialName }}</p>
<p><strong>描述:</strong> {{ material.rawMaterialCode }}</p>
</div>
<el-dialog :visible="showDetail" @close="showDetail = false" :title="material.name" width="400px"
append-to-body>
<el-descriptions :column="1" border>
<el-descriptions-item label="ID">{{ material.rawMaterialId }}</el-descriptions-item>
<el-descriptions-item label="名称">{{ material.rawMaterialName }}</el-descriptions-item>
<el-descriptions-item label="描述">{{ material.rawMaterialCode }}</el-descriptions-item>
</el-descriptions>
<BomInfo :bomId="material.bomId" />
</el-dialog>
</div>
</template>
@@ -26,7 +32,7 @@ export default {
data() {
return {
showDetail: false,
material: null,
material: {},
};
},
computed: {
@@ -36,8 +42,8 @@ export default {
},
watch: {
materialId: {
handler: function(newVal) {
const res = this.materialMap ? this.materialMap[this.materialId] : null;
handler: function (newVal) {
const res = this.materialMap ? this.materialMap[this.materialId] : {};
console.log(this.materialMap, this.materialId, 'materialMap', 'materialId', res);
this.material = res;
},

2
klp-ui/src/store/getters.js
View File

@@ -16,5 +16,7 @@ const getters = {
topbarRouters:state => state.permission.topbarRouters,
defaultRoutes:state => state.permission.defaultRoutes,
sidebarRouters:state => state.permission.sidebarRouters,
productList: state => state.category.productList,
rawMaterialList: state => state.category.rawMaterialList,
}
export default getters

8
klp-ui/src/store/modules/category.js
View File

@@ -58,9 +58,15 @@ const actions = {
}
};
const getters = {
productList: state => Object.values(state.productMap),
rawMaterialList: state => Object.values(state.rawMaterialMap)
}
export default {
namespaced: true,
state,
mutations,
actions
actions,
getters
};

254
klp-ui/src/views/wms/bom/components/BomItem.vue Normal file
View File

@@ -0,0 +1,254 @@
<template>
<div class="app-container">
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
>新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
>修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
>删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
>导出</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="bomItemList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="属性名称" align="center" prop="attrKey" />
<el-table-column label="属性值" align="center" prop="attrValue" />
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
>删除</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 添加或修改BOM 明细，存放属性–值对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="属性名称" prop="attrKey">
<el-input v-model="form.attrKey" placeholder="请输入属性名称" />
</el-form-item>
<el-form-item label="属性值" prop="attrValue">
<el-input v-model="form.attrValue" placeholder="请输入属性值" />
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" placeholder="请输入备注" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { listBomItem, getBomItem, delBomItem, addBomItem, updateBomItem } from "@/api/wms/bomItem";
export default {
name: "BomItem",
dicts: ['common_swicth'],
props: {
bomId: [String, Number],
},
data() {
return {
// 按钮loading
buttonLoading: false,
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// BOM 明细，存放属性–值表格数据
bomItemList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
bomId: this.bomId,
attrKey: undefined,
attrValue: undefined,
isEnabled: undefined,
},
// 表单参数
form: {
bomId: this.bomId,
},
};
},
created() {
this.getList();
},
methods: {
/** 查询BOM 明细，存放属性–值列表 */
getList() {
this.loading = true;
listBomItem(this.queryParams).then(response => {
this.bomItemList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
itemId: undefined,
bomId: this.bomId,
attrKey: undefined,
attrValue: undefined,
remark: undefined
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.itemId)
this.single = selection.length!==1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加BOM 明细，存放属性–值";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.loading = true;
this.reset();
const itemId = row.itemId || this.ids
getBomItem(itemId).then(response => {
this.loading = false;
this.form = response.data;
this.open = true;
this.title = "修改BOM 明细，存放属性–值";
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
this.buttonLoading = true;
if (this.form.itemId != null) {
updateBomItem(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
}).finally(() => {
this.buttonLoading = false;
});
} else {
addBomItem(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
}).finally(() => {
this.buttonLoading = false;
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const itemIds = row.itemId || this.ids;
this.$modal.confirm('是否确认删除BOM 明细，存放属性–值编号为"' + itemIds + '"的数据项？').then(() => {
this.loading = true;
return delBomItem(itemIds);
}).then(() => {
this.loading = false;
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {
}).finally(() => {
this.loading = false;
});
},
/** 导出按钮操作 */
handleExport() {
this.download('wms/bomItem/export', {
...this.queryParams
}, `bomItem_${new Date().getTime()}.xlsx`)
}
}
};
</script>

241
klp-ui/src/views/wms/bom/components/BomPanel.vue Normal file
View File

@@ -0,0 +1,241 @@
<template>
<div class="bom-container">
<!-- 当没有传入id时显示创建按钮 -->
<div v-if="!id" class="create-bom">
<el-button
type="primary"
:loading="createLoading"
:disabled="createLoading"
@click="handleCreate"
class="create-button"
>
<template v-if="!createLoading">
<i class="el-icon-plus"></i> 创建BOM
</template>
<template v-else>
创建中...
</template>
</el-button>
</div>
<!-- 当传入id时显示数据区域 -->
<div v-else class="bom-details">
<div v-if="loading" class="loading-indicator">
加载中...
<div class="spinner"></div>
</div>
<div v-if="error" class="error-message">
加载失败: {{ error }}
<button @click="fetchData" class="retry-button">重试</button>
</div>
<div v-if="data && !loading">
<el-form label-width="100px">
<el-form-item label="BOM名称">
<el-input v-model="info.bomName" @blur="handleUpdateBom"/>
</el-form-item>
<el-form-item label="BOM编码">
<el-input v-model="info.bomCode" @blur="handleUpdateBom"/>
</el-form-item>
</el-form>
<BomItem :bomId="id" />
</div>
</div>
</div>
</template>
<script>
import { addBom, updateBom, getBom } from '@/api/wms/bom';
import { listBomItem } from '@/api/wms/bomItem';
import { updateProduct } from '@/api/wms/product';
import { updateRawMaterial } from '@/api/wms/rawMaterial';
import BomItem from './BomItem.vue';
export default {
props: {
id: [String, Number], // 支持字符串或数字类型的ID
itemId: [String, Number],
type: String // 可选类型参数
},
components: {
BomItem
},
data() {
return {
loading: false,
error: null,
data: null,
info: {},
createLoading: false,
};
},
watch: {
id: {
immediate: true, // 组件创建时立即执行
handler(newVal) {
if (newVal) {
console.log('侦听到变化')
this.fetchBomDetails();
} else {
// 没有ID时重置数据
this.data = null;
this.error = null;
}
}
}
},
methods: {
async fetchBomDetails() {
try {
this.loading = true;
this.error = null;
// 实际项目中替换为真实API调用
const response = await listBomItem({
bomId: this.id
})
this.data = response.rows;
const response2 = await getBom(this.id)
this.info = response2.data;
} catch (err) {
this.error = err.message || '请求失败，请重试';
console.error('获取BOM详情失败:', err);
} finally {
this.loading = false;
}
},
async handleCreate() {
// 防止重复点击
if (this.createLoading) return;
try {
this.createLoading = true;
const bomResponse = await addBom({
bomName: (this.type == 'product' ? '产品BOM' : '原材料BOM') + new Date().getTime(),
bomCode: (this.type == 'product' ? 'P' : 'R') + new Date().getTime()
});
this.$message.success('创建BOM成功');
const bomData = bomResponse.data;
// 根据类型更新产品/原材料
if (this.type == 'product' && this.itemId) {
await updateProduct({
productId: this.itemId,
bomId: bomData.bomId
});
} else if (this.type == 'raw_material' && this.itemId) {
await updateRawMaterial({
rawMaterialId: this.itemId,
bomId: bomData.bomId
});
}
// 触发事件
this.$emit('addBom', bomData);
} catch (error) {
console.error('创建失败:', error);
this.$message.error(`创建失败: ${error.message || '未知错误'}`);
} finally {
this.createLoading = false;
}
},
handleUpdateBom() {
this.$message.warning('正在更新BOM...');
updateBom({
bomId: this.id,
bomName: this.info.bomName,
bomCode: this.info.bomCode
}).then(_ => {
this.$message.success('更新BOM成功');
})
},
fetchData() {
// 重试获取数据
if (this.id) this.fetchBomDetails();
}
}
};
</script>
<style scoped>
.create-bom {
text-align: center;
padding: 40px 0;
}
.create-button {
background-color: #4CAF50;
color: white;
border: none;
padding: 12px 24px;
font-size: 16px;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
}
.create-button:hover {
background-color: #388E3C;
}
.loading-indicator {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 20px;
color: #666;
}
.spinner {
width: 20px;
height: 20px;
border: 3px solid rgba(0,0,0,0.1);
border-radius: 50%;
border-top-color: #3498db;
animation: spin 1s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.error-message {
padding: 20px;
background-color: #ffebee;
color: #d32f2f;
border-radius: 4px;
display: flex;
flex-direction: column;
gap: 12px;
}
.retry-button {
padding: 8px 16px;
background-color: #f44336;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
width: 120px;
}
.bom-info {
margin-top: 20px;
padding: 15px;
background-color: #f9f9f9;
border-radius: 4px;
border-left: 4px solid #2196F3;
}
.bom-info p {
margin: 10px 0;
}
</style>

0
klp-ui/src/views/wms/bom/index.vue Normal file
View File

19
klp-ui/src/views/wms/order/panels/detail.vue
View File

@@ -58,13 +58,14 @@
</el-col>
</el-row>
<el-table v-loading="loading" :data="orderDetailList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" :selectable="canEdit" />
<!-- <el-table-column label="明细ID" align="center" prop="detailId" v-if="false"/>
<el-table-column label="订单ID" align="center" prop="orderId" /> -->
<el-table v-loading="loading" :data="orderDetailList">
<el-table-column label="产品" align="center">
<template slot-scope="scope">
{{ scope.row.productName }}<span v-if="scope.row.productCode">({{ scope.row.productCode }})</span>
<ProductInfo :product-id="scope.row.productId">
<template #default="{ product }">
{{ product.productName }}<span v-if="product.productCode">({{ product.productCode }})</span>
</template>
</ProductInfo>
</template>
</el-table-column>
<el-table-column label="产品数量" align="center" prop="quantity" />
@@ -130,6 +131,7 @@ import { listOrderDetail, getOrderDetail, delOrderDetail, addOrderDetail, update
import { getOrder } from "@/api/wms/order";
import ProductSelect from '@/components/KLPService/ProductSelect';
import { EOrderStatus } from "@/utils/enums";
import { ProductInfo } from '@/components/KLPService';
export default {
name: "OrderDetailPanel",
@@ -140,6 +142,10 @@ export default {
required: true
}
},
components: {
ProductSelect,
ProductInfo
},
data() {
return {
buttonLoading: false,
@@ -323,9 +329,6 @@ export default {
}, `orderDetail_${new Date().getTime()}.xlsx`)
}
},
components: {
ProductSelect
}
};
</script>

52
klp-ui/src/views/wms/product/index.vue
View File

@@ -135,15 +135,19 @@
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
>删除</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-data-analysis"
@click="handleBom(scope.row)"
>BOM</el-button>
</template>
</el-table-column>
</el-table>
@@ -243,6 +247,10 @@
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
<el-dialog title="BOM" @close="bomDialogVisible = false" :visible.sync="bomDialogVisible" width="900px" append-to-body>
<BomPanel :id="bomId" type="product" @addBom="handleAddBom" :itemId="itemId" />
</el-dialog>
</div>
</template>
@@ -251,13 +259,15 @@ import { listProduct, getProduct, delProduct, addProduct, updateProduct } from "
import CategorySelect from '@/components/KLPService/CategorySelect';
import CategoryRenderer from '@/components/KLPService/Renderer/CategoryRenderer.vue';
import UserSelect from '@/components/KLPService/UserSelect';
import BomPanel from '../bom/components/BomPanel.vue';
export default {
name: "Product",
components: {
CategorySelect,
CategoryRenderer,
UserSelect
UserSelect,
BomPanel
},
dicts: ['common_swicth'],
data() {
@@ -311,28 +321,10 @@ export default {
owner: [
{ required: true, message: "负责人不能为空", trigger: "blur" }
],
// baseMaterialId: [
// { required: true, message: "基础材质分类ID不能为空", trigger: "blur" }
// ],
// surfaceTreatmentId: [
// { required: true, message: "表面处理分类ID不能为空", trigger: "blur" }
// ],
// customerReqId: [
// { required: true, message: "客户需求分类ID不能为空", trigger: "blur" }
// ],
// packagingId: [
// { required: true, message: "包装分类ID不能为空", trigger: "blur" }
// ],
// thickness: [
// { required: true, message: "厚度不能为空", trigger: "blur" }
// ],
// width: [
// { required: true, message: "宽度不能为空", trigger: "blur" }
// ],
// innerDiameter: [
// { required: true, message: "内径不能为空", trigger: "blur" }
// ],
}
},
bomDialogVisible: false,
bomId: undefined,
itemId: undefined,
};
},
created() {
@@ -348,6 +340,11 @@ export default {
this.loading = false;
});
},
handleAddBom(bom) {
console.log('回调触发', bom)
this.bomId = bom.bomId;
this.getList();
},
// 取消按钮
cancel() {
this.open = false;
@@ -387,6 +384,11 @@ export default {
this.resetForm("queryForm");
this.handleQuery();
},
handleBom(row) {
this.bomDialogVisible = true;
this.bomId = row.bomId;
this.itemId = row.productId;
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.productId)

10
klp-ui/src/views/wms/purchasePlan/panels/detail.vue
View File

@@ -58,7 +58,11 @@
<el-table-column label="采购计划ID" align="center" prop="planId" /> -->
<el-table-column label="原材料" align="center">
<template slot-scope="scope">
{{ scope.row.rawMaterialName }}<span v-if="scope.row.rawMaterialCode">({{ scope.row.rawMaterialCode }})</span>
<RawMaterialInfo :material-id="scope.row.rawMaterialId">
<template #default="{ material }">
{{ material.rawMaterialName }}<span v-if="material.rawMaterialCode">({{ material.rawMaterialCode }})</span>
</template>
</RawMaterialInfo>
</template>
</el-table-column>
<el-table-column label="负责人" align="center" prop="owner" />
@@ -165,13 +169,15 @@ import { EPurchaseDetailStatus } from "@/utils/enums";
import StockInDialog from "./stockin.vue";
import RawMaterialSelect from '@/components/KLPService/RawMaterialSelect';
import UserSelect from '@/components/KLPService/UserSelect'
import { RawMaterialInfo } from '@/components/KLPService';
export default {
name: "PurchasePlanDetail",
components: {
StockInDialog,
RawMaterialSelect,
UserSelect
UserSelect,
RawMaterialInfo
},
props: {
planId: {

65
klp-ui/src/views/wms/rawMaterial/index.vue
View File

@@ -136,7 +136,8 @@
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-info" @click="showParamDetail(scope.row)">参数详情</el-button>
<!-- <el-button size="mini" type="text" icon="el-icon-info" @click="showParamDetail(scope.row)">参数详情</el-button> -->
<el-button size="mini" type="text" icon="el-icon-plus" @click="handleBom(scope.row)">BOM</el-button>
<el-button
size="mini"
type="text"
@@ -279,6 +280,10 @@
<!-- 其它参数可继续追加 -->
</el-descriptions>
</el-dialog>
<el-dialog title="BOM" @close="bomDialogVisible = false" :visible.sync="bomDialogVisible" width="900px" append-to-body>
<BomPanel :id="bomId" type="raw_material" @addBom="handleAddBom" :itemId="itemId" />
</el-dialog>
</div>
</template>
@@ -286,12 +291,14 @@
import { listRawMaterial, getRawMaterial, delRawMaterial, addRawMaterial, updateRawMaterial } from "@/api/wms/rawMaterial";
import CategorySelect from "@/components/KLPService/CategorySelect/index.vue";
import CategoryRenderer from '@/components/KLPService/Renderer/CategoryRenderer.vue';
import BomPanel from '@/views/wms/bom/components/BomPanel.vue';
export default {
name: "RawMaterial",
components: {
CategorySelect,
CategoryRenderer
CategoryRenderer,
BomPanel
},
dicts: ['common_swicth'],
data() {
@@ -354,54 +361,15 @@ export default {
rawMaterialName: [
{ required: true, message: "原材料名称不能为空", trigger: "blur" }
],
steelGrade: [
{ required: true, message: "钢种/牌号不能为空", trigger: "blur" }
],
targetColdGrade: [
{ required: true, message: "目标冷轧牌号不能为空", trigger: "blur" }
],
baseMaterialId: [
{ required: true, message: "基础材质分类不能为空", trigger: "blur" }
],
surfaceTreatmentId: [
{ required: true, message: "表面处理分类不能为空", trigger: "blur" }
],
thickness: [
{ required: true, message: "厚度不能为空", trigger: "blur" }
],
thicknessDeviation: [
{ required: true, message: "厚度偏差不能为空", trigger: "blur" }
],
width: [
{ required: true, message: "宽度不能为空", trigger: "blur" }
],
targetColdWidth: [
{ required: true, message: "目标冷轧宽度不能为空", trigger: "blur" }
],
targetColdThickness: [
{ required: true, message: "目标冷轧厚度不能为空", trigger: "blur" }
],
crown: [
{ required: true, message: "凸度不能为空", trigger: "blur" }
],
coilWeight: [
{ required: true, message: "卷重不能为空", trigger: "blur" }
],
surfaceQuality: [
{ required: true, message: "表面质量不能为空", trigger: "blur" }
],
inspectionResult: [
{ required: true, message: "检测结论不能为空", trigger: "blur" }
],
isEnabled: [
{ required: true, message: "是否启用不能为空", trigger: "blur" }
],
unit: [
{ required: true, message: "计量单位不能为空", trigger: "blur" }
],
},
paramDialogVisible: false,
paramRow: null,
bomDialogVisible: false,
bomId: undefined,
itemId: undefined,
};
},
created() {
@@ -480,6 +448,15 @@ export default {
this.open = true;
this.title = "添加原材料";
},
handleBom(row) {
this.bomDialogVisible = true;
this.bomId = row.bomId;
this.itemId = row.rawMaterialId;
},
handleAddBom(bom) {
this.bomId = bom.bomId;
this.getList();
},
/** 修改按钮操作 */
handleUpdate(row) {
this.loading = true;

350
klp-ui/src/views/wms/stock/box.vue
View File

@@ -1,18 +1,10 @@
<template>
<div>
<div class="chart-header">
<el-radio-group v-model="groupMode" @change="updateChart">
<el-radio-button label="warehouse">按仓库汇总</el-radio-button>
<el-radio-button label="item">按物品汇总</el-radio-button>
</el-radio-group>
</div>
<div ref="chartContainer" style="width: 100%; height: 600px;"></div>
<div ref="chartContainer" style="width: 100%; height: calc(100vh - 100px);"></div>
</div>
</template>
<script>
import * as echarts from 'echarts';
import { listStock } from "@/api/wms/stock";
import { listWarehouse } from "@/api/wms/warehouse";
@@ -24,7 +16,6 @@ export default {
chart: null,
stockData: [],
warehouseData: [],
groupMode: 'warehouse', // 默认按仓库汇总
warehouseTreeData: []
};
},
@@ -45,107 +36,85 @@ export default {
},
async loadData() {
try {
// 并行加载仓库结构和库存数据
// 显示加载动画
this.chart.showLoading();
const [warehouseRes, stockRes] = await Promise.all([
listWarehouse(),
listStock({ pageNum: 1, pageSize: 9999 })
]);
// 隐藏加载动画
this.chart.hideLoading();
// 处理树结构
this.warehouseTreeData = this.handleTree(warehouseRes.data, 'warehouseId', 'parentId');
this.stockData = stockRes.rows;
this.updateChart();
// 创建层级数据
const treeData = this.createTreeData();
// 更新图表
this.updateChart(treeData);
} catch (error) {
console.error('加载数据失败:', error);
this.chart.hideLoading();
this.$message.error('库存数据加载失败');
}
},
// 处理树结构
handleTree(data, id, parentId) {
const cloneData = JSON.parse(JSON.stringify(data));
return cloneData.filter(father => {
const branchArr = cloneData.filter(child => father[id] === child[parentId]);
if (branchArr.length > 0) father.children = branchArr;
return father[parentId] === 0 || father[parentId] === null;
});
},
updateChart() {
let treeData;
if (this.groupMode === 'warehouse') {
treeData = this.getWarehouseTreeData();
} else {
treeData = this.getItemTreeData();
if (!Array.isArray(data)) {
console.error('handleTree: data is not array', data);
return [];
}
const option = {
tooltip: {
formatter: (params) => {
const data = params.data;
if (data.stockInfo) {
return this.formatTooltip(data);
}
return `${params.name}<br/>总数量: ${params.value || 0}`;
}
},
series: [{
type: 'treemap',
data: treeData.children,
label: {
show: true,
formatter: (params) => {
const data = params.data;
if (data.stockInfo) {
return `${params.name}\n${params.value}${data.stockInfo.unit || ''}`;
}
return `${params.name}\n${params.value || ''}`;
}
},
breadcrumb: {
show: true
},
roam: false,
levels: [
{
itemStyle: {
borderColor: '#555',
borderWidth: 4,
gapWidth: 4
}
},
{
itemStyle: {
borderColor: '#777',
borderWidth: 2,
gapWidth: 2
}
}
]
}]
};
this.chart && this.chart.setOption(option);
const map = {};
const tree = [];
// 创建节点映射
data.forEach(item => {
map[item[id]] = { ...item, children: [] };
});
// 构建树结构
data.forEach(item => {
const node = map[item[id]];
if (!item[parentId] || item[parentId] === 0) {
// 顶级节点（parentId为0或null）
tree.push(node);
} else if (map[item[parentId]]) {
map[item[parentId]].children.push(node);
}
});
return tree;
},
getWarehouseTreeData() {
// 创建树形数据
createTreeData() {
// 递归构建仓库树
const buildWarehouseTree = (warehouseNode) => {
const stocks = this.stockData.filter(stock => stock.warehouseId === warehouseNode.warehouseId);
const children = [];
let totalQuantity = 0;
// 处理当前仓库的库存
// 添加库存物品
stocks.forEach(stock => {
const quantity = Number(stock.quantity) || 0;
totalQuantity += quantity;
children.push({
name: this.getItemName(stock),
name: stock.itemName,
value: quantity,
stockInfo: {
itemType: stock.itemType,
itemCode: stock.itemCode,
itemInfo: {
type: stock.itemType,
code: stock.itemCode,
unit: stock.unit,
batchNo: stock.batchNo
}
});
});
// 处理子仓库
// 递归处理子仓库
if (warehouseNode.children && warehouseNode.children.length > 0) {
warehouseNode.children.forEach(child => {
const childNode = buildWarehouseTree(child);
@@ -155,92 +124,162 @@ export default {
}
});
}
return {
name: warehouseNode.warehouseName,
value: totalQuantity,
warehouseInfo: {
code: warehouseNode.warehouseCode
},
children: children.length > 0 ? children : undefined
};
};
return {
name: '库存总览',
children: this.warehouseTreeData.map(warehouse => buildWarehouseTree(warehouse))
};
// 直接返回顶级仓库节点
return this.warehouseTreeData.map(warehouse => buildWarehouseTree(warehouse));
},
getItemTreeData() {
// 按物品类型和物品分组
const itemGroups = {};
this.stockData.forEach(stock => {
const itemType = this.getItemTypeName(stock.itemType);
if (!itemGroups[itemType]) {
itemGroups[itemType] = {};
}
const itemKey = stock.itemId + '_' + stock.itemName;
if (!itemGroups[itemType][itemKey]) {
itemGroups[itemType][itemKey] = {
name: stock.itemName,
value: 0,
children: []
};
}
const quantity = Number(stock.quantity) || 0;
itemGroups[itemType][itemKey].value += quantity;
itemGroups[itemType][itemKey].children.push({
name: this.getWarehouseName(stock.warehouseId),
value: quantity,
stockInfo: {
itemType: stock.itemType,
itemCode: stock.itemCode,
unit: stock.unit,
batchNo: stock.batchNo
// 获取层级样式配置（参考ECharts官网示例）
getLevelOption() {
return [
// 顶级仓库层级样式（parentId为0或null）
{
itemStyle: {
borderColor: '#555',
borderWidth: 4,
gapWidth: 3
},
emphasis: {
itemStyle: {
borderColor: '#333'
}
},
upperLabel: {
show: true,
height: 35,
fontSize: 16,
fontWeight: 'bold',
color: '#333'
}
});
});
return {
name: '库存总览',
children: Object.entries(itemGroups).map(([type, items]) => ({
name: type,
children: Object.values(items)
}))
},
// 子仓库层级样式
{
itemStyle: {
borderColor: '#777',
borderWidth: 3,
gapWidth: 2
},
emphasis: {
itemStyle: {
borderColor: '#555'
}
},
upperLabel: {
show: true,
height: 28,
fontSize: 14
}
},
// 物料层级样式
{
itemStyle: {
borderColor: '#999',
borderWidth: 2,
gapWidth: 1
},
emphasis: {
itemStyle: {
borderColor: '#777'
}
}
}
];
},
// 更新图表
updateChart(treeData) {
const option = {
title: {
left: 'center',
textStyle: {
fontSize: 18
}
},
tooltip: {
formatter: (info) => {
const value = info.value || 0;
const treePath = info.treePathInfo || [];
let path = '';
// 构建完整路径（从第一个节点开始）
for (let i = 0; i < treePath.length; i++) {
if (treePath[i].name) {
path += treePath[i].name;
if (i < treePath.length - 1) path += '/';
}
}
const content = [];
content.push(`<div class="tooltip-title">${echarts.format.encodeHTML(path)}</div>`);
content.push(`库存数量: ${echarts.format.addCommas(value)} ${this.getItemUnit(info.data)}`);
// 添加物品详细信息
if (info.data.itemInfo) {
const item = info.data.itemInfo;
content.push(`物料类型: ${this.getItemTypeName(item.type)}`);
content.push(`物料编码: ${item.code || '无'}`);
if (item.batchNo) content.push(`批次号: ${item.batchNo}`);
}
return content.join('<br>');
}
},
series: [{
name: '库存',
type: 'treemap',
visibleMin: 300, // 只有当区块面积大于300时才会显示标签
leafDepth: 2, // 只在叶子节点显示标签
label: {
show: true,
fontSize: 12,
formatter: (params) => {
// 对于物料只显示名称和数量
if (params.data.itemInfo) {
const unit = params.data.itemInfo.unit || '';
return `${params.name}\n${params.value}${unit}`;
}
// 对于仓库只显示名称
return params.name;
},
ellipsis: true // 超出时显示省略号
},
upperLabel: {
show: true,
fontWeight: 'bold'
},
itemStyle: {
borderColor: '#fff',
borderWidth: 1
},
levels: this.getLevelOption(),
data: treeData // 直接使用顶级仓库节点数组
}]
};
this.chart.setOption(option, true);
},
formatTooltip(data) {
const stockInfo = data.stockInfo;
return `${data.name}<br/>
数量: ${data.value} ${stockInfo.unit || ''}<br/>
类型: ${this.getItemTypeName(stockInfo.itemType)}<br/>
编号: ${stockInfo.itemCode || '无'}<br/>
批次: ${stockInfo.batchNo || '无'}`;
// 获取物料单位
getItemUnit(data) {
return data.itemInfo?.unit || '';
},
// 获取物料类型名称
getItemTypeName(type) {
const typeMap = {
raw_material: '原材料',
product: '产品',
semi_product: '半成品'
};
return typeMap[type] || type;
},
getItemName(stock) {
return stock.itemName || `${this.getItemTypeName(stock.itemType)}-${stock.itemCode}`;
},
getWarehouseName(warehouseId) {
const findWarehouse = (warehouses) => {
for (const warehouse of warehouses) {
if (warehouse.warehouseId === warehouseId) {
return warehouse.warehouseName;
}
if (warehouse.children) {
const name = findWarehouse(warehouse.children);
if (name) return name;
}
}
return null;
};
return findWarehouse(this.warehouseTreeData) || '未知仓库';
return typeMap[type] || type || '未分类';
},
// 刷新数据
refresh() {
this.loadData();
}
@@ -249,11 +288,16 @@ export default {
window.removeEventListener('resize', this.handleResize);
if (this.chart) {
this.chart.dispose();
this.chart = null;
}
}
};
</script>
<style scoped>
</style>
/* 图表容器样式 */
.treemap-container {
width: 100%;
height: 100%;
min-height: 600px;
}
</style>

9
klp-ui/src/views/wms/stock/index.vue
View File

@@ -51,9 +51,9 @@
<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
v-hasPermi="['wms:stock:export']">导出</el-button>
</el-col>
<el-col :span="1.5">
<!-- <el-col :span="1.5">
<el-button type="primary" plain icon="el-icon-data-analysis" size="mini" @click="showStockBox">库存分析</el-button>
</el-col>
</el-col> -->
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
@@ -84,11 +84,6 @@
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
@pagination="getList" />
<!-- 库存分析对话框 -->
<el-dialog title="库存统计" :visible.sync="stockBoxVisible" width="80%" append-to-body destroy-on-close>
<stock-box ref="stockBoxChart" />
</el-dialog>
<!-- 添加或修改库存对话框（保持不变） -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">

2
klp-ui/vue.config.js
View File

@@ -7,7 +7,7 @@ function resolve(dir) {
const CompressionPlugin = require('compression-webpack-plugin')
const name = process.env.VUE_APP_TITLE || 'RuoYi-Flowable-Plus后台管理系统' // 网页标题
const name = process.env.VUE_APP_TITLE || '科伦普WMS系统' // 网页标题
const port = process.env.port || process.env.npm_config_port || 80 // 端口