Implementing API on service distributed page
diff --git a/ui-vue3/src/api/mock/mockServiceDistribution.ts b/ui-vue3/src/api/mock/mockServiceDistribution.ts
index 6ebae14..4a88fa4 100644
--- a/ui-vue3/src/api/mock/mockServiceDistribution.ts
+++ b/ui-vue3/src/api/mock/mockServiceDistribution.ts
@@ -17,7 +17,7 @@
import Mock from 'mockjs'
-Mock.mock('/mock/service/search', 'get', {
+Mock.mock('/mock/service/distribution', 'get', {
code: 200,
message: 'success',
data: {
diff --git a/ui-vue3/src/views/resources/services/search.vue b/ui-vue3/src/views/resources/services/search.vue
index cf1988b..6c3b005 100644
--- a/ui-vue3/src/views/resources/services/search.vue
+++ b/ui-vue3/src/views/resources/services/search.vue
@@ -28,10 +28,11 @@
<script setup lang="ts">
import { useRouter } from 'vue-router'
-import { reactive } from 'vue'
+import { reactive, provide } from 'vue'
import { searchService } from '@/api/service/service.ts'
import { SearchDomain } from '@/utils/SearchUtil'
import SearchTable from '@/components/SearchTable.vue'
+import { PROVIDE_INJECT_KEY } from '@/base/enums/ProvideInject'
const router = useRouter()
const columns = [
@@ -95,5 +96,6 @@
router.push({ name: 'detail', params: { serviceName } })
}
+provide(PROVIDE_INJECT_KEY.SEARCH_DOMAIN, searchDomain)
</script>
<style lang="less" scoped></style>
diff --git a/ui-vue3/src/views/resources/services/tabs/distribution.vue b/ui-vue3/src/views/resources/services/tabs/distribution.vue
index 9a402e6..9dc2901 100644
--- a/ui-vue3/src/views/resources/services/tabs/distribution.vue
+++ b/ui-vue3/src/views/resources/services/tabs/distribution.vue
@@ -25,18 +25,19 @@
v-model:value="versionAndGroup"
:options="versionAndGroupOptions"
class="service-filter-select"
+ @change="debounceSearch"
></a-select>
</div>
<a-input-search
v-model:value="searchValue"
placeholder="搜索应用，ip，支持前缀搜索"
class="service-filter-input"
- @search="() => {}"
+ @search="debounceSearch"
enter-button
/>
</a-flex>
<div>
- <a-radio-group v-model:value="type" button-style="solid">
+ <a-radio-group v-model:value="type" button-style="solid" @click="debounceSearch">
<a-radio-button value="producer">生产者</a-radio-button>
<a-radio-button value="consumer">消费者</a-radio-button>
</a-radio-group>
@@ -67,6 +68,8 @@
<script setup lang="ts">
import type { ComponentInternalInstance } from 'vue'
import { ref, reactive, getCurrentInstance } from 'vue'
+import { getServiceDistribution } from '@/api/service/serviceDistribution'
+import { debounce } from 'lodash'
const {
appContext: {
@@ -116,73 +119,15 @@
}
]
-const tableData = reactive([
- {
- 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',
- '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 tableData = ref([])
+
+const onSearch = async () => {
+ let { data } = await getServiceDistribution({});
+ tableData.value = data.data
+}
+onSearch()
+
+const debounceSearch = debounce(onSearch, 300)
const pagination = {
showTotal: (v: any) =>
