|
|
@@ -70,14 +70,22 @@
|
|
|
color:#333333;
|
|
|
}
|
|
|
.el-radio,.el-checkbox{
|
|
|
- margin-right: 30px;
|
|
|
- height: 30px;
|
|
|
- line-height: 30px;
|
|
|
+ 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;
|
|
|
+ // margin-left:60px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -85,12 +93,20 @@
|
|
|
// 右边
|
|
|
.item-main{
|
|
|
margin:34px;
|
|
|
- height:600px;
|
|
|
+ // height:600px;
|
|
|
// background: #FFFFFF;
|
|
|
border: 1px solid #DDDDDD;
|
|
|
box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.13);
|
|
|
border-radius: 20px;
|
|
|
}
|
|
|
+ // label样式
|
|
|
+ .edit_label {
|
|
|
+ /deep/.el-input__inner{
|
|
|
+ background:#F5FAFF;
|
|
|
+ border:0px;
|
|
|
+ padding:0px;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>
|
|
|
@@ -102,13 +118,13 @@
|
|
|
<div class='item-title'>表单组件</div>
|
|
|
<el-row>
|
|
|
<el-col :span='12'>
|
|
|
- <div class='model'>
|
|
|
+ <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'>
|
|
|
+ <div class='model' @click="addWidget(1)">
|
|
|
<img src="../../assets/mlt_small.png" alt="">
|
|
|
<span>多行文本</span>
|
|
|
</div>
|
|
|
@@ -116,13 +132,13 @@
|
|
|
</el-row>
|
|
|
<el-row>
|
|
|
<el-col :span='12'>
|
|
|
- <div class='model'>
|
|
|
+ <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'>
|
|
|
+ <div class='model' @click="addWidget(3)">
|
|
|
<img src="../../assets/checked_small.png" alt="">
|
|
|
<span>多选统计</span>
|
|
|
</div>
|
|
|
@@ -130,13 +146,13 @@
|
|
|
</el-row>
|
|
|
<el-row>
|
|
|
<el-col :span='12'>
|
|
|
- <div class='model'>
|
|
|
+ <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'>
|
|
|
+ <div class='model' @click="addWidget(5)">
|
|
|
<img src="../../assets/file_small.png" alt="">
|
|
|
<span>文件上传</span>
|
|
|
</div>
|
|
|
@@ -145,59 +161,82 @@
|
|
|
</div>
|
|
|
<div class="content-item middle">
|
|
|
<div class='item-title'>新建表单</div>
|
|
|
- <el-form size="small" label-width="" label-position="">
|
|
|
- <el-form-item label='姓名' class="text">
|
|
|
- <el-input placeholder='请输入' ></el-input>
|
|
|
- <font> <span>编辑</span> <span>删除</span></font>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label='手机' class='text'>
|
|
|
- <el-input placeholder='请输入'></el-input>
|
|
|
- <font> <span>编辑</span> <span>删除</span></font>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label='' class='noText'>
|
|
|
- <div> 你最喜欢的主编是？</div>
|
|
|
- <el-radio-group v-model="radio">
|
|
|
- <el-radio :label="3">备选项1</el-radio>
|
|
|
- <el-radio :label="6">备选项2</el-radio>
|
|
|
- <el-radio :label="9">备选项3</el-radio>
|
|
|
- </el-radio-group>
|
|
|
- <font> <span>编辑</span> <span>删除</span></font>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label='' class='noText'>
|
|
|
- <div> 你最喜欢的主编是？</div>
|
|
|
- <el-checkbox-group v-model="checkList">
|
|
|
- <el-checkbox label="李小安1"></el-checkbox>
|
|
|
- <el-checkbox label="李小安2"></el-checkbox>
|
|
|
- <el-checkbox label="李小安3"></el-checkbox>
|
|
|
- </el-checkbox-group>
|
|
|
- <font> <span>编辑</span> <span>删除</span></font>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label='' class='noText'>
|
|
|
- <div> 上传图片</div>
|
|
|
- <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>编辑</span> <span>删除</span></font>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label='' class='noText'>
|
|
|
- <div> 上传文件</div>
|
|
|
- <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>编辑</span> <span>删除</span></font>
|
|
|
+
|
|
|
+ <el-form size="small" label-width="" label-position="top">
|
|
|
+ <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>
|
|
|
+ </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>
|
|
|
+ </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>
|
|
|
+ </el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ <font>
|
|
|
+ <span @click="item.edit=!item.edit">{{item.edit?'编辑':'保存'}}</span>
|
|
|
+ <span @click="widgetList.splice(index,1)">删除</span>
|
|
|
+ </font>
|
|
|
+ </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>
|
|
|
+ </el-checkbox>
|
|
|
+ </el-radio-group>
|
|
|
+ <font>
|
|
|
+ <span @click="item.edit=!item.edit">{{item.edit?'编辑':'保存'}}</span>
|
|
|
+ <span @click="widgetList.splice(index,1)">删除</span>
|
|
|
+ </font>
|
|
|
+ </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>
|
|
|
+ </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>
|
|
|
+ </section>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
<el-button size="medium" type="primary" @click="dialogVisible = false">保存</el-button>
|
|
|
@@ -207,6 +246,39 @@
|
|
|
<div class='item-main'>
|
|
|
<img src="" alt="">
|
|
|
<h5 align='center'>期刊读者满意度调查</h5>
|
|
|
+ <el-form ref="form" :model="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-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-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>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -239,9 +311,27 @@ export default {
|
|
|
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:"选项",value:"选项值"}]
|
|
|
+ },
|
|
|
+ {type:"checkbox",label:"请输入标题",placeholder:"请输入",edit:true,
|
|
|
+ items:[{label:"选项",value:"选项值"},{label:"选项",value:"选项值"}]
|
|
|
+ },
|
|
|
+ {type:"image",label:"请输入标题",placeholder:"请输入",edit:true},
|
|
|
+ {type:"file",label:"请输入标题",placeholder:"请输入",edit:true}
|
|
|
+ ],
|
|
|
+ widgetList:[],
|
|
|
}
|
|
|
},
|
|
|
methods:{
|
|
|
+ addWidget(i){
|
|
|
+ console.log(i)
|
|
|
+ this.widgetList.push(this.stdWidgetList[i])
|
|
|
+ console.log(this.widgetList)
|
|
|
+ },
|
|
|
gopage(size){
|
|
|
if(size){
|
|
|
this.form.page_size=size
|
xjc