出口清单查询页和详情页

@@ -36,3 +36,12 @@ export function getAllTransportBills(data) {
     data
     data
   })
   })
 }
 }
+
+export function getAllListBills(data) {
+  return request({
+    url: '/bus-customer/exportList/search',
+    method: 'post',
+    data
+  })
+}
+

+<template>
+  <el-popover
+    placement="bottom"
+    width="320"
+    trigger="manual"
+    :popper-class="popperClass"
+    v-model="isPopoverVisible"
+  >
+    <!-- 弹出文本域 -->
+    <el-input
+      ref="popoverInput"
+      type="textarea"
+      :rows="5"
+      v-model="localValue"
+      class="textarea-popover"
+      resize="none"
+      :maxlength="maxlength"
+      @blur="handleBlur"
+    ></el-input>
+
+    <!-- 主输入框 -->
+    <el-input
+      slot="reference"
+      ref="referenceInput"
+      type="textarea"
+      :rows="1"
+      class="input-shadow"
+      v-model="localValue"
+      resize="none"
+      @focus="handleFocus"
+    ></el-input>
+  </el-popover>
+</template>
+
+<script>
+export default {
+  name: "PopoverTextarea",
+  props: {
+    value: {
+      type: String,
+      default: "",
+    },
+    maxlength: {
+      type: Number,
+      default: 13000,
+    },
+    maxEntries: {
+      type: Number,
+      default: 1000, // 最大条目数
+    },
+    popperClass: {
+      type: String,
+      default: "popover-input-class",
+    },
+  },
+  data() {
+    return {
+      isPopoverVisible: false, // 控制 popover 显示
+      localValue: this.value, // 输入框内容
+    };
+  },
+  watch: {
+    value(newVal) {
+      this.localValue = newVal;
+    },
+    localValue(newVal) {
+      this.$emit("input", newVal); // 同步父组件数据
+    },
+  },
+  methods: {
+    handleFocus() {
+      this.isPopoverVisible = true;
+      this.$nextTick(() => {
+        this.$refs.popoverInput.focus(); // 弹出层输入框获取焦点
+        this.$refs.referenceInput.$el.style.display = "none"; // 隐藏主输入框
+      });
+    },
+    handleBlur() {
+      this.isPopoverVisible = false;
+
+      // 格式化内容
+      this.localValue = this.formatContent(this.localValue);
+
+      this.$nextTick(() => {
+        const referenceInput = this.$refs.referenceInput.$el;
+        referenceInput.style.display = "block";
+        if (this.localValue) {
+          referenceInput.classList.add("inputFocus");
+        } else {
+          referenceInput.classList.remove("inputFocus");
+        }
+      });
+
+      this.$emit("blur", this.localValue); // 触发父组件的 blur 事件
+    },
+    formatContent(value) {
+      // 格式化输入内容：替换分隔符、去空格、限制条数
+      return value
+        .replace(/[\n，；;]/g, ",")
+        .split(",")
+        .map((item) => item.trim())
+        .filter((item) => item !== "")
+        .slice(0, this.maxEntries)
+        .join("\n");
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+//.input-shadow {
+//  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+//}
+//
+//.textarea-popover {
+//  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+//}
+//
+//.inputFocus {
+//  border-color: #409eff;
+//  box-shadow: 0 0 5px rgba(64, 158, 255, 0.5);
+//}
+</style>

@@ -4,6 +4,7 @@
       <thead>
       <thead>
       <tr>
       <tr>
         <th v-for="(header, index) in headers" :key="index">{{ header }}</th>
         <th v-for="(header, index) in headers" :key="index">{{ header }}</th>
+        <th v-if="showActionColumn">操作</th>
       </tr>
       </tr>
       </thead>
       </thead>
       <tbody>
       <tbody>
@@ -11,6 +12,11 @@
         <td>{{ row.status }}</td>
         <td>{{ row.status }}</td>
         <td>{{ row.time }}</td>
         <td>{{ row.time }}</td>
         <td>{{ row.description }}</td>
         <td>{{ row.description }}</td>
+        <td v-if="showActionColumn">
+            <span class="action-link" @click="handleDownload(row, index)">
+              下载回执
+            </span>
+        </td>
       </tr>
       </tr>
       </tbody>
       </tbody>
     </table>
     </table>
@@ -20,6 +26,13 @@
 <script>
 <script>
 export default {
 export default {
   name: "ReceiptInfoTable",
   name: "ReceiptInfoTable",
+  props: {
+    // 控制操作列是否显示
+    showActionColumn: {
+      type: Boolean,
+      default: true, // 默认显示操作列
+    },
+  },
   data() {
   data() {
     return {
     return {
       headers: ["回执状态", "状态时间", "回执描述"],
       headers: ["回执状态", "状态时间", "回执描述"],
@@ -27,21 +40,30 @@ export default {
         {
         {
           status: "山东电子口岸已上传",
           status: "山东电子口岸已上传",
           time: "2024-11-08 15:31:58",
           time: "2024-11-08 15:31:58",
-          description: "订单变更申请报关单【f291cda6-f664-4bf5-8edc-bcc012f8775】单证不存在，不可报单申报，报文业务主键【24HX-11-40-3722960DYB】"
+          description:
+            "订单变更申请报关单【f291cda6-f664-4bf5-8edc-bcc012f8775】单证不存在，不可报单申报，报文业务主键【24HX-11-40-3722960DYB】",
         },
         },
         {
         {
           status: "山东电子口岸已上传",
           status: "山东电子口岸已上传",
           time: "2024-11-08 15:31:58",
           time: "2024-11-08 15:31:58",
-          description: "山东电子口岸已上传"
+          description: "山东电子口岸已上传",
         },
         },
         {
         {
           status: "山东电子口岸已保存",
           status: "山东电子口岸已保存",
           time: "2024-11-08 15:30:45",
           time: "2024-11-08 15:30:45",
-          description: "山东电子口岸已保存，加签后上传"
-        }
-      ]
+          description: "山东电子口岸已保存，加签后上传",
+        },
+      ],
     };
     };
-  }
+  },
+  methods: {
+    // 处理点击下载回执的事件
+    handleDownload(row, index) {
+      console.log("下载回执触发：", row, index);
+      // 示例下载逻辑，可以根据实际需求添加下载操作
+      alert(`开始下载回执：第 ${index + 1} 行`);
+    },
+  },
 };
 };
 </script>
 </script>
 
 
@@ -54,7 +76,8 @@ export default {
   background-color: white;
   background-color: white;
 }
 }
 
 
-.custom-table th, .custom-table td {
+.custom-table th,
+.custom-table td {
   border: 1px solid #ccc;
   border: 1px solid #ccc;
   padding: 8px 12px;
   padding: 8px 12px;
   text-align: left;
   text-align: left;
@@ -70,6 +93,16 @@ export default {
 }
 }
 
 
 .custom-table tr:nth-child(odd) {
 .custom-table tr:nth-child(odd) {
-  //background-color: #fafafa;
+  background-color: #fafafa;
+}
+
+.action-link {
+  color: #409eff;
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.action-link:hover {
+  text-decoration: underline;
 }
 }
 </style>
 </style>

@@ -30,7 +30,8 @@ export default {
   height: 100%;
   height: 100%;
   min-width: 1080px;
   min-width: 1080px;
   position: relative;
   position: relative;
-  overflow: hidden;
+  //overflow: hidden;
+  overflow: auto;
   background-color: #f2f2f2;
   background-color: #f2f2f2;
 }
 }
 
 

@@ -115,20 +115,20 @@ export const constantRoutes = [
         meta: { title: '出口运单详情', icon: 'api' },
         meta: { title: '出口运单详情', icon: 'api' },
       },
       },
       {
       {
+        path: '/exportListDetail',
+        component: (resolve) => require(['@/views/exportListDetail/index'], resolve),
+        hidden: false,
+        meta: { title: '出口清单详情', icon: 'api' },
+      },
+      {
         path: '/exportTransportBillQuery',
         path: '/exportTransportBillQuery',
         component: (resolve) => require(['@/views/exportTransportBillQuery/index'], resolve),
         component: (resolve) => require(['@/views/exportTransportBillQuery/index'], resolve),
         hidden: false,
         hidden: false,
         meta: { title: '出口运单查询', icon: 'api' },
         meta: { title: '出口运单查询', icon: 'api' },
       },
       },
       {
       {
-        path: 'index',
-        component: (resolve) => require(['@/views/index'], resolve),
-        name: '首页',
-        meta: { title: '出口运单查询', icon: 'dashboard' }
-      },
-      {
-        path: 'index',
-        component: (resolve) => require(['@/views/index'], resolve),
+        path: '/exportListQuery',
+        component: (resolve) => require(['@/views/exportListQuery/index'], resolve),
         name: '首页',
         name: '首页',
         meta: { title: '出口清单查询', icon: 'dashboard' }
         meta: { title: '出口清单查询', icon: 'dashboard' }
       },
       },