From 17b75dcd5ac79b5ac966c71641cb48cafeda3b13 Mon Sep 17 00:00:00 2001
From: sakuya <81883387@qq.com>
Date: Mon, 4 Oct 2021 23:10:44 +0800
Subject: [PATCH] UP

---
 src/components/scForm/index.vue  |   3 +-
 src/components/scTitle/index.vue |  25 ++++++++
 src/main.js                      |  58 ++---------------
 src/scui.js                      |  55 ++++++++++++++++
 src/style/fix.scss               |   2 +-
 src/style/pages.scss             |   2 -
 src/style/theme/dark.scss        |   4 +-
 src/views/setting/table/save.vue |   4 +-
 src/views/vab/form.vue           | 106 +++++++++++++++++--------------
 9 files changed, 152 insertions(+), 107 deletions(-)
 create mode 100644 src/components/scTitle/index.vue
 create mode 100644 src/scui.js

diff --git a/src/components/scForm/index.vue b/src/components/scForm/index.vue
index 20baef02..674f2bb4 100644
--- a/src/components/scForm/index.vue
+++ b/src/components/scForm/index.vue
@@ -14,7 +14,8 @@
 		<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)">
+					<sc-title  v-if="item.component=='title'"  :title="item.label"></sc-title>
+					<el-form-item v-else :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 :maxlength="item.options.maxlength" show-word-limit></el-input>
diff --git a/src/components/scTitle/index.vue b/src/components/scTitle/index.vue
new file mode 100644
index 00000000..4ad28f4c
--- /dev/null
+++ b/src/components/scTitle/index.vue
@@ -0,0 +1,25 @@
+<template>
+	<div class="sc-title">
+		{{title}}
+	</div>
+</template>
+
+<script>
+	export default {
+		props: {
+			title: { type: String, required: true, default: "" },
+		},
+		data() {
+			return {
+
+			}
+		},
+		computed: {
+
+		}
+	}
+</script>
+
+<style scoped>
+	.sc-title {border-bottom: 1px solid #eee;margin-bottom: 20px;font-size: 17px;padding-bottom: 15px;color: #3c4a54;font-weight: bold;}
+</style>
diff --git a/src/main.js b/src/main.js
index 37930205..77f3e35e 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,68 +1,20 @@
 import ElementPlus from 'element-plus'
-import i18n from './locales'
 import 'element-plus/dist/index.css'
 import 'element-plus/theme-chalk/display.css'
-import { createApp } from 'vue'
-import App from './App.vue'
-import config from "./config"
+import scui from './scui'
+import i18n from './locales'
 import router from './router'
 import store from './store'
-import api from './api'
-import tool from './utils/tool'
-import http from "./utils/request"
-import { permission, rolePermission } from './utils/permission'
-import errorHandler from './utils/errorHandler'
-import scTable from './components/scTable'
-import scFilterBar from './components/scFilterBar'
-import scUpload from './components/scUpload'
-import scUploadMultiple from './components/scUpload/multiple'
-import scFormTable from './components/scFormTable'
-import scTableSelect from './components/scTableSelect'
-import scPageHeader from './components/scPageHeader'
-import scSelect from './components/scSelect'
-import scDialog from './components/scDialog'
-import scForm from './components/scForm'
-import auth from './directives/auth'
-import role from './directives/role'
-import time from './directives/time'
-import copy from './directives/copy'
+import { createApp } from 'vue'
+import App from './App.vue'
 
 const app = createApp(App);
 
-//挂载全局对象
-app.config.globalProperties.$CONFIG = config;
-app.config.globalProperties.$TOOL = tool;
-app.config.globalProperties.$HTTP = http;
-app.config.globalProperties.$API = api;
-app.config.globalProperties.$AUTH = permission;
-app.config.globalProperties.$ROLE = rolePermission;
-
 app.use(store);
 app.use(router);
-
 app.use(ElementPlus, {size: 'small'});
 app.use(i18n);
-
-//注册全局组件
-app.component('scTable', scTable);
-app.component('scFilterBar', scFilterBar);
-app.component('scUpload', scUpload);
-app.component('scUploadMultiple', scUploadMultiple);
-app.component('scFormTable', scFormTable);
-app.component('scTableSelect', scTableSelect);
-app.component('scPageHeader', scPageHeader);
-app.component('scSelect', scSelect);
-app.component('scDialog', scDialog);
-app.component('scForm', scForm);
-
-//注册全局指令
-app.directive('auth', auth)
-app.directive('role', role)
-app.directive('time', time)
-app.directive('copy', copy)
-
-//全局代码错误捕捉
-app.config.errorHandler = errorHandler
+app.use(scui);
 
 //挂载app
 app.mount('#app');
diff --git a/src/scui.js b/src/scui.js
new file mode 100644
index 00000000..db009662
--- /dev/null
+++ b/src/scui.js
@@ -0,0 +1,55 @@
+import config from "./config"
+import api from './api'
+import tool from './utils/tool'
+import http from "./utils/request"
+import { permission, rolePermission } from './utils/permission'
+import scTable from './components/scTable'
+import scFilterBar from './components/scFilterBar'
+import scUpload from './components/scUpload'
+import scUploadMultiple from './components/scUpload/multiple'
+import scFormTable from './components/scFormTable'
+import scTableSelect from './components/scTableSelect'
+import scPageHeader from './components/scPageHeader'
+import scSelect from './components/scSelect'
+import scDialog from './components/scDialog'
+import scForm from './components/scForm'
+import scTitle from './components/scTitle'
+import auth from './directives/auth'
+import role from './directives/role'
+import time from './directives/time'
+import copy from './directives/copy'
+import errorHandler from './utils/errorHandler'
+
+export default {
+	install(app) {
+		//挂载全局对象
+		app.config.globalProperties.$CONFIG = config;
+		app.config.globalProperties.$TOOL = tool;
+		app.config.globalProperties.$HTTP = http;
+		app.config.globalProperties.$API = api;
+		app.config.globalProperties.$AUTH = permission;
+		app.config.globalProperties.$ROLE = rolePermission;
+
+		//注册全局组件
+		app.component('scTable', scTable);
+		app.component('scFilterBar', scFilterBar);
+		app.component('scUpload', scUpload);
+		app.component('scUploadMultiple', scUploadMultiple);
+		app.component('scFormTable', scFormTable);
+		app.component('scTableSelect', scTableSelect);
+		app.component('scPageHeader', scPageHeader);
+		app.component('scSelect', scSelect);
+		app.component('scDialog', scDialog);
+		app.component('scForm', scForm);
+		app.component('scTitle', scTitle);
+
+		//注册全局指令
+		app.directive('auth', auth)
+		app.directive('role', role)
+		app.directive('time', time)
+		app.directive('copy', copy)
+
+		//全局代码错误捕捉
+		app.config.errorHandler = errorHandler
+	}
+}
diff --git a/src/style/fix.scss b/src/style/fix.scss
index af43388c..347b4697 100644
--- a/src/style/fix.scss
+++ b/src/style/fix.scss
@@ -2,7 +2,7 @@
 .el-menu {border: none!important;}
 .el-menu-item.is-active {background: #ecf5ff;}
 .el-menu .el-menu-item a {color: inherit;text-decoration: none;display: block;width:100%;height:100%;position: absolute;top:0px;left:0px;}
-.el-form-item-msg {font-size: 12px;color: #999;}
+.el-form-item-msg {font-size: 12px;color: #999;clear: both;}
 .el-container {height: 100%;}
 .el-aside {border-right: 1px solid #e6e6e6;background: #fff;}
 .el-header {background: #fff;border-bottom: 1px solid #e6e6e6;padding:13px 15px;display: flex;justify-content: space-between;align-items: center;}
diff --git a/src/style/pages.scss b/src/style/pages.scss
index 88cdf6b6..e5c95099 100644
--- a/src/style/pages.scss
+++ b/src/style/pages.scss
@@ -20,5 +20,3 @@
 .header-tabs .el-tabs {border:0;box-shadow:none;}
 .header-tabs .el-tabs__content {display: none;}
 .header-tabs .el-tabs__item {font-size: 12px;}
-
-.form-title {border-bottom: 1px solid #eee;margin-bottom: 20px;font-size: 17px;padding-bottom: 15px;color: #3c4a54;}
diff --git a/src/style/theme/dark.scss b/src/style/theme/dark.scss
index 646b1ad0..cc35c3c8 100644
--- a/src/style/theme/dark.scss
+++ b/src/style/theme/dark.scss
@@ -112,7 +112,7 @@
 	.el-dropdown__popper {
 		--el-dropdown-menuItem-hover-fill: #222225;
 	}
-	
+
 	/* 布局 */
 	.adminui-header {background: $--background;}
 	.aminui-side-split {background: $--background;}
@@ -231,4 +231,6 @@
 		#Mask {fill: #222;}
 		#Oval-Copy-2 {fill: #1d1d1d;}
 	}
+
+	.sc-title {color: #d0d0d0;border-color: $--border-color;}
 }
diff --git a/src/views/setting/table/save.vue b/src/views/setting/table/save.vue
index dafc0d06..d18b03c3 100644
--- a/src/views/setting/table/save.vue
+++ b/src/views/setting/table/save.vue
@@ -4,6 +4,7 @@
 			<el-main style="padding:0 20px 20px 20px">
 
 				<el-form ref="dialogForm" :model="form" :rules="rules" label-width="100px" label-position="top">
+					<sc-title title="基础"></sc-title>
 					<el-row :gutter="20">
 						<el-col :span="16">
 							<el-form-item label="表格名称" prop="name">
@@ -20,7 +21,8 @@
 						<el-checkbox v-model="form.remoteSort" label="远程排序"></el-checkbox>
 						<el-checkbox v-model="form.remoteFilter" label="远程过滤"></el-checkbox>
 					</el-form-item>
-					<el-form-item label="表格列" prop="column">
+					<sc-title title="表格列"></sc-title>
+					<el-form-item prop="column">
 						<sc-form-table v-model="form.column" :addTemplate="addTemplate" drag-sort placeholder="暂无数据">
 							<el-table-column prop="label" label="名称">
 								<template #default="scope">
diff --git a/src/views/vab/form.vue b/src/views/vab/form.vue
index fe1a8f7f..88cbdab4 100644
--- a/src/views/vab/form.vue
+++ b/src/views/vab/form.vue
@@ -54,6 +54,10 @@
 				labelPosition: 'right',
 				size: 'medium',
 				formItems: [
+					{
+						label: "ElementPlus",
+						component: "title",
+					},
 					{
 						label: "输入框",
 						name: "name",
@@ -186,32 +190,6 @@
 							]
 						}
 					},
-					{
-						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",
@@ -231,7 +209,8 @@
 									value: false
 								}
 							]
-						}
+						},
+						hideHandle: "$.required==true"
 					},
 					{
 						label: "多选框组",
@@ -250,7 +229,8 @@
 									value: "option2"
 								}
 							]
-						}
+						},
+						hideHandle: "$.required==true"
 					},
 					{
 						label: "单选",
@@ -268,7 +248,8 @@
 									value: "2"
 								}
 							]
-						}
+						},
+						hideHandle: "$.required==true"
 					},
 					{
 						label: "开关",
@@ -277,25 +258,6 @@
 						value: false,
 						component: "switch",
 					},
-					{
-						label: "上传",
-						component: "upload",
-						options: {
-							items:[
-								{
-									label: "图像1",
-									name: "img1",
-									value: ""
-								},
-								{
-									label: "图像2",
-									name: "img2",
-									value: ""
-								}
-							]
-						},
-						hideHandle: "$.required==true"
-					},
 					{
 						label: "日期/时间",
 						name: "date",
@@ -340,6 +302,54 @@
 						value: 0,
 						component: "rate",
 					},
+					{
+						label: "SCUI扩展",
+						component: "title",
+					},
+					{
+						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: "上传",
+						component: "upload",
+						options: {
+							items:[
+								{
+									label: "图像1",
+									name: "img1",
+									value: ""
+								},
+								{
+									label: "图像2",
+									name: "img2",
+									value: ""
+								}
+							]
+						}
+					},
 					{
 						label: "富文本",
 						name: "text",