通知管理

src/views/system/notifyManage/index.vue

@@ -1,32 +1,39 @@
 <template>
-  <div>
+  <div class="app-container  row-container">
     <div class="head-container">
+      <div class="head-search">
+        <!-- 搜索 -->
+        <el-input v-model="query.blurry" clearable size="small" placeholder="输入关键字搜索" prefix-icon="el-icon-search" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
+        <date-range-picker v-model="query.createTime" class="date-item" />
+        <rrOperation />
+      </div>
       <el-button class="iconfont icon-fabu-fanbai" size="mini" @click="handleSend">发布</el-button>
-      <el-button icon="el-icon-edit" size="mini" :disabled="!(selections.length === 1)" @click="handleEdit">修改</el-button>
-      <el-button icon="el-icon-delete" size="mini" :disabled="!selections.length" @click="handleDel">删除</el-button>
+      <!-- <el-button icon="el-icon-edit" size="mini" :disabled="!(selections.length === 1)" @click="handleEdit">修改</el-button>
+      <el-button icon="el-icon-delete" size="mini" :disabled="!selections.length" @click="handleDel">删除</el-button> -->
     </div>
-    <div class="app-container container-wrap">
+    <div class="container-wrap">
       <span class="right-top-line" />
       <span class="left-bottom-line" />
       <!--表格渲染-->
+      <!-- height="calc(100vh - 294px)"
+        @row-click="clickRowHandler"
+        @selection-change="selectionChangeHandler" -->
       <el-table
         ref="table"
         v-loading="isLoading"
         :default-sort="{prop: 'create_time', order: 'descending'}"
         :data="tableData"
         style="width: 100%;"
-        height="calc(100vh - 294px)"
-        @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="noticeContent" :show-overflow-tooltip="true" label="通知内容" min-width="200" align="center" />
+        <!-- <el-table-column type="selection" width="55" align="center" /> -->
+        <el-table-column type="index" label="序号" width="55" align="center" />
         <el-table-column prop="noticeType" label="消息类型" align="center" min-width="150">
           <!-- <span v-if="scope.row.noticeType===1">系统消息</span> -->
           <span>系统消息</span>
         </el-table-column>
-        <el-table-column prop="pushTo" :show-overflow-tooltip="true" label="推送对象" align="center" min-width="150">
+        <el-table-column prop="title" :show-overflow-tooltip="true" label="标题" min-width="150" align="center" />
+        <el-table-column prop="noticeContent" :show-overflow-tooltip="true" label="内容" align="center" />
+        <el-table-column prop="pushTo" :show-overflow-tooltip="true" label="发送对象" align="center">
           <template slot-scope="scope">
             <span v-if="typeof(scope.row.pushTo)==='string'">{{ scope.row.pushTo }}</span>
             <div v-if="!(typeof(scope.row.pushTo)==='string')" class="tag-hidden">
@@ -35,8 +42,8 @@
             </div>
           </template>
         </el-table-column>
-        <el-table-column prop="update_by" label="推送人" align="center" min-width="150" />
-        <el-table-column prop="create_time" :sortable="true" label="推送时间" align="center" min-width="180">
+        <el-table-column prop="update_by" label="创建人" align="center" min-width="100" />
+        <el-table-column prop="create_time" :sortable="true" label="创建时间" align="center" min-width="180">
           <template slot-scope="scope">
             <div>{{ scope.row.create_time | parseTime }}</div>
           </template>
@@ -51,62 +58,89 @@
         @size-change="sizeChangeHandler($event)"
         @current-change="pageChangeHandler"
       />
-      <!-- 发布 -->
-      <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 ref="formDom" :rules="rules" :model="sendForm" size="small" label-width="80px" style="margin-left:85px">
-            <el-form-item label="消息类型" prop="msgType" class="down-select">
-              <el-select v-model="noticeType" placeholder="请选择" style="width:315px">
-                <el-option
-                  v-for="item in msgTypeOptions"
-                  :key="item.name"
-                  :label="item.label"
-                  :value="item.value"
-                  :disabled="item.disabled"
-                />
-              </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="">
-              <el-radio-group v-model="pushObj" @change="pushObjChange">
-                <el-radio label="用户">用户</el-radio>
-                <el-radio label="设备">设备</el-radio>
-              </el-radio-group>
-            </el-form-item>
-            <el-form-item label="选择对象" prop="paramName">
-              <el-select ref="selectBox" v-model="selectOptions" class="select" multiple :collapse-tags="showTags" clearable placeholder="请选择" style="width:315px" @change="changeSelect">
-                <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 v-loading="btnloading" type="primary" @click="handleSave">保存</el-button>
-          </div>
+    </div>
+    <!-- 发布 -->
+    <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 ref="formDom" :rules="rules" :model="sendForm" size="small" label-width="100px">
+          <el-form-item label="消息类型" prop="msgType" class="down-select">
+            <el-input v-model="sendForm.msgType" disabled />
+            <!-- <el-select v-model="noticeType" placeholder="请选择">
+              <el-option
+                v-for="item in msgTypeOptions"
+                :key="item.name"
+                :label="item.label"
+                :value="item.value"
+                :disabled="item.disabled"
+              />
+            </el-select> -->
+          </el-form-item>
+          <el-form-item label="标题" prop="title">
+            <el-input v-model="sendForm.title" placeholder="请输入" style="width: 580px;" />
+          </el-form-item>
+          <el-form-item label="内容" prop="notification">
+            <el-input v-model="sendForm.notification" placeholder="请输入" type="textarea" rows="3" style="width: 580px;" />
+          </el-form-item>
+          <el-form-item label="发送对象" prop="pushObj">
+            <el-input v-model="sendForm.pushObj" placeholder="点击下方按钮选择对象" type="textarea" rows="6" style="width: 580px;" />
+          </el-form-item>
+          <span class="select-btn iconfont icon-shezhi" @click="sendObjVisible = true" />
+          <!-- <el-form-item label="发送对象" prop="">
+            <el-radio-group v-model="pushObj" @change="pushObjChange">
+              <el-radio label="用户">用户</el-radio>
+              <el-radio label="设备">设备</el-radio>
+            </el-radio-group>
+          </el-form-item> -->
+          <!-- <el-form-item label="发送对象" prop="paramName">
+            <el-select ref="selectBox" v-model="selectOptions" class="select" multiple :collapse-tags="showTags" clearable placeholder="请选择" style="width:588px" @change="changeSelect">
+              <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="text" @click="sendVisible = false">取消</el-button>
+          <el-button v-loading="btnloading" type="primary" @click="handleSave">保存</el-button>
         </div>
-      </el-dialog>
-      <!-- 删除 -->
-      <el-dialog :visible.sync="delVisible" title="提示">
-        <span class="dialog-right-top" />
-        <span class="dialog-left-bottom" />
-        <div class="setting-dialog">
-          <p class="delMsg">确定删除所选消息吗？</p>
-          <div slot="footer" class="dialog-footer">
-            <el-button type="primary" @click="handleDelConfirm">确定</el-button>
-          </div>
+      </div>
+    </el-dialog>
+    <!-- 选择发送对象 -->
+    <el-dialog append-to-body :close-on-click-modal="false" :visible.sync="sendObjVisible" title="发布通知" @close="handleClose">
+      <span class="dialog-right-top" />
+      <span class="dialog-left-bottom" />
+      <div class="setting-dialog">
+        <el-form ref="selectObjForm" :rules="rulesObj" :model="selectObjForm" size="small" label-width="100px">
+          <el-form-item label="发送对象" prop="sendObj" class="down-select">
+            <el-radio-group v-model="selectObjForm.sendObj" size="mini" style="width: 178px">
+              <el-radio-button label="0">用户</el-radio-button>
+              <el-radio-button label="1">设备</el-radio-button>
+            </el-radio-group>
+          </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button type="text" @click="sendObjVisible = false">取消</el-button>
+          <el-button type="primary">保存</el-button>
         </div>
-      </el-dialog>
-    </div>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import { noticeCreate, getAllDev, getAllUser, getNoticeList, noticeDel } from '@/api/system/logs'
+import CRUD, { presenter, header, form, crud } from '@crud/crud'
+import rrOperation from '@crud/RR.operation'
+import DateRangePicker from '@/components/DateRangePicker'
+// noticeDel
+import { noticeCreate, getAllDev, getAllUser, getNoticeList } from '@/api/system/logs'
+const defaultForm = {}
 export default {
   name: 'NotifyManage',
+  components: { rrOperation, DateRangePicker },
+  cruds() {
+    return CRUD({ title: '通知', url: 'api/system/logs', crudMethod: { }})
+  },
+  mixins: [presenter(), header(), form(defaultForm), crud()],
   inject: ['reload'],
   data() {
     return {
@@ -114,12 +148,14 @@ export default {
       tableData: [],
       selections: [],
       sendVisible: false,
-      delVisible: false,
+      sendObjVisible: false,
       sendForm: {
-        // msgType: 1,
-        notification: '',
-        // pushObj: '用户',
-        sendObj: ['全选']
+        msgType: '系统消息',
+        title: null,
+        notification: ''
+      },
+      selectObjForm: {
+        sendObj: 0
       },
       pushObj: '用户',
       checked: '',
@@ -136,14 +172,19 @@ export default {
       oldSelect: null,
       showTags: true,
       rules: {
-        // msgType: [
-        //   { required: true, message: '请选择类型', trigger: 'blur' }
-        // ],
+        title: [
+          { required: true, message: '标题不可为空', trigger: 'blur' }
+        ],
         notification: [
-          { required: true, message: '请填写内容', trigger: 'blur' }
+          { required: true, message: '内容不可为空', trigger: 'blur' }
         ],
         pushObj: [
-          { required: true, message: '请选择推送对象', trigger: 'blur' }
+          { required: true, message: '发送对象不可为空', trigger: 'blur' }
+        ]
+      },
+      rulesObj: {
+        sendObj: [
+          { required: true, message: '请选择发送对象', trigger: 'change' }
         ]
       },
       allUser: null,
@@ -285,14 +326,14 @@ export default {
       this.getTableData()
       this.loading = false
     },
-    clickRowHandler(row) {
-      // this.$refs.table.clearSelection()
-      this.$refs.table.toggleRowSelection(row) // 单选选中
-    },
-    selectionChangeHandler(val) {
-      this.selections = val
-      console.log(val)
-    },
+    // clickRowHandler(row) {
+    //   // this.$refs.table.clearSelection()
+    //   this.$refs.table.toggleRowSelection(row) // 单选选中
+    // },
+    // selectionChangeHandler(val) {
+    //   this.selections = val
+    //   console.log(val)
+    // },
     // 发布
     handleSend() {
       this.defaultSelAll()
@@ -300,19 +341,19 @@ export default {
       this.sendVisible = true
     },
     // 修改
-    handleEdit() {
-      this.isEdit = true
-      this.sendForm.notification = this.selections[0].noticeContent
-      const temp = this.selections[0].pushVal
-      if (this.selections[0].pushType === 1) {
-        this.pushObj = '用户'
-        this.selectOptions = temp.length === this.userOptions.length - 1 ? [0, ...temp] : temp
-      } else {
-        this.pushObj = '设备'
-        this.selectOptions = temp.length === this.devOptions.length - 1 ? [0, ...temp] : temp
-      }
-      this.sendVisible = true
-    },
+    // handleEdit() {
+    //   this.isEdit = true
+    //   this.sendForm.notification = this.selections[0].noticeContent
+    //   const temp = this.selections[0].pushVal
+    //   if (this.selections[0].pushType === 1) {
+    //     this.pushObj = '用户'
+    //     this.selectOptions = temp.length === this.userOptions.length - 1 ? [0, ...temp] : temp
+    //   } else {
+    //     this.pushObj = '设备'
+    //     this.selectOptions = temp.length === this.devOptions.length - 1 ? [0, ...temp] : temp
+    //   }
+    //   this.sendVisible = true
+    // },
     // 保存
     handleSave() {
       this.$refs.formDom.validate((valid) => {
@@ -369,26 +410,26 @@ export default {
       this.noticeType = 1
     },
     // 删除
-    handleDel() {
-      this.delVisible = true
-    },
-    // 删除确认
-    handleDelConfirm() {
-      const params = this.selections.map(item => { return item.id })
-      noticeDel(params).then(res => {
-        if (res === 'SUCCESS') {
-          // this.getTableData()
-          this.delVisible = false
-          this.reload()
-          this.$message({
-            message: '删除成功',
-            type: 'success'
-          })
-        } else {
-          this.$message.error('删除失败')
-        }
-      })
-    },
+    // handleDel() {
+    //   this.delVisible = true
+    // },
+    // // 删除确认
+    // handleDelConfirm() {
+    //   const params = this.selections.map(item => { return item.id })
+    //   noticeDel(params).then(res => {
+    //     if (res === 'SUCCESS') {
+    //       // this.getTableData()
+    //       this.delVisible = false
+    //       this.reload()
+    //       this.$message({
+    //         message: '删除成功',
+    //         type: 'success'
+    //       })
+    //     } else {
+    //       this.$message.error('删除失败')
+    //     }
+    //   })
+    // },
     // 选择器 推送对象
     handelChange(val) {
       if (val.length === this.sendObjOptions.length) {
@@ -433,60 +474,15 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.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;
+.select-btn{
+  display: inline-block;
+  padding: 4px 11px 4px 14px;
+  font-size: 18px;
   color: #fff;
-  padding: 10px 12px;
-  font-size: 14px;
-}
-::v-deep .el-radio-group{
-  width: 315px;
-  height: 32px;
-  border: 1px solid #339CFF;
+  background: #0348F3;
   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;
-}
-::v-deep .el-form-item__error{
-  top: 93%;
-}
-.tag-hidden{
-  width: 100%;
-  overflow: hidden;
-  text-overflow:ellipsis;
-  white-space: nowrap;
-}
-::v-deep .el-select__tags{
-  overflow-y: auto;
-  -webkit-overflow-scrolling: touch;
-  white-space: nowrap;
-  max-height: 100px;
+  margin: 10px 0 0 100px;
+  text-align: center;
+  cursor: pointer;
 }
 </style>