更新 证书管理

src/views/workStation/certsManage.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="full-container-p24">
-    <div class="mb30" style="margin-left: 200px">
+    <div class="mb20" style="margin-left: 200px">
       <el-button-group class="mr30">
         <el-button
           size="large"
@@ -20,58 +20,39 @@
     </div>
     <div class="df">
       <div class="btns mr20 mt50">
-        <div>
+        <div v-for="(item, index) in certTypes" :key="item.id">
           <el-button
             size="large"
-            :type="certType == 0 ? 'primary' : ''"
-            @click="(currentPage = 1), (certType = 0), getCertList()"
+            :type="certType == item.type ? 'primary' : ''"
+            @click="
+              (currentPage = 1),
+                (certType = item.type),
+                (currentTypeIndex = index),
+                (validType = '');
+              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"
-          >
-            内河船舶最低安全配员证书
+            {{ item.typeName }}
           </el-button>
         </div>
       </div>
       <div>
+        <el-select
+          style="width: 240px"
+          v-if="currentTypeIndex == 1"
+          v-model="validType"
+          @change="getCertList"
+          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"
@@ -145,15 +126,17 @@ import { subTimeStr } from "../../utils/utils";
 
 const route = useRoute();
 let type = ref(1);
-let certType = ref(0);
+let certType = ref(1);
 let tableData = ref([]);
 let total = ref(0);
 let currentPage = ref(1);
 
-async function getCertList() {
+async function getCertList(e) {
+  validType.value = e;
   let { data } = await api.getCertList({
     type: type.value,
     certType: certType.value,
+    validType: validType.value,
     currentPage: currentPage.value,
     size: 10,
   });
@@ -177,9 +160,21 @@ function goToDetail(shipCode) {
     },
   });
 }
+let certTypes = ref([
+  {
+    validTypes: [],
+  },
+]);
+async function getCertListType() {
+  let { data } = await api.getCertListType({});
+  certTypes.value = data.result;
+}
 
+let currentTypeIndex = ref(0);
+let validType = ref("");
 onMounted(() => {
   getCertList();
+  getCertListType();
 });
 </script>