UP

package.json

@@ -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",

src/components/scForm/index.vue

@@ -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) {

src/views/vab/form.vue

@@ -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(){