<template> <a-modal :title="title" :width="800" :visible="visible" :confirmLoading="confirmLoading" @ok="handleOk" @cancel="handleCancel" cancelText="关闭"> <a-spin :spinning="confirmLoading"> <a-form :form="form"> <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="数据源编码"> <a-input placeholder="请输入数据源编码" :disabled="!!model.id" v-decorator="['code', validatorRules.code]"/> </a-form-item> <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="数据源名称"> <a-input placeholder="请输入数据源名称" v-decorator="['name', validatorRules.name]"/> </a-form-item> <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="数据库类型"> <j-dict-select-tag placeholder="请选择数据库类型" dict-code="database_type" triggerChange v-decorator="['dbType', validatorRules.dbType]" @change="handleDbTypeChange"/> </a-form-item> <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="驱动类"> <a-input placeholder="请输入驱动类" v-decorator="['dbDriver', validatorRules.dbDriver]"/> </a-form-item> <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="数据源地址"> <a-input placeholder="请输入数据源地址" v-decorator="['dbUrl', validatorRules.dbUrl]"/> </a-form-item> <!-- <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="数据库名称"> <a-input placeholder="请输入数据库名称" v-decorator="['dbName', validatorRules.dbName]"/> </a-form-item>--> <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="用户名"> <a-input placeholder="请输入用户名" v-decorator="['dbUsername', validatorRules.dbUsername]"/> </a-form-item> <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="密码"> <a-row :gutter="8"> <a-col :span="21"> <a-input-password placeholder="请输入密码" v-decorator="['dbPassword', validatorRules.dbPassword]"/> </a-col> <a-col :span="3"> <a-button type="primary" size="small" style="width: 100%" @click="handleTest">测试</a-button> </a-col> </a-row> </a-form-item> <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="备注"> <a-textarea placeholder="请输入备注" v-decorator="['remark', {}]"/> </a-form-item> </a-form> </a-spin> </a-modal> </template> <script> import pick from 'lodash.pick' import {httpAction, postAction} from '@/api/manage' import {validateDuplicateValue} from '@/utils/util' export default { name: 'SysDataSourceModal', components: {}, data() { return { title: '操作', visible: false, model: {}, labelCol: { xs: {span: 24}, sm: {span: 5}, }, wrapperCol: { xs: {span: 24}, sm: {span: 16}, }, confirmLoading: false, form: this.$form.createForm(this), validatorRules: { code: { validateFirst: true, rules: [ {required: true, message: '请输入数据源编码!'}, { validator: (rule, value, callback) => { let pattern = /^[a-z|A-Z][a-z|A-Z\d_-]{0,}$/ if (!pattern.test(value)) { callback('编码必须以字母开头,可包含数字、下划线、横杠') } else { validateDuplicateValue('sys_data_source', 'code', value, this.model.id, callback) } } } ] }, name: {rules: [{required: true, message: '请输入数据源名称!'}]}, dbType: {rules: [{required: true, message: '请选择数据库类型!'}]}, dbDriver: {rules: [{required: true, message: '请输入驱动类!'}]}, dbUrl: {rules: [{required: true, message: '请输入数据源地址!'}]}, dbName: {rules: [{required: true, message: '请输入数据库名称!'}]}, dbUsername: {rules: [{required: true, message: '请输入用户名!'}]}, dbPassword: {rules: [{required: false, message: '请输入密码!'}]} }, url: { add: '/sys/dataSource/add', edit: '/sys/dataSource/edit', }, dbDriverMap: { // MySQL 数据库 '1': {dbDriver: 'com.mysql.jdbc.Driver'}, //MySQL5.7+ 数据库 '4': {dbDriver: 'com.mysql.cj.jdbc.Driver'}, // Oracle '2': {dbDriver: 'oracle.jdbc.OracleDriver'}, // SQLServer 数据库 '3': {dbDriver: 'com.microsoft.sqlserver.jdbc.SQLServerDriver'}, // marialDB 数据库 '5': {dbDriver: 'org.mariadb.jdbc.Driver'}, // postgresql 数据库 '6': {dbDriver: 'org.postgresql.Driver'}, // 达梦 数据库 '7': {dbDriver: 'dm.jdbc.driver.DmDriver'}, // 人大金仓 数据库 '8': {dbDriver: 'com.kingbase8.Driver'}, // 神通 数据库 '9': {dbDriver: 'com.oscar.Driver'}, // SQLite 数据库 '10': {dbDriver: 'org.sqlite.JDBC'}, // DB2 数据库 '11': {dbDriver: 'com.ibm.db2.jcc.DB2Driver'}, // Hsqldb 数据库 '12': {dbDriver: 'org.hsqldb.jdbc.JDBCDriver'}, // Derby 数据库 '13': {dbDriver: 'org.apache.derby.jdbc.ClientDriver'}, // H2 数据库 '14': {dbDriver: 'org.h2.Driver'}, // 其他数据库 '15': {dbDriver: ''} }, dbUrlMap: { // MySQL 数据库 '1': {dbUrl: 'jdbc:mysql://127.0.0.1:3306/jeecg-boot?characterEncoding=UTF-8&useUnicode=true&useSSL=false'}, //MySQL5.7+ 数据库 '4': {dbUrl: 'jdbc:mysql://127.0.0.1:3306/jeecg-boot?characterEncoding=UTF-8&useUnicode=true&useSSL=false&tinyInt1isBit=false&allowPublicKeyRetrieval=true&serverTimezone=Asia/Shanghai'}, // Oracle '2': {dbUrl: 'jdbc:oracle:thin:@127.0.0.1:1521:ORCL'}, // SQLServer 数据库 '3': {dbUrl: 'jdbc:sqlserver://127.0.0.1:1433;SelectMethod=cursor;DatabaseName=jeecgboot'}, // Mariadb 数据库 '5': {dbUrl: 'jdbc:mariadb://127.0.0.1:3306/jeecg-boot?characterEncoding=UTF-8&useSSL=false'}, // Postgresql 数据库 '6': {dbUrl: 'jdbc:postgresql://127.0.0.1:5432/jeecg-boot'}, // 达梦 数据库 '7': {dbUrl: 'jdbc:dm://127.0.0.1:5236/?jeecg-boot&zeroDateTimeBehavior=convertToNull&useUnicode=true&characterEncoding=utf-8'}, // 人大金仓 数据库 '8': {dbUrl: 'jdbc:kingbase8://127.0.0.1:54321/jeecg-boot'}, // 神通 数据库 '9': {dbUrl: 'jdbc:oscar://192.168.1.125:2003/jeecg-boot'}, // SQLite 数据库 '10': {dbUrl: 'jdbc:sqlite://opt/test.db'}, // DB2 数据库 '11': {dbUrl: 'jdbc:db2://127.0.0.1:50000/jeecg-boot'}, // Hsqldb 数据库 '12': {dbUrl: 'jdbc:hsqldb:hsql://127.0.0.1/jeecg-boot'}, // Derby 数据库 '13': {dbUrl: 'jdbc:derby://127.0.0.1:1527/jeecg-boot'}, // H2 数据库 '14': {dbUrl: 'jdbc:h2:tcp://127.0.0.1:8082/jeecg-boot'}, // 其他数据库 '15': {dbUrl: ''} } } }, created() { }, methods: { add() { this.edit({}) }, edit(record) { this.form.resetFields() this.model = Object.assign({}, record) this.visible = true this.$nextTick(() => { this.form.setFieldsValue(pick(this.model, 'code', 'name', 'remark', 'dbType', 'dbDriver', 'dbUrl', 'dbName', 'dbUsername', 'dbPassword')) }) }, close() { this.$emit('close') this.visible = false }, handleOk() { // 触发表单验证 this.form.validateFields((err, values) => { if (!err) { this.confirmLoading = true let formData = Object.assign(this.model, values) let httpUrl = this.url.add, method = 'post' if (this.model.id) { httpUrl = this.url.edit method = 'put' // 由于编码的特殊性,所以不能更改 formData['code'] = undefined } httpAction(httpUrl, formData, method).then((res) => { if (res.success) { this.$message.success(res.message) this.$emit('ok') this.close() } else { this.$message.warning(res.message) } }).finally(() => { this.confirmLoading = false }) } }) }, handleCancel() { this.close() }, // 测试数据源配置是否可以正常连接 handleTest() { let keys = ['dbType', 'dbDriver', 'dbUrl', 'dbName', 'dbUsername', 'dbPassword'] // 获取以上字段的值,并清除校验状态 let fieldsValues = this.form.getFieldsValue(keys) let setFields = {} keys.forEach(key => setFields[key] = {value: fieldsValues[key], errors: null}) // 清除校验状态,目的是可以让错误文字闪烁 this.form.setFields(setFields) // 重新校验 this.$nextTick(() => { this.form.validateFields(keys, (errors, values) => { if (!errors) { let loading = this.$message.loading('连接中……', 0) postAction('/online/cgreport/api/testConnection', fieldsValues).then(res => { if (res.success) { this.$message.success('连接成功') } else throw new Error(res.message) }).catch(error => { this.$warning({title: '连接失败', content: error.message || error}) }).finally(() => loading()) } }) }) }, // 数据库类型更改时,联动更改数据库驱动 handleDbTypeChange(val) { let dbDriver = this.dbDriverMap[val] let dbUrl = this.dbUrlMap[val] if (dbDriver) { this.form.setFieldsValue(dbDriver) } if (dbUrl) { this.form.setFieldsValue(dbUrl) } }, } } </script> <style lang="less" scoped></style>