From 9c6007573028ac8750014f3430b956860876614f Mon Sep 17 00:00:00 2001
From: qiankanghui <kanghui.qian@xujiesoft.com>
Date: Fri, 22 May 2026 17:42:27 +0800
Subject: [PATCH] =?UTF-8?q?feat(inspection):=20=E6=B7=BB=E5=8A=A0=E9=AA=8C?=
 =?UTF-8?q?=E8=B4=A7=E7=94=B3=E8=AF=B7=E7=AE=A1=E7=90=86=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增验货申请列表页面，支持查询、新增、删除等操作
- 实现验货申请详情展示组件，显示基本信息如申请单号、供应商、验货地址等
- 开发验货明细表格组件，展示验货数量、状态、验货结果等信息
- 添加验货关联PO明细组件，显示PO号、产品信息、运输方式等
- 创建验货结果表格组件，展示任务单号、验货结果等数据
- 集成API接口，包括验货申请列表查询、明细获取、结果查询等功能
- 实现新增验货申请弹窗，支持供应商选择、PO批量选择等功能
- 添加日期范围筛选、状态筛选等多种查询条件
- 实现表格分页、排序、多选等交互功能
---
 src/api/inspection/inspectionRequestHeader.js |   15 +
 .../com_inspectionRequestDetail.vue           |  185 +++
 .../com_inspectionRequestDetailTab.vue        |  110 ++
 .../com_inspectionRequestPoDetailTab.vue      |   90 ++
 .../inspection/com_inspectionResultTab.vue    |   90 ++
 .../inspection/inspectionRequestList.vue      | 1203 +++++++++++++++++
 6 files changed, 1693 insertions(+)
 create mode 100644 src/api/inspection/inspectionRequestHeader.js
 create mode 100644 src/views/modules/inspection/com_inspectionRequestDetail.vue
 create mode 100644 src/views/modules/inspection/com_inspectionRequestDetailTab.vue
 create mode 100644 src/views/modules/inspection/com_inspectionRequestPoDetailTab.vue
 create mode 100644 src/views/modules/inspection/com_inspectionResultTab.vue
 create mode 100644 src/views/modules/inspection/inspectionRequestList.vue

diff --git a/src/api/inspection/inspectionRequestHeader.js b/src/api/inspection/inspectionRequestHeader.js
new file mode 100644
index 0000000..5822cdd
--- /dev/null
+++ b/src/api/inspection/inspectionRequestHeader.js
@@ -0,0 +1,15 @@
+import { createAPI } from '@/utils/httpRequest.js'
+
+export const searchInspectionRequestHeaderList = (data) => createAPI(`/inspection/searchInspectionRequestHeaderList`, 'post', data)
+
+export const getInspectionRequestDetailList = (data) => createAPI(`/inspection/getInspectionRequestDetailList`, 'post', data)
+
+export const getInspectionRequestDetailSubList = (data) => createAPI(`/inspection/getInspectionRequestDetailSubList`, 'post', data)
+
+export const getInspectionResultList = (data) => createAPI(`/inspection/getInspectionResultList`, 'post', data)
+
+// 查询可申请验货PO
+export const queryPoPage = (data) => createAPI(`/inspection/queryPoPage`, 'post', data)
+
+// 保存验货申请
+export const saveInspectionRequest = (data) => createAPI(`/inspection/save`, 'post', data)
diff --git a/src/views/modules/inspection/com_inspectionRequestDetail.vue b/src/views/modules/inspection/com_inspectionRequestDetail.vue
new file mode 100644
index 0000000..550baf0
--- /dev/null
+++ b/src/views/modules/inspection/com_inspectionRequestDetail.vue
@@ -0,0 +1,185 @@
+<template>
+  <div class="detail-container">
+
+    <!-- 第一行 -->
+    <div class="detail-row">
+
+      <div class="detail-item">
+        <span class="label">申请单号：</span>
+        <span class="value">{{ detailData.requestNo }}</span>
+      </div>
+
+      <div class="detail-item">
+        <span class="label">申请日期：</span>
+        <span class="value">{{ formatDate(detailData.requestDate) }}</span>
+      </div>
+
+      <div class="detail-item">
+        <span class="label">供应商编码：</span>
+        <span class="value">{{ detailData.supplierNo }}</span>
+      </div>
+
+      <div class="detail-item long">
+        <span class="label">供应商名称：</span>
+        <span class="value">{{ detailData.supplierName }}</span>
+      </div>
+
+    </div>
+
+    <!-- 第二行 -->
+    <div class="detail-row">
+
+      <div class="detail-item address">
+        <span class="label">验货地址：</span>
+        <span class="value">
+          {{ detailData.inspectAddress }}
+        </span>
+      </div>
+
+      <div class="detail-item long">
+        <span class="label">联系人：</span>
+        <span class="value">
+          {{ detailData.inspectContract }}
+        </span>
+      </div>
+
+    </div>
+
+    <!-- 第三行 -->
+    <div class="detail-row">
+
+      <div class="detail-item">
+        <span class="label">申请录入人：</span>
+        <span class="value">{{ detailData.createBy }}</span>
+      </div>
+
+      <div class="detail-item">
+        <span class="label">申请录入时间：</span>
+        <span class="value">{{ detailData.createDate }}</span>
+      </div>
+
+      <div class="detail-item">
+        <span class="label">建议验货日期：</span>
+        <span class="value">
+          {{ formatDate(detailData.needInspectDate) }}
+        </span>
+      </div>
+
+    </div>
+
+    <!-- 第四行 -->
+    <div class="detail-row">
+
+      <div class="detail-item">
+        <span class="label">排程人：</span>
+        <span class="value">{{ detailData.scheduledBy }}</span>
+      </div>
+
+      <div class="detail-item">
+        <span class="label">排程时间：</span>
+        <span class="value">{{ detailData.scheduledDate }}</span>
+      </div>
+
+      <div class="detail-item">
+        <span class="label">状态：</span>
+        <span class="value">{{ detailData.status }}</span>
+      </div>
+
+      <div class="detail-item">
+        <span class="label">计划验货日期：</span>
+        <span class="value">
+          {{ detailData.planStartDate }}
+        </span>
+      </div>
+
+    </div>
+
+    <!-- 第五行 -->
+    <div class="detail-row">
+
+      <div class="detail-item">
+        <span class="label">QC：</span>
+        <span class="value">{{ detailData.qcOperator }}</span>
+      </div>
+
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'InspectionRequestDetail',
+
+  props: {
+    detailData: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+
+  methods: {
+    // 格式化日期，只显示年月日
+    formatDate (dateStr) {
+      if (!dateStr) return '-'
+      // 如果包含时分秒，截取前10位
+      if (dateStr.length > 10) {
+        return dateStr.substring(0, 10)
+      }
+      return dateStr
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+
+.detail-container {
+  padding: 15px 20px;
+  border: 1px solid #dcdfe6;
+  background: #fff;
+}
+
+.detail-row {
+  display: flex;
+  align-items: center;
+  margin-bottom: 18px;
+}
+
+.detail-item {
+  display: flex;
+  align-items: center;
+  width: 300px;
+  margin-right: 30px;
+}
+
+.detail-item.long {
+  width: 450px;
+}
+
+.detail-item.address {
+  width: 600px;
+}
+
+.label {
+  color: #606266;
+  font-size: 14px;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.value {
+  flex: 1;
+  min-height: 28px;
+  line-height: 28px;
+  padding: 0 10px;
+  border: 1px solid #dcdfe6;
+  background: #fff;
+  color: #303133;
+  font-size: 14px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+</style>
diff --git a/src/views/modules/inspection/com_inspectionRequestDetailTab.vue b/src/views/modules/inspection/com_inspectionRequestDetailTab.vue
new file mode 100644
index 0000000..0177c82
--- /dev/null
+++ b/src/views/modules/inspection/com_inspectionRequestDetailTab.vue
@@ -0,0 +1,110 @@
+<template>
+  <div class="detail-container">
+    <!-- 明细表格 -->
+    <el-table :data="detailList" border v-loading="loading" style="width: 100%;" :height="tableHeight">
+      <el-table-column label="序号" header-align="center" align="center" width="80">
+        <template slot-scope="scope">
+          {{ scope.$index + 1 }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="orderRef1" label="PO号" header-align="center" align="left" min-width="150" show-overflow-tooltip/>
+      <el-table-column prop="partNo" label="产品编码" header-align="center" align="left" min-width="150" show-overflow-tooltip/>
+      <el-table-column prop="partDesc" label="产品名称" header-align="center" align="left" min-width="150" show-overflow-tooltip/>
+      <el-table-column prop="qty" label="验货数量" header-align="center" align="right" width="120"/>
+      <el-table-column prop="status" label="状态" header-align="center" align="center" width="100"/>
+      <el-table-column prop="inspectNo" label="验货单号" header-align="center" align="left" min-width="150" show-overflow-tooltip/>
+      <el-table-column prop="inspectResult" label="验货结果" header-align="center" align="center" width="120"/>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import { getInspectionRequestDetailList } from '@/api/inspection/inspectionRequestHeader.js'
+
+export default {
+  name: 'InspectionRequestDetailTab',
+
+  props: {
+    detailData: {
+      type: Object,
+      default: () => ({})
+    },
+    tableHeight: {
+      type: Number,
+      default: 400
+    }
+  },
+
+  data () {
+    return {
+      detailList: [],
+      loading: false
+    }
+  },
+
+  watch: {
+    // 监听 detailData 变化，触发查询
+    detailData: {
+      handler (newVal) {
+        if (newVal && newVal.requestNo && newVal.site) {
+          this.loadDetailList()
+        } else {
+          this.detailList = []
+        }
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+
+  methods: {
+    // 加载明细列表
+    loadDetailList () {
+      if (!this.detailData.requestNo || !this.detailData.site) {
+        this.detailList = []
+        return
+      }
+
+      this.loading = true
+      getInspectionRequestDetailList({
+        requestNo: this.detailData.requestNo,
+        site: this.detailData.site
+      }).then(({ data }) => {
+        if (data.code === 0) {
+          const list = data.list || []
+          // 转换状态显示
+          this.detailList = list.map(item => {
+            return {
+              ...item,
+              status: item.status || this.getStatusText(item.statusDb)
+            }
+          })
+        }
+        this.loading = false
+      }).catch(() => {
+        this.loading = false
+      })
+    },
+
+    // 状态转换
+    getStatusText (statusDb) {
+      const statusMap = {
+        'DRAFT': '草稿',
+        'PENDING': '待检验',
+        'INSPECTING': '检验中',
+        'INSPECTED': '已检验',
+        'COMPLETED': '已完成',
+        'CANCELLED': '已取消'
+      }
+      return statusMap[statusDb] || statusDb || '-'
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.detail-container {
+  padding: 0;
+  background: #fff;
+}
+</style>
diff --git a/src/views/modules/inspection/com_inspectionRequestPoDetailTab.vue b/src/views/modules/inspection/com_inspectionRequestPoDetailTab.vue
new file mode 100644
index 0000000..95c912c
--- /dev/null
+++ b/src/views/modules/inspection/com_inspectionRequestPoDetailTab.vue
@@ -0,0 +1,90 @@
+<template>
+  <div class="detail-container">
+    <!-- 明细表格 -->
+    <el-table :data="detailList" border v-loading="loading" style="width: 100%;" :height="tableHeight">
+      <el-table-column label="序号" header-align="center" align="center" width="80">
+        <template slot-scope="scope">
+          {{ scope.$index + 1 }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="poNo" label="PO号" header-align="center" align="left" min-width="150" show-overflow-tooltip/>
+      <el-table-column prop="poItemNo" label="PO行号" header-align="center" align="center" width="100"/>
+      <el-table-column prop="partNo" label="产品编码" header-align="center" align="left" min-width="150" show-overflow-tooltip/>
+      <el-table-column prop="partDesc" label="产品名称" header-align="center" align="left" min-width="150" show-overflow-tooltip/>
+      <el-table-column prop="qty" label="验货数量" header-align="center" align="right" width="120"/>
+      <el-table-column prop="shipMothod" label="运输方式" header-align="center" align="center" width="120"/>
+      <el-table-column prop="crd" label="CRD日期" header-align="center" align="center" width="120"/>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import { getInspectionRequestDetailSubList } from '@/api/inspection/inspectionRequestHeader.js'
+
+export default {
+  name: 'InspectionRequestPoDetailTab',
+
+  props: {
+    detailData: {
+      type: Object,
+      default: () => ({})
+    },
+    tableHeight: {
+      type: Number,
+      default: 400
+    }
+  },
+
+  data () {
+    return {
+      detailList: [],
+      loading: false
+    }
+  },
+
+  watch: {
+    // 监听 detailData 变化，触发查询
+    detailData: {
+      handler (newVal) {
+        if (newVal && newVal.requestNo && newVal.site) {
+          this.loadDetailList()
+        } else {
+          this.detailList = []
+        }
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+
+  methods: {
+    // 加载明细列表
+    loadDetailList () {
+      if (!this.detailData.requestNo || !this.detailData.site) {
+        this.detailList = []
+        return
+      }
+
+      this.loading = true
+      getInspectionRequestDetailSubList({
+        requestNo: this.detailData.requestNo,
+        site: this.detailData.site
+      }).then(({ data }) => {
+        if (data.code === 0) {
+          this.detailList = data.list || []
+        }
+        this.loading = false
+      }).catch(() => {
+        this.loading = false
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.detail-container {
+  padding: 0;
+  background: #fff;
+}
+</style>
diff --git a/src/views/modules/inspection/com_inspectionResultTab.vue b/src/views/modules/inspection/com_inspectionResultTab.vue
new file mode 100644
index 0000000..5c43d67
--- /dev/null
+++ b/src/views/modules/inspection/com_inspectionResultTab.vue
@@ -0,0 +1,90 @@
+<template>
+  <div class="detail-container">
+    <!-- 明细表格 -->
+    <el-table :data="detailList" border v-loading="loading" style="width: 100%;" :height="tableHeight">
+      <el-table-column label="序号" header-align="center" align="center" width="80">
+        <template slot-scope="scope">
+          {{ scope.$index + 1 }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="requestNo" label="任务单号" header-align="center" align="left" min-width="150" show-overflow-tooltip/>
+      <el-table-column prop="poNo" label="PO号" header-align="center" align="left" min-width="150" show-overflow-tooltip/>
+      <el-table-column prop="poItemNo" label="PO行号" header-align="center" align="center" width="100"/>
+      <el-table-column prop="partNo" label="产品编码" header-align="center" align="left" min-width="150" show-overflow-tooltip/>
+      <el-table-column prop="partDesc" label="产品名称" header-align="center" align="left" min-width="150" show-overflow-tooltip/>
+      <el-table-column prop="qty" label="验货数量" header-align="center" align="right" width="120"/>
+      <el-table-column prop="inspectResult" label="验货结果" header-align="center" align="center" width="120"/>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import { getInspectionResultList } from '@/api/inspection/inspectionRequestHeader.js'
+
+export default {
+  name: 'InspectionResultTab',
+
+  props: {
+    detailData: {
+      type: Object,
+      default: () => ({})
+    },
+    tableHeight: {
+      type: Number,
+      default: 400
+    }
+  },
+
+  data () {
+    return {
+      detailList: [],
+      loading: false
+    }
+  },
+
+  watch: {
+    // 监听 detailData 变化，触发查询
+    detailData: {
+      handler (newVal) {
+        if (newVal && newVal.requestNo && newVal.site) {
+          this.loadDetailList()
+        } else {
+          this.detailList = []
+        }
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+
+  methods: {
+    // 加载明细列表
+    loadDetailList () {
+      if (!this.detailData.requestNo || !this.detailData.site) {
+        this.detailList = []
+        return
+      }
+
+      this.loading = true
+      getInspectionResultList({
+        requestNo: this.detailData.requestNo,
+        site: this.detailData.site
+      }).then(({ data }) => {
+        if (data.code === 0) {
+          this.detailList = data.list || []
+        }
+        this.loading = false
+      }).catch(() => {
+        this.loading = false
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.detail-container {
+  padding: 0;
+  background: #fff;
+}
+</style>
diff --git a/src/views/modules/inspection/inspectionRequestList.vue b/src/views/modules/inspection/inspectionRequestList.vue
new file mode 100644
index 0000000..fb14f8a
--- /dev/null
+++ b/src/views/modules/inspection/inspectionRequestList.vue
@@ -0,0 +1,1203 @@
+<template>
+  <div class="customer-css">
+    <!-- 查询条件 -->
+    <el-form :inline="true" label-width="90px" class="search-form-inline">
+      <!-- 第一行 -->
+      <div class="search-row">
+        <el-form-item>
+          <span style="cursor: pointer" slot="label" @click="getBaseList(1100)"><a href="#">供应商编码</a></span>
+          <el-input v-model="searchData.supplierNo" class="input-small" @keyup.enter.native="getMainData"/>
+        </el-form-item>
+        <el-form-item label="供应商名称">
+          <el-input v-model="searchData.supplierName" class="input-small" @keyup.enter.native="getMainData"/>
+        </el-form-item>
+
+        <el-form-item label="申请日期">
+          <div class="date-range">
+            <el-date-picker v-model="searchData.requestDateStart" type="date" value-format="yyyy-MM-dd" placeholder="开始" class="date-small"/>
+            <span class="split">-</span>
+            <el-date-picker v-model="searchData.requestDateEnd" type="date" value-format="yyyy-MM-dd" placeholder="结束" class="date-small"/>
+          </div>
+        </el-form-item>
+
+        <el-form-item label="状态">
+          <el-select v-model="searchData.status" clearable class="input-mini" placeholder="全部">
+            <el-option label="全部" value="" />
+            <el-option label="草稿" value="DRAFT" />
+            <el-option label="已确认" value="CONFIRMED" />
+            <el-option label="已排程" value="SCHEDULED" />
+            <el-option label="已验货" value="INSPECTED" />
+            <el-option label="已取消" value="CANCELLED" />
+          </el-select>
+        </el-form-item>
+
+      </div>
+
+      <!-- 第二行 -->
+      <div class="search-row">
+
+        <el-form-item>
+          <span style="cursor: pointer" slot="label" @click="getBaseList(2016, 'createBy')"><a href="#">申请人员</a></span>
+          <el-input v-model="searchData.createBy" class="input-small" @keyup.enter.native="getMainData"/>
+        </el-form-item>
+
+        <el-form-item>
+          <span style="cursor: pointer" slot="label" @click="getBaseList(2016, 'qcOperator')"><a href="#">QC人员</a></span>
+          <el-input v-model="searchData.qcOperator" class="input-small" @keyup.enter.native="getMainData"/>
+        </el-form-item>
+
+        <el-form-item label="建议验货日期">
+          <div class="date-range">
+            <el-date-picker v-model="searchData.needInspectDateStart" type="date" value-format="yyyy-MM-dd" placeholder="开始" class="date-small"/>
+            <span class="split">-</span>
+            <el-date-picker v-model="searchData.needInspectDateEnd" type="date" value-format="yyyy-MM-dd" placeholder="结束" class="date-small"/>
+          </div>
+        </el-form-item>
+      </div>
+
+      <!-- 第三行 -->
+      <div class="search-row">
+        <el-form-item label="申请单号">
+          <el-input v-model="searchData.requestNo" class="input-small" @keyup.enter.native="getMainData"/>
+        </el-form-item>
+
+        <el-form-item label="计划验货日期">
+          <div class="date-range">
+            <el-date-picker v-model="searchData.planStartDate" type="date" value-format="yyyy-MM-dd" placeholder="开始" class="date-small"/>
+            <span class="split">-</span>
+            <el-date-picker v-model="searchData.planEndDate" type="date" value-format="yyyy-MM-dd" placeholder="结束" class="date-small"/>
+          </div>
+        </el-form-item>
+
+      </div>
+
+      <!-- 按钮 -->
+      <div class="search-btn-row">
+        <el-button type="primary" class="customer-bun-min" @click="getMainData">查询</el-button>
+        <el-button type="primary" class="customer-bun-min" @click="addInspectionRequest">新增</el-button>
+        <el-button type="primary" class="customer-bun-min" @click="importExcel">Excel导入</el-button>
+        <el-button type="primary" class="customer-bun-min" @click="exportExcel">导出</el-button>
+      </div>
+    </el-form>
+
+    <Chooselist ref="baseList" @getBaseData="getBaseData"></Chooselist>
+
+    <el-table
+      :height="height"
+      :data="mainDataList"
+      border
+      ref="mainTable"
+      highlight-current-row
+      @row-click="changeData"
+      v-loading="dataListLoading"
+      style="margin-top: 0px; width: 100%;">
+      <el-table-column
+        v-for="(item,index) in columnArray1" :key="index"
+        :sortable="item.columnSortable"
+        :prop="item.columnProp"
+        :header-align="item.headerAlign"
+        :show-overflow-tooltip="item.showOverflowTooltip"
+        :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>
+          <span v-if="item.columnImage"><img :src="scope.row[item.columnProp]"
+                                             style="width: 100px; height: 100px"/></span>
+        </template>
+      </el-table-column>
+      <el-table-column fixed="right" header-align="center" align="center" width="100" label="操作">
+        <template slot-scope="scope">
+          <el-link style="cursor: pointer; color: #F56C6C;" @click="deleteInspectionRequest(scope.row)">删除</el-link>
+        </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>
+
+    <!-- 详情页签 -->
+    <el-tabs v-model="activeTab" style="margin-top: 0px; width: 99%;" @tab-click="handleTabClick" class="customer-tab" type="border-card">
+      <!-- 基本信息 -->
+      <el-tab-pane label="基本信息" name="base">
+        <inspection-request-detail :detail-data="currentRow" />
+      </el-tab-pane>
+      <!-- 验货明细 -->
+      <el-tab-pane label="验货明细" name="detail">
+        <inspection-request-detail-tab ref="inspectionDetailTab" :detail-data="currentRow" :table-height="detailHeight" />
+      </el-tab-pane>
+      <!-- 验货关联PO明细 -->
+      <el-tab-pane label="验货关联PO明细" name="poDetail">
+        <inspection-request-po-detail-tab ref="poDetailTab" :detail-data="currentRow" :table-height="detailHeight" />
+      </el-tab-pane>
+      <!-- 验货结果 -->
+      <el-tab-pane label="验货结果" name="result">
+        <inspection-result-tab ref="resultTab" :detail-data="currentRow" :table-height="detailHeight" />
+      </el-tab-pane>
+    </el-tabs>
+
+    <!-- 新增弹窗 -->
+    <el-dialog
+      title="新增验货申请"
+      :visible.sync="addDialogVisible"
+      width="65%"
+      top="5vh"
+      :close-on-click-modal="false"
+      @close="handleCloseAddDialog">
+
+      <el-form :model="addFormData" :rules="addRules" ref="addFormData" label-width="90px" size="mini" class="add-dialog-form">
+        <div class="form-section">
+          <el-row :gutter="10">
+            <el-col :span="6">
+              <el-form-item label="申请单号" prop="requestNo">
+                <el-input v-model="addFormData.requestNo" placeholder="自动生成" disabled size="mini"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="申请日期" prop="requestDate">
+                <el-date-picker
+                  v-model="addFormData.requestDate"
+                  type="date"
+                  value-format="yyyy-MM-dd"
+                  placeholder="选择日期"
+                  size="mini"
+                  style="width: 100%">
+                </el-date-picker>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label=" " >
+                <div style="height: 28px;"></div>
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-row :gutter="10">
+            <el-col :span="6">
+              <el-form-item label="供应商编码" prop="supplierNo">
+                <el-input v-model="addFormData.supplierNo" placeholder="请选择" readonly @click.native="selectSupplier" size="mini">
+                  <i slot="suffix" class="el-icon-search" style="cursor: pointer;"></i>
+                </el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="10">
+              <el-form-item label="供应商名称" prop="supplierName">
+                <el-input v-model="addFormData.supplierName" disabled size="mini"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label=" " >
+                <div style="height: 28px;"></div>
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-row :gutter="10">
+            <el-col :span="6">
+              <el-form-item label="建议验货日期" prop="needInspectDate">
+                <el-date-picker
+                  v-model="addFormData.needInspectDate"
+                  type="date"
+                  value-format="yyyy-MM-dd"
+                  placeholder="选择日期"
+                  size="mini"
+                  style="width: 100%">
+                </el-date-picker>
+              </el-form-item>
+            </el-col>
+            <el-col :span="10">
+              <el-form-item label="验货地址" prop="inspectAddress">
+                <el-input v-model="addFormData.inspectAddress" placeholder="请输入验货地址" size="mini"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="联系人" prop="contact">
+                <el-input v-model="addFormData.contact" placeholder="请输入联系人及电话" size="mini"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="2">
+              <el-form-item label=" " >
+                <div style="height: 28px;"></div>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </div>
+
+        <!-- 步骤2：批量选择PO -->
+        <div class="po-section">
+          <div class="section-title">批量选择PO</div>
+          <el-table
+            :data="poList"
+            border
+            size="small"
+            table-layout="fixed"
+            style="width: 100%; margin-top: 10px;"
+            @selection-change="handleSelectionChange">
+            <el-table-column type="selection" width="55" align="center"/>
+            <el-table-column prop="orderRef1" label="PO号" header-align="center" align="center" width="120"/>
+            <el-table-column prop="orderRef2" label="PO行号" header-align="center" align="center" width="100"/>
+            <el-table-column prop="partNo" label="产品编码" header-align="center" align="left" min-width="120" show-overflow-tooltip/>
+            <el-table-column prop="partDesc" label="产品名称" header-align="center" align="left" min-width="150" show-overflow-tooltip/>
+            <el-table-column prop="qty" label="订单数量" header-align="center" align="right" width="120"/>
+            <el-table-column prop="waitInspectQty" label="未验货数量" header-align="center" align="right" width="120"/>
+            <el-table-column prop="shipMethod" label="运输方式" header-align="center" align="center" width="120">
+              <template slot-scope="scope">
+                <el-select v-model="scope.row.shipMethod" placeholder="请选择" size="mini" style="width: 100%; box-sizing: border-box;">
+                  <el-option label="空运" value="空运"></el-option>
+                  <el-option label="海运" value="海运"></el-option>
+                  <el-option label="陆运" value="陆运"></el-option>
+                </el-select>
+              </template>
+            </el-table-column>
+            <el-table-column
+              prop="crd"
+              label="CRD日期"
+              header-align="center"
+              align="center"
+              width="160"
+            >
+              <template slot-scope="scope">
+                <el-date-picker
+                  v-model="scope.row.crd"
+                  type="date"
+                  value-format="yyyy-MM-dd"
+                  format="yyyy-MM-dd"
+                  placeholder="选择日期"
+                  size="mini"
+                  style="width: 100%;"
+                />
+              </template>
+            </el-table-column>
+            <el-table-column label="此次验货数量" header-align="center" align="center" width="150">
+              <template slot-scope="scope">
+                <el-input-number
+                  v-model="scope.row.inspectQty"
+                  :min="0"
+                  :max="scope.row.waitInspectQty || 999999"
+                  size="mini"
+                  :controls="false"
+                  style="width: 100%; box-sizing: border-box;"
+                  @input="handleInspectQtyChange(scope.row, $event)">
+                </el-input-number>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </el-form>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="handleSaveAdd">保存</el-button>
+        <el-button @click="handleCloseAddDialog">关闭</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { searchInspectionRequestHeaderList, queryPoPage, saveInspectionRequest } from '@/api/inspection/inspectionRequestHeader.js'
+import Chooselist from '@/views/modules/common/Chooselist_eam'
+import ComInspectionRequestDetail from './com_inspectionRequestDetail.vue'
+import ComInspectionRequestDetailTab from './com_inspectionRequestDetailTab.vue'
+import ComInspectionRequestPoDetailTab from './com_inspectionRequestPoDetailTab.vue'
+import ComInspectionResultTab from './com_inspectionResultTab.vue'
+
+export default {
+  components: {
+    Chooselist,
+    InspectionRequestDetail: ComInspectionRequestDetail,
+    InspectionRequestDetailTab: ComInspectionRequestDetailTab,
+    InspectionRequestPoDetailTab: ComInspectionRequestPoDetailTab,
+    InspectionResultTab: ComInspectionResultTab
+  },
+  data () {
+    return {
+      functionId: this.$route.meta.menuId,
+      height: 400,
+      detailHeight: 400,
+      currentRow: {},
+      tagNo: '',
+      searchType: '',
+      activeTab: 'base',
+      // 新增弹窗相关数据
+      addDialogVisible: false,
+      addFormData: {
+        requestNo: '',
+        requestDate: '',
+        supplierNo: '',
+        supplierName: '',
+        inspectAddress: '',
+        contact: '',
+        needInspectDate: ''
+      },
+      addRules: {
+        requestDate: [
+          { required: true, message: '请选择申请日期', trigger: 'change' }
+        ],
+        supplierNo: [
+          { required: true, message: '请选择供应商', trigger: 'change' }
+        ]
+      },
+      poList: [],
+      selectedPoList: [],
+      searchData: {
+        requestNo: '',
+        supplierNo: '',
+        supplierName: '',
+        status: '',
+        qcOperator: '',
+        createBy: '',
+        requestDateStart: '',
+        requestDateEnd: '',
+        needInspectDateStart: '',
+        needInspectDateEnd: '',
+        planStartDate: '',
+        planEndDate: '',
+        page: 1,
+        limit: 50
+      },
+      pageIndex: 1,
+      pageSize: 50,
+      totalPage: 0,
+      mainDataList: [],
+      dataListLoading: false,
+      columnArray1: [
+        {
+          userId: this.$store.state.user.name,
+          functionId: this.functionId,
+          serialNumber: 'InspectionTable1RequestNo',
+          tableId: 'InspectionTable1',
+          tableName: '检验申请单',
+          columnProp: 'requestNo',
+          headerAlign: 'center',
+          align: 'left',
+          columnLabel: '申请单号',
+          columnWidth: '120',
+          columnHidden: false,
+          columnImage: false,
+          columnSortable: false,
+          sortLv: 0,
+          status: true,
+          fixed: false
+        },
+        {
+          userId: this.$store.state.user.name,
+          functionId: this.functionId,
+          serialNumber: 'InspectionTable1RequestDate',
+          tableId: 'InspectionTable1',
+          tableName: '检验申请单',
+          columnProp: 'requestDate',
+          headerAlign: 'center',
+          align: 'center',
+          columnLabel: '申请日期',
+          columnWidth: '120',
+          columnHidden: false,
+          columnImage: false,
+          columnSortable: false,
+          sortLv: 0,
+          status: true,
+          fixed: false
+        },
+        {
+          userId: this.$store.state.user.name,
+          functionId: this.functionId,
+          serialNumber: 'InspectionTable1SupplierNo',
+          tableId: 'InspectionTable1',
+          tableName: '检验申请单',
+          columnProp: 'supplierNo',
+          headerAlign: 'center',
+          align: 'left',
+          columnLabel: '供应商编码',
+          columnWidth: '120',
+          columnHidden: false,
+          columnImage: false,
+          columnSortable: false,
+          sortLv: 0,
+          status: true,
+          fixed: false
+        },
+        {
+          userId: this.$store.state.user.name,
+          functionId: this.functionId,
+          serialNumber: 'InspectionTable1SupplierName',
+          tableId: 'InspectionTable1',
+          tableName: '检验申请单',
+          columnProp: 'supplierName',
+          headerAlign: 'center',
+          align: 'left',
+          columnLabel: '供应商名称',
+          columnWidth: '150',
+          columnHidden: false,
+          columnImage: false,
+          columnSortable: false,
+          sortLv: 0,
+          status: true,
+          fixed: false
+        },
+        {
+          userId: this.$store.state.user.name,
+          functionId: this.functionId,
+          serialNumber: 'InspectionTable1CreateBy',
+          tableId: 'InspectionTable1',
+          tableName: '检验申请单',
+          columnProp: 'createBy',
+          headerAlign: 'center',
+          align: 'left',
+          columnLabel: '申请人员',
+          columnWidth: '100',
+          columnHidden: false,
+          columnImage: false,
+          columnSortable: false,
+          sortLv: 0,
+          status: true,
+          fixed: false
+        },
+        {
+          userId: this.$store.state.user.name,
+          functionId: this.functionId,
+          serialNumber: 'InspectionTable1NeedInspectDate',
+          tableId: 'InspectionTable1',
+          tableName: '检验申请单',
+          columnProp: 'needInspectDate',
+          headerAlign: 'center',
+          align: 'center',
+          columnLabel: '建议验货日期',
+          columnWidth: '120',
+          columnHidden: false,
+          columnImage: false,
+          columnSortable: false,
+          sortLv: 0,
+          status: true,
+          fixed: false
+        },
+        {
+          userId: this.$store.state.user.name,
+          functionId: this.functionId,
+          serialNumber: 'InspectionTable1InspectAddress',
+          tableId: 'InspectionTable1',
+          tableName: '检验申请单',
+          columnProp: 'inspectAddress',
+          headerAlign: 'center',
+          align: 'left',
+          columnLabel: '验货地址',
+          columnWidth: '200',
+          columnHidden: false,
+          columnImage: false,
+          columnSortable: false,
+          sortLv: 0,
+          status: true,
+          fixed: false
+        },
+        {
+          userId: this.$store.state.user.name,
+          functionId: this.functionId,
+          serialNumber: 'InspectionTable1Contact',
+          tableId: 'InspectionTable1',
+          tableName: '检验申请单',
+          columnProp: 'inspectContract',
+          headerAlign: 'center',
+          align: 'left',
+          columnLabel: '联系人',
+          columnWidth: '150',
+          columnHidden: false,
+          columnImage: false,
+          columnSortable: false,
+          sortLv: 0,
+          status: true,
+          fixed: false
+        },
+        {
+          userId: this.$store.state.user.name,
+          functionId: this.functionId,
+          serialNumber: 'InspectionTable1Remark',
+          tableId: 'InspectionTable1',
+          tableName: '检验申请单',
+          columnProp: 'remark',
+          headerAlign: 'center',
+          align: 'left',
+          columnLabel: '备注',
+          columnWidth: '150',
+          columnHidden: false,
+          columnImage: false,
+          columnSortable: false,
+          sortLv: 0,
+          status: true,
+          fixed: false
+        },
+        {
+          userId: this.$store.state.user.name,
+          functionId: this.functionId,
+          serialNumber: 'InspectionTable1Status',
+          tableId: 'InspectionTable1',
+          tableName: '检验申请单',
+          columnProp: 'status',
+          headerAlign: 'center',
+          align: 'center',
+          columnLabel: '状态',
+          columnWidth: '100',
+          columnHidden: false,
+          columnImage: false,
+          columnSortable: false,
+          sortLv: 0,
+          status: true,
+          fixed: false
+        },
+        {
+          userId: this.$store.state.user.name,
+          functionId: this.functionId,
+          serialNumber: 'InspectionTable1PlanStartDate',
+          tableId: 'InspectionTable1',
+          tableName: '检验申请单',
+          columnProp: 'planStartDate',
+          headerAlign: 'center',
+          align: 'center',
+          columnLabel: '计划验货日期',
+          columnWidth: '120',
+          columnHidden: false,
+          columnImage: false,
+          columnSortable: false,
+          sortLv: 0,
+          status: true,
+          fixed: false
+        },
+        {
+          userId: this.$store.state.user.name,
+          functionId: this.functionId,
+          serialNumber: 'InspectionTable1QcOperator',
+          tableId: 'InspectionTable1',
+          tableName: '检验申请单',
+          columnProp: 'qcOperator',
+          headerAlign: 'center',
+          align: 'left',
+          columnLabel: 'QC人员',
+          columnWidth: '100',
+          columnHidden: false,
+          columnImage: false,
+          columnSortable: false,
+          sortLv: 0,
+          status: true,
+          fixed: false
+        }
+      ]
+    }
+  },
+  mounted () {
+    this.$nextTick(() => {
+      this.height = (window.innerHeight - 220) / 2
+      this.detailHeight = (window.innerHeight - 220) / 2
+      this.getMainData()
+    })
+  },
+  methods: {
+    // 获取基础数据列表
+    getBaseList (val, type) {
+      this.tagNo = val
+      this.searchType = type || ''
+      this.$nextTick(() => {
+        let strVal = ''
+        let conSql = ''
+        if (val === 1100) {
+          strVal = this.searchData.supplierNo || ''
+          conSql = " and site = '" + this.$store.state.user.site + "'"
+        }
+        if (val === 2016) {
+          strVal = type === 'createBy' ? (this.searchData.createBy || '') : (this.searchData.qcOperator || '')
+        }
+        this.$refs.baseList.init(val, strVal, conSql)
+      })
+    },
+
+    /* 列表方法的回调 */
+    getBaseData (val) {
+      if (this.tagNo === 1100) {
+        // 判断是搜索条件还是新增弹窗
+        if (this.addDialogVisible) {
+          // 新增弹窗：使用下划线命名的字段，使用$set确保响应式
+          this.$set(this.addFormData, 'supplierNo', val.supplier_no || '')
+          this.$set(this.addFormData, 'supplierName', val.supplier_name || '')
+          this.loadPoList()
+        } else {
+          // 搜索条件：使用下划线命名的字段
+          this.searchData.supplierNo = val.supplier_no || ''
+          this.searchData.supplierName = val.supplier_name || ''
+        }
+      }
+      if (this.tagNo === 2016) {
+        if (this.searchType === 'createBy') {
+          this.searchData.createBy = val.username || val.user_display || val.name
+        } else if (this.searchType === 'qcOperator') {
+          this.searchData.qcOperator = val.username || val.user_display || val.name
+        }
+      }
+    },
+
+    // 查询数据
+    getMainData () {
+      this.searchData.limit = this.pageSize
+      this.searchData.page = this.pageIndex
+      this.dataListLoading = true
+
+      searchInspectionRequestHeaderList(this.searchData).then(({ data }) => {
+        if (data.code === 0) {
+          this.mainDataList = data.page.list
+          this.pageIndex = data.page.currPage
+          this.pageSize = data.page.pageSize
+          this.totalPage = data.page.totalCount
+
+          this.$nextTick(() => {
+            if (this.$refs.mainTable) {
+              this.$refs.mainTable.clearSelection()
+            }
+          })
+
+          // 判断是否有数据
+          if (this.mainDataList.length > 0) {
+            this.$refs.mainTable.setCurrentRow(this.mainDataList[0])
+            this.changeData(this.mainDataList[0])
+          } else {
+            this.changeData(null)
+          }
+        }
+        this.dataListLoading = false
+      }).catch(() => {
+        this.dataListLoading = false
+      })
+    },
+
+    // 每页数
+    sizeChangeHandle (val) {
+      this.pageSize = val
+      this.pageIndex = 1
+      this.getMainData()
+    },
+
+    // 当前页
+    currentChangeHandle (val) {
+      this.pageIndex = val
+      this.getMainData()
+    },
+
+    // 页签点击事件
+    handleTabClick (tab) {
+      // 每次点击页签都触发对应页签的查询
+      if (tab.name === 'detail') {
+        // 验货明细页签 - 组件内部 watch 会自动触发
+        this.$nextTick(() => {
+          if (this.$refs.inspectionDetailTab) {
+            this.$refs.inspectionDetailTab.loadDetailList()
+          }
+        })
+      } else if (tab.name === 'poDetail') {
+        // 验货关联PO明细页签
+        this.$nextTick(() => {
+          if (this.$refs.poDetailTab) {
+            this.$refs.poDetailTab.loadDetailList()
+          }
+        })
+      } else if (tab.name === 'result') {
+        // 验货结果页签
+        this.$nextTick(() => {
+          if (this.$refs.resultTab) {
+            this.$refs.resultTab.loadDetailList()
+          }
+        })
+      }
+    },
+
+    // 行点击事件
+    changeData (row) {
+      this.currentRow = row ? JSON.parse(JSON.stringify(row)) : {}
+    },
+
+    // 新增验货申请
+    addInspectionRequest () {
+      this.addDialogVisible = true
+      this.resetAddForm()
+    },
+
+    // 关闭新增弹窗
+    handleCloseAddDialog () {
+      this.addDialogVisible = false
+      this.resetAddForm()
+    },
+
+    // 重置表单
+    resetAddForm () {
+      const today = new Date()
+      const year = today.getFullYear()
+      const month = String(today.getMonth() + 1).padStart(2, '0')
+      const day = String(today.getDate()).padStart(2, '0')
+      const todayStr = `${year}-${month}-${day}`
+
+      this.addFormData = {
+        requestNo: '',
+        requestDate: todayStr,
+        supplierNo: '',
+        supplierName: '',
+        inspectAddress: '',
+        contact: '',
+        needInspectDate: ''
+      }
+      this.poList = []
+      this.selectedPoList = []
+      if (this.$refs.addFormData) {
+        this.$refs.addFormData.clearValidate()
+      }
+    },
+
+    // 选择供应商
+    selectSupplier () {
+      this.tagNo = 1100  // 设置tagNo，确保回调时能正确识别
+      this.$nextTick(() => {
+        const conSql = " and site = '" + this.$store.state.user.site + "'"
+        this.$refs.baseList.init(1100, this.addFormData.supplierNo || '', conSql)
+      })
+    },
+
+    // 加载PO列表（选择供应商后调用）
+    loadPoList () {
+      if (!this.addFormData.supplierNo) {
+        this.$message.warning('请先选择供应商')
+        return
+      }
+
+      const params = {
+        supplierNo: this.addFormData.supplierNo,
+        site: this.$store.state.user.site,
+        page: 1,
+        limit: 1000
+      }
+
+      queryPoPage(params).then(({ data }) => {
+        if (data.code === 0 && data.page) {
+          this.poList = data.page.list.map(item => ({
+            ...item,
+            inspectQty: item.waitInspectQty || 0, // 默认值为未验货数量
+            shipMethod: item.shipMethod || '',// 运输方式
+            crd: item.crd ? item.crd.split(' ')[0] : ''
+          }))
+        } else {
+          this.poList = []
+          this.$message.info('该供应商暂无可申请验货的PO')
+        }
+      }).catch(() => {
+        this.poList = []
+        this.$message.error('加载PO列表失败')
+      })
+    },
+
+    // 表格选择变化
+    handleSelectionChange (selection) {
+      this.selectedPoList = selection
+    },
+
+    // 验货数量变化
+    handleInspectQtyChange (row, value) {
+      console.log('验货数量变化：', row.orderRef1, value)
+      // 确保数据被正确更新
+      this.$set(row, 'inspectQty', value)
+    },
+
+    // 保存
+    handleSaveAdd () {
+      console.log('开始保存，当前选择的PO列表：', this.selectedPoList)
+      console.log('表单数据：', this.addFormData)
+
+      this.$refs.addFormData.validate((valid) => {
+        console.log('表单验证结果：', valid)
+        if (valid) {
+          if (this.selectedPoList.length === 0) {
+            this.$message.warning('请至少选择一条PO明细')
+            return
+          }
+
+          // 检查验货数量
+          const hasInvalidQty = this.selectedPoList.some(item => !item.inspectQty || item.inspectQty <= 0)
+          if (hasInvalidQty) {
+            this.$message.warning('请填写有效的验货数量')
+            return
+          }
+
+          // 构建提交数据
+          const submitData = {
+            requestDate: this.addFormData.requestDate,
+            supplierNo: this.addFormData.supplierNo,
+            inspectAddress: this.addFormData.inspectAddress,
+            inspectContract: this.addFormData.contact,
+            remark: '',
+            items: this.selectedPoList.map(item => ({
+              orderNo: item.orderNo || item.order_ref1 || item.orderRef1,
+              itemNo: item.itemNo || item.item_no || item.order_ref2 || item.orderRef2,
+              partNo: item.partNo,
+              orderRef1: item.orderRef1,
+              orderRef2: item.orderRef2,
+              qty: item.inspectQty,
+              shipMethod: item.shipMethod,
+              crd: item.crd
+            }))
+          }
+
+          console.log('提交的数据：', submitData)
+
+          saveInspectionRequest(submitData).then(({ data }) => {
+            console.log('保存接口返回：', data)
+            if (data.code === 0) {
+              this.$message.success('保存成功')
+              this.handleCloseAddDialog()
+              this.getMainData()
+            } else {
+              this.$message.error(data.msg || '保存失败')
+            }
+          }).catch((error) => {
+            console.error('保存接口错误：', error)
+            this.$message.error('保存失败，请稍后重试')
+          })
+        } else {
+          console.log('表单验证失败')
+          this.$message.warning('请填写完整的表单信息')
+        }
+      })
+    },
+
+    // Excel导入
+    importExcel () {
+      this.$message.info('Excel导入功能开发中...')
+    },
+
+    // 导出
+    exportExcel () {
+      this.$message.info('导出功能开发中...')
+    },
+
+    // 删除验货申请
+    deleteInspectionRequest (row) {
+      this.$confirm('确定要删除该验货申请吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.$message.success('删除成功')
+        this.getMainData()
+      }).catch(() => {
+        this.$message.info('已取消删除')
+      })
+    }
+  },
+  created () {
+    this.getMainData()
+  }
+}
+</script>
+
+<style scoped lang="scss">
+
+.search-form-inline {
+padding: 10px 15px 0 0;
+ background: #fff;
+ }
+
+.search-row {
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  margin-bottom: 6px;
+}
+
+.search-btn-row {
+  margin-top: 10px;
+  padding-left: 8px;
+}
+
+.input-small {
+  width: 110px;
+}
+
+.input-mini {
+  width: 90px;
+}
+
+.date-small {
+  width: 100px;
+}
+
+.date-range {
+  display: flex;
+  align-items: center;
+}
+
+.date-small {
+  width: 130px;
+}
+
+.split {
+  padding: 0 6px;
+  color: #606266;
+  font-size: 13px;
+}
+
+/deep/ .el-form-item {
+  margin-right: 18px;
+  margin-bottom: 6px;
+}
+
+/deep/ .el-form-item__label {
+  font-size: 13px;
+  color: #606266;
+  padding-right: 8px;
+  line-height: 32px;
+  font-weight: 500;
+}
+
+/deep/ .el-form-item__content {
+  line-height: normal;
+}
+
+/deep/ .el-input__inner {
+  height: 32px;
+  line-height: 32px;
+}
+
+/deep/ .el-date-editor .el-input__inner {
+  padding-right: 10px;
+  padding-left: 10px;
+}
+
+/deep/ .el-date-editor .el-input__prefix {
+  display: none;
+}
+
+/deep/ .el-date-editor .el-input__suffix {
+  display: none;
+}
+
+/deep/ .customer-tab .el-tabs__content {
+  padding: 5px !important;
+}
+
+.form-section {
+  margin-bottom: 15px;
+  padding-bottom: 15px;
+  border-bottom: 1px solid #ebeef5;
+  padding: 5px 10px;
+}
+
+.add-dialog-form /deep/ .el-form-item {
+  margin-bottom: 10px;
+}
+
+.add-dialog-form /deep/ .el-form-item__label {
+  text-align: left;
+  float: none;
+  display: block;
+  padding: 0 0 5px 0;
+  line-height: 1;
+  font-size: 13px;
+}
+
+.add-dialog-form /deep/ .el-form-item__content {
+  margin-left: 0 !important;
+}
+
+.po-section {
+  .section-title {
+    font-size: 14px;
+    font-weight: bold;
+    color: #303133;
+    margin-bottom: 8px;
+  }
+
+  .section-desc {
+    font-size: 12px;
+    color: #909399;
+    margin-bottom: 10px;
+  }
+}
+
+.dialog-footer {
+  text-align: center;
+}
+
+/deep/ .el-input-number .el-input__inner {
+  text-align: right !important;
+  padding-right: 32px !important;
+  padding-left: 8px !important;
+  box-sizing: border-box;
+}
+
+/deep/ .el-input .el-input--mini {
+  line-height: 20px;
+}
+
+/deep/ .el-input-number .el-input--mini {
+  line-height: 20px;
+}
+
+/* PO表格输入控件防遮挡 */
+.po-section {
+
+  /deep/ .el-table .cell {
+    overflow: visible !important;
+    padding-left: 4px;
+    padding-right: 4px;
+  }
+
+  /deep/ .el-input,
+  /deep/ .el-select {
+    width: 100% !important;
+  }
+
+  /deep/ .el-input-number .el-input__inner {
+    padding-left: 8px !important;
+    padding-right: 35px !important;
+    text-align: right;
+  }
+
+  /deep/ .el-input-number {
+    width: 120px !important;
+    min-width: 120px !important;
+  }
+
+  /deep/ .el-select .el-input__inner {
+    padding-right: 25px !important;
+  }
+}
+
+// 数字输入框按钮样式修复
+/deep/ .el-input-number {
+  position: relative;
+
+  .el-input-number__increase,
+  .el-input-number__decrease {
+    width: 28px;
+    height: 50%;
+    position: absolute;
+    right: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #f5f7fa;
+    border: none;
+    cursor: pointer;
+    transition: all 0.2s;
+    font-size: 12px;
+
+    &:hover {
+      background-color: #ecf5ff;
+      color: #409eff;
+    }
+
+    &:active {
+      background-color: #d9e1f0;
+    }
+  }
+
+  .el-input-number__increase {
+    top: 0;
+    bottom: auto;
+    border-bottom: 1px solid #dcdfe6;
+    border-top-right-radius: 4px;
+  }
+
+  .el-input-number__decrease {
+    top: auto;
+    bottom: 0;
+    border-bottom-right-radius: 4px;
+  }
+
+  // 确保输入框右边留出按钮空间
+  .el-input__inner {
+    padding-right: 32px !important;
+  }
+}
+
+// 数字输入框按钮样式修复
+/deep/ .el-input-number {
+  position: relative;
+
+  .el-input-number__increase,
+  .el-input-number__decrease {
+    width: 28px;
+    height: 50%;
+    position: absolute;
+    right: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #f5f7fa;
+    border: none;
+    cursor: pointer;
+    transition: all 0.2s;
+    font-size: 12px;
+
+    &:hover {
+      background-color: #ecf5ff;
+      color: #409eff;
+    }
+
+    &:active {
+      background-color: #d9e1f0;
+    }
+  }
+
+  .el-input-number__increase {
+    top: 0;
+    bottom: auto;
+    border-bottom: 1px solid #dcdfe6;
+    border-top-right-radius: 4px;
+  }
+
+  .el-input-number__decrease {
+    top: auto;
+    bottom: 0;
+    border-bottom-right-radius: 4px;
+  }
+
+  .el-input__inner {
+    padding-right: 32px !important;
+  }
+}
+
+/deep/ .el-input-number--mini {
+  .el-input-number__increase,
+  .el-input-number__decrease {
+    width: 24px;
+    font-size: 10px;
+  }
+
+  .el-input__inner {
+    padding-right: 28px !important;
+  }
+}
+.po-section {
+
+  /deep/ .el-date-editor.el-input,
+  /deep/ .el-date-editor.el-input__inner {
+    width: 100%;
+  }
+
+  /deep/ .el-date-editor .el-input__inner {
+    height: 28px;
+    line-height: 28px;
+    padding-left: 10px;
+    padding-right: 10px;
+    font-size: 12px;
+  }
+
+  /deep/ .el-date-editor .el-input__prefix {
+    display: none;
+  }
+
+  /deep/ .el-date-editor .el-input__suffix {
+    right: 5px;
+  }
+}
+
+</style>