ui-vue3/src/views/resources/services/tabs/distribution.vue

<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one or more
  ~ contributor license agreements.  See the NOTICE file distributed with
  ~ this work for additional information regarding copyright ownership.
  ~ The ASF licenses this file to You under the Apache License, Version 2.0
  ~ (the "License"); you may not use this file except in compliance with
  ~ the License.  You may obtain a copy of the License at
  ~
  ~     http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
-->
<template>
  <div class="__container_services_tabs_distribution">
    <a-flex vertical>
      <a-flex class="service-filter">
        <a-flex>
          <div>
            <span>版本&分组:</span>
            <a-select
              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="debounceSearch"
            enter-button
          />
        </a-flex>
        <div>
          <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>
        </div>
      </a-flex>
      <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>
          </template>
          <template v-if="column.dataIndex === 'instanceIP'">
            <a-flex justify="">
              <a-button v-for="ip in text.slice(0, 3)" :key="ip" type="link">{{ ip }}</a-button>
              <a-button v-if="text.length > 3" type="link">更多</a-button>
            </a-flex>
          </template>
        </template>
      </a-table>
    </a-flex>
  </div>
</template>

<script setup lang="ts">
import type { ComponentInternalInstance } from 'vue'
import { ref, reactive, getCurrentInstance } from 'vue'
import { getServiceDistribution } from '@/api/service/service'
import { debounce } from 'lodash'

const {
  appContext: {
    config: { globalProperties }
  }
} = <ComponentInternalInstance>getCurrentInstance()

const searchValue = ref('')
const versionAndGroupOptions = reactive([
  {
    label: '不指定',
    value: ''
  },
  {
    label: 'version=1.0.0',
    value: 'version=1.0.0'
  },
  {
    label: 'group=group1',
    value: 'group=group1'
  },
  {
    label: 'version=1.0.0,group=group1',
    value: 'version=1.0.0,group=group1'
  }
])
const versionAndGroup = ref(versionAndGroupOptions[0].value)
const type = ref('producer')

const tableColumns = [
  {
    title: '应用名',
    dataIndex: 'applicationName',
    width: '25%',
    sorter: true
  },
  {
    title: '实例数',
    dataIndex: 'instanceNum',
    width: '25%',
    sorter: true
  },
  {
    title: '实例ip',
    dataIndex: 'instanceIP',
    width: '50%'
  }
]

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) =>
    globalProperties.$t('searchDomain.total') +
    ': ' +
    v +
    ' ' +
    globalProperties.$t('searchDomain.unit')
}
</script>
<style lang="less" scoped>
.__container_services_tabs_distribution {
  .service-filter {
    justify-content: space-between;
    margin-bottom: 20px;
    .service-filter-select {
      margin-left: 10px;
      width: 250px;
    }
    .service-filter-input {
      margin-left: 30px;
      width: 300px;
    }
  }
}
</style>