<!-- * @Descripttion: * @version: 1.0.0 * @Author: mingbo.zhang@hand-china.com * @Date: 2022-05-08 20:12:07 * @LastEditors: mingbo.zhang@hand-china.com * @LastEditTime: 2022-05-16 13:58:10 --> #### 初始化并与npm包建立联系 ``` npm init --scope=zonej
npm install @zonejs/vue-component
#### 初始化并与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
`
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
`
:value="documentNum"
placeholder="请扫描或输入发料单/领料单/生产工单"
:auto-focus="true"
:clear-flag="false"
@onChange="handleChange"
@onScan="handleScan"
/>
`
$3
!1652338137878
页面无数据组件 —— ZoscNoData
$3
1、使用情景:一般多用于 弹窗、下拉框组件的查询接口未查询到符合条件的数据
2、支持自定义区域内容
$3
`
或者
`
$3
!1652320415093
列表页面无数据组件 —— ZoscListNoData
$3
使用情景:一般多用于列表页的查询接口未查询到符合条件的数据
$3
extraDesc:String,额外的说明,默认'请扫码或手动添加'
btnDesc:String,按钮文字说明,默认'新建单据'
iconName:String,按钮图标名称,默认'add'
onClick:Event,按钮点击事件
$3
`
@onClick="handleToCreate"
/>
`
$3
!1652320525448
列表页悬浮按钮组件 —— ZoscFloatBtn
$3
悬浮按钮固定展示在页面右下方
$3
iconName:String,按钮图标名称,默认'add'
onClick:Event,悬浮按钮点击事件
$3
`
@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
`
: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
>
`
>
> :bind-obj="issueData"
> field-name="issueNum"
> border-bottom
> :required="createFlag"
> :disabled="!createFlag"
> :invalid-flag="verifyFlag && !issueData.issueNum"
> @onChange="handleChangeCode"
> >
> xxx
>
>或者
>
> :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
`
: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
`
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
>
`
>
> :curr-line="lineData"
> :line-num-list=" lineData.outsourcePickLineList"
> field-name="outsourcePickLineSeq"
> @lineNumConfirm="handleChangeLineNum"
>>
>
> :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
`
@fun="setIssueDate"
>
: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
`
: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
`
@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-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
${lineData.warehouseName} — ${lineData.locatorName}
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"
>
:value=""
`
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
`
: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
`
: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
`
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
`
: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
`
: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
`
:show-target-flag="true"
@back="goBack"
@save="handleSave"
/>
`
$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
`
:sn-value="snValue.snList"
@save="handleSaveSn"
@back="goBack"
/>
`
$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
``
:sn-list="snList"
:rewrite-msg="dialogContent"
@save="handleSaveSn"
@back="goBack"
/>