新增 通知

src/apis/fetch.js

@@ -475,4 +475,9 @@ export default {
   getUFile(data) {
     return $http("/ufile/getLastest", data);
   },
+
+  // 获取通知
+  getNotice(data) {
+    return $http("/notice/pc", data);
+  },
 };

src/components/Header.vue

@@ -14,6 +14,70 @@
     <div class="right">
       <img class="user-icon" src="../assets/user.png" alt="" />
       <div class="user">{{ contactName }}</div>
+      <el-badge
+        :hidden="noticeNum == 0"
+        class="df mr20 pointer"
+        :value="noticeNum"
+        @click="noticeVisable = true"
+      >
+        <img class="ling-icon" src="../assets/ling.png" alt="" />
+      </el-badge>
+      <el-dialog v-model="noticeVisable" title="通知" width="500px">
+        <el-button-group>
+          <el-button
+            @click="
+              currentType = 0;
+              currentPage = 1;
+            "
+            :type="currentType == 0 ? 'primary' : ''"
+            size="small"
+          >
+            保险通知
+          </el-button>
+          <el-button
+            @click="
+              currentType = 1;
+              currentPage = 1;
+            "
+            :type="currentType == 1 ? 'primary' : ''"
+            size="small"
+          >
+            验仓通知
+          </el-button>
+        </el-button-group>
+        <el-table
+          :data="noticeTableData[currentType]?.data[currentPage - 1]"
+          stripe
+          style="width: 450px"
+          size="small"
+          :row-style="{ height: '40px' }"
+          :cell-style="{ padding: '0' }"
+        >
+          <el-table-column prop="voyageName" label="航次名称" width="320" />
+          <el-table-column prop="name" label="操作">
+            <template v-slot="scope">
+              <el-button
+                @click="goToDetail(scope.row.id)"
+                type="text"
+                size="small"
+              >
+                查看详情
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div class="df jcfe mt20">
+          <el-pagination
+            small
+            background
+            layout="prev, pager, next"
+            :total="noticeTableData[currentType]?.total"
+            class="mt-4"
+            :current-page="currentPage"
+            @current-change="noticePageChange"
+          />
+        </div>
+      </el-dialog>
       <el-popover placement="bottom" trigger="hover" :width="280">
         <div
           style="
@@ -55,50 +119,84 @@
     </div>
   </div>
 </template>
-<script>
+<script setup>
 import store from "../store";
 import router from "../router";
-import { onMounted, ref } from "vue";
+import { onMounted, ref, watch } from "vue";
 import { AnonymousLogin, tcb } from "../apis/cloudLogin";
+import api from "../apis/fetch";
 const db = tcb.database();
 const v = db.collection("huihenduo_versions");
 const __ = db.command;
+let contactName = localStorage.contactName;
+function quit() {
+  localStorage.clear();
+  store.commit("changeLogin", false);
+  router.push({ path: "/login" });
+}
+let timelineData = ref([]);
+onMounted(() => {
+  cloudLogin();
+  getNotice();
+});
+async function getAbledVersions() {
+  let res = await v
+    .aggregate()
+    .match({ deleted: __.neq(true) })
+    .sort({
+      createTime: -1,
+    })
+    .limit(10)
+    .end();
+  timelineData.value = res.data;
+}
+
+async function cloudLogin() {
+  await AnonymousLogin();
+  getAbledVersions();
+}
+
+async function getNotice() {
+  let res = await api.getNotice({});
+  noticeTableData.value = res.data.result;
+  noticeNum.value = res.data.total;
+  noticeTableData.value[0].data = chunk(noticeTableData.value[0].data);
+  noticeTableData.value[1].data = chunk(noticeTableData.value[1].data);
+}
+
+let noticeNum = ref(0);
+let noticeVisable = ref(false);
+let noticeTableData = ref([]);
+let currentType = ref(0);
+let currentPage = ref(1);
 
-export default {
-  setup() {
-    let contactName = localStorage.contactName;
-    function quit() {
-      localStorage.clear();
-      store.commit("changeLogin", false);
-      router.push({ path: "/login" });
-    }
-    let timelineData = ref([]);
-    onMounted(() => {
-      cloudLogin();
-    });
-    async function getAbledVersions() {
-      let res = await v
-        .aggregate()
-        .match({ deleted: __.neq(true) })
-        .sort({
-          createTime: -1,
-        })
-        .limit(10)
-        .end();
-      timelineData.value = res.data;
-    }
-
-    async function cloudLogin() {
-      await AnonymousLogin();
-      getAbledVersions();
-    }
-    return {
-      quit,
-      contactName,
-      timelineData,
-    };
-  },
-};
+function chunk(array, size = 10) {
+  let length = array == null ? 0 : array.length;
+  if (!length || size < 1) {
+    return [];
+  }
+  let index = 0,
+    resIndex = 0,
+    result = Array(Math.ceil(length / size));
+  while (index < length) {
+    result[resIndex++] = array.slice(index, (index += size));
+  }
+  return result;
+}
+
+function noticePageChange(e) {
+  currentPage.value = e;
+}
+
+function goToDetail(id) {
+  noticeVisable.value = false;
+  router.push({
+    path: "/voyage/voyageDetail",
+    query: {
+      id,
+    },
+  });
+}
 </script>
 <style scoped>
 .header {
@@ -170,4 +268,15 @@ export default {
 .quit {
   margin-left: 26px;
 }
+
+.ling-icon {
+  width: 16px;
+  height: 16px;
+  margin-right: 2px;
+  object-fit: contain;
+}
+
+:deep().el-dialog__body {
+  padding-top: 15px !important;
+}
 </style>

src/views/voyage/voyageDetail.vue

@@ -1980,7 +1980,7 @@
   </div>
 </template>
 <script setup>
-import { onMounted, reactive, ref, toRefs } from "vue";
+import { onMounted, reactive, ref, toRefs, watch } from "vue";
 import api from "../../apis/fetch";
 import { useRoute } from "vue-router";
 import _ from "lodash";
@@ -3344,6 +3344,13 @@ function loadFinish(e) {
     voyage.value.voyageDetails[0].setSailTime = e;
 }
 
+watch(
+  () => route.query.id,
+  (val) => {
+    getVoyageDetail(true);
+  }
+);
+
 onMounted(() => {
   getVoyageDetail(true);
 });