layout 消息

package.json

@@ -16,7 +16,7 @@
         "axios": "^1.5.1",
         "crypto-js": "^4.2.0",
         "echarts": "5.4.1",
-        "element-plus": "^2.6.0",
+        "element-plus": "^2.8.0",
         "fuse.js": "^6.6.2",
         "js-cookie": "^3.0.5",
         "mitt": "^3.0.1",
@@ -31,7 +31,6 @@
     "devDependencies": {
         "@iconify-json/ep": "^1.1.12",
         "@iconify-json/fluent-emoji-high-contrast": "^1.2.1",
-        "@iconify-json/la": "^1.2.0",
         "@iconify-json/mdi": "^1.1.54",
         "@iconify-json/tabler": "^1.2.5",
         "@iconify-json/uis": "^1.2.1",
@@ -41,7 +40,7 @@
         "eslint": "8.35.0",
         "eslint-plugin-vue": "9.9.0",
         "prettier": "^3.0.3",
-        "sass": "^1.69.3",
+        "sass": "^1.77.6",
         "unplugin-auto-import": "^0.16.6",
         "unplugin-icons": "^0.17.0",
         "unplugin-vue-components": "^0.25.2",

src/api/policy/message.js

@@ -23,6 +23,14 @@ export default {
         })
     },
 
+    edit: function (data) {
+        return request({
+            url: "/qdport-zcgx/message/update",
+            method: "post",
+            data
+        })
+    },
+
     del: function (data) {
         return request({
             headers: {
@@ -32,5 +40,5 @@ export default {
             method: "post",
             data
         })
-    },
+    }
 }

src/api/policy/todo.js

@@ -1,6 +1,4 @@
 import request from "@/utils/request";
-import { useUserStore } from "@/store/user";
-const { userInfo } = useUserStore(); // store 用户
 
 export default {
     get: function (params) {
@@ -15,10 +13,7 @@ export default {
         return request({
             url: "/qdport-zcgx/message/mesPage",
             method: "get",
-            params: {
-                ...params,
-                createId: userInfo.id
-            }
+            params
         })
     }
 }

src/assets/style/index.scss

@@ -1,5 +1,4 @@
-@import "./theme";
-@import "./reset";
-@import "./font";
-@import "./elementPlusCustom";
-@import "./common";
+@use "./reset";
+@use "./font";
+@use "./elementPlusCustom";
+@use "./common";

src/assets/style/theme.scss

@@ -1,15 +0,0 @@
-/** element内置黑暗主题 */
-@use 'element-plus/theme-chalk/src/dark/css-vars.scss' as *;
-
-/** 自定义黑暗主题 */
-html.dark {
-
-    .tjm_navbar_container,
-    .tjm_tabsbar_container {
-        background: black !important;
-    }
-
-    .content_container {
-        background: black !important;
-    }
-}

src/components/ReplyCard/index.vue

@@ -209,8 +209,8 @@ export default {
   }
 }
 
-.header-has-border.reply-card > :deep {
-  .el-card__header {
+.header-has-border.reply-card > {
+  :deep(.el-card__header) {
     position: relative;
 
     &::after {
@@ -223,14 +223,12 @@ export default {
     }
   }
 
-  .el-card__body {
+  :deep(.el-card__body) {
     padding: calc(var(--el-card-padding) / 2) var(--el-card-padding);
   }
 }
 
-.card-has-padding.reply-card > :deep {
-  .el-card__header {
-    padding: var(--el-card-padding);
-  }
+.card-has-padding.reply-card > :deep(.el-card__header) {
+  padding: var(--el-card-padding);
 }
 </style>

src/layout/components/NavBar/components/Breadcrumb.vue

@@ -2,10 +2,7 @@
     <el-breadcrumb class="tjm-breadcrumb" separator="/">
         <transition-group name="breadcrumb">
             <el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
-                <span
-                    v-if="item.redirect === 'noRedirect' || index == levelList.length - 1"
-                    class="no-redirect"
-                >{{ item.meta.title }}</span>
+                <span v-if="item.redirect === 'noRedirect' || index == levelList.length - 1" class="no-redirect">{{ item.meta.title }}</span>
                 <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
             </el-breadcrumb-item>
         </transition-group>

src/layout/components/NavBar/components/FullScreenBtn.vue

@@ -1,20 +1,13 @@
 <template>
-    <el-icon class="tjm_tools_icon" size="24" @click="toggle" :color="layoutStyle=='vertical'?'':'#fff'">
-        <tjm-icon-ep-FullScreen />
+    <el-icon class="tjm_tools_icon" size="24" :color="layoutStyle == 'horizontal' && '#fff'" @click="toggle">
+        <tjm-icon-ep-full-screen />
     </el-icon>
 </template>
 
 <script setup>
-import { useFullscreen } from '@vueuse/core'
-import { useSettingStore } from '@/store/settings.js'
-const settingStore = useSettingStore()
-const { layoutStyle } = storeToRefs(settingStore)
-const { isFullscreen, enter, exit, toggle } = useFullscreen()
-</script>
-
-<style lang='scss' scoped>
-.tjm_tools_icon {
-  margin-left: 10px;
-  cursor: pointer;
-}
-</style>
+import { useFullscreen } from "@vueuse/core";
+import { useSettingStore } from "@/store/settings";
+const settingStore = useSettingStore();
+const { layoutStyle } = storeToRefs(settingStore);
+const { isFullscreen, enter, exit, toggle } = useFullscreen();
+</script>

src/layout/components/NavBar/components/LayoutStyleSet.vue

@@ -1,29 +1,15 @@
 <template>
-    <div class="layoutStyleSet">
-        <el-icon class="tjm_tools_icon" size="24" :color="layoutStyle=='vertical'?'':'#fff'">
-            <tjm-icon-ep-Grid @click="microShowClick"/>
-        </el-icon>
-    </div>
+    <el-icon class="tjm_tools_icon" size="24" :color="layoutStyle == 'horizontal' && '#fff'" @click="microShowClick">
+        <tjm-icon-ep-grid />
+    </el-icon>
 </template>
 
 <script setup>
-import { useSettingStore } from '@/store/settings.js'
-import { watchEffect } from 'vue'
-
-const settingStore = useSettingStore()
-
-const { layoutStyle } = storeToRefs(settingStore)
+import { useSettingStore } from "@/store/settings";
+const settingStore = useSettingStore();
+const { layoutStyle } = storeToRefs(settingStore);
 
 function microShowClick() {
-    layoutStyle.value = layoutStyle.value =='vertical'?'horizontal':'vertical'
-}
-</script>
-
-<style lang='scss' scoped>
-.layoutStyleSet {
-  margin-left: 5px;
-  display: flex;
-  align-items: center;
-  cursor: pointer;
+    layoutStyle.value = layoutStyle.value == "vertical" && "horizontal" || "vertical";
 }
-</style>
+</script>

src/layout/components/NavBar/components/MenuSearch.vue

@@ -171,7 +171,7 @@ watch(show, value => {
 })
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .menu_search {
   font-size: 0 !important;
   display: flex;

src/layout/components/NavBar/components/MessageReminder.vue

@@ -0,0 +1,47 @@
+<template>
+    <el-badge :class="['tjm_tools_icon', unReadCount > 9 && 'm-r-10']" :value="unReadCount" :show-zero="false" :offset="[-2, 3]" @click="goTodo">
+        <el-icon size="24" :color="layoutStyle == 'horizontal' && '#fff'">
+            <tjm-icon-ep-bell />
+        </el-icon>
+    </el-badge>
+</template>
+
+<script setup>
+import mittBus from "@/utils/mittBus";
+import { useSettingStore } from "@/store/settings";
+const settingStore = useSettingStore();
+const { layoutStyle } = storeToRefs(settingStore);
+
+import { useUserStore } from "@/store/user";
+const createId = ref(useUserStore().userInfo.id);
+
+import API from "@/api/policy/toDo";
+const unReadCount = ref(0);
+const router = useRouter();
+const route = useRoute();
+
+onMounted(() => {
+    mittBus.on("getMessage", () => getMessage());
+});
+
+getMessage();
+function getMessage() {
+    API.msg({ isRead: 0, createId: createId.value }).then(res => unReadCount.value = res.code === 200 && res.data.total || 0).catch(() => unReadCount.value = 0);
+}
+
+function goTodo() {
+    if (route.path != "/myAffairs") router.push({ path: "/myAffairs", query: { element: "send" } });
+    else mittBus.emit("LayoutNotice");
+}
+</script>
+
+<style lang="scss" scoped>
+.tjm_tools_icon {
+  display: flex;
+  align-items: center;
+}
+
+.m-r-10 {
+  margin-right: 10px;
+}
+</style>

src/layout/components/NavBar/index.vue

@@ -1,16 +1,12 @@
 <template>
-    <div :class="{'tjm_navbar_container': true, 'layoutStyleHorizontal': layoutStyle == 'horizontal'}">
+    <div :class="{ 'tjm_navbar_container': true, 'layoutStyleHorizontal': layoutStyle == 'horizontal' }">
         <div class="tjm_navbar_left" v-if="layoutStyle == 'vertical'">
-            <el-icon
-                class="tjm_collapse_icon"
-                size="28"
-                @click="collapse = !collapse"
-            >
+            <el-icon class="tjm_collapse_icon" size="28" @click="collapse=!collapse">
                 <tjm-icon-ep-fold v-if="!collapse" />
                 <tjm-icon-ep-expand v-else />
             </el-icon>
             &nbsp; &nbsp; &nbsp;
-            <Breadcrumb />
+            <breadcrumb></breadcrumb>
         </div>
         <div class="tjm_navbar_left" v-else>
             <tjm-side-bar />
@@ -20,6 +16,7 @@
                 <full-screen-btn></full-screen-btn>
                 <menu-search></menu-search>
                 <!-- <layout-style-set></layout-style-set> -->
+                <message-reminder></message-reminder>
             </div>
             <div class="tjm_user_container">
                 <el-dropdown>
@@ -29,7 +26,8 @@
 
                     <template #dropdown>
                         <el-dropdown-menu>
-                            <el-dropdown-item @click="goUserInfo">个人信息</el-dropdown-item>
+                            <el-dropdown-item class="user-name-dropdown-item">{{ userName +  userName+  userName+  userName+  userName}}</el-dropdown-item>
+                            <el-dropdown-item divided @click="goUserInfo">个人信息</el-dropdown-item>
                             <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
                         </el-dropdown-menu>
                     </template>
@@ -45,16 +43,20 @@ import Breadcrumb from "./components/Breadcrumb.vue"
 import FullScreenBtn from "@/layout/components/NavBar/components/FullScreenBtn.vue"
 import MenuSearch from "@/layout/components/NavBar/components/MenuSearch.vue"
 import LayoutStyleSet from "@/layout/components/NavBar/components/LayoutStyleSet.vue"
-import { useSettingStore } from "@/store/settings.js"
-const settingStore = useSettingStore()
-const { collapse, layoutStyle } = storeToRefs(settingStore)
-import { useUserStore } from "@/store/user.js"
-const router = useRouter()
+import MessageReminder from "@/layout/components/NavBar/components/MessageReminder.vue"
+
+import { useSettingStore } from "@/store/settings";
+import { useUserStore } from "@/store/user";
+const settingStore = useSettingStore();
+const { collapse, layoutStyle } = storeToRefs(settingStore);
+
+const router = useRouter();
 const avatar = ref(useUserStore().userInfo.avatar);
-const errorHandler = () => true
+const userName = ref(useUserStore().userInfo.name);
+const errorHandler = () => true;
 
 function goUserInfo() {
-    router.push("/userInfo")
+    router.push("/userInfo");
 }
 const logout = () => {
     ElMessageBox.confirm("确定注销并退出系统吗？", "提示", {
@@ -92,15 +94,18 @@ const logout = () => {
     padding-left: 80px;
     display: flex;
     align-items: center;
+
     .tjm_tools_container {
       display: flex;
       align-items: center;
       margin-right: 20px;
+
       .tjm_tools_icon {
-        margin-left: 10px;
+        margin-left: 5px;
         cursor: pointer;
       }
     }
+
     .tjm_user_container {
       cursor: pointer;
     }
@@ -109,4 +114,16 @@ const logout = () => {
 .layoutStyleHorizontal {
   background: #283a5e;
 }
+
+.el-dropdown-menu :deep(.user-name-dropdown-item) {
+  min-width: 80px;
+  padding-left: 8px;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.85);
+
+  &:hover {
+    background: transparent;
+    cursor: unset;
+  }
+}
 </style>

src/views/home/index.vue

@@ -148,13 +148,13 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.home-policy-detail :deep {
-  .el-page-header {
+.home-policy-detail {
+  :deep(.el-page-header) {
     position: static;
     width: 100%;
   }
 
-  .tjm_card_style_custom {
+  :deep(.tjm_card_style_custom) {
     width: calc(100% - 2 * $base-padding);
     margin: $base-padding auto 0;
 
@@ -212,21 +212,21 @@ export default {
 .home-content {
   padding: 0 20px;
 
-  .el-tabs :deep {
-    .el-tabs__active-bar {
+  .el-tabs {
+    :deep(.el-tabs__active-bar) {
       display: none;
     }
 
-    .el-tabs__item {
+    :deep(.el-tabs__item) {
       font-size: 18px;
     }
 
-    .el-tabs__item.is-active {
+    :deep(.el-tabs__item.is-active) {
       background: var(--el-color-primary);
       color: #fff;
     }
 
-    .el-tabs__content {
+    :deep(.el-tabs__content) {
       display: none;
     }
   }

src/views/myAffairs/component/send.vue

@@ -8,6 +8,12 @@
                 <el-table-column label="回复日期" min-width="120" show-overflow-tooltip>
                     <template #default="scope">{{ scope.row.createTime.split(" ")[0] }}</template>
                 </el-table-column>
+                <el-table-column label="状态" width="120">
+                    <template #default="scope">
+                        <el-tag v-if="scope.row.isRead == 1" type="success">已读</el-tag>
+                        <el-tag v-if="scope.row.isRead == 0" type="warning">未读</el-tag>
+                    </template>
+                </el-table-column>
             </el-table>
         </div>
         <div class="tjm_card_pagination">
@@ -17,7 +23,10 @@
 </template>
 
 <script>
+import mittBus from "@/utils/mittBus";
+import { useUserStore } from "@/store/user";
 import API from "@/api/policy/toDo";
+import Msg from "@/api/policy/message";
 import yhPagination from "@/components/Pagination/index.vue";
 
 export default {
@@ -30,7 +39,8 @@ export default {
             loading: false,
             params: {
                 page: 1,
-                size: 10
+                size: 10,
+                createId: useUserStore().userInfo.id
             },
 
             total: 0,
@@ -54,7 +64,8 @@ export default {
             }).catch(() => this.loading = false);
         },
 
-        table_detail({ refId, policyName, policyDocNo }) {
+        table_detail({ id, isRead, refId, policyName, policyDocNo }) {
+            if (isRead == 0) Msg.edit({ id, isRead: 1 }).then(() => mittBus.emit("getMessage"));
             this.$emit("replyAll", { id: refId, name: policyName, docNo: policyDocNo });
         }
     }

src/views/myAffairs/index.vue

@@ -8,11 +8,12 @@
             <el-tab-pane v-for="(label, key) in myBusinessTab" :key="key" :label="label" :name="key"></el-tab-pane>
         </el-tabs>
 
-        <component :is="allComps[element]" @replyAll="table_detail"></component>
+        <component :is="allComps[element]" :ref="element" @replyAll="table_detail"></component>
     </div>
 </template>
 
 <script>
+import mittBus from "@/utils/mittBus";
 import { myBusinessTab } from "@/views/myAffairs/main";
 import allComps from "@/views/myAffairs/component/index";
 import policyDetail from "@/views/home/policyDetail.vue";
@@ -28,11 +29,22 @@ export default {
             myBusinessTab,
 
             element: "toDo",
-
             show: false
         }
     },
 
+    beforeRouteEnter(to, from, next) {
+        next(vm => vm.element = allComps[to.query.element] && to.query.element || "toDo");
+    },
+
+    mounted() {
+        mittBus.on("LayoutNotice", () => {
+            this.show = false;
+            if (this.element != "send") this.element = "send";
+            else nextTick(() => this.$refs.send.reloadTable());
+        });
+    },
+
     methods: {
         table_detail(row) {
             this.show = true;

src/views/policyStrive/explain.vue

@@ -113,7 +113,7 @@
                     </el-col>
                     <el-col :span="24">
                         <el-form-item label="参与人" prop="partPerson">
-                            <el-input v-model="form.partPerson" type="textarea" :rows="4" placeholder="请输入参与人(以英文 , 分割)"></el-input>
+                            <el-input v-model="form.partPerson" type="textarea" :rows="4" placeholder="请输入参与人(多个必须用逗号隔开，无论英文逗号，还是中文逗号)"></el-input>
                         </el-form-item>
                     </el-col>
                 </template>
@@ -203,7 +203,7 @@ export default {
                 isLand: [{ required: true }],
                 landAmount: [{ required: true, message: "请输入落地金额" }],
                 sjFinishTime: [{ required: true, message: "请选择时实际完成日期" }],
-                partPerson: [{ required: true, message: "请输入参与人(以英文 , 分割)" }],
+                partPerson: [{ required: true, message: "请输入参与人" }],
                 monthSituation: [{ required: true, message: "请输入月度争取情况" }]
             }
         }
@@ -235,7 +235,7 @@ export default {
             this.$refs.formRef.validate(valid => {
                 if (valid) {
                     this.isSaving = true;
-                    const partPersonArr = this.form.partPerson && JSON.stringify(this.form.partPerson.split(",").map(name => ({ name }))) || "";
+                    const partPersonArr = this.form.partPerson && JSON.stringify(this.form.partPerson.replace(/，/g, ",").split(",").map(name => ({ name }))) || "";
                     API.updateById({ ...this.form, partPersonArr }).then(res => {
                         this.isSaving = false;
                         if (res.code === 200) {

src/views/system/dept.vue

@@ -220,14 +220,12 @@ function currentChange(e) {
 }
 
 function addItem(row) {
-    console.log(row)
     form.value.parentId = row.id
     dialogTitle.value = "新增"
     addShow.value = true
 }
 
 function editItem(row) {
-    console.log(row)
     form.value.parentId = row.parentId
     form.value.id = row.id
     form.value.name = row.name
@@ -255,14 +253,12 @@ function resetForm() {
     if (proxy.$refs["userRef"]) {
         proxy.$refs["userRef"].resetFields()
     }
-    console.log("重置表单")
 }
 
 function submitForm() {
     proxy.$refs["userRef"].validate(valid => {
         if (valid) {
             if (form.value.id) {
-                console.log("修改表单")
                 const params = {
                     ...form.value
                 }
@@ -280,7 +276,6 @@ function submitForm() {
                     }
                 })
             } else {
-                console.log("新增表单")
                 const params = {
                     ...form.value
                 }
@@ -298,6 +293,8 @@ function submitForm() {
                     }
                 })
             }
+        } else {
+            return false
         }
     })
 }
@@ -326,6 +323,4 @@ function deleteDepartClick(row) {
     })
 }
 getList()
-</script>
-
-<style lang="scss" scoped></style>
+</script>

src/views/system/menu.vue

@@ -320,7 +320,6 @@ function submitForm() {
         if (valid) {
             if (form.value.id != undefined) {
                 modMenu(form.value).then(res => {
-                    console.log(res)
                     if (res.code == 200) {
                         API.add("修改", "system_menu");
                         open.value = false
@@ -338,7 +337,6 @@ function submitForm() {
                 })
             } else {
                 addMenu(form.value).then(res => {
-                    console.log(res)
                     if (res.code == 200) {
                         API.add("新增", "system_menu");
                         open.value = false
@@ -356,7 +354,7 @@ function submitForm() {
                 })
             }
         } else {
-            console.log("检验不通过")
+            return false
         }
     })
 }
@@ -367,7 +365,6 @@ function cancel() {
 
 function getMenuTreeList() {
     getMenuTree(10001).then(res => {
-        console.log("获取的菜单", res)
         if (res.code === 200) {
             tableData.value = res.data
         }
@@ -477,7 +474,6 @@ async function handleUpdate(row) {
         state,
         type
     }
-    console.log(form.value)
     open.value = true
     title.value = "修改菜单"
 }
@@ -490,7 +486,6 @@ function handleDelete(row) {
         type: "warning"
     }).then(() => {
         delMenu({ id: row.id }).then(res => {
-            console.log(res)
             if (res.code == 200) {
                 API.add("删除", "system_menu");
                 ElMessage({

src/views/system/role.vue

@@ -289,7 +289,6 @@ function addClick() {
 }
 
 function showChange(row) {
-    console.log(row)
     dialogTitle.value = "修改"
     form.value.state = row.state === 0
     form.value.description = row.description
@@ -314,14 +313,12 @@ function resetForm() {
     if (proxy.$refs["userRef"]) {
         proxy.$refs["userRef"].resetFields()
     }
-    console.log("重置表单")
 }
 
 function submitForm() {
     proxy.$refs["userRef"].validate(valid => {
         if (valid) {
             if (form.value.id) {
-                console.log("修改表单")
                 const params = {
                     ...form.value
                 }
@@ -339,7 +336,6 @@ function submitForm() {
                     }
                 })
             } else {
-                console.log("新增表单")
                 const params = {
                     ...form.value
                 }
@@ -357,12 +353,13 @@ function submitForm() {
                     }
                 })
             }
+        } else {
+            return false
         }
     })
 }
 
 function sendPermissions(row) {
-    console.log(row)
     selectedRow.value = row
 
     //获取菜单树
@@ -515,6 +512,4 @@ function deleteRoleClick(row) {
         })
     })
 }
-</script>
-
-<style lang="scss" scoped></style>
+</script>

src/views/system/user.vue

@@ -42,7 +42,6 @@ function getUserListData() {
 }
 //查询按钮
 function searchUserListBtn() {
-    console.log(params.value)
     getUserListData()
 }
 //重置
@@ -191,7 +190,7 @@ function submitForm() {
                 })
             }
         } else {
-            console.log("检验不通过")
+            return false
         }
     })
 }
@@ -204,7 +203,6 @@ function addUserBtn() {
     title.value = "新增"
 }
 function modUserBtn(row) {
-    console.log(row)
     reset()
     let { userName, deptId, name, mobile, email, id } = row
     form.value = {
@@ -228,7 +226,6 @@ function delUserBtn(row) {
         type: "warning"
     }).then(() => {
         delUser({ ids: row.id }).then(res => {
-            console.log(res)
             if (res.code == 200) {
                 API.add("删除", "system_user");
                 getUserListData()
@@ -267,7 +264,6 @@ function delUserMoreBtn() {
             arr.push(element.id)
         })
         delUser({ ids: arr.join(",") }).then(res => {
-            console.log(res)
             if (res.code == 200) {
                 API.add("批量删除", "system_user");
                 getUserListData()

src/views/system/userInfo.vue

@@ -193,7 +193,6 @@ function changeInfo() {
         form.value.avatar = null
         isEdit.value = true
     } else {
-        console.log('保存了')
         // 保存
         if (!form.value.mobile.length || !form.value.name.length || !form.value.email.length) {
             ElMessage({

vite.config.js

@@ -57,7 +57,8 @@ export default defineConfig(({ mode }) => {
         css: {
             preprocessorOptions: {
                 scss: {
-                    additionalData: '@import "@/assets/style/variable.scss";'
+                    api: 'modern-compiler', // 修改api调用方式
+                    additionalData: `@use "@/assets/style/variable.scss" as *;` // 导出全局变量和 mixin
                 }
             }
         },