From 6144a9390ac114e37796578c00fbe4b10b4ccd38 Mon Sep 17 00:00:00 2001
From: Yueng <14617246+YuengMeYuuer@user.noreply.gitee.com>
Date: Mon, 26 Aug 2024 21:50:51 +0800
Subject: [PATCH] =?UTF-8?q?fine:()=E5=89=8D=E5=8F=B0=E4=BB=A3=E7=A0=81?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E6=B7=BB=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/property/property.js          |  17 ++
 src/views/property/property/index.vue | 308 ++++++++++++++++++++++++++
 2 files changed, 325 insertions(+)
 create mode 100644 src/api/property/property.js
 create mode 100644 src/views/property/property/index.vue

diff --git a/src/api/property/property.js b/src/api/property/property.js
new file mode 100644
index 0000000..c4ea4d6
--- /dev/null
+++ b/src/api/property/property.js
@@ -0,0 +1,17 @@
+import request from '@/utils/request'
+
+export function getConnectList(data) {
+  return request({
+    url: '/property/connect/selectConnect',
+    method: 'post',
+    data: data
+  })
+}
+
+export function insertConnectList(data) {
+  return request({
+    url: '/property/connect/add',
+    method: 'post',
+    data: data
+  })
+}
diff --git a/src/views/property/property/index.vue b/src/views/property/property/index.vue
new file mode 100644
index 0000000..c275135
--- /dev/null
+++ b/src/views/property/property/index.vue
@@ -0,0 +1,308 @@
+<template>
+  <div>
+
+    <el-form ref="form" :model="connectDTO" label-width="130px" :inline="true">
+      <el-form-item  label="接入源名称:">
+        <el-input v-model="connectDTO.accSourName" style="width: 300px;"></el-input>
+      </el-form-item>
+
+      <el-form-item label="数据来源系统名称:">
+        <el-input v-model="connectDTO.dataSourSystemName" style="width: 300px;"></el-input>
+      </el-form-item>
+
+      <el-form-item label="数据接入类型:">
+        <el-input v-model="connectDTO.dataAccType" style="width: 300px;"></el-input>
+      </el-form-item>
+
+      <el-form-item>
+        <el-button type="primary" @click="selectConnectList">立即创建</el-button>
+        <el-button>取消</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-button type="primary" @click="insertConnectList" plain>添加</el-button>
+    <el-button type="danger" plain>删除</el-button>
+    <el-button type="warning" plain>导出</el-button>
+
+
+    <template>
+      <el-table
+        ref="multipleTable"
+        :data="connect"
+        tooltip-effect="dark"
+        :style="{width: tableWidth}"
+        @selection-change="handleSelectionChange">
+
+        <el-table-column
+          type="selection"
+          >
+        </el-table-column>
+
+        <el-table-column
+          label="接入源名称">
+          <template slot-scope="scope">{{ scope.row.accSourName }}</template>
+        </el-table-column>
+
+        <el-table-column
+          label="数据来源系统名称">
+          <template slot-scope="scope">{{ scope.row.dataSourSystemName }}</template>
+        </el-table-column>
+
+        <el-table-column
+          label="ip地址">
+          <template slot-scope="scope">{{ scope.row.ipAddress }}</template>
+        </el-table-column>
+
+        <el-table-column
+          label="端口号地址">
+          <template slot-scope="scope">{{ scope.row.port }}</template>
+        </el-table-column>
+
+        <el-table-column
+          label="数据接入类型">
+          <template slot-scope="scope">{{ scope.row.dataAccType }}</template>
+        </el-table-column>
+
+        <el-table-column
+          label="数据库名称">
+          <template slot-scope="scope">{{ scope.row.databaseName }}</template>
+        </el-table-column>
+
+        <el-table-column
+          label="是否初始化">
+          <template slot-scope="scope">{{ scope.row.initialization }}</template>
+        </el-table-column>
+
+        <el-table-column
+          label="备注">
+          <template slot-scope="scope">{{ scope.row.notes }}</template>
+        </el-table-column>
+
+        <el-table-column
+          label="操作">
+          <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
+          <el-button type="text" size="small">编辑</el-button>
+        </el-table-column>
+      </el-table>
+
+
+      <!-- Form -->
+
+      <el-dialog title="收货地址" :visible.sync="addDialogFormVisible" width="1100px">
+        <el-form :model="connectDTO" :inline="true" :label-width="formLabelWidth">
+
+          <el-card class="box-card">
+            <div slot="header" class="clearfix">
+              <span>基本配置信息</span>
+            </div>
+            <div  class="text item" :label-width="formLabelWidth">
+              <el-form-item label="接入源名称">
+                <el-input v-model="connectDTO.accSourName" autocomplete="off" placeholder="请输入接入源名称"></el-input>
+              </el-form-item>
+              <el-form-item label="数据来源系统名称" label-width="125px">
+                <el-input v-model="connectDTO.dataSourSystemName" autocomplete="off" placeholder="请输入数据来源系统"></el-input>
+              </el-form-item>
+
+              <el-form-item label="ip地址">
+                <el-input v-model="connectDTO.ipAddress" autocomplete="off" placeholder="请输入IP地址"></el-input>
+              </el-form-item>
+
+              <el-form-item label="端口号地址">
+                <el-input v-model="connectDTO.port" autocomplete="off" placeholder="请输入端口号地址"></el-input>
+              </el-form-item>
+
+              <el-form-item label="数据接入类型" label-width="110px">
+                <template>
+                  <el-select v-model="connectDTO.dataAccType" placeholder="请选择" label-width="100px">
+                    <el-option
+                      v-for="item in options"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value">
+                    </el-option>
+                  </el-select>
+                </template>
+<!--                <el-input v-model="connectDTO.name" autocomplete="off" placeholder="请输入数据接入类型"></el-input>-->
+              </el-form-item>
+
+              <el-form-item label="数据库名称">
+                <el-input v-model="connectDTO.databaseName" autocomplete="off" placeholder="请输入数据库名称"></el-input>
+              </el-form-item>
+
+              <el-form-item label="数据库用户">
+                <el-input v-model="connectDTO.userName" autocomplete="off" placeholder="数据库用户"></el-input>
+              </el-form-item>
+
+              <el-form-item label="数据库密码" label-width="125px">
+                <el-input v-model="connectDTO.password" autocomplete="off" placeholder="数据库密码"></el-input>
+              </el-form-item>
+
+              <el-card class="box-card">
+                <div slot="header" class="clearfix">
+                  <span>数据连接参数</span>
+                </div>
+                <div  class="text item" >
+                  <el-form-item label="数据连接参数">
+                    <el-input v-model="connectDTO.dataConnParam" autocomplete="off" placeholder="请输入数据连接参数" style="width: 990px;"></el-input>
+                  </el-form-item>
+                </div>
+              </el-card>
+            </div>
+          </el-card>
+
+          <el-card class="box-card" style="margin-top: 20px;">
+            <div slot="header" class="clearfix">
+              <span>连接池配置</span>
+            </div>
+            <div  class="text item" >
+              <el-form-item label="初始连接数量">
+                <el-input v-model="connectDTO.initSize" autocomplete="off" placeholder="请输入数据连接参数" style="width: 350px;"></el-input>
+              </el-form-item>
+
+              <el-form-item label="最大连接数量">
+                <el-input v-model="connectDTO.maxNumConn" autocomplete="off" placeholder="请输入数据连接参数" style="width: 350px;"></el-input>
+              </el-form-item>
+
+              <el-form-item label="最大等待时间">
+                <el-input v-model="connectDTO.maxWaitTime" autocomplete="off" placeholder="请输入数据连接参数" style="width: 350px;"></el-input>
+              </el-form-item>
+
+              <el-form-item label="最大等待次数">
+                <el-input v-model="connectDTO.maxWaitTimes" autocomplete="off" placeholder="请输入数据连接参数" style="width: 350px;"></el-input>
+              </el-form-item>
+            </div>
+          </el-card>
+
+          <el-card class="box-card" style="margin-top: 20px;">
+            <div slot="header" class="clearfix">
+              <span>其他信息</span>
+            </div>
+            <div  class="text item" >
+              <el-form-item label="是否初始化" :label-width="formLabelWidth">
+                <el-radio v-model="connectDTO.initialization" label="Y">是</el-radio>
+                <el-radio v-model="connectDTO.initialization" label="N">否</el-radio>
+              </el-form-item>
+
+              <el-form-item label="备注" :label-width="formLabelWidth">
+                <el-input
+                  type="textarea"
+                  :rows="2"
+                  :cole="1000"
+                  placeholder="请输入内容"
+                  v-model="connectDTO.textarea" style="width: 850px;">
+                </el-input>
+              </el-form-item>
+            </div>
+          </el-card>
+
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="addDialogFormVisible = false">取 消</el-button>
+          <el-button type="primary" @click="addsDialogFormVisible">确 定</el-button>
+        </div>
+      </el-dialog>
+
+    </template>
+  </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
+//例如：import 《组件名称》 from '《组件路径》,
+import { getConnectList, insertConnectList } from '@/api/property/property'
+
+export default {
+  //import引入的组件需要注入到对象中才能使用"
+  components: {},
+  props: {},
+  data() {
+    //这里存放数据"
+
+    return {
+      connectDTO:{
+        maxWaitTimes: 3,
+        maxWaitTime: 3000,
+        maxNumConn: 20,
+        initSize: 5,
+        dataConnParam:'useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior'
+      },
+      connect:[],
+      tableWidth: '100%',
+      multipleSelection: [],
+      addDialogFormVisible: false,
+      formLabelWidth:'100px',
+      options: [{
+        value: 'Mysql',
+        label: 'Mysql'
+      }, {
+        value: 'Oracle',
+        label: 'Oracle'
+      }],
+    }
+  },
+  //计算属性 类似于data概念",
+  computed: {},
+  //监控data中的数据变化",
+  watch: {},
+  //方法集合",
+  methods: {
+    insertConnectList(){
+      this.addDialogFormVisible=true
+    },
+    addsDialogFormVisible(){
+      insertConnectList(this.connectDTO).then(res=>{
+
+        this.addDialogFormVisible=false
+        this.getConnectList()
+        this.$message.success(res.msg)
+      })
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    },
+    getConnectList(){
+      getConnectList(this.connectDTO).then(res=>{
+        console.log(res)
+      })
+    },
+    selectConnectList(){
+      this.getConnectList();
+    },
+
+    mounted() {
+      window.addEventListener('resize', this.handleResize);
+    },
+    beforeDestroy() {
+      window.removeEventListener('resize', this.handleResize);
+    },
+      handleResize() {
+        // 根据窗口宽度更新表格宽度
+        this.tableWidth = window.innerWidth < 768 ? '100%' : '80%';
+    }
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）",
+  created() {
+    this.getConnectList();
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）",
+  mounted() {
+  },
+  beforeCreate() {
+  }, //生命周期 - 创建之前",
+  beforeMount() {
+  }, //生命周期 - 挂载之前",
+  beforeUpdate() {
+  }, //生命周期 - 更新之前",
+  updated() {
+  }, //生命周期 - 更新之后",
+  beforeDestroy() {
+  }, //生命周期 - 销毁之前",
+  destroyed() {
+  }, //生命周期 - 销毁完成",
+  activated() {
+  } //如果页面有keep-alive缓存功能，这个函数会触发",
+}
+</script>
+<style scoped>
+
+</style>