王志扬

ui/src/assets/icons/svg/notice.svg

@@ -0,0 +1 @@
+<svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"  width="200" height="200"><path d="M590.334 878.222c16.512 0 29.897 13.381 29.897 29.889 0 16.271-13.006 29.506-29.191 29.88l-0.706 0.009H411.17c-16.512 0-29.897-13.382-29.897-29.89 0-16.27 13.006-29.505 29.191-29.88l0.706-0.008h179.163zM503.163 108c16.276 0 29.514 13.002 29.889 29.184l0.008 0.705 0.003 47.633c156.339 16.105 278.272 148.186 278.272 308.738v269.003h99.768c16.512 0 29.897 13.382 29.897 29.89 0 16.27-13.006 29.506-29.192 29.88l-0.705 0.009H92.897C76.385 823.042 63 809.66 63 793.152c0-16.271 13.006-29.506 29.192-29.88l0.705-0.009h97.493V494.26c0-162.123 124.333-295.216 282.873-309.178l0.003-47.193c0-16.507 13.385-29.889 29.897-29.889z m-2.3 135.651c-137.06 0-248.43 109.969-250.644 246.465l-0.034 4.144v266.704h501.356V494.26c0-137.023-110-248.362-246.533-250.575l-4.145-0.034z" fill="#ffffff" ></path></svg>

ui/src/layout/components/Navbar.vue

@@ -6,6 +6,14 @@
 
     <div class="right-menu">
       <template v-if="device!=='mobile'">
+
+<!--        http://localhost/cpms/index.html#/sems/notice-->
+<!--        cpms/index.html#/sems/notice-->
+        <router-link to="/notice/details">
+          <svg-icon icon-class="notice" class="svgStyle" ></svg-icon>
+<!--          <i class="el-icon-bell" style="color: #FFFFFF ; margin-bottom: 5px"></i>-->
+        </router-link>
+
         <search id="header-search" class="right-menu-item" />
 
 <!--        <el-tooltip content="源码地址" effect="dark" placement="bottom">-->
@@ -22,6 +30,7 @@
 <!--          <size-select id="size-select" class="right-menu-item hover-effect" />-->
 <!--        </el-tooltip>-->
         <lang-select class="set-language right-menu-item hover-effect" />
+
       </template>
 
       <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
@@ -187,5 +196,13 @@ export default {
       }
     }
   }
+
+  .svgStyle{
+    margin-bottom: 11px;
+    margin-right: 5px;
+    height: 26px;
+    width: 26px;
+
+  }
 }
 </style>

ui/src/router/index.js

@@ -447,6 +447,20 @@ export const constantRoutes = [
       }
     ]
   },
+
+  {
+    path: '/notice',
+    component: Layout,
+    hidden: true,
+    children: [
+      {
+        path: 'details',
+        component: (resolve) => require(['@/views/system/notice/index.vue'], resolve),
+        name: 'details',
+        meta: { title: '通知公告' }
+      }
+    ]
+  },
 ]
 
 export default new Router({

ui/src/views/system/notice/index.vue

@@ -35,6 +35,8 @@
       </el-form-item>
     </el-form>
 
+
+
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
         <el-button
@@ -99,6 +101,13 @@
       </el-table-column>
       <el-table-column :label="$t('操作')" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-select"
+            @click="handleSelect (scope.row)"
+            v-hasPermi="['system:notice:select']"
+          >{{ $t('查看') }}</el-button>
           <el-button
             size="mini"
             type="text"
@@ -131,7 +140,7 @@
         <el-row>
           <el-col :span="12">
             <el-form-item :label="$t('公告标题')" prop="noticeTitle">
-              <el-input v-model="form.noticeTitle" :placeholder="$t('请输入') + $t('公告标题')" />
+              <el-input v-model="form.noticeTitle" :placeholder="$t('请输入') + $t('公告标题')"/>
             </el-form-item>
           </el-col>
           <el-col :span="12">
@@ -157,9 +166,9 @@
               </el-radio-group>
             </el-form-item>
           </el-col>
-          <el-col :span="24">
+          <el-col :span="24" >
             <el-form-item :label="$t('内容')">
-              <editor v-model="form.noticeContent" :min-height="192"/>
+                <editor  v-model="form.noticeContent"  :min-height="192" />
             </el-form-item>
           </el-col>
         </el-row>
@@ -169,11 +178,53 @@
         <el-button @click="cancel">{{ $t('取 消') }}</el-button>
       </div>
     </el-dialog>
+
+
+    <el-dialog v-dialogDrag :title="title" :visible.sync="checkView" width="780px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-row>
+          <el-col :span="12">
+            <el-form-item :label="$t('公告标题')" prop="noticeTitle">
+              <el-input v-model="form.noticeTitle" :placeholder="$t('请输入') + $t('公告标题')" v-bind:disabled="check"/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="$t('公告类型')" prop="noticeType">
+              <el-select v-model="form.noticeType" :placeholder="$t('请选择') + $t('公告类型')" v-bind:disabled="check">
+                <el-option
+                  v-for="dict in typeOptions"
+                  :key="dict.dictValue"
+                  :label="dict.dictLabel"
+                  :value="dict.dictValue"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item :label="$t('状态')">
+              <el-radio-group v-model="form.status">
+                <el-radio
+                  v-for="dict in statusOptions"
+                  :key="dict.dictValue"
+                  :label="dict.dictValue"
+                  v-bind:disabled="check"
+                >{{dict.dictLabel}}</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24" v-if="check">
+            <el-form-item :label="$t('内容')">
+              <p v-html="form.noticeContent" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import { listNotice, getNotice, delNotice, addNotice, updateNotice, exportNotice } from "@/api/system/notice";
+import { listNotice, getNotice, delNotice, addNotice, updateNotice } from "@/api/system/notice";
 import Editor from '@/components/Editor';
 
 export default {
@@ -183,6 +234,8 @@ export default {
   },
   data() {
     return {
+      checkView: false,
+      check: false,
       // 遮罩层
       loading: true,
       // 选中数组
@@ -201,6 +254,8 @@ export default {
       title: "",
       // 是否显示弹出层
       open: false,
+      detailsView: false,
+
       // 类型数据字典
       statusOptions: [],
       // 状态数据字典
@@ -213,6 +268,8 @@ export default {
         createBy: undefined,
         status: undefined
       },
+      // 弹出层数据
+      detailList: {},
       // 表单参数
       form: {},
       // 表单校验
@@ -223,7 +280,7 @@ export default {
         noticeType: [
           { required: true, message: this.$t('公告类型') + this.$t('不能为空'), trigger: "change" }
         ]
-      }
+      },
     };
   },
   created() {
@@ -265,8 +322,9 @@ export default {
         noticeTitle: undefined,
         noticeType: undefined,
         noticeContent: undefined,
-        status: "0"
+        status: "0",
       };
+      this.check = false;
       this.resetForm("form");
     },
     /** 搜索按钮操作 */
@@ -293,6 +351,7 @@ export default {
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
+      this.check = false,
       this.reset();
       const noticeId = row.noticeId || this.ids
       getNotice(noticeId).then(response => {
@@ -301,6 +360,18 @@ export default {
         this.title = this.$t('修改') + " " + this.$t('公告');
       });
     },
+    /** 查看 **/
+    handleSelect(row) {
+      this.reset();
+      const noticeId = row.noticeId || this.ids
+      getNotice(noticeId).then(response => {
+        this.form = response.data;
+        this.checkView = true;
+        this.check= true;
+        this.title = this.$t('查看') + " " + this.$t('公告');
+      });
+
+    },
     /** 提交按钮 */
     submitForm: function() {
       this.$refs["form"].validate(valid => {
@@ -338,3 +409,4 @@ export default {
   }
 };
 </script>
+