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 == 0 ? 'primary' : ''"
          @click="(currentPage = 1), (type = 0), getCertList()"
        >
          已过期
        </el-button>
        <el-button
          :type="type == 1 ? 'primary' : ''"
          @click="(currentPage = 1), (type = 1), getCertList()"
        >
          当月
        </el-button>
        <el-button
          :type="type == 2 ? 'primary' : ''"
          @click="(currentPage = 1), (type = 2), 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: 1000px">
          <el-table-column
            align="center"
            type="index"
            label="序号"
            width="80"
          />
          <el-table-column
            align="center"
            prop="shipname"
            label="船名"
            min-width="120"
          />
          <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">
              <CrewInfo
                v-if="certType == 6"
                class="mr10"
                :shipCode="route.query.shipCode"
                :shipname="scope.row.shipname"
                :crewId="scope.row.id"
                :crewInfo="scope.row"
                btnText="查看"
                :isText="true"
                disabled
              ></CrewInfo>
              <el-button
                v-else
                type="primary"
                text
                @click="
                  goToDetail(
                    scope.row.shipCode,
                    scope.row.crewName,
                    scope.row.id
                  )
                "
              >
                详情
              </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(0);
let certType = ref(1);
let tableData = ref([]);
let total = ref(0);
let currentPage = ref(1);

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 goToDetail(shipCode, crewName, shipCrewId) {
  if (certType.value === 6 && crewName) {
    router.push({
      path: "/crewManage/crewDetail",
      query: {
        shipCode,
        shipCrewId,
      },
    });
  } else {
    router.push({
      path: "/shipManage/shipDetail",
      query: {
        shipCode,
      },
    });
  }
}
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>