资产库改版

src/assets/images/assetLibrary/index.js

@@ -21,6 +21,8 @@ import cloudera2 from './cloudera2.png'
 import star1 from './star1.png'
 import star2 from './star2.png'
 import HIVE from './HIVE.png'
+import pageTitle from './pageTitle.png'
+import arrow from './arrow.png'
 
 
 export default {
@@ -46,5 +48,7 @@ export default {
   cloudera2,
   star1,
   star2,
-  HIVE
+  HIVE,
+  pageTitle,
+  arrow
 }
\ No newline at end of file

src/components/DictTag/index.vue

@@ -7,7 +7,7 @@
           :key="item.value"
           :index="index"
           :class="item.elTagClass"
-        >{{ item.label + " " }}</span>
+        >{{ item[labelName] + " " }}</span>
         <el-tag
           v-else
           :disable-transitions="true"
@@ -15,7 +15,7 @@
           :index="index"
           :type="item.elTagType"
           :class="item.elTagClass"
-        >{{ item.label + " " }}</el-tag>
+        >{{ item[labelName] + " " }}</el-tag>
       </template>
     </template>
     <template v-if="unmatch && showValue">
@@ -44,9 +44,15 @@ const props = defineProps({
   separator: {
     type: String,
     default: ",",
+  },
+  labelName: {
+    type: String,
+    default: "label",
   }
 })
 
+console.log(props.options)
+
 const values = computed(() => {
   if (props.value === null || typeof props.value === 'undefined' || props.value === '') return []
   return Array.isArray(props.value) ? props.value.map(item => '' + item) : String(props.value).split(props.separator)

src/views/assetLibrary/QueryForm.vue

 <script setup lang="ts" name="QueryForm">
 import { ref, computed,onMounted } from 'vue'
-import type { FormInstance } from 'element-plus'
-import PageWrapperSearch from '@/components/Search/PageWrapperSearch.vue'
-import { useDict } from '@/utils/dict'
-import useAppStore from '@/store/modules/app'
-
-const appStore = useAppStore()
-const emit = defineEmits(['update:modelValue', 'query', 'reset'])
-const dataTypeList = ref([])
+const emit = defineEmits(['update:modelValue', 'query', 'reset', 'add'])
 const props = defineProps<{
   modelValue: any
 }>()
@@ -22,13 +15,21 @@ const queryForm = computed({
   }
 })
 
+const ElFormRef = ref()
+
+// 新增
+function handleAdd() {
+  emit('add')
+}
+
 // 搜索
 function onSearch() {
   emit('query')
 }
 
 // 重置
-function onReset(formRef: FormInstance) {
+function onReset() {
+  const formRef = ElFormRef.value
   emit('reset', formRef)
 }
 
@@ -39,27 +40,30 @@ onMounted(() => {
 </script>
 
 <template>
-  <page-wrapper-search
-    :model="queryForm"
-    @search="onSearch"
-    @reset="onReset"
-    label-width='100'>
+  <el-form ref="ElFormRef" :model="queryForm" label-width="90px">
+    <el-row :gutter="9">
+      <el-col :span="8">
         <el-form-item label="数据源名称" prop="sysname">
           <el-input v-model="queryForm.sysname" placeholder="请输入客户名称" clearable />
         </el-form-item>
+      </el-col>
+      <el-col :span="8">
         <el-form-item label="IP" prop="ip">
           <el-input v-model="queryForm.ip" placeholder="请输入客户名称" clearable />
         </el-form-item>
-    <el-form-item label="数据源类型" prop="dbtype">
-      <el-select v-model="queryForm.dbtype" placeholder="请选择">
-        <el-option
-          v-for="item in appStore.DATABASE_TYPE"
-          :key="item"
-          :label="item"
-          :value="item"
-        >
-        </el-option>
-      </el-select>
-    </el-form-item>
-  </page-wrapper-search>
+      </el-col>
+      <el-col :span="8">
+        <el-button icon="Refresh" @click="onReset">重置</el-button>
+        <el-button type="primary" icon="Search" @click="onSearch">搜索</el-button>
+        <el-button type="primary" icon="Plus" style="background: rgba(0, 189, 207, 1);border-color: rgba(0, 189, 207, 1);" @click="handleAdd">新增</el-button>
+      </el-col>
+    </el-row>
+  </el-form>
+  <!-- <page-wrapper-search
+    :model="queryForm"
+    @search="onSearch"
+    @reset="onReset"
+    label-width='90'>
+    
+  </page-wrapper-search> -->
 </template>

src/views/assetLibrary/addEdit.vue

-<script setup name="AssetLibrary">
-import { ref, toRefs, reactive, getCurrentInstance } from 'vue'
-import FormGroup from './modules/formGroup.vue'
-import img from '@/assets/images/assetLibrary/index.js'
+<script setup lang="ts" name="AddEdit">
+import { ref, toRefs, reactive, getCurrentInstance, computed } from "vue";
+import FormGroup from "./modules/formGroup.vue";
+import img from "@/assets/images/assetLibrary/index.js";
 
-const emit = defineEmits(['page'])
+const emit = defineEmits(["update:visibl", "confirm"]);
 
-const step = ref('select') // select  edit
+const props = defineProps<{
+  visible: any;
+}>();
+
+const dialogVisible = computed({
+  get: () => props.visible,
+  set: (value) => emit("update:visible", value),
+});
+
+const step = ref("edit"); // select  edit
 const selectData = reactive({
-  name: '',
-  type: ''
-})
+  name: "",
+  type: "",
+});
 
 const listData = ref([
   {
-    title: '关系型数据库',
-    type: 1,
-    list: [
-      {
-        name: 'MYSQL',
-        icon: img.MYSQL,
+    name: "MYSQL",
   },
   {
-        name: 'ORACLE',
-        icon: img.ORACLE,
+    name: "ORACLE",
   },
   {
-        name: 'POSTGRESQL',
-        icon: img.POSTGRESQL,
+    name: "POSTGRESQL",
   },
   // {
-      //   name: 'DB2',
-      //   icon: img.DB2,
+  //   name: "DB2",
   // },
   {
-        name: 'MSSQLSERVER',
-        icon: img.MSSQLSERVER,
+    name: "MSSQLSERVER",
   },
   // {
-      //   name: 'MARIADB',
-      //   icon: img.MARIADB,
+  //   name: "MARIADB",
   // },
   // {
-      //   name: 'GBASE8S',
-      //   icon: img.GBASE8S,
+  //   name: "GBASE8S",
   // },
   {
-        name: 'KINGBASE',
-        icon: img.KINGBASE,
+    name: "KINGBASE",
   },
   {
-        name: 'DM',
-        icon: img.DM,
+    name: "DM",
   },
   // {
-      //   name: 'GREENPLUM',
-      //   icon: img.GREENPLUM,
+  //   name: "GREENPLUM",
   // },
   // {
-      //   name: 'GAUSS',
-      //   icon: img.GAUSS,
+  //   name: "GAUSS",
   // },
   // {
-      //   name: 'OCEANBASE',
-      //   icon: img.OCEANBASE,
+  //   name: "OCEANBASE",
   // },
   // {
-      //   name: 'GAUSSDB',
-      //   icon: img.GAUSSDB,
-      // }
-    ]
-  },
+  //   name: "GAUSSDB",
+  // },
+  // {
+  //   name: "ES",
+  // },
   // {
-  //   title: 'NoSQL',
-  //   type: 2,
+  //   name: "MONGODB",
+  // },
+  // {
+  //   name: "KAFKA",
+  // },
+  // {
+  //   name: "Apache",
+  //   type: 4,
   //   list: [
   //     {
-  //       name: 'ES',
-  //       icon: img.ES,
+  //       name: "HIVE",
+  //     },
+  //   ],
   // },
   // {
-  //       name: 'MONGODB',
-  //       icon: img.MONGODB,
-  //     }
-  //   ]
+  //   name: "CLOUDERA",
+  //   type: 4,
+  //   list: [
+  //     {
+  //       name: "HIVE",
+  //     },
+  //   ],
   // },
   // {
-  //   title: '消息队列',
-  //   type: 3,
+  //   name: "星环",
+  //   type: 4,
   //   list: [
   //     {
-  //       name: 'KAFKA',
-  //       icon: img.KAFKA,
-  //     }
-  //   ]
-  // }
-])
-
-const hadoopData = reactive({
-  index: null,
-  list: [
-    {
-      name: 'Apache',
-      icon1: img.apache1,
-      icon2: img.apache2,
-      list: [
-        {
-          name: 'HIVE',
-          icon: img.HIVE,
-          type: 4,
-        }
-      ]
-    },
-    {
-      name: 'CLOUDERA',
-      icon1: img.cloudera1,
-      icon2: img.cloudera2,
-      list: [
-        {
-          name: 'HIVE',
-          icon: img.HIVE,
-          type: 4,
-        }
-      ]
-    },
-    {
-      name: '星环',
-      icon1: img.star1,
-      icon2: img.star2,
-      list: [
-        {
-          name: 'HIVE_TDH',
-          icon: img.HIVE,
-          type: 4,
-        }
-      ]
-    }
-  ]
-})
-
-// hadoop事件
-const hadoopClick = (index) => { 
-  hadoopData.index = index
-}
-
-// 新增
-const editTo = (item,type) => {
-  selectData.name = item.name
-  selectData.type = type
-  step.value = 'edit'
-}
+  //       name: "HIVE_TDH",
+  //     },
+  //   ],
+  // },
+]);
 
 // 新增回调
 const modalConfirm = () => {
-  console.log('modalConfirm')
-  emit('page', 'list')
-}
+  console.log("modalConfirm");
+  dialogVisible.value = false;
+  confirm;
+  emit("confirm");
+};
 
+// 关闭弹窗前处理
+const handleClose = (done) => {
+  done();
+};
 </script>
 
 <template>
-  <div class="app-container scroller">
-    <PageTitle back @back="emit('page', 'list')">
-      <template #title>
-        <span id="badDebt" class="title-icon">
-          新增数据源
-          <PageTour tourType="badDebt" />
-        </span>
-      </template>
-    </PageTitle>
-    <div class="app-container__body">
-      <div v-if="step === 'select'">
-        <div class="listBox" v-for="(item,index) in listData" :key="index">
-          <div class="title">{{ item.title }}</div>
-          <div class="img-warpper">
-            <img class="img" :src="liItem.icon" :alt="liItem.name" @click="editTo(liItem, item.type)" v-for="(liItem, i) in item.list" :key="i">
-          </div>
-        </div>
-        <!-- <div class="title">Hadoop品牌：<span class="data-base-name">{{ hadoopData.index !== null ? hadoopData.list[hadoopData.index].name : '' }}</span></div>
-        <div style="display: inline-block;">
-          <div class="hadoop-list-box">
-            <div class="hadoop-item-box" :class="hadoopData.index === index ? 'hadoop-item-box-active' : ''" v-for="(item,index) in hadoopData.list" :key="index" @click="hadoopClick(index)">
-              <img :src="item.icon1" alt="">
-              <img :src="item.icon2" alt="" class="hidden-img">
-              <div class="name">
-                <span>{{ item.name }}</span>
-                <div class="bar"></div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div style="padding-top: 10px;color: #7a8495;">*点击图标切换Hadoop品牌</div>
-        <div v-if="hadoopData.index !== null" style="color: rgb(102, 102, 102); font-size: 16px; font-weight: bold; padding: 10px 0px;">Hadoop</div>
-        <div class="img-warpper" v-if="hadoopData.index !== null">
-          <img class="img" :src="item.icon" :alt="item.name" @click="editTo(item, item.type)" v-for="(item, index) in hadoopData.list[hadoopData.index].list" :key="index">
-        </div> -->
-      </div>
-      <div v-if="step === 'edit'" style="padding: 30px 150px;">
-        <div style="padding-bottom: 20px;">
-          <span style="color: rgb(102, 102, 102);">数据源类型：</span> 
-          <span class="source-title">{{ selectData.name }}</span>
-        </div>
-        <FormGroup page="add" :title="selectData.name" :type="selectData.type" @cancel="step = 'select'" @confirm="modalConfirm" />
-      </div>
-    </div>
+  <el-dialog title="新增数据源" v-model="dialogVisible" :before-close="handleClose" width="1100">
+    <div class="addForm" v-if="step === 'edit'">
+      <FormGroup page="add" :title="selectData.name" :type="selectData.type" @cancel="dialogVisible = false"
+        @confirm="modalConfirm" :typeData="listData" />
     </div>
+  </el-dialog>
 </template>
 
 <style lang="scss" scoped>
-.title {
-  color: #21333f;
-  font-size: 16px;
-  line-height: 20px;
-  font-weight: 700;
-  padding: 10px 0 10px 12px;
-  .data-base-name{
-    color: #2c9ef7;
-    font-size: 20px;
-    font-weight: 400;
-  }
-}
-.img-warpper {
-  background-color: #f3f5fa;
-  padding: 7.5px;
-  margin-top: 24px;
-  margin-bottom: 50px;
-  margin-left: 12px;
-  line-height: 1;
-  .img {
-    width: 132px;
-    font-size: 0;
-    margin: 0 10px 10px 0;
-    cursor: pointer;
+.addForm {
+  padding: 0 20px;
+  :deep(.el-form-item) {
+    margin-bottom: 20px;
   }
-}
-.hadoop-list-box {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  -ms-flex-pack: distribute;
-  justify-content: space-around;
-  background: #f1f3f5;
-  padding: 10px;
-  .hadoop-item-box {
-    padding: 8px;
+  :deep(.el-form-item__label) {
     background: #fff;
-    cursor: pointer;
-    position: relative;
-    -webkit-transition: -webkit-box-shadow 0.3s;
-    transition: -webkit-box-shadow 0.3s;
-    transition: box-shadow 0.3s;
-    transition: box-shadow 0.3s, -webkit-box-shadow 0.3s;
-    margin-right: 16px;
-    img {
-      font-size: 0;
-      vertical-align: bottom;
-      width: 132px;
-    }
-    .hidden-img {
-      position: absolute;
-      left: 8px;
-      opacity: 0;
-      -webkit-transition: opacity 0.5s;
-      transition: opacity 0.5s;
-    }
-    .name {
-      height: 20px;
-      line-height: 20px;
-      text-align: center;
-      margin-top: 8px;
-      position: relative;
-      .bar {
-        position: absolute;
-        opacity: 0;
-        background-color: #1f85df;
-        height: 2px;
-        width: 0;
-        -webkit-transition: all 0.2s;
-        transition: all 0.2s;
-        left: 0;
-        bottom: -4px;
+    color: rgba(148, 148, 148, 1);
   }
+  :deep(.el-input__inner),
+  :deep(.el-select__wrapper) {
+    height: 34px;
   }
-  }
-  .hadoop-item-box-active{
-    -webkit-box-shadow: 0 0 10px #888;
-    box-shadow: 0 0 10px #888;
-    .hidden-img{
-      opacity: 1;
-    }
-    .name{
-      .bar{
-        opacity: 1;
-        width: 132px;
+  :deep(.el-form-item__error) {
     left: 0;
+    top: 100%;
   }
-    }
-  }
-  .hadoop-item-box:hover {
-    -webkit-box-shadow: 0 0 10px #888;
-    box-shadow: 0 0 10px #888;
-    .hidden-img {
-      opacity: 1;
-    }
-  }
-}
-.source-title{
-  font-size: 18px;
-  font-weight: 700;
-  color: #1f85df;
 }
 </style>
\ No newline at end of file

src/views/assetLibrary/addEdit11.vue

+<script setup lang="ts" name="AddEdit">
+import { ref, toRefs, reactive, getCurrentInstance } from 'vue'
+import FormGroup from './modules/formGroup.vue'
+import img from '@/assets/images/assetLibrary/index.js'
+
+const emit = defineEmits(["update:modelValue", "confirm", "cancel"])
+
+const props = defineProps<{
+  modelValue: boolean;
+}>();
+
+const step = ref('edit') // select  edit
+const selectData = reactive({
+  name: '',
+  type: ''
+})
+
+const listData = ref([
+  {
+    title: '关系型数据库',
+    type: 1,
+    list: [
+      {
+        name: 'MYSQL',
+        icon: img.MYSQL,
+      },
+      {
+        name: 'ORACLE',
+        icon: img.ORACLE,
+      },
+      {
+        name: 'POSTGRESQL',
+        icon: img.POSTGRESQL,
+      },
+      // {
+      //   name: 'DB2',
+      //   icon: img.DB2,
+      // },
+      {
+        name: 'MSSQLSERVER',
+        icon: img.MSSQLSERVER,
+      },
+      // {
+      //   name: 'MARIADB',
+      //   icon: img.MARIADB,
+      // },
+      // {
+      //   name: 'GBASE8S',
+      //   icon: img.GBASE8S,
+      // },
+      {
+        name: 'KINGBASE',
+        icon: img.KINGBASE,
+      },
+      {
+        name: 'DM',
+        icon: img.DM,
+      },
+      // {
+      //   name: 'GREENPLUM',
+      //   icon: img.GREENPLUM,
+      // },
+      // {
+      //   name: 'GAUSS',
+      //   icon: img.GAUSS,
+      // },
+      // {
+      //   name: 'OCEANBASE',
+      //   icon: img.OCEANBASE,
+      // },
+      // {
+      //   name: 'GAUSSDB',
+      //   icon: img.GAUSSDB,
+      // }
+    ]
+  },
+  // {
+  //   title: 'NoSQL',
+  //   type: 2,
+  //   list: [
+  //     {
+  //       name: 'ES',
+  //       icon: img.ES,
+  //     },
+  //     {
+  //       name: 'MONGODB',
+  //       icon: img.MONGODB,
+  //     }
+  //   ]
+  // },
+  // {
+  //   title: '消息队列',
+  //   type: 3,
+  //   list: [
+  //     {
+  //       name: 'KAFKA',
+  //       icon: img.KAFKA,
+  //     }
+  //   ]
+  // }
+])
+
+const hadoopData = reactive({
+  index: null,
+  list: [
+    {
+      name: 'Apache',
+      icon1: img.apache1,
+      icon2: img.apache2,
+      list: [
+        {
+          name: 'HIVE',
+          icon: img.HIVE,
+          type: 4,
+        }
+      ]
+    },
+    {
+      name: 'CLOUDERA',
+      icon1: img.cloudera1,
+      icon2: img.cloudera2,
+      list: [
+        {
+          name: 'HIVE',
+          icon: img.HIVE,
+          type: 4,
+        }
+      ]
+    },
+    {
+      name: '星环',
+      icon1: img.star1,
+      icon2: img.star2,
+      list: [
+        {
+          name: 'HIVE_TDH',
+          icon: img.HIVE,
+          type: 4,
+        }
+      ]
+    }
+  ]
+})
+
+// hadoop事件
+const hadoopClick = (index) => { 
+  hadoopData.index = index
+}
+
+// 新增
+const editTo = (item,type) => {
+  // selectData.name = item.name
+  // selectData.type = type
+  // step.value = 'edit'
+}
+
+// 新增回调
+const modalConfirm = () => {
+  console.log('modalConfirm')
+}
+
+</script>
+
+<template>
+  <el-dialog title="提示" v-model="modelValue" width="1100">
+      
+  </el-dialog>
+  <div class="app-container scroller">
+    <PageTitle back @back="emit('page', 'list')">
+      <template #title>
+        <span id="badDebt" class="title-icon">
+          新增数据源
+          <PageTour tourType="badDebt" />
+        </span>
+      </template>
+    </PageTitle>
+    <div class="app-container__body">
+      <div v-if="step === 'select'">
+        <div class="listBox" v-for="(item,index) in listData" :key="index">
+          <div class="title">{{ item.title }}</div>
+          <div class="img-warpper">
+            <img class="img" :src="liItem.icon" :alt="liItem.name" @click="editTo(liItem, item.type)" v-for="(liItem, i) in item.list" :key="i">
+          </div>
+        </div>
+        <!-- <div class="title">Hadoop品牌：<span class="data-base-name">{{ hadoopData.index !== null ? hadoopData.list[hadoopData.index].name : '' }}</span></div>
+        <div style="display: inline-block;">
+          <div class="hadoop-list-box">
+            <div class="hadoop-item-box" :class="hadoopData.index === index ? 'hadoop-item-box-active' : ''" v-for="(item,index) in hadoopData.list" :key="index" @click="hadoopClick(index)">
+              <img :src="item.icon1" alt="">
+              <img :src="item.icon2" alt="" class="hidden-img">
+              <div class="name">
+                <span>{{ item.name }}</span>
+                <div class="bar"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div style="padding-top: 10px;color: #7a8495;">*点击图标切换Hadoop品牌</div>
+        <div v-if="hadoopData.index !== null" style="color: rgb(102, 102, 102); font-size: 16px; font-weight: bold; padding: 10px 0px;">Hadoop</div>
+        <div class="img-warpper" v-if="hadoopData.index !== null">
+          <img class="img" :src="item.icon" :alt="item.name" @click="editTo(item, item.type)" v-for="(item, index) in hadoopData.list[hadoopData.index].list" :key="index">
+        </div> -->
+      </div>
+      <div v-if="step === 'edit'" style="padding: 30px 150px;">
+        <div style="padding-bottom: 20px;">
+          <span style="color: rgb(102, 102, 102);">数据源类型：</span> 
+          <span class="source-title">{{ selectData.name }}</span>
+        </div>
+        <FormGroup page="add" :title="selectData.name" :type="selectData.type" @cancel="step = 'select'" @confirm="modalConfirm" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.title {
+  color: #21333f;
+  font-size: 16px;
+  line-height: 20px;
+  font-weight: 700;
+  padding: 10px 0 10px 12px;
+  .data-base-name{
+    color: #2c9ef7;
+    font-size: 20px;
+    font-weight: 400;
+  }
+}
+.img-warpper {
+  background-color: #f3f5fa;
+  padding: 7.5px;
+  margin-top: 24px;
+  margin-bottom: 50px;
+  margin-left: 12px;
+  line-height: 1;
+  .img {
+    width: 132px;
+    font-size: 0;
+    margin: 0 10px 10px 0;
+    cursor: pointer;
+  }
+}
+.hadoop-list-box {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -ms-flex-pack: distribute;
+  justify-content: space-around;
+  background: #f1f3f5;
+  padding: 10px;
+  .hadoop-item-box {
+    padding: 8px;
+    background: #fff;
+    cursor: pointer;
+    position: relative;
+    -webkit-transition: -webkit-box-shadow 0.3s;
+    transition: -webkit-box-shadow 0.3s;
+    transition: box-shadow 0.3s;
+    transition: box-shadow 0.3s, -webkit-box-shadow 0.3s;
+    margin-right: 16px;
+    img {
+      font-size: 0;
+      vertical-align: bottom;
+      width: 132px;
+    }
+    .hidden-img {
+      position: absolute;
+      left: 8px;
+      opacity: 0;
+      -webkit-transition: opacity 0.5s;
+      transition: opacity 0.5s;
+    }
+    .name {
+      height: 20px;
+      line-height: 20px;
+      text-align: center;
+      margin-top: 8px;
+      position: relative;
+      .bar {
+        position: absolute;
+        opacity: 0;
+        background-color: #1f85df;
+        height: 2px;
+        width: 0;
+        -webkit-transition: all 0.2s;
+        transition: all 0.2s;
+        left: 0;
+        bottom: -4px;
+      }
+    }
+  }
+  .hadoop-item-box-active{
+    -webkit-box-shadow: 0 0 10px #888;
+    box-shadow: 0 0 10px #888;
+    .hidden-img{
+      opacity: 1;
+    }
+    .name{
+      .bar{
+        opacity: 1;
+        width: 132px;
+        left: 0;
+      }
+    }
+  }
+  .hadoop-item-box:hover {
+    -webkit-box-shadow: 0 0 10px #888;
+    box-shadow: 0 0 10px #888;
+    .hidden-img {
+      opacity: 1;
+    }
+  }
+}
+.source-title{
+  font-size: 18px;
+  font-weight: 700;
+  color: #1f85df;
+}
+</style>
\ No newline at end of file

src/views/assetLibrary/index.vue

 <script setup lang="ts" name="AssetLibrary">
 import { ref, getCurrentInstance, nextTick, type ComponentInternalInstance } from 'vue'
 import list from './list.vue'
-import add from './addEdit.vue'
 
 const widget = {
-  list,
-  add
+  list
 }
 
 const page = ref('list')

src/views/assetLibrary/list.vue

@@ -6,6 +6,8 @@ import FormGroup from './modules/formGroup.vue'
 import img from '@/assets/images/assetLibrary/index.js'
 import { queryAll, checkDatasystemUsed, del } from '@/api/assetLibrary/index'
 import { getCueryCharset } from "@/api/assetLibrary/dict";
+import ModalPop from "@/components/EditPop/ModalPop.vue"
+import AddEdit from "./addEdit.vue"
 
 const emit = defineEmits(['page'])
 
@@ -32,7 +34,7 @@ const modalData = reactive({
   show: false,
   text: ''
 })
-
+const activeName = ref('') // 内部切换
 // 数据源信息
 const dataSource = reactive({
   current: 0, // 当前索引
@@ -45,9 +47,13 @@ const dataSource = reactive({
   }
 })
 
+// 新增弹窗
+const dialogVisible = ref(false)
+
 // 新增
 const handleAdd = () => {
-  emit('page', 'add')
+  // emit('page', 'add')
+  dialogVisible.value = true
 }
 
 // 筛选查询
@@ -65,15 +71,15 @@ const onReset = (formQuery) => {
 // 预览
 const onPreview = (index) => {
   dataSource.current = index
-  dataSource.currentId = dataSource.list[dataSource.current].id
-  dataSource.currentFlag = dataSource.list[dataSource.current].flag
+  dataSource.currentId = dataSource.list[dataSource.current].items[0].id
+  dataSource.currentFlag = dataSource.list[dataSource.current].items[0].flag
+  activeName.value = dataSource.currentId
 }
 
 // 删除
 const onDelete = (val) => {
   const { id, sysname } = val
   checkDatasystemUsed({ id: id }).then(res => {
-    console.log(res)
     const flag = { res }
     if (flag) {
       dataSource.current = 0
@@ -110,12 +116,37 @@ const onConfirm = () => {
 const getList = () => {
   queryAll(queryParams.value).then(res => {
     // console.log(res)
-    dataSource.list = res.data
-    dataSource.currentId = dataSource.list[dataSource.current].id
-    dataSource.currentFlag = dataSource.list[dataSource.current].flag
+    dataSource.list = []
+    if (res.data.length <= 0) return
+    const groupedItems = res.data.reduce((acc, item) => {
+      // 如果acc中还没有当前dbtype的键，则创建一个空数组
+      if (!acc[item.dbtype]) {
+        acc[item.dbtype] = [];
+      }
+      // 将当前项添加到对应dbtype的数组中
+      acc[item.dbtype].push(item);
+      return acc;
+    }, {});
+
+    // 将分组对象转换为数组（可选步骤，如果你需要数组形式的输出）
+    dataSource.list = Object.keys(groupedItems).map(key => ({
+      dbtype: key,
+      items: groupedItems[key]
+    }));
+    dataSource.currentId = dataSource.list[dataSource.current].items[0].id
+    dataSource.currentFlag = dataSource.list[dataSource.current].items[0].flag
+    activeName.value = dataSource.currentId
   })
 }
 
+const tabClick = (tab) => {
+
+  const { props, index } = tab
+  activeName.value = props.name
+  dataSource.currentId = activeName.value
+  dataSource.currentFlag = dataSource.list[dataSource.current].items[index].flag
+}
+
 onMounted(() => {
   getCueryCharset()
   getList()
@@ -123,162 +154,210 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="app-container">
-    <PageTitle>
-      <template #title>
-        资产库
-      </template>
-      <template #buttons>
-        <el-button type="primary" icon="Plus" @click="handleAdd">新增数据源</el-button>
-      </template>
-    </PageTitle>
-    <div class="app-container__body">
-      <query-form ref="QueryFormRef" v-model="queryParams" @query="onQuery" @reset="onReset" />
+  <div class="app-container scroller">
+    <div class="app-container__body" style="padding: 30px 0 10px 0;">
+      <div class="pageTitle">
+        <img class="icon" :src="img.pageTitle" alt="">
+        <span>资产库</span>
+      </div>
+      <query-form ref="QueryFormRef" v-model="queryParams" @query="onQuery" @reset="onReset" @add="handleAdd" />
+      <div class="mainBox">
+        <div class="mainBox-left">
           <el-scrollbar>
-        <div class="flex-content">
-          <el-card class="box-card" :class="dataSource.current === index ? 'active' : ''"
-            :body-style="{ padding: '0px !important' }" v-for="(item, index) in dataSource.list" :key="index">
+            <div class="scroll">
+              <div class="left-card" :class="dataSource.current === index ? 'active' : ''"
+                v-for="(item, index) in dataSource.list" :key="index" @click="onPreview(index)">
                 <img class="img" :src="img[item.dbtype]" alt="">
-            <div class="title">
-              <div class="title-content">{{ item.sysname }}</div>
+                <img class="arrow" v-if="dataSource.current === index" :src="img.arrow" alt="">
               </div>
-            <div class="mask">
-              <div class="maskbutton">
-                <div class="maskbutton-item" @click="onDelete(item)">
-                  <el-icon :size="18">
-                    <delete />
-                  </el-icon>
-                  <br>
-                  <span>删除</span>
             </div>
-                <div class="maskbutton-item" @click="onPreview(index)" v-if="dataSource.current !== index">
-                  <el-icon :size="18">
-                    <View />
-                  </el-icon>
-                  <br>
-                  <span>预览</span>
+            <div class="line"></div>
+            <div class="lineBg"></div>
+          </el-scrollbar>
         </div>
+        <div class="mainBox-right">
+          <div class="line"></div>
+          <el-empty description="暂无数据" v-if="dataSource.list.length <= 0"
+            style="position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);"></el-empty>
+          <div class="right-container" v-if="dataSource.list.length > 0">
+            <el-tabs v-model="activeName" @tab-click="tabClick">
+              <el-tab-pane :label="item.sysname" :name="item.id"
+                v-for="(item, index) in dataSource.list[dataSource.current].items" :key="index"></el-tab-pane>
+            </el-tabs>
+            <div class="form-box mt20" v-if="dataSource.list.length > 0">
+              <el-scrollbar>
+                  <FormGroup :id="dataSource.currentId" :flag="dataSource.currentFlag" page="edit" @confirm="onConfirm"
+                  @on-delete="onDelete" />
+              </el-scrollbar>
             </div>
           </div>
-          </el-card>
         </div>
-      </el-scrollbar>
-      <div class="mt20" v-if="dataSource.list.length > 0" style="padding-bottom: 20px;">
-        <div class="mb20">数据源明细：{{ form.name }}</div>
-        <FormGroup :id="dataSource.currentId" :flag="dataSource.currentFlag" page="edit" @confirm="onConfirm" />
       </div>
     </div>
     <Modal v-model="modalData.show" icon="error" :cancel="true" :text="modalData.text" @confirm="modalConfirm"></Modal>
+    
+    <!-- 新增 -->
+    <AddEdit v-model:visible="dialogVisible" @confirm="onConfirm" />
   </div>
 </template>
 
 <style lang="scss" scoped>
-.flex-content {
+.pageTitle {
+  margin-bottom: 30px;
   display: flex;
-  height: 205px;
-  .box-card {
-    position: relative;
-    flex-shrink: 0;
-    margin-right: 20px;
-    height: 138px;
-    width: 188px;
-    border-radius: 10px;
-    -webkit-transform: translateY(0);
-    transform: translateY(0);
-    -webkit-transition: all 0.1s;
-    transition: all 0.1s;
-    :deep(.el-card__body) {
+  align-items: center;
+  font-size: 16px;
+  font-weight: 500;
+  letter-spacing: 0px;
+  line-height: 22px;
+  color: rgba(53, 64, 79, 1);
+
+  .icon {
+    margin-right: 3px;
+    width: 21px;
+    height: 21px;
+  }
+}
+
+.mainBox {
+  flex: 1;
   width: 100%;
-      height: 100%;
   display: flex;
-      flex-direction: column;
+  overflow: hidden;
+
+  &-left {
+    position: relative;
+    padding-left: 25px;
+    width: 134px;
+    height: 100%;
+
+    .line {
+      position: absolute;
+      top: 0;
+      right: 6px;
+      width: 3px;
+      height: 100%;
+      background: rgba(204, 204, 204, 1);
+      border-radius: 3px 0 0 3px;
     }
+    .lineBg {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 6px;
+      height: 100%;
+      background: #fff;
+      border-top: 2px solid rgba(33, 103, 217, 1);
+    }
+
+    .scroll {
+      padding: 17px 0;
+      overflow: hidden;
+
+      .left-card {
+        position: relative;
+        margin-bottom: 8px;
+        width: 80px;
+        height: 50px;
+        border-radius: 5px;
+        border: 1px solid rgba(134, 191, 252, 1);
+        cursor: pointer;
+
         .img {
           width: 100%;
-      border-radius: 10px 10px 0 0;
+          height: 100%;
+        }
+        .arrow {
+          z-index: 1;
+          position: absolute;
+          top: -1px;
+          right: -29px;
+          width: 8px;
+          height: 50px;
+        }
       }
 
-    .title {
-      width: 100%;
+      .left-card:last-child {
+        margin-bottom: 0;
+      }
+
+      .active {
+        background: rgba(255, 255, 255, 1);
+        border: 1px solid rgba(33, 103, 217, 1);
+      }
+    }
+  }
+  &-right {
+    position: relative;
     flex: 1;
+    height: 100%;
+    background: rgba(255, 255, 255, 1);
+    border-radius: 0 3px 3px 0;
+    .line {
+      width: 100%;
+      height: 2px;
+      background: linear-gradient(
+        90deg,
+        rgba(33, 103, 217, 1) 0%,
+        rgba(17, 200, 250, 1) 34.03%,
+        rgba(33, 103, 217, 1) 64.58%,
+        rgba(48, 128, 255, 1) 100%
+      );
+    }
+    .right-container {
+      height: calc(100% - 2px);
+      padding: 20px 33px;
       display: flex;
-      align-items: center;
-      justify-content: center;
-      color: #7a8495;
-      &-content {
-        padding-left: 16px;
-        padding-right: 16px;
-        font-size: 14px;
-        white-space: nowrap;
+      flex-direction: column;
+      .form-box {
+        flex: 1;
         overflow: hidden;
-        text-overflow: ellipsis;
+        :deep(inputBox) {
+          margin-left: 1px;
+          background: #f5fcff;
         }
+        :deep(.foundationBox) {
+          border-radius: 5px;
+          background: #ebebeb;
+          border: 1px solid #1db2f5;
+          overflow: hidden;
         }
-    .mask {
-      position: absolute;
-      z-index: -1;
-      opacity: 0;
-      -webkit-transition: all 0.1s;
-      transition: all 0.1s;
-      width: 100%;
-      height: 104px;
-      left: 0;
-      top: 0;
-      background: #191919;
-      display: flex;
-      -webkit-box-align: center;
-      -ms-flex-align: center;
-      align-items: center;
-      justify-content: center;
-      border-radius: 10px 10px 0 0;
-      .maskbutton {
-        color: #fff;
-        width: 100%;
-        position: absolute;
-        top: 50%;
-        -webkit-transform: translateY(-50%);
-        transform: translateY(-50%);
-        display: -webkit-box;
-        display: -ms-flexbox;
-        display: flex;
-        -ms-flex-pack: distribute;
-        justify-content: space-around;
-        &-item {
-          width: 70px;
-          font-size: 14px;
-          cursor: pointer;
-          text-align: center;
-          color: #fff;
+        :deep(.el-form-item__label) {
+          height: 40px;
+          line-height: 40px;
+          background: #f5fcff;
+          color: rgba(148, 148, 148, 1);
         }
+        :deep(.el-form-item) {
+          margin-bottom: 1px;
         }
+        :deep(.el-input),
+        :deep(.el-select),
+        :deep(.el-select__wrapper) {
+          height: 40px;
+          line-height: 40px;
         }
+        :deep(.is-disabled) {
+          background: #f5fcff;
+          .el-input__wrapper {
+            background: #f5fcff;
+            box-shadow: none;
+            border-radius: 0;
           }
-  .active {
-    .title {
-      background: #2c9ef7;
-      color: #fff;
+          .el-input__inner {
+            -webkit-text-fill-color: rgba(53, 64, 79, 1);
           }
         }
-  .box-card:hover {
-    width: 250px;
-    height: 190px;
-    margin: 0 16px;
-    .mask {
-      opacity: 1;
-      width: 100%;
-      height: 140px;
-      display: block;
-      position: absolute;
-      z-index: 50;
+        :deep(.is-disabled).el-select__wrapper {
+          background: #f5fcff;
+          box-shadow: none;
+          border-radius: 0;
+          .el-select__tags-text {
+            color: rgba(53, 64, 79, 1);
           }
-    .title {
-      &-content {
-        font-size: 18px;
         }
       }
     }
-  .box-card:last-child {
-    margin-right: 0;
   }
 }
 </style>
\ No newline at end of file

src/views/assetLibrary/modules/formGroup.vue

@@ -12,16 +12,16 @@ import {
   add,
 } from "@/api/assetLibrary/index";
 import { oracleisinsData, getCode } from "@/api/assetLibrary/dict";
-import useAppStore from '@/store/modules/app'
-const emit = defineEmits(["cancel", "confirm"]);
+import useAppStore from "@/store/modules/app";
+const emit = defineEmits(["cancel", "confirm", "onDelete"]);
 
-const appStore = useAppStore()
+const appStore = useAppStore();
 const props = withDefaults(
   defineProps<{
     id?: string;
     flag?: string;
     page?: string;
-    title?: string;
+    typeData?: Array<any>;
   }>(),
   {
     id: "",
@@ -30,7 +30,11 @@ const props = withDefaults(
 );
 
 const formRef = ref<FormInstance>();
-const titleName = ref(props.title);
+const titleName = ref('');
+const dbtypeData = ref({
+  type: 0,
+  list: []
+})
 const pagecodeList = ref([]);
 const datadisList = ref([]);
 const userList = ref([]);
@@ -44,8 +48,16 @@ const modalData = reactive({
 
 const data = reactive({
   form: <any>{
+    user: [],
   },
   rules: {
+    dbtype: [
+      {
+        required: true,
+        message: "请选择数据源类型",
+        trigger: ["change"],
+      },
+    ],
     sysname: [
       {
         required: true,
@@ -60,21 +72,13 @@ const data = reactive({
         trigger: ["blur"],
       },
     ],
-    dbip: [
-      { required: true, message: "请输入IP地址", trigger: ["blur"] },
-    ],
-    dbport: [
-      { required: true, message: "请输入端口号", trigger: ["blur"] },
-    ],
+    dbip: [{ required: true, message: "请输入IP地址", trigger: ["blur"] }],
+    dbport: [{ required: true, message: "请输入端口号", trigger: ["blur"] }],
     servername: [
       { required: true, message: "请输入实例名", trigger: ["blur"] },
     ],
-    username: [
-      { required: true, message: "请输入用户名", trigger: ["blur"] },
-    ],
-    password: [
-      { required: true, message: "请输入密码", trigger: ["blur"] },
-    ],
+    username: [{ required: true, message: "请输入用户名", trigger: ["blur"] }],
+    password: [{ required: true, message: "请输入密码", trigger: ["blur"] }],
     version: [
       {
         required: true,
@@ -98,18 +102,25 @@ const { form, rules } = toRefs(data);
 const onAdd = () => {
   const formData = {
     flag: 1,
-    user: form.value.user ? form.value.user.map(item => { return {id: item} }) : []
-  }
-  form.value = {...form.value,...formData}
+    user: form.value.user
+      ? form.value.user.map((item) => {
+          return { id: item };
+        })
+      : [],
+  };
+  form.value = { ...form.value, ...formData };
   if (props.page === "edit") {
-    form.value = {...form.value, ...{id: form.value.id}}
+    form.value = { ...form.value, ...{ id: form.value.id } };
   } else if (props.page === "add") {
-    const username = appStore.userInfo.user.username
-    const loginUser = { tsysUser: { username: username }, username: username }
-    form.value = {...form.value, ...{loginUser: loginUser,dbtype: titleName.value}}
+    const username = appStore.userInfo.user.username;
+    const loginUser = { tsysUser: { username: username }, username: username };
+    form.value = {
+      ...form.value,
+      ...{ loginUser: loginUser, dbtype: titleName.value },
+    };
   }
 
-  console.log('add', form.value)
+  console.log("add", form.value);
   add(form.value).then((res) => {
     const flag = res.flag;
     if (flag) {
@@ -226,7 +237,7 @@ const detection = () => {
   form.value.dbtype = titleName.value;
 
   checkVersion(form.value).then((res) => {
-    const { flag, data, msg } = res
+    const { flag, data, msg } = res;
     if (flag) {
       form.value.version = data;
     } else {
@@ -248,8 +259,12 @@ const getInitEdit = () => {
   initEdit(data).then((res) => {
     // console.log(res)
     form.value = res.data;
-    form.value.user = form.value.user ? form.value.user.map(item => { return item.id }) : []
-    titleName.value = form.value.dbtype
+    form.value.user = form.value.user
+      ? form.value.user.map((item) => {
+          return item.id;
+        })
+      : [];
+    titleName.value = form.value.dbtype;
     getQueryDatadis();
     pagecodeList.value = getCode(titleName.value.toLowerCase());
   });
@@ -284,7 +299,7 @@ const oracleisinsChange = () => {
     }
   } else if (form.value.oracleisins === "1") {
     form.value.oracleIns =
-      (form.value.oracleIns && form.value.oracleIns.length > 0)
+      form.value.oracleIns && form.value.oracleIns.length > 0
         ? form.value.oracleIns
         : [{ insip: "", insname: "", insport: "" }];
     form.value.dbservername = "";
@@ -299,10 +314,36 @@ const oracleisinsAdd = () => {
 };
 
 // 删除实例
-const oracleisinsDelete = () => {
-  form.value.oracleIns = form.value.oracleIns.slice(0, -1);
+const oracleisinsDelete = (index) => {
+  form.value.oracleIns.splice(index, 1);
 };
 
+// 删除
+const onDelete = () => {
+  emit("onDelete", form.value);
+};
+
+const titleNameChange = () => {
+  // dbtypeData
+  dbtypeData.value.type = 0
+  const currentData = props.typeData.find((item) => item.name === titleName.value);
+  dbtypeData.value = Object.assign({...dbtypeData.value, ...currentData})
+  if (dbtypeData.value.type !== 4) {
+    form.value.dbtype = titleName.value
+    getQueryDatadis();
+    pagecodeList.value = getCode(titleName.value.toLowerCase());
+  }else{
+    form.value.dbtype = ''
+  }
+  console.log(dbtypeData.value.type)
+}
+
+const dbtypeChange = () => {
+  getQueryDatadis();
+  pagecodeList.value = getCode(titleName.value.toLowerCase());
+}
+
+
 watch(
   () => props.id,
   (newVal) => {
@@ -313,148 +354,216 @@ watch(
 );
 
 onMounted(() => {
-  if (props.page === "add") {
-    titleName.value = props.title;
-    getQueryDatadis();
-    pagecodeList.value = getCode(titleName.value.toLowerCase());
-  }
   getQueryUser();
 });
 </script>
 
 <template>
   <div class="dataList">
-    <el-form ref="formRef" class="form" :model="form" :rules="rules" label-width="150px" :disabled="readOnly">
+    <el-form ref="formRef" class="form" :model="form" :rules="rules" label-width="150px" :disabled="readOnly" :label-position="page === 'add' ? 'left' : 'right'">
+      <DividerTitle title-name="数据源明细" />
+      <div class="foundationBox">
+        <el-row :gutter="page === 'add' ? 50 : 0">
+          <el-col :span="(page === 'add' && dbtypeData.type === 0) ? 12 : 24" v-if="page === 'add'">
+            <el-row :gutter="50">
+              <el-col :span="dbtypeData.type === 0 ? 24 : 12">
+                <el-form-item label="数据源类型" prop="dbtype" required>
+                  <div class="inputBox">
+                    <el-select v-model="titleName" @change="titleNameChange" placeholder="请选择数据源类型">
+                      <el-option v-for="item in typeData" :key="item.name" :label="item.name"
+                        :value="item.name">
+                      </el-option>
+                    </el-select>
+                  </div>
+                </el-form-item>
+              </el-col>
+              <el-col :span="1" v-if="dbtypeData.type === 4" style="padding: 0;">
+                <div style="width: 100%;height: 1px;background-color: #D2DCE7;margin-top: 36%;display: flex;justify-content: center;"></div>
+              </el-col>
+              <el-col :span="4" v-if="dbtypeData.type === 4">
+                <el-form-item label="" label-width="0"  prop="dbtype" required>
+                  <div class="inputBox">
+                    <el-select v-model="form.dbtype" @change="dbtypeChange" placeholder="请选择数据源类型">
+                      <el-option v-for="item in dbtypeData.list" :key="item.name" :label="item.name"
+                        :value="item.name">
+                      </el-option>
+                    </el-select>
+                  </div>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-col>
+          <el-col :span="page === 'add' ? 12 : 24">
             <el-form-item label="数据源名称" prop="sysname" required>
-        <div style="width: 100%;background: #F3F5FA;margin-left: 4px;">
-          <el-input v-model="form.sysname"></el-input>
+              <div class="inputBox">
+                <el-input v-model="form.sysname" placeholder="请输入数据源名称"></el-input>
               </div>
             </el-form-item>
-      <el-form-item label="连接类型" prop="oracleisins" v-if="titleName === 'ORACLE'">
-        <div style="width: 100%;background: #F3F5FA;margin-left: 4px;">
-          <el-select v-model="form.oracleisins" @change="oracleisinsChange">
+          </el-col>
+          <el-col :span="page === 'add' ? 12 : 24" v-if="form.dbtype === 'ORACLE'">
+            <el-form-item label="连接类型" prop="oracleisins">
+              <div class="inputBox">
+                <el-select v-model="form.oracleisins" @change="oracleisinsChange" placeholder="请选择连接类型">
                   <el-option v-for="item in oracleisinsData" :key="item.value" :label="item.label" :value="item.value">
                   </el-option>
                 </el-select>
               </div>
             </el-form-item>
-      <el-form-item label="服务名" prop="dbservername" required
-        v-if="titleName === 'ORACLE' && form.oracleisins !== '1'">
-        <div style="width: 100%;background: #F3F5FA;margin-left: 4px;">
-          <el-input v-model="form.dbservername"></el-input>
+          </el-col>
+          <el-col :span="page === 'add' ? 12 : 24" v-if="form.dbtype === 'ORACLE' && form.oracleisins !== '1'">
+            <el-form-item label="服务名" prop="dbservername" required>
+              <div class="inputBox">
+                <el-input v-model="form.dbservername" placeholder="请输入服务名"></el-input>
               </div>
             </el-form-item>
-      <el-form-item label="IP地址" prop="dbip" required v-if="form.oracleisins !== '1'">
-        <div style="width: 100%;background: #F3F5FA;margin-left: 4px;">
-          <el-input v-model="form.dbip"></el-input>
+          </el-col>
+          <el-col :span="page === 'add' ? 12 : 24" v-if="form.oracleisins !== '1'">
+            <el-form-item label="IP地址" prop="dbip" required>
+              <div class="inputBox">
+                <el-input v-model="form.dbip" placeholder="请输入IP地址"></el-input>
               </div>
             </el-form-item>
-      <el-form-item label="端口号" prop="dbport" required v-if="form.oracleisins !== '1'">
-        <div style="width: 100%;background: #F3F5FA;margin-left: 4px;">
-          <el-input v-model="form.dbport"></el-input>
+          </el-col>
+          <el-col :span="page === 'add' ? 12 : 24" v-if="form.oracleisins !== '1'">
+            <el-form-item label="端口号" prop="dbport" required>
+              <div class="inputBox">
+                <el-input v-model="form.dbport" placeholder="请输入端口号"></el-input>
               </div>
             </el-form-item>
-      <el-form-item label="实例名" prop="servername" required v-if="titleName === 'GBASE8S'">
-        <div style="width: 100%;background: #F3F5FA;margin-left: 4px;">
-          <el-input v-model="form.servername"></el-input>
+          </el-col>
+          <el-col :span="page === 'add' ? 12 : 24" v-if="form.dbtype === 'GBASE8S'">
+            <el-form-item label="实例名" prop="servername" required >
+              <div class="inputBox">
+                <el-input v-model="form.servername" placeholder="请输入实例名"></el-input>
               </div>
             </el-form-item>
-      <el-form-item label="数据库名" prop="dbservername" required
-        v-if="titleName !== 'ES' && titleName !== 'KAFKA' && titleName !== 'ORACLE' && titleName !== 'HIVE_TDH'">
-        <div style="width: 100%;background: #F3F5FA;margin-left: 4px;">
-          <el-input v-model="form.dbservername"></el-input>
+          </el-col>
+          <el-col :span="page === 'add' ? 12 : 24" v-if="form.dbtype !== 'ES' && form.dbtype !== 'KAFKA' && form.dbtype !== 'ORACLE' && form.dbtype !== 'HIVE_TDH'">
+            <el-form-item label="数据库名" prop="dbservername" required>
+              <div class="inputBox">
+                <el-input v-model="form.dbservername" placeholder="请输入数据库名"></el-input>
               </div>
             </el-form-item>
-      <el-form-item label="HIVE 数据库名" prop="dbservername" required v-if="titleName === 'HIVE_TDH'">
-        <div style="width: 100%;background: #F3F5FA;margin-left: 4px;">
-          <el-input v-model="form.dbservername"></el-input>
+          </el-col>
+          <el-col :span="page === 'add' ? 12 : 24" v-if="form.dbtype === 'HIVE_TDH'">
+            <el-form-item label="HIVE 数据库名" prop="dbservername" required>
+              <div class="inputBox">
+                <el-input v-model="form.dbservername" placeholder="请输入数据库名"></el-input>
               </div>
             </el-form-item>
-      <el-form-item label="Driver Classpath" prop="Classpath" v-if="titleName === 'HIVE'">
-        <div style="width: 100%;background: #F3F5FA;margin-left: 4px;">
-          <el-input v-model="form.Classpath"></el-input>
+          </el-col>
+          <el-col :span="page === 'add' ? 12 : 24" v-if="form.dbtype === 'HIVE'">
+            <el-form-item label="Driver Classpath" prop="Classpath">
+              <div class="inputBox">
+                <el-input v-model="form.Classpath" placeholder="请输入Driver Classpath"></el-input>
               </div>
             </el-form-item>
-      <el-form-item label="用户名" prop="username" required v-if="titleName !== 'KAFKA'">
-        <div style="width: 100%;background: #F3F5FA;margin-left: 4px;">
-          <el-input v-model="form.username"></el-input>
+          </el-col>
+          <el-col :span="page === 'add' ? 12 : 24" v-if="form.dbtype !== 'KAFKA'">
+            <el-form-item label="用户名" prop="username" required>
+              <div class="inputBox">
+                <el-input v-model="form.username" placeholder="请输入用户名"></el-input>
               </div>
             </el-form-item>
-      <el-form-item label="密码" prop="password" required v-if="titleName !== 'KAFKA'">
-        <div style="width: 100%;background: #F3F5FA;margin-left: 4px;">
-          <el-input v-model="form.password" show-password></el-input>
+          </el-col>
+          <el-col :span="page === 'add' ? 12 : 24" v-if="form.dbtype !== 'KAFKA'">
+            <el-form-item label="密码" prop="password" required>
+              <div class="inputBox">
+                <el-input v-model="form.password" show-password placeholder="请输入密码"></el-input>
               </div>
             </el-form-item>
-      <el-form-item label="数据库版本" prop="version" :required="titleName !== 'KAFKA'" >
-        <div style="width: 100%;background: #F3F5FA;margin-left: 4px;display: flex;">
+          </el-col>
+          <el-col :span="page === 'add' ? 12 : 24">
+            <el-form-item label="数据库版本" prop="version" :required="form.dbtype !== 'KAFKA'">
+              <div class="inputBox" style="display: flex;align-items: center;">
                 <el-input v-model="form.version" v-if="readOnly"></el-input>
-          <el-select v-model="form.version" v-if="!readOnly">
+                <el-select v-model="form.version" v-if="!readOnly" placeholder="请选择数据库版本">
                   <el-option v-for="item in datadisList" :key="item.dictvalue" :label="item.dictvalue"
                     :value="item.dictvalue">
                   </el-option>
                 </el-select>
-          <el-button type="primary" @click="detection" v-if="!readOnly">检测</el-button>
+                <el-button type="primary" style="width: 60px;height: 90%;margin-left: 5px;border-radius: 0;"
+                  @click="detection" v-if="!readOnly">检测</el-button>
               </div>
             </el-form-item>
+          </el-col>
+          <el-col :span="page === 'add' ? 12 : 24">
             <el-form-item label="字符编码" prop="pagecode" required>
-        <div style="width: 100%;background: #F3F5FA;margin-left: 4px;">
+              <div class="inputBox">
                 <el-input v-model="form.pagecode" v-if="readOnly"></el-input>
-          <el-select v-model="form.pagecode" v-if="!readOnly">
+                <el-select v-model="form.pagecode" v-if="!readOnly" placeholder="请选择字符编码">
                   <el-option v-for="item in pagecodeList" :key="item" :label="item" :value="item">
                   </el-option>
                 </el-select>
               </div>
             </el-form-item>
+          </el-col>
+          <el-col :span="page === 'add' ? 12 : 24">
             <el-form-item label="授权用户" prop="user">
-        <div style="width: 100%;background: #F3F5FA;margin-left: 4px;">
-          <el-select v-model="form.user" multiple>
+              <div class="inputBox">
+                <div class="userEmpty" v-if="readOnly && form.user.length <= 0">—</div>
+                <el-select v-model="form.user" multiple v-if="!readOnly || form.user.length > 0" placeholder="请选择授权用户">
                   <el-option v-for="item in userList" :key="item.id" :label="item.realname" :value="item.id">
                   </el-option>
                 </el-select>
               </div>
             </el-form-item>
+          </el-col>
+        </el-row>
+      </div>
       <div class="oracleisinsBox" v-if="form.oracleisins === '1'">
-        <div class="title">请新增oracle实例</div>
-        <div class="top">
+        <DividerTitle title-name="oracle实例">
+          <el-button type="primary" link icon="Plus" v-if="!readOnly" @click="oracleisinsAdd">新增oracle实例</el-button>
+        </DividerTitle>
+        <!-- <div class="top">
           <span>oracle实例</span>
           <div class="oracleInsBut">
-            <el-button type="info" link icon="Plus" @click="oracleisinsAdd">新增</el-button>
+            
             <el-button type="info" link icon="Minus" @click="oracleisinsDelete">删除</el-button>
           </div>
-        </div>
-        <el-table :data="form.oracleIns" border style="width: 100%">
+        </div> -->
+        <el-table :data="form.oracleIns" stripe style="width: 100%">
+          <el-table-column type="index" label="序号" width="100" align="center" />
           <el-table-column prop="insname" label="实例名" align="center">
             <template #default="scope">
               <el-form-item label="" label-width="0" :prop="`oracleIns.${scope.$index}.insname`"
-                :rules="[{ required: true, message: '请输入实例名', trigger:'blur' }]">
-                <el-input v-model="scope.row.insname"></el-input>
+                :rules="[{ required: true, message: '请输入实例名', trigger: 'blur' }]">
+                <el-input v-model="scope.row.insname" placeholder="请输入实例名"></el-input>
               </el-form-item>
             </template>
           </el-table-column>
           <el-table-column prop="insip" label="IP地址" align="center">
             <template #default="scope">
               <el-form-item label="" label-width="0" :prop="`oracleIns.${scope.$index}.insip`"
-                :rules="[{ required: true, message: '请输入IP地址', trigger:'blur' }]">
-                <el-input v-model="scope.row.insip"></el-input>
+                :rules="[{ required: true, message: '请输入IP地址', trigger: 'blur' }]">
+                <el-input v-model="scope.row.insip" placeholder="请输入IP地址"></el-input>
               </el-form-item>
             </template>
           </el-table-column>
           <el-table-column prop="insport" label="端口号" align="center">
             <template #default="scope">
               <el-form-item label="" label-width="0" :prop="`oracleIns.${scope.$index}.insport`"
-                :rules="[{ required: true, message: '请输入端口号', trigger:'blur' }]">
-                <el-input v-model="scope.row.insport"></el-input>
+                :rules="[{ required: true, message: '请输入端口号', trigger: 'blur' }]">
+                <el-input v-model="scope.row.insport" placeholder="请输入端口号"></el-input>
               </el-form-item>
             </template>
           </el-table-column>
+          <el-table-column prop="insport" label="操作" align="center" width="150">
+            <template #default="scope">
+              <el-button type="primary" link icon="delete" @click="oracleisinsDelete(scope.$index)">删除</el-button>
+            </template>
+          </el-table-column>
         </el-table>
       </div>
     </el-form>
     <div class="buttonBox mt20">
-      <el-button v-if="!readOnly" type="primary" style="width: 150px;" @click="onConfirm">确认</el-button>
-      <el-button v-if="!readOnly" type="primary" style="width: 150px;" @click="test">测试</el-button>
-      <el-button v-if="!readOnly" type="info" style="width: 150px;" @click="onCancel">取消</el-button>
-      <el-button v-if="readOnly" type="primary" style="width: 150px;" @click="readOnly = false">编辑</el-button>
+      <el-button v-if="!readOnly" style="width: 80px;" @click="onCancel">取消</el-button>
+      <el-button v-if="!readOnly" type="primary" style="width: 80px;" @click="onConfirm">确认</el-button>
+      <el-button v-if="!readOnly" type="primary" style="width: 80px;background: #FF8D1A;border: 1px solid #FF8D1A;"
+        @click="test">测试</el-button>
+      <el-button v-if="readOnly" type="primary" style="width: 80px;" @click="readOnly = false">编辑</el-button>
+      <el-button v-if="readOnly" type="primary" style="width: 80px;background: #FF8D1A;border: 1px solid #FF8D1A;"
+        @click="onDelete">删除</el-button>
     </div>
     <Modal v-model="modalData.show" :icon="modalData.icon" :cancel="false" :text="modalData.text"
       @confirm="modalConfirm" @cancel="modalCancel">
@@ -467,34 +576,48 @@ onMounted(() => {
   display: flex;
   justify-content: center;
 }
+
 .form {
   :deep(.el-form-item__label) {
     background: #f0f0f0;
   }
+
   :deep(.el-input__wrapper) {
     // background: rgba(255, 255, 255, 0);
     // box-shadow: none;
   }
+
   :deep(.el-form-item) {
     margin-bottom: 5px;
   }
+
   :deep(.el-select__wrapper) {
     // background: rgba(255, 255, 255, 0);
     // box-shadow: none;
   }
+
   :deep(.el-form-item__error) {
     left: auto;
     right: 83px;
     top: 24%;
+  }
+  .inputBox {
+    margin-left: 1px;
+    width: 100%;
+    height: 100%;
+  }
+  .userEmpty {
+    width: 100%;
+    height: 100%;
+    background: #f5fcff;
+    display: flex;
+    align-items: center;
+    padding-left: 13px;
+  }
 }
-}
+
 .oracleisinsBox {
-  .title {
-    height: 30px;
-    line-height: 30px;
-    font-weight: 700;
-    color: rgb(81, 90, 110);
-  }
+  margin-top: 24px;
   .top {
     position: relative;
     text-align: center;
@@ -504,20 +627,36 @@ onMounted(() => {
     position: relative;
     margin-bottom: 5px;
     background: rgb(210, 210, 210);
+
     .oracleInsBut {
       position: absolute;
       top: 0;
       right: 20px;
       height: 100%;
+
       :deep(.is-link) {
         color: rgb(81, 90, 110);
         font-weight: bold;
       }
     }
   }
-  :deep(.el-form-item__error){
-    right: 10px;
+  :deep(.el-form-item) {
+    margin-bottom: 0 !important;
+  }
+  :deep(.el-form-item__error) {
+    right: 6px !important;
+    top: 30% !important;
+  }
+  :deep(.el-table__header .el-table__cell) {
+    background-color: #ebf2ff !important;
+  }
+  :deep(.el-table__row--striped .el-table__cell) {
+    background-color: #ebf2ff !important;
+  }
+
+  :deep(.el-form-item__error) {
+    left: auto !important;
+    right: 10px !important;
   }
 }
 </style>
-