This commit is contained in:
sakuya
parent
0ed0867862
commit
44841f38e0
|
|
@ -14,7 +14,7 @@
|
|||
"cropperjs": "1.5.12",
|
||||
"crypto-js": "4.1.1",
|
||||
"echarts": "5.1.2",
|
||||
"element-plus": "1.1.0-beta.8",
|
||||
"element-plus": "1.1.0-beta.17",
|
||||
"nprogress": "0.2.0",
|
||||
"sortablejs": "1.14.0",
|
||||
"tinymce": "5.9.0",
|
||||
|
|
|
|||
|
|
@ -8,14 +8,16 @@
|
|||
-->
|
||||
|
||||
<template>
|
||||
<el-form ref="form" :model="form" :label-width="config.labelWidth || '100px'" :label-position="config.labelPosition">
|
||||
<el-skeleton v-if="loading || Object.keys(form).length==0" animated />
|
||||
|
||||
<el-form v-else ref="form" :model="form" label-width="130px" :label-position="config.labelPosition">
|
||||
<el-row :gutter="15">
|
||||
<template v-for="(item, index) in config.formItems" :key="index">
|
||||
<el-col :span="item.span || 24" v-if="!hideHandle(item)">
|
||||
<el-form-item :label="item.label" :prop="item.name" :rules="rulesHandle(item)">
|
||||
<!-- input -->
|
||||
<template v-if="item.component=='input'" >
|
||||
<el-input v-model="form[item.name]" :placeholder="item.options.placeholder" clearable></el-input>
|
||||
<el-input v-model="form[item.name]" :placeholder="item.options.placeholder" clearable :maxlength="item.options.maxlength" show-word-limit></el-input>
|
||||
</template>
|
||||
<!-- checkbox -->
|
||||
<template v-else-if="item.component=='checkbox'" >
|
||||
|
|
@ -94,6 +96,8 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import http from "@/utils/request"
|
||||
|
||||
import { defineAsyncComponent } from 'vue';
|
||||
const inputRender = defineAsyncComponent(() => import('./items/input'));
|
||||
|
||||
|
|
@ -119,7 +123,8 @@
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
form: {}
|
||||
form: {},
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
|
|
@ -128,10 +133,11 @@
|
|||
}
|
||||
},
|
||||
created() {
|
||||
this.setForm()
|
||||
|
||||
},
|
||||
mounted() {
|
||||
|
||||
this.setForm()
|
||||
this.getData()
|
||||
},
|
||||
methods: {
|
||||
//构建form对象
|
||||
|
|
@ -160,6 +166,21 @@
|
|||
this.form = this.deepMerge(this.form, this.modelValue)
|
||||
//this.form = Object.assign({}, this.form, this.modelValue)
|
||||
},
|
||||
getData() {
|
||||
this.loading = true
|
||||
var remoteData = []
|
||||
this.config.formItems.forEach((item) => {
|
||||
if(item.options && item.options.remote){
|
||||
var req = http.get(item.options.remote.api, item.options.remote.data).then(res=>{
|
||||
item.options.items = res.data
|
||||
})
|
||||
remoteData.push(req)
|
||||
}
|
||||
})
|
||||
Promise.all(remoteData).then(()=>{
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
deepMerge(obj1, obj2) {
|
||||
let key;
|
||||
for (key in obj2) {
|
||||
|
|
|
|||
|
|
@ -3,12 +3,12 @@
|
|||
<el-row :gutter="15">
|
||||
<el-col :lg="6">
|
||||
<el-card shadow="never" header="1.参数配置">
|
||||
<pre>{{config2}}</pre>
|
||||
<pre>{{config3}}</pre>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :lg="12">
|
||||
<el-card shadow="never" header="2.渲染器">
|
||||
<sc-form :config="config2" v-model="data"></sc-form>
|
||||
<sc-form :config="config3" v-model="data2"></sc-form>
|
||||
</el-card>
|
||||
<el-card shadow="never" header="" v-if="false">
|
||||
<el-form ref="formref" :model="d" label-width="100px" label-position="right" :rules="rules">
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
</el-col>
|
||||
<el-col :lg="6">
|
||||
<el-card shadow="never" header="3.表单输出">
|
||||
<pre>{{data}}</pre>
|
||||
<pre>{{data2}}</pre>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
|
@ -55,7 +55,8 @@
|
|||
{ required: true, message: '请输入活动名称', trigger: 'blur' }
|
||||
]
|
||||
},
|
||||
data: {
|
||||
data: {},
|
||||
data2: {
|
||||
name: "Activity name",
|
||||
checkbox: {
|
||||
option1: true
|
||||
|
|
@ -64,7 +65,8 @@
|
|||
select: ["1"],
|
||||
select2: "1"
|
||||
},
|
||||
config2: {
|
||||
config2: {},
|
||||
config3: {
|
||||
labelWidth: '130px',
|
||||
labelPosition: 'right',
|
||||
size: 'medium',
|
||||
|
|
@ -76,6 +78,7 @@
|
|||
value: "123",
|
||||
component: "input",
|
||||
options: {
|
||||
maxlength: "20",
|
||||
placeholder: "Activity name",
|
||||
},
|
||||
rules: [
|
||||
|
|
@ -90,6 +93,10 @@
|
|||
component: "select",
|
||||
span: 12,
|
||||
options: {
|
||||
remote: {
|
||||
api: '/api/system/dic/get',
|
||||
data: {name: 'a'}
|
||||
},
|
||||
multiple: true,
|
||||
items:[
|
||||
{
|
||||
|
|
@ -114,6 +121,10 @@
|
|||
component: "select",
|
||||
span: 12,
|
||||
options: {
|
||||
remote: {
|
||||
api: '/api/system/dic/get',
|
||||
data: {name: 'b'}
|
||||
},
|
||||
items:[
|
||||
{
|
||||
label: "选项1",
|
||||
|
|
@ -219,7 +230,7 @@
|
|||
{
|
||||
label: "Radio",
|
||||
name: "radio",
|
||||
value: "",
|
||||
value: "1",
|
||||
component: "radio",
|
||||
options: {
|
||||
items:[
|
||||
|
|
@ -384,7 +395,12 @@
|
|||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
// setTimeout(()=>{
|
||||
// this.config2 = this.config3
|
||||
// },1000)
|
||||
// setTimeout(()=>{
|
||||
// this.data = this.data2
|
||||
// },1500)
|
||||
},
|
||||
methods: {
|
||||
onSubmit(){
|
||||
|
|
|
|||
Loading…
Reference in New Issue