data-room/data-room-ui/packages/DataSourceManagement/src/setDatasource.vue

<template>
  <el-dialog
    width="700px"
    :title="title"
    :visible.sync="setDatasourceVisible"
    :append-to-body="true"
    :close-on-click-modal="false"
    :before-close="handleClose"
    class="bs-dialog-wrap bs-el-dialog"
  >
    <div
      v-loading="linkLoading"
      element-loading-text="正在测试连接..."
      style="padding-right: 80px;"
    >
      <el-form
        ref="dataForm"
        class="bs-el-form"
        :model="dataForm"
        :rules="dataForm.id ? updateRules : rules"
        size="small"
        label-position="right"
        :label-width="dataForm.advanceSettingFlag ? '200px' : '150px'"
      >
        <el-form-item
          label="类型"
          prop="sourceType"
        >
          <el-select
            v-model="dataForm.sourceType"
            placeholder="请选择类型"
            class="bs-el-select"
            popper-class="bs-el-select"
            clearable
            filterable
            @change="sourceTypeChange"
          >
            <el-option
              v-for="sourceType in sourceTypeList"
              :key="sourceType.code"
              :label="sourceType.label"
              :value="sourceType.code"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="数据源名称"
          prop="sourceName"
        >
          <el-input
            v-model="dataForm.sourceName"
            placeholder="请输入数据源名称"
            class="bs-el-input"
            maxlength="200"
          />
        </el-form-item>
        <el-form-item
          label="JDBC URL"
          prop="url"
        >
          <el-input
            v-model="dataForm.url"
            placeholder="请输入JDBC URL"
            class="bs-el-input"
            type="textarea"
            rows="4"
            @keydown.enter.native="textareaKeydown"
          />
        </el-form-item>
        <el-form-item
          label="用户名"
          prop="username"
        >
          <el-input
            v-model="dataForm.username"
            placeholder="请输入用户名"
            class="bs-el-input"
          />
        </el-form-item>
        <el-form-item
          label="密码"
          prop="password"
        >
          <el-input
            v-model="dataForm.password"
            :placeholder="dataForm.id ? '请输入密码，不输入代表不更新' : '请输入密码'"
            class="bs-el-input"
            type="password"
            show-password
          />
        </el-form-item>
        <el-form-item
          label="备注"
          prop="remark"
        >
          <el-input
            v-model="dataForm.remark"
            placeholder="请输入备注"
            class="bs-el-input"
            type="textarea"
            rows="4"
            maxlength="200"
            @keydown.enter.native="textareaKeydown"
          />
        </el-form-item>
        <template v-if="dataForm.advanceSettingFlag">
          <el-form-item label="初始化连接数">
            <el-input v-model="dataForm.initConnNum" />
          </el-form-item>
          <el-form-item label="最大活动连接数">
            <el-input v-model="dataForm.maxActiveConnNum" />
          </el-form-item>
          <el-form-item label="最大空闲连接数">
            <el-input v-model="dataForm.maxIdleConnNum" />
          </el-form-item>
          <el-form-item label="最小空闲连接数">
            <el-input v-model="dataForm.minIdleConnNum" />
          </el-form-item>
          <el-form-item label="最大等待时间 (ms)">
            <el-input v-model="dataForm.maxWaitConnNum" />
          </el-form-item>
          <el-form-item label="SQL验证查询">
            <el-input
              v-model="dataForm.sqlCheck"
              type="text"
            />
          </el-form-item>
          <el-form-item label="获取连接前校验">
            <el-select
              v-model="dataForm.getconnCheckFlag"
              clearable
            >
              <el-option
                label="是"
                :value="1"
              />
              <el-option
                label="否"
                :value="0"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="归还连接前校验">
            <el-select
              v-model="dataForm.returnCheckFlag"
              clearable
            >
              <el-option
                label="是"
                :value="1"
              />
              <el-option
                label="否"
                :value="0"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="开启空闲回收器校验">
            <el-select
              v-model="dataForm.startIdleCheckFlag"
              clearable
            >
              <el-option
                label="是"
                :value="1"
              />
              <el-option
                label="否"
                :value="0"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="空闲连接回收器休眠时间 (ms)">
            <el-input v-model="dataForm.idleConnDormantTime" />
          </el-form-item>
          <el-form-item label="空闲连接回收检查数">
            <el-input v-model="dataForm.idleConnCheckNum" />
          </el-form-item>
          <el-form-item label="保持空闲最小时间值 (s)">
            <el-input v-model="dataForm.keepIdleMinTime" />
          </el-form-item>
        </template>
      </el-form>
    </div>

    <span
      slot="footer"
      class="dialog-footer"
    >
      <el-button
        type="primary"
        @click="sourceLinkCheck"
      >
        测试
      </el-button>
      <el-button
        class="bs-el-button-default"
        @click="handleClose"
      >
        取消
      </el-button>
      <el-button
        type="primary"
        @click="submitForm"
      >
        确定
      </el-button>
    </span>
  </el-dialog>
</template>

<script>
import { checkRepeat, sourceLinkTest, add, update } from 'data-room-ui/js/utils/dataSourceService'
export default {
  props: {
    appCode: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      setDatasourceVisible: false,
      title: '',
      linkLoading: false,
      dataForm: {
        id: '',
        sourceName: '',
        sourceType: 'mysql',
        driverClassName: 'com.mysql.jdbc.Driver',
        username: '',
        password: '',
        url: 'jdbc:mysql://localhost:3306/db_name?serverTimezone=GMT%2B8&useUnicode=true&characterEncoding=utf-8&useSSL=false&useOldAliasMetadataBehavior=true',
        remark: ''
      },
      rules: {
        sourceType: [
          { required: true, message: '请选择数据源类型', trigger: 'blur' }
        ],
        sourceName: [
          { required: true, message: '请输入数据源名称', trigger: 'blur' },
          { validator: this.validateSourceName, trigger: 'blur' }
        ],
        driverClassName: [
          { required: true, message: '请选择连接驱动', trigger: 'blur' }
        ],
        database: [
          { required: true, message: '请输入数据库名称', trigger: 'blur' },
          { pattern: /^[^\u4e00-\u9fa5]+$/, message: '数据库名称不能包含汉字' }
        ],
        host: [
          { required: true, message: '请输入主机号', trigger: 'blur' },
          {
            pattern: /((25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))/,
            message: '主机号格式有误'
          }
        ],
        port: [
          { required: true, message: '请输入端口', trigger: 'blur' },
          { pattern: /^[0-9]*$/, message: '端口号只能为数字' }
        ],
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { pattern: /^[^\u4e00-\u9fa5]+$/, message: '用户名不能包含汉字' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        url: [
          { required: true, message: '请输入连接url', trigger: 'blur' }
        ],
        coding: [
          { required: true, message: '请选择编码', trigger: 'blur' }
        ]
      },
      updateRules: {
        sourceType: [
          { required: true, message: '请选择数据源类型', trigger: 'blur' }
        ],
        sourceName: [
          { required: true, message: '请输入数据源名称', trigger: 'blur' },
          { validator: this.validateSourceName, trigger: 'blur' }
        ],
        driverClassName: [
          { required: true, message: '请选择连接驱动', trigger: 'blur' }
        ],
        database: [
          { required: true, message: '请输入数据库名称', trigger: 'blur' },
          { pattern: /^[^\u4e00-\u9fa5]+$/, message: '数据库名称不能包含汉字' }
        ],
        url: [
          { required: true, message: '请输入连接url', trigger: 'blur' }
        ],
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { pattern: /^[^\u4e00-\u9fa5]+$/, message: '用户名不能包含汉字' }
        ]
      }
    }
  },
  computed: {
    sourceTypeList () {
      return window.BS_CONFIG?.sourceTypeList || [
        { label: 'Mysql', code: 'mysql', name: 'com.mysql.jdbc.Driver', url: 'jdbc:mysql://localhost:3306/db_name?serverTimezone=GMT%2B8&useUnicode=true&characterEncoding=utf-8&useSSL=false&useOldAliasMetadataBehavior=true' },
        { label: 'ClickHouse', code: 'clickhouse', name: 'ru.yandex.clickhouse.ClickHouseDriver', url: 'jdbc:clickhouse://localhost:8123/db_name' },
        { label: 'PostgreSQL', code: 'postgresql', name: 'org.postgresql.Driver', url: 'jdbc:postgresql://localhost:13308/db_name' },
        { label: 'Oracle', code: 'oracle', name: 'oracle.jdbc.driver.OracleDriver', url: 'jdbc:oracle:thin:@localhost:1521:orcl' },
        { label: 'Sqlserver', code: 'sqlserver', name: 'com.microsoft.sqlserver.jdbc.SQLServerDriver', url: 'jdbc:sqlserver://localhost:1433;databaseName=db_name' }
      ]
    }
  },
  methods: {
    // 初始化
    init (row) {
      // 清除表单验证
      if (this.$refs.dataForm) {
        this.$refs.dataForm.clearValidate()
      }
      if (row && row.id) {
        this.dataForm = row
      }
    },
    // 名称校验
    validateSourceName (rule, value, callback) {
      checkRepeat({
        id: this.dataForm.id,
        sourceName: this.dataForm.sourceName,
        moduleCode: this.appCode
      }).then(r => {
        if (r) {
          callback(new Error('数据源名称已存在'))
        } else {
          callback()
        }
      })
    },
    // 数据源类型选择
    sourceTypeChange (code) {
      if (!this.dataForm.id && code) {
        this.dataForm.driverClassName = this.sourceTypeList.find(item => item.code === code)?.name
        this.$set(this.dataForm, 'url', this.sourceTypeList.find(item => item.code === code)?.url)
      }
    },
    // 阻止文本域回车换行
    textareaKeydown () {
      const e = window.event || arguments[0]
      if (e.key === 'Enter' || e.code === 'Enter' || e.keyCode === 13) {
        e.returnValue = false
        return false
      }
    },
    // 连接测试
    sourceLinkCheck () {
      let flag = 0
      this.$refs.dataForm.validate((valid) => {
        if (!valid) {
          flag = 1
          return false
        } else {
          if (flag === 0) {
            this.sourceLinkTest(this.dataForm)
          }
        }
      })
    },
    sourceLinkTest (row) {
      this.linkLoading = true
      sourceLinkTest(row).then((r) => {
        this.$message.success(r)
        this.linkLoading = false
      }).catch(() => {
        this.linkLoading = false
      })
    },
    // 取消重制
    handleClose () {
      this.$refs.dataForm.resetFields()
      this.dataForm = {
        id: '',
        sourceName: '',
        sourceType: 'mysql',
        driverClassName: 'com.mysql.jdbc.Driver',
        username: '',
        password: '',
        url: 'jdbc:mysql://localhost:3306/db_name?serverTimezone=GMT%2B8&useUnicode=true&characterEncoding=utf-8&useSSL=false&useOldAliasMetadataBehavior=true',
        remark: ''
      }
      this.setDatasourceVisible = false
    },
    // 保存
    submitForm () {
      // mysql 需要包含useOldAliasMetadataBehavior
      // if (this.dataForm.sourceType == 'Mysql') {
      //   if (this.dataForm.url.indexOf('useOldAliasMetadataBehavior') == -1) {
      //     if (this.dataForm.url.indexOf('?') == -1) {
      //       this.dataForm.url = this.dataForm.url + '?useOldAliasMetadataBehavior=true'
      //     } else {
      //       this.dataForm.url = this.dataForm.url + '&useOldAliasMetadataBehavior=true'
      //     }
      //   }
      // }
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          if (this.dataForm.id) {
            update({
              ...this.dataForm,
              moduleCode: this.appCode,
              editable: this.appCode ? 1 : 0
            }).then(() => {
              this.$message.success('保存成功')
              // 刷新表格
              this.$emit('refreshTable')
              this.handleClose()
            })
          } else {
            add({
              ...this.dataForm,
              moduleCode: this.appCode,
              editable: this.appCode ? 1 : 0
            }).then(() => {
              this.$message.success('保存成功')
              // 刷新表格
              this.$emit('refreshTable')
              this.handleClose()
            })
          }
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../assets//style/bsTheme.scss';
</style>