bug fix

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

 import React, { useState, useEffect, useMemo, useRef } from 'react';
-import { Form, Input, Row, Col, Descriptions, Select, AutoComplete, Button, Divider, Tooltip, Checkbox, Space } from 'antd';
+import { Form, Input, Row, Col, Select, AutoComplete, Button, Divider, Tooltip, Checkbox, Space } from 'antd';
 import { DownOutlined, UpOutlined, ExclamationCircleFilled, WarningFilled } from '@ant-design/icons';
 import { Subject } from 'rxjs';
+import classnames from 'classnames';
 
 import { highlightSearchContentByTerms, generateUUID, IsArr } from '../../../../util';
 import { dispatch, dispatchLatest } from '../../../../model'; 
 import Rule from '../../ModelConfig/Component/rule-readonly';
-
 import DebounceInput from './DebounceInput';
+import DataQuality, { DataQualityFeignTagList } from '../../../QianKun/data-quality'
 
 import './ImportActionHeader.less';
 
@@ -151,8 +152,8 @@ const ImportActionHeader = (props) => {
   }, [editable, modelerData])
 
   const marginBottom = useMemo(() => {
-    return 15
-  }, [])
+    return  editable ? 15 : 10
+  }, [editable])
 
   const formItemLayout = {
     labelCol: {
@@ -262,15 +263,11 @@ const ImportActionHeader = (props) => {
   }
 
   return (
-    <div className='model-import-action-header'>
+    <div className={classnames('model-import-action-header', editable?'':'model-import-action-header-readolny')}>
       <div className='model-import-action-basic mb-3'>
         <h3 className='mr-3' style={{ marginBottom: 0 }}>基本信息</h3>
       </div>
-      {
-        editable ? (
-          <Form
-            form={form}
-            {...formItemLayout}
+      <Form form={form} {...formItemLayout}
         onValuesChange={onValuesChange}
       >
         <Row gutter={10}>
@@ -281,7 +278,11 @@ const ImportActionHeader = (props) => {
               rules={[{ required: true, message: '请输入中文名称!' }]}
               style={{ marginBottom }}
             >
-                  <InputDebounce />
+              {
+                editable ? <InputDebounce /> : <span>
+                  {highlightSearchContentByTerms(modelerData?.cnName, terms)}
+                </span>
+              }
             </Form.Item>
           </Col>
           <Col xs={24} sm={24} lg={12} xl={8}>
@@ -291,10 +292,9 @@ const ImportActionHeader = (props) => {
               rules={[{ required: true, message: '请输入英文名称!' }]}
               style={{ marginBottom }}
             >
-                  <AutoComplete 
-                    options={options} 
-                    onSearch={onSearch} 
-                  /> 
+              {
+                editable ? <AutoComplete options={options} onSearch={onSearch} /> : <span>{highlightSearchContentByTerms(modelerData?.name, terms)}</span>
+              } 
             </Form.Item>
           </Col>
           <Col xs={24} sm={24} lg={12} xl={8}>
@@ -304,7 +304,9 @@ const ImportActionHeader = (props) => {
               rules={[{ required: true, message: '请输入数据内容!' }]}
               style={{ marginBottom }}
             >
-                  <TextArea rows={1} placeholder='描述数据表包含的业务数据，包括数据内容业务描述、表的适用范围、数据粒度、数据统计口径、数据来源等。对于原始数据表，可以说明加载的源接口信息。' />
+              {
+                editable ? <TextArea rows={1} placeholder='描述数据表包含的业务数据，包括数据内容业务描述、表的适用范围、数据粒度、数据统计口径、数据来源等。对于原始数据表，可以说明加载的源接口信息。' /> : <span>{highlightSearchContentByTerms(modelerData?.remark, terms)}</span>
+              }
             </Form.Item>
           </Col>
           <Col xs={24} sm={24} lg={12} xl={8}>
@@ -313,7 +315,9 @@ const ImportActionHeader = (props) => {
               name="easyDataModelerPrimaryKey"
               style={{ marginBottom }}
             >
-                  <AttributesSelect modelerData={modelerData} mode='tags' />
+              {
+                editable ? <AttributesSelect modelerData={modelerData} mode='tags' /> : <span>{highlightSearchContentByTerms(primaryDescription, terms)}</span>
+              }
             </Form.Item>
           </Col>
           <Col xs={24} sm={24} lg={12} xl={8}>
@@ -322,7 +326,9 @@ const ImportActionHeader = (props) => {
               name="dataResidence"
               style={{ marginBottom }}
             >
-                  <Input placeholder='描述数据表落地的数据平台及数据库' />
+              {
+                editable ? <Input placeholder='描述数据表落地的数据平台及数据库' /> : <span>{highlightSearchContentByTerms(modelerData?.dataResidence, terms)}</span>
+              }
             </Form.Item>
           </Col>
           <Col xs={24} sm={24} lg={12} xl={8}>
@@ -332,13 +338,20 @@ const ImportActionHeader = (props) => {
               rules={[{ required: true, message: '请选择规范!' }]}
               style={{ marginBottom }}
             >
-                  <ConstraintSelect 
+              {
+                editable ? <ConstraintSelect 
                   constraints={constraints} 
                   onChange={onConstraintChange}
                   onDetail={() => {
                     setRuleParams({ visible: true })
                   }} 
-                  />
+                /> : <Space>
+                  {modelerData?.easyDataModelerModelingConstraint?.cnName}
+                  <a onClick={() => {
+                    setRuleParams({ visible: true })
+                  }}>查看</a>
+                </Space>
+              }
             </Form.Item>
           </Col>
           <Col xs={24} sm={24} lg={12} xl={8}>
@@ -348,34 +361,33 @@ const ImportActionHeader = (props) => {
               rules={[{ required: true, message: '请选择数据表类型!' }]}
               style={{ marginBottom }}
             >
-                  <TemplateSelect 
+              {
+                editable ? <TemplateSelect 
                   modelerData={modelerData}
                   templates={templates} 
                   onChange={onTemplateChange} 
+                /> : <span>{modelerData?.tableType}</span>
+              }
+            </Form.Item>
+          </Col>
+          {
+            modelerData?.id && modelerData?.state?.id === '4' && <Col xs={24} sm={24} lg={12} xl={8}>
+              <Form.Item
+                label="标签"
+                style={{ marginBottom }}
+              >
+                <DataQuality 
+                  type={DataQualityFeignTagList}
+                  data={{
+                    type: 'model',
+                    id: modelerData?.id,
+                  }}
                 />
               </Form.Item>
             </Col> 
+          } 
         </Row> 
       </Form> 
-        ) : (
-          <Descriptions column={3}>
-            <Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}><ItemTitle name='cnName' cnName='中文名称' validateReports={validateReports} /></div>} >{highlightSearchContentByTerms(modelerData.cnName||'', terms)}</Descriptions.Item>
-            <Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}><ItemTitle name='name' cnName='英文名称' validateReports={validateReports} /></div>}>{highlightSearchContentByTerms(modelerData.name||'', terms)}</Descriptions.Item>
-            <Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}><ItemTitle name='remark' cnName='数据内容' validateReports={validateReports} /></div>}>{highlightSearchContentByTerms(modelerData.remark||'', terms)}</Descriptions.Item>
-            <Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>技术主键</div>} >{highlightSearchContentByTerms(primaryDescription||'', terms)}</Descriptions.Item>
-            <Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>数据平台</div>} >{highlightSearchContentByTerms(modelerData.dataResidence||'', terms)}</Descriptions.Item>
-            <Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }} >规范</div>} >
-              <Space>
-                {modelerData.easyDataModelerModelingConstraint?(modelerData.easyDataModelerModelingConstraint.cnName||''):''}
-                <a onClick={() => {
-                  setRuleParams({ visible: true })
-                }}>查看</a>
-              </Space>
-            </Descriptions.Item>
-            <Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>数据表类型</div>} >{modelerData.tableType}</Descriptions.Item>
-          </Descriptions>          
-        ) 
-      }
       <div className='model-import-action-technical mb-3' style={{ 
           display: 'flex',
           alignItems: 'center',
@@ -391,10 +403,7 @@ const ImportActionHeader = (props) => {
         }
       </div>
       {
-        !isCollapse && <React.Fragment>
-          {
-            editable ? (
-              <Form
+        !isCollapse && <Form
           form={form}
           {...formItemLayout}
           onValuesChange={onValuesChange}
@@ -406,7 +415,9 @@ const ImportActionHeader = (props) => {
                 name="easyDataModelerDistributionKey"
                 style={{ marginBottom }}
               >
-                      <AttributesSelect modelerData={modelerData} />
+                {
+                  editable ? <AttributesSelect modelerData={modelerData} /> : <span>{highlightSearchContentByTerms(distributionDescription, terms)}</span>
+                }
               </Form.Item>
             </Col>
             <Col xs={24} sm={24} lg={12} xl={8}>
@@ -415,7 +426,9 @@ const ImportActionHeader = (props) => {
                 name="partition"
                 style={{ marginBottom }}
               >
-                      <PartitionSelect modelerData={modelerData} partitionTypes={supportedPartitionTypes} />
+                {
+                  editable ? <PartitionSelect modelerData={modelerData} partitionTypes={supportedPartitionTypes} /> : <span>{highlightSearchContentByTerms(partitionsDescription, terms)}</span>
+                }
               </Form.Item>
             </Col>
             <Col xs={24} sm={24} lg={12} xl={8}>
@@ -424,7 +437,9 @@ const ImportActionHeader = (props) => {
                 name="easyDataModelerSemiPrimaryKey"
                 style={{ marginBottom }}
               >
-                      <AttributesSelect modelerData={modelerData} mode='tags' />
+                {
+                  editable ? <AttributesSelect modelerData={modelerData} mode='tags' /> : <span>{highlightSearchContentByTerms(semiPrimaryDescription, terms)}</span>
+                }
               </Form.Item>
             </Col>
             <Col xs={24} sm={24} lg={12} xl={8}>
@@ -433,7 +448,9 @@ const ImportActionHeader = (props) => {
                 name="dataCircumstances"
                 style={{ marginBottom }}
               >
-                      <Input placeholder='描述数据表中数据的更新频率、每日增量情况、数据量级和历史数据' />
+                {
+                  editable ? <Input placeholder='描述数据表中数据的更新频率、每日增量情况、数据量级和历史数据' /> : <span>{highlightSearchContentByTerms(modelerData?.dataCircumstances, terms)}</span>
+                }
               </Form.Item>
             </Col>
             <Col xs={24} sm={24} lg={12} xl={8}>
@@ -442,7 +459,9 @@ const ImportActionHeader = (props) => {
                 name="dataUpdatingTiming"
                 style={{ marginBottom }}
               >
-                      <UpdateSelect placeholder='描述数据表的更新时间点'/>
+                {
+                  editable ? <UpdateSelect placeholder='描述数据表的更新时间点'/> : <div>{highlightSearchContentByTerms(modelerData?.dataUpdatingTiming, terms)}</div>
+                }
               </Form.Item>
             </Col>
             <Col xs={24} sm={24} lg={12} xl={8}>
@@ -452,13 +471,15 @@ const ImportActionHeader = (props) => {
                 tooltip={dataTypeRemark}
                 style={{ marginBottom }}
               >
-                      <Select allowClear placeholder='请选择数据类型'>
+                {
+                  editable ? <Select allowClear placeholder='请选择数据类型'>
                   {
                     dataTypeList?.map((item, index) => <Option key={index} value={item}>
                       {item}
                     </Option>)
                   }
-                      </Select>
+                  </Select> : <span>{highlightSearchContentByTerms(modelerData?.dataType, terms)}</span>
+                }
               </Form.Item>
             </Col>
             <Col xs={24} sm={24} lg={12} xl={8}>
@@ -468,30 +489,19 @@ const ImportActionHeader = (props) => {
                 tooltip={bindingLoadRemark}
                 style={{ marginBottom }}
               >
-                      <Select allowClear placeholder='请选择绑定加载范围'>
+                {
+                  editable ? <Select allowClear placeholder='请选择绑定加载范围'>
                   {
                     bindingLoadRangeList?.map((item, index) => <Option key={index} value={item}>
                       {item}
                     </Option>)
                   }
-                      </Select>
+                  </Select> : <span>{highlightSearchContentByTerms(modelerData?.bindingLoadRang, terms)}</span>
+                }
               </Form.Item>
             </Col>
           </Row> 
         </Form>
-            ) : (
-              <Descriptions column={3}>
-                <Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>分布键</div>} >{highlightSearchContentByTerms(distributionDescription||'', terms)}</Descriptions.Item>
-                <Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>分区键</div>} >{highlightSearchContentByTerms(partitionsDescription||'', terms)}</Descriptions.Item>
-                <Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>类主键</div>} >{highlightSearchContentByTerms(semiPrimaryDescription||'', terms)}</Descriptions.Item>
-                <Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>数据情况</div>} >{highlightSearchContentByTerms(modelerData.dataCircumstances||'', terms)}</Descriptions.Item>
-                <Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>更新时间</div>} >{highlightSearchContentByTerms(modelerData.dataUpdatingTiming||'', terms)}</Descriptions.Item>
-                <Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>数据类型</div>} >{highlightSearchContentByTerms(modelerData.dataType||'', terms)}</Descriptions.Item>
-                <Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>绑定加载范围</div>} >{highlightSearchContentByTerms(modelerData.bindingLoadRange||'', terms)}</Descriptions.Item>
-              </Descriptions>          
-            ) 
-          }
-        </React.Fragment>
       }
       <Rule
         {...ruleParams}

src/view/Manage/Model/Component/ImportActionHeader.less

-.model-import-action-header {
-  .yy-descriptions-row > th, .yy-descriptions-row > td {
-    padding-bottom: 15px;
+.model-import-action-header-readolny {
+  .yy-form-item-label > label {
+    height: auto;
+  }
+
+  .yy-form-item-control-input {
+    min-height: 0;
   }
 }
\ No newline at end of file