From 3dcd95bdaa977cf401465897758303fa994f649c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E9=99=8C?= <xiaomo.drip@gmail.com>
Date: Tue, 19 Dec 2023 19:03:28 +0800
Subject: [PATCH] table

---
 src/components/ContentWrap/index.vue |  60 +++
 src/components/xTable/index.vue      | 772 +++++++++++++--------------
 src/style/global.module.scss         |   6 +
 src/style/variables.scss             |   4 +
 src/views/system/table/index.vue     |   3 +-
 src/views/user/index/index.vue       | 586 ++++++++++----------
 src/x.js                             |   3 +
 7 files changed, 728 insertions(+), 706 deletions(-)
 create mode 100644 src/components/ContentWrap/index.vue
 create mode 100644 src/style/global.module.scss
 create mode 100644 src/style/variables.scss

diff --git a/src/components/ContentWrap/index.vue b/src/components/ContentWrap/index.vue
new file mode 100644
index 0000000..e912453
--- /dev/null
+++ b/src/components/ContentWrap/index.vue
@@ -0,0 +1,60 @@
+<template>
+  <ElCard :class="['mb-15px']" shadow="never">
+    <template v-if="title" #header>
+      <div class="flex items-center">
+        <span class="text-16px font-700">{{ title }}</span>
+        <ElTooltip v-if="message" effect="dark" placement="right">
+          <template #content>
+            <div class="max-w-200px">{{ message }}</div>
+          </template>
+          <el-iconQuestionFilled style="width: 18px; margin-left: 5px; color: #9E9E9E;;" class="ml-5px" />
+        </ElTooltip>
+      </div>
+    </template>
+    <div>
+      <slot></slot>
+    </div>
+  </ElCard>
+</template>
+
+<style>
+.-mb-15px {
+  margin-bottom: -15px;
+}
+</style>
+
+<script>
+export default {
+  props: {
+    title: { type: String, default: "" },
+    message: { type: String, default: "" },
+  },
+  data() {
+    return {
+      // data: this.modelValue,
+      copiedData: this.data,
+      visible: false,
+    }
+  },
+  watch: {
+
+  },
+  mounted() {
+  },
+  methods: {
+
+    closeUser() {
+      this.visible = false;
+    },
+    getUser() {
+
+      // 无法找到会员
+      if (!this.data.uid && !this.data.uin) {
+        return false;
+      }
+
+      this.visible = true
+    },
+  }
+}
+</script>
diff --git a/src/components/xTable/index.vue b/src/components/xTable/index.vue
index a2e0501..9741e1b 100644
--- a/src/components/xTable/index.vue
+++ b/src/components/xTable/index.vue
@@ -1,17 +1,17 @@
 <template>
-	<div class="xTable" :style="{'height':_height}" ref="xTableMain" v-loading="loading">
-		<div class="xTable-table" :style="{'height':_table_height}">
-			<el-table v-bind="$attrs" :data="tableData" :row-key="rowKey" :key="toggleIndex" ref="xTable" :height="height=='auto'?null:'100%'" :size="config.size" :border="config.border" :stripe="config.stripe" :summary-method="remoteSummary?remoteSummaryMethod:summaryMethod" @sort-change="sortChange" @filter-change="filterChange">
+	<div class="xTable" :style="{ 'height': _height }" ref="xTableMain" v-loading="loading">
+		<div class="xTable-table" :style="{ 'height': _table_height }">
+			<el-table v-bind="$attrs" :data="tableData" :row-key="rowKey" :key="toggleIndex" ref="xTable" :height="height == 'auto' ? null : '100%'" :size="config.size" :border="config.border" :stripe="config.stripe" :summary-method="remoteSummary ? remoteSummaryMethod : summaryMethod" @sort-change="sortChange" @filter-change="filterChange">
 				<slot></slot>
 				<template v-for="(item, index) in column" :key="index">
-					<el-table-column :align="item.align || 'left'" :label="item.label" v-if="item.column && item.column.length>0">
-					    <el-table-column v-for="(items, indexs) in item.column" :key="indexs" :align="items.align || 'left'" :column-key="items.prop||items.name" :label="items.label" :prop="items.prop||items.name" :width="items.width || 'auto'" :min-width="items.minWidth || 'auto'" :sortable="items.sortable" :fixed="items.fixed" :filters="items.filters" :filter-method="remoteFilter||!items.filters?null:filterHandler" :show-overflow-tooltip="items.showOverflowTooltip">
-					    	<template #default="{ row }">
-					    		<columnItem :row="row" :item="items" @xtableupdate="xtableupdate"> </columnItem>
-					    	</template>
-					    </el-table-column>
+					<el-table-column :align="item.align || 'left'" :label="item.label" v-if="item.column && item.column.length > 0">
+						<el-table-column v-for="(items, indexs) in item.column" :key="indexs" :align="items.align || 'left'" :column-key="items.prop || items.name" :label="items.label" :prop="items.prop || items.name" :width="items.width || 'auto'" :min-width="items.minWidth || 'auto'" :sortable="items.sortable" :fixed="items.fixed" :filters="items.filters" :filter-method="remoteFilter || !items.filters ? null : filterHandler" :show-overflow-tooltip="items.showOverflowTooltip">
+							<template #default="{ row }">
+								<columnItem :row="row" :item="items" @xtableupdate="xtableupdate"> </columnItem>
+							</template>
+						</el-table-column>
 					</el-table-column>
-					<el-table-column v-else-if="!item.hide && (item.name || item.prop)" :align="item.align || 'left'" :column-key="item.prop||item.name" :label="item.label" :prop="item.prop||item.name" :width="item.width || 'auto'" :min-width="item.minWidth || 'auto'" :sortable="item.sortable" :fixed="item.fixed" :filters="item.filters" :filter-method="remoteFilter||!item.filters?null:filterHandler" :show-overflow-tooltip="item.showOverflowTooltip">
+					<el-table-column v-else-if="!item.hide && (item.name || item.prop)" :align="item.align || 'left'" :column-key="item.prop || item.name" :label="item.label" :prop="item.prop || item.name" :width="item.width || 'auto'" :min-width="item.minWidth || 'auto'" :sortable="item.sortable" :fixed="item.fixed" :filters="item.filters" :filter-method="remoteFilter || !item.filters ? null : filterHandler" :show-overflow-tooltip="item.showOverflowTooltip">
 						<template #default="{ row }">
 							<columnItem :row="row" :item="item" @xtableupdate="xtableupdate"> </columnItem>
 						</template>
@@ -24,405 +24,401 @@
 			</el-table>
 		</div>
 		<div class="xTable-page" v-if="!hidePagination || !hideDo">
-			<div class="xTable-pagination"  v-if="!hidePagination">
-				<el-pagination background :small="true" :layout="paginationLayout" :total="total" :page-size="scPageSize" :page-sizes="pageSizes" v-model:currentPage="currentPage" @current-change="paginationChange" @update:page-size="pageSizeChange"></el-pagination>
-			</div>
-			<div class="xTable-do" v-if="!hideDo">
-				<el-button v-if="!hideRefresh" @click="refresh" icon="el-icon-refresh" circle style="margin-left:15px"></el-button>
-				<el-popover v-if="name" placement="top" title="列设置" :width="850" trigger="click" :hide-after="0" @show="customColumnShow=true" @after-leave="customColumnShow=false">
-					<template #reference>
-						<el-button v-auths="['columnsetting']" icon="el-icon-set-up" circle style="margin-left:15px"></el-button>
-					</template>
-					<columnSetting v-if="customColumnShow" ref="columnSetting" @userChange="columnSettingChange" @save="columnSettingSave" @back="columnSettingBack" :column="column"></columnSetting>
-				</el-popover>
-				<el-popover v-if="!hideSetting" placement="top" title="表格设置" :width="400" trigger="click" :hide-after="0">
-					<template #reference>
-						<el-button icon="el-icon-setting" circle style="margin-left:15px"></el-button>
-					</template>
-					<el-form label-width="80px" label-position="left">
-						<el-form-item label="表格尺寸">
-							<el-radio-group v-model="config.size" size="small" @change="configSizeChange">
-								<el-radio-button label="large">大</el-radio-button>
-								<el-radio-button label="default">正常</el-radio-button>
-								<el-radio-button label="small">小</el-radio-button>
-							</el-radio-group>
-						</el-form-item>
-						<el-form-item label="样式">
-							<el-checkbox v-model="config.border" label="纵向边框"></el-checkbox>
-							<el-checkbox v-model="config.stripe" label="斑马纹"></el-checkbox>
-						</el-form-item>
-					</el-form>
-				</el-popover>
-			</div>
+			<el-pagination :small="true" background :layout="paginationLayout" :total="total" :page-size="scPageSize" :page-sizes="pageSizes" v-model:currentPage="currentPage" @current-change="paginationChange" @update:page-size="pageSizeChange"></el-pagination>
 		</div>
 	</div>
-	<x-update v-if="tableUpdateKey" :name="tableUpdateKey" ref="xtableupdate" @success="handleSuccess" @closed="tableUpdateKey=''"></x-update>
+	<x-update v-if="tableUpdateKey" :name="tableUpdateKey" ref="xtableupdate" @success="handleSuccess" @closed="tableUpdateKey = ''"></x-update>
 	<xTabledialog v-if="xtabledialog" :name="xtabledialog" ref="xtabledialog" v-model="xtabledialog"></xTabledialog>
 </template>
 
 
 <style scoped>
-	.xTable {}
-	.xTable-table {height: calc(100% - 50px);}
-	.xTable-page {height:50px;display: flex;align-items: center;justify-content: space-between;padding:0 15px;}
-	.xTable-do {white-space: nowrap;}
-	.xTable:deep(.el-table__footer) .cell {font-weight: bold;}
-	.xTable:deep(.el-table__body-wrapper) .el-scrollbar__bar.is-horizontal {height: 12px;border-radius: 12px;}
-	.xTable:deep(.el-table__body-wrapper) .el-scrollbar__bar.is-vertical {width: 12px;border-radius: 12px;}
+.xTable {}
+
+.xTable-table {
+	height: calc(100% - 50px);
+}
+
+.xTable-page {
+	height: 50px;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 0 15px;
+	float: right;
+}
+
+.xTable-do {
+	white-space: nowrap;
+}
+
+.xTable:deep(.el-table__footer) .cell {
+	font-weight: bold;
+}
+
+.xTable:deep(.el-table__body-wrapper) .el-scrollbar__bar.is-horizontal {
+	height: 12px;
+	border-radius: 12px;
+}
+
+.xTable:deep(.el-table__body-wrapper) .el-scrollbar__bar.is-vertical {
+	width: 12px;
+	border-radius: 12px;
+}
 </style>
 
 <script>
-	import config from "@/config/table";
-	import columnSetting from './columnSetting'
-	import columnItem from './columnItem'
+import config from "@/config/table";
+import columnSetting from './columnSetting'
+import columnItem from './columnItem'
 
-	export default {
-		name: 'xTable',
-		components: {
-			columnSetting,
-			columnItem,
-		},
-		props: {
-			name: { type: String, default: "" },
-			tableColumn: { type: Object, default: () => {} },
-			api: { type: String, default: () => {} },
-			apiObj: { type: Object, default: () => {} },
-			params: { type: Object, default: () => ({}) },
-			data: { type: Object, default: () => {} },
-			height: { type: [String,Number], default: "100%" },
-			size: { type: String, default: "default" },
-			border: { type: Boolean, default: false },
-			stripe: { type: Boolean, default: false },
-			columnSetting: { type: Boolean, default: false },
-			pageSize: { type: Number, default: config.pageSize },
-			pageSizes: { type: Array, default: config.pageSizes },
-			rowKey: { type: String, default: "" },
-			summaryMethod: { type: Function, default: null },
-			remoteSort: { type: Boolean, default: false },
-			remoteFilter: { type: Boolean, default: false },
-			remoteSummary: { type: Boolean, default: false },
-			hidePagination: { type: Boolean, default: false },
-			hideDo: { type: Boolean, default: false },
-			hideRefresh: { type: Boolean, default: false },
-			hideSetting: { type: Boolean, default: false },
-			paginationLayout: { type: String, default: config.paginationLayout },
-		},
-		watch: {
+export default {
+	name: 'xTable',
+	components: {
+		columnSetting,
+		columnItem,
+	},
+	props: {
+		name: { type: String, default: "" },
+		tableColumn: { type: Object, default: () => { } },
+		api: { type: String, default: () => { } },
+		apiObj: { type: Object, default: () => { } },
+		params: { type: Object, default: () => ({}) },
+		data: { type: Object, default: () => { } },
+		height: { type: [String, Number], default: "100%" },
+		size: { type: String, default: "default" },
+		border: { type: Boolean, default: false },
+		stripe: { type: Boolean, default: false },
+		columnSetting: { type: Boolean, default: false },
+		pageSize: { type: Number, default: config.pageSize },
+		pageSizes: { type: Array, default: config.pageSizes },
+		rowKey: { type: String, default: "" },
+		summaryMethod: { type: Function, default: null },
+		remoteSort: { type: Boolean, default: false },
+		remoteFilter: { type: Boolean, default: false },
+		remoteSummary: { type: Boolean, default: false },
+		hidePagination: { type: Boolean, default: false },
+		hideDo: { type: Boolean, default: false },
+		hideRefresh: { type: Boolean, default: false },
+		hideSetting: { type: Boolean, default: false },
+		paginationLayout: { type: String, default: config.paginationLayout },
+	},
+	watch: {
 
-			//监听从props里拿到值了
-			data(){
-				this.tableData = this.data;
-				this.total = this.tableData.length;
-			},
-			apiObj(){
-				this.tableParams = this.params;
-				this.refresh();
-			},
-			api(){
-				this.tableParams = this.params;
-				this.refresh();
-			},
-			tableColumn(){
-				this.column = this.tableColumn;
-			}
-		},
-		computed: {
-			_height() {
-				return Number(this.height)?Number(this.height)+'px':this.height
-			},
-			_table_height() {
-				return this.hidePagination && this.hideDo ? "100%" : "calc(100% - 50px)"
-			}
-		},
+		//监听从props里拿到值了
 		data() {
-			return {
-				scPageSize: this.pageSize,
-				isActivat: true,
-				emptyText: "暂无数据",
-				toggleIndex: 0,
-				tableData: [],
-				total: 0,
-				currentPage: 1,
-				prop: null,
-				order: null,
-				loading: false,
-				visible: false,
-				tableHeight:'100%',
-				tableParams: this.params,
-				column: [],
-				customColumnShow: false,
-				tableUpdateKey: '',
-				xtabledialog: '',
-				summary: {},
-				visibleInfo: {},
-				config: {
-					size: this.size,
-					border: this.border,
-					stripe: this.stripe
-				},
-			}
+			this.tableData = this.data;
+			this.total = this.tableData.length;
 		},
-		mounted() {
-			this.column = this.tableColumn
-			//判断是否静态数据
-			if(this.apiObj || this.api){
-				this.getData();
-			}else if(this.data){
-				this.tableData = this.data;
-				this.total = this.tableData.length
-			}
+		apiObj() {
+			this.tableParams = this.params;
+			this.refresh();
 		},
-		activated(){
-			if(!this.isActivat){
-				this.$refs.xTable.doLayout()
-			}
+		api() {
+			this.tableParams = this.params;
+			this.refresh();
 		},
-		deactivated(){
-			this.isActivat = false;
+		tableColumn() {
+			this.column = this.tableColumn;
+		}
+	},
+	computed: {
+		_height() {
+			return Number(this.height) ? Number(this.height) + 'px' : this.height
 		},
-		methods: {
-			xtableupdate(row, options=[], componenttype, type){
+		_table_height() {
+			return this.hidePagination && this.hideDo ? "100%" : "calc(100% - 50px)"
+		}
+	},
+	data() {
+		return {
+			scPageSize: this.pageSize,
+			isActivat: true,
+			emptyText: "暂无数据",
+			toggleIndex: 0,
+			tableData: [],
+			total: 0,
+			currentPage: 1,
+			prop: null,
+			order: null,
+			loading: false,
+			visible: false,
+			tableHeight: '100%',
+			tableParams: this.params,
+			column: [],
+			customColumnShow: false,
+			tableUpdateKey: '',
+			xtabledialog: '',
+			summary: {},
+			visibleInfo: {},
+			config: {
+				size: this.size,
+				border: this.border,
+				stripe: this.stripe
+			},
+		}
+	},
+	mounted() {
+		this.column = this.tableColumn
+		//判断是否静态数据
+		if (this.apiObj || this.api) {
+			this.getData();
+		} else if (this.data) {
+			this.tableData = this.data;
+			this.total = this.tableData.length
+		}
+	},
+	activated() {
+		if (!this.isActivat) {
+			this.$refs.xTable.doLayout()
+		}
+	},
+	deactivated() {
+		this.isActivat = false;
+	},
+	methods: {
+		xtableupdate(row, options = [], componenttype, type) {
 
-				if (type=='update') {
-					this.tableUpdateKey = options.name || this.name;
-					this.$nextTick(() => {
-						this.$refs.xtableupdate.open().getComponentType(componenttype).setData(row).setConfig(options);
-					})
-					return ;
-				}
-
-				this.xtabledialog = options.name || this.name;
+			if (type == 'update') {
+				this.tableUpdateKey = options.name || this.name;
 				this.$nextTick(() => {
-					this.$refs.xtabledialog.open().setData(row).getComponentType(componenttype).setConfig(options);
+					this.$refs.xtableupdate.open().getComponentType(componenttype).setData(row).setConfig(options);
 				})
-			},
-			//获取数据
-			async getData(){
-				this.loading = true;
-				var reqData = {
-					[config.request.page]: this.currentPage,
-					[config.request.pageSize]: this.scPageSize,
-					[config.request.prop]: this.prop,
-					[config.request.order]: this.order
-				}
-
-				if(this.hidePagination){
-					delete reqData[config.request.page]
-					delete reqData[config.request.pageSize]
-				}
-
-				Object.assign(reqData, this.tableParams)
-
-				try {
-					var xawait = this.api ? this.$http.get(this.api, reqData) : this.apiObj(reqData);
-					xawait.then((res) => {
-					    try {
-					    	var response = config.parseData(res);
-					    }catch(error){
-					    	this.loading = false;
-					    	this.emptyText = "数据格式错误";
-					    	return false;
-					    }
-
-					    if(response.code != config.successCode){
-					    	this.loading = false;
-					    	this.emptyText = response.message;
-					    }else{
-					    	this.emptyText = "暂无数据";
-					    	this.tableData = (this.hidePagination? response.data : response.rows) || [];
-					    	this.total = response.total || 0;
-					    	this.summary = response.summary || {};
-					    	this.loading = false;
-					    }
-					    this.$refs.xTable.setScrollTop(0)
-					    // 回调
-					    this.$emit('dataChange', res, this.tableData)
-					});
-
-				}catch(error){
-					this.loading = false;
-					this.emptyText = error.statusText;
-					return false;
-				}
-
-			},
-			//分页点击
-			paginationChange(){
-				this.getData();
-			},
-			//条数变化
-			pageSizeChange(size){
-				this.scPageSize = size
-				this.getData();
-			},
-			//刷新数据
-			refresh(){
-				this.$refs.xTable.clearSelection();
-				this.getData();
-			},
-			//更新数据 合并上一次params
-			upData(params, page=1){
-				this.currentPage = page;
-				this.$refs.xTable.clearSelection();
-				Object.assign(this.tableParams, params || {})
-				this.getData()
-			},
-			//重载数据 替换params
-			reload(params, page=1){
-				this.currentPage = page;
-				this.tableParams = params || {}
-				this.$refs.xTable.clearSelection();
-				this.$refs.xTable.clearSort()
-				this.$refs.xTable.clearFilter()
-				this.getData()
-			},
-			//自定义变化事件
-			columnSettingChange(column){
-				this.column = column;
-				this.toggleIndex += 1;
-			},
-			//自定义列保存
-			async columnSettingSave(column){
-				this.$refs.columnSetting.isSave = true
-				try {
-					await config.columnSettingSave(this.name, column)
-					this.$message.success('保存成功')
-					this.$refs.columnSetting.isSave = false
-				}catch(error){
-					this.$message.error('保存失败')
-					this.$refs.columnSetting.isSave = false
-				}
-
-			},
-			//自定义列重置
-			async columnSettingBack(){
-				this.$refs.columnSetting.isSave = true
-				try {
-					await config.columnSettingReset(this.name, this.column)
-					this.$refs.columnSetting.column = JSON.parse(JSON.stringify(this.column||[]))
-				}catch(error){
-					this.$message.error('重置失败')
-					this.$refs.columnSetting.isSave = false
-				}
-				this.$refs.columnSetting.isSave = false
-			},
-			//排序事件
-			sortChange(obj){
-				if(!this.remoteSort){
-					return false
-				}
-
-				if(obj.prop){
-					this.prop = obj.prop
-					this.order = obj.order
-				}else{
-					this.prop = null
-					this.order = null
-				}
-				this.getData()
-			},
-			//本地过滤
-			filterHandler(value, row, column){
-				const property = column.property;
-				return row[property] === value;
-			},
-			//过滤事件
-			filterChange(filters){
-				if(!this.remoteFilter){
-					return false
-				}
-				Object.keys(filters).forEach(key => {
-					filters[key] = filters[key].join(',')
-				})
-				this.upData(filters)
-			},
-			//远程合计行处理
-			remoteSummaryMethod(param){
-				const {columns} = param
-				const sums = []
-				columns.forEach((column, index) => {
-					if(index === 0) {
-						sums[index] = '合计'
-						return
-					}
-					const values =  this.summary[column.property]
-					if(values){
-						sums[index] = values
-					}else{
-						sums[index] = ''
-					}
-				})
-				return sums
-			},
-			configSizeChange(){
-				this.$refs.xTable.doLayout()
-			},
-			//插入行 unshiftRow
-			unshiftRow(row){
-				this.tableData.unshift(row)
-			},
-			//插入行 pushRow
-			pushRow(row){
-				this.tableData.push(row)
-			},
-			//根据key覆盖数据
-			updateKey(row, rowKey=this.rowKey){
-				this.tableData.filter(item => item[rowKey]===row[rowKey] ).forEach(item => {
-					Object.assign(item, row)
-				})
-			},
-			//根据index覆盖数据
-			updateIndex(row, index){
-				Object.assign(this.tableData[index], row)
-			},
-			//根据index删除
-			removeIndex(index){
-				this.tableData.splice(index, 1)
-			},
-			//根据index批量删除
-			removeIndexes(indexes=[]){
-				indexes.forEach(index => {
-					this.tableData.splice(index, 1)
-				})
-			},
-			//根据key删除
-			removeKey(key, rowKey=this.rowKey){
-				this.tableData.splice(this.tableData.findIndex(item => item[rowKey]===key), 1)
-			},
-			//根据keys批量删除
-			removeKeys(keys=[], rowKey=this.rowKey){
-				keys.forEach(key => {
-					this.tableData.splice(this.tableData.findIndex(item => item[rowKey]===key), 1)
-				})
-			},
-			//原生方法转发
-			clearSelection(){
-				this.$refs.xTable.clearSelection()
-			},
-			toggleRowSelection(row, selected){
-				this.$refs.xTable.toggleRowSelection(row, selected)
-			},
-			toggleAllSelection(){
-				this.$refs.xTable.toggleAllSelection()
-			},
-			toggleRowExpansion(row, expanded){
-				this.$refs.xTable.toggleRowExpansion(row, expanded)
-			},
-			setCurrentRow(row){
-				this.$refs.xTable.setCurrentRow(row)
-			},
-			clearSort(){
-				this.$refs.xTable.clearSort()
-			},
-			clearFilter(columnKey){
-				this.$refs.xTable.clearFilter(columnKey)
-			},
-			doLayout(){
-				this.$refs.xTable.doLayout()
-			},
-			sort(prop, order){
-				this.$refs.xTable.sort(prop, order)
+				return;
 			}
+
+			this.xtabledialog = options.name || this.name;
+			this.$nextTick(() => {
+				this.$refs.xtabledialog.open().setData(row).getComponentType(componenttype).setConfig(options);
+			})
+		},
+		//获取数据
+		async getData() {
+			this.loading = true;
+			var reqData = {
+				[config.request.page]: this.currentPage,
+				[config.request.pageSize]: this.scPageSize,
+				[config.request.prop]: this.prop,
+				[config.request.order]: this.order
+			}
+
+			if (this.hidePagination) {
+				delete reqData[config.request.page]
+				delete reqData[config.request.pageSize]
+			}
+
+			Object.assign(reqData, this.tableParams)
+
+			try {
+				var xawait = this.api ? this.$http.get(this.api, reqData) : this.apiObj(reqData);
+				xawait.then((res) => {
+					try {
+						var response = config.parseData(res);
+					} catch (error) {
+						this.loading = false;
+						this.emptyText = "数据格式错误";
+						return false;
+					}
+
+					if (response.code != config.successCode) {
+						this.loading = false;
+						this.emptyText = response.message;
+					} else {
+						this.emptyText = "暂无数据";
+						this.tableData = (this.hidePagination ? response.data : response.rows) || [];
+						this.total = response.total || 0;
+						this.summary = response.summary || {};
+						this.loading = false;
+					}
+					this.$refs.xTable.setScrollTop(0)
+					// 回调
+					this.$emit('dataChange', res, this.tableData)
+				});
+
+			} catch (error) {
+				this.loading = false;
+				this.emptyText = error.statusText;
+				return false;
+			}
+
+		},
+		//分页点击
+		paginationChange() {
+			this.getData();
+		},
+		//条数变化
+		pageSizeChange(size) {
+			this.scPageSize = size
+			this.getData();
+		},
+		//刷新数据
+		refresh() {
+			this.$refs.xTable.clearSelection();
+			this.getData();
+		},
+		//更新数据 合并上一次params
+		upData(params, page = 1) {
+			this.currentPage = page;
+			this.$refs.xTable.clearSelection();
+			Object.assign(this.tableParams, params || {})
+			this.getData()
+		},
+		//重载数据 替换params
+		reload(params, page = 1) {
+			this.currentPage = page;
+			this.tableParams = params || {}
+			this.$refs.xTable.clearSelection();
+			this.$refs.xTable.clearSort()
+			this.$refs.xTable.clearFilter()
+			this.getData()
+		},
+		//自定义变化事件
+		columnSettingChange(column) {
+			this.column = column;
+			this.toggleIndex += 1;
+		},
+		//自定义列保存
+		async columnSettingSave(column) {
+			this.$refs.columnSetting.isSave = true
+			try {
+				await config.columnSettingSave(this.name, column)
+				this.$message.success('保存成功')
+				this.$refs.columnSetting.isSave = false
+			} catch (error) {
+				this.$message.error('保存失败')
+				this.$refs.columnSetting.isSave = false
+			}
+
+		},
+		//自定义列重置
+		async columnSettingBack() {
+			this.$refs.columnSetting.isSave = true
+			try {
+				await config.columnSettingReset(this.name, this.column)
+				this.$refs.columnSetting.column = JSON.parse(JSON.stringify(this.column || []))
+			} catch (error) {
+				this.$message.error('重置失败')
+				this.$refs.columnSetting.isSave = false
+			}
+			this.$refs.columnSetting.isSave = false
+		},
+		//排序事件
+		sortChange(obj) {
+			if (!this.remoteSort) {
+				return false
+			}
+
+			if (obj.prop) {
+				this.prop = obj.prop
+				this.order = obj.order
+			} else {
+				this.prop = null
+				this.order = null
+			}
+			this.getData()
+		},
+		//本地过滤
+		filterHandler(value, row, column) {
+			const property = column.property;
+			return row[property] === value;
+		},
+		//过滤事件
+		filterChange(filters) {
+			if (!this.remoteFilter) {
+				return false
+			}
+			Object.keys(filters).forEach(key => {
+				filters[key] = filters[key].join(',')
+			})
+			this.upData(filters)
+		},
+		//远程合计行处理
+		remoteSummaryMethod(param) {
+			const { columns } = param
+			const sums = []
+			columns.forEach((column, index) => {
+				if (index === 0) {
+					sums[index] = '合计'
+					return
+				}
+				const values = this.summary[column.property]
+				if (values) {
+					sums[index] = values
+				} else {
+					sums[index] = ''
+				}
+			})
+			return sums
+		},
+		configSizeChange() {
+			this.$refs.xTable.doLayout()
+		},
+		//插入行 unshiftRow
+		unshiftRow(row) {
+			this.tableData.unshift(row)
+		},
+		//插入行 pushRow
+		pushRow(row) {
+			this.tableData.push(row)
+		},
+		//根据key覆盖数据
+		updateKey(row, rowKey = this.rowKey) {
+			this.tableData.filter(item => item[rowKey] === row[rowKey]).forEach(item => {
+				Object.assign(item, row)
+			})
+		},
+		//根据index覆盖数据
+		updateIndex(row, index) {
+			Object.assign(this.tableData[index], row)
+		},
+		//根据index删除
+		removeIndex(index) {
+			this.tableData.splice(index, 1)
+		},
+		//根据index批量删除
+		removeIndexes(indexes = []) {
+			indexes.forEach(index => {
+				this.tableData.splice(index, 1)
+			})
+		},
+		//根据key删除
+		removeKey(key, rowKey = this.rowKey) {
+			this.tableData.splice(this.tableData.findIndex(item => item[rowKey] === key), 1)
+		},
+		//根据keys批量删除
+		removeKeys(keys = [], rowKey = this.rowKey) {
+			keys.forEach(key => {
+				this.tableData.splice(this.tableData.findIndex(item => item[rowKey] === key), 1)
+			})
+		},
+		//原生方法转发
+		clearSelection() {
+			this.$refs.xTable.clearSelection()
+		},
+		toggleRowSelection(row, selected) {
+			this.$refs.xTable.toggleRowSelection(row, selected)
+		},
+		toggleAllSelection() {
+			this.$refs.xTable.toggleAllSelection()
+		},
+		toggleRowExpansion(row, expanded) {
+			this.$refs.xTable.toggleRowExpansion(row, expanded)
+		},
+		setCurrentRow(row) {
+			this.$refs.xTable.setCurrentRow(row)
+		},
+		clearSort() {
+			this.$refs.xTable.clearSort()
+		},
+		clearFilter(columnKey) {
+			this.$refs.xTable.clearFilter(columnKey)
+		},
+		doLayout() {
+			this.$refs.xTable.doLayout()
+		},
+		sort(prop, order) {
+			this.$refs.xTable.sort(prop, order)
 		}
 	}
+}
 </script>
diff --git a/src/style/global.module.scss b/src/style/global.module.scss
new file mode 100644
index 0000000..8448a92
--- /dev/null
+++ b/src/style/global.module.scss
@@ -0,0 +1,6 @@
+@import './variables.scss';
+// 导出变量
+:export {
+  namespace: $namespace;
+  elNamespace: $elNamespace;
+}
diff --git a/src/style/variables.scss b/src/style/variables.scss
new file mode 100644
index 0000000..00b66f1
--- /dev/null
+++ b/src/style/variables.scss
@@ -0,0 +1,4 @@
+// 命名空间
+$namespace: v;
+// el命名空间
+$elNamespace: el;
diff --git a/src/views/system/table/index.vue b/src/views/system/table/index.vue
index dff20b3..38910c9 100644
--- a/src/views/system/table/index.vue
+++ b/src/views/system/table/index.vue
@@ -21,8 +21,7 @@
 				</div>
 				<div class="right-panel" v-if="filter.length>0 || stat.length>0">
 					<el-button v-for="(s,index) in stat" :key="index" class="hidden-xs-only" @click="openStat(s)" v-bind="s">{{ s.label }}</el-button>
-					<xFilterBar v-if="filter.length>0" v-model="search" :filterName="$route.meta.tablename" :options="filter" @filterChange="filterChange">
-					</xFilterBar>
+					<xFilterBar v-if="filter.length>0" v-model="search" :filterName="$route.meta.tablename" :options="filter" @filterChange="filterChange"> </xFilterBar>
 				</div>
 			</el-header>
 
diff --git a/src/views/user/index/index.vue b/src/views/user/index/index.vue
index 2ff1926..8fb9fe7 100644
--- a/src/views/user/index/index.vue
+++ b/src/views/user/index/index.vue
@@ -1,325 +1,279 @@
 <template>
+	<el-container>
+		<el-main>
+			<ContentWrap style="margin-bottom: 10px;" v-if="filter && filter.length > 0">
+				<el-form ref="queryFormRef" :inline="true" :model="search" class="-mb-15px" label-width="">
+					<el-form-item :label="i.label" :prop="i.name" v-for="(i, index) in filter" :key="index">
+						<x-item :item="i" v-model="search"></x-item>
+					</el-form-item>
+					<el-form-item>
+						<el-button @click="filterChange" type="primary">
+							<el-iconSearch style="width: 14px; color: #fff;" /> 搜索
+						</el-button>
+					</el-form-item>
+				</el-form>
+			</ContentWrap>
 
-<div style="padding: 10px;">
+			<ContentWrap class="xtable">
+				<el-tabs v-if="tabs && tabs.length > 0" v-model="search[tabskey]" @tab-click="tabChange">
+					<el-tab-pane v-for="item in tabs" :key="item.value" :label="item.label + (item.count ? '(' + item.count + ')' : '')" :name="item.value" />
+				</el-tabs>
+				<xTable ref="table" :tableColumn="column" :name="tablename" :params="search" :api="api" :row-key="key" @selection-change="selectionChange" :remoteSort="true" :remoteFilter="true" stripe>
+					<el-table-column v-if="isselection" type="selection" width="50"></el-table-column>
+					<el-table-column :label="operation.label || '操作'" :width="operation.width || 124" :fixed="operation.fixed || 'right'" :align="operation.align || 'left'" v-if="operation.edit || operation.delete">
+						<template #default="scope">
+							<el-button-group>
+								<el-button v-if="operation.edit" :type="operation.edit.type || 'primary'" :size="operation.edit.size || 'small'" @click="operationEdit(scope.row, scope.$index)">{{ operation.edit.label || '编辑' }}</el-button>
+								<el-popconfirm v-if="operation.delete" :title="operation.delete.title || '确定删除吗？'" @confirm="operationDelete(scope.row, scope.$index)">
+									<template #reference>
+										<el-button :type="operation.delete.type || 'info'" :size="operation.delete.size || 'small'">{{ operation.delete.label || '删除' }}</el-button>
+									</template>
+								</el-popconfirm>
+							</el-button-group>
+						</template>
+					</el-table-column>
+				</xTable>
+			</ContentWrap>
+		</el-main>
+	</el-container>
+	<x-update v-if="dialog.save" :column="column" :name="key" ref="saveDialog" @success="handleSuccess" @closed="dialog.save = false"></x-update>
+</template>
 
 
-	 <el-form
-      ref="queryFormRef"
-      :inline="true"
-      :model="queryParams"
-      class="-mb-15px"
-      label-width="68px"
-    >
-      <el-form-item label="商品名称" prop="name">
-        <el-input
-          v-model="queryParams.name"
-          class="!w-240px"
-          clearable
-          placeholder="请输入商品名称"
-          @keyup.enter="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="商品分类" prop="categoryId">
-        <el-cascader
-          v-model="queryParams.categoryId"
-          :options="categoryList"
-          :props="defaultProps"
-          class="w-1/1"
-          clearable
-          filterable
-          placeholder="请选择商品分类"
-        />
-      </el-form-item>
-      <el-form-item label="创建时间" prop="createTime">
-        <el-date-picker
-          v-model="queryParams.createTime"
-          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
-          class="!w-240px"
-          end-placeholder="结束日期"
-          start-placeholder="开始日期"
-          type="daterange"
-          value-format="YYYY-MM-DD HH:mm:ss"
-        />
-      </el-form-item>
-      <el-form-item>
-        <el-button @click="handleQuery">
-          <Icon class="mr-5px" icon="ep:search" />
-          搜索
-        </el-button>
-        <el-button @click="resetQuery">
-          <Icon class="mr-5px" icon="ep:refresh" />
-          重置
-        </el-button>
-        <el-button
-          v-hasPermi="['product:spu:create']"
-          plain
-          type="primary"
-          @click="openForm(undefined)"
-        >
-          <Icon class="mr-5px" icon="ep:plus" />
-          新增
-        </el-button>
-        <el-button
-          v-hasPermi="['product:spu:export']"
-          :loading="exportLoading"
-          plain
-          type="success"
-          @click="handleExport"
-        >
-          <Icon class="mr-5px" icon="ep:download" />
-          导出
-        </el-button>
-      </el-form-item>
-    </el-form>
+<script>
+export default {
+	name: 'systemTable',
+	components: {},
+	props: {
+		name: { type: String, default: "" },
+	},
+	data() {
+		return {
+			dialog: {
+				save: false,
+				stat: false,
+			},
+			isselection: true,
+			selection: [],
+			column: [],
+			aside: {
+				items: []
+			},
+			filter: [],
+			api: '',
+			operation: {},
+			key: 'id',
+			search: {},
+			tabs: [
+				// {label:'所有', value:0},
+			],
+			stat: [],
+			chartoption: {},
+			// tablename:  this.$route.meta.tablename,
+			tablename: 'tenement.lists',
+			tableurl: this.$route.meta.tableurl,
+			groupFilterText: '',
+			tabskey: '',
+			tabsdefaultvalue: ''
+		}
+	},
+	mounted() {
+
+		if (this.name) {
+			this.tablename = this.name || this.$route.meta.tablename;
+		}
+
+		//判断是否开启自定义列
+		if (this.tablename || this.tableurl) {
+			var awaitvar = this.tableurl ? this.$http.get(this.tableurl, {}, { cache: true }) : this.$api.system.table.get(this.tablename, { cache: this.$route.meta.tablecache || 0 });
+			awaitvar.then((res) => {
+				if (res.code == 200) {
+					Object.assign(this.$data, res.data);
+					if (res.data.tabsdefaultvalue && res.data.tabskey) {
+						this.search[res.data.tabskey] = res.data.tabsdefaultvalue
+					}
+
+				}
+			});
+		}
+	},
+	computed: {
+		filterObj() {
+			const obj = []
+			this.filter.forEach((item) => {
+				if (item.component) {
+					obj.push({
+						name: item.value,
+						label: item.label,
+						component: item.component,
+						options: item.options,
+					})
+				}
+			})
+			return obj
+		}
+	},
+	watch: {
+		groupFilterText(val) {
+			this.$refs.group.filter(val);
+		}
+	},
+	methods: {
+		//树过滤
+		groupFilterNode(value, data) {
+			if (!value) return true;
+			return data.label.indexOf(value) !== -1;
+		},
+		//树点击事件
+		groupClick(data) {
+			this.search[this.aside.searchkey || 'groupid'] = data[this.aside.key || 'id'];
+			this.$refs.table.reload(this.search)
+		},
+		// 筛选回调
+		filterChange(data) {
+			var info = Object.assign({}, this.search, data)
+			this.$refs.table.reload(info)
+		},
+		//标签切换
+		tabChange() {
+			this.$refs.table.reload(this.search)
+		},
+		//本地更新数据
+		handleSuccess(data, mode, message) {
+			if (mode == 'edit') {
+				if (data) {
+					this.$refs.table.tableData.filter(item => item[this.key] === data[this.key]).forEach(item => {
+						Object.assign(item, data, data)
+					})
+				} else {
+					this.$refs.table.refresh()
+				}
+			} else {
+				if (data) {
+					this.$refs.table.tableData.unshift(data)
+				} else {
+					this.$refs.table.reload({})
+				}
+			}
+			this.$message.success(message || "操作成功")
+			return;
+		},
+		//增加
+		plus() {
+			this.dialog.save = true
+			this.$nextTick(() => {
+				this.$refs.saveDialog.open('plus').getComponentType(this.operation.plus.component).setData({}).setConfig(this.operation.plus)
+			})
+		},
+		//编辑
+		operationEdit(row) {
+			this.dialog.save = true
+			this.$nextTick(() => {
+				this.$refs.saveDialog.open('edit').getComponentType(this.operation.edit.component).setData(row).setConfig(this.operation.edit)
+			})
+		},
+		//打开统计
+		openStat(o) {
+			this.dialog.stat = true
+			this.$nextTick(() => {
+				this.$refs.xstatdialog.open().setData(o);
+			})
+		},
+		//删除
+		async operationDelete(row, index) {
+
+			const key = typeof this.operation.delete.key !== 'undefined' && this.operation.delete.key ? this.operation.delete.key : this.key;
+			var res = await this.$http.post(this.operation.delete.url, { [key]: row[key], index: index })
+			if (res.code == 200) {
+				this.$refs.table.tableData.splice(index, 1);
+				return;
+			}
+			this.$alert(res.message, "提示", { type: 'error' });
+		},
+		//批量删除
+		async batchdeletion() {
+
+			if (this.selection.length == 0) {
+				this.$alert('请勾选你要删除的项目', "提示", { type: 'error' });
+				return;
+			}
 
 
-	<el-table :data="tableData" stripe border style="width: 100%">
-	  <el-table-column prop="date" label="Date" width="180" />
-	  <el-table-column fixed="right" prop="name" label="Name" width="180" />
-	  <el-table-column prop="address" label="Address" />
-	  <el-table-column prop="address" label="Address" />
-	  <el-table-column prop="address" label="Address" />
-	  <el-table-column prop="address" label="Address" />
-	  <el-table-column prop="address" label="Address" />
-	  <el-table-column prop="address" label="Address" />
-	  <el-table-column prop="address" label="Address" />
-	  <el-table-column prop="address" label="Address" />
-	  <el-table-column prop="address" label="Address" />
-	  <el-table-column prop="address" label="Address" />
-	  <el-table-column prop="address" label="Address" />
-	  <el-table-column prop="address" label="Address" />
-	  <el-table-column prop="address" label="Address" />
-	  <el-table-column prop="address" label="Address" />
-	  <el-table-column prop="address" label="Address" />
-	  <el-table-column prop="address" label="Address" />
-	</el-table>
-</div>
-  </template>
+			if (!this.operation.batchdeletion.url) {
+				this.$alert('没有批量删除相关配置', "提示", { type: 'error' });
+				return;
+			}
 
-  <script  setup>
+			this.$confirm(`确定删除选中的 ${this.selection.length} 项吗？`, '提示', {
+				type: 'warning'
+			}).then(() => {
+				const loading = this.$loading();
+				const ids = this.selection.map(obj => obj[this.key]);
 
-  const queryParams = {};
+				this.$http.post(this.operation.batchdeletion.url, { [this.key]: ids }).then((res) => {
+					if (res.code == 200) {
+						this.$refs.table.tableData.forEach((itemI, indexI) => {
+							if (ids.includes(itemI[this.key])) {
+								this.$refs.table.tableData.splice(indexI, 1)
+							}
+						})
+						this.$message.success(res.message || "操作成功")
+						return;
+					}
+					this.$alert(res.message, "提示", { type: 'error' });
+					loading.close();
+				})
+			}).catch(() => {
 
-  const tableData = [
-	{
-	  date: '2016-05-03',
-	  name: 'Tom',
-	  address: 'No. 189, Grove St, Los Angeles',
-	},
-	{
-	  date: '2016-05-02',
-	  name: 'Tom',
-	  address: 'No. 189, Grove St, Los Angeles',
-	},
-	{
-	  date: '2016-05-04',
-	  name: 'Tom',
-	  address: 'No. 189, Grove St, Los Angeles',
-	},
-	{
-	  date: '2016-05-01',
-	  name: 'Tom',
-	  address: 'No. 189, Grove St, Los Angeles',
-	},
-	{
-	  date: '2016-05-03',
-	  name: 'Tom',
-	  address: 'No. 189, Grove St, Los Angeles',
-	},
-	{
-	  date: '2016-05-02',
-	  name: 'Tom',
-	  address: 'No. 189, Grove St, Los Angeles',
-	},
-	{
-	  date: '2016-05-04',
-	  name: 'Tom',
-	  address: 'No. 189, Grove St, Los Angeles',
-	},
-	{
-	  date: '2016-05-01',
-	  name: 'Tom',
-	  address: 'No. 189, Grove St, Los Angeles',
-	},
-	{
-	  date: '2016-05-03',
-	  name: 'Tom',
-	  address: 'No. 189, Grove St, Los Angeles',
-	},
-	{
-	  date: '2016-05-02',
-	  name: 'Tom',
-	  address: 'No. 189, Grove St, Los Angeles',
-	},
-	{
-	  date: '2016-05-04',
-	  name: 'Tom',
-	  address: 'No. 189, Grove St, Los Angeles',
-	},
-	{
-	  date: '2016-05-01',
-	  name: 'Tom',
-	  address: 'No. 189, Grove St, Los Angeles',
-	},
-	{
-	  date: '2016-05-03',
-	  name: 'Tom',
-	  address: 'No. 189, Grove St, Los Angeles',
-	},
-	{
-	  date: '2016-05-02',
-	  name: 'Tom',
-	  address: 'No. 189, Grove St, Los Angeles',
-	},
-	{
-	  date: '2016-05-04',
-	  name: 'Tom',
-	  address: 'No. 189, Grove St, Los Angeles',
-	},
-	{
-	  date: '2016-05-01',
-	  name: 'Tom',
-	  address: 'No. 189, Grove St, Los Angeles',
-	},
-	{
-	  date: '2016-05-03',
-	  name: 'Tom',
-	  address: 'No. 189, Grove St, Los Angeles',
-	},
-	{
-	  date: '2016-05-02',
-	  name: 'Tom',
-	  address: 'No. 189, Grove St, Los Angeles',
-	},
-	{
-	  date: '2016-05-04',
-	  name: 'Tom',
-	  address: 'No. 189, Grove St, Los Angeles',
-	},
-	{
-	  date: '2016-05-01',
-	  name: 'Tom',
-	  address: 'No. 189, Grove St, Los Angeles',
-	},
-	{
-	  date: '2016-05-03',
-	  name: 'Tom',
-	  address: 'No. 189, Grove St, Los Angeles',
-	},
-	{
-	  date: '2016-05-02',
-	  name: 'Tom',
-	  address: 'No. 189, Grove St, Los Angeles',
-	},
-	{
-	  date: '2016-05-04',
-	  name: 'Tom',
-	  address: 'No. 189, Grove St, Los Angeles',
-	},
-	{
-	  date: '2016-05-01',
-	  name: 'Tom',
-	  address: 'No. 189, Grove St, Los Angeles',
-	},
-	{
-	  date: '2016-05-03',
-	  name: 'Tom',
-	  address: 'No. 189, Grove St, Los Angeles',
-	},
-	{
-	  date: '2016-05-02',
-	  name: 'Tom',
-	  address: 'No. 189, Grove St, Los Angeles',
-	},
-	{
-	  date: '2016-05-04',
-	  name: 'Tom',
-	  address: 'No. 189, Grove St, Los Angeles',
-	},
-	{
-	  date: '2016-05-01',
-	  name: 'Tom',
-	  address: 'No. 189, Grove St, Los Angeles',
-	},
-	{
-	  date: '2016-05-03',
-	  name: 'Tom',
-	  address: 'No. 189, Grove St, Los Angeles',
-	},
-	{
-	  date: '2016-05-02',
-	  name: 'Tom',
-	  address: 'No. 189, Grove St, Los Angeles',
-	},
-	{
-	  date: '2016-05-04',
-	  name: 'Tom',
-	  address: 'No. 189, Grove St, Los Angeles',
-	},
-	{
-	  date: '2016-05-01',
-	  name: 'Tom',
-	  address: 'No. 189, Grove St, Los Angeles',
-	},
-	{
-	  date: '2016-05-03',
-	  name: 'Tom',
-	  address: 'No. 189, Grove St, Los Angeles',
-	},
-	{
-	  date: '2016-05-02',
-	  name: 'Tom',
-	  address: 'No. 189, Grove St, Los Angeles',
-	},
-	{
-	  date: '2016-05-04',
-	  name: 'Tom',
-	  address: 'No. 189, Grove St, Los Angeles',
-	},
-	{
-	  date: '2016-05-01',
-	  name: 'Tom',
-	  address: 'No. 189, Grove St, Los Angeles',
-	},
-	{
-	  date: '2016-05-03',
-	  name: 'Tom',
-	  address: 'No. 189, Grove St, Los Angeles',
-	},
-	{
-	  date: '2016-05-02',
-	  name: 'Tom',
-	  address: 'No. 189, Grove St, Los Angeles',
-	},
-	{
-	  date: '2016-05-04',
-	  name: 'Tom',
-	  address: 'No. 189, Grove St, Los Angeles',
-	},
-	{
-	  date: '2016-05-01',
-	  name: 'Tom',
-	  address: 'No. 189, Grove St, Los Angeles',
-	},
-	{
-	  date: '2016-05-03',
-	  name: 'Tom',
-	  address: 'No. 189, Grove St, Los Angeles',
-	},
-	{
-	  date: '2016-05-02',
-	  name: 'Tom',
-	  address: 'No. 189, Grove St, Los Angeles',
-	},
-	{
-	  date: '2016-05-04',
-	  name: 'Tom',
-	  address: 'No. 189, Grove St, Los Angeles',
-	},
-	{
-	  date: '2016-05-01',
-	  name: 'Tom',
-	  address: 'No. 189, Grove St, Los Angeles',
-	},
-  ]
-  </script>
+			})
+		},
+		//表格选择后回调事件
+		selectionChange(selection) {
+			this.selection = selection;
+		},
+	}
+}
+</script>
+
+<style>
+.xtable {
+	margin-top: 0px;
+	margin-bottom: 0px !important;
+}
+
+.xtable .el-card__body {
+	padding: 5px
+}
+
+.xtable .el-tabs__nav {
+	padding: 10px
+}
+
+.xtable .el-tabs {
+	padding: 0px 2px 0;
+}
+
+.xtable .mt-10px {
+	margin-top: 15px;
+}
+
+.xtable .mb-10px {
+	margin-bottom: 15px;
+}
+
+
+.xtable .float-right {
+	float: right;
+}
+
+.xtable .el-tabs__header {
+	margin: 0 0 2px;
+}
+
+
+
+.xtable .el-tabs__nav-next,
+.el-tabs__nav-prev {
+	padding: 10px 0;
+}
+</style>
\ No newline at end of file
diff --git a/src/x.js b/src/x.js
index 744600d..e2cdcf4 100644
--- a/src/x.js
+++ b/src/x.js
@@ -28,6 +28,7 @@ import xQrCode from './components/xQrCode'
 import xPageHeader from './components/xPageHeader'
 import xSelect from './components/xSelect'
 import xWaterMark from './components/xWaterMark'
+import ContentWrap from './components/ContentWrap'
 import store from '@/store'
 import {
     Flexbox,
@@ -92,6 +93,8 @@ export default {
         for (let icon in xIcons) {
             app.component(`xIcon${icon}`, xIcons[icon])
         }
+
+        app.component('ContentWrap', ContentWrap);
         //关闭async-validator全局控制台警告
         window.ASYNC_VALIDATOR_NO_WARNING = 1
         //全局代码错误捕捉