ToDo 首页;船东详情(修改),修改船舶信息

package.json

@@ -2,7 +2,7 @@
   "name": "shippingservice",
   "version": "0.0.0",
   "scripts": {
-    "dev": "vite --mode dev",
+    "dev": "vite --mode dev --host",
     "build": "vite build --mode dev",
     "bm": "vite build --mode release",
     "serve": "vite build --mode release && vite preview"

src/App.vue

@@ -19,16 +19,19 @@
 .line-container-p18 {
   padding: 18px;
   background: #fff;
+  max-width: 1200px;
 }
 .line-container-p24 {
   padding: 24px;
   background: #fff;
+  max-width: 1200px;
 }
 
 .full-container-p24 {
   padding: 24px;
-  height: calc(100% - 48px);
+  min-height: 100%;
   background: #fff;
+  max-width: 1200px;
 }
 
 .container-title {

src/apis/fetch.js

@@ -45,7 +45,7 @@ export default {
     return $http("/ship/detail", data);
   },
 
-  //
+  // 获取船舶列表
   getShipList(data) {
     return $http("/ship/list", data);
   },
@@ -55,8 +55,13 @@ export default {
     return $http("/ship/search", data);
   },
 
-  //
+  // 更新证书有效期
   updateShipCertValid(data) {
     return $http("/ship/update/cert/valid", data);
   },
+
+  // 获取证书/保险列表
+  getCertList(data) {
+    return $http("/cert/list", data);
+  },
 };

src/components/ShipInfo.vue

@@ -1,28 +1,40 @@
 <template>
   <div>
     <div class="container-title">船舶信息</div>
-    <div class="pl50 pt30 bgf">
+    <div
+      class="pl50 pt30 bgf df jcsb pr20"
+      v-if="route.name == 'shipOwnerDetail'"
+    >
       <el-button-group class="mr20">
         <el-button
           v-for="(item, index) in shipInfos"
           :key="item.code"
           @click="currentIndex = index"
+          v-show="item.code"
           :type="index == currentIndex ? 'primary' : ''"
         >
           {{ item.shipname || "新增船舶" }}
         </el-button>
       </el-button-group>
-      <el-button @click="deleteShip(currentIndex)" type="primary" class="mr20">
-        删除当前船舶
-      </el-button>
-      <el-button
-        v-if="shipInfos.length == 0 || shipInfos[currentIndex].code"
-        @click="addShip()"
-        type="primary"
-      >
-        新增船舶
-      </el-button>
+      <div>
+        <el-button
+          v-if="shipInfos[currentIndex].code"
+          @click="deleteShip(currentIndex)"
+          type="primary"
+          class="mr20"
+        >
+          删除当前船舶
+        </el-button>
+        <el-button
+          v-if="shipInfos.length == 0 || shipInfos[currentIndex].code"
+          @click="addShip()"
+          type="primary"
+        >
+          新增船舶
+        </el-button>
+      </div>
     </div>
+
     <div class="line-container-p24">
       <div class="line">
         <div class="info-line">
@@ -30,7 +42,7 @@
           <el-input
             class="info-line-text"
             v-model="shipInfos[currentIndex].shipname"
-            :disabled="unchangeableShip"
+            :disabled="shipInfos[currentIndex].disabled"
           ></el-input>
           <view class="unit"></view>
         </div>
@@ -39,7 +51,11 @@
           <el-input
             class="info-line-text"
             v-model="shipInfos[currentIndex].mmsi"
-            :disabled="unchangeableShip || !!shipInfos[currentIndex].shipId"
+            :disabled="
+              shipInfos[currentIndex].disabled ||
+              !!shipInfos[currentIndex].code ||
+              !!shipInfos[currentIndex].shipId
+            "
             @blur="searchShip($event, currentIndex)"
           ></el-input>
         </div>
@@ -50,7 +66,7 @@
           <el-input
             class="info-line-text"
             v-model="shipInfos[currentIndex].length"
-            :disabled="unchangeableShip"
+            :disabled="shipInfos[currentIndex].disabled"
           ></el-input>
           <view class="unit">米</view>
         </div>
@@ -59,7 +75,7 @@
           <el-input
             class="info-line-text"
             v-model="shipInfos[currentIndex].breadth"
-            :disabled="unchangeableShip"
+            :disabled="shipInfos[currentIndex].disabled"
           ></el-input>
           <view class="unit">米</view>
         </div>
@@ -70,7 +86,7 @@
           <el-input
             class="info-line-text"
             v-model="shipInfos[currentIndex].loadTons"
-            :disabled="unchangeableShip"
+            :disabled="shipInfos[currentIndex].disabled"
           ></el-input>
           <view class="unit">吨</view>
         </div>
@@ -79,13 +95,13 @@
           <el-input
             class="info-line-text"
             v-model="shipInfos[currentIndex].age"
-            :disabled="unchangeableShip"
+            :disabled="shipInfos[currentIndex].disabled"
           ></el-input>
           <view class="unit">年</view>
         </div>
       </div>
     </div>
-    <div>
+    <div style="max-width: 1200px">
       <div class="container-title">船舶证书</div>
       <div
         v-for="(item, index) in shipInfos[currentIndex].shipCerts"
@@ -140,8 +156,12 @@
           @onRemoveFileList="removeCert($event, index)"
         ></Uploader>
       </div>
-      <div class="p30 mb30 df jcfe" style="background: #fff">
-        <el-button @click="submit" type="primary">确定</el-button>
+      <div
+        v-if="!shipInfos[currentIndex].code"
+        class="p30 mb30 df jcfe"
+        style="background: #fff"
+      >
+        <el-button @click="submit" type="primary">添加船舶</el-button>
       </div>
     </div>
   </div>
@@ -152,7 +172,9 @@ import { ElMessage } from "element-plus";
 import api from "../apis/fetch";
 import _ from "lodash";
 import store from "../store";
-
+import { useRoute } from "vue-router";
+import router from "../router";
+const route = useRoute();
 const props = defineProps({
   certsId: {
     type: String,
@@ -227,12 +249,53 @@ async function changeDate(e, index) {
 }
 let initShipInfo = {
   shipId: 0,
-  shipCerts: [],
+  disabled: false,
+  shipCerts: [
+    {
+      title: "船舶国籍证书",
+      type: 1,
+      date: "",
+      startValidTime: "",
+      endtValidTime: "",
+      certs: [],
+    },
+    {
+      title: "内河船舶适航证书",
+      type: 2,
+      date: "",
+      startValidTime: "",
+      endtValidTime: "",
+      certs: [],
+    },
+    {
+      title: "船舶年审合格证书",
+      type: 3,
+      date: "",
+      startValidTime: "",
+      endtValidTime: "",
+      certs: [],
+    },
+    {
+      title: "内河船舶最低安全配员证书",
+      type: 4,
+      date: "",
+      startValidTime: "",
+      endtValidTime: "",
+      certs: [],
+    },
+    {
+      title: "船舶保险",
+      type: 5,
+      date: "",
+      startValidTime: "",
+      endtValidTime: "",
+      certs: [],
+    },
+  ],
 };
 function getShipCerts() {
   return shipCerts.value;
 }
-let unchangeableShip = ref(false);
 
 async function searchShip(e) {
   if (e.target.value.length != 9) return;
@@ -250,6 +313,7 @@ async function searchShip(e) {
         j.url = j.viewUrl;
       }
     }
+    data.result.disabled = false;
     props.shipInfos[currentIndex.value] = data.result;
   }
 }
@@ -257,8 +321,14 @@ function deleteShip(item) {
   console.log(item);
 }
 function addShip(item) {
-  props.shipInfos.push(initShipInfo);
-
+  if (
+    props.shipInfos.length &&
+    props.shipInfos[props.shipInfos.length - 1].code
+  ) {
+    props.shipInfos.push(initShipInfo);
+  } else {
+    props.shipInfos[props.shipInfos.length - 1] = initShipInfo;
+  }
   currentIndex.value = props.shipInfos.length - 1;
 }
 
@@ -268,6 +338,7 @@ async function submit() {
     ...props.shipInfos[currentIndex.value],
     shipOwnerId: props.shipOwnerId,
   });
+  router.replace("/shipOwnerManage/shipOwnerList");
 }
 
 defineExpose({

src/views/shipManage/shipDetail.vue

@@ -8,7 +8,7 @@
       返回船舶列表
     </div>
   </div>
-  <ShipInfo :data="shipDetail"></ShipInfo>
+  <ShipInfo :shipInfos="shipInfos"></ShipInfo>
 </template>
 <script setup>
 import { ref, h, reactive, toRefs, onMounted } from "vue";
@@ -20,9 +20,18 @@ import api from "../../apis/fetch";
 import { useRoute } from "vue-router";
 import _ from "lodash";
 const route = useRoute();
-const shipDetail = ref({});
+let shipInfos = ref([{}]);
 async function getShipDetail(shipCode) {
   let { data } = await api.getShipDetail({ shipCode });
+  for (const i of data.result.shipCerts) {
+    i.date = [i.startValidTime, i.endValidTime];
+    for (let j of i.certs) {
+      j.url = j.viewUrl;
+    }
+  }
+  data.result.disabled = true;
+
+  shipInfos.value = [data.result];
   console.log(data);
 }
 onMounted(() => {

src/views/shipManage/shipList.vue

@@ -75,7 +75,7 @@
           </template>
         </el-table-column>
       </el-table>
-      <div style="width: 100%; text-align: right; margin-top: 43px">
+      <div class="df aic jcfe mt40 mr20">
         <el-pagination
           background
           layout="prev, pager, next"

src/views/shipOwnerManage/shipOwnerDetail.vue

@@ -65,8 +65,21 @@
         ></Uploader>
       </div>
     </div>
-    <div class="df aic jcfe" v-if="!shipOwnerDetail.id">
-      <el-button type="primary" @click="addShipOwner()">确定</el-button>
+    <div class="df aic jcfe">
+      <el-button
+        v-if="!shipOwnerDetail.id"
+        type="primary"
+        @click="addShipOwner()"
+      >
+        确定
+      </el-button>
+      <el-button
+        v-if="shipOwnerDetail.shipInfo.length == 0"
+        type="primary"
+        @click="addShip()"
+      >
+        新增船舶
+      </el-button>
     </div>
   </div>
   <div v-if="shipOwnerDetail.shipInfo.length != 0">
@@ -203,7 +216,9 @@ async function getShipOwnerDetail(shipOwnerId) {
   });
   shipOwnerDetail.value = data.result;
   for (let i of shipOwnerDetail.value.shipInfo) {
+    i.disabled = true;
     for (let j of i.shipCerts) {
+      j.date = [j.startValidTime, j.endValidTime];
       for (let k of j.certs) {
         k.url = k.viewUrl;
       }
@@ -211,6 +226,9 @@ async function getShipOwnerDetail(shipOwnerId) {
   }
   console.log(data);
 }
+function addShip() {
+  shipOwnerDetail.value.shipInfo = [{}];
+}
 
 onMounted(() => {
   if (route.query.shipOwnerId) {

src/views/shipOwnerManage/shipOwnerList.vue

@@ -98,7 +98,7 @@
           </template>
         </el-table-column>
       </el-table>
-      <div style="width: 100%; text-align: right; margin-top: 43px">
+      <div class="df aic jcfe mt40 mr20">
         <el-pagination
           background
           layout="prev, pager, next"

src/views/workStation/certsManage.vue

@@ -1,5 +1,143 @@
-<template>证书管理</template>
+<template>
+  <div class="full-container-p24">
+    <div class="mb30">
+      <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()"
+        >
+          下月
+        </el-button>
+      </el-button-group>
+      <el-button-group>
+        <el-button
+          :type="certType == 1 ? 'primary' : ''"
+          @click="(currentPage = 1), (certType = 1), getCertList()"
+        >
+          船舶国籍证书
+        </el-button>
+        <el-button
+          :type="certType == 2 ? 'primary' : ''"
+          @click="(currentPage = 1), (certType = 2), getCertList()"
+        >
+          内河船舶适航证书
+        </el-button>
+        <el-button
+          :type="certType == 3 ? 'primary' : ''"
+          @click="(currentPage = 1), (certType = 3), getCertList()"
+        >
+          船舶年审合格证书
+        </el-button>
+        <el-button
+          :type="certType == 4 ? 'primary' : ''"
+          @click="(currentPage = 1), (certType = 4), getCertList()"
+        >
+          内河船舶最低安全配员证书
+        </el-button>
+      </el-button-group>
+    </div>
+    <el-table :data="tableData" stripe style="width: 1000px">
+      <el-table-column align="center" type="index" label="序号" width="60" />
+      <el-table-column
+        align="center"
+        prop="shipname"
+        label="船名"
+        width="180"
+      />
+      <el-table-column
+        align="center"
+        prop="shipOwnerName"
+        label="船东姓名"
+        width="180"
+      />
+      <el-table-column
+        align="center"
+        prop="shipOwnerPhone"
+        label="手机号"
+        width="180"
+      />
+      <el-table-column
+        align="center"
+        prop="endValidTime"
+        label="有效期"
+        width="180"
+      />
+      <el-table-column align="center" label="详情" width="180">
+        <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>
+</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";
+const route = useRoute();
+let type = ref(1);
+let certType = ref(1);
+let tableData = ref([]);
+let total = ref(0);
+let currentPage = ref(1);
 
-<script setup></script>
+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></style>

src/views/workStation/insuranceManage.vue

@@ -1,5 +1,117 @@
-<template>保险管理</template>
+<template>
+  <div class="full-container-p24">
+    <div class="mb30">
+      <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()"
+        >
+          下月
+        </el-button>
+      </el-button-group>
+    </div>
+    <el-table :data="tableData" stripe style="width: 1000px">
+      <el-table-column align="center" type="index" label="序号" width="60" />
+      <el-table-column
+        align="center"
+        prop="shipname"
+        label="船名"
+        width="180"
+      />
+      <el-table-column
+        align="center"
+        prop="shipOwnerName"
+        label="船东姓名"
+        width="180"
+      />
+      <el-table-column
+        align="center"
+        prop="shipOwnerPhone"
+        label="手机号"
+        width="180"
+      />
+      <el-table-column
+        align="center"
+        prop="endValidTime"
+        label="有效期"
+        width="180"
+      />
+      <el-table-column align="center" label="详情" width="180">
+        <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>
+</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";
+const route = useRoute();
+let type = ref(1);
+let certType = ref(1);
+let tableData = ref([]);
+let total = ref(0);
+let currentPage = ref(1);
 
-<script setup></script>
+async function getCertList() {
+  let { data } = await api.getCertList({
+    type: type.value,
+    certType: 5,
+    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></style>