You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
326 lines
13 KiB
326 lines
13 KiB
<template> |
|
<div class="app-container"> |
|
<el-row :gutter="15"> |
|
<el-col style="margin-bottom: 10px"> |
|
<el-card class="box-card" shadow="never"> |
|
<div slot="header" class="clearfix"> |
|
<span class="role-span">字段配置：{{ tableName }}</span> |
|
<el-button |
|
:loading="genLoading" |
|
icon="el-icon-s-promotion" |
|
size="mini" |
|
style="float: right; padding: 6px 9px;" |
|
type="success" |
|
@click="toGen" |
|
>保存&生成</el-button> |
|
<el-button |
|
:loading="columnLoading" |
|
icon="el-icon-check" |
|
size="mini" |
|
style="float: right; padding: 6px 9px;margin-right: 9px" |
|
type="primary" |
|
@click="saveColumnConfig" |
|
>保存</el-button> |
|
<el-tooltip class="item" effect="dark" content="数据库中表字段变动时使用该功能" placement="top-start"> |
|
<el-button |
|
:loading="syncLoading" |
|
icon="el-icon-refresh" |
|
size="mini" |
|
style="float: right; padding: 6px 9px;" |
|
type="info" |
|
@click="sync" |
|
>同步</el-button> |
|
</el-tooltip> |
|
</div> |
|
<el-form size="small" label-width="90px"> |
|
<el-table v-loading="loading" :data="data" :max-height="tableHeight" size="small" style="width: 100%;margin-bottom: 15px"> |
|
<el-table-column prop="columnName" label="字段名称" /> |
|
<el-table-column prop="columnType" label="字段类型" /> |
|
<el-table-column prop="remark" label="字段描述"> |
|
<template slot-scope="scope"> |
|
<el-input v-model="data[scope.$index].remark" size="mini" class="edit-input" /> |
|
</template> |
|
</el-table-column> |
|
<el-table-column align="center" label="必填" width="70px"> |
|
<template slot-scope="scope"> |
|
<el-checkbox v-model="data[scope.$index].notNull" /> |
|
</template> |
|
</el-table-column> |
|
<el-table-column align="center" label="列表" width="70px"> |
|
<template slot-scope="scope"> |
|
<el-checkbox v-model="data[scope.$index].listShow" /> |
|
</template> |
|
</el-table-column> |
|
<el-table-column align="center" label="表单" width="70px"> |
|
<template slot-scope="scope"> |
|
<el-checkbox v-model="data[scope.$index].formShow" /> |
|
</template> |
|
</el-table-column> |
|
<el-table-column label="表单类型"> |
|
<template slot-scope="scope"> |
|
<el-select v-model="data[scope.$index].formType" filterable class="edit-input" clearable size="mini" placeholder="请选择"> |
|
<el-option |
|
label="文本框" |
|
value="Input" |
|
/> |
|
<el-option |
|
label="文本域" |
|
value="Textarea" |
|
/> |
|
<el-option |
|
label="单选框" |
|
value="Radio" |
|
/> |
|
<el-option |
|
label="下拉框" |
|
value="Select" |
|
/> |
|
<el-option |
|
label="日期框" |
|
value="Date" |
|
/> |
|
</el-select> |
|
</template> |
|
</el-table-column> |
|
<el-table-column label="查询方式"> |
|
<template slot-scope="scope"> |
|
<el-select v-model="data[scope.$index].queryType" filterable class="edit-input" clearable size="mini" placeholder="请选择"> |
|
<el-option |
|
label="=" |
|
value="=" |
|
/> |
|
<el-option |
|
label="!=" |
|
value="!=" |
|
/> |
|
<el-option |
|
label=">=" |
|
value=">=" |
|
/> |
|
<el-option |
|
label="<=" |
|
value="<=" |
|
/> |
|
<el-option |
|
label="Like" |
|
value="Like" |
|
/> |
|
<el-option |
|
label="NotNull" |
|
value="NotNull" |
|
/> |
|
<el-option |
|
label="BetWeen" |
|
value="BetWeen" |
|
/> |
|
</el-select> |
|
</template> |
|
</el-table-column> |
|
<el-table-column label="日期注解"> |
|
<template slot-scope="scope"> |
|
<el-select v-model="data[scope.$index].dateAnnotation" filterable class="edit-input" clearable size="mini" placeholder="请选择"> |
|
<el-option |
|
label="自动创建时间" |
|
value="CreationTimestamp" |
|
/> |
|
<el-option |
|
label="自动更新时间" |
|
value="UpdateTimestamp" |
|
/> |
|
</el-select> |
|
</template> |
|
</el-table-column> |
|
<el-table-column label="关联字典"> |
|
<template slot-scope="scope"> |
|
<el-select v-model="data[scope.$index].dictName" filterable class="edit-input" clearable size="mini" placeholder="请选择"> |
|
<el-option v-for="item in dicts" :key="item.id" :label="item.remark === '' ? item.name : item.remark" :value="item.name" /> |
|
</el-select> |
|
</template> |
|
</el-table-column> |
|
</el-table> |
|
</el-form> |
|
</el-card> |
|
</el-col> |
|
<el-col> |
|
<el-card class="box-card" shadow="never"> |
|
<div slot="header" class="clearfix"> |
|
<span class="role-span">生成配置</span> |
|
<el-button |
|
:loading="configLoading" |
|
icon="el-icon-check" |
|
size="mini" |
|
style="float: right; padding: 6px 9px" |
|
type="primary" |
|
@click="doSubmit" |
|
>保存</el-button> |
|
</div> |
|
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="78px"> |
|
<el-form-item label="作者名称" prop="author"> |
|
<el-input v-model="form.author" style="width: 40%" /> |
|
<span style="color: #C0C0C0;margin-left: 10px;">类上面的作者名称</span> |
|
</el-form-item> |
|
<el-form-item label="模块名称" prop="moduleName"> |
|
<el-input v-model="form.moduleName" style="width: 40%" /> |
|
<span style="color: #C0C0C0;margin-left: 10px;">模块的名称，请选择项目中已存在的模块</span> |
|
</el-form-item> |
|
<el-form-item label="至于包下" prop="pack"> |
|
<el-input v-model="form.pack" style="width: 40%" /> |
|
<span style="color: #C0C0C0;margin-left: 10px;">项目包的名称，生成的代码放到哪个包里面</span> |
|
</el-form-item> |
|
<el-form-item label="接口名称" prop="apiAlias"> |
|
<el-input v-model="form.apiAlias" style="width: 40%" /> |
|
<span style="color: #C0C0C0;margin-left: 10px;">接口的名称，用于控制器与接口文档中</span> |
|
</el-form-item> |
|
<el-form-item label="前端路径" prop="path"> |
|
<el-input v-model="form.path" style="width: 40%" /> |
|
<span style="color: #C0C0C0;margin-left: 10px;">输入views文件夹下的目录，不存在即创建</span> |
|
</el-form-item> |
|
<!-- <el-form-item label="接口目录">--> |
|
<!-- <el-input v-model="form.apiPath" style="width: 40%" />--> |
|
<!-- <span style="color: #C0C0C0;margin-left: 10px;">Api存放路径[src/api]，为空则自动生成路径</span>--> |
|
<!-- </el-form-item>--> |
|
<el-form-item label="去表前缀" prop="prefix"> |
|
<el-input v-model="form.prefix" placeholder="默认不去除表前缀" style="width: 40%" /> |
|
<span style="color: #C0C0C0;margin-left: 10px;">默认不去除表前缀，可自定义</span> |
|
</el-form-item> |
|
<el-form-item label="是否覆盖" prop="cover"> |
|
<el-radio-group v-model="form.cover" size="mini" style="width: 40%"> |
|
<el-radio-button label="true">是</el-radio-button> |
|
<el-radio-button label="false">否</el-radio-button> |
|
</el-radio-group> |
|
<span style="color: #C0C0C0;margin-left: 10px;">谨防误操作，请慎重选择</span> |
|
</el-form-item> |
|
</el-form> |
|
</el-card> |
|
</el-col> |
|
</el-row> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import crud from '@/mixins/crud' |
|
import { update, get } from '@/api/generator/genConfig' |
|
import { save, sync, generator } from '@/api/generator/generator' |
|
import { getDicts } from '@/api/system/dict' |
|
export default { |
|
name: 'GeneratorConfig', |
|
components: {}, |
|
mixins: [crud], |
|
data() { |
|
return { |
|
activeName: 'first', tableName: '', tableHeight: 550, columnLoading: false, configLoading: false, dicts: [], syncLoading: false, genLoading: false, |
|
form: { id: null, tableName: '', author: '', pack: '', path: '', moduleName: '', cover: 'false', apiPath: '', prefix: '', apiAlias: null }, |
|
rules: { |
|
author: [ |
|
{ required: true, message: '作者不能为空', trigger: 'blur' } |
|
], |
|
pack: [ |
|
{ required: true, message: '包路径不能为空', trigger: 'blur' } |
|
], |
|
moduleName: [ |
|
{ required: true, message: '包路径不能为空', trigger: 'blur' } |
|
], |
|
path: [ |
|
{ required: true, message: '前端路径不能为空', trigger: 'blur' } |
|
], |
|
apiAlias: [ |
|
{ required: true, message: '接口名称不能为空', trigger: 'blur' } |
|
], |
|
cover: [ |
|
{ required: true, message: '不能为空', trigger: 'blur' } |
|
] |
|
} |
|
} |
|
}, |
|
created() { |
|
this.tableHeight = document.documentElement.clientHeight - 385 |
|
this.tableName = this.$route.params.tableName |
|
this.$nextTick(() => { |
|
this.init() |
|
get(this.tableName).then(data => { |
|
this.form = data |
|
this.form.cover = this.form.cover.toString() |
|
}) |
|
getDicts().then(data => { |
|
this.dicts = data |
|
}) |
|
}) |
|
}, |
|
methods: { |
|
beforeInit() { |
|
this.url = 'api/generator/columns' |
|
const tableName = this.tableName |
|
this.params = { tableName } |
|
return true |
|
}, |
|
saveColumnConfig() { |
|
this.columnLoading = true |
|
save(this.data).then(res => { |
|
this.notify('保存成功', 'success') |
|
this.columnLoading = false |
|
}).catch(err => { |
|
this.columnLoading = false |
|
console.log(err.response.data.message) |
|
}) |
|
}, |
|
doSubmit() { |
|
this.$refs['form'].validate((valid) => { |
|
if (valid) { |
|
this.configLoading = true |
|
this.form.apiPath=''; |
|
update(this.form).then(res => { |
|
this.notify('保存成功', 'success') |
|
this.form = res |
|
this.form.cover = this.form.cover.toString() |
|
this.configLoading = false |
|
}).catch(err => { |
|
this.configLoading = false |
|
console.log(err.response.data.message) |
|
}) |
|
} |
|
}) |
|
}, |
|
sync() { |
|
this.syncLoading = true |
|
sync([this.tableName]).then(() => { |
|
this.init() |
|
this.notify('同步成功', 'success') |
|
this.syncLoading = false |
|
}).then(() => { |
|
this.syncLoading = false |
|
}) |
|
}, |
|
toGen() { |
|
this.genLoading = true |
|
save(this.data).then(res => { |
|
this.notify('保存成功', 'success') |
|
// 生成代码 |
|
generator(this.tableName, 0).then(data => { |
|
this.genLoading = false |
|
this.notify('生成成功', 'success') |
|
}).catch(err => { |
|
this.genLoading = false |
|
console.log(err.response.data.message) |
|
}) |
|
}).catch(err => { |
|
this.genLoading = false |
|
console.log(err.response.data.message) |
|
}) |
|
} |
|
} |
|
} |
|
</script> |
|
|
|
<style rel="stylesheet/scss" lang="scss"> |
|
.edit-input { |
|
.el-input__inner { |
|
border: 1px solid #e5e6e7; |
|
} |
|
} |
|
</style> |
|
|
|
<style scoped> |
|
/deep/ .input-with-select .el-input-group__prepend { |
|
background-color: #fff; |
|
} |
|
</style>
|
|
|