模型送审静态页面

src/util/Component/Table.tsx

@@ -74,7 +74,8 @@ function FC<RowType extends object = any>({ width, maxHeight, pageSize, pageNum,
           const render = getRender(col);
           const colWidth = col.width ?? 100;
           return {
-            ...col, /* colRef: createRef(), */ width: colWidth, render, ellipsis: true,
+            ellipsis: true,
+            ...col, /* colRef: createRef(), */ width: colWidth, render, 
             onHeaderCell: (column: any) => ({
               width: column.width,
               // colRef: column.colRef,

src/view/Manage/Model/Component/start-flow.jsx

+import React from 'react'
+import { Modal, Button, Spin, Form, Input, Select, Space, Radio, Row, Col, Upload } from 'antd'
+import { UploadOutlined } from '@ant-design/icons'
+
+import { isSzseEnv, showMessage } from '../../../../util'
+import Table from '../../../../util/Component/Table'
+import produce from 'immer'
+
+const FC = (props) => {
+  const { visible, items = Array.from({ length: 10 }).map((_, i) => ({
+    name: `模型${i}`,
+    remark: '很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的',
+    id: i,
+  })), onCancel } = props
+  const [waiting, setWaiting] = React.useState(false)
+
+  const basicRef = React.useRef()
+  const listRef = React.useRef()
+
+  const close = (refresh = false) => {
+    setWaiting(false)
+    onCancel?.(refresh)
+  }
+
+  const save = async () => {
+    try {
+      const basicRows = await basicRef.current?.validate()
+      const tableData = listRef.current?.tableData
+
+      console.log('basic rows', basicRows)
+      console.log('table data', tableData)
+    } catch (e) {
+      
+    }
+  }
+
+  const footer = React.useMemo(() => {
+    return [
+      <Button key={'cancel'}
+        onClick={() => close()}
+      >取消</Button>,
+      <Button key={'save'} type='primary'
+        disabled={waiting}
+        onClick={() => save()}
+      >保存</Button>
+    ]
+  }, [close, save, waiting])
+
+  return (
+    <Modal
+      visible={visible}
+      footer={footer}
+      width='80%'
+      bodyStyle={{ padding: '15px', overflowX: 'auto', maxHeight: '80vh' }}
+      title='模型送审'
+      centered destroyOnClose
+      onCancel={() => { close() }}
+    >
+      <Spin spinning={waiting}>
+        <Basic ref={basicRef} />
+        <List ref={listRef} items={items} />
+      </Spin>
+    </Modal>
+  )
+}
+
+export default FC
+
+const Basic = React.forwardRef(function ({}, ref) {
+  const [loadingDesignReviewers, setLoadingDesignReviewers] = React.useState(false)
+  const [designReviewers, setDesignReviewers] = React.useState()
+  const [fileList, setFileList] = React.useState()
+
+  const [form] = Form.useForm()
+
+  React.useImperativeHandle(ref, () => ({
+    validate: async () => {
+      const rows = await form.validateFields() 
+
+      return rows
+    },
+  }), [form])
+
+  React.useEffect(() => {
+    getDesignReviewers()
+  }, [])
+
+  const marginBottom = React.useMemo(() => {
+    return 15
+  }, [])
+
+  const getDesignReviewers = () => {
+    setLoadingDesignReviewers(true)
+    setTimeout(() => {
+      setLoadingDesignReviewers(false)
+      setDesignReviewers(Array.from({ length: 10 }).map((_, i) => ({
+        name: `user${i}`,
+        id: i,
+      })))
+    }, 3000)
+  }
+ 
+  const onValuesChange = (changedValues, allValues) => {
+
+  }
+
+  const uploadProps = {
+    onRemove: file => {
+      const index = (fileList??[]).indexOf(file)
+      if (index !== -1) {
+        const newFileList = (fileList??[]).slice()
+        newFileList.splice(index, 1)
+        setFileList(newFileList)
+      }
+    },
+    beforeUpload: file => {
+      const isLt5M = file.size / 1024 / 1024 < 5
+      if (!isLt5M) {
+        showMessage('error', '上传文件必须小于5M')
+        setFileList([])
+        return false
+      }
+
+      setFileList(prev => {
+        return [...prev??[], file]
+      })
+
+      return false
+    },
+    fileList: fileList || [],
+  }
+
+  return (
+    <Form
+      form={form}
+      labelCol={{ span: 3 }}
+      wrapperCol={{ span: 9 }}
+      autoComplete="off"
+      onValuesChange={onValuesChange}
+    >
+      <Form.Item
+        label='送审说明'
+        name="remark"
+        style={{ marginBottom }}
+        rules={[{ required: true, message: '请填写送审说明!' }]}
+      >
+        <Input placeholder='请输入送审说明' />
+      </Form.Item>
+
+      <Form.Item
+        label='设计评审人员'
+        name="designReviewerers"
+        style={{ marginBottom }}
+        rules={[{ required: true, message: '请选择设计评审人员!' }]}
+      >
+        <Select 
+          placeholder='请选择设计评审人员' 
+          loading={loadingDesignReviewers}
+          allowClear
+          mode='multiple'
+        >
+          {designReviewers?.map(item => <Select.Option key={item.id} value={item.id}>{item.name}</Select.Option>)}
+        </Select>
+      </Form.Item>
+
+      <Form.Item
+        label='规范评审'
+        name='ruleReview'
+        wrapperCol={{ span: 12 }}
+        style={{ marginBottom }}
+        rules={[{ 
+          required: true, 
+          validator: (_, value) => {
+            if (value?.ruleReviewSelected === null || value?.ruleReviewSelected === undefined) {
+              return Promise.reject(new Error('请选择是否规范评审!'))
+            }
+
+            if (value?.ruleReviewSelected && (value?.ruleReviewers??[]).length === 0) {
+              return Promise.reject(new Error('请选择规范评审人员!'))
+            }
+
+            return Promise.resolve();
+          }
+        }]}
+      >
+        <RuleReviewItem />
+      </Form.Item>
+
+      <Form.Item
+        label='附件'
+        style={{ marginBottom }}
+      >
+        <Upload {...uploadProps }>
+          <Button icon={<UploadOutlined />}>点击上传</Button>
+        </Upload>
+      </Form.Item>
+    </Form>
+  )
+})
+
+const RuleReviewItem = ({ value = {}, onChange }) => {
+  const [ruleReviewSelected, setRuleReviewSelected] = React.useState()
+  const [loadingRuleReviewers, setLoadingRuleReviewers] = React.useState(false)
+  const [ruleReviewers, setRuleReviewers] = React.useState()
+
+  React.useEffect(() => {
+    getRuleReviewers()
+  }, [])
+
+  const getRuleReviewers = () => {
+    setLoadingRuleReviewers(true)
+    setTimeout(() => {
+      setLoadingRuleReviewers(false)
+      setRuleReviewers(Array.from({ length: 10 }).map((_, i) => ({
+        name: `user${i}`,
+        id: i,
+      })))
+    }, 3000)
+  }
+
+  const triggerChange = (changedValue) => {
+    onChange?.({
+      ...value,
+      ...changedValue,
+    });
+  }
+
+  return (
+    <Row align='middle'>
+      <Radio.Group onChange={(e) => {
+        setRuleReviewSelected(e.target.value)
+        triggerChange({ ruleReviewSelected: e.target.value })
+      }}>
+        <Radio value={true}>是</Radio>
+        <Radio value={false}>否</Radio>
+      </Radio.Group>
+      {
+        ruleReviewSelected && <Col span={16}>
+          <Select 
+            placeholder='请选择规范评审人员' 
+            loading={loadingRuleReviewers}
+            allowClear
+            mode='multiple'
+            style={{ width: '100%' }}
+            onChange={(val) => {
+              triggerChange({ ruleReviewers: val })
+            }}
+          >
+            {ruleReviewers?.map(item => <Select.Option key={item.id} value={item.id}>{item.name}</Select.Option>)}
+          </Select>
+        </Col>
+      }
+    </Row>
+  )
+}
+
+const List = React.forwardRef(function ({ items }, ref) {
+  const [tableData, setTableData] = React.useState(items)
+
+  React.useImperativeHandle(ref, () => ({
+    tableData,
+  }), [tableData])
+
+  const cols = [
+    {
+      title: '序号',
+      dataIndex: 'index',
+      width:60,
+      render:(_, __, index)=> (index+1)
+    },
+    {
+      title: '模型名称',
+      dataIndex: 'name',
+      width: isSzseEnv?360:160,
+    },
+    {
+      title: '中文名称',
+      dataIndex: 'cnName',
+      width: isSzseEnv?420:160,
+    },
+    {
+      title: '数据内容',
+      dataIndex: 'remark',
+    },
+    {
+      title: '路径',
+      dataIndex: 'path',
+      width: 120,
+    },
+    {
+      title: '送审备注',
+      dataIndex: 'reviewRemark',
+      render: (_, __, index) => (
+        <Input 
+          onChange={(e) => {
+            setTableData(prev => {
+              return produce(prev, (draft) => {
+                draft[index].reviewRemark = e.target.value
+              })
+            })
+          }} 
+        />
+      )
+    },
+  ]
+
+  return (
+    <Table
+      columns={cols??[]}
+      dataSource={tableData??[]}
+      pagination={false}
+    />
+  )
+})
\ No newline at end of file

src/view/Manage/Model/index.jsx

@@ -23,6 +23,7 @@ import ColSettingModal from './Component/ColSettingModal';
 import PermissionButton from '../../../util/Component/PermissionButton';
 import SelectSearchProperties from './Component/select-search-properties';
 import { TagSelect, TagSelectPopup } from './Component/tag-help';
+import StartFlow from './Component/start-flow';
 
 import './index.less';
 
@@ -801,6 +802,10 @@ class Model extends React.Component {
             })
           }}
         />
+
+        {/* <StartFlow 
+          visible={true}
+        /> */}
       </div>
       }
       </AppContext.Consumer>