From 371ef0252a66678f0257d152e54539f867e9262c Mon Sep 17 00:00:00 2001
From: fengyuan_yang <1976974459@qq.com>
Date: Fri, 9 Jan 2026 16:46:29 +0800
Subject: [PATCH] =?UTF-8?q?2026-01-09=20=E6=96=B0=E5=A2=9E=E6=94=B6?=
 =?UTF-8?q?=E8=B4=A7=E5=85=A5=E5=BA=93=E4=BB=BB=E5=8A=A1=E3=80=81=E6=8B=A3?=
 =?UTF-8?q?=E8=B4=A7=E5=87=BA=E5=BA=93=E4=BB=BB=E5=8A=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/report/inboundNotificationReport.js   |  14 +
 src/api/report/outboundNotificationReport.js  |  14 +
 .../report/inboundNotificationReport.vue      | 670 +++++++++++++++++
 .../report/outboundNotificationReport.vue     | 685 ++++++++++++++++++
 4 files changed, 1383 insertions(+)
 create mode 100644 src/api/report/inboundNotificationReport.js
 create mode 100644 src/api/report/outboundNotificationReport.js
 create mode 100644 src/views/modules/report/inboundNotificationReport.vue
 create mode 100644 src/views/modules/report/outboundNotificationReport.vue

diff --git a/src/api/report/inboundNotificationReport.js b/src/api/report/inboundNotificationReport.js
new file mode 100644
index 0000000..dd64a33
--- /dev/null
+++ b/src/api/report/inboundNotificationReport.js
@@ -0,0 +1,14 @@
+import { createAPI } from "@/utils/httpRequest.js";
+
+// -------------收货入库任务报表--------------
+
+/**
+ * 查询收货入库任务报表数据（分页）
+ * @param {Object} data 查询条件
+ */
+export const searchInboundNotificationReport = data => createAPI(`/report/inboundNotificationReport/list`, 'post', data);
+
+/**
+ * 获取用户可访问的site列表
+ */
+export const getSiteList = () => createAPI(`/report/inboundNotificationReport/getSiteList`, 'get');
diff --git a/src/api/report/outboundNotificationReport.js b/src/api/report/outboundNotificationReport.js
new file mode 100644
index 0000000..29997b6
--- /dev/null
+++ b/src/api/report/outboundNotificationReport.js
@@ -0,0 +1,14 @@
+import { createAPI } from "@/utils/httpRequest.js";
+
+// -------------拣货出库任务报表--------------
+
+/**
+ * 查询拣货出库任务报表数据（分页）
+ * @param {Object} data 查询条件
+ */
+export const searchOutboundNotificationReport = data => createAPI(`/report/outboundNotificationReport/list`, 'post', data);
+
+/**
+ * 获取用户可访问的site列表
+ */
+export const getSiteList = () => createAPI(`/report/outboundNotificationReport/getSiteList`, 'get');
diff --git a/src/views/modules/report/inboundNotificationReport.vue b/src/views/modules/report/inboundNotificationReport.vue
new file mode 100644
index 0000000..2540074
--- /dev/null
+++ b/src/views/modules/report/inboundNotificationReport.vue
@@ -0,0 +1,670 @@
+<template>
+  <div class="mod-config">
+    <!-- 条件查询 -->
+    <el-card :class="['search-card', { 'collapsed': !searchExpanded }]" shadow="hover">
+      <div slot="header" class="search-header">
+        <div class="header-left">
+          <i class="el-icon-search"></i>
+          <span class="header-title">收货入库任务</span>
+        </div>
+        <div class="header-right">
+          <el-button
+            type="text"
+            size="small"
+            @click="toggleSearchExpand"
+            class="collapse-btn">
+            <i :class="searchExpanded ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
+            {{ searchExpanded ? '收起' : '展开' }}
+          </el-button>
+        </div>
+      </div>
+
+      <el-form
+        :inline="true"
+        label-position="top"
+        :model="searchData"
+        class="search-form"
+        @keyup.enter.native="getData">
+
+        <!-- 所有查询条件 - 可展开/收起 -->
+        <template v-if="searchExpanded">
+          <!-- 第一行 -->
+          <el-row :gutter="16">
+            <el-col :span="4">
+              <el-form-item label="工厂编码">
+                <el-select v-model="searchData.site" placeholder="请选择工厂" clearable filterable style="width: 100%">
+                  <el-option
+                    v-for="item in siteList"
+                    :key="item"
+                    :label="item"
+                    :value="item">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="4">
+              <el-form-item label="入库单号">
+                <el-input v-model="searchData.orderNo" placeholder="请输入入库单号" clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="4">
+              <el-form-item label="单据类型">
+                <el-select v-model="searchData.orderType" placeholder="请选择单据类型" clearable style="width: 100%">
+                  <el-option label="全部" value=""></el-option>
+                  <el-option label="采购入库" value="采购入库"></el-option>
+                  <el-option label="生产入库" value="生产入库"></el-option>
+                  <el-option label="其他入库" value="其他入库"></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="4">
+              <el-form-item label="单据状态">
+                <el-select v-model="searchData.orderStatus" placeholder="请选择单据状态" clearable style="width: 100%">
+                  <el-option label="全部" value=""></el-option>
+                  <el-option label="草稿" value="草稿"></el-option>
+                  <el-option label="编辑中" value="编辑中"></el-option>
+                  <el-option label="待入库" value="待入库"></el-option>
+                  <el-option label="已入库" value="已入库"></el-option>
+                  <el-option label="已关闭" value="已关闭"></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="4">
+              <el-form-item label="供应商编码">
+                <el-input v-model="searchData.supplierId" placeholder="请输入供应商编码" clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="4">
+              <el-form-item label="供应商名称">
+                <el-input v-model="searchData.supplierName" placeholder="请输入供应商名称" clearable></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <!-- 第二行 -->
+          <el-row :gutter="16">
+            <el-col :span="4">
+              <el-form-item label="物料编码">
+                <el-input v-model="searchData.partNo" placeholder="请输入物料编码" clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="4">
+              <el-form-item label="物料名称">
+                <el-input v-model="searchData.partDesc" placeholder="请输入物料名称" clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="4">
+              <el-form-item label="要求入库日期(起)">
+                <el-date-picker
+                  v-model="searchData.startDate"
+                  type="date"
+                  placeholder="开始日期"
+                  value-format="yyyy-MM-dd"
+                  style="width: 100%">
+                </el-date-picker>
+              </el-form-item>
+            </el-col>
+            <el-col :span="4">
+              <el-form-item label="要求入库日期(止)">
+                <el-date-picker
+                  v-model="searchData.endDate"
+                  type="date"
+                  placeholder="结束日期"
+                  value-format="yyyy-MM-dd"
+                  style="width: 100%">
+                </el-date-picker>
+              </el-form-item>
+            </el-col>
+            <el-col :span="4">
+              <el-form-item label="关联单号">
+                <el-input v-model="searchData.queryRelatedOrderNo" placeholder="请输入关联单号" clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="4">
+              <el-form-item label="关联单行号">
+                <el-input v-model="searchData.queryRelatedOrderLineNo" placeholder="请输入关联单行号" clearable></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </template>
+
+        <!-- 操作按钮区域 -->
+        <el-row :gutter="16">
+          <el-col :span="24">
+            <div class="search-actions">
+              <div class="action-left">
+                <el-button
+                  type="primary"
+                  icon="el-icon-search"
+                  :loading="searchLoading"
+                  @click="getData">
+                  查询
+                </el-button>
+                <el-button
+                  icon="el-icon-refresh-left"
+                  @click="resetSearch">
+                  重置
+                </el-button>
+                <download-excel
+                  :fields="exportFields"
+                  :data="dataList"
+                  type="xls"
+                  name="收货入库任务"
+                  worksheet="数据"
+                  class="el-button el-button--success el-button--medium">
+                  <i class="el-icon-download"></i> 导出
+                </download-excel>
+              </div>
+            </div>
+          </el-col>
+        </el-row>
+      </el-form>
+    </el-card>
+
+    <!-- 数据列表 -->
+    <div class="section-title-bar">
+      <i class="el-icon-document"></i>
+      <span>收货入库任务列表</span>
+      <span class="total-count">（共 {{ totalPage }} 条）</span>
+    </div>
+    <el-table
+      ref="dataTable"
+      :height="tableHeight"
+      :data="dataList"
+      border
+      v-loading="dataListLoading"
+      style="width: 100%;">
+      <el-table-column
+        type="index"
+        header-align="center"
+        align="center"
+        width="60"
+        label="序号">
+      </el-table-column>
+      <el-table-column
+        v-for="(item, index) in columnList"
+        :key="index"
+        :sortable="item.columnSortable"
+        :prop="item.columnProp"
+        :header-align="item.headerAlign"
+        :show-overflow-tooltip="item.columnProp !== 'completionRate'"
+        :align="item.align"
+        :min-width="item.columnWidth"
+        :label="item.columnLabel">
+        <template slot-scope="scope">
+          <!-- 完成率列使用进度条显示 -->
+          <template v-if="item.columnProp === 'completionRate'">
+            <el-progress
+              :percentage="parseCompletionRate(scope.row.completionRate)"
+              :color="getProgressColor(parseCompletionRate(scope.row.completionRate))"
+              :stroke-width="16"
+              :text-inside="true"
+              style="width: 100%;">
+            </el-progress>
+          </template>
+          <!-- 其他列正常显示 -->
+          <template v-else>
+            <span
+              :class="{
+                'status-pending': scope.row[item.columnProp] === '待入库',
+                'status-done': scope.row[item.columnProp] === '已入库',
+                'status-closed': scope.row[item.columnProp] === '已关闭',
+                'status-draft': scope.row[item.columnProp] === '草稿' || scope.row[item.columnProp] === '编辑中'
+              }">
+              {{ scope.row[item.columnProp] }}
+            </span>
+          </template>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      style="margin-top: 0px"
+      @size-change="sizeChangeHandle"
+      @current-change="currentChangeHandle"
+      :current-page="pageIndex"
+      :page-sizes="[20, 50, 100, 200, 500]"
+      :page-size="pageSize"
+      :total="totalPage"
+      layout="total, sizes, prev, pager, next, jumper">
+    </el-pagination>
+  </div>
+</template>
+
+<script>
+import { searchInboundNotificationReport, getSiteList } from "@/api/report/inboundNotificationReport.js";
+
+export default {
+  name: "inboundNotificationReport",
+  data() {
+    return {
+      // 搜索条件
+      searchData: {
+        site: '',
+        orderNo: '',
+        orderType: '',
+        orderStatus: '待入库',
+        supplierId: '',
+        supplierName: '',
+        partNo: '',
+        partDesc: '',
+        startDate: '',
+        endDate: '',
+        queryRelatedOrderNo: '',
+        queryRelatedOrderLineNo: ''
+      },
+      // Site列表
+      siteList: [],
+      // 搜索展开状态
+      searchExpanded: true,
+      // 加载状态
+      searchLoading: false,
+      dataListLoading: false,
+      // 数据列表
+      dataList: [],
+      // 分页
+      pageIndex: 1,
+      pageSize: 50,
+      totalPage: 0,
+      // 表格高度
+      tableHeight: 400,
+      // 列定义
+      columnList: [
+        { columnProp: 'orderNo', columnLabel: '入库单号', columnWidth: '150', headerAlign: 'center', align: 'left' },
+        { columnProp: 'orderType', columnLabel: '单据类型', columnWidth: '100', headerAlign: 'center', align: 'center' },
+        { columnProp: 'orderStatus', columnLabel: '单据状态', columnWidth: '100', headerAlign: 'center', align: 'center' },
+        { columnProp: 'completionRate', columnLabel: '完成率', columnWidth: '120', headerAlign: 'center', align: 'center' },
+        { columnProp: 'supplierId', columnLabel: '供应商编码', columnWidth: '120', headerAlign: 'center', align: 'left' },
+        { columnProp: 'supplierName', columnLabel: '供应商名称', columnWidth: '150', headerAlign: 'center', align: 'left' },
+        { columnProp: 'requiredInboundDate', columnLabel: '要求入库日期', columnWidth: '120', headerAlign: 'center', align: 'center' },
+        { columnProp: 'detailRelatedOrderNo', columnLabel: '关联单号', columnWidth: '150', headerAlign: 'center', align: 'left' },
+        { columnProp: 'detailRelatedOrderLineNo', columnLabel: '关联单行号', columnWidth: '100', headerAlign: 'center', align: 'left' },
+        { columnProp: 'inWarehouseName', columnLabel: '入库仓库', columnWidth: '100', headerAlign: 'center', align: 'center' },
+        { columnProp: 'detailPartNo', columnLabel: '物料编码', columnWidth: '150', headerAlign: 'center', align: 'left' },
+        { columnProp: 'detailPartDesc', columnLabel: '物料名称', columnWidth: '200', headerAlign: 'center', align: 'left' },
+        { columnProp: 'umName', columnLabel: '单位', columnWidth: '80', headerAlign: 'center', align: 'center' },
+        { columnProp: 'requiredQty', columnLabel: '要求数量', columnWidth: '100', headerAlign: 'center', align: 'right' },
+        { columnProp: 'actualInQty', columnLabel: '实际入库数量', columnWidth: '120', headerAlign: 'center', align: 'right' },
+        { columnProp: 'rollNo', columnLabel: '卷标签', columnWidth: '150', headerAlign: 'center', align: 'left' },
+        { columnProp: 'inBatchNo', columnLabel: '批次号', columnWidth: '120', headerAlign: 'center', align: 'left' },
+        { columnProp: 'detailInWarehouseName', columnLabel: '明细入库仓库', columnWidth: '120', headerAlign: 'center', align: 'center' },
+        { columnProp: 'createdBy', columnLabel: '创建人', columnWidth: '100', headerAlign: 'center', align: 'center' },
+        { columnProp: 'createdDate', columnLabel: '创建时间', columnWidth: '150', headerAlign: 'center', align: 'center' },
+        { columnProp: 'remarks', columnLabel: '备注', columnWidth: '200', headerAlign: 'center', align: 'left' }
+      ],
+      // 导出字段
+      exportFields: {
+        '入库单号': 'orderNo',
+        '单据类型': 'orderType',
+        '单据状态': 'orderStatus',
+        '完成率': 'completionRate',
+        '供应商编码': 'supplierId',
+        '供应商名称': 'supplierName',
+        '要求入库日期': 'requiredInboundDate',
+        '关联单号': 'relatedOrderNo',
+        '入库仓库': 'inWarehouseName',
+        '物料编码': 'detailPartNo',
+        '物料名称': 'detailPartDesc',
+        '单位': 'umName',
+        '要求数量': 'requiredQty',
+        '实际入库数量': 'actualInQty',
+        '卷标签': 'rollNo',
+        '批次号': 'inBatchNo',
+        '明细入库仓库': 'detailInWarehouseName',
+        '创建人': 'createdBy',
+        '创建时间': 'createdDate',
+        '备注': 'remarks'
+      }
+    };
+  },
+  created() {
+    this.getSiteList();
+    this.calculateTableHeight();
+    window.addEventListener('resize', this.calculateTableHeight);
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.calculateTableHeight);
+  },
+  methods: {
+    // 计算表格高度
+    calculateTableHeight() {
+      this.$nextTick(() => {
+        const windowHeight = window.innerHeight;
+        // 根据搜索条件展开状态动态计算
+        const headerHeight = this.searchExpanded ? 308 : 186;
+        this.tableHeight = windowHeight - headerHeight - 105;
+      });
+    },
+    // 切换搜索展开/收起
+    toggleSearchExpand() {
+      this.searchExpanded = !this.searchExpanded;
+      this.calculateTableHeight();
+    },
+    // 获取Site列表
+    getSiteList() {
+      getSiteList().then(({ data }) => {
+        if (data && data.code === 0) {
+          this.siteList = data.siteList || [];
+          // 如果有权限的site，默认选择第一个
+          if (this.siteList.length > 0) {
+            this.searchData.site = this.siteList[0];
+          }
+        }
+      }).catch(err => {
+        console.error('获取Site列表失败:', err);
+      });
+    },
+    // 查询数据
+    getData() {
+      this.searchLoading = true;
+      this.dataListLoading = true;
+
+      const params = {
+        ...this.searchData,
+        page: this.pageIndex,
+        limit: this.pageSize
+      };
+
+      searchInboundNotificationReport(params).then(({ data }) => {
+        this.searchLoading = false;
+        this.dataListLoading = false;
+        if (data && data.code === 0) {
+          this.dataList = data.page.list || [];
+          this.totalPage = data.page.totalCount || 0;
+        } else {
+          this.dataList = [];
+          this.totalPage = 0;
+          this.$message.error(data.msg || '查询失败');
+        }
+      }).catch(err => {
+        console.error(err);
+        this.searchLoading = false;
+        this.dataListLoading = false;
+        this.$message.error('查询异常：' + err.message);
+      });
+    },
+    // 重置搜索条件
+    resetSearch() {
+      this.searchData = {
+        site: this.siteList.length > 0 ? this.siteList[0] : '',
+        orderNo: '',
+        orderType: '',
+        orderStatus: '待入库',
+        supplierId: '',
+        supplierName: '',
+        partNo: '',
+        partDesc: '',
+        startDate: '',
+        endDate: '',
+        queryRelatedOrderNo: '',
+        queryRelatedOrderLineNo: ''
+      };
+      this.pageIndex = 1;
+    },
+    // 分页处理
+    sizeChangeHandle(val) {
+      this.pageSize = val;
+      this.pageIndex = 1;
+      this.getData();
+    },
+    currentChangeHandle(val) {
+      this.pageIndex = val;
+      this.getData();
+    },
+    // 解析完成率字符串为数字
+    parseCompletionRate(rateStr) {
+      if (!rateStr) return 0;
+      const num = parseFloat(rateStr.replace('%', ''));
+      return isNaN(num) ? 0 : Math.min(num, 100);
+    },
+    // 根据完成率获取进度条颜色
+    getProgressColor(percentage) {
+      if (percentage >= 100) {
+        return '#67C23A'; // 绿色 - 已完成
+      } else if (percentage >= 80) {
+        return '#409EFF'; // 蓝色 - 接近完成
+      } else if (percentage >= 50) {
+        return '#E6A23C'; // 橙色 - 进行中
+      } else {
+        return '#F56C6C'; // 红色 - 刚开始
+      }
+    }
+  }
+};
+</script>
+
+<style scoped>
+/* 搜索卡片样式 */
+.search-card {
+  margin-bottom: 16px;
+  border-radius: 8px;
+  overflow: hidden;
+  transition: all 0.3s ease;
+}
+
+.search-card:hover {
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+}
+
+.search-card /deep/ .el-card__header {
+  padding: 5px 20px;
+  background: linear-gradient(135deg, #9ac3d0 20%, #b6c7dd 80%);
+  border-bottom: none;
+}
+
+.search-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  color: #fff;
+}
+
+.header-left i {
+  font-size: 16px;
+  margin-right: 8px;
+}
+
+.header-title {
+  font-size: 14px;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+}
+
+.header-right {
+  color: #fff;
+}
+
+.collapse-btn {
+  color: #fff;
+  font-weight: 500;
+  transition: all 0.3s ease;
+}
+
+.collapse-btn:hover {
+  color: #f0f0f0;
+  transform: translateY(-1px);
+}
+
+.collapse-btn i {
+  transition: transform 0.3s ease;
+}
+
+/* 搜索表单样式 */
+.search-form {
+  padding: 6px 0;
+  min-height: 0;
+}
+
+/* 卡片主体样式 */
+.search-card /deep/ .el-card__body {
+  padding: 10px;
+  transition: all 0.3s ease;
+}
+
+/* 收起时的样式 */
+.search-card.collapsed /deep/ .el-card__body {
+  padding: 10px 20px;
+}
+
+.search-form /deep/ .el-form-item {
+  margin-bottom: 12px;
+}
+
+.search-form /deep/ .el-form-item__label {
+  font-weight: 500;
+  color: #606266;
+  padding-bottom: 4px;
+}
+
+.search-form /deep/ .el-input__inner,
+.search-form /deep/ .el-textarea__inner {
+  border-radius: 6px;
+  border: 1px solid #DCDFE6;
+  transition: all 0.3s ease;
+}
+
+.search-form /deep/ .el-input__inner:focus,
+.search-form /deep/ .el-textarea__inner:focus {
+  border-color: #9ac3d0;
+  box-shadow: 0 0 0 2px rgba(154, 195, 208, 0.1);
+}
+
+.search-form /deep/ .el-select {
+  width: 100%;
+}
+
+/* 操作按钮区域 */
+.search-actions {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 0 2px 0;
+}
+
+/* 展开时显示上边框 */
+.search-card:not(.collapsed) .search-actions {
+  border-top: 1px solid #f0f0f0;
+  margin-top: 6px;
+}
+
+/* 收起时不显示上边框和上边距 */
+.search-card.collapsed .search-actions {
+  border-top: none;
+  margin-top: 0;
+  padding-top: 0;
+}
+
+.action-left {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.search-actions .el-button {
+  border-radius: 4px;
+  padding: 5px 10px;
+  font-size: 12px;
+  font-weight: 500;
+  transition: all 0.3s ease;
+}
+
+.search-actions .el-button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.search-actions .el-button--primary {
+  background: #60aeff;
+  border-color: #60aeff;
+}
+
+.search-actions .el-button--primary:hover {
+  background: #7dbdff;
+  border-color: #7dbdff;
+}
+
+.search-actions .el-button--success {
+  background: #67C23A;
+  border-color: #67C23A;
+}
+
+.search-actions .el-button--success:hover {
+  background: #85ce61;
+  border-color: #85ce61;
+}
+
+/* 区域标题栏样式 */
+.section-title-bar {
+  display: flex;
+  align-items: center;
+  padding: 8px 12px;
+  background: linear-gradient(135deg, #f5f7fa 0%, #e4e7eb 100%);
+  border-radius: 4px;
+  margin-bottom: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.section-title-bar i {
+  font-size: 16px;
+  margin-right: 8px;
+  color: #409eff;
+}
+
+.section-title-bar .total-count {
+  margin-left: 10px;
+  font-size: 12px;
+  font-weight: normal;
+  color: #909399;
+}
+
+/* 状态样式 */
+.status-pending {
+  color: #E6A23C;
+  font-weight: 600;
+}
+
+.status-done {
+  color: #67C23A;
+  font-weight: 600;
+}
+
+.status-closed {
+  color: #909399;
+  font-weight: 600;
+}
+
+.status-draft {
+  color: #409EFF;
+  font-weight: 600;
+}
+
+/* 表格样式 */
+/deep/ .el-table th {
+  background-color: #f5f7fa;
+  color: #303133;
+  font-weight: 600;
+}
+
+/deep/ .el-table tr:hover > td {
+  background-color: #f5f7fa !important;
+}
+
+/* 响应式设计 */
+@media (max-width: 1200px) {
+  .search-actions {
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .action-left {
+    width: 100%;
+    justify-content: center;
+  }
+}
+</style>
diff --git a/src/views/modules/report/outboundNotificationReport.vue b/src/views/modules/report/outboundNotificationReport.vue
new file mode 100644
index 0000000..88f06d5
--- /dev/null
+++ b/src/views/modules/report/outboundNotificationReport.vue
@@ -0,0 +1,685 @@
+<template>
+  <div class="mod-config">
+    <!-- 条件查询 -->
+    <el-card :class="['search-card', { 'collapsed': !searchExpanded }]" shadow="hover">
+      <div slot="header" class="search-header">
+        <div class="header-left">
+          <i class="el-icon-search"></i>
+          <span class="header-title">拣货出库任务</span>
+        </div>
+        <div class="header-right">
+          <el-button
+            type="text"
+            size="small"
+            @click="toggleSearchExpand"
+            class="collapse-btn">
+            <i :class="searchExpanded ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
+            {{ searchExpanded ? '收起' : '展开' }}
+          </el-button>
+        </div>
+      </div>
+
+      <el-form
+        :inline="true"
+        label-position="top"
+        :model="searchData"
+        class="search-form"
+        @keyup.enter.native="getData">
+
+        <!-- 所有查询条件 - 可展开/收起 -->
+        <template v-if="searchExpanded">
+          <!-- 第一行 -->
+          <el-row :gutter="16">
+            <el-col :span="4">
+              <el-form-item label="工厂编码">
+                <el-select v-model="searchData.site" placeholder="请选择工厂" clearable filterable style="width: 100%">
+                  <el-option
+                    v-for="item in siteList"
+                    :key="item"
+                    :label="item"
+                    :value="item">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="4">
+              <el-form-item label="出库单号">
+                <el-input v-model="searchData.orderNo" placeholder="请输入出库单号" clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="4">
+              <el-form-item label="单据类型">
+                <el-select v-model="searchData.orderType" placeholder="请选择单据类型" clearable style="width: 100%">
+                  <el-option label="全部" value=""></el-option>
+                  <el-option label="销售出库" value="销售出库"></el-option>
+                  <el-option label="生产领料" value="生产领料"></el-option>
+                  <el-option label="其他出库" value="其他出库"></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="4">
+              <el-form-item label="单据状态">
+                <el-select v-model="searchData.orderStatus" placeholder="请选择单据状态" clearable style="width: 100%">
+                  <el-option label="全部" value=""></el-option>
+                  <el-option label="草稿" value="草稿"></el-option>
+                  <el-option label="编辑中" value="编辑中"></el-option>
+                  <el-option label="待出库" value="待出库"></el-option>
+                  <el-option label="已出库" value="已出库"></el-option>
+                  <el-option label="已关闭" value="已关闭"></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="4">
+              <el-form-item label="客户编码">
+                <el-input v-model="searchData.customerId" placeholder="请输入客户编码" clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="4">
+              <el-form-item label="客户名称">
+                <el-input v-model="searchData.customerName" placeholder="请输入客户名称" clearable></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <!-- 第二行 -->
+          <el-row :gutter="16">
+            <el-col :span="4">
+              <el-form-item label="物料编码">
+                <el-input v-model="searchData.partNo" placeholder="请输入物料编码" clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="4">
+              <el-form-item label="物料名称">
+                <el-input v-model="searchData.partDesc" placeholder="请输入物料名称" clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="4">
+              <el-form-item label="要求出库日期(起)">
+                <el-date-picker
+                  v-model="searchData.startDate"
+                  type="date"
+                  placeholder="开始日期"
+                  value-format="yyyy-MM-dd"
+                  style="width: 100%">
+                </el-date-picker>
+              </el-form-item>
+            </el-col>
+            <el-col :span="4">
+              <el-form-item label="要求出库日期(止)">
+                <el-date-picker
+                  v-model="searchData.endDate"
+                  type="date"
+                  placeholder="结束日期"
+                  value-format="yyyy-MM-dd"
+                  style="width: 100%">
+                </el-date-picker>
+              </el-form-item>
+            </el-col>
+            <el-col :span="4">
+              <el-form-item label="关联单号">
+                <el-input v-model="searchData.queryRelatedOrderNo" placeholder="请输入关联单号" clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="4">
+              <el-form-item label="关联单行号">
+                <el-input v-model="searchData.queryRelatedOrderLineNo" placeholder="请输入关联单行号" clearable></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <!-- 第三行 -->
+          <el-row :gutter="16">
+            <el-col :span="4">
+              <el-form-item label="合约号码">
+                <el-input v-model="searchData.queryOutBatchNo" placeholder="请输入合约号码" clearable></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </template>
+
+        <!-- 操作按钮区域 -->
+        <el-row :gutter="16">
+          <el-col :span="24">
+            <div class="search-actions">
+              <div class="action-left">
+                <el-button
+                  type="primary"
+                  icon="el-icon-search"
+                  :loading="searchLoading"
+                  @click="getData">
+                  查询
+                </el-button>
+                <el-button
+                  icon="el-icon-refresh-left"
+                  @click="resetSearch">
+                  重置
+                </el-button>
+                <download-excel
+                  :fields="exportFields"
+                  :data="dataList"
+                  type="xls"
+                  name="拣货出库任务"
+                  worksheet="数据"
+                  class="el-button el-button--success el-button--medium">
+                  <i class="el-icon-download"></i> 导出
+                </download-excel>
+              </div>
+            </div>
+          </el-col>
+        </el-row>
+      </el-form>
+    </el-card>
+
+    <!-- 数据列表 -->
+    <div class="section-title-bar">
+      <i class="el-icon-document"></i>
+      <span>拣货出库任务列表</span>
+      <span class="total-count">（共 {{ totalPage }} 条）</span>
+    </div>
+    <el-table
+      ref="dataTable"
+      :height="tableHeight"
+      :data="dataList"
+      border
+      v-loading="dataListLoading"
+      style="width: 100%;">
+      <el-table-column
+        type="index"
+        header-align="center"
+        align="center"
+        width="60"
+        label="序号">
+      </el-table-column>
+      <el-table-column
+        v-for="(item, index) in columnList"
+        :key="index"
+        :sortable="item.columnSortable"
+        :prop="item.columnProp"
+        :header-align="item.headerAlign"
+        :show-overflow-tooltip="item.columnProp !== 'completionRate'"
+        :align="item.align"
+        :min-width="item.columnWidth"
+        :label="item.columnLabel">
+        <template slot-scope="scope">
+          <!-- 完成率列使用进度条显示 -->
+          <template v-if="item.columnProp === 'completionRate'">
+            <el-progress
+              :percentage="parseCompletionRate(scope.row.completionRate)"
+              :color="getProgressColor(parseCompletionRate(scope.row.completionRate))"
+              :stroke-width="16"
+              :text-inside="true"
+              style="width: 100%;">
+            </el-progress>
+          </template>
+          <!-- 其他列正常显示 -->
+          <template v-else>
+            <span
+              :class="{
+                'status-pending': scope.row[item.columnProp] === '待出库',
+                'status-done': scope.row[item.columnProp] === '已出库',
+                'status-closed': scope.row[item.columnProp] === '已关闭',
+                'status-draft': scope.row[item.columnProp] === '草稿' || scope.row[item.columnProp] === '编辑中'
+              }">
+              {{ scope.row[item.columnProp] }}
+            </span>
+          </template>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      style="margin-top: 0px"
+      @size-change="sizeChangeHandle"
+      @current-change="currentChangeHandle"
+      :current-page="pageIndex"
+      :page-sizes="[20, 50, 100, 200, 500]"
+      :page-size="pageSize"
+      :total="totalPage"
+      layout="total, sizes, prev, pager, next, jumper">
+    </el-pagination>
+  </div>
+</template>
+
+<script>
+import { searchOutboundNotificationReport, getSiteList } from "@/api/report/outboundNotificationReport.js";
+
+export default {
+  name: "outboundNotificationReport",
+  data() {
+    return {
+      // 搜索条件
+      searchData: {
+        site: '',
+        orderNo: '',
+        orderType: '',
+        orderStatus: '待出库',
+        customerId: '',
+        customerName: '',
+        partNo: '',
+        partDesc: '',
+        startDate: '',
+        endDate: '',
+        queryRelatedOrderNo: '',
+        queryRelatedOrderLineNo: '',
+        queryOutBatchNo: ''
+      },
+      // Site列表
+      siteList: [],
+      // 搜索展开状态
+      searchExpanded: true,
+      // 加载状态
+      searchLoading: false,
+      dataListLoading: false,
+      // 数据列表
+      dataList: [],
+      // 分页
+      pageIndex: 1,
+      pageSize: 50,
+      totalPage: 0,
+      // 表格高度
+      tableHeight: 400,
+      // 列定义
+      columnList: [
+        { columnProp: 'orderNo', columnLabel: '出库单号', columnWidth: '150', headerAlign: 'center', align: 'left' },
+        { columnProp: 'orderType', columnLabel: '单据类型', columnWidth: '100', headerAlign: 'center', align: 'center' },
+        { columnProp: 'orderStatus', columnLabel: '单据状态', columnWidth: '100', headerAlign: 'center', align: 'center' },
+        { columnProp: 'completionRate', columnLabel: '完成率', columnWidth: '120', headerAlign: 'center', align: 'center' },
+        { columnProp: 'customerId', columnLabel: '客户编码', columnWidth: '120', headerAlign: 'center', align: 'left' },
+        { columnProp: 'customerName', columnLabel: '客户名称', columnWidth: '150', headerAlign: 'center', align: 'left' },
+        { columnProp: 'customerAbb', columnLabel: '客户简称', columnWidth: '100', headerAlign: 'center', align: 'left' },
+        { columnProp: 'requiredOutboundDate', columnLabel: '要求出库日期', columnWidth: '120', headerAlign: 'center', align: 'center' },
+        { columnProp: 'detailRelatedOrderNo', columnLabel: '关联单号', columnWidth: '150', headerAlign: 'center', align: 'left' },
+        { columnProp: 'detailRelatedOrderLineNo', columnLabel: '关联单行号', columnWidth: '100', headerAlign: 'center', align: 'left' },
+        { columnProp: 'customerOrderNo', columnLabel: '客户订单号', columnWidth: '150', headerAlign: 'center', align: 'left' },
+        { columnProp: 'outWarehouseName', columnLabel: '出库仓库', columnWidth: '100', headerAlign: 'center', align: 'center' },
+        { columnProp: 'detailPartNo', columnLabel: '物料编码', columnWidth: '150', headerAlign: 'center', align: 'left' },
+        { columnProp: 'detailPartDesc', columnLabel: '物料名称', columnWidth: '200', headerAlign: 'center', align: 'left' },
+        { columnProp: 'umName', columnLabel: '单位', columnWidth: '80', headerAlign: 'center', align: 'center' },
+        { columnProp: 'requiredQty', columnLabel: '要求数量', columnWidth: '100', headerAlign: 'center', align: 'right' },
+        { columnProp: 'actualOutQty', columnLabel: '实际出库数量', columnWidth: '120', headerAlign: 'center', align: 'right' },
+        { columnProp: 'outBatchNo', columnLabel: '合约号', columnWidth: '120', headerAlign: 'center', align: 'left' },
+        { columnProp: 'detailOutWarehouseName', columnLabel: '明细出库仓库', columnWidth: '120', headerAlign: 'center', align: 'center' },
+        { columnProp: 'inspectionFlag', columnLabel: '送检标志', columnWidth: '80', headerAlign: 'center', align: 'center' },
+        { columnProp: 'createdBy', columnLabel: '创建人', columnWidth: '100', headerAlign: 'center', align: 'center' },
+        { columnProp: 'createdDate', columnLabel: '创建时间', columnWidth: '150', headerAlign: 'center', align: 'center' },
+        { columnProp: 'remarks', columnLabel: '备注', columnWidth: '200', headerAlign: 'center', align: 'left' }
+      ],
+      // 导出字段
+      exportFields: {
+        '出库单号': 'orderNo',
+        '单据类型': 'orderType',
+        '单据状态': 'orderStatus',
+        '完成率': 'completionRate',
+        '客户编码': 'customerId',
+        '客户名称': 'customerName',
+        '客户简称': 'customerAbb',
+        '要求出库日期': 'requiredOutboundDate',
+        '关联单号': 'relatedOrderNo',
+        '客户订单号': 'customerOrderNo',
+        '出库仓库': 'outWarehouseName',
+        '物料编码': 'detailPartNo',
+        '物料名称': 'detailPartDesc',
+        '单位': 'umName',
+        '要求数量': 'requiredQty',
+        '实际出库数量': 'actualOutQty',
+        '合约号': 'outBatchNo',
+        '明细出库仓库': 'detailOutWarehouseName',
+        '送检标志': 'inspectionFlag',
+        '创建人': 'createdBy',
+        '创建时间': 'createdDate',
+        '备注': 'remarks'
+      }
+    };
+  },
+  created() {
+    this.getSiteList();
+    this.calculateTableHeight();
+    window.addEventListener('resize', this.calculateTableHeight);
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.calculateTableHeight);
+  },
+  methods: {
+    // 计算表格高度
+    calculateTableHeight() {
+      this.$nextTick(() => {
+        const windowHeight = window.innerHeight;
+        // 根据搜索条件展开状态动态计算
+        const headerHeight = this.searchExpanded ? 360 : 186;
+        this.tableHeight = windowHeight - headerHeight - 105;
+      });
+    },
+    // 切换搜索展开/收起
+    toggleSearchExpand() {
+      this.searchExpanded = !this.searchExpanded;
+      this.calculateTableHeight();
+    },
+    // 获取Site列表
+    getSiteList() {
+      getSiteList().then(({ data }) => {
+        if (data && data.code === 0) {
+          this.siteList = data.siteList || [];
+          // 如果有权限的site，默认选择第一个
+          if (this.siteList.length > 0) {
+            this.searchData.site = this.siteList[0];
+          }
+        }
+      }).catch(err => {
+        console.error('获取Site列表失败:', err);
+      });
+    },
+    // 查询数据
+    getData() {
+      this.searchLoading = true;
+      this.dataListLoading = true;
+
+      const params = {
+        ...this.searchData,
+        page: this.pageIndex,
+        limit: this.pageSize
+      };
+
+      searchOutboundNotificationReport(params).then(({ data }) => {
+        this.searchLoading = false;
+        this.dataListLoading = false;
+        if (data && data.code === 0) {
+          this.dataList = data.page.list || [];
+          this.totalPage = data.page.totalCount || 0;
+        } else {
+          this.dataList = [];
+          this.totalPage = 0;
+          this.$message.error(data.msg || '查询失败');
+        }
+      }).catch(err => {
+        console.error(err);
+        this.searchLoading = false;
+        this.dataListLoading = false;
+        this.$message.error('查询异常：' + err.message);
+      });
+    },
+    // 重置搜索条件
+    resetSearch() {
+      this.searchData = {
+        site: this.siteList.length > 0 ? this.siteList[0] : '',
+        orderNo: '',
+        orderType: '',
+        orderStatus: '待出库',
+        customerId: '',
+        customerName: '',
+        partNo: '',
+        partDesc: '',
+        startDate: '',
+        endDate: '',
+        queryRelatedOrderNo: '',
+        queryRelatedOrderLineNo: '',
+        queryOutBatchNo: ''
+      };
+      this.pageIndex = 1;
+    },
+    // 分页处理
+    sizeChangeHandle(val) {
+      this.pageSize = val;
+      this.pageIndex = 1;
+      this.getData();
+    },
+    currentChangeHandle(val) {
+      this.pageIndex = val;
+      this.getData();
+    },
+    // 解析完成率字符串为数字
+    parseCompletionRate(rateStr) {
+      if (!rateStr) return 0;
+      const num = parseFloat(rateStr.replace('%', ''));
+      return isNaN(num) ? 0 : Math.min(num, 100);
+    },
+    // 根据完成率获取进度条颜色
+    getProgressColor(percentage) {
+      if (percentage >= 100) {
+        return '#67C23A'; // 绿色 - 已完成
+      } else if (percentage >= 80) {
+        return '#409EFF'; // 蓝色 - 接近完成
+      } else if (percentage >= 50) {
+        return '#E6A23C'; // 橙色 - 进行中
+      } else {
+        return '#F56C6C'; // 红色 - 刚开始
+      }
+    }
+  }
+};
+</script>
+
+<style scoped>
+/* 搜索卡片样式 */
+.search-card {
+  margin-bottom: 16px;
+  border-radius: 8px;
+  overflow: hidden;
+  transition: all 0.3s ease;
+}
+
+.search-card:hover {
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+}
+
+.search-card /deep/ .el-card__header {
+  padding: 5px 20px;
+  background: linear-gradient(135deg, #9ac3d0 20%, #b6c7dd 80%);
+  border-bottom: none;
+}
+
+.search-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  color: #fff;
+}
+
+.header-left i {
+  font-size: 16px;
+  margin-right: 8px;
+}
+
+.header-title {
+  font-size: 14px;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+}
+
+.header-right {
+  color: #fff;
+}
+
+.collapse-btn {
+  color: #fff;
+  font-weight: 500;
+  transition: all 0.3s ease;
+}
+
+.collapse-btn:hover {
+  color: #f0f0f0;
+  transform: translateY(-1px);
+}
+
+.collapse-btn i {
+  transition: transform 0.3s ease;
+}
+
+/* 搜索表单样式 */
+.search-form {
+  padding: 6px 0;
+  min-height: 0;
+}
+
+/* 卡片主体样式 */
+.search-card /deep/ .el-card__body {
+  padding: 10px;
+  transition: all 0.3s ease;
+}
+
+/* 收起时的样式 */
+.search-card.collapsed /deep/ .el-card__body {
+  padding: 10px 20px;
+}
+
+.search-form /deep/ .el-form-item {
+  margin-bottom: 12px;
+}
+
+.search-form /deep/ .el-form-item__label {
+  font-weight: 500;
+  color: #606266;
+  padding-bottom: 4px;
+}
+
+.search-form /deep/ .el-input__inner,
+.search-form /deep/ .el-textarea__inner {
+  border-radius: 6px;
+  border: 1px solid #DCDFE6;
+  transition: all 0.3s ease;
+}
+
+.search-form /deep/ .el-input__inner:focus,
+.search-form /deep/ .el-textarea__inner:focus {
+  border-color: #9ac3d0;
+  box-shadow: 0 0 0 2px rgba(154, 195, 208, 0.1);
+}
+
+.search-form /deep/ .el-select {
+  width: 100%;
+}
+
+/* 操作按钮区域 */
+.search-actions {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 0 2px 0;
+}
+
+/* 展开时显示上边框 */
+.search-card:not(.collapsed) .search-actions {
+  border-top: 1px solid #f0f0f0;
+  margin-top: 6px;
+}
+
+/* 收起时不显示上边框和上边距 */
+.search-card.collapsed .search-actions {
+  border-top: none;
+  margin-top: 0;
+  padding-top: 0;
+}
+
+.action-left {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.search-actions .el-button {
+  border-radius: 4px;
+  padding: 5px 10px;
+  font-size: 12px;
+  font-weight: 500;
+  transition: all 0.3s ease;
+}
+
+.search-actions .el-button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.search-actions .el-button--primary {
+  background: #60aeff;
+  border-color: #60aeff;
+}
+
+.search-actions .el-button--primary:hover {
+  background: #7dbdff;
+  border-color: #7dbdff;
+}
+
+.search-actions .el-button--success {
+  background: #67C23A;
+  border-color: #67C23A;
+}
+
+.search-actions .el-button--success:hover {
+  background: #85ce61;
+  border-color: #85ce61;
+}
+
+/* 区域标题栏样式 */
+.section-title-bar {
+  display: flex;
+  align-items: center;
+  padding: 8px 12px;
+  background: linear-gradient(135deg, #f5f7fa 0%, #e4e7eb 100%);
+  border-radius: 4px;
+  margin-bottom: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.section-title-bar i {
+  font-size: 16px;
+  margin-right: 8px;
+  color: #409eff;
+}
+
+.section-title-bar .total-count {
+  margin-left: 10px;
+  font-size: 12px;
+  font-weight: normal;
+  color: #909399;
+}
+
+/* 状态样式 */
+.status-pending {
+  color: #E6A23C;
+  font-weight: 600;
+}
+
+.status-done {
+  color: #67C23A;
+  font-weight: 600;
+}
+
+.status-closed {
+  color: #909399;
+  font-weight: 600;
+}
+
+.status-draft {
+  color: #409EFF;
+  font-weight: 600;
+}
+
+/* 表格样式 */
+/deep/ .el-table th {
+  background-color: #f5f7fa;
+  color: #303133;
+  font-weight: 600;
+}
+
+/deep/ .el-table tr:hover > td {
+  background-color: #f5f7fa !important;
+}
+
+/* 响应式设计 */
+@media (max-width: 1200px) {
+  .search-actions {
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .action-left {
+    width: 100%;
+    justify-content: center;
+  }
+}
+</style>