mirror of
https://gitee.com/chu1204505056/vue-admin-beautiful.git
synced 2025-09-16 17:42:09 +08:00
🐛移除无用依赖，移除网页版代码生成机
This commit is contained in:
chuzhixin
parent
bf1f2053d1
commit
4014b65a10
@ -167,16 +167,6 @@ const data = [
|
|||||||
component: "@/views/vab/card/index",
|
component: "@/views/vab/card/index",
|
||||||
meta: { title: "卡片", permissions: ["admin"] },
|
meta: { title: "卡片", permissions: ["admin"] },
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
|
||||||
path: "betterScroll",
|
|
||||||
name: "BetterScroll",
|
|
||||||
component: "@/views/vab/betterScroll/index",
|
|
||||||
meta: {
|
|
||||||
title: "滚动侦测",
|
|
||||||
permissions: ["admin"],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
path: "verify",
|
path: "verify",
|
||||||
name: "Verify",
|
name: "Verify",
|
||||||
@ -272,12 +262,6 @@ const data = [
|
|||||||
component: "@/views/vab/imgComparison/index",
|
component: "@/views/vab/imgComparison/index",
|
||||||
meta: { title: "图像拖拽比对", permissions: ["admin"] },
|
meta: { title: "图像拖拽比对", permissions: ["admin"] },
|
||||||
},
|
},
|
||||||
{
|
|
||||||
path: "codeGenerator",
|
|
||||||
name: "CodeGenerator",
|
|
||||||
component: "@/views/vab/codeGenerator/index",
|
|
||||||
meta: { title: "代码生成机", permissions: ["admin"] },
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
path: "markdown",
|
path: "markdown",
|
||||||
name: "Markdown",
|
name: "Markdown",
|
||||||
|
|||||||
@ -41,18 +41,14 @@
|
|||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"axios": "^0.20.0",
|
"axios": "^0.20.0",
|
||||||
"better-scroll": "^2.0.4",
|
|
||||||
"clipboard": "^2.0.6",
|
"clipboard": "^2.0.6",
|
||||||
"codemirror": "^5.58.1",
|
|
||||||
"core-js": "^3.6.5",
|
"core-js": "^3.6.5",
|
||||||
"dayjs": "^1.9.1",
|
"dayjs": "^1.9.1",
|
||||||
"echarts": "^4.9.0",
|
"echarts": "^4.9.0",
|
||||||
"echarts-wordcloud": "^1.1.3",
|
"echarts-wordcloud": "^1.1.3",
|
||||||
"element-ui": "^2.13.2",
|
"element-ui": "^2.13.2",
|
||||||
"file-saver": "^2.0.2",
|
|
||||||
"js-cookie": "^2.2.1",
|
"js-cookie": "^2.2.1",
|
||||||
"jsencrypt": "^3.0.0-rc.1",
|
"jsencrypt": "^3.0.0-rc.1",
|
||||||
"jsonlint": "^1.6.3",
|
|
||||||
"lodash": "^4.17.20",
|
"lodash": "^4.17.20",
|
||||||
"maptalks": "^0.49.1",
|
"maptalks": "^0.49.1",
|
||||||
"mapv": "^2.0.57",
|
"mapv": "^2.0.57",
|
||||||
@ -60,11 +56,9 @@
|
|||||||
"qs": "^6.9.4",
|
"qs": "^6.9.4",
|
||||||
"screenfull": "^5.0.2",
|
"screenfull": "^5.0.2",
|
||||||
"vue": "^2.6.12",
|
"vue": "^2.6.12",
|
||||||
"vue-amap": "^0.5.10",
|
|
||||||
"vue-echarts": "^5.0.0-beta.0",
|
"vue-echarts": "^5.0.0-beta.0",
|
||||||
"vue-qart": "^2.2.0",
|
"vue-qart": "^2.2.0",
|
||||||
"vue-router": "^3.4.5",
|
"vue-router": "^3.4.5",
|
||||||
"vuedraggable": "^2.24.1",
|
|
||||||
"vuex": "^3.5.1",
|
"vuex": "^3.5.1",
|
||||||
"zx-comparison": "^1.0.3",
|
"zx-comparison": "^1.0.3",
|
||||||
"zx-count": "^0.3.7",
|
"zx-count": "^0.3.7",
|
||||||
|
|||||||
@ -1,111 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="json-editor">
|
|
||||||
<label>
|
|
||||||
<textarea ref="textarea" />
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import CodeMirror from "codemirror";
|
|
||||||
import "codemirror/addon/lint/lint.css";
|
|
||||||
import "codemirror/lib/codemirror.css";
|
|
||||||
import "codemirror/theme/rubyblue.css";
|
|
||||||
import "codemirror/mode/javascript/javascript";
|
|
||||||
import "codemirror/addon/lint/lint";
|
|
||||||
import "codemirror/addon/lint/json-lint";
|
|
||||||
|
|
||||||
require("script-loader!jsonlint");
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "JsonEditor",
|
|
||||||
props: {
|
|
||||||
value: {
|
|
||||||
type: [Array, Object],
|
|
||||||
default: () => {
|
|
||||||
return null;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
jsonEditor: false,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
value(value) {
|
|
||||||
const editorValue = this.jsonEditor.getValue();
|
|
||||||
|
|
||||||
if (editorValue) {
|
|
||||||
this.$emit("change", editorValue);
|
|
||||||
} else {
|
|
||||||
this.$baseMessage("JSON不能为空,否则无法生成表格", "error");
|
|
||||||
}
|
|
||||||
if (value !== editorValue) {
|
|
||||||
this.jsonEditor.setValue(JSON.stringify(this.value, null, 2));
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.jsonEditor = CodeMirror.fromTextArea(this.$refs.textarea, {
|
|
||||||
lineNumbers: true,
|
|
||||||
mode: "application/json",
|
|
||||||
gutters: ["CodeMirror-lint-markers"],
|
|
||||||
theme: "rubyblue",
|
|
||||||
lint: true,
|
|
||||||
});
|
|
||||||
|
|
||||||
this.jsonEditor.setValue(JSON.stringify(this.value, null, 2));
|
|
||||||
this.jsonEditor.on("change", (cm) => {
|
|
||||||
if (this.isJsonString(cm.getValue())) {
|
|
||||||
this.$emit("change", cm.getValue());
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
getValue() {
|
|
||||||
return this.jsonEditor.getValue();
|
|
||||||
},
|
|
||||||
isJsonString(str) {
|
|
||||||
try {
|
|
||||||
if (typeof JSON.parse(str) == "object") {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
} catch (e) {}
|
|
||||||
return false;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.json-editor {
|
|
||||||
position: relative;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.json-editor >>> .CodeMirror {
|
|
||||||
height: auto;
|
|
||||||
min-height: calc(100vh - 220px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.json-editor >>> .CodeMirror-scroll {
|
|
||||||
min-height: calc(100vh - 220px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.json-editor >>> .cm-s-rubyblue span.cm-string {
|
|
||||||
color: #f08047;
|
|
||||||
}
|
|
||||||
|
|
||||||
.json-editor >>> .cm-s-rubyblue .CodeMirror-gutters {
|
|
||||||
padding-right: 10px;
|
|
||||||
|
|
||||||
/* background: transparent; */
|
|
||||||
border-right: 1px solid #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.json-editor >>> .cm-s-rubyblue.CodeMirror {
|
|
||||||
/* background: #08233e; */
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -238,16 +238,6 @@ export const asyncRoutes = [
|
|||||||
component: () => import("@/views/vab/card/index"),
|
component: () => import("@/views/vab/card/index"),
|
||||||
meta: { title: "卡片", permissions: ["admin"] },
|
meta: { title: "卡片", permissions: ["admin"] },
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
|
||||||
path: "betterScroll",
|
|
||||||
name: "BetterScroll",
|
|
||||||
component: () => import("@/views/vab/betterScroll/index"),
|
|
||||||
meta: {
|
|
||||||
title: "滚动侦测",
|
|
||||||
permissions: ["admin"],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
path: "verify",
|
path: "verify",
|
||||||
name: "Verify",
|
name: "Verify",
|
||||||
@ -348,12 +338,6 @@ export const asyncRoutes = [
|
|||||||
component: () => import("@/views/vab/imgComparison/index"),
|
component: () => import("@/views/vab/imgComparison/index"),
|
||||||
meta: { title: "图像拖拽比对", permissions: ["admin"] },
|
meta: { title: "图像拖拽比对", permissions: ["admin"] },
|
||||||
},
|
},
|
||||||
{
|
|
||||||
path: "codeGenerator",
|
|
||||||
name: "CodeGenerator",
|
|
||||||
component: () => import("@/views/vab/codeGenerator/index"),
|
|
||||||
meta: { title: "代码生成机", permissions: ["admin"] },
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
path: "markdown",
|
path: "markdown",
|
||||||
name: "Markdown",
|
name: "Markdown",
|
||||||
|
|||||||
@ -1,37 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div slot="header" class="clearfix" style="margin-bottom: 15px">
|
|
||||||
<el-button type="primary" @click="prettierJSON">生成表格</el-button>
|
|
||||||
</div>
|
|
||||||
<json-editor v-model="value" @change="prettierNewJSON" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import JsonEditor from "@/components/JsonEditor/index";
|
|
||||||
|
|
||||||
const jsonData =
|
|
||||||
'{"code": 200, "msg": "操作成功", "pageNo": 1, "pageSize": 10, "totalPages": 4, "totalCount": 238, "data": [{"id": "", "title": "", "status": "", "author": "", "datetime": "", "pageViews": "", "img": "", "switch": ""}]}';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: { JsonEditor },
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
value: JSON.parse(jsonData),
|
|
||||||
};
|
|
||||||
},
|
|
||||||
computed: {},
|
|
||||||
created() {
|
|
||||||
this.prettierJSON();
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
prettierJSON() {
|
|
||||||
this.$emit("change", jsonData);
|
|
||||||
},
|
|
||||||
prettierNewJSON(jsonData) {
|
|
||||||
this.$emit("change", jsonData);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
@ -1,81 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="app-container">
|
|
||||||
<TableExhibitionQuery :headers="headers" />
|
|
||||||
<el-row>
|
|
||||||
<el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
|
|
||||||
<TableExhibitionHeader :headers.sync="headers" />
|
|
||||||
</el-col>
|
|
||||||
<el-col :xs="24" :sm="24" :md="18" :lg="18" :xl="18">
|
|
||||||
<TableExhibitionBody :headers="headers" :list="list" />
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import TableExhibitionBody from "./TableExhibitionBody";
|
|
||||||
import TableExhibitionQuery from "./TableExhibitionQuery";
|
|
||||||
import TableExhibitionHeader from "./TableExhibitionHeader";
|
|
||||||
import { genTableSnippet } from "./snippetTable.js";
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
TableExhibitionBody,
|
|
||||||
TableExhibitionHeader,
|
|
||||||
TableExhibitionQuery,
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
tableData: {
|
|
||||||
type: Object,
|
|
||||||
default: () => {
|
|
||||||
return {};
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
list: [],
|
|
||||||
code: "",
|
|
||||||
headers: [],
|
|
||||||
query: {
|
|
||||||
limit: 20,
|
|
||||||
cursor: 1,
|
|
||||||
},
|
|
||||||
total: 0,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
tableData: {
|
|
||||||
handler(val) {
|
|
||||||
this.list = val.data && val.data.slice(0, 3);
|
|
||||||
if (this.list) {
|
|
||||||
this.headers = Object.keys(this.list[0]).map((item) => {
|
|
||||||
// opt 为需要对 字段的操作，''空就不操作，'time' 处理时间，'template' 将字段放在template 里面，方便后续操作
|
|
||||||
return {
|
|
||||||
value: this.list[0][item],
|
|
||||||
key: item,
|
|
||||||
label: item,
|
|
||||||
show: true,
|
|
||||||
opt: "",
|
|
||||||
query: false,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
immediate: true,
|
|
||||||
},
|
|
||||||
headers: {
|
|
||||||
handler(val) {
|
|
||||||
this.code = genTableSnippet(val, this.getTableAPI);
|
|
||||||
this.$store.dispatch("table/setTableCode", this.code);
|
|
||||||
},
|
|
||||||
deep: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
created() {},
|
|
||||||
methods: {
|
|
||||||
editdata() {},
|
|
||||||
test(val) {},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
@ -1,59 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<el-table :key="table_key" :data="list" @header-click="test">
|
|
||||||
<template v-for="header in headers">
|
|
||||||
<el-table-column
|
|
||||||
v-if="header.show"
|
|
||||||
:key="header.key"
|
|
||||||
show-overflow-tooltip
|
|
||||||
:label="header.label"
|
|
||||||
align="center"
|
|
||||||
>
|
|
||||||
<template #default="{ row }">
|
|
||||||
{{ row[header.key] }}
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</template>
|
|
||||||
</el-table>
|
|
||||||
<el-pagination
|
|
||||||
background
|
|
||||||
layout="total, sizes, prev, pager, next, jumper"
|
|
||||||
:total="1000"
|
|
||||||
></el-pagination>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
props: {
|
|
||||||
list: {
|
|
||||||
type: null,
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
headers: {
|
|
||||||
type: Array,
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
query: {
|
|
||||||
limit: 20,
|
|
||||||
cursor: 1,
|
|
||||||
},
|
|
||||||
table_key: 0,
|
|
||||||
total: 0,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
headers() {
|
|
||||||
this.table_key++;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
created() {},
|
|
||||||
methods: {
|
|
||||||
editdata() {},
|
|
||||||
test(val) {},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
@ -1,119 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="table-header">
|
|
||||||
<draggable
|
|
||||||
v-model="tableHeaders"
|
|
||||||
group="people"
|
|
||||||
@change="set"
|
|
||||||
@end="drag = false"
|
|
||||||
@start="drag = true"
|
|
||||||
>
|
|
||||||
<div v-for="header in tableHeaders" :key="header.key">
|
|
||||||
<el-popover placement="right" trigger="focus">
|
|
||||||
<el-tooltip
|
|
||||||
:content="`该字段${
|
|
||||||
header.opt === '' ? '未' : ''
|
|
||||||
}置于template标签内，置于template方便自定义`"
|
|
||||||
class="item"
|
|
||||||
effect="dark"
|
|
||||||
placement="top-start"
|
|
||||||
>
|
|
||||||
<el-button
|
|
||||||
v-if="header.opt === ''"
|
|
||||||
@click="opt(header, 'template')"
|
|
||||||
>
|
|
||||||
{{ header.opt ? "点击关闭自定义" : "点击开启自定义" }}
|
|
||||||
</el-button>
|
|
||||||
<el-button v-else @click="opt(header, '')">
|
|
||||||
{{ header.opt ? "点击关闭自定义" : "点击开启自定义" }}
|
|
||||||
</el-button>
|
|
||||||
</el-tooltip>
|
|
||||||
<el-tooltip
|
|
||||||
:content="`该字段在表格中${header.show ? '显示' : '隐藏'}`"
|
|
||||||
class="item"
|
|
||||||
effect="dark"
|
|
||||||
placement="top-start"
|
|
||||||
>
|
|
||||||
<el-button @click="hide(header)">
|
|
||||||
{{ header.show ? "点击隐藏字段" : "点击显示字段" }}
|
|
||||||
</el-button>
|
|
||||||
</el-tooltip>
|
|
||||||
<div slot="reference" class="table-header-card">
|
|
||||||
<el-tag>{{ header.key }}对应的标题名称</el-tag>
|
|
||||||
<div>
|
|
||||||
<el-input
|
|
||||||
v-model="header.label"
|
|
||||||
:placeholder="header.label + '对应的字段名称'"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-popover>
|
|
||||||
</div>
|
|
||||||
</draggable>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import draggable from "vuedraggable";
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
draggable,
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
headers: {
|
|
||||||
type: Array,
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
tableHeaders: this.headers,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
headers(val) {
|
|
||||||
this.tableHeaders = val;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
set() {
|
|
||||||
this.$emit("update:headers", this.tableHeaders);
|
|
||||||
},
|
|
||||||
show(header) {
|
|
||||||
header.show = true;
|
|
||||||
},
|
|
||||||
hide(header) {
|
|
||||||
header.show = !header.show;
|
|
||||||
},
|
|
||||||
opt(header, opt) {
|
|
||||||
header.opt = opt;
|
|
||||||
},
|
|
||||||
query(header, query) {
|
|
||||||
header.query = query;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<style scoped>
|
|
||||||
.table-header-card {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 10px;
|
|
||||||
margin-right: 10px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
margin-left: 0;
|
|
||||||
border: 1px solid #dcdfe6;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.table-header >>> .el-input__inner {
|
|
||||||
border: none;
|
|
||||||
border-bottom: 1px solid #9e9e9e;
|
|
||||||
border-radius: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-popover {
|
|
||||||
min-width: 100px !important;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,82 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="table-query">
|
|
||||||
<div>
|
|
||||||
<el-button type="primary" @click="openCodeDialog">查看代码</el-button>
|
|
||||||
<el-button type="primary" @click="handleClipboard(srcTableCode, $event)">
|
|
||||||
复制代码
|
|
||||||
</el-button>
|
|
||||||
</div>
|
|
||||||
<el-dialog destroy-on-close title="查看代码" :visible.sync="dialogVisible">
|
|
||||||
<textarea v-show="false" ref="code" v-model="srcTableCode"></textarea>
|
|
||||||
|
|
||||||
<span slot="footer" class="dialog-footer">
|
|
||||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
|
||||||
<el-button
|
|
||||||
type="primary"
|
|
||||||
@click="closeCodeDialog(srcTableCode, $event)"
|
|
||||||
>
|
|
||||||
复制代码
|
|
||||||
</el-button>
|
|
||||||
</span>
|
|
||||||
</el-dialog>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { mapGetters } from "vuex";
|
|
||||||
import clipboard from "@/utils/clipboard";
|
|
||||||
import CodeMirror from "codemirror";
|
|
||||||
|
|
||||||
export default {
|
|
||||||
props: {
|
|
||||||
headers: {
|
|
||||||
type: Array,
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
dialogVisible: false,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
...mapGetters({ srcTableCode: "table/srcTableCode" }),
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
handleClipboard(text, event) {
|
|
||||||
clipboard(text, event);
|
|
||||||
},
|
|
||||||
openCodeDialog() {
|
|
||||||
this.dialogVisible = true;
|
|
||||||
setTimeout(() => {
|
|
||||||
CodeMirror.fromTextArea(this.$refs.code, {
|
|
||||||
lineNumbers: true,
|
|
||||||
gutters: ["CodeMirror-lint-markers"],
|
|
||||||
theme: "rubyblue",
|
|
||||||
autoRefresh: true,
|
|
||||||
lint: true,
|
|
||||||
});
|
|
||||||
}, 0);
|
|
||||||
},
|
|
||||||
closeCodeDialog(text, event) {
|
|
||||||
this.handleClipboard(text, event);
|
|
||||||
this.dialogVisible = false;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.table-query {
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
height: 45px;
|
|
||||||
|
|
||||||
::v-deep {
|
|
||||||
.CodeMirror {
|
|
||||||
height: auto;
|
|
||||||
min-height: calc(100vh - 420px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,154 +0,0 @@
|
|||||||
import { genTableColumnSnippet } from "./snippetTableColumn";
|
|
||||||
|
|
||||||
export const genTableSnippet = (headers = "getList") => {
|
|
||||||
return `<template>
|
|
||||||
<div class="改成你的组件名-container">
|
|
||||||
<vab-query-form>
|
|
||||||
<vab-query-form-left-panel :span="12">
|
|
||||||
<el-button icon="el-icon-plus" type="primary">添加</el-button>
|
|
||||||
<el-button icon="el-icon-edit" type="warning">修改</el-button>
|
|
||||||
<el-button
|
|
||||||
icon="el-icon-delete"
|
|
||||||
type="danger"
|
|
||||||
@click="handleDelete"
|
|
||||||
>批量删除
|
|
||||||
</el-button
|
|
||||||
>
|
|
||||||
</vab-query-form-left-panel>
|
|
||||||
<vab-query-form-right-panel :span="12">
|
|
||||||
<el-form :inline="true" :model="queryForm" @submit.native.prevent>
|
|
||||||
<el-form-item>
|
|
||||||
<el-input
|
|
||||||
v-model.trim="queryForm.${headers[0].key}"
|
|
||||||
placeholder="请输入查询条件"
|
|
||||||
clearable
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-button
|
|
||||||
icon="el-icon-search"
|
|
||||||
type="primary"
|
|
||||||
@click="queryData"
|
|
||||||
>查询
|
|
||||||
</el-button
|
|
||||||
>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</vab-query-form-right-panel>
|
|
||||||
</vab-query-form>
|
|
||||||
|
|
||||||
<el-table
|
|
||||||
v-loading="listLoading"
|
|
||||||
:height="height"
|
|
||||||
:data="list"
|
|
||||||
:element-loading-text="elementLoadingText"
|
|
||||||
@selection-change="setSelectRows"
|
|
||||||
>
|
|
||||||
<el-table-column show-overflow-tooltip type="selection"></el-table-column>
|
|
||||||
${genTableColumnSnippet(headers)}
|
|
||||||
<el-table-column show-overflow-tooltip label="操作" width="200">
|
|
||||||
<template #default="{row}">
|
|
||||||
<el-button type="text" @click="editList(row)"
|
|
||||||
>编辑
|
|
||||||
</el-button
|
|
||||||
>
|
|
||||||
<el-button type="text" @click="tableDelete(row)"
|
|
||||||
>删除
|
|
||||||
</el-button
|
|
||||||
>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
<el-pagination
|
|
||||||
:background="background"
|
|
||||||
:current-page="queryForm.pageNo"
|
|
||||||
:page-size="queryForm.pageSize"
|
|
||||||
:layout="layout"
|
|
||||||
:total="total"
|
|
||||||
@size-change="handleSizeChange"
|
|
||||||
@current-change="handleCurrentChange"
|
|
||||||
></el-pagination>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
import { getList } from "@/api/table";
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "这里会报错,记住,你的view名称与文件夹名称相同不要忘了首字母大写,且唯一",
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
list: null,
|
|
||||||
listLoading: true,
|
|
||||||
layout: "total, sizes, prev, pager, next, jumper",
|
|
||||||
total: 0,
|
|
||||||
background: true,
|
|
||||||
height: 0,
|
|
||||||
selectRows: "",
|
|
||||||
elementLoadingText: "正在加载...",
|
|
||||||
queryForm: {
|
|
||||||
pageNo: 1,
|
|
||||||
pageSize: 10,
|
|
||||||
${headers[0].key} : "",
|
|
||||||
}
|
|
||||||
};
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
this.fetchData();
|
|
||||||
this.height = this.$baseTableHeight(1);
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
setSelectRows(val) {
|
|
||||||
this.selectRows = val;
|
|
||||||
},
|
|
||||||
editList(row) {
|
|
||||||
},
|
|
||||||
handleDelete() {
|
|
||||||
if (this.selectRows.length > 0) {
|
|
||||||
const ids = this.selectRows.map(item => item.id).join();
|
|
||||||
this.$baseConfirm(
|
|
||||||
"你确定要删除选中项吗",
|
|
||||||
null,
|
|
||||||
() => {
|
|
||||||
alert(ids);
|
|
||||||
},
|
|
||||||
() => {
|
|
||||||
alert("点击了取消");
|
|
||||||
},
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
this.$baseMessage("未选中任何行", "error");
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
tableDelete(row) {
|
|
||||||
alert(row.id);
|
|
||||||
},
|
|
||||||
handleSizeChange(val) {
|
|
||||||
this.queryForm.pageSize = val;
|
|
||||||
this.fetchData();
|
|
||||||
},
|
|
||||||
handleCurrentChange(val) {
|
|
||||||
this.queryForm.pageNo = val;
|
|
||||||
this.fetchData();
|
|
||||||
},
|
|
||||||
queryData() {
|
|
||||||
this.queryForm.pageNo = 1;
|
|
||||||
this.fetchData();
|
|
||||||
},
|
|
||||||
async fetchData() {
|
|
||||||
this.listLoading = true;
|
|
||||||
const { data, totalCount }= await getList(this.queryForm);
|
|
||||||
this.list = data;
|
|
||||||
this.total = totalCount;
|
|
||||||
setTimeout(() => {
|
|
||||||
this.listLoading = false;
|
|
||||||
}, 300);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped></style>
|
|
||||||
`;
|
|
||||||
};
|
|
||||||
@ -1,40 +0,0 @@
|
|||||||
const timeFieldNeedHandle = {
|
|
||||||
created_at: true,
|
|
||||||
create_time: true,
|
|
||||||
updated_at: true,
|
|
||||||
update_time: true,
|
|
||||||
start_time: true,
|
|
||||||
end_time: true,
|
|
||||||
};
|
|
||||||
const genTableColumnSnippetSimple = (key, label) => {
|
|
||||||
return `<el-table-column show-overflow-tooltip prop="${key}" label="${label}"/>`;
|
|
||||||
};
|
|
||||||
|
|
||||||
const genTabeleColumnSinppetTemplate = (key, label) => {
|
|
||||||
let val = "";
|
|
||||||
if (timeFieldNeedHandle[key]) {
|
|
||||||
val = `parseTime(row.${key})`;
|
|
||||||
} else {
|
|
||||||
val = `row.${key}`;
|
|
||||||
}
|
|
||||||
return `<el-table-column show-overflow-tooltip label="${label}">
|
|
||||||
<template #default={row}>
|
|
||||||
{{ ${val} }}
|
|
||||||
</template>
|
|
||||||
</el-table-column>`;
|
|
||||||
};
|
|
||||||
|
|
||||||
export const genTableColumnSnippet = (headers) => {
|
|
||||||
return headers
|
|
||||||
.filter((header) => {
|
|
||||||
return header.show;
|
|
||||||
})
|
|
||||||
.map((header) => {
|
|
||||||
if (timeFieldNeedHandle[header.key] || header.opt === "template") {
|
|
||||||
return genTabeleColumnSinppetTemplate(header.key, header.label);
|
|
||||||
} else {
|
|
||||||
return genTableColumnSnippetSimple(header.key, header.label);
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.join("\n ");
|
|
||||||
};
|
|
||||||
@ -1,36 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="code-generator-container">
|
|
||||||
<el-row :gutter="20">
|
|
||||||
<el-col :xs="24" :sm="24" :md="4" :lg="6" :xl="6">
|
|
||||||
<TableEditor @change="setTableData" />
|
|
||||||
</el-col>
|
|
||||||
<el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="18">
|
|
||||||
<TableExhibition :table-data="tableData" />
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import TableEditor from "./components/TableEditor";
|
|
||||||
import TableExhibition from "./components/TableExhibition";
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "Index",
|
|
||||||
components: {
|
|
||||||
TableEditor,
|
|
||||||
TableExhibition,
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
tableData: {},
|
|
||||||
getTableAPI: "",
|
|
||||||
};
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
setTableData(val) {
|
|
||||||
this.tableData = JSON.parse(val);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
@ -109,9 +109,6 @@
|
|||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
|
|
||||||
<json-editor :value="res"></json-editor>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
</el-row>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -120,13 +117,9 @@
|
|||||||
import { mapGetters } from "vuex";
|
import { mapGetters } from "vuex";
|
||||||
import { tokenTableName } from "@/config/settings";
|
import { tokenTableName } from "@/config/settings";
|
||||||
import { getRouterList } from "@/api/router";
|
import { getRouterList } from "@/api/router";
|
||||||
import JsonEditor from "@/components/JsonEditor";
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "Permissions",
|
name: "Permissions",
|
||||||
components: {
|
|
||||||
JsonEditor,
|
|
||||||
},
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
form: {
|
form: {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user