综合柜台系统工具栏组件

基础用法

<template>
  <its-toolbar ref="itsToolbar"
    :its-display="itsAbnormalEntry"
    :business-info="itsBusinessInfo"
    :ocr-data="ocrData"
    show-upload show-view
    upload-ocr-listener view-ocr-listener
  >
    <span slot="drawerHeader"></span>
    <span slot="drawerFooter"></span>
  </its-toolbar>
</template>
<script>
import itsToolbar from '@project/component/itsToolbar'
export default {
    components: { itsToolbar }
}
</script>

属性

参数	说明	类型	默认值
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

slot

参数	说明	类型	默认值
drawerHeader	底部固定栏插槽
drawerFooter	底部固定栏插槽

方法

名称	说明	使用	参数
onClose	关闭工具栏抽屉		null

ocrData

名称	说明
sysType	业务系统编码：档案系统中配置的业务系统编码
ptcpType	当事人类型，0：单位；1：个人
ptcpName	个人或者单位的名称
ptcpCode	个人身份证或者单位编码
bizCode	业务事项编码
busiId	业务流水号

布局组件

基础用法

当layout中绑定reset/onSave事件时会显示对应按钮

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

插槽用法

layout底部固定栏区域提供了一个插槽，可以自定义插入内容

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

属性

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

slot

参数	说明	类型	默认值
footer	底部固定栏插槽｜-｜ - ｜

医疗机构信息展示

基础用法

<template>
    <div>
        <medicacomponent v-module="list"/>
    <div/>
</template>
<script>
import medicacomponent from "@project/component/medicacomponent"
export default {
    components: { medicacomponent },
    data(){
        return {
           list:[],
        }
    }
}
</script>

属性

参数	说明	类型	默认值
value	表格数据	Array	[]

医保目录展示

基础用法

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

属性

参数	说明	类型	默认值
value	表单数据	Object	{}
transmit	从外部传入仅展示	Object	{}
moreBofor	前面插槽
moreAfter	后面插槽
only	仅展示编码带搜索	Boolean	false
hilistCode	不可编辑传入编号自己查信息默认取第一条	String	""
rchkFlag	审核条件	Boolean	false

方法

名称	说明	使用	参数
resetFields	重置信息

事件

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

医药信息展示

基础用法

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

属性

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

slot

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

方法

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

事件

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

医疗信息展示

基础用法

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

属性

参数	说明	类型	默认值
value	表单数据	Object	{}
transmit	从外部传入仅展示	Object	{}
moreBofor	前面插槽
moreAfter	后面插槽
only	仅展示编码带搜索	Boolean	false
fixmedinsCode	不可编辑传入编号自己查信息默认取第一条	String	""
required	是否校验编码必输		fasle

方法

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

事件

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

定点药店信息展示

基础用法

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

属性

参数	说明	类型	默认值
value	表单数据	Object	{}
transmit	从外部传入仅展示	Object	{}
moreBofor	前面插槽
moreAfter	后面插槽
only	仅展示编码带搜索	Boolean	false
fixmedinsCode	不可编辑传入编号自己查信息默认取第一条	String	""
required	是否校验编码必输		fasle

方法

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

事件

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

医疗信息展示

基础用法

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

属性

参数	说明	类型	默认值
value	表单数据	Object	{}
transmit	从外部传入仅展示	Object	{}
moreBofor	前面插槽
moreAfter	后面插槽
only	仅展示编码带搜索	Boolean	false
fixmedinsCode	不可编辑传入编号自己查信息默认取第一条	String	""
required	是否校验编码必输		fasle

方法

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

事件

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

政策中心：定点医药机构查询组件

基础用法

引入

import plcmedicalInfo from '@project/component/plcmedicalInfo'

属性

参数	说明	类型	默认值
v-model	表单数据	Object	{}
readOnly	只读	Booean	false
onlyCodeAndName	仅展示只有编号和名称	Boolean	false
fixmedinsCode	用编号默认查询	String	""
header	开启头部样式	Booean	false
medicaData	赋值	Object	{}
required	是否必填	Booean	false
config	标题名称	Object

slot

名称	说明	使用	参数
moreBefore	前面插槽
moreAfter	后面插槽		会加到地址前面因为地址是长的输入框
btnAfter	添加按钮		在组件后可添加相关按钮（按钮是换行显示）

方法

名称	说明	使用	参数
fnReset	重置信息

事件

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

示例路径

src/scopes/project/testDemo/N0602/plcmedica/plcmedica.vue

用户中心：定点医药机构查询组件

政策中心：定点医药机构查询组件

基础用法

引入

import plcmedicalInfo from '@project/component/uscmedica'

属性

参数	说明	类型	默认值
v-model	表单数据	Object	{}
readOnly	只读	Object	{}
onlyCodeAndName	仅展示只有编号和名称	Boolean	false
fixmedinsCode	用编号默认查询	String	""
medicaData	赋值	Object
required	是否必填	Booean	false
title	标题名称	String	false

slot

名称	说明	使用	参数
moreBefore	前面插槽
moreAfter	后面插槽		会加到地址前面因为地址是长的输入框
btnAfter	添加按钮		在组件后可添加相关按钮（按钮是换行显示）

方法

名称	说明	使用	参数
fnReset	重置信息

事件

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

示例路径

src/scopes/project/testDemo/N0602/plcmedica/uscmedica.vue

流程图组件

父页面中引用：

</prcsimgcomponnet ref="prcsInfo" :wflwPrcsId:="wflwPrcsId"/>

父页面调用时：

	说明	类型	默认值
this.$refs.prcsInfo.prcsImg = true	打开流程图弹窗	String	false
this.$refs.prcsInfo.exportPrcsImg(record.wflwPrcsId,record.servMattInstId)	传入流程实例ID、服务事项实例ID查询流程	String	""

人员公共查询组件使用说明

基本用法

<template>
  <div>   
        <!--仅只有一个证件号码输入框    注意：此时only必要-->
        <ta-col :span="8">
          <psncomponent v-model="persSearch" only empShow></psncomponent>
        </ta-col>
        <!--card卡片，证件号码输入框可查询  persSearch父页面接受对象-->
       <psncomponent v-model="persSearch" :psncomtitle="psncomtitle" empShow/>
         <!--card卡片，只用作展示，全部只读  personInfo传入子组件的人员对象-->
        <psncomponent :person-info="personInfo" :psncomtitle="psncomtitle" :psnNo="psnNo" empShow/>
  </div>
</template>
<script>
import psncomponent from '@project/component/psncomponent/psncomponent'
export default {
  name: 'exportData',
  components: { psncomponent },
  data () {
    return {
      //输入框查到的人员信息接收
      persSearch: {},
      //只读卡片直接展示的人员对象
      personInfo: {},
      //传入组件的title
      psncomtitle: {
        cardTitle: '卡片的title',
        psnLabel: '人员的title'
      },
      //只读卡片里面通过传入psnNo可直接查询
      psnNo: '',
    }
  },
  // 如下：监听可将输入框查到的值，放到人员基本信息展示card里面,进行展示
  watch: {
      persSearch: {
      handler: function (val, old) {
        this.personInfo = val
      },
      deep: true
    }
  }
</script>

参数	说明	类型	默认值
persSearch	返回的对象	Object	{}
only	从外部传入，仅展示搜索框	Boolean	false
empShow	是否展示单位	Boolean	false
person-info	展示的对象	Object	{}
psnNo	展示对象的人员编号	String	""
psncomtitle	卡片和人员编号的label	Object	{cardTitle:'人员基本信息', psnLabel:'人员编号'}
required	是否显示 * ｜ Boolean ｜ false ｜

人员职业展示

基础用法

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

属性

参数	说明	类型	默认值
value	表单数据	Object	{}
transmit	从外部传入仅展示	Object	{}
moreBofor	前面插槽
moreAfter	后面插槽
only	仅展示编码带搜索	Boolean	false
certno	不可编辑传入编号自己查信息默认取第一条	String	""
required	是否校验编码必输		fasle

方法

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

事件

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

单位信息

基础用法

<template>
    <div>
        <queryCompanyInfo v-model="companyInfo"/>
    <div/>
        <div>
        <queryCompanyInfo v-model="companyInfo" :flexible_flag='flexible_flag'/>  //灵活就业单位限制
    <div/>
</template>
<script>
import queryCompanyInfo from "@project/component/queryCompanyInfo"
export default {
    components: { queryCompanyInfo },
    data(){
        return {
           companyInfo:{},
        }
    }
}
</script>

仅展示数据

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

仅显示单位编码，嵌入其他form中使用

<template>
    <ta-form :autoFormCreate="(form)=>{this.form = form}" labelWidth="120px" >
        <ta-row type="flex">
            <!-- ... -->
            <ta-col :span="8">
                <queryCompanyInfo v-model="companyInfo" only />
            </ta-col>
        </ta-row>
    </ta-form>
</template>
<script>
import queryCompanyInfo from "@project/component/queryCompanyInfo"
export default {
    components: { queryCompanyInfo },
    data(){
        return {
           companyInfo:{},
        }
    }
}
</script>

属性

参数	说明	类型	默认值
value	表单数据	Object	{}
only	仅展示单位编码｜ Boolean ｜ false｜
data	传入表单数据｜ Object ｜ {}
reset	组件数据重置｜ Boolean ｜ false
flexible_flag	灵活就业单位限制｜ Boolean ｜ false

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

单位信息查询弹框

基础用法

<template>
    <div>
        <searchCompanyInfo :visible.sync="modalVisible" :modalData.sync="modalData"    :getModalList="autoQueryFixmedinsInfo" />
         <button  @click="(()=>{ this.modalVisible = true})"/>
           button 按钮点击后 modal框显示
    <div/>
</template>
<script>
import searchCompanyInfo from "@project/component/searchCompanyInfo"
import {  autoQueryFixmedinsInfo } from '../api/xxxxx.js'
export default {
    components: { searchCompanyInfo },
    data(){
        return {
            modalVisible: false, // 控制显示隐藏
            modalData: {}, //返回选择的参数
        }
    },
     methods: {
        autoQueryFixmedinsInfo
    },
     watch: {
    modalData (newV) {
      // 有新值后调用赋值方法  数据回填
      console.log(newV)
      this.form.setFieldsValue(newV)
    }
  },
}
</script>

属性

参数	说明	类型	默认值
visible	是否显示	Bolean	false
modalData	选择数据	Object	{}
getModalList	查询方法	Function	()=>{}

重要配置项 faceConfig

开发测试时修改basePath为后端的地址；打包正式环境一般为/mbs(打包前一定要修改)；开发时项目中如果找不到faceConfig文件，需要找别人要一下这个文件；

探索云世界

热门

云计算

大数据

云原生

人工智能

数据库

开发与运维

活动广场

任务中心

训练营

直播

乘风者计划

下载

镜像站

技术资料

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

综合柜台系统工具栏组件

基础用法

属性

slot

方法

ocrData

布局组件

基础用法

插槽用法

属性

slot

医疗机构信息展示

基础用法

属性

医保目录展示

基础用法

属性

方法

事件

医药信息展示

基础用法

属性

slot

方法

事件

医疗信息展示

基础用法

属性

方法

事件

定点药店信息展示

基础用法

属性

方法

事件

医疗信息展示

基础用法

属性

方法

事件

政策中心：定点医药机构查询组件

基础用法

属性

slot

方法

事件

示例路径

用户中心：定点医药机构查询组件

政策中心：定点医药机构查询组件

基础用法

属性

slot

方法

事件

示例路径

流程图组件

人员公共查询组件使用说明

基本用法

人员职业展示

基础用法

属性

方法

事件