构建框架
This commit is contained in:
龙运模
@@ -0,0 +1,67 @@
|
||||
<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" :style="{background: item.color}">
|
||||
<el-icon :style="`background-image: -webkit-linear-gradient(top left, #fff, ${item.color} 100px)`"><component :is="item.icon" /></el-icon>
|
||||
</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: "CRUD v2",
|
||||
des: "配置型生成经典的增删改查列表",
|
||||
icon: "el-icon-finished",
|
||||
color: "#ccc",
|
||||
ver: "开发中",
|
||||
url: "/test/autocode/list_n"
|
||||
},
|
||||
{
|
||||
title: "FormDesigner",
|
||||
des: "表单设计器",
|
||||
icon: "el-icon-list",
|
||||
color: "#ccc",
|
||||
ver: "开发中",
|
||||
url: "/test/autocode/form"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
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,220 @@
|
||||
<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="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>
|
||||
</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>$API.</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="新增">
|
||||
<el-input v-model="api.add">
|
||||
<template #prepend>$API.</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="保存">
|
||||
<el-input v-model="api.save">
|
||||
<template #prepend>$API.</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="查询详细">
|
||||
<el-input v-model="api.show">
|
||||
<template #prepend>$API.</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="删除">
|
||||
<el-input v-model="api.del">
|
||||
<template #prepend>$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" :loading="downloadcodeLoading">下载VUE文件</el-button>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<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>
|
||||
<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="showListCode">预览 index.vue</el-dropdown-item>
|
||||
<el-dropdown-item @click="showSaveCode">预览 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 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>
|
||||
<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,
|
||||
downloadcodeLoading: false,
|
||||
code: '',
|
||||
base: {
|
||||
name: "",
|
||||
rowKey: "id"
|
||||
},
|
||||
api: {
|
||||
list: '',
|
||||
add: '',
|
||||
save: '',
|
||||
show: '',
|
||||
del: ''
|
||||
},
|
||||
column: [],
|
||||
addTemplate: {
|
||||
label: "",
|
||||
prop: "",
|
||||
width: "100",
|
||||
isSearch: false,
|
||||
isEdit: false
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
|
||||
},
|
||||
methods: {
|
||||
//列表预览
|
||||
async showListCode(){
|
||||
this.showcodeLoading = true;
|
||||
await this.getListTpl()
|
||||
this.showcodeLoading = false;
|
||||
this.codeVisible=true;
|
||||
},
|
||||
//获取列表模板文件
|
||||
async getListTpl(){
|
||||
var data = {
|
||||
createDate:new Date().toLocaleString(),
|
||||
base: this.base,
|
||||
column: this.column,
|
||||
api: this.api
|
||||
}
|
||||
var tpl = await this.$HTTP.get('code/list/index.vue')
|
||||
this.code = template(tpl, data)
|
||||
},
|
||||
//详细预览
|
||||
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, name){
|
||||
const element = document.createElement('a')
|
||||
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(row))
|
||||
element.setAttribute('download', name)
|
||||
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,96 @@
|
||||
<!--
|
||||
* @Descripttion: 模拟触发错误
|
||||
* @version: 1.0
|
||||
* @Author: sakuya
|
||||
* @Date: 2021年6月25日08:53:13
|
||||
* @LastEditors:
|
||||
* @LastEditTime:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<el-main>
|
||||
<el-alert title="通过VUE开放的errorHandler可以很方便的捕捉到处理异常, SCUI收集后可上报日志收集系统, 相关代码:@/utils/errorHandler.js" type="success" style="margin-bottom:20px;"></el-alert>
|
||||
<el-row :gutter="15">
|
||||
<el-col :lg="8">
|
||||
<el-card shadow="never" header="ReferenceError">
|
||||
<el-button type="danger" @click="ReferenceError">模拟触发</el-button>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :lg="8">
|
||||
<el-card shadow="never" header="TypeError">
|
||||
<el-button type="danger" @click="TypeError">模拟触发</el-button>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :lg="8">
|
||||
<el-card shadow="never" header="RangeError">
|
||||
<el-button type="danger" @click="RangeError">模拟触发</el-button>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :lg="8">
|
||||
<el-card shadow="never" header="API 401">
|
||||
<el-button type="danger" @click="api401">模拟触发</el-button>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :lg="8">
|
||||
<el-card shadow="never" header="API 404">
|
||||
<el-button type="danger" @click="api404">模拟触发</el-button>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :lg="8">
|
||||
<el-card shadow="never" header="API 500">
|
||||
<el-button type="danger" @click="api500">模拟触发</el-button>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :lg="8">
|
||||
<el-card shadow="never" header="Router 404">
|
||||
<el-button type="danger" @click="router404">模拟触发</el-button>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-alert title=":) 尝试模拟SyntaxError语法错误时,发现VUE编译失败,所以这不作模拟了" type="info" style="margin-top:20px;"></el-alert>
|
||||
</el-main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/* eslint-disable */
|
||||
//为了演示异常，跳过eslint
|
||||
export default {
|
||||
name: 'codebug',
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
ReferenceError(){
|
||||
console.log(obj);
|
||||
},
|
||||
TypeError(){
|
||||
const obj = null
|
||||
console.log(obj.a);
|
||||
},
|
||||
RangeError(){
|
||||
const n = 1
|
||||
n.toFixed(101)
|
||||
},
|
||||
async api401(){
|
||||
var data = await this.$API.demo.status.get(401)
|
||||
},
|
||||
async api404(){
|
||||
var data = await this.$API.demo.status.get(404)
|
||||
},
|
||||
async api500(){
|
||||
var data = await this.$API.demo.status.get(500)
|
||||
},
|
||||
router404(){
|
||||
this.$router.push('/page/404')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
Reference in New Issue
Block a user