From 8a7e264cac2ec2db65b2ee8f7b6e17627ba6d3e9 Mon Sep 17 00:00:00 2001
From: Bruce CHEN <805899926@qq.com>
Date: Fri, 8 Mar 2024 12:34:36 +0800
Subject: [PATCH] #

---
 src/layout/Header.tsx          |  2 +-
 src/view/cf-best/cdn/index.tsx | 38 +++++++++++++++-------------------
 2 files changed, 18 insertions(+), 22 deletions(-)

diff --git a/src/layout/Header.tsx b/src/layout/Header.tsx
index 32f6ebf..384f665 100644
--- a/src/layout/Header.tsx
+++ b/src/layout/Header.tsx
@@ -7,7 +7,7 @@ import menus, {MenuModel} from "@/menu";
 
 function recursiveMenu(menus: MenuModel[], parentKey?: string) {
     return menus.map((t: MenuModel, i: number) => {
-        const key = parentKey ? `${parentKey}-${i}` : `${i}`
+        let key = parentKey ? `${parentKey}-${i}` : `${i}`
         if (t.children) {
             return (
                 <Menu.SubMenu
diff --git a/src/view/cf-best/cdn/index.tsx b/src/view/cf-best/cdn/index.tsx
index f61df1a..28023eb 100644
--- a/src/view/cf-best/cdn/index.tsx
+++ b/src/view/cf-best/cdn/index.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import stub from "@/init"
-import {Button, Form, Table, TreeSelect} from "antd";
+import {Button, Cascader, Form, Table} from "antd";
 
 const columns = [
     {
@@ -40,9 +40,7 @@ const columns = [
     },
 ];
 
-const locationOnChange = (value: any, label: any, extra: any) => {
-    console.log(extra)
-}
+
 const CFBestCDN: React.FC = () => {
 
     const [data, setData] = stub.ref.react.useState<any>({})
@@ -51,11 +49,10 @@ const CFBestCDN: React.FC = () => {
 
     stub.ref.react.useEffect(() => {
         stub.api.get("cf-best/cdn/countryTree").then((t: any) => setCountryTree(t.data.data))
-        handleSearch(query)
-    }, [query])
+        handleSearch()
+    }, [])
 
-    const handleSearch = (q?: any) => {
-        setQuery(q)
+    const handleSearch = (q: {} = query) => {
         stub.api.post("cf-best/cdn/page", stub.ref.lodash.omit(q, "total")).then((t: any) => setData(t.data.data))
     }
     const [filter] = stub.ref.antd.Form.useForm();
@@ -67,32 +64,31 @@ const CFBestCDN: React.FC = () => {
                 autoComplete="off"
                 layout={"inline"}
             >
-                <Form.Item label={"位置"} name={"location"} style={{width: "20%"}}>
-                    <TreeSelect
-                        showSearch
-                        dropdownStyle={{maxHeight: 400, overflow: 'auto'}}
-                        allowClear
-                        treeCheckable
-                        showCheckedStrategy={"SHOW_PARENT"}
-                        onChange={locationOnChange}
-                        treeData={countryTree}
+                <Form.Item label={"位置"} name={"locations"} style={{width: "20%"}}>
+                    <Cascader
+                        options={countryTree}
+                        multiple
+                        onChange={(value: any) => setQuery({...query, "locations": value})}
                     />
                 </Form.Item>
                 <Form.Item>
-                    <Button type="primary" onClick={() => {
-                        console.log(filter.getFieldValue("location"))
-                    }}>
+                    <Button type="primary" onClick={() => handleSearch()}>
                         查询
                     </Button>
                 </Form.Item>
             </Form>
             <Table dataSource={data.list} columns={columns}
+                   rowKey={(r: any) => r.id}
                    pagination={{
                        total: data.total,
                        current: data.page,
                        pageSize: data.pageSize,
                        showTotal: ((total: number, range: [number, number]) => `第 ${range[0]}-${range[1]} 条/总共 ${total} 条`),
-                       onChange: (page, pageSize) => setQuery({...query, "page": page, "pageSize": pageSize})
+                       onChange: (page, pageSize) => {
+                           const q = {...query, "page": page, "pageSize": pageSize}
+                           setQuery(q)
+                           handleSearch(q)
+                       }
                    }}
             />
         </div>