index.vue

<template>
  <div class="container">
    <direct-search
      ref="form"
      :label-position="'right'"
      :forms="searchList"
      :style="{ textAlign: 'left' }"
      @handleSearch="handleFormSearch"
    />
    <el-table-self
      ref="table"
      :table-data="tableData"
      :columns="columns"
      :list-loading="listLoading"
      :current-page="pageIndex"
      :total-count="total"
      :page-sizes="pageSizes"
      :page-size="pageSize"
      @pageSizeChange="handleSizeChange"
      @currentPageChange="handleCurrentChange"
    />
    <dialog-form
      width="800px"
      :close-modal="false"
      ref="dialog"
      :title="formEdit.id ? '编辑数据库' : '添加数据库'"
      :form-edit="formEdit"
      :form-data="formData"
      @handleConfirm="handleConfirm"
      confirmText="保 存"
    >
      <template #otherButton="scoped">
        <el-button
          size="medium"
          :loading="loading"
          type="primary"
          @click="testDb(scoped.form)"
          >测试连接</el-button
        >
      </template>
    </dialog-form>
  </div>
</template>

<script>
import paginationMixin from "@/components/TabComponents/mixin"
import { getDbPage, addDb, testDb } from "@/api/database.js"

export default {
  name: "Database",
  data() {
    return {
      listLoading: false,
      // 查询列表
      searchList: [
        {
          label: "数据库名称",
          type: "input",
          prop: "dbName",
          placeholder: "请输入数据库名称",
        },
        {
          type: "button",
          value: "查询",
          icon: "el-icon-search",
        },
        {
          type: "button",
          color: "primary",
          icon: "el-icon-plus",
          value: "添加",
          func: this.handleAdd,
        },
      ],
      columns: [
        {
          label: "数据库名称",
          minWidth: 180,
          value: "dbName",
        },
        {
          label: "数据源名称",
          minWidth: 120,
          value: "name",
        },

        {
          label: "数据源驱动",
          minWidth: 80,
          value: "driverClassName",
          formatter: (row) => {
            return this.$handle.formatDicList(
              this.dictMap["db_driver"],
              row.driverClassName
            )
          },
        },
        {
          label: "数据源类型",
          minWidth: 80,
          value: "type",
          formatter: (row) => {
            return this.$handle.formatDicList(this.dictMap["db_type"], row.type)
          },
        },
        {
          label: "库表前缀",
          minWidth: 80,
          value: "prefix",
        },

        {
          label: "内网url",
          minWidth: 120,
          value: "inteUrl",
        },
        {
          label: "内网host",
          minWidth: 120,
          value: "inteHost",
        },
        {
          label: "外网url",
          minWidth: 120,
          value: "outUrl",
        },
        {
          label: "外网host",
          minWidth: 120,
          value: "outHost",
        },
        {
          label: "端口",
          minWidth: 60,
          value: "port",
        },

        {
          label: "用户名",
          minWidth: 120,
          value: "username",
        },
        {
          label: "操作",
          width: 120,
          fixed: "right",
          operType: "button",
          operations: [
            {
              func: this.handleAdd,
              formatter(row) {
                return {
                  label: "编辑",
                  type: "primary",
                }
              },
            },
          ],
        },
      ],
      tableData: [],
      cacheForm: {},
      title: "",
      formData: [
        {
          type: "input",
          label: "数据库名称",
          placeholder: "请输入数据库名称",
          prop: "dbName",
          rules: [{ required: true, message: "请输入数据库名称" }],
          spanCount: 12,
        },
        {
          type: "input",
          label: "数据源名称",
          placeholder: "请输入数据源名称",
          prop: "name",
          rules: [{ required: true, message: "请输入数据源名称" }],
          spanCount: 12,
        },
        {
          type: "select",
          label: "数据源驱动",
          prop: "driverClassName",
          rules: [{ required: true, message: "请输入数据源驱动" }],
          optsFormatter: () => {
            return this.dictMap && this.dictMap["db_driver"]
          },
          spanCount: 12,
        },
        {
          type: "input",
          label: "库表前缀",
          placeholder: "请输入库表前缀",
          prop: "prefix",
          rules: [{ required: true, message: "请输入库表前缀" }],
          spanCount: 12,
        },

        {
          type: "select",
          label: "数据源类型",
          prop: "type",
          rules: [{ required: true, message: "请输入数据源类型" }],
          optsFormatter: () => {
            return this.dictMap && this.dictMap["db_type"]
          },
          spanCount: 12,
        },
        {
          type: "input",
          label: "端口",
          placeholder: "请输入端口",
          prop: "port",
          spanCount: 12,
          rules: [{ required: true, message: "请输入端口" }],
        },
        {
          type: "input",
          label: "内网url",
          placeholder: "请输入内网url",
          prop: "inteUrl",
          rules: [{ required: true, message: "请输入内网url" }],
          spanCount: 12,
        },
        {
          type: "input",
          label: "内网host",
          placeholder: "请输入内网host",
          prop: "inteHost",
          spanCount: 12,
        },
        {
          type: "input",
          label: "外网url",
          placeholder: "请输入外网url",
          prop: "outUrl",
          rules: [{ required: true, message: "请输入外网url" }],
          spanCount: 12,
        },
        {
          type: "input",
          label: "外网host",
          placeholder: "请输入外网host",
          prop: "outHost",
          spanCount: 12,
        },
        {
          type: "input",
          label: "用户名",
          placeholder: "请输入用户名",
          prop: "username",
          rules: [{ required: true, message: "请输入用户名" }],
          spanCount: 12,
        },
        {
          type: "input",
          label: "密码",
          placeholder: "请输入密码",
          prop: "pwd",
          rules: [{ required: true, message: "请输入密码" }],
          spanCount: 12,
        },
      ],
      formEdit: {},
      loading: false,
    }
  },
  mixins: [paginationMixin],

  methods: {
    handleAdd(row = {}) {
      this.formEdit = { ...row }
      this.$refs.dialog.open()
    },
    testDb(form) {
      this.loading = true
      testDb(form)
        .then((res) => {
          this.$message.info(res.data)
        })
        .finally(() => {
          this.loading = false
        })
    },
    handleConfirm(form) {
      const data = { ...form }
      const msg = data.id ? "编辑成功" : "新增成功"
      addDb(data)
        .then((res) => {
          this.$message.success(msg)
          this.handleSearch()
          this.$refs.dialog.close()
        })
        .finally(() => {
          this.$refs.dialog.loading = false
        })
    },

    // 查询
    handleFormSearch(form) {
      this.pageIndex = 1
      this.handleSearch(form)
    },
    handleSearch(form) {
      Object.assign(this.cacheForm, form)
      this.listLoading = true
      const params = { ...this.cacheForm }
      for (let key in params) {
        if (params[key] === "") {
          delete params[key]
        }
      }
      params.current = this.pageIndex
      params.size = this.pageSize
      getDbPage(params).then((res) => {
        this.listLoading = false
        if (res.code === 1) {
          const d = res.data
          this.tableData = d.records || []
          this.total = Number(d.total)
        }
      })
    },
  },
  created() {
    this.handleFormSearch()
  },
}
</script>