mirror of https://gitee.com/godoos/godoos.git
3 changed files with 205 additions and 83 deletions
@ -1,92 +1,157 @@ |
|||||
<script setup lang="ts"> |
<script setup lang="ts"> |
||||
import { useProxyStore } from "@/stores/proxy"; |
import { useProxyStore } from "@/stores/proxy"; |
||||
import { notifyError, notifySuccess } from "@/util/msg"; |
import { notifyError, notifySuccess } from "@/util/msg"; |
||||
import { Plus, Setting, VideoPlay, VideoPause, Money } from "@element-plus/icons-vue"; |
import { |
||||
import { onMounted } from "vue"; |
Plus, |
||||
const proxyStore = useProxyStore(); |
Setting, |
||||
const { |
VideoPause, |
||||
fetchProxies, |
VideoPlay, |
||||
fetchProxy, |
} from "@element-plus/icons-vue"; |
||||
deleteProxyById, |
import { onMounted } from "vue"; |
||||
} = proxyStore; |
const proxyStore = useProxyStore(); |
||||
|
const { fetchProxies, fetchProxy, deleteProxyById } = proxyStore; |
||||
|
|
||||
|
const editProxyBefore = async (id: number) => { |
||||
|
if (!id) { |
||||
|
notifyError("请选择要编辑的代理"); |
||||
|
return; |
||||
|
} |
||||
|
//console.log(id) |
||||
|
await fetchProxy(id); |
||||
|
proxyStore.addShow = true; |
||||
|
proxyStore.isEditor = true; |
||||
|
}; |
||||
|
|
||||
const editProxyBefore = async (id: number) => { |
const deleteProxy = async (id: number) => { |
||||
if (!id) { |
if (!id) { |
||||
notifyError("请选择要编辑的代理"); |
notifyError("请选择要删除的代理"); |
||||
return |
return; |
||||
} |
} |
||||
//console.log(id) |
const res = await deleteProxyById(id); |
||||
await fetchProxy(id); |
if (res) { |
||||
proxyStore.addShow = true; |
notifySuccess("删除成功"); |
||||
proxyStore.isEditor = true; |
} else { |
||||
}; |
notifyError("删除失败"); |
||||
|
} |
||||
const deleteProxy = async (id: number) => { |
}; |
||||
if (!id) { |
const addProxy = () => { |
||||
notifyError("请选择要删除的代理"); |
proxyStore.addShow = true; |
||||
return |
proxyStore.resetProxyData(); |
||||
} |
proxyStore.isEditor = false; |
||||
const res = await deleteProxyById(id); |
}; |
||||
if (res) { |
onMounted(async () => { |
||||
notifySuccess("删除成功"); |
await fetchProxies(); |
||||
} else { |
}); |
||||
notifyError("删除失败"); |
|
||||
} |
|
||||
}; |
|
||||
const addProxy = () => { |
|
||||
proxyStore.addShow = true; |
|
||||
proxyStore.resetProxyData(); |
|
||||
proxyStore.isEditor = false; |
|
||||
}; |
|
||||
onMounted(async () => { |
|
||||
await fetchProxies(); |
|
||||
}); |
|
||||
</script> |
</script> |
||||
|
|
||||
<template> |
<template> |
||||
<div> |
<div> |
||||
<el-row justify="end"> |
<el-row justify="end"> |
||||
<el-button :type="proxyStore.status ? 'primary' : 'success'" :icon="VideoPause" circle @click="proxyStore.stopFrpc" /> |
<el-button |
||||
<el-button :type="proxyStore.status ? 'success' : 'primary'" :icon="VideoPlay" circle @click="proxyStore.startFrpc" /> |
:type="proxyStore.status ? 'primary' : 'success'" |
||||
|
:icon="VideoPause" |
||||
<el-button type="primary" :icon="Setting" circle @click="proxyStore.settingShow = true" /> |
circle |
||||
<el-button type="primary" :icon="Plus" circle @click="addProxy" /> |
@click="proxyStore.stopFrpc" |
||||
|
/> |
||||
|
<el-button |
||||
|
:type="proxyStore.status ? 'success' : 'primary'" |
||||
|
:icon="VideoPlay" |
||||
|
circle |
||||
|
@click="proxyStore.startFrpc" |
||||
|
/> |
||||
|
|
||||
|
<el-button |
||||
|
type="primary" |
||||
|
:icon="Setting" |
||||
|
circle |
||||
|
@click="proxyStore.settingShow = true" |
||||
|
/> |
||||
|
<el-button |
||||
|
type="primary" |
||||
|
:icon="Plus" |
||||
|
circle |
||||
|
@click="addProxy" |
||||
|
/> |
||||
</el-row> |
</el-row> |
||||
<el-table :data="proxyStore.proxies" style="width: 98%; border: none"> |
<el-table |
||||
<el-table-column prop="name" label="名称" width="100" /> |
:data="proxyStore.proxies" |
||||
<el-table-column prop="type" label="类型" width="80" /> |
style="width: 98%; border: none" |
||||
<el-table-column prop="localPort" label="本地端口" width="80" /> |
> |
||||
<el-table-column prop="localIp" label="本地Ip" /> |
<el-table-column |
||||
|
prop="name" |
||||
|
label="名称" |
||||
|
width="100" |
||||
|
/> |
||||
|
<el-table-column |
||||
|
prop="type" |
||||
|
label="类型" |
||||
|
width="80" |
||||
|
/> |
||||
|
<el-table-column |
||||
|
prop="localPort" |
||||
|
label="本地端口" |
||||
|
width="80" |
||||
|
/> |
||||
|
<el-table-column |
||||
|
prop="localIp" |
||||
|
label="本地Ip" |
||||
|
/> |
||||
<el-table-column label="操作"> |
<el-table-column label="操作"> |
||||
<template #default="scope"> |
<template #default="scope"> |
||||
<el-row :gutter="24" justify="start"> |
<el-row |
||||
|
:gutter="24" |
||||
|
justify="start" |
||||
|
> |
||||
<el-col :span="10"> |
<el-col :span="10"> |
||||
<el-button size="small" @click="editProxyBefore(scope.row.id)">编辑</el-button> |
<el-button |
||||
|
size="small" |
||||
|
@click="editProxyBefore(scope.row.id)" |
||||
|
>编辑</el-button |
||||
|
> |
||||
</el-col> |
</el-col> |
||||
<el-col :span="10"> |
<el-col :span="10"> |
||||
<el-button size="small" type="danger" @click="deleteProxy(scope.row.id)">删除</el-button> |
<el-button |
||||
|
size="small" |
||||
|
type="danger" |
||||
|
@click="deleteProxy(scope.row.id)" |
||||
|
>删除</el-button |
||||
|
> |
||||
</el-col> |
</el-col> |
||||
</el-row> |
</el-row> |
||||
</template> |
</template> |
||||
</el-table-column> |
</el-table-column> |
||||
</el-table> |
</el-table> |
||||
<el-pagination v-if="proxyStore.page.total > proxyStore.page.size" layout="prev, pager, next" |
<el-pagination |
||||
:page-size="proxyStore.page.size" v-model:current-page="proxyStore.page.current" |
v-if="proxyStore.page.total > proxyStore.page.size" |
||||
:total="proxyStore.page.total" @current-change="proxyStore.pageChange" /> |
layout="prev, pager, next" |
||||
<el-drawer v-model="proxyStore.settingShow" title="编辑配置" direction="rtl" size="80%"> |
:page-size="proxyStore.page.size" |
||||
|
v-model:current-page="proxyStore.page.current" |
||||
|
:total="proxyStore.page.total" |
||||
|
@current-change="proxyStore.pageChange" |
||||
|
/> |
||||
|
<el-drawer |
||||
|
v-model="proxyStore.settingShow" |
||||
|
title="编辑配置" |
||||
|
direction="rtl" |
||||
|
size="80%" |
||||
|
> |
||||
<FrpcConfig /> |
<FrpcConfig /> |
||||
</el-drawer> |
</el-drawer> |
||||
<!-- 代理配置抽屉 --> |
<!-- 代理配置抽屉 --> |
||||
<el-drawer v-model="proxyStore.addShow" :title="proxyStore.isEditor ? '编辑代理' : '添加代理'" direction="rtl" |
<el-drawer |
||||
size="80%" @close="proxyStore.resetProxyData"> |
v-model="proxyStore.addShow" |
||||
|
:title="proxyStore.isEditor ? '编辑代理' : '添加代理'" |
||||
|
direction="rtl" |
||||
|
size="80%" |
||||
|
@close="proxyStore.resetProxyData" |
||||
|
> |
||||
<FrpcEdit /> |
<FrpcEdit /> |
||||
</el-drawer> |
</el-drawer> |
||||
</div> |
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<style scoped> |
<style scoped> |
||||
:deep(.el-drawer) { |
:deep(.el-drawer) { |
||||
width: 60% !important; |
width: 60% !important; |
||||
} |
} |
||||
</style> |
</style> |
||||
|
Loading…
Reference in new issue