first

src/views/resource/endpoint/index.vue

@@ -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>