|
|
@ -22,7 +22,7 @@ |
|
|
</s-json-schema-editor> |
|
|
</s-json-schema-editor> |
|
|
</el-col> |
|
|
</el-col> |
|
|
</el-row> |
|
|
</el-row> |
|
|
<el-button type="primary" @click="renderer()">生成代码</el-button> |
|
|
|
|
|
|
|
|
<el-button type="primary" @click="genCode()">生成代码</el-button> |
|
|
<div style="margin: 20px 0"></div> |
|
|
<div style="margin: 20px 0"></div> |
|
|
<el-row> |
|
|
<el-row> |
|
|
<vue-json-editor |
|
|
<vue-json-editor |
|
|
@ -40,18 +40,33 @@ |
|
|
<el-dialog |
|
|
<el-dialog |
|
|
title="生成代码" |
|
|
title="生成代码" |
|
|
:visible.sync="dialogVisible" |
|
|
:visible.sync="dialogVisible" |
|
|
:before-close="handleClose()" |
|
|
|
|
|
width="80%" |
|
|
width="80%" |
|
|
> |
|
|
> |
|
|
<el-button type="primary" @click="selectText()">复制当前页</el-button> |
|
|
|
|
|
<el-tabs v-model="activeName"> |
|
|
|
|
|
|
|
|
<!-- <el-button type="primary" @click="selectText()">复制当前页</el-button> --> |
|
|
|
|
|
<el-tabs v-model="activeName" :key="renderKey"> |
|
|
<el-tab-pane |
|
|
<el-tab-pane |
|
|
v-for="(item, key) in output" |
|
|
v-for="(item, key) in output" |
|
|
:key="key" |
|
|
:key="key" |
|
|
:label="key" |
|
|
:label="key" |
|
|
:name="key" |
|
|
:name="key" |
|
|
> |
|
|
> |
|
|
<div :id="key" class="tab-info" style="height:50vh;background: #fff;padding: 0 20px;overflow-y: scroll;" /> |
|
|
|
|
|
|
|
|
<el-input |
|
|
|
|
|
:key="renderKey" |
|
|
|
|
|
type="textarea" |
|
|
|
|
|
v-model="codeOutput" |
|
|
|
|
|
:autosize="{ minRows: 2, maxRows: 10 }" |
|
|
|
|
|
placeholder="请输入内容" |
|
|
|
|
|
></el-input> |
|
|
|
|
|
<!-- <div |
|
|
|
|
|
:id="key" |
|
|
|
|
|
class="tab-info" |
|
|
|
|
|
style=" |
|
|
|
|
|
height: 50vh; |
|
|
|
|
|
background: #fff; |
|
|
|
|
|
padding: 0 20px; |
|
|
|
|
|
overflow-y: scroll; |
|
|
|
|
|
" |
|
|
|
|
|
/> --> |
|
|
</el-tab-pane> |
|
|
</el-tab-pane> |
|
|
</el-tabs> |
|
|
</el-tabs> |
|
|
</el-dialog> |
|
|
</el-dialog> |
|
|
@ -61,8 +76,8 @@ |
|
|
<script> |
|
|
<script> |
|
|
import vueJsonEditor from "vue-json-editor"; |
|
|
import vueJsonEditor from "vue-json-editor"; |
|
|
import { Parser } from "sql-ddl-to-json-schema"; |
|
|
import { Parser } from "sql-ddl-to-json-schema"; |
|
|
import { marked } from "marked"; |
|
|
|
|
|
import hljs from "highlight.js"; |
|
|
|
|
|
|
|
|
// import { marked } from "marked"; |
|
|
|
|
|
// import hljs from "highlight.js"; |
|
|
// import "highlight.js/styles/atelier-plateau-light.css"; |
|
|
// import "highlight.js/styles/atelier-plateau-light.css"; |
|
|
|
|
|
|
|
|
function toCamelCase(str) { |
|
|
function toCamelCase(str) { |
|
|
@ -99,6 +114,7 @@ export default { |
|
|
data() { |
|
|
data() { |
|
|
return { |
|
|
return { |
|
|
schemaKey: "19878878", |
|
|
schemaKey: "19878878", |
|
|
|
|
|
renderKey: 1, |
|
|
activeName: "", |
|
|
activeName: "", |
|
|
dialogVisible: false, |
|
|
dialogVisible: false, |
|
|
schema: { |
|
|
schema: { |
|
|
@ -119,37 +135,17 @@ export default { |
|
|
}; |
|
|
}; |
|
|
}, |
|
|
}, |
|
|
created() {}, |
|
|
created() {}, |
|
|
|
|
|
computed: { |
|
|
|
|
|
codeOutput() { |
|
|
|
|
|
return this.output[this.activeName]; |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
mounted() { |
|
|
mounted() { |
|
|
this.sqlchange(this.sqlinput); |
|
|
this.sqlchange(this.sqlinput); |
|
|
this.schemaKey = Date.now(); |
|
|
this.schemaKey = Date.now(); |
|
|
}, |
|
|
}, |
|
|
methods: { |
|
|
methods: { |
|
|
handleClose() { |
|
|
|
|
|
console.log("close"); |
|
|
|
|
|
}, |
|
|
|
|
|
renderer() { |
|
|
|
|
|
this.dialogVisible = true; |
|
|
|
|
|
marked.setOptions({ |
|
|
|
|
|
renderer: new marked.Renderer(), |
|
|
|
|
|
highlight: function (code) { |
|
|
|
|
|
return hljs.highlightAuto(code).value; |
|
|
|
|
|
}, |
|
|
|
|
|
pedantic: false, |
|
|
|
|
|
gfm: true, |
|
|
|
|
|
tables: true, |
|
|
|
|
|
breaks: false, |
|
|
|
|
|
sanitize: false, |
|
|
|
|
|
smartLists: true, |
|
|
|
|
|
smartypants: false, |
|
|
|
|
|
xhtml: false, |
|
|
|
|
|
}); |
|
|
|
|
|
for (const key in this.output) { |
|
|
|
|
|
if (this.activeName === "") { |
|
|
|
|
|
this.activeName = key; |
|
|
|
|
|
} |
|
|
|
|
|
document.getElementById(key).innerHTML = marked(this.output[key]); |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
selectText() { |
|
|
selectText() { |
|
|
const element = document.getElementById(this.activeName); |
|
|
const element = document.getElementById(this.activeName); |
|
|
if (document.body.createTextRange) { |
|
|
if (document.body.createTextRange) { |
|
|
@ -178,6 +174,15 @@ export default { |
|
|
this.schemaKey = Date.now(); |
|
|
this.schemaKey = Date.now(); |
|
|
this.schema = Object.assign({}, value); |
|
|
this.schema = Object.assign({}, value); |
|
|
}, |
|
|
}, |
|
|
|
|
|
genCode() { |
|
|
|
|
|
let v = this.schema; |
|
|
|
|
|
this.output["model"] = this.handleModelOutput(v); |
|
|
|
|
|
this.output["service"] = this.handleServiceOutput(v); |
|
|
|
|
|
this.output["api"] = this.handleApiOutput(v); |
|
|
|
|
|
this.renderKey++; |
|
|
|
|
|
this.activeName = ""; |
|
|
|
|
|
this.dialogVisible = true; |
|
|
|
|
|
}, |
|
|
sqlchange(v) { |
|
|
sqlchange(v) { |
|
|
// 1. 现将sql进行解析 json schema |
|
|
// 1. 现将sql进行解析 json schema |
|
|
const parser = new Parser("mysql"); |
|
|
const parser = new Parser("mysql"); |
|
|
@ -194,11 +199,12 @@ export default { |
|
|
console.log("json渲染错误了value:", value); |
|
|
console.log("json渲染错误了value:", value); |
|
|
}, |
|
|
}, |
|
|
onSchemaChange(v) { |
|
|
onSchemaChange(v) { |
|
|
|
|
|
this.jsonformat = v; |
|
|
this.schema = JSON.stringify(v, null, 2); |
|
|
this.schema = JSON.stringify(v, null, 2); |
|
|
this.output["model"] = this.handleModelOutput(v); |
|
|
this.output["model"] = this.handleModelOutput(v); |
|
|
this.output["service"] = this.handleServiceOutput(v); |
|
|
this.output["service"] = this.handleServiceOutput(v); |
|
|
this.output["api"] = this.handleApiOutput(v); |
|
|
this.output["api"] = this.handleApiOutput(v); |
|
|
// this.renderer(); |
|
|
|
|
|
|
|
|
console.log("output", this.output); |
|
|
this.schemaKey = Date.now(); |
|
|
this.schemaKey = Date.now(); |
|
|
}, |
|
|
}, |
|
|
handleApiOutput(v) { |
|
|
handleApiOutput(v) { |
|
|
@ -564,10 +570,11 @@ export default { |
|
|
`; |
|
|
`; |
|
|
var enumcenter = ``; |
|
|
var enumcenter = ``; |
|
|
var enumend = `)`; |
|
|
var enumend = `)`; |
|
|
|
|
|
// 生成枚举相关代码 |
|
|
enumdesc.split("\n").forEach(function (value, index) { |
|
|
enumdesc.split("\n").forEach(function (value, index) { |
|
|
const v = enumlist[index]; |
|
|
const v = enumlist[index]; |
|
|
var s = ` |
|
|
var s = ` |
|
|
${tableKey}${value} ${skey} = ${v} \n |
|
|
|
|
|
|
|
|
${tableKey}${value} ${tableKey} = ${v} \n |
|
|
`; |
|
|
`; |
|
|
var f = ` |
|
|
var f = ` |
|
|
func (g ${tableKey}) ${value}() bool { |
|
|
func (g ${tableKey}) ${value}() bool { |
|
|
@ -577,7 +584,6 @@ export default { |
|
|
return obj.Updates(ctx, &${tableName}{${skey}: ${tableKey}${value}}, obj.Q().${primary}(id)) |
|
|
return obj.Updates(ctx, &${tableName}{${skey}: ${tableKey}${value}}, obj.Q().${primary}(id)) |
|
|
} \n |
|
|
} \n |
|
|
`; |
|
|
`; |
|
|
console.log(value); |
|
|
|
|
|
enumcenter += s; |
|
|
enumcenter += s; |
|
|
enumUpdate += f; |
|
|
enumUpdate += f; |
|
|
}); |
|
|
}); |
|
|
|
LonglyCode
4 years ago