借阅表格样式添加警告色

Author: caolib

src/components/SideView.vue

@@ -63,7 +63,7 @@ const logout = () => {
   // 退出后清除token、reader和admin信息
   tokenStore.setToken(null);
   readerStore.clearReader();
-  
+  adminStore.clearAdmin();
   router.push("/login");
 };
 
@@ -75,3 +75,5 @@ const route = () => {
   }
 };
 </script>
+
+

src/css/main.css

@@ -25,7 +25,7 @@ body::after {
     opacity: 0.75;
     border-radius: 10px; /* 圆角半径 */
     overflow: hidden; /* 隐藏超出边界的内容 */
-    box-shadow:  10px 10px 10px rgba(0, 0, 0, 0.5);
+    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
 }
 
 

src/views/BorrowView.vue

@@ -5,16 +5,16 @@ import {
   getBorrowByReaderIdService,
   returnBookService
 } from "@/methods/borrow.js";
-import {ref, onMounted} from "vue";
+import {onMounted, ref} from "vue";
 import HeaderView from "@/components/HeaderView.vue";
 import SideView from "@/components/SideView.vue";
 import {ElMessage} from "element-plus";
 import {Delete} from "@element-plus/icons-vue";
 
-
 const tableData = ref([]);
 
 onMounted(() => {
+  // console.log(new Date().toISOString().split('T')[0]);
   getBorrowByReaderId();
 })
 
@@ -25,21 +25,27 @@ const returnBook = async (id, isbn) => {
   await getBorrowByReaderId();
 }
 
-// 表格行样式
+// 表格行背景颜色样式类
 const tableRowClassName = ({row}) => {
-  if (row.status === false) {
+  const current = new Date().toISOString().split('T')[0]
+  if (row.status) {
+    if (row.returnDate <= row.dueDate) {
+      return 'success-row';
+    }
+    return 'danger-row'
+  } else {
+    if (current > row.dueDate) {
+      return 'danger-row'
+    }
     return 'warning-row';
   }
-  return 'success-row';
 }
 
-//获取当前读者的借阅信息
+//获取当前读者的借阅信息，并根据状态筛选
 const getBorrowByReaderId = async function () {
   const result = await getBorrowByReaderIdService();
   tableData.value = result.data;
-  if (filterStatus.value === 'all') {
-    tableData.value = result.data;
-  } else if (filterStatus.value === 'returned') {
+  if (filterStatus.value === 'returned') {
     tableData.value = result.data.filter(item => item.status === true);
   } else if (filterStatus.value === 'notReturned') {
     tableData.value = result.data.filter(item => item.status === false);
@@ -48,7 +54,7 @@ const getBorrowByReaderId = async function () {
 
 // 刷新状态
 const flushStatus = async function (status) {
-  console.log(status);
+  // console.log(status);
   filterStatus.value = status;
   await getBorrowByReaderId();
 }
@@ -151,10 +157,14 @@ const deleteBorrowBatch = async () => {
   min-width: 150px;
 }
 
-.el-table .warning-row {
+.el-table .danger-row {
   --el-table-tr-bg-color: rgba(255, 107, 107, 0.3);
 }
 
+.el-table .warning-row {
+  --el-table-tr-bg-color: rgba(255, 251, 0, 0.3);
+}
+
 .el-table .success-row {
   --el-table-tr-bg-color: rgba(122, 255, 107, 0.3);
 }

src/views/LoginView.vue

@@ -43,8 +43,8 @@ const login = async function () {
   readerStore.setReader(returnReader);
   tokenStore.setToken(returnReader.token);
   adminStore.setIsAdmin(false);
-  // console.log("tokenStore:" + tokenStore.token);
-  await router.push("/book");
+  console.log("tokenStore:" + tokenStore.token);
+  router.push("/book");
   ElNotification.success({
     title: "登录成功",
     message: "Hello," + returnReader.nickname,

src/views/UserView.vue

@@ -24,14 +24,14 @@ if (!isAdmin) {
 const saveReader = async () => {
   await updateReaderService(reader);
   ElMessage.success('已保存');
-  await router.push('/book');
+ router.push('/book');
 }
 
 const updateAdmin = async () => {
   console.log(admin);
   await updateAdminService(admin);
   ElMessage.success('已保存');
-  await router.push('/book');
+ router.push('/book');
 }
 
 </script>