12 changed files with 829 additions and 50 deletions
@ -0,0 +1,205 @@ |
|||||
|
<template> |
||||
|
<view class="uni-numbox"> |
||||
|
<view @click="_calcValue('minus')" class="uni-numbox__minus uni-numbox-btns" :style="{ background }"> |
||||
|
<text class="uni-numbox--text" :class="{ 'uni-numbox--disabled': inputValue <= min || disabled }">-</text> |
||||
|
</view> |
||||
|
<input :disabled="disabled" @input="onKeyInput" @blur="_onBlur" class="uni-numbox__value" type="number" v-model="inputValue" /> |
||||
|
<view @click="_calcValue('plus')" class="uni-numbox__plus uni-numbox-btns" :style="{ background }"> |
||||
|
<text class="uni-numbox--text" :class="{ 'uni-numbox--disabled': inputValue >= max || disabled }">+</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
<script> |
||||
|
/** |
||||
|
* NumberBox 数字输入框 |
||||
|
* @description 带加减按钮的数字输入框 |
||||
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=31 |
||||
|
* @property {Number} value 输入框当前值 |
||||
|
* @property {Number} min 最小值 |
||||
|
* @property {Number} max 最大值 |
||||
|
* @property {Number} step 每次点击改变的间隔大小 |
||||
|
* @property {String} background 背景色 |
||||
|
* @property {Boolean} disabled = [true|false] 是否为禁用状态 |
||||
|
* @event {Function} change 输入框值改变时触发的事件，参数为输入框当前的 value |
||||
|
*/ |
||||
|
|
||||
|
export default { |
||||
|
name: 'UniNumberBox', |
||||
|
emits: ['change'], |
||||
|
props: { |
||||
|
value: { |
||||
|
type: [Number, String], |
||||
|
default: 1 |
||||
|
}, |
||||
|
min: { |
||||
|
type: Number, |
||||
|
default: 0 |
||||
|
}, |
||||
|
max: { |
||||
|
type: Number, |
||||
|
default: 100 |
||||
|
}, |
||||
|
step: { |
||||
|
type: Number, |
||||
|
default: 1 |
||||
|
}, |
||||
|
background: { |
||||
|
type: String, |
||||
|
default: '#f5f5f5' |
||||
|
}, |
||||
|
disabled: { |
||||
|
type: Boolean, |
||||
|
default: false |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
inputValue: 0 |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
inputValue(newVal, oldVal) { |
||||
|
if (+newVal !== +oldVal) { |
||||
|
this.$emit('change', newVal) |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
this.inputValue = +this.value |
||||
|
}, |
||||
|
methods: { |
||||
|
// 输入框实时获取输入内容 |
||||
|
onKeyInput(event) { |
||||
|
// this.value = event.target.value; |
||||
|
}, |
||||
|
// 加、减操作(minus:减;plus:加) |
||||
|
_calcValue(type) { |
||||
|
if (this.disabled) { |
||||
|
return |
||||
|
} |
||||
|
const scale = this._getDecimalScale() |
||||
|
let value = this.inputValue * scale |
||||
|
const step = this.step * scale |
||||
|
if (type === 'minus') { |
||||
|
value -= step |
||||
|
if (value < this.min * scale) { |
||||
|
return |
||||
|
} |
||||
|
if (value > this.max * scale) { |
||||
|
value = this.max * scale |
||||
|
} |
||||
|
} else if (type === 'plus') { |
||||
|
value += step |
||||
|
if (value > this.max * scale) { |
||||
|
return |
||||
|
} |
||||
|
if (value < this.min * scale) { |
||||
|
value = this.min * scale |
||||
|
} |
||||
|
} |
||||
|
if (`${value}`.length > 5) { |
||||
|
value = value.toFixed(6) // toFixed保留小数点位数方法 |
||||
|
} |
||||
|
this.inputValue = String(value / scale) |
||||
|
}, |
||||
|
_getDecimalScale() { |
||||
|
let scale = 1 |
||||
|
// 浮点型 |
||||
|
if (~~this.step !== this.step) { |
||||
|
scale = 10 ** `${this.step}`.split('.')[1].length |
||||
|
} |
||||
|
return scale |
||||
|
}, |
||||
|
_onBlur(event) { |
||||
|
let { value } = event.detail |
||||
|
if (!value) { |
||||
|
return |
||||
|
} |
||||
|
value = +value |
||||
|
if (value > this.max) { |
||||
|
value = this.max |
||||
|
} else if (value < this.min) { |
||||
|
value = this.min |
||||
|
} |
||||
|
this.inputValue = value |
||||
|
/* 小数点后保留四位 */ |
||||
|
if (value > 0) { |
||||
|
event.detail.value = parseFloat(event.detail.value).toFixed(6) |
||||
|
} else { |
||||
|
event.detail.value = -parseFloat(event.detail.value).toFixed(6) |
||||
|
} |
||||
|
// 重新赋值给input |
||||
|
this.$nextTick(() => { |
||||
|
this.inputValue = event.detail.value |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style lang="scss" scoped> |
||||
|
$box-height: 26px; |
||||
|
$bg: #f5f5f5; |
||||
|
$br: 2px; |
||||
|
$color: #333; |
||||
|
|
||||
|
.uni-numbox { |
||||
|
/* #ifndef APP-NVUE */ |
||||
|
display: flex; |
||||
|
/* #endif */ |
||||
|
flex-direction: row; |
||||
|
} |
||||
|
|
||||
|
.uni-numbox-btns { |
||||
|
/* #ifndef APP-NVUE */ |
||||
|
display: flex; |
||||
|
/* #endif */ |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
padding: 0 8px; |
||||
|
background-color: $bg; |
||||
|
/* #ifdef H5 */ |
||||
|
cursor: pointer; |
||||
|
/* #endif */ |
||||
|
} |
||||
|
|
||||
|
.uni-numbox__value { |
||||
|
margin: 0 2px; |
||||
|
background-color: $bg; |
||||
|
width: 100px; |
||||
|
height: $box-height; |
||||
|
text-align: center; |
||||
|
font-size: 14px; |
||||
|
border-left-width: 0; |
||||
|
border-right-width: 0; |
||||
|
color: $color; |
||||
|
} |
||||
|
|
||||
|
.uni-numbox__minus { |
||||
|
border-top-left-radius: $br; |
||||
|
border-bottom-left-radius: $br; |
||||
|
width: 64rpx; |
||||
|
} |
||||
|
|
||||
|
.uni-numbox__plus { |
||||
|
border-top-right-radius: $br; |
||||
|
border-bottom-right-radius: $br; |
||||
|
width: 64rpx; |
||||
|
} |
||||
|
|
||||
|
.uni-numbox--text { |
||||
|
// fix nvue |
||||
|
line-height: 20px; |
||||
|
|
||||
|
font-size: 20px; |
||||
|
font-weight: 300; |
||||
|
color: $color; |
||||
|
} |
||||
|
|
||||
|
.uni-numbox .uni-numbox--disabled { |
||||
|
color: #c0c0c0 !important; |
||||
|
/* #ifdef H5 */ |
||||
|
cursor: not-allowed; |
||||
|
/* #endif */ |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,369 @@ |
|||||
|
<template> |
||||
|
<view class=""> |
||||
|
<uni-popup ref="popup" :maskClick="false"> |
||||
|
<view class="uni-flex uni-column pop_customer"> |
||||
|
<view class="" style="padding: 10rpx"> |
||||
|
<view class="uni-flex u-col-center uni-row space-between" style="padding: 10rpx 10rpx 20rpx 10rpx"> |
||||
|
<view class="" style="font-size: 35rpx"> |
||||
|
{{ title }} |
||||
|
</view> |
||||
|
<image style="width: 35rpx; height: 35rpx" src="/static/icons/icons_close.svg" @click="closeRequestPopup()"></image> |
||||
|
</view> |
||||
|
<view class="split_line"></view> |
||||
|
<view class="uni-flex uni-column" style="background-color: white"> |
||||
|
<view class="uni-flex uni-column"> |
||||
|
<view class="uni-flex uni-row padding title u-col-center" style="width: 100%"> |
||||
|
<view class="" style="width: 25%"> |
||||
|
<text>生产线：</text> |
||||
|
</view> |
||||
|
|
||||
|
<view class=""> |
||||
|
<uni-combox :candidates="productLineList" v-model="productLineCode" placeholder="请扫描来源库位" @confirm="handleConfirm" style="height: 30rpx; border: 1px solid #fff"></uni-combox> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="split_line"></view> |
||||
|
|
||||
|
<view class="title padding" style="display: flex"> |
||||
|
<text style="flex-shrink: 0">物料：</text> |
||||
|
<view class="" style="width: 100%"> |
||||
|
{{ itemCode }} |
||||
|
</view> |
||||
|
<view class=""> |
||||
|
<image src="/static/search.svg" mode="" style="width: 40rpx; height: 40rpx; margin-left: 20rpx" @click="itemCodeClick"> </image> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="split_line"></view> |
||||
|
<view class="uni-flex uni-row padding title u-col-center"> |
||||
|
<text>数量： </text> |
||||
|
<view class="uni-flex uni-row uni-center" style="display: flex; align-items: center; margin-left: 20rpx; justify-content: center"> |
||||
|
<input style="text-align: center" class="qty_input" v-model="counQty" type="number" @confirm="confirm()" :focus="numberFocus" @input="checkNum" :maxlength="maxlength" /> |
||||
|
|
||||
|
<uom :uom="uom"></uom> |
||||
|
<view class="" v-if="stdPackInfo != undefined" style="display: flex; flex-direction: row; margin-left: 10rpx"> (<packQty :dataContent="stdPackInfo"></packQty>) </view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="split_line"></view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="uni-flex uni-row hide_border"> |
||||
|
<button class="btn_edit_big_cancle" hover-class="btn_edit_big_after" @click="cancel()">取消</button> |
||||
|
<button class="btn_edit_big_confirm" hover-class="btn_edit_big_after" @click="confirm()">确认</button> |
||||
|
</view> |
||||
|
</view> |
||||
|
</uni-popup> |
||||
|
<win-scan-item ref="scanPopup" title="物料代码" @getScanResult="getItemScanResult" :itemCodeTypeList="itemCodeTypeList"> </win-scan-item> |
||||
|
<comMessage ref="comMessage"></comMessage> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { getBasicItemByCode, getProductionlineItem, getWorkShopLineStation, getWarehouseCodeList } from '@/api/request2.js' |
||||
|
import { getLocationTypeName, getListLocationTypeDesc, checkDirectoryItemExist } from '@/common/directory.js' |
||||
|
import uom from '@/mycomponents/qty/uom.vue' |
||||
|
import packQty from '@/mycomponents/qty/packQty.vue' |
||||
|
import balanceStatus from '@/mycomponents/status/balanceStatus.vue' |
||||
|
import winScanItem from '@/mycomponents/scan/winScanItem.vue' |
||||
|
|
||||
|
export default { |
||||
|
components: { |
||||
|
uom, |
||||
|
balanceStatus, |
||||
|
winScanItem, |
||||
|
packQty |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
workshopCode: '', // 车间 |
||||
|
workShopName: '', |
||||
|
productionLineCode: '', // 生产线 |
||||
|
productionLineName: '', |
||||
|
workStationCode: '', // 工位 |
||||
|
workStationName: '', |
||||
|
itemCode: '请扫描物料信息', |
||||
|
fromWarehouseCode: '请选择仓库代码', |
||||
|
itemName: '', |
||||
|
qty: 0, |
||||
|
rawLocationCode: '', |
||||
|
fgLocationCode: '', |
||||
|
itemCodeFocus: false, |
||||
|
requestInfo: null, |
||||
|
itemCodeList: [], |
||||
|
counQty: undefined, |
||||
|
editPosition: true, |
||||
|
numberFocus: false, |
||||
|
uom: '', |
||||
|
positionInfo: '请选择位置', |
||||
|
show: false, |
||||
|
isModifiedPosition: true, |
||||
|
positionList: [], |
||||
|
stdQty: 0, // 标包 |
||||
|
maxlength: 10, |
||||
|
stdPackInfo: undefined, |
||||
|
wareHouseList: [], |
||||
|
showWareHouse: false, |
||||
|
productLineList: [], |
||||
|
productLineCode: '' |
||||
|
} |
||||
|
}, |
||||
|
props: { |
||||
|
title: { |
||||
|
type: String, |
||||
|
default: '完工信息' |
||||
|
}, |
||||
|
itemCodeTypeList: { |
||||
|
type: Array, |
||||
|
default: [] |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
checkNum(e) { |
||||
|
const { value } = e.detail |
||||
|
const dot = value.indexOf('.') // 包含小数点 |
||||
|
const reg = /^[0-9]+$/ // 正整数 |
||||
|
if (dot > -1) { |
||||
|
this.maxlength = dot + 7 // 长度是小数点后两位 |
||||
|
if (value.length > dot + 7) { |
||||
|
} |
||||
|
} |
||||
|
if (reg.test(value)) { |
||||
|
// 如果是正整数不包含小数点 |
||||
|
this.maxlength = 10 |
||||
|
} |
||||
|
this.change(value) |
||||
|
}, |
||||
|
openRequestPopup(editPosition) { |
||||
|
if (this.positionList.length == 0) { |
||||
|
getWorkShopLineStation() |
||||
|
.then((res) => { |
||||
|
if (res.data != null && res.data.length > 0) { |
||||
|
this.positionList = res.data |
||||
|
} else { |
||||
|
this.showErrorMessage('未查找到位置信息') |
||||
|
} |
||||
|
}) |
||||
|
.catch((error) => { |
||||
|
this.showErrorMessage(error) |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
this.editPosition = editPosition |
||||
|
if (this.isModifiedPosition) { |
||||
|
this.isModifiedPosition = false |
||||
|
} else { |
||||
|
this.itemCode = '请扫描物料信息' |
||||
|
this.show = false |
||||
|
this.showWareHouse = false |
||||
|
this.uom = '' |
||||
|
this.qty = 0 |
||||
|
this.stdPackInfo = undefined |
||||
|
this.counQty = undefined |
||||
|
this.numberFocus = false |
||||
|
this.itemCodeGetFocus() |
||||
|
} |
||||
|
|
||||
|
setTimeout((res) => { |
||||
|
this.$refs.popup.open('bottom') |
||||
|
}, 500) |
||||
|
}, |
||||
|
initData() { |
||||
|
this.positionList = [] |
||||
|
;(this.wareHouseList = []), (this.showWareHouse = false) |
||||
|
this.editPosition = true |
||||
|
this.itemCode = '请扫描物料信息' |
||||
|
this.rawLocationCode = '' |
||||
|
this.positionInfo = '请选择位置' |
||||
|
this.fromWarehouseCode = '请选择仓库代码' |
||||
|
this.workshopCode = '' // 车间 |
||||
|
this.workShopName = '' |
||||
|
this.productionLineCode = '' // 生产线 |
||||
|
this.productionLineName = '' |
||||
|
this.workStationCode = '' // 工位 |
||||
|
this.workStationName = '' |
||||
|
this.show = false |
||||
|
this.uom = '' |
||||
|
this.qty = 0 |
||||
|
this.stdPackInfo = undefined |
||||
|
this.counQty = undefined |
||||
|
this.numberFocus = false |
||||
|
}, |
||||
|
|
||||
|
closeRequestPopup() { |
||||
|
this.$refs.popup.close() |
||||
|
}, |
||||
|
locationConfirm() { |
||||
|
// 查询库位信息 |
||||
|
this.checkLocatioCode() |
||||
|
}, |
||||
|
itemCodeClick() { |
||||
|
this.$refs.scanPopup.openScanPopup() |
||||
|
}, |
||||
|
|
||||
|
itemCodeGetFocus() { |
||||
|
this.itemCodeFocus = true |
||||
|
}, |
||||
|
itemCodeLoseFocus() { |
||||
|
this.itemCodeFocus = false |
||||
|
}, |
||||
|
|
||||
|
confirm() { |
||||
|
if (this.positionInfo == '请选择位置') { |
||||
|
this.showErrorMessage('请选择位置') |
||||
|
return |
||||
|
} |
||||
|
|
||||
|
if (this.fromWarehouseCode == '请选择仓库代码') { |
||||
|
this.showErrorMessage('请选择仓库代码') |
||||
|
return |
||||
|
} |
||||
|
|
||||
|
if (this.itemCode == '请扫描物料信息') { |
||||
|
this.showErrorMessage('请输入物料', 'itemCode') |
||||
|
return |
||||
|
} |
||||
|
if (this.counQty == undefined) { |
||||
|
this.showErrorMessage('请输入数量') |
||||
|
return |
||||
|
} |
||||
|
|
||||
|
if (this.qty == 0) { |
||||
|
this.showErrorMessage('数量必须大于0') |
||||
|
return |
||||
|
} |
||||
|
|
||||
|
if (this.rawLocationCode == '') { |
||||
|
this.showErrorMessage(`${this.workStationName}的原材料库位为空`) |
||||
|
return |
||||
|
} |
||||
|
this.callback('add') |
||||
|
}, |
||||
|
|
||||
|
callback(action) { |
||||
|
const item = { |
||||
|
positionInfo: this.positionInfo, |
||||
|
workshopCode: this.workshopCode, // 车间 |
||||
|
workShopName: this.workShopName, |
||||
|
productionLineCode: this.productionLineCode, // 生产线 |
||||
|
productionLineName: this.productionLineName, |
||||
|
workStationCode: this.workStationCode, // 工位 |
||||
|
workStationName: this.workStationName, |
||||
|
rawLocationCode: this.rawLocationCode, |
||||
|
fgLocationCode: this.fgLocationCode, |
||||
|
fromWarehouseCode: this.fromWarehouseCode, |
||||
|
toWarehouseCode: this.fromWarehouseCode, |
||||
|
itemCode: this.itemCode, |
||||
|
itemName: this.itemName, |
||||
|
uom: this.uom, |
||||
|
qty: this.qty |
||||
|
} |
||||
|
this.closeRequestPopup() |
||||
|
this.$emit('confirm', action, item) |
||||
|
}, |
||||
|
|
||||
|
showErrorMessage(message, type) { |
||||
|
setTimeout((r) => { |
||||
|
this.$refs.comMessage.showErrorMessage(message, (res) => { |
||||
|
if (type == 'itemCode') { |
||||
|
this.itemCodeGetFocus() |
||||
|
} else { |
||||
|
this.numberFocus = true |
||||
|
} |
||||
|
}) |
||||
|
if (type == 'itemCode') { |
||||
|
this.itemCode = '请扫描物料信息' |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
change(value) { |
||||
|
this.qty = value |
||||
|
}, |
||||
|
cancel(e) { |
||||
|
this.closeRequestPopup() |
||||
|
}, |
||||
|
showSelect() { |
||||
|
if (this.editPosition) { |
||||
|
this.show = true |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
showWarseHouseSelect() { |
||||
|
if (this.editPosition) { |
||||
|
this.wareHouseClick() |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
confirmSelect(e) { |
||||
|
this.positionInfo = `${e[0].label}-${e[1].label}-${e[2].label}` |
||||
|
console.log('位置', this.positionInfo) |
||||
|
this.workshopCode = e[0].value |
||||
|
this.productionLineCode = e[1].value |
||||
|
this.workStationCode = e[2].value |
||||
|
this.workShopName = e[0].label |
||||
|
this.productionLineName = e[1].label |
||||
|
this.workStationName = e[2].label |
||||
|
|
||||
|
const shop = this.positionList.find((shop) => shop.value == this.workshopCode) |
||||
|
if (shop != undefined && shop.children != undefined) { |
||||
|
const prodLine = shop.children.find((line) => line.value == this.productionLineCode) |
||||
|
if (prodLine != undefined && prodLine.children != undefined) { |
||||
|
const station = prodLine.children.find((r) => r.value == this.workStationCode) |
||||
|
if (station.rawLocationCode == '' && station.rawLocationCode == null) { |
||||
|
this.showErrorMessage(`${this.workStationName}的原材料库位为空,请重新选择`) |
||||
|
} else { |
||||
|
this.rawLocationCode = station.rawLocationCode |
||||
|
this.fgLocationCode = station.fgLocationCode |
||||
|
} |
||||
|
} else { |
||||
|
this.showErrorMessage('生产线-工位基础信息维护错误') |
||||
|
} |
||||
|
} else { |
||||
|
this.showErrorMessage('车间-生产线基础信息维护错误') |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
getItemScanResult(code, scanResult) { |
||||
|
this.itemCode = code |
||||
|
this.itemName = scanResult.name |
||||
|
this.uom = scanResult.uom |
||||
|
this.stdPackInfo = scanResult.package |
||||
|
this.numberFocus = true |
||||
|
}, |
||||
|
wareHouseClick() { |
||||
|
uni.showLoading({ |
||||
|
title: '查询中....', |
||||
|
mask: true |
||||
|
}) |
||||
|
getWarehouseCodeList(1, 100) |
||||
|
.then((res) => { |
||||
|
uni.hideLoading() |
||||
|
if (res.data != null && res.data.list.length > 0) { |
||||
|
res.data.list.forEach((item) => { |
||||
|
item.value = item.code |
||||
|
item.label = item.name |
||||
|
}) |
||||
|
this.wareHouseList = res.data.list |
||||
|
this.showWareHouse = true |
||||
|
} else { |
||||
|
this.showErrorMessage('未查找到仓库代码') |
||||
|
} |
||||
|
}) |
||||
|
.catch((error) => { |
||||
|
uni.hideLoading() |
||||
|
this.showErrorMessage(error) |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
confirmWareHouse(e) { |
||||
|
this.fromWarehouseCode = e[0].value |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
.title { |
||||
|
font-size: 30rpx; |
||||
|
} |
||||
|
</style> |
||||
@ -1,14 +1,22 @@ |
|||||
<template> |
<template> |
||||
<view class=""> |
<view class=""> |
||||
<com-blank-view @goScan="openFg" v-if="detailSource.length == 0"></com-blank-view> |
<view class=""> |
||||
|
<com-blank-view @goScan="openFg" v-if="detailSource.length == 0"></com-blank-view> |
||||
|
</view> |
||||
|
<comReceiptPopup ref="comReceiptPopupRef" @confirm="requestConfirm"></comReceiptPopup> |
||||
</view> |
</view> |
||||
</template> |
</template> |
||||
|
|
||||
<script setup lang="ts"> |
<script setup lang="ts"> |
||||
import { ref, onMounted, nextTick, watch, getCurrentInstance } from 'vue' |
import { ref, onMounted, nextTick, watch, getCurrentInstance } from 'vue' |
||||
import comBlankView from '@/mycomponents/common/comBlankView.vue' |
import comBlankView from '@/mycomponents/common/comBlankView.vue' |
||||
|
import comReceiptPopup from '@/pages/fg/coms/comReceiptPopup.vue' |
||||
|
|
||||
const detailSource = ref([]) |
const detailSource = ref([]) |
||||
|
const comReceiptPopupRef = ref() |
||||
|
const openFg = () => { |
||||
|
comReceiptPopupRef.value.openRequestPopup('') |
||||
|
} |
||||
</script> |
</script> |
||||
|
|
||||
<style></style> |
<style></style> |
||||
|
|||||
@ -0,0 +1,28 @@ |
|||||
|
<template> |
||||
|
<view class="page-wraper"> |
||||
|
<comMoveJob :title="title" ref="comMoveJobRef" businessTypeCode="NokToHold"> </comMoveJob> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script setup lang="ts"> |
||||
|
import { ref, onLoad, onPullDownRefresh, onNavigationBarButtonTap } from 'vue' |
||||
|
import comMoveJob from '@/pages/inventoryMove/coms/comMoveJob.vue' |
||||
|
|
||||
|
const title = ref('') |
||||
|
const comMoveJobRef = ref() |
||||
|
onLoad((option) => { |
||||
|
title.value = option.title |
||||
|
}) |
||||
|
|
||||
|
onPullDownRefresh(() => { |
||||
|
comMoveJobRef.value.refresh() |
||||
|
}) |
||||
|
|
||||
|
onNavigationBarButtonTap((e) => { |
||||
|
if (e.index === 0) { |
||||
|
comMoveJobRef.value.toHome() |
||||
|
} else if (e.index == 1) { |
||||
|
comMoveJobRef.value.openFilter() |
||||
|
} |
||||
|
}) |
||||
|
</script> |
||||
@ -0,0 +1,132 @@ |
|||||
|
# wz-select-popup |
||||
|
|
||||
|
## 示例 |
||||
|
|
||||
|
```vue |
||||
|
<template> |
||||
|
<view> |
||||
|
<view class="" style="margin-bottom: 16px;"> |
||||
|
<view style="margin-bottom: 8px;">names:{{userForm.names}}</view> |
||||
|
<view style="margin-bottom: 8px;">values:{{userForm.values}}</view> |
||||
|
<view style="margin-bottom: 8px;">origin:{{userForm.origin}}</view> |
||||
|
</view> |
||||
|
<button @click="open">打开</button> |
||||
|
<wz-select-popup ref="wzSelectPopup" @select="selectCheckbox" /> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { |
||||
|
simulationReqGetList, |
||||
|
getDataList |
||||
|
} from "@/common/mock.js" |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
userForm: { |
||||
|
names: [], |
||||
|
values: [], |
||||
|
origin:[] |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
open() { |
||||
|
this.$refs.wzSelectPopup.open({ |
||||
|
mode: 'checkbox', //radio checkbox 单选、多选 |
||||
|
// dataList:[], //如果dataList传入了数组则直接使用传入的数组渲染，无需再配置proxyConfig |
||||
|
selected: this.userForm.values, //已选中的数据 |
||||
|
proxyConfig: { //组件内部代理请求数据配置 |
||||
|
reqFun: this.reqGetList, //请求方法,在方法中请返回Promise.resolve([]) |
||||
|
localPaging: false //前端本地分页 |
||||
|
}, |
||||
|
search: { |
||||
|
type: 'local', //local本地数据搜索 | remote请求接口 |
||||
|
}, |
||||
|
fields: { |
||||
|
label: 'name', |
||||
|
value: 'code' |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
selectCheckbox(mode, data) { |
||||
|
console.log(mode, data) |
||||
|
this.userForm.names = data.names |
||||
|
this.userForm.values = data.values |
||||
|
this.userForm.origin = data.origin |
||||
|
}, |
||||
|
reqGetList(data) { |
||||
|
return simulationReqGetList({ |
||||
|
pageIndex: data.pageIndex, |
||||
|
pageSize: data.pageSize, |
||||
|
name: data.searchValue |
||||
|
}) |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
|
||||
|
</style> |
||||
|
``` |
||||
|
|
||||
|
## 属性props |
||||
|
|
||||
|
| 属性 | 类型 | 默认值 | 说明 | |
||||
|
| ------- | ------ | ------ | ------------------------------------------------------------ | |
||||
|
| scrollH | String | 50vh | 滚动内容的高度，不包含搜索框和多选时的底部按钮栏。需要带单位 | |
||||
|
|
||||
|
|
||||
|
## 方法methods |
||||
|
|
||||
|
| 方法名 | 说明 | 参数 | |
||||
|
| ------ | -------- | ----------------------------- | |
||||
|
| open | 打开弹窗 | [configs](#open方法的configs) | |
||||
|
| close | 关闭弹窗 | | |
||||
|
|
||||
|
### open方法的configs |
||||
|
|
||||
|
| 参数名 | 说明 | 类型 | 默认值 | |
||||
|
| ----------- | ------------------------------------------------------------ | ------------- | -------------------------- | |
||||
|
| mode | 选择模式radio单选 ，checkbox多选 | String | radio | |
||||
|
| selected | 已选中的value, 单选传字符串，多选传数组 | String\|Array | [] | |
||||
|
| dataList | 传入了数组，则直接使用传入的数组渲染，无需再配置proxyConfig | Array | null | |
||||
|
| proxyConfig | 组件内部代理请求数据配置 | Object | [proxyConfig](#proxyConfig的属性) | |
||||
|
| search | 搜索配置 | Object | [search](#search的属性) | |
||||
|
| page | 分页配置，如果是组件内部代理请求会把page的值加入到proxyConfig.reqFun请求参数里 | Object | [page](#page的属性) | |
||||
|
| fields | 显示和取值的label,value | Object | [fields](#fields的属性) | |
||||
|
|
||||
|
#### proxyConfig的属性 |
||||
|
|
||||
|
| 参数名 | 说明 | 类型 | 默认值 | 返回值 | |
||||
|
| ----------- | --------------------------------------------------------- | ------- | ------------------- | --------------------------------------- | |
||||
|
| reqFun | 向服务器请求数据的Promise方法,会返回页码以及搜索框的value | Promise | Promise.resolve([]) | ({pageIndex, pageSize,searchValue})=>{} | |
||||
|
| localPaging | 是否本地分页 | Boolean | false | | |
||||
|
|
||||
|
#### search的属性 |
||||
|
|
||||
|
| 参数名 | 说明 | 类型 | 默认值 | |
||||
|
| ------ | ------------------------------------------------------------ | ------ | ------ | |
||||
|
| type | 搜索的类型,local本地搜索, remote向服务器请求。只有使用proxyConfig.reqFun请求才能配置为remote | String | local | |
||||
|
|
||||
|
#### page的属性 |
||||
|
|
||||
|
| 参数名 | 说明 | 类型 | 默认值 | |
||||
|
| --------- | ------ | ------ | ------ | |
||||
|
| pageIndex | 当前页 | Number | 1 | |
||||
|
| pageSize | 页大小 | Number | 20 | |
||||
|
|
||||
|
#### fields的属性 |
||||
|
|
||||
|
| 参数名 | 说明 | 类型 | 默认值 | |
||||
|
| ------ | ------------ | ------ | ------ | |
||||
|
| label | 显示的字段名 | String | name | |
||||
|
| value | 取值的字段名 | String | code | |
||||
|
|
||||
|
## 事件enevt |
||||
|
|
||||
|
| 名称 | 触发时机 | 返回值 | |
||||
|
| ------ | ------------------------------------------ | ------------------------------------------------------------ | |
||||
|
| select | 单选点击列表时触发，多选点击确定按钮时触发 | mode等于radio时：(mode, {check,name,code})=>{}<br/>mode等于checkbox时：(mode, {names,values,origin})=>{} | |
||||
|
| close | popup关闭 | void | |
||||
Loading…
Reference in new issue