公告通知

src/api/system/notice.js

@@ -41,4 +41,33 @@ export function delNotice(noticeId) {
     url: '/system/notice/' + noticeId,
     method: 'delete'
   })
-}
+}
+
+export function updateAsUserDept(id) {
+  return request({
+    url: '/system/userDept/UpdateAsUserDept?id=' + id,
+    method: 'get'
+  })
+}
+
+export function getNum(id) {
+  return request({
+    url: '/system/userDept/GetNum?noticeId=' + id,
+    method: 'get'
+  })
+}
+
+export function getNoticeList(data) {
+  return request({
+    url: '/system/notice/GetNoticeList',
+    method: 'post',
+    data
+  })
+}
+
+
+
+
+
+
+

src/layout/components/Navbar.vue

@@ -14,6 +14,31 @@
         <el-tooltip content="布局大小" effect="dark" placement="bottom">
           <size-select id="size-select" class="right-menu-item hover-effect"/>
         </el-tooltip>
+        <el-button type="text" @click="dialogTableVisible = true" style="height: 50px; width: 50px;">
+          <i style="width: 50px; height: 50px;" class="el-icon-s-comment"></i>
+        </el-button>
+
+        <el-dialog title="消息通知" :visible.sync="dialogTableVisible">
+          <el-radio-group v-model="radio1">
+            <el-radio-button label="全部"></el-radio-button>
+            <el-radio-button label="通知"></el-radio-button>
+            <el-radio-button label="公告"></el-radio-button>
+          </el-radio-group>
+          <div style="margin-top: 10px">
+          <el-radio-group v-model="radio2">
+            <el-radio-button label="全部"></el-radio-button>
+            <el-radio-button label="已读"></el-radio-button>
+            <el-radio-button label="未读"></el-radio-button>
+          </el-radio-group>
+          </div>
+          <el-table :data="gridData">
+            <el-table-column property="date" label="日期" width="150">
+
+            </el-table-column>
+            <el-table-column property="name" label="姓名" width="200"></el-table-column>
+            <el-table-column property="address" label="地址"></el-table-column>
+          </el-table>
+        </el-dialog>
 
       </template>
 
@@ -29,6 +54,7 @@
           <el-dropdown-item @click.native="setting = true">
             <span>布局设置</span>
           </el-dropdown-item>
+
           <el-dropdown-item divided @click.native="logout">
             <span>退出登录</span>
           </el-dropdown-item>
@@ -46,15 +72,52 @@ import Hamburger from '@/components/Hamburger'
 import Screenfull from '@/components/Screenfull'
 import SizeSelect from '@/components/SizeSelect'
 import Search from '@/components/HeaderSearch'
+import Dept from "@/views/system/dept/index.vue";
 
 export default {
   components: {
+    Dept,
     Breadcrumb,
     TopNav,
     Hamburger,
     Screenfull,
     SizeSelect,
-    Search
+    Search,
+  },
+  data() {
+    return {
+      radio1: '上海',
+      radio2: '上海',
+
+      gridData: [{
+        date: '2016-05-02',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-04',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-01',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-03',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }],
+      dialogTableVisible: false,
+      // form: {
+      //   name: '',
+      //   region: '',
+      //   date1: '',
+      //   date2: '',
+      //   delivery: false,
+      //   type: [],
+      //   resource: '',
+      //   desc: ''
+      // },
+    }
   },
   computed: {
     ...mapGetters([
@@ -80,6 +143,14 @@ export default {
     }
   },
   methods: {
+    handleClose(done) {
+      this.$confirm('确认关闭？')
+        .then(_ => {
+          done();
+        })
+        .catch(_ => {});
+    },
+
     toggleSideBar() {
       this.$store.dispatch('app/toggleSideBar')
     },

src/views/system/dept/index.vue

@@ -18,6 +18,7 @@
             :value="dict.value"
           />
         </el-select>
+
       </el-form-item>
       <el-form-item>
         <el-button icon="el-icon-search" size="mini" type="primary" @click="handleQuery">搜索</el-button>
@@ -155,6 +156,15 @@
             </el-form-item>
           </el-col>
         </el-row>
+        <el-row>
+          <el-col>
+            <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">{{city}}</el-checkbox>
+            </el-checkbox-group>
+          </el-col>
+        </el-row>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
@@ -168,13 +178,19 @@
 import {addDept, delDept, getDept, listDept, listDeptExcludeChild, updateDept} from "@/api/system/dept";
 import Treeselect from "@riophae/vue-treeselect";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
-
+const cityOptions = ['上海', '北京', '广州', '深圳'];
 export default {
   name: "Dept",
   dicts: ['sys_normal_disable'],
   components: {Treeselect},
+
   data() {
     return {
+
+      checkAll: false,
+      checkedCities: ['上海', '北京'],
+      cities: cityOptions,
+      isIndeterminate: true,
       // 遮罩层
       loading: true,
       // 显示搜索条件
@@ -230,6 +246,16 @@ export default {
     this.getList();
   },
   methods: {
+    handleCheckAllChange(val) {
+      this.checkedCities = val ? cityOptions : [];
+      this.isIndeterminate = false;
+    },
+    handleCheckedCitiesChange(value) {
+      let checkedCount = value.length;
+      this.checkAll = checkedCount === this.cities.length;
+      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
+    },
+
     /** 查询部门列表 */
     getList() {
       this.loading = true;

src/views/system/notice/index.vue

@@ -98,6 +98,14 @@
         </template>
       </el-table-column>
       <el-table-column align="center" class-name="small-padding fixed-width" label="操作">
+        <el-button
+          v-hasPermi="['system:notice:edit']"
+          icon="el-icon-edit"
+          size="mini"
+          type="text"
+          @click="noticeDetails(scope.row.noticeId)"
+        >通知详情
+        </el-button>
         <template slot-scope="scope">
           <el-button
             v-hasPermi="['system:notice:edit']"
@@ -147,6 +155,20 @@
                 ></el-option>
               </el-select>
             </el-form-item>
+
+            <el-col v-show="form.noticeType == 2">
+              <span style="margin-right: 15px;margin-left: 10px"><b>公告时间</b></span>
+              <el-date-picker
+                v-model="form.time"
+                type="datetimerange"
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期">
+              </el-date-picker>
+            </el-col>
+
+
+
           </el-col>
           <el-col :span="24">
             <el-form-item label="状态">
@@ -166,23 +188,132 @@
             </el-form-item>
           </el-col>
         </el-row>
+        <el-row>
+          <el-col>
+            <div class="block">
+              <el-checkbox v-model="checked">全选</el-checkbox>
+              <br>
+              <span class="demonstration">部门人员</span>
+              <el-cascader
+                v-model="value"
+                :options="options"
+                :props="{ expandTrigger: 'hover' }"
+                @change="handleChange"></el-cascader>
+            </div>
+          </el-col>
+        </el-row>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
         <el-button @click="cancel">取 消</el-button>
       </div>
+      <el-tabs v-show="form.noticeType == 1" v-model="activeName" @tab-click="handleClick">
+        <el-tab-pane label="部门" name="section">
+          {{ form.sectionList }}
+          <el-cascader
+            v-model="form.sectionList"
+            :options="options1"
+            :props="props"
+            style="width: 350px"
+            clearable>
+          </el-cascader>
+        </el-tab-pane>
+        <el-tab-pane label="特定人员" name="personnel">
+          {{ form.personnelList }}
+          <el-select v-model="form.personnelList" multiple placeholder="请选择特定人员">
+            <el-option
+              v-for="item in options"
+              :key="item.userId"
+              :label="item.nickName"
+              :value="item.userId">
+            </el-option>
+          </el-select>
+        </el-tab-pane>
+      </el-tabs>
+    </el-dialog>
+
+    <el-dialog
+      title="通知详情"
+      :visible.sync="numVisable"
+      width="40%">
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <div>
+            <el-statistic
+              :value="asUserDeptNum.num"
+              title="总共通知数量"
+            ></el-statistic>
+          </div>
+        </el-col>
+        <el-col :span="6">
+          <div>
+            <el-statistic
+              :value="asUserDeptNum.readNum"
+              title="已阅读通知数量"
+            ></el-statistic>
+          </div>
+        </el-col>
+        <el-col :span="6">
+          <div>
+            <el-statistic
+              :value="asUserDeptNum.noReadNum"
+              title="未阅读通知数量"
+            ></el-statistic>
+          </div>
+        </el-col>
+      </el-row>
+      <span slot="footer" class="dialog-footer">
+    <el-button @click="numVisable = false">取 消</el-button>
+    <el-button type="primary" @click="numVisable = false">确 定</el-button>
+  </span>
     </el-dialog>
   </div>
 </template>
 
 <script>
 import {addNotice, delNotice, getNotice, listNotice, updateNotice} from "@/api/system/notice";
+import {listUser} from "@/api/system/user";
+import {listDept} from "@/api/system/dept";
+const cityOptions = ['上海', '北京', '广州', '深圳'];
 
 export default {
   name: "Notice",
   dicts: ['sys_notice_status', 'sys_notice_type'],
   data() {
     return {
+
+      sectionList:[],
+      personnelList:[],
+      props: { multiple: true },
+      options1: [],
+      options: [],
+
+      queryParam: {
+        pageNum: 1,
+        pageSize: 10,
+        noticeTitle: undefined,
+        createBy: undefined,
+        status: undefined
+      },
+
+      asUserDeptNum: {},
+      numVisable: false,
+
+      activeName: '部门',
+      checkAll: false,
+      checkedCities: ['上海', '北京'],
+      cities: cityOptions,
+      isIndeterminate: true,
+
+      status: "0",
+
+
+
+
+      value:[],
+
+      listDeptList:null,
+
       // 遮罩层
       loading: true,
       // 选中数组
@@ -224,85 +355,166 @@ export default {
   },
   created() {
     this.getList();
+    this.listUserAll();
   },
   methods: {
-    /** 查询公告列表 */
+
-    getList() {
+    listDept(this.queryParam
-      this.loading = true;
+).then(response => {
-      listNotice(this.queryParams).then(response => {
+  this.options1 = this.handleTree(response.data, "deptId");
-        this.noticeList = response.data.rows;
+  console.log(this.options1)
-        this.total = response.data.total;
+  this.options1.forEach(op => {
-        this.loading = false;
+    this.$set(op, 'value', op.deptId);
-      });
+    delete op.deptId;
-    },
+    this.$set(op, 'label', op.deptName);
-    // 取消按钮
+    delete op.deptName;
-    cancel() {
+    if (op.children) {
-      this.open = false;
+      this.recursion(op.children)
-      this.reset();
+    }
-    },
+  })
-    // 表单重置
+  this.loading = false;
-    reset() {
+})
-      this.form = {
+listUser(this.addDateRange(this.queryParams, [])).then(response => {
-        noticeId: undefined,
+  this.options = response.data.rows;
-        noticeTitle: undefined,
+  console.log(this.options)
-        noticeType: undefined,
+}),
-        noticeContent: undefined,
+
-        status: "0"
+  noticeDetails(noticeId)
-      };
+{
-      this.resetForm("form");
+  this.numVisable = true
-    },
+  getNum(noticeId).then(res => {
-    /** 搜索按钮操作 */
+    this.asUserDeptNum = res.data
-    handleQuery() {
+  })
-      this.queryParams.pageNum = 1;
+};
-      this.getList();
+//部门递归
-    },
+recursion(data)
-    /** 重置按钮操作 */
+{
-    resetQuery() {
+  data.forEach(da => {
-      this.resetForm("queryForm");
+    this.$set(da, 'value', da.deptId);
-      this.handleQuery();
+    delete da.deptId;
-    },
+    this.$set(da, 'label', da.deptName);
-    // 多选框选中数据
+    delete da.deptName;
-    handleSelectionChange(selection) {
+    if (da.children) {
-      this.ids = selection.map(item => item.noticeId)
+      this.recursion(da.children)
-      this.single = selection.length != 1
+    }
-      this.multiple = !selection.length
+  })
-    },
+};
-    /** 新增按钮操作 */
+//tab选择
-    handleAdd() {
+
-      this.reset();
+//查询指定的人
-      this.open = true;
+listUserAll()
-      this.title = "添加公告";
+{
-    },
+  listDept().then(res => {
-    /** 修改按钮操作 */
+    this.listDeptList = res.data.rows
-    handleUpdate(row) {
+  })
-      this.reset();
+};
-      const noticeId = row.noticeId || this.ids
+
-      getNotice(noticeId).then(response => {
+handleCheckAllChange(val)
-        this.form = response.data;
+{
-        this.open = true;
+  this.checkedCities = val ? cityOptions : [];
-        this.title = "修改公告";
+  this.isIndeterminate = false;
-      });
+};
-    },
+
-    /** 提交按钮 */
+handleCheckedCitiesChange(value)
-    submitForm: function () {
+{
-      this.$refs["form"].validate(valid => {
+  let checkedCount = value.length;
-        if (valid) {
+  this.checkAll = checkedCount === this.cities.length;
-          if (this.form.noticeId != undefined) {
+  this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
-            updateNotice(this.form).then(response => {
+};
-              this.$modal.msgSuccess("修改成功");
+
-              this.open = false;
+
-              this.getList();
+/** 查询公告列表 */
-            });
+getList()
-          } else {
+{
-            addNotice(this.form).then(response => {
+  this.loading = true;
-              this.$modal.msgSuccess("新增成功");
+  listNotice(this.queryParams).then(response => {
-              this.open = false;
+    this.noticeList = response.data.rows;
-              this.getList();
+    this.total = response.data.total;
-            });
+    this.loading = false;
-          }
+  });
-        }
+};
-      });
+
-    },
+// 取消按钮
+cancel()
+{
+  this.open = false;
+  this.reset();
+};
+
+// 表单重置
+reset()
+{
+  this.form = {
+    noticeId: undefined,
+    noticeTitle: undefined,
+    noticeType: undefined,
+    noticeContent: undefined,
+    status: "0"
+  };
+  this.resetForm("form");
+};
+
+/** 搜索按钮操作 */
+handleQuery()
+{
+  this.queryParams.pageNum = 1;
+  this.getList();
+};
+
+/** 重置按钮操作 */
+resetQuery()
+{
+  this.resetForm("queryForm");
+  this.handleQuery();
+};
+
+// 多选框选中数据
+handleSelectionChange(selection)
+{
+  this.ids = selection.map(item => item.noticeId)
+  this.single = selection.length != 1
+  this.multiple = !selection.length
+};
+/** 新增按钮操作 */
+handleAdd()
+{
+  this.reset();
+  this.open = true;
+  this.title = "添加公告";
+}
+,
+/** 修改按钮操作 */
+handleUpdate(row)
+{
+  this.reset();
+  const noticeId = row.noticeId || this.ids
+  getNotice(noticeId).then(response => {
+    this.form = response.data;
+    this.open = true;
+    this.title = "修改公告";
+  });
+}
+,
+/** 提交按钮 */
+submitForm: function () {
+  this.$refs["form"].validate(valid => {
+    if (valid) {
+      if (this.form.noticeId != undefined) {
+        updateNotice(this.form).then(response => {
+          this.$modal.msgSuccess("修改成功");
+          this.open = false;
+          this.getList();
+        });
+      } else {
+        addNotice(this.form).then(response => {
+          this.$modal.msgSuccess("新增成功");
+          this.open = false;
+          this.getList();
+        });
+      }
+    }
+  });
+
     /** 删除按钮操作 */
     handleDelete(row) {
       const noticeIds = row.noticeId || this.ids