aikang-common公共组件调用方法

本文链接： https://blog.csdn.net/milugloomy/article/details/84616168

开始使用

开始使用

因为aikang-common是一个基于vux的项目，所以调用aikang-common的项目也必须是基于vux的。

首先引入包：

npm install aikang-common

aikang-common包就安装好了，可以在node_modules-->aikang-common-->index.js中查看有哪些可以引用的组件，如下图：

Ajax组件

ajax组件以axios为基础，将调用后台接口的方法封装了一道。

引用方式：全局引用，在main.js中增加以下代码：

import { Ajax } from 'aikang-common'
Vue.use(Ajax, router)

其中，router是Vue的router对象，开发者需在自己的项目中维护router对象。

使用方法：

ajax组件提供了2个方法，ajaxform和ajaxjson，其中ajaxform是以form表单的方式提交参数，ajaxjson是以json的方式提交参数。这2个方法都绑定在了Vue的原型链上，可以通过this来调用这2个方法，this指向当前的Vue对象。

示例：

this.ajaxform('/chronic/patientRecord/select',{ 'param' : '123' }).then(res => {
  this.patientRecord = res.body
})
this.ajaxjson('/chronic/patientRecord/select',{ 'param' : '123' }).then(res => {
  this.patientRecord = res.body
})

Check组件

check组件提供了2个方法，inputLengthCheck和inputKeyCheck,分别是对字段长度和对字段类型进行校验。

引用方式：全局引用

  import check from 'aikang-common'
  Vue.use(check)

使用方法：

this指向当前的Vue对象。

inputLengthCheck为长度校验，第一个传参为字符串，第二个传参为限定的长度。以下方法输出结果为 '11111'

var res=this.check.inputLengthCheck('1111111111111', 5)

inputKeyCheck为字段类型校验，目前提供了以下几种字段校验：

cn：中文

en：英文

num：数字

其中第一个传参为字符串，第二个传参为校验类型，以下方法输出结果为 '1235'

var res=check.inputKeyCheck('1ab23ss中5', 'num')

JkdaPatient组件

该组件为患者端的健康档案功能。

全局引用，在main.js中：

import {ConfirmPlugin, DatetimePlugin}
Vue.use(ConfirmPlugin)
Vue.use(DatetimePlugin)

局部引用：

  import JkdaPatient from 'aikang-common'

  export default {
    components: {JkdaPatient }
  }

使用方法：在合适的地方引入这个组件即可

<jkda-patient></jkda-patient>

JkdaDoctor组件

该组件为医生端的健康档案功能。

引用方式：局部引用

  import JkdaDoctor from 'aikang-common'

  export default {
    components: { JkdaDoctor }
  }

使用方法：在合适的地方引入这个组件即可

<jkda-doctor></jkda-doctor>

PatientProtocol组件

该组件为患者端的用户协议

引用方式：局部引用

  import PatientProtocol from 'aikang-common'

  export default {
    components: { PatientProtocol }
  }

使用方法：在合适的地方引入这个组件即可

<patient-protocol></patient-protocol>

DoctorProtocol组件

该组件为医生端的用户协议

引用方式：局部引用

  import DoctorProtocol from 'aikang-common'

  export default {
    components: { DoctorProtocol }
  }

使用方法：在合适的地方引入这个组件即可

<doctor-protocol></doctor-protocol>

FileUpload组件

该组件用于上传文件。有2个方法，upload和uploadLargeImage。其中upload是正常上传图片，uploadLargeImage是压缩后再上传。

引用方式：局部引用

import { FileUpload } from 'aikang-common'

使用方法：

let param={
  'diskPath': 'patient/image/'
}
FileUpload.upload('/chronic/resource/imageAdd', file, param, (imageUrl) => {
  console.log(imageUrl)
})
// uploadLargeImage方法需添加quality参数
param.quality = 0.5
FileUpload.uploadLargeImage('/chronic/resource/imageAdd', file, param, (imageUrl) => {
  console.log(imageUrl)
})

其中，file是该文件对象，param是需上传的参数（参考接口文档），imageUrl是图片上传后生成的url。

若使用uploadLargeImage这个方法，param中需添加参数quality，quality表示压缩率，quality若不传，默认值为0.2。