feat(inspection): 添加验货申请管理功能

- 新增验货申请列表页面，支持查询、新增、删除等操作
- 实现验货申请详情展示组件，显示基本信息如申请单号、供应商、验货地址等
- 开发验货明细表格组件，展示验货数量、状态、验货结果等信息
- 添加验货关联PO明细组件，显示PO号、产品信息、运输方式等
- 创建验货结果表格组件，展示任务单号、验货结果等数据
- 集成API接口，包括验货申请列表查询、明细获取、结果查询等功能
- 实现新增验货申请弹窗，支持供应商选择、PO批量选择等功能
- 添加日期范围筛选、状态筛选等多种查询条件
- 实现表格分页、排序、多选等交互功能

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)

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>

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>

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>

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>