From 0ed086786222ce1b6f32c17d69082a82e31d7a96 Mon Sep 17 00:00:00 2001
From: sc <shencheng@heronshn.com>
Date: Tue, 28 Sep 2021 17:04:03 +0800
Subject: [PATCH] add

---
 src/components/scCode/index.vue          |  42 ++++++
 src/components/scForm/index.vue          | 128 +++++++++++++++--
 src/components/scForm/items/checkbox.vue |   2 +-
 src/components/scForm/items/input.vue    |   8 +-
 src/components/scForm/items/upload.vue   |  39 ++++++
 src/views/vab/form.vue                   | 166 ++++++++++++++++++++++-
 6 files changed, 360 insertions(+), 25 deletions(-)
 create mode 100644 src/components/scCode/index.vue
 create mode 100644 src/components/scForm/items/upload.vue

diff --git a/src/components/scCode/index.vue b/src/components/scCode/index.vue
new file mode 100644
index 00000000..59bbc327
--- /dev/null
+++ b/src/components/scCode/index.vue
@@ -0,0 +1,42 @@
+<!--
+ * @Descripttion: 封装的codemirror
+ * @version: 1.0
+ * @Author: sakuya
+ * @Date: 2021年9月28日15:02:19
+ * @LastEditors:
+ * @LastEditTime:
+-->
+
+<template>
+	<div class="sc-code">
+		<textarea v-html="code" wrap="off" rows="10"></textarea>
+	</div>
+</template>
+
+<script>
+	export default {
+		props: {
+			modelValue: [String, Object, Array],
+		},
+		data() {
+			return {
+				code: ""
+			}
+		},
+		watch: {
+			code(val){
+				this.$emit('update:modelValue', JSON.parse(val));
+			},
+		},
+		mounted() {
+			this.code = JSON.stringify(this.modelValue, null, 4)
+		},
+		methods: {
+
+		}
+	}
+</script>
+
+<style scoped>
+	.sc-code textarea {width: 100%;font-size: 12px;padding:15px;}
+</style>
diff --git a/src/components/scForm/index.vue b/src/components/scForm/index.vue
index cbd6d403..03a948c5 100644
--- a/src/components/scForm/index.vue
+++ b/src/components/scForm/index.vue
@@ -8,18 +8,84 @@
 -->
 
 <template>
-	<el-form ref="form" :model="form" :label-width="config.labelWidth" :label-position="config.labelPosition">
+	<el-form ref="form" :model="form" :label-width="config.labelWidth || '100px'" :label-position="config.labelPosition">
 		<el-row :gutter="15">
-			<template v-for="(item, index) in config.items" :key="index">
-				<el-col v-if="!hideHandle(item)" :span="item.span || 24">
+			<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)">
-						<component :is="`${item.component}-render`" v-model="form" :item="item"></component>
+						<!-- input -->
+						<template v-if="item.component=='input'" >
+							<el-input v-model="form[item.name]" :placeholder="item.options.placeholder" clearable></el-input>
+						</template>
+						<!-- checkbox -->
+						<template v-else-if="item.component=='checkbox'" >
+							<template v-if="item.name" >
+								<el-checkbox v-model="form[item.name][_item.name]" :label="_item.label"  v-for="(_item, _index) in item.options.items" :key="_index"></el-checkbox>
+							</template>
+							<template v-else >
+								<el-checkbox v-model="form[_item.name]" :label="_item.label"  v-for="(_item, _index) in item.options.items" :key="_index"></el-checkbox>
+							</template>
+						</template>
+						<!-- checkboxGroup -->
+						<template v-else-if="item.component=='checkboxGroup'" >
+							<el-checkbox-group v-model="form[item.name]">
+								<el-checkbox v-for="_item in item.options.items" :key="_item.value" :label="_item.value">{{_item.label}}</el-checkbox>
+							</el-checkbox-group>
+						</template>
+						<!-- upload -->
+						<template v-else-if="item.component=='upload'" >
+							<el-col v-for="(_item, _index) in item.options.items" :key="_index">
+								<el-form-item :prop="_item.name">
+									<sc-upload v-model="form[_item.name]" :title="_item.label"></sc-upload>
+								</el-form-item>
+							</el-col>
+						</template>
+						<!-- switch -->
+						<template v-else-if="item.component=='switch'" >
+							<el-switch v-model="form[item.name]" />
+						</template>
+						<!-- select -->
+						<template v-else-if="item.component=='select'" >
+							<el-select v-model="form[item.name]" :multiple="item.options.multiple" :placeholder="item.options.placeholder" clearable filterable style="width: 100%;">
+								<el-option v-for="option in item.options.items" :key="option.value" :label="option.label" :value="option.value"></el-option>
+							</el-select>
+						</template>
+						<!-- date -->
+						<template v-else-if="item.component=='date'" >
+							<el-date-picker v-model="form[item.name]" :type="item.options.type" :shortcuts="item.options.shortcuts" :default-time="item.options.defaultTime" :value-format="item.options.valueFormat" :placeholder="item.options.placeholder || '请选择'"></el-date-picker>
+						</template>
+						<!-- number -->
+						<template v-else-if="item.component=='number'" >
+							<el-input-number v-model="form[item.name]" controls-position="right"></el-input-number>
+						</template>
+						<!-- radio -->
+						<template v-else-if="item.component=='radio'" >
+							<el-radio-group v-model="form[item.name]">
+								<el-radio v-for="_item in item.options.items" :key="_item.value" :label="_item.value">{{_item.label}}</el-radio>
+							</el-radio-group>
+						</template>
+						<!-- noComponent -->
+						<template v-else>
+							未匹配到相应组件 {{item.component}}
+						</template>
 					</el-form-item>
 				</el-col>
 			</template>
+
+
+			<!-- <template v-for="(item, index) in config.items" :key="index">
+				<el-col v-if="!hideHandle(item)" :span="item.span || 24">
+					<el-form-item v-if="item.name" :label="item.label" :prop="item.name" :rules="rulesHandle(item)">
+						<component :is="`${item.component}-render`" v-model="form[item.name]" :item="item"></component>
+					</el-form-item>
+					<el-form-item v-else :label="item.label" :rules="rulesHandle(item)">
+						<component  v-for="(_item, _index) in item.options.items" :key="_index" :is="`${item.component}-render`" v-model="form[_item.name]" :item="_item"></component>
+					</el-form-item>
+				</el-col>
+			</template> -->
 			<el-col :span="24">
 				<el-form-item>
-					<el-button type="primary">提交</el-button>
+					<el-button type="primary" @click="submit">提交</el-button>
 					<el-button>取消</el-button>
 				</el-form-item>
 			</el-col>
@@ -28,11 +94,15 @@
 </template>
 
 <script>
-	import inputRender from './items/input'
+	import { defineAsyncComponent } from 'vue';
+	const inputRender = defineAsyncComponent(() => import('./items/input'));
+
+	//import inputRender from './items/input'
 	import selectRender from './items/select'
 	import checkboxRender from './items/checkbox'
 	import checkboxGroupRender from './items/checkboxGroup'
 	import switchRender from './items/switch'
+	import uploadRender from './items/upload'
 
 	export default {
 		props: {
@@ -44,7 +114,8 @@
 			selectRender,
 			checkboxRender,
 			checkboxGroupRender,
-			switchRender
+			switchRender,
+			uploadRender
 		},
 		data() {
 			return {
@@ -56,24 +127,45 @@
 				this.$emit("update:modelValue", val)
 			}
 		},
-		mounted() {
+		created() {
 			this.setForm()
+		},
+		mounted() {
+
 		},
 		methods: {
 			//构建form对象
 			setForm(){
-				this.config.items.forEach((item) => {
-
+				this.config.formItems.forEach((item) => {
 					if(item.component == 'checkbox'){
+						if(item.name){
+							const value = {}
+							item.options.items.forEach((option) => {
+								 value[option.name] = option.value
+							})
+							this.form[item.name] = value
+						}else{
+							item.options.items.forEach((option) => {
+								 this.form[option.name] = option.value
+							})
+						}
+					}else if(item.component == 'upload'){
 						item.options.items.forEach((option) => {
-							this.form[option.name] = option.value
+							 this.form[option.name] = option.value
 						})
 					}else{
 						this.form[item.name] = item.value
 					}
-
 				})
-				this.form = Object.assign({}, this.form, this.modelValue)
+				this.form = this.deepMerge(this.form, this.modelValue)
+				//this.form = Object.assign({}, this.form, this.modelValue)
+			},
+			deepMerge(obj1, obj2) {
+				let key;
+				for (key in obj2) {
+					obj1[key] = obj1[key] && obj1[key].toString() === "[object Object]" && (obj2[key] && obj2[key].toString() === "[object Object]") ? this.deepMerge(obj1[key], obj2[key]) : (obj1[key] = obj2[key])
+				}
+				return {...obj1};
 			},
 			updata(val, item){
 				console.log(val, item)
@@ -92,6 +184,16 @@
 					requiredRule.required = exp
 				}
 				return item.rules
+			},
+			submit(){
+				this.$refs.form.validate((valid) => {
+					if (valid) {
+						console.log(this.form)
+						alert('submit!')
+					}else{
+						return false
+					}
+				})
 			}
 		}
 	}
diff --git a/src/components/scForm/items/checkbox.vue b/src/components/scForm/items/checkbox.vue
index e936a616..7029b9ea 100644
--- a/src/components/scForm/items/checkbox.vue
+++ b/src/components/scForm/items/checkbox.vue
@@ -1,5 +1,5 @@
 <template>
-	<el-checkbox v-for="option in item.options.items" :key="option.value" v-model="value[option.name]" :label="option.label"></el-checkbox>
+	<el-checkbox v-model="value" :label="item.label"></el-checkbox>
 </template>
 
 <script>
diff --git a/src/components/scForm/items/input.vue b/src/components/scForm/items/input.vue
index 3aab2991..7ca7462d 100644
--- a/src/components/scForm/items/input.vue
+++ b/src/components/scForm/items/input.vue
@@ -1,5 +1,5 @@
 <template>
-	<el-input v-model="form[item.name]" :placeholder="item.options.placeholder"></el-input>
+	<el-input v-model="value" :placeholder="item.options.placeholder"></el-input>
 </template>
 
 <script>
@@ -11,14 +11,14 @@
 		},
 		data() {
 			return {
-				form: this.modelValue
+				value: this.modelValue
 			}
 		},
 		watch:{
 			modelValue(val){
-				this.form = val
+				this.value = val
 			},
-			form(val){
+			value(val){
 				this.$emit("update:modelValue", val)
 			}
 		},
diff --git a/src/components/scForm/items/upload.vue b/src/components/scForm/items/upload.vue
new file mode 100644
index 00000000..e405e999
--- /dev/null
+++ b/src/components/scForm/items/upload.vue
@@ -0,0 +1,39 @@
+<template>
+	<el-col>
+		<el-form-item :prop="item.name">
+			<sc-upload v-model="value" :title="item.label"></sc-upload>
+		</el-form-item>
+	</el-col>
+</template>
+
+<script>
+	export default {
+		name: 'uploadRender',
+		props: {
+			modelValue: [String, Number, Boolean, Date, Object, Array],
+			item: { type: Object, default: () => {} }
+		},
+		data() {
+			return {
+				value: this.modelValue
+			}
+		},
+		watch:{
+			modelValue(val){
+				this.value = val
+			},
+			value(val){
+				this.$emit("update:modelValue", val)
+			}
+		},
+		mounted() {
+
+		},
+		methods: {
+
+		}
+	}
+</script>
+
+<style>
+</style>
diff --git a/src/views/vab/form.vue b/src/views/vab/form.vue
index c020bb9f..1e99c1e0 100644
--- a/src/views/vab/form.vue
+++ b/src/views/vab/form.vue
@@ -1,8 +1,13 @@
 <template>
 	<el-main>
 		<el-row :gutter="15">
+			<el-col :lg="6">
+				<el-card shadow="never" header="1.参数配置">
+					<pre>{{config2}}</pre>
+				</el-card>
+			</el-col>
 			<el-col :lg="12">
-				<el-card shadow="never" header="表单渲染器">
+				<el-card shadow="never" header="2.渲染器">
 					<sc-form :config="config2" v-model="data"></sc-form>
 				</el-card>
 				<el-card shadow="never" header="" v-if="false">
@@ -22,8 +27,8 @@
 					</el-form>
 				</el-card>
 			</el-col>
-			<el-col :lg="12">
-				<el-card shadow="never" header="表单渲染器">
+			<el-col :lg="6">
+				<el-card shadow="never" header="3.表单输出">
 					<pre>{{data}}</pre>
 				</el-card>
 			</el-col>
@@ -32,8 +37,13 @@
 </template>
 
 <script>
+	//import scCode from '@/components/scCode';
+
 	export default {
 		name: 'formRender',
+		components: {
+			//scCode
+		},
 		data() {
 			return {
 				d: {
@@ -47,26 +57,80 @@
 				},
 				data: {
 					name: "Activity name",
-					
+					checkbox: {
+						option1: true
+					},
+					checkboxGroup: ["option1"],
+					select: ["1"],
+					select2: "1"
 				},
 				config2: {
 					labelWidth: '130px',
 					labelPosition: 'right',
 					size: 'medium',
-					items: [
+					formItems: [
 						{
 							label: "Activity name",
+							message: "123",
 							name: "name",
-							value: "",
+							value: "123",
 							component: "input",
 							options: {
 								placeholder: "Activity name",
+							},
+							rules: [
+								{required: true, message: "Please input Activity name", trigger: "blur"}
+							],
+							requiredHandle: "$.required==true",
+						},
+						{
+							label: "Select",
+							name: "select",
+							value: "",
+							component: "select",
+							span: 12,
+							options: {
+								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: "Select2",
+							name: "select2",
+							value: "",
+							component: "select",
+							span: 12,
+							options: {
+								items:[
+									{
+										label: "选项1",
+										value: "1"
+									},
+									{
+										label: "选项2",
+										value: "2"
+									}
+								]
 							}
 						},
 						{
 							label: "Checkbox",
 							name: "checkbox",
 							component: "checkbox",
+							span: 12,
 							options: {
 								items:[
 									{
@@ -81,7 +145,95 @@
 									}
 								]
 							}
-						}
+						},
+						{
+							label: "Checkbox group",
+							name: "checkboxGroup",
+							value: [],
+							component: "checkboxGroup",
+							span: 12,
+							options: {
+								items:[
+									{
+										label: "选项1",
+										value: "option1"
+									},
+									{
+										label: "选项2",
+										value: "option2"
+									}
+								]
+							}
+						},
+						{
+							label: "Required handle",
+							name: "required",
+							value: false,
+							component: "switch",
+						},
+						{
+							label: "Upload",
+							component: "upload",
+							options: {
+								items:[
+									{
+										label: "图像1",
+										name: "img1",
+										value: ""
+									},
+									{
+										label: "图像2",
+										name: "img2",
+										value: ""
+									}
+								]
+							},
+							hideHandle: "$.required==true"
+						},
+						{
+							label: "Date",
+							name: "date",
+							value: "",
+							component: "date",
+							options: {
+								type: "datetime",
+								valueFormat: "YYYY-MM-DD HH:mm:ss",
+								defaultTime: new Date(2000, 1, 1, 12, 0, 0),
+								shortcuts: [
+									{
+										text: '今天',
+										value: new Date(),
+									}
+								]
+							},
+							rules: [
+								{required: true, message: "Please input Data", trigger: "change"}
+							],
+						},
+						{
+							label: "Number",
+							name: "number",
+							value: 0,
+							component: "number",
+						},
+						{
+							label: "Radio",
+							name: "radio",
+							value: "",
+							component: "radio",
+							options: {
+								items:[
+									{
+										label: "选项1",
+										value: "1"
+									},
+									{
+										label: "选项2",
+										value: "2"
+									}
+								]
+							}
+						},
 					]
 				},
 				config: {