From 80f399be7456a6816d3926a3a94dbeac885d3f92 Mon Sep 17 00:00:00 2001
From: sc <shencheng@heronshn.com>
Date: Thu, 22 Jul 2021 13:40:30 +0800
Subject: [PATCH] =?UTF-8?q?UPD=20scTable=20=E6=94=AF=E6=8C=81=E5=8A=A8?=
 =?UTF-8?q?=E6=80=81=E5=88=97=E3=80=81=E8=87=AA=E5=AE=9A=E4=B9=89=E5=88=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/scTable/columnSetting.vue | 155 +++++++++++++----------
 src/components/scTable/index.vue         |  15 +--
 src/config/table.js                      |  19 ++-
 src/views/template/list/index.vue        |  20 +--
 4 files changed, 115 insertions(+), 94 deletions(-)

diff --git a/src/components/scTable/columnSetting.vue b/src/components/scTable/columnSetting.vue
index 3eca4827..cf5fd0f6 100644
--- a/src/components/scTable/columnSetting.vue
+++ b/src/components/scTable/columnSetting.vue
@@ -1,102 +1,117 @@
 <template>
-	<div>
-	<div class="setting-column">
-		<div class="sys">
-			<h4>左固定</h4>
+	<div v-if="usercolumn.length>0" class="setting-column">
+		<div class="setting-column__title">
+			<span class="move_b"></span>
+			<span class="show_b">显示</span>
+			<span class="name_b">名称</span>
+			<span class="width_b">宽度</span>
+			<span class="sortable_b">排序</span>
+			<span class="fixed_b">固定</span>
+		</div>
+		<div class="setting-column__list" ref="list" v-loading="isSave">
 			<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>
+				<li v-for="item in usercolumn" :key="item.prop">
+					<span class="move_b">
+						<el-tag class="move" style="cursor: move;"><i class="el-icon-d-caret"></i></el-tag>
+					</span>
+					<span class="show_b">
+						<el-switch v-model="item.hide" :active-value="false" :inactive-value="true"></el-switch>
+					</span>
+					<span class="name_b" :title="item.prop">{{ item.label }}</span>
+					<span class="width_b">
+						<el-input v-model="item.width" placeholder="auto" size="mini"></el-input>
+					</span>
+					<span class="sortable_b">
+						<el-switch v-model="item.sortable"></el-switch>
+					</span>
+					<span class="fixed_b">
+						<el-switch v-model="item.fixed"></el-switch>
+					</span>
+				</li>
 			</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 }} <el-checkbox v-model="element.sortable">排序</el-checkbox></li>
-					</template>
-					<template #footer>
-						<el-empty v-if="user.length == 0" description="没有显示列" :image-size="50"></el-empty>
-					</template>
-				</draggable>
-			</ul>
-		</div>
-		<div class="fixedRight">
-			<h4>右固定</h4>
-			<ul>
-				<draggable v-model="fixedRight" animation="200" group="people" :sort="false" item-key="prop">
-					<template #item="{ element }">
-						<li>{{ element.label }}</li>
-					</template>
-					<template #footer>
-						<el-empty v-if="fixedRight.length == 0" description="没有隐藏列" :image-size="50"></el-empty>
-					</template>
-				</draggable>
-			</ul>
+		<div class="setting-column__bottom">
+			<el-button @click="backDefaul" :disabled="isSave">重置</el-button>
+			<el-button @click="save" :loading="isSave" type="primary">保存</el-button>
 		</div>
 	</div>
-	<el-button @click="backDefaul">重置</el-button>
-	</div>
+	<el-empty v-else description="暂无可配置的列" :image-size="80"></el-empty>
 </template>
 
 <script>
-	import draggable from 'vuedraggable'
+	import Sortable from 'sortablejs'
 
 	export default {
 		components: {
-			draggable
+			Sortable
 		},
 		props: {
 			column: { type: Object, default: () => {} }
 		},
 		data() {
 			return {
-				defaultColumn: JSON.parse(JSON.stringify(this.column||[])),
-				sys: [],
-				user: [],
-				fixedRight: []
+				isSave: false,
+				usercolumn: JSON.parse(JSON.stringify(this.column||[]))
+			}
+		},
+		watch:{
+			usercolumn: {
+				handler(){
+					this.$emit('userChange', this.usercolumn)
+				},
+				deep: true
 			}
 		},
 		mounted() {
-			//this.sys = this.column.filter(item => item.hide ) || []
-			//this.user = this.column.filter(item => !item.hide ) || []
+			this.usercolumn.length>0 && this.rowDrop()
 		},
 		methods: {
+			rowDrop(){
+				const _this = this
+				const tbody = this.$refs.list.querySelector('ul')
+				Sortable.create(tbody, {
+					handle: ".move",
+					animation: 300,
+					ghostClass: "ghost",
+					onEnd({ newIndex, oldIndex }) {
+						const tableData = _this.usercolumn
+						const currRow = tableData.splice(oldIndex, 1)[0]
+						tableData.splice(newIndex, 0, currRow)
+					}
+				})
+			},
 			backDefaul(){
-				var defaultColumn = JSON.parse(JSON.stringify(this.defaultColumn));
-				this.sys = defaultColumn.filter(item => item.hide ) || []
-				this.user = defaultColumn.filter(item => !item.hide ) || []
-				console.log(defaultColumn)
-				this.$emit('userChange', defaultColumn)
+				this.usercolumn = JSON.parse(JSON.stringify(this.column||[]))
 			},
-			change(evt){
-				if(evt.added){
-					delete evt.added.element.hide
-				}else if(evt.removed){
-					evt.removed.element.hide=true
-				}
-				this.$emit('userChange', {...this.sys, ...this.user})
-			},
-			remove(index){
-				this.sys.push(this.user[index]);
-				this.user.splice(index, 1);
+			save(){
+				this.$emit('save', this.usercolumn)
 			}
 		}
 	}
 </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 {width: 150px;margin-right:15px;padding-right:15px;border-right: 1px solid #eee;}
-	.setting-column .user {flex: 1;}
-	.sortable-ghost {opacity: 0.5;}
+	.setting-column {}
+
+	.setting-column__title {border-bottom: 1px solid #EBEEF5;padding-bottom:15px;}
+	.setting-column__title span {display: inline-block;font-weight: bold;color: #909399;font-size: 12px;}
+	.setting-column__title span.move_b {width: 30px;margin-right:15px;}
+	.setting-column__title span.show_b {width: 60px;}
+	.setting-column__title span.name_b {width: 160px;}
+	.setting-column__title span.width_b {width: 60px;margin-right:15px;}
+	.setting-column__title span.sortable_b {width: 60px;}
+	.setting-column__title span.fixed_b {width: 60px;}
+
+	.setting-column__list {max-height:312px;overflow: auto;}
+	.setting-column__list li {list-style: none;margin:10px 0;}
+	.setting-column__list li>span {display: inline-block;font-size: 12px;}
+	.setting-column__list li span.move_b {width: 30px;margin-right:15px;}
+	.setting-column__list li span.show_b {width: 60px;}
+	.setting-column__list li span.name_b {width: 160px;}
+	.setting-column__list li span.width_b {width: 60px;margin-right:15px;}
+	.setting-column__list li span.sortable_b {width: 60px;}
+	.setting-column__list li span.fixed_b {width: 60px;}
+	.setting-column__list li.ghost {opacity: 0.3;}
+
+	.setting-column__bottom {border-top: 1px solid #EBEEF5;padding-top:15px;text-align: right;}
 </style>
diff --git a/src/components/scTable/index.vue b/src/components/scTable/index.vue
index adb6b33c..6b72b069 100644
--- a/src/components/scTable/index.vue
+++ b/src/components/scTable/index.vue
@@ -10,10 +10,6 @@
 								{{scope.row[item.prop]}}
 							</slot>
 						</template>
-						<template #header>
-							{{item.label}}
-							<i class="el-icon-remove" style="color: #F56C6C;cursor: pointer;" @click="removeColumn(index)"></i>
-						</template>
 					</el-table-column>
 				</template>
 				<el-table-column min-width="1"></el-table-column>
@@ -28,11 +24,11 @@
 			</div>
 			<div class="scTable-do" v-if="!hideDo">
 				<el-button @click="refresh" icon="el-icon-refresh" circle style="margin-left:15px"></el-button>
-				<el-popover placement="top" title="设置" :width="600" trigger="click">
+				<el-popover placement="top" title="列设置" :width="500" trigger="click">
 					<template #reference>
 						<el-button icon="el-icon-setting" circle style="margin-left:15px"></el-button>
 					</template>
-					<columnSetting ref="columnSetting" @userChange="columnSettingChange" :column="column"></columnSetting>
+					<columnSetting ref="columnSetting" @userChange="columnSettingChange" @save="columnSettingSave" :column="column"></columnSetting>
 				</el-popover>
 			</div>
 		</div>
@@ -49,6 +45,7 @@
 			columnSetting
 		},
 		props: {
+			tableName: { type: String, default: "" },
 			apiObj: { type: Object, default: () => {} },
 			params: { type: Object, default: () => ({}) },
 			data: { type: Object, default: () => {} },
@@ -165,9 +162,9 @@
 				this.userColumn = userColumn;
 				this.toggleIndex += 1;
 			},
-			removeColumn(index){
-				this.$refs.columnSetting.remove(index)
-				this.toggleIndex += 1;
+			//自定义列保存
+			columnSettingSave(userColumn){
+				config.columnSettingSave(this.tableName, userColumn, this.$refs.columnSetting)
 			},
 			//排序事件
 			sortChange(obj){
diff --git a/src/config/table.js b/src/config/table.js
index cde2bbb9..31264afb 100644
--- a/src/config/table.js
+++ b/src/config/table.js
@@ -1,4 +1,5 @@
 //数据表格配置
+import { ElMessage } from 'element-plus'
 
 export default {
 	pageSize: 20,						//表格每一页条数
@@ -15,5 +16,21 @@ export default {
 		pageSize: 'pageSize',			//规定一页条数字段
 		prop: 'prop',					//规定排序字段名字段
 		order: 'order'					//规定排序规格字段
+	},
+	/**
+	 * 自定义列保存处理
+	 * @tableName scTable组件的props->tableName
+	 * @column 用户配置好的列
+	 * @ref 列配置弹窗组件的ref
+	 */
+	columnSettingSave: function (tableName, column, ref) {
+		ref.isSave = true
+		setTimeout(()=>{
+			ref.isSave = false
+			ElMessage.success(`${tableName} 保存列配置成功，打开F12控制台查看详细`)
+			console.log('这里可以保存本地或者远程保存，本文件在@/config/table.js');
+			console.log('tableName:', tableName);
+			console.log('column:', column);
+		},1000)
 	}
-}
\ No newline at end of file
+}
diff --git a/src/views/template/list/index.vue b/src/views/template/list/index.vue
index 16af9757..a90d0e6b 100644
--- a/src/views/template/list/index.vue
+++ b/src/views/template/list/index.vue
@@ -1,10 +1,10 @@
 <!--
  * @Descripttion: 详情列表模板
- * @version: 1.0
+ * @version: 1.1
  * @Author: sakuya
  * @Date: 2021年6月16日15:05:15
- * @LastEditors:
- * @LastEditTime:
+ * @LastEditors: sakuya
+ * @LastEditTime: 2021年7月22日12:18:50
 -->
 
 <template>
@@ -23,19 +23,11 @@
 					<el-radio-button label="2">弃坑 (1)</el-radio-button>
 					<el-radio-button label="3">其他</el-radio-button>
 				</el-radio-group>
-
 				<scFilterBar :options="options" @change="change"></scFilterBar>
-
 			</div>
 		</el-header>
 		<el-main class="nopadding">
-			<scTable ref="table" :data="list" :column="column" @selection-change="selectionChange" stripe>
-				<!-- 扩展行 -->
-				<el-table-column type="expand">
-					<template #default="props">
-						<div>{{ props.row.name }}</div>
-					</template>
-				</el-table-column>
+			<scTable tableName="templateList" ref="table" :data="list" :column="column" @selection-change="selectionChange" stripe>
 
 				<!-- 各列自定义template -->
 				<template #state="scope">
@@ -55,10 +47,10 @@
 				</template>
 
 				<!-- 固定列-选择列 -->
-				<el-table-column type="selection" width="50"></el-table-column>
+				<el-table-column type="selection" width="50" fixed></el-table-column>
 
 				<!-- 固定列-操作列 -->
-				<el-table-column label="操作" fixed="right" align="right" width="200">
+				<el-table-column label="操作" fixed="right" align="right" width="120">
 					<template #default="scope">
 						<el-button type="text" size="small" @click="table_show(scope.row, scope.$index)">查看</el-button>
 						<el-divider direction="vertical"></el-divider>