mirror of
https://gitee.com/chu1204505056/vue-admin-beautiful.git
synced 2025-04-06 03:58:00 +08:00
🐛移除无用依赖，移除网页版代码生成机
This commit is contained in:
chuzhixin
parent
bf1f2053d1
commit
4014b65a10
@ -167,16 +167,6 @@ const data = [
|
||||
component: "@/views/vab/card/index",
|
||||
meta: { title: "卡片", permissions: ["admin"] },
|
||||
},
|
||||
|
||||
{
|
||||
path: "betterScroll",
|
||||
name: "BetterScroll",
|
||||
component: "@/views/vab/betterScroll/index",
|
||||
meta: {
|
||||
title: "滚动侦测",
|
||||
permissions: ["admin"],
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "verify",
|
||||
name: "Verify",
|
||||
@ -272,12 +262,6 @@ const data = [
|
||||
component: "@/views/vab/imgComparison/index",
|
||||
meta: { title: "图像拖拽比对", permissions: ["admin"] },
|
||||
},
|
||||
{
|
||||
path: "codeGenerator",
|
||||
name: "CodeGenerator",
|
||||
component: "@/views/vab/codeGenerator/index",
|
||||
meta: { title: "代码生成机", permissions: ["admin"] },
|
||||
},
|
||||
{
|
||||
path: "markdown",
|
||||
name: "Markdown",
|
||||
|
||||
@ -41,18 +41,14 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^0.20.0",
|
||||
"better-scroll": "^2.0.4",
|
||||
"clipboard": "^2.0.6",
|
||||
"codemirror": "^5.58.1",
|
||||
"core-js": "^3.6.5",
|
||||
"dayjs": "^1.9.1",
|
||||
"echarts": "^4.9.0",
|
||||
"echarts-wordcloud": "^1.1.3",
|
||||
"element-ui": "^2.13.2",
|
||||
"file-saver": "^2.0.2",
|
||||
"js-cookie": "^2.2.1",
|
||||
"jsencrypt": "^3.0.0-rc.1",
|
||||
"jsonlint": "^1.6.3",
|
||||
"lodash": "^4.17.20",
|
||||
"maptalks": "^0.49.1",
|
||||
"mapv": "^2.0.57",
|
||||
@ -60,11 +56,9 @@
|
||||
"qs": "^6.9.4",
|
||||
"screenfull": "^5.0.2",
|
||||
"vue": "^2.6.12",
|
||||
"vue-amap": "^0.5.10",
|
||||
"vue-echarts": "^5.0.0-beta.0",
|
||||
"vue-qart": "^2.2.0",
|
||||
"vue-router": "^3.4.5",
|
||||
"vuedraggable": "^2.24.1",
|
||||
"vuex": "^3.5.1",
|
||||
"zx-comparison": "^1.0.3",
|
||||
"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"),
|
||||
meta: { title: "卡片", permissions: ["admin"] },
|
||||
},
|
||||
|
||||
{
|
||||
path: "betterScroll",
|
||||
name: "BetterScroll",
|
||||
component: () => import("@/views/vab/betterScroll/index"),
|
||||
meta: {
|
||||
title: "滚动侦测",
|
||||
permissions: ["admin"],
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "verify",
|
||||
name: "Verify",
|
||||
@ -348,12 +338,6 @@ export const asyncRoutes = [
|
||||
component: () => import("@/views/vab/imgComparison/index"),
|
||||
meta: { title: "图像拖拽比对", permissions: ["admin"] },
|
||||
},
|
||||
{
|
||||
path: "codeGenerator",
|
||||
name: "CodeGenerator",
|
||||
component: () => import("@/views/vab/codeGenerator/index"),
|
||||
meta: { title: "代码生成机", permissions: ["admin"] },
|
||||
},
|
||||
{
|
||||
path: "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>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
|
||||
<json-editor :value="res"></json-editor>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
@ -120,13 +117,9 @@
|
||||
import { mapGetters } from "vuex";
|
||||
import { tokenTableName } from "@/config/settings";
|
||||
import { getRouterList } from "@/api/router";
|
||||
import JsonEditor from "@/components/JsonEditor";
|
||||
|
||||
export default {
|
||||
name: "Permissions",
|
||||
components: {
|
||||
JsonEditor,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user