前台项目创建

src/api/system/notice.js

@@ -8,6 +8,17 @@ export function listNotice(query) {
     params: query
   })
 }
+//用户消息列表展示
+export function listNoticeByNotice(data) {
+  return request({
+    url: '/system/notice/userList',
+    method: 'post',
+    params: data
+  })
+}
+
+
+
 
 // 查询公告详细
 export function getNotice(noticeId) {
@@ -16,6 +27,21 @@ export function getNotice(noticeId) {
     method: 'get'
   })
 }
+// 查询公告详细和阅读量
+export function getNoticeAndCount(noticeId) {
+  return request({
+    url: '/system/notice/' + noticeId,
+    method: 'post'
+  })
+}
+
+// 阅读文件
+export function readNotice(noticeId) {
+  return request({
+    url: '/system/notice/'+noticeId,
+    method: 'put',
+  })
+}
 
 // 新增公告
 export function addNotice(data) {
@@ -41,4 +67,4 @@ export function delNotice(noticeId) {
     url: '/system/notice/' + noticeId,
     method: 'delete'
   })
-}
+}

src/api/system/user.js

@@ -1,6 +1,15 @@
 import request from '@/utils/request'
 import {parseStrEmpty} from "@/utils/muyu";
 
+//查询所有用户
+export function getUserList() {
+  return request({
+    url: '/system/user/userList',
+    method: 'get'
+  })
+}
+
+
 // 查询用户列表
 export function listUser(query) {
   return request({

src/layout/components/Navbar.vue

@@ -8,6 +8,9 @@
 
     <div class="right-menu">
       <template v-if="device!=='mobile'">
+        <el-button @click="getNoticeList(),drawer = true,this.direction = 'rtl'" style="margin-left: 16px;"
+                   icon="el-icon-chat-dot-round" class="right-menu-item">
+        </el-button>
         <search id="header-search" class="right-menu-item"/>
         <screenfull id="screenfull" class="right-menu-item hover-effect"/>
 
@@ -15,8 +18,122 @@
           <size-select id="size-select" class="right-menu-item hover-effect"/>
         </el-tooltip>
 
+
+        <el-drawer
+          title="消息通知"
+          :visible.sync="drawer"
+          :direction="direction"
+        >
+
+          <div>
+            <el-radio-group v-model="notice.noticeType" @change="getNoticeList">
+              <el-radio-button label="null">全部</el-radio-button>
+              <el-radio-button label="1">通知</el-radio-button>
+              <el-radio-button label="2">公告</el-radio-button>
+            </el-radio-group>
+          </div>
+          <div>
+            <el-radio-group v-model="notice.readStatus" @change="getNoticeList">
+              <el-radio-button label="null">全部</el-radio-button>
+              <el-radio-button label="1">已读</el-radio-button>
+              <el-radio-button label="0">未读</el-radio-button>
+            </el-radio-group>
+          </div>
+
+          <div v-for=" no in noticeList">
+            <el-descriptions class="margin-top" :title="no.noticeTitle" :column="3" border>
+              <template slot="extra">
+                <el-button type="primary" size="small" @click="readNoticeChilk(no)">阅读消息</el-button>
+              </template>
+              <el-descriptions-item>
+                <template slot="label">
+                  <i class="el-icon-user"></i>
+                  消息发布时间
+                </template>
+                {{ no.createTime }}
+              </el-descriptions-item>
+              <el-descriptions-item>
+                <template slot="label">
+                  <i class="el-icon-mobile-phone"></i>
+                  消息发布人
+                </template>
+               {{no.createBy}}   ({{ no.remark }})
+              </el-descriptions-item>
+
+              <el-descriptions-item>
+                <template slot="label">
+                  <i class="el-icon-location-outline"></i>
+                  消息类型
+                </template>
+                <span v-show="no.noticeType==1">
+                通知
+              </span>
+                <span v-show="no.noticeType==2">
+                公告
+              </span>
+              </el-descriptions-item>
+
+              <el-descriptions-item >
+                <template slot="label">
+                  <i class="el-icon-mobile-phone"></i>
+                  有效时间
+                </template>
+                {{no.startTime}}---{{ no.endTime}}
+              </el-descriptions-item>
+              <el-descriptions-item>
+                <template slot="label">
+                  <i class="el-icon-location-outline"></i>
+                  当前状态
+                </template>
+                <span v-show="no.readStatus==0">
+                未读
+              </span>
+                <span v-show="no.readStatus==1">
+                已读
+              </span>
+              </el-descriptions-item>
+
+            </el-descriptions>
+          </div>
+
+<!--          &lt;!&ndash; 消息对话框 &ndash;&gt;-->
+<!--          <el-dialog :title="title" :visible.sync="open" append-to-body width="780px">-->
+<!--            <el-form ref="form" :model="form" : label-width="80px">-->
+<!--              <el-row>-->
+<!--                <el-col :span="12">-->
+<!--                  <el-form-item label="公告标题" prop="noticeTitle">-->
+<!--                    <el-input v-model="form.noticeTitle" placeholder="请输入公告标题"/>-->
+<!--                  </el-form-item>-->
+<!--                </el-col>-->
+<!--                <el-col :span="12">-->
+<!--                  <el-form-item label="公告类型" prop="noticeType">-->
+<!--                    <el-form-item label="公告标题" prop="noticeTitle">-->
+<!--                      <el-input v-model="form.noticeType" placeholder="请输入公告标题"/>-->
+<!--                    </el-form-item>-->
+<!--                  </el-form-item>-->
+<!--                </el-col>-->
+<!--                <el-col :span="12">-->
+<!--                </el-col>-->
+<!--                <el-col :span="24">-->
+<!--                  <el-form-item label="内容">-->
+<!--                    <editor v-model="form.noticeContent" :min-height="192"/>-->
+<!--                  </el-form-item>-->
+<!--                </el-col>-->
+<!--              </el-row>-->
+<!--            </el-form>-->
+<!--            <div slot="footer" class="dialog-footer">-->
+<!--              <el-button type="primary" @click="cancel">确 定</el-button>-->
+<!--              <el-button @click="cancel">取 消</el-button>-->
+<!--            </div>-->
+<!--          </el-dialog>-->
+
+
+        </el-drawer>
+
       </template>
 
+
+      <!--      el-icon-chat-dot-round-->
       <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
         <div class="avatar-wrapper">
           <img :src="avatar" class="user-avatar">
@@ -46,9 +163,32 @@ import Hamburger from '@/components/Hamburger'
 import Screenfull from '@/components/Screenfull'
 import SizeSelect from '@/components/SizeSelect'
 import Search from '@/components/HeaderSearch'
+import Notice from "@/views/system/notice/index.vue";
+import notice from "../../views/system/notice/index.vue";
+import {listNoticeByNotice, readNotice} from "@/api/system/notice";
+import ComponentA from '@/views/system/notice/index.vue'
 
 export default {
+  data() {
+    return {
+      open: false,
+
+      noticeList: [],
+      notice: {
+        readStatus: null,
+        noticeType: null,
+      },
+      drawer: false,
+      direction: 'rtl',
+
+      title: undefined,
+
+      form: {}
+    };
+  },
+
   components: {
+    Notice,
     Breadcrumb,
     TopNav,
     Hamburger,
@@ -56,7 +196,11 @@ export default {
     SizeSelect,
     Search
   },
+
   computed: {
+    notice() {
+      return notice
+    },
     ...mapGetters([
       'sidebar',
       'avatar',
@@ -80,6 +224,37 @@ export default {
     }
   },
   methods: {
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    reset() {
+      this.form = {
+        noticeId: undefined,
+        noticeTitle: undefined,
+        noticeType: undefined,
+        noticeContent: undefined,
+        status: "0"
+      };
+      this.resetForm("form");
+    },
+    //阅读消息
+    readNoticeChilk(no) {
+      let noticeId = no.noticeId;
+      readNotice(noticeId).then(res => {
+
+  this.getNoticeList();
+        this.$modal.msgSuccess("阅读成功");
+      })
+    },
+
+    getNoticeList() {
+      listNoticeByNotice(this.notice).then(res => {
+
+        this.noticeList = res.data;
+        console.log(res);
+      })
+    },
     toggleSideBar() {
       this.$store.dispatch('app/toggleSideBar')
     },

src/utils/request.js

@@ -73,7 +73,7 @@ service.interceptors.request.use(config => {
 
 // 响应拦截器
 service.interceptors.response.use(res => {
-  debugger
+  //debugger
     // 未设置状态码则默认成功状态
     const code = res.data.code || 200;
     // 获取错误信息

src/views/system/notice/index.vue

@@ -99,6 +99,12 @@
       </el-table-column>
       <el-table-column align="center" class-name="small-padding fixed-width" label="操作">
         <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            @click="handleLook(scope.row)"
+          >查看详情
+          </el-button>
           <el-button
             v-hasPermi="['system:notice:edit']"
             icon="el-icon-edit"
@@ -138,17 +144,17 @@
           </el-col>
           <el-col :span="12">
             <el-form-item label="公告类型" prop="noticeType">
-              <el-select v-model="form.noticeType" placeholder="请选择公告类型">
+              <el-select v-model="form.noticeType" placeholder="请选择公告类型"  @change="zzzzzz">
                 <el-option
                   v-for="dict in dict.type.sys_notice_type"
                   :key="dict.value"
                   :label="dict.label"
                   :value="dict.value"
-                ></el-option>
+                   ></el-option>
               </el-select>
             </el-form-item>
           </el-col>
-          <el-col :span="24">
+          <el-col :span="12">
             <el-form-item label="状态">
               <el-radio-group v-model="form.status">
                 <el-radio
@@ -160,12 +166,59 @@
               </el-radio-group>
             </el-form-item>
           </el-col>
+          <el-col :span="12">
+            <div class="block" v-show="timeShow">
+              <span class="demonstration">开始时间</span>
+              <el-date-picker
+                v-model="form.startTime"
+                type="datetime"
+                placeholder="选择开始日期时间" value-format="yyyy-MM-dd HH:mm:ss">
+              </el-date-picker>
+            </div>
+            <div class="block" v-show="timeShow">
+              <span class="demonstration">截止时间</span>
+              <el-date-picker
+                v-model="form.endTime"
+                type="datetime"
+                placeholder="选择截止日期时间" value-format="yyyy-MM-dd HH:mm:ss">
+              </el-date-picker>
+            </div>
+          </el-col>
           <el-col :span="24">
             <el-form-item label="内容">
               <editor v-model="form.noticeContent" :min-height="192"/>
             </el-form-item>
           </el-col>
         </el-row>
+
+<div v-show="ssss">
+        <span>总计数数量:{{form.totalCount}}</span>  --
+        <span>未读数量:{{form.unreadCount}}</span>  --
+        <span>已读数量:{{form.readCount}}</span>
+  </div>
+
+
+
+
+        <el-col :span="12" v-show="empShow">
+          <el-input v-model="form.deptIds" />
+          <el-form-item label="归属部门" >
+            <el-cascader v-model="form.deptIds" :show-all-levels="false" :options="deptOptions" :props="props" clearable style="width: 60%;"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" v-show="empShow">
+          <el-input v-model="form.userIds" />
+          <el-form-item label="特定人员" >
+            <el-select v-model="form.userIds" multiple placeholder="请选择">
+              <el-option
+                v-for="item in userList"
+                :key="item.userId"
+                :label="item.userName"
+                :value="item.userId">
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
@@ -176,13 +229,40 @@
 </template>
 
 <script>
-import {addNotice, delNotice, getNotice, listNotice, updateNotice} from "@/api/system/notice";
+import {
+  addNotice,
+  delNotice,
+  getNotice,
+  getNoticeAndCount,
+  listNotice,
+  listNoticeByNotice,
+  updateNotice
+} from "@/api/system/notice";
+import {deptTreeSelect, getUserList} from "@/api/system/user";
+import Treeselect from "@riophae/vue-treeselect";
+import {listDept} from "@/api/system/dept";
 
 export default {
   name: "Notice",
+  components: {Treeselect},
   dicts: ['sys_notice_status', 'sys_notice_type'],
   data() {
     return {
+      userList:[],
+      //级联配置
+      props: {
+        multiple: true,
+        value: 'deptId',
+        label: 'deptName'
+      },
+      //显示阅读数量
+      ssss:false,
+      //部门树形结构
+      deptOptions: [],
+      //是否展示时间选择器
+      timeShow:false,
+      //是否展示人员选项
+      empShow:false,
       // 遮罩层
       loading: true,
       // 选中数组
@@ -209,6 +289,8 @@ export default {
         createBy: undefined,
         status: undefined
       },
+      // 级联选择器配置
+
       // 表单参数
       form: {},
       // 表单校验
@@ -224,8 +306,42 @@ export default {
   },
   created() {
     this.getList();
+
   },
   methods: {
+    /**
+     * 部门级联下拉列表
+     */
+    getDeptTree() {
+      listDept().then(response => {
+        this.deptOptions = this.handleTree(response.data,"deptId","parentId","children");
+      });
+    },
+
+    /**
+     * 展示所有用户
+     */
+
+    getSelUserAll(){
+      getUserList().then(res=>{
+        this.userList = res;
+      })
+    },
+
+
+    zzzzzz(){
+      //传入的值是1 为通知   显示 部门和特定人员的tab框
+      //传入值是2 为公告  显示 时间选择框
+      console.log(this.form.noticeType);
+      let noticeType = this.form.noticeType;
+      if (noticeType == 2){
+        this.timeShow = true;
+        this.empShow = false;
+      }else {
+        this.timeShow = false;
+        this.empShow=true;
+      }
+    },
     /** 查询公告列表 */
     getList() {
       this.loading = true;
@@ -240,6 +356,7 @@ export default {
       this.open = false;
       this.reset();
     },
+
     // 表单重置
     reset() {
       this.form = {
@@ -272,7 +389,21 @@ export default {
       this.reset();
       this.open = true;
       this.title = "添加公告";
+      this.getDeptTree();
+      this.getSelUserAll();
     },
+    /** 查看按钮操作 */
+    handleLook(row){
+      this.reset();
+      const noticeId = row.noticeId || this.ids
+      getNoticeAndCount(noticeId).then(response => {
+         this.form = response.data;
+        this.open = true;
+        this.title = "通知详情";
+        this.ssss =true;
+      });
+    },
+
     /** 修改按钮操作 */
     handleUpdate(row) {
       this.reset();