提交客户代码

fhKeeper/formulahousekeeper/customerBuler-crm/src/pages/header/header.vue

@@ -48,9 +48,11 @@
     </div>
   </div>
   <div class="flex flex-row justify-start items-center text-white header-right">
-    <el-icon :size="26" class="ml-4 cursor-pointer">
-      <Bell />
-    </el-icon>
+    <el-badge :value="12" :max="99" class="ml-4 cursor-pointer h-[26px]">
+      <el-icon :size="26" @click="newsDrawer = true">
+        <Bell />
+      </el-icon>
+    </el-badge>
     <div>
       <img class="w- h-8 rounded-full ml-4 cursor-pointer" :src="defaultCover" alt="" @click="drawerVis = true">
     </div>
@@ -77,13 +79,38 @@
       </div>
     </div>
   </el-drawer>
+
+  <!-- 消息 -->
+  <el-drawer v-model="newsDrawer" modal-class="drawerVisClass" :with-header="false" size="45%">
+    <div class="w-full h-full">
+      <el-table :data="newsDrawerTableData" style="width: 100%" v-loading="newsDrawerLoading">
+        <el-table-column prop="msg" label="消息内容">
+          <template #default="scope">
+            <el-link type="primary" :underline="false" @click="toDetail(scope.row)">{{ scope.row.msg }}</el-link>
+          </template>
+        </el-table-column>
+        <el-table-column prop="checked" label="状态" width="100">
+          <template #default="scope">
+            <el-tag :type="scope.row.checked ? 'success' : 'danger'">
+              {{ scope.row.checked ? '已读' : '未读' }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="time" label="时间" width="140" />
+      </el-table>
+    </div>
+  </el-drawer>
 </template>
+
+<!-- /information/list -->
   
 <script lang="ts" setup>
 import { onMounted, ref, watchEffect, watch } from 'vue';
 import { RouteRecordRaw, useRouter, useRoute } from 'vue-router';
 import { useStore } from "../../store/index"
+import { post, uploadFile } from "@/utils/request";
 import defaultCover from "../../assets/defaultCover.png";
+import { formatDate } from '@/utils/times'
 import loginLogin from '../../assets/login/login_logo.png'
 const { routers, clearStore, userInfo } = useStore()
 const router = useRouter();
@@ -96,7 +123,10 @@ const visibleItems = ref<number[]>([]);
 const parentDiv = ref<HTMLElement | null>(null);
 const itemLastIndex = ref(0)
 const moreRoutes = ref<any[]>([])
+const newsDrawerTableData = ref<any[]>([])
 const drawerVis = ref(false)
+const newsDrawer = ref(false)
+const newsDrawerLoading = ref(false)
 
 const updateVisibleItems = () => {
   const parentWidth = (parentDiv.value?.offsetWidth && parentDiv.value?.offsetWidth - 150) || 10;
@@ -184,7 +214,43 @@ const logout = () => {
   clearStore();
   router.push({ path: '/login' });
 };
+
+const getNewsDrawerTableData = () => {
+  newsDrawerLoading.value = true
+  post(`/information/list`, {}).then(res => {
+    const data = res.data.map((item: any) => {
+      return {
+        ...item,
+        time: formatDate(new Date(item.time))
+      }
+    })
+    newsDrawerTableData.value = data
+  }).catch(err => {
+    newsDrawerTableData.value = []
+    console.log(err)
+  }).finally(() => {
+    newsDrawerLoading.value = false
+  })
+}
+
+const toDetail = (row: any) => {
+  console.log(row, '<=== 点击数据')
+  const { id, type, path } = row
+  post(`/information/check`, { id }).then(res => {
+    console.log(res, '<=== 成功')
+    getNewsDrawerTableData()
+    if(path) {
+      router.push({ path });
+    }
+  }).catch(err => {
+    console.log(err, '<==== 失败')
+  }).finally(() => {
+    newsDrawer.value = false
+  })
+}
+
 onMounted(() => {
+  getNewsDrawerTableData()
   routerList.value = routers;
   activeRouter.value = routerList.value.find((item) => item.path === router.currentRoute.value.path);