消息公告

src/api/system/notice.js

@@ -9,6 +9,27 @@ export function listNotice(query) {
   })
 }
 
+/*公告列表*/
+export function noticList() {
+  return request({
+    url: '/system/notice/noticList',
+    method: 'get'
+  })
+}
+/*公告详情列表*/
+export function noticListDetail() {
+  return request({
+    url: '/system/notice/noticListDetail',
+    method: 'get'
+  })
+}
+//阅读公告
+export function readNotic(noticeId) {
+  return request({
+    url: '/system/notice/readNotic/?noticeId=' + noticeId,
+    method: 'get'
+  })
+}
 // 查询公告详细
 export function getNotice(noticeId) {
   return request({

src/layout/components/Navbar.vue

@@ -7,6 +7,10 @@
     <top-nav v-if="topNav" id="topmenu-container" class="topmenu-container"/>
 
     <div class="right-menu">
+      <el-badge :value="12" style="margin-right: 50px" class="item">
+        <el-button size="mini" @click="drawer = true">公告</el-button>
+      </el-badge>
+
       <template v-if="device!=='mobile'">
         <search id="header-search" class="right-menu-item"/>
         <screenfull id="screenfull" class="right-menu-item hover-effect"/>
@@ -35,6 +39,63 @@
         </el-dropdown-menu>
       </el-dropdown>
     </div>
+    <el-drawer
+      title="我是标题"
+      :visible.sync="drawer"
+      :with-header="false">
+      <span>
+        <el-tabs type="border-card">
+
+          <el-tab-pane>
+            <el-card>
+               <el-button @click="all">全部</el-button>
+             <el-button @click="notice">通知</el-button>
+              <el-button @click="announcementList">公告</el-button>
+            </el-card>
+              <el-button @click="readNotic">通知已读</el-button>
+              <el-button @click="noReadNotic">通知未读</el-button>
+              <el-button @click="announcementListReadNotic">公告已读</el-button>
+              <el-button @click="announcementListNoReadNotic">公告未读</el-button>
+             <el-descriptions class="margin-top" v-for="(notice, index) in inform"  :title=notice.noticeTitle :column="3"   border>
+                    <template slot="extra">
+                      <el-button type="primary" size="small" @click="readMessage(notice)">阅读消息</el-button>
+                    </template>
+                    <el-descriptions-item>
+                      <template slot="label">
+                        <i class="el-icon-user"></i>
+                        消息发布时间
+                      </template>
+                      {{notice.createTime}}
+                    </el-descriptions-item>
+                    <el-descriptions-item style="width: 200px">
+                      <template slot="label">
+                        <i class="el-icon-mobile-phone"></i>
+                        消息发布人
+                      </template>
+                         {{notice.createBy}}
+                    </el-descriptions-item>
+                    <el-descriptions-item >
+                      <template slot="label">
+                        <i class="el-icon-tickets"></i>
+                        当前状态
+                      </template>
+                      <el-tag size="small" v-if="notice.flag==='0'">未读</el-tag>
+                      <el-tag type="success" size="small" v-if="notice.flag==='1'">已读</el-tag>
+                    </el-descriptions-item>
+                    <el-descriptions-item>
+                      <template slot="label">
+                        <i class="el-icon-office-building"></i>
+                        消息类型
+                      </template>
+                        <el-tag size="small" v-if="notice.noticeType==='1'">通知</el-tag>
+                        <el-tag size="small" v-if="notice.noticeType==='2'">公告</el-tag>
+                    </el-descriptions-item>
+                  </el-descriptions>
+          </el-tab-pane>
+        </el-tabs>
+
+      </span>
+    </el-drawer>
   </div>
 </template>
 
@@ -46,8 +107,18 @@ import Hamburger from '@/components/Hamburger'
 import Screenfull from '@/components/Screenfull'
 import SizeSelect from '@/components/SizeSelect'
 import Search from '@/components/HeaderSearch'
+import {noticList, readNotic} from "@/api/system/notice";
+
 
 export default {
+  data() {
+    return {
+      drawer: false,
+      notic: [],
+      /*通知*/
+      inform: []
+    }
+  },
   components: {
     Breadcrumb,
     TopNav,
@@ -77,9 +148,94 @@ export default {
       get() {
         return this.$store.state.settings.topNav
       }
-    }
+    },
+
+  },
+  created() {
+    this.noticList()
   },
   methods: {
+
+    /*全部*/
+    all(){
+      this.inform = []
+      this.notic.forEach(item => {
+        this.inform.push(item)
+      })
+    },
+    /*通知*/
+    notice(){
+      this.inform = []
+      this.notic.forEach(item => {
+        if (item.noticeType === '1') {
+          this.inform.push(item)
+        }
+      })
+    },
+    /*通知已读*/
+    readNotic(){
+      this.inform = []
+      this.notic.forEach(item => {
+        if (item.noticeType === '1'  && item.flag == 1) {
+          this.inform.push(item)
+        }
+      })
+    },
+    /*公告已读*/
+    announcementListReadNotic(){
+      this.inform = []
+      this.notic.forEach(item => {
+        if (item.noticeType === '2'  && item.flag == 1) {
+          this.inform.push(item)
+        }
+      })
+    },
+    /*通知未读*/
+    noReadNotic(){
+      this.inform = []
+      this.notic.forEach(item => {
+        if (item.noticeType === '1' && item.flag == 0) {
+          this.inform.push(item)
+        }
+      })
+    },
+    /*通知未读*/
+    announcementListNoReadNotic(){
+      this.inform = []
+      this.notic.forEach(item => {
+        if (item.noticeType === '2' && item.flag == 0) {
+          this.inform.push(item)
+        }
+      })
+    },
+    /*公告*/
+    announcementList(){
+      this.inform = []
+      this.notic.forEach(item => {
+        if (item.noticeType === '2') {
+          this.inform.push(item)
+        }
+      })
+    },
+    /*阅读*/
+    readMessage(notice){
+
+      readNotic(notice.noticeId).then(
+        res=>{
+          this. noticList()
+        }
+      )
+      this.$router.push({ path: '/system/notice', query: { openDialog: 'true' ,noticeId: notice.noticeId} });
+    },
+    /*打开公告*/
+    noticList() {
+      noticList().then(
+        res => {
+          console.log(res)
+          this.notic = res.data
+        }
+      )
+    },
     toggleSideBar() {
       this.$store.dispatch('app/toggleSideBar')
     },
@@ -99,6 +255,7 @@ export default {
 }
 </script>
 
+
 <style lang="scss" scoped>
 .navbar {
   height: 50px;
@@ -143,6 +300,7 @@ export default {
       outline: none;
     }
 
+
     .right-menu-item {
       display: inline-block;
       padding: 0 8px;

src/views/system/notice/index.vue

@@ -99,6 +99,13 @@
       </el-table-column>
       <el-table-column align="center" class-name="small-padding fixed-width" label="操作">
         <template slot-scope="scope">
+          <el-button
+            icon="el-icon-search"
+            size="mini"
+            type="text"
+            @click="noticDetail(scope.row)"
+          >查看详情
+          </el-button>
           <el-button
             v-hasPermi="['system:notice:edit']"
             icon="el-icon-edit"
@@ -128,17 +135,17 @@
     />
 
     <!-- 添加或修改公告对话框 -->
-    <el-dialog :title="title" :visible.sync="open" append-to-body width="780px">
+    <el-dialog :title="title" :visible.sync="open" append-to-body width="780px" class="dialog" >
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
         <el-row>
           <el-col :span="12">
             <el-form-item label="公告标题" prop="noticeTitle">
-              <el-input v-model="form.noticeTitle" placeholder="请输入公告标题"/>
+              <el-input :disabled="isTitleDisabled" v-model="form.noticeTitle" placeholder="请输入公告标题"/>
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="公告类型" prop="noticeType">
-              <el-select v-model="form.noticeType" placeholder="请选择公告类型">
+              <el-select :disabled="isTitleDisabled" v-model="form.noticeType" placeholder="请选择公告类型">
                 <el-option
                   v-for="dict in dict.type.sys_notice_type"
                   :key="dict.value"
@@ -150,7 +157,7 @@
           </el-col>
           <el-col :span="24">
             <el-form-item label="状态">
-              <el-radio-group v-model="form.status">
+              <el-radio-group :disabled="isTitleDisabled" v-model="form.status">
                 <el-radio
                   v-for="dict in dict.type.sys_notice_status"
                   :key="dict.value"
@@ -160,11 +167,94 @@
               </el-radio-group>
             </el-form-item>
           </el-col>
+          <el-col :span="24" v-if="form.noticeType==='2' && title !== '公告详情'">
+            <el-form-item label="公告时间">
+              <el-date-picker
+                v-model="form.startTime"
+                type="date"
+                value-format="yyyy-MM-dd HH:mm:ss"
+                placeholder="选择日期">
+              </el-date-picker>
+              -
+              <el-date-picker
+                v-model="form.endTime"
+                type="date"
+                value-format="yyyy-MM-dd HH:mm:ss"
+                placeholder="选择日期">
+              </el-date-picker>
+            </el-form-item>
+          </el-col>
           <el-col :span="24">
             <el-form-item label="内容">
-              <editor v-model="form.noticeContent" :min-height="192"/>
+              <editor v-model="form.noticeContent" :min-height="50"/>
             </el-form-item>
           </el-col>
+          <el-col :span="24" v-if="form.noticeType==='1' && title !== '公告详情'">
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="通知人员">
+                  <div class="block">
+                    <el-cascader
+                      placeholder="试试搜索：指南"
+                      :options="dept"
+                      value="id"
+                      show-all-levels:true
+                      @change="handleChange"
+                      :props="{ multiple: true }"
+                      filterable></el-cascader>
+                  </div>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item v-if="cities.length>0">
+                  <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选
+                  </el-checkbox>
+                  <div style="margin: 15px 0;"></div>
+                  <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
+                    <el-checkbox v-for="city in cities"
+                                 :label="city"
+                                 :key="city"
+                                 :value="city">
+                      {{ city }}
+                    </el-checkbox>
+                  </el-checkbox-group>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-col>
+          <el-col :span="24" v-if=" title === '公告详情'">
+            <div>
+              <el-row :gutter="20">
+                <el-col :span="6">
+                  <div>
+                    <el-statistic title="总通知">
+                      <template slot="formatter">
+                        {{ read.totalNum }}
+                      </template>
+                    </el-statistic>
+                  </div>
+                </el-col>
+                <el-col :span="6">
+                  <div>
+                    <el-statistic title="已阅读">
+                      <template slot="formatter">
+                        {{ read.readEd }}
+                      </template>
+                    </el-statistic>
+                  </div>
+                </el-col>
+                <el-col :span="6">
+                  <div>
+                    <el-statistic title="未阅读">
+                      <template slot="formatter">
+                        {{ read.noRead }}
+                      </template>
+                    </el-statistic>
+                  </div>
+                </el-col>
+              </el-row>
+            </div>
+          </el-col>
         </el-row>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -176,8 +266,20 @@
 </template>
 
 <script>
-import {addNotice, delNotice, getNotice, listNotice, updateNotice} from "@/api/system/notice";
+import {
+  addNotice,
+  delNotice,
+  getNotice,
+  listNotice,
+  noticList,
+  noticListDetail,
+  updateNotice
+} from "@/api/system/notice";
+import {listDept} from "@/api/system/dept";
+import {listUser} from "@/api/system/user";
+import {listPost} from "@/api/system/post";
 
+const cityOptions = ['上海', '北京', '广州', '深圳'];
 export default {
   name: "Notice",
   dicts: ['sys_notice_status', 'sys_notice_type'],
@@ -210,7 +312,16 @@ export default {
         status: undefined
       },
       // 表单参数
-      form: {},
+      form: {
+        userNames: "",
+        createBy: "",
+      },
+      /*阅读量*/
+      read:{
+        totalNum: 2,
+        readEd: 2,
+        noRead: 2,
+      },
       // 表单校验
       rules: {
         noticeTitle: [
@@ -219,13 +330,149 @@ export default {
         noticeType: [
           {required: true, message: "公告类型不能为空", trigger: "change"}
         ]
+      },
+      dept: [],
+      //多选
+      options: [],
+      /*用户查询参数*/
+      userListFind: {
+        pageNum: 1,
+        pageSize: 10,
+        userName: undefined,
+        phonenumber: undefined,
+        status: undefined,
+        deptId: undefined
+      },
+      // 日期范围
+      dateRange: [],
+      /*多选*/
+      checkAll: false,
+      checkedCities: [],
+      cities: [],
+      isIndeterminate: true,
+      /*详情*/
+      noticDetail(row) {
+        /*公告已阅读*/
+        noticListDetail().then(
+          res => {
+            res.data.forEach(item => {
+              if(item.noticeId === row.noticeId){
+                this.read.readEd=item.readNum;
+                this.read.totalNum=item.totalNum;
+                this.read.noRead=item.totalNum-item.readNum;
+              }
+            })
+          }
+        )
+        this.reset();
+        const noticeId = row.noticeId || this.ids
+        getNotice(noticeId).then(response => {
+          this.form = response.data;
+          this.open = true;
+          this.title = "公告详情";
+        });
+
       }
     };
   },
   created() {
     this.getList();
+    this.getDeptList();
+    const shouldOpenDialog = this.$route.query.openDialog === 'true';
+    const noticeId = this.$route.query.noticeId
+    if (shouldOpenDialog) {
+      /*公告已阅读*/
+      noticListDetail().then(
+        res => {
+          res.data.forEach(item => {
+            if(item.noticeId ===noticeId){
+              this.read.readEd=item.readNum;
+              this.read.totalNum=item.totalNum;
+              this.read.noRead=item.totalNum-item.readNum;
+            }
+          })
+        }
+      )
+      this.reset();
+      getNotice(noticeId).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "公告详情";
+      });
+    }
+
+  },
+  computed: {
+    isTitleDisabled() {
+      return this.title === '公告详情';
+    }
   },
   methods: {
+
+    /*多选框*/
+    handleCheckAllChange(val) {
+      this.checkedCities = val ? this.cities : [];
+      this.isIndeterminate = false;
+    },
+    handleCheckedCitiesChange(value) {
+      let userNames = "";
+      let checkedCount = value.length;
+      this.checkAll = checkedCount === this.cities.length;
+      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
+      userNames += "," + value + ",";
+      //去掉最后一个，号
+      userNames = userNames.substring(1, userNames.length - 1);
+      this.form.userNames = userNames;
+
+    },
+    getDeptList() {
+      this.loading = true;
+      listDept(this.queryParams).then(response => {
+        this.options = this.handleTree(response.data, "deptId");
+        // 递归函数，用于转换children的格式
+        function convertChildren(item) {
+          return {
+            id: item.deptId,
+            value: item.deptId,
+            label: item.deptName,
+            children: item.children && item.children.length > 0
+              ? item.children.map(convertChildren) : undefined
+          };
+        }
+
+        // 转换整个options数组
+        const data = this.options.map(convertChildren);
+        this.dept = data;
+      })
+    },
+    /*选中特定人员tab框*/
+    handleChange(val) {
+      const userList1 = [];
+      console.log(val)
+      const lastNumbers = val.map(array => {
+        // 过滤掉 Observer 对象，只保留数字
+        const filteredArray = array.filter(item => typeof item === 'number');
+        // 获取最后一个数字
+        return filteredArray[filteredArray.length - 1];
+      });
+      const promises = lastNumbers.map(item => {
+        this.userListFind.deptId = item;
+        return listUser(this.addDateRange(this.userListFind, this.dateRange)).then(response => {
+          console.log(response)
+          if (response.data.rows.length > 0) {
+            response.data.rows.forEach(item => {
+              userList1.push(
+                item.userName
+              );
+            });
+          }
+        });
+      });
+
+      this.cities = userList1;
+
+
+    },
     /** 查询公告列表 */
     getList() {
       this.loading = true;
@@ -294,6 +541,7 @@ export default {
               this.getList();
             });
           } else {
+            console.log(this.form)
             addNotice(this.form).then(response => {
               this.$modal.msgSuccess("新增成功");
               this.open = false;
@@ -317,3 +565,4 @@ export default {
   }
 };
 </script>
+