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

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>