279 lines
11 KiB
Vue
279 lines
11 KiB
Vue
<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="columnLoading"
|
||
icon="el-icon-check"
|
||
size="mini"
|
||
style="float: right; padding: 6px 9px"
|
||
type="primary"
|
||
@click="saveColumnConfig">保存</el-button>
|
||
</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="DateRange"
|
||
value="DateRange"/>
|
||
</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-column label="实体关联">
|
||
<template slot-scope="scope">
|
||
<el-select v-model="data[scope.$index].joinName" filterable class="edit-input" clearable size="mini" placeholder="请选择" @change="toConfig">
|
||
<el-option v-for="item in tables" :key="item[0]" :label="item[0]" :value="item[0]"/>
|
||
</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="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="去表前缀" 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="Api路径">-->
|
||
<!-- <el-input v-model="form.apiPath"/>-->
|
||
<!-- <span style="color: #C0C0C0;margin-left: 10px;">Sender mailbox</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 initData from '@/mixins/initData'
|
||
import { update, get } from '@/api/genConfig'
|
||
import { save, getAllTable } from '@/api/generator'
|
||
import { getDicts } from '@/api/dict'
|
||
export default {
|
||
name: 'GeneratorConfig',
|
||
components: {},
|
||
mixins: [initData],
|
||
data() {
|
||
return {
|
||
activeName: 'first', tableName: '', tableHeight: 550, columnLoading: false, configLoading: false, dicts: [], tables: [],
|
||
form: { id: null, tableName: '', author: '', pack: '', path: '', moduleName: '', cover: 'false', apiPath: '', prefix: '' },
|
||
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' }
|
||
],
|
||
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
|
||
})
|
||
getAllTable().then(data => {
|
||
this.tables = 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({
|
||
title: '保存成功',
|
||
type: 'success',
|
||
duration: 2500
|
||
})
|
||
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
|
||
update(this.form).then(res => {
|
||
this.$notify({
|
||
title: '保存成功',
|
||
type: 'success',
|
||
duration: 2500
|
||
})
|
||
this.form = res
|
||
this.form.cover = this.form.cover.toString()
|
||
this.configLoading = false
|
||
}).catch(err => {
|
||
this.configLoading = false
|
||
console.log(err.response.data.message)
|
||
})
|
||
}
|
||
})
|
||
},
|
||
toConfig(tableName) {
|
||
if (tableName) {
|
||
this.$router.push('/sys-tools/generator/config/' + tableName)
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</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>
|