debug
This commit is contained in:
Your Name
@@ -1,172 +1,31 @@
|
||||
<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 class="module-unavailable">
|
||||
<el-alert
|
||||
title="资源端点模块未部署到当前 Linux 测试服"
|
||||
type="warning"
|
||||
:closable="false"
|
||||
show-icon
|
||||
/>
|
||||
<el-card class="module-unavailable__card" shadow="never">
|
||||
<p>当前端点页混用了 `/system/zydd/*` 和 `/admin/resource/endpoint/*` 旧链路，测试服带真实 `admin-token` 访问也会直接返回控制器不存在。</p>
|
||||
<p>本页先收为说明态，避免继续暴露端点列表、编辑和删除这些无法真实联调的历史能力。</p>
|
||||
<p>如果后续补齐资源端点后端，再恢复当前列表页和抽屉。</p>
|
||||
</el-card>
|
||||
</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";
|
||||
<style scoped lang="scss">
|
||||
.module-unavailable {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
// ProTable 实例
|
||||
const proTable = ref<ProTableInstance>();
|
||||
.module-unavailable__card {
|
||||
color: var(--el-text-color-regular);
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
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>
|
||||
.module-unavailable__card p {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user