Merge pull request #172 from Helltab/feature/ui/framework/vue3

fixes #164, searchTable
apache · Jan 24, 2024 · 37c08f3 · 37c08f3
2 parents 7fc529f + e4e781c
commit 37c08f3
Show file tree

Hide file tree

Showing 5 changed files with 91 additions and 24 deletions.
diff --git a/ui-vue3/src/base/i18n/en.ts b/ui-vue3/src/base/i18n/en.ts
@@ -54,6 +54,9 @@ const words: I18nType = {
   timeout: 'timeout(ms)',
   serialization: 'serialization',
   appName: 'Application Name',
+  instanceNum: 'Instance Number',
+  deployCluster: 'Deploy Cluster',
+  registerCluster: 'Register Cluster',
   serviceName: 'Service Name',
   registrySource: 'Registry Source',
   instanceRegistry: 'Instance Registry',
@@ -275,7 +278,11 @@ const words: I18nType = {
   backHome: 'Back Home',
   noPageTip: 'Sorry, the page you visited does not exist.',
   globalSearchTip: 'Search ip, application, instance, service',
-
+  placeholder: {
+    typeAppName: 'please type appName, support for prefix',
+    typeDefault: 'please type '
+  },
+  none: 'No Select',
   details: 'Details',
   debug: 'Debug',
   distribution: 'Distribution',

diff --git a/ui-vue3/src/base/i18n/zh.ts b/ui-vue3/src/base/i18n/zh.ts
@@ -55,6 +55,9 @@ const words: I18nType = {
   timeout: '超时(毫秒)',
   serialization: '序列化',
   appName: '应用名',
+  instanceNum: '实例数量',
+  deployCluster: '部署集群',
+  registerClusters: '注册集群列表',
   serviceName: '服务名',
   registrySource: '注册来源',
   instanceRegistry: '应用级',
@@ -274,6 +277,12 @@ const words: I18nType = {
   noPageTip: '抱歉，你访问的页面不存在',
   globalSearchTip: '搜索ip，应用，实例，服务',
 
+  globalSearchTip: '搜索ip，应用，实例，服务',
+  placeholder: {
+    typeAppName: '请输入应用名，支持前缀搜索',
+    typeDefault: '请输入'
+  },
+  none: '无',
   details: '详情',
   debug: '调试',
   distribution: '分布',

diff --git a/ui-vue3/src/components/SearchTable.vue b/ui-vue3/src/components/SearchTable.vue
@@ -17,27 +17,45 @@
 <template>
   <div class="__container_search_table">
     <a-form>
-      <a-row justify="start">
-        <a-col :span="10">
-          <a-form-item :label="$t('applicationDomain.name')">
-            <a-input-group compact>
-              <a-input-search
-                v-model:value="searchDomain.params.appName"
-                placeholder="input search text"
-                enter-button
-                @search="searchDomain.onSearch()"
-              ></a-input-search>
-            </a-input-group>
+      <a-flex wrap="wrap" gap="small">
+        <template v-for="q in searchDomain.params">
+          <a-form-item :label="$t(q.label)">
+            <a-select
+              class="select-type"
+              :style="q.style"
+              v-model:value="searchDomain.queryForm[q.param]"
+              v-if="q.dict && q.dict.length > 0"
+            >
+              <a-select-option
+                :value="item.value"
+                v-for="item in [...q.dict, { label: 'none', value: '' }]"
+              >
+                {{ $t(item.label) }}
+              </a-select-option>
+            </a-select>
+            <a-input
+              v-else
+              :style="q.style"
+              :placeholder="$t('placeholder.' + (q.placeholder || `typeDefault ${q.param}`))"
+              v-model:value="searchDomain.queryForm[q.param]"
+            ></a-input>
           </a-form-item>
-        </a-col>
-        <a-col :span="14"> </a-col>
-      </a-row>
+        </template>
+        <a-form-item :label="''">
+          <a-button type="primary" @click="searchDomain.onSearch()">
+            <Icon
+              style="margin-bottom: -2px; font-size: 1.3rem"
+              icon="ic:outline-manage-search"
+            ></Icon>
+          </a-button>
+        </a-form-item>
+      </a-flex>
     </a-form>
 
     <div class="search-table-container">
       <a-table
         :pagination="pagination"
-        :scroll="{ y: '55vh' }"
+        :scroll="{ y: searchDomain.tableStyle?.scrollY || '55vh' }"
         :columns="searchDomain?.table.columns"
         :data-source="searchDomain?.result"
       >
@@ -64,6 +82,7 @@ import { getCurrentInstance, inject } from 'vue'
 
 import { PROVIDE_INJECT_KEY } from '@/base/enums/ProvideInject'
 import type { SearchDomain } from '@/utils/SearchUtil'
+import { Icon } from '@iconify/vue'
 
 const {
   appContext: {
@@ -72,6 +91,9 @@ const {
 } = <ComponentInternalInstance>getCurrentInstance()
 
 const searchDomain: SearchDomain | any = inject(PROVIDE_INJECT_KEY.SEARCH_DOMAIN)
+searchDomain.table.columns.forEach((column: any) => {
+  column.title = globalProperties.$t(column.title)
+})
 console.log(searchDomain)
 const pagination = {
   showTotal: (v: any) =>
@@ -82,4 +104,10 @@ const pagination = {
     globalProperties.$t('searchDomain.unit')
 }
 </script>
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.__container_search_table {
+  .select-type {
+    width: 200px;
+  }
+}
+</style>
diff --git a/ui-vue3/src/utils/SearchUtil.ts b/ui-vue3/src/utils/SearchUtil.ts
@@ -16,11 +16,27 @@
  */
 
 import type { TableColumnsType } from 'ant-design-vue'
+import { reactive } from 'vue'
 
 export class SearchDomain {
-  params: any
+  // form of search
+  queryForm: any
+  params: [
+    {
+      label: string
+      param: string
+      defaultValue: string
+      dict: [
+        {
+          label: string
+          value: string
+        }
+      ]
+    }
+  ]
   searchApi: Function
   result: any
+  tableStyle: any
   table: {
     columns: TableColumnsType
   } = { columns: [] }
@@ -32,13 +48,14 @@ export class SearchDomain {
 
   constructor(query: any, searchApi: any, columns: TableColumnsType) {
     this.params = query
+    this.queryForm = reactive({})
     this.table.columns = columns
     this.searchApi = searchApi
     this.onSearch()
   }
 
   async onSearch() {
-    let res = (await this.searchApi({})).data
+    let res = (await this.searchApi(this.queryForm || {})).data
     this.result = res.data
     this.paged.total = res.total
     this.paged.curPage = res.curPage

diff --git a/ui-vue3/src/views/resources/applications/index.vue b/ui-vue3/src/views/resources/applications/index.vue
@@ -37,8 +37,7 @@
 </template>
 
 <script setup lang="ts">
-import { useRouter } from 'vue-router'
-import { inject, onMounted, provide, reactive } from 'vue'
+import { onMounted, provide, reactive } from 'vue'
 import { searchApplications } from '@/api/service/app'
 import SearchTable from '@/components/SearchTable.vue'
 import { SearchDomain, sortString } from '@/utils/SearchUtil'
@@ -81,9 +80,16 @@ let columns = [
 ]
 const searchDomain = reactive(
   new SearchDomain(
-    {
-      appName: ''
-    },
+    [
+      {
+        label: 'appName',
+        param: 'appName',
+        placeholder: 'typeAppName',
+        style: {
+          width: '200px'
+        }
+      }
+    ],
     searchApplications,
     columns
   )