feat: 新增物料管理看板功能及多项优化

新增物料管理看板功能,包含统计卡片和图表展示
优化物料选择器组件,支持分页和搜索功能
重构物料详情展示组件,支持动态加载数据
添加多个ECharts图表组件用于数据可视化
完善出入库和采购单相关功能,增加在途数量显示
修复若干界面显示问题和交互逻辑
This commit is contained in:
砂糖
2026-01-31 14:21:49 +08:00
parent 48e75676c5
commit 42f6f83c3a
17 changed files with 1278 additions and 115 deletions

View File

@@ -1,29 +1,14 @@
<template>
<div class="app-container">
<div class="app-container" ref="appContainer">
<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="产品名称" prop="productName">
<el-input
v-model="queryParams.productName"
placeholder="请输入产品名称"
clearable
@keyup.enter="handleQuery"
/>
<el-input v-model="queryParams.productName" placeholder="请输入产品名称" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="产品规格" prop="spec">
<el-input
v-model="queryParams.spec"
placeholder="请输入产品规格"
clearable
@keyup.enter="handleQuery"
/>
<el-input v-model="queryParams.spec" placeholder="请输入产品规格" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="产品型号" prop="model">
<el-input
v-model="queryParams.model"
placeholder="请输入产品型号"
clearable
@keyup.enter="handleQuery"
/>
<el-input v-model="queryParams.model" placeholder="请输入产品型号" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item>
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
@@ -33,66 +18,40 @@
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="Plus"
@click="handleAdd"
>新增</el-button>
<el-button type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="Edit"
:disabled="single"
@click="handleUpdate"
>修改</el-button>
<el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate">修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="Delete"
:disabled="multiple"
@click="handleDelete"
>删除</el-button>
<el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete">删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="Download"
@click="handleExport"
>导出</el-button>
<el-button type="warning" plain icon="Download" @click="handleExport">导出</el-button>
</el-col>
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="productList" @selection-change="handleSelectionChange">
<el-table v-loading="loading" :data="productList" @selection-change="handleSelectionChange"
@row-click="handleRowClick">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="产品ID 主键" align="center" prop="productId" v-if="false"/>
<el-table-column label="产品ID 主键" align="center" prop="productId" v-if="false" />
<el-table-column label="产品名称" align="center" prop="productName" />
<el-table-column label="产品规格" align="center" prop="spec" />
<el-table-column label="产品型号" align="center" prop="model" />
<el-table-column label="产品单价" align="center" prop="unitPrice" />
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template #default="scope">
<el-button link type="primary" icon="Plus" @click="handleBom(scope.row)">配方</el-button>
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)">修改</el-button>
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
</template>
<template #default="scope">
<el-button link type="primary" icon="Plus" @click="handleBom(scope.row)">配方</el-button>
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)">修改</el-button>
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize" @pagination="getList" />
<!-- 添加或修改产品基础信息对话框 -->
<el-dialog :title="title" v-model="open" width="500px" append-to-body>
@@ -121,15 +80,35 @@
</template>
</el-dialog>
<el-dialog title="产品配方" v-model="bomOpen" width="500px" append-to-body>
<el-dialog title="产品配方" v-model="bomOpen" width="800px" append-to-body>
<bom :productId="currentProductId" @close="bomOpen = false" />
</el-dialog>
<!-- 将这个表格改为始终吸底且外层容器可以拖拽调节高度 -->
<!-- <StickyDragContainer v-if="currentProduct.productId" :parent-ref="appContainer"> -->
<div v-if="currentProduct.productId">
<h3>产品配料</h3>
<!-- 插槽内容原有配料表格无需任何修改 -->
<el-table :data="currentProduct.materials">
<el-table-column label="配料名称" align="center" prop="materialName" />
<el-table-column label="配料规格" align="center" prop="spec" />
<el-table-column label="配料型号" align="center" prop="model" />
<el-table-column label="厂家" align="center" prop="factory" />
<el-table-column label="计量单位" align="center" prop="unit" />
<el-table-column label="现存库存" align="center" prop="currentStock" />
<el-table-column label="备注" align="center" prop="remark" />
</el-table>
</div>
<el-empty v-else description="选择产品查看配料信息" />
<!-- </StickyDragContainer> -->
</div>
</template>
<script setup name="Product">
import { listProduct, getProduct, delProduct, addProduct, updateProduct } from "@/api/mat/product";
import bom from "@/views/mat/components/bom.vue";
import StickyDragContainer from "@/components/StickyDragContainer/index.vue";
const bomOpen = ref(false);
@@ -146,6 +125,8 @@ const multiple = ref(true);
const total = ref(0);
const title = ref("");
const currentProductId = ref(null);
const currentProduct = ref({});
const appContainer = ref(null);
const formatterTime = (time) => {
return proxy.parseTime(time, '{y}-{m}-{d}')
@@ -268,7 +249,7 @@ function submitForm() {
/** 删除按钮操作 */
function handleDelete(row) {
const _productIds = row.productId || ids.value;
proxy.$modal.confirm('是否确认删除产品基础信息编号为"' + _productIds + '"的数据项?').then(function() {
proxy.$modal.confirm('是否确认删除产品基础信息编号为"' + _productIds + '"的数据项?').then(function () {
loading.value = true;
return delProduct(_productIds);
}).then(() => {
@@ -293,5 +274,9 @@ function handleExport() {
}, `product_${new Date().getTime()}.xlsx`)
}
function handleRowClick(row) {
currentProduct.value = row;
}
getList();
</script>