zky-admin/src/views/message/Message.vue

<style lang="scss">
    .preview{
        .el-form-item{
            margin-bottom:15px;
        }
        label,p{
            line-height: 25px !important;
        }
    }
    .el-cascader{
        width:100%;
    }
</style>
<template>
    <section>
        <p><span>信息管理></span>消息管理</p>
        <div class="content">
            <div class="filter">
                <el-form size="small" label-width="70px" :inline="true"  label-position="left">
                    <el-form-item label="">
                            <el-input clearable placeholder="请输入标题" v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button  type="primary" @click="search">搜索</el-button>
                    </el-form-item>
                    <el-form-item style="float:right" >
                        <el-button @click="openDiag" type="primary">发送消息</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <el-table
                    class="table"
                    :data="list"
                    height='50vh'
                    border  v-loading="loading"
                    default-expand-all row-key="id"
                    style="width: 100%">
                    <el-table-column
                    prop="name"  
                    label="标题">
                    </el-table-column>
                    <el-table-column
                    prop="cname"  
                    label="发送者">
                    </el-table-column>
                    <el-table-column
                    prop="receiver_names"  
                    label="接收者">
                    </el-table-column>
                    <el-table-column
                    prop="ctime"  
                    label="发送时间">
                    </el-table-column>
                    <el-table-column  
                    prop="zip"  width="150"
                    label="操作">
                    <template slot-scope="scope">
                        <el-button class="edit" type="text" @click="edit(scope.row)">编辑</el-button>
                        <el-button class="del" @click="del(scope.row.id)" type="text">删除</el-button>
                    </template>
                    </el-table-column>
            </el-table>
            <Page  ref="pageButton" :current='form.page' :page_size='form.page_size' :total='total' @pageChange='gopage'/>
        </div>

        <el-dialog
        :title="dialogTitle" :close-on-click-modal='false'
        :visible.sync="dialogVisible">
        <el-form size="small" class="preview" :inline='false' label-width="80px">
                <el-form-item label="标题">
                    <el-input v-model="form1.name" placeholder="请输入标题"></el-input>
                </el-form-item>
                <el-form-item label="接收人">
                    <!-- <el-select placeholder="请选择接收人" v-model="form1.receiver_id" multiple>
                        <el-option
                            v-for="(item, index) in userList"
                            :key="index"
                            :label="item.name"
                            :value="item.id"
                        ></el-option>
                    </el-select> -->
                    <el-cascader
                        v-model='form1.receiver_id'
                        :options="options"
                        :props="props"
                        clearable>
                        <template slot-scope="{ node, data }">
                            <span>{{ data.label }}</span>
                            <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
                        </template>
                    </el-cascader>
                </el-form-item>
                <el-form-item label="问卷模板">
                    <el-select placeholder="请选择问卷模板" v-model="form1.template_id">
                        <el-option
                            v-for="(item, index) in templateList"
                            :key="index"
                            :label="item.name"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button size="small" type="primary" @click="save">确 定</el-button>
        </span>
        </el-dialog>
    </section>
</template>
<script>
import Page from '../../components/Page';
export default {
  components:{
        Page
  },
  data(){
    return{
      form:{name:'',page:1,page_size:20},
      form1:{},
      total:1,
      list:[{name:'2333'}],
      loading:false,
      input:'',
      dialogVisible:false,
      dialogTitle:"",
      defaultProps:{},
      data: [],
      templateList:[],
      userList:[],
      props: { multiple: true },
        options: [{
          value: 1,
          label: '东南',
          children: [{
            value: 2,
            label: '上海',
            children: [
              { value: 3, label: '普陀' },
              { value: 4, label: '黄埔' },
              { value: 5, label: '徐汇' }
            ]
          }, {
            value: 7,
            label: '江苏',
            children: [
              { value: 8, label: '南京' },
              { value: 9, label: '苏州' },
              { value: 10, label: '无锡' }
            ]
          }, {
            value: 12,
            label: '浙江',
            children: [
              { value: 13, label: '杭州' },
              { value: 14, label: '宁波' },
              { value: 15, label: '嘉兴' }
            ]
          }]
        }, {
          value: 17,
          label: '西北',
          children: [{
            value: 18,
            label: '陕西',
            children: [
              { value: 19, label: '西安' },
              { value: 20, label: '延安' }
            ]
          }, {
            value: 21,
            label: '新疆维吾尔族自治区',
            children: [
              { value: 22, label: '乌鲁木齐' },
              { value: 23, label: '克拉玛依' }
            ]
          }]
        }]
    }
  },
  methods:{
        search(){
            let parm = this.form
            this.getData()
        },
        openDiag(){
            this.form1 = {}
            this.dialogVisible = true;
            this.dialogTitle = "发送消息"
        },
        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.getAllTemplateList().then(res=>{
                this.templateList = res.data.data
            })
            this.$api.getAllSysUserList().then(res=>{
                this.userList = res.data.data
            })
            this.$api.getMessageList(parm).then(res=>{
                this.list=res.data.data.list;
                this.total=res.data.data.total
                this.loading=false
            })
        },
        del(id){
                this.$confirm('确定删除吗', '提示', {
                        type: 'warning'
                    }).then(() => {
                    this.$api.delMessageInfo({id:id}).then((res)=>{
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            })
                            this.getData()
                    })
                })
        },
        edit(row){
            this.form1 = row;
            let receiver_ids = this.form1.receiver_id.split(",")
            receiver_ids.forEach((element,index) => {
                receiver_ids[index] = parseInt(element)
            });
            this.form1.receiver_id = receiver_ids
            this.dialogVisible = true;
        },
        save(){
            let parm = this.form1
            let id = this.form1.id
            parm.receiver_id = parm.receiver_id.join(",")
            if(id){
                this.$api.editMessage(parm).then(res=>{
                    if(res.data.code==0){
                        this.$message({
                            type:"success",
                            message:"保存成功!"
                        })
                    }else{
                        this.$message.error("保存失败!");
                    }
                })
            }else{
                this.$api.addMessage(parm).then(res=>{
                    if(res.data.code==0){
                        this.$message({
                            type:"success",
                            message:"保存成功!"
                        })
                    }else{
                        this.$message.error("保存失败!");
                    }
                })
            }
            this.getData()
            this.dialogVisible = false
            
        }
  },
  created(){
      this.getData()
  }
}
</script>