UP 1.1.4
This commit is contained in:
sakuya
parent
ff14dda589
commit
a736b13595
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "SCUI-Admin",
|
||||
"version": "1.1.3",
|
||||
"version": "1.1.4",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
|
|
|
|||
|
|
@ -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(){
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -3,7 +3,7 @@ const DEFAULT_CONFIG = {
|
|||
APP_NAME: "SCUI",
|
||||
|
||||
//版本号
|
||||
APP_VER: "1.1.3",
|
||||
APP_VER: "1.1.4",
|
||||
|
||||
//接口地址
|
||||
API_URL: "",
|
||||
|
|
|
|||
|
|
@ -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;}
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
return {
|
||||
list: [
|
||||
{
|
||||
title: "List",
|
||||
title: "CRUD",
|
||||
des: "配置型生成经典的增删改查列表",
|
||||
icon: "sc-icon-file-list-fill",
|
||||
ver: "1.0.0-beta.1",
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue