From 10c03fbebad2c458eeb9dc94d0131c5f8f391709 Mon Sep 17 00:00:00 2001
From: sc <shencheng@heronshn.com>
Date: Thu, 30 Sep 2021 15:57:16 +0800
Subject: [PATCH] UP

---
 src/components/scForm/index.vue             | 35 ++++++++++++----
 src/components/scForm/items/tableselect.vue | 37 +++++++++++++++++
 src/components/scForm/items/upload.vue      | 39 -----------------
 src/components/scTableSelect/index.vue      | 12 +++---
 src/style/theme/dark.scss                   |  3 ++
 src/views/vab/form.vue                      | 46 +++++++++++++++++++--
 6 files changed, 116 insertions(+), 56 deletions(-)
 create mode 100644 src/components/scForm/items/tableselect.vue
 delete mode 100644 src/components/scForm/items/upload.vue

diff --git a/src/components/scForm/index.vue b/src/components/scForm/index.vue
index 777d2030..20baef02 100644
--- a/src/components/scForm/index.vue
+++ b/src/components/scForm/index.vue
@@ -82,9 +82,17 @@
 						<template v-else-if="item.component=='slider'" >
 							<el-slider v-model="form[item.name]" :marks="item.options.marks"></el-slider>
 						</template>
+						<!-- tableselect -->
+						<template v-else-if="item.component=='tableselect'" >
+							<tableselect-render v-model="form[item.name]" :item="item"></tableselect-render>
+						</template>
+						<!-- editor -->
+						<template v-else-if="item.component=='editor'" >
+							<sc-editor v-model="form[item.name]" placeholder="请输入" :height="400"></sc-editor>
+						</template>
 						<!-- noComponent -->
 						<template v-else>
-							未匹配到相应组件 {{item.component}}
+							<el-tag type="danger">[{{item.component}}] Component not found</el-tag>
 						</template>
 						<div v-if="item.message" class="el-form-item-msg">{{item.message}}</div>
 					</el-form-item>
@@ -104,8 +112,9 @@
 <script>
 	import http from "@/utils/request"
 
-	import { defineAsyncComponent } from 'vue';
-	const uploadRender = defineAsyncComponent(() => import('./items/upload'));
+	import { defineAsyncComponent } from 'vue'
+	const tableselectRender = defineAsyncComponent(() => import('./items/tableselect'))
+	const scEditor = defineAsyncComponent(() => import('@/components/scEditor'))
 
 	export default {
 		props: {
@@ -114,7 +123,8 @@
 			loading: { type: Boolean, default: false },
 		},
 		components: {
-			uploadRender
+			tableselectRender,
+			scEditor
 		},
 		data() {
 			return {
@@ -171,9 +181,17 @@
 							})
 						}
 					}else if(item.component == 'upload'){
-						item.options.items.forEach((option) => {
-							 this.form[option.name] = option.value
-						})
+						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{
 						this.form[item.name] = item.value
 					}
@@ -229,6 +247,9 @@
 			validate(valid, obj){
 				return this.$refs.form.validate(valid, obj)
 			},
+			scrollToField(prop){
+				return this.$refs.form.scrollToField(prop)
+			},
 			resetFields(){
 				return this.$refs.form.resetFields()
 			},
diff --git a/src/components/scForm/items/tableselect.vue b/src/components/scForm/items/tableselect.vue
new file mode 100644
index 00000000..1a81ec47
--- /dev/null
+++ b/src/components/scForm/items/tableselect.vue
@@ -0,0 +1,37 @@
+<template>
+	<sc-table-select v-model="value" :apiObj="apiObj" :table-width="600" :multiple="item.options.multiple" :props="item.options.props" style="width: 100%;">
+		<el-table-column  v-for="(_item, _index) in item.options.column" :key="_index" :prop="_item.prop" :label="_item.label" :width="_item.width"></el-table-column>
+	</sc-table-select>
+</template>
+
+<script>
+	export default {
+		name: 'uploadRender',
+		props: {
+			modelValue: [String, Number, Boolean, Date, Object, Array],
+			item: { type: Object, default: () => {} }
+		},
+		data() {
+			return {
+				value: this.modelValue,
+				apiObj: this.getApiObj()
+			}
+		},
+		watch:{
+			value(val){
+				this.$emit("update:modelValue", val)
+			}
+		},
+		mounted() {
+
+		},
+		methods: {
+			getApiObj(){
+				return eval(`this.`+this.item.options.apiObj)
+			}
+		}
+	}
+</script>
+
+<style>
+</style>
diff --git a/src/components/scForm/items/upload.vue b/src/components/scForm/items/upload.vue
deleted file mode 100644
index e405e999..00000000
--- a/src/components/scForm/items/upload.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<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/components/scTableSelect/index.vue b/src/components/scTableSelect/index.vue
index 7c1690ca..be7cc9a5 100644
--- a/src/components/scTableSelect/index.vue
+++ b/src/components/scTableSelect/index.vue
@@ -62,12 +62,12 @@
 
 		},
 		watch: {
-			modelValue(){
-				this.defaultValue = this.modelValue
-				this.autoCurrentLabel()
-			},
-			defaultValue(){
-
+			modelValue:{
+				handler(){
+					this.defaultValue = this.modelValue
+					this.autoCurrentLabel()
+				},
+				deep: true
 			}
 		},
 		mounted() {
diff --git a/src/style/theme/dark.scss b/src/style/theme/dark.scss
index 9cf6ef70..646b1ad0 100644
--- a/src/style/theme/dark.scss
+++ b/src/style/theme/dark.scss
@@ -52,6 +52,9 @@
 		--el-color-info: $--text-color;
 		border-color: $--border-color;
 	}
+	.el-input .el-input__count .el-input__count-inner {
+		background: none;
+	}
 	.el-radio {
 		--el-radio-font-color: #d0d0d0;
 	}
diff --git a/src/views/vab/form.vue b/src/views/vab/form.vue
index 0c0b270f..fe1a8f7f 100644
--- a/src/views/vab/form.vue
+++ b/src/views/vab/form.vue
@@ -186,11 +186,38 @@
 							]
 						}
 					},
+					{
+						label: "表格选择器",
+						name: "tableselect",
+						value: {},
+						component: "tableselect",
+						span: 24,
+						options: {
+							apiObj: '$API.demo.page',
+							column: [
+								{
+									label: "ID",
+									prop: "id",
+									width:150
+								},
+								{
+									label: "姓名",
+									prop: "user"
+								}
+							],
+							props: {
+								label: 'user',
+								value: 'id',
+								keyword: "keyword"
+							}
+						}
+					},
 					{
 						label: "多选框",
 						name: "checkbox",
 						component: "checkbox",
 						span: 24,
+						message: "多选框配置加上 name 表示拥有嵌套关系。否则将值“平铺”在form对象",
 						options: {
 							items:[
 								{
@@ -313,7 +340,12 @@
 						value: 0,
 						component: "rate",
 					},
-
+					{
+						label: "富文本",
+						name: "text",
+						value: "",
+						component: "editor",
+					},
 				]
 			}
 
@@ -325,7 +357,12 @@
 				checkboxGroup: ["option1"],
 				select: ["1"],
 				select2: "1",
-				cascader: ['resource','docs']
+				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(()=>{
@@ -336,7 +373,7 @@
 			setTimeout(()=>{
 				this.form = form
 				this.loading = false
-			},1500)
+			},100)
 		},
 		methods: {
 			setName(){
@@ -347,11 +384,12 @@
 				this.config.formItems[2].span = this.config.formItems[2].span==24?12:24
 			},
 			save(){
-				this.$refs.formref.validate((valid) => {
+				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
 					}
 				})