遮罩层
This commit is contained in:
许晓东
@@ -1,93 +1,98 @@
|
||||
<template>
|
||||
<div class="content">
|
||||
<div class="topic">
|
||||
<div id="form-consumer-group-advanced-search">
|
||||
<a-form
|
||||
class="ant-advanced-search-form"
|
||||
:form="form"
|
||||
@submit="handleSearch"
|
||||
>
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="8">
|
||||
<a-form-item :label="`消费组`">
|
||||
<a-input
|
||||
placeholder="groupId"
|
||||
class="input-w"
|
||||
v-decorator="['groupId']"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item :label="`状态`">
|
||||
<a-checkbox-group v-decorator="['states']" style="width: 100%">
|
||||
<a-row>
|
||||
<a-col :span="8">
|
||||
<a-checkbox value="Empty"> Empty</a-checkbox>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-checkbox value="PreparingRebalance">
|
||||
PreparingRebalance
|
||||
</a-checkbox>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-checkbox value="CompletingRebalance">
|
||||
CompletingRebalance
|
||||
</a-checkbox>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-checkbox value="Stable"> Stable</a-checkbox>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-checkbox value="Dead"> Dead</a-checkbox>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-checkbox-group>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :span="4" :style="{ textAlign: 'right' }">
|
||||
<a-form-item>
|
||||
<a-button type="primary" html-type="submit"> 搜索</a-button>
|
||||
<a-button :style="{ marginLeft: '8px' }" @click="handleReset">
|
||||
重置
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
<div class="operation-row-button">
|
||||
<a-button type="primary" @click="handleReset">新增/更新</a-button>
|
||||
</div>
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data-source="data"
|
||||
bordered
|
||||
row-key="groupId"
|
||||
>
|
||||
<div slot="members" slot-scope="text">
|
||||
<a href="#">{{ text }} </a>
|
||||
</div>
|
||||
|
||||
<div slot="state" slot-scope="text">
|
||||
{{ text }}
|
||||
<!-- <span v-if="text" style="color: red">是</span><span v-else>否</span>-->
|
||||
</div>
|
||||
|
||||
<div slot="operation" slot-scope="record" v-show="!record.internal">
|
||||
<a-popconfirm
|
||||
:title="'删除消费组: ' + record.groupId + '？'"
|
||||
ok-text="确认"
|
||||
cancel-text="取消"
|
||||
@confirm="deleteGroup(record.groupId)"
|
||||
<a-spin :spinning="loading">
|
||||
<div class="topic">
|
||||
<div id="form-consumer-group-advanced-search">
|
||||
<a-form
|
||||
class="ant-advanced-search-form"
|
||||
:form="form"
|
||||
@submit="handleSearch"
|
||||
>
|
||||
<a-button size="small" href="javascript:;" class="operation-btn"
|
||||
>删除
|
||||
</a-button>
|
||||
</a-popconfirm>
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="8">
|
||||
<a-form-item :label="`消费组`">
|
||||
<a-input
|
||||
placeholder="groupId"
|
||||
class="input-w"
|
||||
v-decorator="['groupId']"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item :label="`状态`">
|
||||
<a-checkbox-group
|
||||
v-decorator="['states']"
|
||||
style="width: 100%"
|
||||
>
|
||||
<a-row>
|
||||
<a-col :span="8">
|
||||
<a-checkbox value="Empty"> Empty</a-checkbox>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-checkbox value="PreparingRebalance">
|
||||
PreparingRebalance
|
||||
</a-checkbox>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-checkbox value="CompletingRebalance">
|
||||
CompletingRebalance
|
||||
</a-checkbox>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-checkbox value="Stable"> Stable</a-checkbox>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-checkbox value="Dead"> Dead</a-checkbox>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-checkbox-group>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :span="4" :style="{ textAlign: 'right' }">
|
||||
<a-form-item>
|
||||
<a-button type="primary" html-type="submit"> 搜索</a-button>
|
||||
<a-button :style="{ marginLeft: '8px' }" @click="handleReset">
|
||||
重置
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
</a-table>
|
||||
</div>
|
||||
<div class="operation-row-button">
|
||||
<a-button type="primary" @click="handleReset">新增/更新</a-button>
|
||||
</div>
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data-source="data"
|
||||
bordered
|
||||
row-key="groupId"
|
||||
>
|
||||
<div slot="members" slot-scope="text">
|
||||
<a href="#">{{ text }} </a>
|
||||
</div>
|
||||
|
||||
<div slot="state" slot-scope="text">
|
||||
{{ text }}
|
||||
<!-- <span v-if="text" style="color: red">是</span><span v-else>否</span>-->
|
||||
</div>
|
||||
|
||||
<div slot="operation" slot-scope="record" v-show="!record.internal">
|
||||
<a-popconfirm
|
||||
:title="'删除消费组: ' + record.groupId + '？'"
|
||||
ok-text="确认"
|
||||
cancel-text="取消"
|
||||
@confirm="deleteGroup(record.groupId)"
|
||||
>
|
||||
<a-button size="small" href="javascript:;" class="operation-btn"
|
||||
>删除
|
||||
</a-button>
|
||||
</a-popconfirm>
|
||||
</div>
|
||||
</a-table>
|
||||
</div>
|
||||
</a-spin>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -115,6 +120,7 @@ export default {
|
||||
resourceType: "",
|
||||
username: "",
|
||||
},
|
||||
loading: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
@@ -129,19 +135,23 @@ export default {
|
||||
|
||||
getConsumerGroupList() {
|
||||
Object.assign(this.queryParam, this.form.getFieldsValue());
|
||||
this.loading = true;
|
||||
request({
|
||||
url: KafkaConsumerApi.getConsumerGroupList.url,
|
||||
method: KafkaConsumerApi.getConsumerGroupList.method,
|
||||
data: this.queryParam,
|
||||
}).then((res) => {
|
||||
this.loading = false;
|
||||
this.data = res.data.list;
|
||||
});
|
||||
},
|
||||
deleteGroup(group) {
|
||||
this.loading = true;
|
||||
request({
|
||||
url: KafkaConsumerApi.deleteConsumerGroup.url + "?groupId=" + group,
|
||||
method: KafkaConsumerApi.deleteConsumerGroup.method,
|
||||
}).then((res) => {
|
||||
this.loading = false;
|
||||
if (res.code == 0) {
|
||||
this.$message.success(res.msg);
|
||||
this.getConsumerGroupList();
|
||||
|
||||
@@ -10,30 +10,32 @@
|
||||
@cancel="handleCancel"
|
||||
>
|
||||
<div>
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data-source="data"
|
||||
:rowKey="
|
||||
(record, index) => {
|
||||
return index;
|
||||
}
|
||||
"
|
||||
>
|
||||
<ul slot="replicas" slot-scope="text">
|
||||
<ol v-for="i in text" :key="i">
|
||||
{{
|
||||
i
|
||||
}}
|
||||
</ol>
|
||||
</ul>
|
||||
<ul slot="isr" slot-scope="text">
|
||||
<ol v-for="i in text" :key="i">
|
||||
{{
|
||||
i
|
||||
}}
|
||||
</ol>
|
||||
</ul>
|
||||
</a-table>
|
||||
<a-spin :spinning="loading">
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data-source="data"
|
||||
:rowKey="
|
||||
(record, index) => {
|
||||
return index;
|
||||
}
|
||||
"
|
||||
>
|
||||
<ul slot="replicas" slot-scope="text">
|
||||
<ol v-for="i in text" :key="i">
|
||||
{{
|
||||
i
|
||||
}}
|
||||
</ol>
|
||||
</ul>
|
||||
<ul slot="isr" slot-scope="text">
|
||||
<ol v-for="i in text" :key="i">
|
||||
{{
|
||||
i
|
||||
}}
|
||||
</ol>
|
||||
</ul>
|
||||
</a-table>
|
||||
</a-spin>
|
||||
</div>
|
||||
</a-modal>
|
||||
</template>
|
||||
@@ -59,6 +61,7 @@ export default {
|
||||
columns: columns,
|
||||
show: this.visible,
|
||||
data: [],
|
||||
loading: false,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
@@ -71,10 +74,12 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
getPartitionInfo() {
|
||||
this.loading = true;
|
||||
request({
|
||||
url: KafkaTopicApi.getPartitionInfo.url + "?topic=" + this.topic,
|
||||
method: KafkaTopicApi.getPartitionInfo.method,
|
||||
}).then((res) => {
|
||||
this.loading = false;
|
||||
if (res.code != 0) {
|
||||
notification.error({
|
||||
message: "error",
|
||||
@@ -86,6 +91,7 @@ export default {
|
||||
});
|
||||
},
|
||||
handleCancel() {
|
||||
this.data = [];
|
||||
this.$emit("closePartitionInfoDialog", {});
|
||||
},
|
||||
},
|
||||
|
||||
@@ -1,80 +1,82 @@
|
||||
<template>
|
||||
<div class="content">
|
||||
<div class="topic">
|
||||
<div id="components-form-topic-advanced-search">
|
||||
<a-form
|
||||
class="ant-advanced-search-form"
|
||||
:form="form"
|
||||
@submit="handleSearch"
|
||||
>
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="8">
|
||||
<a-form-item :label="`topic`">
|
||||
<a-input
|
||||
placeholder="topic"
|
||||
class="input-w"
|
||||
v-decorator="['topic']"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-item :label="`类型`">
|
||||
<a-select
|
||||
class="type-select"
|
||||
v-decorator="['type', { initialValue: 'all' }]"
|
||||
placeholder="Please select a country"
|
||||
>
|
||||
<a-select-option value="all"> 所有 </a-select-option>
|
||||
<a-select-option value="normal"> 普通 </a-select-option>
|
||||
<a-select-option value="system"> 系统 </a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :span="8" :style="{ textAlign: 'right' }">
|
||||
<a-form-item>
|
||||
<a-button type="primary" html-type="submit"> 搜索</a-button>
|
||||
<a-button :style="{ marginLeft: '8px' }" @click="handleReset">
|
||||
重置
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
<div class="operation-row-button">
|
||||
<a-button type="primary" @click="handleReset">新增/更新</a-button>
|
||||
</div>
|
||||
<a-table :columns="columns" :data-source="data" bordered row-key="name">
|
||||
<div slot="partitions" slot-scope="text, record">
|
||||
<a href="#" @click="openPartitionInfoDialog(record.name)"
|
||||
>{{ text }}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div slot="internal" slot-scope="text">
|
||||
<span v-if="text" style="color: red">是</span><span v-else>否</span>
|
||||
</div>
|
||||
|
||||
<div slot="operation" slot-scope="record" v-show="!record.internal">
|
||||
<a-popconfirm
|
||||
:title="'删除topic: ' + record.name + '？'"
|
||||
ok-text="确认"
|
||||
cancel-text="取消"
|
||||
@confirm="deleteTopic(record.name)"
|
||||
<a-spin :spinning="loading">
|
||||
<div class="topic">
|
||||
<div id="components-form-topic-advanced-search">
|
||||
<a-form
|
||||
class="ant-advanced-search-form"
|
||||
:form="form"
|
||||
@submit="handleSearch"
|
||||
>
|
||||
<a-button size="small" href="javascript:;" class="operation-btn"
|
||||
>删除</a-button
|
||||
>
|
||||
</a-popconfirm>
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="8">
|
||||
<a-form-item :label="`topic`">
|
||||
<a-input
|
||||
placeholder="topic"
|
||||
class="input-w"
|
||||
v-decorator="['topic']"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-item :label="`类型`">
|
||||
<a-select
|
||||
class="type-select"
|
||||
v-decorator="['type', { initialValue: 'all' }]"
|
||||
placeholder="Please select a country"
|
||||
>
|
||||
<a-select-option value="all"> 所有</a-select-option>
|
||||
<a-select-option value="normal"> 普通</a-select-option>
|
||||
<a-select-option value="system"> 系统</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :span="8" :style="{ textAlign: 'right' }">
|
||||
<a-form-item>
|
||||
<a-button type="primary" html-type="submit"> 搜索</a-button>
|
||||
<a-button :style="{ marginLeft: '8px' }" @click="handleReset">
|
||||
重置
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
</a-table>
|
||||
<PartitionInfo
|
||||
:topic="selectDetail.resourceName"
|
||||
:visible="showPartitionInfo"
|
||||
@closePartitionInfoDialog="closePartitionInfoDialog"
|
||||
></PartitionInfo>
|
||||
</div>
|
||||
<div class="operation-row-button">
|
||||
<a-button type="primary" @click="handleReset">新增/更新</a-button>
|
||||
</div>
|
||||
<a-table :columns="columns" :data-source="data" bordered row-key="name">
|
||||
<div slot="partitions" slot-scope="text, record">
|
||||
<a href="#" @click="openPartitionInfoDialog(record.name)"
|
||||
>{{ text }}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div slot="internal" slot-scope="text">
|
||||
<span v-if="text" style="color: red">是</span><span v-else>否</span>
|
||||
</div>
|
||||
|
||||
<div slot="operation" slot-scope="record" v-show="!record.internal">
|
||||
<a-popconfirm
|
||||
:title="'删除topic: ' + record.name + '？'"
|
||||
ok-text="确认"
|
||||
cancel-text="取消"
|
||||
@confirm="deleteTopic(record.name)"
|
||||
>
|
||||
<a-button size="small" href="javascript:;" class="operation-btn"
|
||||
>删除
|
||||
</a-button>
|
||||
</a-popconfirm>
|
||||
</div>
|
||||
</a-table>
|
||||
<PartitionInfo
|
||||
:topic="selectDetail.resourceName"
|
||||
:visible="showPartitionInfo"
|
||||
@closePartitionInfoDialog="closePartitionInfoDialog"
|
||||
></PartitionInfo>
|
||||
</div>
|
||||
</a-spin>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -83,6 +85,7 @@ import request from "@/utils/request";
|
||||
import { KafkaTopicApi } from "@/utils/api";
|
||||
import notification from "ant-design-vue/es/notification";
|
||||
import PartitionInfo from "@/views/topic/PartitionInfo";
|
||||
|
||||
export default {
|
||||
name: "Topic",
|
||||
components: { PartitionInfo },
|
||||
@@ -101,6 +104,7 @@ export default {
|
||||
username: "",
|
||||
},
|
||||
showPartitionInfo: false,
|
||||
loading: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
@@ -115,11 +119,13 @@ export default {
|
||||
|
||||
getTopicList() {
|
||||
Object.assign(this.queryParam, this.form.getFieldsValue());
|
||||
this.loading = true;
|
||||
request({
|
||||
url: KafkaTopicApi.getTopicList.url,
|
||||
method: KafkaTopicApi.getTopicList.method,
|
||||
params: this.queryParam,
|
||||
}).then((res) => {
|
||||
this.loading = false;
|
||||
this.data = res.data;
|
||||
});
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user