368 lines
7.6 KiB
Vue
368 lines
7.6 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="动态表单渲染器">
|
||
<sc-form ref="formref" :config="config" v-model="form" :loading="loading">
|
||
<el-button type="primary" @click="save">保 存</el-button>
|
||
<el-button @click="reset">重 置</el-button>
|
||
</sc-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>
|
||
//import scCode from '@/components/scCode';
|
||
|
||
export default {
|
||
name: 'formRender',
|
||
components: {
|
||
//scCode
|
||
},
|
||
data() {
|
||
return {
|
||
loading: false,
|
||
config: {},
|
||
form: {}
|
||
}
|
||
},
|
||
mounted() {
|
||
//模拟请求延迟, 配置参数和form值并无顺序要求，可同时请求
|
||
const config = {
|
||
labelWidth: '130px',
|
||
labelPosition: 'right',
|
||
size: 'medium',
|
||
formItems: [
|
||
{
|
||
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: '/api/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: '/api/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,
|
||
options: {
|
||
items:[
|
||
{
|
||
label: "选项1",
|
||
name: "option1",
|
||
value: false
|
||
},
|
||
{
|
||
label: "选项2",
|
||
name: "option2",
|
||
value: false
|
||
}
|
||
]
|
||
}
|
||
},
|
||
{
|
||
label: "多选框组",
|
||
name: "checkboxGroup",
|
||
value: [],
|
||
component: "checkboxGroup",
|
||
span: 24,
|
||
options: {
|
||
items:[
|
||
{
|
||
label: "选项1",
|
||
value: "option1"
|
||
},
|
||
{
|
||
label: "选项2",
|
||
value: "option2"
|
||
}
|
||
]
|
||
}
|
||
},
|
||
{
|
||
label: "单选",
|
||
name: "radio",
|
||
value: "1",
|
||
component: "radio",
|
||
options: {
|
||
items:[
|
||
{
|
||
label: "选项1",
|
||
value: "1"
|
||
},
|
||
{
|
||
label: "选项2",
|
||
value: "2"
|
||
}
|
||
]
|
||
}
|
||
},
|
||
{
|
||
label: "开关",
|
||
name: "required",
|
||
message: "演示如何使用表达式动态显隐和必填，试试打开和关闭开关",
|
||
value: false,
|
||
component: "switch",
|
||
},
|
||
{
|
||
label: "上传",
|
||
component: "upload",
|
||
options: {
|
||
items:[
|
||
{
|
||
label: "图像1",
|
||
name: "img1",
|
||
value: ""
|
||
},
|
||
{
|
||
label: "图像2",
|
||
name: "img2",
|
||
value: ""
|
||
}
|
||
]
|
||
},
|
||
hideHandle: "$.required==true"
|
||
},
|
||
{
|
||
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",
|
||
},
|
||
|
||
]
|
||
}
|
||
|
||
const form = {
|
||
name: "Activity name",
|
||
checkbox: {
|
||
option1: true
|
||
},
|
||
checkboxGroup: ["option1"],
|
||
select: ["1"],
|
||
select2: "1",
|
||
cascader: ['resource','docs']
|
||
}
|
||
|
||
setTimeout(()=>{
|
||
this.config = config
|
||
},500)
|
||
|
||
this.loading = true
|
||
setTimeout(()=>{
|
||
this.form = form
|
||
this.loading = false
|
||
},1500)
|
||
},
|
||
methods: {
|
||
setName(){
|
||
this.form.name = "New Title"
|
||
},
|
||
setConfig(){
|
||
this.config.formItems[1].span = this.config.formItems[1].span==24?12:24
|
||
this.config.formItems[2].span = this.config.formItems[2].span==24?12:24
|
||
},
|
||
save(){
|
||
this.$refs.formref.validate((valid) => {
|
||
if (valid) {
|
||
console.log(this.form)
|
||
alert('submit!')
|
||
}else{
|
||
return false
|
||
}
|
||
})
|
||
},
|
||
reset(){
|
||
this.$refs.formref.resetFields()
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
</style>
|