feature:

1.SQL模型创建，执行sql结果预览

src/app/components/ChartsGraph/utils.js

@@ -8,9 +8,10 @@ export const formatColumns=(props)=>{
   if (props && props.length>0){
     columns = props.map(item=> (
       {
-        title: item.name,
+        title: item.name||item.nameEn,
         dataIndex: item.nameEn,
         key: item.nameEn,
+        width: 100,
       }
     ))
   }

src/app/pages/ModalManage/components/ModalDesign.jsx

@@ -150,8 +150,10 @@ export const ModalDesign = memo(({
   const sqlRef = useRef("");
   /** sql结果状态 */
   const [sqlStatus,setSqlStatus] = useState(false);
-  /** sql结果 */
+  /** sql表头 */
   const [sqlFields,setSqlFields] = useState(null);
+  /** sql结果 */
+  const [sqlResult,setSqlResult] = useState(null);
   /** ConfigTable的Ref钩子*/
   const configTableRef = useRef();
   /** 维度列表 */
@@ -265,6 +267,7 @@ export const ModalDesign = memo(({
       },
       resolve(data){
         setSqlFields(data?.columns||[])
+        setSqlResult(data?.resultList||[])
         message.success("执行成功")
         status=true
       }
@@ -356,7 +359,7 @@ export const ModalDesign = memo(({
         }}
       >
         {MODAL_TYPE.QUICK===type?.value && <QuickStartStep initialValues={initialValues}/>}
-        {MODAL_TYPE.SQL===type?.value && <SqlStartStep sql={sqlRef.current} initialValues={initialValues} onEditorChange={onEditorChange}/>}
+        {MODAL_TYPE.SQL===type?.value && <SqlStartStep sql={sqlRef.current} columns={sqlFields} data={sqlResult} initialValues={initialValues} onEditorChange={onEditorChange}/>}
       </StepsForm.StepForm>
 
       {/** 步骤二 */}

src/app/pages/ModalManage/components/SqlStartStep.jsx

@@ -1,18 +1,21 @@
 import {memo, useCallback, useRef} from 'react';
 import {ProForm, ProFormDatePicker, ProFormSelect, ProFormText} from "@ant-design/pro-components";
 import {styled} from "styled-components";
-import {Col, Row} from "antd";
+import {Col, Row, Table} from "antd";
 import {CodeEditor} from "../../../components/CodeEditor";
 import {getDBList, getTableList} from "../../MainPage/slice/thunks";
 import {useAppDispatch, useAppSelector} from "../../../../redux/configureStore";
 import {selectDBList, selectDBSource} from "../../MainPage/slice/selectors";
 import useI18NPrefix from "../../../hooks/useI18NPrefix";
+import {formatColumns} from "../../../components/ChartsGraph/utils";
 
 const fieldWidth = 450;
 export const SqlStartStep = memo(({
   initialValues,
   onEditorChange,
-  sql
+  columns,
+  data,
+  sql,
 }) => {
   const t = useI18NPrefix('global');
   const dispatch = useAppDispatch();
@@ -42,6 +45,9 @@ export const SqlStartStep = memo(({
       dispatch(getTableList({sourceId,db}))
     }
   },[])
+
+  /** sql表头*/
+  const formatColumn = formatColumns(columns)
   return (
     <div style={{height: 850}}>
       <ProForm.Group>
@@ -103,7 +109,18 @@ export const SqlStartStep = memo(({
           <CardLabel children={t("formItem.relation")+":"}/>
         </Col>
         <Col span={22}>
-          <CodeEditor value={sql} onEditorChange={onEditorChange}/>
+          <CodeEditor value={sql} onEditorChange={onEditorChange} height={formatColumn.length>0?200:600}/>
+          {
+            formatColumn.length>0 &&
+            <CustomTable
+              scroll={{y:370,x:formatColumn.length>6?1800:0}}
+              style={{height:400,width:'100%'}}
+              pagination={{pageSize: 10}}
+              columns={formatColumn}
+              dataSource={data}
+              bordered
+            />
+          }
         </Col>
       </Row>
 
@@ -125,3 +142,9 @@ const CardLabel = styled.label`
     }
   }
 `
+
+const CustomTable = styled(Table)`
+ &.ant-table-wrapper .ant-table {
+   scrollbar-color:unset;
+ }
+`;