ShippingService_WebApp/src/views/workStation/certsManage.vue

<template>
  <div class="full-container-p24">
    <div class="mb30" style="margin-left: 200px">
      <el-button-group class="mr30">
        <el-button
          size="large"
          :type="type == 1 ? 'primary' : ''"
          @click="(currentPage = 1), (type = 1), getCertList()"
        >
          当月
        </el-button>
        <el-button
          size="large"
          :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>
          <el-button
            size="large"
            :type="certType == 0 ? 'primary' : ''"
            @click="(currentPage = 1), (certType = 0), getCertList()"
            class="btn"
          >
            船舶主要项目页
          </el-button>
        </div>
        <div>
          <el-button
            size="large"
            :type="certType == 1 ? 'primary' : ''"
            @click="(currentPage = 1), (certType = 1), getCertList()"
            class="btn"
          >
            船舶国籍证书
          </el-button>
        </div>
        <div>
          <el-button
            size="large"
            :type="certType == 2 ? 'primary' : ''"
            @click="(currentPage = 1), (certType = 2), getCertList()"
            class="btn"
          >
            内河船舶适航证书
          </el-button>
        </div>
        <div>
          <el-button
            size="large"
            :type="certType == 3 ? 'primary' : ''"
            @click="(currentPage = 1), (certType = 3), getCertList()"
            class="btn"
          >
            船舶年审合格证书
          </el-button>
        </div>
        <div>
          <el-button
            size="large"
            :type="certType == 4 ? 'primary' : ''"
            @click="(currentPage = 1), (certType = 4), getCertList()"
            class="btn"
          >
            内河船舶最低安全配员证书
          </el-button>
        </div>
      </div>
      <div>
        <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
            align="center"
            prop="shipOwnerName"
            label="船东姓名"
            min-width="120"
          />
          <el-table-column
            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
                type="primary"
                text
                @click="goToDetail(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(1);
let certType = ref(0);
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,
    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) {
  router.push({
    path: "/shipManage/shipDetail",
    query: {
      shipCode,
    },
  });
}

onMounted(() => {
  getCertList();
});
</script>

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