diff --git a/public/code/table-save.vue b/public/code/table-save.vue
new file mode 100644
index 00000000..d55f0235
--- /dev/null
+++ b/public/code/table-save.vue
@@ -0,0 +1,96 @@
+<!--
+ * @Descripttion: 此文件由SCUI生成，典型的VUE增删改列表页面组件
+ * @version: 1.0
+ * @Author: SCUI AutoCode 模板版本 1.0.0-beta.1
+ * @Date: <%= createDate %>
+ * @LastEditors: (最后更新作者)
+ * @LastEditTime: (最后更新时间)
+-->
+
+<template>
+	<el-form :model="form" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="80px" label-position="top">
+		<el-row :gutter="20">
+			<el-col :span="12">
+				<el-form-item label="上级角色" prop="parentId">
+					<el-cascader v-model="form.parentId" :options="groups" :props="groupsProps" :show-all-levels="false" clearable></el-cascader>
+				</el-form-item>
+			</el-col>
+			<el-col :span="12">
+				<el-form-item label="排序" prop="sort">
+					<el-input-number v-model="form.sort" controls-position="right" :min="1" style="width: 100%;"></el-input-number>
+				</el-form-item>
+			</el-col>
+		</el-row>
+		<el-row :gutter="20">
+			<el-col :span="24">
+				<el-form-item label="角色名称" prop="label">
+					<el-input v-model="form.label" clearable></el-input>
+				</el-form-item>
+			</el-col>
+			<el-col :span="24">
+				<el-form-item label="角色别名" prop="alias">
+					<el-input v-model="form.alias" clearable></el-input>
+				</el-form-item>
+			</el-col>
+		</el-row>
+	</el-form>
+</template>
+
+<script>
+	export default {
+		props: {
+			mode: { type: String, default: "add" }
+		},
+		data() {
+			return {
+				//表单数据
+				form: {
+					id:"",
+					label: "",
+					alias: "",
+					parentId: ""
+				},
+				//验证规则
+				rules: {
+					sort: [
+						{required: true, message: '请输入排序'}
+					],
+					label: [
+						{required: true, message: '请输入角色名称'}
+					],
+					alias: [
+						{required: true, message: '请输入角色别名'}
+					]
+				},
+			}
+		},
+		mounted(){
+
+		},
+		methods: {
+			//表单提交方法
+			submit(callback){
+				this.$refs.dialogForm.validate((valid) => {
+					if (valid) {
+						callback(this.form)
+					}else{
+						return false;
+					}
+				})
+			},
+			//表单注入数据
+			setData(data){
+				this.form.id = data.id
+				this.form.label = data.label
+				this.form.alias = data.alias
+				this.form.parentId = data.parentId
+			
+				//可以和上面一样单个注入，也可以像下面一样直接合并进去
+				//Object.assign(this.form, data)
+			}
+		}
+	}
+</script>
+
+<style>
+</style>
diff --git a/public/code/table.vue b/public/code/table.vue
index 68c5bdcf..5fba2c3c 100644
--- a/public/code/table.vue
+++ b/public/code/table.vue
@@ -1,29 +1,161 @@
 <!--
  * @Descripttion: 此文件由SCUI生成，典型的VUE增删改列表页面组件
  * @version: 1.0
- * @Author: SCUI AutoCode 模板版本 1.0
- * @Date: <%= date %>
+ * @Author: SCUI AutoCode 模板版本 1.0.0-beta.1
+ * @Date: <%= createDate %>
  * @LastEditors: (最后更新作者)
  * @LastEditTime: (最后更新时间)
 -->
 
 <template>
-	table
+	<el-container>
+		<el-header>
+			<div class="left-panel">
+				<el-button type="primary" icon="el-icon-plus" @click="add"></el-button>
+				<el-button type="danger" plain icon="el-icon-delete" :disabled="selection.length==0" @click="batch_del"></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" :apiObj="apiObj" row-key="<%= base.rowKey %>" @selection-change="selectionChange">
+
+				<el-table-column type="selection" width="50"></el-table-column>
+				<% column.forEach(function(item, index){ %>
+				<el-table-column label="<%= item.label %>" prop="<%= item.prop %>" width="<%= item.width %>"></el-table-column>
+				<% })%>
+				<el-table-column label="操作" fixed="right" align="right" width="140">
+					<template #default="scope">
+						<el-button type="text" size="small" @click="table_show(scope.row, scope.$index)">查看</el-button>
+						<el-button type="text" 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="text" size="small">删除</el-button>
+							</template>
+						</el-popconfirm>
+					</template>
+				</el-table-column>
+			</scTable>
+		</el-main>
+	</el-container>
+
+	<el-dialog :title="titleMap[saveMode]" v-model="saveDialogVisible" :width="500" destroy-on-close>
+		<save-dialog ref="saveDialog" :mode="saveMode"></save-dialog>
+		<template #footer>
+			<el-button @click="saveDialogVisible=false" >取 消</el-button>
+			<el-button v-if="saveMode!='show'" type="primary" @click="saveForm()" :loading="isSaveing">保 存</el-button>
+		</template>
+	</el-dialog>
 </template>
 
 <script>
+	import saveDialog from './save'
+
 	export default {
-		name: '<%= name %>',
+		name: '<%= base.name %>',
+		components: {
+			saveDialog
+		},
 		data() {
 			return {
-
+				apiObj: this.$API.role.list,
+				selection: [],
+				saveDialogVisible: false,
+				saveMode: 'add',
+				titleMap: {
+					add: "新增",
+					edit: "编辑",
+					show: "查看"
+				},
+				isSaveing: false,
 			}
 		},
 		mounted(){
 
 		},
 		methods: {
+			//添加
+			add(){
+				this.saveMode = 'add';
+				this.saveDialogVisible = true;
+			},
+			//编辑
+			table_edit(row){
+				this.saveMode = 'edit';
+				this.saveDialogVisible = true;
+				this.$nextTick(() => {
+					//这里应该再次根据ID查询详情接口
+					this.$refs.saveDialog.setData(row)
+				})
 
+			},
+			//查看
+			table_show(row){
+				this.saveMode = 'show';
+				this.saveDialogVisible = true;
+				this.$nextTick(() => {
+					//这里应该再次根据ID查询详情接口
+					this.$refs.saveDialog.setData(row)
+				})
+			},
+			//删除
+			async table_del(row, index){
+				var reqData = {id: row.id}
+				var res = await this.$API.user.del.post(reqData);
+				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(() => {
+
+				})
+			},
+			//提交
+			saveForm(){
+				this.$refs.saveDialog.submit(async (formData) => {
+					this.isSaveing = true;
+					var res = await this.$API.user.save.post(formData);
+					this.isSaveing = false;
+					if(res.code == 200){
+						//这里选择刷新整个表格 OR 插入/编辑现有表格数据
+						this.saveDialogVisible = false;
+						this.$message.success("操作成功")
+					}else{
+						this.$alert(res.message, "提示", {type: 'error'})
+					}
+				})
+			},
+			//表格选择后回调事件
+			selectionChange(selection){
+				this.selection = selection;
+			},
+			//搜索
+			upsearch(){
+			
+			}
 		}
 	}
 </script>
diff --git a/src/router/index.js b/src/router/index.js
index 56cd6e9c..db7d98d8 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -39,15 +39,6 @@ const routes = [{
 							icon: "el-icon-user",
 						},
 						component: () => import(/* webpackChunkName: "usercenter" */ '@/views/userCenter'),
-					},
-					{
-						name: "autocode",
-						path: "/autocode",
-						meta: {
-							title: "代码生成器",
-							icon: "el-icon-magic-stick",
-						},
-						component: () => import(/* webpackChunkName: "autocode" */ '@/views/autocode'),
 					}
 				]
 			}
diff --git a/src/views/autocode/index.vue b/src/views/autocode/index.vue
deleted file mode 100644
index be1eab1c..00000000
--- a/src/views/autocode/index.vue
+++ /dev/null
@@ -1,187 +0,0 @@
-<template>
-	<el-container>
-		<el-main>
-			<el-card shadow="never">
-				<el-tabs tab-position="top" type="card">
-				    <el-tab-pane label="列配置">
-
-						<el-button type="primary" icon="el-icon-plus" @click="table_add"></el-button>
-
-						<el-table :data="columnTableData" stripe @row-dblclick="table_edit">
-							<el-table-column label="排序" type="index" width="50">
-							</el-table-column>
-							<el-table-column label="显示名称" prop="title" width="150">
-								<template #default="scope">
-									<el-input v-if="scope.row.isSet" v-model="scope.row.title" placeholder="请输入内容"></el-input>
-									<span v-else>{{scope.row.title}}</span>
-								</template>
-							</el-table-column>
-							<el-table-column label="prop" prop="prop" width="150">
-								<template #default="scope">
-									<el-input v-if="scope.row.isSet" v-model="scope.row.prop" placeholder="请输入内容"></el-input>
-									<span v-else>{{scope.row.prop}}</span>
-								</template>
-							</el-table-column>
-							<el-table-column label="宽度" prop="width">
-								<template #default="scope">
-									<el-input v-if="scope.row.isSet" v-model="scope.row.width" placeholder="请输入内容"></el-input>
-									<span v-else>{{scope.row.width}}</span>
-								</template>
-							</el-table-column>
-
-							<el-table-column label="操作" fixed="right" width="100">
-								<template #default="scope">
-									<el-button @click="table_edit(scope.row, scope.$index)" type="text" size="small">{{scope.row.isSet?'保存':"修改"}}</el-button>
-									<el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row, scope.$index)">
-										<template #reference>
-											<el-button type="text" size="small">删除</el-button>
-										</template>
-									</el-popconfirm>
-								</template>
-							</el-table-column>
-						</el-table>
-					</el-tab-pane>
-				    <el-tab-pane label="按钮配置">
-
-						<el-form ref="button" :model="button" label-width="80px">
-							<el-form-item label="按钮显示">
-								<el-checkbox label="创建" v-model="button.add"></el-checkbox>
-								<el-checkbox label="编辑" v-model="button.edit"></el-checkbox>
-								<el-checkbox label="删除" v-model="button.del"></el-checkbox>
-							</el-form-item>
-						</el-form>
-
-					</el-tab-pane>
-				    <el-tab-pane label="弹框设置">弹框设置</el-tab-pane>
-				    <el-tab-pane label="API路径配置">
-						<el-form ref="api" :model="api" label-width="80px">
-							<el-form-item label="列表接口">
-								<el-input v-model="api.listUrl"></el-input>
-								<div class="el-form-item-msg">需提前至api/index.js中定义接口路径</div>
-							</el-form-item>
-							<el-form-item label="新增接口">
-								<el-input v-model="api.addUrl"></el-input>
-							</el-form-item>
-							<el-form-item label="编辑接口">
-								<el-input v-model="api.editUrl"></el-input>
-							</el-form-item>
-							<el-form-item label="删除接口">
-								<el-input v-model="api.delUrl"></el-input>
-							</el-form-item>
-						</el-form>
-					</el-tab-pane>
-				</el-tabs>
-			</el-card>
-			<pre style="margin-top: 50px;display: none;">{{ code }}</pre>
-		</el-main>
-		<el-footer>
-			<el-button type="primary" icon="el-icon-download" @click="download">下载VUE文件</el-button>
-			<el-button type="primary" plain icon="el-icon-top-right" @click="showcode">预览代码</el-button>
-		</el-footer>
-	</el-container>
-
-
-	<el-dialog title="代码预览" v-model="codeVisible" width="60%" append-to-body>
-		<el-alert title="需将VUE文件放置views文件夹,路由匹配组件的路径下,如文件名为index.vue可不需要写文件名" type="success" show-icon style="margin-bottom: 20px;"></el-alert>
-		<pre contenteditable class="code">{{ code }}</pre>
-		<template #footer>
-			<el-button type="primary" @click="codeVisible = false">确 定</el-button>
-		</template>
-	</el-dialog>
-
-</template>
-
-<script>
-	import template from '@/utils/template.js'
-	export default {
-		name: 'autocode',
-		data() {
-			return {
-				codeVisible: false,
-				code: '',
-				button: {
-					add: true,
-					edit: true,
-					del: true
-				},
-				api: {
-					listUrl: "user.list",
-					addUrl: "user.add",
-					editUrl: "user.edit",
-					delUrl: "user.del"
-				},
-				columnTableData: [
-					{
-						title: "状态",
-						prop: "state",
-						width: "100"
-					},
-					{
-						title: "姓名",
-						prop: "name",
-						width: "200"
-					},
-					{
-						title: "类型",
-						prop: "type",
-						width: "100"
-					}
-				]
-			}
-		},
-		mounted(){
-			this.getTpl()
-		},
-		methods: {
-
-			table_add(){
-				var newRow = {
-					title: "",
-					prop: "",
-					width: "100",
-					isSet: true
-				}
-				this.columnTableData.push(newRow)
-			},
-
-			table_edit(row){
-				if(row.isSet){
-					row.isSet = false
-				}else{
-					row.isSet = true
-				}
-			},
-
-			table_del(row, index){
-
-				this.columnTableData.splice(index, 1)
-			},
-
-			showcode(){
-				this.codeVisible=true;
-			},
-
-			//同步获取模板文件
-			async getTpl(){
-				var data = await this.$HTTP.get('code/table.vue')
-				this.code = template(data, {name:"SCUI Demo", date:new Date().toLocaleString()})
-			},
-			//下载按钮
-			download(){
-				this.createFile(this.code)
-			},
-			//创建文件并下载
-			createFile(row){
-				const element = document.createElement('a')
-				element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(row))
-				element.setAttribute('download', 'index.vue')
-				element.style.display = 'none'
-				element.click()
-			}
-		}
-	}
-</script>
-
-<style scoped>
-	.code {height:400px;overflow: auto;background: #333;color: #999;padding:20px;font-size: 14px;font-family: "consolas";line-height: 1.5;}
-</style>
diff --git a/src/views/test/autocode/index.vue b/src/views/test/autocode/index.vue
new file mode 100644
index 00000000..e4b8c63e
--- /dev/null
+++ b/src/views/test/autocode/index.vue
@@ -0,0 +1,58 @@
+<template>
+	<router-view></router-view>
+	<el-main>
+		<el-row :gutter="15">
+			<el-col :xl="6" :lg="6" :md="8" :sm="12" :xs="24" v-for="item in list" :key="item.title">
+				<el-card shadow="hover" :body-style="{ padding: '0px' }" @click="click(item.url)">
+					<div class="code-item">
+						<div class="img">
+							<i :class="item.icon"></i>
+						</div>
+						<div class="title">
+							<h2>{{item.title}}</h2>
+							<h4>{{item.des}}</h4>
+							<p><el-tag>{{item.ver}}</el-tag></p>
+						</div>
+					</div>
+				</el-card>
+			</el-col>
+		</el-row>
+	</el-main>
+</template>
+
+<script>
+	export default {
+		name: 'autocode',
+		data() {
+			return {
+				list: [
+					{
+						title: "List",
+						des: "配置型生成经典的增删改查列表",
+						icon: "sc-icon-file-list-fill",
+						ver: "1.0.0-beta.1",
+						url: "/test/autocode/list"
+					}
+				]
+			}
+		},
+		methods: {
+			click(url){
+				this.$router.push({
+					path: url
+				});
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.el-card {margin-bottom: 15px;}
+	.code-item {cursor: pointer;}
+	.code-item .img {width: 100%;height: 150px;background: #09f;display:flex;align-items: center;justify-content: center;}
+	.code-item .img i {font-size: 100px;color: #fff;background-image: -webkit-linear-gradient(top left, #fff, #09f 100px);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
+	.code-item .title {padding:15px;}
+	.code-item .title h2 {font-size: 16px;}
+	.code-item .title h4 {font-size: 12px;color: #999;font-weight: normal;margin-top: 5px;}
+	.code-item .title p {margin-top: 15px;}
+</style>
diff --git a/src/views/test/autocode/list.vue b/src/views/test/autocode/list.vue
new file mode 100644
index 00000000..945130ee
--- /dev/null
+++ b/src/views/test/autocode/list.vue
@@ -0,0 +1,199 @@
+<template>
+	<el-container>
+		<el-main>
+			<el-card shadow="never">
+				<el-tabs tab-position="top" >
+				    <el-tab-pane label="列配置">
+						<sc-form-table v-model="column" :addTemplate="addTemplate" placeholder="暂无数据">
+							<el-table-column prop="label" label="显示名称" width="180">
+								<template #default="scope">
+									<el-input v-model="scope.row.label" placeholder="请输入内容"></el-input>
+								</template>
+							</el-table-column>
+							<el-table-column prop="prop" label="字段名" width="180">
+								<template #default="scope">
+									<el-input v-model="scope.row.prop" placeholder="请输入内容"></el-input>
+								</template>
+							</el-table-column>
+							<el-table-column prop="width" label="宽度" width="180">
+								<template #default="scope">
+									<el-input v-model="scope.row.width" placeholder="请输入内容"></el-input>
+								</template>
+							</el-table-column>
+							<el-table-column prop="isSearch" label="加入搜索" width="80" align="center">
+								<template #default="scope">
+									<el-checkbox v-model="scope.row.isSearch"></el-checkbox>
+								</template>
+							</el-table-column>
+						</sc-form-table>
+					</el-tab-pane>
+				    <el-tab-pane label="基础配置">
+						<el-row>
+							<el-col :xl="12" :lg="8">
+								<el-form :model="base" label-width="80px">
+									<el-form-item label="name">
+										<el-input v-model="base.name"></el-input>
+										<div class="el-form-item-msg">系统唯一且与路由别名一致，否则导致缓存失效。</div>
+									</el-form-item>
+									<el-form-item label="rowKey">
+										<el-input v-model="base.rowKey"></el-input>
+										<div class="el-form-item-msg">表格唯一标识，编辑保存和删除将传递rowKey</div>
+									</el-form-item>
+								</el-form>
+							</el-col>
+						</el-row>
+					</el-tab-pane>
+				    <el-tab-pane label="API路径配置">
+						<el-alert title="$API 映射文件: @/api/index.js 统一接口管理器, 所以需提前配置好API对象." type="warning" style="margin:0 0 20px 0;"></el-alert>
+						<el-row>
+							<el-col :xl="12" :lg="8">
+								<el-form :model="api" label-width="80px">
+									<el-form-item label="获取列表">
+										<el-input v-model="api.list">
+											<template #prepend>this.$API.</template>
+										</el-input>
+									</el-form-item>
+									<el-form-item label="新增">
+										<el-input v-model="api.add">
+											<template #prepend>this.$API.</template>
+										</el-input>
+									</el-form-item>
+									<el-form-item label="保存">
+										<el-input v-model="api.save">
+											<template #prepend>this.$API.</template>
+										</el-input>
+									</el-form-item>
+									<el-form-item label="查询详细">
+										<el-input v-model="api.show">
+											<template #prepend>this.$API.</template>
+										</el-input>
+									</el-form-item>
+									<el-form-item label="删除">
+										<el-input v-model="api.del">
+											<template #prepend>this.$API.</template>
+										</el-input>
+									</el-form-item>
+								</el-form>
+							</el-col>
+						</el-row>
+					</el-tab-pane>
+				</el-tabs>
+			</el-card>
+			<pre style="margin-top: 50px;display: none;">{{ code }}</pre>
+		</el-main>
+		<el-footer>
+			<el-dropdown style="margin-right: 15px;">
+				<el-button type="primary" icon="el-icon-download" @click="download">下载VUE文件</el-button>
+				<template #dropdown>
+					<el-dropdown-menu>
+						<el-dropdown-item>下载 index.vue</el-dropdown-item>
+						<el-dropdown-item>下载 save.vue</el-dropdown-item>
+					</el-dropdown-menu>
+				</template>
+			</el-dropdown>
+			<el-dropdown>
+				<el-button type="primary" plain icon="el-icon-top-right" :loading="showcodeLoading">预览代码</el-button>
+				<template #dropdown>
+					<el-dropdown-menu>
+						<el-dropdown-item @click="showcode">预览 index.vue</el-dropdown-item>
+						<el-dropdown-item>预览 save.vue</el-dropdown-item>
+					</el-dropdown-menu>
+				</template>
+			</el-dropdown>
+		</el-footer>
+	</el-container>
+
+
+	<el-dialog title="代码预览" v-model="codeVisible" width="60%" append-to-body>
+		<el-alert title="需将VUE文件放置views文件夹,路由匹配组件的路径下,如文件名为index.vue可不需要写文件名" type="success" show-icon style="margin-bottom: 20px;"></el-alert>
+		<pre contenteditable class="code">{{ code }}</pre>
+		<template #footer>
+			<el-button type="primary" @click="codeVisible = false">确 定</el-button>
+		</template>
+	</el-dialog>
+
+</template>
+
+<script>
+	import template from '@/utils/template.js'
+
+	export default {
+		name: 'autocode-list',
+		data() {
+			return {
+				codeVisible: false,
+				showcodeLoading: false,
+				code: '',
+				base: {
+					name: "newPageName",
+					rowKey: "id"
+				},
+				api: {
+					list: 'user.list',
+					add: 'user.save',
+					save: 'user.save',
+					show: 'user.info',
+					del: 'user.del'
+				},
+				column: [
+					{
+						label: "ID",
+						prop: "id",
+						width: "50",
+						isSearch: false
+					},
+					{
+						label: "姓名",
+						prop: "name",
+						width: "100",
+						isSearch: true
+					}
+				],
+				addTemplate: {
+					label: "",
+					prop: "",
+					width: "100",
+					isSearch: false
+				},
+			}
+		},
+		mounted(){
+
+		},
+		methods: {
+			//预览
+			async showcode(){
+				this.showcodeLoading = true;
+				await this.getTpl()
+				this.showcodeLoading = false;
+				this.codeVisible=true;
+			},
+			//同步获取模板文件
+			async getTpl(){
+				var data = {
+					createDate:new Date().toLocaleString(),
+					base: this.base,
+					column: this.column
+				}
+				var tpl = await this.$HTTP.get('code/table.vue')
+				this.code = template(tpl, data)
+			},
+			//下载按钮
+			download(){
+				this.createFile(this.code)
+			},
+			//创建文件并下载
+			createFile(row){
+				const element = document.createElement('a')
+				element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(row))
+				element.setAttribute('download', 'index.vue')
+				element.style.display = 'none'
+				element.click()
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.code {height:400px;overflow: auto;background: #333;color: #999;padding:20px;font-size: 14px;font-family: "consolas";line-height: 1.5;}
+</style>