数据库管理

src/api/database.js

+import request from "@/utils/request"
+
+/* 数据库管理 */
+
+export function getDbPage(params = {}) {
+  return request({
+    url: "/cloud-upms/sys/db/info/page",
+    method: "get",
+    params,
+  })
+}
+
+export function addDb(data = {}) {
+  return request({
+    url: "/cloud-upms/sys/db/info",
+    method: "post",
+    data,
+  })
+}
+
+// 测试连接
+export function testDb(data = {}) {
+  return request({
+    url: "/cloud-upms/sys/db/info/test/connection",
+    method: "post",
+    data,
+  })
+}

src/components/DialogComponents/Form.vue

@@ -272,7 +272,7 @@
     </div>
     <div slot="footer">
       <el-button size="medium" v-if="btnCancel" @click="visible = false"
-        >取消</el-button
+        >取 消</el-button
       >
       <el-button
         size="medium"
@@ -281,6 +281,7 @@
         @click="handleConfirm"
         >{{ confirmText }}</el-button
       >
+      <slot name="otherButton" :form="form"></slot>
     </div>
   </el-dialog>
 </template>
@@ -301,7 +302,7 @@ export default {
   props: {
     confirmText: {
       type: String,
-      default: "确认",
+      default: "确 认",
     },
     appendToBody: {
       type: Boolean,

src/views/systems/database/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: 120,
+          value: "dbName",
+        },
+        {
+          label: "库表前缀",
+          minWidth: 80,
+          value: "prefix",
+        },
+
+        {
+          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: "内网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: "prefix",
+          rules: [{ required: true, message: "请输入库表前缀" }],
+          spanCount: 12,
+        },
+
+        {
+          type: "input",
+          label: "数据源名称",
+          placeholder: "请输入数据源名称",
+          prop: "dbName",
+          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: "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>

src/views/systems/field-config/index.vue

@@ -272,11 +272,17 @@ export default {
       this.widgetVisible = true
     },
     handleConfirm(form) {
+      if (!/^[a-z]+([a-z0-9]*([_]?[a-z]+)*)*$/.test(form.prop)) {
+        this.$message.error(
+          "只能包含字母、数字、下划线。必须以字母开始，下划线不可连续重复，下划线后不可紧跟着数字，不能以数字、下划线结束"
+        )
+        return
+      }
       form.tableName = this.$handle.formatDicList(
         this.dictMap["table"],
         form.tableCode
       )
-   
+
       const data = { jsonStr: JSON.stringify(form) }
       Object.keys(form).forEach((key) => {
         if (fields.includes(key)) {