添加城市地区缓存

video-gen-app/src/pages/PreTest.tsx

@@ -148,6 +148,8 @@ const PreTest: React.FC = () => {
   const [pageSize, setPageSize] = useState(10);
   const [platform, setPlatform] = useState<string>('AD');
   const [areaOptions, setAreaOptions] = useState<any[]>([]);
+  const [cityCodeMap, setCityCodeMap] = useState<Record<string, string>>({});
+  const [provinceCityMap, setProvinceCityMap] = useState<Record<string, string[]>>({});
 
   useEffect(() => {
     loadRecords();
@@ -174,20 +176,66 @@ const PreTest: React.FC = () => {
 
   const loadProvinceOptions = async () => {
     try {
+      const cachedData = localStorage.getItem('preTestAreaData');
+      if (cachedData) {
+        const parsed = JSON.parse(cachedData);
+        setAreaOptions(parsed.areaOptions);
+        setCityCodeMap(parsed.cityCodeMap);
+        setProvinceCityMap(parsed.provinceCityMap);
+        return;
+      }
+
       const res = await getArea({ level: 'ONE_LEVEL' });
-      const options = (res.data || []).map((item: any) => ({
-        value: item.code,
-        label: item.name,
-        isLeaf: false,
-      }));
-      setAreaOptions(options);
+      const provinces = res.data || [];
+      const map: Record<string, string> = {};
+      const provinceCity: Record<string, string[]> = {};
+      const provinceOptions = await Promise.all(
+        provinces.map(async (province: any) => {
+          let cities: any[] = [];
+          try {
+            const cityRes = await getArea({ level: 'TWO_LEVEL', parent_code: province.code });
+            cities = (cityRes.data || []).map((city: any) => ({
+              value: city.code,
+              label: city.name,
+              isLeaf: true,
+            }));
+            const cityCodes = cities.map((city: any) => city.value);
+            provinceCity[province.code] = cityCodes;
+            cities.forEach((city: any) => {
+              map[city.value] = city.label;
+            });
+          } catch (error) {
+            console.error(`获取省份 ${province.name} 的城市失败`, error);
+            provinceCity[province.code] = [];
+          }
+          return {
+            value: province.code,
+            label: province.name,
+            isLeaf: false,
+            children: cities,
+          };
+        })
+      );
+
+      const cacheData = { areaOptions: provinceOptions, cityCodeMap: map, provinceCityMap: provinceCity };
+      localStorage.setItem('preTestAreaData', JSON.stringify(cacheData));
+
+      setAreaOptions(provinceOptions);
+      setCityCodeMap(map);
+      setProvinceCityMap(provinceCity);
     } catch (error) {
       message.error('获取省份信息失败');
     }
   };
 
+  const loadProvince = async () => {
+    const cityRes = await getArea({ level: 'TWO_LEVEL' });
+    console.log(cityRes);
+  }
+
   const loadCityOptions = async (selectedOptions: any) => {
     const targetOption = selectedOptions[selectedOptions.length - 1];
+    console.log(targetOption);
     targetOption.loading = true;
     try {
       const res = await getArea({ level: 'TWO_LEVEL', parent_code: targetOption.value });
@@ -281,13 +329,25 @@ const PreTest: React.FC = () => {
     },
     {
       title: '受众地区',
-      dataIndex: 'audience_region',
-      key: 'audience_region',
+      dataIndex: 'audienceRegion',
+      key: 'audienceRegion',
       ellipsis: true,
-      width: 150,
-      render: (text: string[]) => (
-        <span style={{ color: '#1e293b', fontSize: 13 }}>{Array.isArray(text) ? text.join(', ') : text || '-'}</span>
-      ),
+      width: 300,
+      render: (text: string[]) => {
+        if (!Array.isArray(text) || text.length === 0) {
+          return <span style={{ color: '#94a3b8', fontSize: 13 }}>-</span>;
+        }
+        const cityNames = text.map(code => cityCodeMap[String(code)] || String(code));
+        return (
+          <Input.TextArea
+            value={cityNames.join(', ') || '-'}
+            readOnly
+            autoSize={{ minRows: 1, maxRows: 4 }}
+            style={{ resize: 'none', border: 'none', background: 'transparent', padding: 0 }}
+            placeholder="-"
+          />
+        )
+      },
     },
     {
       title: '网络类型',
@@ -400,11 +460,22 @@ const PreTest: React.FC = () => {
     setModalOpen(true);
   };
 
-  const fillFormWithDetail = (data: any) => {
+  const fillFormWithDetail = async (data: any) => {
     setCurrentRecord(data);
     setPlatform(data.platform || 'AD');
-    const regionCodes = data.audience_region || [];
-    const regionPaths = regionCodes.map((code: any) => [String(code)]);
+    const regionCodes = data.audienceRegion || [];
+    const regionPaths: string[][] = [];
+    for (const code of regionCodes) {
+      const cityCode = String(code);
+      console.log(cityCode);
+      if (cityCode.length >= 6) {
+        const provinceCode = cityCode.slice(0, 2);
+        console.log(provinceCode, cityCode);
+        loadCityOptions(provinceCode);
+        regionPaths.push([provinceCode, cityCode]);
+      }
+    }
+    console.log(regionPaths);
     form.setFieldsValue({
       name: data.name,
       note: data.note,
@@ -478,7 +549,17 @@ const PreTest: React.FC = () => {
     try {
       const values = await form.validateFields();
       setSubmitLoading(true);
-      const regionCodes = (values.audience_region || []).map((path: string[]) => path[path.length - 1]);
+      console.log(values.audience_region);
+      const regionCodes: string[] = [];
+      (values.audience_region || []).forEach((path: string[]) => {
+        if (path.length === 1) {
+          const provinceCode = path[0];
+          const cities = provinceCityMap[provinceCode] || [];
+          regionCodes.push(...cities);
+        } else if (path.length >= 2) {
+          regionCodes.push(path[path.length - 1]);
+        }
+      });
       const params = {
         name: values.name,
         note: values.note,
@@ -524,6 +605,11 @@ const PreTest: React.FC = () => {
     }
   };
 
+  // [['34', '340800'],['35', '350100']]
+  // [['35', '350100']]
+  // [['34'],['35']]
+  // [['50']]
+
   const handlePageChange = (page: number, size: number) => {
     setCurrentPage(page);
     setPageSize(size);
@@ -768,8 +854,6 @@ const PreTest: React.FC = () => {
               placeholder="请选择受众地区（可多选）"
               style={{ borderRadius: 8, minHeight: 40 }}
               options={areaOptions}
-              loadData={loadCityOptions}
-              changeOnSelect
               maxTagCount="responsive"
             />
           </Form.Item>