Эх сурвалжийг харах

区域管理增加平台关联,区域选项改为按平台级联选择

hechuanqi 1 сар өмнө
parent
commit
7bc5c2cd14

+ 23 - 6
src/pages/CollectionTask/index.tsx

@@ -23,6 +23,9 @@ const CollectionTask: React.FC = () => {
   const [regionOptions, setRegionOptions] = useState<
     { label: string; value: number }[]
   >([]);
+  const [selectedPlatform, setSelectedPlatform] = useState<
+    number | undefined
+  >();
 
   useEffect(() => {
     API.CollectPlatform.selectOptions().then((res: any) => {
@@ -30,13 +33,21 @@ const CollectionTask: React.FC = () => {
         setPlatformOptions(res.data || []);
       }
     });
-    API.CollectRegion.selectOptions().then((res: any) => {
-      if (res?.code === 'success') {
-        setRegionOptions(res.data || []);
-      }
-    });
   }, []);
 
+  // 当平台变化时,重新加载区域选项
+  useEffect(() => {
+    if (selectedPlatform) {
+      API.CollectRegion.selectOptions(selectedPlatform).then((res: any) => {
+        if (res?.code === 'success') {
+          setRegionOptions(res.data || []);
+        }
+      });
+    } else {
+      setRegionOptions([]);
+    }
+  }, [selectedPlatform]);
+
   const columns: ProColumns[] = [
     {
       title: '任务ID',
@@ -55,7 +66,13 @@ const CollectionTask: React.FC = () => {
       dataIndex: 'platform',
       key: 'platform',
       valueType: 'select',
-      fieldProps: { options: platformOptions },
+      fieldProps: {
+        options: platformOptions,
+        allowClear: true,
+        onChange: (val: number | undefined) => {
+          setSelectedPlatform(val);
+        },
+      },
       renderText: (_, record: any) => record?.platform_name ?? '-',
     },
     {

+ 23 - 6
src/pages/PlatformAccount/index.tsx

@@ -24,6 +24,9 @@ const PlatformAccount: React.FC = () => {
   const [regionOptions, setRegionOptions] = useState<
     { label: string; value: number }[]
   >([]);
+  const [selectedPlatform, setSelectedPlatform] = useState<
+    number | undefined
+  >();
 
   useEffect(() => {
     API.CollectPlatform.selectOptions().then((res: any) => {
@@ -31,13 +34,21 @@ const PlatformAccount: React.FC = () => {
         setPlatformOptions(res.data || []);
       }
     });
-    API.CollectRegion.selectOptions().then((res: any) => {
-      if (res?.code === 'success') {
-        setRegionOptions(res.data || []);
-      }
-    });
   }, []);
 
+  // 当平台变化时,重新加载区域选项
+  useEffect(() => {
+    if (selectedPlatform) {
+      API.CollectRegion.selectOptions(selectedPlatform).then((res: any) => {
+        if (res?.code === 'success') {
+          setRegionOptions(res.data || []);
+        }
+      });
+    } else {
+      setRegionOptions([]);
+    }
+  }, [selectedPlatform]);
+
   const columns: ProColumns[] = [
     {
       title: 'ID',
@@ -51,7 +62,13 @@ const PlatformAccount: React.FC = () => {
       dataIndex: 'platform',
       key: 'platform',
       valueType: 'select',
-      fieldProps: { options: platformOptions },
+      fieldProps: {
+        options: platformOptions,
+        allowClear: true,
+        onChange: (val: number | undefined) => {
+          setSelectedPlatform(val);
+        },
+      },
       renderText: (_, record: any) => record?.platform_name ?? '-',
     },
     {

+ 48 - 5
src/pages/RegionManage/index.tsx

@@ -8,13 +8,13 @@ import { guid } from '@/utils/utils';
 import { PlusOutlined } from '@ant-design/icons';
 import type { ActionType, ProColumns } from '@ant-design/pro-table';
 import { Button, message, Space, Typography } from 'antd';
-import React, { useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 
 /**
  * 区域管理
  * 后端接口(CollectRegionController):
- * - GET  /region/list          区域列表(可选 status 过滤)
- * - POST /region/add           新增区域(name 必填)
+ * - GET  /region/list          区域列表(可选 platform/status 过滤)
+ * - POST /region/add           新增区域(platform, name 必填)
  * - POST /region/edit          编辑区域(id 必填)
  * - POST /region/set_status    设置区域状态
  */
@@ -22,6 +22,20 @@ const RegionManage: React.FC = () => {
   const actionRef = useRef<ActionType>();
   const proTableFormRef = useRef<any>();
   const modiyFormModalRef = useRef<any>();
+  const [platformOptions, setPlatformOptions] = useState<
+    { label: string; value: number }[]
+  >([]);
+  const [selectedPlatform, setSelectedPlatform] = useState<
+    number | undefined
+  >();
+
+  useEffect(() => {
+    API.CollectPlatform.selectOptions().then((res: any) => {
+      if (res?.code === 'success') {
+        setPlatformOptions(res.data || []);
+      }
+    });
+  }, []);
 
   const modiyManage = (type: 'create' | 'update', data: any = {}) => {
     const { hide } = Modal.show({
@@ -32,6 +46,14 @@ const RegionManage: React.FC = () => {
           type={type}
           formOptions={{ labelCol: 8, labelAlign: 'right' }}
           formList={[
+            {
+              label: '所属平台',
+              isRequired: true,
+              value: 'platform',
+              type: 'select',
+              options: platformOptions,
+              disabled: type === 'update',
+            },
             {
               label: '区域名称',
               isRequired: true,
@@ -41,6 +63,7 @@ const RegionManage: React.FC = () => {
           ]}
           ref={modiyFormModalRef}
           getDetail={() => ({
+            platform: data?.platform ?? selectedPlatform,
             name: data?.name,
           })}
         />
@@ -56,6 +79,7 @@ const RegionManage: React.FC = () => {
         }
         const values = formInstance.getData();
         const payload = {
+          platform: Number(values.platform),
           name: String(values.name).trim(),
         };
         const response =
@@ -83,6 +107,24 @@ const RegionManage: React.FC = () => {
       hideInSearch: true,
       width: 80,
     },
+    {
+      title: '所属平台',
+      dataIndex: 'platform',
+      key: 'platform',
+      valueType: 'select',
+      fieldProps: {
+        options: platformOptions,
+        allowClear: true,
+        onChange: (val: number | undefined) => {
+          setSelectedPlatform(val);
+          actionRef.current?.reload();
+        },
+      },
+      renderText: (_, record: any) => {
+        const opt = platformOptions.find((o) => o.value === record?.platform);
+        return opt?.label ?? record?.platform ?? '-';
+      },
+    },
     {
       title: '区域名称',
       dataIndex: 'name',
@@ -159,7 +201,9 @@ const RegionManage: React.FC = () => {
       actionRef={actionRef}
       formRef={proTableFormRef}
       request={async (params) => {
-        const res = await API.CollectRegion.list(params);
+        const res = await API.CollectRegion.list({
+          platform: params.platform ?? selectedPlatform,
+        });
         return {
           data: res.data || [],
           total: res.data?.length || 0,
@@ -168,7 +212,6 @@ const RegionManage: React.FC = () => {
       }}
       editable={{ type: 'multiple' }}
       scroll={{ x: '120%' }}
-      noSearch
       toolbar={{
         actions: [
           <Button

+ 17 - 9
src/services/collect_region.ts

@@ -3,9 +3,9 @@ import BaseAPI from './BaseAPI';
 /**
  * 采集区域 Service
  * 后端接口(CollectRegionController):
- * - GET  /region/select_options     区域下拉选项(仅启用)
- * - GET  /region/list               区域列表(可选 status 过滤)
- * - POST /region/add                新增区域
+ * - GET  /region/select_options     区域下拉选项(仅启用,需传platform
+ * - GET  /region/list               区域列表(可选 platform/status 过滤)
+ * - POST /region/add                新增区域(需传platform)
  * - POST /region/edit               编辑区域
  * - POST /region/set_status         设置区域状态
  */
@@ -15,28 +15,36 @@ class CollectRegionAPI extends BaseAPI {
   }
 
   /** 区域下拉选项(仅启用,返回 [{value, label}]) */
-  selectOptions() {
-    return this._get({ path: `/region/select_options` }).then((data) => {
+  selectOptions(platform: number) {
+    return this._get({
+      path: `/region/select_options`,
+      data: { platform },
+    }).then((data) => {
       return data;
     });
   }
 
-  /** 查询区域列表(status 可选:0=启用,1=禁用,不传=全部) */
-  list(data?: any) {
+  /** 查询区域列表(platform/status 可选) */
+  list(data?: { platform?: number; status?: number }) {
     return this._get({ path: `/region/list`, data }).then((data) => {
       return data;
     });
   }
 
   /** 新增区域 */
-  add(data: { name: string; status?: number }) {
+  add(data: { platform: number; name: string; status?: number }) {
     return this._post({ path: `/region/add`, data }).then((data) => {
       return data;
     });
   }
 
   /** 编辑区域 */
-  edit(data: { id: number; name?: string; status?: number }) {
+  edit(data: {
+    id: number;
+    platform?: number;
+    name?: string;
+    status?: number;
+  }) {
     return this._post({ path: `/region/edit`, data }).then((data) => {
       return data;
     });