系统管理 通知管理

src/assets/styles/lend-manage.scss

@@ -116,9 +116,17 @@ color:#F65163;
   height: 40px;
   line-height: 40px;
 }
-p{
-  display: inline-block;
-}
+
 .warehouse-svg{
   margin:0 10px 1px 0;
 }
+::v-deep .el-tag.el-tag--info{
+  height: 26px;
+  line-height: 26px;
+  background-color: #13439E;
+  border: none;
+  color: #fff;
+}
+::v-deep .el-tag.el-tag--info .el-tag__close{
+  background-color: #fff;
+}

src/views/system/notifyManage/data1.json

@@ -0,0 +1,25 @@
+{
+  "rows":[
+    {
+      "notification":"内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容",
+      "msgType":"系统通知",
+      "pushObj":"全部用户",
+      "sendRole":"管理员",
+      "sendTime":""
+    },
+    {
+      "notification":"内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容",
+      "msgType":"系统通知",
+      "pushObj":"全部用户",
+      "sendRole":"管理员",
+      "sendTime":""
+    },
+    {
+      "notification":"内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容",
+      "msgType":"系统通知",
+      "pushObj":"全部用户",
+      "sendRole":"管理员",
+      "sendTime":""
+    }
+  ]
+}

src/views/system/notifyManage/index.vue

@@ -0,0 +1,216 @@
+<template>
+  <div>
+    <div class="head-container">
+      <el-button icon="el-icon-s-promotion" size="mini" @click="handleSend">发布</el-button>
+      <el-button icon="el-icon-edit" size="mini" :disabled="!(selections.length === 1)">修改</el-button>
+      <el-button icon="el-icon-delete" size="mini" :disabled="!selections.length">删除</el-button>
+    </div>
+    <div class="app-container container-wrap">
+      <span class="right-top-line" />
+      <span class="left-bottom-line" />
+      <!--表格渲染-->
+      <!-- :cell-class-name="cell"
+        @selection-change="selectionChangeHandler"
+         -->
+      <el-table
+        ref="table"
+        :data="tableData"
+        style="width: 100%;"
+        height="calc(100vh - 245px)"
+        @row-click="clickRowHandler"
+        @selection-change="selectionChangeHandler"
+      >
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column type="index" label="序号" width="100" align="center" />
+        <el-table-column prop="notification" :show-overflow-tooltip="true" label="通知内容" min-width="500" align="center" />
+        <el-table-column prop="msgType" label="消息类型" align="center" min-width="150" />
+        <el-table-column prop="pushObj" label="推送对象" align="center" min-width="150" />
+        <el-table-column prop="sendRole" label="推送人" align="center" min-width="150" />
+        <el-table-column prop="sendTime" label="推送时间" align="center" min-width="180" />
+        <!-- <el-table-column prop="bindState" label="绑定状态" align="center">
+          <template slot-scope="scope">
+            <span class="clear" style="width:76px">{{ scope.row.bindState }}</span>
+          </template>
+        </el-table-column> -->
+      </el-table>
+      <!-- 发布 -->
+      <el-dialog append-to-body :close-on-click-modal="false" :visible.sync="sendVisible" title="发布通知" @close="handleClose">
+        <span class="dialog-right-top" />
+        <span class="dialog-left-bottom" />
+        <div class="setting-dialog">
+          <el-form :model="sendForm" size="small" label-width="80px" style="margin-left:85px">
+            <el-form-item label="消息类型" prop="msgType" class="down-select">
+              <el-select v-model="sendForm.msgType" placeholder="请选择" style="width:315px">
+                <el-option
+                  v-for="item in msgTypeOptions"
+                  :key="item.name"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="发布内容" prop="notification" style="margin-bottom:8px">
+              <textarea v-model="sendForm.notification" cols="38" rows="6" />
+            </el-form-item>
+            <el-form-item label="推送对象" prop="pushObj">
+              <div class="push">
+                <label><input v-model="sendForm.pushObj" type="radio" name="push" value="用户"><span>用户</span></label>
+                <label><input v-model="sendForm.pushObj" type="radio" name="push" value="设备"><span>设备</span></label>
+              </div>
+            </el-form-item>
+            <el-form-item label="选择对象" prop="paramName">
+              <el-select v-model="sendForm.sendObj" multiple clearable placeholder="请选择" style="width:315px" @change="handelChange">
+                <el-checkbox v-model="checked" @change="selectAll">全选</el-checkbox>
+                <el-option v-for="item in sendObjOptions" :key="item.value" :label="item.label" :value="item.value" />
+              </el-select>
+            </el-form-item>
+          </el-form>
+          <div slot="footer" class="dialog-footer">
+            <el-button type="primary" @click="handleSave">保存</el-button>
+          </div>
+        </div>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import data1 from './data1.json'
+export default {
+  name: 'NotifyManage',
+  data() {
+    return {
+      tableData: [],
+      selections: [],
+      sendVisible: false,
+      sendForm: {
+        msgType: '1',
+        notification: '',
+        pushObj: '用户',
+        sendObj: []
+      },
+      checked: '',
+      msgTypeOptions: [
+        { value: '1', label: '系统通知' },
+        { value: '2', label: '报警消息' },
+        { value: '3', label: '借还消息' },
+        { value: '4', label: '下载消息' }
+      ],
+      personOptions: [
+        { value: '1', label: '张三' },
+        { value: '2', label: '李四' },
+        { value: '3', label: '王五' },
+        { value: '4', label: '张三' },
+        { value: '5', label: '李四' },
+        { value: '6', label: '王五' },
+        { value: '7', label: '张三' },
+        { value: '8', label: '李四' },
+        { value: '9', label: '王五' }
+      ],
+      devOptions: [
+        { value: '1', label: '设备1' },
+        { value: '2', label: '设备2' },
+        { value: '3', label: '设备3' }
+      ]
+    }
+  },
+  computed: {
+    sendObjOptions() {
+      if (this.sendForm.pushObj === '用户') {
+        return this.personOptions
+      } else {
+        return this.devOptions
+      }
+    }
+  },
+  created() {
+    this.getData()
+  },
+  methods: {
+    getData() {
+      this.tableData = data1.rows
+    },
+    clickRowHandler(row) {
+      // this.$refs.table.clearSelection()
+      this.$refs.table.toggleRowSelection(row) // 单选选中
+    },
+    selectionChangeHandler(val) {
+      this.selections = val
+    },
+    // 发布
+    handleSend() {
+      this.sendVisible = true
+    },
+    // 保存
+    handleSave() {
+      this.sendVisible = false
+    },
+    handleClose() {
+
+    },
+    // 选择器 推送对象
+    handelChange(val) {
+      if (val.length === this.sendObjOptions.length) {
+        this.checked = true
+      } else {
+        this.checked = false
+      }
+    },
+    selectAll(val) {
+      this.sendForm.sendObj = []
+      if (val) {
+        this.sendForm.sendObj = this.sendObjOptions.map(item => item.value)
+      } else {
+        this.sendForm.sendObj = []
+      }
+      // console.log(this.sendForm.sendObj)
+    }
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '~@/assets/styles/lend-manage.scss';
+.head-container{
+  padding-bottom: 0;
+}
+.container-wrap{
+  min-height: calc(100vh - 242px)
+}
+textarea{
+  background-color: #021941;
+  border: 1px solid #339CFF;
+  border-radius: 3px;
+  &:focus{
+    outline: none;
+  }
+  caret-color: #fff;
+  color: #fff;
+  padding: 10px 12px;
+  font-size: 14px;
+}
+.push{
+  width: 315px;
+  border: 1px solid #339CFF;
+  border-radius: 3px;
+  padding-left: 14px;
+  display: flex;
+  label{
+    display: flex;
+    align-items: center;
+    margin-right: 50px;
+  span{
+    color: #3A99FD;
+    margin-left: 10px;
+  }
+  }
+}
+.el-checkbox{
+  display: flex;
+  justify-content: right;
+  align-items: center;
+  padding-right: 20px;
+}
+
+</style>