From bb60682658f31bf2d2c202043e349c607805bb67 Mon Sep 17 00:00:00 2001
From: unknown <houliangliang@haizhi.com>
Date: Sat, 3 Aug 2024 23:36:32 +0800
Subject: [PATCH] =?UTF-8?q?style:=20front-ui=20add=20=E6=96=B0=E5=BB=BA?=
 =?UTF-8?q?=E4=BB=BB=E5=8A=A1=20=E6=95=B0=E6=8D=AE=E6=BA=90=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8icon?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 front-ui/src/views/datasource/const.js        |  9 ++++-
 front-ui/src/views/job/JobSaveOrUpdate.vue    | 33 +++++++++++++++++--
 .../views/job/JobSaveOrUpdateStreaming.vue    | 31 +++++++++++++++--
 3 files changed, 67 insertions(+), 6 deletions(-)

diff --git a/front-ui/src/views/datasource/const.js b/front-ui/src/views/datasource/const.js
index 31ed4b2..cc6aa3e 100644
--- a/front-ui/src/views/datasource/const.js
+++ b/front-ui/src/views/datasource/const.js
@@ -67,6 +67,13 @@ const dsTypeList = [
   //   img: httpPng
   // }
 ]
+const dsImgObj = {
+  1: mysqlPng,
+  2: ESPng,
+  3: oraclePng,
+  4: redisPng,
+  100: kafkaPng
+}
 // 目标数据源 redis 类型
 const RedisTypes = [
   {
@@ -154,4 +161,4 @@ const OracleServerTypes = [
   }
 ]
 
-export { DataSourceType, dsTypeList, RedisTypes, dsConfigOriginList, OracleServerTypes }
+export { DataSourceType, dsTypeList, RedisTypes, dsConfigOriginList, OracleServerTypes, dsImgObj }
diff --git a/front-ui/src/views/job/JobSaveOrUpdate.vue b/front-ui/src/views/job/JobSaveOrUpdate.vue
index b0bd458..cbd93ca 100644
--- a/front-ui/src/views/job/JobSaveOrUpdate.vue
+++ b/front-ui/src/views/job/JobSaveOrUpdate.vue
@@ -30,7 +30,12 @@
             <a-select @change="handleFromChange"
                       v-decorator="['selectedDataSource', {rules: [{required: true, message: '请选择来源数据源'}],initialValue: selectedDataSource}]">
               <a-select-option v-for="table in fromDsList" :value="table.dsId" :key="table.name">
-                {{ table.name }}
+                <div>
+                  <span class="ds-icon">
+                    <img :src="dsImgObj[table.type]" alt="">
+                  </span>
+                  <span>{{ table.name }}</span>
+                </div>
               </a-select-option>
             </a-select>
           </a-form-item>
@@ -40,7 +45,12 @@
             <a-select @change="handleToDsChange"
                       v-decorator="['selectedTargetSource', {rules: [{required: true, message: '请选择目标数据源'}],initialValue: selectedTargetSource}]">
               <a-select-option v-for="table in toDsList" :value="table.dsId" :key="table.name">
-                {{ table.name }}
+                <div>
+                  <span class="ds-icon">
+                    <img :src="dsImgObj[table.type]" alt="">
+                  </span>
+                  <span>{{ table.name }}</span>
+                </div>
               </a-select-option>
             </a-select>
           </a-form-item>
@@ -167,7 +177,7 @@
 import { fetchTables, getDsTbFieldsInfo, listQuery } from '@/api/datasource/datasource'
 import { addObj, getObj, modifyObj } from '@/api/job/job'
 import LoadingDx from './../../components/common/loading-dx.vue'
-import { RedisTypes } from './../datasource/const'
+import { RedisTypes, dsImgObj } from './../datasource/const'
 export default {
   components: {
     LoadingDx
@@ -175,6 +185,7 @@ export default {
   data () {
     return {
       RedisTypes,
+      dsImgObj,
       jobType: 'default',
       form: this.$form.createForm(this),
       selectedDataSource: null,
@@ -515,4 +526,20 @@ export default {
     }
   }
 }
+
+::v-deep .ds-icon {
+  float: left;
+  width: 24px;
+  height: 24px;
+  border-radius: 6px;
+  overflow: hidden;
+  margin-right: 4px;
+  img {
+    width: 24px;
+    height: 24px;
+    margin: 0;
+    padding: 0;
+    border: 0;
+  }
+}
 </style>
diff --git a/front-ui/src/views/job/JobSaveOrUpdateStreaming.vue b/front-ui/src/views/job/JobSaveOrUpdateStreaming.vue
index 72b0614..84bc5f7 100644
--- a/front-ui/src/views/job/JobSaveOrUpdateStreaming.vue
+++ b/front-ui/src/views/job/JobSaveOrUpdateStreaming.vue
@@ -29,7 +29,12 @@
             <label>来源数据源</label>
             <a-select v-model="selectedDataSource" @change="handleFromChange" placeholder="请选择来源数据源">
               <a-select-option v-for="table in fromDsList" :value="table.dsId" :key="table.name">
-                {{ table.name }}
+                <div>
+                  <span class="ds-icon">
+                    <img :src="dsImgObj[table.type]" alt="">
+                  </span>
+                  <span>{{ table.name }}</span>
+                </div>
               </a-select-option>
             </a-select>
           </a-col>
@@ -37,7 +42,12 @@
             <label>目标数据源</label>
             <a-select v-model="selectedTargetSource" @change="handleToDsChange" placeholder="请选择目标数据源">
               <a-select-option v-for="table in toDsList" :value="table.dsId" :key="table.name">
-                {{ table.name }}
+                <div>
+                  <span class="ds-icon">
+                    <img :src="dsImgObj[table.type]" alt="">
+                  </span>
+                  <span>{{ table.name }}</span>
+                </div>
               </a-select-option>
             </a-select>
           </a-col>
@@ -108,12 +118,14 @@
 import { fetchTables, listQuery } from '@/api/datasource/datasource'
 import { streamAddObj, getObj, streamModifyObj } from '@/api/job/job'
 import LoadingDx from './../../components/common/loading-dx.vue'
+import { dsImgObj } from './../datasource/const'
 export default {
   components: {
     LoadingDx
   },
   data () {
     return {
+      dsImgObj,
       jobType: 'default',
       form: this.$form.createForm(this),
       selectedDataSource: null,
@@ -303,4 +315,19 @@ export default {
     }
   }
 }
+::v-deep .ds-icon {
+  float: left;
+  width: 24px;
+  height: 24px;
+  border-radius: 6px;
+  overflow: hidden;
+  margin-right: 4px;
+  img {
+    width: 24px;
+    height: 24px;
+    margin: 0;
+    padding: 0;
+    border: 0;
+  }
+}
 </style>
-- 
Gitee