feat:带宽限速界面(已联调)
This commit is contained in:
zhongzm
366
src/views/billing/ratelimit/index.vue
Normal file
366
src/views/billing/ratelimit/index.vue
Normal file
@@ -0,0 +1,366 @@
|
|||||||
|
<template>
|
||||||
|
<SimpleScrollbar>
|
||||||
|
<div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
|
||||||
|
<ACard
|
||||||
|
title="限速管理"
|
||||||
|
:bordered="false"
|
||||||
|
:body-style="{ flex: 1, overflow: 'hidden' }"
|
||||||
|
class="flex-col-stretch sm:flex-1-hidden card-wrapper"
|
||||||
|
>
|
||||||
|
<template #extra>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<AButton type="primary" @click="handleAdd">
|
||||||
|
<template #icon>
|
||||||
|
<PlusOutlined />
|
||||||
|
</template>
|
||||||
|
新增
|
||||||
|
</AButton>
|
||||||
|
<TableHeaderOperation
|
||||||
|
v-model:columns="columnChecks"
|
||||||
|
:loading="loading"
|
||||||
|
:show-delete="false"
|
||||||
|
:show-add="false"
|
||||||
|
@refresh="getData"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<ATable
|
||||||
|
ref="wrapperEl"
|
||||||
|
:columns="columns"
|
||||||
|
:data-source="data"
|
||||||
|
:loading="loading"
|
||||||
|
row-key="rateLimitName"
|
||||||
|
size="small"
|
||||||
|
:pagination="mobilePagination"
|
||||||
|
:scroll="scrollConfig"
|
||||||
|
class="h-full"
|
||||||
|
/>
|
||||||
|
</ACard>
|
||||||
|
|
||||||
|
<!-- 新增限速配置弹窗 -->
|
||||||
|
<AModal
|
||||||
|
v-model:visible="showModal"
|
||||||
|
:title="isEdit ? '修改限速配置' : '新增限速配置'"
|
||||||
|
@ok="handleOk"
|
||||||
|
@cancel="handleCancel"
|
||||||
|
>
|
||||||
|
<AForm
|
||||||
|
ref="formRef"
|
||||||
|
:model="formState"
|
||||||
|
:rules="rules"
|
||||||
|
:label-col="{ span: 6 }"
|
||||||
|
:wrapper-col="{ span: 16 }"
|
||||||
|
>
|
||||||
|
<AFormItem label="限速名称" name="rateLimitName">
|
||||||
|
<AInput v-model:value="formState.rateLimitName" placeholder="请输入限速名称" />
|
||||||
|
</AFormItem>
|
||||||
|
|
||||||
|
<AFormItem label="上行限速" name="upLimitEnable">
|
||||||
|
<ACheckbox v-model:checked="formState.upLimitEnable">启用上行限速</ACheckbox>
|
||||||
|
</AFormItem>
|
||||||
|
|
||||||
|
<AFormItem
|
||||||
|
v-if="formState.upLimitEnable"
|
||||||
|
label="上行带宽"
|
||||||
|
name="upLimit"
|
||||||
|
>
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<AFormItem name="upLimit" class="mb-0 flex-1">
|
||||||
|
<AInputNumber
|
||||||
|
v-model:value="formState.upLimit"
|
||||||
|
placeholder="请输入上行带宽"
|
||||||
|
:min="1"
|
||||||
|
style="width: 100%"
|
||||||
|
/>
|
||||||
|
</AFormItem>
|
||||||
|
<AFormItem name="upLimitUnit" class="mb-0">
|
||||||
|
<ASelect
|
||||||
|
v-model:value="formState.upLimitUnit"
|
||||||
|
:options="bandwidthUnits.map(unit => ({ label: unit, value: unit }))"
|
||||||
|
style="width: 100px"
|
||||||
|
/>
|
||||||
|
</AFormItem>
|
||||||
|
</div>
|
||||||
|
</AFormItem>
|
||||||
|
|
||||||
|
<AFormItem label="下行限速" name="downLimitEnable">
|
||||||
|
<ACheckbox v-model:checked="formState.downLimitEnable">启用下行限速</ACheckbox>
|
||||||
|
</AFormItem>
|
||||||
|
|
||||||
|
<AFormItem
|
||||||
|
v-if="formState.downLimitEnable"
|
||||||
|
label="下行带宽"
|
||||||
|
name="downLimit"
|
||||||
|
>
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<AFormItem name="downLimit" class="mb-0 flex-1">
|
||||||
|
<AInputNumber
|
||||||
|
v-model:value="formState.downLimit"
|
||||||
|
placeholder="请输入下行带宽"
|
||||||
|
:min="1"
|
||||||
|
style="width: 100%"
|
||||||
|
/>
|
||||||
|
</AFormItem>
|
||||||
|
<AFormItem name="downLimitUnit" class="mb-0">
|
||||||
|
<ASelect
|
||||||
|
v-model:value="formState.downLimitUnit"
|
||||||
|
:options="bandwidthUnits.map(unit => ({ label: unit, value: unit }))"
|
||||||
|
style="width: 100px"
|
||||||
|
/>
|
||||||
|
</AFormItem>
|
||||||
|
</div>
|
||||||
|
</AFormItem>
|
||||||
|
</AForm>
|
||||||
|
</AModal>
|
||||||
|
</div>
|
||||||
|
</SimpleScrollbar>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="tsx">
|
||||||
|
import { useTable } from '@/hooks/common/table';
|
||||||
|
import { SimpleScrollbar } from '~/packages/materials/src';
|
||||||
|
import { computed, shallowRef, ref } from 'vue';
|
||||||
|
import { useElementSize } from '@vueuse/core';
|
||||||
|
import { fetchRateLimitList, addRateLimit, editRateLimit, removeRateLimit } from '@/service/api/auth';
|
||||||
|
import { message, Modal, Button } from 'ant-design-vue';
|
||||||
|
import type { Rule } from 'ant-design-vue/es/form';
|
||||||
|
import { PlusOutlined, ExclamationCircleOutlined,DeleteOutlined,FormOutlined } from '@ant-design/icons-vue';
|
||||||
|
import { bandwidthUnits, convertBandwidth, formatBandwidth, type BandwidthUnit } from '@/utils/units';
|
||||||
|
|
||||||
|
interface RateLimitForm extends Omit<Api.Auth.RateLimitAdd, 'upLimit' | 'downLimit'> {
|
||||||
|
upLimit: number;
|
||||||
|
downLimit: number;
|
||||||
|
upLimitUnit: BandwidthUnit;
|
||||||
|
downLimitUnit: BandwidthUnit;
|
||||||
|
}
|
||||||
|
|
||||||
|
const wrapperEl = shallowRef<HTMLElement | null>(null);
|
||||||
|
const { height: wrapperElHeight } = useElementSize(wrapperEl);
|
||||||
|
|
||||||
|
const scrollConfig = computed(() => {
|
||||||
|
return {
|
||||||
|
y: wrapperElHeight.value - 72,
|
||||||
|
x: 1000
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
const showModal = ref(false);
|
||||||
|
const formRef = ref();
|
||||||
|
const formState = ref<RateLimitForm>({
|
||||||
|
rateLimitName: '',
|
||||||
|
upLimitEnable: false,
|
||||||
|
downLimitEnable: false,
|
||||||
|
upLimit: 0,
|
||||||
|
downLimit: 0,
|
||||||
|
upLimitUnit: 'Mbps',
|
||||||
|
downLimitUnit: 'Mbps'
|
||||||
|
});
|
||||||
|
|
||||||
|
const rules: Record<string, Rule[]> = {
|
||||||
|
rateLimitName: [{ required: true, message: '请输入限速名称', trigger: 'blur' }],
|
||||||
|
upLimit: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请输入上行限速带宽',
|
||||||
|
trigger: 'blur',
|
||||||
|
validator: (_rule: Rule, value: number) => {
|
||||||
|
if (!formState.value.upLimitEnable) return Promise.resolve();
|
||||||
|
if (!value || value <= 0) return Promise.reject('请输入大于0的带宽值');
|
||||||
|
return Promise.resolve();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
downLimit: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请输入下行限速带宽',
|
||||||
|
trigger: 'blur',
|
||||||
|
validator: (_rule: Rule, value: number) => {
|
||||||
|
if (!formState.value.downLimitEnable) return Promise.resolve();
|
||||||
|
if (!value || value <= 0) return Promise.reject('请输入大于0的带宽值');
|
||||||
|
return Promise.resolve();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
const isEdit = ref(false);
|
||||||
|
const editId = ref<number>();
|
||||||
|
|
||||||
|
const handleAdd = () => {
|
||||||
|
isEdit.value = false;
|
||||||
|
editId.value = undefined;
|
||||||
|
formState.value = {
|
||||||
|
rateLimitName: '',
|
||||||
|
upLimitEnable: false,
|
||||||
|
downLimitEnable: false,
|
||||||
|
upLimit: 0,
|
||||||
|
downLimit: 0,
|
||||||
|
upLimitUnit: 'Mbps',
|
||||||
|
downLimitUnit: 'Mbps'
|
||||||
|
};
|
||||||
|
showModal.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleEdit = (record: Api.Auth.RateLimit) => {
|
||||||
|
isEdit.value = true;
|
||||||
|
editId.value = record.id;
|
||||||
|
|
||||||
|
formState.value = {
|
||||||
|
rateLimitName: record.rateLimitName,
|
||||||
|
upLimitEnable: record.upLimitEnable,
|
||||||
|
downLimitEnable: record.downLimitEnable,
|
||||||
|
upLimit: convertBandwidth(record.upLimit, 'Kbps', 'Mbps'),
|
||||||
|
downLimit: convertBandwidth(record.downLimit, 'Kbps', 'Mbps'),
|
||||||
|
upLimitUnit: 'Mbps',
|
||||||
|
downLimitUnit: 'Mbps'
|
||||||
|
};
|
||||||
|
|
||||||
|
showModal.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDelete = (record: Api.Auth.RateLimit) => {
|
||||||
|
Modal.confirm({
|
||||||
|
title: '确认删除',
|
||||||
|
icon: () => <ExclamationCircleOutlined />,
|
||||||
|
content: `确定要删除限速配置 "${record.rateLimitName}" 吗？`,
|
||||||
|
async onOk() {
|
||||||
|
try {
|
||||||
|
await removeRateLimit(record.id);
|
||||||
|
message.success('删除成功');
|
||||||
|
getData();
|
||||||
|
} catch (error) {
|
||||||
|
console.error('删除失败:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCancel = () => {
|
||||||
|
showModal.value = false;
|
||||||
|
formState.value = {
|
||||||
|
rateLimitName: '',
|
||||||
|
upLimitEnable: false,
|
||||||
|
downLimitEnable: false,
|
||||||
|
upLimit: 0,
|
||||||
|
downLimit: 0,
|
||||||
|
upLimitUnit: 'Mbps',
|
||||||
|
downLimitUnit: 'Mbps'
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleOk = async () => {
|
||||||
|
try {
|
||||||
|
await formRef.value?.validate();
|
||||||
|
const submitData = {
|
||||||
|
...formState.value,
|
||||||
|
upLimit: formState.value.upLimitEnable
|
||||||
|
? Math.round(convertBandwidth(formState.value.upLimit, formState.value.upLimitUnit, 'Kbps'))
|
||||||
|
: 0,
|
||||||
|
downLimit: formState.value.downLimitEnable
|
||||||
|
? Math.round(convertBandwidth(formState.value.downLimit, formState.value.downLimitUnit, 'Kbps'))
|
||||||
|
: 0
|
||||||
|
};
|
||||||
|
|
||||||
|
if (isEdit.value) {
|
||||||
|
if (!editId.value) {
|
||||||
|
message.error('编辑ID不能为空');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
await editRateLimit({
|
||||||
|
id: editId.value,
|
||||||
|
rateLimitName: submitData.rateLimitName,
|
||||||
|
upLimitEnable: submitData.upLimitEnable,
|
||||||
|
downLimitEnable: submitData.downLimitEnable,
|
||||||
|
upLimit: submitData.upLimit,
|
||||||
|
downLimit: submitData.downLimit
|
||||||
|
});
|
||||||
|
message.success('修改成功');
|
||||||
|
} else {
|
||||||
|
await addRateLimit(submitData);
|
||||||
|
message.success('添加成功');
|
||||||
|
}
|
||||||
|
handleCancel();
|
||||||
|
getData();
|
||||||
|
} catch (error) {
|
||||||
|
message.error(isEdit.value ? '修改失败' : '添加失败');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const {
|
||||||
|
columns,
|
||||||
|
columnChecks,
|
||||||
|
data,
|
||||||
|
loading,
|
||||||
|
getData,
|
||||||
|
mobilePagination
|
||||||
|
} = useTable({
|
||||||
|
apiFn: async () => {
|
||||||
|
try {
|
||||||
|
const response = await fetchRateLimitList();
|
||||||
|
return {
|
||||||
|
data: {
|
||||||
|
rows: response.data || [],
|
||||||
|
total: response.data?.length || 0
|
||||||
|
}
|
||||||
|
};
|
||||||
|
} catch (err) {
|
||||||
|
return {
|
||||||
|
data: {
|
||||||
|
rows: [],
|
||||||
|
total: 0
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
},
|
||||||
|
immediate: true,
|
||||||
|
rowKey: 'id',
|
||||||
|
columns: (): AntDesign.TableColumn<Api.Auth.RateLimit>[] => [
|
||||||
|
{
|
||||||
|
key: 'rateLimitName',
|
||||||
|
dataIndex: 'rateLimitName',
|
||||||
|
title: '限速名称',
|
||||||
|
align: 'center'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'upLimit',
|
||||||
|
dataIndex: 'upLimit',
|
||||||
|
title: '上行限速',
|
||||||
|
align: 'center',
|
||||||
|
customRender: ({ text }) => {
|
||||||
|
const { value, unit } = formatBandwidth(text);
|
||||||
|
return `${value} ${unit}`;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'downLimit',
|
||||||
|
dataIndex: 'downLimit',
|
||||||
|
title: '下行限速',
|
||||||
|
align: 'center',
|
||||||
|
customRender: ({ text }) => {
|
||||||
|
const { value, unit } = formatBandwidth(text);
|
||||||
|
return `${value} ${unit}`;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '操作',
|
||||||
|
key: 'operate',
|
||||||
|
align: 'center',
|
||||||
|
width: 200,
|
||||||
|
fixed: 'right',
|
||||||
|
customRender: ({ record }) => (
|
||||||
|
<div class="flex justify-center gap-2">
|
||||||
|
<Button type="link" onClick={() => handleEdit(record)}>
|
||||||
|
<FormOutlined />
|
||||||
|
</Button>
|
||||||
|
<Button type="link" danger onClick={() => handleDelete(record)}>
|
||||||
|
<DeleteOutlined />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
]
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
Reference in New Issue
Block a user