节点、节点组功能完善
This commit is contained in:
lys
parent
2218b3fa69
commit
de759b4006
|
|
@ -78,3 +78,15 @@ export const saveLinkNode = (data?: SaveGroupNodeBo) => {
|
|||
data: data
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 查询全部节点分组
|
||||
* @param query
|
||||
* @returns {*}
|
||||
*/
|
||||
export const getNodeGroupList = (): AxiosPromise<NodeGroupVO[]> => {
|
||||
return request({
|
||||
url: '/net/nodeGroup/getNodeGroupList',
|
||||
method: 'get'
|
||||
});
|
||||
};
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
import { NodeVO } from '@/api/net/node/types';
|
||||
import { string } from 'vue-types';
|
||||
|
||||
export interface NodeGroupVO {
|
||||
/**
|
||||
|
|
@ -86,12 +87,26 @@ export interface NodeGroupQuery extends PageQuery {
|
|||
params?: any;
|
||||
}
|
||||
|
||||
export interface GroupVO {
|
||||
id?: string | number;
|
||||
intervalGap?: number;
|
||||
name?: string;
|
||||
strategyType?: string;
|
||||
testUrl?: string;
|
||||
}
|
||||
|
||||
export interface LinkNodeListVO {
|
||||
selected?: NodeVO[];
|
||||
unselected?: NodeVO[];
|
||||
unselectedGroup?: GroupVO[];
|
||||
}
|
||||
|
||||
export interface GroupOrNodeInfo {
|
||||
nodeId?: string | number;
|
||||
type?: number;
|
||||
}
|
||||
|
||||
export interface SaveGroupNodeBo {
|
||||
groupId: string | number;
|
||||
nodeIds?: (string | number)[];
|
||||
groupOrNodeInfoList?: GroupOrNodeInfo[];
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,75 @@
|
|||
import request from '@/utils/request';
|
||||
import { AxiosPromise } from 'axios';
|
||||
import { PlanVO, PlanForm, PlanQuery } from '@/api/net/plan/types';
|
||||
|
||||
/**
|
||||
* 查询加速计划列表
|
||||
* @param query
|
||||
* @returns {*}
|
||||
*/
|
||||
export const listPlan = (query?: PlanQuery): AxiosPromise<PlanVO[]> => {
|
||||
return request({
|
||||
url: '/net/plan/list',
|
||||
method: 'get',
|
||||
params: query
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 查询加速计划详细
|
||||
* @param id
|
||||
*/
|
||||
export const getPlan = (id: string | number): AxiosPromise<PlanVO> => {
|
||||
return request({
|
||||
url: '/net/plan/' + id,
|
||||
method: 'get'
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 新增加速计划
|
||||
* @param data
|
||||
*/
|
||||
export const addPlan = (data: PlanForm) => {
|
||||
return request({
|
||||
url: '/net/plan',
|
||||
method: 'post',
|
||||
data: data
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 修改加速计划
|
||||
* @param data
|
||||
*/
|
||||
export const updatePlan = (data: PlanForm) => {
|
||||
return request({
|
||||
url: '/net/plan',
|
||||
method: 'put',
|
||||
data: data
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 删除加速计划
|
||||
* @param id
|
||||
*/
|
||||
export const delPlan = (id: string | number | Array<string | number>) => {
|
||||
return request({
|
||||
url: '/net/plan/' + id,
|
||||
method: 'delete'
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* 查询加速计划列表
|
||||
* @param query
|
||||
* @returns {*}
|
||||
*/
|
||||
export const allPlan = (): AxiosPromise<PlanVO[]> => {
|
||||
return request({
|
||||
url: '/net/plan/allPlan',
|
||||
method: 'get'
|
||||
});
|
||||
};
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
export interface PlanVO {
|
||||
/**
|
||||
*
|
||||
*/
|
||||
id: string | number;
|
||||
|
||||
/**
|
||||
* 计划名称
|
||||
*/
|
||||
planName: string;
|
||||
|
||||
/**
|
||||
* 每月可用流量
|
||||
*/
|
||||
totalFlow: number;
|
||||
|
||||
/**
|
||||
* 最大网速
|
||||
*/
|
||||
maxSpeedLimit: number;
|
||||
|
||||
/**
|
||||
* 最小网速
|
||||
*/
|
||||
minSpeedLimit: number;
|
||||
|
||||
/**
|
||||
* 流量超出策略
|
||||
*/
|
||||
outOfFlowStrategy: string;
|
||||
|
||||
/**
|
||||
* 节点组ID
|
||||
*/
|
||||
groupIds: string | number;
|
||||
|
||||
}
|
||||
|
||||
export interface PlanForm extends BaseEntity {
|
||||
/**
|
||||
*
|
||||
*/
|
||||
id?: string | number;
|
||||
|
||||
/**
|
||||
* 计划名称
|
||||
*/
|
||||
planName?: string;
|
||||
|
||||
/**
|
||||
* 每月可用流量
|
||||
*/
|
||||
totalFlow?: number;
|
||||
|
||||
/**
|
||||
* 最大网速
|
||||
*/
|
||||
maxSpeedLimit?: number;
|
||||
|
||||
/**
|
||||
* 最小网速
|
||||
*/
|
||||
minSpeedLimit?: number;
|
||||
|
||||
/**
|
||||
* 流量超出策略
|
||||
*/
|
||||
outOfFlowStrategy?: string;
|
||||
|
||||
/**
|
||||
* 节点组ID
|
||||
*/
|
||||
groupIdArray?: (string | number)[];
|
||||
|
||||
/**
|
||||
* 节点组ID
|
||||
*/
|
||||
groupIds?: string | number;
|
||||
|
||||
}
|
||||
|
||||
export interface PlanQuery extends PageQuery {
|
||||
|
||||
/**
|
||||
* 计划名称
|
||||
*/
|
||||
planName?: string;
|
||||
|
||||
/**
|
||||
* 节点组ID
|
||||
*/
|
||||
groupIds?: string | number;
|
||||
|
||||
/**
|
||||
* 日期范围参数
|
||||
*/
|
||||
params?: any;
|
||||
}
|
||||
|
|
@ -22,20 +22,25 @@
|
|||
<h4 class="panel-title">关联节点</h4>
|
||||
<div>
|
||||
<el-row :gutter="20" class="mb10">
|
||||
<el-col :span="12">
|
||||
<el-col :span="8">
|
||||
<div class="color-abafb6 text-center">
|
||||
未关联节点
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-col :span="8">
|
||||
<div class="color-abafb6 text-center">
|
||||
关联节点
|
||||
未关联节点组
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="color-abafb6 text-center">
|
||||
关联的节点或组
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12" class="unselected">
|
||||
<el-col :span="8" class="unselected">
|
||||
<div class="panel flex items-center justify-around" v-for="item in unselected" :key="item.id">
|
||||
<div class="mr10 h-24">
|
||||
{{ item.nodeName }} {{ item.nodeIp }}
|
||||
|
|
@ -44,16 +49,35 @@
|
|||
<el-button type="success" round @click="addClick(item)">关联</el-button>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12" class="selected">
|
||||
<el-col :span="8" class="unselected">
|
||||
<div class="panel flex items-center justify-around" v-for="item in unselectedGroup" :key="item.id">
|
||||
<div class="mr10 h-24">
|
||||
{{ item.name }}
|
||||
</div>
|
||||
<el-tag type="primary">{{ item.strategyType }}</el-tag>
|
||||
<el-button type="success" round @click="addGroup(item)">关联</el-button>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8" class="selected">
|
||||
<draggable :list="selected" itemKey="nodeName">
|
||||
<template #item="{ element, index }">
|
||||
<div class="panel flex items-center justify-around">
|
||||
<div>
|
||||
<div v-if="isNodeVO(element)" class="panel flex items-center justify-between">
|
||||
<div class="mr10 h-24">
|
||||
{{ element.nodeName }} {{ element.nodeIp }}
|
||||
</div>
|
||||
<dict-tag :options="net_protocol_type" :value="element.protocolType" />
|
||||
<el-button type="danger" round @click="delClick(element)">取消</el-button>
|
||||
</div>
|
||||
|
||||
<div v-if="!isNodeVO(element)" class="panel flex items-center justify-between">
|
||||
<div class="mr10 h-24">
|
||||
{{ element.name }}
|
||||
</div>
|
||||
<el-tag>{{ element.strategyType }}</el-tag>
|
||||
<el-button type="danger" round @click="delGroup(element)">取消</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</draggable>
|
||||
</el-col>
|
||||
|
|
@ -66,7 +90,7 @@
|
|||
|
||||
<script setup name="LinkNode" lang="ts">
|
||||
import { linkNodeList, getNodeGroup, saveLinkNode } from '@/api/net/nodeGroup';
|
||||
import { NodeGroupVO, SaveGroupNodeBo } from '@/api/net/nodeGroup/types';
|
||||
import { GroupOrNodeInfo, GroupVO, NodeGroupVO, SaveGroupNodeBo } from '@/api/net/nodeGroup/types';
|
||||
import { NodeVO } from '@/api/net/node/types';
|
||||
|
||||
import router from '@/router';
|
||||
|
|
@ -85,8 +109,8 @@ const form = ref<Partial<NodeGroupVO>>({
|
|||
});
|
||||
|
||||
const unselected = ref<NodeVO[]>([]);
|
||||
|
||||
const selected = ref<NodeVO[]>([]);
|
||||
const unselectedGroup = ref<GroupVO[]>([]);
|
||||
const selected = ref<(NodeVO | GroupVO)[]>([]);
|
||||
let groupIdParam = "";
|
||||
|
||||
const getInfo = async () => {
|
||||
|
|
@ -107,6 +131,7 @@ const getList = async () => {
|
|||
}).then(res => {
|
||||
Object.assign(selected.value, res.data.selected);
|
||||
Object.assign(unselected.value, res.data.unselected);
|
||||
Object.assign(unselectedGroup.value, res.data.unselectedGroup);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
|
@ -119,6 +144,14 @@ const addClick = (itemParam: NodeVO) => {
|
|||
selected.value.push(itemParam);
|
||||
}
|
||||
|
||||
const addGroup = (itemParam: GroupVO) => {
|
||||
const index = unselectedGroup.value.findIndex(item => item.id === itemParam.id);
|
||||
if (index >= 0) {
|
||||
unselectedGroup.value.splice(index, 1);
|
||||
}
|
||||
selected.value.push(itemParam);
|
||||
}
|
||||
|
||||
const delClick = (itemParam: NodeVO) => {
|
||||
const index = selected.value.findIndex(item => item.id === itemParam.id);
|
||||
if (index >= 0) {
|
||||
|
|
@ -127,20 +160,47 @@ const delClick = (itemParam: NodeVO) => {
|
|||
unselected.value.push(itemParam);
|
||||
}
|
||||
|
||||
const delGroup = (itemParam: GroupVO) => {
|
||||
const index = selected.value.findIndex(item => item.id === itemParam.id);
|
||||
if (index >= 0) {
|
||||
selected.value.splice(index, 1);
|
||||
}
|
||||
unselectedGroup.value.push(itemParam);
|
||||
}
|
||||
|
||||
const saveClick = () => {
|
||||
console.log(selected.value);
|
||||
const nodeIds = selected.value.map((itemParam: NodeVO) => {
|
||||
return itemParam.id;
|
||||
})
|
||||
let groupOrNodeInfoList: GroupOrNodeInfo[] = [];
|
||||
|
||||
for (let index = 0; index < selected.value.length; index++) {
|
||||
const element = selected.value[index];
|
||||
let info: GroupOrNodeInfo = {};
|
||||
if (isNodeVO(element)) {
|
||||
info = {
|
||||
nodeId: element.id,
|
||||
type: 1
|
||||
}
|
||||
} else {
|
||||
info = {
|
||||
nodeId: element.id,
|
||||
type: 2
|
||||
}
|
||||
}
|
||||
groupOrNodeInfoList.push(info);
|
||||
}
|
||||
|
||||
const param: SaveGroupNodeBo = {
|
||||
groupId: groupIdParam,
|
||||
nodeIds: nodeIds
|
||||
groupOrNodeInfoList: groupOrNodeInfoList
|
||||
}
|
||||
saveLinkNode(param).then(res => {
|
||||
console.log(res);
|
||||
proxy?.$modal.msgSuccess("操作成功");
|
||||
})
|
||||
}
|
||||
|
||||
// 判断是否是 NodeVO 类型
|
||||
const isNodeVO = (item: NodeVO | GroupVO): item is NodeVO => {
|
||||
return (item as NodeVO).nodeName !== undefined;
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,282 @@
|
|||
<template>
|
||||
<div class="p-2">
|
||||
<transition :enter-active-class="proxy?.animate.searchAnimate.enter"
|
||||
:leave-active-class="proxy?.animate.searchAnimate.leave">
|
||||
<div v-show="showSearch" class="mb-[10px]">
|
||||
<el-card shadow="hover">
|
||||
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
|
||||
<el-form-item label="计划名称" prop="planName">
|
||||
<el-input v-model="queryParams.planName" placeholder="请输入计划名称" clearable @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="节点组ID" prop="groupIds">
|
||||
<el-input v-model="queryParams.groupIds" placeholder="请输入节点组ID" clearable @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</div>
|
||||
</transition>
|
||||
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['net:plan:add']">新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()"
|
||||
v-hasPermi="['net:plan:edit']">修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()"
|
||||
v-hasPermi="['net:plan:remove']">删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="warning" plain icon="Download" @click="handleExport"
|
||||
v-hasPermi="['net:plan:export']">导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<el-table v-loading="loading" border :data="planList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="ID" align="center" prop="id" v-if="true" />
|
||||
<el-table-column label="计划名称" align="center" prop="planName" />
|
||||
<el-table-column label="每月流量(Gb)" align="center" prop="totalFlow" />
|
||||
<el-table-column label="最大网速(Mb/s)" align="center" prop="maxSpeedLimit" />
|
||||
<el-table-column label="最小网速(Mb/s)" align="center" prop="minSpeedLimit" />
|
||||
<el-table-column label="流量超出策略" align="center" prop="outOfFlowStrategy" />
|
||||
<el-table-column label="节点组" align="center" prop="groupIds">
|
||||
<template #default="scope">
|
||||
<el-tag v-for="(item, index) in JSON.parse(scope.row.groupIds || '[]')" :key="index" size="small"
|
||||
style="margin: 2px">
|
||||
{{ getGroupName(item) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width">
|
||||
<template #default="scope">
|
||||
<el-tooltip content="修改" placement="top">
|
||||
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['net:plan:edit']"></el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="删除" placement="top">
|
||||
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
|
||||
v-hasPermi="['net:plan:remove']"></el-button>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
|
||||
v-model:limit="queryParams.pageSize" @pagination="getList" />
|
||||
</el-card>
|
||||
<!-- 添加或修改加速计划对话框 -->
|
||||
<el-dialog :title="dialog.title" v-model="dialog.visible" width="700px" append-to-body>
|
||||
<el-form ref="planFormRef" :model="form" :rules="rules" label-width="120px">
|
||||
<el-form-item label="计划名称" prop="planName">
|
||||
<el-input v-model="form.planName" placeholder="请输入计划名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="每月流量" prop="totalFlow">
|
||||
<el-input v-model="form.totalFlow" placeholder="请输入每月可用流量（G）" />
|
||||
</el-form-item>
|
||||
<el-form-item label="最大网速" prop="maxSpeedLimit">
|
||||
<el-input v-model="form.maxSpeedLimit" placeholder="请输入最大网速（Mb）" />
|
||||
</el-form-item>
|
||||
<el-form-item label="最小网速" prop="minSpeedLimit">
|
||||
<el-input v-model="form.minSpeedLimit" placeholder="请输入最小网速（Mb）" />
|
||||
</el-form-item>
|
||||
<el-form-item label="流量超出策略" prop="outOfFlowStrategy">
|
||||
<el-input v-model="form.outOfFlowStrategy" placeholder="请输入流量超出策略" />
|
||||
</el-form-item>
|
||||
<el-form-item label="节点组ID" prop="groupIds">
|
||||
<el-select v-model="form.groupIdArray" filterable multiple placeholder="请选择">
|
||||
<el-option v-for="item in groupList" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="Plan" lang="ts">
|
||||
import { listPlan, getPlan, delPlan, addPlan, updatePlan } from '@/api/net/plan';
|
||||
import { getNodeGroupList } from '@/api/net/nodeGroup';
|
||||
import { PlanVO, PlanQuery, PlanForm } from '@/api/net/plan/types';
|
||||
import { NodeGroupVO } from '@/api/net/nodeGroup/types';
|
||||
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
|
||||
const planList = ref<PlanVO[]>([]);
|
||||
const groupList = ref<NodeGroupVO[]>([]);
|
||||
const buttonLoading = ref(false);
|
||||
const loading = ref(true);
|
||||
const showSearch = ref(true);
|
||||
const ids = ref<Array<string | number>>([]);
|
||||
const single = ref(true);
|
||||
const multiple = ref(true);
|
||||
const total = ref(0);
|
||||
|
||||
const queryFormRef = ref<ElFormInstance>();
|
||||
const planFormRef = ref<ElFormInstance>();
|
||||
|
||||
const dialog = reactive<DialogOption>({
|
||||
visible: false,
|
||||
title: ''
|
||||
});
|
||||
|
||||
const initFormData: PlanForm = {
|
||||
id: undefined,
|
||||
planName: undefined,
|
||||
totalFlow: undefined,
|
||||
maxSpeedLimit: undefined,
|
||||
minSpeedLimit: undefined,
|
||||
outOfFlowStrategy: undefined,
|
||||
groupIds: undefined,
|
||||
}
|
||||
const data = reactive<PageData<PlanForm, PlanQuery>>({
|
||||
form: { ...initFormData },
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
planName: undefined,
|
||||
groupIds: undefined,
|
||||
params: {
|
||||
}
|
||||
},
|
||||
rules: {
|
||||
id: [
|
||||
{ required: true, message: "不能为空", trigger: "blur" }
|
||||
],
|
||||
totalFlow: [
|
||||
{ required: true, message: "每月可用流量不能为空", trigger: "blur" }
|
||||
],
|
||||
outOfFlowStrategy: [
|
||||
{ required: true, message: "流量超出策略不能为空", trigger: "blur" }
|
||||
],
|
||||
}
|
||||
});
|
||||
|
||||
const { queryParams, form, rules } = toRefs(data);
|
||||
|
||||
/** 查询加速计划列表 */
|
||||
const getList = async () => {
|
||||
loading.value = true;
|
||||
const res = await listPlan(queryParams.value);
|
||||
planList.value = res.rows;
|
||||
total.value = res.total;
|
||||
loading.value = false;
|
||||
}
|
||||
|
||||
const getGroupName = (id) => {
|
||||
let name = "";
|
||||
groupList.value.forEach(group => {
|
||||
if (group.id == id) {
|
||||
name = group.name
|
||||
}
|
||||
});
|
||||
return name; // 如果找不到就显示ID本身
|
||||
};
|
||||
|
||||
/** 查询所有的节点组 */
|
||||
const getGroupList = async () => {
|
||||
const res = await getNodeGroupList();
|
||||
groupList.value = res.data;
|
||||
}
|
||||
|
||||
/** 取消按钮 */
|
||||
const cancel = () => {
|
||||
reset();
|
||||
dialog.visible = false;
|
||||
}
|
||||
|
||||
/** 表单重置 */
|
||||
const reset = () => {
|
||||
form.value = { ...initFormData };
|
||||
planFormRef.value?.resetFields();
|
||||
}
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
const handleQuery = () => {
|
||||
queryParams.value.pageNum = 1;
|
||||
getList();
|
||||
}
|
||||
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = () => {
|
||||
queryFormRef.value?.resetFields();
|
||||
handleQuery();
|
||||
}
|
||||
|
||||
/** 多选框选中数据 */
|
||||
const handleSelectionChange = (selection: PlanVO[]) => {
|
||||
ids.value = selection.map(item => item.id);
|
||||
single.value = selection.length != 1;
|
||||
multiple.value = !selection.length;
|
||||
}
|
||||
|
||||
/** 新增按钮操作 */
|
||||
const handleAdd = () => {
|
||||
reset();
|
||||
dialog.visible = true;
|
||||
dialog.title = "添加加速计划";
|
||||
}
|
||||
|
||||
/** 修改按钮操作 */
|
||||
const handleUpdate = async (row?: PlanVO) => {
|
||||
reset();
|
||||
const _id = row?.id || ids.value[0]
|
||||
const res = await getPlan(_id);
|
||||
Object.assign(form.value, res.data);
|
||||
dialog.visible = true;
|
||||
dialog.title = "修改加速计划";
|
||||
}
|
||||
|
||||
/** 提交按钮 */
|
||||
const submitForm = () => {
|
||||
planFormRef.value?.validate(async (valid: boolean) => {
|
||||
if (valid) {
|
||||
buttonLoading.value = true;
|
||||
if (form.value.id) {
|
||||
await updatePlan(form.value).finally(() => buttonLoading.value = false);
|
||||
} else {
|
||||
await addPlan(form.value).finally(() => buttonLoading.value = false);
|
||||
}
|
||||
proxy?.$modal.msgSuccess("操作成功");
|
||||
dialog.visible = false;
|
||||
await getList();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/** 删除按钮操作 */
|
||||
const handleDelete = async (row?: PlanVO) => {
|
||||
const _ids = row?.id || ids.value;
|
||||
await proxy?.$modal.confirm('是否确认删除加速计划编号为"' + _ids + '"的数据项？').finally(() => loading.value = false);
|
||||
await delPlan(_ids);
|
||||
proxy?.$modal.msgSuccess("删除成功");
|
||||
await getList();
|
||||
}
|
||||
|
||||
/** 导出按钮操作 */
|
||||
const handleExport = () => {
|
||||
proxy?.download('net/plan/export', {
|
||||
...queryParams.value
|
||||
}, `plan_${new Date().getTime()}.xlsx`)
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await getGroupList();
|
||||
getList();
|
||||
});
|
||||
</script>
|
||||
|
|
@ -1,59 +1,54 @@
|
|||
<template>
|
||||
<div class="p-2">
|
||||
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
|
||||
<transition :enter-active-class="proxy?.animate.searchAnimate.enter"
|
||||
:leave-active-class="proxy?.animate.searchAnimate.leave">
|
||||
<div v-show="showSearch" class="mb-[10px]">
|
||||
<el-card shadow="hover">
|
||||
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
|
||||
<el-form-item label="账号" prop="temporaryAccount">
|
||||
<el-input v-model="queryParams.temporaryAccount" placeholder="请输入账号、邮箱或手机号" clearable @keyup.enter="handleQuery" />
|
||||
<el-input v-model="queryParams.temporaryAccount" placeholder="请输入账号、邮箱或手机号" clearable
|
||||
@keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="有效期" style="width: 308px">
|
||||
<el-date-picker
|
||||
v-model="dateRangeValidityTime"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
type="daterange"
|
||||
range-separator="-"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
:default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
|
||||
/>
|
||||
<el-date-picker v-model="dateRangeValidityTime" value-format="YYYY-MM-DD HH:mm:ss" type="daterange"
|
||||
range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
|
||||
:default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]" />
|
||||
</el-form-item>
|
||||
<el-form-item label="充值次数" prop="rechargeNum">
|
||||
<el-input v-model="queryParams.rechargeNum" placeholder="请输入充值次数" clearable @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="注册时间" style="width: 308px">
|
||||
<el-date-picker
|
||||
v-model="dateRangeRegisterTime"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
type="daterange"
|
||||
range-separator="-"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
:default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
|
||||
/>
|
||||
<el-date-picker v-model="dateRangeRegisterTime" value-format="YYYY-MM-DD HH:mm:ss" type="daterange"
|
||||
range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
|
||||
:default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]" />
|
||||
</el-form-item>
|
||||
<el-form-item label="注册IP" prop="registerIp">
|
||||
<el-input v-model="queryParams.registerIp" placeholder="请输入注册IP" clearable @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="注册国家" prop="registerCountry">
|
||||
<el-input v-model="queryParams.registerCountry" placeholder="请输入注册国家" clearable @keyup.enter="handleQuery" />
|
||||
<el-input v-model="queryParams.registerCountry" placeholder="请输入注册国家" clearable
|
||||
@keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="注册省份" prop="registerProvince">
|
||||
<el-input v-model="queryParams.registerProvince" placeholder="请输入注册省份" clearable @keyup.enter="handleQuery" />
|
||||
<el-input v-model="queryParams.registerProvince" placeholder="请输入注册省份" clearable
|
||||
@keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="注册城市" prop="registerCity">
|
||||
<el-input v-model="queryParams.registerCity" placeholder="请输入注册城市" clearable @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="注册网络" prop="registerNetworkOperator">
|
||||
<el-input v-model="queryParams.registerNetworkOperator" placeholder="请输入注册网络运营商" clearable @keyup.enter="handleQuery" />
|
||||
<el-input v-model="queryParams.registerNetworkOperator" placeholder="请输入注册网络运营商" clearable
|
||||
@keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable >
|
||||
<el-option v-for="dict in net_user_status" :key="dict.value" :label="dict.label" :value="dict.value"/>
|
||||
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
|
||||
<el-option v-for="dict in net_user_status" :key="dict.value" :label="dict.label" :value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="加速计划" prop="planId">
|
||||
<el-input v-model="queryParams.planId" placeholder="请输入加速计划ID" clearable @keyup.enter="handleQuery" />
|
||||
<el-select v-model="queryParams.planId" placeholder="订阅计划" clearable>
|
||||
<el-option v-for="plan in planList" :key="plan.id" :label="plan.planName" :value="plan.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="邀请人" prop="shareId">
|
||||
<el-input v-model="queryParams.shareId" placeholder="请输入邀请人ID" clearable @keyup.enter="handleQuery" />
|
||||
|
|
@ -70,17 +65,20 @@
|
|||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<!-- <el-col :span="1.5">
|
||||
<el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['net:user:add']">新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['net:user:edit']">修改</el-button>
|
||||
<el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()"
|
||||
v-hasPermi="['net:user:edit']">修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['net:user:remove']">删除</el-button>
|
||||
</el-col>
|
||||
<el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()"
|
||||
v-hasPermi="['net:user:remove']">删除</el-button>
|
||||
</el-col> -->
|
||||
<el-col :span="1.5">
|
||||
<el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['net:user:export']">导出</el-button>
|
||||
<el-button type="warning" plain icon="Download" @click="handleExport"
|
||||
v-hasPermi="['net:user:export']">导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
|
||||
</el-row>
|
||||
|
|
@ -94,7 +92,7 @@
|
|||
<el-table-column v-if="columns[3].visible" label="邮箱" align="center" prop="email" />
|
||||
<el-table-column label="有效期" align="center" prop="validityTime" width="180">
|
||||
<template #default="scope">
|
||||
<span>{{ parseTime(scope.row.validityTime, '{y}-{m}-{d}') }}</span>
|
||||
<span>{{ parseTime(scope.row.validityTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column v-if="columns[4].visible" label="充值次数" align="center" prop="rechargeNum" />
|
||||
|
|
@ -104,7 +102,7 @@
|
|||
<el-table-column v-if="columns[8].visible" label="备注" align="center" prop="remark" />
|
||||
<el-table-column v-if="columns[9].visible" label="注册时间" align="center" prop="registerTime" width="180">
|
||||
<template #default="scope">
|
||||
<span>{{ parseTime(scope.row.registerTime, '{y}-{m}-{d}') }}</span>
|
||||
<span>{{ parseTime(scope.row.registerTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column v-if="columns[10].visible" label="注册IP" align="center" prop="registerIp" />
|
||||
|
|
@ -114,34 +112,41 @@
|
|||
<el-table-column v-if="columns[14].visible" label="注册网络" align="center" prop="registerNetworkOperator" />
|
||||
<el-table-column label="最后登录时间" align="center" prop="lastLoginTime" width="180">
|
||||
<template #default="scope">
|
||||
<span>{{ parseTime(scope.row.lastLoginTime, '{y}-{m}-{d}') }}</span>
|
||||
<span>{{ parseTime(scope.row.lastLoginTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="设备类型" align="center" prop="deviceType" />
|
||||
<el-table-column label="状态" align="center" prop="status">
|
||||
<template #default="scope">
|
||||
<dict-tag :options="net_user_status" :value="scope.row.status"/>
|
||||
<dict-tag :options="net_user_status" :value="scope.row.status" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column v-if="columns[15].visible" label="加速计划ID" align="center" prop="planId">
|
||||
<template #default="scope">
|
||||
<el-tag>{{ getPlanName(scope.row.planId) }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column v-if="columns[15].visible" label="加速计划ID" align="center" prop="planId" />
|
||||
<el-table-column v-if="columns[16].visible" label="邀请人ID" align="center" prop="shareId" />
|
||||
<el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width">
|
||||
<template #default="scope">
|
||||
<el-tooltip content="修改" placement="top">
|
||||
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['net:user:edit']"></el-button>
|
||||
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['net:user:edit']"></el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="删除" placement="top">
|
||||
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['net:user:remove']"></el-button>
|
||||
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
|
||||
v-hasPermi="['net:user:remove']"></el-button>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
|
||||
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
|
||||
v-model:limit="queryParams.pageSize" @pagination="getList" />
|
||||
</el-card>
|
||||
<!-- 添加或修改用户对话框 -->
|
||||
<el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
|
||||
<el-form ref="userFormRef" :model="form" :rules="rules" label-width="80px">
|
||||
<el-dialog :title="dialog.title" v-model="dialog.visible" width="700px" append-to-body>
|
||||
<el-form ref="userFormRef" :model="form" :rules="rules" label-width="120px">
|
||||
<el-form-item label="临时账号" prop="temporaryAccount">
|
||||
<el-input v-model="form.temporaryAccount" placeholder="请输入临时账号" />
|
||||
</el-form-item>
|
||||
|
|
@ -152,63 +157,23 @@
|
|||
<el-input v-model="form.email" placeholder="请输入邮箱" />
|
||||
</el-form-item>
|
||||
<el-form-item label="有效期" prop="validityTime">
|
||||
<el-date-picker clearable
|
||||
v-model="form.validityTime"
|
||||
type="datetime"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
<el-date-picker clearable v-model="form.validityTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss"
|
||||
placeholder="请选择有效期">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="充值次数" prop="rechargeNum">
|
||||
<el-input v-model="form.rechargeNum" placeholder="请输入充值次数" />
|
||||
</el-form-item>
|
||||
<el-form-item label="累计充值金额(分)" prop="rechargeSum">
|
||||
<el-input v-model="form.rechargeSum" placeholder="请输入累计充值金额(分)" />
|
||||
</el-form-item>
|
||||
<el-form-item label="登录密码" prop="password">
|
||||
<el-input v-model="form.password" placeholder="请输入登录密码" />
|
||||
</el-form-item>
|
||||
<el-form-item label="渠道名称" prop="invitationCodeName">
|
||||
<el-input v-model="form.invitationCodeName" placeholder="请输入渠道名称" />
|
||||
<el-input v-model="form.invitationCodeName" placeholder="请输入渠道名称" disabled/>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" placeholder="请输入备注" />
|
||||
</el-form-item>
|
||||
<el-form-item label="注册时间" prop="registerTime">
|
||||
<el-date-picker clearable
|
||||
v-model="form.registerTime"
|
||||
type="datetime"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
placeholder="请选择注册时间">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="注册IP" prop="registerIp">
|
||||
<el-input v-model="form.registerIp" placeholder="请输入注册IP" />
|
||||
</el-form-item>
|
||||
<el-form-item label="注册国家" prop="registerCountry">
|
||||
<el-input v-model="form.registerCountry" placeholder="请输入注册国家" />
|
||||
</el-form-item>
|
||||
<el-form-item label="注册省份" prop="registerProvince">
|
||||
<el-input v-model="form.registerProvince" placeholder="请输入注册省份" />
|
||||
</el-form-item>
|
||||
<el-form-item label="注册城市" prop="registerCity">
|
||||
<el-input v-model="form.registerCity" placeholder="请输入注册城市" />
|
||||
</el-form-item>
|
||||
<el-form-item label="注册网络运营商" prop="registerNetworkOperator">
|
||||
<el-input v-model="form.registerNetworkOperator" placeholder="请输入注册网络运营商" />
|
||||
</el-form-item>
|
||||
<el-form-item label="最后登录时间" prop="lastLoginTime">
|
||||
<el-date-picker clearable
|
||||
v-model="form.lastLoginTime"
|
||||
type="datetime"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
placeholder="请选择最后登录时间">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="安卓设备唯一ID" prop="oaid">
|
||||
<el-form-item label="安卓OAID" prop="oaid">
|
||||
<el-input v-model="form.oaid" placeholder="请输入安卓设备唯一ID" />
|
||||
</el-form-item>
|
||||
<el-form-item label="苹果设备唯一ID" prop="paid">
|
||||
<el-form-item label="苹果PAID" prop="paid">
|
||||
<el-input v-model="form.paid" placeholder="请输入苹果设备唯一ID" />
|
||||
</el-form-item>
|
||||
<el-form-item label="安卓设备号" prop="androidDevice">
|
||||
|
|
@ -222,19 +187,14 @@
|
|||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="form.status" placeholder="请选择状态">
|
||||
<el-option
|
||||
v-for="dict in net_user_status"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="parseInt(dict.value)"
|
||||
></el-option>
|
||||
<el-option v-for="dict in net_user_status" :key="dict.value" :label="dict.label"
|
||||
:value="parseInt(dict.value)"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="加速计划ID" prop="planId">
|
||||
<el-input v-model="form.planId" placeholder="请输入加速计划ID" />
|
||||
</el-form-item>
|
||||
<el-form-item label="邀请人ID" prop="shareId">
|
||||
<el-input v-model="form.shareId" placeholder="请输入邀请人ID" />
|
||||
<el-form-item label="加速计划" prop="planId">
|
||||
<el-select v-model="form.planId" placeholder="加速计划" clearable>
|
||||
<el-option v-for="plan in planList" :key="plan.id" :label="plan.planName" :value="plan.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
|
|
@ -249,12 +209,15 @@
|
|||
|
||||
<script setup name="User" lang="ts">
|
||||
import { listUser, getUser, delUser, addUser, updateUser } from '@/api/net/user';
|
||||
import { allPlan } from '@/api/net/plan';
|
||||
import { UserVO, UserQuery, UserForm } from '@/api/net/user/types';
|
||||
import { PlanVO } from '@/api/net/plan/types';
|
||||
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
const { net_user_status } = toRefs<any>(proxy?.useDict('net_user_status'));
|
||||
|
||||
const userList = ref<UserVO[]>([]);
|
||||
const planList = ref<PlanVO[]>([]);
|
||||
const buttonLoading = ref(false);
|
||||
const loading = ref(true);
|
||||
const showSearch = ref(true);
|
||||
|
|
@ -325,7 +288,7 @@ const initFormData: UserForm = {
|
|||
shareId: undefined,
|
||||
}
|
||||
const data = reactive<PageData<UserForm, UserQuery>>({
|
||||
form: {...initFormData},
|
||||
form: { ...initFormData },
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
|
|
@ -370,6 +333,23 @@ const getList = async () => {
|
|||
loading.value = false;
|
||||
}
|
||||
|
||||
const getAllPlan = async () => {
|
||||
const res = await allPlan();
|
||||
planList.value = res.data;
|
||||
}
|
||||
|
||||
const getPlanName = (id) => {
|
||||
let name = "";
|
||||
console.log(planList.value);
|
||||
console.log(id);
|
||||
planList.value.forEach(plan => {
|
||||
if (plan.id == id) {
|
||||
name = plan.planName
|
||||
}
|
||||
});
|
||||
return name; // 如果找不到就显示ID本身
|
||||
};
|
||||
|
||||
/** 取消按钮 */
|
||||
const cancel = () => {
|
||||
reset();
|
||||
|
|
@ -378,7 +358,7 @@ const cancel = () => {
|
|||
|
||||
/** 表单重置 */
|
||||
const reset = () => {
|
||||
form.value = {...initFormData};
|
||||
form.value = { ...initFormData };
|
||||
userFormRef.value?.resetFields();
|
||||
}
|
||||
|
||||
|
|
@ -455,5 +435,6 @@ const handleExport = () => {
|
|||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
getAllPlan();
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue