#### 初始化并与npm包建立联系
``npm init --scope=zonejs`#### 打包`yarn run build`#### 发布`yarn run pub`

`组件文档`





导航栏组件 —— ZoscHeader



$3

title：String，标题，默认''

showLeftArrow：Boolean，是否显示左侧的返回按钮，默认true

rightButtons：Array，右侧按钮组



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

onRightClick：Event，右侧按钮点击事件



$3



  slot="header"

  title="生产发料"

  :right-buttons="[

    {

      buttonIcon: 'more',

      buttonLabel: '', // 可选

     },

   ]"

  @onRightClick="handleRightClick"

  @goBack="handleGoBack"

/>





$3



!1652319925379







扫描框组件 —— ZoscScanInput



$3

1、仅支持输入框回车触发，不支持失焦触发，原因：扫码之后一般会要求全选输入框，若同时支持，扫码之后需要操作数据，失焦的时候又会触发一次，用户体验性不好

2、扫描框已通过正则限制不能输入汉字

3、输入框自动聚焦时，已实现阻止手机软键盘的弹出

4、支持在父组件中通过ref属性调用子组件的method，例：this.$refs.docNumInput.focusInput();





$3

placeholder：String，提示文字，默认''

type：String，输入框类型，默认'text'

disabled：Boolean，是否禁用输入框，默认false

autoFocus：Boolean，是否自动聚焦，默认true

value：String，输入框的绑定值，默认''

clearFlag：Boolean，输入框内容清除标识，默认true



onChange：Event，输入框回车事件，出参：扫描结果

onScan：Event，扫码图标点击事件



$3

focusInput：输入框聚焦方法

blurInput：输入框失焦方法

handleClear：清空输入框方法



$3



    ref="docNumInput"

    :value="documentNum"

    placeholder="请扫描或输入发料单/领料单/生产工单"

    :auto-focus="true"

    :clear-flag="false"

    @onChange="handleChange"

    @onScan="handleScan"

/>





$3



!1652338137878









页面无数据组件 —— ZoscNoData



$3

1、使用情景：一般多用于 弹窗、下拉框组件的查询接口未查询到符合条件的数据

2、支持自定义区域内容



$3





或者





  xxx





$3



!1652320415093









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



$3

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



$3

extraDesc：String，额外的说明，默认'请扫码或手动添加'

btnDesc：String，按钮文字说明，默认'新建单据'

iconName：String，按钮图标名称，默认'add'



onClick：Event，按钮点击事件



$3



  v-if="issueList.length<=0"

  @onClick="handleToCreate"

/>





$3



!1652320525448







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



$3

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



$3

iconName：String，按钮图标名称，默认'add'

onClick：Event，悬浮按钮点击事件



$3



  v-show="issueList.length>0" // 可选

  @onClick="handleClick"

/>





$3



!1652320573746









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



$3

1、若标签名的绑定值无数据，编辑态 展示 '请选择'，查看态 则展示'-'

2、若保存时 必填字段未校验通过且要求显示必填校验信息，则必填校验的文字提示内容为'请选择xxx' —— xxx代表传入的label



$3

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，清除图标的点击事件



$3



  label="组织"

  :value="issueData.organizationName"

  icon-name="manage_organization"

  :more-icon="createFlag"

  :required="createFlag"

  :invalid-flag="verifyFlag && !issueData.organizationName"

  border-bottom

/>





$3



!1652320787813



!1652320799576



!1652322616943



!1652322568094



!1652320819124



!1652321412209



!1652321646950







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



$3

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

2、若保存时 必填字段未校验通过且要求显示必填校验信息，则必填校验的文字提示内容为'请输入xxx' —— xxx代表传入的label

3、支持自定义区域内容

4、已通过正则限制只能输入字母、数字、下划线、中划线

5、输入内容若超过最大长度限制，输入事件的回调函数里面已做了字符串截取

6、仅非禁用态且标签名绑定的字段有值时，右侧会出现清除图标



$3

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，输入框回车/内容变化事件，出参：输入框内容



$3

focusInput：聚焦输入框

handleClear：清空输入框



$3

>



>>  label="生产发料单号"

>  :bind-obj="issueData"

>  field-name="issueNum"

>  border-bottom

>  :required="createFlag"

>  :disabled="!createFlag"

>  :invalid-flag="verifyFlag && !issueData.issueNum"

>  @onChange="handleChangeCode"

> >

>   xxx

> 

>或者

>>   label="委外发料单号"

>   :bind-obj="issueData"

>   field-name="outsourceIssueCode"

>   border-bottom

>   :required="createFlag"

>   :disabled="!createFlag"

>   :invalid-flag="verifyFlag && !issueData.outsourceIssueCode"

>   @onChange="handleChangeCode"

>/>

>





$3



!1652321007827



!1652321013692



!1652321044403



!1652321327527



!1652322693465



!1652324091234







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



$3

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

2、若保存时 必填字段未校验通过且要求显示必填校验信息，则必填校验的文字提示内容为'请输入xxx' —— xxx代表传入的label

3、支持自定义区域内容

4、已通过正则限制只能输入数字和小数点，且数字的最大值为999999999.999999

5、仅非禁用态且标签名绑定的字段有值时，右侧会出现清除图标





$3

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，输入框值变化事件，出参：输入框内容



$3

focusInput：聚焦输入框

handleClear：清空输入框



$3



    label="本行已拣"

    :bind-obj="lineData.snEnableFlag? snValue : lineData"

    field-name="itemPrimaryUomQty"

    icon-name="microservice"

    :invalid-flag="verifyFlag"

    required

    :disabled="lineData.snEnableFlag || !lineData.itemCode"

    @onChange="handleChange"

    >

      

        厘米





$3



!1652321171678



!1652322717801







文本域组件 —— ZoscPropsLineTextarea



$3

1、若保存时 必填字段未校验通过且要求显示必填校验信息，则必填校验的文字提示内容为'请输入xxx' —— xxx代表传入的label

2、支持自定义区域内容

3、输入内容若超过最大长度限制，输入事件的回调函数里面已做了字符串截取

4、仅非禁用态且标签名绑定的字段有值时，右侧会出现清除图标



$3

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，输入框内容变化事件，出参：输入框内容



$3



    label="备注"

    icon-name="announcement"

    :bind-obj="lineData"

    field-name="invTxRemark"

    @onChange="updateFlag = true"

/>





$3



!1652322774954



!1652323133790







行号选择组件 —— ZoscLineNumSelect



$3

1、支持自定义区域内容，例：与 ZoscPropsLine组件叠加使用

2、若当前选中行数据与父组件传入的已选中行数据相同，则不会触发lineNumConfirm事件



$3

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，行数据选择事件，出参：选中的行数据对象



$3



$3

>



>>    title="修改行号"

>    :curr-line="lineData"

>    :line-num-list=" lineData.outsourcePickLineList"

>    field-name="outsourcePickLineSeq"

>    @lineNumConfirm="handleChangeLineNum"

>>   

>	>       label="行号"

>       :value="lineData.outsourcePickLineSeq"

>       icon-name="wait_one_b"

>       required

>       :invalid-flag="verifyFlag && !lineData.outsourcePickLineSeq"

>    />

>

>





$3



!1652333515695







日期选择组件 —— ZoscSelectDate



$3

1、支持自定义区域内容，例：与 ZoscPropsLine组件叠加使用

2、若传入的startDate、endDate有值，其日期格式必须与format保持一致



$3

title：String，组件title，默认'请选择'

format：String，日期输出格式，默认'yyyy-MM-dd'

startDate：String，开始日期，默认''

endDate：String，结束日期，默认''

disabled：Boolean，是否禁用日期选择，默认false



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



$3



  format="yyyy-MM-dd HH:mm:ss"

  @fun="setIssueDate"

>

      label="发料时间"

    :value="issueData.issueDate"

    icon-name="date_range"

    required

  />





$3



!1652333683767



!1652333610805









单据搜索组件 —— ZoscDocSearch



$3

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



$3

value：String，传入给搜索框的值，默认''

docNumName：String，单据号字段名，默认'documentNum'

docTypeName：String，单据类型字段名，默认'documentTypeMeaning'

placeholder：String，搜索框提示文字，默认'请输入'

searchUrl：String，接口请求路径，默认'/'

searchKey：String，模糊搜索限制接口查询的字段名，默认''

params：Object，接口请求参数，默认{}



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

close：Event，取消按钮的点击事件



$3

showDocSearch：显示单据搜索组件



$3



    ref="docSearchRef"

    :value="documentNum"

    search-key="documentNum"

    :search-url="searchUrl"

    :params="{ documentNum: documentNum }"

    @close="handleCancel"

    @choose="handleOk"

/>





$3



!1652333858115









单个按钮组件 —— ZoscButtonSingle



$3

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



$3

label：String，按钮文字说明，默认''

disabled：Boolean，是否禁用按钮，默认false

onClick：Event，按钮点击事件



$3



    :label="createFlag ? '下一步' : '保存' "

    @onClick="handleClickNext"

/>





$3



!1652323468452







两个按钮组件 —— ZoscButtonDouble



$3

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



$3

labelLeft：String，左侧按钮的文字说明，默认''

labelRight：String，右侧按钮的文字说明，默认''

disabledLeft：Boolean，是否禁用左侧按钮，默认false

disabledRight：Boolean，是否禁用右侧按钮，默认false



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

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



$3



    label-left="新增"

    label-right="确认发料"

    @onClickLeft="handleAddLine"

    @onClickRight="handleConfirm"

/>





$3



!1652323489074









级联组件 —— ZoscCascader

$3

1、支持自定义区域内容，例：与 ZoscPropsLine组件叠加使用

2、仅点击子级时才触发lovConfirm



$3

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，子级选择事件，出参：选中的行数据对象



$3

focusInput：聚焦输入框



$3



    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"

>

	      label="仓库"

      :value="

${lineData.warehouseName} — ${lineData.locatorName}

"

      icon-name="warehouse"

      required

      border-bottom

      :invalid-flag="verifyFlag && !lineData.warehouseName"

	/>





$3



!1652324715099









扫描提示组件 —— ZoscScanTip



$3

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



$3

label：String，标签说明，默认'序列号'

value：String，显示的内容值，默认''

iconName：String，图标名，默认'info'

iconColor：String，图标颜色，默认'#0078D4'

bgColor：String，组件背景色，默认'#E8F0FD'



$3

handleShowSn：显示提示组件

handleClose：关闭提示组件



$3



    ref="showSnRef"

    :value="currentSnNum"

/>





$3



!1652324803574









提示框组件 —— ZoscDialogCommon



$3

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



$3

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按钮的点击事件



$3



    :dialog-content="showDialogText"

    :visible="showDialog"

    :show-cancel-btn="showCancelBtn"

    :ok-label="okLabel"

    :cancel-label="cancelLabel"

    @onCancel="handleCancel"

    @onOk="handleOk"

/>





$3



!1652324880526



!1652324886441







货位选择组件 —— ZoscLocatorDialog



$3

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



$3

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，取消按钮点击事件



$3

focusInput：聚焦输入框



$3



    :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"

/>





$3



!1652325105593









多库存提示组件 —— ZoscDialogSelect



$3

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



$3

visible：Boolean，组件是否可见，默认false

subTitle：String，提示文字，默认'当前物料存在多条库存数据，请选择要操作的仓库及货位'

dataList：Array，弹窗内容，默认[]

buttonLabel：String，按钮文字说明，默认'取消'



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

onCancel：Event，取消按钮点击事件



$3



    :visible="showDialogSelect"

    :data-list="scanData"

    @onCancel="handleCancel"

    @onOk="chooseItem"

/>





$3



!1652325492141







气泡提示组件 —— ZoscFloatTip



$3

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



$3

showDelete：Boolean，是否显示删除选项，默认false

showDefaultSet：Boolean，是否显示默认设置选项，默认true

showAutoFill：Boolean，是否显示自动填充选项，默认false

showPreDetail：Boolean，是否显示实发明细选项，默认false



onDelete：Event，点击删除触发

onSet：Event，点击默认设置触发

onAutoFill：Event，点击自动填充触发

onPreDetail：Event，点击实发明细触发



$3

showTip：显示气泡提示组件

hideTip：隐藏气泡提示组件



$3



    ref="floatTips"

    :show-delete="true"

    :show-default-set="false"

    @onDelete="handleDeleteIssue"

/>





$3



!1652325596249









默认设置组件 —— ZoscDefaultSetting



$3

1、ZoscDefaultSetting组件为完整页面，可直接新建一个.vue文件，在template标签中使用即可

2、编辑数据后，若未保存就直接退出时，页面会有挽留弹窗



$3

defaultInfo：Object，已维护的默认设置值对象，默认{}

showSourceFlag：Boolean，是否显示来源信息（出库类、调拨转移类单据展示来源信息），默认false

showTargetFlag：Boolean，是否显示目标信息（转移类、入库类、调拨转移类单据展示目标信息），默认false

showTxReason：Boolean，是否显示质量原因（入库类、调拨转移类单据展示质量原因），默认false



back：Event，点击左上角返回触发

save：Event，点击保存触发，出参：页面数据对象



$3





$3



!1652325744562



!1652325805477







出库类序列号组件 —— ZoscOutSn



$3

1、ZoscOutSn组件为完整页面，可直接新建一个.vue文件，在template标签中使用即可

2、编辑数据后，若未保存就直接退出时，页面会有挽留弹窗

3、使用时，只需传入物料明细页已有的序列号数组和当前物料明细对象即可

4、序列号快捷录入-前缀已通过正则限制仅允许输入 大小写字母、数字、中划线、下划线

5、序列号快捷录入-序号开始/结束 已通过正则限制仅允许输入数字，且输入的数字最大值为99999999999999



$3

lineItem：Object，物料明细对象，默认{}

snValue：Array，序列号数组，默认[]

maxLength：Number，序列号快捷录入-前缀输入值的最大长度，默认15



back：Event，点击左上角返回触发

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



$3





$3



!1652326476321



!1652326490691









入库类序列号组件 —— ZoscInSn



$3

1、ZoscInSn组件为完整页面，可直接新建一个.vue文件，在template标签中使用即可

2、编辑数据后，若未保存就直接退出时，页面会有挽留弹窗

3、序列号快捷录入-前缀已通过正则限制仅允许输入 大小写字母、数字、中划线、下划线

4、序列号快捷录入-序号开始/结束 已通过正则限制仅允许输入数字，且输入的数字最大值为99999999999999



$3

lineItem：Object，物料明细对象，默认{}

snValue：Array，序列号数组，默认[]

maxLength：Number，序列号快捷录入-前缀输入值的最大长度，默认15

rewriteMsg：String，数量回写提示说明，默认'本行入库与序列数量不符，是否修改本行入库为序列数量？'

qtyFieldName：String，入库/接收 数量的字段名称，默认'itemPrimaryUomQty'



back：Event，点击左上角返回触发

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



$3

$3

!1652326671327

!1652326694294

!1652326641398

#### 初始化并与npm包建立联系
``npm init --scope=zonejs`#### 打包`yarn run build`#### 发布`yarn run pub`

`组件文档`





导航栏组件 —— ZoscHeader



$3

title：String，标题，默认''

showLeftArrow：Boolean，是否显示左侧的返回按钮，默认true

rightButtons：Array，右侧按钮组



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

onRightClick：Event，右侧按钮点击事件



$3



  slot="header"

  title="生产发料"

  :right-buttons="[

    {

      buttonIcon: 'more',

      buttonLabel: '', // 可选

     },

   ]"

  @onRightClick="handleRightClick"

  @goBack="handleGoBack"

/>





$3



!1652319925379







扫描框组件 —— ZoscScanInput



$3

1、仅支持输入框回车触发，不支持失焦触发，原因：扫码之后一般会要求全选输入框，若同时支持，扫码之后需要操作数据，失焦的时候又会触发一次，用户体验性不好

2、扫描框已通过正则限制不能输入汉字

3、输入框自动聚焦时，已实现阻止手机软键盘的弹出

4、支持在父组件中通过ref属性调用子组件的method，例：this.$refs.docNumInput.focusInput();





$3

placeholder：String，提示文字，默认''

type：String，输入框类型，默认'text'

disabled：Boolean，是否禁用输入框，默认false

autoFocus：Boolean，是否自动聚焦，默认true

value：String，输入框的绑定值，默认''

clearFlag：Boolean，输入框内容清除标识，默认true



onChange：Event，输入框回车事件，出参：扫描结果

onScan：Event，扫码图标点击事件



$3

focusInput：输入框聚焦方法

blurInput：输入框失焦方法

handleClear：清空输入框方法



$3



    ref="docNumInput"

    :value="documentNum"

    placeholder="请扫描或输入发料单/领料单/生产工单"

    :auto-focus="true"

    :clear-flag="false"

    @onChange="handleChange"

    @onScan="handleScan"

/>





$3



!1652338137878









页面无数据组件 —— ZoscNoData



$3

1、使用情景：一般多用于 弹窗、下拉框组件的查询接口未查询到符合条件的数据

2、支持自定义区域内容



$3





或者





  xxx





$3



!1652320415093









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



$3

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



$3

extraDesc：String，额外的说明，默认'请扫码或手动添加'

btnDesc：String，按钮文字说明，默认'新建单据'

iconName：String，按钮图标名称，默认'add'



onClick：Event，按钮点击事件



$3



  v-if="issueList.length<=0"

  @onClick="handleToCreate"

/>





$3



!1652320525448







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



$3

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



$3

iconName：String，按钮图标名称，默认'add'

onClick：Event，悬浮按钮点击事件



$3



  v-show="issueList.length>0" // 可选

  @onClick="handleClick"

/>





$3



!1652320573746









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



$3

1、若标签名的绑定值无数据，编辑态 展示 '请选择'，查看态 则展示'-'

2、若保存时 必填字段未校验通过且要求显示必填校验信息，则必填校验的文字提示内容为'请选择xxx' —— xxx代表传入的label



$3

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，清除图标的点击事件



$3



  label="组织"

  :value="issueData.organizationName"

  icon-name="manage_organization"

  :more-icon="createFlag"

  :required="createFlag"

  :invalid-flag="verifyFlag && !issueData.organizationName"

  border-bottom

/>





$3



!1652320787813



!1652320799576



!1652322616943



!1652322568094



!1652320819124



!1652321412209



!1652321646950







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



$3

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

2、若保存时 必填字段未校验通过且要求显示必填校验信息，则必填校验的文字提示内容为'请输入xxx' —— xxx代表传入的label

3、支持自定义区域内容

4、已通过正则限制只能输入字母、数字、下划线、中划线

5、输入内容若超过最大长度限制，输入事件的回调函数里面已做了字符串截取

6、仅非禁用态且标签名绑定的字段有值时，右侧会出现清除图标



$3

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，输入框回车/内容变化事件，出参：输入框内容



$3

focusInput：聚焦输入框

handleClear：清空输入框



$3

>



>>  label="生产发料单号"

>  :bind-obj="issueData"

>  field-name="issueNum"

>  border-bottom

>  :required="createFlag"

>  :disabled="!createFlag"

>  :invalid-flag="verifyFlag && !issueData.issueNum"

>  @onChange="handleChangeCode"

> >

>   xxx

> 

>或者

>>   label="委外发料单号"

>   :bind-obj="issueData"

>   field-name="outsourceIssueCode"

>   border-bottom

>   :required="createFlag"

>   :disabled="!createFlag"

>   :invalid-flag="verifyFlag && !issueData.outsourceIssueCode"

>   @onChange="handleChangeCode"

>/>

>





$3



!1652321007827



!1652321013692



!1652321044403



!1652321327527



!1652322693465



!1652324091234







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



$3

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

2、若保存时 必填字段未校验通过且要求显示必填校验信息，则必填校验的文字提示内容为'请输入xxx' —— xxx代表传入的label

3、支持自定义区域内容

4、已通过正则限制只能输入数字和小数点，且数字的最大值为999999999.999999

5、仅非禁用态且标签名绑定的字段有值时，右侧会出现清除图标





$3

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，输入框值变化事件，出参：输入框内容



$3

focusInput：聚焦输入框

handleClear：清空输入框



$3



    label="本行已拣"

    :bind-obj="lineData.snEnableFlag? snValue : lineData"

    field-name="itemPrimaryUomQty"

    icon-name="microservice"

    :invalid-flag="verifyFlag"

    required

    :disabled="lineData.snEnableFlag || !lineData.itemCode"

    @onChange="handleChange"

    >

      

        厘米





$3



!1652321171678



!1652322717801







文本域组件 —— ZoscPropsLineTextarea



$3

1、若保存时 必填字段未校验通过且要求显示必填校验信息，则必填校验的文字提示内容为'请输入xxx' —— xxx代表传入的label

2、支持自定义区域内容

3、输入内容若超过最大长度限制，输入事件的回调函数里面已做了字符串截取

4、仅非禁用态且标签名绑定的字段有值时，右侧会出现清除图标



$3

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，输入框内容变化事件，出参：输入框内容



$3



    label="备注"

    icon-name="announcement"

    :bind-obj="lineData"

    field-name="invTxRemark"

    @onChange="updateFlag = true"

/>





$3



!1652322774954



!1652323133790







行号选择组件 —— ZoscLineNumSelect



$3

1、支持自定义区域内容，例：与 ZoscPropsLine组件叠加使用

2、若当前选中行数据与父组件传入的已选中行数据相同，则不会触发lineNumConfirm事件



$3

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，行数据选择事件，出参：选中的行数据对象



$3



$3

>



>>    title="修改行号"

>    :curr-line="lineData"

>    :line-num-list=" lineData.outsourcePickLineList"

>    field-name="outsourcePickLineSeq"

>    @lineNumConfirm="handleChangeLineNum"

>>   

>	>       label="行号"

>       :value="lineData.outsourcePickLineSeq"

>       icon-name="wait_one_b"

>       required

>       :invalid-flag="verifyFlag && !lineData.outsourcePickLineSeq"

>    />

>

>





$3



!1652333515695







日期选择组件 —— ZoscSelectDate



$3

1、支持自定义区域内容，例：与 ZoscPropsLine组件叠加使用

2、若传入的startDate、endDate有值，其日期格式必须与format保持一致



$3

title：String，组件title，默认'请选择'

format：String，日期输出格式，默认'yyyy-MM-dd'

startDate：String，开始日期，默认''

endDate：String，结束日期，默认''

disabled：Boolean，是否禁用日期选择，默认false



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



$3



  format="yyyy-MM-dd HH:mm:ss"

  @fun="setIssueDate"

>

      label="发料时间"

    :value="issueData.issueDate"

    icon-name="date_range"

    required

  />





$3



!1652333683767



!1652333610805









单据搜索组件 —— ZoscDocSearch



$3

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



$3

value：String，传入给搜索框的值，默认''

docNumName：String，单据号字段名，默认'documentNum'

docTypeName：String，单据类型字段名，默认'documentTypeMeaning'

placeholder：String，搜索框提示文字，默认'请输入'

searchUrl：String，接口请求路径，默认'/'

searchKey：String，模糊搜索限制接口查询的字段名，默认''

params：Object，接口请求参数，默认{}



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

close：Event，取消按钮的点击事件



$3

showDocSearch：显示单据搜索组件



$3



    ref="docSearchRef"

    :value="documentNum"

    search-key="documentNum"

    :search-url="searchUrl"

    :params="{ documentNum: documentNum }"

    @close="handleCancel"

    @choose="handleOk"

/>





$3



!1652333858115









单个按钮组件 —— ZoscButtonSingle



$3

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



$3

label：String，按钮文字说明，默认''

disabled：Boolean，是否禁用按钮，默认false

onClick：Event，按钮点击事件



$3



    :label="createFlag ? '下一步' : '保存' "

    @onClick="handleClickNext"

/>





$3



!1652323468452







两个按钮组件 —— ZoscButtonDouble



$3

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



$3

labelLeft：String，左侧按钮的文字说明，默认''

labelRight：String，右侧按钮的文字说明，默认''

disabledLeft：Boolean，是否禁用左侧按钮，默认false

disabledRight：Boolean，是否禁用右侧按钮，默认false



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

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



$3



    label-left="新增"

    label-right="确认发料"

    @onClickLeft="handleAddLine"

    @onClickRight="handleConfirm"

/>





$3



!1652323489074









级联组件 —— ZoscCascader

$3

1、支持自定义区域内容，例：与 ZoscPropsLine组件叠加使用

2、仅点击子级时才触发lovConfirm



$3

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，子级选择事件，出参：选中的行数据对象



$3

focusInput：聚焦输入框



$3



    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"

>

	      label="仓库"

      :value="

${lineData.warehouseName} — ${lineData.locatorName}

"

      icon-name="warehouse"

      required

      border-bottom

      :invalid-flag="verifyFlag && !lineData.warehouseName"

	/>





$3



!1652324715099









扫描提示组件 —— ZoscScanTip



$3

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



$3

label：String，标签说明，默认'序列号'

value：String，显示的内容值，默认''

iconName：String，图标名，默认'info'

iconColor：String，图标颜色，默认'#0078D4'

bgColor：String，组件背景色，默认'#E8F0FD'



$3

handleShowSn：显示提示组件

handleClose：关闭提示组件



$3



    ref="showSnRef"

    :value="currentSnNum"

/>





$3



!1652324803574









提示框组件 —— ZoscDialogCommon



$3

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



$3

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按钮的点击事件



$3



    :dialog-content="showDialogText"

    :visible="showDialog"

    :show-cancel-btn="showCancelBtn"

    :ok-label="okLabel"

    :cancel-label="cancelLabel"

    @onCancel="handleCancel"

    @onOk="handleOk"

/>





$3



!1652324880526



!1652324886441







货位选择组件 —— ZoscLocatorDialog



$3

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



$3

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，取消按钮点击事件



$3

focusInput：聚焦输入框



$3



    :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"

/>





$3



!1652325105593









多库存提示组件 —— ZoscDialogSelect



$3

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



$3

visible：Boolean，组件是否可见，默认false

subTitle：String，提示文字，默认'当前物料存在多条库存数据，请选择要操作的仓库及货位'

dataList：Array，弹窗内容，默认[]

buttonLabel：String，按钮文字说明，默认'取消'



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

onCancel：Event，取消按钮点击事件



$3



    :visible="showDialogSelect"

    :data-list="scanData"

    @onCancel="handleCancel"

    @onOk="chooseItem"

/>





$3



!1652325492141







气泡提示组件 —— ZoscFloatTip



$3

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



$3

showDelete：Boolean，是否显示删除选项，默认false

showDefaultSet：Boolean，是否显示默认设置选项，默认true

showAutoFill：Boolean，是否显示自动填充选项，默认false

showPreDetail：Boolean，是否显示实发明细选项，默认false



onDelete：Event，点击删除触发

onSet：Event，点击默认设置触发

onAutoFill：Event，点击自动填充触发

onPreDetail：Event，点击实发明细触发



$3

showTip：显示气泡提示组件

hideTip：隐藏气泡提示组件



$3



    ref="floatTips"

    :show-delete="true"

    :show-default-set="false"

    @onDelete="handleDeleteIssue"

/>





$3



!1652325596249









默认设置组件 —— ZoscDefaultSetting



$3

1、ZoscDefaultSetting组件为完整页面，可直接新建一个.vue文件，在template标签中使用即可

2、编辑数据后，若未保存就直接退出时，页面会有挽留弹窗



$3

defaultInfo：Object，已维护的默认设置值对象，默认{}

showSourceFlag：Boolean，是否显示来源信息（出库类、调拨转移类单据展示来源信息），默认false

showTargetFlag：Boolean，是否显示目标信息（转移类、入库类、调拨转移类单据展示目标信息），默认false

showTxReason：Boolean，是否显示质量原因（入库类、调拨转移类单据展示质量原因），默认false



back：Event，点击左上角返回触发

save：Event，点击保存触发，出参：页面数据对象



$3





$3



!1652325744562



!1652325805477







出库类序列号组件 —— ZoscOutSn



$3

1、ZoscOutSn组件为完整页面，可直接新建一个.vue文件，在template标签中使用即可

2、编辑数据后，若未保存就直接退出时，页面会有挽留弹窗

3、使用时，只需传入物料明细页已有的序列号数组和当前物料明细对象即可

4、序列号快捷录入-前缀已通过正则限制仅允许输入 大小写字母、数字、中划线、下划线

5、序列号快捷录入-序号开始/结束 已通过正则限制仅允许输入数字，且输入的数字最大值为99999999999999



$3

lineItem：Object，物料明细对象，默认{}

snValue：Array，序列号数组，默认[]

maxLength：Number，序列号快捷录入-前缀输入值的最大长度，默认15



back：Event，点击左上角返回触发

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



$3





$3



!1652326476321



!1652326490691









入库类序列号组件 —— ZoscInSn



$3

1、ZoscInSn组件为完整页面，可直接新建一个.vue文件，在template标签中使用即可

2、编辑数据后，若未保存就直接退出时，页面会有挽留弹窗

3、序列号快捷录入-前缀已通过正则限制仅允许输入 大小写字母、数字、中划线、下划线

4、序列号快捷录入-序号开始/结束 已通过正则限制仅允许输入数字，且输入的数字最大值为99999999999999



$3

lineItem：Object，物料明细对象，默认{}

snValue：Array，序列号数组，默认[]

maxLength：Number，序列号快捷录入-前缀输入值的最大长度，默认15

rewriteMsg：String，数量回写提示说明，默认'本行入库与序列数量不符，是否修改本行入库为序列数量？'

qtyFieldName：String，入库/接收 数量的字段名称，默认'itemPrimaryUomQty'



back：Event，点击左上角返回触发

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



$3

$3

!1652326671327

!1652326694294

!1652326641398

@zonejs/vue-component

组件文档

导航栏组件 —— ZoscHeader

$3

$3

$3

扫描框组件 —— ZoscScanInput

$3

$3

$3

$3

$3

页面无数据组件 —— ZoscNoData

$3

$3

$3

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

$3

$3

$3

$3

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

$3

$3

$3

$3

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

$3

$3

$3

$3

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

$3

$3

$3

$3

$3

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

$3

$3

$3

$3

$3

文本域组件 —— ZoscPropsLineTextarea

$3

$3

$3

$3

行号选择组件 —— ZoscLineNumSelect

$3

$3

$3

$3

$3

日期选择组件 —— ZoscSelectDate

$3

$3

$3

$3

单据搜索组件 —— ZoscDocSearch

$3

$3

$3

$3

$3

单个按钮组件 —— ZoscButtonSingle

$3

$3

$3

$3

两个按钮组件 —— ZoscButtonDouble

$3

$3

$3

$3

级联组件 —— ZoscCascader

$3

$3

$3

$3

`组件文档`

`组件文档`