DeXun/GEAR-OA
10
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

工人热更新（js），初版详情页

Browse Source
This commit is contained in:
朱昊天
2026-04-27 10:40:56 +08:00
parent 1fe6e030d4
commit 1ce1ffad5a
27 changed files with 1067 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
gear-ui3/.npm-cache/_update-notifier-last-checked Normal file
View File

36
gear-ui3/src/api/mat/productAddition.js Normal file
View File

@@ -0,0 +1,36 @@
import request from '@/utils/request'
// 查询产品属性附加列表
export function listProductAddition(query) {
return request({
url: '/api/mat/productAddition/list',
method: 'get',
params: query
})
}
// 新增产品属性附加
export function addProductAddition(data) {
return request({
url: '/api/mat/productAddition',
method: 'post',
data: data
})
}
// 修改产品属性附加
export function updateProductAddition(data) {
return request({
url: '/api/mat/productAddition',
method: 'put',
data: data
})
}
// 删除产品属性附加
export function delProductAddition(addId) {
return request({
url: '/api/mat/productAddition/' + addId,
method: 'delete'
})
}

33
gear-ui3/src/api/mat/productLabor.js Normal file
View File

@@ -0,0 +1,33 @@
import request from '@/utils/request'
export function listProductLabor(query) {
return request({
url: '/api/mat/productLabor/list',
method: 'get',
params: query
})
}
export function addProductLabor(data) {
return request({
url: '/api/mat/productLabor',
method: 'post',
data: data
})
}
export function updateProductLabor(data) {
return request({
url: '/api/mat/productLabor',
method: 'put',
data: data
})
}
export function delProductLabor(laborId) {
return request({
url: '/api/mat/productLabor/' + laborId,
method: 'delete'
})
}

168
gear-ui3/src/views/mat/product/detail.vue
View File

@@ -49,6 +49,21 @@
/>
</div>
</div>
<div class="product-pdfs" v-if="pdfDisplayList.length > 0">
<h4>产品说明书</h4>
<div class="pdf-list">
<div
v-for="(pdf, index) in pdfDisplayList"
:key="index"
class="pdf-item"
>
<el-icon class="pdf-icon"><Document /></el-icon>
<span class="pdf-name" :title="pdf.name">{{ pdf.name }}</span>
<el-button type="primary" link size="small" @click="previewPdf(pdf)">预览</el-button>
<el-button type="success" link size="small" @click="downloadPdf(pdf)">下载</el-button>
</div>
</div>
</div>
</el-card>
<el-card>
@@ -104,9 +119,9 @@
</div>
</div>
<!-- 工本部分 -->
<!-- 工价部分 -->
<div class="material-section">
<h3 class="section-title">工本</h3>
<h3 class="section-title">工价</h3>
<el-table :data="laborMaterials" style="width: 100%" border>
<el-table-column prop="materialName" label="项目名称" width="150" />
<el-table-column prop="spec" label="规格" width="150" />
@@ -123,7 +138,22 @@
</el-table-column>
</el-table>
<div class="section-summary" v-if="laborMaterials.length > 0">
<span>工本小计：{{ formatDecimal(laborMaterials.reduce((sum, item) => sum + item.subtotal, 0)) }} 元</span>
<span>工价小计：{{ formatDecimal(laborMaterials.reduce((sum, item) => sum + item.subtotal, 0)) }} 元</span>
</div>
</div>
<div class="material-section" v-if="productLaborList.length > 0">
<h3 class="section-title">工价（手动）</h3>
<el-table :data="productLaborList" style="width: 100%" border>
<el-table-column prop="laborName" label="工价说明" />
<el-table-column prop="laborPrice" label="金额" width="140" align="center">
<template #default="scope">
{{ formatDecimal(scope.row.laborPrice) }}
</template>
</el-table-column>
</el-table>
<div class="section-summary">
<span>工价（手动）小计：{{ formatDecimal(productLaborList.reduce((sum, item) => sum + (Number(item.laborPrice) || 0), 0)) }} 元</span>
</div>
</div>
@@ -145,7 +175,10 @@ import { getProduct } from "@/api/mat/product";
import { listProductMaterialRelation } from "@/api/mat/productMaterialRelation";
import { getMaterial } from "@/api/mat/material";
import { listProductAddition } from "@/api/mat/productAddition";
import { listProductLabor } from "@/api/mat/productLabor";
import { listByIds, listOss } from "@/api/system/oss";
import { formatDecimal } from '@/utils/gear';
import { Document } from '@element-plus/icons-vue';
const router = useRouter();
const route = useRoute();
@@ -154,12 +187,15 @@ const productDetail = ref({});
const loading = ref(true);
const materialLoading = ref(false);
const additionLoading = ref(false);
const pdfFiles = ref([]);
const pdfUrlFiles = ref([]);
// 材料明细数据
const productMaterialRelationList = ref([]);
// 产品附加属性数据
const productAdditionList = ref([]);
const productLaborList = ref([]);
// 计算主材、辅材和工本
const mainMaterials = computed(() => {
@@ -189,7 +225,7 @@ const auxiliaryMaterials = computed(() => {
});
const laborMaterials = computed(() => {
// 工本（材料类型为3）
// 工价（材料类型为3）
return productMaterialRelationList.value
.filter(item => item.material && item.material.materialType === 3)
.map(item => ({
@@ -206,7 +242,24 @@ const totalAmount = computed(() => {
const mainTotal = mainMaterials.value.reduce((sum, item) => sum + item.subtotal, 0);
const auxiliaryTotal = auxiliaryMaterials.value.reduce((sum, item) => sum + item.subtotal, 0);
const laborTotal = laborMaterials.value.reduce((sum, item) => sum + item.subtotal, 0);
return mainTotal + auxiliaryTotal + laborTotal;
const manualLaborTotal = productLaborList.value.reduce((sum, item) => {
const price = item && item.laborPrice !== undefined && item.laborPrice !== null ? Number(item.laborPrice) : 0;
return sum + (Number.isFinite(price) ? price : 0);
}, 0);
return mainTotal + auxiliaryTotal + laborTotal + manualLaborTotal;
});
const isOssIdList = (val) => {
if (val === null || val === undefined) return false;
const str = String(val).trim();
return /^[0-9]+(,[0-9]+)*$/.test(str);
};
const pdfDisplayList = computed(() => {
const raw = String(productDetail.value.productPdfs || '').trim();
if (!raw) return [];
if (isOssIdList(raw)) return pdfFiles.value;
return pdfUrlFiles.value;
});
// 获取产品详情
@@ -217,10 +270,12 @@ function getProductDetail() {
getProduct(productId).then(response => {
productDetail.value = response.data;
loading.value = false;
resolvePdfFiles();
// 获取材料明细
getMaterialDetail(productId);
// 获取产品附加属性
getProductAddition(productId);
getProductLabor(productId);
}).catch(error => {
console.error('获取产品详情失败:', error);
loading.value = false;
@@ -262,11 +317,82 @@ function getMaterialDetail(productId) {
});
}
function getProductLabor(productId) {
listProductLabor({ productId }).then(response => {
productLaborList.value = response.rows || [];
}).catch(() => {
productLaborList.value = [];
});
}
function resolvePdfFiles() {
const raw = String(productDetail.value.productPdfs || '').trim();
if (!raw) {
pdfFiles.value = [];
pdfUrlFiles.value = [];
return;
}
if (isOssIdList(raw)) {
pdfUrlFiles.value = [];
listByIds(raw).then(res => {
const list = res.data || [];
pdfFiles.value = list.map(oss => ({
name: oss.originalName || oss.fileName || String(oss.ossId),
url: oss.url,
ossId: oss.ossId
}));
}).catch(() => {
pdfFiles.value = [];
});
return;
}
pdfFiles.value = [];
const urls = raw.split(',').map(s => String(s).trim()).filter(Boolean);
Promise.all(urls.map((url) =>
listOss({ url, pageNum: 1, pageSize: 1 })
.then(r => (r && r.rows && r.rows[0]) ? r.rows[0] : null)
.catch(() => null)
)).then(rows => {
pdfUrlFiles.value = urls.map((url, index) => {
const row = rows[index];
return {
name: (row && (row.originalName || row.fileName)) || getFileName(url),
url: (row && row.url) || url,
ossId: row && row.ossId
};
});
}).catch(() => {
pdfUrlFiles.value = urls.map(url => ({ name: getFileName(url), url }));
});
}
// 返回列表
function handleBack() {
router.back();
}
// 获取文件名
function getFileName(url) {
if (!url) return '';
return url.substring(url.lastIndexOf('/') + 1);
}
// 预览PDF
function previewPdf(pdf) {
if (!pdf || !pdf.url) return;
window.open(pdf.url, '_blank');
}
// 下载PDF
function downloadPdf(pdf) {
if (!pdf || !pdf.url) return;
const link = document.createElement('a');
link.href = pdf.url;
link.download = pdf.name || getFileName(pdf.url);
link.click();
}
onMounted(() => {
getProductDetail();
});
@@ -312,6 +438,36 @@ onMounted(() => {
margin-top: 10px;
}
.product-pdfs {
margin-top: 20px;
}
.pdf-list {
margin-top: 10px;
}
.pdf-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px;
background-color: #f5f7fa;
border-radius: 4px;
margin-bottom: 8px;
}
.pdf-icon {
font-size: 24px;
color: #409eff;
}
.pdf-name {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.material-section {
margin: 20px 0;
}
@@ -357,4 +513,4 @@ onMounted(() => {
font-weight: bold;
color: #f56c6c;
}
</style>
</style>

318
gear-ui3/src/views/mat/product/index.vue
View File

@@ -67,6 +67,7 @@
<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="Setting" @click="handleAddition(scope.row)">附加属性</el-button>
<el-button link type="primary" @click="handleLabor(scope.row)">工价</el-button>
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
@@ -113,6 +114,25 @@
</template>
</el-upload>
</el-form-item>
<el-form-item label="产品说明书" prop="productPdfs">
<el-upload
v-model:file-list="pdfFileList"
:action="uploadUrl"
:headers="headers"
:on-success="handlePdfUploadSuccess"
:on-remove="handlePdfRemove"
multiple
:limit="5"
:before-upload="beforePdfUpload"
>
<el-button type="primary" icon="Upload">上传说明书</el-button>
<template #tip>
<div class="el-upload__tip">
最多上传5个PDF文件，支持 PDF 格式
</div>
</template>
</el-upload>
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
@@ -156,6 +176,35 @@
</template>
</el-dialog>
<el-dialog title="产品工价" v-model="laborOpen" width="600px" append-to-body>
<div class="addition-container">
<el-button type="primary" icon="Plus" @click="addLaborItem" style="margin-bottom: 10px">添加工价</el-button>
<el-table :data="laborList" style="width: 100%" border>
<el-table-column prop="laborName" label="工价说明" width="200">
<template #default="scope">
<el-input v-model="scope.row.laborName" placeholder="请输入工价说明" />
</template>
</el-table-column>
<el-table-column prop="laborPrice" label="金额(元)">
<template #default="scope">
<el-input-number style="width: 100%" v-model="scope.row.laborPrice" :controls="false" />
</template>
</el-table-column>
<el-table-column label="操作" width="100" align="center">
<template #default="scope">
<el-button link type="danger" icon="Delete" @click="removeLaborItem(scope.$index)" />
</template>
</el-table-column>
</el-table>
</div>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="saveLabors">保存</el-button>
<el-button @click="laborOpen = false">取消</el-button>
</div>
</template>
</el-dialog>
<!-- 将这个表格改为始终吸底，且外层容器可以拖拽调节高度 -->
<!-- <StickyDragContainer v-if="currentProduct.productId" :parent-ref="appContainer"> -->
<div v-if="currentProduct.productId">
@@ -190,6 +239,8 @@ import { listProduct, getProduct, delProduct, addProduct, updateProduct } from "
import { listProductMaterialRelation } from "@/api/mat/productMaterialRelation";
import { getMaterial } from "@/api/mat/material";
import { listProductAddition, addProductAddition, updateProductAddition, delProductAddition } from "@/api/mat/productAddition";
import { listProductLabor, addProductLabor, updateProductLabor, delProductLabor } from "@/api/mat/productLabor";
import { listByIds, listOss } from "@/api/system/oss";
import bom from "@/views/mat/components/bom.vue";
import StickyDragContainer from "@/components/StickyDragContainer/index.vue";
import Raw from '@/components/Renderer/Raw.vue';
@@ -199,6 +250,7 @@ import { getToken } from '@/utils/auth';
const router = useRouter();
const bomOpen = ref(false);
const additionOpen = ref(false);
const laborOpen = ref(false);
const { proxy } = getCurrentInstance();
@@ -216,16 +268,45 @@ const currentProductId = ref(null);
const currentProduct = ref({});
const appContainer = ref(null);
const imageFileList = ref([]);
const pdfFileList = ref([]);
const pdfUseOssId = ref(true);
const additionList = ref([]);
const laborList = ref([]);
const uploadUrl = ref(import.meta.env.VITE_APP_BASE_API + '/system/oss/upload');
const headers = ref({ Authorization: "Bearer " + getToken() });
const isOssIdList = (val) => {
if (val === null || val === undefined) return false;
const str = String(val).trim();
return /^[0-9]+(,[0-9]+)*$/.test(str);
};
const getFileNameFromUrl = (url) => {
if (!url) return '';
const str = String(url);
return str.substring(str.lastIndexOf('/') + 1);
};
const formatterTime = (time) => {
return proxy.parseTime(time, '{y}-{m}-{d}')
}
const data = reactive({
form: {},
form: {
productId: null,
productName: null,
spec: null,
model: null,
unitPrice: null,
delFlag: null,
createTime: null,
createBy: null,
updateTime: null,
updateBy: null,
remark: null,
productImages: null,
productPdfs: null
},
queryParams: {
pageNum: 1,
pageSize: 10,
@@ -269,9 +350,12 @@ function reset() {
updateTime: null,
updateBy: null,
remark: null,
productImages: null
productImages: null,
productPdfs: null
};
imageFileList.value = [];
pdfFileList.value = [];
pdfUseOssId.value = true;
proxy.resetForm("productRef");
}
@@ -305,50 +389,168 @@ function handleAdd() {
function handleUpdate(row) {
loading.value = true
reset();
const _productId = row.productId || ids.value
const _productId = row.productId || ids.value;
getProduct(_productId).then(response => {
loading.value = false;
form.value = response.data;
// 处理图片文件列表
if (form.value.productImages) {
imageFileList.value = form.value.productImages.split(',').map(url => ({
imageFileList.value = form.value.productImages.split(',').map((url, index) => ({
name: url.substring(url.lastIndexOf('/') + 1),
url: url
url: url,
uid: Date.now() + index
}));
} else {
imageFileList.value = [];
}
// 处理PDF文件列表
if (form.value.productPdfs) {
const raw = String(form.value.productPdfs).trim();
if (isOssIdList(raw)) {
pdfUseOssId.value = true;
listByIds(raw).then(res => {
const list = res.data || [];
pdfFileList.value = list.map((oss, index) => ({
name: oss.originalName || oss.fileName || String(oss.ossId),
url: oss.url,
ossId: oss.ossId,
uid: Date.now() + index + 100
}));
}).catch(() => {
pdfFileList.value = [];
});
} else {
const urls = raw.split(',').map(s => String(s).trim()).filter(Boolean);
Promise.all(urls.map((url) =>
listOss({ url, pageNum: 1, pageSize: 1 })
.then(r => (r && r.rows && r.rows[0]) ? r.rows[0] : null)
.catch(() => null)
)).then(rows => {
const mapped = urls.map((url, index) => {
const row = rows[index];
return {
name: (row && (row.originalName || row.fileName)) || getFileNameFromUrl(url),
url: (row && row.url) || url,
ossId: row && row.ossId,
uid: Date.now() + index + 100
};
});
pdfFileList.value = mapped;
const ossIds = mapped.map(f => f.ossId).filter(Boolean);
const allResolved = ossIds.length === mapped.length && mapped.length > 0;
pdfUseOssId.value = allResolved;
if (allResolved) {
form.value.productPdfs = ossIds.join(',');
} else {
form.value.productPdfs = urls.join(',');
}
}).catch(() => {
pdfUseOssId.value = false;
pdfFileList.value = urls.map((url, index) => ({
name: getFileNameFromUrl(url),
url,
uid: Date.now() + index + 100
}));
});
}
} else {
pdfFileList.value = [];
}
open.value = true;
title.value = "修改产品基础信息";
}).catch(err => {
proxy.$modal.msgError("获取产品信息失败");
loading.value = false;
});
}
/** 图片上传成功处理 */
function handleImageUploadSuccess(response, uploadFile) {
function handleImageUploadSuccess(response, uploadFile, uploadFiles) {
if (response.code === 200) {
const imageUrl = response.data.url;
if (form.value.productImages) {
form.value.productImages += ',' + imageUrl;
} else {
form.value.productImages = imageUrl;
}
uploadFile.url = imageUrl;
const urls = uploadFiles
.map(f => f.url)
.filter(url => url && !url.startsWith('blob:'));
form.value.productImages = urls.join(',');
} else {
proxy.$modal.msgError('上传失败：' + response.msg);
const index = imageFileList.value.findIndex(f => f.uid === uploadFile.uid);
if (index > -1) {
imageFileList.value.splice(index, 1);
}
}
}
/** 图片移除处理 */
function handleImageRemove(uploadFile, uploadFiles) {
const imageUrl = uploadFile.url;
if (form.value.productImages) {
const images = form.value.productImages.split(',');
const index = images.indexOf(imageUrl);
const urls = uploadFiles
.map(f => f.url)
.filter(url => url && !url.startsWith('blob:'));
form.value.productImages = urls.length > 0 ? urls.join(',') : null;
}
/** PDF上传成功处理 */
function handlePdfUploadSuccess(response, uploadFile, uploadFiles) {
if (response.code === 200) {
uploadFile.url = response.data.url;
uploadFile.name = response.data.fileName || uploadFile.name;
uploadFile.ossId = response.data.ossId;
if (pdfUseOssId.value) {
const ossIds = uploadFiles
.map(f => f.ossId)
.filter(Boolean);
form.value.productPdfs = ossIds.length > 0 ? ossIds.join(',') : null;
} else {
const urls = uploadFiles
.map(f => f.url)
.filter(url => url && !url.startsWith('blob:'));
form.value.productPdfs = urls.length > 0 ? urls.join(',') : null;
}
} else {
proxy.$modal.msgError('上传失败：' + response.msg);
const index = pdfFileList.value.findIndex(f => f.uid === uploadFile.uid);
if (index > -1) {
images.splice(index, 1);
// 当所有图片都被删除时，设置为null而不是空字符串
form.value.productImages = images.length > 0 ? images.join(',') : null;
pdfFileList.value.splice(index, 1);
}
}
}
/** PDF移除处理 */
function handlePdfRemove(uploadFile, uploadFiles) {
if (pdfUseOssId.value) {
const ossIds = uploadFiles
.map(f => f.ossId)
.filter(Boolean);
form.value.productPdfs = ossIds.length > 0 ? ossIds.join(',') : null;
} else {
const urls = uploadFiles
.map(f => f.url)
.filter(url => url && !url.startsWith('blob:'));
form.value.productPdfs = urls.length > 0 ? urls.join(',') : null;
}
}
/** PDF上传前校验 */
function beforePdfUpload(file) {
const isPdf = file.type === 'application/pdf';
const isLt10M = file.size / 1024 / 1024 < 10;
if (!isPdf) {
proxy.$modal.msgError('只能上传 PDF 格式的文件');
return false;
}
if (!isLt10M) {
proxy.$modal.msgError('PDF文件大小不能超过 10MB');
return false;
}
return true;
}
/** 图片上传前校验 */
function beforeUpload(file) {
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
@@ -366,26 +568,47 @@ function beforeUpload(file) {
/** 提交按钮 */
function submitForm() {
if (buttonLoading.value) {
return;
}
proxy.$refs["productRef"].validate(valid => {
if (valid) {
const submitData = {
productId: form.value.productId,
productName: form.value.productName,
spec: form.value.spec,
model: form.value.model,
unitPrice: form.value.unitPrice,
remark: form.value.remark,
productImages: form.value.productImages,
productPdfs: form.value.productPdfs
};
buttonLoading.value = true;
if (form.value.productId != null) {
updateProduct(form.value).then(response => {
updateProduct(submitData).then(response => {
proxy.$modal.msgSuccess("修改成功");
open.value = false;
getList();
}).catch(err => {
proxy.$modal.msgError("修改失败");
}).finally(() => {
buttonLoading.value = false;
});
} else {
addProduct(form.value).then(response => {
addProduct(submitData).then(response => {
proxy.$modal.msgSuccess("新增成功");
open.value = false;
getList();
}).catch(err => {
proxy.$modal.msgError("新增失败");
}).finally(() => {
buttonLoading.value = false;
});
}
} else {
return;
}
});
}
@@ -486,6 +709,61 @@ function saveAdditions() {
additionOpen.value = false;
}
function handleLabor(row) {
currentProductId.value = row.productId;
laborList.value = [];
listProductLabor({ productId: row.productId }).then(response => {
if (response.code === 200) {
laborList.value = response.rows || [];
}
});
laborOpen.value = true;
}
function addLaborItem() {
laborList.value.push({ laborName: '', laborPrice: 0 });
}
function removeLaborItem(index) {
const item = laborList.value[index];
if (item && item.laborId) {
delProductLabor(item.laborId).finally(() => {
laborList.value.splice(index, 1);
});
return;
}
laborList.value.splice(index, 1);
}
async function saveLabors() {
const valid = laborList.value
.map(item => ({
...item,
laborName: item.laborName ? String(item.laborName).trim() : ''
}))
.filter(item => item.laborName);
const tasks = valid.map(item => {
const data = {
laborId: item.laborId,
productId: currentProductId.value,
laborName: item.laborName,
laborPrice: item.laborPrice ?? 0
};
if (data.laborId) return updateProductLabor(data);
return addProductLabor(data);
});
try {
await Promise.all(tasks);
proxy.$modal.msgSuccess('保存成功');
} catch (e) {
proxy.$modal.msgError('保存失败');
} finally {
laborOpen.value = false;
}
}
getList();
</script>