RWAServer/Procedure/frontend/projectb/src/pages/idataMng/ExcelMng/importSqlConfig.tsx

import type { EditableFormInstance, ProColumns } from '@ant-design/pro-components';
import { baseFun, EditType, SDButton, SDEditableTable, SDLayout, SDModal } from '@sundata/ui-frame';
import { useEffect, useRef, useState } from 'react';
import { getImpSqlConfigList, ImpSqlConfigModel, saveImpSqlConfigList } from '../../../services/idataMng/excelMng';
  
  export type ImportSqlConfigProp = {
    editType?: EditType;
    mType?: string;//模板代码
    visible: boolean;
    onCancelfun?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
  };
  
  const ImportSqlConfig: React.FC<ImportSqlConfigProp> = (props) => {
    const sqlTableRef = useRef<EditableFormInstance>();
    const [sqlConfigList, setSqlConfigList] = useState<readonly ImpSqlConfigModel[]>();
    const [max,setMax] = useState<number>(2000);

    useEffect(() => {
        getImpSqlConfigList({mtype: props.mType}).then((data) => {
        setSqlConfigList(data?.data);
        });
    }, []);

    const saveSqlConfig = async () => {
        const editingRows = sqlTableRef.current?.getRowsData?.();
        if (editingRows && editingRows.length > 0) {
            baseFun.warning('列表中有正在编辑的参数，请确认或取消修改后再保存');
            return;
        }
        // if(sqlConfigList?.length==0){
        //     baseFun.warning('列表中没有数据，请新增后再保存');
        //     return;
        // }
        sqlConfigList?.forEach((data: ImpSqlConfigModel)=>{
            data.mtype = props.mType;
        })
        await saveImpSqlConfigList(sqlConfigList || []);
        baseFun.info('处理完成');
      };
    
      const sqlColumns: ProColumns<ImpSqlConfigModel>[] = [
        {
          title: '处理类型',
          dataIndex: 'methodtype',
          width: '15%',
          valueType:'select',
          valueEnum: {
            "SQL": {
              text: 'SQL'
            },
            "JAVA": {
              text: 'JAVA'
            },
          },
          formItemProps: () => {
            return {
              rules: [{ required: true }],
            };
          },
          fieldProps: () => {
            return {
                onChange: (methodtype: string) => {
                    if(methodtype=="JAVA"){
                        setMax(30);
                    }else{
                        setMax(2000);
                    }
                }
            }
          }
        },
        {
          title: '逻辑体',
          dataIndex: 'lbody',
          valueType: 'textarea',
          tooltip:'处理类型为SQL时，配置sql语句；处理类型为JAVA时，配置java接口方法所在类配置bean的name',
          width: '65%',
          ellipsis:true,
          formItemProps: () => {
            return {
              rules: [
                { required: true, message: '此项为必填项' },
                { max: max, message: `最多输入 [${max}] 个字符` },
              ],
            };
          },
        },
      ]
  
    return (
        <SDModal
            title={'转换逻辑'}
            visible={props.visible}
            onCancel={props.onCancelfun}
            footer={props.editType != 'display'? <SDButton successMessage='' autoLoading={true} onClick={saveSqlConfig} >保存</SDButton> : undefined}
        >
            <SDLayout>
            <SDEditableTable
                columns={sqlColumns}
                value={sqlConfigList || []}
                formRef={sqlTableRef}
                onChange={(value: readonly ImpSqlConfigModel[]) => {
                    setSqlConfigList(value);
                }}
                dragable
                editable={props.editType != 'display'} />
            </SDLayout>
        </SDModal>
    );
  };
  
  export default ImportSqlConfig;