feat: 自测更换新table组件

@@ -6,7 +6,7 @@ VUE_APP_BASE_ENV = "dev"
 VUE_APP_Version = '1.0.0'
 
 # FedEx 在线申报工具/开发环境
-VUE_APP_BASE_API = 'http://101.132.100.41:7008/EcomExp'
+VUE_APP_BASE_API = 'http://101.132.100.41:7001/EcomExp'
 
 VUE_APP_BASE_ROUTE = '/EcomDev'
 

@@ -48,7 +48,8 @@
     "vue": "2.6.14",
     "vue-i18n": "^8.28.2",
     "vue-router": "3.5.2",
-    "vuex": "3.6.2"
+    "vuex": "3.6.2",
+    "vxe-table": "^3.15.34"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "4.5.13",

@@ -263,3 +263,7 @@ aside {
 .el-checkbox__input.is-checked + .el-checkbox__label {
   color: #333333 !important;
 }
+
+html {
+  --vxe-ui-font-primary-color: #007ab7 !important;
+}

-import Vue from 'vue'
-
-import Element from 'element-ui'
-import './assets/styles/element-variables.scss'
-
-import '@/assets/styles/index.scss' // global css
-import '@/assets/styles/iClearExp.scss' // iClearExp css
-import '@/assets/styles/variables.scss'
-import '@/assets/styles/fedex.scss'
-import App from './App'
-import store from './store'
-import router from './router'
-import i18n from '@/assets/languages'
-import permission from './directive/permission'
-
-import './assets/icons' // icon
-import './permission' // permission control
-import { parseTime, resetForm, addDateRange, selectDictLabel, selectDictLabels, download, handleTree, hscodeElementInfo, elementTostring, numberRound, detailUnitConversion, setDict, sendNotificationHandler, promptMessage, upDateTokenTime, sreachEntryLock, tableFixedTypeChange, getDownLoadFileStatus, approvalPortType, getSystemOption, currencySystemDisableType, imageTaskStatusShowType } from "@/utils/iClearExp";
-import { formatDate, debounce, alertWarningMsg, alertSuccessMsg, alertErrorMsg, alertInfoMsg, toHead, compare, createRandom, ctho, base64ConvertFile } from "@/utils/index";
-import * as fileDownload from '@/utils/zipdownload.js'
-import * as filters from '@/utils/filters.js'
-import dictData from '@/utils/dict.js'
-import regExp from '@/utils/regExp.js'
+import Vue from "vue";
+
+import Element from "element-ui";
+import "./assets/styles/element-variables.scss";
+
+import "@/assets/styles/index.scss"; // global css
+import "@/assets/styles/iClearExp.scss"; // iClearExp css
+import "@/assets/styles/variables.scss";
+import "@/assets/styles/fedex.scss";
+import App from "./App";
+import store from "./store";
+import router from "./router";
+import i18n from "@/assets/languages";
+import permission from "./directive/permission";
+
+import "./assets/icons"; // icon
+import "./permission"; // permission control
+import {
+  parseTime,
+  resetForm,
+  addDateRange,
+  selectDictLabel,
+  selectDictLabels,
+  download,
+  handleTree,
+  hscodeElementInfo,
+  elementTostring,
+  numberRound,
+  detailUnitConversion,
+  setDict,
+  sendNotificationHandler,
+  promptMessage,
+  upDateTokenTime,
+  sreachEntryLock,
+  tableFixedTypeChange,
+  getDownLoadFileStatus,
+  approvalPortType,
+  getSystemOption,
+  currencySystemDisableType,
+  imageTaskStatusShowType,
+} from "@/utils/iClearExp";
+import {
+  formatDate,
+  debounce,
+  alertWarningMsg,
+  alertSuccessMsg,
+  alertErrorMsg,
+  alertInfoMsg,
+  toHead,
+  compare,
+  createRandom,
+  ctho,
+  base64ConvertFile,
+} from "@/utils/index";
+import * as fileDownload from "@/utils/zipdownload.js";
+import * as filters from "@/utils/filters.js";
+import dictData from "@/utils/dict.js";
+import regExp from "@/utils/regExp.js";
 import Pagination from "@/components/Pagination";
 // 自定义表格工具扩展
-import RightToolbar from "@/components/RightToolbar"
-import Table from "@/components/Table"
-import Formitem from "@/components/Formitem"
-import EditStep from "@/components/EditStep"
-import FedexAlert from "@/components/FedexAlert"
-import FedexEdit from "@/components/FedexEdit"
-import Tooltip from "@/components/Tooltip"
-import InputNodes from '@/components/InputNodes'
-import AlterDialog from '@/components/AlterDialog'
-import CustomTransfer from '@/components/CustomTransfer'
-import CustomForm from '@/components/CustomForm'
-import CustomTable from '@/components/CustomTable'
-import EditTag from '@/components/EditTag'
-import TablePopover from '@/components/TablePopover'
-import FormTextareaInput from '@/components/FormTextareaInput'
+import RightToolbar from "@/components/RightToolbar";
+import Table from "@/components/Table";
+import Formitem from "@/components/Formitem";
+import EditStep from "@/components/EditStep";
+import FedexAlert from "@/components/FedexAlert";
+import FedexEdit from "@/components/FedexEdit";
+import Tooltip from "@/components/Tooltip";
+import InputNodes from "@/components/InputNodes";
+import AlterDialog from "@/components/AlterDialog";
+import CustomTransfer from "@/components/CustomTransfer";
+import CustomForm from "@/components/CustomForm";
+import CustomTable from "@/components/CustomTable";
+import EditTag from "@/components/EditTag";
+import TablePopover from "@/components/TablePopover";
+import FormTextareaInput from "@/components/FormTextareaInput";
+
+import VxeUITable from "vxe-table";
+import "vxe-table/lib/style.css";
+
 (function () {
   if (typeof EventTarget !== "undefined") {
     let func = EventTarget.prototype.addEventListener;
@@ -49,89 +88,87 @@ import FormTextareaInput from '@/components/FormTextareaInput'
       }
       this.func(type, fn, capture);
     };
-  };
-}());
+  }
+})();
 
 // 全局方法挂载
-Vue.prototype.parseTime = parseTime
-Vue.prototype.resetForm = resetForm
-Vue.prototype.addDateRange = addDateRange
-Vue.prototype.selectDictLabel = selectDictLabel
-Vue.prototype.selectDictLabels = selectDictLabels
-Vue.prototype.download = download
-Vue.prototype.handleTree = handleTree
-Vue.prototype.hscodeElementInfo = hscodeElementInfo
-Vue.prototype.elementTostring = elementTostring
-Vue.prototype.formatDate = formatDate
-Vue.prototype.debounce = debounce
-Vue.prototype.regExp = regExp
-Vue.prototype.numberRound = numberRound
-Vue.prototype.detailUnitConversion = detailUnitConversion
-Vue.prototype.fileDownload = fileDownload
-Vue.prototype.alertWarningMsg = alertWarningMsg
-Vue.prototype.alertSuccessMsg = alertSuccessMsg
-Vue.prototype.alertErrorMsg = alertErrorMsg
-Vue.prototype.alertInfoMsg = alertInfoMsg
-Vue.prototype.toHead = toHead
-Vue.prototype.setDict = setDict
-Vue.prototype.compare = compare
-Vue.prototype.sendNotificationHandler = sendNotificationHandler
-Vue.prototype.promptMessage = promptMessage
-Vue.prototype.createRandom = createRandom
-Vue.prototype.upDateTokenTime = upDateTokenTime
-Vue.prototype.sreachEntryLock = sreachEntryLock
-Vue.prototype.tableFixedTypeChange = tableFixedTypeChange
-Vue.prototype.ctho = ctho
-Vue.prototype.getDownLoadFileStatus = getDownLoadFileStatus
-Vue.prototype.base64ConvertFile = base64ConvertFile
-Vue.prototype.approvalPortType = approvalPortType
-Vue.prototype.getSystemOption = getSystemOption
-Vue.prototype.currencySystemDisableType = currencySystemDisableType
-Vue.prototype.imageTaskStatusShowType = imageTaskStatusShowType
-Vue.prototype.dictData = dictData
+Vue.prototype.parseTime = parseTime;
+Vue.prototype.resetForm = resetForm;
+Vue.prototype.addDateRange = addDateRange;
+Vue.prototype.selectDictLabel = selectDictLabel;
+Vue.prototype.selectDictLabels = selectDictLabels;
+Vue.prototype.download = download;
+Vue.prototype.handleTree = handleTree;
+Vue.prototype.hscodeElementInfo = hscodeElementInfo;
+Vue.prototype.elementTostring = elementTostring;
+Vue.prototype.formatDate = formatDate;
+Vue.prototype.debounce = debounce;
+Vue.prototype.regExp = regExp;
+Vue.prototype.numberRound = numberRound;
+Vue.prototype.detailUnitConversion = detailUnitConversion;
+Vue.prototype.fileDownload = fileDownload;
+Vue.prototype.alertWarningMsg = alertWarningMsg;
+Vue.prototype.alertSuccessMsg = alertSuccessMsg;
+Vue.prototype.alertErrorMsg = alertErrorMsg;
+Vue.prototype.alertInfoMsg = alertInfoMsg;
+Vue.prototype.toHead = toHead;
+Vue.prototype.setDict = setDict;
+Vue.prototype.compare = compare;
+Vue.prototype.sendNotificationHandler = sendNotificationHandler;
+Vue.prototype.promptMessage = promptMessage;
+Vue.prototype.createRandom = createRandom;
+Vue.prototype.upDateTokenTime = upDateTokenTime;
+Vue.prototype.sreachEntryLock = sreachEntryLock;
+Vue.prototype.tableFixedTypeChange = tableFixedTypeChange;
+Vue.prototype.ctho = ctho;
+Vue.prototype.getDownLoadFileStatus = getDownLoadFileStatus;
+Vue.prototype.base64ConvertFile = base64ConvertFile;
+Vue.prototype.approvalPortType = approvalPortType;
+Vue.prototype.getSystemOption = getSystemOption;
+Vue.prototype.currencySystemDisableType = currencySystemDisableType;
+Vue.prototype.imageTaskStatusShowType = imageTaskStatusShowType;
+Vue.prototype.dictData = dictData;
 
 Vue.prototype.msgSuccess = function (msg) {
   this.$message({ showClose: true, message: msg, type: "success" });
-}
+};
 
 Vue.prototype.msgError = function (msg) {
   this.$message({ showClose: true, message: msg, type: "error" });
-}
+};
 
 Vue.prototype.msgWarning = function (msg) {
   this.$message({ showClose: true, message: msg, type: "warning" });
-}
+};
 
 Vue.prototype.msgInfo = function (msg) {
   this.$message.info(msg);
-}
+};
 
 // 全局组件挂载
-Vue.component('Pagination', Pagination)
-Vue.component('RightToolbar', RightToolbar)
-Vue.component('InputNodes', InputNodes)
-Vue.component('Table', Table)
-Vue.component('Formitem', Formitem)
-Vue.component('EditStep', EditStep)
-Vue.component('FedexAlert', FedexAlert)
-Vue.component('FedexEdit', FedexEdit)
-Vue.component('Tooltip', Tooltip)
-Vue.component('AlterDialog', AlterDialog)
-Vue.component('CustomTransfer', CustomTransfer)
-Vue.component('CustomForm', CustomForm)
-Vue.component('CustomTable', CustomTable)
-Vue.component('EditTag', EditTag)
-Vue.component('TablePopover', TablePopover)
-Vue.component('FormTextareaInput', FormTextareaInput)
-
-Vue.use(permission)
-
-
-Object.keys(filters).forEach(key => {
-  Vue.filter(key, filters[key])
-})
-
-
+Vue.component("Pagination", Pagination);
+Vue.component("RightToolbar", RightToolbar);
+Vue.component("InputNodes", InputNodes);
+Vue.component("Table", Table);
+Vue.component("Formitem", Formitem);
+Vue.component("EditStep", EditStep);
+Vue.component("FedexAlert", FedexAlert);
+Vue.component("FedexEdit", FedexEdit);
+Vue.component("Tooltip", Tooltip);
+Vue.component("AlterDialog", AlterDialog);
+Vue.component("CustomTransfer", CustomTransfer);
+Vue.component("CustomForm", CustomForm);
+Vue.component("CustomTable", CustomTable);
+Vue.component("EditTag", EditTag);
+Vue.component("TablePopover", TablePopover);
+Vue.component("FormTextareaInput", FormTextareaInput);
+
+Vue.use(permission);
+Vue.use(VxeUITable);
+
+Object.keys(filters).forEach((key) => {
+  Vue.filter(key, filters[key]);
+});
 
 // window.addEventListener('resize', () => {
 //   // 获取当前的缩放级别
@@ -154,15 +191,15 @@ Object.keys(filters).forEach(key => {
  */
 
 Vue.use(Element, {
-  size: localStorage.getItem('size') || 'medium' // set element-ui default size
-})
+  size: localStorage.getItem("size") || "medium", // set element-ui default size
+});
 
-Vue.config.productionTip = false
+Vue.config.productionTip = false;
 
 new Vue({
-  el: '#app',
+  el: "#app",
   router,
   store,
   i18n,
-  render: h => h(App)
-})
+  render: (h) => h(App),
+});

@@ -532,43 +532,43 @@ export default {
 export const receiptStatus = () => {
   return [
     {
-      text: "未提交",
+      label: "未提交",
       value: "99999",
     },
     {
-      text: "已提交",
+      label: "已提交",
       value: "0",
     },
     {
-      text: "xml报文加签失败",
+      label: "xml报文加签失败",
       value: "-2",
     },
     {
-      text: "xml报文上传失败",
+      label: "xml报文上传失败",
       value: "-3",
     },
     {
-      text: "电子口岸申报中",
+      label: "电子口岸申报中",
       value: "2",
     },
     {
-      text: "发送海关成功",
+      label: "发送海关成功",
       value: "3",
     },
     {
-      text: "发送海关失败",
+      label: "发送海关失败",
       value: "4",
     },
     {
-      text: "海关退单",
+      label: "海关退单",
       value: "100",
     },
     {
-      text: "海关入库",
+      label: "海关入库",
       value: "120",
     },
     {
-      text: "回执异常",
+      label: "回执异常",
       value: "-1",
     },
   ];
@@ -577,55 +577,55 @@ export const receiptStatus = () => {
 export const listStatus = () => {
   return [
     {
-      text: "未提交",
+      label: "未提交",
       value: "99999",
     },
     {
-      text: "已提交",
+      label: "已提交",
       value: "0",
     },
     {
-      text: "xml报文加签失败",
+      label: "xml报文加签失败",
       value: "-2",
     },
     {
-      text: "xml报文上传失败",
+      label: "xml报文上传失败",
       value: "-3",
     },
     {
-      text: "电子口岸申报中",
+      label: "电子口岸申报中",
       value: "2",
     },
     {
-      text: "发送海关成功",
+      label: "发送海关成功",
       value: "3",
     },
     {
-      text: "发送海关失败",
+      label: "发送海关失败",
       value: "4",
     },
     {
-      text: "海关退单",
+      label: "海关退单",
       value: "100",
     },
     {
-      text: "海关入库",
+      label: "海关入库",
       value: "120",
     },
     {
-      text: "海关审结",
+      label: "海关审结",
       value: "399",
     },
     {
-      text: "放行",
+      label: "放行",
       value: "800",
     },
     {
-      text: "结关",
+      label: "结关",
       value: "899",
     },
     {
-      text: "回执异常",
+      label: "回执异常",
       value: "-1",
     },
   ];
@@ -634,35 +634,35 @@ export const listStatus = () => {
 export const totalScoreStatus = () => {
   return [
     {
-      text: "未提交",
+      label: "未提交",
       value: "99999",
     },
     {
-      text: "已提交",
+      label: "已提交",
       value: "0",
     },
     {
-      text: "xml报文加签失败",
+      label: "xml报文加签失败",
       value: "-2",
     },
     {
-      text: "xml报文上传失败",
+      label: "xml报文上传失败",
       value: "-3",
     },
     {
-      text: "电子口岸申报中",
+      label: "电子口岸申报中",
       value: "2",
     },
     {
-      text: "发送海关成功",
+      label: "发送海关成功",
       value: "3",
     },
     {
-      text: "发送海关失败",
+      label: "发送海关失败",
       value: "4",
     },
     {
-      text: "海关退单",
+      label: "海关退单",
       value: "100",
     },
     // {
@@ -670,19 +670,19 @@ export const totalScoreStatus = () => {
     //   value: "120",
     // },
     {
-      text: "海关审结",
+      label: "海关审结",
       value: "399",
     },
     {
-      text: "放行",
+      label: "放行",
       value: "800",
     },
     {
-      text: "结关",
+      label: "结关",
       value: "899",
     },
     {
-      text: "回执异常",
+      label: "回执异常",
       value: "-1",
     },
   ];

@@ -170,11 +170,23 @@
           </el-col>
           <!-- new 申报业务类型-->
           <el-col :span="8">
-            <Formitem
-              label="申报业务类型"
-              prop="declareBusinessType"
-              type="edit"
-            >
+            <Formitem prop="declareBusinessType" type="edit">
+              <template slot="title">
+                <span
+                  >申报业务类型
+                  <el-tooltip
+                    class="item"
+                    effect="dark"
+                    content="如模板中含此字段，则选用模板数据，此处填写无效"
+                    placement="top"
+                  >
+                    <i
+                      class="el-icon-question"
+                      style="cursor: pointer; font-size: 14px"
+                    ></i>
+                  </el-tooltip>
+                </span>
+              </template>
               <el-select
                 type="text"
                 id="inputInner-edit-declareBusinessType"

@@ -305,167 +305,340 @@
         </div>
       </TablePopover>
     </section>
-    <Table
-      class="fedexDetialTable fedexSreachTable fedexTable_new"
-      ref="entryTable"
-      :data="tableData"
-      :headerData="headerData"
-      :maxHeight="tableMaxheight"
-      :border="true"
-      :pagination="true"
-      :order="false"
-      :loading="loadings.sreachLoading"
-      :page="page.pageIndex"
-      :totalCount="page.total"
-      @sizeChange="sizeChange"
-      @currentChange="currentChange"
-      :selection="true"
-      :selectFixed="false"
-      @tableSelect="tableSelect"
-      @tableSelectAll="tableSelectAll"
-      :rowSelectDataType="false"
-      @cellClick="cellClick"
-      :selected="selected"
-      @filterChange="filterChange"
-      rowKey="declareId"
-    >
-      <template v-slot:orderReceiptStatus="scope">
-        <TablePopover
-          ref="orderReceiptStatusPopover"
-          dataKey="orderReceiptStatus"
-          idKey="declareId"
-          :parentDom="$refs.entryTable"
-          :receiptDataHead="receiptDataHead"
-          :rowData="scope.row"
-          :tableData="tableData"
-          @popoverChange="popoverChange"
-          @popoverClose="popoverClose"
-        >
-          <div slot="title">
-            <span style="font-weight: 700; color: #515a6e">订单编号：</span>
-            {{ scope.row.orderno }}
-          </div>
-          <div slot="buttonLabel">
-            {{ scope.row.orderReceiptStatus }}
-          </div>
-        </TablePopover>
-      </template>
-      <template v-slot:wayBillReceipt="scope">
-        <TablePopover
-          ref="wayBillReceiptPopover"
-          dataKey="wayBillReceipt"
-          idKey="declareId"
-          :parentDom="$refs.entryTable"
-          :receiptDataHead="receiptDataHead"
-          :rowData="scope.row"
-          :tableData="tableData"
-          @popoverChange="popoverChange"
-          @popoverClose="popoverClose"
+    <div v-loading="loadings.sreachLoading">
+      <vxe-table
+        :max-height="tableMaxheight"
+        :data="tableData"
+        :row-config="{ isCurrent: true, isHover: true }"
+        :filter-config="{ remote: true }"
+        @filter-change="filterChangeEvent"
+        @checkbox-change="tableSelect"
+        @checkbox-all="tableSelectAll"
+      >
+        <vxe-column type="checkbox" width="60"></vxe-column>
+        <vxe-column field="billNo" title="提运单号" :show-overflow="true">
+          <template #default="{ row }">
+            <el-tooltip
+              class="item"
+              effect="dark"
+              :content="row.billNo"
+              placement="top"
+            >
+              <span style="font-size: 12px"> {{ row.billNo }} </span>
+            </el-tooltip>
+          </template>
+        </vxe-column>
+        <vxe-column
+          field="logisticsWaybillNumber"
+          title="物流运单编号"
+        ></vxe-column>
+        <vxe-column field="orderno" title="订单编号" :show-overflow="true">
+          <template #default="{ row }">
+            <el-tooltip
+              class="item"
+              effect="dark"
+              :content="row.orderno"
+              placement="top"
+            >
+              <span style="font-size: 12px"> {{ row.orderno }} </span>
+            </el-tooltip>
+          </template>
+        </vxe-column>
+        <vxe-column field="flightNumber" title="航班号"></vxe-column>
+        <vxe-column
+          field="ecomEntName"
+          title="电商企业名称"
+          :show-overflow="true"
         >
-          <div slot="title">
-            <span style="font-weight: 700; color: #515a6e">订单编号：</span
-            >{{ scope.row.orderno }}
-          </div>
-          <div slot="buttonLabel">
-            {{ scope.row.wayBillReceipt }}
-          </div>
-        </TablePopover>
-      </template>
-      <template v-slot:listReceiptStatus="scope">
-        <TablePopover
-          ref="listReceiptStatusPopover"
-          dataKey="listReceiptStatus"
-          idKey="declareId"
-          :parentDom="$refs.entryTable"
-          :receiptDataHead="receiptDataHead"
-          :rowData="scope.row"
-          :tableData="tableData"
-          @popoverChange="popoverChange"
-          @popoverClose="popoverClose"
+          <template #default="{ row }">
+            <el-tooltip
+              class="item"
+              effect="dark"
+              :content="row.ecomEntName"
+              placement="top"
+            >
+              <span style="font-size: 12px"> {{ row.ecomEntName }} </span>
+            </el-tooltip>
+          </template>
+        </vxe-column>
+        <vxe-column field="createTime" title="创建时间"></vxe-column>
+        <vxe-column
+          field="orderReceiptStatus"
+          title="订单回执"
+          :filters="receiptStatusFilters"
         >
-          <div slot="title">
-            <span style="font-weight: 700; color: #515a6e">订单编号：</span
-            >{{ scope.row.orderno }}
-          </div>
-          <div slot="buttonLabel">
-            {{ scope.row.listReceiptStatus }}
-          </div>
-        </TablePopover>
-      </template>
-      <template v-slot:arrivalInReceiptStatus="scope">
-        <TablePopover
-          ref="arrivalInReceiptStatusPopover"
-          dataKey="arrivalInReceiptStatus"
-          idKey="declareId"
-          :parentDom="$refs.entryTable"
-          :receiptDataHead="receiptDataHead"
-          :rowData="scope.row"
-          :tableData="tableData"
-          @popoverChange="popoverChange"
-          @popoverClose="popoverClose"
+          <template #default="{ row }">
+            <el-popover
+              placement="left"
+              popper-class="portLogPopper"
+              :visible-arrow="false"
+              title=""
+              width="750"
+              trigger="manual"
+              v-model="row[`orderReceiptStatus${row.declareId}`]"
+            >
+              <div style="text-align: right">
+                <i
+                  @click.stop="
+                    popoverCloseNew(row, row.declareId, 'orderReceiptStatus')
+                  "
+                  class="el-icon-close"
+                  style="cursor: pointer; font-size: 20px; font-weight: 700"
+                ></i>
+              </div>
+              <div style="margin-bottom: 5px">
+                <span style="font-weight: 700; color: #515a6e">订单编号：</span>
+                {{ row.orderno }}
+              </div>
+              <el-table
+                :data="popoverTableData"
+                :pagination="false"
+                :border="true"
+                tooltip-effect="dark"
+                max-height="300px"
+              >
+                <el-table-column
+                  property="receiptStatus"
+                  label="回执状态"
+                ></el-table-column>
+                <el-table-column
+                  property="statusTime"
+                  label="状态时间"
+                ></el-table-column>
+                <el-table-column
+                  property="receiptDescription"
+                  label="回执描述"
+                ></el-table-column>
+              </el-table>
+              <el-button
+                type="text"
+                slot="reference"
+                @click="
+                  popoverChange({ data: row, status: 'orderReceiptStatus' })
+                "
+              >
+                {{ row.orderReceiptStatus }}
+              </el-button>
+            </el-popover>
+          </template>
+        </vxe-column>
+        <vxe-column
+          field="wayBillReceipt"
+          title="运单回执"
+          :filters="receiptStatusFilters"
         >
-          <div slot="title">
-            <span style="font-weight: 700; color: #515a6e">订单编号：</span
-            >{{ scope.row.orderno }}
-          </div>
-          <div slot="buttonLabel">
-            {{ scope.row.arrivalInReceiptStatus }}
-          </div>
-        </TablePopover>
-      </template>
-      <template v-slot:totalSplitOrderStatus="scope">
-        <TablePopover
-          ref="totalSplitOrderStatusPopover"
-          dataKey="totalSplitOrderStatus"
-          idKey="declareId"
-          :parentDom="$refs.entryTable"
-          :receiptDataHead="receiptDataHead"
-          :rowData="scope.row"
-          :tableData="tableData"
-          @popoverChange="popoverChange"
-          @popoverClose="popoverClose"
+          <template #default="{ row }">
+            <el-popover
+              placement="left"
+              popper-class="portLogPopper"
+              :visible-arrow="false"
+              title=""
+              width="750"
+              trigger="manual"
+              v-model="row[`wayBillReceipt${row.declareId}`]"
+            >
+              <div style="text-align: right">
+                <i
+                  @click.stop="
+                    popoverCloseNew(row, row.declareId, 'wayBillReceipt')
+                  "
+                  class="el-icon-close"
+                  style="cursor: pointer; font-size: 20px; font-weight: 700"
+                ></i>
+              </div>
+              <div style="margin-bottom: 5px">
+                <span style="font-weight: 700; color: #515a6e">订单编号：</span>
+                {{ row.orderno }}
+              </div>
+              <el-table
+                :data="popoverTableData"
+                :pagination="false"
+                :border="true"
+                tooltip-effect="dark"
+                max-height="300px"
+              >
+                <el-table-column
+                  property="receiptStatus"
+                  label="回执状态"
+                ></el-table-column>
+                <el-table-column
+                  property="statusTime"
+                  label="状态时间"
+                ></el-table-column>
+                <el-table-column
+                  property="receiptDescription"
+                  label="回执描述"
+                ></el-table-column>
+              </el-table>
+              <el-button
+                type="text"
+                slot="reference"
+                @click="popoverChange({ data: row, status: 'wayBillReceipt' })"
+              >
+                {{ row.wayBillReceipt }}
+              </el-button>
+            </el-popover>
+          </template>
+        </vxe-column>
+        <vxe-column
+          field="listReceiptStatus"
+          title="清单回执"
+          :filters="listStatusFilters"
         >
-          <div slot="title">
-            <span style="font-weight: 700; color: #515a6e">订单编号：</span
-            >{{ scope.row.orderno }}
-          </div>
-          <div slot="buttonLabel">
-            {{ scope.row.totalSplitOrderStatus }}
-          </div>
-        </TablePopover>
-      </template>
-      <template v-slot:logisticsReceiptStatus="scope">
-        <TablePopover
-          ref="logisticsReceiptStatusPopover"
-          dataKey="logisticsReceiptStatus"
-          idKey="declareId"
-          :parentDom="$refs.entryTable"
-          :receiptDataHead="receiptDataHead"
-          :rowData="scope.row"
-          :tableData="tableData"
-          @popoverChange="popoverChange"
-          @popoverClose="popoverClose"
+          <template #default="{ row }">
+            <el-popover
+              placement="left"
+              popper-class="portLogPopper"
+              :visible-arrow="false"
+              title=""
+              width="750"
+              trigger="manual"
+              v-model="row[`listReceiptStatus${row.declareId}`]"
+            >
+              <div style="text-align: right">
+                <i
+                  @click.stop="
+                    popoverCloseNew(row, row.declareId, 'listReceiptStatus')
+                  "
+                  class="el-icon-close"
+                  style="cursor: pointer; font-size: 20px; font-weight: 700"
+                ></i>
+              </div>
+              <div style="margin-bottom: 5px">
+                <span style="font-weight: 700; color: #515a6e">订单编号：</span>
+                {{ row.orderno }}
+              </div>
+              <el-table
+                :data="popoverTableData"
+                :pagination="false"
+                :border="true"
+                tooltip-effect="dark"
+                max-height="300px"
+              >
+                <el-table-column
+                  property="receiptStatus"
+                  label="回执状态"
+                ></el-table-column>
+                <el-table-column
+                  property="statusTime"
+                  label="状态时间"
+                ></el-table-column>
+                <el-table-column
+                  property="receiptDescription"
+                  label="回执描述"
+                ></el-table-column>
+              </el-table>
+              <el-button
+                type="text"
+                slot="reference"
+                @click="
+                  popoverChange({ data: row, status: 'listReceiptStatus' })
+                "
+              >
+                {{ row.listReceiptStatus }}
+              </el-button>
+            </el-popover>
+          </template>
+        </vxe-column>
+        <vxe-column
+          field="totalSplitOrderStatus"
+          title="清单总分单回执"
+          :filters="totalScoreStatusFilters"
         >
-          <div slot="title">
-            <span style="font-weight: 700; color: #515a6e">订单编号：</span
-            >{{ scope.row.orderno }}
-          </div>
-          <div slot="buttonLabel">
-            {{ scope.row.logisticsReceiptStatus }}
-          </div>
-        </TablePopover>
-      </template>
-      <template slot="optionColumn">
-        <el-table-column label="操作" width="120">
-          <template slot-scope="scope">
-            <el-button type="text" @click="update(scope.row)"> 修改 </el-button>
-            <el-button type="text" @click="showTotalLog(scope.row)">
-              日志
-            </el-button>
+          <template #default="{ row }">
+            <el-popover
+              placement="left"
+              popper-class="portLogPopper"
+              :visible-arrow="false"
+              title=""
+              width="750"
+              trigger="manual"
+              v-model="row[`totalSplitOrderStatus${row.declareId}`]"
+            >
+              <div style="text-align: right">
+                <i
+                  @click.stop="
+                    popoverCloseNew(row, row.declareId, 'totalSplitOrderStatus')
+                  "
+                  class="el-icon-close"
+                  style="cursor: pointer; font-size: 20px; font-weight: 700"
+                ></i>
+              </div>
+              <div style="margin-bottom: 5px">
+                <span style="font-weight: 700; color: #515a6e">订单编号：</span>
+                {{ row.orderno }}
+              </div>
+              <el-table
+                :data="popoverTableData"
+                :pagination="false"
+                :border="true"
+                tooltip-effect="dark"
+                max-height="300px"
+              >
+                <el-table-column
+                  property="receiptStatus"
+                  label="回执状态"
+                ></el-table-column>
+                <el-table-column
+                  property="statusTime"
+                  label="状态时间"
+                ></el-table-column>
+                <el-table-column
+                  property="receiptDescription"
+                  label="回执描述"
+                ></el-table-column>
+              </el-table>
+              <el-button
+                type="text"
+                slot="reference"
+                @click="
+                  popoverChange({ data: row, status: 'totalSplitOrderStatus' })
+                "
+              >
+                {{ row.totalSplitOrderStatus }}
+              </el-button>
+            </el-popover>
           </template>
-        </el-table-column>
-      </template>
-    </Table>
+        </vxe-column>
+        <vxe-column title="操作" fixed="right" width="120">
+          <template #default="{ row }">
+            <el-button type="text" @click="update(row)"> 修改 </el-button>
+            <el-button type="text" @click="showTotalLog(row)"> 日志 </el-button>
+          </template>
+        </vxe-column>
+      </vxe-table>
+    </div>
+    <div>
+      <div v-if="selected != null && selected.length != 0" class="selectCount">
+        {{ $t("system.custom.tableSelect", { a: selected.length }) }}
+      </div>
+      <el-pagination
+        :total="page.total"
+        :page-size.sync="page.pageSize"
+        :current-page.sync="page.pageIndex"
+        :page-sizes="[10, 20, 50, 100, 500, 1000]"
+        background
+        layout="total,prev, pager, next, jumper, ->, sizes"
+        class="tablePagination"
+        @size-change="sizeChange"
+        @current-change="currentChange"
+      >
+        <el-select
+          v-model="page.pageSize"
+          size="mini"
+          :placeholder="$t('system.custom.pageNUmPlaceholder')"
+          @change="sizeChange"
+        >
+          <el-option
+            v-for="(item, index) in [10, 20, 50, 100, 500, 1000]"
+            :label="item + $t('system.custom.pageSize')"
+            :value="item"
+            :key="index"
+          >
+          </el-option>
+        </el-select>
+      </el-pagination>
+    </div>
 
     <DialogVue
       :outerVisible="outerVisible"
@@ -577,121 +750,11 @@ export default {
       waybillStatus: [],
       listStatus: [],
       totalScoreStatus: [],
-      headerData: [
-        {
-          name: "提运单号",
-          value: "billNo",
-          width: "",
-          align: "left",
-        },
-        {
-          name: "物流运单编号",
-          value: "logisticsWaybillNumber",
-          width: "",
-          align: "left",
-        },
-        {
-          name: "订单编号",
-          value: "orderno",
-          width: "",
-          align: "left",
-        },
-        {
-          name: "航班号",
-          value: "flightNumber",
-          width: "",
-          align: "left",
-        },
-        {
-          name: "电商企业名称",
-          value: "ecomEntName",
-          width: "",
-          align: "left",
-        },
-        {
-          name: "创建时间",
-          value: "createTime",
-          width: "",
-          align: "left",
-        },
-        {
-          name: "订单回执",
-          value: "orderReceiptStatus",
-          width: "",
-          align: "left",
-          slot: true,
-          columnKey: "orderReceiptStatus",
-          filterPlacement: "bottom-right",
-          filters: [...receiptStatus()],
-        },
-
-        {
-          name: "运单回执",
-          value: "wayBillReceipt",
-          width: "",
-          align: "left",
-          slot: true,
-          columnKey: "wayBillReceipt",
-          filterPlacement: "bottom-right",
-          filters: [...receiptStatus()],
-        },
-        {
-          name: "清单回执",
-          value: "listReceiptStatus",
-          width: "",
-          align: "left",
-          slot: true,
-          columnKey: "listReceiptStatus",
-          filterPlacement: "bottom-right",
-          filters: [...listStatus()],
-        },
+      // 订单回执 Filters
+      receiptStatusFilters: receiptStatus(),
+      listStatusFilters: listStatus(),
+      totalScoreStatusFilters: totalScoreStatus(),
 
-        {
-          name: "清单总分单回执",
-          value: "totalSplitOrderStatus",
-          width: "",
-          align: "left",
-          slot: true,
-          columnKey: "totalSplitOrderStatus",
-          filterPlacement: "bottom-right",
-          filters: [...totalScoreStatus()],
-        },
-        // {
-        //   // release-v1.0.9
-        //   name: "运抵单回执",
-        //   value: "arrivalInReceiptStatus",
-        //   width: "",
-        //   align: "left",
-        //   slot: true,
-        // },
-        // {
-        //   name: "离境单回执",
-        //   value: "logisticsReceiptStatus",
-        //   width: "",
-        //   align: "left",
-        //   slot: true,
-        // },
-      ],
-      receiptDataHead: [
-        {
-          name: "回执状态",
-          value: "receiptStatus",
-          width: "",
-          align: "left",
-        },
-        {
-          name: "状态时间",
-          value: "statusTime",
-          width: "",
-          align: "left",
-        },
-        {
-          name: "回执描述",
-          value: "receiptDescription",
-          width: "",
-          align: "left",
-        },
-      ],
       selected: [],
       logDataHead: [
         {
@@ -719,11 +782,7 @@ export default {
           align: "left",
         },
       ],
-      // dictData: {
-      //   logisticsNo: [],
-      //   receiptStatus: [],
-      //   receiptType: [],
-      // },
+
       loadings: {
         templateLoading: false,
         sreachLoading: false,
@@ -752,6 +811,13 @@ export default {
       paramsOjb: {},
       weightAdjustVisible: false,
       portList: [],
+      popoverTableData: [],
+      visiblePopover: {
+        flag: false,
+        type: "",
+        declareId: "",
+        data: {},
+      },
     };
   },
   created() {
@@ -787,12 +853,20 @@ export default {
     });
   },
   methods: {
-    filterChange(value) {
-      this.orderStatus = value?.orderReceiptStatus;
-      this.waybillStatus = value?.wayBillReceipt;
-      this.listStatus = value?.listReceiptStatus;
-      this.totalScoreStatus = value?.totalSplitOrderStatus;
-      console.log(value, this.orderStatus);
+    filterChangeEvent(value) {
+      console.log(value.values);
+      if (value.field === "orderReceiptStatus") {
+        this.orderStatus = value?.values;
+      }
+      if (value.field === "wayBillReceipt") {
+        this.waybillStatus = value?.values;
+      }
+      if (value.field === "listReceiptStatus") {
+        this.listStatus = value?.values;
+      }
+      if (value.field === "totalSplitOrderStatus") {
+        this.totalScoreStatus = value?.values;
+      }
       this.search(0);
     },
     //获取口岸子字典
@@ -902,11 +976,7 @@ export default {
             this.page.total = res.data.totalItems;
             this.tableData.forEach((item, idx) => {
               item.index = idx;
-              item.orderReceiptStatusPopoverType = false;
-              item.listReceiptStatusPopoverType = false;
-              item.wayBillReceiptPopoverType = false;
               item.arrivalInReceiptStatusPopoverType = false;
-              item.totalSplitOrderStatusPopoverType = false;
               item.logisticsReceiptStatusPopoverType = false;
               // item.logLoading = false;
               item.popoverData = [];
@@ -1133,30 +1203,32 @@ export default {
       this.tableMaxheight = window.innerHeight - 300;
       this.$forceUpdate();
     },
+    popoverCloseNew(row, declareId, type) {
+      row[`${type}${declareId}`] = false;
+      this.$forceUpdate();
+    },
     popoverChange(val) {
-      this.tableData = val.tableData;
+      this.popoverTableData = [];
+      if (this.visiblePopover.flag) {
+        const ojb = this.tableData.find(
+          (item) => item.declareId === this.visiblePopover.declareId
+        );
+        ojb[`${this.visiblePopover.type}${ojb.declareId}`] = false;
+      }
+      this.visiblePopover.flag = true;
+      this.visiblePopover.declareId = val.data.declareId;
+      this.visiblePopover.type = val.status;
+      this.$nextTick(() => {
+        val.data[`${val.status}${val.data.declareId}`] = true;
+      });
 
       this.receiptApi(val.data.declareId, val.status)
         .then((res) => {
-          val.tableData.forEach((item) => {
-            if (item.declareId == val.data.declareId) {
-              item.popoverData = res;
-            }
-          });
-          this.tableData = val.tableData;
+          console.log(res);
+          this.popoverTableData = res;
         })
-        .finally(() => {
-          this.$nextTick(() => {
-            this.$store.dispatch("setLoadingState", false);
-            this.$refs.orderReceiptStatusPopover.tableLoading = false;
-            this.$refs.wayBillReceiptPopover.tableLoading = false;
-            this.$refs.listReceiptStatusPopover.tableLoading = false;
-            this.$refs.arrivalInReceiptStatusPopover.tableLoading = false;
-            this.$refs.totalSplitOrderStatusPopover.tableLoading = false;
-            this.$refs.logisticsReceiptStatusPopover.tableLoading = false;
-            this.$refs.allLogDataReceiptStatusPopover.tableLoading = false;
-          });
-        });
+        .finally(() => {});
+      this.$forceUpdate();
     },
     //查询回执
     receiptApi(id, type) {
@@ -1258,10 +1330,6 @@ export default {
     },
     popoverClose(val) {
       this.tableData.forEach((item) => {
-        item.orderReceiptStatusPopoverType = false;
-        item.listReceiptStatusPopoverType = false;
-        item.wayBillReceiptPopoverType = false;
-        item.totalSplitOrderStatusPopoverType = false;
         item.logisticsReceiptStatusPopoverType = false;
         item.arrivalInReceiptStatusPopoverType = false;
         item.popoverData = [];
@@ -1271,14 +1339,17 @@ export default {
         "auto";
     },
     tableSelect(val) {
-      this.selected = val.selection;
+      console.log(val.records);
+      this.selected = val.records;
     },
     tableSelectAll(val) {
-      this.selected = val;
+      console.log(val.records);
+      this.selected = val.records;
     },
     //分页
     currentChange(val) {
-      this.page.pageIndex = val.page;
+      console.log(val);
+      this.page.pageIndex = val;
       this.search(1);
     },
     sizeChange(val) {
@@ -1462,5 +1533,19 @@ export default {
       font-size: 18px;
     }
   }
+  .vxe-cell--title {
+    font-size: 13px;
+    font-family: sans-serif !important;
+  }
+  .vxe-cell--label {
+    font-size: 12px;
+    font-family: sans-serif !important;
+  }
+  .vxe-table--render-default .vxe-cell--checkbox .vxe-checkbox--icon {
+    color: #007ab7 !important;
+  }
+  .vxe-table--render-default .vxe-body--row.row--hover > .vxe-body--column {
+    background-color: #e8f7fd !important;
+  }
 }
 </style>