From 2acc1dac76efd892403786bc31a3011399f5829d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E9=99=8C?= <xiaomo.drip@gmail.com>
Date: Tue, 4 Jul 2023 19:03:42 +0800
Subject: [PATCH] no message

---
 src/components/Flexbox/Flexbox.vue         |  81 ++
 src/components/Flexbox/FlexboxItem.vue     |  62 ++
 src/components/Flexbox/index.js            |   7 +
 src/components/scFilterBar/index.vue       |  12 +-
 src/components/scTitle/index.vue           |   9 +-
 src/views/home/widgets/components/stat.vue | 146 ++--
 src/views/system/table/index.vue           |  35 +-
 src/views/system/tablegen/column.vue       | 355 +++++++++
 src/views/system/tablegen/index.vue        | 182 +++++
 src/views/system/upgrade/index.vue         | 818 +++++++++++++++++++++
 src/x.js                                   |   3 +
 11 files changed, 1623 insertions(+), 87 deletions(-)
 create mode 100755 src/components/Flexbox/Flexbox.vue
 create mode 100755 src/components/Flexbox/FlexboxItem.vue
 create mode 100755 src/components/Flexbox/index.js
 create mode 100644 src/views/system/tablegen/column.vue
 create mode 100644 src/views/system/tablegen/index.vue
 create mode 100644 src/views/system/upgrade/index.vue

diff --git a/src/components/Flexbox/Flexbox.vue b/src/components/Flexbox/Flexbox.vue
new file mode 100755
index 0000000..69f5f2d
--- /dev/null
+++ b/src/components/Flexbox/Flexbox.vue
@@ -0,0 +1,81 @@
+<template>
+  <div
+    :class="{
+      'vux-flex-col': orient === 'vertical',
+      'vux-flex-row': orient === 'horizontal'
+    }"
+    :style="styles"
+    class="vux-flexbox">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Flexbox',
+  props: {
+    gutter: {
+      type: Number,
+      default: 8
+    },
+    orient: {
+      type: String,
+      default: 'horizontal'
+    },
+    justify: String,
+    align: String,
+    wrap: String,
+    direction: String
+  },
+  computed: {
+    styles() {
+      const styles = {
+        'justify-content': this.justify,
+        '-webkit-justify-content': this.justify,
+        'align-items': this.align,
+        '-webkit-align-items': this.align,
+        'flex-wrap': this.wrap,
+        '-webkit-flex-wrap': this.wrap,
+        'flex-direction': this.direction,
+        '-webkit-flex-direction': this.direction
+      }
+      return styles
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.vux-flexbox {
+  width: 100%;
+  text-align: left;
+  display: flex;
+  display: -webkit-flex;
+  box-align: center;
+  align-items: center;
+  .vux-flexbox-item {
+    flex: 1;
+    -webkit-flex: 1;
+    min-width: 20px;
+    width: 0%;
+    &:first-child {
+      margin-left: 0 !important;
+      margin-top: 0 !important;
+    }
+  }
+}
+
+.vux-flex-row {
+  box-direction: row;
+  box-orient: horizontal;
+  flex-direction: row;
+}
+
+.vux-flex-col {
+  box-orient: vertical;
+  flex-direction: column;
+  > .vux-flexbox-item {
+    width: 100%;
+  }
+}
+</style>
diff --git a/src/components/Flexbox/FlexboxItem.vue b/src/components/Flexbox/FlexboxItem.vue
new file mode 100755
index 0000000..fd6b149
--- /dev/null
+++ b/src/components/Flexbox/FlexboxItem.vue
@@ -0,0 +1,62 @@
+<template>
+  <div
+    :style="style"
+    class="vux-flexbox-item">
+    <slot/>
+  </div>
+</template>
+
+<script>
+const prefixList = ['-moz-box-', '-webkit-box-', '']
+
+export default {
+  name: 'FlexboxItem',
+  props: {
+    span: [Number, String],
+    order: [Number, String]
+  },
+  data() {
+    return {
+      bodyWidth: 0
+    }
+  },
+  computed: {
+    style() {
+      const styles = {}
+      const marginName =
+        this.$parent.orient === 'horizontal' ? 'marginLeft' : 'marginTop'
+
+      if (this.$parent.gutter * 1 !== 0) {
+        styles[marginName] = `${this.$parent.gutter}px`
+      }
+
+      if (this.span) {
+        for (let i = 0; i < prefixList.length; i++) {
+          styles[`${prefixList[i]}flex`] = `0 0 ${this.buildWidth(this.span) *
+            100}%`
+        }
+      }
+      if (typeof this.order !== 'undefined') {
+        styles.order = this.order
+      }
+      return styles
+    }
+  },
+  beforeMount() {
+    this.bodyWidth = document.documentElement.offsetWidth
+  },
+  methods: {
+    buildWidth(width) {
+      if (typeof width === 'number') {
+        if (width < 1) {
+          return width
+        } else {
+          return width / 12
+        }
+      } else if (typeof width === 'string') {
+        return width.replace('px', '') / this.bodyWidth
+      }
+    }
+  }
+}
+</script>
diff --git a/src/components/Flexbox/index.js b/src/components/Flexbox/index.js
new file mode 100755
index 0000000..14051f3
--- /dev/null
+++ b/src/components/Flexbox/index.js
@@ -0,0 +1,7 @@
+import Flexbox from './Flexbox'
+import FlexboxItem from './FlexboxItem'
+
+export {
+  Flexbox,
+  FlexboxItem
+}
diff --git a/src/components/scFilterBar/index.vue b/src/components/scFilterBar/index.vue
index a60fc53..8ca30ce 100644
--- a/src/components/scFilterBar/index.vue
+++ b/src/components/scFilterBar/index.vue
@@ -8,7 +8,7 @@
 		</el-badge>
 		<div class="right-panel-search" v-if="filter.length>0">
 			<el-form :inline="true" :model="data">
-				<el-form-item style="margin-bottom:0px;margin-right: 6px;" v-for="(i,index) in fieldTop" :key="index">
+				<el-form-item :style="{ 'margin-bottom': '0px', 'margin-right': '6px', 'width': getWidth(i) }" v-for="(i,index) in fieldTop" :key="index">
 					<x-item  :item="i" v-model="data"></x-item>
 				</el-form-item>
 				<el-form-item style="margin-bottom:0px;margin-right: 6px;">
@@ -122,11 +122,13 @@
 
 					obj[item.name] = item.operator ? this.data[item.name]+`${config.separator}${item.operator}` : this.data[item.name]
 				})
-
-				console.log(obj)
-
 				return obj
-			}
+			},
+			getWidth() {
+		    	return function(item) {
+		      		return item.width ? item.width+'px' : 'auto';
+		    	}
+		  	}
 		},
 		mounted(){
 			//默认显示的过滤项
diff --git a/src/components/scTitle/index.vue b/src/components/scTitle/index.vue
index f206fef..c270971 100644
--- a/src/components/scTitle/index.vue
+++ b/src/components/scTitle/index.vue
@@ -19,5 +19,12 @@
 </script>
 
 <style scoped>
-	.sc-title {border-bottom: 1px solid #eee;margin-bottom: 20px;font-size: 17px;padding-bottom: 15px;color: #3c4a54;font-weight: bold;}
+	.sc-title {
+		margin: 20px 0;
+		font-size: 17px;
+		/*border-bottom: 1px solid #eee;*/
+		/*padding-bottom: 15px;*/
+		color: #3c4a54;
+		font-weight: bold;
+	}
 </style>
diff --git a/src/views/home/widgets/components/stat.vue b/src/views/home/widgets/components/stat.vue
index 9540901..676b270 100644
--- a/src/views/home/widgets/components/stat.vue
+++ b/src/views/home/widgets/components/stat.vue
@@ -1,94 +1,96 @@
 <template>
-	<el-card shadow="hover" header="统计" v-loading="loading">
-		<scEcharts ref="c1" height="300px" :option="option"></scEcharts>
+	<el-card shadow="hover" header="销售简报" v-loading="loading">
+
+		<div class="number-data">
+			<div class="item" v-for="(s, index) in briefList" :key="index">
+				<sc-statistic :title="s.label" :value="s.num" :description="s.status" :tips="s.rate" groupSeparator>
+					<sc-trend v-model="s.rate" v-if="s.rate"></sc-trend>
+				</sc-statistic>
+			</div>					
+		</div>
+		
+
 	</el-card>
 </template>
 
+<style scoped>
+	.el-card {margin-bottom: 15px;}
+	.number-data {display: flex;}
+	.number-data .item {flex:1;border-right: 1px solid #f0f0f0;padding:0 20px;}
+	.number-data .item:last-child {border: 0;}
+	.number-data .item h2 {font-size: 12px;color: #787a7d;font-weight: normal;display: flex;align-items: center;}
+	.number-data .item h2 i {margin-left: 5px;color: #8cc5ff;cursor: pointer;}
+	.number-data .item p {font-size: 20px;color: #121315;margin-top: 10px;}
+
+	</style>
+
 <script>
-	import scEcharts from '@/components/scEcharts';
+	import scStatistic from '@/components/scStatistic';
+
+			
 
 	export default {
 		title: "统计",
 		icon: "el-icon-data-line",
 		description: "实时统计",
 		components: {
-			scEcharts
+			scStatistic
 		},
 		data() {
 			return {
 				loading: true,
-				option: {}
+				briefList: [
+					{
+						color:'#fdsfdsf',
+						icon:0,
+						label:'fdsafafa',
+						num:100,
+						rate:10,
+						status:'fdsafa'
+					},
+					{
+						color:'#fdsfdsf',
+						icon:0,
+						label:'fdsafafa',
+						num:100,
+						rate:10,
+						status:'fdsafa'
+					},
+					{
+						color:'#fdsfdsf',
+						icon:0,
+						label:'fdsafafa',
+						num:100,
+						rate:10,
+						status:'fdsafa'
+					},
+					{
+						color:'#fdsfdsf',
+						icon:0,
+						label:'fdsafafa',
+						num:100,
+						rate:10,
+						status:'fdsafa'
+					},
+					{
+						color:'#fdsfdsf',
+						icon:0,
+						label:'fdsafafa',
+						num:100,
+						rate:10,
+						status:'fdsafa'
+					},
+				]
 			}
 		},
 		created() {
-			var _this = this;
-			setTimeout(function() {
-				_this.loading = false
-			}, 500);
-
-			var option = {
-				tooltip: {
-					trigger: 'axis'
-				},
-				xAxis: {
-					boundaryGap: false,
-					type: 'category',
-					data: (function (){
-						var now = new Date();
-						var res = [];
-						var len = 30;
-						while (len--) {
-							res.unshift(now.toLocaleTimeString().replace(/^\D*/,''));
-							now = new Date(now - 2000);
-						}
-						return res;
-					})()
-				},
-				yAxis: [{
-					type: 'value',
-					name: '价格',
-					"splitLine": {
-						"show": false
-					}
-				}],
-				series: [
-					{
-						name: '收入',
-						type: 'line',
-						symbol: 'none',
-						lineStyle: {
-							width: 1,
-							color: '#409EFF'
-						},
-						areaStyle: {
-							opacity: 0.1,
-							color: '#79bbff'
-						},
-						data: (function (){
-							var res = [];
-							var len = 30;
-							while (len--) {
-								res.push(Math.round(Math.random() * 0));
-							}
-							return res;
-						})()
-					},
-				],
-			};
-			this.option = option;
-
+			
+			this.loading = false;
 		},
-		mounted(){
-			 var _this = this;
-			setInterval(function (){
-				var o = _this.option;
-				o.series[0].data.shift()
-				o.series[0].data.push(Math.round(Math.random() * 100));
-				o.xAxis.data.shift();
-				o.xAxis.data.push((new Date()).toLocaleTimeString().replace(/^\D*/, ''));
-				//_this.$refs.c1.myChart.setOption(o)
-			},2100)
-
+		methods: {
+			reportClick(){
+				alert(1)
+			}
 		},
 	}
 </script>
diff --git a/src/views/system/table/index.vue b/src/views/system/table/index.vue
index cce04ee..c5d2893 100644
--- a/src/views/system/table/index.vue
+++ b/src/views/system/table/index.vue
@@ -1,11 +1,11 @@
 <template>
 	<el-container>
-		<el-aside width="180px" v-if="aside.length>0">
+		<el-aside :width="(aside.width || 160)+'px'" v-if="aside.items.length>0">
 			<el-header>
 				<el-input placeholder="输入关键字进行过滤" v-model="groupFilterText" clearable></el-input>
 			</el-header>
 			<el-main class="nopadding">
-				<el-tree ref="group" class="menu" node-key="id" :data="aside" :current-node-key="''" :highlight-current="true" :expand-on-click-node="false" :filter-node-method="groupFilterNode" @node-click="groupClick"></el-tree>
+				<el-tree ref="group" class="menu" :node-key="aside.key || 'id'" :data="aside.items" :highlight-current="true" :expand-on-click-node="false" :filter-node-method="groupFilterNode" @node-click="groupClick"></el-tree>
 			</el-main>
 		</el-aside>
 		<el-container>
@@ -20,7 +20,7 @@
 				<el-button v-if="operation.batchdeletion" type="danger" @click="batchdeletion" plain icon="el-icon-delete"></el-button>
 			</div>
 			<div class="right-panel" v-if="filter.length>0">
-				<el-button v-for="(s,index) in statList" :key="index" @click="openStat(s)" v-bind="s">{{ s.title }}</el-button>
+				<el-button v-for="(s,index) in statList" :key="index" @click="openStat(s)" v-bind="s">{{ s.label }}</el-button>
 				<scFilterBar v-if="filter.length>0" v-model="search" :filterName="$route.meta.tablename" :options="filter" @filterChange="filterChange">
 				</scFilterBar>
 			</div>
@@ -36,10 +36,10 @@
 				<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.name || '编辑' }}</el-button>
+							<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.name || '删除' }}</el-button>
+									<el-button :type="operation.delete.type || 'info'" :size="operation.delete.size || 'small'">{{ operation.delete.label || '删除' }}</el-button>
 								</template>
 							</el-popconfirm>
 						</el-button-group>
@@ -81,7 +81,9 @@
 				isselection:true,
 				selection: [],
 				column: [],
-				aside: [],
+				aside: {
+					items:[]
+				},
 				filter: [],
 				api: '',
 				operation:{},
@@ -95,6 +97,7 @@
 				],
 				statList:[],
 				chartoption: {},
+				groupFilterText:''
 			}
 		},
 		mounted() {
@@ -123,13 +126,27 @@
 				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)
-				// if (data[this.operation.search.key] !== undefined) {
-				// 	this.search[this.operation.search.key] = data[this.operation.search.key];
-				// }
 				this.$refs.table.reload(info)
 			},
 			//标签切换
diff --git a/src/views/system/tablegen/column.vue b/src/views/system/tablegen/column.vue
new file mode 100644
index 0000000..4c04e05
--- /dev/null
+++ b/src/views/system/tablegen/column.vue
@@ -0,0 +1,355 @@
+<template>
+	<el-drawer :title="titleMap[mode]" v-model="visible" :size="1200" :close-on-press-escape="false" :close-on-click-modal="false" destroy-on-close @closed="$emit('closed')">
+		<el-container v-loading="loading">
+			<el-main style="padding:0 20px 20px 20px">
+				<el-form ref="dialogForm" :model="form" label-width="100px" label-position="top">
+					<el-row :gutter="10">
+						<el-col :span="20">
+							<el-form-item label="表格标识" prop="name">
+								<el-input v-model="form.name"  placeholder="用于识别"></el-input>
+							</el-form-item>
+						</el-col>
+					</el-row>
+
+					<el-row :gutter="10">
+						<el-col :span="8">
+							<el-form-item label="表格名称" prop="title">
+								<el-input v-model="form.title"  placeholder="请输入中文描述标题"></el-input>
+							</el-form-item>
+						</el-col>
+						<el-col :span="16">
+							<el-form-item label="数据请求 API" prop="api">
+								<el-input v-model="form.api"  placeholder="数据请求API"></el-input>
+							</el-form-item>
+						</el-col>
+						<el-col :span="16">
+							<el-form-item label="主键" prop="key">
+								<el-input v-model="form.key"  placeholder="主键键位, 默认 id"></el-input>
+							</el-form-item>
+						</el-col>
+
+						<el-col :span="24">
+							<el-form-item label="备注" prop="key">
+								<el-input v-model="form.remark" placeholder="备注"></el-input>
+							</el-form-item>
+						</el-col>
+					</el-row>
+
+					<el-row :gutter="10">
+						<el-col :span="8">
+							<el-form-item label="操作部分" prop="key">
+								<el-checkbox-group v-model="form.operationtype">
+								    <el-checkbox-button label="plus">添加</el-checkbox-button>
+								    <el-checkbox-button label="delete">删除</el-checkbox-button>
+								    <el-checkbox-button label="edit">编辑</el-checkbox-button>
+								    <el-checkbox-button label="batchdeletion">批量删除</el-checkbox-button>
+								</el-checkbox-group>
+							</el-form-item>
+						</el-col>
+					</el-row>
+
+					<el-row :gutter="10" v-show="form.operationtype.includes('batchdeletion')">
+						<el-col :span="8">
+							<el-form-item label="批量删除按钮" prop="key">
+								<el-input v-model="form.operation.batchdeletion.label" placeholder="名称"></el-input>
+							</el-form-item>
+						</el-col>
+						<el-col :span="16">
+							<el-form-item label="批量删除请求" prop="key">
+								<el-input v-model="form.operation.batchdeletion.url" placeholder="请求 URL"></el-input>
+							</el-form-item>
+						</el-col>
+					</el-row>
+					<el-row :gutter="10"  v-show="form.operationtype.includes('edit')">
+						<el-col :span="8">
+							<el-form-item label="编辑按钮" prop="key">
+								<el-input v-model="form.operation.edit.label" placeholder="名称"></el-input>
+							</el-form-item>
+						</el-col>
+						<el-col :span="16">
+							<el-form-item label="编辑请求" prop="key">
+								<el-input v-model="form.operation.edit.url" placeholder="请求 URL"></el-input>
+							</el-form-item>
+						</el-col>
+					</el-row>
+					<el-row :gutter="10"  v-show="form.operationtype.includes('delete')">
+						<el-col :span="8">
+							<el-form-item label="下架按钮" prop="key">
+								<el-input v-model="form.operation.delete.label" placeholder="名称"></el-input>
+							</el-form-item>
+						</el-col>
+						<el-col :span="16">
+							<el-form-item label="下架请求" prop="key">
+								<el-input v-model="form.operation.delete.url" placeholder="请求 URL"></el-input>
+							</el-form-item>
+						</el-col>
+					</el-row>
+					<el-row :gutter="10"  v-show="form.operationtype.includes('plus')">
+						<el-col :span="8">
+							<el-form-item label="添加按钮" prop="key">
+								<el-input v-model="form.operation.plus.label" placeholder="名称"></el-input>
+							</el-form-item>
+						</el-col>
+						<el-col :span="16">
+							<el-form-item label="添加请求" prop="key">
+								<el-input v-model="form.operation.plus.url" placeholder="请求 URL"></el-input>
+							</el-form-item>
+						</el-col>
+					</el-row>
+
+
+					<sc-title title="统计标签"></sc-title>
+					<sc-form-table v-model="form.stat" :addTemplate="addTemplate" drag-sort placeholder="暂无数据">
+						<el-table-column prop="label" label="名称">
+							<template #default="scope">
+								<el-input v-model="scope.row.label" placeholder="名称"></el-input>
+							</template>
+						</el-table-column>
+						<el-table-column prop="value" label="值">
+							<template #default="scope">
+								<el-input v-model="scope.row.value" :disabled="scope.row.component=='title'" placeholder="选中值"></el-input>
+							</template>
+						</el-table-column>
+					</sc-form-table>
+
+					<sc-title title="页头tabs"></sc-title>
+					<sc-form-table v-model="form.tabs" :addTemplate="addTemplate" drag-sort placeholder="暂无数据">
+						<el-table-column prop="label" label="名称">
+							<template #default="scope">
+								<el-input v-model="scope.row.label" placeholder="名称"></el-input>
+							</template>
+						</el-table-column>
+						<el-table-column prop="value" label="值">
+							<template #default="scope">
+								<el-input v-model="scope.row.value" :disabled="scope.row.component=='title'" placeholder="选中值"></el-input>
+							</template>
+						</el-table-column>
+					</sc-form-table>
+
+					
+					<sc-title title="Column表格"></sc-title>
+
+					<sc-form-table v-model="form.column" :addTemplate="addcolumnTemplate" drag-sort placeholder="暂无数据">
+						<el-table-column prop="component" label="表单组件" width="120">
+							<template #default="scope">
+								<el-select v-model="scope.row.component" placeholder="选择">
+									<el-option value="input" key="input" label="Input"> Input </el-option>
+									<el-option value="title" key="title" label="标题占位"> 标题占位 </el-option>
+									<el-option value="checkbox" key="checkbox" label="复选框"> 复选框 </el-option>
+									<el-option value="radio" key="radio" label="单选"> 单选 </el-option>
+									<el-option value="select" key="select" label="下拉"> 下拉 </el-option>
+									<el-option value="checkboxGroup" key="checkboxGroup" label="复组组合"> 复组组合 </el-option>
+									<el-option value="upload" key="upload" label="文件上传"> 文件上传 </el-option>
+									<el-option value="updatemultiple" key="updatemultiple" label="多文件上传"> 多文件上传 </el-option>
+									<el-option value="switch" key="switch" label="开关"> 开关 </el-option>
+									<el-option value="cascader" key="cascader" label="级联选择器"> 级联选择器 </el-option>
+									<el-option value="date" key="date" label="日期选择"> 日期选择 </el-option>
+									<el-option value="number" key="number" label="数字"> 数字 </el-option>
+									<el-option value="color" key="color" label="颜色选择"> 颜色选择 </el-option>
+									<el-option value="rate" key="rate" label="评分"> 评分 </el-option>
+									<el-option value="slider" key="slider" label="滑块"> 滑块 </el-option>
+									<el-option value="tableselect" key="tableselect" label="表格选择"> 表格选择 </el-option>
+									<el-option value="editor" key="editor" label="编辑器"> 编辑器 </el-option>
+									<el-option value="text" key="text" label="文本"> 文本 </el-option>
+									<el-option value="avatar" key="avatar" label="头像"> 头像 </el-option>
+									<el-option value="formtable" key="formtable" label="表单表格"> 表单表格 </el-option>
+								</el-select>
+							</template>
+						</el-table-column>
+						<el-table-column prop="label" label="名称">
+							<template #default="scope">
+								<el-input v-model="scope.row.label" placeholder="名称"></el-input>
+							</template>
+						</el-table-column>
+						<el-table-column prop="name" label="字段">
+							<template #default="scope">
+								<el-input v-model="scope.row.name" :disabled="scope.row.component=='title'" placeholder="字段名"></el-input>
+							</template>
+						</el-table-column>
+						<el-table-column prop="width" label="宽" width="80">
+							<template #default="scope">
+								<el-input v-model="scope.row.width" :disabled="scope.row.component=='title'" placeholder="宽"></el-input>
+							</template>
+						</el-table-column>
+						<el-table-column prop="columntype" label="表格类型" width="120">
+							<template #default="scope">
+								<el-select v-model="scope.row.columntype" placeholder="选择">
+									<el-option value="avatar" key="avatar" label="用户"> 用户 </el-option>
+									<el-option value="badge" key="badge" label="徽章"> 徽章 </el-option>
+									<el-option value="imagegroup" key="imagegroup" label="图组"> 图组 </el-option>
+									<el-option value="image" key="image" label="单图"> 单图 </el-option>
+									<el-option value="status" key="status" label="状态"> 状态 </el-option>
+									<el-option value="input" key="input" label="Input"> Input </el-option>
+									<el-option value="select" key="select" label="下拉选择"> 下拉选择 </el-option>
+								</el-select>
+							</template>
+						</el-table-column>
+						<el-table-column prop="hide" label="隐藏" width="70" align="center">
+							<template #default="scope">
+								<el-switch v-model="scope.row.hide" active-value="1" inactive-value="0"></el-switch>
+							</template>
+						</el-table-column>
+						<el-table-column prop="span" label="表单跨度" width="110">
+							<template #default="scope">
+								<el-input v-model="scope.row.span" placeholder="表单跨度"></el-input>
+							</template>
+						</el-table-column>
+						<el-table-column prop="operator" label="筛选" width="110">
+							<template #default="scope">
+								<el-select v-model="scope.row.filter" placeholder="选择">
+									<el-option value="<" key="<" label="小于"> 小于 </el-option>
+									<el-option value="<=" key="<=" label="小于"> 小于等于 </el-option>
+									<el-option value=">" key=">" label="大于"> 大于 </el-option>
+									<el-option value=">=" key=">=" label="大于等于"> 大于等于 </el-option>
+									<el-option value="!=" key="!=" label="不等于"> 不等于 </el-option>
+									<el-option value="=" key="=" label="等于"> 等于 </el-option>
+									<el-option value="notin" key="notin" label="Input"> 不包含 </el-option>
+									<el-option value="in" key="in" label="包含"> 包含 </el-option>
+									<el-option value="like" key="like" label="模糊查询"> 模糊查询 </el-option>
+									<el-option value="between" key="between" label="区间查询"> 区间查询 </el-option>
+								</el-select>
+							</template>
+						</el-table-column>
+						<el-table-column prop="options" label="选项" width="80" align="center">
+							<template #default="scope">
+								<el-button text size="small" :type="Object.keys(scope.row.options).length==0?'':'primary'" @click="setoptions(scope.row)">
+									选项
+									<el-badge :hidden="Object.keys(scope.row.options).length==0" :value="Object.keys(scope.row.options).length" class="badge" type="danger"></el-badge>
+								</el-button>
+							</template>
+						</el-table-column>
+					</sc-form-table>
+				</el-form>
+			</el-main>
+			<el-footer>
+				<el-button type="primary" :loading="isSaveing" @click="submit">保存</el-button>
+				<el-button @click="visible=false">取消</el-button>
+			</el-footer>
+		</el-container>
+		<images ref="images" @success="function(a,o){o.close()}"></images>
+		<videos ref="videos" @success="function(a,o){o.close()}"></videos>
+	</el-drawer>
+</template>
+
+
+<script>
+
+	export default {
+		emits: ['success', 'closed'],
+		components: {
+		},
+		data() {
+			return {
+				token: null,
+				loading: false,
+				mode: "add",
+				titleMap: {
+					add: '新增',
+					edit: '编辑'
+				},
+				form: {
+					operationtype:[],
+					stat:[],
+					tabs:[],
+					column:[],
+					title:'',
+					name:'',
+					api:'',
+					key:'',
+					operation:{
+						plus:{
+							label:'',
+							url:'',
+						},
+						delete:{
+							label:'',
+							url:'',
+						},
+						edit:{
+							label:'',
+							url:'',
+						},
+						batchdeletion:{
+							label:'',
+							url:'',
+						}
+					}
+				},
+				addTemplate: {
+					label:'',
+					value:'',
+				},
+				addcolumnTemplate: {
+					component:'',
+					columntype:'',
+					label:'',
+					name:'',
+					width:'',
+					hide:'',
+					span:'',
+					filter:'',
+					options:{},
+				},
+				visible: false,
+			}
+		},
+		mounted() {
+
+		},
+		methods: {
+			//显示
+			open(mode='add'){
+				this.mode = mode;
+				this.visible = true;
+				return this;
+			},
+			close(){
+				this.visible = false;
+			},
+			//表单提交方法
+			submit(){
+				this.$refs.dialogForm.validate(async (valid) => {
+					if (valid) {
+						this.isSaveing = true;
+						var res = await this.$http.post('system/table/submit',{info:this.form, token:this.token});
+						this.isSaveing = false;
+						if(res.code == 200){
+							this.visible = false;
+							this.$message.success("操作成功")
+							this.$emit('success', this.form, this)
+						}else{
+							this.$alert(res.message, "提示", {type: 'error'})
+						}
+					}
+				})
+			},
+			//表单注入数据
+			setData(data){
+
+				this.loading = true
+				const params = {
+					id: data.id,
+					uniqid: data.uniqid,
+				}
+				this.form.title = data.title;
+				this.form.uniqid = data.uniqid;
+				setTimeout(async ()=>{
+					var res = await this.$http.get('system/table/info',params)
+					this.loading = false
+					this.form = res.data.data;
+					this.token = res.data.token;
+				}, 400)
+
+			},
+			//设置过滤项
+			setoptions(o){
+				this.$nextTick(() => {
+					this.$refs.videos.open().setData(o)
+				})
+			},
+		}
+	}
+</script>
+
+<style>
+</style>
diff --git a/src/views/system/tablegen/index.vue b/src/views/system/tablegen/index.vue
new file mode 100644
index 0000000..535b949
--- /dev/null
+++ b/src/views/system/tablegen/index.vue
@@ -0,0 +1,182 @@
+<template>
+	<el-container>
+		<el-header>
+			<div class="left-panel">
+				<el-button type="primary" icon="el-icon-plus" @click="add"></el-button>
+			</div>
+			<div class="right-panel">
+				<div class="right-panel-search">
+					<el-input v-model="search.keyword" placeholder="名称,标识,备注" clearable></el-input>
+					<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
+				</div>
+			</div>
+		</el-header>
+		<el-main class="nopadding">
+			<scTable ref="table" :api="api" row-key="id" @selection-change="selectionChange" :hideSetting="true" remoteSort remoteFilter stripe>
+				<el-table-column type="selection" width="30"></el-table-column>
+				<el-table-column label="ID" prop="id" width="50"></el-table-column>
+				<el-table-column label="" prop="status" width="38">
+					<template #default="scope">
+						<sc-status-indicator v-if="scope.row.status==1" pulse type="success"></sc-status-indicator>
+						<sc-status-indicator v-if="scope.row.status==0" pulse type="info"></sc-status-indicator>
+					</template>
+				</el-table-column>
+				<el-table-column label="名称" prop="title"  minWidth="100">
+					<template #default="scope">
+						{{ scope.row.title }}
+					</template>
+				</el-table-column>
+				<el-table-column label="标识" prop="title"  minWidth="100">
+					<template #default="scope">
+						{{ scope.row.name }}
+					</template>
+				</el-table-column>
+				<el-table-column label="主键" prop="key" width="150"></el-table-column>
+				<el-table-column label="请求" prop="viewnum" width="90">
+					<template #default="scope">
+						<el-link :underline="false" size="small" @click="setImage(scope.row)">
+							<el-badge :value="scope.row.viewnum" type="info"></el-badge>
+						</el-link>
+					</template>
+				</el-table-column>
+				<el-table-column label="Column" prop="column" width="80">
+					<template #default="scope">
+						<el-link :underline="false" size="small" @click="setImage(scope.row)">
+							<el-badge :value="scope.row.column.length" type="danger"></el-badge>
+						</el-link>
+					</template>
+				</el-table-column>
+				<el-table-column label="tabs" prop="tabs" width="80">
+					<template #default="scope">
+						<el-link :underline="false" size="small" @click="setImage(scope.row)">
+							<el-badge :value="scope.row.tabs.length" type="info"></el-badge>
+						</el-link>
+					</template>
+				</el-table-column>
+				<el-table-column label="操作" prop="operationtype" width="160">
+					<template #default="scope">
+						<input class="el-input__inner" type="text" readonly :value="scope.row.operationtype">
+					</template>
+				</el-table-column>
+				<el-table-column label="备注" prop="remark" width="160">
+					<template #default="scope">
+						<input class="el-input__inner" type="text" readonly :value="scope.row.remark">
+					</template>
+				</el-table-column>
+				<el-table-column label="Api" prop="api" width="150"></el-table-column>
+				<el-table-column label="添加时间" prop="timestamp" width="150"></el-table-column>
+
+				<el-table-column label="操作" fixed="right" align="left" width="120">
+					<template #default="scope">
+						<el-button-group>
+							<el-button type="primary" size="small" @click="table_edit(scope.row, scope.$index)">编辑</el-button>
+							<el-popconfirm :title="'确定删除吗？'" @confirm="table_del(scope.row, scope.$index)">
+								<template #reference>
+									<el-button :type="'info'" :size="'small'">{{ '删除' }}</el-button>
+								</template>
+							</el-popconfirm>
+						</el-button-group>
+					</template>
+				</el-table-column> 
+			</scTable>
+		</el-main>
+	</el-container>
+
+	<column-dialog v-if="dialog.column" ref="column" @success="handleSuccess" @closed="dialog.column=false"></column-dialog>
+</template>
+
+<script>
+	import columnDialog from './column'
+
+	export default {
+		name: 'tablegen',
+		components: {
+			columnDialog,
+		},
+		data() {
+			return {
+				dialog: {
+					column: false,
+				},
+				api: 'system/table/lists',
+				selection: [],
+				search: {
+					keyword: "",
+					status:'0',
+				}
+			}
+		},
+		mounted() {
+
+		},
+		methods: {
+			open(o){
+				window.open(o.apartmentposter) 
+			},
+			//标签切换
+			tabChange(status){
+				this.search.status = status;
+				this.$refs.table.reload(this.search)
+			},
+			//搜索
+			upsearch(){
+				this.$refs.table.reload(this.search)
+			},
+			//增加
+			add(){
+				this.dialog.column = true
+				this.$nextTick(() => {
+					this.$refs.column.open()
+				})
+			},
+			//编辑
+			table_edit(row){
+				this.dialog.column = true
+				this.$nextTick(() => {
+					this.$refs.column.open('edit').setData(row)
+				})
+			},
+			//删除
+			async table_del(row, index){
+				var res = await this.$http.post('system/table/delete', {id: row.id});
+				if(res.code == 200){
+					//这里选择刷新整个表格 OR 插入/编辑现有表格数据
+					this.$refs.table.tableData.splice(index, 1);
+					this.$message.success("删除成功")
+				}else{
+					this.$alert(res.message, "提示", {type: 'error'})
+				}
+			},
+			//批量删除
+			async batch_del(){
+				this.$confirm(`确定下架选中的 ${this.selection.length} 项吗？`, '提示', {
+					type: 'warning'
+				}).then(() => {
+					const loading = this.$loading();
+					this.selection.forEach(item => {
+						this.$refs.table.tableData.forEach((itemI, indexI) => {
+							if (item.id === itemI.id) {
+								this.$refs.table.tableData.splice(indexI, 1)
+							}
+						})
+					})
+					loading.close();
+					this.$message.success("操作成功")
+				}).catch(() => {
+
+				})
+			},
+			//表格选择后回调事件
+			selectionChange(selection){
+				this.selection = selection;
+			},
+			//本地更新数据
+			async handleSuccess(){
+				this.$refs.table.reload({})
+			}
+		}
+	}
+</script>
+
+<style>
+</style>
diff --git a/src/views/system/upgrade/index.vue b/src/views/system/upgrade/index.vue
new file mode 100644
index 0000000..9446487
--- /dev/null
+++ b/src/views/system/upgrade/index.vue
@@ -0,0 +1,818 @@
+<template>
+
+  <div class="crm-update">
+    <div class="title-wrap">
+      <i class="el-icon-setting"/>
+      <div>
+        <p class="title">系统更新</p>
+        <p class="description">你可以随时检查使用系统是否是最新版本，并进行一键升级</p>
+      </div>
+    </div>
+
+
+    <el-alert title="更新前，您需要备份您的数据，防止数据丢失。" type="warning" />
+
+
+    <!-- 登录状态 -->
+    <div v-if="isLogin" class="login-box">
+      <!-- 头像 -->
+      <div class="face">
+        <img v-if="userData.img" :src="userData.img" alt="">
+        <span v-else>{{ userData.name }}</span>
+      </div>
+
+      <!-- 信息 -->
+      <div class="info">
+        <span class="name">{{ userData.name }}</span>
+        <span class="title">{{ userData.title }}</span>
+        <p>{{ userData.companyName }}</p>
+        <p>
+          <i class="el-icon-mobile-phone"/>
+          {{ userData.mobile }}
+        </p>
+        <p>
+          <i class="wk wk-icon-email-outline"/>
+          {{ userData.email }}
+        </p>
+      </div>
+      <!-- 按钮 -->
+      <div>
+        <el-button type="primary" plain @click="logoutHandle">注销</el-button>
+      </div>
+    </div>
+
+    <!-- 未登录X-PHP账号的提示 -->
+    <div v-else class="login-box">
+      <!-- 头像 -->
+      <div class="face">登录</div>
+      <div class="info">
+        <!-- 提示 -->
+        <div class="login-box-title">
+          <span @click="dialogVisible = true">请点击登</span>
+          <p>更新前需要先登录X-PHP账号</p>
+        </div>
+      </div>
+      <!-- 按钮 -->
+      <el-button type="primary" plain @click="dialogVisible = true">登录</el-button>
+    </div>
+
+    <div v-loading="checkLoading" class="last-time">
+      <el-button :disabled="isClick" type="primary" plain @click="checkHandle">检查更新</el-button>
+    </div>
+
+    <!-- 检查更新后展示 -->
+    <div v-if="isCheckUpdate" class>
+      <!-- 已经是最新版本 -->
+      <div v-if="isNewest" class="version">
+        <p class="text">您当前是最新版本</p>
+        当前版本：{{ version }}
+      </div>
+
+      <!-- 有新版本 -->
+      <div
+        v-loading="updateLoading"
+        v-else
+        :element-loading-text="progressTooltip"
+        class="version"
+        element-loading-background="#fff"
+      >
+        <p class="text">有新的版本可升级</p>
+        当前版本：{{ serverVersion }}，您可以升级到
+        <span>{{ version }}</span>
+
+        <div class="update-wrap">
+          <el-badge :value="1" class="update-badge">
+            <el-button :type="isCanUpdate ? 'primary' : 'info'" @click="updateHandle">现在更新</el-button>
+          </el-badge>
+        </div>
+
+      </div>
+    </div>
+    <!-- 备份 -->
+    <div class="data-back">
+      <p class="text">数据备份</p>
+      <div v-loading="backLoading" class="box" element-loading-text="努力备份中">
+        <el-button type="primary" plain @click="queryDatabaseHandle">查询数据库</el-button>
+        <el-button type="primary" plain @click="isCustom = 0">自定义数据库</el-button>
+        <div v-if="isCustom === 1" class="database-wrap">
+          <el-select v-model="database" placeholder="请选择">
+            <el-option v-for="(item, index) in databaseList" :key="index" :value="item"/>
+          </el-select>
+          <p class="way">
+            选择备份方式：
+            <el-radio v-model="backupType" :label="1">本地备份</el-radio>
+          </p>
+          <el-button type="primary" @click="dataBackHandle">开始备份</el-button>
+        </div>
+
+        <!-- 自定义数据库 -->
+        <el-form
+          v-if="isCustom === 0"
+          ref="databaseForm"
+          :model="customDatabase"
+          :rules="databaseRules"
+          status-icon
+          class="custom1"
+        >
+          <el-form-item prop="host">
+            <el-input v-model="customDatabase.host" autocomplete="off" placeholder="请输入数据库地址"/>
+          </el-form-item>
+          <el-form-item prop="port">
+            <el-input
+              v-model.number="customDatabase.port"
+              autocomplete="off"
+              placeholder="请输入数据库端口号"
+            />
+          </el-form-item>
+          <el-form-item prop="databaseName">
+            <el-input
+              v-model="customDatabase.databaseName"
+              autocomplete="off"
+              placeholder="请输入数据库名称"
+            />
+          </el-form-item>
+          <el-form-item prop="DBUsername">
+            <el-input
+              v-model="customDatabase.DBUsername"
+              autocomplete="off"
+              placeholder="请输入数据库用户名"
+            />
+          </el-form-item>
+          <el-form-item prop="DBPassword">
+            <el-input
+              v-model="customDatabase.DBPassword"
+              type="password"
+              autocomplete="off"
+              placeholder="请输入数据库密码"
+            />
+          </el-form-item>
+          <el-button type="primary" @click="submitForm">开始备份</el-button>
+        </el-form>
+
+        <div v-if="isBackSuccess" class="back-success">备份成功！文件路径：{{ sql }}</div>
+        <div class="explain">
+          <p>备份说明:</p>
+          <p>1、本地备份将只备份SQL，并被备份到同级目录下</p>
+          <p>2、云端备份数据将备份到云端，在个人中心可以查看备份记录，下载备份数据</p>
+        </div>
+      </div>
+    </div>
+
+    <!-- 登录X-PHP弹窗 -->
+    <el-dialog v-model="dialogVisible" title="登录X-PHP账号" width="500px">
+      <!-- <div slot="title" class="el-dialog__title">
+        登录X-PHP账号
+        <p class="description">您可以登录X-PHP账号来进行一键升级</p>
+      </div> -->
+      <!-- 登录表单 -->
+      <el-form
+        ref="loginRef"
+        :model="loginForm"
+        :rules="loginRules"
+        label-width="80px"
+        label-position="top"
+        class="login-form"
+      >
+        <div class="form-item">
+          <el-form-item prop="username">
+            <i class="wk wk-mobile"/>账号
+            <el-input v-model="loginForm.username" placeholder="请输入您的X-PHP账号"/>
+          </el-form-item>
+        </div>
+        <div class="form-item password">
+          <el-form-item prop="password">
+            <i class="wk wk-lock"/>密码
+            <el-input v-model="loginForm.password" type="password" placeholder="请输入您的X-PHP账号的密码"/>
+          </el-form-item>
+        </div>
+        <el-button type="primary" @click="loginHandle('loginRef')">确认登录</el-button>
+      </el-form>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+// import Lockr from 'lockr'
+// import {
+//   crmCheckVersionAPI,
+//   crmQueryDatabaseAPI,
+//   crmBackupDatabaseAPI,
+//   crmUpdateAPI,
+//   updateProgressAPI,
+//   loginWKAPI
+// } from '@/api/admin/update'
+
+
+export default {
+  /** 系统升级 */
+  name: 'Update',
+  components: {
+  },
+  data() {
+    var checkPort = (rule, value, callback) => {
+      if (!value) {
+        return callback(new Error('请输入数据库端口号'))
+      }
+      setTimeout(() => {
+        if (!Number.isInteger(value)) {
+          callback(new Error('请输入数字值'))
+        } else {
+          if (value > 65535 || value <= 0) {
+            callback(new Error('请输入0~65535之间的端口号'))
+          } else {
+            callback()
+          }
+        }
+      }, 1000)
+    }
+    return {
+      isClick: false,
+      isCanUpdate: false,
+      isLogin: false, // 是否登录X-PHP账号
+      dialogVisible: true, // 登录弹窗
+      dialogVisibleH: false, // 历史备份弹窗
+      loginForm: {
+        username: '',
+        password: ''
+      },
+      loginRules: {
+        username: [
+          { required: true, message: '请输入X-PHP账号', trigger: 'blur' }
+        ],
+        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
+      },
+      userData: {},
+      isCheckUpdate: false, // 是否检查更新过
+      isNewest: false, // 是否是最新版本
+      checkLoading: false, // 检查更新loading
+      version: '', // 最新版本
+      serverVersion: '', // 服务器版本
+      isCustom: -1, // 0: 自定义数据库 1:选择数据库
+      backupType: 1, // 备份方式 1:本地 2:云端
+      databaseList: [], // 数据库列表
+      database: '', // 选中的数据库
+      databaseRules: {
+        host: [
+          { required: true, message: '请输入数据库地址', trigger: 'blur' }
+        ],
+        port: [{ validator: checkPort, trigger: 'blur' }],
+        databaseName: [
+          { required: true, message: '请输入数据库名称', trigger: 'blur' }
+        ],
+        DBUsername: [
+          { required: true, message: '请输入数据库账号', trigger: 'blur' }
+        ],
+        DBPassword: [
+          { required: true, message: '请输入数据库密码', trigger: 'blur' }
+        ]
+      },
+      customDatabase: {
+        // 自定义数据库
+        host: '', // 地址
+        port: '', // 端口号
+        databaseName: '', // 数据库名称
+        DBUsername: '', // 数据库账号
+        DBPassword: '' // 数据库密码
+      },
+      backLoading: false, // 数据库备份loading
+      isBackSuccess: false,
+      sql: '', // 数据库备份文件保存路径
+      backType: 1, // 数据备份方式 1:本地 2:云端
+      updateLoading: false,
+      progressTooltip: '',
+      progress: 0 // 进度
+    }
+  },
+
+  created() {
+    // const _this = this
+    // async function decorator() {
+    //   var { data } = await crmCheckVersionAPI()
+    //   _this.checkIsNewest(data.version, data.serverVersion)
+
+    //   _this.checkLoading = false
+
+    //   _this.version = data.version
+    //   _this.serverVersion = data.serverVersion
+
+    //   _this.isCheckUpdate = true
+    // }
+    // decorator()
+  },
+
+  methods: {
+    loginHandle(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          // var param = {
+          //   username: this.loginForm.username,
+          //   password: this.loginForm.password
+          // }
+          // loginWKAPI(param).then(res => {
+          //   var { data } = res
+          //   if (res.code === 0) {
+          //     this.userData = data
+          //     this.dialogVisible = false
+          //     this.isLogin = true
+          //     Object.assign(this.userData, this.loginForm)
+          //   }
+          // }).catch(() => {
+          // })
+        } else {
+          return false
+        }
+      })
+    },
+
+    logoutHandle() {
+      this.isLogin = false
+      this.loginForm.username = ''
+      this.loginForm.password = ''
+    },
+
+    async checkHandle() {
+      // this.checkLoading = true
+      // var { data } = await crmCheckVersionAPI()
+
+      // this.isNewest = this.checkIsNewest(data.version, data.serverVersion)
+      // this.checkLoading = false
+
+      // this.version = data.version
+      // this.serverVersion = data.serverVersion
+
+      // this.isCheckUpdate = true
+      // this.isClick = true
+    },
+
+    checkIsNewest(a, b) {
+      // var a = toNum(a)
+      // var b = toNum(b)
+
+      if (a > b) {
+        return false
+      } else {
+        return true
+      }
+
+      // function toNum(a) {
+      //   var a = a.toString()
+      //   var c = a.split('.')
+      //   var num_place = ['', '0', '00', '000', '0000']
+      //   var r = num_place.reverse()
+      //   for (var i = 0; i < c.length; i++) {
+      //     var len = c[i].length
+      //     c[i] = r[len] + c[i]
+      //   }
+      //   var res = c.join('')
+      //   return res
+      // }
+    },
+
+    async queryDatabaseHandle() {
+      this.isCustom = 1
+      // var res = await crmQueryDatabaseAPI()
+
+      var res = {
+        data:[
+          []
+        ],
+        code:0
+      };
+      this.databaseList = res.data
+      this.isShowDatabase = res.code === 0
+    },
+
+    submitForm() {
+      this.$refs.databaseForm.validate((valid) => {
+        if (valid) {
+          this.dataBackHandle()
+        } else {
+          return false
+        }
+      })
+    },
+
+    async dataBackHandle() {
+      if (!this.isLogin) {
+        this.$message({
+          showClose: true,
+          message: '请登陆X-PHP账号',
+          type: 'warning'
+        })
+        return
+      }
+
+      if (this.isCustom && !this.database) {
+        this.$message({
+          showClose: true,
+          message: '请选择要备份的数据库',
+          type: 'warning'
+        })
+        return
+      }
+
+
+      this.backLoading = true
+      // var data = this.isCustom
+      //   ? {
+      //     backupType: this.backupType,
+      //     databaseName: this.database,
+      //     username: this.loginForm.username,
+      //     password: this.loginForm.password,
+      //     isCustom: this.isCustom
+      //   }
+      //   : Object.assign(this.customDatabase, this.loginForm)
+      // var res = await crmBackupDatabaseAPI(data)
+
+        var res = {
+          code:0
+
+        }
+
+      this.backLoading = false
+      if (res.code === 0) {
+        this.isBackSuccess = true
+        this.sql = res.data
+        this.isCanUpdate = true
+      }
+    },
+
+    async updateHandle() {
+      if (!this.isLogin) {
+        this.$message({
+          message: '未进行登陆',
+          type: 'warning'
+        })
+        return
+      }
+      if (!this.isBackSuccess) {
+        this.$message({
+          message: '未进行数据备份',
+          type: 'warning'
+        })
+        return
+      }
+
+      this.updateLoading = true
+      // var data = this.isCustom
+      //   ? {
+      //     backupType: this.backupType,
+      //     databaseName: this.database,
+      //     username: this.loginForm.username,
+      //     password: this.loginForm.password,
+      //     isCustom: this.isCustom
+      //   }
+      //   : Object.assign(this.customDatabase, this.loginForm)
+      // var res = await crmUpdateAPI(data)
+
+        var res = {code:1}
+
+      if (res.code === 0) {
+        this.progressTooltip = '更新准备中'
+        var _this = this
+        var timer = setInterval(function() {
+          fn()
+          async function fn() {
+            // var res = await updateProgressAPI()
+
+            var res = {code:0, data:5}
+
+            switch (res.data) {
+              case 5:
+                _this.progressTooltip = '获取更新信息中'
+                break
+              case 15:
+                _this.progressTooltip = '备份数据库中'
+                break
+              case 25:
+                _this.progressTooltip = '备份文件中'
+                break
+              case 50:
+                _this.progressTooltip = '停止受影响的服务中'
+                break
+              case 70:
+                _this.progressTooltip = '执行升级中'
+                break
+              case 100:
+                _this.progressTooltip = '升级已完成'
+                setTimeout(function() {
+                  _this.updateLoading = false
+                  _this.isNewest = true
+                }, 500)
+                clearInterval(timer)
+                break
+              default:
+                _this.progressTooltip = '升级已完成'
+                setTimeout(function() {
+                  _this.updateLoading = false
+                  _this.isNewest = true
+                }, 500)
+                clearInterval(timer)
+                break
+            }
+          }
+        }, 3000)
+      }
+    },
+
+    // 更改每页展示数量
+    handleSizeChange(val) {
+      // Lockr.set('crmPageSizes', val)
+      this.pageSize = val
+    },
+    // 更改当前页数
+    handleCurrentChange(val) {
+      this.currentPage = val
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+/*@import "../styles/table.scss";*/
+$linkColor: #3b6ff1;
+
+// 公共
+.text {
+  font-size: 18px;
+  font-weight: bold;
+  height: 38px;
+  line-height: 38px;
+  color: #000;
+}
+.link {
+  color: $linkColor;
+  cursor: pointer;
+}
+
+.crm-update {
+  width: 100%;
+  min-width: 1200px;
+  height: 100%;
+  padding: 15px 20px 20px;
+  background: #fff;
+  overflow: auto;
+}
+
+// 标题
+.title-wrap {
+  display: flex;
+  padding: 0 15px;
+
+  .el-icon-setting {
+    width: 30px;
+    height: 30px;
+    margin-right: 12px;
+    border-radius: 6px;
+    line-height: 30px;
+    text-align: center;
+    background: #2362fb;
+    color: #fff;
+    font-size: 18px;
+  }
+  .title {
+    font-size: 16px;
+    font-weight: bold;
+  }
+  .description {
+    height: 22px;
+    line-height: 22px;
+    color: #a2a2a2;
+    font-size: 13px;
+  }
+}
+
+.login-wrap {
+  display: flex;
+  height: 40px;
+  align-items: center;
+  .face {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    overflow: hidden;
+    img {
+      width: 100%;
+    }
+  }
+  .name {
+    margin: 0 8px;
+  }
+  .phone {
+    margin-right: 8px;
+  }
+}
+
+// 未登录，警告框
+.warning-box {
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+
+// 登录展示
+.login-box {
+  width: 600px;
+  background: #f8f8f8;
+  padding: 22px;
+  display: flex;
+  border-radius: 6px;
+  justify-content: space-between;
+  .face {
+    width: 40px;
+    height: 40px;
+    margin-right: 14px;
+    border-radius: 50%;
+    overflow: hidden;
+    line-height: 40px;
+    background: #2362fb;
+    font-size: 12px;
+    color: #fff;
+    text-align: center;
+    flex-grow: 0;
+    img {
+      width: 100%;
+    }
+  }
+  .info {
+    flex-grow: 1;
+    color: #a2a2a2;
+    font-size: 12px;
+    line-height: 20px;
+  }
+  .name {
+    height: 22px;
+    line-height: 22px;
+    font-weight: bold;
+    font-size: 16px;
+    color: #000;
+    margin-right: 10px;
+  }
+
+  .login-box-title {
+    height: 22px;
+    line-height: 22px;
+    font-weight: bold;
+    font-size: 16px;
+    color: #333;
+    cursor: pointer;
+    p {
+      height: 28px;
+      font-size: 14px;
+      color: #a2a2a2;
+      line-height: 28px;
+      font-weight: normal;
+    }
+  }
+  .el-button {
+    height: 31px;
+  }
+}
+
+// 检查更新
+.last-time {
+  margin: 16px 0;
+  padding: 16px 0;
+}
+
+.version {
+  a {
+    color: $linkColor;
+  }
+  button {
+    display: block;
+  }
+}
+
+// 数据备份
+.data-back {
+  margin-top: 40px;
+  .link {
+    margin-left: 20px;
+  }
+}
+
+.box {
+  width: 820px;
+  // border: 1px solid #000;
+  border-radius: 6px;
+  padding: 14px;
+  margin-top: 20px;
+  background: #fafafa;
+  .database-wrap {
+    margin-top: 20px;
+  }
+  .way {
+    margin: 14px 0;
+    // margin-bottom: 14px;
+  }
+  .back-success {
+    color: #f56c6c;
+    height: 30px;
+    line-height: 30px;
+    font-size: 18px;
+    margin-top: 12px;
+  }
+  .explain {
+    margin-top: 14px;
+    line-height: 22px;
+    font-size: 12px;
+    color: #aaa;
+    img {
+      width: 16px;
+      vertical-align: middle;
+    }
+  }
+}
+
+// 数据库选择
+.custom {
+  width: 200px;
+  p {
+    width: 200px;
+    margin: 14px 0;
+  }
+}
+.custom1 {
+  width: 200px;
+  margin-top: 14px;
+  .el-button {
+  }
+}
+
+// dialog
+.el-dialog__wrapper {
+   .el-dialog {
+    padding-left: 25px;
+    padding-right: 25px;
+    border-radius: 6px;
+    .el-dialog__title {
+      .description {
+        font-size: 14px;
+        color: #a2a2a2;
+        font-weight: normal;
+      }
+    }
+  }
+}
+
+// 登陆表单
+.login-form {
+  .el-button {
+    width: 100%;
+    font-size: 16px;
+    height: 45px;
+  }
+}
+.form-item {
+  &.password {
+    margin-top: 28px;
+  }
+  p {
+    margin-bottom: 8px;
+  }
+  .el-input {
+     input {
+      height: 47px;
+      background: #f8f8f8;
+    }
+  }
+}
+
+.forget {
+  height: 40px;
+  line-height: 40px;
+  text-align: right;
+  color: #2362fb;
+}
+.register {
+  margin-top: 20px;
+  text-align: center;
+  color: #2362fb;
+  font-size: 16px;
+}
+
+.time {
+  display: flex;
+  .el-input {
+    width: 246px;
+    margin-left: 108px;
+  }
+}
+
+// 分页
+.p-contianer {
+  margin-top: 30px;
+  border-top: none;
+  .p-bar {
+    margin-right: 0;
+  }
+}
+
+// 标记
+.update-wrap{
+  // margin-top: 10px;
+  // margin-right: 40px;
+  margin-top: 20px;
+}
+</style>
diff --git a/src/x.js b/src/x.js
index 9cd35b3..d86855f 100644
--- a/src/x.js
+++ b/src/x.js
@@ -20,6 +20,7 @@ import XItem from './components/scForm/item'
 import scTitle from './components/scTitle'
 import scWaterMark from './components/scWaterMark'
 import scQrCode from './components/scQrCode'
+import { Flexbox,  FlexboxItem } from './components/Flexbox'
 
 import scStatusIndicator from './components/scMini/scStatusIndicator'
 import scTrend from './components/scMini/scTrend'
@@ -48,6 +49,8 @@ export default {
 
 		//注册全局组件
 		app.component('XItem', XItem);
+		app.component('flexbox', Flexbox);
+		app.component('flexbox-item', FlexboxItem);
 		app.component('scTable', scTable);
 		app.component('scTableColumn', scTableColumn);
 		app.component('scFilterBar', scFilterBar);