Selaa lähdekoodia

feat(certsManage): 证书管理页面添加搜索功能并优化界面

- 新增搜索输入框和搜索按钮,可按船名/船员姓名搜索
- 添加当月到期按钮,优化筛选功能
- 调整表格列显示逻辑,根据证书类型隐藏船籍列
- 初始化类型选择为当月到期,提升用户体验
wzg 6 kuukautta sitten
vanhempi
commit
83c7571e6e
1 muutettua tiedostoa jossa 27 lisäystä ja 2 poistoa
  1. 27 2
      src/views/workStation/certsManage.vue

+ 27 - 2
src/views/workStation/certsManage.vue

@@ -1,7 +1,28 @@
 <template>
   <div class="full-container-p24">
-    <div class="mb20" style="margin-left: 200px">
+    <div class="mb20 df" style="margin-left: 200px">
+      <el-input
+        class="w200 mr10"
+        v-model="searchWord"
+        placeholder="请输入船名/船员姓名"
+        @keyup.enter="(currentPage = 1), getCertList()"
+        clearable
+        @clear="(currentPage = 1), getCertList()"
+      />
+      <el-button
+        type="primary"
+        class="mr20"
+        @click="(currentPage = 1), getCertList()"
+      >
+        搜索
+      </el-button>
       <el-button-group class="mr30">
+        <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()"
@@ -83,6 +104,7 @@
             min-width="120"
           />
           <el-table-column
+            v-if="certType !== 6"
             align="center"
             prop="shipRegistryProvince"
             label="船籍"
@@ -396,7 +418,7 @@ import _ from "lodash";
 import { subTimeStr } from "../../utils/utils";
 
 const route = useRoute();
-let type = ref(2);
+let type = ref(1);
 let certType = ref(1);
 let tableData = ref([]);
 let total = ref(0);
@@ -436,6 +458,7 @@ async function getCertList() {
     certType: certType.value,
     validType: validType.value,
     currentPage: currentPage.value,
+    searchWord: searchWord.value,
     size: 10,
   });
   loading.close();
@@ -677,6 +700,8 @@ async function submit() {
   }
 }
 
+const searchWord = ref("");
+
 onMounted(() => {
   getCertList();
   getCertListType();