修改新增

祖安之光

2025-10-13 75913003a126122b6ec5c8dc4ed68ac616c72f26

 src/views/work/qualityInfo/inventoryRecord/index.vue

@@ -28,19 +28,10 @@
      </el-form>
    </div>
    <!-- 表格数据 -->
    <el-table v-loading="loading" :data="dataList" :border="true" default-expand-all>
    <el-table v-loading="loading" :data="dataList" :border="true">
      <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 prop="recordName" align="center" label="材料名称"/>
      <el-table-column prop="inventory" align="center" label="当前库存"/>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button link type="primary" @click="openDialog('view',scope.row)">查看</el-button>
@@ -74,7 +65,7 @@
import {
  delWarehousingRecord,
  getWarehousingRecordDetail,
  getWarehousingRecordList
  getWarehousingRecordDetailList
} from "@/api/outsourcingCooperate/outsourcingCooperate";


@@ -113,7 +104,7 @@

const getList = async () => {
  loading.value = true
  const res = await getWarehousingRecordList(data.queryParams)
  const res = await getWarehousingRecordDetailList(data.queryParams)
  if(res.code == 200){
    data.dataList = res.data.list || []
    data.total = res.data.total
@@ -147,32 +138,17 @@
      const columns = [
        { label: '序号', key: 'index' },
        { label: '登记时间', key: 'boardingTime' },
        { label: '名称', key: 'name' },
        { label: '单位', key: 'enterCompany' },
        { label: '数量', key: 'enterNum' },
        { label: '入库经手人', key: 'enterPerson' },
        { label: '单位', key: 'outboundCompany' },
        { label: '数量', key: 'outboundNum' },
        { label: '出库经手人', key: 'outboundPerson' },
        { label: '库存数量', key: 'amount' },
        { label: '出入库', key: 'recordType' },
        { label: '规格', key: 'specification' },
        { label: '单位', key: 'materialUnit' },
        { label: '数量', key: 'num' },
        { label: '经手人', key: 'createBy' },
        { label: '备注', key: 'remark' }
      ];

      // 样式定义
      const headerStyle = {
        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: {
@@ -199,12 +175,32 @@
        alignment: { horizontal: "center", vertical: "center" }
      };

      // 处理数据，添加序号
      const summaryStyle = {
        font: { bold: true, sz: 12, color: { rgb: "000000" } },
        alignment: { horizontal: "left", 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" } }
        }
      };

      // 处理数据，添加序号和转换recordType
      const processData = () => {
        return jsonData.warehousingRecordDetails.map((item, index) => {
          // 转换recordType：1->入库，2->出库
          const recordTypeText = item.recordType === 1 ? '入库' : item.recordType === 2 ? '出库' : '';

          return {
            index: index + 1,
            ...item
            boardingTime: item.boardingTime,
            recordType: recordTypeText,
            specification: item.specification,
            materialUnit: item.materialUnit,
            num: item.num,
            createBy: item.createBy,
            remark: item.remark
          };
        });
      };
@@ -225,76 +221,56 @@
      }
      wsData.push(titleRow);

      // 添加上层表头行（包含"入库"和"出库"合并标题）
      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 => ({
      // 添加表头行
      const headerRow = columns.map(col => ({
        v: col.label,
        t: 's',
        s: subHeaderStyle
        s: headerStyle
      }));
      wsData.push(bottomHeaderRow);
      wsData.push(headerRow);

      // 添加数据行
      const processedData = processData();
      processedData.forEach(item => {
        const row = columns.map(col => ({
          v: item[col.key],
          t: typeof item[col.key] === 'number' ? 'n' : 's',
          s: dataStyle
        }));
        const row = columns.map(col => {
          const value = item[col.key];
          return {
            v: value,
            t: typeof value === 'number' ? 'n' : 's',
            s: dataStyle
          };
        });
        wsData.push(row);
      });

      // 添加汇总行（当前库存）
      const summaryRow = [
        { v: `当前库存：${jsonData.inventory}`, t: 's', s: summaryStyle }
      ];
      wsData.push(summaryRow);

      // 创建工作表
      const ws = utils.aoa_to_sheet(wsData);

      // 设置合并单元格
      // 设置合并单元格（只保留标题行合并）
      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 } }
        //库存行合并
        { s: { r: wsData.length - 1, c: 0 }, e: { r: wsData.length - 1, c: columns.length - 1 } }
      ];

      ws['!merges'] = merges;

      // 设置列宽
      const colWidths = [
        { wch: 8 },  // 序号
        { wch: 20 }, // 登记时间
        { wch: 15 }, // 名称
        { wch: 15 }, // 入库单位
        { wch: 12 }, // 入库数量
        { wch: 15 }, // 入库经手人
        { wch: 15 }, // 出库单位
        { wch: 12 }, // 出库数量
        { wch: 15 }, // 出库经手人
        { wch: 12 }, // 库存数量
        { wch: 20 }  // 备注
        { wch: 8 },   // 序号
        { wch: 20 },  // 登记时间
        { wch: 10 },  // 出入库
        { wch: 15 },  // 规格
        { wch: 10 },  // 单位
        { wch: 12 },  // 数量
        { wch: 15 },  // 经手人
        { wch: 20 }   // 备注
      ];
      ws['!cols'] = colWidths;

@@ -346,14 +322,3 @@
}

</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>