调用：DetailList 背景：bg2.jpg

image.png
image.png
image.png

⚙ 配置

属性 说明 是否必需
headConfig 主明细表列头配置 YES
dataConfig 主明细表数据配置 YES
subHeadConfig 子明细表列头配置 NO
subDataConfig 子明细表数据配置 NO
actionConfig 操作列配置 NO
content 顶部信息 NO
checkType S\M\“”（单选\多选\不需要选择） NO
hasDefaultCheck 是否默认选中(单选：第一项，多选：全部） NO
defaultCheckedList checkType为M即多选时，默认选中序列的集合（数组），需
hasDefaultCheck为true才生效		 NO
needCheckAll 是否需要显示全选的勾选框，而非全部选中 NO
btnConfig 按钮栏配置 NO
searchConfig 搜索功能配置 NO
isLargeTable 是否为加高表格(true:表格及表头支持超出宽度自动换行及\n换行) NO
highlightArrow 是否支持高亮显示箭头 NO

整体配置范例

  1. function DetailList() {
  2.   var data = {
  3.     model: "Detailist",
  4.     config: {
  5.       shell: commonShellCfg,
  6.       bgImg: "bg2.jpg",
  7.             // 是否支持高亮显示箭头
  8.       highlightArrow:true,
  9.       // 是否为换行表格
  10.       isLargeTable:true,
  11.       // 是否默认选中(单选：第一项，多选：全部）
  12.       hasDefaultCheck: true,
  13.       defaultCheckedList:[0,2,3],
  14.       needCheckAll:true,
  15.       // 顶部信息
  16.       content: head_info({ billing: '1200元', total: '3000' }),
  17.       // content: "",
  18.       // 单选/多选/老子不需要  S | M | ""
  19.       checkType: "M",
  20.       // 一级列头配置
  21.       headConfig: [
  22.         {
  23.           tName: '处方号',
  24.           align: "left",
  25.           width: "220px"
  26.         },
  27.         {
  28.           tName: '开单时间',
  29.           align: "left"
  30.         },
  31.         {
  32.           tName: '开单科室'
  33.         },
  34.         {
  35.           tName: '开单医生',
  36.           // width: "80px"
  38.         },
  39.         {
  40.           tName: '处方名称'
  41.         },
  42.         {
  43.           tName: '总金额'
  44.       }],
  45.       subHeadConfig: [
  46.       {
  47.         tName: '项目名称',
  48.         align: "left",
  49.       },
  50.       {
  51.         tName: '单位',
  52.         width: "80px"
  53.       },
  54.       {
  55.         tName: '单价',
  56.       },
  57.       {
  58.         tName: '数量',
  59.       },
  60.       {
  61.         tName: '总价',
  62.       }],
  63.       dataConfig: [
  64.         ["无锡吉宝·灡岸名邸·六期住宅", "2019-07-25", "内科门诊", "陈丽↑", "西药方", "300.00元"],
  65.         ["无锡吉宝·灡岸名邸·六期住宅·六期住宅", "2019-07-25", "内科门诊", "陈丽↓", "西药方", "300.00元"],
  66.         ["无锡吉宝\n灡岸名邸·六期住宅·六期住宅", "2019-07-25", "内科门诊", "陈丽", "西药方", "300.00元"],
  67.         ["无锡吉宝\n灡岸名邸·六期住宅", "2019-07-25", "内科门诊", "陈丽", "西药方", "300.00元"],
  68.         ["无锡吉宝\n灡岸名邸·六期住宅", "2019-07-25", "内科门诊", "陈丽", "西药方", "300.00元"],
  69.         ["无锡吉宝\n灡岸名邸·六期住宅", "2019-07-25", "内科门诊", "陈丽", "西药方", "300.00元"],
  70.         ["无锡吉宝\n灡岸名邸·六期住宅", "2019-07-25", "内科门诊", "陈丽", "西药方", "300.00元"],
  71.         // ["无锡吉宝\n灡岸名邸·六期住宅", "2019-07-25", "内科门诊", "陈丽", "西药方", "300.00元"],
  72.         // ["无锡吉宝\n灡岸名邸·六期住宅", "2019-07-25", "内科门诊", "陈丽", "西药方", "300.00元"],
  73.         // ["20190725C20001", "2019-07", "内科门诊", "陈丽", "西药方", "100.00元"],
  74.         // ["20190725C20001", "2019-07-25", "内科门诊", "陈丽", "西药方", "200.00元"],
  75.         // ["20190725C20001", "2019-07-25", "内科门诊", "陈丽", "西药方", "300.00元"],
  76.         // ["20190725C20001", "2019-07-25", "内科门诊", "陈丽", "西药方", "50.00元"],
  77.         // ["20190725C20001", "2019-07-25", "内科门诊", "陈丽", "西药方", "50.00元"],
  78.         // ["20190725C20001", "2019-07-25", "内科门诊", "陈丽", "西药方", "50.00元"],
  79.         // ["20190725C20001", "2019-07-25", "内科门诊", "陈丽", "西药方", "20.00元"],
  80.         ["20190725C20001", "2019-07-25", "内科门诊", "陈丽", "西药方", "22.00元"],
  81.         ["20190725C20001", "2019-07-25", "内科门诊", "陈丽", "西药方", "11.00元"],
  82.         ["20190725C20001", "2019-07-25", "内科门诊", "陈丽", "西药方", "3.00元"],
  83.       ],
  84.       subDataConfig: [
  85.         [
  86.           ["硫酸庆大霉素注射液", "支", "1.00", "2.0000", "2.00"],
  87.           ["硫酸庆大霉素注射液", "支", "1.00", "2.0000", "2.00"],
  88.           ["硫酸庆大霉素注射液", "支", "1.00", "2.0000", "2.00"],
  89.           ["硫酸庆大霉素注射液", "支", "1.00", "2.0000", "2.00"],
  90.           ["硫酸庆大霉素<span>注射液</span>", "支", "1.00", "2.0000", "2.00"],
  91.           ["硫酸庆大霉素注射液", "支", "1.00", "2.0000", "2.00"],
  92.           ["硫酸庆大霉素注射液", "支", "1.00", "2.0000", "2.00"],
  93.           ["硫酸庆大霉素注射液", "支", "1.00", "2.0000", "2.00"],
  94.           ["硫酸庆大霉素注射液", "支", "1.00", "2.0000", "2.00"],
  95.           ["硫酸庆大霉素注射液", "支", "1.00", "2.0000", "2.00"],
  96.           ["硫酸庆大霉素注射液", "支", "1.00", "2.0000", "2.00"],
  97.         ],
  98.         [
  99.           ["硫酸庆大霉素注射液", "支", "1.00", "2.0000", "2.00"],
  100.           ["硫酸庆大霉素注射液", "支", "1.00", "2.0000", "2.00"],
  101.         ],
  102.         [
  103.           ["彩色多普勒", "支", "1.00", "2.0000", "2.00"],
  104.         ]
  105.       ],
  106.       btnConfig: {
  107.         label: "详情",
  108.         /** 谨慎：搜索更新数据后注意不要数组越界，否则报错！ */
  109.         disabled: [5, 7],
  110.         // labelList:["预约","取消"],
  111.         // 点击按钮回调函数，如不配置且配置了子表格数据则弹出子表
  112.         // onClick: function (value) {
  113.         //   console.log(value)
  114.         // }
  115.       },
  116.       searchConfig: {
  117.         //两种赋值方式
  118.         //handleSearch:"detailsearch",
  119.         /**
  120.          * 更新表格内容
  121.          * @param {string} str 输入框内容
  122.          * @return {object} 
  123.          */
  124.         handleSearch: function (str) {
  125.           console.log('获取输入框内容：', str);
  126.           return {
  127.             //必选
  128.             dataConfig: [
  129.               ["20190725C20001", "2019-07-25", "内科门诊", "陈丽", "西药方", "300.00元"],
  130.               ["20190725C20001", "2019-07-25", "内科门诊", "陈丽", "西药方", "100.00元"],
  131.             ],
  132.             // 可选
  133.             subDataConfig: [
  134.               [
  135.                 ["硫酸庆大霉素注射液", "支", "1.00", "2.0000", "2.00"],
  136.                 ["硫酸庆大霉素注射液", "支", "1.00", "2.0000", "2.00"],
  137.               ],
  138.             ]
  139.           }
  140.         },
  141.       }
  142.     }
  143.   }
  144.   return data
  145. }
  148. function detailsearch(str)
  149. {
  150.   console.log('获取输入框内容：', str);
  151.   return {
  152.     //必选
  153.     dataConfig: [
  154.       ["20190725C20001", "2019-07-25", "内科门诊", "陈丽", "西药方", "300.00元"],
  155.       ["20190725C20001", "2019-07-25", "内科门诊", "陈丽", "西药方", "100.00元"],
  156.     ],
  157.     // 可选
  158.     subDataConfig: [
  159.       [
  160.         ["硫酸庆大霉素注射液", "支", "1.00", "2.0000", "2.00"],
  161.         ["硫酸庆大霉素注射液", "支", "1.00", "2.0000", "2.00"],
  162.       ],
  163.     ]
  164.   }
  165. }

isLargeTable

  1. // 是否为换行表格(true:表格及表头支持超出宽度自动换行及\n换行)
  2. isLargeTable:false,

highlightArrow

  1. // 是否支持高亮显示箭头
  2. highlightArrow:false,

headConfig

  1. // 【必填】主表的表头
  2. headConfig:[
  3.   {
  4.     // 【必填】表头名称
  5.     tName: '处方号',
  6.     // 【选填】对齐方式，若传入则按你的方式来，不传，默认居中
  7.     align: "left",
  8.     // 【选填，最好不填】宽度，指定该列宽度。其余未指定宽度的将自适应，该列不参与。
  9.     // 建议：指定宽度的列最好不要超过2列
  10.     width: "200px",
  11.   },
  12. ]

subHeadConfig

  1. // 【选填】详细表的表头，需要就看下面，不需要就不传
  2. subHeadConfig:[
  3.   {
  4.     // 【必填】表头名称
  5.     tName: '项目名称',
  6.     // 【选填】对齐方式，若传入则按你的方式来，不传，默认居中
  7.     align: "left",
  8.     // 【选填，最好不填】宽度，指定该列宽度。其余未指定宽度的将自适应，该列不参与。
  9.     // 建议：指定宽度的列最好不要超过2列
  10.     width: "200px",
  11.   },
  12. ]

dataConfig

  1. // 【必填】主表内容
  2. // 该配置为二维数组，每一项代表一条记录，每条记录的长度需要 == headConfig.length
  3. bodyConfig:[
  4.   ["20190725C20001", "内科门诊", "管理员", "2.00", "西药方", "2019-07-25"],
  5.   ["20190725C20001", "兽科门诊", "饲养员", "2.00", "中成方", "2019-07-25"],
  6.   ... ...
  7. ]

subDataConfig

  1. // 【选填】详细表内容，若不传或为空，则不出现最后一列所以没有详情按钮
  2. // 子表是一个三维数组，约定与主表的约定相同
  3. subBodyConfig:[
  4.   [
  5.     ["硫酸庆大霉素注射液","支","1.00","2.0000","2.00"],
  6.     ["硫酸庆大霉素注射液","支","1.00","2.0000","2.00"],
  7.     ["硫酸庆大霉素注射液","支","1.00","2.0000","2.00"],
  8.     ["硫酸庆大霉素注射液","支","1.00","2.0000","2.00"],
  9.     ["硫酸庆大霉素注射液","支","1.00","2.0000","2.00"],
  10.     ["硫酸庆大霉素注射液","支","1.00","2.0000","2.00"],
  11.     ["硫酸庆大霉素注射液","支","1.00","2.0000","2.00"],
  12.     ["硫酸庆大霉素注射液","支","1.00","2.0000","2.00"],
  13.     ["硫酸庆大霉素注射液","支","1.00","2.0000","2.00"],
  14.   ],
  15.   [
  16.       [... ...],
  17.     [... ...],
  18.   ],
  19.   ... ...
  20. ]

actionConfig（正在调整）

  1. //非必要配置，可省略，将不出现除详情（称为操作按钮）的额外按钮，反之出现
  2. actionConfig: {
  3.   // 操作按钮的统一事件
  4.   uniClick: "getCurrentItem",
  5.   // 哪些项时没有统一操作事件的
  6.   disabledIndex: [0,1,5,8],
  7.   // 对齐方式，参照 subHeadConfig 配置
  8.   align: 'center',
  9.   // 宽度，后期移除，暂时保留
  10.   width: '180px',
  11.   // 操作按钮的显示文字
  12.   btnLable: '操作'
  13. }
  15. function getCurrentItem(obj){
  16.   console.log(obj)
  17. }

content

  1. //表格上方文字，非必要配置
  2. content: head_info({billing: '120.2元',total: '30021.2E'}),
  4. function head_info(obj){
  5.   return '<span className="userName" style="flex: 1 1;">小计费用：<b>' + obj.billing + '</b></span><span className="userAccount" style="flex-basis: 70%">入院总费用：<b>' + obj.total + '</b></span>'
  6. }

checkType

  1. // 选择器类型，该属性不设置或为""时则无勾选功能，S：单选|M：多选
  2. checkType: "S",

hasDefaultCheck

  1. // 是否默认选中(单选：第一项，多选：全部）
  2. hasDefaultCheck: true,

defaultCheckedList

  1. // checkType为M即多选时，默认选中序列的集合（数组），需hasDefaultCheck为true才生效
  2. defaultCheckedList:[0,2,3],

needCheckAll

  1. // 是否需要显示全选的勾选框，而非全部选中
  2. needCheckAll: true,

btnConfig

  1. // 所有属性都是【选填】，包括btnConfig
  2. btnConfig: {
  3.   // 按钮文案
  4.   label: "详情",
  5.   // 禁用下列行的按钮
  6.   disabled: [0, 1, 4],
  7.   // 按钮可重新定义文字，不配置则显示label所配置的内容
  8.   labelList:["预约","取消"],
  9.   // 自定义点击事件
  10.   // 特别的，当该字段不传或传空，将默认打开子表模态框，否则传入一个下标。
  11.   // 支持两种模式：字符串引用 | 匿名函数
  12.   onClick: function (value) {
  13.       console.log(value)
  14.   }
  15. },

searchConfig

  1. searchConfig: {
  2.   //两种赋值方式
  3.   //handleSearch:"detailsearch",
  4.   /**
  5.          * 更新表格内容
  6.          * @param {string} str 输入框内容
  7.          * @return {object} 
  8.          */
  9.   handleSearch: function (str) {
  10.     console.log('获取输入框内容：', str);
  11.     return {
  12.       //必选
  13.       dataConfig: [
  14.         ["20190725C20001", "2019-07-25", "内科门诊", "陈丽", "西药方", "300.00元"],
  15.         ["20190725C20001", "2019-07-25", "内科门诊", "陈丽", "西药方", "100.00元"],
  16.       ],
  17.       // 可选
  18.       subDataConfig: [
  19.         [
  20.           ["硫酸庆大霉素注射液", "支", "1.00", "2.0000", "2.00"],
  21.           ["硫酸庆大霉素注射液", "支", "1.00", "2.0000", "2.00"],
  22.         ],
  23.       ]
  24.     }
  25.   },
  27. }

♨️ JS Call

🚀 getData

返回数据格式：

  1. [
  2.   {
  3.     //所选项索引号
  4.     index:0,
  5.     //所选项数据内容
  6.     result:[...]
  7.   },...
  8. ]