Browse Source

代码生成器前端页面 后端基本字段 完成

main
QM303176530 5 years ago
parent
commit
35ec61c8dd
  1. 22
      QMPlusServer/model/autoCodeModel/autoCode.go
  2. 2
      QMPlusVuePage/src/view/login/login.vue
  3. 158
      QMPlusVuePage/src/view/superAdmin/autoCode/index.vue

22
QMPlusServer/model/autoCodeModel/autoCode.go

@ -0,0 +1,22 @@
package autoCodeModel
type AutoCodeStruct struct {
StructName string `json:"structName"`
StructType []string `json:"structType"`
Components []Component `json:"components"`
}
type Component struct {
ComponentName string `json:"componentName"`
ComponentType string `json:"componentType"`
Ismultiple bool `json:"isMultiple"`
ComponentShowType string `json:"componentShowType"`
NideDictionary bool `json:"nideDictionary"`
DictionaryName string `json:"dictionaryName"`
ComponentDictionary []Dictionary `json:"dictionary"`
}
type Dictionary struct {
Label string `json:"label"`
Value string `json:"value"`
}

2
QMPlusVuePage/src/view/login/login.vue

@ -20,7 +20,7 @@
<el-input
v-model="loginForm.captcha"
name="logVerify"
placeholder="请输入验证码(测试环境有问题可不输入 本地搭建环境可用)"
placeholder="请输入验证码"
maxlength="10"
/>
<img :src="path + picPath" alt="请输入验证码" @click="loginVefify()" class="vPic">

158
QMPlusVuePage/src/view/superAdmin/autoCode/index.vue

@ -0,0 +1,158 @@
<template>
<div>
<!-- 此版本为简单版 -->
<!-- 结构体基础配置 -->
<el-form ref="form" :model="form" label-width="100px" :inline="true">
<el-form-item label="结构名称" :span="8">
<el-input v-model="form.structName"></el-input>
</el-form-item>
<el-form-item label="结构类型" :span="8">
<el-select v-model="form.structType" multiple placeholder="请选择结构类型(多选)">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-form>
<!-- 组件列表 -->
<div class="button-box clearflex">
<el-button @click="editAndAddComponent()" type="primary">新增组件</el-button>
</div>
<el-table
:data="form.components"
border stripe>
<el-table-column
type="index"
label="序列"
width="180">
</el-table-column>
<el-table-column
prop="componentName"
label="组件名"
width="180">
</el-table-column>
<el-table-column
prop="componentType"
label="组件数据类型"
width="180">
</el-table-column>
<el-table-column
prop="componentShowType"
label="组件展示类型">
</el-table-column>
<el-table-column
prop="dictionaryName"
label="字典名称(选)">
</el-table-column>
<el-table-column
label="操作">
<template slot-scope="scope">
<el-button @click="editAndAddComponent(scope.row)">编辑</el-button>
<el-popover
placement="top"
width="160"
v-model="scope.row.visible">
<p>这是一段内容这是一段内容确定删除吗</p>
<div style="text-align: right; margin: 0">
<el-button size="mini" type="text" @click="scope.row.visible = false">取消</el-button>
<el-button type="primary" size="mini" @click="deleteComponent(scope.$index)">确定</el-button>
</div>
<el-button slot="reference">删除</el-button>
</el-popover>
</template>
</el-table-column>
</el-table>
<!-- 组件列表 -->
<div class="button-box clearflex">
<el-button @click="enterForm" type="primary">提交</el-button>
</div>
<!-- 组件弹窗 -->
<el-dialog title="组件内容" :visible.sync="dialogFlag">
<ComponentDialog :dialogMiddle="dialogMiddle" />
<div slot="footer" class="dialog-footer">
<el-button @click="closeDialog"> </el-button>
<el-button type="primary" @click="enterDialog"> </el-button>
</div>
</el-dialog>
</div>
</template>
<script>
const componentTemplate={
componentName:"",
componentType:"",
componentShowType:"",
dictionaryName:"",
isMultiple:false,
nideDictionary:false,
visible:false,
componentDictionary:[]
}
import ComponentDialog from "@/view/superAdmin/autoCode/component/componentDialog.vue"
export default {
name:"autoCode",
data(){
return{
addFlag:"",
form:{
structName:"",
structType:[],
components:[]
},
options:[
{label:"表格类型",value:"grid"},
{label:"表单类型",value:"form"}
],
dialogMiddle:{},
bk:{},
dialogFlag:false
}
},
components:{
ComponentDialog
},
methods:{
editAndAddComponent(item){
this.dialogFlag = true
if(item){
this.addFlag="edit"
this.bk=JSON.parse(JSON.stringify(item))
this.dialogMiddle = item
}else{
this.addFlag="add"
this.dialogMiddle = JSON.parse(JSON.stringify(componentTemplate))
}
},
enterDialog(){
if(this.addFlag=="add"){
this.form.components.push(this.dialogMiddle)
}
this.dialogFlag = false
},
closeDialog(){
if(this.addFlag=="edit"){
this.dialogMiddle = this.bk
}
this.dialogFlag = false
},
deleteComponent(index){
this.form.components.splice(index,1)
},
enterForm(){
console.log(this.form)
}
}
}
</script>
<style scope lang="scss">
.button-box {
padding: 10px 20px;
.el-button {
float: right;
}
}
</style>
Loading…
Cancel
Save