Form.vue
7.15 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<template>
<el-dialog :visible.sync="visible" fullscreen lock-scroll class="NCC-full-dialog"
:show-close="false" :modal="false" append-to-body>
<div class="NCC-full-dialog-header">
<div class="header-title">
<img src="@/assets/images/ncc.png" class="header-logo" />
<p class="header-txt"> · 代码生成</p>
</div>
<el-steps :active="activeStep" finish-status="success" simple class="steps steps2">
<el-step title="基础设置" @click.native="stepChick(0)"></el-step>
<el-step title="表单设计" @click.native="stepChick(1)"></el-step>
</el-steps>
<div class="options">
<el-button @click="prve" :disabled="activeStep<=0">{{$t('common.prev')}}</el-button>
<el-button @click="next" :disabled="activeStep>=1 || loading">{{$t('common.next')}}
</el-button>
<el-button type="primary" @click="dataFormSubmit()" :disabled="activeStep!=1"
:loading="btnLoading">{{$t('common.confirmButton')}}</el-button>
<el-button @click="closeDialog()">{{$t('common.cancelButton')}}</el-button>
</div>
</div>
<div class="main" v-loading="loading">
<el-row type="flex" justify="center" align="middle" v-if="!activeStep" class="basic-box">
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="10" class="basicForm">
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="80px"
@submit.native.prevent label-position="right">
<el-form-item label="模板名称" prop="fullName">
<el-input v-model="dataForm.fullName" placeholder="模板名称" maxlength="100">
</el-input>
</el-form-item>
<el-form-item label="模板编码" prop="enCode">
<el-input v-model="dataForm.enCode" placeholder="模板编码" maxlength="50">
</el-input>
</el-form-item>
<el-form-item label="模板分类" prop="category">
<el-select v-model="dataForm.category" placeholder="选择分类">
<el-option :key="item.id" :label="item.fullName" :value="item.id"
v-for="item in categoryList" />
</el-select>
</el-form-item>
<el-form-item label="模板说明" prop="description">
<el-input v-model="dataForm.description" placeholder="模板说明" type="textarea"
:rows="3" />
</el-form-item>
<el-form-item label="数据连接">
<el-select v-model="dataForm.dbLinkId" placeholder="请选择数据库" @change="onDbChange"
clearable>
<el-option-group v-for="group in dbOptions" :key="group.fullName"
:label="group.fullName">
<el-option v-for="item in group.children" :key="item.id" :label="item.fullName"
:value="item.id" />
</el-option-group>
</el-select>
</el-form-item>
<el-table :data="tables" class="NCC-common-table"
empty-text="点击“新增”可选择 1 条（单表）或 2 条以上（多表）">
<el-table-column type="index" label="序号" width="50" align="center" />
<el-table-column prop="typeId" label="类别" width="65">
<template slot-scope="scope">
<el-tag v-if="scope.row.typeId=='1'">主表</el-tag>
<el-tag type="warning" v-else @click="changeTable(scope.row)"
style="cursor:pointer" title="点击设置成主表">子表</el-tag>
</template>
</el-table-column>
<el-table-column prop="tableName" label="说明" />
<el-table-column prop="table" label="表名" />
<el-table-column prop="tableField" label="外键字段">
<template slot-scope="scope" v-if="scope.row.typeId !=='1'">
<el-select v-model="scope.row.tableField" placeholder="请选择">
<el-option v-for="item in scope.row.fields" :key="item.field"
:label="item.field" :value="item.field">
</el-option>
</el-select>
</template>
</el-table-column>
<!-- <el-table-column prop="relationTable" label="关联主表" /> -->
<el-table-column prop="relationField" label="关联主键">
<template slot-scope="scope" v-if="scope.row.typeId !=='1'">
<el-select v-model="scope.row.relationField" placeholder="请选择">
<el-option v-for="item in mainTableFields" :key="item.field" :label="item.field"
:value="item.field">
</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column label="操作" fixed="right" width="50">
<template slot-scope="scope">
<el-button size="mini" type="text" class="NCC-table-delBtn"
@click="delItem(scope.row,scope.$index)">删除
</el-button>
</template>
</el-table-column>
</el-table>
<div class="table-actions" @click="openTableBox">
<el-button type="text" icon="el-icon-plus">新增一行</el-button>
</div>
</el-form>
</el-col>
</el-row>
<template v-if="activeStep==1">
<Generator ref="generator" :conf="formData" :modelType="dataForm.type" />
</template>
</div>
<TableForm :visible.sync="formVisible" ref="tableForm" @closeForm="colseForm"
:dbLinkId="dataForm.dbLinkId" />
</el-dialog>
</template>
<script>
import { getVisualDevInfo, Update, Create } from '@/api/onlineDev/visualDev'
import Generator from '@/components/Generator/index/Home'
import TableForm from '../TableForm'
import mixin from '@/mixins/generator/form'
export default {
mixins: [mixin],
components: { Generator, TableForm },
data() {
return {
dataRule: {
fullName: [
{ required: true, message: '模板名称不能为空', trigger: 'blur' },
],
enCode: [
{ required: true, message: '模板编码不能为空', trigger: 'blur' },
{ validator: this.formValidate('enCode'), trigger: 'blur' },
],
category: [
{ required: true, message: '模板分类不能为空', trigger: 'change' },
]
}
}
},
methods: {
dataFormSubmit() {
this.$refs['generator'].getData().then(res => {
this.btnLoading = true
this.formData = res.formData
this.dataForm.formData = JSON.stringify(this.formData)
this.dataForm.tables = JSON.stringify(this.tables)
const formMethod = this.dataForm.id ? Update : Create
formMethod(this.dataForm).then((res) => {
this.$message({
message: res.msg,
type: 'success',
duration: 1500,
onClose: () => {
this.closeDialog(true)
}
})
}).catch(() => { this.btnLoading = false })
}).catch(err => {
err.msg && this.$message.warning(err.msg)
})
}
}
}
</script>