修改消息

src/store/api/system/message.js

@@ -30,7 +30,11 @@ export const MessageStore = defineStore('message', () => {
     const res = await axios.$delete(`${url}/${payload}`)
     return res
   }
-  const checkNotRead = async (payload) => {
+  const read = async (payload) => {
+    const res = await axios.$get(`${url}/read/${payload}`)
+    return res
+  }
+  const checkNotRead = async () => {
     const res = await axios.$get(`${url}/checkNotRead`)
     return res
   }
@@ -39,6 +43,7 @@ export const MessageStore = defineStore('message', () => {
     fetch,
     create,
     update,
+    read,
     del,
     checkNotRead
   }

src/views/center/notice.vue

@@ -3,6 +3,9 @@
     <el-row>
       <el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
         <el-col :span="24" class="one">
+          <div class="one_left" @click="Allread">全部已读</div>
+        </el-col>
+        <el-col :span="24" class="two">
           <el-table :data="list" style="width: 100%" size="large" :header-cell-style="{ backgroundColor: '#edf3ff' }">
             <template #empty>
               <el-empty description="暂无数据" />
@@ -19,9 +22,14 @@
               </template>
             </el-table-column>
             <el-table-column prop="created_time" align="center" label="时间" width="200" />
+            <el-table-column align="center" label="操作" width="180">
+              <template #default="{ row }">
+                <el-link v-if="getDict(row, 'is_read') == '未读'" :underline="false" type="warning" size="mini" @click="toRead(row)" style="margin-right: 10px">已读</el-link>
+              </template>
+            </el-table-column>
           </el-table>
         </el-col>
-        <el-col :span="24" class="two">
+        <el-col :span="24" class="thr">
           <el-pagination background layout="prev, pager, next" :total="total" :page-size="limit" v-model:current-page="currentPage" @current-change="changePage" @size-change="sizeChange" />
         </el-col>
       </el-col>
@@ -32,7 +40,7 @@
 <script setup>
 import { MessageStore } from '@/store/api/system/message'
 import { DictDataStore } from '@/store/api/system/dictData'
-import { get } from 'lodash-es'
+import { cloneDeep, get } from 'lodash-es'
 import { UserStore } from '@/store/user'
 const $checkRes = inject('$checkRes')
 const userStore = UserStore()
@@ -41,8 +49,6 @@ const dictDataStore = DictDataStore()
 const user = computed(() => userStore.user)
 // 加载中
 const loading = ref(false)
-// 路由
-const router = useRouter()
 // 列表
 const list = ref([])
 let skip = 0
@@ -94,6 +100,29 @@ const getDict = (data, type) => {
     if (d) return get(d, 'label')
   }
 }
+// 已读未读
+const toRead = (item) => {
+  ElMessageBox.confirm(`您确认已读该数据?`, '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' })
+    .then(async () => {
+      const data = cloneDeep(item)
+      const userid = get(user, 'value.id')
+      const to = get(data, 'to', [])
+      for (const val of to) if (val.user == userid) val.is_read = '1'
+      let res = await store.update({ id: item.id, to })
+      if ($checkRes(res, true)) search({ skip, limit })
+    })
+    .catch(() => {})
+}
+// 全部已读
+const Allread = () => {
+  ElMessageBox.confirm(`您确认全部已读所有数据?`, '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' })
+    .then(async () => {
+      const userid = get(user, 'value.id')
+      let res = await store.read(userid)
+      if ($checkRes(res, true)) search({ skip, limit })
+    })
+    .catch(() => {})
+}
 // 分页
 const changePage = (page = currentPage.value) => {
   search({ skip: (page - 1) * limit, limit: limit })
@@ -106,7 +135,24 @@ const sizeChange = (limits) => {
 </script>
 <style scoped lang="scss">
 .main {
-  .two {
+  .one {
+    height: 50px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin: 0 0 10px 0;
+    .one_left {
+      background: #1875df;
+      padding: 0 10px;
+      height: 30px;
+      color: #fff;
+      line-height: 30px;
+      text-align: center;
+      font-size: 16px;
+      cursor: default;
+    }
+  }
+  .thr {
     display: flex;
     justify-content: center;
     margin: 20px 0 0 0;

src/views/thirteen/index.vue

@@ -29,7 +29,6 @@
               </el-col>
             </el-row>
           </el-col>
-
           <el-row>
             <el-col :span="24" class="page">
               <el-pagination background layout="total, prev, pager, next" :page-sizes="[10, 20, 50, 100, 200]" :total="total" :page-size="limit" v-model:current-page="currentPage" @current-change="changePage" @size-change="sizeChange"> </el-pagination>