主题换肤：替换默认颜色

步骤

在faceConfig.js中添加配置项目：defaultTheme 即可

自定义每个组件的默认size

步骤

在入口文件中添加以下代码

Vue.prototype.$ELEMENT = {
  size: 'large', // 全局size，如果组件的size存在默认值，则会使用这个值替代默认值
  button: { // button及button-group的size
    size: 'large' // large,small,default
  },
  avatar: { // avatar的size
    size: 'large'
  },
  cascader: {// cascader 的size指的是cascader中的input输入框的size，这个值会被全局size及input单独设置的size覆盖
    size: 'large'
  },
  'date-picker': { // date-picker的size，影响所有日期组件，包括：date-picker,month-picker,range-picker,week-picker,year-picker,quarter-picker
    size: 'large'
  },
  'dropdown-button': { // dropdown-button的size，这个值不会被button的size覆盖
    size: 'large'
  },
  input: { // input 的size
    size: 'large'
  },
  'input-number': { // input-number的size
    size: 'large'
  },
  list: { // list的size
    size: 'large'
  },
  radio: {
    size: 'large'
  },
  select: {
    size: 'large'
  },
  skeleton: {
    size: 'large'
  },
  spin: {
    size: 'large'
  },
  steps: { // steps的size参数
    size: 'large'
  },
  switch: { // switch的size参数
    size: 'large'
  },
  table: { // table的size参数
    size: 'small'
  },
  tabs: { // tabs的size参数，实际生效于tabs-bar
    size: 'large'
  },
  'tag-select': { // tag-select的size
    size: 'small'
  },
  'tree-select': { // tree-select的size参数
    size: 'large'
  }
}

注意

所有组件均包含large、default、small3种大小
优先级如下：标签上的size属性>$ELEMENT['component'].size>$ELEMENT.size>default
某些组件的size可能会被其他组件的size设置影响，

在WebStorm中编写vue文件时智能提示@hsa/hsa-ui的标签

由于这个功能标签及其属性、文档智能提示使用的是WebStorm提供的web-types功能，此功能从两方面来实现。

模块的packagejson文件中的web-types字段指向包含指定格式的web-types.json文件
WebStorm的IDE支持。

系统要求

@hsa/hsa-ui需要1.2.1-7版本及以上，此版本开始，发布包中会自动包含web-types的支持
WebStorm需要2019.3以上（仅测试2019.3，理论上，2019.1-2019.2也是支持的）
IDEA或其他JetBrains全家桶需要2019.3以上（仅测试IDEA2019.3，理论上2019.1-2019.2也是支持的，同时理论上支持其他JetBrains全家桶），同时，需要安装Vue.js插件

步骤

打开设置,依次点击,Language & Frameworks -> JavaScript -> Libraries,显示如下
点击Manage Scope...按钮后,出现如下的界面。点击+按钮,然后选择到 项目根目录/node_modules/@hsa/hsa-ui目录
此时,WebStorm会自动检索该目录,以生成index文件缓存,稍等片刻即可。
索引完成后,打开vue文件，即可开始输入标签。如下所示

优点

无需安装插件，降低WebStorm崩溃的概率
使用WebStorm自有功能，没有依赖
与@hsa/hsa-ui版本无关
可用于任何依赖：前提是这个模块实现了web-types

缺点

在使用前必须执行npm install
在使用前必须执行npm install
在使用前必须执行npm install

注意

在npm install之后，WebStorm需要一段时间来进行index，并且，在index之后需要一小段时间（不超过3分钟）来进行后台分析等操作。在此段时间内，无法使用标签智能提示功能。

布局组件

基础用法

<template>
    <layout @reset="reset" @onSave="onSave" >
       <!-- ... -->
    <layout/>
</template>
<script>
import layout from '@project/component/layout'
export default {
    components: { layout },
    methods: {
        reset(){},
        onSave(){}
    }
}
</script>

属性

参数	说明	类型	默认值
reset	表单重置回调函数｜ Function ｜ null ｜
onSave	表单提交回调函数｜ Function ｜ null ｜

路由配置

例如：

src\scopes\project\N01\N0107\router\routes.js
//配置N010713这个页面的路由
//引入页面
import N010713 from '../N010713/routes'
//解构
const innerRoutes = [
  ...N010713
]
在menuConfig.js里面配置菜单路径
{
 orderNo: 9,
 name: '转入基金确认',
 id: '1-7-9',
 url: 'N0107.html#/N010713'
}

接口请求

调用公共方法

//疑似处理表单类请求，部分请求无法成功
Base.submit( null, {
  url: '/web/maternityCommonController/queryMatnTrtRegInfo?psnNo='+val,
  method:'GET'
}).then((res) => {
  if(res.code=== 0){
    this.perSonInfo = res.data[0]
  }
  console.log(res);
})
可使用封装好的request请求
//举例类似医保项目里面封装的请求
queryMatnTrtRegInfo(params).then(res=>{
  console.log(res)
})

综柜前端开发步骤及公共模块方法说明

1.前端开发步骤说明

该说明仅供参考，请根据各模块实际功能作调整。可参考N040501，N040603，N040604，N040606vue等页面。

(1)获取参数并判断页面进入方式

分为两种业务，

正常业务：正常业务是指用户在正常情况下不从综合柜台进去办理业务，指的是正常业务
综柜系统业务:是综合柜台系统里面的待办列表进去核心业务里面去进行业务处理。
他采iframe进行页面把用户信息放在url上进行参数传递，因此，通过url传参判断模块为菜单列表正常进入还是从综柜系统待办列表进入。
获取参数方法及判断页面进入方式采用minxin混入方式

2.(1)itsMixin混入

Url参数案例：woId=20201218715&instId=20201217498&acpId=202012171683&routId=20201216420&sysNo=189212001&mattSoucName=柜台受理&bizCode=MZFYBX&bizAcpNo=S4202012170093&bizId=202012126&bizTypeId=202012128&objType=0&objId=1000837068&wflwId=20201216132&wflwCode=MZFYBX&wflwName=门诊费用报销&nodeId=20201216433&nodeCode=MZFYBX03&nodeName=结算&ptcpId=99000000000000000000003170&ptcpCertType=01&ptcpCertno=446246199012129022&ptcpName=测试3085&ptcpType=0&ptcpPoolarea=2100&conerName=唐有&conerMob=13366668888

(2)获取收单/受理信息

根据各业务模块填入收单号或者身份证号码，自动获取收单/受理相关业务信息填入相关表单中。

2.前端公共模块说明

(1)itsMixin混入

1)使用方法

mport itsMixin from '@common/js/mixins/itsMixin'
mixins: [itsMixin],

(2)data

参数  说明  类型  默认值
itsBusinessInfo 业务信息参数  Object  {}
itsAbnormalEntry  是否异常进入，即从综柜待办列表进入 Boolean false
itsOcrData  电子档案ocr所需信息 Object  {}
3)函数
名称  说明  使用  参数
fnAbnormalCreate  综合业务进入create生命周期执行函数  fnAbnormalCreate()  null
4)方法
名称  说明  使用  参数
closeIframe 与父页面通信，关闭iframe closeIframe(msg, msgFlag) msg：关闭iframe后父页弹出的消息，可以传null表示不弹出任何消息
msgFlag：0表示不刷新待办列表，1表示刷新待办列表，2表示不关闭iframe并在下次关闭iframe时刷新待办列表，默认1
verifyTask  工作流任务提交校验方法，综柜模式下校验业务是否已处理，正常模式下不校验 verifyTask(func, errFunc) func：回调函数，综柜模式下校验业务未被处理时执行；正常模式下直接执行。
errFunc：回调函数，综柜模式下，校验请求错误时执行。
verifyIsItsBusiness 校验是否综柜业务方法，正常模式下校验业务是否为综柜办理业务，综柜模式下不校验  verifyIsItsBusiness(objType, objId, func, errFunc)  objType：暂时各模块写死
objId：受理单号
func：回调函数，正常模式下校验业务为非综柜业务时执行；综柜模式下直接执行。
errFunc：回调函数，正常模式下，校验请求错误时执行。
verifyItsAll  综合verifyTask及verifyIsItsBusiness，正常模式下校验业务是否为综柜办理业务，综柜模式下校验业务是否已处理  verifyItsAll(objType, objId, func, errFunc) 同上。

(2)工具栏抽屉组件itsToolbar

1)使用方法

2)属性

参数  说明  类型  默认值
its-display 是否展示默认操作  Boolean true
business-info 业务受理信息，即从url中获取的信息  Object  {}
ocr-data  必须，ocr识别所需信息，具体包含信息看下表  Object 
show-upload 是否显示‘档案上传’操作  Boolean false
show-view 是否显示‘档案查看’操作  Boolean false
upload-ocr-listener ‘档案上传’时是否开启ocr识别监听  Boolean false
view-ocr-listener ‘档案查看’时是否开启ocr识别监听  Boolean false

3)slot

参数  说明  类型  默认值
drawerHeader  底部固定栏插槽  
drawerFooter  底部固定栏插槽  
4)方法
名称  说明  使用  参数
onClose 关闭工具栏抽屉  null

取值和赋值操作

getFieldValue,setFieldsValue等常用的API见hsa-ui组件使用文档：

引入的外部组件库

src\common\js\modules

// 码表工具
import collectionUtil from '@hsa/hsa-ui/es/utils/js/collectionUtil'
// cookie处理工具
import cookieUtil from '@hsa/hsa-ui/es/utils/js/cookie.util'
// 跨域处理工具
import '@hsa/hsa-ui/es/utils/js/crossDomain'
// 下载工具
import downloadFile from '@hsa/hsa-ui/es/utils/js/downloadFile'
// dom处理工具
import elementUtil from '@hsa/hsa-ui/es/utils/js/element.util'
// 系统信息获取工具
import systemInfo from '@hsa/hsa-ui/es/utils/js/environment'
// 表单提交工具
import formUtil from '@hsa/hsa-ui/es/utils/js/form.util'
// 打印工具
import getLodop from '@hsa/hsa-ui/es/utils/js/LodopFuncs'
// 日期处理工具
import momentUtil from '@hsa/hsa-ui/es/utils/js/moment.util'
// 对象处理工具
import objectUtil from '@hsa/hsa-ui/es/utils/js/object.util'
// 拼音过滤工具
import pinyin from '@hsa/hsa-ui/es/utils/js/pinyin'
// 排序工具
import sorter from '@hsa/hsa-ui/es/utils/js/sorter'
// url处理工具
import urlUtil from '@hsa/hsa-ui/es/utils/js/url.util'
// 缓存处理工具
import webStorage from '@hsa/hsa-ui/es/utils/js/webStorage'
// 各种弹出框工具
import windowUtil from '@hsa/hsa-ui/es/utils/js/window.util'
// 加密工具
import encryption from '@hsa/hsa-ui/es/utils/js/encryption/index'

更多基本组件请直接对照项目引入处的组件，按需引入

工具类函数和方法

src\common\js\hsaUtils

项目混入Mixins

src\common\js\mixins

已引入依赖

"@ant-design/icons": "^1.1.15",
    "@babel/runtime": "^7.6.3",
    "@hsa/hsa-ui": "1.1.3-12",
    "@ncp-web/portal-communication": "^0.2.3",
    "@wcjiang/notify": "^2.0.12",
    "@yh/icons-svg": "file:./lib/icons-svg-4.0.1.tgz",
    "axios": "^0.18.0",
    "codemirror": "^5.22.0",
    "core-js": "^2.6.9",
    "echarts": "^4.5.0",
    "file-saver": "^2.0.2",
    "ie-placeholder": "^1.0.0",
    "js-cookie": "^2.2.1",
    "js-file-download": "^0.4.12",
    "moment": "^2.24.0",
    "pretty": "^2.0.0",
    "qs": "^6.5.2",
    "tinymce": "^4.9.2",
    "vue": "2.5.17",
    "vue-bus": "^1.2.1",
    "vue-code-diff": "0.0.4",
    "vue-codemirror": "^4.0.6",
    "vue-codemirror-lite": "^1.0.4",
    "vue-cookies": "^1.5.7",
    "vue-grid-layout": "^2.3.4",
    "vue-json-editor": "^1.4.3",
    "vue-router": "~3.0.1",
    "vuex": "^3.0.1",
    "xlsx": "^0.16.8"

已引入开发依赖

"@babel/core": "^7.0.0",
    "@babel/plugin-proposal-class-properties": "^7.2.3",
    "@babel/plugin-proposal-decorators": "^7.0.0",
    "@babel/plugin-proposal-export-namespace-from": "^7.0.0",
    "@babel/plugin-proposal-function-sent": "^7.0.0",
    "@babel/plugin-proposal-json-strings": "^7.0.0",
    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.7.4",
    "@babel/plugin-proposal-numeric-separator": "^7.0.0",
    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
    "@babel/plugin-proposal-optional-chaining": "^7.7.5",
    "@babel/plugin-proposal-throw-expressions": "^7.0.0",
    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
    "@babel/plugin-syntax-import-meta": "^7.0.0",
    "@babel/plugin-syntax-jsx": "^7.0.0",
    "@babel/plugin-transform-arrow-functions": "^7.2.0",
    "@babel/plugin-transform-object-assign": "^7.0.0",
    "@babel/polyfill": "^7.7.0",
    "@babel/preset-env": "^7.0.0",
    "@babel/register": "^7.0.0",
    "antd-theme-generator": "^1.1.6",
    "autoprefixer": "^7.1.2",
    "babel-eslint": "^9.0.0",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-loader": "^8.0.0",
    "babel-plugin-import": "^1.12.2",
    "babel-plugin-transform-vue-jsx": "^4.0.1",
    "case-sensitive-paths-webpack-plugin": "^2.2.0",
    "chalk": "^2.0.1",
    "concurrently": "^4.1.0",
    "copy-webpack-plugin": "^4.0.1",
    "cross-env": "^5.2.0",
    "css-loader": "^3.0.0",
    "css-split-webpack-plugin": "^0.2.6",
    "css-vars-ponyfill": "^2.0.2",
    "eslint": "^5.8.0",
    "eslint-config-standard": "^13.0.1",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-node": "^8.0.0",
    "eslint-plugin-promise": "^4.0.1",
    "eslint-plugin-standard": "^3.0.1",
    "eslint-plugin-vue": "^4.7.1",
    "express": "^4.16.3",
    "file-loader": "^2.0.0",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "glob": "^7.1.2",
    "html-webpack-plugin": "^4.0.0-beta.4",
    "less": "^3.13.0",
    "less-loader": "^5.0.0",
    "mini-css-extract-plugin": "^0.5.0",
    "mockjs": "^1.0.1-beta3",
    "node-notifier": "^5.1.2",
    "optimize-css-assets-webpack-plugin": "^3.2.0",
    "ora": "^1.2.0",
    "portfinder": "^1.0.13",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.8",
    "postcss-url": "^7.2.1",
    "regenerator-runtime": "^0.13.3",
    "rimraf": "^2.6.0",
    "sass-resources-loader": "^1.3.3",
    "scopedcss": "^0.1.4",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "terser-webpack-plugin": "^2.3.5",
    "url-loader": "^0.5.8",
    "vue-highlightjs": "^1.3.3",
    "vue-loader": "^15.5.0",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "2.5.17",
    "webpack": "^4.26.0",
    "webpack-bundle-analyzer": "3.0.3",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.10",
    "webpack-merge": "4.1.4",
    "webpack-war-plugin": "^1.0.0-beta.3"

常用组件

基层行政区划公共查询组件

<template>
  <div>   
     <areacomponent v-model="comuSearch" />
  </div>
</template>
<script>
import areacomponent from '@project/component/areacomponent'
export default {,
  components: { areacomponent },
  data () {
    return {
      //输入框查询
      comuSearch: {}
    }
  },
  // 如下：监听可将输入框查到的值，放到人员基本信息展示card里面,进行展示
  watch: {
      comuSearch: {
      handler: function (val, old) {
      }
    }
  }
</script>

审核组件使用说明

基本用法

<template>
  <div>   
        <!--单个审核 也可以取消外层的ta-form，直接放入其他的表单使用-->
      <ta-form :autoFormCreate="(form)=>{this.auditForm= form}">
        <auditcomponnet :auditTitle="auditTitle"></auditcomponnet>
      </ta-form>
        <!--批量审核 auditMessage返回的审核结果-->
       <batchauditcomponnet v-model="auditMessage" :auditTitle="auditTitle"></batchauditcomponnet>
  </div>
</template>
<script>
import auditcomponnet from '@project/component/auditcomponnet/auditcomponnet.vue'
// 批量审核引入
import batchauditcomponnet from '@project/component/auditcomponnet/batchauditcomponnet.vue'
export default {
  name: 'exportData',
  // 注册
  components: { auditcomponnet, batchauditcomponnet },
  data () {
    return {
      <!--批量审核 auditMessage返回的审核结果-->
      auditMessage: {
        // 勾选数据的长度，小于1不打开
        listLength: 0
      },
       <!--批量审核或单个审核 auditTitle默认为审核相关，复核时传入如下对象-->
      auditTitle: {
        // 单个审核可不传入butTitle和title
        butTitle: '批量复核',
        title: '批量复核',
        auditStasTitle: '复核标志',
        auditMsgTitle: '复核意见'
      },
        //行选择配置
        rowSelection: {
          //控制选项的属性需要和 onChange 进行配合
          selectedRowKeys: [],
          //行选择改变事件
          onChange: this.onSelectChange,
          // 选择框的默认属性配置
          getCheckboxProps: this.fnGetCheckboxProps
        }
    }
  },
  // 如下：行选择事件后面加上最后一句
  methods: {
     fnGetAudit: {
       // 获取单个审核的信息
       let auditMsg = this.auditForm.getFieldsValue()
     },
    //点击选项改变触发事件,传入当前选中的所有选项,以及行
     onSelectChange (selectedRowKeys, selectedRows) {
       //设置选中项为点击选中的项
       this.rowSelection.selectedRowKeys = selectedRowKeys
       // -- 这句话必须加上，必须要勾选数据才能进行批量操作 
       auditMessage.listLength = selectedRowKeys.length
     },
    },
    // 父页面也在监听里面，判断是否需要提交到后台
        // 对批量复核进行监听
        auditMessage: {
          handler: function (val, old) {
            if (val.flag == 1) {
              /* 组装复核信息并提交后台*/
            }
          },
          deep: true
        }
  }
</script>

参数	说明	类型	默认值
auditMessage	返回的对象	Object	{listLength: 0}
auditTitle	标题的title	Object	{butTitle: '批量审核',title: '批量审核',auditStasTitle: '审核标志',auditMsgTitle: '审核意见'}

返回值说明:

参数	说明	类型	默认值
auditStas	审核标志	String	""
auditMsg	审核意见	String	""

审核组件使用说明

基本用法

<template>
  <div>   
        <!--单个审核 也可以取消外层的ta-form，直接放入其他的表单使用-->
      <ta-form :autoFormCreate="(form)=>{this.auditForm= form}">
      <auditModal :isSelect='auditSelect'  v-model="auditMessage" :auditTitle="auditTitle" slot="extra"/>
      </ta-form>
  </div>
</template>
<script>
import auditModal from '@project/component/auditModal'
export default {
  name: 'auditComponents',
  // 注册
  components: { auditModal },
  data () {
    return {
      auditMessage: {}, //v-modal 绑定值
      auditSelect: false, //是否能显示弹出框
      auditTitle: {
        butTitle: '审核',
        title: '审核',
        auditStasTitle: '审核标志',
        auditMsgTitle: '审核意见'
      },
        rowSelection: {
        type: 'checkbox',
        selectedRowKeys: [],
        // 点击每行的checkbox会触发,点击全选也会触发
        onChange: (keys, rows) => {
          this.rowSelection.selectedRowKeys = keys
          this.chosedata = rows
        }
      }
    }
  },
  watch: {
    auditMessage: {
      handler: function (val, old) {
        if (val.auditStas === '1') {
          this.successdata() 成功回调
        } else {
          this.errordata() 失败回调
        }
      }
    },
    chosedata: {
      handler: function (val, old) {
        if (val.length > 0) {
          this.auditSelect = true //如果有选择值则允许打开modal
        } else {
          this.auditSelect = false
        }
      }
    }
  },
  }
</script>

参数	说明	类型	默认值
auditMessage	返回的对象	Object	{listLength: 0}
auditTitle	标题的title	Object
auditSelect	是否显示	Boolean

返回值说明:

参数	说明	类型	默认值
auditStas	审核标志	String	""
auditMsg	审核意见	String	""

银行新增组件使用说明

基本用法

<template>
  <div>   
<!-- 银行组件的引入-->
    <!--没有银行用途的，用于单个新增-->
   <bankcomponent v-model="dataSourceBankAcct" ref="bankChild" :bankType="1"></bankcomponent>
    <!--显示银行用途的，用于多个新增-->
   <bankcomponent v-model="dataSourceBankAcct" ref="bankChild" :bankType="2"></bankcomponent>
    <!--传入一条数据 表格展示-->  
    <bankcomponent v-model="dataSourceBankAcct" :bankListOnly="bankInfoList" :bankType="3"></bankcomponent>
    <!--传入多条数据 表格展示 加新增展示-->  
     <bankcomponent v-model="dataSourceBankAcct" ref="bankChild" :bankListOnly="bankInfoLists" :bankType="4"></bankcomponent>
  </div>
</template>
<script>
// 银行信息引入
import bankcomponent from '@project/component/bankcomponent/bankcomponent.vue'
export default {
  // 组件注册
  components: { bankcomponent },
  data () {
    return {
       //父组件用来接受新增银行的数组
       dataSourceBankAcct: [],
       // 手动控制卡片里面的新增内容是否展示
       showFormHidden: false,
       // 子组件全部只读,展示传递来的数据
       bankListOnly: []
       // 示例
       // bankListOnly: [{ bankAbbr: '工商银行北京总行', bankAcctname: '随便户名', bankId: '11', bankTypeCode: '102', bankacct: '12312312', bankacctUsedTypeList: [0, 2] }]
    }
  },
  methods:{
    fnGetBackInfo () {
      // 调用子组件里面的校验方法
      this.$refs.bankChild.fnHandleOk()
    }
  },
  // 如下：可选择监听数组的值，也可以不使用监听，里面的值随银行新增动态变化
  watch: {
    dataSourceBankAcct: {
      handler: function (val, old) {
        console.log(val)
      },
      deep: true,
      immediate: true
    }
  }
</script>

参数	说明	类型	默认值
bankListOnly	传入数据	Array	无

| type | 展示表单 | number | 无|
|--------- |-----------|-------  |-------- |
| 函数     | 说明      |
| fnHandleOk | 单个新增银行先校验、再获取 |
| 备注 | 必须要定义ref |

单位信息展示

基础用法

接口调用方式

<template>
    <div>
        <companyInfo :companyCode="companyCode" />
    <div/>
</template>
<script>
import companyInfo from "@project/component/companyInfo"
export default {
    components: { companyInfo },
    data(){
        return {
            companyCode:""
        }
    }
}
</script>

传值调用方式

<template>
    <div>
        <companyInfo :value="value" />
    <div/>
</template>
<script>
import companyInfo from "@project/component/companyInfo"
export default {
    components: { companyInfo },
    data(){
        return {
            value:{
                empNo: '10086',
                legent: '某某单位',
                legentType: '1',
                department: '1',
                tel: '138****2313'
            }
        }
    }
}
</script>

属性

参数	说明	类型	默认值
companyCode	单位编码	String	''
value	单位数据	Object	{}

注意：传入value不为空时显示传入数据，value为空则显示根据companyCode参数请求接口数据

疾病信息展示

基础用法

<template>
    <div>
        <diseaseInfo v-model="medform"/>
        <diseaseInfo :transmit="{}" />
        <ta-col>
            <diseaseInfo v-model="medform2" only/>
        </ta-col>
    <div/>
</template>
<script>
import diseaseInfo from "@project/component/disease"
export default {
    components: { diseaseInfo },
    data(){
        return {
           medform:{},
           medform2:{},
        }
    }
}
</script>

属性

参数	说明	类型	默认值
value	表单数据	Object	{}
transmit	从外部传入仅展示	Object	{}
only	仅展示编码带搜索	Boolean	false
diseaseCode	不可编辑传入编号自己查信息默认取第一条	String	""
required	是否校验编码必输	Boolean	fasle
edit	在使用编号查询时支持修改	Booean	false

slot

| moreBofor | 前面插槽 |   |     |
| moreAfter | 后面插槽 |   |     |   会加到地址前面 因为地址是长的输入框

方法

名称	说明	使用	参数
resetFields	重置信息
validateFields	校验方法	返回 false/true

事件

名称	说明	使用	参数
change	查询信息完成后的回调	function(data){}	data:查询出的结果

疾病信息展示

基础用法

<template>
    <div>
        <diseaseInfo v-model="medform"/>
        <diseaseInfo :transmit="{}" />
        <ta-col>
            <diseaseInfo v-model="medform2" only/>
        </ta-col>
    <div/>
</template>
<script>
import diseaseInfo from "@project/component/diseName"
export default {
    components: { diseaseInfo },
    data(){
        return {
           medform:{},
           medform2:{},
        }
    }
}
</script>

属性

参数	说明	类型	默认值
value	表单数据	Object	{}
transmit	从外部传入仅展示	Object	{}
only	仅展示编码带搜索	Boolean	false
diseaseCode	不可编辑传入编号自己查信息默认取第一条	String	""
required	是否校验编码必输	Boolean	fasle
edit	在使用编号查询时支持修改	Booean	false

slot

| moreBofor | 前面插槽 |   |     |
| moreAfter | 后面插槽 |   |     |   会加到地址前面 因为地址是长的输入框

方法

名称	说明	使用	参数
resetFields	重置信息
validateFields	校验方法	返回 false/true

事件

名称	说明	使用	参数
change	查询信息完成后的回调	function(data){}	data:查询出的结果

医疗机构信息展示

基础用法

<template>
  <div>
    <district v-model="district"></district>
  <div/>
</template>
<script>
import district from '@project/component/district/district'
export default {
  components: { district },
  data(){
    return {
       district: '',
       address: {
         huAddrAdmdvs: ['440000','440400','440404'], //行政地址
         huDetailAddr: '详细地址' //详细地址
       },
       labelcon: {
         label: '户口详细地址', //父级标签
         modaltitle: '户口所在地地址录入', //模态框标题
         modallabel1: '户口所在地行政区',  //模态框label1
         modallabel2: '户口所在地详细地址' //模态框label2
       }
    }
  }
}
</script>

属性

参数	说明	类型	默认值
v-model	父页面接收值	any	''
address	父页面赋初始值	object	{}
fieldDecoratorId	自定义修改id变量以示区分	string	''
labelcon	自定义标签名	object

说明

v-model绑定的变量为一个对象{huAddrAdmdvs: [],huDetailAddr: ''}

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

Hsa-Mbs开发维护文档（中）

主题换肤：替换默认颜色

步骤

自定义每个组件的默认size

步骤

注意

在WebStorm中编写vue文件时智能提示@hsa/hsa-ui的标签

系统要求

步骤

优点

缺点

注意

布局组件

基础用法

属性

路由配置

接口请求

综柜前端开发步骤及公共模块方法说明

1.前端开发步骤说明

(1)获取参数并判断页面进入方式

2.(1)itsMixin混入

(2)获取收单/受理信息

(2)工具栏抽屉组件itsToolbar

取值和赋值操作

引入的外部组件库

工具类函数和方法

项目混入Mixins

已引入依赖

已引入开发依赖

常用组件

基层行政区划公共查询组件

审核组件使用说明

基本用法

审核组件使用说明

基本用法

银行新增组件使用说明

基本用法

单位信息展示

基础用法

接口调用方式

传值调用方式

属性

疾病信息展示

基础用法

属性

slot

方法

事件

疾病信息展示

基础用法

属性

slot

方法

事件

医疗机构信息展示

基础用法

属性

热门文章

最新文章

相关电子书