资产库模块上传

src/api/assetLibrary/dict.js

+import { queryCharset } from './index'
+
+// 连接类型
+export const oracleisinsData = [
+  { key: "服务名", value: "0", label: "服务名" },
+  { key: "实例名", value: "1", label: "实例名" },
+]
+
+// 字符编码
+export const getCode = (key) => {
+  if (!key) return
+  const list = JSON.parse(sessionStorage.getItem(key))
+  return list
+}
+
+// 全部字符编码
+export const getCueryCharset = async () => {
+  if (sessionStorage.getItem('mysql')) return
+  const databaseTypeList = ['mysql', 'oracle', 'postgresql', 'hive', 'hive_tdh', 'mssqlserver', 'db2', 'mariadb', 'informix', 'sybase', 'sybaseiq', 'sybaseiq', 'gbase', 'gbase8s', 'gbase8a', 'kingbase', 'dm', 'oscar', 'uxdb', 'greenplum', 'teradata', 'highgo', 'cache', 'hadoop', 'gauss', 'oceanbase', 'mongodb', 'es', 'KAFKA', 'gaussdb']
+  for (let i = 0; i < databaseTypeList.length; i++) {
+    const data = await queryCharset({ dbtype: databaseTypeList[i] })
+    sessionStorage.setItem(databaseTypeList[i].toLowerCase(), JSON.stringify(data.data))
+  }
+}
\ No newline at end of file

src/api/assetLibrary/index.js

+import request from '@/utils/request'
+
+/**
+ * 资产库 - 查询用户列表
+ * @param {*} query 
+ * @returns 
+ */
+export function queryUser(query) {
+  return request({
+    url: '/console/user/queryAll',
+    method: 'get',
+    params: query
+  })
+}
+
+/**
+ * 资产库 - 查询列表
+ * @param {*} query 
+ * @returns 
+ */
+export function queryAll(query) {
+  return request({
+    url: '/core/datasystem/queryAll',
+    method: 'get',
+    params: query
+  })
+}
+
+/**
+ * 资产库 - 数据源明细
+ * @param {*} query 
+ * @returns 
+ */
+export function initEdit(query) {
+  return request({
+    url: '/core/datasystem/initEdit',
+    method: 'get',
+    params: query
+  })
+}
+
+/**
+ * 资产库 - 查询数据库版本
+ * @param {*} query 
+ * @returns 
+ */
+export function queryDatadis(query) {
+  return request({
+    url: '/core/datadis/queryAll',
+    method: 'get',
+    params: query
+  })
+}
+
+/**
+ * 资产库 - 数据库版本检测
+ * @param {*} data 
+ * @returns 
+ */
+export function checkVersion(data) {
+  return request({
+    url: '/core/datasystem/checkVersion',
+    method: 'post',
+    data: data
+  })
+}
+
+/**
+ * 资产库 - 测试数据源名称是否重复
+ * @param {*} data 
+ * @returns 
+ */
+export function checkRepeatName(data) {
+  return request({
+    url: '/core/datasystem/checkRepeatName',
+    method: 'post',
+    data: data
+  })
+}
+
+/**
+ * 资产库 - 测试连接
+ * @param {*} data 
+ * @returns 
+ */
+export function testConnect(data) {
+  return request({
+    url: '/core/datasystem/testConnect',
+    method: 'post',
+    data: data
+  })
+}
+
+/**
+ * 资产库 - 新增修改接口
+ * @param {*} data 
+ * @returns 
+ */
+export function add(data) {
+  return request({
+    url: '/core/datasystem/add',
+    method: 'post',
+    data: data
+  })
+}
+
+/**
+ * 资产库 - 关联检测
+ * @param {*} data 
+ * @returns 
+ */
+export function checkDatasystemUsed(data) {
+  return request({
+    url: '/core/datasystem/checkDatasystemUsed',
+    method: 'post',
+    data: data
+  })
+}
+
+/**
+ * 资产库 - 删除数据源
+ * @param {*} data 
+ * @returns 
+ */
+export function del(data) {
+  return request({
+    url: '/core/datasystem/del',
+    method: 'post',
+    data: data
+  })
+}
+
+/**
+ * 资产库 - 查询字符编码
+ * @param {*} query 
+ * @returns 
+ */
+export function queryCharset(query) {
+  return request({
+    url: '/core/datasystem/queryCharset',
+    method: 'get',
+    params: query
+  })
+}
\ No newline at end of file

src/layout/components/AppMain.vue

@@ -45,7 +45,7 @@ const hasTagsView = computed(() => settings.tagsView)
 const layout = computed(() => settings.layout)
 
 function onScroll(val) {
-  appStore.updateScrollTop(val.scrollTop)
+  // appStore.updateScrollTop(val.scrollTop)
 }
 </script>
 

src/views/assetLibrary/QueryForm.vue

 <script setup lang="ts" name="QueryForm">
-import { ref, computed } from 'vue'
+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 employeesList = ref([])
+const dataTypeList = ref([])
 const props = defineProps<{
   modelValue: any
 }>()
@@ -30,6 +32,10 @@ function onReset(formRef: FormInstance) {
   emit('reset', formRef)
 }
 
+onMounted(() => {
+  
+})
+
 </script>
 
 <template>
@@ -38,14 +44,22 @@ function onReset(formRef: FormInstance) {
     @search="onSearch"
     @reset="onReset"
     label-width='100'>
-    <el-form-item label="数据源名称" prop="customerName">
-      <el-input v-model="queryForm.customerName" placeholder="请输入客户名称" clearable />
+    <el-form-item label="数据源名称" prop="sysname">
+      <el-input v-model="queryForm.sysname" placeholder="请输入客户名称" clearable />
     </el-form-item>
-    <el-form-item label="IP" prop="customerName">
-      <el-input v-model="queryForm.customerName" placeholder="请输入客户名称" clearable />
+    <el-form-item label="IP" prop="ip">
+      <el-input v-model="queryForm.ip" placeholder="请输入客户名称" clearable />
     </el-form-item>
-    <el-form-item label="数据源类型" prop="customerName">
-      <el-input v-model="queryForm.customerName" placeholder="请输入客户名称" clearable />
+    <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>
 </template>

src/views/assetLibrary/list.vue

 <script setup name="AssetLibrary">
-import { ref, toRefs, reactive, getCurrentInstance } from 'vue'
+import { ref, toRefs, reactive, getCurrentInstance, onMounted } from 'vue'
+import { ElMessage } from 'element-plus'
 import QueryForm from './QueryForm.vue'
 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";
+
 const emit = defineEmits(['page'])
 
 const { proxy } = getCurrentInstance()
@@ -11,7 +16,11 @@ const data = reactive({
     name: ''
   },
   queryParams: {
-    customerName: null
+    sysname: '',
+    dbtype: '',
+    ip: '',
+    userId: '1',
+    projectId: ''
   },
   rules: {
   }
@@ -24,6 +33,18 @@ const modalData = reactive({
   text: ''
 })
 
+// 数据源信息
+const dataSource = reactive({
+  current: 0, // 当前索引
+  currentId: '', // 当前id
+  currentFlag: '',
+  list: [], // 数据源列表
+  del: {
+    id: '',
+    sysname: ''
+  }
+})
+
 // 新增
 const handleAdd = () => {
   emit('page', 'add')
@@ -32,39 +53,77 @@ const handleAdd = () => {
 // 筛选查询
 const onQuery = () => {
   console.log('onQuery')
-  // handleQuery()
+  getList()
 }
 // 查询组件事件重置
 const onReset = (formQuery) => {
   console.log('onReset')
   formQuery.resetFields()
+  getList()
 }
 
 // 预览
-const onPreview = () => {
-  console.log('onPreview')
+const onPreview = (index) => {
+  dataSource.current = index
+  dataSource.currentId = dataSource.list[dataSource.current].id
+  dataSource.currentFlag = dataSource.list[dataSource.current].flag
 }
 
 // 删除
-const onDelete = () => {
-  console.log('onPreview')
-  modalData.show = true
-  modalData.text = '删除后无法恢复，是否确认删除[若依配测系统]？'
+const onDelete = (val) => {
+  const { id, sysname } = val
+  checkDatasystemUsed({ id: id }).then(res => {
+    console.log(res)
+    const flag = { res }
+    if (flag) {
+      dataSource.current = 0
+      dataSource.del.id = id
+      dataSource.del.sysname = sysname
+      modalData.text = `删除后无法恢复，是否确认删除[${sysname}]？`
+      modalData.show = true
+    }
+  })
 }
 
 // 确认删除回调
 const modalConfirm = () => {
+  del(dataSource.del).then(res => {
+    const flag = { res }
+    if (flag) {
+      ElMessage.success({
+        message: '删除成功',
+        type: 'success',
+      })
+      getList()
+    }
+  })
   modalData.show = false
 }
 
 // 编辑成功回调
 const onConfirm = () => {
-  console.log('编辑成功')
+  // console.log('编辑成功')
+  getList()
 }
+
+// 列表查询
+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
+  })
+}
+
+onMounted(() => {
+  getCueryCharset()
+  getList()
+})
 </script>
 
 <template>
-  <div class="app-container scroller">
+  <div class="app-container">
     <PageTitle>
       <template #title>
         资产库
@@ -77,21 +136,22 @@ const onConfirm = () => {
       <query-form ref="QueryFormRef" v-model="queryParams" @query="onQuery" @reset="onReset" />
       <el-scrollbar>
         <div class="flex-content">
-          <el-card class="box-card" :body-style="{ padding: '0px !important' }">
-            <img class="img" src="https://172.19.1.166:9005/static/img/MYSQL.535270a.png" alt="">
+          <el-card class="box-card" :class="dataSource.current === index ? 'active' : ''"
+            :body-style="{ padding: '0px !important' }" v-for="(item, index) in dataSource.list" :key="index">
+            <img class="img" :src="img[item.dbtype]" alt="">
             <div class="title">
-              <div class="title-content">若依配测系统</div>
+              <div class="title-content">{{ item.sysname }}</div>
             </div>
             <div class="mask">
               <div class="maskbutton">
-                <div class="maskbutton-item" @click="onDelete">
+                <div class="maskbutton-item" @click="onDelete(item)">
                   <el-icon :size="18">
                     <delete />
                   </el-icon>
                   <br>
                   <span>删除</span>
                 </div>
-                <div class="maskbutton-item" @click="onPreview">
+                <div class="maskbutton-item" @click="onPreview(index)" v-if="dataSource.current !== index">
                   <el-icon :size="18">
                     <View />
                   </el-icon>
@@ -103,9 +163,9 @@ const onConfirm = () => {
           </el-card>
         </div>
       </el-scrollbar>
-      <div class="mt20">
+      <div class="mt20" v-if="dataSource.list.length > 0" style="padding-bottom: 20px;">
         <div class="mb20">数据源明细：{{ form.name }}</div>
-        <FormGroup :id="'1111'" page="edit" @confirm="onConfirm"  />
+        <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>
@@ -115,7 +175,7 @@ const onConfirm = () => {
 <style lang="scss" scoped>
 .flex-content {
   display: flex;
-  height: 190px;
+  height: 205px;
   .box-card {
     position: relative;
     flex-shrink: 0;
@@ -193,6 +253,12 @@ const onConfirm = () => {
       }
     }
   }
+  .active {
+    .title {
+      background: #2c9ef7;
+      color: #fff;
+    }
+  }
   .box-card:hover {
     width: 250px;
     height: 190px;