通知管理

src/api/notify.js

+import request from '@/utils/request'
+
+export function getNotify(data) {
+  return request({
+    url: '/notify/getNotify',
+    method: 'post',
+    data })
+}
+
+export function saveNotify(data) {
+  return request({
+    url: '/notify/save',
+    method: 'post',
+    data
+  })
+}
+
+export function deleteNotify(query) {
+  return request({
+    url: '/notify/delete',
+    method: 'get',
+    params: query
+  })
+}

src/router/modules/docker.js

@@ -67,6 +67,12 @@ const dockersRouter = {
       component: () => import('@/views/cluster/cluster'),
       name: '设置集群',
       meta: { title: '集群设置', roles: ['admin'] }
+    },
+    {
+      path: 'notify',
+      component: () => import('@/views/docker/notify'),
+      name: '通知管理',
+      meta: { title: '通知管理', roles: ['admin'] }
     }
   ]
 }

src/views/docker/envDetail.vue

 <template>
-  <div>
-    <div style="padding:10px 20px" >
+  <div >
+    <div style="padding:5px 20px;height: 30px;" >
       <div style="float:right;font-size:13px">
         <span>自动刷新</span>
         <el-switch v-model="timer" @change="refreshInterval"/>
@@ -8,7 +8,16 @@
       </div>
     </div>
 
-    <div class="shadow-content" >
+    <el-alert
+      type="info"
+      style=" font-size: 14px;"
+      show-icon>
+      <slot name="description">
+        <p v-for="item in notify" :key="item._id">{{ item.content }}</p>
+      </slot>
+    </el-alert>
+
+    <div class="shadow-content" style="margin-top:20px" >
       <div class="warn-content">
         <svg-icon icon-class="service"/>
         基础服务
@@ -427,6 +436,7 @@ import {
 import JsonEditor from '@/components/JsonEditor'
 import permission from '@/directive/permission/index.js' // 权限判断指令
 import { getHostName } from '@/api/proconfig'
+import { getNotify } from '@/api/notify'
 export default {
   components: { JsonEditor },
   directives: { permission },
@@ -481,13 +491,19 @@ export default {
       moreShow: false,
       lostShow: false,
       moreArray: [],
-      lostArray: []
+      lostArray: [],
+      notify: []
     }
   },
   created() {
     getType().then(res => {
       this.typeList = res.data
     })
+    const curDate = new Date()
+    const date = new Date(curDate.getTime() - 2 * 24 * 60 * 60 * 1000)
+    getNotify({ updatedAt: { $gte: date }}).then(res => {
+      this.notify = res.data
+    })
     this.namespace = this.$route.params.name
     clearInterval(this.timerFunction)
     this.timerFunction = null

src/views/docker/notify.vue

+<template>
+  <div class="app-container">
+    <div class="filter-container">
+      <el-input v-model="listQuery.content" placeholder="内容" clearable style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter"/>
+      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">{{ $t('table.search') }}</el-button>
+      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">新建</el-button>
+    </div>
+
+    <el-table
+      :data="notifyList"
+      border
+      fit
+      highlight-current-row
+      style="width: 100%;">
+
+      <el-table-column :label="$t('table.id')" prop="id" align="center" width="65">
+        <template slot-scope="scope">
+          <span>{{ scope.$index + 1 }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="通知内容" align="center">
+        <template slot-scope="{row}">
+          <template v-if="row.edit">
+            <el-input v-model="row.content" size="small" />
+            <el-button
+              size="small"
+              type="warning"
+              @click="cancelEdit(row)"
+            >
+              取消
+            </el-button>
+          </template>
+          <span v-else>{{ row.content }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column prop="updateUser" width="80" label="编辑者" align="center"/>
+
+      <el-table-column label="编辑时间" width="200" align="center">
+        <template slot-scope="scope">
+          <span >{{ scope.row.updatedAt | formatDate }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column :label="$t('table.actions')" align="center" width="90" class-name="small-padding fixed-width">
+        <template slot-scope="{row}">
+          <el-button
+            v-if="row.edit"
+            type="success"
+            size="small"
+            @click="createData(row)"
+          >
+            确定
+          </el-button>
+          <el-button v-else type="primary" size="small" @click="row.edit=!row.edit">{{ $t('table.edit') }}</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" /> -->
+
+    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
+      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="105px" style="width: 90%; margin-left:40px;">
+
+        <el-form-item label="通知内容" style="width:100%">
+          <el-input :autosize="{ minRows: 2, maxRows: 4}" v-model="temp.content" type="textarea" placeholder="Please input"/>
+        </el-form-item>
+
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormVisible = false">{{ $t('table.cancel') }}</el-button>
+        <el-button type="primary" @click="createData()">{{ $t('table.confirm') }}</el-button>
+      </div>
+    </el-dialog>
+
+  </div>
+</template>
+
+<script>
+import { getNotify, saveNotify } from '@/api/notify'
+import waves from '@/directive/waves' // Waves directive
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import moment from 'moment'
+
+export default {
+  name: 'Notify',
+  components: { Pagination },
+  directives: { waves },
+  filters: {
+    formatDate(date, pattern = 'YYYY-MM-DD HH:mm:ss') {
+      return moment(date).format(pattern)
+    }
+  },
+  data() {
+    return {
+      notifyList: [],
+      listQuery: {},
+      temp: {},
+      dialogFormVisible: false,
+      dialogStatus: '',
+      textMap: {
+        update: 'Edit',
+        create: 'Create'
+      },
+      rules: {}
+    }
+  },
+  created() {
+    this.getNotify()
+  },
+  methods: {
+    getNotify() {
+      for (const prop in this.listQuery) {
+        if (this.listQuery[prop] === '') {
+          delete this.listQuery[prop]
+        }
+      }
+      getNotify(this.listQuery).then(res => {
+        this.notifyList = res.data.map(item => {
+          this.$set(item, 'edit', false)
+          item.originalContent = item.content
+          return item
+        })
+      })
+    },
+
+    handleFilter() {
+      this.getNotify()
+    },
+
+    resetTemp() {
+      this.temp = {}
+    },
+
+    handleCreate() {
+      this.resetTemp()
+      this.dialogStatus = 'create'
+      this.dialogFormVisible = true
+    },
+
+    createData(row) {
+      this.temp = Object.assign(this.temp, row)
+      this.temp.updateUser = this.$store.getters.name
+      saveNotify(this.temp).then(() => {
+        this.dialogFormVisible = false
+        this.$notify({
+          title: '成功',
+          message: '保存成功',
+          type: 'success',
+          duration: 2000
+        })
+        this.getNotify()
+      })
+    },
+
+    cancelEdit(row) {
+      row.content = row.originalContent
+      row.edit = false
+      // this.$message({
+      //   message: 'The notify has been restored to the original value',
+      //   type: 'warning'
+      // })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.el-form-item {
+  width: 600px;
+}
+</style>