重构代码生成器
This commit is contained in:
sc
parent
685e2e82d6
commit
ff14dda589
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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'),
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue