XiaoMo/x-php-Admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
a7921dab1e
x-php-Admin/copy backup/vab/form.vue

411 lines
9.0 KiB
Vue
Raw Normal View History

创建
2023-06-07 10:48:30 +00:00
<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="动态表单渲染器">
no message
2023-07-10 16:41:24 +00:00
<x-form ref="formref" :config="config" v-model="form" :loading="loading">
创建
2023-06-07 10:48:30 +00:00
<el-button type="primary" @click="save">保 存</el-button>
<el-button @click="reset">重 置</el-button>
no message
2023-07-10 16:41:24 +00:00
</x-form>
创建
2023-06-07 10:48:30 +00:00
</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',
no message
2023-07-07 16:23:19 +00:00
column: [
创建
2023-06-07 10:48:30 +00:00
{
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: {
config
2023-06-11 14:58:26 +00:00
api: `${this.$config.API_URL}/system/dic/get`,
创建
2023-06-07 10:48:30 +00:00
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: {
config
2023-06-11 14:58:26 +00:00
api: `${this.$config.API_URL}/system/dic/get`,
创建
2023-06-07 10:48:30 +00:00
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: {
API
2023-06-11 14:57:10 +00:00
apiObj: '$api.demo.page',
创建
2023-06-07 10:48:30 +00:00
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(){
no message
2023-07-07 16:23:19 +00:00
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
创建
2023-06-07 10:48:30 +00:00
},
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>
Reference in New Issue Copy Permalink