CargoOwner_WebApp/src/views/voyage/voyageList.vue

<template>
  <div class="line-container-p24">
    <div class="df jcsb aic">
      <div class="df aic">
        <div
          @click="changeVoyageType(0)"
          :class="
            status == 0
              ? 'currentbtn radio-btns left-radius'
              : 'radio-btns left-radius'
          "
        >
          全部航次
        </div>
        <div
          style="border-left: none"
          @click="changeVoyageType(1)"
          :class="status == 1 ? 'currentbtn radio-btns' : 'radio-btns'"
        >
          装货中
        </div>

        <div
          style="border-left: none"
          @click="changeVoyageType(2)"
          :class="status == 2 ? 'currentbtn radio-btns' : 'radio-btns'"
        >
          运输中
        </div>
        <div
          style="border-left: none"
          @click="changeVoyageType(3)"
          :class="status == 3 ? 'currentbtn radio-btns' : 'radio-btns'"
        >
          卸货中
        </div>
        <div
          style="border-left: none"
          @click="changeVoyageType(4)"
          :class="status == 4 ? 'currentbtn radio-btns' : 'radio-btns'"
        >
          历史航次
        </div>
        <div
          @click="changeVoyageType(5)"
          :class="
            status == 5
              ? 'currentbtn radio-btns right-radius'
              : 'radio-btns right-radius '
          "
          style="margin-right: 40px; border-left: none"
        >
          合并航次
        </div>
        <!-- <div style="color: #333; margin-right: 10px; font-size: 14px">
          预计到港时间:
        </div>
        <el-radio-group v-model="sortradio">
          <el-radio :label="-1">默认排序</el-radio>
          <el-radio :label="0">降序</el-radio>
          <el-radio :label="1">升序</el-radio>
        </el-radio-group> -->
        <el-input
          :placeholder="
            status != 5 ? '请输入船名/MMSI' : '船名/MMSI/合同编号/客户'
          "
          prefix-icon="el-icon-search"
          v-model="term"
          clearable
          style="width: 240px"
          @keyup.enter="getVoyageList(1)"
        ></el-input>
        <div class="search-btn" @click="getVoyageList(1)">查询</div>
      </div>
      <!-- <div class="cargo-owner-add" @click="voyageAddDialogVisible = true">
        添加航次
      </div> -->
      <div>
        <div
          style="display: inline-block"
          class="mr20"
          v-if="cacheList.length > 1"
        >
          <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>
          </template>
          <div
            style="
              display: flex;
              flex-direction: column;
              height: 180px;
              justify-content: space-between;
            "
          >
            <el-button
              type="primary"
              size="medium"
              v-auth="'DOWNLOADVOYAGELIST'"
              @click="showExportModal('航次列表')"
            >
              导出航次列表
            </el-button>
            <el-button
              type="primary"
              size="medium"
              v-auth="'MULTDOWNLOADSHIPTRACK'"
              @click="showExportModal('航次跟踪')"
            >
              导出航次跟踪
            </el-button>
            <el-button
              type="primary"
              size="medium"
              @click="showExportModal('卸货记录')"
              v-auth="'MULTDOWNLOADDISCHARGE'"
            >
              导出卸货记录
            </el-button>
            <el-button
              v-auth="'DOWNLOADFYDI'"
              type="primary"
              size="medium"
              @click="downloadFYDI"
            >
              下载FYDI指数
            </el-button>
          </div>
        </el-popover>
      </div>
      <el-dialog v-model="mergeVisable" title="合并航次" destroy-on-close>
        <el-table :data="cacheList" border stripe>
          <el-table-column
            prop="voyageName"
            label="航次名称"
            min-width="140"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="dischargePort"
            label="卸货港"
            min-width="80"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="cargo"
            label="货种"
            min-width="70"
            align="center"
          ></el-table-column>
        </el-table>
        <el-form
          class="mt20"
          ref="mergeFormRef"
          label-width="100px"
          :inline="true"
          :rules="mergeRules"
          :model="mergeForm"
        >
          <el-form-item label="合同编号">
            <el-input v-model="mergeForm.contractNum" />
          </el-form-item>
          <el-form-item label="客户名称">
            <el-input v-model="mergeForm.clientName" />
          </el-form-item>
        </el-form>
        <div class="df jcfe mt30">
          <el-button class="mr20" @click="mergeVisable = false" size="medium">
            取消
          </el-button>
          <el-button
            v-if="mergeForm.contractNum && mergeForm.clientName"
            class="mr20"
            @click="mergeVoyage"
            size="medium"
            type="primary"
          >
            合并航次
          </el-button>
        </div>
      </el-dialog>
    </div>
    <el-dialog
      v-model="exportModalVisable"
      :title="exportModalTitle"
      :close-on-click-modal="false"
      @close="isLoadingZip = false"
      width="200px"
      destroy-on-close
    >
      <div class="df aic jcsb">
        <div
          v-if="exportModalTitle != '航次列表' || cargoOwnerId == 7"
          class="df aic"
        >
          <div class="mr20">请选择月份:</div>
          <el-date-picker
            v-model="currentMonth"
            type="month"
            placeholder="请选择年月"
            value-format="YYYYMM"
            :disabled="isLoadingZip"
          />
        </div>
        <div></div>
        <el-button type="primary" @click="exportZip" :loading="isLoadingZip">
          导出{{ exportModalTitle }}
        </el-button>
      </div>
    </el-dialog>
    <el-dialog
      v-model="voyageAddDialogVisible"
      title="添加航次"
      destroy-on-close
    >
      <el-form
        :rules="rules"
        label-position="right"
        label-width="80px"
        ref="addVoyageForm"
        :model="voyageForm"
        :before-close="resetAddVoyageForm"
      >
        <div class="df ffw">
          <!-- <el-form-item prop="voyageName" label="航次名称">
            <el-input v-model="voyageForm.voyageName"></el-input>
          </el-form-item>
          <el-form-item label=""></el-form-item> -->
          <el-form-item prop="shipName" label="船舶">
            <!-- <el-input v-model="voyageForm.shipOwnerId"></el-input> -->
            <el-autocomplete
              v-model="voyageForm.shipName"
              :fetch-suggestions="searchShip"
              placeholder="选择船舶"
              @blur="clear('shipId')"
              @select="selectShip"
            />
          </el-form-item>
          <el-form-item prop="cargoOwnerName" label="货主">
            <el-autocomplete
              v-model="voyageForm.cargoOwnerName"
              :fetch-suggestions="searchCargoOwner"
              @blur="clear('cargoOwnerId')"
              placeholder="选择货主"
              @select="selectCargoOwner"
            />
          </el-form-item>
          <el-form-item prop="startTime" label="开始时间">
            <el-date-picker
              v-model="voyageForm.startTime"
              type="date"
              value-format="YYYY/MM/DD"
              placeholder="航次开始时间"
            ></el-date-picker>
          </el-form-item>
          <el-form-item prop="endTime" label="结束时间">
            <el-date-picker
              v-model="voyageForm.endTime"
              type="date"
              value-format="YYYY/MM/DD"
              placeholder="航次结束时间"
              disabled
            ></el-date-picker>
          </el-form-item>
          <el-form-item prop="loadPort" label="装货港">
            <el-autocomplete
              v-model="voyageForm.loadPort"
              :fetch-suggestions="getCol"
              @blur="clear('loadPort')"
              placeholder="选择装货港"
              @select="selectLoadPort"
            />
          </el-form-item>
          <el-form-item prop="dischargeProt" label="卸货港">
            <el-autocomplete
              v-model="voyageForm.dischargeProt"
              :fetch-suggestions="getCol"
              @blur="clear('dischargeProt')"
              placeholder="选择卸货港"
              @select="selectDischargeProt"
            />
          </el-form-item>
          <el-form-item prop="cargo" label="货种">
            <el-input v-model="voyageForm.cargo"></el-input>
          </el-form-item>
          <el-form-item prop="tons" label="吨位">
            <el-input v-model="voyageForm.tons"></el-input>
          </el-form-item>
        </div>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="resetAddVoyageForm">取消</el-button>
          <el-button type="primary" @click="addVoyage">确定</el-button>
        </span>
      </template>
    </el-dialog>
    <div
      class="df aic jcfs mt20"
      style="
        font-size: 14px;
        color: #333;
        width: calc(100vw - 300px);
        flex-wrap: wrap;
      "
    >
      <div class="df jcsb aic mb10 mr20">
        <div class="mr10">装货港:</div>
        <el-select
          style="width: 120px"
          v-model="voyageListPostData.loadPortId"
          placeholder="装货港"
          size="small"
          @change="getVoyageList(1)"
          @focus="getPortSelect"
          filterable
          clearable
        >
          <el-option
            v-for="item in portOptions"
            :key="item"
            :label="item.value"
            :value="item.key"
          />
        </el-select>
      </div>
      <div class="df jcsb aic mb10 mr20">
        <div class="mr10">卸货港:</div>
        <el-select
          style="width: 120px"
          v-model="voyageListPostData.discPortId"
          placeholder="卸货港"
          size="small"
          @change="getVoyageList(1)"
          @focus="getPortSelect"
          filterable
          clearable
        >
          <el-option
            v-for="item in portOptions"
            :key="item"
            :label="item.value"
            :value="item.key"
          />
        </el-select>
      </div>
      <div class="df jcsb aic mb10 mr20">
        <div class="mr10">到港状态:</div>
        <el-select
          style="width: 120px"
          v-model="voyageListPostData.isArrived"
          placeholder="到港状态"
          size="small"
          @change="getVoyageList(1)"
        >
          <el-option label="已到港" :value="0" />
          <el-option label="未到港" :value="1" />
        </el-select>
      </div>
      <div class="df jcsb aic mb10 mr20">
        <div class="mr10">航次状态:</div>
        <el-select
          style="width: 120px"
          v-model="voyageListPostData.abnormalStatus"
          placeholder="航次状态"
          size="small"
          @change="getVoyageList(1)"
        >
          <el-option label="正常" :value="0" />
          <el-option label="异常" :value="1" />
        </el-select>
      </div>
      <div class="df jcsb aic mb10 mr20">
        <div class="mr10">货种:</div>
        <el-select
          style="width: 100px"
          v-model="voyageListPostData.cargoId"
          placeholder="货种"
          size="small"
          @change="getVoyageList(1)"
          @focus="getCargoSelect"
          filterable
          clearable
        >
          <el-option
            v-for="item in cargoOptions"
            :key="item"
            :label="item.value"
            :value="item.key"
          />
        </el-select>
      </div>
      <div class="df jcsb aic mb10 mr20">
        <div class="mr10">保险状态:</div>
        <el-select
          style="width: 120px"
          v-model="voyageListPostData.hasInsurance"
          placeholder="保险状态"
          size="small"
          @change="getVoyageList(1)"
        >
          <el-option label="未购买" :value="0" />
          <el-option label="已购买" :value="1" />
        </el-select>
      </div>
      <el-button @click="resetFilter" class="mb10" size="small" type="primary">
        重置
      </el-button>
    </div>
    <el-table
      :data="tableData"
      ref="tableRef"
      stripe
      style="width: 100%; margin-top: 12px"
      :row-style="rowStyle"
      @select="preSelect"
      @select-all="preSelectAll"
      @selection-change="preSelectionChange"
    >
      <el-table-column v-if="status != 5" type="selection" width="55" />

      <!-- <el-table-column
        type="index"
        label="序号"
        min-width="80"
        align="center"
      ></el-table-column> -->
      <el-table-column
        prop="contractNum"
        label="合同编号"
        sortable
        v-if="status == 5"
        min-width="100"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="clientName"
        label="客户名称"
        sortable
        v-if="status == 5"
        min-width="100"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="voyageName"
        label="航次编号"
        min-width="120"
        align="center"
      >
        <template v-slot="scope">
          {{ scope.row.wuchanVoyageInfo?.hhdVoyageCode }}
        </template>
      </el-table-column>
      <el-table-column
        prop="voyageName"
        label="航次名称"
        min-width="140"
        align="center"
      >
        <template v-slot="scope">
          {{ scope.row.voyageName
          }}{{ `${scope.row.contractNum ? " - 已合并" : ""}` }}
        </template>
      </el-table-column>
      <el-table-column
        prop="proxyName"
        label="承运商"
        min-width="120"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="loadPort"
        label="装货港"
        min-width="90"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="dischargePort"
        label="卸货港"
        min-width="80"
        align="center"
      ></el-table-column>
      <!-- <el-table-column
        prop="setSailTime"
        label="开航时间"
        min-width="100"
        align="center"
      ></el-table-column> -->
      <el-table-column
        prop="expectedArrivalTime"
        label="预计到港时间"
        sortable
        min-width="140"
        align="center"
      >
        <template v-slot="scope">
          {{ scope.row.arrived ? "已到港" : scope.row.expectedArrivalTime }}
        </template>
      </el-table-column>
      <el-table-column
        prop="abnormalStatus"
        label="航次状态"
        :filters="[
          { text: '正常', value: 0 },
          { text: '异常', value: 1 },
        ]"
        :filter-method="filterHandler"
        min-width="90"
        align="center"
      >
        <template v-slot="scope">
          {{ scope.row.abnormalStatus == 0 ? "正常" : "异常" }}
        </template>
      </el-table-column>
      <el-table-column
        prop="daysInPortStr"
        label="在港天数"
        sortable
        min-width="100"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="todayPhotoCount"
        label="今日日报"
        min-width="100"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="cargo"
        label="货种"
        min-width="70"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="actualLoadTons"
        label="装载吨位"
        min-width="80"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="unloadedtons"
        label="已卸货吨位"
        min-width="100"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="remainTons"
        label="剩余吨位"
        min-width="80"
        align="center"
      ></el-table-column>
      <!-- <el-table-column
        prop="waybillStatus"
        sortable
        label="签单状态"
        min-width="100"
        align="center"
      >
        <template v-slot="scope">
          {{
            scope.row.waybillStatus == 0
              ? ""
              : scope.row.waybillStatus == 1
              ? "未签单"
              : "已签单"
          }}
        </template>
      </el-table-column> -->
      <!-- <el-table-column
        prop="transStatus"
        label="船舶状态"
        min-width="100"
        align="center"
      ></el-table-column> -->
      <el-table-column
        prop="hasInsurance"
        label="保险状态"
        min-width="90"
        :filters="[
          { text: '未购买', value: 0 },
          { text: '已购买', value: 1 },
        ]"
        :filter-method="filterHandler"
        align="center"
      >
        <template v-slot="scope">
          <span :style="scope.row.hasInsurance == 0 ? 'color:red' : ''">
            {{ scope.row.hasInsurance == 0 ? "未购买" : "已购买" }}
          </span>
        </template>
      </el-table-column>
      <!-- <el-table-column
        sortable
        prop="createTime"
        label="创建时间"
        min-width="100"
        align="center"
      >
        <template v-slot="scope">
          {{ subTimeStr(scope.row.createTime) }}
        </template>
      </el-table-column>-->
      <el-table-column
        prop="cargoOwnerRemark"
        label="备注"
        min-width="100"
        align="center"
      ></el-table-column>
      <el-table-column
        label="解除"
        min-width="80"
        align="center"
        v-if="status == 5"
      >
        <template v-slot="scope">
          <el-button
            v-auth="'UNMERGEVOYAGE'"
            @click="showUnmergeModal(scope.row.id)"
            type="text"
            size="small"
          >
            解除合并
          </el-button>
        </template>
      </el-table-column>
      <el-table-column
        v-auth="'VOYAGEDETAIL'"
        label="操作"
        min-width="80"
        align="center"
        fixed="right"
      >
        <template v-slot="scope">
          <el-button
            @click="voyageDetail(scope.row.id, tableData)"
            type="text"
            size="small"
          >
            查看详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="width: 100%; text-align: right; margin-top: 43px">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[50, 100, 200]"
        background
        layout="sizes, prev, pager, next"
        :total="total"
        @size-change="sizeChange"
        @current-change="pageChange"
      />
    </div>
  </div>
</template>
<script setup>
import { ref, h, reactive, toRefs, onMounted } from "vue";
import { ElNotification, ElMessageBox, ElMessage } from "element-plus";
import store from "../../store";
import router from "../../router";
import md5 from "md5";
import api from "../../apis/fetch";
import _ from "lodash";
import { subTimeStr } from "../../utils/utils";
import downloadBlobFile from "../../utils/downloadBlobFile";
import url from "../../apis/config";

let currentPage = ref(1);
let pageSize = ref(50);
let term = ref("");
let tableData = ref([]);
let total = ref(0);
let status = ref(3);
let loginAccountId = ref("");
let voyageListPostData = ref({});
let cargoOwnerId = localStorage.userId;
async function getVoyageList(type) {
  tableData.value = [];
  currentPage.value = type || currentPage.value;
  let res = await api.getVoyageList({
    ...voyageListPostData.value,
    loginAccountId: localStorage.loginAccountId,
    cargoOwnerId: localStorage.userId,
    shipId: 0,
    status: status.value,
    term: term.value,
    currentPage: currentPage.value,
    size: pageSize.value,
  });
  if (res.data.status == 0) {
    tableData.value = res.data.result;
    total.value = res.data.total;
    reSelect();
  } else {
    tableData.value = [];
    total.value = 0;
  }
}
function changeVoyageType(s) {
  currentPage.value = 1;
  status.value = s;
  cacheList.value = [];
  getVoyageList(1);
}
async function voyageDetail(id) {
  router.push({
    path: "/voyage/voyageDetail",
    query: {
      id,
    },
  });
}
function pageChange(e) {
  currentPage.value = e;
  getVoyageList();
}

function sizeChange() {
  currentPage.value = 1;
  getVoyageList();
}

function goToVoyageAdd() {
  router.push({
    path: "/voyage/voyageAdd",
  });
}
let voyageAddDialogVisible = ref(false);
const rules = reactive({
  rules: {
    voyageName: [
      { required: false, message: "请填写航次名称", trigger: "blur" },
    ],
    shipName: [{ required: true, message: "请选择船舶", trigger: "blur" }],
    cargoOwnerName: [
      { required: true, message: "请选择货主", trigger: "blur" },
    ],
    startTime: [{ required: true, message: "请填写开始时间", trigger: "blur" }],
    loadPort: [{ required: true, message: "请填写装货港", trigger: "blur" }],
    dischargeProt: [
      { required: true, message: "请填写卸货港", trigger: "blur" },
    ],
    cargo: [{ required: true, message: "请填写货种", trigger: "blur" }],
    tons: [{ required: true, message: "请填写吨位", trigger: "blur" }],
  },
});
let voyageForm = reactive({
  voyageForm: {
    voyageName: "",
    cargoOwnerId: "",
    cargoOwnerName: "",
    startTime: "",
    endTime: "",
    loadPort: "",
    dischargeProt: "",
    cargo: "",
    tons: "",
    loadPortId: "",
    dischargeProtId: "",
    shipId: "",
    shipName: "",
  },
});

function clear(type) {
  setTimeout(() => {
    switch (type) {
      case "shipId": {
        let index = ref(-1);
        for (let i in shipsCache.value) {
          if (voyageForm.voyageForm.shipName == shipsCache.value[i].shipName) {
            index.value = i;
            break;
          }
        }
        if (index.value != -1) {
          voyageForm.voyageForm.shipId = shipsCache.value[index.value].shipId;
        } else {
          let b = shipsCache.value.some((item) => {
            return (
              item.shipId == voyageForm.voyageForm.shipId &&
              item.shipName == voyageForm.voyageForm.shipName
            );
          });
          voyageForm.voyageForm["shipId"] = "";
          voyageForm.voyageForm["shipName"] = "";
        }
        break;
      }
      case "cargoOwnerId": {
        let index = ref(-1);
        for (let i in cargoOwnersCache.value) {
          if (
            voyageForm.voyageForm.cargoOwnerName ==
            cargoOwnersCache.value[i].userName
          ) {
            index.value = i;
            break;
          }
        }
        if (index.value != -1) {
          voyageForm.voyageForm.cargoOwnerId =
            cargoOwnersCache.value[index.value].userId;
        } else {
          let b = cargoOwnersCache.value.some((item) => {
            return (
              item.userId == voyageForm.voyageForm.cargoOwnerId &&
              item.userName == voyageForm.voyageForm.cargoOwnerName
            );
          });
          if (!b) {
            voyageForm.voyageForm["cargoOwnerId"] = "";
            voyageForm.voyageForm["cargoOwnerName"] = "";
          }
        }

        break;
      }
      case "loadPort": {
        let index = ref(-1);
        for (let i in colCache.value) {
          if (voyageForm.voyageForm.loadPort == colCache.value[i].value) {
            index.value = i;
            break;
          }
        }
        if (index.value != -1) {
          voyageForm.voyageForm.loadPortId = colCache.value[index.value].key;
        } else {
          let b = colCache.value.some((item) => {
            return (
              item.value == voyageForm.voyageForm.loadPort &&
              item.key == voyageForm.voyageForm.loadPortId
            );
          });
          if (!b) {
            voyageForm.voyageForm["loadPort"] = "";
            voyageForm.voyageForm["loadPortId"] = "";
          }
        }

        break;
      }

      case "dischargeProt": {
        let index = ref(-1);
        for (let i in colCache.value) {
          if (voyageForm.voyageForm.dischargeProt == colCache.value[i].value) {
            index.value = i;
            break;
          }
        }
        if (index.value != -1) {
          voyageForm.voyageForm.dischargeProtId =
            colCache.value[index.value].key;
        } else {
          let b = colCache.value.some((item) => {
            return (
              item.value == voyageForm.voyageForm.dischargeProt &&
              item.key == voyageForm.voyageForm.dischargeProtId
            );
          });
          if (!b) {
            voyageForm.voyageForm["dischargeProt"] = "";
            voyageForm.voyageForm["dischargeProtId"] = "";
          }
        }
        break;
      }
    }
  }, 200);
}
let addVoyageForm = ref(null);

async function addVoyage() {
  addVoyageForm.value.validate(async (valid) => {
    if (valid) {
      console.log("提交", voyageForm.voyageForm);
      let res = await api.addVoyage({
        ...voyageForm.voyageForm,
      });
      if (res.data.status == 0) {
        ElNotification({
          title: res.data.msg,
          type: "success",
        });
        resetAddVoyageForm();
        getVoyageList(1);
      } else {
        console.log(res);
      }
    }
  });
}

let shipsCache = ref([]);
let colCache = ref([]);
let cargoOwnersCache = ref([]);

const searchShip = _.debounce(
  async (queryString, cb) => {
    if (!queryString) return;
    let res = await api.searchShip({
      term: queryString,
    });
    let ships = [];
    if (res.data.status == 0) {
      ships = res.data.result;
      for (let i of ships) {
        i.value = `${i.shipName}`;
      }
      shipsCache.value = ships;
      cb(ships);
    }
  },
  1000,
  { leading: true }
);

const selectShip = (item) => {
  voyageForm.voyageForm.shipId = item.shipId;
};

const searchCargoOwner = _.debounce(
  async (queryString, cb) => {
    if (!queryString) return;
    let res = await api.searchUser({
      term: queryString,
      identity: 2,
    });
    let cargoOwners = [];
    if (res.data.status == 0) {
      cargoOwners = res.data.result;
      for (let i of cargoOwners) {
        i.value = `${i.userName}`;
      }
      cargoOwnersCache.value = cargoOwners;
      cb(cargoOwners);
    }
  },
  1000,
  { leading: true }
);

const selectCargoOwner = (item) => {
  voyageForm.voyageForm.cargoOwnerId = item.userId;
};

const getCol = _.debounce(
  async (queryString, cb) => {
    if (!queryString) return;
    let res = await api.getCol({
      term: queryString,
    });
    if (res.data.status == 0) {
      colCache.value = [...colCache.value, ...res.data.result];
      colCache.value = _.uniqBy(colCache.value, "key");

      cb(res.data.result);
    }
  },
  1000,
  { leading: true }
);

const selectLoadPort = (item) => {
  voyageForm.voyageForm.loadPortId = item.key;
  voyageForm.voyageForm.loadPort = item.value;
};

const selectDischargeProt = (item) => {
  voyageForm.voyageForm.dischargeProtId = item.key;
  voyageForm.voyageForm.dischargeProt = item.value;
};

function resetAddVoyageForm() {
  voyageAddDialogVisible.value = false;
  addVoyageForm.value.resetFields();
}

let sortradio = ref(0);
async function downloadFYDI() {
  let res0 = await api.getFYFIDownloadUrl({
    loginAccountId: localStorage.loginAccountId,
  });

  if (res0.data.result == 1) {
    ElNotification({
      type: "info",
      title: "更新中",
    });
  } else {
    let url = res0.data.result;
    let a = document.createElement("a");
    a.setAttribute("href", url);
    a.click();
  }
}

let exportModalVisable = ref(false);
let exportModalTitle = ref("");
let currentMonth = ref("");

function showExportModal(type) {
  exportModalVisable.value = true;
  exportModalTitle.value = type;
}

let isLoadingZip = ref(false);

async function exportZip() {
  if (!currentMonth.value && exportModalTitle.value != "航次列表") return;

  isLoadingZip.value = true;
  let path = "";
  let type = "";
  let postData = {
    loginAccountId: localStorage.loginAccountId,
  };
  let title = "";
  switch (exportModalTitle.value) {
    case "航次列表": {
      if (localStorage.userId == 7) {
        path = "/voyage/exportVoyageReportExcel";
        postData.loginAccountId = localStorage.loginAccountId;
        postData.date = currentMonth.value;
      } else {
        path = "/voyage/exportListExcel";
        let arr = [];
        for (let i of tableData.value) {
          arr.push(i.id);
        }
        postData.voyageIds = arr.join(",");
      }
      type =
        "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8";
      title = `${exportModalTitle.value}`;
      break;
    }
    case "航次跟踪": {
      path = "/voyage/exportMultExcel";
      type = "application/zip";
      postData.date = currentMonth.value;
      title = `${exportModalTitle.value}${currentMonth.value}`;

      break;
    }
    case "卸货记录": {
      path = "/voyage/exportMultDischargeExcel";
      type = "application/zip";
      postData.date = currentMonth.value;
      title = `${exportModalTitle.value}${currentMonth.value}`;
      break;
    }
  }
  try {
    let res = await downloadBlobFile(
      `${url.baseurl}${path}`,
      postData,
      title,
      "post",
      type
    );
    if (res.status == 0) {
      ElNotification({
        title: "导出成功!",
        type: "success",
      });
    } else {
      ElNotification({
        title: "暂无数据",
      });
    }
  } catch (error) {
    ElNotification({
      title: "暂无数据",
    });
  } finally {
    isLoadingZip.value = false;
    currentMonth.value = "";
    exportModalVisable.value = false;
  }
}

function rowStyle({ row }) {
  let rowStyle = {};

  if (row.daysInPort >= 20 && row.daysInPort < 25) {
    rowStyle.color = "#f9ca24";
  } else if (row.daysInPort >= 25 && row.daysInPort < 30) {
    rowStyle.color = "#f0932b";
  } else if (row.daysInPort >= 30) {
    rowStyle.color = "#eb4d4b";
  }

  return rowStyle;
}

let loadPortFilterStr = ref("");
function selectLoadPortFilter(item) {
  voyageListPostData.value.loadPortId = item.key;
  getVoyageList(1);
}
let discPortFilterStr = ref("");
function selectDiscPortFilter(item) {
  voyageListPostData.value.discPortId = item.key;
  getVoyageList(1);
}
let cargoFilterStr = ref("");
function selectCargoFilter(item) {
  voyageListPostData.value.cargo = item.key;
  getVoyageList(1);
}

function resetFilter() {
  loadPortFilterStr.value = "";
  discPortFilterStr.value = "";
  cargoFilterStr.value = "";
  cacheList.value = [];
  voyageListPostData.value = {};
  getVoyageList(1);
}
let cargoOptions = ref([]);
async function getCargoSelect() {
  if (cargoOptions.value.length) return;
  let res = await api.getCargoSelect({
    loginAccountId: loginAccountId.value,
    status: 2,
    term: "",
  });
  cargoOptions.value = res.data.result;
}

let portOptions = ref([]);
async function getPortSelect() {
  if (portOptions.value.length) return;
  let res = await api.getCol({
    term: "",
  });
  portOptions.value = res.data.result;
}
let isDelete = ref(false);
let cacheList = ref([]);
function preSelect(e, row) {
  console.log(e);
  for (let i in cacheList.value) {
    if (cacheList.value[i].id == row.id) {
      cacheList.value.splice(i, 1);
      break;
    }
  }
}
function preSelectAll(e) {
  if (!e.length) {
    let arr = tableData.value;
    cacheList.value = cacheList.value.filter(
      (x) => !arr.some((item) => x.id == item.id)
    );
  }
}
function preSelectionChange(e) {
  cacheList.value = cacheList.value.concat(e);
  cacheList.value = _.uniqWith(cacheList.value, _.isEqual);
}
let tableRef = ref(null);
function reSelect() {
  for (let i of tableData.value) {
    for (let j of cacheList.value) {
      if (i.id == j.id) {
        tableRef.value.toggleRowSelection(i, true);
        continue;
      }
    }
  }
}

let mergeVisable = ref(false);
let mergeFormRef = ref(null);
let mergeForm = ref({});
let mergeRules = ref({});
async function mergeVoyage() {
  let arr = [];
  for (let i of cacheList.value) {
    arr.push(i.id);
  }
  let res = await api.mergeVoyage({
    ...mergeForm.value,
    voyageIds: arr.join(","),
  });
  if (res.data.status == 0) {
    ElNotification({
      title: res.data.msg,
      type: "success",
    });
  }
  cacheList.value = [];
  clearMergeForm();
  getVoyageList();
}

async function showUnmergeModal(voyageId) {
  ElMessageBox.confirm("确认解除航次合并?", "解除合并", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    let res = await api.unmergeVoyage({
      voyageId,
    });
    getVoyageList();
  });
}
function clearMergeForm() {
  mergeVisable.value = false;
  mergeForm.value = {};
}

function showMergeModal() {
  let arr = [];
  for (let i of cacheList.value) {
    if (!i.contractNum) {
      arr.push(i);
    }
  }

  if (arr.length > 1) {
    cacheList.value = arr;
    mergeVisable.value = true;
  } else {
    ElNotification({
      title: "列表包含已合并航次",
      type: "info",
    });
  }
}

function filterHandler(value, row, column) {
  const property = column["property"];
  return row[property] === value;
}

onMounted(() => {
  getVoyageList(1);
  loginAccountId.value = localStorage.loginAccountId;
});
</script>
<style scoped>
.search-btn {
  display: inline-block;
  width: 60px;
  height: 32px;
  background: #0094fe;
  border-radius: 2px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  text-align: center;
  line-height: 32px;
  margin-left: 10px;
  cursor: pointer;
}

.cargo-owner-add {
  width: 80px;
  height: 32px;
  border-radius: 2px;
  border: 1px solid #0094fe;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #0094fe;
  line-height: 32px;
  text-align: center;
  cursor: pointer;
}
:deep().el-dialog {
  width: 560px;
  padding: 20px 50px;
  border-radius: 6px;
}

:deep() .el-dialog__title {
  font-size: 18px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #0094fe;
}

.normal-label {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #353a42;
  margin-right: 10px;
}

.show-input {
  width: 280px;
  height: 32px;
  background: #ffffff;
  border-radius: 2px;
  border: 1px solid #dee0e3;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  line-height: 32px;
  padding-left: 12px;
  margin-right: 40px;
}

.radio-btns {
  height: 38px;
  width: 70px;
  border: 1px solid #1486f9;
  line-height: 38px;
  text-align: center;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #0094fe;
  cursor: pointer;
}

.left-radius {
  border-top-left-radius: 19px;
  border-bottom-left-radius: 19px;
  width: 80px;
}

.right-radius {
  border-top-right-radius: 19px;
  border-bottom-right-radius: 19px;
  width: 80px;
}
.currentbtn {
  background: #1486f9;
  color: #fff;
}

.search-btn {
  display: inline-block;
  width: 60px;
  height: 38px;
  background: #0094fe;
  border-radius: 2px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  text-align: center;
  line-height: 38px;
  margin-left: 10px;
  cursor: pointer;
}

.voyage-add {
  width: 80px;
  height: 36px;
  border-radius: 2px;
  border: 1px solid #0094fe;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #0094fe;
  line-height: 36px;
  text-align: center;
  cursor: pointer;
}

:deep() .el-dialog {
  width: 800px;
}

:deep() .el-form-item {
  margin-right: 22px;
  width: 300px;
}

:deep() .el-autocomplete {
  width: 220px;
}

.el-radio {
  margin-right: 10px;
}
.el-radio:last-child {
  margin-right: 20px;
}

.el-button {
  margin-left: 0;
}
</style>