Merge remote-tracking branch 'upstream/feature/1.7.1' into feature/1.7.1
# Conflicts: # neutrino-proxy-admin/src/views/proxy/portMapping.vue # neutrino-proxy-server/src/main/java/fun/asgc/neutrino/proxy/server/service/PortPoolService.java
This commit is contained in:
Yohanes
@@ -0,0 +1,45 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
export function fetchList(query) {
|
||||
return request({
|
||||
url: '/port-group/page',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
export function portGroupList() {
|
||||
return request({
|
||||
url: '/port-group/list',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
export function updateEnableStatus(id, enable) {
|
||||
return request({
|
||||
url: '/port-group/update/enable-status',
|
||||
method: 'post',
|
||||
data: {
|
||||
id: id,
|
||||
enable: enable
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
export function createPortGroup(data) {
|
||||
return request({
|
||||
url: '/port-group/create',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
export function deleteGroup(id) {
|
||||
return request({
|
||||
url: '/port-group/delete',
|
||||
method: 'post',
|
||||
params: {
|
||||
id: id
|
||||
}
|
||||
})
|
||||
}
|
||||
@@ -14,6 +14,15 @@ export function portPoolList() {
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
export function availablePortList(licenseId) {
|
||||
return request({
|
||||
url: '/port-pool/get-available-port-list',
|
||||
method: 'get',
|
||||
params: {
|
||||
licenseId: licenseId
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
export function updateEnableStatus(id, enable) {
|
||||
return request({
|
||||
|
||||
@@ -0,0 +1,16 @@
|
||||
import request from '@/utils/request'
|
||||
export function fetchUserFlowReportList(query) {
|
||||
return request({
|
||||
url: '/report/user/flow-report/page',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
export function fetchLicenseFlowReportList(query) {
|
||||
return request({
|
||||
url: '/report/license/flow-report/page',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
@@ -48,6 +48,7 @@ export default {
|
||||
user: '用户管理',
|
||||
system: '系统管理',
|
||||
portPool: '端口池管理',
|
||||
portGroup: '端口分组管理',
|
||||
proxy: '代理配置',
|
||||
license: 'License管理',
|
||||
portMapping: '端口映射',
|
||||
@@ -55,7 +56,10 @@ export default {
|
||||
jobLog: '调度日志',
|
||||
log: '日志管理',
|
||||
loginLog: '登录日志',
|
||||
clientConnectLog: '客户端连接日志'
|
||||
clientConnectLog: '客户端连接日志',
|
||||
report: '报表管理',
|
||||
userFlowReport: '用户流量报表',
|
||||
licenseFlowReport: 'License流量报表'
|
||||
},
|
||||
navbar: {
|
||||
logOut: '退出登录',
|
||||
@@ -118,6 +122,11 @@ export default {
|
||||
confirm: '确 定',
|
||||
userId: '用户ID',
|
||||
userName: '用户名',
|
||||
group: '分组',
|
||||
groupName: '分组名称',
|
||||
groupPossessor: '分组所属',
|
||||
possessorType: '所属类',
|
||||
possessorId: '分组所属',
|
||||
license: 'License',
|
||||
createTime: '创建时间',
|
||||
updateTime: '更新时间',
|
||||
@@ -147,7 +156,10 @@ export default {
|
||||
msg: '消息',
|
||||
outcome: '结果',
|
||||
err: '异常信息',
|
||||
resetKey: '重置Key'
|
||||
resetKey: '重置Key',
|
||||
upFlow: '上行流量',
|
||||
downFlow: '下行流量',
|
||||
totalFlow: '总流量'
|
||||
},
|
||||
button: {
|
||||
lookOver: '查看'
|
||||
|
||||
@@ -75,10 +75,25 @@ export const asyncRouterMap = [
|
||||
},
|
||||
children: [
|
||||
{ path: 'user', component: _import('system/user'), name: 'user', meta: { title: 'user' }},
|
||||
{ path: 'portGroup', component: _import('system/portGroup'), name: 'portGroup', meta: { title: 'portGroup' }},
|
||||
{ path: 'portPool', component: _import('system/portPool'), name: 'portPool', meta: { title: 'portPool' }},
|
||||
{ path: 'jobManager', component: _import('system/jobManager'), name: 'jobManager', meta: { title: 'jobManager' }}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/report',
|
||||
component: Layout,
|
||||
redirect: 'noredirect',
|
||||
name: 'report',
|
||||
meta: {
|
||||
title: 'report',
|
||||
icon: 'component'
|
||||
},
|
||||
children: [
|
||||
{ path: 'userFlowReport', component: _import('report/userFlowReport'), name: 'userFlowReport', meta: { title: 'userFlowReport' }},
|
||||
{ path: 'licenseFlowReport', component: _import('report/licenseFlowReport'), name: 'licenseFlowReport', meta: { title: 'licenseFlowReport' }}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/log',
|
||||
component: Layout,
|
||||
|
||||
@@ -1,6 +1,15 @@
|
||||
<template>
|
||||
<div class="app-container calendar-list-container">
|
||||
<div class="filter-container">
|
||||
<el-select v-model="listQuery.userId" placeholder="请选择用户" clearable>
|
||||
<el-option v-for="item in userList" :key="item.id" :label="item.name" :value="item.id"/>
|
||||
</el-select>
|
||||
<el-select v-model="listQuery.isOnline" placeholder="请选择在线状态" clearable>
|
||||
<el-option v-for="item in selectObj.onlineOptions" :key="item.value" :label="item.label" :value="item.value"/>
|
||||
</el-select>
|
||||
<el-select v-model="listQuery.enable" placeholder="请选择启用状态" clearable>
|
||||
<el-option v-for="item in selectObj.statusOptions" :key="item.value" :label="item.label" :value="item.value"/>
|
||||
</el-select>
|
||||
<el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">{{$t('table.search')}}</el-button>
|
||||
<el-button class="filter-item" style="margin-left: 10px;" @click="handleCreate" type="primary" icon="el-icon-edit">{{$t('table.add')}}</el-button>
|
||||
</div>
|
||||
@@ -134,9 +143,9 @@
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
importance: undefined,
|
||||
title: undefined,
|
||||
type: undefined
|
||||
enable: undefined,
|
||||
isOnline: undefined,
|
||||
userId: null
|
||||
},
|
||||
importanceOptions: [1, 2, 3],
|
||||
calendarTypeOptions,
|
||||
@@ -165,7 +174,11 @@
|
||||
userId: [{ required: true, message: '请选择用户', trigger: 'blur' }],
|
||||
name: [{ required: true, message: 'License名称不能为空', trigger: 'blur' }]
|
||||
},
|
||||
downloadLoading: false
|
||||
downloadLoading: false,
|
||||
selectObj: {
|
||||
statusOptions: [{ label: '启用', value: 1 }, { label: '禁用', value: 2 }],
|
||||
onlineOptions: [{ label: '在线', value: 1 }, { label: '离线', value: 2 }]
|
||||
}
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
@@ -195,8 +208,7 @@
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
this.getUserList()
|
||||
this.getDataList()
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
@@ -212,6 +224,17 @@
|
||||
this.userList = response.data.data
|
||||
})
|
||||
},
|
||||
getDataList() {
|
||||
const loginName = this.$store.state.user.loginName
|
||||
userList().then(response => {
|
||||
this.userList = response.data.data
|
||||
const curUser = this.userList.find((val) => val.loginName === loginName)
|
||||
if (curUser) {
|
||||
this.listQuery.userId = curUser.id
|
||||
}
|
||||
this.getList()
|
||||
})
|
||||
},
|
||||
handleFilter() {
|
||||
this.listQuery.current = 1
|
||||
this.getList()
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
<el-table-column align="center" :label="$t('table.id')" width="50">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.id }}</span>
|
||||
</template>～
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" :label="$t('table.userName')" width="100">
|
||||
<template slot-scope="scope">
|
||||
@@ -93,10 +93,17 @@
|
||||
<!-- </el-select>-->
|
||||
<!-- </el-form-item>-->
|
||||
|
||||
<el-form-item :label="$t('License')" prop="licenseId">
|
||||
<DropdownTable v-model="temp.licenseId" :name.sync="temp.licenseName" :tableData="licenseList"
|
||||
@selectedData="selectedFeeItem" placeholder="请选择" :width="280" :disabled="dialogStatus === 'update'" />
|
||||
<!-- <DropdownTable
|
||||
<el-form-item :label="$t('License')" prop="licenseId" >
|
||||
<DropdownTable
|
||||
v-model="temp.licenseId"
|
||||
:name.sync="temp.licenseName"
|
||||
:tableData= "licenseList"
|
||||
@selectedData="selectedFeeItem"
|
||||
placeholder="请选择"
|
||||
:width="280"
|
||||
:disabled="dialogStatus==='update'"
|
||||
/>
|
||||
<!-- <DropdownTable
|
||||
:columns="countryColumns"
|
||||
:data="licenseList"
|
||||
v-model="temp.licenseId"
|
||||
@@ -141,14 +148,14 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { fetchList, createUserPortMapping, updateUserPortMapping, updateEnableStatus, deletePortMapping } from '@/api/portMapping'
|
||||
import { portPoolList } from '@/api/portPool'
|
||||
import { licenseList } from '@/api/license'
|
||||
import { userList } from '@/api/user'
|
||||
import waves from '@/directive/waves' // 水波纹指令
|
||||
import { parseTime } from '@/utils'
|
||||
import ButtonPopover from '../../components/Button/buttonPopover'
|
||||
import DropdownTable from '../../components/Dropdown/DropdownTable'
|
||||
import { fetchList, createUserPortMapping, updateUserPortMapping, updateEnableStatus, deletePortMapping } from '@/api/portMapping'
|
||||
import { portPoolList, availablePortList } from '@/api/portPool'
|
||||
import { licenseList } from '@/api/license'
|
||||
import { userList } from '@/api/user'
|
||||
import waves from '@/directive/waves' // 水波纹指令
|
||||
import { parseTime } from '@/utils'
|
||||
import ButtonPopover from '../../components/Button/buttonPopover'
|
||||
import DropdownTable from '../../components/Dropdown/DropdownTable'
|
||||
|
||||
const calendarTypeOptions = [
|
||||
{ key: 'CN', display_name: 'China' },
|
||||
@@ -163,223 +170,246 @@ const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
|
||||
return acc
|
||||
}, {})
|
||||
|
||||
export default {
|
||||
name: 'complexTable',
|
||||
directives: {
|
||||
waves
|
||||
},
|
||||
components: {
|
||||
DropdownTable,
|
||||
ButtonPopover
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableKey: 0,
|
||||
list: null,
|
||||
total: null,
|
||||
listLoading: true,
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
importance: undefined,
|
||||
title: undefined,
|
||||
type: undefined
|
||||
},
|
||||
importanceOptions: [1, 2, 3],
|
||||
calendarTypeOptions,
|
||||
sortOptions: [{ label: 'ID Ascending', key: '+id' }, { label: 'ID Descending', key: '-id' }],
|
||||
statusOptions: ['published', 'draft', 'deleted'],
|
||||
userList: [],
|
||||
licenseList: [],
|
||||
serverPortList: [],
|
||||
showReviewer: false,
|
||||
temp: {
|
||||
id: undefined,
|
||||
licenseId: undefined,
|
||||
licenseName: undefined,
|
||||
serverPort: undefined,
|
||||
clientIp: undefined,
|
||||
clientPort: undefined
|
||||
},
|
||||
dialogFormVisible: false,
|
||||
dialogStatus: '',
|
||||
textMap: {
|
||||
update: '编辑',
|
||||
create: '新建'
|
||||
},
|
||||
dialogPvVisible: false,
|
||||
pvData: [],
|
||||
rules: {
|
||||
licenseId: [{ required: true, message: '请选择License', trigger: 'blur,change' }],
|
||||
serverPort: [{ required: true, message: '请输入服务端端口', trigger: 'blur' }],
|
||||
clientIp: [{ required: true, message: '请输入客户端IP', trigger: 'blur' }],
|
||||
clientPort: [{ required: true, message: '请输入客户端端口', trigger: 'blur' }]
|
||||
},
|
||||
downloadLoading: false,
|
||||
countryColumns: [
|
||||
{ prop: 'userName', label: '用户名', align: 'center' },
|
||||
{ prop: 'name', label: 'License', align: 'center' }
|
||||
]
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
statusName(status) {
|
||||
const statusMap = {
|
||||
1: '启用',
|
||||
2: '禁用'
|
||||
export default {
|
||||
name: 'complexTable',
|
||||
directives: {
|
||||
waves
|
||||
},
|
||||
components: {
|
||||
DropdownTable,
|
||||
ButtonPopover
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableKey: 0,
|
||||
list: null,
|
||||
total: null,
|
||||
listLoading: true,
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
importance: undefined,
|
||||
title: undefined,
|
||||
type: undefined
|
||||
},
|
||||
importanceOptions: [1, 2, 3],
|
||||
calendarTypeOptions,
|
||||
sortOptions: [{ label: 'ID Ascending', key: '+id' }, { label: 'ID Descending', key: '-id' }],
|
||||
statusOptions: ['published', 'draft', 'deleted'],
|
||||
userList: [],
|
||||
licenseList: [],
|
||||
serverPortList: [],
|
||||
showReviewer: false,
|
||||
temp: {
|
||||
id: undefined,
|
||||
licenseId: undefined,
|
||||
licenseName: undefined,
|
||||
serverPort: undefined,
|
||||
clientIp: undefined,
|
||||
clientPort: undefined
|
||||
},
|
||||
dialogFormVisible: false,
|
||||
dialogStatus: '',
|
||||
textMap: {
|
||||
update: '编辑',
|
||||
create: '新建'
|
||||
},
|
||||
dialogPvVisible: false,
|
||||
pvData: [],
|
||||
rules: {
|
||||
licenseId: [{ required: true, message: '请选择License', trigger: 'blur,change' }],
|
||||
serverPort: [{ required: true, message: '请输入服务端端口', trigger: 'blur' }],
|
||||
clientIp: [{ required: true, message: '请输入客户端IP', trigger: 'blur' }],
|
||||
clientPort: [{ required: true, message: '请输入客户端端口', trigger: 'blur' }]
|
||||
},
|
||||
downloadLoading: false,
|
||||
countryColumns: [
|
||||
{ prop: 'userName', label: '用户名', align: 'center' },
|
||||
{ prop: 'name', label: 'License', align: 'center' }
|
||||
]
|
||||
}
|
||||
return statusMap[status]
|
||||
},
|
||||
isOnlineName(isOnline) {
|
||||
const isOnlineMap = {
|
||||
1: '在线',
|
||||
2: '离线'
|
||||
}
|
||||
return isOnlineMap[isOnline]
|
||||
},
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
1: 'success',
|
||||
2: 'danger'
|
||||
}
|
||||
return statusMap[status]
|
||||
},
|
||||
typeFilter(type) {
|
||||
return calendarTypeKeyValue[type]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
this.getPortPoolList()
|
||||
this.getLicenseList()
|
||||
this.getAllUserList()
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
this.listLoading = true
|
||||
fetchList(this.listQuery).then(response => {
|
||||
this.list = response.data.data.records
|
||||
this.total = response.data.data.total
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
getPortPoolList() {
|
||||
portPoolList().then(response => {
|
||||
this.serverPortList = response.data.data
|
||||
})
|
||||
},
|
||||
getAllUserList() {
|
||||
userList().then(response => {
|
||||
this.userList = response.data.data
|
||||
})
|
||||
},
|
||||
getLicenseList() {
|
||||
licenseList().then(response => {
|
||||
this.licenseList = response.data.data
|
||||
})
|
||||
},
|
||||
handleFilter() {
|
||||
this.listQuery.current = 1
|
||||
this.getList()
|
||||
},
|
||||
handleSizeChange(val) {
|
||||
this.listQuery.size = val
|
||||
this.getList()
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.listQuery.current = val
|
||||
this.getList()
|
||||
},
|
||||
handleModifyStatus(row, enable) {
|
||||
console.log('route', this.$route)
|
||||
updateEnableStatus(row.id, enable).then(response => {
|
||||
if (response.data.data.code === 0) {
|
||||
this.$message({
|
||||
message: '操作成功',
|
||||
type: 'success'
|
||||
})
|
||||
filters: {
|
||||
statusName(status) {
|
||||
const statusMap = {
|
||||
1: '启用',
|
||||
2: '禁用'
|
||||
}
|
||||
return statusMap[status]
|
||||
},
|
||||
isOnlineName(isOnline) {
|
||||
const isOnlineMap = {
|
||||
1: '在线',
|
||||
2: '离线'
|
||||
}
|
||||
return isOnlineMap[isOnline]
|
||||
},
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
1: 'success',
|
||||
2: 'danger'
|
||||
}
|
||||
return statusMap[status]
|
||||
},
|
||||
typeFilter(type) {
|
||||
return calendarTypeKeyValue[type]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
this.getPortPoolList()
|
||||
this.getLicenseList()
|
||||
this.getAllUserList()
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
this.listLoading = true
|
||||
fetchList(this.listQuery).then(response => {
|
||||
this.list = response.data.data.records
|
||||
this.total = response.data.data.total
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
getPortPoolList() {
|
||||
portPoolList().then(response => {
|
||||
this.serverPortList = response.data.data
|
||||
})
|
||||
},
|
||||
getAvailablePortList(licenseId) {
|
||||
availablePortList(licenseId).then(response => {
|
||||
this.serverPortList = response.data.data
|
||||
})
|
||||
},
|
||||
getAllUserList() {
|
||||
userList().then(response => {
|
||||
this.userList = response.data.data
|
||||
})
|
||||
},
|
||||
getLicenseList() {
|
||||
licenseList().then(response => {
|
||||
this.licenseList = response.data.data
|
||||
})
|
||||
},
|
||||
handleFilter() {
|
||||
this.listQuery.current = 1
|
||||
this.getList()
|
||||
})
|
||||
},
|
||||
resetTemp() {
|
||||
this.temp = {
|
||||
id: undefined,
|
||||
licenseId: undefined,
|
||||
licenseName: undefined,
|
||||
serverPort: undefined,
|
||||
clientIp: '127.0.0.1',
|
||||
clientPort: undefined
|
||||
}
|
||||
},
|
||||
handleCreate() {
|
||||
this.resetTemp()
|
||||
this.dialogStatus = 'create'
|
||||
this.dialogFormVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs['dataForm'].clearValidate()
|
||||
})
|
||||
},
|
||||
createData() {
|
||||
this.$refs['dataForm'].validate((valid) => {
|
||||
if (valid) {
|
||||
createUserPortMapping(this.temp).then(response => {
|
||||
},
|
||||
handleSizeChange(val) {
|
||||
this.listQuery.size = val
|
||||
this.getList()
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.listQuery.current = val
|
||||
this.getList()
|
||||
},
|
||||
handleModifyStatus(row, enable) {
|
||||
console.log('route', this.$route)
|
||||
updateEnableStatus(row.id, enable).then(response => {
|
||||
if (response.data.data.code === 0) {
|
||||
this.$message({
|
||||
message: '操作成功',
|
||||
type: 'success'
|
||||
})
|
||||
}
|
||||
this.getList()
|
||||
})
|
||||
},
|
||||
resetTemp() {
|
||||
this.temp = {
|
||||
id: undefined,
|
||||
licenseId: undefined,
|
||||
licenseName: undefined,
|
||||
serverPort: undefined,
|
||||
clientIp: '127.0.0.1',
|
||||
clientPort: undefined
|
||||
}
|
||||
},
|
||||
handleCreate() {
|
||||
this.resetTemp()
|
||||
this.dialogStatus = 'create'
|
||||
this.dialogFormVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs['dataForm'].clearValidate()
|
||||
})
|
||||
},
|
||||
createData() {
|
||||
this.$refs['dataForm'].validate((valid) => {
|
||||
if (valid) {
|
||||
createUserPortMapping(this.temp).then(response => {
|
||||
if (response.data.code === 0) {
|
||||
this.dialogFormVisible = false
|
||||
this.$notify({
|
||||
title: '成功',
|
||||
message: '创建成功',
|
||||
type: 'success',
|
||||
duration: 2000
|
||||
})
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
handleUpdate(row) {
|
||||
this.temp = Object.assign({}, row) // copy obj
|
||||
this.temp.timestamp = new Date(this.temp.timestamp)
|
||||
this.dialogStatus = 'update'
|
||||
this.dialogFormVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs['dataForm'].clearValidate()
|
||||
})
|
||||
},
|
||||
updateData() {
|
||||
this.$refs['dataForm'].validate((valid) => {
|
||||
if (valid) {
|
||||
const tempData = Object.assign({}, this.temp)
|
||||
updateUserPortMapping(tempData).then(response => {
|
||||
if (response.data.code === 0) {
|
||||
// this.$message({
|
||||
// message: '操作成功',
|
||||
// type: 'success'
|
||||
// })
|
||||
this.$notify({
|
||||
title: '成功',
|
||||
message: '更新成功',
|
||||
type: 'success',
|
||||
duration: 2000
|
||||
})
|
||||
this.dialogFormVisible = false
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
selectedFeeItem(row, list) {
|
||||
if (this.temp.licenseId !== row.id) {
|
||||
this.temp.licenseId = row.id
|
||||
this.temp.licenseName = row.name
|
||||
this.getAvailablePortList(row.id)
|
||||
this.temp.serverPort = null
|
||||
}
|
||||
},
|
||||
handleDelete(row) {
|
||||
this.$confirm('确定要删除吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
deletePortMapping(row.id).then(response => {
|
||||
if (response.data.code === 0) {
|
||||
this.dialogFormVisible = false
|
||||
this.$notify({
|
||||
title: '成功',
|
||||
message: '创建成功',
|
||||
message: '删除成功',
|
||||
type: 'success',
|
||||
duration: 2000
|
||||
})
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
handleUpdate(row) {
|
||||
this.temp = Object.assign({}, row) // copy obj
|
||||
this.temp.timestamp = new Date(this.temp.timestamp)
|
||||
this.dialogStatus = 'update'
|
||||
this.dialogFormVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs['dataForm'].clearValidate()
|
||||
})
|
||||
},
|
||||
updateData() {
|
||||
this.$refs['dataForm'].validate((valid) => {
|
||||
if (valid) {
|
||||
const tempData = Object.assign({}, this.temp)
|
||||
updateUserPortMapping(tempData).then(response => {
|
||||
if (response.data.code === 0) {
|
||||
// this.$message({
|
||||
// message: '操作成功',
|
||||
// type: 'success'
|
||||
// })
|
||||
this.$notify({
|
||||
title: '成功',
|
||||
message: '更新成功',
|
||||
type: 'success',
|
||||
duration: 2000
|
||||
})
|
||||
this.dialogFormVisible = false
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
selectedFeeItem(row, list) {
|
||||
this.temp.licenseId = row.id
|
||||
this.temp.licenseName = row.name
|
||||
},
|
||||
handleDelete(row) {
|
||||
this.$confirm('确定要删除吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
}).catch(() => {})
|
||||
},
|
||||
handleDelete2(row) {
|
||||
deletePortMapping(row.id).then(response => {
|
||||
if (response.data.code === 0) {
|
||||
this.$notify({
|
||||
@@ -391,40 +421,26 @@ export default {
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
}).catch(() => { })
|
||||
},
|
||||
handleDelete2(row) {
|
||||
deletePortMapping(row.id).then(response => {
|
||||
if (response.data.code === 0) {
|
||||
this.$notify({
|
||||
title: '成功',
|
||||
message: '删除成功',
|
||||
type: 'success',
|
||||
duration: 2000
|
||||
})
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
},
|
||||
handleDownload() {
|
||||
this.downloadLoading = true
|
||||
import('@/vendor/Export2Excel').then(excel => {
|
||||
const tHeader = ['timestamp', 'title', 'type', 'importance', 'status']
|
||||
const filterVal = ['timestamp', 'title', 'type', 'importance', 'status']
|
||||
const data = this.formatJson(filterVal, this.list)
|
||||
excel.export_json_to_excel(tHeader, data, 'table-list')
|
||||
this.downloadLoading = false
|
||||
})
|
||||
},
|
||||
formatJson(filterVal, jsonData) {
|
||||
return jsonData.map(v => filterVal.map(j => {
|
||||
if (j === 'timestamp') {
|
||||
return parseTime(v[j])
|
||||
} else {
|
||||
return v[j]
|
||||
}
|
||||
}))
|
||||
},
|
||||
handleDownload() {
|
||||
this.downloadLoading = true
|
||||
import('@/vendor/Export2Excel').then(excel => {
|
||||
const tHeader = ['timestamp', 'title', 'type', 'importance', 'status']
|
||||
const filterVal = ['timestamp', 'title', 'type', 'importance', 'status']
|
||||
const data = this.formatJson(filterVal, this.list)
|
||||
excel.export_json_to_excel(tHeader, data, 'table-list')
|
||||
this.downloadLoading = false
|
||||
})
|
||||
},
|
||||
formatJson(filterVal, jsonData) {
|
||||
return jsonData.map(v => filterVal.map(j => {
|
||||
if (j === 'timestamp') {
|
||||
return parseTime(v[j])
|
||||
} else {
|
||||
return v[j]
|
||||
}
|
||||
}))
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,128 @@
|
||||
<template>
|
||||
<div class="app-container calendar-list-container">
|
||||
<div class="filter-container">
|
||||
<el-select v-model="listQuery.userId" placeholder="请选择用户" clearable>
|
||||
<el-option v-for="item in userList" :key="item.id" :label="item.name" :value="item.id"/>
|
||||
</el-select>
|
||||
<el-button type="primary" v-waves icon="el-icon-search" @click="handleFilter">{{$t('table.search')}}</el-button>
|
||||
</div>
|
||||
|
||||
<el-table :key='tableKey' :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row style="width: 100%">
|
||||
<el-table-column type="index" width="100" :label="$t('table.id')"></el-table-column>
|
||||
<el-table-column align="center" :label="$t('table.userName')" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.userName}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" :label="$t('table.licenseName')" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.licenseName}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" :label="$t('table.upFlow')" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.upFlowDesc}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" :label="$t('table.downFlow')" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.downFlowDesc}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" :label="$t('table.totalFlow')" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.totalFlowDesc}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="pagination-container">
|
||||
<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-pageInfo.sync="listQuery.current"
|
||||
:pageInfo-sizes="[10,20,30, 50]" :pageInfo-size="listQuery.size" layout="total, sizes, prev, pager, next, jumper" :total="total">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { fetchLicenseFlowReportList } from '@/api/report'
|
||||
import { userList } from '@/api/user'
|
||||
import waves from '@/directive/waves'
|
||||
|
||||
export default {
|
||||
name: 'jobLog',
|
||||
directives: {
|
||||
waves
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableKey: 0,
|
||||
list: null,
|
||||
total: null,
|
||||
listLoading: false,
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
jobId: undefined
|
||||
},
|
||||
userList: [],
|
||||
dialogVisible: false,
|
||||
selectRow: {}
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
this.getUserList()
|
||||
},
|
||||
activated() {
|
||||
this.getUserList()
|
||||
if (this.$route.query.jobId) {
|
||||
this.listQuery.jobId = this.$route.query.jobId
|
||||
this.getList()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
this.listLoading = true
|
||||
fetchLicenseFlowReportList(this.listQuery).then(response => {
|
||||
this.list = response.data.data.records
|
||||
this.total = response.data.data.total
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
getUserList() {
|
||||
userList().then(response => {
|
||||
this.userList = response.data.data
|
||||
})
|
||||
},
|
||||
handleFilter() {
|
||||
this.listQuery.current = 1
|
||||
this.getList()
|
||||
},
|
||||
handleSizeChange(val) {
|
||||
this.listQuery.size = val
|
||||
this.listQuery.current = 1
|
||||
this.getList()
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.listQuery.current = val
|
||||
this.getList()
|
||||
},
|
||||
handleShowClick(row) {
|
||||
console.log(row)
|
||||
},
|
||||
handleLookOver(row) {
|
||||
this.selectRow = row
|
||||
this.dialogVisible = true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.job-msg-div{
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,123 @@
|
||||
<template>
|
||||
<div class="app-container calendar-list-container">
|
||||
<div class="filter-container">
|
||||
<el-select v-model="listQuery.userId" placeholder="请选择用户" clearable>
|
||||
<el-option v-for="item in userList" :key="item.id" :label="item.name" :value="item.id"/>
|
||||
</el-select>
|
||||
<el-button type="primary" v-waves icon="el-icon-search" @click="handleFilter">{{$t('table.search')}}</el-button>
|
||||
</div>
|
||||
|
||||
<el-table :key='tableKey' :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row style="width: 100%">
|
||||
<el-table-column type="index" width="100" :label="$t('table.id')"></el-table-column>
|
||||
<el-table-column align="center" :label="$t('table.userName')" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.userName}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" :label="$t('table.upFlow')" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.upFlowDesc}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" :label="$t('table.downFlow')" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.downFlowDesc}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" :label="$t('table.totalFlow')" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.totalFlowDesc}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="pagination-container">
|
||||
<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-pageInfo.sync="listQuery.current"
|
||||
:pageInfo-sizes="[10,20,30, 50]" :pageInfo-size="listQuery.size" layout="total, sizes, prev, pager, next, jumper" :total="total">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { fetchUserFlowReportList } from '@/api/report'
|
||||
import { userList } from '@/api/user'
|
||||
import waves from '@/directive/waves' // 水波纹指令
|
||||
|
||||
export default {
|
||||
name: 'jobLog',
|
||||
directives: {
|
||||
waves
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableKey: 0,
|
||||
list: null,
|
||||
total: null,
|
||||
listLoading: false,
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
jobId: undefined
|
||||
},
|
||||
userList: [],
|
||||
dialogVisible: false,
|
||||
selectRow: {}
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
this.getUserList()
|
||||
},
|
||||
activated() {
|
||||
this.getUserList()
|
||||
if (this.$route.query.jobId) {
|
||||
this.listQuery.jobId = this.$route.query.jobId
|
||||
this.getList()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
this.listLoading = true
|
||||
fetchUserFlowReportList(this.listQuery).then(response => {
|
||||
this.list = response.data.data.records
|
||||
this.total = response.data.data.total
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
getUserList() {
|
||||
userList().then(response => {
|
||||
this.userList = response.data.data
|
||||
})
|
||||
},
|
||||
handleFilter() {
|
||||
this.listQuery.current = 1
|
||||
this.getList()
|
||||
},
|
||||
handleSizeChange(val) {
|
||||
this.listQuery.size = val
|
||||
this.listQuery.current = 1
|
||||
this.getList()
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.listQuery.current = val
|
||||
this.getList()
|
||||
},
|
||||
handleShowClick(row) {
|
||||
console.log(row)
|
||||
},
|
||||
handleLookOver(row) {
|
||||
this.selectRow = row
|
||||
this.dialogVisible = true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.job-msg-div{
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,346 @@
|
||||
<template>
|
||||
<div class="app-container calendar-list-container">
|
||||
<div class="filter-container">
|
||||
<el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">
|
||||
{{ $t('table.search') }}
|
||||
</el-button>
|
||||
<el-button class="filter-item" style="margin-left: 10px;" @click="handleCreate" type="primary"
|
||||
icon="el-icon-edit">{{ $t('table.add') }}
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<el-table :key='tableKey' :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border fit
|
||||
highlight-current-row
|
||||
style="width: 100%">
|
||||
<el-table-column align="center" :label="$t('table.id')" width="120">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.id }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" :label="$t('table.groupName')" width="200">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.name }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" :label="$t('table.groupPossessor')" width="200">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.possessorType == 1 ? "用户:" : (scope.row.possessorType == 2 ? "License:" : "全局") }} {{ scope.row.possessor }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column width="200" align="center" :label="$t('table.createTime')">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.createTime | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column width="200" align="center" :label="$t('table.updateTime')">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.updateTime | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column class-name="status-col" :label="$t('table.enableStatus')" width="150">-->
|
||||
<!-- <template slot-scope="scope">-->
|
||||
<!-- <el-tag :type="scope.row.enable | statusFilter">{{ scope.row.enable | statusName }}</el-tag>-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-table-column>-->
|
||||
<el-table-column align="center" :label="$t('table.actions')" width="250" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
<!-- <el-button v-if="scope.row.enable =='1'" size="mini" type="danger" @click="handleModifyStatus(scope.row,2)">-->
|
||||
<!-- {{ $t('table.disable') }}-->
|
||||
<!-- </el-button>-->
|
||||
<!-- <el-button v-if="scope.row.enable =='2'" size="mini" type="success" @click="handleModifyStatus(scope.row,1)">-->
|
||||
<!-- {{ $t('table.enable') }}-->
|
||||
<!-- </el-button>-->
|
||||
<!-- <el-button v-if="scope.row.status!='deleted'" size="mini" type="danger" @click="handleDelete(scope.row,'deleted')">{{$t('table.delete')}}</el-button>-->
|
||||
<ButtonPopover @handleCommitClick="handleDelete(scope.row)" style="margin-left: 10px"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div class="pagination-container">
|
||||
<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
|
||||
:current-pageInfo.sync="listQuery.current"
|
||||
:pageInfo-sizes="[10,20,30, 50]" :pageInfo-size="listQuery.size"
|
||||
layout="total, sizes, prev, pager, next, jumper" :total="total">
|
||||
</el-pagination>
|
||||
</div>
|
||||
|
||||
<el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
|
||||
<el-form :rules="rules" ref="dataForm" :model="temp" label-position="left" label-width="70px"
|
||||
style='width: 400px; margin-left:50px;'>
|
||||
<el-form-item style="width: 350px" class="filter-item" :label="$t('table.groupName')" prop="name">
|
||||
<el-input v-model="temp.name"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item :label="$t('table.possessorType')" prop="possessorType">
|
||||
<el-select style="width: 280px" class="filter-item" v-model="temp.possessorType" placeholder="请选择"
|
||||
:disabled="dialogStatus=='update'">
|
||||
<el-option v-for="item in possessorTypeList" :key="item.id" :label="item.name" :value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
<el-form-item v-show="temp.possessorType==1" :label="$t('table.userName')" prop="possessorId">
|
||||
<el-select style="width: 280px" class="filter-item" v-model="temp.possessorId" placeholder="请选择"
|
||||
:disabled="dialogStatus=='update'">
|
||||
<el-option v-for="item in userList" :key="item.id" :label="item.name" :value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item v-show="temp.possessorType==2" :label="$t('table.license')" prop="possessorId">
|
||||
<el-select style="width: 280px" class="filter-item" v-model="temp.possessorId" placeholder="请选择"
|
||||
:disabled="dialogStatus=='update'">
|
||||
<el-option v-for="item in licenseList" :key="item.id" :label="item.name" :value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogFormVisible = false">{{ $t('table.cancel') }}</el-button>
|
||||
<el-button v-if="dialogStatus=='create'" type="primary" @click="createData">{{ $t('table.confirm') }}
|
||||
</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog title="Reading statistics" :visible.sync="dialogPvVisible">
|
||||
<el-table :data="pvData" border fit highlight-current-row style="width: 100%">
|
||||
<el-table-column prop="key" label="Channel"></el-table-column>
|
||||
<el-table-column prop="pv" label="Pv"></el-table-column>
|
||||
</el-table>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="dialogPvVisible = false">{{ $t('table.confirm') }}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { fetchList, updateEnableStatus, createPortGroup, deleteGroup } from '@/api/portGroup'
|
||||
import waves from '@/directive/waves' // 水波纹指令
|
||||
import { parseTime } from '@/utils'
|
||||
import { userList } from '@/api/user'
|
||||
import ButtonPopover from '../../components/Button/buttonPopover'
|
||||
import { licenseList } from '../../api/license'
|
||||
|
||||
const calendarTypeOptions = [
|
||||
{ key: 'CN', display_name: 'China' },
|
||||
{ key: 'US', display_name: 'USA' },
|
||||
{ key: 'JP', display_name: 'Japan' },
|
||||
{ key: 'EU', display_name: 'Eurozone' }
|
||||
]
|
||||
|
||||
// arr to obj ,such as { CN : "China", US : "USA" }
|
||||
const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
|
||||
acc[cur.key] = cur.display_name
|
||||
return acc
|
||||
}, {})
|
||||
|
||||
export default {
|
||||
name: 'complexTable',
|
||||
directives: {
|
||||
waves
|
||||
},
|
||||
components: {
|
||||
ButtonPopover
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableKey: 0,
|
||||
list: null,
|
||||
total: null,
|
||||
listLoading: true,
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
importance: undefined,
|
||||
title: undefined,
|
||||
type: undefined
|
||||
},
|
||||
importanceOptions: [1, 2, 3],
|
||||
calendarTypeOptions,
|
||||
sortOptions: [{ label: 'ID Ascending', key: '+id' }, { label: 'ID Descending', key: '-id' }],
|
||||
statusOptions: ['published', 'draft', 'deleted'],
|
||||
showReviewer: false,
|
||||
userList: [],
|
||||
licenseList: [],
|
||||
possessorTypeList: [
|
||||
{
|
||||
'id': 1,
|
||||
'name': '用户'
|
||||
},
|
||||
{
|
||||
'id': 2,
|
||||
'name': '通道'
|
||||
}
|
||||
],
|
||||
temp: {
|
||||
name: '',
|
||||
possessorType: 1,
|
||||
possessorId: 1
|
||||
|
||||
},
|
||||
dialogFormVisible: false,
|
||||
dialogStatus: '',
|
||||
textMap: {
|
||||
update: '编辑',
|
||||
create: '新建'
|
||||
},
|
||||
dialogPvVisible: false,
|
||||
pvData: [],
|
||||
rules: {
|
||||
port: [{ required: true, message: '端口必填', trigger: 'blur' }]
|
||||
},
|
||||
downloadLoading: false
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
statusName(status) {
|
||||
const statusMap = {
|
||||
1: '启用',
|
||||
2: '禁用'
|
||||
}
|
||||
return statusMap[status]
|
||||
},
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
1: 'success',
|
||||
2: 'danger'
|
||||
}
|
||||
return statusMap[status]
|
||||
},
|
||||
typeFilter(type) {
|
||||
return calendarTypeKeyValue[type]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
this.getUserList()
|
||||
this.getLicenseList()
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
this.listLoading = true
|
||||
fetchList(this.listQuery).then(response => {
|
||||
this.list = response.data.data.records
|
||||
this.total = response.data.data.total
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
getUserList() {
|
||||
userList().then(response => {
|
||||
this.userList = response.data.data
|
||||
})
|
||||
},
|
||||
getLicenseList() {
|
||||
licenseList().then(response => {
|
||||
this.licenseList = response.data.data
|
||||
})
|
||||
},
|
||||
handleFilter() {
|
||||
this.listQuery.current = 1
|
||||
this.getList()
|
||||
},
|
||||
handleSizeChange(val) {
|
||||
this.listQuery.size = val
|
||||
this.getList()
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.listQuery.current = val
|
||||
this.getList()
|
||||
},
|
||||
handleModifyStatus(row, enable) {
|
||||
console.log('route', this.$route)
|
||||
updateEnableStatus(row.id, enable).then(response => {
|
||||
if (response.data.data.code === 0) {
|
||||
this.$message({
|
||||
message: '操作成功',
|
||||
type: 'success'
|
||||
})
|
||||
}
|
||||
this.getList()
|
||||
})
|
||||
},
|
||||
resetTemp() {
|
||||
this.temp = {
|
||||
id: undefined,
|
||||
importance: 1,
|
||||
remark: '',
|
||||
timestamp: new Date(),
|
||||
title: '',
|
||||
status: 'published',
|
||||
type: ''
|
||||
}
|
||||
},
|
||||
handleCreate() {
|
||||
this.resetTemp()
|
||||
this.dialogStatus = 'create'
|
||||
this.dialogFormVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs['dataForm'].clearValidate()
|
||||
})
|
||||
},
|
||||
createData() {
|
||||
this.$refs['dataForm'].validate((valid) => {
|
||||
if (valid) {
|
||||
createPortGroup(this.temp).then(response => {
|
||||
if (response.data.code === 0) {
|
||||
this.dialogFormVisible = false
|
||||
this.$notify({
|
||||
title: '成功',
|
||||
message: '创建成功',
|
||||
type: 'success',
|
||||
duration: 2000
|
||||
})
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
handleUpdate(row) {
|
||||
this.temp = Object.assign({}, row) // copy obj
|
||||
this.temp.timestamp = new Date(this.temp.timestamp)
|
||||
this.dialogStatus = 'update'
|
||||
this.dialogFormVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs['dataForm'].clearValidate()
|
||||
})
|
||||
},
|
||||
handleDelete(row) {
|
||||
deleteGroup(row.id).then(response => {
|
||||
if (response.data.code === 0) {
|
||||
this.$notify({
|
||||
title: '成功',
|
||||
message: '删除成功',
|
||||
type: 'success',
|
||||
duration: 2000
|
||||
})
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
},
|
||||
handleDownload() {
|
||||
this.downloadLoading = true
|
||||
import('@/vendor/Export2Excel').then(excel => {
|
||||
const tHeader = ['timestamp', 'title', 'type', 'importance', 'status']
|
||||
const filterVal = ['timestamp', 'title', 'type', 'importance', 'status']
|
||||
const data = this.formatJson(filterVal, this.list)
|
||||
excel.export_json_to_excel(tHeader, data, 'table-list')
|
||||
this.downloadLoading = false
|
||||
})
|
||||
},
|
||||
formatJson(filterVal, jsonData) {
|
||||
return jsonData.map(v => filterVal.map(j => {
|
||||
if (j === 'timestamp') {
|
||||
return parseTime(v[j])
|
||||
} else {
|
||||
return v[j]
|
||||
}
|
||||
}))
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -17,6 +17,11 @@
|
||||
<span>{{scope.row.port}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" :label="$t('table.groupName')" width="200">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.groupName}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column width="200" align="center" :label="$t('table.createTime')">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.createTime | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
|
||||
@@ -53,6 +58,15 @@
|
||||
<el-form-item :label="$t('table.port')" prop="port">
|
||||
<el-input v-model="temp.port"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item :label="$t('table.group')" prop="group">
|
||||
<el-select style="width: 330px" class="filter-item" v-model="temp.groupId"
|
||||
:disabled="dialogStatus=='update'">
|
||||
<el-option v-for="item in portGroupList" :key="item.id" :label="item.name" :value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogFormVisible = false">{{$t('table.cancel')}}</el-button>
|
||||
@@ -75,6 +89,7 @@
|
||||
|
||||
<script>
|
||||
import { fetchList, updateEnableStatus, createPortPool, deletePortPool } from '@/api/portPool'
|
||||
import { portGroupList } from '@/api/portGroup'
|
||||
import waves from '@/directive/waves' // 水波纹指令
|
||||
import { parseTime } from '@/utils'
|
||||
import ButtonPopover from '../../components/Button/buttonPopover'
|
||||
@@ -119,6 +134,7 @@
|
||||
statusOptions: ['published', 'draft', 'deleted'],
|
||||
showReviewer: false,
|
||||
temp: {
|
||||
groupId: 1,
|
||||
id: undefined,
|
||||
importance: 1,
|
||||
remark: '',
|
||||
@@ -133,6 +149,7 @@
|
||||
update: '编辑',
|
||||
create: '新建'
|
||||
},
|
||||
portGroupList: [],
|
||||
dialogPvVisible: false,
|
||||
pvData: [],
|
||||
rules: {
|
||||
@@ -161,7 +178,9 @@
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
// eslint-disable-next-line no-sequences
|
||||
this.getList(),
|
||||
this.getPortGroupList()
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
@@ -172,6 +191,11 @@
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
getPortGroupList() {
|
||||
portGroupList().then(response => {
|
||||
this.portGroupList = response.data.data
|
||||
})
|
||||
},
|
||||
handleFilter() {
|
||||
this.listQuery.current = 1
|
||||
this.getList()
|
||||
@@ -211,6 +235,7 @@
|
||||
this.resetTemp()
|
||||
this.dialogStatus = 'create'
|
||||
this.dialogFormVisible = true
|
||||
this.temp.groupId = 1
|
||||
this.$nextTick(() => {
|
||||
this.$refs['dataForm'].clearValidate()
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user