diff --git a/src/views/inventoryCount/total/shop.vue b/src/views/inventoryCount/total/shop.vue
new file mode 100644
index 00000000..c93fedae
--- /dev/null
+++ b/src/views/inventoryCount/total/shop.vue
@@ -0,0 +1,822 @@
+<template>
+  <div class="app-container">
+    <!-- 查询表单部分保持不变 -->
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="90px">
+      <!-- 库存日期 -->
+      <el-form-item label="库存日期">
+        <el-date-picker
+          v-model="dateRange"
+          type="daterange"
+          align="right"
+          unlink-panels
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          format="yyyy-MM-dd"
+          value-format="yyyy-MM-dd"
+          style="width: 240px"
+          :picker-options="pickerOptions">
+        </el-date-picker>
+      </el-form-item>
+
+      <!-- 货品类别 - 级联多选 -->
+      <el-form-item label="货品类别">
+        <el-cascader
+          v-model="selectedCategories"
+          :options="goodsCategoryOptions"
+          :show-all-levels="false"
+          :props="categoryProps"
+          clearable
+          filterable
+          multiple
+          collapse-tags
+          placeholder="请选择货品类别"
+          style="width: 200px;"
+          @change="handleCategoryChange">
+        </el-cascader>
+
+      </el-form-item>
+
+      <!-- 所属区域 -->
+      <el-form-item label="所属区域">
+        <el-cascader
+          v-model="selectedOrg"
+          :options="orgOptions"
+          :show-all-levels="false"
+          clearable
+          filterable
+          placeholder="请选择所属区域"
+          :props="{
+            checkStrictly: true,
+            expandTrigger: 'hover',
+            value: 'orgId',
+            label: 'orgName',
+            children: 'children'
+          }"
+          style="width: 200px;"
+          @change="handleAreaChange">
+        </el-cascader>
+      </el-form-item>
+
+      <!-- 货品仓库 -->
+      <el-form-item label="货品仓库" prop="warehouseId">
+        <el-select
+          v-model="queryParams.warehouseIdList"
+          multiple
+          placeholder="请选择货品仓库"
+          clearable
+          style="width: 200px"
+          @change="handleWarehouseChange">
+          <el-option
+            v-for="item in wareHouseOptions"
+            :key="item.warehouseId"
+            :label="item.warehouseName"
+            :value="item.warehouseId">
+          </el-option>
+        </el-select>
+      </el-form-item>
+
+      <!-- 货品名称 -->
+      <el-form-item label="货品名称" prop="goodsName">
+        <el-input
+          v-model="queryParams.materialName"
+          placeholder="请输入货品名称"
+          maxlength="100"
+          clearable
+          style="width: 200px"/>
+      </el-form-item>
+
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <!-- 操作按钮栏 -->
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+        >导出</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="info"
+          plain
+          icon="el-icon-printer"
+          size="mini"
+          @click="handlePrint"
+        >打印</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <!-- 数据表格 - 只修改字段名称以匹配后端实体 -->
+    <el-table
+      v-loading="loading"
+      :data="tableListData"
+      border
+      show-summary
+      :summary-method="getSummaries">
+      <el-table-column label="序号" align="center" width="60" type="index">
+        <template slot-scope="scope">
+          <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
+        </template>
+      </el-table-column>
+      <!-- 货品编码 -->
+      <el-table-column label="货品编码" align="center" prop="materialCode" width="120" :show-overflow-tooltip="true"/>
+      <!-- 货品名称 -->
+      <el-table-column label="货品名称" align="center" prop="materialName" width="150" :show-overflow-tooltip="true"/>
+      <!-- 货品类别 -->
+      <el-table-column label="货品类别" align="center" prop="categoryName" width="120" :show-overflow-tooltip="true"/>
+      <!-- 计量单位 -->
+      <el-table-column label="计量单位" align="center" prop="unitName" width="100"/>
+      <!-- 货品规格 -->
+      <el-table-column label="货品规格" align="center" prop="size" width="120" :show-overflow-tooltip="true"/>
+      <!-- 所属区域 -->
+      <el-table-column label="所属区域" align="center" prop="areaName" width="120" :show-overflow-tooltip="true"/>
+      <!-- 所属仓库 -->
+      <el-table-column label="所属仓库" align="center" prop="warehouseName" width="120" :show-overflow-tooltip="true"/>
+      <!-- 入库数量 -->
+      <el-table-column label="入库数量" align="center" prop="intoTotalNum" width="100">
+        <template slot-scope="scope">
+          <span>{{ formatNumber(scope.row.intoTotalNum) }}</span>
+        </template>
+      </el-table-column>
+      <!-- 入库金额(元) -->
+      <el-table-column label="入库金额(元)" align="center" prop="intoTotalAmount" width="120">
+        <template slot-scope="scope">
+          <span>{{ formatMoney((scope.row.intoTotalAmount || 0) / 100) }}</span>
+        </template>
+      </el-table-column>
+      <!-- 入库总数量 -->
+      <el-table-column label="入库总数量" align="center" prop="intoTotalNum" width="120">
+        <template slot-scope="scope">
+          <span>{{ formatNumber(scope.row.intoTotalNum) }}</span>
+        </template>
+      </el-table-column>
+      <!-- 入库总金额(元) -->
+      <el-table-column label="入库总金额(元)" align="center" prop="intoTotalAmount" width="130">
+        <template slot-scope="scope">
+          <span>{{ formatMoney((scope.row.intoTotalAmount || 0) / 100) }}</span>
+        </template>
+      </el-table-column>
+      <!-- 出库数量 -->
+      <el-table-column label="出库数量" align="center" prop="outTotalNum" width="100">
+        <template slot-scope="scope">
+          <span>{{ formatNumber(scope.row.outTotalNum) }}</span>
+        </template>
+      </el-table-column>
+      <!-- 出库金额(元) -->
+      <el-table-column label="出库金额(元)" align="center" prop="outTotalAmount" width="120">
+        <template slot-scope="scope">
+          <span>{{ formatMoney((scope.row.outTotalAmount || 0) / 100) }}</span>
+        </template>
+      </el-table-column>
+      <!-- 出库总数量 -->
+      <el-table-column label="出库总数量" align="center" prop="outTotalNum" width="120">
+        <template slot-scope="scope">
+          <span>{{ formatNumber(scope.row.outTotalNum) }}</span>
+        </template>
+      </el-table-column>
+      <!-- 出库总金额(元) -->
+      <el-table-column label="出库总金额(元)" align="center" prop="outTotalAmount" width="130">
+        <template slot-scope="scope">
+          <span>{{ formatMoney((scope.row.outTotalAmount || 0) / 100) }}</span>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 分页组件 -->
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </div>
+</template>
+
+<script>
+// 导入区域树API
+import {getTreeArea} from "@/api/canteen/canteenRecord";
+// 导入库存入库相关API
+import {
+  listInventoryIntoDetail,
+  exportInventoryIntoDetail,
+  getWarehouseList,
+  getGoodsCategoryDict
+} from "@/api/report/inventoryhz";
+
+export default {
+  name: "InventoryIntoDetail",
+  dicts: [],
+  data() {
+    return {
+      // 合计数据
+      summaryData: null,
+
+      // 区域树选项
+      orgOptions: [],
+      selectedOrg: [], // 选中的区域
+
+      // 货品类别相关数据
+      goodsCategoryOptions: [], // 货品类别树形数据
+      selectedCategories: [], // 选中的货品类别路径数组
+      categoryProps: {
+        expandTrigger: 'hover',
+        value: 'id',
+        label: 'dictLabel',
+        children: 'children',
+        emitPath: true,
+        multiple: true
+      },
+
+      // 仓库下拉选项
+      wareHouseOptions: [],
+
+      // 遮罩层
+      loading: true,
+
+      // 显示搜索条件
+      showSearch: true,
+
+      // 总条数
+      total: 0,
+
+      // 表格数据
+      tableListData: [],
+
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        recordId: null, // 单据编号
+        categoryIdList: [], // 货品类别ID列表（包含所有子节点）
+        warehouseIdList: [], // 仓库ID列表
+        goodsName: null, // 货品名称
+        areaIdList: [], // 区域ID列表
+        startDate: null, // 开始日期
+        endDate: null // 结束日期
+      },
+
+      // 日期范围
+      dateRange: this.defaultDateRange(),
+
+      // 日期选择器快捷选项
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick: (picker) => {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
+            picker.$emit('pick', [this.formatDate(start), this.formatDate(end)]);
+          }
+        }, {
+          text: '最近一个月',
+          onClick: (picker) => {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+            picker.$emit('pick', [this.formatDate(start), this.formatDate(end)]);
+          }
+        }, {
+          text: '最近三个月',
+          onClick: (picker) => {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 91);
+            picker.$emit('pick', [this.formatDate(start), this.formatDate(end)]);
+          }
+        }]
+      }
+    };
+  },
+  created() {
+    // 初始化数据
+    this.getTree(); // 获取区域树
+    this.getWareHouseData(); // 获取仓库列表
+    this.getGoodsCategoryData(); // 获取货品类别树
+    this.getList(); // 获取列表数据
+  },
+  methods: {
+    /**
+     * 自定义合计计算方法
+     */
+    getSummaries(param) {
+      const { columns, data } = param;
+      const sums = [];
+
+      columns.forEach((column, index) => {
+        if (index === 0) {
+          // 第一列显示"合计"
+          sums[index] = '合计';
+          return;
+        }
+
+        // 根据列名判断需要合计的字段
+        const columnProp = column.property;
+        if (this.summaryData) {
+          switch(columnProp) {
+            case 'intoTotalNum':
+              sums[index] = this.formatNumber(this.summaryData.intoTotalNum || 0);
+              break;
+            case 'intoTotalAmount':
+              sums[index] = this.formatMoney((this.summaryData.intoTotalAmount || 0) / 100);
+              break;
+            case 'outTotalNum':
+              sums[index] = this.formatNumber(this.summaryData.outTotalNum || 0);
+              break;
+            case 'outTotalAmount':
+              sums[index] = this.formatMoney((this.summaryData.outTotalAmount || 0) / 100);
+              break;
+            default:
+              // 其他列显示空
+              sums[index] = '';
+              break;
+          }
+        } else {
+          sums[index] = '';
+        }
+      });
+
+      return sums;
+    },
+
+    // 保持其他方法不变
+    getGoodsCategoryData() {
+      getGoodsCategoryDict().then((response) => {
+        const data = response.data || response || [];
+        console.log('获取到的货品类别数据:', data);
+
+        // 如果后端返回的是平铺数据，需要转换为树形结构
+        if (data.length > 0 && !data[0].children) {
+          // 使用我们自己的构建树方法
+          this.goodsCategoryOptions = this.buildCategoryTree(data);
+        } else {
+          // 如果已经是树形结构，直接使用
+          this.goodsCategoryOptions = data;
+        }
+
+        console.log('转换后的货品类别树:', this.goodsCategoryOptions);
+      }).catch(error => {
+        console.error('获取货品类别失败:', error);
+        this.goodsCategoryOptions = [];
+      });
+    },
+
+    buildCategoryTree(list) {
+      // 创建根节点（原料和商品）
+      const tree = [];
+
+      // 1. 原料根节点
+      const materialRoot = {
+        id: 25595457052610560,
+        dictLabel: "原料",
+        parentId: -1,
+        children: []
+      };
+
+      // 2. 商品根节点
+      const goodsRoot = {
+        id: 65595542415085568,
+        dictLabel: "商品",
+        parentId: -1,
+        children: []
+      };
+
+      // 将数据按 parent_id 分组
+      const map = {};
+      list.forEach(item => {
+        if (!map[item.id]) {
+          map[item.id] = { ...item, children: [] };
+        }
+      });
+
+      // 构建树结构
+      list.forEach(item => {
+        if (item.parentId === 25595457052610560) {
+          const child = { ...item, children: [] };
+          materialRoot.children.push(child);
+          map[item.id] = child;
+        } else if (item.parentId === 65595542415085568) {
+          const child = { ...item, children: [] };
+          goodsRoot.children.push(child);
+          map[item.id] = child;
+        } else if (item.parentId !== -1 && map[item.parentId]) {
+          const child = { ...item, children: [] };
+          if (!map[item.parentId].children) {
+            map[item.parentId].children = [];
+          }
+          map[item.parentId].children.push(child);
+          map[item.id] = child;
+        }
+      });
+
+      tree.push(materialRoot, goodsRoot);
+      return tree;
+    },
+
+    handleCategoryChange(values) {
+      if (!values || values.length === 0) {
+        this.queryParams.categoryIdList = [];
+        return;
+      }
+      let allCategoryIds = [];
+      values.forEach(path => {
+        const selectedId = path[path.length - 1];
+        const node = this.findCategoryNodeById(selectedId, this.goodsCategoryOptions);
+        if (node) {
+          allCategoryIds.push(...this.getAllChildCategoryIds(node));
+        }
+      });
+
+      this.queryParams.categoryIdList = Array.from(new Set(allCategoryIds));
+
+      console.log("最终传给后台的 categoryIdList =", this.queryParams.categoryIdList);
+    },
+
+    findCategoryNodeById(id, options) {
+      for (const node of options) {
+        if (node.id === id) {
+          return node;
+        }
+        if (node.children && node.children.length > 0) {
+          const found = this.findCategoryNodeById(id, node.children);
+          if (found) return found;
+        }
+      }
+      return null;
+    },
+
+    getAllChildCategoryIds(node) {
+      if (!node) return [];
+
+      let ids = [node.id];
+
+      if (node.children && node.children.length > 0) {
+        node.children.forEach(child => {
+          ids = ids.concat(this.getAllChildCategoryIds(child));
+        });
+      }
+
+      return ids;
+    },
+
+    getSelectedOrgIds() {
+      if (!this.selectedOrg || this.selectedOrg.length === 0) return [];
+      const lastValue = this.selectedOrg[this.selectedOrg.length - 1];
+      // 找到对应节点
+      let stack = [...this.orgOptions];
+      let node = null;
+      for (let val of this.selectedOrg) {
+        node = stack.find(item => item.orgId === val);
+        if (!node) break;
+        stack = node.children || [];
+      }
+
+      if (node) {
+        return this.getAllChildIds(node, this.orgOptions);
+      }
+      return [lastValue];
+    },
+
+    getAllChildIds(node, options) {
+      let ids = [node.orgId]; // 当前节点
+      if (node.children && node.children.length > 0) {
+        node.children.forEach(child => {
+          ids = ids.concat(this.getAllChildIds(child, options)); // 递归获取子节点
+        });
+      }
+      return ids;
+    },
+
+    getTree() {
+      getTreeArea().then(res => {
+        this.orgOptions = res || [];
+      });
+    },
+
+    handleAreaChange() {
+      // 区域变化时，重新加载仓库列表
+      this.queryParams.warehouseIdList = [];
+      this.getWareHouseData();
+    },
+
+    handleWarehouseChange() {
+      // 可以在这里添加其他逻辑
+    },
+
+    getWareHouseData() {
+      const areaIdList = this.getSelectedOrgIds();
+
+      console.log("选中的 orgId 列表：", areaIdList, Array.isArray(areaIdList));
+
+      if (!areaIdList || !areaIdList.length) {
+        this.wareHouseOptions = [];
+        return;
+      }
+      getWarehouseList({
+        areaIdList: areaIdList.join(',')
+      }).then(res => {
+        this.wareHouseOptions = res.data || [];
+      });
+    },
+
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+
+    resetQuery() {
+      this.dateRange = this.defaultDateRange();
+      this.selectedOrg = [];
+      this.selectedCategories = [];
+      this.summaryData = null;
+      this.queryParams = {
+        pageNum: 1,
+        pageSize: 10,
+        recordId: null,
+        categoryIdList: [],
+        warehouseIdList: [],
+        goodsName: null,
+        areaIdList: [],
+        startDate: null,
+        endDate: null
+      };
+      this.resetForm("queryForm");
+      this.getWareHouseData();
+      this.handleQuery();
+    },
+
+    getList() {
+      this.loading = true;
+
+      // 获取选中的区域ID列表
+      this.queryParams.areaIdList = this.getSelectedOrgIds();
+
+      // 处理日期范围
+      if (this.dateRange && this.dateRange.length === 2) {
+        this.queryParams.startDate = this.dateRange[0];
+        this.queryParams.endDate = this.dateRange[1];
+      } else {
+        this.queryParams.startDate = null;
+        this.queryParams.endDate = null;
+      }
+      // 调用API查询
+      listInventoryIntoDetail(this.queryParams).then(response => {
+        const data = response.data || response;
+        this.tableListData = data.rows || [];
+        this.total = Number(data.total) || 0;
+        this.summaryData = data.summary || null;
+        console.log('合计数据:', this.summaryData);
+        this.loading = false;
+      }).catch(() => {
+        this.loading = false;
+      });
+    },
+
+    handleExport() {
+      // 处理日期范围
+      let startDate = '';
+      let endDate = '';
+
+      if (this.dateRange && this.dateRange.length === 2) {
+        const start = this.dateRange[0];
+        const end = this.dateRange[1];
+
+        startDate = start + ' 00:00:00';
+        endDate = end + ' 23:59:59';
+      }
+
+      // 构建参数
+      let param = {
+        pageNum: this.queryParams.pageNum,
+        pageSize: this.queryParams.pageSize,
+        recordId: this.queryParams.recordId,
+        categoryIdList: this.queryParams.categoryIdList,
+        warehouseIdList: this.queryParams.warehouseIdList,
+        materialName: this.queryParams.materialName,
+        areaIdList: this.getSelectedOrgIds(),
+        startDate: startDate,
+        endDate: endDate
+      };
+
+      // 使用download方法（参考另一个模块）
+      this.$modal.confirm('是否确认导出货品汇总明细数据项？').then(() => {
+        this.loading = true;
+
+        // 使用download方法
+        this.download(
+          '/smart-canteen/drp/inventoryIntohz/goods/summary/export',
+          param,
+          `货品库存明细_${new Date().getTime()}.xlsx`
+        ).then(() => {
+          this.loading = false;
+          this.$modal.msgSuccess("导出成功");
+        }).catch(error => {
+          this.loading = false;
+          console.error('导出失败:', error);
+          this.$modal.msgError("导出失败");
+        });
+      }).catch(() => {
+        // 用户取消
+      });
+    },
+
+    handlePrint() {
+      const printData = {
+        title: '库存入库明细表',
+        columns: [
+          { prop: 'materialCode', label: '货品编码', width: 120 },
+          { prop: 'materialName', label: '货品名称', width: 150 },
+          { prop: 'categoryName', label: '货品类别', width: 120 },
+          { prop: 'unitName', label: '计量单位', width: 100 },
+          { prop: 'size', label: '货品规格', width: 120 },
+          { prop: 'areaName', label: '所属区域', width: 120 },
+          { prop: 'warehouseName', label: '所属仓库', width: 120 },
+          { prop: 'intoTotalNum', label: '入库数量', width: 100 },
+          { prop: 'intoTotalAmount', label: '入库金额(元)', width: 120 },
+          { prop: 'intoTotalNum', label: '入库总数量', width: 120 },
+          { prop: 'intoTotalAmount', label: '入库总金额(元)', width: 130 },
+          { prop: 'outTotalNum', label: '出库数量', width: 100 },
+          { prop: 'outTotalAmount', label: '出库金额(元)', width: 120 },
+          { prop: 'outTotalNum', label: '出库总数量', width: 120 },
+          { prop: 'outTotalAmount', label: '出库总金额(元)', width: 130 }
+        ],
+        data: this.tableListData,
+        queryParams: this.queryParams
+      };
+
+      const printWindow = window.open('', '_blank');
+      const printContent = this.generatePrintHTML(printData);
+      printWindow.document.write(printContent);
+      printWindow.document.close();
+      printWindow.focus();
+      setTimeout(() => {
+        printWindow.print();
+        printWindow.close();
+      }, 500);
+    },
+
+    generatePrintHTML(printData) {
+      let html = `
+        <!DOCTYPE html>
+        <html>
+        <head>
+          <meta charset="UTF-8">
+          <title>${printData.title}</title>
+          <style>
+            body { font-family: "Microsoft YaHei", Arial, sans-serif; margin: 20px; }
+            h2 { text-align: center; margin-bottom: 20px; }
+            table { width: 100%; border-collapse: collapse; font-size: 12px; }
+            th, td { border: 1px solid #000; padding: 8px; text-align: center; }
+            th { background-color: #f0f0f0; font-weight: bold; }
+            .print-info { margin-bottom: 20px; font-size: 12px; }
+            @media print {
+              @page { size: landscape; margin: 10mm; }
+            }
+          </style>
+        </head>
+        <body>
+          <h2>${printData.title}</h2>
+          <div class="print-info">
+            <p>打印时间：${new Date().toLocaleString()}</p>
+            <p>共 ${printData.data.length} 条记录</p>
+          </div>
+          <table>
+            <thead>
+              <tr>
+      `;
+
+      printData.columns.forEach(col => {
+        html += `<th>${col.label}</th>`;
+      });
+
+      html += `
+              </tr>
+            </thead>
+            <tbody>
+      `;
+
+      printData.data.forEach(row => {
+        html += '<tr>';
+        printData.columns.forEach(col => {
+          let value = row[col.prop] || '-';
+          if (col.prop === 'intoTotalAmount' || col.prop === 'outTotalAmount') {
+            value = this.formatMoney((value || 0) / 100);
+          } else if (col.prop === 'intoTotalNum' || col.prop === 'outTotalNum') {
+            value = this.formatNumber(value);
+          }
+          html += `<td>${value}</td>`;
+        });
+        html += '</tr>';
+      });
+
+      html += `
+            </tbody>
+          </table>
+        </body>
+        </html>
+      `;
+
+      return html;
+    },
+
+    defaultDateRange() {
+      const end = new Date();
+      const start = new Date();
+      start.setTime(start.getTime() - 30 * 24 * 60 * 60 * 1000);
+      return [this.formatDate(start), this.formatDate(end)];
+    },
+
+    formatDate(date) {
+      if (!date) return '';
+      const d = new Date(date);
+      const year = d.getFullYear();
+      const month = String(d.getMonth() + 1).padStart(2, '0');
+      const day = String(d.getDate()).padStart(2, '0');
+      return `${year}-${month}-${day}`;
+    },
+
+    formatDateTime(date) {
+      if (!date) return '';
+      const d = new Date(date);
+      const year = d.getFullYear();
+      const month = String(d.getMonth() + 1).padStart(2, '0');
+      const day = String(d.getDate()).padStart(2, '0');
+      const hours = String(d.getHours()).padStart(2, '0');
+      const minutes = String(d.getMinutes()).padStart(2, '0');
+      return `${year}-${month}-${day} ${hours}:${minutes}`;
+    },
+
+    formatMoney(value) {
+      if (value === null || value === undefined || value === '') return '0.00';
+      return Number(value).toFixed(2);
+    },
+
+    formatNumber(value) {
+      if (value === null || value === undefined || value === '') return '0';
+      return Number(value);
+    }
+  }
+};
+</script>
+
+<style scoped>
+.app-container {
+  padding: 20px;
+}
+
+/* 合计行样式增强 */
+::v-deep .el-table__footer-wrapper tbody td {
+  background-color: #f5f7fa;
+  font-weight: bold;
+  color: #303133;
+}
+
+::v-deep .el-table__footer-wrapper tbody td:first-child {
+  font-weight: bold;
+  color: #409EFF;
+}
+
+/* 表格样式 */
+::v-deep .el-table__fixed-right td.blue-record-col .cell {
+  color: #1677ff !important;
+  font-weight: 600;
+}
+
+/* 调整表单样式 */
+::v-deep .el-form-item {
+  margin-bottom: 18px;
+}
+
+/* 调整按钮样式 */
+::v-deep .el-button {
+  margin-left: 0;
+}
+
+::v-deep .el-form-item__content {
+  line-height: 32px;
+}
+
+/* 调整表格样式 */
+::v-deep .el-table {
+  margin-top: 20px;
+}
+
+::v-deep .el-table th {
+  background-color: #f5f7fa;
+  color: #303133;
+}
+
+::v-deep .el-pagination {
+  margin-top: 15px;
+}
+</style>
diff --git a/src/views/inventoryCount/total/typeshop.vue b/src/views/inventoryCount/total/typeshop.vue
new file mode 100644
index 00000000..29dc9dbd
--- /dev/null
+++ b/src/views/inventoryCount/total/typeshop.vue
@@ -0,0 +1,800 @@
+<template>
+  <div class="app-container">
+    <!-- 查询表单部分保持不变 -->
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="90px">
+      <!-- 库存日期 -->
+      <el-form-item label="库存日期">
+        <el-date-picker
+          v-model="dateRange"
+          type="daterange"
+          align="right"
+          unlink-panels
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          format="yyyy-MM-dd"
+          value-format="yyyy-MM-dd"
+          style="width: 240px"
+          :picker-options="pickerOptions">
+        </el-date-picker>
+      </el-form-item>
+
+      <!-- 货品类别 - 级联多选 -->
+      <el-form-item label="货品类别">
+        <el-cascader
+          v-model="selectedCategories"
+          :options="goodsCategoryOptions"
+          :show-all-levels="false"
+          :props="categoryProps"
+          clearable
+          filterable
+          multiple
+          collapse-tags
+          placeholder="请选择货品类别"
+          style="width: 200px;"
+          @change="handleCategoryChange">
+        </el-cascader>
+
+      </el-form-item>
+
+      <!-- 所属区域 -->
+      <el-form-item label="所属区域">
+        <el-cascader
+          v-model="selectedOrg"
+          :options="orgOptions"
+          :show-all-levels="false"
+          clearable
+          filterable
+          placeholder="请选择所属区域"
+          :props="{
+            checkStrictly: true,
+            expandTrigger: 'hover',
+            value: 'orgId',
+            label: 'orgName',
+            children: 'children'
+          }"
+          style="width: 200px;"
+          @change="handleAreaChange">
+        </el-cascader>
+      </el-form-item>
+
+      <!-- 货品仓库 -->
+      <el-form-item label="货品仓库" prop="warehouseId">
+        <el-select
+          v-model="queryParams.warehouseIdList"
+          multiple
+          placeholder="请选择货品仓库"
+          clearable
+          style="width: 200px"
+          @change="handleWarehouseChange">
+          <el-option
+            v-for="item in wareHouseOptions"
+            :key="item.warehouseId"
+            :label="item.warehouseName"
+            :value="item.warehouseId">
+          </el-option>
+        </el-select>
+      </el-form-item>
+
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <!-- 操作按钮栏 -->
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+        >导出</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="info"
+          plain
+          icon="el-icon-printer"
+          size="mini"
+          @click="handlePrint"
+        >打印</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <!-- 数据表格 - 只修改字段名称以匹配后端实体 -->
+    <el-table
+      v-loading="loading"
+      :data="tableListData"
+      border
+      show-summary
+      :summary-method="getSummaries">
+      <el-table-column label="序号" align="center" width="60" type="index">
+        <template slot-scope="scope">
+          <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
+        </template>
+      </el-table-column>
+      <!-- 货品类别 -->
+      <el-table-column label="货品类别" align="center" prop="categoryName" width="120" :show-overflow-tooltip="true"/>
+      <!-- 所属区域 -->
+      <el-table-column label="所属区域" align="center" prop="areaName"   :show-overflow-tooltip="true"/>
+      <!-- 所属仓库 -->
+      <el-table-column label="所属仓库" align="center" prop="warehouseName"   :show-overflow-tooltip="true"/>
+      <!-- 入库数量 -->
+      <el-table-column label="入库数量" align="center" prop="intoTotalNum" width="100">
+        <template slot-scope="scope">
+          <span>{{ formatNumber(scope.row.intoTotalNum) }}</span>
+        </template>
+      </el-table-column>
+      <!-- 入库金额(元) -->
+      <el-table-column label="入库金额(元)" align="center" prop="intoTotalAmount" width="120">
+        <template slot-scope="scope">
+          <span>{{ formatMoney((scope.row.intoTotalAmount || 0) / 100) }}</span>
+        </template>
+      </el-table-column>
+      <!-- 入库总数量 -->
+      <el-table-column label="入库总数量" align="center" prop="intoTotalNum" width="120">
+        <template slot-scope="scope">
+          <span>{{ formatNumber(scope.row.intoTotalNum) }}</span>
+        </template>
+      </el-table-column>
+      <!-- 入库总金额(元) -->
+      <el-table-column label="入库总金额(元)" align="center" prop="intoTotalAmount" width="130">
+        <template slot-scope="scope">
+          <span>{{ formatMoney((scope.row.intoTotalAmount || 0) / 100) }}</span>
+        </template>
+      </el-table-column>
+      <!-- 出库数量 -->
+      <el-table-column label="出库数量" align="center" prop="outTotalNum" width="100">
+        <template slot-scope="scope">
+          <span>{{ formatNumber(scope.row.outTotalNum) }}</span>
+        </template>
+      </el-table-column>
+      <!-- 出库金额(元) -->
+      <el-table-column label="出库金额(元)" align="center" prop="outTotalAmount" width="120">
+        <template slot-scope="scope">
+          <span>{{ formatMoney((scope.row.outTotalAmount || 0) / 100) }}</span>
+        </template>
+      </el-table-column>
+      <!-- 出库总数量 -->
+      <el-table-column label="出库总数量" align="center" prop="outTotalNum" width="120">
+        <template slot-scope="scope">
+          <span>{{ formatNumber(scope.row.outTotalNum) }}</span>
+        </template>
+      </el-table-column>
+      <!-- 出库总金额(元) -->
+      <el-table-column label="出库总金额(元)" align="center" prop="outTotalAmount" width="130">
+        <template slot-scope="scope">
+          <span>{{ formatMoney((scope.row.outTotalAmount || 0) / 100) }}</span>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 分页组件 -->
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </div>
+</template>
+
+<script>
+// 导入区域树API
+import {getTreeArea} from "@/api/canteen/canteenRecord";
+// 导入库存入库相关API
+import {
+  listInventoryIntoDetail,
+  exportInventoryIntoDetail,
+  getWarehouseList,
+  getGoodsCategoryDict
+} from "@/api/report/inventoryhz";
+
+export default {
+  name: "InventoryIntoDetail",
+  dicts: [],
+  data() {
+    return {
+      // 合计数据
+      summaryData: null,
+
+      // 区域树选项
+      orgOptions: [],
+      selectedOrg: [], // 选中的区域
+
+      // 货品类别相关数据
+      goodsCategoryOptions: [], // 货品类别树形数据
+      selectedCategories: [], // 选中的货品类别路径数组
+      categoryProps: {
+        expandTrigger: 'hover',
+        value: 'id',
+        label: 'dictLabel',
+        children: 'children',
+        emitPath: true,
+        multiple: true
+      },
+
+      // 仓库下拉选项
+      wareHouseOptions: [],
+
+      // 遮罩层
+      loading: true,
+
+      // 显示搜索条件
+      showSearch: true,
+
+      // 总条数
+      total: 0,
+
+      // 表格数据
+      tableListData: [],
+
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        recordId: null, // 单据编号
+        categoryIdList: [], // 货品类别ID列表（包含所有子节点）
+        warehouseIdList: [], // 仓库ID列表
+        goodsName: null, // 货品名称
+        areaIdList: [], // 区域ID列表
+        startDate: null, // 开始日期
+        endDate: null // 结束日期
+      },
+
+      // 日期范围
+      dateRange: this.defaultDateRange(),
+
+      // 日期选择器快捷选项
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick: (picker) => {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
+            picker.$emit('pick', [this.formatDate(start), this.formatDate(end)]);
+          }
+        }, {
+          text: '最近一个月',
+          onClick: (picker) => {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+            picker.$emit('pick', [this.formatDate(start), this.formatDate(end)]);
+          }
+        }, {
+          text: '最近三个月',
+          onClick: (picker) => {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 91);
+            picker.$emit('pick', [this.formatDate(start), this.formatDate(end)]);
+          }
+        }]
+      }
+    };
+  },
+  created() {
+    // 初始化数据
+    this.getTree(); // 获取区域树
+    this.getWareHouseData(); // 获取仓库列表
+    this.getGoodsCategoryData(); // 获取货品类别树
+    this.getList(); // 获取列表数据
+  },
+  methods: {
+    /**
+     * 自定义合计计算方法
+     */
+    getSummaries(param) {
+      const { columns, data } = param;
+      const sums = [];
+
+      columns.forEach((column, index) => {
+        if (index === 0) {
+          // 第一列显示"合计"
+          sums[index] = '合计';
+          return;
+        }
+
+        // 根据列名判断需要合计的字段
+        const columnProp = column.property;
+        if (this.summaryData) {
+          switch(columnProp) {
+            case 'intoTotalNum':
+              sums[index] = this.formatNumber(this.summaryData.intoTotalNum || 0);
+              break;
+            case 'intoTotalAmount':
+              sums[index] = this.formatMoney((this.summaryData.intoTotalAmount || 0) / 100);
+              break;
+            case 'outTotalNum':
+              sums[index] = this.formatNumber(this.summaryData.outTotalNum || 0);
+              break;
+            case 'outTotalAmount':
+              sums[index] = this.formatMoney((this.summaryData.outTotalAmount || 0) / 100);
+              break;
+            default:
+              // 其他列显示空
+              sums[index] = '';
+              break;
+          }
+        } else {
+          sums[index] = '';
+        }
+      });
+
+      return sums;
+    },
+
+    // 保持其他方法不变
+    getGoodsCategoryData() {
+      getGoodsCategoryDict().then((response) => {
+        const data = response.data || response || [];
+        console.log('获取到的货品类别数据:', data);
+
+        // 如果后端返回的是平铺数据，需要转换为树形结构
+        if (data.length > 0 && !data[0].children) {
+          // 使用我们自己的构建树方法
+          this.goodsCategoryOptions = this.buildCategoryTree(data);
+        } else {
+          // 如果已经是树形结构，直接使用
+          this.goodsCategoryOptions = data;
+        }
+
+        console.log('转换后的货品类别树:', this.goodsCategoryOptions);
+      }).catch(error => {
+        console.error('获取货品类别失败:', error);
+        this.goodsCategoryOptions = [];
+      });
+    },
+
+    buildCategoryTree(list) {
+      // 创建根节点（原料和商品）
+      const tree = [];
+
+      // 1. 原料根节点
+      const materialRoot = {
+        id: 25595457052610560,
+        dictLabel: "原料",
+        parentId: -1,
+        children: []
+      };
+
+      // 2. 商品根节点
+      const goodsRoot = {
+        id: 65595542415085568,
+        dictLabel: "商品",
+        parentId: -1,
+        children: []
+      };
+
+      // 将数据按 parent_id 分组
+      const map = {};
+      list.forEach(item => {
+        if (!map[item.id]) {
+          map[item.id] = { ...item, children: [] };
+        }
+      });
+
+      // 构建树结构
+      list.forEach(item => {
+        if (item.parentId === 25595457052610560) {
+          const child = { ...item, children: [] };
+          materialRoot.children.push(child);
+          map[item.id] = child;
+        } else if (item.parentId === 65595542415085568) {
+          const child = { ...item, children: [] };
+          goodsRoot.children.push(child);
+          map[item.id] = child;
+        } else if (item.parentId !== -1 && map[item.parentId]) {
+          const child = { ...item, children: [] };
+          if (!map[item.parentId].children) {
+            map[item.parentId].children = [];
+          }
+          map[item.parentId].children.push(child);
+          map[item.id] = child;
+        }
+      });
+
+      tree.push(materialRoot, goodsRoot);
+      return tree;
+    },
+
+    handleCategoryChange(values) {
+      if (!values || values.length === 0) {
+        this.queryParams.categoryIdList = [];
+        return;
+      }
+      let allCategoryIds = [];
+      values.forEach(path => {
+        const selectedId = path[path.length - 1];
+        const node = this.findCategoryNodeById(selectedId, this.goodsCategoryOptions);
+        if (node) {
+          allCategoryIds.push(...this.getAllChildCategoryIds(node));
+        }
+      });
+
+      this.queryParams.categoryIdList = Array.from(new Set(allCategoryIds));
+
+      console.log("最终传给后台的 categoryIdList =", this.queryParams.categoryIdList);
+    },
+
+    findCategoryNodeById(id, options) {
+      for (const node of options) {
+        if (node.id === id) {
+          return node;
+        }
+        if (node.children && node.children.length > 0) {
+          const found = this.findCategoryNodeById(id, node.children);
+          if (found) return found;
+        }
+      }
+      return null;
+    },
+
+    getAllChildCategoryIds(node) {
+      if (!node) return [];
+
+      let ids = [node.id];
+
+      if (node.children && node.children.length > 0) {
+        node.children.forEach(child => {
+          ids = ids.concat(this.getAllChildCategoryIds(child));
+        });
+      }
+
+      return ids;
+    },
+
+    getSelectedOrgIds() {
+      if (!this.selectedOrg || this.selectedOrg.length === 0) return [];
+      const lastValue = this.selectedOrg[this.selectedOrg.length - 1];
+      // 找到对应节点
+      let stack = [...this.orgOptions];
+      let node = null;
+      for (let val of this.selectedOrg) {
+        node = stack.find(item => item.orgId === val);
+        if (!node) break;
+        stack = node.children || [];
+      }
+
+      if (node) {
+        return this.getAllChildIds(node, this.orgOptions);
+      }
+      return [lastValue];
+    },
+
+    getAllChildIds(node, options) {
+      let ids = [node.orgId]; // 当前节点
+      if (node.children && node.children.length > 0) {
+        node.children.forEach(child => {
+          ids = ids.concat(this.getAllChildIds(child, options)); // 递归获取子节点
+        });
+      }
+      return ids;
+    },
+
+    getTree() {
+      getTreeArea().then(res => {
+        this.orgOptions = res || [];
+      });
+    },
+
+    handleAreaChange() {
+      // 区域变化时，重新加载仓库列表
+      this.queryParams.warehouseIdList = [];
+      this.getWareHouseData();
+    },
+
+    handleWarehouseChange() {
+      // 可以在这里添加其他逻辑
+    },
+
+    getWareHouseData() {
+      const areaIdList = this.getSelectedOrgIds();
+
+      console.log("选中的 orgId 列表：", areaIdList, Array.isArray(areaIdList));
+
+      if (!areaIdList || !areaIdList.length) {
+        this.wareHouseOptions = [];
+        return;
+      }
+      getWarehouseList({
+        areaIdList: areaIdList.join(',')
+      }).then(res => {
+        this.wareHouseOptions = res.data || [];
+      });
+    },
+
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+
+    resetQuery() {
+      this.dateRange = this.defaultDateRange();
+      this.selectedOrg = [];
+      this.selectedCategories = [];
+      this.summaryData = null;
+      this.queryParams = {
+        pageNum: 1,
+        pageSize: 10,
+        recordId: null,
+        categoryIdList: [],
+        warehouseIdList: [],
+        goodsName: null,
+        areaIdList: [],
+        startDate: null,
+        endDate: null
+      };
+      this.resetForm("queryForm");
+      this.getWareHouseData();
+      this.handleQuery();
+    },
+
+    getList() {
+      this.loading = true;
+
+      // 获取选中的区域ID列表
+      this.queryParams.areaIdList = this.getSelectedOrgIds();
+
+      // 处理日期范围
+      if (this.dateRange && this.dateRange.length === 2) {
+        this.queryParams.startDate = this.dateRange[0];
+        this.queryParams.endDate = this.dateRange[1];
+      } else {
+        this.queryParams.startDate = null;
+        this.queryParams.endDate = null;
+      }
+      // 调用API查询
+      listInventoryIntoDetail(this.queryParams).then(response => {
+        const data = response.data || response;
+        this.tableListData = data.rows || [];
+        this.total = Number(data.total) || 0;
+        this.summaryData = data.summary || null;
+        console.log('合计数据:', this.summaryData);
+        this.loading = false;
+      }).catch(() => {
+        this.loading = false;
+      });
+    },
+
+    handleExport() {
+      // 处理日期范围
+      let startDate = '';
+      let endDate = '';
+
+      if (this.dateRange && this.dateRange.length === 2) {
+        const start = this.dateRange[0];
+        const end = this.dateRange[1];
+
+        startDate = start + ' 00:00:00';
+        endDate = end + ' 23:59:59';
+      }
+
+      // 构建参数
+      let param = {
+        pageNum: this.queryParams.pageNum,
+        pageSize: this.queryParams.pageSize,
+        recordId: this.queryParams.recordId,
+        categoryIdList: this.queryParams.categoryIdList,
+        warehouseIdList: this.queryParams.warehouseIdList,
+        materialName: this.queryParams.materialName,
+        areaIdList: this.getSelectedOrgIds(),
+        startDate: startDate,
+        endDate: endDate
+      };
+
+      // 使用download方法（参考另一个模块）
+      this.$modal.confirm('是否确认导出货品汇总明细数据项？').then(() => {
+        this.loading = true;
+
+        // 使用download方法
+        this.download(
+          '/smart-canteen/drp/inventoryIntohz/goods/summary/export',
+          param,
+          `货品库存明细_${new Date().getTime()}.xlsx`
+        ).then(() => {
+          this.loading = false;
+          this.$modal.msgSuccess("导出成功");
+        }).catch(error => {
+          this.loading = false;
+          console.error('导出失败:', error);
+          this.$modal.msgError("导出失败");
+        });
+      }).catch(() => {
+        // 用户取消
+      });
+    },
+
+    handlePrint() {
+      const printData = {
+        title: '库存入库明细表',
+        columns: [
+          { prop: 'categoryName', label: '货品类别', width: 120 },
+          { prop: 'areaName', label: '所属区域', width: 120 },
+          { prop: 'warehouseName', label: '所属仓库', width: 120 },
+          { prop: 'intoTotalNum', label: '入库数量', width: 100 },
+          { prop: 'intoTotalAmount', label: '入库金额(元)', width: 120 },
+          { prop: 'intoTotalNum', label: '入库总数量', width: 120 },
+          { prop: 'intoTotalAmount', label: '入库总金额(元)', width: 130 },
+          { prop: 'outTotalNum', label: '出库数量', width: 100 },
+          { prop: 'outTotalAmount', label: '出库金额(元)', width: 120 },
+          { prop: 'outTotalNum', label: '出库总数量', width: 120 },
+          { prop: 'outTotalAmount', label: '出库总金额(元)', width: 130 }
+        ],
+        data: this.tableListData,
+        queryParams: this.queryParams
+      };
+
+      const printWindow = window.open('', '_blank');
+      const printContent = this.generatePrintHTML(printData);
+      printWindow.document.write(printContent);
+      printWindow.document.close();
+      printWindow.focus();
+      setTimeout(() => {
+        printWindow.print();
+        printWindow.close();
+      }, 500);
+    },
+
+    generatePrintHTML(printData) {
+      let html = `
+        <!DOCTYPE html>
+        <html>
+        <head>
+          <meta charset="UTF-8">
+          <title>${printData.title}</title>
+          <style>
+            body { font-family: "Microsoft YaHei", Arial, sans-serif; margin: 20px; }
+            h2 { text-align: center; margin-bottom: 20px; }
+            table { width: 100%; border-collapse: collapse; font-size: 12px; }
+            th, td { border: 1px solid #000; padding: 8px; text-align: center; }
+            th { background-color: #f0f0f0; font-weight: bold; }
+            .print-info { margin-bottom: 20px; font-size: 12px; }
+            @media print {
+              @page { size: landscape; margin: 10mm; }
+            }
+          </style>
+        </head>
+        <body>
+          <h2>${printData.title}</h2>
+          <div class="print-info">
+            <p>打印时间：${new Date().toLocaleString()}</p>
+            <p>共 ${printData.data.length} 条记录</p>
+          </div>
+          <table>
+            <thead>
+              <tr>
+      `;
+
+      printData.columns.forEach(col => {
+        html += `<th>${col.label}</th>`;
+      });
+
+      html += `
+              </tr>
+            </thead>
+            <tbody>
+      `;
+
+      printData.data.forEach(row => {
+        html += '<tr>';
+        printData.columns.forEach(col => {
+          let value = row[col.prop] || '-';
+          if (col.prop === 'intoTotalAmount' || col.prop === 'outTotalAmount') {
+            value = this.formatMoney((value || 0) / 100);
+          } else if (col.prop === 'intoTotalNum' || col.prop === 'outTotalNum') {
+            value = this.formatNumber(value);
+          }
+          html += `<td>${value}</td>`;
+        });
+        html += '</tr>';
+      });
+
+      html += `
+            </tbody>
+          </table>
+        </body>
+        </html>
+      `;
+
+      return html;
+    },
+
+    defaultDateRange() {
+      const end = new Date();
+      const start = new Date();
+      start.setTime(start.getTime() - 30 * 24 * 60 * 60 * 1000);
+      return [this.formatDate(start), this.formatDate(end)];
+    },
+
+    formatDate(date) {
+      if (!date) return '';
+      const d = new Date(date);
+      const year = d.getFullYear();
+      const month = String(d.getMonth() + 1).padStart(2, '0');
+      const day = String(d.getDate()).padStart(2, '0');
+      return `${year}-${month}-${day}`;
+    },
+
+    formatDateTime(date) {
+      if (!date) return '';
+      const d = new Date(date);
+      const year = d.getFullYear();
+      const month = String(d.getMonth() + 1).padStart(2, '0');
+      const day = String(d.getDate()).padStart(2, '0');
+      const hours = String(d.getHours()).padStart(2, '0');
+      const minutes = String(d.getMinutes()).padStart(2, '0');
+      return `${year}-${month}-${day} ${hours}:${minutes}`;
+    },
+
+    formatMoney(value) {
+      if (value === null || value === undefined || value === '') return '0.00';
+      return Number(value).toFixed(2);
+    },
+
+    formatNumber(value) {
+      if (value === null || value === undefined || value === '') return '0';
+      return Number(value);
+    }
+  }
+};
+</script>
+
+<style scoped>
+.app-container {
+  padding: 20px;
+}
+
+/* 合计行样式增强 */
+::v-deep .el-table__footer-wrapper tbody td {
+  background-color: #f5f7fa;
+  font-weight: bold;
+  color: #303133;
+}
+
+::v-deep .el-table__footer-wrapper tbody td:first-child {
+  font-weight: bold;
+  color: #409EFF;
+}
+
+/* 表格样式 */
+::v-deep .el-table__fixed-right td.blue-record-col .cell {
+  color: #1677ff !important;
+  font-weight: 600;
+}
+
+/* 调整表单样式 */
+::v-deep .el-form-item {
+  margin-bottom: 18px;
+}
+
+/* 调整按钮样式 */
+::v-deep .el-button {
+  margin-left: 0;
+}
+
+::v-deep .el-form-item__content {
+  line-height: 32px;
+}
+
+/* 调整表格样式 */
+::v-deep .el-table {
+  margin-top: 20px;
+}
+
+::v-deep .el-table th {
+  background-color: #f5f7fa;
+  color: #303133;
+}
+
+::v-deep .el-pagination {
+  margin-top: 15px;
+}
+</style>