Unified table style

Helltab · Jan 22, 2024 · 51d1024 · 51d1024
1 parent b3c42e9
commit 51d1024
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 11 deletions.
diff --git a/ui-vue3/src/views/resources/services/tabs/debug.vue b/ui-vue3/src/views/resources/services/tabs/debug.vue
@@ -17,11 +17,7 @@
 <template>
   <div class="__container_services_tabs_debug">
     <div class="tabs-title">方法列表</div>
-    <a-tabs
-      v-model:activeKey="activeKey"
-      tab-position="left"
-      :tabBarStyle="{ width: '200px' }"
-    >
+    <a-tabs v-model:activeKey="activeKey" tab-position="left" :tabBarStyle="{ width: '200px' }">
       <a-tab-pane v-for="tabName in methodTabs" :key="tabName" :tab="`${tabName}`">
         <a-descriptions :column="4" layout="vertical">
           <a-descriptions-item label="接口" :span="2">

diff --git a/ui-vue3/src/views/resources/services/tabs/distribution.vue b/ui-vue3/src/views/resources/services/tabs/distribution.vue
@@ -36,16 +36,18 @@
           />
         </a-flex>
         <div>
-          <a-radio-group
-            v-model:value="type"
-            button-style="solid"
-          >
+          <a-radio-group v-model:value="type" button-style="solid">
             <a-radio-button value="producer">生产者</a-radio-button>
             <a-radio-button value="consumer">消费者</a-radio-button>
           </a-radio-group>
         </div>
       </a-flex>
-      <a-table :columns="tableColumns" :data-source="tableData">
+      <a-table
+        :columns="tableColumns"
+        :data-source="tableData"
+        :scroll="{ y: '45vh' }"
+        :pagination="pagination"
+      >
         <template #bodyCell="{ column, text }">
           <template v-if="column.dataIndex === 'applicationName'">
             <a-button type="link">{{ text }}</a-button>
@@ -63,7 +65,14 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive } from 'vue'
+import type { ComponentInternalInstance } from 'vue'
+import { ref, reactive, getCurrentInstance } from 'vue'
+
+const {
+  appContext: {
+    config: { globalProperties }
+  }
+} = <ComponentInternalInstance>getCurrentInstance()
 
 const searchValue = ref('')
 const versionAndGroupOptions = reactive([
@@ -123,12 +132,66 @@ const tableData = reactive([
     instanceNum: 15,
     instanceIP: ['192.168.32.28:8697', '192.168.32.26:20880', '192.168.32.24:28080']
   },
+  {
+    applicationName: 'shop-user',
+    instanceNum: 12,
+    instanceIP: ['192.168.32.28:8697', '192.168.32.24:28080']
+  },
+  {
+    applicationName: 'shop-order',
+    instanceNum: 15,
+    instanceIP: [
+      '192.168.32.28:8697',
+      '192.168.32.26:20880',
+      '192.168.32.24:28080',
+      '192.168.32.22:20880'
+    ]
+  },
+  {
+    applicationName: 'shop-order',
+    instanceNum: 15,
+    instanceIP: ['192.168.32.28:8697', '192.168.32.26:20880', '192.168.32.24:28080']
+  },
+  {
+    applicationName: 'shop-user',
+    instanceNum: 12,
+    instanceIP: ['192.168.32.28:8697', '192.168.32.24:28080']
+  },
+  {
+    applicationName: 'shop-order',
+    instanceNum: 15,
+    instanceIP: ['192.168.32.28:8697', '192.168.32.26:20880', '192.168.32.24:28080']
+  },
+  {
+    applicationName: 'shop-user',
+    instanceNum: 12,
+    instanceIP: ['192.168.32.28:8697', '192.168.32.24:28080']
+  },
+  {
+    applicationName: 'shop-user',
+    instanceNum: 12,
+    instanceIP: ['192.168.32.28:8697', '192.168.32.24:28080']
+  },
+  {
+    applicationName: 'shop-order',
+    instanceNum: 15,
+    instanceIP: ['192.168.32.28:8697', '192.168.32.26:20880', '192.168.32.24:28080']
+  },
   {
     applicationName: 'shop-user',
     instanceNum: 12,
     instanceIP: ['192.168.32.28:8697', '192.168.32.24:28080']
   }
 ])
+
+const pagination = {
+  showTotal: (v: any) =>
+    globalProperties.$t('searchDomain.total') +
+    ': ' +
+    v +
+    ' ' +
+    globalProperties.$t('searchDomain.unit')
+}
 </script>
 <style lang="less" scoped>
 .__container_services_tabs_distribution {