出口订单和运单详情页页面开发，列表跳转和返回逻辑

@@ -28,3 +28,11 @@ export function getAllExportingBills(data) {
     data
     data
   })
   })
 }
 }
+
+export function getAllTransportBills(data) {
+  return request({
+    url: '/bus-customer/exportWaybill/search',
+    method: 'post',
+    data
+  })
+}

+<template>
+<div>
+  <el-table :data="tableData" style="width: 100%" border height="220px">
+    <el-table-column prop="index" label="序号" width="80"></el-table-column>
+    <el-table-column prop="productNumber" label="企业商品编号" width="150"></el-table-column>
+    <el-table-column prop="productName" label="商品企业商品名称" width="180"></el-table-column>
+    <el-table-column prop="description" label="企业商品描述" width="150"></el-table-column>
+    <el-table-column prop="code" label="条码" width="150"></el-table-column>
+    <el-table-column prop="unit" label="计量单位" width="100">
+      <template slot-scope="scope">
+        <span>{{ scope.row.unit }}</span>
+        <i class="el-icon-top" style="margin-left: 5px;"></i>
+      </template>
+    </el-table-column>
+    <el-table-column prop="currency" label="币制" width="80"></el-table-column>
+    <el-table-column prop="quantity" label="数量" width="80"></el-table-column>
+    <el-table-column prop="unitPrice" label="单价" width="100"></el-table-column>
+    <el-table-column prop="totalPrice" label="总价" width="100"></el-table-column>
+    <el-table-column prop="notes" label="备注" width="300"></el-table-column>
+    <el-table-column label="操作" width="100" fixed="right">
+      <template slot-scope="scope">
+        <el-link type="primary" @click="handleExpand(scope.$index)">展开</el-link>
+      </template>
+    </el-table-column>
+  </el-table>
+</div>
+</template>
+
+<script>
+export default {
+  name: "ProductDetailTable",
+  data() {
+    return {
+      tableData: [
+        {
+          index: 1,
+          productNumber: "6704200000",
+          productName: "真人发发夹",
+          description: "测试内容",
+          code: "485607096",
+          unit: "↑",
+          currency: "美元",
+          quantity: 1,
+          unitPrice: "645.78",
+          totalPrice: "645.78",
+          notes: "山东电子口岸已写，加签后上传"
+        },
+        {
+          index: 2,
+          productNumber: "6704200000",
+          productName: "真人发发夹",
+          description: "测试内容",
+          code: "2145860720",
+          unit: "↑",
+          currency: "美元",
+          quantity: 2,
+          unitPrice: "645.78",
+          totalPrice: "645.78",
+          notes: "山东电子口岸已写，加签后上传"
+        },
+        {
+          index: 3,
+          productNumber: "6704200000",
+          productName: "真人发发夹",
+          description: "测试内容",
+          code: "2145860720",
+          unit: "↑",
+          currency: "美元",
+          quantity: 3,
+          unitPrice: "645.78",
+          totalPrice: "645.78",
+          notes: "山东电子口岸已写，加签后上传"
+        },
+        {
+          index: 4,
+          productNumber: "6704200000",
+          productName: "真人发发夹",
+          description: "测试内容",
+          code: "2145860720",
+          unit: "↑",
+          currency: "美元",
+          quantity: 1,
+          unitPrice: "635.78",
+          totalPrice: "635.78",
+          notes: "山东电子口岸已写，加签后上传"
+        }
+        // 更多数据项...
+      ]
+    };
+  },
+  methods: {
+    handleExpand(index) {
+      console.log(`展开第 ${index + 1} 行数据`);
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.el-table {
+  font-size: 14px;
+  //border: 1px solid red;
+  //height: 180px;
+  overflow: auto;
+}
+.el-icon-top {
+  color: #409eff;
+  font-size: 12px;
+}
+</style>

+<template>
+  <div>
+    <table class="custom-table">
+      <thead>
+      <tr>
+        <th v-for="(header, index) in headers" :key="index">{{ header }}</th>
+      </tr>
+      </thead>
+      <tbody>
+      <tr v-for="(row, index) in tableData" :key="index">
+        <td>{{ row.status }}</td>
+        <td>{{ row.time }}</td>
+        <td>{{ row.description }}</td>
+      </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ReceiptInfoTable",
+  data() {
+    return {
+      headers: ["回执状态", "状态时间", "回执描述"],
+      tableData: [
+        {
+          status: "山东电子口岸已上传",
+          time: "2024-11-08 15:31:58",
+          description: "订单变更申请报关单【f291cda6-f664-4bf5-8edc-bcc012f8775】单证不存在，不可报单申报，报文业务主键【24HX-11-40-3722960DYB】"
+        },
+        {
+          status: "山东电子口岸已上传",
+          time: "2024-11-08 15:31:58",
+          description: "山东电子口岸已上传"
+        },
+        {
+          status: "山东电子口岸已保存",
+          time: "2024-11-08 15:30:45",
+          description: "山东电子口岸已保存，加签后上传"
+        }
+      ]
+    };
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.custom-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 14px;
+  table-layout: fixed;
+  background-color: white;
+}
+
+.custom-table th, .custom-table td {
+  border: 1px solid #ccc;
+  padding: 8px 12px;
+  text-align: left;
+  word-wrap: break-word;
+}
+
+.custom-table thead {
+  background-color: #f5f5f5;
+}
+
+.custom-table th {
+  font-weight: bold;
+}
+
+.custom-table tr:nth-child(odd) {
+  //background-color: #fafafa;
+}
+</style>

@@ -105,10 +105,22 @@ export const constantRoutes = [
       {
       {
         path: '/exportBillDetail',
         path: '/exportBillDetail',
         component: (resolve) => require(['@/views/exportBillDetail/index'], resolve),
         component: (resolve) => require(['@/views/exportBillDetail/index'], resolve),
-        hidden: false,
+        hidden: true,
         meta: { title: '出口订单详情', icon: 'api' },
         meta: { title: '出口订单详情', icon: 'api' },
       },
       },
       {
       {
+        path: '/exportTransportDetail',
+        component: (resolve) => require(['@/views/exportTransportDetail/index'], resolve),
+        hidden: true,
+        meta: { title: '出口运单详情', icon: 'api' },
+      },
+      {
+        path: '/exportTransportBillQuery',
+        component: (resolve) => require(['@/views/exportTransportBillQuery/index'], resolve),
+        hidden: false,
+        meta: { title: '出口运单查询', icon: 'api' },
+      },
+      {
         path: 'index',
         path: 'index',
         component: (resolve) => require(['@/views/index'], resolve),
         component: (resolve) => require(['@/views/index'], resolve),
         name: '首页',
         name: '首页',

@@ -166,6 +166,7 @@
       :totalCount="total"
       :totalCount="total"
       @sizeChange="sizeChange"
       @sizeChange="sizeChange"
       @currentChange="currentChange"
       @currentChange="currentChange"
+      @rowClick="handleRowClick"
       :selection="true"
       :selection="true"
       :selectFixed="false"
       :selectFixed="false"
       @tableSelect="tableSelect"
       @tableSelect="tableSelect"
@@ -177,7 +178,6 @@
         <span>{{ `${scope.row.waveName}(${scope.row.waveExt2})` }}</span>
         <span>{{ `${scope.row.waveName}(${scope.row.waveExt2})` }}</span>
       </template>
       </template>
     </Table>
     </Table>
-
   </div>
   </div>
 </template>
 </template>
 
 
@@ -311,6 +311,15 @@ export default {
     input() {
     input() {
       this.$forceUpdate();
       this.$forceUpdate();
     },
     },
+    handleRowClick(row) {
+      const declareId = row.declareId;
+      this.$router.push({
+        path: '/exportBillDetail',
+        query: {
+          declareId
+        }
+      });
+    },
     async search(val) {
     async search(val) {
       try {
       try {
 
 

+<template>
+  <div>
+    <el-form
+      class="fedexFormStyle fedexformSreach fedexformSreachBottomBorder"
+      ref="sreachForm"
+      :model="searchForm"
+      label-position="top"
+      size="small"
+    >
+      <el-row class="row-border">
+        <el-col :span="5">
+          <Formitem label="运单编号" prop="consignmentCode">
+            <el-popover
+              placement="bottom"
+              width="320"
+              trigger="manual"
+              popper-class="popoverconsignmentCode"
+              v-model="textareaVisible.formItemconsignmentCode"
+            >
+              <el-input
+                name="consignmentCode-textarea"
+                type="textarea"
+                :rows="5"
+                id="popoverInputconsignmentCode"
+                class="inputShadow textareaPopover"
+                v-model="searchForm.consignmentCode"
+                resize="none"
+                maxlength="13000"
+                placeholder=""
+                @blur="textareaBlur"
+                @input="input"
+              ></el-input>
+              <el-input
+                slot="reference"
+                name="consignmentCode"
+                type="textarea"
+                :rows="1"
+                class="inputShadow"
+                id="inputInner--consignmentCode"
+                v-model="searchForm.consignmentCode"
+                resize="none"
+                placeholder=""
+                @focus="textareaFocus"
+                @input="input"
+              ></el-input>
+            </el-popover>
+          </Formitem>
+        </el-col>
+        <el-col :span="4">
+          <Formitem label="物流企业代码" prop="factoryCode">
+            <el-select
+              type="text"
+              id="inputInner--declaredPort"
+              v-model="searchForm.declaredPort"
+              clearable
+              placeholder=""
+              @change="portChange"
+            >
+              <el-option
+                v-for="(item, index) in dictData.userport"
+                :key="index"
+                :label="item.name"
+                :value="item.name"
+              ></el-option>
+            </el-select>
+          </Formitem>
+        </el-col>
+        <el-col :span="5">
+          <Formitem label="回执状态" prop="declaredPort">
+            <el-select
+              type="text"
+              id="inputInner--receiptStatus"
+              v-model="searchForm.receiptStatus"
+              clearable
+              placeholder=""
+            >
+              <el-option
+                v-for="(item, index) in dictData.userport"
+                :key="index"
+                :label="item.name"
+                :value="item.name"
+              ></el-option>
+            </el-select>
+          </Formitem>
+        </el-col>
+        <el-col :span="4">
+          <Formitem label="创建时间" prop="receiptTime">
+            <el-date-picker
+              class="inputInner--accsDataImportTime"
+              id="inputInner--accsDataImportTime"
+              v-model="searchForm.accsDataImportTime"
+              type="daterange"
+              format="yyyy-MM-dd"
+              prefix-icon="none"
+              value-format="yyyyMMdd"
+              range-separator="至"
+              start-placeholder=""
+              clearable
+              end-placeholder=""
+              :picker-options="importTimePickerOptions"
+              @blur="datePickerBlur"
+              @change="accsDataImportTimeChange"
+            >
+            </el-date-picker>
+          </Formitem>
+        </el-col>
+
+        <el-col :span="2">
+          <el-form-item class="textCenter">
+            <el-button
+              class="entrySreachButton"
+              type="text"
+              icon="el-icon-search"
+              :loading="loadings.searchLoading"
+              @click="search(0)"
+            ></el-button>
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="4">
+          <el-form-item class="textCenter">
+            <el-button
+              icon="el-icon-refresh"
+              size="small"
+              :loading="loadings.searchLoading"
+              @click="search(0)"
+            >重置
+            </el-button>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+
+    <div style="text-align: right; margin: 10px">
+      <el-button
+        size="small"
+        :loading="loadings.downloadLoading2"
+        @click="downloadBpiData('log')"
+      >
+        <svg-icon class="el-icon-user-solid" icon-class="fedexUpBlue"></svg-icon>
+        导出
+      </el-button>
+    </div>
+
+    <Table
+      class="fedexDetialTable fedexSreachTable"
+      ref="entryTable"
+      :data="tableData"
+      :headerData="headerData"
+      :maxHeight="tableMaxheight"
+      :border="true"
+      :pagination="true"
+      :order="false"
+      :loading="loadings.sreachLoading"
+      :page="page.pageIndex"
+      :pageSizes="[20, 30, 50, 100]"
+      :totalCount="total"
+      @sizeChange="sizeChange"
+      @currentChange="currentChange"
+      :selection="true"
+      :selectFixed="false"
+      @rowClick="handleRowClick"
+      @tableSelect="tableSelect"
+      @tableSelectAll="tableSelectAll"
+      :rowSelectDataType="false"
+      :selected="selected"
+    >
+      <template v-slot:waveName="scope">
+        <span>{{ `${scope.row.waveName}(${scope.row.waveExt2})` }}</span>
+      </template>
+    </Table>
+  </div>
+</template>
+
+<script>
+import {getAllExportingBills, getAllTransportBills} from "@/api/query/query";
+
+export default {
+  name: "index",
+  data() {
+    return {
+      searchForm: {
+        declaredPort: "",
+        consStatus: "",
+        consignmentCode: "",
+        accsDataImportTime: [],
+        ownerName: "",
+        consignmentHeadCode: "",
+        isPushCustomsSys: "",
+        waitOperStatus: "",
+        declTime: [],
+      },
+      loadings: {
+        searchLoading: false,
+      },
+      page: {
+        pageIndex: 1,
+        pageSize: 20,
+      },
+      textareaVisible: {
+        formItemconsignmentCode: false,
+        formItemconsignmentHeadCode: false,
+      },
+      sizeChange(val) {
+        this.page.pageSize = val;
+        this.sreach(1);
+      },
+      //分页
+      currentChange(val) {
+        this.page.pageIndex = val.page;
+        this.search(1);
+      },
+      tableData: [],
+      total: 0,
+      tableMaxheight: null,
+      headerData: [
+        {
+          name: "回执状态",
+          value: "returnStatus",
+          width: "150",
+          align: "left",
+        },
+        {
+          name: "运单编号",
+          value: "orderNo",
+          width: '150',
+          align: 'left'
+        },
+        {
+          name: '物流企业代码',
+          value: 'orderType',
+          width: '150',
+          align: 'left'
+        },
+        {
+          name: '物流企业名称',
+          value: 'ebccode',
+          width: '200',
+          align: 'left'
+        },
+        {
+          name: '主要货物信息',
+          value: 'ebcname',
+          width: '200',
+          align: 'left'
+        },
+        {
+          name: '创建时间',
+          value: 'createTime',
+          width: '150',
+          align: 'left'
+        },
+        {
+          name: '申报企业',
+          value: 'declaringEnterprise',
+          width: '200',
+          align: 'left'
+        },
+        {
+          name: '申报类型',
+          value: 'declaringType',
+          width: '100',
+          align: 'left'
+        }
+      ],
+      dictData: {
+        userport: [
+          {name: "Shanghai Port", code: "SH"},
+          {name: "Beijing Port", code: "BJ"},
+          {name: "Guangzhou Port", code: "GZ"},
+          {name: "Shenzhen Port", code: "SZ"},
+          {name: "Tianjin Port", code: "TJ"},
+        ],
+      },
+    }
+  },
+  created() {
+    getAllTransportBills({
+      pageIndex: 1,
+      pageSize: 20
+    }).then((res) => {
+      console.log('res', res)
+      this.tableData = res.data.value;
+      this.total = res.data.totalItems;
+      debugger;
+    })
+  },
+  methods: {
+    tableSelect(val) {
+      this.selected = val.selection;
+    },
+    tableSelectAll(val) {
+      this.selected = val;
+    },
+    handleRowClick(row) {
+      const declareId = row.declareId;
+      this.$router.push({
+        path: '/exportTransportDetail',
+        query: {
+          declareId
+        }
+      });
+    },
+    async search(val) {
+      try {
+
+      } catch (error) {
+        console.error("搜索出错：", error);
+      } finally {
+        // 无论成功还是失败，关闭加载状态
+        this.loadings.sreachLoading = false;
+      }
+    },
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import "@/assets/styles/variables.scss";
+
+.entrySreachButton {
+  display: inline-block;
+  font-size: 20px;
+  color: $fedexButton !important;
+}
+</style>