REAL SHOWCASE SOURCEdrop-tree-grid-edit

2 个文件 · 171 行 · TypeScript

// ===== showcase/src/examples/components/drop_tree_grid_edit.ts ===== import {  RenderDropTreeGridEdit,  RenderFieldPresenter,  RenderFormPanel,  RenderPageHeader,  RenderStackPanel,  RenderText,} from 'ds-ui'import { examColumns, examRoots } from './selector_shared' export function createDropTreeGridEditExample(): RenderStackPanel {  const status = new RenderText('弹出层支持树形展开、列信息查看、搜索和右下角拖动调整尺寸')  const form = new RenderFormPanel({ columns: 2, minColumnWidth: 320, labelWidth: 96, adaptive: true, columnGap: 18, rowGap: 14 })   form.addField(new RenderFieldPresenter({    label: '检查项目',    required: true,    child: new RenderDropTreeGridEdit({      columns: examColumns,      roots: examRoots,      treeColumnKey: 'name',      labelKey: 'name',      metaFormatter: node => `${node.row.code} · ¥${node.row.price}`,      value: 'chest-ct',      placeholder: '检索检查目录',      searchable: true,      clearable: true,      expandedKeysOnOpen: ['imaging', 'ct', 'laboratory-exam'],      queryTextBuilder: node => [node.key, node.row.name, node.row.code, node.row.category, node.row.py],      onChange: (_value, node) => { status.text = node ? `已选择:${node.row.name}(${node.row.code})` : '检查项目已清空' },    }),  }))  form.addField(new RenderFieldPresenter({    label: '追加项目',    child: new RenderDropTreeGridEdit({      columns: examColumns,      roots: examRoots,      treeColumnKey: 'name',      labelKey: 'name',      metaKey: 'code',      placeholder: '按名称或编码搜索',      clearable: true,      expandAllOnOpen: true,      queryTextBuilder: node => [node.row.name, node.row.code, node.row.py],    }),  }))  form.addField(new RenderFieldPresenter({    label: '校验状态',    status: 'error',    message: '医嘱至少需要一个检查项目',    validationDisplay: 'inline',    child: new RenderDropTreeGridEdit({ columns: examColumns, roots: examRoots, treeColumnKey: 'name', labelKey: 'name', status: 'error' }),  }))  form.addField(new RenderFieldPresenter({    label: '归档项目',    child: new RenderDropTreeGridEdit({ columns: examColumns, roots: examRoots, treeColumnKey: 'name', labelKey: 'name', value: 'blood-routine', readonly: true, suffixText: '已归档' }),  }))   const panel = new RenderStackPanel({ orientation: 'vertical', spacing: 18, crossAxisAlignment: 'stretch' })  panel.addChild(new RenderPageHeader({    title: 'DropTreeGridEdit 树表格选择',    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' } },    ],  },]