@anmed/flex-business-form

动态表单公共库

动态卡片

字段定义

每个字段包括以下属性

名称	说明	类型和默认值
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\"}"
}