完成更新提示的功能

src/storage/storage.js

@@ -0,0 +1,12 @@
+export const storage = {
+    set(key, value) {
+        localStorage.setItem(key, JSON.stringify(value));
+    },
+    get(key) {
+        const value = localStorage.getItem(key);
+        return value ? JSON.parse(value) : null;
+    },
+    remove(key) {
+        localStorage.removeItem(key);
+    }
+}

src/views/product/index.vue

@@ -1,7 +1,9 @@
 <script setup>
-import {onBeforeMount, onMounted, reactive, ref, unref, computed} from 'vue';
+import {onBeforeMount, onMounted, onBeforeUnmount, reactive, ref, unref, computed} from 'vue';
 import {useStore, mapGetters, mapState} from "vuex";
 import {project_list, prd_list, prd_add, prd_get, prd_update, prd_delete, prd_history} from "@/apis/product.js";
+import {storage} from "@/storage/storage.js";
+import {onBeforeRouteLeave} from "vue-router";
 
 
 // 注册vuex
@@ -29,6 +31,8 @@ const total = ref(0)
 
 const history_dialog_id = ref(1)
 
+let local_storage_array = storage.get("prd_history")
+
 // 处理翻页
 const handleCurrentChange = (newPage) => {
   currentPage.value = newPage
@@ -91,6 +95,52 @@ const submitSearch = async () => {
   )
 }
 
+// 更新localstorage
+function update_local_storage(id, update_at, update_mode = true) {
+  if (local_storage_array !== null) {
+    let find_local_data = false
+    local_storage_array.forEach((item) => {
+      if (item["id"] === id) {
+        if (update_mode === true) {
+          item["update_at"] = update_at
+        }
+        find_local_data = true
+        return true
+      }
+    })
+    if (!find_local_data) {
+      local_storage_array.push({id, update_at})
+      return true
+    }
+    return false
+  } else {
+    local_storage_array = new Array({id, update_at})
+  }
+}
+
+const update_table_data = (id) => {
+  tableData.value.forEach((item) => {
+    if (item.id === id) {
+      item.have_update = false
+    }
+  })
+}
+
+const mark_read = (id, update_at) => {
+  update_local_storage(id, update_at)
+  update_table_data(id)
+  save_local_storage()
+}
+
+const save_local_storage = () => {
+  tableData.value.forEach((table_item) => {
+        update_local_storage(table_item["id"], table_item["update_at"], false)
+      }
+  )
+  storage.remove('prd_history')
+  storage.set('prd_history', local_storage_array)
+}
+
 // 通过异步请求获取影院列表数据
 async function get_project_data() {
   projectList.value = []
@@ -108,6 +158,7 @@ async function get_project_data() {
 
 // 通过异步请求获取影院列表数据
 async function get_table_data(page_num = currentPage.value, page_size = pageSize.value, project_val = fromData.project) {
+  // 获取数据
   tableData.value = []
   console.log('get_table_data')
   console.log(project_val)
@@ -125,6 +176,26 @@ async function get_table_data(page_num = currentPage.value, page_size = pageSize
         console.log(err)
       }
   )
+  if (local_storage_array !== null) {
+    //处理新收到标记
+    tableData.value.forEach((table_item, table_index) => {
+      let find_local_data = false
+      table_item['have_update'] = false
+      local_storage_array.forEach((local_item, local_index) => {
+        if (table_item['id'] === local_item['id']) {
+          find_local_data = true
+          const table_datetime = new Date(table_item['update_at'])
+          const local_datetime = new Date(local_item['update_at'])
+          if (table_datetime > local_datetime) {
+            table_item['have_update'] = true
+          }
+        }
+      })
+      if (!find_local_data) {
+        table_item['have_update'] = true
+      }
+    })
+  }
 }
 
 // 定义生命周期，在加载时获取一次表格数据
@@ -135,6 +206,18 @@ onMounted(
     }
 )
 
+onBeforeUnmount(
+    () => {
+      save_local_storage()
+    }
+)
+onBeforeRouteLeave(
+    () => {
+      save_local_storage()
+    }
+)
+
+
 // endregion
 
 </script>
@@ -162,6 +245,7 @@ onMounted(
     <el-table-column prop="prd_doc_link" label="产品原型链接" min-width="300" show-overflow-tooltip>
       <template v-slot="scope">
         <a target="_blank" style="color:#007bff;" v-if="scope.row.prd_doc_link!=null"
+           @click="mark_read(scope.row.id, scope.row.update_at)"
            v-bind:href="scope.row.prd_doc_link">
           {{
             scope.row.prd_doc_link.length > 30 ? scope.row.prd_doc_link.slice(0, 30) + '...' : scope.row.prd_doc_link
@@ -170,7 +254,7 @@ onMounted(
         <!--        <span v-else> {{ scope.row.prd_doc_link }}</span>-->
       </template>
     </el-table-column>
-    <el-table-column prop="prd_comment" label="版本描述" min-width="300">
+    <el-table-column prop="prd_comment" label="版本描述" min-width="260">
       <template #default="{ row }">
         <el-tooltip
             class="item"
@@ -183,7 +267,12 @@ onMounted(
         </el-tooltip>
       </template>
     </el-table-column>
-    <el-table-column prop="update_at" label="最后更新时间" min-width="180"></el-table-column>
+    <el-table-column prop="update_at" label="最后更新时间" min-width="210">
+      <template v-slot="scope">
+        <span>{{ scope.row.update_at }}</span><sup v-if="scope.row.have_update"
+                                                   style="color: red; margin-left: 3px">有更新</sup>
+      </template>
+    </el-table-column>
     <el-table-column prop="id" label="历史文档" min-width="120">
       <template v-slot="scope">
         <el-button type="primary" size="small" @click="changeDialogStatus(scope.row.id)"