UP 1.1.4

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "SCUI-Admin",
-	"version": "1.1.3",
+	"version": "1.1.4",
 	"private": true,
 	"scripts": {
 		"serve": "vue-cli-service serve",

public/code/list/index.vue

@@ -62,8 +62,11 @@
 		},
 		data() {
 			return {
-				apiObj: this.$API.role.list,
+				apiObj: this.$API.<%= api.list %>,
 				selection: [],
+				search: {
+					keyword: ""
+				},
 				saveDialogVisible: false,
 				saveMode: 'add',
 				titleMap: {
@@ -88,24 +91,23 @@
 				this.saveMode = 'edit';
 				this.saveDialogVisible = true;
 				this.$nextTick(() => {
-					//这里应该再次根据ID查询详情接口
+					//这里可以再次根据ID查询详情接口
 					this.$refs.saveDialog.setData(row)
 				})
-
 			},
 			//查看
 			table_show(row){
 				this.saveMode = 'show';
 				this.saveDialogVisible = true;
 				this.$nextTick(() => {
-					//这里应该再次根据ID查询详情接口
+					//这里可以再次根据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);
+				var res = await this.$API.<%= api.del %>.post(reqData);
 				if(res.code == 200){
 					//这里选择刷新整个表格 OR 插入/编辑现有表格数据
 					this.$refs.table.tableData.splice(index, 1);
@@ -116,7 +118,7 @@
 			},
 			//批量删除
 			async batch_del(){
-				this.$confirm(`确定删除选中的 ${this.selection.length} 项吗？如果删除项中含有子集将会被一并删除`, '提示', {
+				this.$confirm(`确定删除选中的 ${this.selection.length} 项吗？`, '提示', {
 					type: 'warning'
 				}).then(() => {
 					const loading = this.$loading();
@@ -137,7 +139,7 @@
 			saveForm(){
 				this.$refs.saveDialog.submit(async (formData) => {
 					this.isSaveing = true;
-					var res = await this.$API.user.save.post(formData);
+					var res = await this.$API.<%= api.save %>.post(formData);
 					this.isSaveing = false;
 					if(res.code == 200){
 						//这里选择刷新整个表格 OR 插入/编辑现有表格数据
@@ -154,7 +156,7 @@
 			},
 			//搜索
 			upsearch(){
-			
+
 			}
 		}
 	}

public/code/list/save.vue

@@ -0,0 +1,72 @@
+<!--
+ * @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="100px" label-position="left">
+		<% column.forEach(function(item, index){ %>
+		<el-form-item label="<%= item.label %>" prop="<%= item.prop %>">
+			<el-input v-model="form.<%= item.prop %>" clearable></el-input>
+		</el-form-item>
+		<% })%>
+	</el-form>
+</template>
+
+<script>
+	export default {
+		props: {
+			mode: { type: String, default: "add" }
+		},
+		data() {
+			return {
+				//表单数据
+				form: {
+					<%= base.rowKey %>:"",
+					<% column.forEach(function(item, index){ %>
+					<%= item.prop %>: "",
+					<% })%>
+				},
+				//验证规则
+				rules: {
+					<% column.forEach(function(item, index){ %>
+					<%= item.prop %>: [
+						{required: true, message: '请输入<%= item.label %>'}
+					],
+					<% })%>
+				},
+			}
+		},
+		mounted(){
+
+		},
+		methods: {
+			//表单提交方法
+			submit(callback){
+				this.$refs.dialogForm.validate((valid) => {
+					if (valid) {
+						callback(this.form)
+					}else{
+						return false;
+					}
+				})
+			},
+			//表单注入数据
+			setData(data){
+				this.form.<%= base.rowKey %> = data.<%= base.rowKey %>
+				<% column.forEach(function(item, index){ %>
+				this.form.<%= item.prop %> = data.<%= item.prop %>
+				<% })%>
+				//可以和上面一样单个注入，也可以像下面一样直接合并进去
+				//Object.assign(this.form, data)
+			}
+		}
+	}
+</script>
+
+<style>
+</style>

public/code/table-save.vue

@@ -1,96 +0,0 @@
-<!--
- * @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>

src/config/index.js

@@ -3,7 +3,7 @@ const DEFAULT_CONFIG = {
 	APP_NAME: "SCUI",
 
 	//版本号
-	APP_VER: "1.1.3",
+	APP_VER: "1.1.4",
 
 	//接口地址
 	API_URL: "",

src/style/fix.less

@@ -17,6 +17,8 @@
 .el-card__header {border-bottom: 0}
 .el-tree.menu .el-tree-node__content {height:36px;}
 .el-input-number__decrease, .el-input-number__increase {top:2px;}
+.el-menu-item [class^=sc-icon-] {font-size: 18px;display: inline-block;line-height: 1;}
+.el-menu-item [class^=sc-icon-], .el-submenu [class^=sc-icon-] {margin-right: 5px;vertical-align: middle;width: 24px;text-align: center;}
 
 /* 覆盖tinymce样式 */
 .sceditor .tox-tinymce {border: 1px solid #DCDFE6;}

src/views/test/autocode/index.vue

@@ -27,7 +27,7 @@
 			return {
 				list: [
 					{
-						title: "List",
+						title: "CRUD",
 						des: "配置型生成经典的增删改查列表",
 						icon: "sc-icon-file-list-fill",
 						ver: "1.0.0-beta.1",

src/views/test/autocode/list.vue

@@ -4,7 +4,7 @@
 			<el-card shadow="never">
 				<el-tabs tab-position="top" >
 				    <el-tab-pane label="列配置">
-						<sc-form-table v-model="column" :addTemplate="addTemplate" placeholder="暂无数据">
+						<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>
@@ -20,6 +20,11 @@
 									<el-input v-model="scope.row.width" placeholder="请输入内容"></el-input>
 								</template>
 							</el-table-column>
+							<el-table-column prop="isEdit" label="加入编辑" width="80" align="center">
+								<template #default="scope">
+									<el-checkbox v-model="scope.row.isEdit"></el-checkbox>
+								</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>
@@ -50,27 +55,27 @@
 								<el-form :model="api" label-width="80px">
 									<el-form-item label="获取列表">
 										<el-input v-model="api.list">
-											<template #prepend>this.$API.</template>
+											<template #prepend>$API.</template>
 										</el-input>
 									</el-form-item>
 									<el-form-item label="新增">
 										<el-input v-model="api.add">
-											<template #prepend>this.$API.</template>
+											<template #prepend>$API.</template>
 										</el-input>
 									</el-form-item>
 									<el-form-item label="保存">
 										<el-input v-model="api.save">
-											<template #prepend>this.$API.</template>
+											<template #prepend>$API.</template>
 										</el-input>
 									</el-form-item>
 									<el-form-item label="查询详细">
 										<el-input v-model="api.show">
-											<template #prepend>this.$API.</template>
+											<template #prepend>$API.</template>
 										</el-input>
 									</el-form-item>
 									<el-form-item label="删除">
 										<el-input v-model="api.del">
-											<template #prepend>this.$API.</template>
+											<template #prepend>$API.</template>
 										</el-input>
 									</el-form-item>
 								</el-form>
@@ -83,11 +88,11 @@
 		</el-main>
 		<el-footer>
 			<el-dropdown style="margin-right: 15px;">
-				<el-button type="primary" icon="el-icon-download" @click="download">下载VUE文件</el-button>
+				<el-button type="primary" icon="el-icon-download" :loading="downloadcodeLoading">下载VUE文件</el-button>
 				<template #dropdown>
 					<el-dropdown-menu>
-						<el-dropdown-item>下载 index.vue</el-dropdown-item>
+						<el-dropdown-item @click="downloadListCode">下载 index.vue</el-dropdown-item>
-						<el-dropdown-item>下载 save.vue</el-dropdown-item>
+						<el-dropdown-item @click="downloadSaveCode">下载 save.vue</el-dropdown-item>
 					</el-dropdown-menu>
 				</template>
 			</el-dropdown>
@@ -95,8 +100,8 @@
 				<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 @click="showListCode">预览 index.vue</el-dropdown-item>
-						<el-dropdown-item>预览 save.vue</el-dropdown-item>
+						<el-dropdown-item @click="showSaveCode">预览 save.vue</el-dropdown-item>
 					</el-dropdown-menu>
 				</template>
 			</el-dropdown>
@@ -104,7 +109,7 @@
 	</el-container>
 
 
-	<el-dialog title="代码预览" v-model="codeVisible" width="60%" append-to-body>
+	<el-dialog title="代码预览" v-model="codeVisible" width="60%" append-to-body destroy-on-close>
 		<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>
@@ -123,70 +128,86 @@
 			return {
 				codeVisible: false,
 				showcodeLoading: false,
+				downloadcodeLoading: false,
 				code: '',
 				base: {
-					name: "newPageName",
+					name: "",
 					rowKey: "id"
 				},
 				api: {
-					list: 'user.list',
+					list: '',
-					add: 'user.save',
+					add: '',
-					save: 'user.save',
+					save: '',
-					show: 'user.info',
+					show: '',
-					del: 'user.del'
+					del: ''
 				},
-				column: [
+				column: [],
-					{
-						label: "ID",
-						prop: "id",
-						width: "50",
-						isSearch: false
-					},
-					{
-						label: "姓名",
-						prop: "name",
-						width: "100",
-						isSearch: true
-					}
-				],
 				addTemplate: {
 					label: "",
 					prop: "",
 					width: "100",
-					isSearch: false
+					isSearch: false,
-				},
+					isEdit: false
+				}
 			}
 		},
 		mounted(){
 
 		},
 		methods: {
-			//预览
+			//列表预览
-			async showcode(){
+			async showListCode(){
 				this.showcodeLoading = true;
-				await this.getTpl()
+				await this.getListTpl()
 				this.showcodeLoading = false;
 				this.codeVisible=true;
 			},
-			//同步获取模板文件
+			//获取列表模板文件
-			async getTpl(){
+			async getListTpl(){
 				var data = {
 					createDate:new Date().toLocaleString(),
 					base: this.base,
-					column: this.column
+					column: this.column,
+					api: this.api
 				}
-				var tpl = await this.$HTTP.get('code/table.vue')
+				var tpl = await this.$HTTP.get('code/list/index.vue')
 				this.code = template(tpl, data)
 			},
-			//下载按钮
+			//详细预览
-			download(){
+			async showSaveCode(){
-				this.createFile(this.code)
+				this.showcodeLoading = true;
+				await this.getSaveTpl()
+				this.showcodeLoading = false;
+				this.codeVisible=true;
+			},
+			//获取详细模板文件
+			async getSaveTpl(){
+				var data = {
+					createDate:new Date().toLocaleString(),
+					base: this.base,
+					column: this.column.filter(item => item.isEdit===true),
+					api: this.api
+				}
+				var tpl = await this.$HTTP.get('code/list/save.vue')
+				this.code = template(tpl, data)
+			},
+			async downloadListCode(){
+				this.downloadcodeLoading = true;
+				await this.getListTpl()
+				this.downloadcodeLoading = false;
+				this.createFile(this.code, 'index.vue')
+			},
+			async downloadSaveCode(){
+				this.downloadcodeLoading = true;
+				await this.getSaveTpl()
+				this.downloadcodeLoading = false;
+				this.createFile(this.code, 'save.vue')
 			},
 			//创建文件并下载
-			createFile(row){
+			createFile(row, name){
 				const element = document.createElement('a')
 				element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(row))
-				element.setAttribute('download', 'index.vue')
+				element.setAttribute('download', name)
 				element.style.display = 'none'
 				element.click()
 			}