模型流程详情静态页面

src/App.js

@@ -35,6 +35,7 @@ const DataMasterDefine = loadable(()=> import('./view/Manage/DataMaster/Define')
 const DataMasterManage = loadable(()=> import('./view/Manage/DataMaster/Manage'));
 const MetadataHarvester = loadable(() => import('./view/Manage/MetadataHarvester'));
 const EditAssets = loadable(()=> import('./view/Manage/AssetResourceManage/edit-assets'));
+const ModelReviewDetail = loadable(()=> import('./view/Manage/ModelReview'));
 
 export class App extends React.Component {
   constructor() {
@@ -146,7 +147,8 @@ export class App extends React.Component {
             <Route path={`${ContextPath}/model-template-action`} component={EditTemplate} exact />    
             <Route path={`${ContextPath}/asset-detail`} component={AssetDetailPage} exact />  
             <Route path={`${ContextPath}/edit-assets`} component={EditAssets} exact />  
-
+            <Route path={`${ContextPath}/model-review-detail`} component={ModelReviewDetail} />
+ 
             <Route path={'/center-home/view/datasource-manage'} component={DatasourceManage} exact />
             <Route path={'/center-home/view/data-model'} component={Model} exact />
             <Route path={'/center-home/view/model-config'} component={ModelConfig} exact />

src/view/Manage/ModelReview/index.jsx

+import React from "react"
+import { Space, Button, Descriptions, Form, Input, Tooltip, Typography, Select,  } from "antd"
+import produce from "immer"
+
+import Table from '../../../util/Component/Table'
+import { isSzseEnv } from "../../../util"
+
+const FC = (props) => {
+  const [form] = Form.useForm()
+
+  const listRef = React.useRef()
+
+  const onGraghClick = () => {
+
+  }
+
+  const onCloseClick = () => {
+
+  }
+
+  const onSaveClick = () => {
+
+  }
+
+  const onSubmitClick = async () => {
+    try {
+      await listRef.current?.validate()
+      const tableData = listRef.current?.tableData
+
+      console.log('table data', tableData)
+    } catch (e) {
+      
+    }
+  }
+
+  return (
+    <div className='p-5' style={{ height: '100%' }}>
+      <div className='flex' style={{ justifyContent: 'space-between' }}>
+        <Button type='link' onClick={onGraghClick}>流程图</Button>
+        <Space>
+          <Button onClick={onCloseClick}>关闭</Button>
+          <Button onClick={onSaveClick}>保存</Button>
+          <Button onClick={onSubmitClick}>提交</Button>
+        </Space>
+      </div>
+      <div>
+        <div className='flex mt-3' style={{ justifyContent: 'center' }}>
+          <h3>模型评审流程</h3>
+        </div>
+        <Descriptions bordered size='small' column={2}>
+          <Descriptions.Item label="流程名称"></Descriptions.Item>
+          <Descriptions.Item label="送审人"></Descriptions.Item>
+          <Descriptions.Item label="当前环节"></Descriptions.Item>
+          <Descriptions.Item label="送审时间"></Descriptions.Item>
+          <Descriptions.Item label="送审说明"></Descriptions.Item>
+          <Descriptions.Item label="附件"></Descriptions.Item>
+        </Descriptions>
+      </div>
+      <div className='my-5'>
+        <Form
+          form={form}
+          autoComplete="off"
+        >
+          <Form.Item
+            label="流程意见"
+            name="suggest"
+            rules={[{ required: true, message: '请填写流程意见!' }]}
+            style={{ marginBottom: 0 }}
+          >
+            <Input.TextArea 
+              autoSize={{ minRows: 1, maxRows: 20 }} 
+              allowClear 
+              placeholder='请输入流程意见' 
+            />
+          </Form.Item>
+        </Form>
+      </div>
+      <List ref={listRef} />
+    </div>
+  )
+}
+
+export default FC
+
+const List = React.forwardRef(function ({}, ref) {
+  const [tableData, setTableData] = React.useState()
+  const [form] = Form.useForm()
+
+  //zcx mock
+  React.useEffect(() => {
+    setTableData(Array.from({ length: 10 }).map((_, i) => ({
+      name: `模型${i}`,
+      cnName: `模型${i}`,
+      remark: '很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的',
+      id: i,
+    })))
+  }, [])
+
+  React.useImperativeHandle(ref, () => ({
+    validate: async () => {
+      return await form.validateFields() 
+    },
+    tableData,
+  }), [tableData, form])
+
+  const cols = [
+    {
+      title: '序号',
+      dataIndex: 'index',
+      width:60,
+      render:(_, __, index)=> (index+1)
+    },
+    {
+      title: '模型名称',
+      dataIndex: 'name',
+      width: isSzseEnv?360:160,
+      ellipsis: false,
+      render: (text, record) => (
+        <Tooltip title={text}>
+          <Typography.Paragraph ellipsis={{
+            rows: 3,
+          }}><a onClick={() => {
+   
+          }}>{text}</a></Typography.Paragraph>
+        </Tooltip>
+      )
+    },
+    {
+      title: '中文名称',
+      dataIndex: 'cnName',
+      width: isSzseEnv?420:160,
+      ellipsis: false,
+      render: (text, record) => (
+        <Tooltip title={text}>
+          <Typography.Paragraph ellipsis={{
+            rows: 3,
+          }}>{text}</Typography.Paragraph>
+        </Tooltip>
+      )
+    },
+    {
+      title: '数据内容',
+      dataIndex: 'remark',
+      ellipsis: false,
+      render: (text, record) => (
+        <Tooltip title={text}>
+          <Typography.Paragraph ellipsis={{
+            rows: 3,
+          }}>{text}</Typography.Paragraph>
+        </Tooltip>
+      )
+    },
+    {
+      title: '路径',
+      dataIndex: 'path',
+      width: 120,
+      ellipsis: false,
+      render: (text, record) => (
+        <Tooltip title={text}>
+          <Typography.Paragraph ellipsis={{
+            rows: 3,
+          }}>{text}</Typography.Paragraph>
+        </Tooltip>
+      )
+    },
+    {
+      title: '送审备注',
+      dataIndex: 'reviewRemark',
+      render: (text, record) => (
+        <Tooltip title={text}>
+          <Typography.Paragraph ellipsis={{
+            rows: 3,
+          }}>{text}</Typography.Paragraph>
+        </Tooltip>
+      )
+    },
+    {
+      title: '评审结论',
+      dataIndex: 'result',
+      width: 120,
+      render: (_, __, index) => (
+        <Form.Item name={`result${index}`}
+          rules={[{ required: true, message: '请选择评审结论!' }]}
+          style={{ marginBottom: 0 }}
+        >
+          <Select 
+            placeholder='请选择' 
+            allowClear
+            style={{
+              width: '100%'
+            }}
+            onChange={(val) => {
+              setTableData(prev => {
+                return produce(prev, (draft) => {
+                  draft[index].result = val
+                })
+              })
+            }}
+          >
+            <Select.Option value={true}>通过</Select.Option>
+            <Select.Option value={false}>不通过</Select.Option>
+          </Select>
+        </Form.Item>
+      )
+    },
+    {
+      title: '评审意见',
+      dataIndex: 'suggest',
+      render: (_, __, index) => (
+        <Input.TextArea rows={1}
+          autoSize={{ minRows: 1, maxRows: 3 }}
+          allowClear
+          onChange={(e) => {
+            setTableData(prev => {
+              return produce(prev, (draft) => {
+                draft[index].suggest = e.target.value
+              })
+            })
+          }} 
+        />
+      )
+    },
+  ]
+
+  return (
+    <Form form={form}>
+      <Table
+        columns={cols??[]}
+        dataSource={tableData??[]}
+        pagination={false}
+      />
+    </Form>
+  )
+})
\ No newline at end of file