Bug问题

一、list 页面

import React, { useEffect, useState } from 'react';
import { shallowEqual, useHistory, useSelector } from 'dva';
import { Button, message } from 'choerodon-ui/pro';
import formatterCollections from 'hzero-front/lib/utils/intl/formatterCollections';
import {
  commonModelPrompt,
  languageConfig,
  prdTemCode,
} from '@/language/language';
import { ButtonColor } from 'choerodon-ui/pro/lib/button/enum';
import {
  getPortalConfig,
  getPortalSyncConfig,
  postPortalConfig,
} from '@/api/portalConfig/main';
import { pubPath } from '@/utils/utils';
import { useDefaultPage } from '@ino/ltc-component-paas';
import { DefaultPageMode } from '@ino/ltc-component-paas/lib/component/defaultPage/enum';
import Tabs from '@/components/Tabs/index';
import { TabItem, TableData } from '@/interface/portalConfig/main';
import { queryMapIdpValue } from 'services/api';
import { renderSync } from '@/pages/portalConfig/list/hook';
import { dataSourceTabs, languageTabs } from '@/pages/portalConfig/list';
import {
  mergeConfigData,
  portalConfigAddComponentLevelAndSort,
} from '@/utils/portalConfig/main';
import Banner from '../components/Banner/main';
import Resources from '../components/Resources/main';
import FooterBanner from '../components/FooterBanner/main';
import { loadingModel } from './hook';
import '@/assets/styles/c7n.less';
import styles from './main.less';
import { configDefault } from './store';

const PortanConfig = () => {
  const history = useHistory();

  /** 定义提交成功页面 */
  const openDefaultSuccess = useDefaultPage({
    mode: DefaultPageMode.handleSuccess,
    renderDom: {
      current: document.getElementsByClassName(
        'hzero-common-layout-content',
      )[0],
    },
    isClose: true,
    closeWait: 3,
    onClose: () => {
      fetchConfig();
    },
  });

  /** 跳转到：没有权限页面 */
  const openNoPermissions = useDefaultPage({
    mode: DefaultPageMode.noPermissions,
    renderDom: {
      current: document.getElementsByClassName(
        'hzero-common-layout-content',
      )[0],
    },
    isClose: true,
    closeWait: 3,
    onClose: () => {
      fetchConfig();
    },
  });

  /** 系统错误 */
  const openDefault = useDefaultPage({
    mode: DefaultPageMode.sysError,
    renderDom: {
      current: document.getElementsByClassName(
        'hzero-common-layout-content',
      )[0],
    },
    isClose: true,
    closeWait: 3,
    onClose: () => {
      fetchConfig();
    },
  });

  const [loading, setLoading] = useState(true); // 初始状态设为true，确保开始时显示loading
  const [isDataLoaded, setIsDataLoaded] = useState(false); // 新增状态，用于判断数据是否已加载

  const [tabKey, setTabKey] = useState('zh_CN'); // 语言模式
  const [dataSource, setDataSource] = useState('pc'); // 数据源(PC/移动)
  const [operation, setOperation] = useState(false); // 操作模式
  const [rule, setRule] = useState([]); // 添加规则上限
  const [configData, setConfigData] = useState(configDefault); // 配置数据

  /** 当前tab页 */
  const activeTabKey = useSelector(
    (state: any) => state?.global?.activeTabKey,
    shallowEqual,
  );

  /** 获取配置 */
  const fetchConfig = async (sourse?: string) => {
    setLoading(true);

    try {
      const res = await getPortalConfig({
        language: tabKey,
        dataSource: sourse ? sourse : dataSource,
        componentPlate: 'DEVELOPER',
      });

      if (res.failed) {
        message.error(
          languageConfig('tips.fetchError', '获取配置失败'),
          1.5,
          'top',
        );
        setIsDataLoaded(false);
        res?.code === '401' ? openNoPermissions.open() : openDefault.open();
        return;
      }

      // console.log('获取配置', dataSource, res);
      // console.log('原始数据', configData);

      // 合并数据
      const result = mergeConfigData(configDefault, res || []);

      setConfigData(result);
      setIsDataLoaded(true);
    } catch (error) {
      message.error(
        languageConfig('tips.fetchError', '获取配置失败'),
        1.5,
        'top',
      );
      setIsDataLoaded(false);
    } finally {
      setLoading(false);
    }
  };

  /** 移动端：一键同步 */
  const handleSync = async () => {
    setLoading(true);
    const res = await getPortalSyncConfig({
      language: tabKey,
      componentPlate: 'DEVELOPER',
      componentSys: 'app',
    });
    if (res.failed) {
      message.error(
        languageConfig('tips.syncFetchDataError', '同步失败'),
        1.5,
        'top',
      );
      setIsDataLoaded(false);
      res?.code === '401' ? openNoPermissions.open() : openDefault.open();
    } else {
      setConfigData(res || []);
      setIsDataLoaded(true);
    }
    setLoading(false);
  };

  /** tabs 切换 */
  const handleTabChange = (selectedTab: TabItem) => {
    // console.log('当前选中的标签数据:', selectedTab);
    setTabKey(selectedTab.key);
    setDataSource('pc');
    setLoading(true); // 切换 tabs 时设置 loading 为 true
    setOperation(false); // 切换 tabs 时设置 operation 为 false
  };

  /** 数据源： 移动端、PC端切换 */
  const handleTabTypeChange = () => {
    setDataSource(dataSource === 'pc' ? 'app' : 'pc');
    setOperation(false); // 切换 tabs 时设置 operation 为 false
  };

  /** 提交 */
  const handleSubmit = async () => {
    // 1、componentLevel 和 componentSort
    const submitParams = portalConfigAddComponentLevelAndSort(configData);
    console.log('submitParams', submitParams);

    // 2、提交数据
    setLoading(true);
    const params = {
      componentSys: dataSource,
      containerComponentList: submitParams,
    };
    const res = await postPortalConfig(tabKey, params);
    setLoading(false);
    if (res.failed) {
      message.warning(res.message, undefined, undefined, 'top');
      return;
    }
    message.success(languageConfig('tips.success', '保存成功'), 1.5, 'top');

    // 3、跳转到成功页面
    setOperation(false); // 操作状态关闭
    openDefaultSuccess.open(); // 跳转到成功页面
  };

  /** 回调 */
  const handleAction = (val: TableData[]) => {
    // console.log('这里是回调', val);
    setConfigData(val);
  };

  useEffect(() => {
    if (activeTabKey) {
      fetchConfig();
    }
  }, [activeTabKey, tabKey, dataSource]);

  // 获取数量上限
  useEffect(() => {
    const fetchRule = async () => {
      const res = await queryMapIdpValue(['INO_TAI_HOME_PAGE_MODULE']);
      // console.log('rule', res[0]);
      setRule(res?.[0] || []);
    };
    fetchRule();
  }, []);

  return (
    <>
      {loading && !isDataLoaded && loadingModel()}

      

        

          

            {/* Tabs：切换中英文 */}
            

              
              
 history.push(`${pubPath}/tal/preview/${tabKey}`)}
              >
                
                {languageConfig('btn.preview', '预览')}
              
            

            {/* 配置项：内容 */}
            

              {/* tabs: PC/移动端配置 */}
              

                
                {renderSync(dataSource, operation, () => handleSync())}
              

               handleAction(val)}
              />
              {/*  handleAction(val)}
              />
               handleAction(val)}
              /> */}
            
          

          {/* 底部：提交按钮 */}
          

            {operation ? (
              <>
                
                  {languageConfig('btn.submit', '提交')}
                
                 {
                    setOperation(!operation);
                    fetchConfig();
                  }}
                >
                  {languageConfig('btn.cancel', '取消')}
                
              
            ) : (
               setOperation(!operation)}
              >
                {languageConfig('btn.edit', '编辑')}
              
            )}
          
        
      
    
  );
};

export default formatterCollections({
  code: [prdTemCode, commonModelPrompt],
})(PortanConfig);

二、Banner

import React, { useMemo, useState } from 'react';
import {
  languageConfig,
  PICTURE_FORMAT,
  PICTURE_MAX_SIZE,
} from '@/language/language';
import Title from '@/components/Title';
import { ModuleCreateProps, TableData } from '@/interface/portalConfig/main';
import {
  portalConfigFetchMaxLimit,
  portanConfigUpdateModuleData,
  replaceConfigData,
} from '@/utils/portalConfig/main';
import styles from '../../list/main.less';
import { renderRuleLimit, renderTitle } from '../../list/hook';
import { findZoneSize } from '../../list/store';
import Create from './create/main';
import View from './create/view';

const Banner = (props: ModuleCreateProps) => {
  const { operation, configData, ruleData, dataSource, onAction } = props;

  const [show, setShow] = useState(true); // 管理收缩状态

  /** 获取配置数据 */
  const bannerList = useMemo(() => {
    // 1、找到这个组件数据
    const bannerModule = configData.find(
      item => item.componentModule === 'developer.bannerConfig',
    );

    if (!bannerModule?.childrenList) return [];

    // 2、获取组件下'配置项'数据
    const bannerChild = bannerModule.childrenList.find(
      child => child.componentModule === 'developer.bannerConfig.banner',
    );

    return bannerChild?.childrenList || [];
  }, [configData]);

  /** 回调：用于接收子页面传递过来的数据 */
  const handleChildDataUpdate = (newData: TableData[]) => {
    // console.log('bannerl回调', newData);
    // console.log('configData', configData);

    // 1、给模块添加'提示'标头
    const resultData = newData?.map((item, index) => ({
      ...item,
      componentName: `${languageConfig(
        'developer.banner.label.bannerImage',
        'banner图片',
      )}${index + 1}`,
    }));

    // 2、更新：从父组件'configData'中获取的本模块数据
    const bannerModule = configData.find(
      item => item.componentModule === 'developer.bannerConfig',
    );
    const updatedTableData = portanConfigUpdateModuleData(
      bannerModule,
      resultData,
      'developer.bannerConfig.banner',
    );
    // console.log('更新后的 tableData:', updatedTableData);

    // 2、合并：更新过后的'本模块'和父组件中配置数据进行合并
    const result = replaceConfigData(configData, updatedTableData);
    onAction(result);
  };

  return (