ssti-CollegeManage/src/views/messageNotification.vue

<template>
  <!-- 消息通知 -->
  <div class="messageNotification">
    <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" >查询</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="projectName"
        label="通知内容"
        align="center"
        min-width="25%">
      </el-table-column>

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

      <el-table-column
        prop="date"
        label="创建时间"
        align="center"
        min-width="25%">
      </el-table-column>
     
      <el-table-column
        prop="operation"
        label="操作"
        align="center"
        min-width="30%"
        >
        <template #default="scope">
            <div class="operations">
                <!-- <el-button type="primary" > -->
                    <el-button type="primary"  size="mini" @click="lookIntro(scope)">查看信息</el-button>
                    <el-button type="primary" size="mini"  @click="deletes" >删除</el-button>
                <!-- </el-button> -->
            </div>
        </template>
      </el-table-column>
    </el-table>
    </div>
<!-- 通知表格结束-->


<!-- 添加全站通知开始 -->
    <el-dialog
      title="添加全站通知"
      :visible.sync="dialogVisible"
      width="600px"
      class="addDialog">
      <div class="addDialogLogo">LOGO</div>
      <div class="addDialogMid">
        <div class="addDialogTit">
          <span>通知标题</span>
          <el-input v-model="input" placeholder="请输入内容"></el-input>
        </div>
        <div class="addDialogTit addDialogCon">
          <span>通知内容</span>
          <el-input
            type="textarea"
            :rows="10"
            resize="none"
            placeholder="请输入内容"
            v-model="textarea">
          </el-input>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="init" class="btn5">确认添加</el-button>
        <el-button @click="init" class="btn5">取 消</el-button>
      </span>
    </el-dialog>
<!-- 添加全站通知结束-->


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

<!-- 查看通知开始 -->
    <el-dialog
      title="查看通知"
      :visible.sync="dialogVisible2"
      width="600px"
      class="addDialog">
      <div class="addDialogLogo">LOGO</div>
      <div class="addDialogMid">
        <div class="addDialogTit1">
          <div style="font-size:18px;color:#000">关于"一校一案"创客有关通知</div>
          <div style="margin-top: 13px;font-size: 16px;">蝎子莱莱</div>
        </div>
        <hr>
        <div class="addDialogTit2">
            <p>
              活过，总要留下些什么
              每一个活过的人，都能给后人的路途上添些光亮，也许是一颗巨
              星，也许是一把火炬，也许只是一支含泪的蜡烛
              -《奶奶的星星》
            </p>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible2=false" class="btn5">关闭</el-button>
      </span>
    </el-dialog>
<!-- 查看通知结束 -->

  </div>
</template>

<script>
    export default {
      data() {
        return {
          textarea:'',
          //查询框
          selectInput:"",
          dialogVisible:false,
          dialogVisible1:false,
          dialogVisible2:false,
          input:'',
          options:[],
          options1:[],
          options2:[],
          options3:[],
          options4:[],
          tableData:[{
          projectName:'创业孵化基地企业情况信息表',
          date:'2022-11-12 10:18',
          size:'50k',
          founder:'黄猿'
        },
        {
          projectName:'创业孵化基地企业情况信息表',
          size:'50k',
          date:'2022-11-12 10:18',
          founder:'黄猿'

        }
        ],
          pavalues:{
            value:'',
            value1:'',
            value2:'',
            value3:'',
            value4:'',
          }
        }
      },
      methods:{
        deletes(){
          this.dialogVisible1=true;
        },
        init(){
          //重置
       
          console.log(this.textarea)
          console.log(this.input)
          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;
        },
        lookIntro(){
          this.dialogVisible2=true;
        }
      }
    }
</script>

<style lang="less">
.messageNotification{

  .el-dialog{
      border-radius:5px;
      overflow: hidden;
    }

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


.addDialog{
  font-size: 18px;
  .deleteContent{
    margin: 30px 0;
    font-size: 22px;
    color: #000;
  }
  .addDialogLogo{
    width: 60px;
    height: 30px;
    line-height: 30px;
    background: #f2f2f2;
    position: absolute;
    left: 20px; top: 15px; 
  }
  .el-dialog__header{
  background: #32455b;
  }
  .el-dialog__title{
    color:#fff;
    font-size: 22px;
  }
  .addDialogMid{
    box-sizing: border-box;
    padding:0 60px 0 10px;
    .addDialogTit{
      display: flex;
      span{
        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;
    }
    .addDialogCon{
      margin-top: 20px;
    }
  }
  .dialog-footer{
    display: flex;
    justify-content: center;
    box-sizing: border-box;
    padding-left: 50px;
    // background-color: red;
    .btn5{
      font-size: 16px;
    }
  }
}
}
</style>