资产库改版

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')