From 1fb1c5462d37269180886e28396bb004df70dd3f Mon Sep 17 00:00:00 2001
From: 祖安之光 <11848914+light-of-zuan@user.noreply.gitee.com>
Date: 星期六, 11 十月 2025 13:36:29 +0800
Subject: [PATCH] 修改新增
---
src/views/work/qualityInfo/inventoryRecord/index.vue | 110 ++++++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 88 insertions(+), 22 deletions(-)
diff --git a/src/views/work/qualityInfo/inventoryRecord/index.vue b/src/views/work/qualityInfo/inventoryRecord/index.vue
index 93797ad..f35685f 100644
--- a/src/views/work/qualityInfo/inventoryRecord/index.vue
+++ b/src/views/work/qualityInfo/inventoryRecord/index.vue
@@ -28,9 +28,19 @@
</el-form>
</div>
<!-- 表格数据 -->
- <el-table v-loading="loading" :data="dataList" :border="true">
- <el-table-column type="index" label="序号"></el-table-column>
- <el-table-column prop="recordName" align="center" label="记录名称" v-if="isAdmin"></el-table-column>
+ <el-table v-loading="loading" :data="dataList" :border="true" default-expand-all>
+ <el-table-column type="index" label="序号" width="80"/>
+ <el-table-column type="expand" label="材料清单" width="100">
+ <template #default="props">
+ <el-table class="customedSubTable" :data="props.row.warehousingRecordDetails" :border="true">
+ <el-table-column label="材料名称" align="center" prop="name"/>
+ <el-table-column label="库存数量" align="center" prop="amount"/>
+ </el-table>
+ </template>
+ </el-table-column>
+ <el-table-column prop="recordName" align="center" label="记录名称"/>
+<!-- <el-table-column prop="name" align="center" label="材料名称"/>-->
+<!-- <el-table-column prop="amount" align="center" label="库存数量"/>-->
<el-table-column label="操作" align="center">
<template #default="scope">
<el-button link type="primary" @click="openDialog('view',scope.row)">查看</el-button>
@@ -127,20 +137,22 @@
}
}
-const downloadFile = async (val)=>{
- const res = await getWarehousingRecordDetail({id: val.id})
- if(res.code == 200){
- if(res.data){
+const downloadFile = async (val) => {
+ const res = await getWarehousingRecordDetail({ id: val.id })
+ if (res.code == 200) {
+ if (res.data) {
const jsonData = res.data
+
+ // 列定义
const columns = [
{ label: '序号', key: 'index' },
{ label: '登记时间', key: 'boardingTime' },
{ label: '名称', key: 'name' },
- { label: '入库单位', key: 'enterCompany' },
- { label: '入库数量', key: 'enterNum' },
+ { label: '单位', key: 'enterCompany' },
+ { label: '数量', key: 'enterNum' },
{ label: '入库经手人', key: 'enterPerson' },
- { label: '出库单位', key: 'outboundCompany' },
- { label: '出库数量', key: 'outboundNum' },
+ { label: '单位', key: 'outboundCompany' },
+ { label: '数量', key: 'outboundNum' },
{ label: '出库经手人', key: 'outboundPerson' },
{ label: '库存数量', key: 'amount' },
{ label: '备注', key: 'remark' }
@@ -148,8 +160,20 @@
// 样式定义
const headerStyle = {
- font: { bold: true, sz: 12, color: { rgb: "FFFFFF" } },
- fill: { fgColor: { rgb: "3498DB" } },
+ font: { bold: true, sz: 12, color: { rgb: "000000" } },
+ fill: { fgColor: { rgb: "CCCCCC" } },
+ alignment: { horizontal: "center", vertical: "center" },
+ border: {
+ top: { style: "thin", color: { rgb: "000000" } },
+ bottom: { style: "thin", color: { rgb: "000000" } },
+ left: { style: "thin", color: { rgb: "000000" } },
+ right: { style: "thin", color: { rgb: "000000" } }
+ }
+ };
+
+ const subHeaderStyle = {
+ font: { bold: true, sz: 11, color: { rgb: "000000" } },
+ fill: { fgColor: { rgb: "CCCCCC" } },
alignment: { horizontal: "center", vertical: "center" },
border: {
top: { style: "thin", color: { rgb: "000000" } },
@@ -184,6 +208,7 @@
};
});
};
+
// 创建工作簿
const wb = utils.book_new();
const wsData = [];
@@ -200,13 +225,29 @@
}
wsData.push(titleRow);
- // 添加表头
- const headerRow = columns.map(col => ({
+ // 添加上层表头行（包含"入库"和"出库"合并标题）
+ const topHeaderRow = [
+ { v: '序号', t: 's', s: headerStyle }, // 序号
+ { v: '登记时间', t: 's', s: headerStyle }, // 登记时间
+ { v: '名称', t: 's', s: headerStyle }, // 名称
+ { v: '入库', t: 's', s: headerStyle }, // 入库（将合并3列）
+ { v: '', t: 's', s: headerStyle }, // 占位
+ { v: '', t: 's', s: headerStyle }, // 占位
+ { v: '出库', t: 's', s: headerStyle }, // 出库（将合并3列）
+ { v: '', t: 's', s: headerStyle }, // 占位
+ { v: '', t: 's', s: headerStyle }, // 占位
+ { v: '库存数量', t: 's', s: headerStyle }, // 库存数量
+ { v: '备注', t: 's', s: headerStyle } // 备注
+ ];
+ wsData.push(topHeaderRow);
+
+ // 添加下层表头行（具体字段名称）
+ const bottomHeaderRow = columns.map(col => ({
v: col.label,
t: 's',
- s: headerStyle
+ s: subHeaderStyle
}));
- wsData.push(headerRow);
+ wsData.push(bottomHeaderRow);
// 添加数据行
const processedData = processData();
@@ -222,10 +263,24 @@
// 创建工作表
const ws = utils.aoa_to_sheet(wsData);
- // 设置合并单元格（标题行）
- ws['!merges'] = [
- { s: { r: 0, c: 0 }, e: { r: 0, c: columns.length - 1 } }
+ // 设置合并单元格
+ const merges = [
+ // 标题行合并
+ { s: { r: 0, c: 0 }, e: { r: 0, c: columns.length - 1 } },
+ // 入库标题合并（第1行，第3-5列）
+ { s: { r: 1, c: 3 }, e: { r: 1, c: 5 } },
+ // 出库标题合并（第1行，第6-8列）
+ { s: { r: 1, c: 6 }, e: { r: 1, c: 8 } },
+ // 序号、登记时间、名称跨行合并（第1-2行）
+ { s: { r: 1, c: 0 }, e: { r: 2, c: 0 } },
+ { s: { r: 1, c: 1 }, e: { r: 2, c: 1 } },
+ { s: { r: 1, c: 2 }, e: { r: 2, c: 2 } },
+ // 库存数量、备注跨行合并（第1-2行）
+ { s: { r: 1, c: 9 }, e: { r: 2, c: 9 } },
+ { s: { r: 1, c: 10 }, e: { r: 2, c: 10 } }
];
+
+ ws['!merges'] = merges;
// 设置列宽
const colWidths = [
@@ -248,10 +303,10 @@
// 生成Excel文件并下载
writeFile(wb, `${jsonData.recordName}.xlsx`);
- }else{
+ } else {
ElMessage.warning('暂无数据')
}
- }else{
+ } else {
ElMessage.warning(res.message)
}
}
@@ -291,3 +346,14 @@
}
</script>
+<style lang="scss">
+.customedSubTable{
+ width: calc(100% - 180px);
+ margin-left: 180px;
+ box-shadow: none;
+ border-radius: 0 !important;
+ .el-table__header-wrapper th, .el-table__fixed-header-wrapper th{
+ background-color: #fff !important;
+ }
+}
+</style>
--
Gitblit v1.9.2