This commit is contained in:
sakuya 2021-06-03 22:25:12 +08:00
parent ff14dda589
commit a736b13595
8 changed files with 154 additions and 153 deletions

View File

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

View File

@ -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(){
}
}
}

72
public/code/list/save.vue Normal file
View File

@ -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>

View File

@ -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>

View File

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

View File

@ -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;}

View File

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

View File

@ -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>下载 save.vue</el-dropdown-item>
<el-dropdown-item @click="downloadListCode">下载 index.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>预览 save.vue</el-dropdown-item>
<el-dropdown-item @click="showListCode">预览 index.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',
add: 'user.save',
save: 'user.save',
show: 'user.info',
del: 'user.del'
list: '',
add: '',
save: '',
show: '',
del: ''
},
column: [
{
label: "ID",
prop: "id",
width: "50",
isSearch: false
},
{
label: "姓名",
prop: "name",
width: "100",
isSearch: true
}
],
column: [],
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(){
this.createFile(this.code)
//
async showSaveCode(){
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()
}