@zonejs/vue-component v1.1.2

初始化并与npm包建立联系

npm init --scope=zonejs

打包

yarn run build

发布

yarn run pub

组件文档

导航栏组件 —— ZoscHeader

传参说明：

title：String，标题，默认'' showLeftArrow：Boolean，是否显示左侧的返回按钮，默认true rightButtons：Array，右侧按钮组

goBack：Event，左侧返回按钮点击事件 onRightClick：Event，右侧按钮点击事件

代码示例：

<ZoscHeader
  slot="header"
  title="生产发料"
  :right-buttons="[
    {
      buttonIcon: 'more',
      buttonLabel: '', // 可选
     },
   ]"
  @onRightClick="handleRightClick"
  @goBack="handleGoBack"
/>

样式截图：

扫描框组件 —— ZoscScanInput

组件补充说明：

1、仅支持输入框回车触发，不支持失焦触发，原因：扫码之后一般会要求全选输入框，若同时支持，扫码之后需要操作数据，失焦的时候又会触发一次，用户体验性不好 2、扫描框已通过正则限制不能输入汉字 3、输入框自动聚焦时，已实现阻止手机软键盘的弹出 4、支持在父组件中通过ref属性调用子组件的method，例：this.$refs.docNumInput.focusInput();

传参说明：

placeholder：String，提示文字，默认'' type：String，输入框类型，默认'text' disabled：Boolean，是否禁用输入框，默认false autoFocus：Boolean，是否自动聚焦，默认true value：String，输入框的绑定值，默认'' clearFlag：Boolean，输入框内容清除标识，默认true

onChange：Event，输入框回车事件，出参：扫描结果 onScan：Event，扫码图标点击事件

额外的method

focusInput：输入框聚焦方法 blurInput：输入框失焦方法 handleClear：清空输入框方法

代码示例：

<ZoscScanInput
    ref="docNumInput"
    :value="documentNum"
    placeholder="请扫描或输入发料单/领料单/生产工单"
    :auto-focus="true"
    :clear-flag="false"
    @onChange="handleChange"
    @onScan="handleScan"
/>

样式截图：

页面无数据组件 —— ZoscNoData

组件补充说明：

1、使用情景：一般多用于 弹窗、下拉框组件的查询接口未查询到符合条件的数据 2、支持自定义区域内容

代码示例：

<ZoscNoData v-if="lovList?.length <= 0" />
或者
<ZoscNoData v-if="lovList?.length <= 0">

  <slot>xxx</slot>

</ZoscNoData>

样式截图：

列表页面无数据组件 —— ZoscListNoData

组件补充说明：

使用情景：一般多用于列表页的查询接口未查询到符合条件的数据

传参说明：

extraDesc：String，额外的说明，默认'请扫码或手动添加' btnDesc：String，按钮文字说明，默认'新建单据' iconName：String，按钮图标名称，默认'add'

onClick：Event，按钮点击事件

代码示例：

<ZoscListNoData
  v-if="issueList.length<=0"
  @onClick="handleToCreate"
/>

样式截图：

列表页悬浮按钮组件 —— ZoscFloatBtn

组件补充说明：

悬浮按钮固定展示在页面右下方

传参说明：

iconName：String，按钮图标名称，默认'add' onClick：Event，悬浮按钮点击事件

代码示例：

<ZoscFloatBtn
  v-show="issueList.length>0" // 可选
  @onClick="handleClick"
/>

样式截图：

表单行组件（选择类） —— ZoscPropsLine

组件补充说明：

1、若标签名的绑定值无数据，编辑态 展示 '请选择'，查看态 则展示'-' 2、若保存时 必填字段未校验通过且要求显示必填校验信息，则必填校验的文字提示内容为'请选择xxx' —— xxx代表传入的label

传参说明：

label：String，标签名，默认'' value：String，标签名的绑定值，默认'' descValue：String，描述字段的绑定值，默认'' descTitle：String，显示内容的title值，默认'' defaultFlag：Boolean，是否显示默认标识，默认false showClear：Boolean，是否显示删除图标，默认false required：Boolean，是否必填，默认false invalidFlag：Boolean，是否显示必填校验信息，默认false showIcon：Boolean，是否显示label前面的图标，默认true showDesc：Boolean，是否显示描述（例：物料描述、sku描述），默认false moreIcon：Boolean，是否显示 >图标，默认true iconName：String，label前面的图标名，默认'assignment' iconColor：String，图标颜色，默认'#8C9096' borderBottom：Boolean，是否显示底部边框，默认false

onClick：Event，行点击事件 onClear：Event，清除图标的点击事件

代码示例：

<ZoscPropsLine
  label="组织"
  :value="issueData.organizationName"
  icon-name="manage_organization"
  :more-icon="createFlag"
  :required="createFlag"
  :invalid-flag="verifyFlag && !issueData.organizationName"
  border-bottom
/>

样式截图：

表单行组件（文本输入类） —— ZoscPropsLineInput

组件补充说明：

1、支持在父组件中通过ref属性调用子组件的method 2、若保存时 必填字段未校验通过且要求显示必填校验信息，则必填校验的文字提示内容为'请输入xxx' —— xxx代表传入的label 3、支持自定义区域内容 4、已通过正则限制只能输入字母、数字、下划线、中划线 5、输入内容若超过最大长度限制，输入事件的回调函数里面已做了字符串截取 6、仅非禁用态且标签名绑定的字段有值时，右侧会出现清除图标

传参说明：

label：String，标签名，默认'' inputType：String，输入框类型，默认'text' maxLength：Number，输入框内容的最大长度，默认60 bindObj：Object，绑定的对象，默认{} fieldName：String，标签名绑定的字段名，默认'' descValue：String，描述字段的绑定值，默认'' showDesc：Boolean，是否显示描述（例：物料描述、sku描述），默认false required：Boolean，是否必填，默认false disabled：Boolean，是否禁用，默认false invalidFlag：Boolean，是否显示必填校验信息，默认false iconName：String，label前面的图标名，默认'assignment' iconColor：String，图标颜色，默认'#8C9096' borderBottom：Boolean，是否显示底部边框，默认false

onChange：Event，输入框回车/内容变化事件，出参：输入框内容

额外的method

focusInput：聚焦输入框 handleClear：清空输入框

代码示例：

<ZoscPropsLineInput
 label="生产发料单号"
 :bind-obj="issueData"
 field-name="issueNum"
 border-bottom
 :required="createFlag"
 :disabled="!createFlag"
 :invalid-flag="verifyFlag && !issueData.issueNum"
 @onChange="handleChangeCode"
>
  <div>xxx</div>
</ZoscPropsLineInput>
或者
<ZoscPropsLineInput
  label="委外发料单号"
  :bind-obj="issueData"
  field-name="outsourceIssueCode"
  border-bottom
  :required="createFlag"
  :disabled="!createFlag"
  :invalid-flag="verifyFlag && !issueData.outsourceIssueCode"
  @onChange="handleChangeCode"
/>

样式截图：

表单行组件（数字输入类） —— ZoscLineInputNumber

组件补充说明：

1、支持在父组件中通过ref属性调用子组件的method 2、若保存时 必填字段未校验通过且要求显示必填校验信息，则必填校验的文字提示内容为'请输入xxx' —— xxx代表传入的label 3、支持自定义区域内容 4、已通过正则限制只能输入数字和小数点，且数字的最大值为999999999.999999 5、仅非禁用态且标签名绑定的字段有值时，右侧会出现清除图标

传参说明：

label：String，标签名，默认'' bindObj：Object，绑定的对象，默认{} fieldName：String，标签名绑定的字段名，默认'' required：Boolean，是否必填，默认false disabled：Boolean，是否禁用，默认false invalidFlag：Boolean，是否显示必填校验信息，默认false iconName：String，label前面的图标名，默认'assignment' iconColor：String，图标颜色，默认'#8C9096' borderBottom：Boolean，是否显示底部边框，默认false

onChange：Event，输入框值变化事件，出参：输入框内容

额外的method

focusInput：聚焦输入框 handleClear：清空输入框

代码示例：

<ZoscLineInputNumber
    label="本行已拣"
    :bind-obj="lineData.snEnableFlag? snValue : lineData"
    field-name="itemPrimaryUomQty"
    icon-name="microservice"
    :invalid-flag="verifyFlag"
    required
    :disabled="lineData.snEnableFlag || !lineData.itemCode"
    @onChange="handleChange"
    >
      <div style="max-width: 120px; overflow: hidden;">
        厘米
      </div>
</ZoscLineInputNumber>

样式截图：

文本域组件 —— ZoscPropsLineTextarea

组件补充说明：

1、若保存时 必填字段未校验通过且要求显示必填校验信息，则必填校验的文字提示内容为'请输入xxx' —— xxx代表传入的label 2、支持自定义区域内容 3、输入内容若超过最大长度限制，输入事件的回调函数里面已做了字符串截取 4、仅非禁用态且标签名绑定的字段有值时，右侧会出现清除图标

传参说明：

label：String，标签名，默认'' bindObj：Object，绑定的对象，默认{} fieldName：String，标签名绑定的字段名，默认'' required：Boolean，是否必填，默认false disabled：Boolean，是否禁用，默认false invalidFlag：Boolean，是否显示必填校验信息，默认false iconName：String，label前面的图标名，默认'assignment' iconColor：String，图标颜色，默认'#8C9096' borderBottom：Boolean，是否显示底部边框，默认false maxLength：Number，文本域输入内容的最大长度，默认160

onChange：Event，输入框内容变化事件，出参：输入框内容

代码示例：

<ZoscPropsLineTextarea
    label="备注"
    icon-name="announcement"
    :bind-obj="lineData"
    field-name="invTxRemark"
    @onChange="updateFlag = true"
/>

样式截图：

行号选择组件 —— ZoscLineNumSelect

组件补充说明：

1、支持自定义区域内容，例：与 ZoscPropsLine组件叠加使用 2、若当前选中行数据与父组件传入的已选中行数据相同，则不会触发lineNumConfirm事件

传参说明：

title：String，弹窗的title，默认'' lineNumList：Array，行号数组，默认[] currLine：Object，已选中行，默认{} currId：String，已选中行Id，默认'' fieldName：String，显示的行号字段名，默认'' codeField：String，显示的编码字段名，默认'' descField：String，显示的描述字段名，默认'' lovUrl：String，接口请求路径，默认'' params：Object，接口请求参数，默认{} disabled：Boolean，是否禁用，默认false

lineNumConfirm：Event，行数据选择事件，出参：选中的行数据对象

额外的method

代码示例：

<ZoscLineNumSelect
   title="修改行号"
   :curr-line="lineData"
   :line-num-list=" lineData.outsourcePickLineList"
   field-name="outsourcePickLineSeq"
   @lineNumConfirm="handleChangeLineNum"
>   
	<ZoscPropsLine
      label="行号"
      :value="lineData.outsourcePickLineSeq"
      icon-name="wait_one_b"
      required
      :invalid-flag="verifyFlag && !lineData.outsourcePickLineSeq"
   />
</ZoscLineNumSelect>

样式截图：

日期选择组件 —— ZoscSelectDate

组件补充说明：

1、支持自定义区域内容，例：与 ZoscPropsLine组件叠加使用 2、若传入的startDate、endDate有值，其日期格式必须与format保持一致

传参说明：

title：String，组件title，默认'请选择' format：String，日期输出格式，默认'yyyy-MM-dd' startDate：String，开始日期，默认'' endDate：String，结束日期，默认'' disabled：Boolean，是否禁用日期选择，默认false

fun：Event，确认按钮点击事件，出参：选中的日期值

代码示例：

<ZoscSelectDate
  format="yyyy-MM-dd HH:mm:ss"
  @fun="setIssueDate"
>
  <ZoscPropsLine
    label="发料时间"
    :value="issueData.issueDate"
    icon-name="date_range"
    required
  />
</ZoscSelectDate>

样式截图：

单据搜索组件 —— ZoscDocSearch

组件补充说明：

1、支持在父组件中通过ref属性调用子组件method中的showDocSearch，触发组件显示，例：this.$refs.docSearchRef.showDocSearch();

传参说明：

value：String，传入给搜索框的值，默认'' docNumName：String，单据号字段名，默认'documentNum' docTypeName：String，单据类型字段名，默认'documentTypeMeaning' placeholder：String，搜索框提示文字，默认'请输入' searchUrl：String，接口请求路径，默认'/' searchKey：String，模糊搜索限制接口查询的字段名，默认'' params：Object，接口请求参数，默认{}

choose：Event，行数据选择事件，出参：选中的行数据对象 close：Event，取消按钮的点击事件

额外的method

showDocSearch：显示单据搜索组件

代码示例：

<ZoscDocSearch
    ref="docSearchRef"
    :value="documentNum"
    search-key="documentNum"
    :search-url="searchUrl"
    :params="{ documentNum: documentNum }"
    @close="handleCancel"
    @choose="handleOk"
/>

样式截图：

单个按钮组件 —— ZoscButtonSingle

组件补充说明：

组件多用于页面底部，放在slot="footer"中

传参说明：

label：String，按钮文字说明，默认'' disabled：Boolean，是否禁用按钮，默认false onClick：Event，按钮点击事件

代码示例：

<ZoscButtonSingle
    :label="createFlag ? '下一步' : '保存' "
    @onClick="handleClickNext"
/>

样式截图：

两个按钮组件 —— ZoscButtonDouble

组件补充说明：

组件多用于页面底部，放在slot="footer"中

传参说明：

labelLeft：String，左侧按钮的文字说明，默认'' labelRight：String，右侧按钮的文字说明，默认'' disabledLeft：Boolean，是否禁用左侧按钮，默认false disabledRight：Boolean，是否禁用右侧按钮，默认false

onClickLeft：Event，左侧按钮点击事件 onClickRight：Event，右侧按钮点击事件

代码示例：

<ZoscButtonDouble
    label-left="新增"
    label-right="确认发料"
    @onClickLeft="handleAddLine"
    @onClickRight="handleConfirm"
/>

样式截图：

级联组件 —— ZoscCascader

组件补充说明：

1、支持自定义区域内容，例：与 ZoscPropsLine组件叠加使用 2、仅点击子级时才触发lovConfirm

传参说明：

title：String，组件title，默认'' placeholder：String，搜索框提示文字，默认'请输入货位' disabled：Boolean，是否禁用组件，默认false parentIdField：String，父级id字段名，默认'warehouseId' childIdField：String，子级id字段名，默认'locatorId' parentShowKey：String，父级显示内容的key值，默认'warehouseName' childShowKey：String，子级显示内容的key值，默认'locatorName' searchKey：String，父级模糊搜索限制接口查询的字段名，默认'' parentLovUrl：String，父级接口请求路径，默认'/' parentParams：Object，父级接口请求参数，默认{} childLovUrl：String，子级接口请求路径，默认'/' childParams：Object，子级接口请求参数，默认{} showDefaultChild：Boolean，是否给父级增加显示默认的子级，默认true defaultChildValue：String，子级的默认选项，默认'不选择货位'

lovConfirm：Event，子级选择事件，出参：选中的行数据对象

额外的method

focusInput：聚焦输入框

代码示例：

<ZoscCascader
    title="选择仓库货位"
    search-key="warehouseName"
    :parent-lov-url="lovAPI.warehouseLov"
    :parent-params="{ lovCode: lovCode.warehouse, enabledFlag: 1, organizationId: 				lineData.organizationId }"
    :child-lov-url="lovAPI.locatorsLov"
    :child-params="{ lovCode: lovCode.locator, enabledFlag: 1, warehouseId: 					lineData.warehouseId }"
    @lovConfirm="setLovSelect"
>
	<ZoscPropsLine
      label="仓库"
      :value="`${lineData.warehouseName} — ${lineData.locatorName}`"
      icon-name="warehouse"
      required
      border-bottom
      :invalid-flag="verifyFlag && !lineData.warehouseName"
	/>
</ZoscCascader>

样式截图：

扫描提示组件 —— ZoscScanTip

组件补充说明：

支持在父组件中通过ref属性调用子组件method中的handleShowSn，触发组件显示，例：this.$refs.showSnRef.handleShowSn();

传参说明：

label：String，标签说明，默认'序列号' value：String，显示的内容值，默认'' iconName：String，图标名，默认'info' iconColor：String，图标颜色，默认'#0078D4' bgColor：String，组件背景色，默认'#E8F0FD'

额外的method

handleShowSn：显示提示组件 handleClose：关闭提示组件

代码示例：

<ZoscScanTip
    ref="showSnRef"
    :value="currentSnNum"
/>

样式截图：

提示框组件 —— ZoscDialogCommon

组件补充说明：

1、若希望组件出现时 能够阻断页面层的其它操作，则ZoscDialogCommon组件需要与hips-view同级

传参说明：

visible：Boolean，组件是否可见，默认false closable：Boolean，是否显示右上角的关闭图标，默认false title：String，提示标题，默认'提示' dialogContent：String，提示内容，默认'' okLabel：String，ok按钮文字，默认'确定' cancelLabel：String，cancel按钮文字，默认'取消' showOkBtn：Boolean，是否显示ok按钮，默认true showCancelBtn：Boolean，是否显示cancel按钮，默认false showTitle：Boolean，是否显示提示title，默认false

onOk：Event，ok按钮的点击事件 onCancel：Event，cancel按钮的点击事件

代码示例：

<ZoscDialogCommon
    :dialog-content="showDialogText"
    :visible="showDialog"
    :show-cancel-btn="showCancelBtn"
    :ok-label="okLabel"
    :cancel-label="cancelLabel"
    @onCancel="handleCancel"
    @onOk="handleOk"
/>

样式截图：

货位选择组件 —— ZoscLocatorDialog

组件补充说明：

1、若希望组件出现时 能够阻断页面层的其它操作，则ZoscLocatorDialog组件需要与hips-view同级

传参说明：

visible：Boolean，组件是否可见，默认false dialogTitle：String，提示标题，默认'货位选择' btnLabel：String，按钮文字，默认'取消' placeholder：String，搜索框提示文字，默认'请扫描或输入货位编码' searchKey：String，模糊搜索限制接口查询的字段名，默认'' lovUrl：String，接口请求路径，默认'/' params：Object，接口请求参数，默认{} warehouseField：String，显示仓库内容的字段名，默认'warehouseName' locatorField：String，显示货位内容的字段名，默认'locatorName'

onOk：Event，数据选择事件，出参：选中的行数据对象 onCancel：Event，取消按钮点击事件

额外的method

focusInput：聚焦输入框

代码示例：

<ZoscLocatorDialog
    :visible="showLocatorSelect"
    show-key="locatorName"
    search-key="locatorName"
    :lov-url="lovAPI.locatorsLov"
    :params="{ lovCode: lovCode.locator, enabledFlag: 1, organizationId: detailHead.organizationId,
        warehouseId: detailHead.warehouseId }"
    @onCancel="handleCancel"
    @onOk="handleSelectLocator"
/>

样式截图：

多库存提示组件 —— ZoscDialogSelect

组件补充说明：

1、若希望组件出现时 能够阻断页面层的其它操作，则ZoscLocatorDialog组件需要与hips-view同级

传参说明：

visible：Boolean，组件是否可见，默认false subTitle：String，提示文字，默认'当前物料存在多条库存数据，请选择要操作的仓库及货位' dataList：Array，弹窗内容，默认[] buttonLabel：String，按钮文字说明，默认'取消'

onOk：Event，数据选择事件，出参：选中的行数据对象 onCancel：Event，取消按钮点击事件

代码示例：

<ZoscDialogSelect
    :visible="showDialogSelect"
    :data-list="scanData"
    @onCancel="handleCancel"
    @onOk="chooseItem"
/>

样式截图：

气泡提示组件 —— ZoscFloatTip

组件补充说明：

1、支持在父组件中通过ref属性调用子组件method中的方法

传参说明：

showDelete：Boolean，是否显示删除选项，默认false showDefaultSet：Boolean，是否显示默认设置选项，默认true showAutoFill：Boolean，是否显示自动填充选项，默认false showPreDetail：Boolean，是否显示实发明细选项，默认false

onDelete：Event，点击删除触发 onSet：Event，点击默认设置触发 onAutoFill：Event，点击自动填充触发 onPreDetail：Event，点击实发明细触发

额外的method

showTip：显示气泡提示组件 hideTip：隐藏气泡提示组件

代码示例：

<ZoscFloatTip
    ref="floatTips"
    :show-delete="true"
    :show-default-set="false"
    @onDelete="handleDeleteIssue"
/>

样式截图：

默认设置组件 —— ZoscDefaultSetting

组件补充说明：

1、ZoscDefaultSetting组件为完整页面，可直接新建一个.vue文件，在template标签中使用即可 2、编辑数据后，若未保存就直接退出时，页面会有挽留弹窗

传参说明：

defaultInfo：Object，已维护的默认设置值对象，默认{} showSourceFlag：Boolean，是否显示来源信息（出库类、调拨转移类单据展示来源信息），默认false showTargetFlag：Boolean，是否显示目标信息（转移类、入库类、调拨转移类单据展示目标信息），默认false showTxReason：Boolean，是否显示质量原因（入库类、调拨转移类单据展示质量原因），默认false

back：Event，点击左上角返回触发 save：Event，点击保存触发，出参：页面数据对象

代码示例：

<template>
  <ZoscDefaultSetting
   :default-info="defaultInfo"
   :show-target-flag="true"
   @back="goBack"
   @save="handleSave"
  />
</template>

样式截图：

出库类序列号组件 —— ZoscOutSn

组件补充说明：

1、ZoscOutSn组件为完整页面，可直接新建一个.vue文件，在template标签中使用即可 2、编辑数据后，若未保存就直接退出时，页面会有挽留弹窗 3、使用时，只需传入物料明细页已有的序列号数组和当前物料明细对象即可 4、序列号快捷录入-前缀已通过正则限制仅允许输入 大小写字母、数字、中划线、下划线 5、序列号快捷录入-序号开始/结束 已通过正则限制仅允许输入数字，且输入的数字最大值为99999999999999

传参说明：

lineItem：Object，物料明细对象，默认{} snValue：Array，序列号数组，默认[] maxLength：Number，序列号快捷录入-前缀输入值的最大长度，默认15

back：Event，点击左上角返回触发 save：Event，点击保存触发，出参：序列号数据对象（包含字段snList,snNumStr,itemPrimaryUomQty）

代码示例：

<template>
  <ZoscOutSn
    :line-item="lineData"
    :sn-value="snValue.snList"
    @save="handleSaveSn"
    @back="goBack"
  />
</template>

样式截图：

入库类序列号组件 —— ZoscInSn

组件补充说明：

1、ZoscInSn组件为完整页面，可直接新建一个.vue文件，在template标签中使用即可 2、编辑数据后，若未保存就直接退出时，页面会有挽留弹窗 3、序列号快捷录入-前缀已通过正则限制仅允许输入 大小写字母、数字、中划线、下划线 4、序列号快捷录入-序号开始/结束 已通过正则限制仅允许输入数字，且输入的数字最大值为99999999999999

传参说明：

lineItem：Object，物料明细对象，默认{} snValue：Array，序列号数组，默认[] maxLength：Number，序列号快捷录入-前缀输入值的最大长度，默认15 rewriteMsg：String，数量回写提示说明，默认'本行入库与序列数量不符，是否修改本行入库为序列数量？' qtyFieldName：String，入库/接收 数量的字段名称，默认'itemPrimaryUomQty'

back：Event，点击左上角返回触发 save：Event，点击保存触发，出参：序列号数据对象（包含字段snList,rewriteFlag）

代码示例：

<template>
  <ZoscInSn
    :line-item="lineData"
    :sn-list="snList"
    :rewrite-msg="dialogContent"
    @save="handleSaveSn"
    @back="goBack"
  />
</template>

样式截图：