修复 指令渲染冲突

src/views/voyage/voyageList.vue

@@ -76,16 +76,20 @@
         添加航次
       </div> -->
       <div>
-        <el-button
-          v-if="cacheList.length > 1"
-          v-auth="'MERGEVOYAGE'"
+        <div
+          style="display: inline-block"
           class="mr20"
-          @click="showMergeModal()"
-          size="medium"
-          type="primary"
+          v-if="cacheList.length > 1"
         >
-          合并航次
-        </el-button>
+          <el-button
+            v-auth="'MERGEVOYAGE'"
+            @click="showMergeModal()"
+            size="medium"
+            type="primary"
+          >
+            合并航次
+          </el-button>
+        </div>
         <el-popover placement="bottom" :width="100" trigger="hover">
           <template #reference>
             <el-button size="medium" type="primary">导出</el-button>
@@ -133,7 +137,7 @@
           </div>
         </el-popover>
       </div>
-      <el-dialog v-model="mergeVisable" title="合并航次">
+      <el-dialog v-model="mergeVisable" title="合并航次" destroy-on-close>
         <el-table :data="cacheList" border stripe>
           <el-table-column
             prop="voyageName"
@@ -149,7 +153,6 @@
           ></el-table-column>
           <el-table-column
             prop="cargo"
-            v-if="cargoVisable"
             label="货种"
             min-width="70"
             align="center"
@@ -192,6 +195,7 @@
       :close-on-click-modal="false"
       @close="isLoadingZip = false"
       width="200px"
+      destroy-on-close
     >
       <div class="df aic jcsb">
         <div
@@ -213,7 +217,11 @@
         </el-button>
       </div>
     </el-dialog>
-    <el-dialog v-model="voyageAddDialogVisible" title="添加航次">
+    <el-dialog
+      v-model="voyageAddDialogVisible"
+      title="添加航次"
+      destroy-on-close
+    >
       <el-form
         :rules="rules"
         label-position="right"
@@ -296,91 +304,6 @@
         </span>
       </template>
     </el-dialog>
-    <!-- <div class="mt20">
-      <p class="mr20 df aic" style="font-size: 14px; color: #333">
-        列表筛选:
-        <el-checkbox
-          class="ml20"
-          v-model="selectAllVisable"
-          label="全选"
-          size="default"
-          @change="selectAll"
-        />
-      </p>
-      <el-checkbox
-        v-model="voyageNameVisable"
-        label="航次名称"
-        size="default"
-        @change="selectSingle"
-        disabled
-      />
-      <el-checkbox
-        v-model="loadPortVisable"
-        label="装货港"
-        size="default"
-        @change="selectSingle"
-      />
-      <el-checkbox
-        v-model="dischargePortVisable"
-        label="卸货港"
-        size="default"
-        @change="selectSingle"
-      />
-      <el-checkbox
-        v-model="expectedArrivalTimeVisable"
-        label="预计到港时间"
-        size="default"
-        @change="selectSingle"
-      />
-      <el-checkbox
-        v-model="abnormalStatusVisable"
-        label="航次状态"
-        size="default"
-        @change="selectSingle"
-      />
-      <el-checkbox
-        v-model="daysInPortVisable"
-        label="在港天数"
-        size="default"
-        @change="selectSingle"
-      />
-      <el-checkbox
-        v-model="todayPhotoCountVisable"
-        label="今日照片"
-        size="default"
-        @change="selectSingle"
-      />
-      <el-checkbox
-        v-model="cargoVisable"
-        label="货种"
-        size="default"
-        @change="selectSingle"
-      />
-      <el-checkbox
-        v-model="actualLoadTonsVisable"
-        label="装载吨位"
-        size="default"
-        @change="selectSingle"
-      />
-      <el-checkbox
-        v-model="unloadedtonsVisable"
-        label="已卸货吨位"
-        size="default"
-        @change="selectSingle"
-      />
-      <el-checkbox
-        v-model="remainTonsVisable"
-        label="剩余吨位"
-        size="default"
-        @change="selectSingle"
-      />
-      <el-checkbox
-        v-model="hasInsuranceVisable"
-        label="保险状态"
-        size="default"
-        @change="selectSingle"
-      />
-    </div> -->
     <div
       class="df aic jcfs mt20"
       style="
@@ -530,7 +453,6 @@
       <el-table-column
         prop="voyageName"
         label="航次名称"
-        v-if="voyageNameVisable"
         min-width="140"
         align="center"
       >
@@ -542,14 +464,12 @@
       <el-table-column
         prop="loadPort"
         label="装货港"
-        v-if="loadPortVisable"
         min-width="90"
         align="center"
       ></el-table-column>
       <el-table-column
         prop="dischargePort"
         label="卸货港"
-        v-if="dischargePortVisable"
         min-width="80"
         align="center"
       ></el-table-column>
@@ -562,7 +482,6 @@
       <el-table-column
         prop="expectedArrivalTime"
         label="预计到港时间"
-        v-if="expectedArrivalTimeVisable"
         sortable
         min-width="140"
         align="center"
@@ -574,7 +493,6 @@
       <el-table-column
         prop="abnormalStatus"
         label="航次状态"
-        v-if="abnormalStatusVisable"
         min-width="80"
         align="center"
       >
@@ -585,7 +503,6 @@
       <el-table-column
         prop="daysInPortStr"
         label="在港天数"
-        v-if="daysInPortVisable"
         sortable
         min-width="100"
         align="center"
@@ -593,13 +510,11 @@
       <el-table-column
         prop="todayPhotoCount"
         label="今日日报"
-        v-if="todayPhotoCountVisable"
         min-width="100"
         align="center"
       ></el-table-column>
       <el-table-column
         prop="cargo"
-        v-if="cargoVisable"
         label="货种"
         min-width="70"
         align="center"
@@ -607,21 +522,18 @@
       <el-table-column
         prop="actualLoadTons"
         label="装载吨位"
-        v-if="actualLoadTonsVisable"
         min-width="80"
         align="center"
       ></el-table-column>
       <el-table-column
         prop="unloadedtons"
         label="已卸货吨位"
-        v-if="unloadedtonsVisable"
         min-width="100"
         align="center"
       ></el-table-column>
       <el-table-column
         prop="remainTons"
         label="剩余吨位"
-        v-if="remainTonsVisable"
         min-width="80"
         align="center"
       ></el-table-column>
@@ -651,7 +563,6 @@
       <el-table-column
         prop="hasInsurance"
         label="保险状态"
-        v-if="hasInsuranceVisable"
         min-width="100"
         align="center"
       >
@@ -677,7 +588,6 @@
         align="center"
       ></el-table-column> -->
       <el-table-column
-        v-auth="'UNMERGEVOYAGE'"
         label="解除"
         min-width="80"
         align="center"
@@ -685,6 +595,7 @@
       >
         <template v-slot="scope">
           <el-button
+            v-auth="'UNMERGEVOYAGE'"
             @click="showUnmergeModal(scope.row.id)"
             type="text"
             size="small"
@@ -1161,40 +1072,6 @@ function rowStyle({ row }) {
   return rowStyle;
 }
 
-let voyageNameVisable = ref(true);
-let loadPortVisable = ref(true);
-let dischargePortVisable = ref(true);
-let expectedArrivalTimeVisable = ref(true);
-let abnormalStatusVisable = ref(true);
-let daysInPortVisable = ref(true);
-let todayPhotoCountVisable = ref(true);
-let cargoVisable = ref(true);
-let actualLoadTonsVisable = ref(true);
-let unloadedtonsVisable = ref(true);
-let remainTonsVisable = ref(true);
-let hasInsuranceVisable = ref(true);
-
-let selectAllVisable = ref(true);
-function selectAll(e) {
-  loadPortVisable.value = e;
-  dischargePortVisable.value = e;
-  expectedArrivalTimeVisable.value = e;
-  abnormalStatusVisable.value = e;
-  daysInPortVisable.value = e;
-  todayPhotoCountVisable.value = e;
-  cargoVisable.value = e;
-  actualLoadTonsVisable.value = e;
-  unloadedtonsVisable.value = e;
-  remainTonsVisable.value = e;
-  hasInsuranceVisable.value = e;
-}
-
-function selectSingle(e) {
-  if (!e) {
-    selectAllVisable.value = e;
-  }
-}
-
 let loadPortFilterStr = ref("");
 function selectLoadPortFilter(item) {
   voyageListPostData.value.loadPortId = item.key;