src/components/Robot/index.vue

@@ -21,6 +21,7 @@ defineProps({
   position: fixed;
   bottom: 80px;
   right: 20px;
+  z-index: 1000;
   img {
     width: 80px;
     height: auto;

src/views/message/content/List.vue

@@ -1,32 +1,32 @@
 <script lang="ts" setup>
-import { reactive, ref, toRefs } from 'vue'
-import { format } from 'date-fns'
-import { useRoute, useRouter } from 'vue-router'
-import { getMessageList, readAllMsg, readMsg } from '@/api/message/message'
-import iconApproveActive from '@/assets/images/message/approve-active.png'
-import iconApprove from '@/assets/images/message/approve.png'
-import iconSystemActive from '@/assets/images/message/system-active.png'
-import iconSystem from '@/assets/images/message/system.png'
-import iconArrowActive from '@/assets/images/message/arrow-active.png'
-import iconArrow from '@/assets/images/message/arrow.png'
-import iconClear from '@/assets/images/message/clear.png'
-import iconArrowDown from '@/assets/images/message/arrow-down.png'
-
-const emit = defineEmits(['goDetail'])
-const router = useRouter()
-const route = useRoute()
-const hasNextPage = ref(false)
+import { computed, reactive, ref, toRefs } from "vue";
+import { format } from "date-fns";
+import { useRoute, useRouter } from "vue-router";
+import { getMessageList, readAllMsg, readMsg } from "@/api/message/message";
+import iconApproveActive from "@/assets/images/message/approve-active.png";
+import iconApprove from "@/assets/images/message/approve.png";
+import iconSystemActive from "@/assets/images/message/system-active.png";
+import iconSystem from "@/assets/images/message/system.png";
+import iconArrowActive from "@/assets/images/message/arrow-active.png";
+import iconArrow from "@/assets/images/message/arrow.png";
+import iconClear from "@/assets/images/message/clear.png";
+import iconArrowDown from "@/assets/images/message/arrow-down.png";
+
+const emit = defineEmits(["goDetail"]);
+const router = useRouter();
+const route = useRoute();
+const hasNextPage = ref(false);
 
 const state = reactive({
   tabList: [
     {
-      name: '审批通知',
+      name: "审批通知",
       icon: iconApprove,
       activeIcon: iconApproveActive,
       value: 1,
     },
     {
-      name: '系统消息',
+      name: "系统消息",
       icon: iconSystem,
       activeIcon: iconSystemActive,
       value: 2,
@@ -34,105 +34,107 @@ const state = reactive({
   ],
   list: [] as any,
   pageNo: 1,
-})
+});
 
-const { list, tabList } = toRefs(state)
+const { list, tabList } = toRefs(state);
 
-const tab = ref(1)
+const tab = ref(1);
 
-async function getList(type = '') {
+const getStateText = computed(() => {
+  return (value) => (value == 1 ? "待审批" : value == 2 ? "通过" : "不通过");
+});
+
+async function getList(type = "") {
   let res = await getMessageList({
     pageNo: state.pageNo,
-    pageSize: '7',
+    pageSize: "7",
     msgCategory: tab.value,
-  })
-  if (type == 'more') {
+  });
+  console.log("getMessageList", res.data);
+  if (type == "more") {
     while (res.data.endRow > 0) {
-      if (res.code == 'OK') {
+      if (res.code == "OK") {
         if (tab.value === 1) {
           res.data.list.forEach((item) => {
-            item.tag = JSON.parse(item.busJson)
-          })
+            item.tag = JSON.parse(item.busJson);
+          });
         }
-        state.list = state.list.concat(res.data.list)
-        state.pageNo++
+        state.list = state.list.concat(res.data.list);
+        state.pageNo++;
         res = await getMessageList({
           pageNo: state.pageNo,
-          pageSize: '7',
+          pageSize: "7",
           msgCategory: tab.value,
-        })
+        });
       }
     }
-    hasNextPage.value = res.data.hasNextPage
-  }
-  else {
-    if (res.code === 'OK') {
-      hasNextPage.value = res.data.hasNextPage
+    hasNextPage.value = res.data.hasNextPage;
+  } else {
+    if (res.code === "OK") {
+      hasNextPage.value = res.data.hasNextPage;
       if (tab.value === 1) {
         res.data.list.forEach((item) => {
-          item.tag = JSON.parse(item.busJson)
-        })
+          item.tag = JSON.parse(item.busJson);
+        });
       }
-      state.list = state.list.concat(res.data.list)
+      state.list = state.list.concat(res.data.list);
     }
   }
 }
 
-getList()
+getList();
 
 async function clearMsg() {
-  const res = await readAllMsg({ msgCategory: tab.value })
-  if (res.code === 'OK') {
-    state.list = []
-    state.pageNo = 1
-    getList()
+  const res = await readAllMsg({ msgCategory: tab.value });
+  if (res.code === "OK") {
+    state.list = [];
+    state.pageNo = 1;
+    getList();
   }
 }
 
 function switchTab(type: number) {
-  tab.value = type
-  state.list = []
-  state.pageNo = 1
-  getList()
+  tab.value = type;
+  state.list = [];
+  state.pageNo = 1;
+  getList();
 }
 
 function goFinalDetail(row) {
-  console.log(row)
+  console.log(row);
   router.push({
-    name: 'final-detail',
+    name: "final-detail",
     query: { id: row.tag.fromId, packageid: row.packageid },
-  })
+  });
 }
 
 function goDetail(item) {
   if (tab.value === 1) {
-    clearMsgOne(item.id)
-    goFinalDetail(item)
+    clearMsgOne(item.id);
+    goFinalDetail(item);
   }
   // emit('goDetail', item.id)
   else {
-    router.push({ name: 'message-detail', query: { id: item.id } })
+    router.push({ name: "message-detail", query: { id: item.id } });
   }
 }
 
 async function clearMsgOne(id) {
-  const res = await readMsg({ msgid: id })
+  const res = await readMsg({ msgid: id });
 }
 
 function getMore() {
-  state.pageNo += 1
-  getList('more')
+  state.pageNo += 1;
+  getList("more");
 }
 </script>
 
 <template>
   <div class="wrapper-message">
     <div class="flex justify-between header">
-      <div class="header-title">
-        消息通知
-      </div>
+      <div class="header-title">消息通知</div>
       <div class="clear" @click="clearMsg">
-        <img class="icon-clear" :src="iconClear" alt="">
+        <img class="icon-clear" :src="iconClear" alt="" />
         清除未读
       </div>
     </div>
@@ -150,7 +152,7 @@ function getMore() {
               class="icon"
               :src="tab === item.value ? item.activeIcon : item.icon"
               alt=""
-            >
+            />
             <div :class="{ 'text-active': tab === item.value }" class="text">
               {{ item.name }}
             </div>
@@ -159,7 +161,7 @@ function getMore() {
             class="icon-arrow"
             :src="tab === item.value ? iconArrowActive : iconArrow"
             alt=""
-          >
+          />
           <div v-if="tab === item.value" class="line" />
         </div>
       </div>
@@ -167,7 +169,7 @@ function getMore() {
         <div
           v-for="(item, index) in list"
           :key="item.id"
-          :class="{ 'pt0': index === 0, 'item-disabled': item.readFlag }"
+          :class="{ pt0: index === 0, 'item-disabled': item.readFlag }"
           class="item"
           @click="goDetail(item)"
         >
@@ -188,11 +190,9 @@ function getMore() {
               {{ item.titile }}
             </div>
             <div v-if="tab === 1" class="status">
-              <div class="tag tag-blue">
-                审批节点：{{ item.tag.nodeName }}
-              </div>
+              <div class="tag tag-blue">审批节点：{{ item.tag.nodeName }}</div>
               <div :class="item.tag.states === 5 ? 'tag-red' : 'tag-green'" class="tag">
-                审批状态：{{ item.tag.states }}
+                审批状态：{{ getStateText(item.tag.states) }}
               </div>
             </div>
             <div v-if="tab === 1" class="subtitle">
@@ -204,13 +204,11 @@ function getMore() {
               <span class="time">{{ format(item.sendTime, "yyyy-MM-dd HH:mm:ss") }}</span>
             </div>
           </div>
-          <div class="look">
-            查看
-          </div>
+          <div class="look">查看</div>
         </div>
 
         <div v-if="hasNextPage" class="more" @click="getMore">
-          查看更多<img class="icon-more" :src="iconArrowDown" alt="">
+          查看更多<img class="icon-more" :src="iconArrowDown" alt="" />
         </div>
       </div>
     </div>