ShippingService_WebApp/src/views/workStation/certsManage.vue

<template>
  <div class="full-container-p24">
    <div class="mb20" style="margin-left: 200px">
      <el-button-group class="mr30">
        <el-button
          :type="type == 2 ? 'primary' : ''"
          @click="(currentPage = 1), (type = 2), getCertList()"
        >
          {{ nextMonthStr }}
        </el-button>
        <el-button
          :type="type == 8 ? 'primary' : ''"
          @click="(currentPage = 1), (type = 8), getCertList()"
        >
          {{ nextNextMonthStr }}
        </el-button>
        <el-button
          :type="type == 9 ? 'primary' : ''"
          @click="(currentPage = 1), (type = 9), getCertList()"
        >
          {{ nextNextNextMonthStr }}
        </el-button>

        <el-button
          :type="type == 0 ? 'primary' : ''"
          @click="(currentPage = 1), (type = 0), getCertList()"
        >
          已过期
        </el-button>
        <el-button
          :type="type == 3 ? 'primary' : ''"
          @click="(currentPage = 1), (type = 3), getCertList()"
        >
          全部
        </el-button>
      </el-button-group>
    </div>
    <div class="df">
      <div class="btns mr20 mt50">
        <div v-for="(item, index) in certTypes" :key="item.id">
          <el-button
            :type="certType == item.type ? 'primary' : ''"
            @click="
              (currentPage = 1),
                (certType = item.type),
                (currentTypeIndex = index),
                (validType = 1);
              getCertList();
            "
            class="btn"
          >
            {{ item.typeName }}
          </el-button>
        </div>
      </div>
      <div>
        <el-select
          style="width: 240px"
          v-if="currentTypeIndex == 1"
          v-model="validType"
          @change="changeSelect"
          class="mb10 tac"
          placeholder="有效期类型"
        >
          <el-option
            v-for="item in certTypes[currentTypeIndex].validTypes"
            :key="item.type"
            :label="item.typeName"
            :value="item.type"
          />
        </el-select>
        <el-table border :data="tableData" stripe style="width: 900px">
          <el-table-column
            align="center"
            type="index"
            label="序号"
            width="80"
          />
          <el-table-column
            align="center"
            prop="shipname"
            label="船名"
            min-width="120"
          />
          <el-table-column
            align="center"
            prop="shipRegistryProvince"
            label="船籍"
            min-width="80"
          />
          <el-table-column
            v-if="certType == 6"
            align="center"
            prop="crewName"
            label="船员姓名"
            min-width="120"
          />
          <el-table-column
            v-if="certType != 6"
            align="center"
            prop="shipOwnerName"
            label="船员姓名"
            min-width="120"
          />
          <el-table-column
            v-if="certType != 6"
            align="center"
            prop="shipOwnerPhone"
            label="手机号"
            min-width="140"
          />
          <el-table-column
            align="center"
            prop="endValidTime"
            label="有效期"
            min-width="120"
          >
            <template v-slot="scope">
              {{ subTimeStr(scope.row.endValidTime) }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="详情" min-width="120">
            <template #default="scope">
              <el-button
                v-if="certType == 6"
                type="primary"
                text
                @click="goToShipOwnerDetail(scope.row.id)"
              >
                详情
              </el-button>
              <el-button
                v-else
                type="primary"
                text
                @click="goToShipDetail(scope.row.shipCode)"
              >
                详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="df aic jcfe mt40 mr20">
          <el-pagination
            :current-page="currentPage"
            @current-change="pageChange"
            background
            layout="prev, pager, next"
            :total="total"
          />
        </div>
      </div>
    </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 { useRoute } from "vue-router";
import _ from "lodash";
import { subTimeStr } from "../../utils/utils";

const route = useRoute();
let type = ref(2);
let certType = ref(1);
let tableData = ref([]);
let total = ref(0);
let currentPage = ref(1);
const monthNames = [
  "一月",
  "二月",
  "三月",
  "四月",
  "五月",
  "六月",
  "七月",
  "八月",
  "九月",
  "十月",
  "十一月",
  "十二月",
];

function getMonthName(monthOffset) {
  const currentMonth = new Date().getMonth();
  const newMonth = (currentMonth + monthOffset) % 12;
  return monthNames[newMonth] + "到期";
}

const nextMonthStr = ref(getMonthName(1));
const nextNextMonthStr = ref(getMonthName(2));
const nextNextNextMonthStr = ref(getMonthName(3));
async function getCertList() {
  let { data } = await api.getCertList({
    type: type.value,
    certType: certType.value,
    validType: validType.value,
    currentPage: currentPage.value,
    size: 10,
  });
  if (data.status == 0) {
    total.value = data.total;
    tableData.value = data.result;
  } else {
    total.value = 0;
    tableData.value = [];
  }
}
function pageChange(e) {
  currentPage.value = e;
  getCertList();
}
function goToShipDetail(shipCode) {
  router.push({
    path: "/shipManage/shipDetail",
    query: {
      shipCode,
    },
  });
}

function goToShipOwnerDetail(shipOwnerId) {
  router.push({
    path: "/shipOwnerManage/shipOwnerDetail",
    query: {
      shipOwnerId,
    },
  });
}

let certTypes = ref([
  {
    validTypes: [],
  },
]);
async function getCertListType() {
  let { data } = await api.getCertListType({});
  certTypes.value = data.result.filter((item) => {
    return item.typeName != "船舶保险";
  });
}

let currentTypeIndex = ref(0);
let validType = ref(1);
function changeSelect(e) {
  validType.value = e;
  getCertList();
}
onMounted(() => {
  getCertList();
  getCertListType();
});
</script>

<style scoped>
.btn {
  height: 50px;
  width: 180px;
  border-radius: 0;
}
</style>