模型table一行显示

src/index.less

@@ -61,6 +61,13 @@ code {
   margin-left: auto !important;
 }
 
+.textOverflow {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  word-break: break-all;
+}
+
 .text-white {
   color: white;
 }

src/view/Manage/Model/Component/ImportActionTable.jsx

@@ -57,10 +57,10 @@ const DatatypeInput = ({ value = {}, datatypes, onChange }) => {
   return (
     <>
       <Row align='middle'>
-        <Col span={12}>
+        <Col span={9}>
           <span>类型名称:</span>
         </Col>
-        <Col span={12}>
+        <Col span={15}>
           <Select 
             onChange={onNameChange} 
             value={value.name || ''} 
@@ -81,10 +81,10 @@ const DatatypeInput = ({ value = {}, datatypes, onChange }) => {
           //使用InputNumber:当value改变时 InputNumber显示值没改变 但实际值有改变 是ant design的bug 这里使用只能输入数字的Input
           return (
             <Row key={index} className='mt-2' align='middle'>
-              <Col span={12}>
+              <Col span={9}>
                 <span>{`${parameterCnName||''}:`}</span>
               </Col>
-              <Col span={12}>
+              <Col span={15}>
                 <Input        
                   onChange={(e) => {
                     onParameterValuesChange(e, index);
@@ -105,7 +105,7 @@ const DatatypeInput = ({ value = {}, datatypes, onChange }) => {
 const EditableCell = ({
   editing,
   dataIndex,
-  title,
+  colTitle,
   inputType,
   record,
   index,
@@ -130,7 +130,7 @@ const EditableCell = ({
           rules={[
             {
               required: (inputType === 'text'),
-              message: `请输入${title}!`,
+              message: `请输入${colTitle}!`,
             },
           ]}
         >
@@ -149,7 +149,7 @@ const EditableCell = ({
           rules={[
             {
               required: true,
-              message: `请输入${title}!`,
+              message: `请输入${colTitle}!`,
             },
           ]}
           >
@@ -159,6 +159,7 @@ const EditableCell = ({
     }
   }
 
+
   return (
     <td {...restProps}>
       {editing ? (
@@ -357,18 +358,21 @@ const ImportActionTable = (props) => {
       width: 100,
       dataIndex: 'cnName',
       editable: true,
+      ellipsis: true,
     },
     {
       title: '英文名称',
-      width: 100,
+      width: 150,
       dataIndex: 'name',
       editable: true,
+      ellipsis: true,
     },
     {
       title: '类型',
       width: 200,
       dataIndex: 'datatype',
       editable: true,
+      ellipsis: true,
       render: (datatype, record, index) => {
 
         let _text = '';
@@ -384,7 +388,7 @@ const ImportActionTable = (props) => {
     },
     {
       title: '可否为空',
-      width: 50,
+      width: 80,
       dataIndex: 'nullable',
       editable: true,
       render: (nullable, record, index) => {
@@ -399,7 +403,7 @@ const ImportActionTable = (props) => {
     },
     {
       title: '主键',
-      width: 50,
+      width: 80,
       dataIndex: 'partOfPrimaryKey',
       editable: true,
       render: (partOfPrimaryKey, record, index) => {
@@ -414,7 +418,7 @@ const ImportActionTable = (props) => {
     },
     {
       title: '分布键',
-      width: 50,
+      width: 80,
       dataIndex: 'partOfDistributionKey',
       editable: true,
       render: (partOfDistributionKey, record, index) => {
@@ -431,6 +435,7 @@ const ImportActionTable = (props) => {
       title: '描述',
       dataIndex: 'remark',
       editable: true,
+      ellipsis: true,
     },
   ];
 
@@ -440,7 +445,6 @@ const ImportActionTable = (props) => {
       title: '操作',
       dataIndex: 'action',
       width: 100,
-
       render: (_, record) => {
         if (!editable) return null;
 
@@ -470,7 +474,7 @@ const ImportActionTable = (props) => {
   const validateColumn = {
     title: '规范',
     dataIndex: 'validate',
-    width: 120,
+    width: 180,
     render: (text, record, index) => {
       let shortCauses = []; 
       let causes = [];
@@ -484,13 +488,13 @@ const ImportActionTable = (props) => {
       });
 
       return (
-        <div className='d-flex' key={index} style={{ alignItems: 'center' }}>
+        <div className='d-flex' key={index} style={{ alignItems: 'center', justifyContent: 'space-between' }}>
           <div>
           {
             shortCauses && shortCauses.map((shortCause, index) => {
               return (
-                <div key={index}>
-                  <span style={{ color: '#f5222d' }}>{shortCause||''}</span>
+                <div className='textOverflow' style={{ width: 130, color: '#f5222d' }} title={shortCause} key={index}>
+                  <span>{shortCause||''}</span>
                 </div>
               );
             })
@@ -548,7 +552,7 @@ const ImportActionTable = (props) => {
             record,
             dataIndex: col.dataIndex,
             inputType:  (col.dataIndex==='nullable' || col.dataIndex==='partOfDistributionKey' || col.dataIndex==='partOfPrimaryKey') ? 'check' : 'text',
-            title: col.title,
+            colTitle: col.title,
             editing: isEditing(record),
             datatypes: supportedDatatypes,
           }),

src/view/Manage/Model/Component/ImportModal.jsx

@@ -260,7 +260,7 @@ const ImportModal = (props) => {
       forceRender
       visible={visible}
       title={title}
-      width={step===2?1000:520}
+      width={step===2?1300:520}
       maskClosable={false}
       destroyOnClose
       onCancel={() => {

src/view/Manage/Model/Component/ModelTable.jsx

@@ -30,28 +30,29 @@ const ModelTable = (props) => {
       render: (text, record, index) => {
         return (index+1).toString();
       },
-      width:80,
+      width: 50,
     },
     {
       title: '模型名称',
       dataIndex: 'name',
-      width:180,
-
+      width: 180,
+      ellipsis: true,
     },
     {
       title: '中文名称',
       dataIndex: 'cnName',
-      width:180,
-
+      width: 180,
+      ellipsis: true,
     },
     {
       title: '模型描述',
       dataIndex: 'remark',
+      ellipsis: true,
     },
     {
       title: '操作',
       key: 'action',
-      width:120,
+      width: 120,
 
       render: (text,record) => {
         return (