DataCenter/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
          @click="changeVoyageType(4)"
          :class="
            status == 4
              ? '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="请输入货主名称/船名/MMSI"
          prefix-icon="el-icon-search"
          v-model="term"
          clearable
          style="width: 330px"
        ></el-input>
        <div class="search-btn" @click="getVoyageList(1)">查询</div>
      </div>
      <div class="df aic">
        <el-button
          @click="FYDIModalVisable = true"
          class="mr20"
          size="medium"
          type="primary"
          >上传FYDI指数</el-button
        >

        <el-dialog
          title="上传FYDI指数"
          v-model="FYDIModalVisable"
          @close="FYDIModalClose"
        >
          <template v-slot:default>
            <div class="df aic jcsa">
              <RemoteSelect
                api="getCargoOwnerSelect"
                v-model="cargoOwnerCompanyStr"
                placeholder="公司名称/联系人/手机号"
                @selectItem="selectCargoOwnerUpload($event)"
                class="mb10"
              ></RemoteSelect>
              <el-upload
                v-if="FYDIParams.cargoOwnerId"
                class="upload-demo"
                :action="this.$store.state.fydi"
                :show-file-list="false"
                :data="FYDIParams"
                :on-success="upFYDISuccess"
                :before-upload="beforeFYDI"
              >
                <el-button
                  class="mr20"
                  size="medium"
                  type="primary"
                  :loading="isUpLoading"
                  >上传FYDI指数</el-button
                >
              </el-upload>
            </div>
          </template>
        </el-dialog>
        <el-button
          class="mr20"
          size="medium"
          type="primary"
          @click="voyageAddDialogVisible = true"
          >添加航次</el-button
        >
      </div>
    </div>
    <el-dialog
      v-model="voyageAddDialogVisible"
      @closed="resetAddVoyageForm"
      title="添加航次"
    >
      <el-form
        :rules="rules"
        label-position="right"
        label-width="100px"
        ref="voyageFormRef"
        :model="voyageForm"
      >
        <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></el-form-item>
          <el-form-item
            v-for="(item, index) in discPorts"
            prop="dischargeProt"
            :label="'第 ' + (index + 1) + ' 卸货港'"
          >
            <el-autocomplete
              v-model="item.loadPort"
              :fetch-suggestions="getCol"
              @blur="clear('dischargeProt')"
              placeholder="选择卸货港"
              @select="selectDischargeProt($event, index)"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="small" @click="addDiscPort"
              >添加卸货港</el-button
            ></el-form-item
          >
          <el-form-item v-if="discPorts.length % 2 == 0"></el-form-item>

          <el-form-item prop="cargo" label="货种">
            <el-input
              style="width: 220px"
              v-model="voyageForm.cargo"
            ></el-input>
          </el-form-item>
          <el-form-item prop="tons" label="吨位">
            <el-input style="width: 220px" v-model="voyageForm.tons"></el-input>
          </el-form-item>
          <el-form-item prop="pieces" label="件数">
            <el-input
              style="width: 220px"
              v-model="voyageForm.pieces"
            ></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>
    <el-table
      :data="tableData"
      stripe
      style="width: 100%; margin-top: 24px"
      :row-style="rowStyle"
    >
      <!-- <el-table-column
        type="index"
        label="序号"
        min-width="80"
        align="center"
      ></el-table-column> -->
      <el-table-column
        prop="voyageName"
        label="航次名称"
        min-width="140"
        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="航次状态"
        min-width="80"
        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="70"
        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="80"
        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="70"
        align="center"
      >
        <template v-slot="scope">
          {{ scope.row.hasInsurance == 0 ? "未购买" : "已购买" }}
        </template>
      </el-table-column>
      <!-- <el-table-column
        sortable
        prop="createTime"
        label="创建时间"
        min-width="100"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="remark"
        label="备注"
        min-width="100"
        align="center"
      ></el-table-column> -->
      <el-table-column label="操作" min-width="80" align="center">
        <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
        background
        layout="prev, pager, next"
        :current-page="currentPage"
        :total="total"
        :page-size="pageSize"
        @current-change="pageChange"
      ></el-pagination>
    </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";

let currentPage = ref(1);
let pageSize = ref(20);
let term = ref("");
let tableData = ref([]);
let total = ref(0);
let status = ref(0);
async function getVoyageList(page) {
  currentPage.value = page || currentPage.value;
  let res = await api.getVoyageList({
    cargoOwnerId: 0,
    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;
  } else {
    tableData.value = [];
    total.value = 0;
    ElNotification({
      type: "error",
      title: res.data.msg,
    });
  }
}
function changeVoyageType(s) {
  currentPage.value = 1;
  status.value = s;
  getVoyageList();
}
async function voyageDetail(id) {
  router.push({
    path: "/voyage/voyageDetail",
    query: {
      id,
    },
  });
}
function pageChange(e) {
  currentPage.value = e;
  getVoyageList();
}

function goToVoyageAdd() {
  router.push({
    path: "/voyage/voyageAdd",
  });
}
let voyageAddDialogVisible = ref(false);
const rules = ref({
  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: false, message: "请填写吨位", trigger: "blur" }],
  pieces: [{ required: false, message: "请填写件数", trigger: "blur" }],
});
let voyageForm = ref({
  voyageName: "",
  cargoOwnerId: "",
  cargoOwnerName: "",
  startTime: "",
  endTime: "",
  loadPort: "",
  dischargeProt: "",
  cargo: "",
  tons: 0,
  loadPortId: "",
  dischargeProtId: "",
  shipId: "",
  shipName: "",
  pieces: 0,
});

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

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

        break;
      }

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

async function addVoyage() {
  voyageFormRef.value.validate(async (valid) => {
    if (valid) {
      console.log("提交", voyageForm.value);
      discPorts.value = discPorts.value.filter((item) => {
        return item.loadPortId && item.loadPort;
      });

      if (!discPorts.value.length) {
        ElNotification({
          title: "请选择至少一个装货港",
          type: "error",
        });
        return;
      }
      let discId = [];
      let discStr = [];
      for (let i of discPorts.value) {
        discId.push(i.loadPortId);
        discStr.push(i.loadPort);
      }
      let res = await api.addVoyage({
        ...voyageForm.value,
        dischargePortIds: discId.join(","),
        dischargePorts: discStr.join(","),
      });
      if (res.data.status == 0) {
        ElNotification({
          title: res.data.msg,
          type: "success",
        });
        resetAddVoyageForm();
        getVoyageList();
      } else {
        console.log(res);
        ElNotification({
          title: res.data.msg,
          type: "error",
        });
      }
    } else {
      console.log("未提交", voyageForm.value);
    }
  });
}

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

let 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 }
);

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

let 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 }
);

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

let 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 }
);

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

let selectDischargeProt = (item, index) => {
  discPorts.value[index] = { loadPortId: item.key, loadPort: item.value };
};

function resetAddVoyageForm() {
  voyageAddDialogVisible.value = false;
  voyageFormRef.value.resetFields();
  voyageForm.value = {
    voyageName: "",
    cargoOwnerId: "",
    cargoOwnerName: "",
    startTime: "",
    endTime: "",
    loadPort: "",
    dischargeProt: "",
    cargo: "",
    tons: 0,
    loadPortId: "",
    dischargeProtId: "",
    shipId: "",
    shipName: "",
    pieces: 0,
  };
  discPorts.value = [{}];
}

let sortradio = ref(0);

let isUpLoading = ref(false);
function upFYDISuccess(e) {
  if (e.status == 0) {
    ElNotification.success({
      title: "成功",
      duration: 2000,
      message: e.msg,
    });
  } else {
    ElNotification.error({
      title: "失败",
      duration: 2000,
      message: e.msg,
    });
  }
  isUpLoading.value = false;
  FYDIModalVisable.value = false;
  FYDIParams.value.cargoOwnerId = "";
  cargoOwnerCompanyStr.value = "";
}

function beforeFYDI() {
  isUpLoading.value = true;
}

let FYDIModalVisable = ref(false);
let FYDIParams = ref({
  cargoOwnerId: "",
});
let cargoOwnerCompanyStr = ref("");
function selectCargoOwnerUpload(item) {
  cargoOwnerCompanyStr.value = item.key;
  FYDIParams.value.cargoOwnerId = item.value;
}

function FYDIModalClose() {
  isUpLoading.value = false;
  FYDIModalVisable.value = false;
  FYDIParams.value.cargoOwnerId = "";
  cargoOwnerCompanyStr.value = "";
}

function rowStyle({ row }) {
  let rowStyle = {};
  if (row.daysInPort >= 30) {
    rowStyle.color = "red";
    return rowStyle;
  }
}
let discPorts = ref([{}]);

function addDiscPort() {
  discPorts.value.push({});
}
onMounted(() => {
  getVoyageList();
});
</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;
}
</style>