From c4ef61612ffa8ea8dc7a6a38b0b43890fc59c1ad Mon Sep 17 00:00:00 2001
From: sc <shencheng@heronshn.com>
Date: Sat, 8 May 2021 15:43:46 +0800
Subject: [PATCH] UP 1.0.2

---
 package.json                                |  2 +-
 public/config.js                            |  2 -
 src/components/scEcharts/echarts-theme-T.js |  4 +-
 src/components/scTable/columnSetting.vue    | 75 +++++++++++++++++++++
 src/components/scTable/index.vue            | 44 ++++++++----
 src/config/index.js                         |  2 +-
 src/layout/components/head.vue              |  4 +-
 src/views/home/components/C2.vue            |  4 ++
 src/views/template/list.vue                 | 28 +++++++-
 9 files changed, 140 insertions(+), 25 deletions(-)
 create mode 100644 src/components/scTable/columnSetting.vue

diff --git a/package.json b/package.json
index 0690d130..58ceea13 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "SCUI-Admin",
-	"version": "0.1.1",
+	"version": "1.0.2",
 	"private": true,
 	"scripts": {
 		"serve": "vue-cli-service serve",
diff --git a/public/config.js b/public/config.js
index 6549444a..a3a4d7f3 100644
--- a/public/config.js
+++ b/public/config.js
@@ -1,8 +1,6 @@
 const APP_CONFIG = {
 	//标题
 	APP_NAME: "SCUI",
-	//版本号
-	APP_VER: "1.0",
 	//接口地址
 	API_URL: ""
 }
diff --git a/src/components/scEcharts/echarts-theme-T.js b/src/components/scEcharts/echarts-theme-T.js
index b315941c..bf058112 100644
--- a/src/components/scEcharts/echarts-theme-T.js
+++ b/src/components/scEcharts/echarts-theme-T.js
@@ -29,9 +29,7 @@ const T = {
 			}
 		},
 		"axisLabel": {
-			"textStyle": {
-				"color": "#999"
-			}
+			"color": "#999"
 		},
 		"splitLine": {
 			"show": true,
diff --git a/src/components/scTable/columnSetting.vue b/src/components/scTable/columnSetting.vue
new file mode 100644
index 00000000..0131b1e4
--- /dev/null
+++ b/src/components/scTable/columnSetting.vue
@@ -0,0 +1,75 @@
+<template>
+	<div class="setting-column">
+		<div class="sys">
+			<h4>隐藏</h4>
+			<ul>
+				<draggable v-model="sys" animation="200" group="people" :sort="false" item-key="prop">
+					<template #item="{ element }">
+						<li>{{ element.label }}</li>
+					</template>
+					<template #footer>
+						<el-empty v-if="sys.length == 0" description="没有隐藏列" :image-size="50"></el-empty>
+					</template>
+				</draggable>
+			</ul>
+		</div>
+		<div class="user">
+			<h4>显示</h4>
+			<ul>
+				<draggable v-model="user" animation="200" group="people" @change="change" item-key="prop">
+					<template #item="{ element }">
+						<li>{{ element.label }}</li>
+					</template>
+					<template #footer>
+						<el-empty v-if="user.length == 0" description="没有显示列" :image-size="50"></el-empty>
+					</template>
+				</draggable>
+			</ul>
+		</div>
+	</div>
+</template>
+
+<script>
+	import draggable from 'vuedraggable'
+	export default {
+		components: {
+			draggable
+		},
+		props: {
+			column: { type: Object, default: () => {} }
+		},
+		data() {
+			return {
+				sys: [
+					{label: "姓名", prop: "name"},
+					{label: "性别", prop: "sex"},
+					{label: "头像", prop: "a"},
+					{label: "加入时间", prop: "time"}
+				],
+				user: []
+			}
+		},
+		mounted() {
+			this.sys = this.column || []
+		},
+		methods: {
+			change(){
+				this.$emit('userChange', this.user)
+			},
+			remove(index){
+				this.sys.push(this.user[index]);
+				this.user.splice(index, 1); 
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.setting-column {display:flex;}
+	.setting-column > div > ul {margin-top: 15px;height:300px;overflow: auto;}
+	.setting-column > div > ul > div {height: 100%;}
+	.setting-column > div > ul li {cursor: move;font-size: 12px;list-style-type: none;height:32px;line-height: 32px;background: #ecf5ff;color: #409EFF;border: 1px solid #d9ecff;border-radius: 4px;padding: 0 8px;margin-bottom:5px;}
+	.setting-column .sys {flex:1;margin-right:15px;padding-right:15px;border-right: 1px solid #eee;}
+	.setting-column .user {flex:1;}
+	.sortable-ghost {opacity: 0.5;}
+</style>
diff --git a/src/components/scTable/index.vue b/src/components/scTable/index.vue
index f5f5b3a2..bdf3e252 100644
--- a/src/components/scTable/index.vue
+++ b/src/components/scTable/index.vue
@@ -1,8 +1,17 @@
 <template>
 	<div class="scTable" ref="scTableMain" v-loading="loading">
 		<div class="scTable-table">
-			<el-table :data="tableData" :row-key="rowKey" ref="scTable" :height="tableHeight" stripe  @selection-change="selectionChange">
+			<el-table :data="tableData" :row-key="rowKey" :key="toggleIndex" ref="scTable" :height="tableHeight" stripe  @selection-change="selectionChange">
 				<slot></slot>
+				<el-table-column v-for="(item, index) in userColumn" :key="index" :label="item.label" :prop="item.prop" :width="item.width">
+					<template #default="scope">
+						{{scope.row[item.prop]}}
+					</template>
+					<template #header>
+						{{item.label}}
+						<i class="el-icon-remove" style="color: #F56C6C;cursor: pointer;" @click="removeColumn(index)"></i>
+					</template>
+				</el-table-column>
 				<el-table-column min-width="1"></el-table-column>
 				<template #empty>
 					<el-empty description="暂无数据" :image-size="100"></el-empty>
@@ -17,7 +26,7 @@
 					<template #reference>
 						<el-button icon="el-icon-setting" circle style="margin-left:15px"></el-button>
 					</template>
-					<div style="padding:50px 0;text-align: center;">表格设置,开发中...</div>
+					<columnSetting ref="columnSetting" @userChange="columnSettingChange" :column="column"></columnSetting>
 				</el-popover>
 			</div>
 		</div>
@@ -25,13 +34,18 @@
 </template>
 
 <script>
+	import columnSetting from './columnSetting'
+
 	export default {
 		name: 'scTable',
-		components: {},
+		components: {
+			columnSetting
+		},
 		props: {
 			apiObj: { type: Object, default: () => {} },
 			data: { type: Object, default: () => {} },
-			rowKey: { type: String, default: "" }
+			rowKey: { type: String, default: "" },
+			column: { type: Object, default: () => {} }
 		},
 		watch: {
 			//监听从props里拿到值了
@@ -42,13 +56,15 @@
 		},
 		data() {
 			return {
+				toggleIndex: 0,
 				tableData: [],
 				pageSize: 20,
 				total: 0,
 				currentPage: 1,
 				loading: false,
 				tableHeight:'100%',
-				tableParams: {}
+				tableParams: {},
+				userColumn: []
 			}
 		},
 		created() {
@@ -98,6 +114,15 @@
 				this.tableParams = params;
 				this.getData()
 			},
+			//自定义变化事件
+			columnSettingChange(userColumn){
+				this.userColumn = userColumn;
+				this.toggleIndex += 1;
+			},
+			removeColumn(index){
+				this.$refs.columnSetting.remove(index)
+				this.toggleIndex += 1;
+			},
 			//转发原装方法&事件
 			selectionChange(selection){
 				this.$emit('selection-change', selection)
@@ -110,13 +135,4 @@
 	.scTable {display:flex;flex-direction:column;height:100%;}
 	.scTable-table {flex:1;}
 	.scTable-page {height:50px;display: flex;align-items: center;justify-content: space-between;padding:0 15px;}
-
-	.setting-column {display:flex;padding:0 20px;}
-	.setting-column > div {border: 1px solid #eee;height: 250px;}
-	.setting-column .all {width: 300px;margin-right:20px;}
-	.setting-column .all span {display: inline-block;width: 100%;height:30px;line-height: 30px;padding:0 15px;}
-	.setting-column .all span:hover {background: #ecf5ff;}
-	.setting-column .user {flex:1;padding:20px;}
-	.setting-column .user>div {width: 100%;height: 100%;}
-	.setting-column .user .el-tag {margin:0 8px 8px 0;}
 </style>
diff --git a/src/config/index.js b/src/config/index.js
index 24c41d9f..c0bb12af 100644
--- a/src/config/index.js
+++ b/src/config/index.js
@@ -3,7 +3,7 @@ const DEFAULT_CONFIG = {
 	//标题
 	APP_NAME: "SCUI",
 	//版本号
-	APP_VER: "0.0.0",
+	APP_VER: "1.0.2",
 	//接口地址
 	API_URL: ""
 }
diff --git a/src/layout/components/head.vue b/src/layout/components/head.vue
index 8f41fa60..45b8093c 100644
--- a/src/layout/components/head.vue
+++ b/src/layout/components/head.vue
@@ -74,13 +74,13 @@
 					{
 						id: 1,
 						title: "关于版本发布的通知",
-						describe: "当前版本号Ver0.1.0,最后更新日期2021年4月27日",
+						describe: "点进去Gitee获取最新开源版本",
 						link: "https://gitee.com/lolicode/scui"
 					},
 					{
 						id: 2,
 						title: "感谢登录SCUI Admin",
-						describe: "Vue 3.0 + Vue-Router 4.0 + Element-Plus + Axios 后台管理系统。",
+						describe: "Vue 3.0 + Vue-Router 4.0 + ElementPlus + Axios 后台管理系统。",
 						link: "https://gitee.com/lolicode/scui"
 					}
 				]
diff --git a/src/views/home/components/C2.vue b/src/views/home/components/C2.vue
index 03677e84..86fe5134 100644
--- a/src/views/home/components/C2.vue
+++ b/src/views/home/components/C2.vue
@@ -22,6 +22,10 @@
 		data() {
 			return {
 				activities: [
+					{
+						content: '1.0.2 增加自定义隐藏排序列，修复scEcharts组件主题警告',
+						timestamp: '2021-05-08'
+					},
 					{
 						content: '1.0.1 提升部分组件为全局组件',
 						timestamp: '2021-05-07'
diff --git a/src/views/template/list.vue b/src/views/template/list.vue
index 3a22659a..e8d2be24 100644
--- a/src/views/template/list.vue
+++ b/src/views/template/list.vue
@@ -18,27 +18,34 @@
 			</div>
 		</el-header>
 		<el-main class="nopadding">
-			<scTable ref="table" :apiObj="apiObj" @selection-change="selectionChange">
+			<scTable ref="table" :apiObj="apiObj" :column="column" @selection-change="selectionChange">
 				<!-- 表格列开始 -->
 				<el-table-column type="selection" width="50"></el-table-column>
+
 				<el-table-column label="序号" type="index" width="50"></el-table-column>
+
 				<el-table-column label="头像" width="60">
 					<template #default="scope">
 						<el-avatar size="small">{{ scope.row.name.substring(0,1) }}</el-avatar>
 					</template>
 				</el-table-column>
+
 				<el-table-column label="名称" prop="name" width="150"></el-table-column>
+
 				<el-table-column label="进度" prop="progress" width="200">
 					<template #default="scope">
 						<el-progress :percentage="scope.row.progress" status="success"></el-progress>
 					</template>
 				</el-table-column>
+
 				<el-table-column label="邮箱" prop="yx" width="150"></el-table-column>
+
 				<el-table-column label="状态" prop="audit" width="50">
 					<template #default="scope">
 						<el-tag>{{scope.row.audit}}</el-tag>
 					</template>
 				</el-table-column>
+
 				<el-table-column label="加入时间" prop="date" width="170"></el-table-column>
 
 				<el-table-column label="操作" fixed="right" align="right" width="140">
@@ -152,7 +159,24 @@
 					progress: [
 						{ required: true, message: '请输入进度' },
 					]
-				}
+				},
+				column: [
+					{
+						label: "NAME",
+						prop: "name",
+						width: 150
+					},
+					{
+						label: "PROGRESS",
+						prop: "progress",
+						width: 150
+					},
+					{
+						label: "AUDIT",
+						prop: "audit",
+						width: 150
+					}
+				]
 			}
 		},
 		mounted() {