|
|
@@ -107,6 +107,26 @@
|
|
|
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>
|
|
|
@@ -163,6 +183,8 @@
|
|
|
<div class='item-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="dialogVisible = false">提交</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">期刊读者满意度调查</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,7 +320,9 @@
|
|
|
</section>
|
|
|
</template>
|
|
|
<script>
|
|
|
+import vuedraggable from 'vuedraggable';
|
|
|
export default {
|
|
|
+components: {vuedraggable},
|
|
|
data(){
|
|
|
return{
|
|
|
edit:0,
|
|
|
@@ -329,9 +366,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
|
xjc