2026-01-06

工单数据汇总

src/api/shopOrder/workOrderAlloc.js

@@ -0,0 +1,27 @@
+import {createAPI} from "@/utils/httpRequest.js";
+
+// -------------工单数据汇总--------------
+
+/**
+ * 分页查询生产订单（工单数据汇总专用）
+ * @param {Object} data 查询条件
+ */
+export const searchShopOrderForAlloc = data => createAPI(`/shopOrder/workOrderAlloc/searchShopOrder`, 'post', data)
+
+/**
+ * 根据allocType查询工单汇总数据
+ * @param {Object} data 查询条件
+ */
+export const selectByAllocType = data => createAPI(`/shopOrder/workOrderAlloc/list`, 'post', data)
+
+/**
+ * 执行工单数据汇总（调用存储过程）
+ * @param {Object} data 请求参数
+ */
+export const executeWorkOrderAlloc = data => createAPI(`/shopOrder/workOrderAlloc/executeAlloc`, 'post', data)
+
+/**
+ * 执行工单数据回传（调用U8接口）
+ * @param {Object} data 请求参数
+ */
+export const executeWorkOrderSync = data => createAPI(`/shopOrder/workOrderAlloc/executeSync`, 'post', data)

src/views/modules/shopOrder/workOrderAlloc/searchWorkOrderAlloc.vue

@@ -0,0 +1,936 @@
+<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">Search</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-input v-model="searchData.site" placeholder="请输入工厂编码" clearable @click.native="getBaseList(18)"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="4">
+              <el-form-item label="订单类型">
+                <el-input v-model="searchData.orderType" placeholder="请输入订单类型" clearable @click.native="getBaseList(16)"></el-input>
+              </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-input v-model="searchData.partNo" placeholder="请输入产成品编码" clearable @click.native="getBaseList(5)"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="4">
+              <el-form-item label="产品名称">
+                <el-input v-model="searchData.partDescription" placeholder="请输入产品名称" clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="4">
+              <el-form-item label="订单状态">
+                <el-select v-model="searchData.status" 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-option label="已关闭" value="已关闭"></el-option>
+                  <el-option label="已取消" value="已取消"></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <!-- 第二行 -->
+          <el-row :gutter="16">
+            <el-col :span="8">
+              <el-form-item label="录入日期">
+                <el-date-picker
+                  v-model="searchData.date1"
+                  type="date"
+                  value-format="yyyy-MM-dd"
+                  placeholder="开始日期"
+                  style="width: 45%">
+                </el-date-picker>
+                <span style="margin: 0 6px; color: #DCDFE6;">~</span>
+                <el-date-picker
+                  v-model="searchData.date2"
+                  type="date"
+                  value-format="yyyy-MM-dd"
+                  placeholder="结束日期"
+                  style="width: 45%">
+                </el-date-picker>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="要求完工日期">
+                <el-date-picker
+                  v-model="searchData.date3"
+                  type="date"
+                  value-format="yyyy-MM-dd"
+                  placeholder="开始日期"
+                  style="width: 45%">
+                </el-date-picker>
+                <span style="margin: 0 6px; color: #DCDFE6;">~</span>
+                <el-date-picker
+                  v-model="searchData.date4"
+                  type="date"
+                  value-format="yyyy-MM-dd"
+                  placeholder="结束日期"
+                  style="width: 45%">
+                </el-date-picker>
+              </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>
+              </div>
+              <div class="action-right">
+                <el-button
+                  type="success"
+                  icon="el-icon-document-add"
+                  :loading="allocLoading"
+                  @click="executeAlloc">
+                  工单数据汇总
+                </el-button>
+                <el-button
+                  type="warning"
+                  icon="el-icon-upload2"
+                  :loading="syncLoading"
+                  @click="executeSync">
+                  工单数据回传
+                </el-button>
+              </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="selected-count" v-if="selectedOrders.length > 0">（已选择 {{ selectedOrders.length }} 条）</span>
+    </div>
+    <el-table
+      ref="orderTable"
+      :height="orderTableHeight"
+      :data="orderList"
+      border
+      highlight-current-row
+      v-loading="orderListLoading"
+      @selection-change="handleOrderSelectionChange"
+      @row-click="handleOrderRowClick"
+      style="width: 100%;">
+      <el-table-column
+        type="selection"
+        header-align="center"
+        align="center"
+        width="50">
+      </el-table-column>
+      <el-table-column
+        v-for="(item, index) in orderColumnList"
+        :key="index"
+        :sortable="item.columnSortable"
+        :prop="item.columnProp"
+        :header-align="item.headerAlign"
+        :show-overflow-tooltip="true"
+        :align="item.align"
+        :fixed="item.fixed == '' ? false : item.fixed"
+        :min-width="item.columnWidth"
+        :label="item.columnLabel">
+        <template slot-scope="scope">
+          <span v-if="!item.columnHidden">{{ scope.row[item.columnProp] }}</span>
+        </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>
+
+    <!-- 下部分：4个页签列表 -->
+    <div class="section-title-bar" style="margin-top: 0px;">
+      <i class="el-icon-data-analysis"></i>
+      <span>汇总数据明细</span>
+      <span class="current-order-info" v-if="currentOrder">
+        （当前工单: {{ currentOrder.orderNo }}）
+      </span>
+    </div>
+    <el-tabs v-model="activeTab" type="border-card" @tab-click="handleTabClick" class="customer-tab" :style="{height: allocTableHeight + 60 + 'px'}">
+      <el-tab-pane label="产量未传输记录" name="产量未传输">
+        <el-table
+          :height="allocTableHeight"
+          :data="allocList"
+          border
+          v-loading="allocListLoading"
+          style="width: 100%">
+          <el-table-column
+            v-for="(item, index) in allocColumnList"
+            :key="index"
+            :prop="item.columnProp"
+            :header-align="item.headerAlign"
+            :show-overflow-tooltip="true"
+            :align="item.align"
+            :min-width="item.columnWidth"
+            :label="item.columnLabel">
+          </el-table-column>
+        </el-table>
+      </el-tab-pane>
+      <el-tab-pane label="产量已传输记录" name="产量已传输">
+        <el-table
+          :height="allocTableHeight"
+          :data="allocList"
+          border
+          v-loading="allocListLoading"
+          style="width: 100%">
+          <el-table-column
+            v-for="(item, index) in allocColumnList"
+            :key="index"
+            :prop="item.columnProp"
+            :header-align="item.headerAlign"
+            :show-overflow-tooltip="true"
+            :align="item.align"
+            :min-width="item.columnWidth"
+            :label="item.columnLabel">
+          </el-table-column>
+        </el-table>
+      </el-tab-pane>
+      <el-tab-pane label="工时未传输记录" name="工时未传输">
+        <el-table
+          :height="allocTableHeight"
+          :data="allocList"
+          border
+          v-loading="allocListLoading"
+          style="width: 100%">
+          <el-table-column
+            v-for="(item, index) in allocColumnList"
+            :key="index"
+            :prop="item.columnProp"
+            :header-align="item.headerAlign"
+            :show-overflow-tooltip="true"
+            :align="item.align"
+            :min-width="item.columnWidth"
+            :label="item.columnLabel">
+          </el-table-column>
+        </el-table>
+      </el-tab-pane>
+      <el-tab-pane label="工时已传输记录" name="工时已传输">
+        <el-table
+          :height="allocTableHeight"
+          :data="allocList"
+          border
+          v-loading="allocListLoading"
+          style="width: 100%">
+          <el-table-column
+            v-for="(item, index) in allocColumnList"
+            :key="index"
+            :prop="item.columnProp"
+            :header-align="item.headerAlign"
+            :show-overflow-tooltip="true"
+            :align="item.align"
+            :min-width="item.columnWidth"
+            :label="item.columnLabel">
+          </el-table-column>
+        </el-table>
+      </el-tab-pane>
+    </el-tabs>
+
+    <Chooselist ref="baseList" @getBaseData="getBaseData"></Chooselist>
+  </div>
+</template>
+
+<script>
+import Chooselist from '@/views/modules/common/Chooselist';
+import { searchShopOrderForAlloc, selectByAllocType, executeWorkOrderAlloc, executeWorkOrderSync } from "@/api/shopOrder/workOrderAlloc.js";
+
+export default {
+  name: "searchWorkOrderAlloc",
+  components: {
+    Chooselist
+  },
+  data() {
+    return {
+      tagNo: '',
+      // 搜索区域展开/收起
+      searchExpanded: true,
+      // Loading状态
+      searchLoading: false,
+      allocLoading: false,
+      syncLoading: false,
+      orderListLoading: false,
+      allocListLoading: false,
+      // 表格高度
+      orderTableHeight: 200,
+      allocTableHeight: 200,
+      // 分页
+      pageIndex: 1,
+      pageSize: 20,
+      totalPage: 0,
+      // 查询条件
+      searchData: {
+        orderType: '',
+        site: '',
+        partNo: '',
+        partDescription: '',
+        orderNo: '',
+        status: '',
+        date1: '',
+        date2: '',
+        date3: '',
+        date4: '',
+        user: this.$store.state.user.name,
+        page: 0,
+        limit: 20
+      },
+      // 生产订单列表
+      orderList: [],
+      // 选中的生产订单
+      selectedOrders: [],
+      // 当前点击的工单（用于主从关联）
+      currentOrder: null,
+      // 汇总数据列表
+      allocList: [],
+      // 当前页签
+      activeTab: '产量未传输',
+      // 生产订单表格列
+      orderColumnList: [
+        { columnProp: "orderNo", headerAlign: "center", align: "left", columnLabel: "订单号", columnWidth: 120 },
+        { columnProp: "site", headerAlign: "center", align: "left", columnLabel: "工厂编码", columnWidth: 80 },
+        { columnProp: "enterDate", headerAlign: "center", align: "left", columnLabel: "录入日期", columnWidth: 100 },
+        { columnProp: "needDate", headerAlign: "center", align: "left", columnLabel: "要求完工日期", columnWidth: 100 },
+        { columnProp: "orderType", headerAlign: "center", align: "left", columnLabel: "订单类型", columnWidth: 80 },
+        { columnProp: "partNo", headerAlign: "center", align: "left", columnLabel: "产成品编码", columnWidth: 120 },
+        { columnProp: "partDescription", headerAlign: "center", align: "left", columnLabel: "产成品名称/规格", columnWidth: 160 },
+        { columnProp: "lotSize", headerAlign: "center", align: "right", columnLabel: "订单量", columnWidth: 80 },
+        { columnProp: "status", headerAlign: "center", align: "left", columnLabel: "订单状态", columnWidth: 80 },
+        { columnProp: "customerName", headerAlign: "center", align: "left", columnLabel: "客户名称", columnWidth: 150 },
+        { columnProp: "finishedQty", headerAlign: "center", align: "right", columnLabel: "已入库数量", columnWidth: 100 },
+        { columnProp: "projectID", headerAlign: "center", align: "left", columnLabel: "项目编码", columnWidth: 100 },
+        { columnProp: "batchNo", headerAlign: "center", align: "left", columnLabel: "合约号码", columnWidth: 120 },
+        { columnProp: "orderRef1", headerAlign: "center", align: "left", columnLabel: "销售订单号", columnWidth: 100 },
+        { columnProp: "remark", headerAlign: "center", align: "left", columnLabel: "备注", columnWidth: 150 }
+      ],
+      // 汇总数据表格列
+      allocColumnList: [
+        { columnProp: "orderNo", headerAlign: "center", align: "left", columnLabel: "订单号", columnWidth: 120 },
+        { columnProp: "batchNo", headerAlign: "center", align: "left", columnLabel: "批次号", columnWidth: 100 },
+        { columnProp: "erpOrderNo", headerAlign: "center", align: "left", columnLabel: "ERP订单号", columnWidth: 120 },
+        { columnProp: "erpOrderLineNo", headerAlign: "center", align: "left", columnLabel: "ERP订单行号", columnWidth: 100 },
+        { columnProp: "rowNo", headerAlign: "center", align: "left", columnLabel: "行号", columnWidth: 100 },
+        { columnProp: "itemNo", headerAlign: "center", align: "left", columnLabel: "工序号", columnWidth: 80 },
+        { columnProp: "operator", headerAlign: "center", align: "left", columnLabel: "操作员", columnWidth: 100 },
+        { columnProp: "allocReportQty", headerAlign: "center", align: "right", columnLabel: "报告数量", columnWidth: 100 },
+        { columnProp: "allocApproveQty", headerAlign: "center", align: "right", columnLabel: "合格数量", columnWidth: 100 },
+        { columnProp: "allocScrapQty", headerAlign: "center", align: "right", columnLabel: "不良数量", columnWidth: 100 },
+        { columnProp: "allocSetupTime", headerAlign: "center", align: "right", columnLabel: "调机时长", columnWidth: 100 },
+        { columnProp: "allocManfTime", headerAlign: "center", align: "right", columnLabel: "制造时长", columnWidth: 100 },
+        { columnProp: "allocBy", headerAlign: "center", align: "left", columnLabel: "汇总操作人", columnWidth: 100 },
+        { columnProp: "allocDate", headerAlign: "center", align: "left", columnLabel: "汇总时间", columnWidth: 150 },
+        { columnProp: "syncedDate", headerAlign: "center", align: "left", columnLabel: "回传时间", columnWidth: 150 },
+        { columnProp: "syncedMes", headerAlign: "center", align: "left", columnLabel: "异常原因", columnWidth: 200 },
+        { columnProp: "allocType", headerAlign: "center", align: "left", columnLabel: "数据类型", columnWidth: 100 }
+      ]
+    }
+  },
+  watch: {
+    searchData: {
+      deep: true,
+      handler: function (newV, oldV) {
+        this.searchData.orderType = this.searchData.orderType.toUpperCase()
+        this.searchData.partNo = this.searchData.partNo.toUpperCase()
+        this.searchData.orderNo = this.searchData.orderNo.toUpperCase()
+      }
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      // 计算表格高度
+      this.orderTableHeight = (window.innerHeight - 400) / 2;
+      this.allocTableHeight = (window.innerHeight - 364) / 2;
+    })
+  },
+  created() {
+    // 设置默认查询时间为本月
+    this.setDefaultDateRange();
+    // 初始化加载数据
+    this.getData();
+  },
+  methods: {
+    // 设置默认日期范围为本月
+    setDefaultDateRange() {
+      const now = new Date();
+      const year = now.getFullYear();
+      const month = now.getMonth();
+
+      // 本月第一天
+      const firstDay = new Date(year, month, 1);
+      // 本月最后一天
+      const lastDay = new Date(year, month + 1, 0);
+
+      // 格式化日期
+      const formatDate = (date) => {
+        const y = date.getFullYear();
+        const m = String(date.getMonth() + 1).padStart(2, '0');
+        const d = String(date.getDate()).padStart(2, '0');
+        return `${y}-${m}-${d}`;
+      };
+
+      this.searchData.date1 = formatDate(firstDay);
+      this.searchData.date2 = formatDate(lastDay);
+    },
+    // 展开/收起搜索区域
+    toggleSearchExpand() {
+      this.searchExpanded = !this.searchExpanded;
+    },
+    // 重置查询条件
+    resetSearch() {
+      this.searchData = {
+        orderType: '',
+        site: '',
+        partNo: '',
+        partDescription: '',
+        orderNo: '',
+        status: '',
+        date1: '',
+        date2: '',
+        date3: '',
+        date4: '',
+        user: this.$store.state.user.name,
+        page: 0,
+        limit: 20
+      };
+      this.currentOrder = null;
+      this.setDefaultDateRange();
+    },
+    // 获取基础数据
+    getBaseData(val) {
+      if (this.tagNo === 16) {
+        this.searchData.orderType = val.OrderType
+      }
+      if (this.tagNo === 18) {
+        this.searchData.site = val.Site
+      }
+      if (this.tagNo === 5) {
+        this.searchData.partNo = val.PartNo
+      }
+    },
+    // 获取基础数据列表
+    getBaseList(val) {
+      this.tagNo = val
+      this.$nextTick(() => {
+        let strVal = "";
+        if (val === 16) {
+          strVal = this.searchData.orderType
+        }
+        if (val === 18) {
+          strVal = this.searchData.site
+        }
+        if (val === 5) {
+          strVal = this.searchData.partNo
+        }
+        this.$refs.baseList.init(val, strVal)
+      })
+    },
+    // 查询生产订单数据
+    getData() {
+      this.searchLoading = true;
+      this.orderListLoading = true;
+
+      // 计算分页offset
+      this.searchData.limit = this.pageSize
+      this.searchData.page = (this.pageIndex - 1) * this.pageSize
+
+      searchShopOrderForAlloc(this.searchData).then(({ data }) => {
+        this.searchLoading = false;
+        this.orderListLoading = false;
+        if (data.code === 0) {
+          this.orderList = data.page.list
+          this.totalPage = data.page.totalCount
+
+          // 如果有数据且未选中任何行，默认选中第一行
+          if (this.orderList.length > 0 && !this.currentOrder) {
+            this.currentOrder = this.orderList[0];
+            this.getAllocData();
+          }
+        } else {
+          this.$message.error(data.msg || '查询失败')
+        }
+      }).catch(err => {
+        this.searchLoading = false;
+        this.orderListLoading = false;
+        this.$message.error('查询异常：' + err.message)
+      })
+    },
+    // 查询汇总数据（根据当前选中的工单）
+    getAllocData() {
+      if (!this.currentOrder) {
+        this.allocList = [];
+        return;
+      }
+
+      this.allocListLoading = true;
+
+      let queryData = {
+        site: this.currentOrder.site,
+        orderNo: this.currentOrder.orderNo,
+        allocType: this.activeTab,
+        page: 0,
+        limit: 1000
+      };
+
+      selectByAllocType(queryData).then(({ data }) => {
+        this.allocListLoading = false;
+        if (data.code === 0) {
+          this.allocList = data.page.list || []
+        } else {
+          this.$message.error(data.msg || '查询汇总数据失败')
+        }
+      }).catch(err => {
+        this.allocListLoading = false;
+        this.$message.error('查询汇总数据异常：' + err.message)
+      })
+    },
+    // 处理工单选择变化
+    handleOrderSelectionChange(selection) {
+      this.selectedOrders = selection;
+    },
+    // 处理行点击（主从关联：点击主表行刷新从表）
+    handleOrderRowClick(row, column, event) {
+      // 如果点击的是checkbox列，只处理选择，不刷新从表
+      if (column && column.type === 'selection') {
+        return;
+      }
+      // 设置当前选中的工单
+      this.currentOrder = row;
+      // 刷新汇总数据
+      this.getAllocData();
+    },
+    // 页签切换
+    handleTabClick(tab) {
+      this.activeTab = tab.name;
+      this.getAllocData();
+    },
+    // 执行工单数据汇总
+    executeAlloc() {
+      // 获取选中的工单号列表
+      let orderNoList = this.selectedOrders.map(item => item.orderNo);
+
+      if (orderNoList.length === 0) {
+        // 没有选择工单，提示是否汇总所有
+        this.$confirm('您没有选择工单，是否汇总当前查询条件下的所有工单？', '提示', {
+          confirmButtonText: '确定汇总所有',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          this.doExecuteAlloc(true, []);
+        }).catch(() => {
+          // 取消操作
+        });
+      } else {
+        // 已选择工单，只汇总选中的
+        this.$confirm(`确定要汇总选中的 ${orderNoList.length} 个工单吗？`, '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'info'
+        }).then(() => {
+          this.doExecuteAlloc(false, orderNoList);
+        }).catch(() => {
+          // 取消操作
+        });
+      }
+    },
+    // 实际执行工单数据汇总
+    doExecuteAlloc(allocAll, orderNoList) {
+      this.allocLoading = true;
+
+      let requestData = {
+        query: {
+          ...this.searchData,
+          user: this.$store.state.user.name
+        },
+        orderNoList: orderNoList,
+        allocAll: allocAll
+      };
+
+      executeWorkOrderAlloc(requestData).then(({ data }) => {
+        this.allocLoading = false;
+        if (data.code === 0) {
+          this.$message.success(data.msg || '工单数据汇总成功')
+          // 刷新汇总数据
+          this.getAllocData()
+        } else {
+          this.$message.error(data.msg || '工单数据汇总失败')
+        }
+      }).catch(err => {
+        this.allocLoading = false;
+        this.$message.error('工单数据汇总异常：' + err.message)
+      })
+    },
+    // 执行工单数据回传
+    executeSync() {
+      this.$confirm('该操作将根据所勾选工单汇总未传输的工时及产量数据回传至上位系统，是否继续？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.syncLoading = true;
+
+        // 获取选中的工单号列表
+        let orderNoList = this.selectedOrders.map(item => item.orderNo);
+
+        let requestData = {
+          site: this.searchData.site || '',
+          orderNoList: orderNoList.length > 0 ? orderNoList : null
+        };
+
+        executeWorkOrderSync(requestData).then(({ data }) => {
+          this.syncLoading = false;
+          if (data.code === 0) {
+            this.$message.success(data.msg || '工单数据回传成功')
+            // 刷新汇总数据
+            this.getAllocData()
+          } else {
+            this.$message.error(data.msg || '工单数据回传失败')
+          }
+        }).catch(err => {
+          this.syncLoading = false;
+          this.$message.error('工单数据回传异常：' + err.message)
+        })
+      }).catch(() => {
+        // 取消操作
+      });
+    },
+    // 分页处理
+    sizeChangeHandle(val) {
+      this.pageSize = val
+      this.pageIndex = 1
+      this.getData()
+    },
+    currentChangeHandle(val) {
+      this.pageIndex = val
+      this.getData()
+    }
+  }
+}
+</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-form /deep/ .el-date-editor.el-input {
+  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,
+.action-right {
+  display: flex;
+  gap: 8px;
+}
+
+.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;
+}
+
+.search-actions .el-button--danger {
+  background: #F56C6C;
+  border-color: #F56C6C;
+}
+
+.search-actions .el-button--danger:hover {
+  background: #f78989;
+  border-color: #f78989;
+}
+
+.search-actions .el-button--warning {
+  background: #E6A23C;
+  border-color: #E6A23C;
+}
+
+.search-actions .el-button--warning:hover {
+  background: #ebb563;
+  border-color: #ebb563;
+}
+
+/* 区域标题栏样式 */
+.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 .selected-count {
+  margin-left: 10px;
+  font-size: 12px;
+  font-weight: normal;
+  color: #67C23A;
+}
+
+.section-title-bar .current-order-info {
+  margin-left: 10px;
+  font-size: 12px;
+  font-weight: normal;
+  color: #409EFF;
+}
+
+/* 页签样式 */
+/deep/ .customer-tab .el-tabs__content {
+  padding: 5px !important;
+}
+
+/deep/ .customer-tab .el-tabs__header {
+  margin-bottom: 0;
+}
+
+/deep/ .customer-tab .el-tabs__item {
+  font-weight: 500;
+}
+
+/deep/ .customer-tab .el-tabs__item.is-active {
+  color: #409eff;
+  font-weight: 600;
+}
+
+/* 表格样式 */
+.el-table /deep/ .cell {
+  height: auto;
+  line-height: 1.5;
+}
+
+/* 当前行高亮 */
+.el-table /deep/ .current-row {
+  background-color: #ecf5ff !important;
+}
+
+/* 响应式设计 */
+@media (max-width: 1200px) {
+  .search-actions {
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .action-left,
+  .action-right {
+    width: 100%;
+    justify-content: center;
+  }
+}
+</style>