REAL SHOWCASE SOURCElookup-edit
2 个文件 · 176 行 · TypeScript
// ===== showcase/src/examples/components/lookup_edit.ts ===== import { RenderFieldPresenter, RenderFormPanel, RenderLookupEdit, RenderPageHeader, RenderStackPanel, RenderText,} from 'ds-ui'import { diagnosisRows } from './selector_shared' const columns = [ { key: 'code', title: '院内编码', width: 98 }, { key: 'name', title: '诊断名称', width: 230 }, { key: 'icd', title: 'ICD-10', width: 100 }, { key: 'category', title: '分类', width: 100 },] export function createLookupEditExample(): RenderStackPanel { const status = new RenderText('输入名称、编码、ICD-10 或拼音首字母检索诊断') const form = new RenderFormPanel({ columns: 2, minColumnWidth: 300, labelWidth: 92, adaptive: true, columnGap: 18, rowGap: 14 }) form.addField(new RenderFieldPresenter({ label: '主要诊断', required: true, child: new RenderLookupEdit({ columns, rows: diagnosisRows, valueKey: 'code', labelKey: 'name', metaKey: 'icd', queryKeys: ['code', 'name', 'icd', 'category', 'py'], value: 'DX002', placeholder: '检索诊断', searchable: true, clearable: true, onChange: (_value, row) => { status.text = row ? `已选择:${row.name}(${row.icd})` : '主要诊断已清空' }, }), })) form.addField(new RenderFieldPresenter({ label: '次要诊断', child: new RenderLookupEdit({ columns, rows: diagnosisRows, valueKey: 'code', labelKey: 'name', metaFormatter: row => `${row.icd} · ${row.category}`, queryKeys: ['code', 'name', 'icd', 'py'], placeholder: '输入关键字查询', clearable: true, }), })) form.addField(new RenderFieldPresenter({ label: '校验状态', status: 'error', message: '出院诊断不能为空', validationDisplay: 'inline', child: new RenderLookupEdit({ columns, rows: diagnosisRows, valueKey: 'code', labelKey: 'name', status: 'error' }), })) form.addField(new RenderFieldPresenter({ label: '归档结果', child: new RenderLookupEdit({ columns, rows: diagnosisRows, valueKey: 'code', labelKey: 'name', value: 'DX004', readonly: true, suffixText: '已归档' }), })) const panel = new RenderStackPanel({ orientation: 'vertical', spacing: 18, crossAxisAlignment: 'stretch' }) panel.addChild(new RenderPageHeader({ title: 'LookupEdit 表格查询选择', description: '在可搜索表格中定位业务字典,并将编码、名称和元信息回填到字段。', })) panel.addChild(form) panel.addChild(status) panel.padding = 24 return panel} // ===== showcase/src/examples/components/selector_shared.ts ===== import type { GridColumnDef, TreeGridNode, TreeNode } from 'ds-ui' export interface DepartmentData { code: string py: string} export const departmentRoots: TreeNode<DepartmentData>[] = [ { key: 'clinical', label: '临床科室', selectable: false, data: { code: 'CLINICAL', py: 'lcks' }, children: [ { key: 'cardiology', label: '心血管内科', data: { code: 'CARD', py: 'xxgnk' } }, { key: 'respiratory', label: '呼吸与危重症医学科', data: { code: 'RESP', py: 'hxywzzyxk' } }, { key: 'neurology', label: '神经内科', data: { code: 'NEUR', py: 'sjnk' } }, ], }, { key: 'medical-technology', label: '医技科室', selectable: false, data: { code: 'TECH', py: 'yjks' }, children: [ { key: 'laboratory', label: '医学检验科', data: { code: 'LAB', py: 'yxjyk' } }, { key: 'radiology', label: '医学影像科', data: { code: 'RAD', py: 'yxyxk' } }, { key: 'pharmacy', label: '药学部', data: { code: 'PHARM', py: 'yxb' } }, ], },] export interface DiagnosisRow { code: string name: string icd: string category: string py: string} export const diagnosisRows: DiagnosisRow[] = [ { code: 'DX001', name: '急性上呼吸道感染', icd: 'J06.9', category: '呼吸系统', py: 'jxshxdgr' }, { code: 'DX002', name: '原发性高血压', icd: 'I10.x00', category: '循环系统', py: 'yfxgxy' }, { code: 'DX003', name: '2 型糖尿病', icd: 'E11.900', category: '内分泌', py: 'txgnb' }, { code: 'DX004', name: '冠状动脉粥样硬化性心脏病', icd: 'I25.103', category: '循环系统', py: 'gzdmzyyhxxzb' }, { code: 'DX005', name: '慢性阻塞性肺疾病', icd: 'J44.900', category: '呼吸系统', py: 'mxzsxfjb' },] export interface ExamRow { name: string code: string category: string price: number py: string} export const examColumns: GridColumnDef<ExamRow>[] = [ { type: 'text', key: 'name', title: '检查项目', width: 220, fixed: true }, { type: 'text', key: 'code', title: '项目编码', width: 100 }, { type: 'text', key: 'category', title: '类别', width: 92 }, { type: 'number', key: 'price', title: '价格', width: 82, align: 'right' },] export const examRoots: TreeGridNode<ExamRow>[] = [ { key: 'imaging', row: { name: '医学影像', code: 'IMG', category: '目录', price: 0, py: 'yxyx' }, selectable: false, children: [ { key: 'ct', row: { name: 'CT 检查', code: 'CT', category: '分类', price: 0, py: 'ctjc' }, selectable: false, children: [ { key: 'head-ct', row: { name: '头颅 CT 平扫', code: 'IMG301', category: 'CT', price: 280, py: 'tlctps' } }, { key: 'chest-ct', row: { name: '胸部 CT 平扫', code: 'IMG302', category: 'CT', price: 320, py: 'xbctps' } }, ], }, { key: 'ultrasound', row: { name: '超声检查', code: 'US', category: '分类', price: 0, py: 'csjc' }, selectable: false, children: [ { key: 'abdomen-us', row: { name: '腹部彩色多普勒超声', code: 'US201', category: '超声', price: 160, py: 'fbcs' } }, ], }, ], }, { key: 'laboratory-exam', row: { name: '医学检验', code: 'LAB', category: '目录', price: 0, py: 'yxjy' }, selectable: false, children: [ { key: 'blood-routine', row: { name: '血常规', code: 'LAB001', category: '检验', price: 26, py: 'xcg' } }, { key: 'crp', row: { name: 'C 反应蛋白', code: 'LAB002', category: '检验', price: 45, py: 'cfydb' } }, ], },]