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

feat: 新增带默认BOM的产品和原材料接口并优化界面

Browse Source 
refactor(HomeModules): 重构统计面板组件并添加骨架屏
feat(coil): 添加物料类型和更新时间查询条件
style(ProductInfo/RawMaterialInfo): 阻止事件冒泡
chore: 添加钢卷图标资源
This commit is contained in:
砂糖
2025-10-31 11:52:45 +08:00
parent 93cd0e5238
commit cd040e57ea
16 changed files with 449 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
klp-ui/src/views/dashboard/PanelGroup.vue
View File

@@ -7,7 +7,7 @@
</div>
<div class="card-panel-description">
<div class="card-panel-text">
访客
物料统计
</div>
<count-to :start-val="0" :end-val="102400" :duration="2600" class="card-panel-num" />
</div>

105
klp-ui/src/views/index.vue
View File

@@ -1,39 +1,100 @@
<template>
<div class="dashboard-root">
<!-- 全部应用 -->
<el-row>
<AllApplications />
<div class="dashboard-editor-container">
<statistic-group />
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
<line-chart :chart-data="lineChartData" />
</el-row>
<el-row :gutter="20" style="margin-top: 20px;">
<el-col :span="12">
<el-card style="height: 500px;">
<FlowTable />
</el-card>
<el-row :gutter="32">
<el-col :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper">
<raddar-chart />
</div>
</el-col>
<el-col :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper">
<pie-chart />
</div>
</el-col>
<el-col :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper">
<bar-chart />
</div>
</el-col>
</el-row>
</div>
</template>
<script>
import AllApplications from '@/views/components/AllApplications.vue';
import OrderDashboard from '@/views/components/OrderDashboard.vue';
import FlowTable from '@/views/components/FlowTable.vue';
import Greeting from '@/views/components/Greeting.vue';
// import PanelGroup from './dashboard/PanelGroup'
import LineChart from './dashboard/LineChart'
import RaddarChart from './dashboard/RaddarChart'
import PieChart from './dashboard/PieChart'
import BarChart from './dashboard/BarChart'
import StatisticGroup from '@/components/HomeModules/StatisticGroup.vue'
const lineChartData = {
newVisitis: {
expectedData: [100, 120, 161, 134, 105, 160, 165],
actualData: [120, 82, 91, 154, 162, 140, 145]
},
messages: {
expectedData: [200, 192, 120, 144, 160, 130, 140],
actualData: [180, 160, 151, 106, 145, 150, 130]
},
purchases: {
expectedData: [80, 100, 121, 104, 105, 90, 100],
actualData: [120, 90, 100, 138, 142, 130, 130]
},
shoppings: {
expectedData: [130, 140, 141, 142, 145, 150, 160],
actualData: [120, 82, 91, 154, 162, 140, 130]
}
}
export default {
name: 'Index',
components: {
AllApplications,
OrderDashboard,
FlowTable,
Greeting
// PanelGroup,
StatisticGroup,
LineChart,
RaddarChart,
PieChart,
BarChart
},
data() {
return {
lineChartData: lineChartData.newVisitis
}
},
methods: {
handleSetLineChartData(type) {
this.lineChartData = lineChartData[type]
}
}
};
}
</script>
<style scoped>
.dashboard-root {
min-height: 100vh;
<style lang="scss" scoped>
.dashboard-editor-container {
padding: 32px;
background-color: rgb(240, 242, 245);
position: relative;
.chart-wrapper {
background: #fff;
padding: 16px 16px 0;
margin-bottom: 32px;
}
}
</style>
@media (max-width:1024px) {
.chart-wrapper {
padding: 8px;
}
}
</style>

5
klp-ui/src/views/wms/coil/box.vue
View File

@@ -100,12 +100,12 @@
<el-table-column prop="warehouseName" label="仓库名称" align="center" min-width="150"></el-table-column>
<el-table-column prop="currentCoilNo" label="当前卷号" align="center" min-width="120"></el-table-column>
<el-table-column prop="enterCoilNo" label="入场卷号" align="center" min-width="180"></el-table-column>
<el-table-column label="库区" align="center" prop="itemType">
<el-table-column label="物料类型" align="center" prop="itemType">
<template slot-scope="scope">
{{ scope.row.itemType == 'product' ? '成品' : '原料' }}
</template>
</el-table-column>
<el-table-column label="物料信息" align="center" min-width="250">
<el-table-column label="产品类型" align="center" min-width="250">
<template slot-scope="scope">
<ProductInfo v-if="scope.row.itemType === 'product'" :productId="scope.row.itemId">
<template #default="{ product }">
@@ -119,6 +119,7 @@
</RawMaterialInfo>
</template>
</el-table-column>
<el-table-column label="更新时间" align="center" prop="updateTime" />
<el-table-column prop="grossWeight" label="毛重(kg)" align="center" min-width="100"></el-table-column>
<el-table-column prop="netWeight" label="净重(kg)" align="center" min-width="100"></el-table-column>
</el-table>

3
klp-ui/src/views/wms/coil/history.vue
View File

@@ -13,7 +13,8 @@ export default {
return {
qrcode: true,
querys: {
dataType: 0
dataType: 0,
itemType: 'raw_material'
},
labelType: '2'
}

3
klp-ui/src/views/wms/coil/index.vue
View File

@@ -13,7 +13,8 @@ export default {
return {
qrcode: true,
querys: {
dataType: 1
dataType: 1,
itemType: 'raw_material'
},
labelType: '2'
}

36
klp-ui/src/views/wms/coil/panels/base.vue
View File

@@ -19,8 +19,9 @@
<el-input v-model="queryParams.supplierCoilNo" placeholder="请输入厂家原料卷号" clearable
@keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item label="班组" prop="team">
<el-input v-model="queryParams.team" placeholder="请输入班组" clearable @keyup.enter.native="handleQuery" />
<el-form-item label="更新时间" prop="updateTime">
<el-date-picker v-model="queryParams.updateTime" type="daterange" value-format="yyyy-MM-dd HH:mm:ss"
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
@@ -51,13 +52,13 @@
<el-table-column label="入场钢卷号" align="center" prop="enterCoilNo" />
<el-table-column label="当前钢卷号" align="center" prop="currentCoilNo" />
<el-table-column label="厂家原料卷号" align="center" prop="supplierCoilNo" />
<el-table-column label="库区" align="center" prop="itemType">
<el-table-column label="仓库" align="center" prop="warehouseName" />
<el-table-column label="物料类型" align="center" prop="itemType">
<template slot-scope="scope">
{{ scope.row.itemType == 'product' ? '成品' : '原料' }}
</template>
</el-table-column>
<el-table-column label="仓库" align="center" prop="warehouseName" />
<el-table-column label="物品" align="center" prop="itemName">
<el-table-column label="产品类型" align="center" prop="itemName">
<template slot-scope="scope">
<ProductInfo v-if="scope.row.itemType == 'product'" :productId="scope.row.itemId">
<template slot-scope="{ product }">
@@ -76,6 +77,7 @@
{{ scope.row.dataType == 0 ? '历史数据' : '当前数据' }}
</template>
</el-table-column>
<el-table-column label="更新时间" align="center" prop="updateTime" />
<el-table-column label="二维码" v-if="qrcode">
<template slot-scope="scope">
<QRCode v-if="scope.row.dataType == 1" :content="scope.row.qrcodeRecordId" :size="50" />
@@ -122,17 +124,18 @@
<el-form-item label="班组" prop="team">
<el-input v-model="form.team" placeholder="请输入班组" />
</el-form-item>
<el-form-item label="库区" prop="itemType">
<el-select v-model="form.itemType" placeholder="请选择库区">
<el-form-item label="物料类型" prop="itemType">
<el-select v-model="form.itemType" placeholder="请选择库区" @change="form.itemId = undefined">
<el-option label="成品" value="product" />
<el-option label="原料" value="raw_material" />
</el-select>
</el-form-item>
<el-form-item label="物品ID" prop="itemId">
<el-form-item label="产品类型" prop="itemId">
<product-select v-if="form.itemType == 'product'" v-model="form.itemId" placeholder="请选择成品ID"
style="width: 100%;" clearable />
<raw-material-select v-else-if="form.itemType == 'raw_material'" v-model="form.itemId" placeholder="请选择原料ID"
style="width: 100%;" clearable />
<div v-else>请先选择产品类型</div>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" placeholder="请输入备注" />
@@ -249,6 +252,7 @@ export default {
parentCoilNos: undefined,
itemId: undefined,
status: undefined,
updateTime: undefined,
},
// 表单参数
form: {},
@@ -282,7 +286,12 @@ export default {
/** 查询钢卷物料列表 */
getList() {
this.loading = true;
listMaterialCoil(this.queryParams).then(response => {
const { updateTime ,...query } = {
...this.queryParams,
startTime: this.queryParams.updateTime?.[0],
endTime: this.queryParams.updateTime?.[1],
}
listMaterialCoil(query).then(response => {
this.materialCoilList = response.rows;
this.total = response.total;
this.loading = false;
@@ -305,9 +314,16 @@ export default {
/** 预览标签 */
handlePreviewLabel(row) {
this.labelRender.visible = true;
const item = findItemWithBom(row.itemType, row.itemId)
// 寻找boms中bom键名为'材质'的
const material = item?.boms?.find(bom => bom.attrKey === '材质')
// 查找boms中bom键名为'规格'的
const specification = item?.boms?.find(bom => bom.attrKey === '规格')
this.labelRender.data = {
...row,
itemName: findItemWithBom(row.itemType, row.itemId)?.itemName || '',
itemName: item?.itemName || '',
material: material?.attrValue || '',
specification: specification?.attrValue || '',
};
},
/** 下载二维码 */

3
klp-ui/src/views/wms/coil/product.vue
View File

@@ -13,7 +13,8 @@ export default {
return {
qrcode: false,
querys: {
itemType: 'product'
itemType: 'product',
// dataType: 0
},
labelType: '3'
}

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

@@ -144,12 +144,12 @@
icon="el-icon-delete"
@click="handleDelete(scope.row)"
>删除</el-button>
<el-button
<!-- <el-button
size="mini"
type="text"
icon="el-icon-document"
@click="goLedger(scope.row)"
>台账</el-button>
>台账</el-button> -->
<el-button
size="mini"
type="text"
@@ -172,28 +172,28 @@
<el-dialog :title="title" :visible.sync="open" width="400px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<!-- <el-divider>基础信息</el-divider> -->
<el-row :gutter="20">
<el-col :span="12">
<!-- <el-row :gutter="20">
<el-col :span="12"> -->
<el-form-item label="产品编号" prop="productCode">
<el-input v-model="form.productCode" placeholder="请输入产品编号" />
</el-form-item>
</el-col>
<el-col :span="12">
<!-- </el-col>
<el-col :span="12"> -->
<el-form-item label="产品名称" prop="productName">
<el-input v-model="form.productName" placeholder="请输入产品名称" />
</el-form-item>
</el-col>
<el-col :span="12">
<!-- </el-col>
<el-col :span="12"> -->
<el-form-item label="负责人" prop="owner">
<el-input v-model="form.owner" :multiple="false" placeholder="请填写负责人" />
</el-form-item>
</el-col>
<el-col :span="12">
<!-- </el-col>
<el-col :span="12"> -->
<el-form-item label="计量单位" prop="unit">
<el-input v-model="form.unit" placeholder="请输入计量单位" />
</el-form-item>
</el-col>
</el-row>
<!-- </el-col>
</el-row> -->
<!-- <el-divider>分类信息</el-divider>
<el-row :gutter="20">
@@ -263,7 +263,7 @@
</template>
<script>
import { listProduct, getProduct, delProduct, addProduct, updateProduct } from "@/api/wms/product";
import { listProduct, getProduct, delProduct, addProduct, updateProduct, addProductWithBom } from "@/api/wms/product";
import CategorySelect from '@/components/KLPService/CategorySelect';
import CategoryRenderer from '@/components/KLPService/Renderer/CategoryRenderer.vue';
import UserSelect from '@/components/KLPService/UserSelect';
@@ -448,7 +448,7 @@ export default {
this.buttonLoading = false;
});
} else {
addProduct(this.form).then(response => {
addProductWithBom(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();

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

@@ -153,12 +153,12 @@
icon="el-icon-delete"
@click="handleDelete(scope.row)"
>删除</el-button>
<el-button
<!-- <el-button
size="mini"
type="text"
icon="el-icon-document"
@click="goLedger(scope.row)"
>台账</el-button>
>台账</el-button> -->
</template>
</el-table-column>
</KLPTable>
@@ -297,7 +297,7 @@
</template>
<script>
import { listRawMaterial, getRawMaterial, delRawMaterial, addRawMaterial, updateRawMaterial } from "@/api/wms/rawMaterial";
import { listRawMaterial, getRawMaterial, delRawMaterial, addRawMaterial, updateRawMaterial, addRawMaterialWithBom } 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';
@@ -504,7 +504,7 @@ export default {
this.buttonLoading = false;
});
} else {
addRawMaterial(this.form).then(response => {
addRawMaterialWithBom(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();