Merge branch 'master' of http://118.190.145.217:3000/xiaojincai/zky-admin

src/router.js

@@ -173,16 +173,20 @@ export default new Router({
     },
     {
       path: '/message/template',
-      name: '表单模板',
+      name: '问卷模板',
       icon: 'el-icon-chat-dot-square',
       component: () => import('./views/Home.vue'),
       show: 0,
       isLeaf: 1,
       children: [{
         path: '/message/template',
+        component: () => import('./views/message/templateList.vue'),
+        name: '问卷模板'
+      }, {
+        path: '/message/template/add',
         component: () => import('./views/message/modelForm.vue'),
-        name: '表单模板'
-      }, ]
+        name: '新增表单'
+      }]
     },
     {
       path: '/system/account',

src/views/message/modelForm.vue

@@ -107,15 +107,35 @@
                     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%;
+                }
+            }
        }
    }
 </style>
 <template>
     <section>
-        <p><span>信息管理></span>新增表单</p>
+        <p><span>信息管理></span>新增模板</p>
         <div class="content">
             <div class="content-item">
-                <div class='item-title'>表单组件</div>
+                <div class='item-title'>模板组件</div>
                 <el-row>
                     <el-col :span='12'>
                         <div class='model' @click="addWidget(0)">
@@ -160,9 +180,11 @@
                 </el-row>
             </div>
             <div class="content-item middle">
-                <div class='item-title'>新建表单</div>
+                <div class='item-title'>编辑模板-{{title}}</div>
 
                 <el-form size="small" label-width="" label-position="top">
+                    <vuedraggable class="wrapper" v-model="widgetList">
+                    <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>
@@ -185,6 +207,9 @@
                             <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>
@@ -197,6 +222,9 @@
                             <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>
@@ -238,23 +266,27 @@
                             </font>
                         </section>
                     </el-form-item>
+                    </transition-group>
+                    </vuedraggable>
+                    <el-form-item  v-if="this.widgetList.length">
+                        <el-button size="medium" type="primary" @click="$router.push('/message/template')">保存</el-button>
+                    </el-form-item>
                 </el-form>
-                <el-button size="medium" type="primary" @click="dialogVisible = false">保存</el-button>
             </div>
             <div class="content-item right">
                 <div class='item-title'>效果预览</div>
                 <div class='item-main'>
                     <img src="" alt="">
-                    <h5 align='center'>期刊读者满意度调查</h5>
-                    <el-form ref="form" :model="form">
+                    <h5 align='center' class="tpl_title">{{title}}</h5>
+                    <el-form ref="form" :model="form" class="tpl_form">
                         <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">{{item.label}}</el-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" v-for="(iitem,index) in item.items" :key="index">{{item.label}}</el-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'"
@@ -278,6 +310,9 @@
                                 <!-- <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>
@@ -285,9 +320,12 @@
     </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,
@@ -329,9 +367,24 @@ export default {
   methods:{
         addWidget(i){
             console.log(i)
-            this.widgetList.push(this.stdWidgetList[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,0,{label:"选项",value:"选项值"})
+            }
+        },
         gopage(size){
             if(size){
                 this.form.page_size=size

src/views/message/templateList.vue

@@ -0,0 +1,127 @@
+<style lang="scss">
+    .preview{
+        .el-form-item{
+            margin-bottom:15px;
+        }
+        label,p{
+            line-height: 25px !important;
+        }
+    }
+</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">搜索</el-button>
+                    </el-form-item>
+                    <el-form-item style="float:right" >
+                        <el-button @click="dialogVisible=true,dialogTitle='新增模板'" type="primary">新增模板</el-button>
+                    </el-form-item>
+                </el-form>
+            </div>
+            <el-table
+                    class="table"
+                    :data="list" height="57vh"
+                    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="username"  
+                    label=创建人>
+                    </el-table-column>
+                    <el-table-column
+                    prop=""  
+                    label="创建时间">
+                    </el-table-column>
+                    <el-table-column  
+                    prop="zip"  width="150"
+                    label="操作">
+                    <template slot-scope="">
+                        <el-button class="edit" type="text" @click="dialogVisible=true,edit=0">编辑</el-button>
+                        <el-button class="del" @click="del" 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>
+        <span slot="footer" class="dialog-footer">
+            <el-button size="small" type="primary" @click="$router.push({path:'/message/template/add',query:{title:form1.name}})">确 定</el-button>
+        </span>
+        </el-dialog>
+    </section>
+</template>
+<script>
+import Page from '../../components/Page';
+export default {
+  components:{
+        Page
+  },
+  data(){
+    return{
+      edit:0,
+      form:{name:'',page:1,page_size:20},
+      form1:{},
+      total:1,
+      list:[{name:'2333'}],
+      loading:false,
+      input:'',
+      dialogVisible:false,
+      dialogTitle:"",
+      defaultProps:{},
+      data: [],
+    }
+  },
+  methods:{
+        getPermissions(){
+            this.$api.getUserPermissions().then(res=>{
+                this.data = res.data.data
+            })
+        },
+        getData(){
+            var parm=this.form;        
+            this.loading=true
+            this.$api.getEnterpriseList(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.deleteEnterprise({id:id}).then((res)=>{
+                            this.$message({
+                                message: '删除成功',
+                                type: 'success'
+                            })
+                            this.getData()
+                    })
+                })
+        },
+  },
+  created(){
+    //   this.getPermissions()
+    //   this.getData()
+  }
+}
+</script>