add form-create
This commit is contained in:
jingyoushui
parent
6739ab543b
commit
6773aec525
|
|
@ -43,6 +43,7 @@
|
||||||
"url": "https://github.com/PanJiaChen/vue-element-admin/issues"
|
"url": "https://github.com/PanJiaChen/vue-element-admin/issues"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@form-create/element-ui": "^1.0.3",
|
||||||
"axios": "0.18.1",
|
"axios": "0.18.1",
|
||||||
"clipboard": "2.0.4",
|
"clipboard": "2.0.4",
|
||||||
"codemirror": "5.45.0",
|
"codemirror": "5.45.0",
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,392 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div v-if="index==0">
|
||||||
|
<el-card class="box-card" style="width: 90%;margin-left: 5%;min-height: 150px;margin-top: 10px;">
|
||||||
|
<div />
|
||||||
|
<el-input
|
||||||
|
v-model="title"
|
||||||
|
class="radio1"
|
||||||
|
placeholder="Please enter the form topic"
|
||||||
|
clearable
|
||||||
|
style="width: 100%;font-size: 28px;"
|
||||||
|
/>
|
||||||
|
<el-input
|
||||||
|
v-model="description"
|
||||||
|
class="textarea"
|
||||||
|
type="textarea"
|
||||||
|
:rows="2"
|
||||||
|
placeholder="Please enter the form description"
|
||||||
|
style="width: 100%;font-size: 16px;margin-top: 10px;"
|
||||||
|
/>
|
||||||
|
</el-card>
|
||||||
|
<el-card
|
||||||
|
v-for="i in num"
|
||||||
|
:id="i"
|
||||||
|
:key="i"
|
||||||
|
class="box-card"
|
||||||
|
style="width: 90%;margin-left: 5%;min-height: 150px;margin-top: 10px;"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<el-tag>{{ i }}</el-tag>
|
||||||
|
<el-input
|
||||||
|
v-model="inputBT[i-1]"
|
||||||
|
placeholder="Please enter the title"
|
||||||
|
clearable
|
||||||
|
style="width: 75%;"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<el-select v-model="optiontype[i-1]" placeholder="Please choose" style="width: 18%;float:right;">
|
||||||
|
<el-option
|
||||||
|
v-for="item in options"
|
||||||
|
:key="item.val"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.val"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</div>
|
||||||
|
<div style="width: 100%;height: 0;margin-top:5px;border: solid 0.5px lightgrey" />
|
||||||
|
<div v-if="optiontype[i-1]=='input'" style="color: grey;margin-top: 20px;">
|
||||||
|
Entered by someone else
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="optiontype[i-1]=='InputNumber'" style="color: grey;margin-top: 20px;">
|
||||||
|
Entered by someone else
|
||||||
|
</div>
|
||||||
|
<div v-if="optiontype[i-1]=='radio'" class="radio" style="color: grey;margin-top: 20px;">
|
||||||
|
|
||||||
|
<div v-for="j in radionum[i-1]" :key="j">
|
||||||
|
○
|
||||||
|
<el-input
|
||||||
|
v-model="radioname[i-1][j-1]"
|
||||||
|
placeholder="Please enter the option name"
|
||||||
|
clearable
|
||||||
|
style="width: 80%;"
|
||||||
|
/>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<el-button type="text" @click="addradio(i-1)"><i
|
||||||
|
class="el-icon-circle-plus-outline"
|
||||||
|
style="font-size: 20px;margin-top: 10px"
|
||||||
|
/></el-button>
|
||||||
|
<el-button type="text" @click="deleteradio(i-1)"><i
|
||||||
|
class="el-icon-remove-outline"
|
||||||
|
style="font-size: 20px;margin-top: 10px"
|
||||||
|
/></el-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="optiontype[i-1]=='checkbox'" class="radio" style="color: grey;margin-top: 20px;">
|
||||||
|
|
||||||
|
<div v-for="j in checkboxnum[i-1]" :key="j">
|
||||||
|
□
|
||||||
|
<el-input
|
||||||
|
v-model="checkboxname[i-1][j-1]"
|
||||||
|
placeholder="Please enter the option name"
|
||||||
|
clearable
|
||||||
|
style="width: 80%;"
|
||||||
|
/>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<el-button type="text" @click="addcheckbox(i-1)"><i
|
||||||
|
class="el-icon-circle-plus-outline"
|
||||||
|
style="font-size: 20px;margin-top: 10px"
|
||||||
|
/></el-button>
|
||||||
|
<el-button type="text" @click="deletecheckbox(i-1)"><i
|
||||||
|
class="el-icon-remove-outline"
|
||||||
|
style="font-size: 20px;margin-top: 10px"
|
||||||
|
/></el-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div v-if="optiontype[i-1]=='select'" class="radio" style="color: grey;margin-top: 20px;">
|
||||||
|
|
||||||
|
<div v-for="j in selectnum[i-1]" :key="j">
|
||||||
|
{{ j }}、
|
||||||
|
<el-input
|
||||||
|
v-model="selectname[i-1][j-1]"
|
||||||
|
placeholder="Please enter the option name"
|
||||||
|
clearable
|
||||||
|
style="width: 80%;"
|
||||||
|
/>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<el-button type="text" @click="addselect(i-1)"><i
|
||||||
|
class="el-icon-circle-plus-outline"
|
||||||
|
style="font-size: 20px;margin-top: 10px"
|
||||||
|
/></el-button>
|
||||||
|
<el-button type="text" @click="deleteselect(i-1)"><i
|
||||||
|
class="el-icon-remove-outline"
|
||||||
|
style="font-size: 20px;margin-top: 10px"
|
||||||
|
/></el-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</el-card>
|
||||||
|
<div style="text-align: right;width:80%;margin-left: 10%;margin-top: 10px;">
|
||||||
|
<el-tooltip class="item" effect="light" content="Add" placement="top">
|
||||||
|
<el-button type="text" style="font-size: 30px;" @click="adddiv"><i class="el-icon-circle-plus" /></el-button>
|
||||||
|
</el-tooltip>
|
||||||
|
|
||||||
|
<el-tooltip class="item" effect="light" content="Remove" placement="top">
|
||||||
|
<el-button type="text" style="font-size: 30px;" @click="delectdiv"><i class="el-icon-remove" /></el-button>
|
||||||
|
</el-tooltip>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div style="text-align: center;">
|
||||||
|
<el-button type="primary" @click="preview()">Preview</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-if="index==1">
|
||||||
|
<el-card class="box-card" style="width: 90%;margin-left: 5%;margin-top: 5px;">
|
||||||
|
<div style="font-size: 25px;text-align: center">
|
||||||
|
{{ title }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="color: grey;">
|
||||||
|
{{ description }}
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
<el-card class="box-card" style="margin-top: 5px;width: 90%;margin-left: 5%;">
|
||||||
|
<div ref="imageWrapper" class="imageWrapper">
|
||||||
|
<form-create v-model="yulanform" :rule="formrule" :option="option" style="margin-top: 20px;" @on-submit="onSubmit" />
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
|
||||||
|
<div style="text-align: center;padding-top: 5px;">
|
||||||
|
<el-button type="primary" @click="changeindex(0)">Back</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import formCreate from '@form-create/element-ui'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'FromCreate',
|
||||||
|
components: {
|
||||||
|
formCreate: formCreate.$form()
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
index: 0,
|
||||||
|
title: '',
|
||||||
|
description: '',
|
||||||
|
// 卡片的个数
|
||||||
|
num: 1,
|
||||||
|
// 输入框
|
||||||
|
inputBT: [],
|
||||||
|
// 下拉选择框
|
||||||
|
options: [{
|
||||||
|
val: 'input',
|
||||||
|
label: 'Input'
|
||||||
|
}, {
|
||||||
|
val: 'InputNumber',
|
||||||
|
label: 'InputNumber'
|
||||||
|
}, {
|
||||||
|
val: 'radio',
|
||||||
|
label: 'Radio'
|
||||||
|
}, {
|
||||||
|
val: 'checkbox',
|
||||||
|
label: 'Checkbox'
|
||||||
|
}, {
|
||||||
|
val: 'select',
|
||||||
|
label: 'Select'
|
||||||
|
}, {
|
||||||
|
val: 'rate',
|
||||||
|
label: 'Rate'
|
||||||
|
}],
|
||||||
|
// 组件的类型
|
||||||
|
optiontype: [],
|
||||||
|
|
||||||
|
// 单选按钮的选项个数
|
||||||
|
radionum: [2],
|
||||||
|
// 单选按钮名字
|
||||||
|
radioname: [[]],
|
||||||
|
|
||||||
|
// 多选按钮的选项个数
|
||||||
|
checkboxnum: [2],
|
||||||
|
// 多选按钮名字
|
||||||
|
checkboxname: [[]],
|
||||||
|
|
||||||
|
// 下拉框的选项个数
|
||||||
|
selectnum: [2],
|
||||||
|
// 下拉框名字
|
||||||
|
selectname: [[]],
|
||||||
|
|
||||||
|
// 生成的表单规则
|
||||||
|
formrule: [],
|
||||||
|
// 表单实例对象
|
||||||
|
yulanform: {},
|
||||||
|
|
||||||
|
option: {
|
||||||
|
submitBtn: {
|
||||||
|
show: true,
|
||||||
|
size: 'small',
|
||||||
|
long: '20px',
|
||||||
|
innerText: 'Submit'
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
dataURL: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 增加组件
|
||||||
|
adddiv() {
|
||||||
|
this.num += 1
|
||||||
|
this.inputBT.push()
|
||||||
|
this.radionum.push(2)
|
||||||
|
this.radioname.push([])
|
||||||
|
this.checkboxnum.push(2)
|
||||||
|
this.checkboxname.push([])
|
||||||
|
this.selectnum.push(2)
|
||||||
|
this.selectname.push([])
|
||||||
|
},
|
||||||
|
// 删除组件
|
||||||
|
delectdiv() {
|
||||||
|
this.num -= 1
|
||||||
|
this.inputBT.pop()
|
||||||
|
this.radionum.pop()
|
||||||
|
this.radioname.pop()
|
||||||
|
this.checkboxnum.pop()
|
||||||
|
this.checkboxname.pop()
|
||||||
|
this.selectnum.pop()
|
||||||
|
this.selectname.pop()
|
||||||
|
},
|
||||||
|
// 增加单选按钮选项，实时更新数组用$set
|
||||||
|
addradio(i) {
|
||||||
|
this.$set(this.radionum, i, this.radionum[i] + 1)
|
||||||
|
},
|
||||||
|
deleteradio(i) {
|
||||||
|
this.$set(this.radionum, i, this.radionum[i] - 1)
|
||||||
|
},
|
||||||
|
|
||||||
|
// 增加多选按钮选项
|
||||||
|
addcheckbox(i) {
|
||||||
|
this.$set(this.checkboxnum, i, this.checkboxnum[i] + 1)
|
||||||
|
},
|
||||||
|
deletecheckbox(i) {
|
||||||
|
this.$set(this.checkboxnum, i, this.checkboxnum[i] - 1)
|
||||||
|
},
|
||||||
|
|
||||||
|
// 增加下拉框选项
|
||||||
|
addselect(i) {
|
||||||
|
this.$set(this.selectnum, i, this.selectnum[i] + 1)
|
||||||
|
},
|
||||||
|
deleteselect(i) {
|
||||||
|
this.$set(this.selectnum, i, this.selectnum[i] - 1)
|
||||||
|
},
|
||||||
|
|
||||||
|
preview() {
|
||||||
|
this.formrule = []
|
||||||
|
for (let i = 0; i < this.inputBT.length; i++) {
|
||||||
|
console.log('optiontype:' + this.optiontype[i])
|
||||||
|
|
||||||
|
if (this.optiontype[i] === 'radio') {
|
||||||
|
var h = (this.radioname[i].length)
|
||||||
|
|
||||||
|
console.log('this.radioname:' + this.radioname[i])
|
||||||
|
|
||||||
|
var options = []
|
||||||
|
for (var j = 0; j < h; j++) {
|
||||||
|
options.push(
|
||||||
|
{ value: this.radioname[i][j], label: this.radioname[i][j] },
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
this.formrule.push({
|
||||||
|
type: this.optiontype[i],
|
||||||
|
field: this.inputBT[i],
|
||||||
|
title: this.inputBT[i],
|
||||||
|
options: options
|
||||||
|
|
||||||
|
},)
|
||||||
|
} else if (this.optiontype[i] === 'checkbox') {
|
||||||
|
const h = (this.checkboxname[i].length)
|
||||||
|
|
||||||
|
const options = []
|
||||||
|
for (let j = 0; j < h; j++) {
|
||||||
|
options.push(
|
||||||
|
{ value: this.checkboxname[i][j], label: this.checkboxname[i][j] },
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
this.formrule.push({
|
||||||
|
type: this.optiontype[i],
|
||||||
|
field: this.inputBT[i],
|
||||||
|
title: this.inputBT[i],
|
||||||
|
options: options,
|
||||||
|
value: []
|
||||||
|
|
||||||
|
},)
|
||||||
|
} else if (this.optiontype[i] === 'select') {
|
||||||
|
const h = (this.selectname[i].length)// 3
|
||||||
|
|
||||||
|
const options = []
|
||||||
|
for (let j = 0; j < h; j++) {
|
||||||
|
options.push(
|
||||||
|
{ value: this.selectname[i][j], label: this.selectname[i][j] },
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
this.formrule.push({
|
||||||
|
type: this.optiontype[i],
|
||||||
|
field: this.inputBT[i],
|
||||||
|
title: this.inputBT[i],
|
||||||
|
options: options
|
||||||
|
|
||||||
|
},)
|
||||||
|
} else {
|
||||||
|
this.formrule.push({
|
||||||
|
type: this.optiontype[i],
|
||||||
|
field: this.inputBT[i],
|
||||||
|
title: this.inputBT[i]
|
||||||
|
},)
|
||||||
|
console.log(this.formrule)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.index = 1
|
||||||
|
},
|
||||||
|
onSubmit(formData) {
|
||||||
|
alert(JSON.stringify(formData))
|
||||||
|
},
|
||||||
|
changeindex(msg) {
|
||||||
|
this.index = msg
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.radio .el-input__inner {
|
||||||
|
width: 220px;
|
||||||
|
border-top-width: 0px;
|
||||||
|
border-left-width: 0px;
|
||||||
|
border-right-width: 0px;
|
||||||
|
border-bottom-width: 1px;
|
||||||
|
/*outline: medium;*/
|
||||||
|
}
|
||||||
|
.radio1 .el-input__inner {
|
||||||
|
width: 100%;
|
||||||
|
border-top-width: 0px;
|
||||||
|
border-left-width: 0px;
|
||||||
|
border-right-width: 0px;
|
||||||
|
border-bottom-width: 1px;
|
||||||
|
/*outline: medium;*/
|
||||||
|
}
|
||||||
|
.textarea .el-textarea__inner {
|
||||||
|
width: 100%;
|
||||||
|
border-top-width: 0px;
|
||||||
|
border-left-width: 0px;
|
||||||
|
border-right-width: 0px;
|
||||||
|
border-bottom-width: 1px;
|
||||||
|
/*outline: medium;*/
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -30,6 +30,12 @@ const componentsRouter = {
|
||||||
name: 'JsonEditorDemo',
|
name: 'JsonEditorDemo',
|
||||||
meta: { title: 'JSON Editor' }
|
meta: { title: 'JSON Editor' }
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: 'form-create',
|
||||||
|
component: () => import('@/views/components-demo/create-form'),
|
||||||
|
name: 'FormCreateDemo',
|
||||||
|
meta: { title: 'Form Create' }
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: 'split-pane',
|
path: 'split-pane',
|
||||||
component: () => import('@/views/components-demo/split-pane'),
|
component: () => import('@/views/components-demo/split-pane'),
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,20 @@
|
||||||
|
<template>
|
||||||
|
<div class="components-container">
|
||||||
|
<aside>FormCreate is base on <a href="http://www.form-create.com/" target="_blank">form-create</a>.</aside>
|
||||||
|
<div>
|
||||||
|
<FromCreate />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import FromCreate from '../../components/FormCreate/index'
|
||||||
|
export default {
|
||||||
|
name: 'CreateForm',
|
||||||
|
components: { FromCreate }
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue