v1.2版
This commit is contained in:
康冉冉
@@ -0,0 +1,248 @@
|
||||
<template>
|
||||
<div class="app-container pageTopForm">
|
||||
<el-form :model="queryParams" ref="queryRef" v-show="showSearch" size="small" label-width="auto">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="资源名称" prop="resourceName">
|
||||
<el-input
|
||||
v-model="queryParams.resourceName"
|
||||
placeholder="请输入交换机名称/服务器名称"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="资源类型" prop="resourceType">
|
||||
<el-select
|
||||
v-model="queryParams.resourceType"
|
||||
placeholder="请选择资源类型"
|
||||
clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.rm_register_resource_type"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="Agent注册状态" title="Agent注册状态" prop="registrationStatus">
|
||||
<el-select
|
||||
v-model="queryParams.registrationStatus"
|
||||
placeholder="请选择Agent注册状态"
|
||||
clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.rm_register_status"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="Agent在线状态" title="Agent在线状态" prop="onlineStatus">
|
||||
<el-select
|
||||
v-model="queryParams.onlineStatus"
|
||||
placeholder="请选择Agent在线状态"
|
||||
clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.rm_register_online_state"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="交换机在线状态" title="交换机在线状态" prop="switchStatus">
|
||||
<el-select
|
||||
v-model="queryParams.switchStatus"
|
||||
placeholder="请选择交换机在线状态"
|
||||
clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.rm_register_online_state"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item class="lastBtnSty">
|
||||
<el-button type="primary" size="mini" icon="Search" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="Refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-form>
|
||||
|
||||
<!-- 表格数据 -->
|
||||
<TableList :columns="columns" :config="config" :modelIdent="this.$options.name" :queryParams="queryParams" :tableList="roleList" @fnClick="callback" @fnRenderList="getList" @value-change="handleValueChange">
|
||||
<!-- 资源类型 -->
|
||||
<template #tempType="{ row, column }">
|
||||
<dict-tag :options="dict.type.rm_register_resource_type" :value="row.resourceType"/>
|
||||
</template>
|
||||
<!-- 端口 -->
|
||||
<template #tempPort="{ row, column }">
|
||||
<dict-tag :options="dict.type.rm_register_port" :value="row.resourcePort"/>
|
||||
</template>
|
||||
<!-- 协议 -->
|
||||
<template #tempProtocol="{ row, column }">
|
||||
<dict-tag :options="dict.type.rm_register_protocol" :value="row.protocol"/>
|
||||
</template>
|
||||
<!-- 注册状态 -->
|
||||
<template #tempStatus="{ row, column }">
|
||||
<dict-tag :options="dict.type.rm_register_status" :value="row.registrationStatus"/>
|
||||
</template>
|
||||
<!-- 在线状态 -->
|
||||
<template #tempOnlineStatus="{ row, column }">
|
||||
<dict-tag :options="dict.type.rm_register_online_state" :value="row.onlineStatus"/>
|
||||
</template>
|
||||
</TableList>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="Register">
|
||||
import {listHandle, updateregisterType} from "@/api/disRevenue/resource"
|
||||
import TableList from "@/components/table/index.vue"
|
||||
export default {
|
||||
name: 'RegisterIndex',
|
||||
components: {TableList},
|
||||
dicts: ['rm_register_resource_type', 'rm_register_protocol', 'rm_register_status', 'rm_register_port', 'rm_register_online_state'],
|
||||
data() {
|
||||
return {
|
||||
roleList: [],
|
||||
loading: true,
|
||||
showSearch: true,
|
||||
ids: [],
|
||||
single: true,
|
||||
meltiple: true,
|
||||
// 列显隐信息
|
||||
columns: {
|
||||
id: { label: `ID`,width: '80'},
|
||||
hardwareSn: { label: `硬件SN`,minWidth: '250', visible: true },
|
||||
resourceType: { label: `资源类型`, minWidth: '100', slotName: 'tempType', visible: true },
|
||||
resourceName: { label: `资源名称`, visible: true, minWidth: '200'},
|
||||
ipAddress: { label: `IP地址`, minWidth: '200', visible: true },
|
||||
resourcePort: { label: `端口`, slotName: 'tempPort', minWidth: '80', visible: true },
|
||||
protocol: { label: `协议`, minWidth: '80', slotName: 'tempProtocol', visible: true },
|
||||
registrationStatus: { label: `Agent注册状态`, slotName: 'tempStatus', minWidth: '120', visible: true },
|
||||
onlineStatus: { label: `Agent在线状态`, slotName: 'tempOnlineStatus', minWidth: '120', visible: true },
|
||||
switchStatus: { label: `交换机在线状态`, slotName: 'tempOnlineStatus', minWidth: '120', visible: true }
|
||||
},
|
||||
config: {
|
||||
searcherForm: [
|
||||
{label: '交换机名称', prop: 'roleName', type: 'selset', options: []}
|
||||
],
|
||||
tableButton: {
|
||||
top: [
|
||||
{content: '新增', fnCode: 'add', type: 'primary', icon: 'el-icon-plus', hasPermi: 'resource:register:add'},
|
||||
{content: '导出', fnCode: 'export', type: 'warning', icon: 'el-icon-download', hasPermi: 'resource:register:export'},
|
||||
],
|
||||
line: [
|
||||
{content: '修改', fnCode: 'edit', type: 'text', icon: 'el-icon-edit', hasPermi: 'resource:register:edit'},
|
||||
{content: '注册', fnCode: 'enroll', showName: 'registrationStatus', showVal: '0', type: 'text', icon: 'el-icon-circle-check', hasPermi: 'resource:register:enroll'},
|
||||
{content: '取消注册', fnCode: 'unenroll', showName: 'registrationStatus', showVal: '1', type: 'text', icon: 'el-icon-circle-close', hasPermi: 'resource:register:unenroll'},
|
||||
]
|
||||
}
|
||||
},
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
total: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
// 处理子组件传递的新值
|
||||
handleValueChange(newValue) {
|
||||
// 父组件更新自身数据，实现同步
|
||||
this.showSearch = newValue;
|
||||
// console.log('父组件拿到新值:', newValue);
|
||||
},
|
||||
/** 查询角色列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
listHandle(this.addDateRange(this.queryParams)).then(response => {
|
||||
this.roleList = response.rows;
|
||||
this.queryParams.total = response.total;
|
||||
this.loading = false;
|
||||
})
|
||||
},
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
this.getList()
|
||||
},
|
||||
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.$refs['queryRef'].resetFields();
|
||||
this.queryParams = {pageNum: 1, pageSize: 10,total: 0};
|
||||
// this.resetForm("queryRef");
|
||||
this.handleQuery();
|
||||
},
|
||||
|
||||
/** 多选框选中数据 */
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.roleId);
|
||||
this.single = selection.length != 1;
|
||||
this.multiple = !selection.length;
|
||||
},
|
||||
callback(result, rowData, selectChange) {
|
||||
if (result && result.fnCode) {
|
||||
switch (result.fnCode) {
|
||||
case 'add':
|
||||
this.$router.push("/resource/register/edit/index")
|
||||
break;
|
||||
case 'edit':
|
||||
this.$router.push({
|
||||
path:'/resource/register/edit/index/',
|
||||
query: {id: rowData.id}
|
||||
});
|
||||
break;
|
||||
case 'enroll':
|
||||
rowData['registrationStatus'] = '1';
|
||||
updateregisterType(rowData).then(res => {
|
||||
this.$modal.msgSuccess("注册成功！");
|
||||
this.getList();
|
||||
});
|
||||
break;
|
||||
case 'unenroll':
|
||||
let content = '<p style="font-size: 1rem;font-weight: 600;">资源进行取消注册操作</p>' +
|
||||
'<p style="height: 0px;margin:10px 0 50px;">相关的服务器收益或者交换机带宽收益记录中将不在统计相关信息，拓扑中也会将相关的连接删除</p>';
|
||||
this.$modal.confirm(content).then(() => {
|
||||
rowData['registrationStatus'] = '0';
|
||||
updateregisterType(rowData).then(res => {
|
||||
this.$modal.msgSuccess("取消注册成功！");
|
||||
this.getList();
|
||||
});
|
||||
}).catch(() => {});
|
||||
break;
|
||||
case 'export':
|
||||
// let dataList = [];
|
||||
// Object.keys(this.columns).forEach(item => {
|
||||
// if (item.visible) {
|
||||
// dataList.push(item.prop);
|
||||
// }
|
||||
// });
|
||||
// this.download("/system/registration/export", {properties: dataList,}, `资源管理_${new Date().getTime()}.xlsx`);
|
||||
let paramsList = Object.assign({}, this.queryParams,rowData);
|
||||
this.download("system/registration/export", paramsList, `资源注册_${new Date().getTime()}.xlsx`, null, 'json');
|
||||
break;
|
||||
default:
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
::v-deep .lastBtnSty .el-form-item__content{
|
||||
margin-left: 10px!important;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user