月工资计算，产品详情页补充
This commit is contained in:
朱昊天
@@ -45,9 +45,24 @@
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="备注" align="center" prop="remark" />
|
||||
<el-table-column label="产品图片" align="center" prop="productImages">
|
||||
<template #default="scope">
|
||||
<div v-if="scope.row.productImages" class="image-preview">
|
||||
<el-image
|
||||
v-for="(image, index) in scope.row.productImages.split(',')"
|
||||
:key="index"
|
||||
:src="image"
|
||||
:preview-src-list="scope.row.productImages.split(',')"
|
||||
style="width: 40px; height: 40px; margin-right: 8px;"
|
||||
/>
|
||||
</div>
|
||||
<span v-else>无</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<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="View" @click="handleDetail(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>
|
||||
@@ -75,6 +90,26 @@
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" placeholder="请输入备注" />
|
||||
</el-form-item>
|
||||
<el-form-item label="产品图片" prop="productImages">
|
||||
<el-upload
|
||||
v-model:file-list="imageFileList"
|
||||
:action="uploadUrl"
|
||||
:headers="headers"
|
||||
:on-success="handleImageUploadSuccess"
|
||||
:on-remove="handleImageRemove"
|
||||
multiple
|
||||
list-type="picture"
|
||||
:limit="5"
|
||||
:before-upload="beforeUpload"
|
||||
>
|
||||
<el-button type="primary" icon="Upload">上传图片</el-button>
|
||||
<template #tip>
|
||||
<div class="el-upload__tip">
|
||||
最多上传5张图片，支持 JPG、PNG 格式
|
||||
</div>
|
||||
</template>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
@@ -110,16 +145,191 @@
|
||||
<el-empty v-else description="选择产品查看配料信息" />
|
||||
|
||||
<!-- </StickyDragContainer> -->
|
||||
|
||||
<!-- 产品详情弹窗 -->
|
||||
<el-dialog :title="currentProductDetail.productName + ' - 产品详情'" v-model="detailOpen" width="900px" append-to-body>
|
||||
<!-- 产品信息和图片容器 -->
|
||||
<div class="product-header">
|
||||
<!-- 产品基本信息 -->
|
||||
<div class="product-info">
|
||||
<h3 class="section-title">产品信息</h3>
|
||||
<div class="info-content">
|
||||
<div class="info-row">
|
||||
<span class="label">品名：</span>
|
||||
<span class="value">{{ currentProductDetail.productName }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="label">产品规格：</span>
|
||||
<span class="value">{{ currentProductDetail.spec }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="label">产品型号：</span>
|
||||
<span class="value">{{ currentProductDetail.model }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="label">产品单价：</span>
|
||||
<span class="value">{{ formatDecimal(currentProductDetail.unitPrice) }} 元</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="label">备注：</span>
|
||||
<span class="value">{{ currentProductDetail.remark || '无' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 产品图片 -->
|
||||
<div class="product-images" v-if="currentProductDetail.productImages">
|
||||
<h3 class="section-title">产品图片</h3>
|
||||
<div class="image-list">
|
||||
<el-image
|
||||
v-for="(image, index) in currentProductDetail.productImages.split(',')"
|
||||
:key="index"
|
||||
:src="image"
|
||||
:preview-src-list="currentProductDetail.productImages.split(',')"
|
||||
style="width: 150px; height: 150px; margin-right: 15px;"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 材料明细 -->
|
||||
<div class="material-detail">
|
||||
<h3 class="section-title">材料明细</h3>
|
||||
|
||||
<!-- 主材部分 -->
|
||||
<div class="material-category" v-if="rawMaterials.length > 0">
|
||||
<h4 class="category-title">主材</h4>
|
||||
<el-table v-loading="materialLoading" :data="rawMaterials" style="width: 100%" border>
|
||||
<el-table-column label="材料名称" width="150">
|
||||
<template #default="scope">
|
||||
<Raw :data="scope.row" :materialId="scope.row.materialId" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="材料规格" width="200">
|
||||
<template #default="scope">
|
||||
{{ scope.row.material?.spec || '-' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="数量" width="100" align="center">
|
||||
<template #default="scope">
|
||||
{{ formatDecimal(scope.row.materialNum) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="价格" width="100" align="center">
|
||||
<template #default="scope">
|
||||
{{ formatDecimal(scope.row.material?.unitPrice || 0) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="备注" />
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
<!-- 辅材部分 -->
|
||||
<div class="material-category" v-if="auxiliaryMaterials.length > 0">
|
||||
<h4 class="category-title">辅材</h4>
|
||||
<el-table v-loading="materialLoading" :data="auxiliaryMaterials" style="width: 100%" border>
|
||||
<el-table-column label="材料名称" width="150">
|
||||
<template #default="scope">
|
||||
<Raw :data="scope.row" :materialId="scope.row.materialId" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="材料规格" width="200">
|
||||
<template #default="scope">
|
||||
{{ scope.row.material?.spec || '-' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="数量" width="100" align="center">
|
||||
<template #default="scope">
|
||||
{{ formatDecimal(scope.row.materialNum) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="价格" width="100" align="center">
|
||||
<template #default="scope">
|
||||
{{ formatDecimal(scope.row.material?.unitPrice || 0) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="备注" />
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
<!-- 无数据提示 -->
|
||||
<div v-if="productMaterialRelationList.length === 0">
|
||||
<el-empty description="暂无配方数据" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 总计部分 -->
|
||||
<div class="total-section">
|
||||
<div class="total-item">
|
||||
<span class="total-label">产品总价：</span>
|
||||
<span class="total-value">{{ formatDecimal(currentProductDetail.unitPrice || 0) }} 元</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="Product">
|
||||
import { ref, computed } from 'vue';
|
||||
import { listProduct, getProduct, delProduct, addProduct, updateProduct } from "@/api/mat/product";
|
||||
import { listProductMaterialRelation } from "@/api/mat/productMaterialRelation";
|
||||
import { getMaterial } from "@/api/mat/material";
|
||||
import bom from "@/views/mat/components/bom.vue";
|
||||
import StickyDragContainer from "@/components/StickyDragContainer/index.vue";
|
||||
import { formatDecimal } from '@/utils/gear'
|
||||
import Raw from '@/components/Renderer/Raw.vue';
|
||||
import { formatDecimal } from '@/utils/gear';
|
||||
import { getToken } from '@/utils/auth';
|
||||
|
||||
const bomOpen = ref(false);
|
||||
const detailOpen = ref(false);
|
||||
const currentProductDetail = ref({});
|
||||
|
||||
// 配方数据
|
||||
const productMaterialRelationList = ref([]);
|
||||
const materialLoading = ref(false);
|
||||
|
||||
// 计算总金额
|
||||
const totalAmount = computed(() => {
|
||||
return productMaterialRelationList.value.reduce((sum, item) => {
|
||||
// 假设每个物料都有价格，实际项目中需要从物料数据中获取
|
||||
const price = item.material?.unitPrice || 0;
|
||||
const quantity = item.materialNum || 0;
|
||||
return sum + (price * quantity);
|
||||
}, 0);
|
||||
});
|
||||
|
||||
// 分离原料和辅料
|
||||
const rawMaterials = computed(() => {
|
||||
// 原料（主材）：materialType === 2
|
||||
return productMaterialRelationList.value.filter(item => {
|
||||
return item && item.material && item.material.materialType === 2;
|
||||
});
|
||||
});
|
||||
|
||||
const auxiliaryMaterials = computed(() => {
|
||||
// 辅料：materialType === 1
|
||||
return productMaterialRelationList.value.filter(item => {
|
||||
return item && item.material && item.material.materialType === 1;
|
||||
});
|
||||
});
|
||||
|
||||
// 计算原料总金额
|
||||
const rawMaterialsTotal = computed(() => {
|
||||
return rawMaterials.value.reduce((sum, item) => {
|
||||
const price = item.material?.unitPrice || 0;
|
||||
const quantity = item.materialNum || 0;
|
||||
return sum + (price * quantity);
|
||||
}, 0);
|
||||
});
|
||||
|
||||
// 计算辅料总金额
|
||||
const auxiliaryMaterialsTotal = computed(() => {
|
||||
return auxiliaryMaterials.value.reduce((sum, item) => {
|
||||
const price = item.material?.unitPrice || 0;
|
||||
const quantity = item.materialNum || 0;
|
||||
return sum + (price * quantity);
|
||||
}, 0);
|
||||
});
|
||||
|
||||
const { proxy } = getCurrentInstance();
|
||||
|
||||
@@ -136,6 +346,9 @@ const title = ref("");
|
||||
const currentProductId = ref(null);
|
||||
const currentProduct = ref({});
|
||||
const appContainer = ref(null);
|
||||
const imageFileList = ref([]);
|
||||
const uploadUrl = ref(import.meta.env.VITE_APP_BASE_API + '/system/oss/upload');
|
||||
const headers = ref({ Authorization: "Bearer " + getToken() });
|
||||
|
||||
const formatterTime = (time) => {
|
||||
return proxy.parseTime(time, '{y}-{m}-{d}')
|
||||
@@ -185,8 +398,10 @@ function reset() {
|
||||
createBy: null,
|
||||
updateTime: null,
|
||||
updateBy: null,
|
||||
remark: null
|
||||
remark: null,
|
||||
productImages: null
|
||||
};
|
||||
imageFileList.value = [];
|
||||
proxy.resetForm("productRef");
|
||||
}
|
||||
|
||||
@@ -224,11 +439,60 @@ function handleUpdate(row) {
|
||||
getProduct(_productId).then(response => {
|
||||
loading.value = false;
|
||||
form.value = response.data;
|
||||
// 处理图片文件列表
|
||||
if (form.value.productImages) {
|
||||
imageFileList.value = form.value.productImages.split(',').map(url => ({
|
||||
name: url.substring(url.lastIndexOf('/') + 1),
|
||||
url: url
|
||||
}));
|
||||
}
|
||||
open.value = true;
|
||||
title.value = "修改产品基础信息";
|
||||
});
|
||||
}
|
||||
|
||||
/** 图片上传成功处理 */
|
||||
function handleImageUploadSuccess(response, uploadFile) {
|
||||
if (response.code === 200) {
|
||||
const imageUrl = response.data.url;
|
||||
if (form.value.productImages) {
|
||||
form.value.productImages += ',' + imageUrl;
|
||||
} else {
|
||||
form.value.productImages = imageUrl;
|
||||
}
|
||||
} else {
|
||||
proxy.$modal.msgError('上传失败：' + response.msg);
|
||||
}
|
||||
}
|
||||
|
||||
/** 图片移除处理 */
|
||||
function handleImageRemove(uploadFile, uploadFiles) {
|
||||
const imageUrl = uploadFile.url;
|
||||
if (form.value.productImages) {
|
||||
const images = form.value.productImages.split(',');
|
||||
const index = images.indexOf(imageUrl);
|
||||
if (index > -1) {
|
||||
images.splice(index, 1);
|
||||
form.value.productImages = images.join(',');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** 图片上传前校验 */
|
||||
function beforeUpload(file) {
|
||||
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
|
||||
const isLt2M = file.size / 1024 / 1024 < 2;
|
||||
if (!isJpgOrPng) {
|
||||
proxy.$modal.msgError('只能上传 JPG/PNG 格式的图片');
|
||||
return false;
|
||||
}
|
||||
if (!isLt2M) {
|
||||
proxy.$modal.msgError('图片大小不能超过 2MB');
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
/** 提交按钮 */
|
||||
function submitForm() {
|
||||
proxy.$refs["productRef"].validate(valid => {
|
||||
@@ -287,5 +551,153 @@ function handleRowClick(row) {
|
||||
currentProduct.value = row;
|
||||
}
|
||||
|
||||
function handleDetail(row) {
|
||||
loading.value = true;
|
||||
materialLoading.value = true;
|
||||
// 获取产品详情
|
||||
getProduct(row.productId).then(response => {
|
||||
currentProductDetail.value = response.data;
|
||||
// 获取配方数据
|
||||
return listProductMaterialRelation({ productId: row.productId });
|
||||
}).then(response => {
|
||||
const relations = response.rows;
|
||||
// 为每个配方项获取物料详细信息，包括物料类型
|
||||
const promises = relations.map(item => {
|
||||
return getMaterial(item.materialId).then(materialResponse => {
|
||||
item.material = materialResponse.data;
|
||||
return item;
|
||||
});
|
||||
});
|
||||
return Promise.all(promises);
|
||||
}).then(relationsWithMaterial => {
|
||||
productMaterialRelationList.value = relationsWithMaterial;
|
||||
detailOpen.value = true;
|
||||
}).catch(error => {
|
||||
console.error('获取数据失败:', error);
|
||||
}).finally(() => {
|
||||
loading.value = false;
|
||||
materialLoading.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
getList();
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 产品信息和图片容器 */
|
||||
.product-header {
|
||||
display: flex;
|
||||
margin: 20px 0;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
/* 产品图片部分 */
|
||||
.product-images {
|
||||
flex-shrink: 0;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.image-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 15px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
/* 产品信息部分 */
|
||||
.product-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 15px;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 2px solid #409eff;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.info-content {
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
margin-bottom: 10px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-weight: bold;
|
||||
margin-right: 15px;
|
||||
width: 100px;
|
||||
display: inline-block;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
/* 材料明细部分 */
|
||||
.material-detail {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.material-category {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.category-title {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
padding: 8px 15px;
|
||||
background-color: #ecf5ff;
|
||||
color: #409eff;
|
||||
border-left: 4px solid #409eff;
|
||||
}
|
||||
|
||||
/* 总计部分 */
|
||||
.total-section {
|
||||
margin-top: 30px;
|
||||
padding: 20px;
|
||||
background-color: #f0f9eb;
|
||||
border: 1px solid #b7eb8f;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.total-item {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.total-label {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.total-value {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: #f56c6c;
|
||||
}
|
||||
|
||||
/* 表格样式 */
|
||||
:deep(.el-table th) {
|
||||
background-color: #f5f7fa;
|
||||
font-weight: bold;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
:deep(.el-table tr:hover) {
|
||||
background-color: #ecf5ff;
|
||||
}
|
||||
|
||||
:deep(.el-table td) {
|
||||
vertical-align: middle;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user