411 lines
9.0 KiB
Vue
411 lines
9.0 KiB
Vue
<template>
|
||
<el-main>
|
||
<el-row :gutter="15">
|
||
<el-col :lg="6">
|
||
<el-card shadow="never" header="处理逻辑说明">
|
||
<el-timeline>
|
||
<el-timeline-item timestamp="两者数据并无顺序要求,只是获取表单值时需要自行设置loading">1.远程获取表单配置参数和表单的值</el-timeline-item>
|
||
<el-timeline-item timestamp="构建form对象, 循环渲染对应组件, 获取远程选项数据. 完成前组件将由骨架代替">2.根据配置构建表单组件</el-timeline-item>
|
||
<el-timeline-item timestamp="合并form对象和表单值">3.给表单赋值</el-timeline-item>
|
||
</el-timeline>
|
||
<el-alert title="当前版本为预览版本,并未在正式项目中实施,请谨慎使用. 更多配置以及图形化编辑器正在路上." type="warning" show-icon></el-alert>
|
||
</el-card>
|
||
<el-card shadow="never" header="双向绑定">
|
||
<el-button type="primary" @click="setName">改变输入框的值</el-button>
|
||
<el-button type="primary" @click="setConfig">改变指定栅格配置</el-button>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :lg="12">
|
||
<el-card shadow="never" header="动态表单渲染器">
|
||
<x-form ref="formref" :config="config" v-model="form" :loading="loading">
|
||
<el-button type="primary" @click="save">保 存</el-button>
|
||
<el-button @click="reset">重 置</el-button>
|
||
</x-form>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :lg="6">
|
||
<el-card shadow="never" header="表单输出">
|
||
<pre>{{form}}</pre>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
</el-main>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'formRender',
|
||
data() {
|
||
return {
|
||
loading: false,
|
||
config: {},
|
||
form: {}
|
||
}
|
||
},
|
||
mounted() {
|
||
//模拟请求延迟, 配置参数和form值并无顺序要求，可同时请求
|
||
const config = {
|
||
labelWidth: '130px',
|
||
labelPosition: 'right',
|
||
size: 'medium',
|
||
column: [
|
||
{
|
||
label: "ElementPlus",
|
||
component: "title",
|
||
},
|
||
{
|
||
label: "输入框",
|
||
name: "name",
|
||
value: "",
|
||
component: "input",
|
||
options: {
|
||
maxlength: "20",
|
||
placeholder: "Activity name",
|
||
},
|
||
rules: [
|
||
{required: true, message: "Please input Activity name", trigger: "blur"}
|
||
],
|
||
requiredHandle: "$.required==true",
|
||
},
|
||
{
|
||
label: "栅格(12/24)",
|
||
name: "name2",
|
||
value: "",
|
||
component: "input",
|
||
span: 12,
|
||
options: {
|
||
placeholder: "span: 12",
|
||
}
|
||
},
|
||
{
|
||
label: "栅格(12/24)",
|
||
name: "name3",
|
||
value: "",
|
||
component: "input",
|
||
span: 12,
|
||
options: {
|
||
placeholder: "span: 12",
|
||
}
|
||
},
|
||
{
|
||
label: "选择器(多选)",
|
||
name: "select",
|
||
value: "",
|
||
component: "select",
|
||
span: 24,
|
||
options: {
|
||
remote: {
|
||
api: `${this.$config.API_URL}/system/dic/get`,
|
||
data: {name: 'a'}
|
||
},
|
||
multiple: true,
|
||
items:[
|
||
{
|
||
label: "选项1",
|
||
value: "1"
|
||
},
|
||
{
|
||
label: "选项2",
|
||
value: "2"
|
||
}
|
||
]
|
||
},
|
||
rules: [
|
||
{required: true, message: "Please input Activity name", trigger: "change"}
|
||
],
|
||
requiredHandle: "$.required==true",
|
||
},
|
||
{
|
||
label: "选择器(单选)",
|
||
name: "select2",
|
||
value: "",
|
||
component: "select",
|
||
span: 24,
|
||
options: {
|
||
remote: {
|
||
api: `${this.$config.API_URL}/system/dic/get`,
|
||
data: {name: 'b'}
|
||
},
|
||
items:[
|
||
{
|
||
label: "选项1",
|
||
value: "1"
|
||
},
|
||
{
|
||
label: "选项2",
|
||
value: "2"
|
||
}
|
||
]
|
||
}
|
||
},
|
||
{
|
||
label: "级联选择器",
|
||
name: "cascader",
|
||
value: "",
|
||
component: "cascader",
|
||
span: 24,
|
||
options: {
|
||
items:[
|
||
{
|
||
label: "Guide",
|
||
value: "guide",
|
||
children: [
|
||
{
|
||
label: "Disciplines",
|
||
value: "disciplines"
|
||
},
|
||
{
|
||
label: "Consistency",
|
||
value: "consistency"
|
||
},
|
||
]
|
||
},
|
||
{
|
||
label: "Resource",
|
||
value: "resource",
|
||
children: [
|
||
{
|
||
label: "Axure Components",
|
||
value: "axure"
|
||
},
|
||
{
|
||
label: "Sketch Templates",
|
||
value: "sketch"
|
||
},
|
||
{
|
||
label: "Design Documentation",
|
||
value: "docs"
|
||
}
|
||
]
|
||
},
|
||
{
|
||
label: "Component",
|
||
value: "component"
|
||
},
|
||
]
|
||
}
|
||
},
|
||
{
|
||
label: "多选框",
|
||
name: "checkbox",
|
||
component: "checkbox",
|
||
span: 24,
|
||
tips: "多选框配置加上 name 表示拥有嵌套关系。否则将值“平铺”在form对象",
|
||
options: {
|
||
items:[
|
||
{
|
||
label: "选项1",
|
||
name: "option1",
|
||
value: false
|
||
},
|
||
{
|
||
label: "选项2",
|
||
name: "option2",
|
||
value: false
|
||
}
|
||
]
|
||
},
|
||
hideHandle: "$.required==true"
|
||
},
|
||
{
|
||
label: "多选框组",
|
||
name: "checkboxGroup",
|
||
value: [],
|
||
component: "checkboxGroup",
|
||
span: 24,
|
||
options: {
|
||
items:[
|
||
{
|
||
label: "选项1",
|
||
value: "option1"
|
||
},
|
||
{
|
||
label: "选项2",
|
||
value: "option2"
|
||
}
|
||
]
|
||
},
|
||
hideHandle: "$.required==true"
|
||
},
|
||
{
|
||
label: "单选",
|
||
name: "radio",
|
||
value: "1",
|
||
component: "radio",
|
||
options: {
|
||
items:[
|
||
{
|
||
label: "选项1",
|
||
value: "1"
|
||
},
|
||
{
|
||
label: "选项2",
|
||
value: "2"
|
||
}
|
||
]
|
||
},
|
||
hideHandle: "$.required==true"
|
||
},
|
||
{
|
||
label: "开关",
|
||
name: "required",
|
||
message: "演示如何使用表达式动态显隐和必填，试试打开和关闭开关",
|
||
value: false,
|
||
component: "switch",
|
||
},
|
||
{
|
||
label: "日期/时间",
|
||
name: "date",
|
||
value: "",
|
||
component: "date",
|
||
options: {
|
||
type: "datetime",
|
||
valueFormat: "YYYY-MM-DD HH:mm:ss",
|
||
},
|
||
rules: [
|
||
{required: true, message: "Please input Data", trigger: "change"}
|
||
],
|
||
},
|
||
{
|
||
label: "滑块",
|
||
name: "slider",
|
||
value: 0,
|
||
component: "slider",
|
||
options: {
|
||
marks: {
|
||
0: '0°C',
|
||
8: '8°C',
|
||
37: '37°C'
|
||
}
|
||
}
|
||
},
|
||
{
|
||
label: "数值",
|
||
name: "number",
|
||
value: 0,
|
||
component: "number",
|
||
},
|
||
{
|
||
label: "颜色",
|
||
name: "color",
|
||
value: "",
|
||
component: "color",
|
||
},
|
||
{
|
||
label: "评分",
|
||
name: "rate",
|
||
value: 0,
|
||
component: "rate",
|
||
},
|
||
{
|
||
label: "SCUI扩展",
|
||
component: "title",
|
||
},
|
||
{
|
||
label: "表格选择器",
|
||
name: "tableselect",
|
||
value: {},
|
||
component: "tableselect",
|
||
span: 24,
|
||
options: {
|
||
apiObj: '$api.demo.page',
|
||
column: [
|
||
{
|
||
label: "ID",
|
||
prop: "id",
|
||
width:150
|
||
},
|
||
{
|
||
label: "姓名",
|
||
prop: "user"
|
||
}
|
||
],
|
||
props: {
|
||
label: 'user',
|
||
value: 'id',
|
||
keyword: "keyword"
|
||
}
|
||
}
|
||
},
|
||
{
|
||
label: "上传",
|
||
component: "upload",
|
||
options: {
|
||
items:[
|
||
{
|
||
label: "图像1",
|
||
name: "img1",
|
||
value: ""
|
||
},
|
||
{
|
||
label: "图像2",
|
||
name: "img2",
|
||
value: ""
|
||
}
|
||
]
|
||
}
|
||
},
|
||
{
|
||
label: "富文本",
|
||
name: "text",
|
||
value: "",
|
||
component: "editor",
|
||
},
|
||
]
|
||
}
|
||
|
||
const form = {
|
||
name: "Activity name",
|
||
checkbox: {
|
||
option1: true
|
||
},
|
||
checkboxGroup: ["option1"],
|
||
select: ["1"],
|
||
select2: "1",
|
||
cascader: ['resource','docs'],
|
||
tableselect: {
|
||
user: "何敏",
|
||
id: "360000197302144442"
|
||
},
|
||
text: "<p><span style=\"font-size: 28px;\">Editor</span></p>\n<table style=\"border-collapse: collapse; width: 100%;\" border=\"1\">\n<tbody>\n<tr>\n<td style=\"width: 47.4544%; background-color: #ecf0f1;\">Name</td>\n<td style=\"width: 47.4544%;\">SCUI</td>\n</tr>\n<tr>\n<td style=\"width: 47.4544%; background-color: #ecf0f1;\">Describe</td>\n<td style=\"width: 47.4544%;\">Super color UI Admin</td>\n</tr>\n</tbody>\n</table>"
|
||
}
|
||
|
||
setTimeout(()=>{
|
||
this.config = config
|
||
},500)
|
||
|
||
this.loading = true
|
||
setTimeout(()=>{
|
||
this.form = form
|
||
this.loading = false
|
||
},100)
|
||
},
|
||
methods: {
|
||
setName(){
|
||
this.form.name = "New Title"
|
||
},
|
||
setConfig(){
|
||
this.config.column[2].span = this.config.column[2].span==24?12:24
|
||
this.config.column[3].span = this.config.column[3].span==24?12:24
|
||
},
|
||
save(){
|
||
this.$refs.formref.validate((valid, obj) => {
|
||
if (valid) {
|
||
console.log(this.form)
|
||
alert('submit!')
|
||
}else{
|
||
this.$refs.formref.scrollToField(Object.keys(obj)[0])
|
||
return false
|
||
}
|
||
})
|
||
},
|
||
reset(){
|
||
this.$refs.formref.resetFields()
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
</style>
|