ssti-CollegeManage/src/views/messageNotification.vue

<template>
  <!-- 消息通知 -->
  <div class="messageNotification" v-loading="loading">
    <div class="pAHeader">
      <div class="pAHeader1">消息通知</div>
    </div>
    <hr>
    
    <div class="twoSelectInp">
      <div class="selectTwo">
          <div class="selectsBlock">
              <el-input v-model="selectInput" style="width:200px" placeholder="请输入"></el-input>
              <el-button type="primary" class="btn2" @click="getCourseManagement">查询</el-button>
          </div>
      </div>
        <el-button type="primary" class="btn" @click="addMessage" size="mini">新建全站通知</el-button>
    </div>
    

<!-- 通知表格开始 -->
    <div class="projectBlock">
      <el-table
      :data="tableData"
      tooltip-effect="dark"
      stripe
      class="fontSize"
      :header-cell-style="{ background: '#f2f2f2',color:'#000' }"
      >
     
      <el-table-column
        prop="title"
        label="通知内容"
        align="center"
        min-width="25%">
      </el-table-column>

      <el-table-column
        prop="tname"
        label="创建者"
        align="center"
        min-width="20%">
      </el-table-column>

      <el-table-column
        prop="create_at"
        label="创建时间"
        align="center"
        min-width="25%">
      </el-table-column>
     
      <el-table-column
        prop="operation"
        label="操作"
        align="center"
        width="200"
        >
        <template #default="scope">
            <div class="operations">
                <!-- <el-button type="primary" > -->
                    <el-button type="primary"  size="mini" @click="lookIntro(scope.row.newId)">查看信息</el-button>
                    <el-button type="primary" size="mini"  @click="del(scope.row.newId)" style="width: 85px;">删除</el-button>
                <!-- </el-button> -->
            </div>
        </template>
      </el-table-column>
    </el-table>
    </div>
<!-- 通知表格结束-->
        <!-- 分页 -->
        <el-pagination
            @current-change="handleCurrentChange"
            :current-page="table.currentPage"
            :page-size="table.packageSize"
            layout=" prev, pager, next"
            background
            class="paginations"
            :total="table.total">
          </el-pagination>
        <!-- 分页结束 -->

<!-- 添加全站通知开始 -->
    <el-dialog
      title="添加全站通知"
      :visible.sync="dialogVisible"
      width="1000px"
      class="addDialog">
      <div class="addDialogLogo">LOGO</div>
      <div class="addDialogMid">
        <div class="addDialogTit">
          <div class="addLabel">通知标题</div>
          <el-input v-model="addMess.tit" placeholder="请输入内容"></el-input>
        </div>
        <div class="addDialogTit addDialogCon">
          <div class="addLabel" style="position: relative;top: -8px;margin-right: -5px;width: 105px;">通知内容</div>
          <vue-editor v-model="addMess.con" style="margin-bottom: 30px;" :editorToolbar="customToolbar"></vue-editor>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirmAdd" class="AllDialogBtn">确认添加</el-button>
        <el-button @click="init" class="AllDialogBtn">取 消</el-button>
      </div>
    </el-dialog>
<!-- 添加全站通知结束-->


<!-- 删除通知开始 -->
    <el-dialog
      title="删除通知"
      :visible.sync="dialogVisible1"
      width="600px"
      class="delDialog">
      <div class="addDialogLogo">LOGO</div>
      <div class="deleteContent">确定删除通知?</div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirmDel" class="AllDialogBtn">确认删除</el-button>
        <el-button @click="dialogVisible1=false"  class="AllDialogBtn">取消</el-button>
      </div>
    </el-dialog>
<!-- 删除通知结束-->

<!-- 查看通知开始 -->
    <el-dialog
      title="查看通知"
      :visible.sync="dialogVisible2"
      width="800px"
      class="addDialog">
      <div class="addDialogLogo">LOGO</div>
      <div class="addDialogMid">
        <div class="addDialogTit1">
          <div style="font-size:18px;color:#000">{{ messageCon.title }}</div>
          <div style="margin-top: 13px;font-size: 14px;">{{ messageCon.tname }}</div>
        </div>
        <hr>
        <div class="addDialogTit2">
          <vue-editor v-model="messageCon.brief"  :editorToolbar="customToolbar"></vue-editor>
              <!-- {{ messageCon.brief }} -->
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible2=false" class="AllDialogBtn">关闭</el-button>
      </div>
    </el-dialog>
<!-- 查看通知结束 -->

  </div>
</template>

<script>
  import { VueEditor } from "vue2-editor";

    export default {
      props:["data","next",'back'],
      components:{
          VueEditor
        },
      data() {
        return {
          loading:false,
          customToolbar: [
              ["bold", "italic", "underline"], [{ list: "ordered" }, { list: "bullet" }],
              [{ align: "" }, { align: "center" }, { align: "right"}, { align: "justify"}],
              [{header:[false,1,2,3,4]}]
            ],
          textarea:'',
          //查询框
          selectInput:"",
          dialogVisible:false,
          dialogVisible1:false,
          dialogVisible2:false,
          input:'',
          infromId:'',
          //列表数据
          tableData:[],
        // 分页数据
        table:{
          total:0,
          packageSize:9,
          currentPage:1
        },
        messageCon:{},
        // 添加数据
          addMess:{
            tit:'',
            con:''
          }
        }
        
      },
      methods:{
        del(val){
          this.infromId=val
          this.dialogVisible1=true;
        },
        confirmDel(){     //删除内容
          let param={
            uid:this.$store.state.userInfo.userid,
            nid:this.infromId
          }
          this.ajax
              .post(this.$store.state.api+"/DeleteNotification",param)
              .then(res=>{
                  // console.log(res);
                  this.getCourseManagement()
                  this.dialogVisible1=false;
                  if (res.data) {
                      this.$message.success('删除成功')
                    }else{
                      this.$message.error('删除失败')
                    }
              },err=>{
                console.log(err);
              })
        },
        init(){
          //重置
          // if(this.textarea==''||this.input=='')return;
          // const date = new Date();

          // let data = {
          //   projectName:this.input,
          //   date:`${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}`,
          //   founder:"覃罡彤",
          // }
          // this.tableData.push(data);
          this.dialogVisible=false;
          this.dialogVisible1=false;
          this.dialogVisible2=false;
        },
        addMessage(){
          this.dialogVisible=true;
        },
        confirmAdd(){   //新建全站通知发送数据
            if(this.addMess.tit =='' || this.addMess.con ==''){
              this.$message.error('请输入内容')
              return
            }

            let param ={
              uid:this.$store.state.userInfo.userid,
              title:this.addMess.tit,
              brief:this.addMess.con,
            }
            // console.log(param)
            this.ajax
                .post(this.$store.state.api+"/CreateNewNotification",param)
                .then(res=>{
                    // console.log(res);
                    this.dialogVisible=false;
                    this.addMess.tit='';
                    this.addMess.con='';
                    this.getCourseManagement();
                    if (res.data) {
                      this.$message.success('创建成功')
                    }else{
                      this.$message.error('创建失败')
                    }
                },err=>{
                  console.log(err);
                })

        },
        lookIntro(val){    //查看信息通知
          console.log(val);
          let param={
            uid:this.$store.state.userInfo.userid,
            nid:val
          }
          this.ajax
          .get(this.$store.state.api+'/SelectNotificationDetail',param)
          .then(res=>{
            console.log(res)
              this.messageCon=res.data[0][0]
              // console.log(res);
          },err=>{
            console.log(err);
          })

          this.dialogVisible2=true;
        },
        getCourseManagement(){    //分页获取数据请求
            // if(this.value==1){
            //   this.value=''
            // }
            this.loading = true;
            let currentPage=this.table.currentPage;
            const param={
              uid:this.$store.state.userInfo.userid,
              title:this.selectInput,
              nowPage:currentPage,
              lim:9
            }
            this.ajax
              .get(this.$store.state.api+'/SelectNotification',param)
              .then(res=>{  
                // 不是在第一页进行分页请求，请求数据为空，再发送一次请求获取数据,判断是否为第一页，防止无限循环
                // console.log(res)
                if(this.table.currentPage!==1 && res.data[0].length==0){
                  this.table.currentPage=1
                  this.getCourseManagement();
                }
                this.tableData=res.data[0];
                this.table.total=res.data[1][0].total;
                this.loading = false;
              },err=>{
                console.log(err);
              })
          },
        // 分页
        handleCurrentChange(val) {   //当页数发生改变的时候调用获取列表数据请求
          // console.log(`当前页: ${val}`);
          this.table.currentPage=val
          this.getCourseManagement()
        },
      },
      watch:{
        selectInput:{
          handler(){
            immediate:true
            deep:true
            this.getCourseManagement()
          },
        },
    },
      mounted(){
        this.getCourseManagement()
      }
      
    }
</script>

<style lang="less">
.messageNotification{

  .pagination{
    float: right;
    margin: 20px 35px 10px;
  }
  .el-dialog{
      border-radius:5px;
      overflow: hidden;
    }

  
  .btn{
    height: 35px;
    width: 125px;
    background: #477edd;
    font-size: 16px;
  }

  .delDialog{
      font-size: 18px;
      .el-dialog{
        border-radius: 5px;
        overflow: hidden;
      }
      .deleteContent{
        margin: 30px 0;
        font-size: 22px;
        color: #000;
      }
      .el-dialog__body{
          display: flex;
          justify-content: center;
        }
      .addDialogLogo{
        width: 60px;
        height: 30px;
        border-radius: 5px;
        display: flex;
        justify-content: center;
        line-height: 30px;
        background: #f2f2f2;
        position: absolute;
        left: 20px; top: 15px; 
      }
      .el-dialog__header{
      background: #32455b;
      }
      .el-dialog__title{
        color:#fff;
        display: flex;
        justify-content: center;
        font-size: 18px;
        position: relative;
        top: -2px;
      }
      .addDialogMid{
        box-sizing: border-box;
        padding:0 60px 0 10px;
        .addDialogTit{
          display: flex;

          div{
            width: 80px;
            font-size: 16px;
            line-height: 40px;
            text-align: left;
          }
        }
        .addDialogTit1{
          display: flex;
          justify-content: space-between;
          margin-bottom: 15px;
        }
        .addDialogTit2{
          margin-top: 10px;
          font-size: 16px;
          color: #000;
          // text-indent: 2em;
          // text-align: left;
          line-height: 1.7em;
        }
        .addDialogCon{
          margin-top: 20px;
        }
      }
    }
    .addDialog{
      font-size: 18px;
      .el-dialog{
        border-radius: 5px;
        overflow: hidden;
      }
      .deleteContent{
        margin: 30px 0;
        font-size: 22px;
        color: #000;
      }

      .addDialogLogo{
        width: 60px;
        height: 30px;
        display: flex;
        justify-content: center;
        line-height: 30px;
        border-radius: 5px;
        background: #f2f2f2;
        position: absolute;
        left: 20px; top: 15px; 
      }
      .quillWrapper{
        width: 100%;
      }
      .el-dialog__header{
        background: #32455b;
      }
      .el-dialog__title{
        color:#fff;
        display: flex;
        justify-content: center;
        font-size: 18px;
        position: relative;
        top: -2px;
      }
      .addDialogMid{
        box-sizing: border-box;
        padding:0 30px 0 10px;
        .addDialogTit{
          display: flex;
          .addLabel{
            width: 100px;
            font-size: 16px;
            line-height: 40px;
            text-align: left;
          }
          
        }
        .addDialogTit1{
          display: flex;
          justify-content: space-between;
          margin-bottom: 15px;
        }
        .addDialogTit2{
          margin-top: 10px;
          font-size: 16px;
          color: #000;
          // text-indent: 2em;
          // text-align: left;
          line-height: 1.7em;
          .quillWrapper .ql-toolbar{
              display: none !important;
          }
          .ql-container.ql-snow{
              border:none !important;
          }
        }
        .addDialogCon{
          margin-top: 20px;
        }
      }
    }
    .dialog-footer{       //对话框按钮
        display: flex;
        justify-content: center;
        box-sizing: border-box;
      }
}

</style>