mirror of
https://github.com/lkddi/nexusphp.git
synced 2026-04-23 11:27:24 +08:00
[admin] agent allow&deny
This commit is contained in:
xiaomlove
+11
-3
@@ -26,12 +26,20 @@
|
||||
</el-menu-item-group>
|
||||
</el-sub-menu>
|
||||
<el-sub-menu index="3">
|
||||
<template #title>
|
||||
<span>Agent</span>
|
||||
</template>
|
||||
<el-menu-item-group>
|
||||
<el-menu-item index="/agent-allow"><i class="el-icon-user" />Allow</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
<el-menu-item-group>
|
||||
<el-menu-item index="/agent-deny"><i class="el-icon-user" />Deny</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
</el-sub-menu>
|
||||
<el-sub-menu index="4">
|
||||
<template #title>
|
||||
<span>System</span>
|
||||
</template>
|
||||
<!-- <el-menu-item-group>-->
|
||||
<!-- <el-menu-item index="/agent-allow"><i class="el-icon-menu" />Agent allow</el-menu-item>-->
|
||||
<!-- </el-menu-item-group>-->
|
||||
<el-menu-item-group>
|
||||
<el-menu-item index="/exam"><i class="el-icon-menu" />Exam</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
|
||||
Vendored
+20
@@ -64,6 +64,26 @@ const router = createRouter({
|
||||
name: 'medal-form',
|
||||
component: () => import('../views/medal/form.vue')
|
||||
},
|
||||
{
|
||||
path: '/agent-allow',
|
||||
name: 'agent-allow',
|
||||
component: () => import('../views/agent-allow/index.vue')
|
||||
},
|
||||
{
|
||||
path: '/agent-allow-form',
|
||||
name: 'agent-allow-form',
|
||||
component: () => import('../views/agent-allow/form.vue')
|
||||
},
|
||||
{
|
||||
path: '/agent-deny',
|
||||
name: 'agent-deny',
|
||||
component: () => import('../views/agent-deny/index.vue')
|
||||
},
|
||||
{
|
||||
path: '/agent-deny-form',
|
||||
name: 'agent-deny-form',
|
||||
component: () => import('../views/agent-deny/form.vue')
|
||||
},
|
||||
{
|
||||
path: '/setting',
|
||||
name: 'setting',
|
||||
|
||||
Vendored
+1
@@ -1,6 +1,7 @@
|
||||
.nexus-table-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.nexus-help-text {
|
||||
color: #aaa;
|
||||
|
||||
Vendored
+27
-5
@@ -7,22 +7,44 @@ const api = {
|
||||
logout: (params = {}) => {
|
||||
return axios.post('logout');
|
||||
},
|
||||
listAllowAgent: (params = {}) => {
|
||||
listAgentAllow: (params = {}) => {
|
||||
return axios.get('agent-allows', {params: params});
|
||||
},
|
||||
storeAllowAgent: (params = {}) => {
|
||||
listAllAgentAllow: (params = {}) => {
|
||||
return axios.get('all-agent-allows', {params: params});
|
||||
},
|
||||
storeAgentAllow: (params = {}) => {
|
||||
return axios.post('agent-allows', params);
|
||||
},
|
||||
updateAllowAgent: (id, params = {}) => {
|
||||
updateAgentAllow: (id, params = {}) => {
|
||||
return axios.put('agent-allows/' + id, params);
|
||||
},
|
||||
getAllowAgent: (id) => {
|
||||
getAgentAllow: (id) => {
|
||||
return axios.get('agent-allows/' + id);
|
||||
},
|
||||
deleteAllowAgent: (id) => {
|
||||
deleteAgentAllow: (id) => {
|
||||
return axios.delete('agent-allows/' + id);
|
||||
},
|
||||
|
||||
listAgentDeny: (params = {}) => {
|
||||
return axios.get('agent-denies', {params: params});
|
||||
},
|
||||
storeAgentDeny: (params = {}) => {
|
||||
return axios.post('agent-denies', params);
|
||||
},
|
||||
updateAgentDeny: (id, params = {}) => {
|
||||
return axios.put('agent-denies/' + id, params);
|
||||
},
|
||||
getAgentDeny: (id) => {
|
||||
return axios.get('agent-denies/' + id);
|
||||
},
|
||||
deleteAgentDeny: (id) => {
|
||||
return axios.delete('agent-denies/' + id);
|
||||
},
|
||||
checkAgent: (params = {}) => {
|
||||
return axios.post('agent-check', params);
|
||||
},
|
||||
|
||||
listUser: (params = {}) => {
|
||||
return axios.get('users', {params: params});
|
||||
},
|
||||
|
||||
Vendored
+2
@@ -40,6 +40,8 @@ export const pathMap = {
|
||||
account: '修改账户',
|
||||
'agent-allow': 'Agent allow',
|
||||
'agent-allow-form': 'Agent allow form',
|
||||
'agent-deny': 'Agent deny',
|
||||
'agent-deny-form': 'Agent deny form',
|
||||
'user': 'User',
|
||||
'user-form': 'User form',
|
||||
'user-detail': 'User detail',
|
||||
|
||||
Vendored
+1
-1
@@ -6,7 +6,7 @@ const useTable = () => {
|
||||
query: {
|
||||
page: 1,
|
||||
sort_field: 'id',
|
||||
sort_type: 'desc'
|
||||
sort_type: 'desc',
|
||||
},
|
||||
tableData: [],
|
||||
multipleSelection: [],
|
||||
|
||||
@@ -0,0 +1,78 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
title="Check client is allowed or not"
|
||||
v-model="visible"
|
||||
center
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<el-form
|
||||
:model="formData"
|
||||
label-width="100px"
|
||||
v-loading="loading"
|
||||
ref="formRef"
|
||||
:rules="rules">
|
||||
<el-form-item label="Peer id" prop="peer_id">
|
||||
<el-input type="text" v-model="formData.peer_id"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="Agent" prop="agent">
|
||||
<el-input type="text" v-model="formData.agent"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="visible = false">Cancel</el-button>
|
||||
<el-button type="primary" @click="handleSubmit">Check</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { onMounted, reactive, ref, toRefs } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import {useRoute, useRouter} from 'vue-router'
|
||||
import api from '../../utils/api'
|
||||
|
||||
export default {
|
||||
name: "DialogCheck",
|
||||
props: {
|
||||
reload: Function
|
||||
},
|
||||
setup(props, context) {
|
||||
const formRef = ref(null)
|
||||
const state = reactive({
|
||||
loading: false,
|
||||
visible: false,
|
||||
result: '',
|
||||
formData: {
|
||||
peer_id: '',
|
||||
agent: '',
|
||||
},
|
||||
rules: {
|
||||
peer_id: [{ required: 'true'}],
|
||||
agent: [{ required: 'true'}]
|
||||
}
|
||||
})
|
||||
const open = (uid) => {
|
||||
state.formData.uid = uid
|
||||
state.visible = true
|
||||
|
||||
}
|
||||
const handleSubmit = () => {
|
||||
formRef.value.validate(async (valid) => {
|
||||
if (valid) {
|
||||
let res = await api.checkAgent(state.formData)
|
||||
ElMessage.success(res.msg)
|
||||
}
|
||||
})
|
||||
}
|
||||
return {
|
||||
...toRefs(state),
|
||||
handleSubmit,
|
||||
formRef,
|
||||
open,
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,3 +1,199 @@
|
||||
<template>
|
||||
<div>Agent Allow Form</div>
|
||||
<div>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form :model="formData" :rules="rules" ref="formRef" label-width="200px" class="formData">
|
||||
<el-form-item label="Family" prop="family">
|
||||
<el-input v-model="formData.family" placeholder=""></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="Start name" prop="start_name">
|
||||
<el-input v-model="formData.start_name" placeholder=""></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="Peer id start" prop="peer_id_start">
|
||||
<el-input v-model="formData.peer_id_start" placeholder=""></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="Peer id pattern" prop="peer_id_pattern">
|
||||
<el-input v-model="formData.peer_id_pattern" placeholder=""></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="Peer id match num" prop="peer_id_match_num">
|
||||
<el-input v-model="formData.peer_id_match_num" placeholder="" type="number"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="Peer id match type" prop="peer_id_matchtype">
|
||||
<el-radio-group v-model="formData.peer_id_matchtype">
|
||||
<el-radio label="dec">dec</el-radio>
|
||||
<el-radio label="hex">hex</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="Agent start" prop="agent_start">
|
||||
<el-input v-model="formData.agent_start" placeholder=""></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="Agent pattern" prop="agent_pattern">
|
||||
<el-input v-model="formData.agent_pattern" placeholder=""></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="Agent match num" prop="agent_match_num">
|
||||
<el-input v-model="formData.agent_match_num" placeholder="" type="number"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="Agent match type" prop="agent_matchtype">
|
||||
<el-radio-group v-model="formData.agent_matchtype">
|
||||
<el-radio label="dec">dec</el-radio>
|
||||
<el-radio label="hex">hex</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="Exception" prop="exception">
|
||||
<el-radio-group v-model="formData.exception">
|
||||
<el-radio label="yes">Yes</el-radio>
|
||||
<el-radio label="no">No</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="Allow https" prop="allowhttps">
|
||||
<el-radio-group v-model="formData.allowhttps">
|
||||
<el-radio label="yes">Yes</el-radio>
|
||||
<el-radio label="no">No</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="Comment" prop="comment">
|
||||
<el-input type="textarea" v-model="formData.comment" placeholder=""></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitAdd()">Submit</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { reactive, ref, toRefs, onMounted, onBeforeUnmount, getCurrentInstance } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { localGet } from '../../utils'
|
||||
import api from "../../utils/api";
|
||||
|
||||
export default {
|
||||
name: 'AgentAllowForm',
|
||||
setup() {
|
||||
const { proxy } = getCurrentInstance()
|
||||
console.log('proxy', proxy)
|
||||
const formRef = ref(null)
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const { id } = route.query
|
||||
const state = reactive({
|
||||
token: localGet('token') || '',
|
||||
id: id,
|
||||
allClasses: [],
|
||||
formData: {
|
||||
family: '',
|
||||
start_name: '',
|
||||
peer_id_pattern: '',
|
||||
peer_id_match_num: '',
|
||||
peer_id_matchtype: '',
|
||||
peer_id_start: '',
|
||||
agent_pattern: '',
|
||||
agent_match_num: '',
|
||||
agent_matchtype: '',
|
||||
agent_start: '',
|
||||
exception: '',
|
||||
allowhttps: '',
|
||||
comment: '',
|
||||
},
|
||||
rules: {
|
||||
family: [
|
||||
{ required: 'true', }
|
||||
],
|
||||
start_name: [
|
||||
{ required: 'true', }
|
||||
],
|
||||
peer_id_pattern: [
|
||||
{ required: 'true', }
|
||||
],
|
||||
peer_id_match_num: [
|
||||
{ required: 'true', }
|
||||
],
|
||||
peer_id_matchtype: [
|
||||
{ required: 'true', }
|
||||
],
|
||||
peer_id_start: [
|
||||
{required: 'true'}
|
||||
],
|
||||
agent_pattern: [
|
||||
{required: 'true'}
|
||||
],
|
||||
agent_match_num: [
|
||||
{required: 'true'}
|
||||
],
|
||||
agent_matchtype: [
|
||||
{required: 'true'}
|
||||
],
|
||||
agent_start: [
|
||||
{required: 'true'}
|
||||
],
|
||||
exception: [
|
||||
{required: 'true'}
|
||||
],
|
||||
allowhttps: [
|
||||
{required: 'true'}
|
||||
],
|
||||
},
|
||||
})
|
||||
onMounted( async () => {
|
||||
if (id) {
|
||||
api.getAgentAllow(id).then(res => {
|
||||
state.formData.family = res.data.family
|
||||
state.formData.start_name = res.data.start_name
|
||||
|
||||
state.formData.peer_id_pattern = res.data.peer_id_pattern
|
||||
state.formData.peer_id_match_num = res.data.peer_id_match_num
|
||||
state.formData.peer_id_matchtype = res.data.peer_id_matchtype
|
||||
state.formData.peer_id_start = res.data.peer_id_start
|
||||
|
||||
state.formData.agent_pattern = res.data.agent_pattern
|
||||
state.formData.agent_match_num = res.data.agent_match_num
|
||||
state.formData.agent_matchtype = res.data.agent_matchtype
|
||||
state.formData.agent_start = res.data.agent_start
|
||||
|
||||
state.formData.exception = res.data.exception
|
||||
state.formData.allowhttps = res.data.allowhttps
|
||||
state.formData.comment = res.data.comment
|
||||
})
|
||||
}
|
||||
})
|
||||
onBeforeUnmount(() => {
|
||||
|
||||
})
|
||||
const submitAdd = () => {
|
||||
formRef.value.validate(async (vaild) => {
|
||||
if (vaild) {
|
||||
let params = state.formData;
|
||||
console.log(params)
|
||||
if (id) {
|
||||
await api.updateAgentAllow(id, params)
|
||||
} else {
|
||||
await api.storeAgentAllow(params)
|
||||
}
|
||||
await router.push({name: 'agent-allow'})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const getAgentAllow = async (id) => {
|
||||
let res = await api.getAgentAllow(id)
|
||||
console.log(res)
|
||||
}
|
||||
return {
|
||||
...toRefs(state),
|
||||
formRef,
|
||||
submitAdd,
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
||||
@@ -1,3 +1,198 @@
|
||||
<template>
|
||||
<div>Agent Allow Index</div>
|
||||
<el-card class="">
|
||||
<template #header>
|
||||
<div class="nexus-table-header">
|
||||
<div class="left">
|
||||
<el-form :inline="true" :model="query">
|
||||
<el-form-item label="">
|
||||
<el-input placeholder="Family" v-model="query.family"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleReset">Reset</el-button>
|
||||
<el-button type="primary" @click="fetchTableData">Query</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="right">
|
||||
<el-button type="primary" icon="Check" @click="handleCheck">Check</el-button>
|
||||
<el-button type="primary" icon="Plus" @click="handleAdd">Add</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
ref="multipleTable"
|
||||
:data="tableData"
|
||||
tooltip-effect="dark"
|
||||
@selection-change="handleSelectionChange">
|
||||
<el-table-column
|
||||
type="selection"
|
||||
width="55">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="id"
|
||||
label="Id"
|
||||
width="50"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="family"
|
||||
label="Family"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="start_name"
|
||||
label="Start name"
|
||||
>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
prop="peer_id_start"
|
||||
label="Peer id start"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="peer_id_pattern"
|
||||
label="Peer id pattern"
|
||||
></el-table-column>
|
||||
<!-- <el-table-column-->
|
||||
<!-- prop="peer_id_match_num"-->
|
||||
<!-- label="Peer id match num"-->
|
||||
<!-- ></el-table-column>-->
|
||||
<!-- <el-table-column-->
|
||||
<!-- prop="peer_id_matchtype"-->
|
||||
<!-- label="Peer id match type"-->
|
||||
<!-- ></el-table-column>-->
|
||||
|
||||
<el-table-column
|
||||
prop="agent_start"
|
||||
label="Agent start"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="agent_pattern"
|
||||
label="Agent pattern"
|
||||
></el-table-column>
|
||||
<!-- <el-table-column-->
|
||||
<!-- prop="agent_match_num"-->
|
||||
<!-- label="Agent match num"-->
|
||||
<!-- ></el-table-column>-->
|
||||
<!-- <el-table-column-->
|
||||
<!-- prop="agent_matchtype"-->
|
||||
<!-- label="Agent match type"-->
|
||||
<!-- ></el-table-column>-->
|
||||
|
||||
|
||||
|
||||
<el-table-column
|
||||
label="Action"
|
||||
width="120"
|
||||
>
|
||||
<template #default="scope">
|
||||
<a style="cursor: pointer; margin-right: 10px" @click="handleEdit(scope.row.id)">Edit</a>
|
||||
<el-popconfirm
|
||||
title="Confirm Delete ?"
|
||||
@confirm="handleDelete(scope.row.id)"
|
||||
>
|
||||
<template #reference>
|
||||
<a style="cursor: pointer">Delete</a>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!--总数超过一页，再展示分页器-->
|
||||
<el-pagination
|
||||
background
|
||||
layout="prev, pager, next"
|
||||
:total="total"
|
||||
:page-size="perPage"
|
||||
:current-page="currentPage"
|
||||
@current-change="changePage"
|
||||
/>
|
||||
</el-card>
|
||||
<DialogCheck ref="refDialogCheck" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { onMounted, reactive, ref, toRefs } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { useRouter } from 'vue-router'
|
||||
import api from '../../utils/api'
|
||||
import { useTable, renderTableData } from '../../utils/table'
|
||||
import DialogCheck from "../agent-allow/dialog-check.vue"
|
||||
|
||||
|
||||
export default {
|
||||
name: 'ClientTable',
|
||||
components: {
|
||||
DialogCheck,
|
||||
},
|
||||
setup() {
|
||||
const multipleTable = ref(null)
|
||||
const router = useRouter()
|
||||
|
||||
const state = useTable()
|
||||
const refDialogCheck = ref(null)
|
||||
|
||||
onMounted(() => {
|
||||
console.log('MedalTable onMounted')
|
||||
fetchTableData()
|
||||
})
|
||||
const fetchTableData = async () => {
|
||||
state.loading = true
|
||||
let res = await api.listAgentAllow(state.query)
|
||||
renderTableData(res, state)
|
||||
state.loading = false
|
||||
}
|
||||
const handleAdd = () => {
|
||||
router.push({ name: 'agent-allow-form' })
|
||||
}
|
||||
const handleEdit = (id) => {
|
||||
router.push({ path: '/agent-allow-form', query: { id } })
|
||||
}
|
||||
const handleDelete = async (id) => {
|
||||
let res = await api.deleteAgentAllow(id)
|
||||
ElMessage.success(res.msg)
|
||||
state.query.page = 1;
|
||||
await fetchTableData()
|
||||
}
|
||||
const handleSelectionChange = (val) => {
|
||||
state.multipleSelection = val
|
||||
}
|
||||
const changePage = (val) => {
|
||||
state.query.page = val
|
||||
fetchTableData()
|
||||
}
|
||||
const handleReset = () => {
|
||||
state.query.family = '';
|
||||
}
|
||||
|
||||
const handleCheck = () => {
|
||||
refDialogCheck.value.open()
|
||||
}
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
multipleTable,
|
||||
handleSelectionChange,
|
||||
handleAdd,
|
||||
handleEdit,
|
||||
handleDelete,
|
||||
fetchTableData,
|
||||
changePage,
|
||||
handleReset,
|
||||
handleCheck,
|
||||
refDialogCheck
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.swiper-container {
|
||||
min-height: 100%;
|
||||
}
|
||||
.el-card.is-always-shadow {
|
||||
min-height: 100%!important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,133 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form :model="formData" :rules="rules" ref="formRef" label-width="200px" class="formData">
|
||||
<el-form-item label="Family" prop="family_id">
|
||||
<el-select v-model="formData.family_id" filterable>
|
||||
<el-option
|
||||
v-for="item in agentAllows"
|
||||
:key="item.id"
|
||||
:label="item.family"
|
||||
:value="item.id"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="Name" prop="name">
|
||||
<el-input v-model="formData.name" placeholder=""></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="Peer id" prop="peer_id">
|
||||
<el-input v-model="formData.peer_id" placeholder=""></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="Agent" prop="agent">
|
||||
<el-input v-model="formData.agent" placeholder=""></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="Comment" prop="comment">
|
||||
<el-input type="textarea" v-model="formData.comment" placeholder=""></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitAdd()">Submit</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { reactive, ref, toRefs, onMounted, onBeforeUnmount, getCurrentInstance } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { localGet } from '../../utils'
|
||||
import api from "../../utils/api";
|
||||
|
||||
export default {
|
||||
name: 'AgentAllowForm',
|
||||
setup() {
|
||||
const { proxy } = getCurrentInstance()
|
||||
console.log('proxy', proxy)
|
||||
const formRef = ref(null)
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const { id } = route.query
|
||||
const state = reactive({
|
||||
token: localGet('token') || '',
|
||||
id: id,
|
||||
agentAllows: [],
|
||||
formData: {
|
||||
family_id: '',
|
||||
name: '',
|
||||
peer_id: '',
|
||||
agent: '',
|
||||
comment: '',
|
||||
},
|
||||
rules: {
|
||||
family_id: [
|
||||
{ required: 'true', }
|
||||
],
|
||||
name: [
|
||||
{ required: 'true', }
|
||||
],
|
||||
peer_id: [
|
||||
{ required: 'true', }
|
||||
],
|
||||
agent: [
|
||||
{ required: 'true', }
|
||||
],
|
||||
},
|
||||
})
|
||||
onMounted( async () => {
|
||||
await listAgentAllows()
|
||||
if (id) {
|
||||
api.getAgentDeny(id).then(res => {
|
||||
state.formData.family_id = res.data.family_id
|
||||
state.formData.name = res.data.name
|
||||
|
||||
state.formData.peer_id = res.data.peer_id
|
||||
state.formData.agent = res.data.agent
|
||||
state.formData.comment = res.data.comment
|
||||
})
|
||||
}
|
||||
})
|
||||
onBeforeUnmount(() => {
|
||||
|
||||
})
|
||||
const submitAdd = () => {
|
||||
formRef.value.validate(async (vaild) => {
|
||||
if (vaild) {
|
||||
let params = state.formData;
|
||||
console.log(params)
|
||||
if (id) {
|
||||
await api.updateAgentDeny(id, params)
|
||||
} else {
|
||||
await api.storeAgentDeny(params)
|
||||
}
|
||||
await router.push({name: 'agent-deny'})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const listAgentAllows = async () => {
|
||||
let res = await api.listAllAgentAllow()
|
||||
state.agentAllows = res.data
|
||||
}
|
||||
|
||||
const getAgentAllow = async (id) => {
|
||||
let res = await api.getAgentAllow(id)
|
||||
console.log(res)
|
||||
}
|
||||
return {
|
||||
...toRefs(state),
|
||||
formRef,
|
||||
submitAdd,
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,181 @@
|
||||
<template>
|
||||
<el-card class="">
|
||||
<template #header>
|
||||
<div class="nexus-table-header">
|
||||
<div class="left">
|
||||
<el-form :inline="true" :model="query">
|
||||
<el-form-item label="">
|
||||
<el-select v-model="query.family_id" filterable placeholder="Family">
|
||||
<el-option
|
||||
v-for="item in extraData.agentAllows"
|
||||
:key="item.id"
|
||||
:label="item.family"
|
||||
:value="item.id"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleReset">Reset</el-button>
|
||||
<el-button type="primary" @click="fetchTableData">Query</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="right">
|
||||
<el-button type="primary" icon="Plus" @click="handleAdd">Add</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
ref="multipleTable"
|
||||
:data="tableData"
|
||||
tooltip-effect="dark"
|
||||
@selection-change="handleSelectionChange">
|
||||
<el-table-column
|
||||
type="selection"
|
||||
width="55">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="id"
|
||||
label="Id"
|
||||
width="50"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="family_id"
|
||||
label="Family"
|
||||
:formatter="formatColumnFamilyId"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="Name"
|
||||
>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
prop="peer_id"
|
||||
label="Peer id"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="agent"
|
||||
label="Agent"
|
||||
></el-table-column>
|
||||
|
||||
<el-table-column
|
||||
label="Action"
|
||||
width="120"
|
||||
>
|
||||
<template #default="scope">
|
||||
<a style="cursor: pointer; margin-right: 10px" @click="handleEdit(scope.row.id)">Edit</a>
|
||||
<el-popconfirm
|
||||
title="Confirm Delete ?"
|
||||
@confirm="handleDelete(scope.row.id)"
|
||||
>
|
||||
<template #reference>
|
||||
<a style="cursor: pointer">Delete</a>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!--总数超过一页，再展示分页器-->
|
||||
<el-pagination
|
||||
background
|
||||
layout="prev, pager, next"
|
||||
:total="total"
|
||||
:page-size="perPage"
|
||||
:current-page="currentPage"
|
||||
@current-change="changePage"
|
||||
/>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { onMounted, reactive, ref, toRefs } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { useRouter } from 'vue-router'
|
||||
import api from '../../utils/api'
|
||||
import { useTable, renderTableData } from '../../utils/table'
|
||||
|
||||
export default {
|
||||
name: 'ClientTable',
|
||||
setup() {
|
||||
const multipleTable = ref(null)
|
||||
const router = useRouter()
|
||||
|
||||
const state = useTable()
|
||||
let extraData = reactive({
|
||||
agentAllows: []
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
console.log('MedalTable onMounted')
|
||||
fetchTableData()
|
||||
})
|
||||
const fetchTableData = async () => {
|
||||
state.loading = true
|
||||
await listAgentAllows()
|
||||
let res = await api.listAgentDeny(state.query)
|
||||
renderTableData(res, state)
|
||||
state.loading = false
|
||||
}
|
||||
const handleAdd = () => {
|
||||
router.push({ name: 'agent-deny-form' })
|
||||
}
|
||||
const handleEdit = (id) => {
|
||||
router.push({ path: '/agent-deny-form', query: { id } })
|
||||
}
|
||||
const handleDelete = async (id) => {
|
||||
let res = await api.deleteAgentDeny(id)
|
||||
ElMessage.success(res.msg)
|
||||
state.query.page = 1;
|
||||
await fetchTableData()
|
||||
}
|
||||
const handleSelectionChange = (val) => {
|
||||
state.multipleSelection = val
|
||||
}
|
||||
const changePage = (val) => {
|
||||
state.query.page = val
|
||||
fetchTableData()
|
||||
}
|
||||
|
||||
const listAgentAllows = async () => {
|
||||
let res = await api.listAllAgentAllow()
|
||||
extraData.agentAllows = res.data
|
||||
}
|
||||
|
||||
const handleReset = () => {
|
||||
state.query.family_id = '';
|
||||
}
|
||||
|
||||
const formatColumnFamilyId = (row, column) => {
|
||||
return row.family.family
|
||||
}
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
extraData,
|
||||
multipleTable,
|
||||
handleSelectionChange,
|
||||
handleAdd,
|
||||
handleEdit,
|
||||
handleDelete,
|
||||
fetchTableData,
|
||||
changePage,
|
||||
handleReset,
|
||||
formatColumnFamilyId
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.swiper-container {
|
||||
min-height: 100%;
|
||||
}
|
||||
.el-card.is-always-shadow {
|
||||
min-height: 100%!important;
|
||||
}
|
||||
</style>
|
||||
@@ -3,10 +3,24 @@
|
||||
<template #header>
|
||||
<div class="nexus-table-header">
|
||||
<div class="left">
|
||||
|
||||
<el-form :inline="true" :model="query">
|
||||
<el-form-item label="">
|
||||
<el-input placeholder="ID" v-model="query.id"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="">
|
||||
<el-input placeholder="Username" v-model="query.username"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="">
|
||||
<el-input placeholder="Email" v-model="query.email"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleReset">Reset</el-button>
|
||||
<el-button type="primary" @click="fetchTableData">Query</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="right">
|
||||
<el-button type="primary" size="small" icon="Plus" @click="handleAdd">Add</el-button>
|
||||
<el-button type="primary" icon="Plus" @click="handleAdd">Add</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -26,7 +40,7 @@
|
||||
<el-table-column
|
||||
prop="id"
|
||||
label="Id"
|
||||
width="60"
|
||||
width="80"
|
||||
sortable="custom"
|
||||
></el-table-column>
|
||||
|
||||
@@ -157,6 +171,12 @@ export default {
|
||||
fetchTableData()
|
||||
}
|
||||
|
||||
const handleReset = () => {
|
||||
state.query.id = '';
|
||||
state.query.username = '';
|
||||
state.query.email = '';
|
||||
}
|
||||
|
||||
const handleDetail = (id) => {
|
||||
router.push({
|
||||
name: 'user-detail',
|
||||
@@ -187,7 +207,8 @@ export default {
|
||||
handleSortChange,
|
||||
formatColumnClass,
|
||||
formatColumnUploaded,
|
||||
formatColumnDownloaded
|
||||
formatColumnDownloaded,
|
||||
handleReset
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user