5.0

sop-admin/sop-admin-frontend/src/components/ApiSelect/index.ts

@@ -1,14 +1,61 @@
 import { ref } from "vue";
-import { type PlusColumn } from "plus-pro-components";
+import { type PlusColumn, useTable } from "plus-pro-components";
 import { withInstall } from "@pureadmin/utils";
 import apiSelect from "./index.vue";
 import { StatusEnum } from "@/model/enums";
+import { api as serveApi } from "@/api/serveApi";
 
 export const dlgApiSelectShow = ref(false);
 export const dlgWidth = ref(1100);
+export const handleSaveApi = ref((_: Array<number>) => {});
+
+// ========= search form =========
+
+// 查询表单对象
+export const searchFormData = ref({
+  apiName: "",
+  status: "",
+  pageIndex: 1,
+  pageSize: 999999
+});
+
+// 查询表单字段定义
+export const searchFormColumns: PlusColumn[] = [
+  {
+    label: "接口名称",
+    prop: "apiName"
+  },
+  {
+    label: "状态",
+    prop: "status",
+    width: 80,
+    valueType: "select",
+    options: [
+      {
+        label: "启用",
+        value: StatusEnum.ENABLE,
+        color: "green"
+      },
+      {
+        label: "禁用",
+        value: StatusEnum.DISABLE,
+        color: "red"
+      }
+    ]
+  }
+];
 
 // ========= table =========
 
+// 表格对象
+export const { tableData } = useTable<any[]>();
+
+interface TableRow {
+  id: number;
+}
+
+const multipleSelection = ref<TableRow[]>([]);
+export const selectable = (row: any) => row.status === StatusEnum.ENABLE;
 // 表格字段定义
 export const tableColumns: PlusColumn[] = [
   {
@@ -75,10 +122,56 @@ export const tableColumns: PlusColumn[] = [
   }
 ];
 
-export const handleConfirm = () => {
-  console.log(1);
+export const handleAuthApi = apiList => {
+  dlgApiSelectShow.value = true;
+  const arr = [];
+  for (let apiId of apiList) {
+    for (let row of tableData.value) {
+      if (apiId === row.id) {
+        arr.push(row);
+      }
+    }
+  }
+  multipleSelection.value = arr;
+  console.log(arr);
 };
 
+export const handleConfirm = () => {
+  const idList = multipleSelection.value.map(row => row.id);
+  handleSaveApi.value(idList);
+};
+
+export const handleClose = () => {
+  dlgApiSelectShow.value = false;
+};
+
+export const handleSelectionChange = (rows: TableRow[]) => {
+  console.log(rows);
+  multipleSelection.value = rows;
+};
+
+// 点击查询按钮
+export const handleSearch = () => {
+  search();
+};
+
+// 查询
+export const search = async () => {
+  try {
+    const { data } = await doSearch();
+    tableData.value = data;
+  } catch (error) {}
+};
+// 请求接口
+const doSearch = async () => {
+  // 查询参数
+  const data = searchFormData.value;
+  return serveApi.listAll(data);
+};
+
+// 页面加载
+search();
+
 const ApiSelect = withInstall(apiSelect);
 
 export { ApiSelect };