baianxi_admin/src/views/message/Index.vue

<style lang="scss">
    
</style>
<template>
    <section>
        <p>消息管理  >  通知消息</p>
        <div class="filter">
            <el-form   :inline="true" size="small" label-position="left">
                <el-form-item>
                        <el-input clearable placeholder="请输入内容搜索" v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item>
                       <el-button @click="form.page=1,getData()" type="primary" icon="el-icon-search">搜索</el-button>
                       <el-button  v-if='utype!=2'  @click="dialogFormVisible=true,message={send_type:1}" type="primary">发送消息</el-button>
                </el-form-item>
            </el-form>
        </div>


        <el-table
                class="table"
                :data="list" height="64vh"
                border  v-loading="loading"
                style="width: 100%">
                <el-table-column
                type="selection" fixed="left"
                width="40">
                </el-table-column>
                <el-table-column
                prop="sender_user_name" 
                label="消息发送者">
                </el-table-column>
                <el-table-column
                prop="title" 
                label="消息标题">
                </el-table-column>
                <el-table-column
                prop="content" 
                label="消息内容">
                </el-table-column>
                <el-table-column
                prop="area" 
                label="区域">
                </el-table-column>
                <el-table-column
                prop="category" 
                label="公司类型">
                </el-table-column>
                <el-table-column
                prop="receiver_names" 
                label="接收者">
                </el-table-column>
                <el-table-column
                prop="ctime"  
                label="发送时间">
                <!-- <template>
                    <el-tag type="success">启用</el-tag>
                </template> -->
                </el-table-column>
                <el-table-column fixed="right"
                prop="zip"  width="220"
                label="操作">
                <template slot-scope="scope">
                    <el-button icon="el-icon-view" @click="open(scope.row)" size="mini"  type="success">查看</el-button>
                    <el-button icon="el-icon-delete" @click="del(scope.row.id)" size="mini"  type="danger">删除</el-button>
                </template>
                </el-table-column>
        </el-table>
        <Page  ref="pageButton"  :total='total' @pageChange='gopage'/>

        <el-dialog title="发送消息" :visible.sync="dialogFormVisible" width="500px" :close-on-click-modal='false' :close-on-press-escape='false'>
            <el-form  label-width="100px">
                <el-form-item label="发送方式">
                    <el-radio v-model="message.send_type" :label="1">群发</el-radio>
                    <el-radio v-model="message.send_type" :label="2">单发</el-radio>
                </el-form-item>
                <el-form-item v-if="message.send_type==1" label="区域">
                    <el-select clearable v-model="message.area" placeholder="请选择">
                            <el-option v-for="(item,index) in area" :key="index" :label="item" :value="item"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item v-if="message.send_type==1" label="公司类型">
                    <el-select clearable v-model="message.category" placeholder="请选择">
                            <el-option v-for="(item,index) in category" :key="index" :label="item" :value="item"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item v-if="message.send_type==2" label="发送对象">
                    <el-select clearable v-model="message.receiver_ids" placeholder="请选择">
                            <el-option v-for="(item,index) in company" :key="index" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="消息标题">
                    <el-input clearable  v-model="message.title"></el-input>
                </el-form-item>
                <el-form-item label="消息内容">
                    <el-input clearable type="textarea" v-model="message.content"></el-input>
                </el-form-item>
                <el-form-item label="附件">
                    <input @change="upload('attach')" id='attach' type="file">
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click="dialogFormVisible = false">取 消</el-button>
                <el-button size="small" type="primary" @click="send">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="消息详情" :visible.sync="dialogFormVisible1" width="500px" :close-on-click-modal='false' :close-on-press-escape='false'>
            <el-form  label-width="100px">
                <el-form-item label="发送者">
                    {{detail.sender_user_name}}
                </el-form-item>
                <el-form-item label="公司">
                    {{detail.area}} {{detail.category}}
                </el-form-item>
                <el-form-item label="标题">
                    {{detail.title}}
                </el-form-item>
                <el-form-item label="内容">
                    {{detail.content}}
                </el-form-item>
                <el-form-item label="接收者">
                    {{detail.receiver_names}}
                </el-form-item>
            </el-form>
        </el-dialog>
    </section>
</template>
<script>
import Page from '../../components/Page';
export default {
  components:{
        Page
  },
  data(){
    return{
      dialogFormVisible:false,
      dialogFormVisible1:false,
      form:{name:'',page:1,page_size:20,message_type:'notice'},
      detail:{},
      message:{send_type:1},
      activeName:"1",
      total:1,
      list:[],
      loading:false,
      category:[],
      area:[],
      company:[],
      utype:0
    }
  },
  methods:{
        gopage(size){
            if(size){
                this.form.page_size=size
            }
            this.form.page=this.$refs.pageButton.page
            this.getData()
        },
        getData(){
            var parm=this.form;
            this.loading=true
            this.$api.getMessagesList(parm).then(res=>{
                this.list=res.data.data.list
                this.total=res.data.data.total
                this.loading=false
                this.area=this.store.area;
                this.category=this.store.categorys;
            })
            this.$api.getEnterpriseAll().then(res=>{
                this.company=res.data.data;
            })
        },
        del(id){
                this.$confirm('确定删除吗', '提示', {
                        type: 'warning'
                    }).then(() => {
                    this.$api.deleteMessages({id:id}).then((res)=>{
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            })
                            this.getData()
                    })
                })
        },
        upload(type){
            var file=document.getElementById(type).files;
            var data=new FormData();
                data.append("file",file[0])
            this.$api.uploadFile(data).then(res=>{
                if(res.data.code==0){
                        let form=this.message;
                        this.$set(form,type,res.data.data.url)
                        this.$message({message: '上传成功！',type: 'success'});
                    }else{
                        this.$message.error(res.data.message);
                    }
            })
        },
        send(){
            let parm=this.message;
            this.$api.sendMessage(parm).then(res=>{
                    if(res.data.code==0){
                        this.$message({message: '发送成功！',type: 'success'});
                        this.getData();
                        this.dialogFormVisible=false;
                    }else{
                        this.$message.error(res.data.message);
                    }
            })
        },
        open(data) {
            this.detail=data
            this.dialogFormVisible1=true
        }
  },
  created(){
      this.getData()
      this.utype=localStorage.getItem('utype')||0
  }
}
</script>