动态表单公共库

动态卡片

字段定义

每个字段包括以下属性

| 名称 | 说明 | 类型和默认值 | |-------|------------------------------|---------------------| | name | 字段名称 | 字符型 | | label | 标签文字 | 字符型 | | code | 字段编码，备用的关联对象的属性值 | 字符型 | | mdmCode | 标准编码，关联的数据值，如果不存在，将使用code值关联 | 字符型 | | required | 必填 | 布尔，默认为false | | type | 类型 | 枚举型，系统支持的各种类型 | | colSpan | 跨列数 | 整数，默认为1 | | visibility | 展示方式 | 枚举，参考枚举值 Visibility | | readonly | 只读 | 布尔型，默认为false | | enable | 是否可用 | 布尔型，默认为true | | onChange | 值变化的处理函数名 | 字符型 | | attrs | 字段的其他属性 | 字符型 |

布局

卡片的布局，支持3中，分别为：

• 0 - 行列布局（暂时不支持）
• 1 - 流动布局
• 2 - 网格布局（暂时不支持）

流动布局

字段布局属性

| 名称 | 说明 | 类型和默认值 | |-----|-----|--------| | - | - | - |

流动布局示意

{
  "mode": 1,
  "layouts": [
    {
      "name": "证件类型",
      "label": "证件类型",
      "code": "idCardType",
      "mdmCode": "A00005",
      "required": true,
      "type": "OptionsSelector",
      "colSpan": 3,
      "visibility": 2,
      "readonly": false,
      "enable": true,
      "onChange": "onCardTypeChange",
      "attrs": {
        "options": "ops-card-type"
      }
    },
    {
      "name": "证件号码",
      "label": "证件号码",
      "code": "idCardNo",
      "mdmCode": "A00002",
      "required": true,
      "type": "TextEditor",
      "colSpan": 3,
      "visibility": 2,
      "readonly": false,
      "enable": true,
      "onChange": "onCardNoChange",
      "attrs": {
        "options": "ops-card-type"
      }
    },
    {
      "name": "性别",
      "label": "性别",
      "code": "gender",
      "mdmCode": "A00006",
      "required": true,
      "type": "OptionsSelector",
      "colSpan": 3,
      "visibility": 2,
      "readonly": false,
      "enable": true,
      "attrs": {
        "options": [
          {
            "code": "M",
            "text": "男性"
          },
          {
            "code": "F",
            "text": "女性"
          }
        ]
      }
    },
    {
      "name": "出生日期",
      "label": "生日",
      "code": "dob",
      "mdmCode": "A00008",
      "required": true,
      "type": "DateInput",
      "colSpan": 3,
      "visibility": 2,
      "readonly": false,
      "enable": true,
      "attrs": {
        
      }
    },
    {
      "name": "年龄",
      "label": "年龄",
      "code": "age",
      "mdmCode": "A00007",
      "required": true,
      "type": "NumberInput",
      "colSpan": 3,
      "visibility": 2,
      "readonly": true,
      "enable": true,
      "attrs": {
        
      }
    }
  ]
}

脚本

const NaIDCard = 1; // 身份证类型的编码

class PatientInfoCard extends BaseCard {
    constructor (data, form) {
        super(layouts, form);
        this.data = data;
    }

    /**
     * 当卡片类型发生变化的时候，根据类型设置生日和性别为只读或可编辑
     * @param value
     */
    onCardTypeChange(value) {
        if (value == NaIDCard) {
            this.card['dob'].readonly = true;
            this.card['gender'].readonly = true;
            this.data.dob = utils.parseDobFromCardNo(this.data.cardNo);
            this.data.gender = utils.parseGenderFromCardNo(this.data.cardNo);
            this.data.age = utils.calculateAge(this.data.dob);
        } else {
            this.card['dob'].readonly = false;
            this.card['gender'].readonly = false;
        }
    }
    
    onCardNoChange(value) {
        if (this.card.idCardType == NaIDCard) {
            this.data.dob = utils.parseDobFromCardNo(this.data.cardNo);
            this.data.gender = utils.parseGenderFromCardNo(this.data.cardNo);
            this.data.age = utils.calculateAge(this.data.dob);
        }
    }
    
    onDobChange(value) {
        this.data.age = utils.calculateAge(this.data.dob);
    }
    
    onNumOfBabiesChange(value) {
        if (numOfBabies > this.formData.babies) {
            for (let i = this.formData.babies.length; i<numOfBabies; i++) {
                let newborn = {};
                this.formData.babies.push(newborn);
                this.newbornCards.push(new ctx.NewbornCard(newborn), this);
            }
        } else if (numOfBabies < this.formData.babies) {
            this.formData.babies.splice(numOfBabies);
            this.newbornCard.splice(numOfBabies);
        }
    }
}

register('PatientInfoCard', PatientInfoCard);

动态表单

表单脚本

require(['PatientInfoCard', 'PatientHistoryCard', 'PatientContactCard', 'NewbornCard']);

class PatientForm extends BaseForm {
    
    constructor(formData) {
        super(formData);
        this.infoCard = new ctx.PatientInfoCard(formData.baseInfo, this);
        this.historyCard = new ctx.PatientHistoryCard(formData.history, this);
        this.contactInfoCard = new ctx.PatientContactCard(formData.contactInfo, this);
        this.newbornCards = this.buildNewbornCards(formData.babies);
    }
    
    getFormCards() {
        return [
            {
                title: '基本信息',
                cards: [this.infoCard, this.historyCard]
            },
            {
                title: '病史',
                cards: [this.historyCard]
            },
            {
                title: '新生儿信息',
                cards: [...this.newbornCards]
            }
        ]
    }
    
}

API接口

读取动态表单脚本

• URL: /flex-business-form/api/script?code=${your-form-code}&auxCode={your-aux-code}
• 返回数据

class PatientInfoCard extends BaseCard {
  
}

class PatientHistoryCard extends BaseCard {
  
}

class PatientContactCard extends BaseCard {
    
}

class NewbornCard extends BaseCard {
    
}

class QCStrokeForm extends BaseForm {
    
}

return QCStrokeForm;

读取动态表单布局

• URL: /flex-business-form/api/layouts?code=${your-form-code}&auxCode={your-aux-code}
• 返回数据

{
  "PatientInfoCard": "{\"mode\":\"0\"}",
  "PatientHistoryCard": "{\"mode\": \"0\"}"
}