yrxzy/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;
                            cursor: pointer;
                        }
                    }
                    .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;
                        font-weight: bold;
                    }
                &.text{
                    /deep/.el-form-item__content{
                        // margin-left:60px;
                    }
                }
              }
          }
           // 右边
           .phone{
                width: 350px;
                height: 713px;
                background: url("../../assets/survey_bg.png") no-repeat;
                background-size:100% auto;
                margin: auto;
           }
            .item-main{
                height: 541px;
                width: 315px;
                background: #FFFFFF;
                border: 1px solid #ddd;
                overflow: auto;
                position: relative;
                top: 85px;
                left: 21px;
                // display: none;
                // border: 1px solid #DDDDDD;
                // box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.13);
                border-radius: 5px; 
                overflow: auto;
                .el-form.over_y{
                   border: none;
                   overflow: visible;
                }
            }
            // 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{
                width:145px;
                position: relative;
                // top:15px;
                left: 20px;
            }
            .item_require{
                position: absolute;
                top:0px;
                right:35px!important;
                /deep/.el-checkbox__label{
                    padding-left:5px;
                    // color:red;
                }
            }
            .require::before{
                content: "*";
                color: #f56c6c;
                margin-right: 4px;
                position:absolute;
                left:-10px;
            }
       }
   }
</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" :prop="item.label">
                        <section v-if="item.type=='input'">
                            <el-input :readonly="item.edit" v-model="item.label" :class="[item.edit?'edit_label':'',item.require?'require':'']"></el-input>
                            <el-input placeholder='请输入' v-model="item.placeholder"></el-input>
                            <font>
                                 <el-checkbox class="item_require" v-model="item.require">必填</el-checkbox>
                                 <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':'',item.require?'require':'']"></el-input>
                            <el-input type="textarea" placeholder='请输入' v-model="item.placeholder"></el-input>
                            <font>
                                 <el-checkbox class="item_require" v-model="item.require">必填</el-checkbox>
                                 <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':'',item.require?'require':'']"></el-input>
                            <el-radio-group>
                                <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>
                                 <el-checkbox class="item_require" v-model="item.require">必填</el-checkbox>
                                 <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':'',item.require?'require':'']"></el-input>
                            <el-radio-group>
                                <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>
                                <el-checkbox class="item_require" v-model="item.require">必填</el-checkbox>
                                 <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="phone">
                    <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 :class="item.require?'require':''" v-if="item.type=='input'" v-model="form.label" :placeholder="item.placeholder"></el-input>
                                <el-input :class="item.require?'require':''" v-if="item.type=='textarea'" type="textarea" v-model="form.label" :placeholder="item.placeholder"></el-input>
                                <el-radio-group v-if="item.type=='radio'" :class="item.require?'require':''">
                                    <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'" :class="item.require?'require':''">
                                    <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" style="width:100%;margin-top:20px;">提交</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
            </div>
        </div>
    </section>
</template>
<script>
import vuedraggable from 'vuedraggable';
export default {
components: {vuedraggable},
  data(){
    return{
      rules: {
        "姓名": [{ required: true, message: "请输入标题", trigger: "blur" }],
      },
      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:{
        unique(arr){
            var x = new Set(arr);
            return [...x];
        },
        save(){
            let id = this.$route.query.id;
            let copyid = this.$route.query.copyid
            let widgets = Array.from(this.widgetList);
            let flag = 0;
            let labels = []
            widgets.forEach((item,index)=>{
                labels.push(item.label)
            })
            if(labels.length!=this.unique(labels).length){
                flag = 1
                this.$alert("题干不能相同请仔细检查数据!","数据错误",{
                    confirmButtonText:"确定",
                    type:"error"
                })
                return false
            }
            widgets.forEach((item,index)=>{
                if(item.label==""){
                    flag = 2
                }
                if(item.type=="radio"||item.type=="checkbox"){
                    let item_labels = []
                    item.items.forEach((obj,index)=>{
                        item_labels.push(obj.label)
                    })
                    if(item_labels.length!=this.unique(item_labels).length){
                        flag = 3
                    }
                    
                }
            })
            if(flag==2){
                this.$alert("题干不能为空请仔细检查数据!","数据错误",{
                    confirmButtonText:"确定",
                    type:"error"
                })
                return false
            }
            if(flag==3){
                this.$alert("选择题选项不能相同请仔细检查数据!","数据错误",{
                    confirmButtonText:"确定",
                    type:"error"
                })
                return false
            }

            let params = {
                    name:this.title,
                    widget:JSON.stringify(widgets)
                }
            console.log(widgets,22222222222)
            if(id && !copyid){
                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>