feat: 新增物料管理看板功能及多项优化
新增物料管理看板功能,包含统计卡片和图表展示 优化物料选择器组件,支持分页和搜索功能 重构物料详情展示组件,支持动态加载数据 添加多个ECharts图表组件用于数据可视化 完善出入库和采购单相关功能,增加在途数量显示 修复若干界面显示问题和交互逻辑
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user