From 103619db701039701be5830d58176e82b3464966 Mon Sep 17 00:00:00 2001
From: houll <houliangliang@haizhi.com>
Date: Mon, 18 Mar 2024 19:35:03 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=95=B0=E6=8D=AE=E6=BA=90=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE=E9=A1=B5=E9=9D=A2=E9=87=8D=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 front-ui/src/views/datasource/DsConfig.vue | 297 +++++++++++++++++++++
 front-ui/src/views/datasource/DsList.vue   |  19 +-
 front-ui/src/views/datasource/const.js     |  61 ++++-
 3 files changed, 368 insertions(+), 9 deletions(-)
 create mode 100644 front-ui/src/views/datasource/DsConfig.vue

diff --git a/front-ui/src/views/datasource/DsConfig.vue b/front-ui/src/views/datasource/DsConfig.vue
new file mode 100644
index 0000000..dee3bc1
--- /dev/null
+++ b/front-ui/src/views/datasource/DsConfig.vue
@@ -0,0 +1,297 @@
+<template>
+  <a-modal
+    :title="title"
+    :width="640"
+    :visible="visible"
+    :confirmLoading="confirmLoading"
+    :maskClosable="false"
+    @cancel="handleCancel"
+  >
+    <a-spin :spinning="confirmLoading">
+      <a-form :form="form">
+        <!-- <a-form-item
+          v-show="false"
+          label="ds_id"
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+        >
+          <a-input
+            v-decorator="['dsId']"
+            :disabled="editable || showable"
+          />
+        </a-form-item> -->
+
+        <a-form-item
+          label="当前数据源"
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+        >
+          <span>{{currentDs.label}}</span>
+        </a-form-item>
+
+        <a-form-item
+          v-for="(item) in currentDsList"
+          :key="item.key"
+          :label="item.label"
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+        >
+          <a-input
+            type="text"
+            v-if="item.type === 'input'"
+            :disabled="showable"
+            v-decorator="[item.key, {rules: [{required: item.isRequired, message: item.decorator}]}]" />
+          <a-textarea
+            type="text"
+            v-if="item.type === 'textarea'"
+            :auto-size="{ minRows: 2, maxRows: 8 }"
+            :disabled="showable"
+            v-decorator="[item.key, {rules: [{required: item.isRequired, message: item.decorator}]}]" />
+          <a-select
+            :disabled="showable"
+            v-if="item.type === 'select'"
+            v-decorator="[item.key, {rules: [{required: item.isRequired, message: item.decorator}]}]"
+            :options="OracleServerTypes"
+          >
+          </a-select>
+        </a-form-item>
+      </a-form>
+    </a-spin>
+    <template slot="footer" >
+      <div
+        v-show="editable || addable"
+      >
+        <a-button key="cancel" @click="handleCancel">取消</a-button>
+        <a-button key="forward" :loading="confirmLoading" type="primary" @click="handleOk">保存</a-button>
+      </div>
+    </template>
+  </a-modal>
+
+</template>
+
+<script>
+import pick from 'lodash.pick'
+import { getObj, addObj, putObj } from '@/api/datasource/datasource'
+import { DATA_SOURCE_TYPE } from '@/api/globalConstant'
+import { dsConfigOriginList, OracleServerTypes } from './const'
+import cloneDeep from 'lodash.clonedeep'
+
+let selectTables = []
+
+export default {
+  name: 'DsConfig',
+  props: {
+    currentDs: {
+      type: Object,
+      default: () => {
+        return {
+          value: 'MySQL',
+          label: 'MySQL',
+          dsTypeKey: 1
+        }
+      }
+    }
+  },
+  data () {
+    return {
+      dsConfigOriginList,
+      OracleServerTypes,
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 7 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 13 }
+      },
+      longWrapperCol: {
+        xs: { span: 44 },
+        sm: { span: 13 }
+      },
+      visible: false,
+      confirmLoading: false,
+      form: this.$form.createForm(this),
+      editable: false,
+      addable: false,
+      showable: false,
+      DataSourceType: DATA_SOURCE_TYPE,
+      type: 'add'
+    }
+  },
+  computed: {
+    title () {
+      switch (this.type) {
+        case 'add':
+          return '新建数据源'
+        case 'edit':
+          return '修改数据源'
+        default:
+          return '查看数据源'
+      }
+    },
+    currentDsList () {
+      const list = cloneDeep(this.dsConfigOriginList)
+      if (this.currentDs.dsTypeKey === 1) return list
+      list.forEach(item => {
+        switch (this.currentDs.dsTypeKey) {
+          case 4:
+          case 2: {
+            item.isRequired = ['host', 'port'].includes(item.key)
+            break
+          }
+          case 3: {
+            item.isRequired = ['host', 'port', 'username', 'password', 'database'].includes(item.key)
+            break
+          }
+        }
+      })
+      if (this.currentDs.dsTypeKey === 3) {
+        list.push({
+          label: '服务器类型',
+          key: 'servertype',
+          type: 'select',
+          decorator: '请选择',
+          isRequired: true
+        }, {
+          label: 'SID或服务器名',
+          key: 'sid',
+          type: 'input',
+          decorator: '请输入',
+          isRequired: true
+        })
+      }
+      return list
+    }
+  },
+  methods: {
+    show (id, type, info) {
+      this.type = type
+      switch (type) {
+        case 'add':
+          this.showable = false
+          this.addable = true
+          break
+        case 'edit':
+          this.showable = false
+          this.editable = true
+          break
+        default:
+          this.showable = true
+          break
+      }
+      this.visible = true
+      const { form: { setFieldsValue, resetFields } } = this
+      if (['edit', 'show'].includes(type)) {
+        if (!info) {
+          this.confirmLoading = true
+          getObj(id).then(res => {
+            const record = res.result
+            this.confirmLoading = false
+            this.$nextTick(() => {
+              setFieldsValue(this.formatData(record))
+            })
+          })
+        } else {
+          this.$nextTick(() => {
+            setFieldsValue(this.formatData(info))
+          })
+        }
+      } else {
+        this.$nextTick(() => {
+          resetFields()
+        })
+      }
+    },
+    // 格式化复显表单数据
+    formatData (info) {
+      const temp = pick(info, ['name', 'host', 'port', 'username', 'database', 'password', 'config'])
+      if (this.currentDs.dsTypeKey === 3) {
+        const config = JSON.parse(info.config)
+        if (config) {
+          const servertype = Object.keys(config)[0]
+          temp['servertype'] = servertype
+          temp[servertype] = config[servertype]
+        }
+      }
+      return temp
+    },
+    // 获取用户信息
+    edit (id, type) {
+      this.visible = true
+      if (type && type === 'add') {
+        this.addable = true
+        this.type = type
+      }
+      if (type === 'edit') {
+        this.editable = true
+        this.type = type
+      }
+      if (type === 'show') {
+        this.showable = true
+        this.type = type
+      }
+
+      const { form: { setFieldsValue, resetFields } } = this
+      if (['edit', 'show'].includes(type)) {
+        this.confirmLoading = true
+        getObj(id).then(res => {
+          const record = res.result
+          this.confirmLoading = false
+          this.$nextTick(() => {
+            setFieldsValue(pick(record, ['name', 'host', 'port', 'username', 'database', 'password', 'config', 'tb_name_list']))
+          })
+        })
+      } else {
+        resetFields()
+      }
+    },
+    handleChange (value) {
+      selectTables.push(value)
+      console.log(`Selected: ${value}`)
+      console.log(selectTables)
+    },
+    // 结束保存用户信息
+    handleOk () {
+      this.form.validateFields(async (err, values) => {
+        if (!err) {
+          if (this.currentDs.dsTypeKey === 3) {
+            const temp = {}
+            temp[values.servertype] = values[values.servertype]
+            values.config = JSON.stringify(temp)
+          }
+          this.confirmLoading = true
+          if (this.type === 'add') {
+            console.log(values)
+            addObj(values).then(res => {
+              if (res.status !== '0') {
+                this.$message.error(res.errstr)
+              }
+            })
+          } else if (this.type === 'edit') {
+            console.log('----', values)
+            await putObj(values)
+          }
+          setTimeout(() => {
+            this.confirmLoading = false
+            this.$emit('ok')
+            this.visible = false
+          }, 1500)
+        }
+      })
+      selectTables = []
+    },
+    handleCancel () {
+      this.visible = false
+      setTimeout(() => {
+        this.addable = false
+        this.showable = false
+        this.editable = false
+      }, 200)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/front-ui/src/views/datasource/DsList.vue b/front-ui/src/views/datasource/DsList.vue
index 711ce40..fd87bb1 100644
--- a/front-ui/src/views/datasource/DsList.vue
+++ b/front-ui/src/views/datasource/DsList.vue
@@ -39,7 +39,7 @@
     </div>
     <div class="table-operator">
       <!--      v-action="'upms:user:add'"-->
-      <a-button @click="$refs.DsSaveOrUpdate.edit('','add')" icon="plus" type="primary">新建</a-button>
+      <a-button @click="$refs.refDsConfig.show('','add')" icon="plus" type="primary">新建</a-button>
     </div>
     <a-table
       :columns="columns"
@@ -50,9 +50,10 @@
       @change="handleTableChange"
     >
     </a-table>
-    <ds-save-or-update
+    <ds-config
       @ok="handleOk"
-      ref="DsSaveOrUpdate"
+      :currentDs="currentDs"
+      ref="refDsConfig"
     />
   </a-card>
 </div>
@@ -60,14 +61,16 @@
 
 <script>
 import { pageQuery, delObj, getDsGroup } from '@/api/datasource/datasource'
-import DsSaveOrUpdate from './DsSaveOrUpdate.vue'
+// import DsSaveOrUpdate from './DsSaveOrUpdate.vue'
+import DsConfig from './DsConfig.vue'
 import { dsTypeList } from './const'
 import { DATA_SOURCE_TYPE } from '@/api/globalConstant'
 
 export default {
   name: 'ContainerBottom',
   components: {
-    DsSaveOrUpdate
+    // DsSaveOrUpdate,
+    DsConfig
   },
   data () {
     return {
@@ -192,8 +195,8 @@ export default {
     },
 
     edit (record) {
-      this.$refs.DsSaveOrUpdate.edit(record.dsId, 'edit')
-      this.init()
+      this.$refs.refDsConfig.show(record.dsId, 'edit', record)
+      // this.init()
     },
     delete (record) {
       console.log(record)
@@ -203,7 +206,7 @@ export default {
       })
     },
     show (record) {
-      this.$refs.DsSaveOrUpdate.edit(record.dsId, 'show')
+      this.$refs.refDsConfig.show(record.dsId, 'show', record)
     },
     handleOk () {
       this.init()
diff --git a/front-ui/src/views/datasource/const.js b/front-ui/src/views/datasource/const.js
index b1cfa97..6d8d72d 100644
--- a/front-ui/src/views/datasource/const.js
+++ b/front-ui/src/views/datasource/const.js
@@ -84,4 +84,63 @@ const RedisTypes = [
   }
 ]
 
-export { DataSourceType, dsTypeList, RedisTypes }
+const dsConfigOriginList = [
+  {
+    label: '数据源名称',
+    key: 'name',
+    type: 'input',
+    decorator: '请输入数据源名称',
+    isRequired: true
+  },
+  {
+    label: 'host',
+    key: 'host',
+    type: 'input',
+    decorator: '请输入 host',
+    isRequired: true
+  },
+  {
+    label: 'port',
+    key: 'port',
+    type: 'input',
+    decorator: '请输入 port',
+    isRequired: true
+  },
+  {
+    label: 'username',
+    key: 'username',
+    type: 'input',
+    decorator: '请输入 username',
+    isRequired: true
+  },
+  {
+    label: 'password',
+    key: 'password',
+    type: 'input',
+    decorator: '请输入 password',
+    isRequired: true
+  },
+  {
+    label: 'database',
+    key: 'database',
+    type: 'input',
+    decorator: '请输入 database',
+    isRequired: true
+  }
+  // {
+  //   label: '附加配置',
+  //   key: 'config',
+  //   type: 'textarea',
+  //   decorator: '请输入附加配置',
+  //   isRequired: false
+  // }
+]
+
+const OracleServerTypes = [
+  {
+    label: 'SID',
+    value: 'sid'
+  }
+]
+
+export { DataSourceType, dsTypeList, RedisTypes, dsConfigOriginList, OracleServerTypes }
-- 
Gitee