OHIF记录（十）——初始页面的table配置

OHIF记录（十）——初始页面的table配置

在根路径页面的table包含两部分：

第一部分：

由三个搜索框组成的检索模块，包括患者姓名，Description，检查日期等三种不同类型的检索。

第二部分：

库中所有dicom数据的无序列表，源码中有24条数据。

在platform/ui/components/studyList.js里定义了用于修改检索模块的接口，即mediumTableMeta数组，数组同样由对象组成，一个对象代表一个检索框。

displayText：检索框上的文本。
fieldName：检索框对应HTML标签的id，但是id并不是完全和fieldName的值一样，id的值会在fieldName的值前边加上filter-。
inputType：搜索框类型，text表示一个输入框，date-range表示一个日期检索框
size：搜索框的宽度。

如果要加一个搜索框，只需要在数组里加一个对象，例：

  {
    displayText: '新的搜索框',
    fieldName: 'New',
    inputType: 'text',
    size: 100,
  },

输出结果：

对于第二部分的无序列表，列表内容是通过读取dicom文件，存值到变量传递给TableRow组件的，组件源码如下：

   <TableRow
	     key={`${study.StudyInstanceUID}-${index}`}
	     onClick={StudyInstanceUID => handleSelectItem(StudyInstanceUID)}
	     AccessionNumber={study.AccessionNumber || ''}
	     modalities={study.modalities}
	     PatientID={study.PatientID || ''}
	     PatientName={study.PatientName || ''}
	     StudyDate={study.StudyDate}
	     StudyDescription={study.StudyDescription || ''}
	     StudyInstanceUID={study.StudyInstanceUID}
	     displaySize={displaySize}
   />

比较重要的几个点：
onClick：用于控制点击事件
PatientID：控制第一列灰色字段
PatientName：控制第一列白色字段
StudyDescription：控制第二列字段
modalities：控制第三列上边一行的字段
AccessionNumber：控制第三列下边一行的字段，默认为空字符串
StudyDate：控制第四列字段

对TableRow的参数稍作修改结果会更加直观：

<TableRow
	  key={`${study.StudyInstanceUID}-${index}`}
	  onClick={StudyInstanceUID => handleSelectItem(StudyInstanceUID)}
	  AccessionNumber='AccessionNumber'
	  modalities='modalities'
	  PatientID='PatientID'
	  PatientName='PatientName'
	  StudyDate='StudyDate'
	  StudyDescription='StudyDescription'
	  StudyInstanceUID='StudyInstanceUID'
	  displaySize={displaySize}
/>

显示结果：

列表初始情况下默认一页显示25个，这个数值是可以调整的，可以在代码里调整也可以在网页里调整。控制这个值的文件路径：platform/viewer/src/studylist/StudyListRoute.js文件，这个文件有一个rowsPerPage变量，使用了react函数式组件的useStatehook，源码初始值设为了25，因此默认一页显示25条数据，修改这个值即可修改每页显示的数据条数，如果点击页面底部靠左的下拉框，则会调用setRowsPerPage函数。