From eff2396615c275b2ce5abbecb974fd5e81b5ae2c Mon Sep 17 00:00:00 2001
From: x_ying <2438792676@qq.com>
Date: Wed, 13 Jul 2022 17:35:36 +0800
Subject: [PATCH] =?UTF-8?q?=E7=B3=BB=E7=BB=9F=E7=AE=A1=E7=90=86=20?=
 =?UTF-8?q?=E9=80=9A=E7=9F=A5=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/styles/lend-manage.scss       |  14 +-
 src/views/system/notifyManage/data1.json |  25 +++
 src/views/system/notifyManage/index.vue  | 216 +++++++++++++++++++++++
 3 files changed, 252 insertions(+), 3 deletions(-)
 create mode 100644 src/views/system/notifyManage/data1.json
 create mode 100644 src/views/system/notifyManage/index.vue

diff --git a/src/assets/styles/lend-manage.scss b/src/assets/styles/lend-manage.scss
index f094a62..8d77d2c 100644
--- a/src/assets/styles/lend-manage.scss
+++ b/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;
 }
\ No newline at end of file
diff --git a/src/views/system/notifyManage/data1.json b/src/views/system/notifyManage/data1.json
new file mode 100644
index 0000000..6a08b07
--- /dev/null
+++ b/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":""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/src/views/system/notifyManage/index.vue b/src/views/system/notifyManage/index.vue
new file mode 100644
index 0000000..950c1b1
--- /dev/null
+++ b/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>