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

<style lang="scss" scoped>
   .content{
       display:flex;
       padding:0;
       .content-item{
           flex:1;
           padding:20px;
           &.middle{
                border-left:2px solid #D8D8D8;
                border-right:2px solid #D8D8D8;
           }
           &.right,&.middle{
               flex:2;
           }
           .item-title{
               font-size: 14px;
                font-weight: bold;
                color: #666666;
                margin-bottom:20px;
           }
           .el-row{
               margin-top:20px;
           }
           .model{
               width:80px;
               height:80px;
               display:flex;
               flex-direction: column;
               align-items: center;
               justify-content: space-evenly;
               &:hover{
                   cursor: pointer;
                   background:#F5FAFF;
               }
               img{
                   height:28px;
                   width:28px;
               }
               span{
                   font-size:14px;
                   color:#666666;
                //    margin-top:19px;
               }
           }
          .el-form{
              margin-bottom:20px;
              .el-form-item{
                  background:#F5FAFF;
                  padding:10px 20px;
                  margin-bottom:5px;
                /deep/.el-form-item__label{
                    font-size:16px;
                    color:#666666;
                }
                /deep/.el-form-item__content{
                    margin-right:160px;
                    position:relative;
                    font,.drag{
                        position:absolute;
                        right:-145px;
                    }
                    font{
                        top:0px;
                        color:#3895FE;
                        font-size: 12px;
                        span{
                            margin-left: 5px;
                        }
                    }
                    .drag{
                        right:-160px;
                        bottom:-3px;
                    }
                    div{
                        font-size:16px;
                        color:#333333;
                    }
                    .el-radio,.el-checkbox{
                        margin-right: 32px;
                        height: 32px;
                        line-height: 32px;
                    }
                    .el-radio-group,.el-checkbox-group{
                        display:flex;
                        flex-direction: column;
                    }
                    
                }
                /deep/.el-form-item__label{
                        float: none;
                    }
                &.text{
                    /deep/.el-form-item__content{
                        // margin-left:60px;
                    }
                }
              }
          }
           // 右边
            .item-main{
                margin:34px;
                // height:600px;
                // background: #FFFFFF;
                border: 1px solid #DDDDDD;
                box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.13);
                border-radius: 20px; 
                .el-form.over_y{
                    max-height:calc( 100vh - 340px);
                }
            }
            // label样式
            .edit_label {
                /deep/.el-input__inner{
                    background:#F5FAFF;
                    border:0px;
                    padding:0px;
                }
            }
            /deep/.opicon{
                font-weight: bold;
                padding:5px;
                color:#3895FE;
            }
            .tpl_title{
                font-size: 18px;
                margin-bottom:20px;
            }
            .tpl_form{
                margin:20px;
                border:1px solid #ccc;
                border-radius: 20px;
                /deep/.el-form-item{
                    background:none;
                }
                /deep/.el-form-item__content{
                    width:100%;
                }
            }
            .survey_logo{
                position: relative;
                top:15px;
                left: 20px;
            }
       }
   }
</style>
<template>
    <section>
        <p><span>信息管理></span>新增模板</p>
        <div class="content">
            <div class="content-item">
                <div class='item-title'>模板组件</div>
                <el-row>
                    <el-col :span='12'>
                        <div class='model' @click="addWidget(0)">
                            <img src="../../assets/slt_small.png" alt="">
                            <span>单行文本</span>
                        </div>
                    </el-col>
                    <el-col :span='12'>
                        <div class='model' @click="addWidget(1)">
                            <img src="../../assets/mlt_small.png" alt="">
                            <span>多行文本</span>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span='12'>
                        <div class='model' @click="addWidget(2)">
                            <img src="../../assets/radio_small.png" alt="">
                            <span>单选统计</span>
                        </div>
                    </el-col>
                    <el-col :span='12'>
                        <div class='model' @click="addWidget(3)">
                            <img src="../../assets/checked_small.png" alt="">
                            <span>多选统计</span>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span='12'>
                        <div class='model' @click="addWidget(4)">
                            <img src="../../assets/upload_small.png" alt="">
                            <span>图片上传</span>
                        </div>
                    </el-col>
                    <el-col :span='12'>
                        <div class='model' @click="addWidget(5)">
                            <img src="../../assets/file_small.png" alt="">
                            <span>文件上传</span>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <div class="content-item middle">
                <div class='item-title'>编辑模板-{{title}}</div>

                <el-form size="small" label-width="" label-position="top" class='over_y'>
                    <!-- handle=".dargBtn"  触发拖拽事件的按钮类名 filter=".undraggable" 不可拖拽的元素的类名 -->
                    <vuedraggable class="wrapper" v-model="widgetList" handle=".dargBtn">
                    <transition-group>
                    <el-form-item v-for="(item,index) in widgetList" :key="index">
                        <section v-if="item.type=='input'">
                            <el-input :readonly="item.edit" v-model="item.label" :class="item.edit?'edit_label':''"></el-input>
                            <el-input placeholder='请输入' v-model="item.placeholder"></el-input>
                            <font>
                                 <span @click="item.edit=!item.edit">{{item.edit?'编辑':'保存'}}</span> 
                                 <span @click="widgetList.splice(index,1)">删除</span>
                            </font>
                            <el-button type='primary' class='dargBtn drag'>拖拽移动顺序</el-button>
                        </section>
                        <section v-if="item.type=='textarea'">
                            <el-input :readonly="item.edit" v-model="item.label" :class="item.edit?'edit_label':''"></el-input>
                            <el-input type="textarea" placeholder='请输入' v-model="item.placeholder"></el-input>
                            <font>
                                 <span @click="item.edit=!item.edit">{{item.edit?'编辑':'保存'}}</span> 
                                 <span @click="widgetList.splice(index,1)">删除</span>
                            </font>
                            <el-button type='primary' class='dargBtn drag'>拖拽移动顺序</el-button>
                        </section>
                        <section v-if="item.type=='radio'">
                            <el-input :readonly="item.edit" v-model="item.label" :class="item.edit?'edit_label':''"></el-input>
                            <el-radio-group v-model="radio">
                                <el-radio :label="iitem.label" v-for="(iitem,index) in item.items" :key="index">
                                    <el-input :readonly="item.edit" v-model="iitem.label" :class="item.edit?'edit_label':''"></el-input>
                                    <template v-if="!item.edit">
                                        <i class="el-icon-minus opicon" @click="minusOption(item.items,index)"></i><i class="el-icon-plus opicon" @click="plusOption(item.items,index)"></i>
                                    </template>
                                </el-radio>
                            </el-radio-group>
                            <font>
                                 <span @click="item.edit=!item.edit">{{item.edit?'编辑':'保存'}}</span> 
                                 <span @click="widgetList.splice(index,1)">删除</span>
                            </font>
                            <el-button type='primary' class='dargBtn drag'>拖拽移动顺序</el-button>
                        </section>
                        <section v-if="item.type=='checkbox'">
                            <el-input :readonly="item.edit" v-model="item.label" :class="item.edit?'edit_label':''"></el-input>
                            <el-radio-group v-model="radio">
                                <el-checkbox :label="iitem.label" v-for="(iitem,index) in item.items" :key="index">
                                    <el-input :readonly="item.edit" v-model="iitem.label" :class="item.edit?'edit_label':''"></el-input>
                                    <template v-if="!item.edit">
                                        <i class="el-icon-minus opicon" @click="minusOption(item.items,index)"></i><i class="el-icon-plus opicon" @click="plusOption(item.items,index)"></i>
                                    </template>
                                </el-checkbox>
                            </el-radio-group>
                            <font>
                                 <span @click="item.edit=!item.edit">{{item.edit?'编辑':'保存'}}</span> 
                                 <span @click="widgetList.splice(index,1)">删除</span>
                            </font>
                            <el-button type='primary' class='dargBtn drag'>拖拽移动顺序</el-button>
                        </section>
                        <section v-if="item.type=='image'">
                            <el-input :readonly="item.edit" v-model="item.label" :class="item.edit?'edit_label':''"></el-input>
                            <el-upload
                                action="https://jsonplaceholder.typicode.com/posts/"
                                list-type="picture-card"
                                :on-preview="handlePictureCardPreview"
                                :on-remove="handleRemove">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                            <font>
                                 <span @click="item.edit=!item.edit">{{item.edit?'编辑':'保存'}}</span> 
                                 <span @click="widgetList.splice(index,1)">删除</span>
                            </font>
                            <el-button type='primary' class='dargBtn drag'>拖拽移动顺序</el-button>
                        </section>
                        <section v-if="item.type=='file'">
                            <el-input :readonly="item.edit" v-model="item.label" :class="item.edit?'edit_label':''"></el-input>
                            <el-upload
                                class="upload-demo"
                                ref="upload"
                                action="https://jsonplaceholder.typicode.com/posts/"
                                :on-preview="handlePreview"
                                :on-remove="handleRemove"
                                :file-list="fileList"
                                :auto-upload="false">
                                <!-- <el-button slot="trigger" size="small" type="primary">选取文件</el-button> -->
                                <el-button style="margin-left: 10px;" size="small" type="primary" plain @click="submitUpload">添加文件</el-button>
                                <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
                            </el-upload>
                            <font>
                                 <span @click="item.edit=!item.edit">{{item.edit?'编辑':'保存'}}</span> 
                                 <span @click="widgetList.splice(index,1)">删除</span>
                            </font>
                            <el-button type='primary' class='dargBtn drag'>拖拽移动顺序</el-button>
                        </section>
                    </el-form-item>
                    </transition-group>
                    </vuedraggable>
                    <div  v-if="this.widgetList.length">
                        <el-button size="medium" type="primary" @click="save">保存</el-button>
                    </div>
                </el-form>
            </div>
            <div class="content-item right">
                <div class='item-title'>效果预览</div>
                <div class='item-main'>
                    <img src="../../assets/survey_logo.png" alt="" class="survey_logo">
                    <h5 align='center' class="tpl_title">{{title}}</h5>
                    <el-form ref="form" :model="form" class="tpl_form over_y">
                        <el-form-item v-for="(item,index) in widgetList" :key="index" :label="item.label">
                            <el-input v-if="item.type=='input'" v-model="form.label" :placeholder="item.placeholder"></el-input>
                            <el-input v-if="item.type=='textarea'" type="textarea" v-model="form.label" :placeholder="item.placeholder"></el-input>
                            <el-radio-group v-if="item.type=='radio'">
                                <el-radio :label="iitem.label" v-for="(iitem,index) in item.items" :key="index">{{iitem.label}}</el-radio>
                            </el-radio-group>
                            <el-radio-group v-if="item.type=='checkbox'">
                                <el-checkbox :label="iitem.label+'22'" v-for="(iitem,index) in item.items" :key="index">{{iitem.label}}</el-checkbox>
                            </el-radio-group>
                            <el-upload
                                v-if="item.type=='image'"
                                action="https://jsonplaceholder.typicode.com/posts/"
                                list-type="picture-card"
                                :on-preview="handlePictureCardPreview"
                                :on-remove="handleRemove">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                            <el-upload
                                v-if="item.type=='file'"
                                class="upload-demo"
                                ref="upload"
                                action="https://jsonplaceholder.typicode.com/posts/"
                                :on-preview="handlePreview"
                                :on-remove="handleRemove"
                                :file-list="fileList"
                                :auto-upload="false">
                                <!-- <el-button slot="trigger" size="small" type="primary">选取文件</el-button> -->
                                <el-button style="margin-left: 10px;" size="small" type="primary" plain @click="submitUpload">添加文件</el-button>
                                <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
                            </el-upload>
                        </el-form-item>  
                        <el-form-item  v-if="this.widgetList.length">
                            <el-button size="medium" type="primary" @click="dialogVisible = false">提交</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
    </section>
</template>
<script>
import vuedraggable from 'vuedraggable';
export default {
components: {vuedraggable},
  data(){
    return{
      title:this.$route.query.title,
      edit:0,
      form:{name:'',page:1,page_size:20},
      total:1,
      list:[{name:'2333'}],
      loading:false,
      checkList:[],
      input:'',
      dialogVisible:false,
      defaultProps:{},
      data: [{
          id: 1,
          label: '一级 1'
        }, {
          id: 2,
          label: '一级 2',
          children: [{
            id: 5,
            label: '二级 2-1'
          }, {
            id: 6,
            label: '二级 2-2'
          }]
        }],
        stdWidgetList:[
           {type:"input",label:"请输入标题",placeholder:"请输入",edit:true},
           {type:"textarea",label:"请输入标题",placeholder:"请输入",edit:true},
           {type:"radio",label:"请输入标题",placeholder:"请输入",edit:true,
                items:[{label:"选项",value:"选项值"},{label:"选项1",value:"选项值"}]
            },
            {type:"checkbox",label:"请输入标题",placeholder:"请输入",edit:true,
                items:[{label:"选项",value:"选项值"},{label:"选项1",value:"选项值"}]
            },
            {type:"image",label:"请输入标题",placeholder:"请输入",edit:true},
            {type:"file",label:"请输入标题",placeholder:"请输入",edit:true}
       ],
       widgetList:[],
    }
  },
  methods:{
        save(){
            let id = this.$route.query.id;
            let params = {
                    name:this.title,
                    widget:JSON.stringify(this.widgetList)
                }
            if(id){
                params.id = id;
                this.$api.editTemplate(params).then(res=>{
                    if(res.data.code==0){
                        this.$message({
                            type:"success",
                            message:"成功!"
                        })
                    }else{
                        this.$message.error("失败!")
                    }
                    this.$router.push('/message/template')
                })
            }else{
                this.$api.addTemplate(params).then(res=>{
                    if(res.data.code==0){
                        this.$message({
                            type:"success",
                            message:"成功!"
                        })
                    }else{
                        this.$message.error("失败!")
                    }
                    this.$router.push('/message/template')
                })
            }
        },
        addWidget(i){
            console.log(i)
            this.widgetList.push(JSON.parse(JSON.stringify(this.stdWidgetList[i])))
            console.log(this.widgetList)
        },
        minusOption(options,index){
            if(options.length<=1){
                this.$message.error("选项不能少于1个!")
            }else{
                options.splice(index,1)
            }
        },
        plusOption(options,index){
            if(options.length>=10){
                this.$message.error("选项不能超过10个!")
            }else{

                options.splice(index+1,0,{label:"选项"+(index+1),value:"选项值"})
            }
        },
        gopage(size){
            if(size){
                this.form.page_size=size
            }
            this.form.page=this.$refs.pageButton.page
            this.getData()
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        gopage1(size){
            if(size){
                this.form1.page_size=size
            }
            this.form1.page=this.$refs.pageButton1.page
            this.getJl()
        },
        open(data) {
            this.dialogFormVisible=true;
            this.message={...data}
        },
        download(){
            let array=this.multipleSelection,ids=[];
            for(let i=0;i<array.length;i++){
                ids.push(array[i].id)
            }
            ids=ids.join(',')
            this.$api.downloadMon({ids:ids}).then(res=>{
                        var elink = document.createElement('a');
                        let blob=new Blob([res.data], {type: 'application/vnd.ms-excel'});
                        let objUrl=URL.createObjectURL(blob);
                        console.log(res.headers['content-disposition'])
                        let file_name=res.headers['content-disposition'].split('=')[1];
                        elink.download = file_name;
                        elink.style.display = 'none';                
                        elink.href = objUrl;
                        document.body.appendChild(elink);
                        elink.click();
                        document.body.removeChild(elink);     
            })
        },
        prview(id){
            this.form1.enterprise_id=id;
            this.getJl();
            this.dialogFormVisible1=true
        },
        getJl(){
            var parm=this.form1;
            this.$api.getMonitjobList(parm).then(res=>{
                this.data=res.data.data.list
                this.total1=res.data.data.total
                
            })
        },
        detail(id){
            this.$router.push({ path: '/company/detail', query: {  id: id,page:this.form.page,page_size:this.form.page_size  } });
        },
        getData(){
            let id = this.$route.query.id;
            if(id){
                this.$api.getTemplate({id:id}).then(res=>{
                    if(res.data.code==0){
                        this.widgetList = res.data.data.widget;
                    }
                })
            }
        },
        del(id){
                this.$confirm('确定删除吗', '提示', {
                        type: 'warning'
                    }).then(() => {
                    this.$api.deleteEnterprise({id:id}).then((res)=>{
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            })
                            this.getData()
                    })
                })
        },
        permission(name){
			let permissions=this.info.permissions||[];
			let list=[];
			for(let i=0;i<permissions.length;i++){
				list.push(permissions[i].name)
			}
			if(list.indexOf(name)<0){
				return false;
			}else{
				return true;
			}	
		},
  },
  created(){
      this.getData();
  }
}
</script>