admin/SEONexusAdmin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first

Browse Source
This commit is contained in:
make
2025-04-06 21:51:01 +08:00
commit 3792acd4c7
408 changed files with 42349 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
src/views/resource/endpoint/components/Drawer.vue Normal file
View File

@@ -0,0 +1,100 @@
<template>
<el-drawer v-model="drawerVisible" :destroy-on-close="true" size="720" :title="`${drawerProps.title}资源端点`">
<el-form
ref="ruleFormRef"
label-width="90px"
label-position="top"
label-suffix=" :"
:rules="rules"
:disabled="drawerProps.isView"
:model="drawerProps.row"
:hide-required-asterisk="drawerProps.isView"
>
<el-form-item label="端点名称" prop="zydd_ming_zi">
<el-input
type="text"
disabled
v-model="drawerProps.row.zydd_ming_zi"
placeholder="请输入资源访问端点域名"
clearable
/>
</el-form-item>
<el-form-item label="端点编码" prop="zydd_code">
<el-input
type="text"
disabled
v-model="drawerProps.row.zydd_code"
placeholder="请输入资源访问端点域名"
clearable
/>
</el-form-item>
<el-form-item label="端点域名" prop="zydd_domain">
<el-input type="textarea" v-model="drawerProps.row.zydd_domain" placeholder="请输入资源访问端点域名" clearable />
</el-form-item>
<!-- <el-form-item label="端点类型" prop="re_type">
<el-switch
v-model="drawerProps.row.re_type"
:active-value="`${1}`"
:inactive-value="`${0}`"
active-text="VIP"
inactive-text="普通"
/>
</el-form-item> -->
</el-form>
<template #footer>
<el-button @click="drawerVisible = false">取消</el-button>
<el-button v-show="!drawerProps.isView" type="primary" @click="handleSubmit">确定</el-button>
</template>
</el-drawer>
</template>
<script setup lang="tsx" name="Drawer">
import { ref, reactive } from "vue";
import { ElMessage, FormInstance } from "element-plus";
import { Endpoint } from "@/api/interface/system/endpoint";
const rules = reactive({
zydd_domain: [{ required: true, message: "请输入端点域名" }]
});
interface DrawerProps {
title: string;
isView: boolean;
row: Partial<Endpoint.List>;
api?: (params: any) => Promise<any>;
getTableList?: () => void;
}
const drawerVisible = ref(false);
const drawerProps = ref<DrawerProps>({
isView: false,
title: "",
row: {}
});
// 接收父组件传过来的参数
const acceptParams = (params: DrawerProps) => {
drawerProps.value = params;
drawerVisible.value = true;
};
// 提交数据（新增/编辑）
const ruleFormRef = ref<FormInstance>();
const handleSubmit = () => {
ruleFormRef.value!.validate(async valid => {
if (!valid) return;
try {
const params = { ...drawerProps.value.row };
await drawerProps.value.api!(params);
ElMessage.success({ message: `${drawerProps.value.title}资源端点成功！` });
drawerProps.value.getTableList!();
drawerVisible.value = false;
} catch (error) {
console.log(error);
}
});
};
defineExpose({
acceptParams
});
</script>

172
src/views/resource/endpoint/index.vue Normal file
View File

@@ -0,0 +1,172 @@
<template>
<div class="table-box">
<!-- <ProTable ref="proTable" highlight-current-row :columns="columns" :request-api="ListApi"> -->
<ProTable
title="端点列表"
ref="proTable"
row-key="id"
:indent="20"
:columns="columns"
:request-api="getTableList"
:init-param="initParam"
:data-callback="dataCallback"
:request-auto="true"
:search-col="{ xs: 1, sm: 1, md: 2, lg: 3, xl: 3 }"
>
<!-- 表格 header 按钮 -->
<template #tableHeader="scope">
<el-button type="primary" style="display: none" :icon="CirclePlus" @click="openDrawer('新增')">
新增资源端点
</el-button>
<el-button
style="display: none"
type="danger"
:icon="Delete"
plain
:disabled="!scope.isSelected"
@click="batchDelete(scope.selectedList)"
>
批量删除端点
</el-button>
</template>
<!-- 表格操作 -->
<template #operation="scope">
<el-button type="primary" :icon="EditPen" @click="openDrawer('编辑', scope.row)"> 编辑 </el-button>
<el-button
type="danger"
style="display: none"
v-if="scope.row.pid != 0"
link
:icon="Delete"
@click="deleteAccount(scope.row)"
>
删除
</el-button>
</template>
</ProTable>
<Drawer ref="drawerRef" />
</div>
</template>
<script lang="tsx" setup name="endpoint">
import ProTable from "@/components/ProTable/index.vue";
import { DelApi, ListApi, SaveApi } from "@/api/modules/system/endpoint";
import { reactive, ref } from "vue";
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface";
import { Endpoint } from "@/api/interface/system/endpoint";
import { CirclePlus, EditPen, Delete } from "@element-plus/icons-vue";
import Drawer from "./components/Drawer.vue";
import { useHandleData } from "@/hooks/useHandleData";
// ProTable 实例
const proTable = ref<ProTableInstance>();
const initParam = reactive({
limit: 15,
page: 1
});
const getTableList = (params: any) => {
let newParams = JSON.parse(JSON.stringify(params));
initParam.page = newParams.page;
initParam.limit = newParams.limit;
return ListApi(newParams);
};
const dataCallback = (data: any) => {
// const groupedData = groupBySgId(data.item);
// let arrNewData = [] as any;
// arrNewData = groupedData.map((item, index) => ({
// ...item,
// id: index + 1, // 这里id是从1开始计数
// pid: 0
// }));
return {
items: data.items,
limit: initParam.limit,
page: initParam.page,
total: data.total,
total_page: data.total_page
};
};
//树结构
// function groupBySgId(data) {
// const groupMap = new Map();
// data.forEach(item => {
// const { reg_id, reg_name } = item;
// if (!groupMap.has(reg_id)) {
// groupMap.set(reg_id, {
// reg_id,
// reg_name,
// re_type: 2,
// re_domain: "",
// created_at: "",
// children: []
// });
// }
// item.reg_name = "";
// groupMap.get(reg_id).children.push(item);
// });
// return Array.from(groupMap.values());
// }
// 表格配置项
const columns = reactive<ColumnProps<Endpoint.List>[]>([
{ type: "selection", fixed: "left", width: 50 },
{
prop: "key",
label: "查询关键字",
isShow: false,
search: {
el: "input"
}
},
{
prop: "zydd_id",
label: "ID",
width: 100
},
{
prop: "zydd_ming_zi",
label: "名称"
},
{
prop: "zydd_code",
label: "编码"
},
{
prop: "zydd_domain",
label: "资源访问端点域名"
},
{ prop: "operation", label: "操作", width: 230 }
]);
// 打开 drawer(新增、查看、编辑)
const drawerRef = ref<InstanceType<typeof Drawer> | null>(null);
const openDrawer = (title: string, row: Partial<Endpoint.List> = {}) => {
const params = {
title,
api: SaveApi,
getTableList: proTable.value?.getTableList,
isView: title === "查看",
row: { ...row }
};
drawerRef.value?.acceptParams(params);
};
// 删除资源端点
const deleteAccount = async (params: Endpoint.List) => {
await useHandleData(DelApi, { re_id: params.re_id }, `删除所选信息`);
proTable.value?.getTableList();
};
// 批量删除
const batchDelete = async (id: any[]) => {
const ids = id.map((item: Endpoint.List) => item.re_id);
await useHandleData(DelApi, { re_id: ids.join(",") }, "删除所选信息");
proTable.value?.clearSelection();
proTable.value?.getTableList();
};
</script>
<style></style>

87
src/views/resource/endpointGroup/components/Drawer.vue Normal file
View File

@@ -0,0 +1,87 @@
<template>
<el-drawer v-model="drawerVisible" :destroy-on-close="true" size="720px" :title="`${drawerProps.title}资源端点分组`">
<el-form
ref="ruleFormRef"
label-width="90px"
label-position="top"
label-suffix=" :"
:rules="rules"
:disabled="drawerProps.isView"
:model="drawerProps.row"
:hide-required-asterisk="drawerProps.isView"
>
<el-form-item label="分组名称" prop="reg_name">
<el-input v-model="drawerProps.row.reg_name" placeholder="请输入资源端点分组名称" clearable />
</el-form-item>
<el-form-item label="分组编码" prop="reg_code">
<el-input v-model="drawerProps.row.reg_code" placeholder="请输入资源端点分组编码" clearable />
</el-form-item>
<el-form-item label="分组描述" prop="reg_description">
<el-input
type="textarea"
v-model="drawerProps.row.reg_description"
placeholder="请输入资源端点分组描述"
clearable
/>
</el-form-item>
</el-form>
<template #footer>
<el-button @click="drawerVisible = false">取消</el-button>
<el-button v-show="!drawerProps.isView" type="primary" @click="handleSubmit">确定</el-button>
</template>
</el-drawer>
</template>
<script setup lang="tsx" name="Drawer">
import { ref, reactive } from "vue";
import { ElMessage, FormInstance } from "element-plus";
import { EndpointGroup } from "@/api/interface/system/endpointGroup";
const rules = reactive({
reg_code: [{ required: true, message: "请输入资源端点分组编码" }],
reg_name: [{ required: true, message: "请输入资源端点分组名称" }]
});
interface DrawerProps {
title: string;
isView: boolean;
row: Partial<EndpointGroup.List>;
api?: (params: any) => Promise<any>;
getTableList?: () => void;
}
const drawerVisible = ref(false);
const drawerProps = ref<DrawerProps>({
isView: false,
title: "",
row: {}
});
// 接收父组件传过来的参数
const acceptParams = (params: DrawerProps) => {
drawerProps.value = params;
drawerVisible.value = true;
};
// 提交数据（新增/编辑）
const ruleFormRef = ref<FormInstance>();
const handleSubmit = () => {
ruleFormRef.value!.validate(async valid => {
if (!valid) return;
try {
if (drawerProps.value.row.reg_description?.length == 0) {
delete drawerProps.value.row.reg_description;
}
await drawerProps.value.api!(drawerProps.value.row);
ElMessage.success({ message: `${drawerProps.value.title}资源端点分组成功！` });
drawerProps.value.getTableList!();
drawerVisible.value = false;
} catch (error) {
console.log(error);
}
});
};
defineExpose({
acceptParams
});
</script>

127
src/views/resource/endpointGroup/index.vue Normal file
View File

@@ -0,0 +1,127 @@
<template>
<div class="table-box">
<ProTable ref="proTable" highlight-current-row :columns="columns" :request-api="ListApi">
<!-- 表格 header 按钮 -->
<template #tableHeader="scope">
<el-button type="primary" :icon="CirclePlus" @click="openDrawer('新增')">新增资源端点分组</el-button>
<el-button
type="danger"
:icon="Delete"
plain
:disabled="!scope.isSelected"
@click="batchDelete(scope.selectedList)"
>
批量删除端点分组
</el-button>
</template>
<!-- 表格操作 -->
<template #operation="scope">
<el-button type="primary" link :icon="EditPen" @click="openDrawer('编辑', scope.row)">编辑</el-button>
<el-button type="danger" link :icon="Delete" @click="deleteAccount(scope.row)">删除</el-button>
</template>
</ProTable>
<Drawer ref="drawerRef" />
</div>
</template>
<script lang="tsx" setup name="endpointGroup">
import { EndpointGroup } from "@/api/interface/system/endpointGroup";
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface";
import { reactive, ref } from "vue";
import { DelApi, ListApi, SaveApi } from "@/api/modules/system/endpointGroup";
import { CirclePlus, EditPen, Delete } from "@element-plus/icons-vue";
import Drawer from "./components/Drawer.vue";
import { useHandleData } from "@/hooks/useHandleData";
// import { useRouter } from "vue-router";
// const router = useRouter();
// ProTable 实例
const proTable = ref<ProTableInstance>();
// eslint-disable-next-line @typescript-eslint/no-unused-vars
// let index = 0;
// 表格配置项
const columns = reactive<ColumnProps<EndpointGroup.List>[]>([
{ type: "selection", fixed: "left", width: 50 },
{
prop: "reg_name",
label: "查询关键字",
isShow: false,
search: {
el: "input"
}
},
{
prop: "reg_id",
label: "ID",
width: 100
},
// {
// prop: "reg_id",
// label: "端点列表跳转",
// width: 120,
// render(scope) {
// if (scope.row.reg_id) {
// const data = scope.row.reg_id;
// return (
// <el-tag onClick={() => JumpFum(data)} style="cursor:pointer;">
// 点击跳转
// </el-tag>
// );
// }
// }
// },
{
prop: "reg_name",
label: "端点分组名称"
},
{
prop: "reg_code",
label: "端点分组编码"
},
{
prop: "reg_description",
label: "描述"
},
{
prop: "created_at",
label: "添加时间"
},
{ prop: "operation", label: "操作", width: 230 }
]);
// 打开 drawer(新增、查看、编辑)
const drawerRef = ref<InstanceType<typeof Drawer> | null>(null);
const openDrawer = (title: string, row: Partial<EndpointGroup.List> = {}) => {
const params = {
title,
api: SaveApi,
getTableList: proTable.value?.getTableList,
isView: title === "查看",
row: { ...row }
};
drawerRef.value?.acceptParams(params);
};
// 删除资源端点分组
const deleteAccount = async (params: EndpointGroup.List) => {
await useHandleData(DelApi, { reg_id: params.reg_id }, `删除【${params.reg_name}】的资源端点分组`);
proTable.value?.getTableList();
};
// 批量删除
const batchDelete = async (id: any[]) => {
const ids = id.map((item: EndpointGroup.List) => item.reg_id);
await useHandleData(DelApi, { reg_id: ids.join(",") }, "删除所选信息");
proTable.value?.clearSelection();
proTable.value?.getTableList();
};
// const JumpFum = val => {
// index++;
// let Data = {
// id: val
// };
// router.push({ path: "/resource/endpoint/list", query: Data });
// };
</script>
<style></style>