yangchunlong/orico-wms-pda
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

wms-pda迁移

Browse Source
This commit is contained in:
yangchunlong
2025-05-09 17:15:16 +08:00
parent 6a09472e86
commit e8b07fcece
580 changed files with 75351 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

630
components/w-select/w-select.vue Normal file
View File

@@ -0,0 +1,630 @@
<template>
<view class="w-select" id="wSelect" :style="{
'--select-wrap-width': width,
'--select-wrap-height': height,
'--select-bg-color': bgColor
}">
<view :class="isShow ? 'select-wrap-active' : ''" class="select-wrap" @click.stop="changeShow">
<view v-if="multiple" class="select-content">
<view class="select-content-item-default" v-if="multiSelectList.length === 0">
{{ defaultValue }}
</view>
<view class="select-content-item" v-if="multiSelectList.length > 0">
{{ multiSelectList[0][valueName] }}
</view>
<view class="select-content-item" v-if="multiSelectList.length > 1">
{{ multiLength }}
</view>
</view>
<input v-if="!multiple || filterable" type="text" @input="inputChange" :placeholder="defaultValue"
:disabled="!filterable" v-model="inputData" @focus="myselectFocus" :focus="inputFocus" />
<view @click.stop="refreshValue" class="close-icon" v-if="showClose && inputData.length > 0">
<image :src="refreshUrl" mode=""></image>
</view>
<view v-if="inputData.length <= 0 || !showClose" :class="isShow ? 'w-select-arrow-up' : ''"
class="w-select-arrow " />
<!-- 下拉框options -->
<scroll-view scroll-y v-show="optionsShow" :class="[
isShow
? showPosition === 'bottom'
? 'animation-bottom-in'
: 'animation-top-in'
: showPosition === 'bottom'
? 'animation-bottom-out'
: 'animation-top-out',
showPosition === 'bottom'
? 'position-bottom'
: 'position-top'
]" class="select-options" @scrolltolower="onBottom">
<!--自定义option -->
<view v-for="item in filterList">
<view class="n_myselect" @click.stop="handleClickItem(item)"
v-if="((optionType=='order'&& item.availableQty>0)||(optionType=='order-cg' &&item.waitSlefQty>0)) ">
<text class="nmyt1">{{item.sourceBillNo}}</text>
<text class="nmyt2">{{item.specifications}}</text>
<view class="nmyt3">
<text>{{item.materialNumber}}</text>
<text class="nmyt4">数量：{{optionType=='order' ?item.availableQty:item.waitSlefQty}}</text>
</view>
</view>
</view>
<!--自定义option 非采购 -->
<view class="n_myselect" @click.stop="handleClickItem(item)" v-for="item in filterList"
v-if="optionType=='order-fcg'">
<text class="nmyt1">{{item.sourceBillNo}}</text>
<view v-for="(cit,index) in item.details">
<view class="" style="background: #fff;margin-bottom: 5px;padding: 5px;border-radius: 6px;"
v-if="cit.availableQty">
<text class="nmyt2">{{cit.specifications}}</text>
<view class="nmyt3">
<text>{{cit.materialNumber}}</text>
<text class="nmyt4">数量：{{cit.availableQty}}</text>
</view>
</view>
</view>
</view>
<!--strat原始的 -->
<view @click.stop="handleClickItem(item)" :class="
multiple &&
multiSelectList.find(
res => res[keyName] === item[keyName]
)
? 'item-active'
: value === item[keyName]
? 'item-active'
: ''
" v-for="item in filterList" class="select-option-item myitem" v-if="optionType=='default'">
{{ item[valueName] }}
</view>
<!--end原始的 -->
<view class="options-no-data" v-if="loadingFlag == 2||filterList.length < 1">
没有更多数据了
</view>
<view v-else>
<view class="options-no-data" v-if="loadingFlag == 1 && filterList.length !==wselectTotal">上拉加载更多...
</view>
<view class="options-no-data" v-if="loadingFlag == 1 && filterList.length ==wselectTotal">没有更多数据了
</view>
</view>
</scroll-view>
</view>
<view v-if="isShow" @click.stop="closeContentSelect" class="contentMask"></view>
</view>
</template>
<script>
export default {
props: {
width: {
type: String,
default: '200px'
},
height: {
type: String,
default: '30px'
},
bgColor: {
type: String,
default: 'inherit'
},
//是否多选
multiple: {
type: Boolean,
default: false
},
//是否可搜索
filterable: {
type: Boolean,
default: false
},
//是否显示关闭按钮
showClose: {
type: Boolean,
default: false
},
//渲染列表
list: {
type: Array,
default: () => [],
required: true
},
//双向绑定的值
value: {
type: [Array, String, Number],
default: ''
},
//默认显示的内容
defaultValue: {
type: String,
default: '请选择'
},
//显示的内容
valueName: {
type: String,
default: 'label',
required: true
},
// 绑定的内容
keyName: {
type: String,
default: 'value',
required: true
},
//判断下拉数据结构是什么类型的
optionType: {
type: String,
default: 'default'
},
//是否开启上拉加载
pagingSet: {
type: Boolean,
default: false
},
//是否聚焦
focus: {
type: Boolean,
default: false
},
//分页页码
pageNo: {
type: Number,
default: 1
},
//分页页码
loadingFlag: {
type: Number,
default: 0
},
wselectTotal: {
type: Number,
default: 0
},
//判斷清楚的是那個選擇款
selectTag: {
type: String,
default: ''
},
},
watch: {
value: {
handler(newVal, oldVal) {
// console.log('下拉组件111',newVal,oldVal)
}
},
focus: {
handler(newVal, oldVal) {
this.inputFocus = newVal
}
},
pageNo: {
handler(newVal, oldVal) {
this.wselectPageNo = newVal
console.log('分页111', newVal, oldVal)
}
},
list: {
immediate: true,
deep: true,
handler(news) {
if(news.length) {
this.filterList = news
const findItem = news.find(
item => item[this.keyName] === this.value
)
if (findItem) {
this.inputData = findItem[this.valueName]
}
}
}
}
},
computed: {
multiLength() {
const length = this.multiSelectList.length - 1
return '+' + length
},
bottomDistance() {
return (
this.windowHeight -
this.distanceTop -
this.curHeight
) // 当前元素距离可视屏幕底部的距离
},
},
data() {
return {
wselectPageNo: this.pageNo,
inputFocus: this.focus,
inputData: this.value,
multiSelectList: this.multiple ? this.value : [],
isShow: false,
optionsShow: false,
windowHeight: null,
curHeight: 0,
distanceTop: 0,
showPosition: 'bottom',
filterList: [],
refreshUrl: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDQ4IDQ4IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgZmlsbD0id2hpdGUiIGZpbGwtb3BhY2l0eT0iMC4wMSIvPjxwYXRoIGQ9Ik0yNCA0NEMzNS4wNDU3IDQ0IDQ0IDM1LjA0NTcgNDQgMjRDNDQgMTIuOTU0MyAzNS4wNDU3IDQgMjQgNEMxMi45NTQzIDQgNCAxMi45NTQzIDQgMjRDNCAzNS4wNDU3IDEyLjk1NDMgNDQgMjQgNDRaIiBmaWxsPSJub25lIiBzdHJva2U9IiM3YzZlNmUiIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxwYXRoIGQ9Ik0yOS42NTY5IDE4LjM0MzFMMTguMzQzMiAyOS42NTY4IiBzdHJva2U9IiM3YzZlNmUiIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PHBhdGggZD0iTTE4LjM0MzIgMTguMzQzMUwyOS42NTY5IDI5LjY1NjgiIHN0cm9rZT0iIzdjNmU2ZSIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4='
}
},
mounted() {
this.$nextTick(() => {
const res = uni.getSystemInfoSync()
this.windowHeight = res.windowHeight // 当前设备屏幕高度
uni.createSelectorQuery().in(this).select('#wSelect').boundingClientRect(data => {
if(!data) {
return;
}
this.distanceTop = data.top // 当前元素距离顶部的距离
this.curHeight = data.height
}).exec()
})
},
methods: {
// 上拉加载
onBottom(val) {
if (this.pagingSet) {
this.$emit('onBottomPage', ++this.wselectPageNo)
}
// console.log('触底')
},
// 判断input是否聚焦
myselectFocus(val) {
// console.log(val)
// uni.$emit('focus',222)
this.$emit('focus', val)
},
showPositon() {
this.showPosition = 'bottom'
if (this.bottomDistance < this.windowHeight / 3) {
this.showPosition = 'top'
}
},
changeShow() {
this.isShow = !this.isShow
if (this.isShow === false) {
this.filterList = this.list
setTimeout(() => {
this.optionsShow = false
}, 200)
} else {
this.showPositon()
this.optionsShow = this.isShow
}
},
closeContentSelect() {
this.isShow = false
setTimeout(() => {
this.optionsShow = false
}, 200)
},
inputChange(e) {
// 输入的时候打开框
const value = e.detail.value
if (value) {
this.isShow = true
setTimeout(() => {
this.optionsShow = true
}, 200)
} else {
this.isShow = false
setTimeout(() => {
this.optionsShow = false
}, 200)
this.filterList = []
}
this.$emit('input', value)
this.filterList = this.list.filter(item =>
item[this.valueName].includes(value)
)
},
refreshValue() {
this.$emit('input', '')
this.$emit('clearnFn', this.selectTag)
this.inputData = ''
// this.$emit('change', '')
this.filterList = this.list
if (this.multiple) {
this.multiSelectList = []
}
},
handleClickItem(e) {
if (this.multiple) {
this.multiSelect(e)
} else {
this.$emit('input', e[this.keyName])
this.inputData = e[this.valueName]
this.$emit('change', e)
this.changeShow()
}
},
multiSelect(item) {
let index = this.multiSelectList.findIndex(
res => res[this.valueName] === item[this.valueName]
)
if (index > -1) {
this.multiSelectList.splice(index, 1)
} else {
this.multiSelectList.push(item)
}
this.inputData = ''
this.filterList = this.list
this.$emit('input', this.multiSelectList)
this.$emit('change', item)
}
}
}
</script>
<style lang="scss" scoped>
.n_myselect {
padding: 5px 10px;
background: #F3F6FA;
border-radius: 6px;
margin: 0 10px;
margin-top: 5px;
display: flex;
flex-direction: column;
color: #222;
.nmyt1,
.nmyt2,
.nmyt3,
.nmyt4 {
font-size: 12px;
}
.nmyt1 {
font-weight: bold;
padding-bottom: 2px;
border-bottom: 1px dashed #BBBDC1;
}
.nmyt2 {
padding-top: 2px;
}
.nmyt3 {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
}
.w-select {
--select-wrap-width: 200px;
--select-wrap-height: 30px;
--select-border-radius: 4px;
--select-border: 1px solid #dcdfe6;
--select-active-border: 1px solid #409eff;
// --select-options-max-height: 150px;
--select-options-max-height: 220px;
--select-option-item-font-size: 14px;
--select-input-font-size: 14px;
--no-data-default-color: #999999;
--select-options-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
// --select-bg-color: #fff;
display: flex;
.select-wrap {
// position: relative;
width: var(--select-wrap-width);
height: var(--select-wrap-height);
border-radius: var(--select-border-radius);
transition: all 0.2s;
border: var(--select-border);
background-color: var(--select-bg-color);
display: flex;
justify-content: space-between;
align-items: center;
input {
flex: 1;
min-width: 0;
width: 100%;
height: 100%;
padding: 0 2px;
font-size: var(--select-input-font-size);
}
.select-content {
font-size: var(--select-option-item-font-size);
display: flex;
align-items: center;
.select-content-item {
background-color: #f4f4f5;
border-radius: var(--select-border-radius);
color: #aa93b1;
margin-left: 5px;
padding: 2px 6px;
}
.select-content-item-default {
color: var(--no-data-default-color);
margin-left: 5px;
}
}
.close-icon {
width: 15px;
height: 15px;
position: absolute;
right: 7px;
top: 46%;
z-index: 1000;
transform: translateY(-50%);
image {
width: 100%;
height: 100%;
}
}
.position-bottom {
top: calc(var(--select-wrap-height) + 10px);
}
.position-top {
bottom: calc(var(--select-wrap-height) + 10px);
}
.select-options {
position: absolute;
left: 0;
right: 0;
box-shadow: 1px 4px 14px #919191 !important;
border-radius: var(--select-border-radius);
background-color: #fff;
box-shadow: var(--select-options-box-shadow);
z-index: 999;
max-height: var(--select-options-max-height);
overflow: scroll;
overflow-x: hidden;
padding: 5px 0;
.select-option-item {
transition: background-color 0.2s;
padding: 5px;
font-size: var(--select-option-item-font-size);
margin-bottom: 5px;
}
.item-active {
background-color: #f5f7fa;
color: #409eff !important;
font-weight: 700;
}
.options-no-data {
color: var(--no-data-default-color);
text-align: center;
font-size: var(--select-option-item-font-size);
}
}
.w-select-arrow {
transition: all 0.3s;
border-left: 1px solid #999999;
border-bottom: 1px solid #999999;
height: 8px;
width: 8px;
margin: 3px 10px 0;
transform: translateY(-50%) rotate(-45deg);
-webkit-transform: translateY(-50%) rotate(-45deg);
border-right: 1px solid transparent;
border-top: 1px solid transparent;
display: inline-block;
}
.w-select-arrow-up {
transform: rotate(-225deg);
}
}
.select-wrap-active {
border: var(--select-active-border);
}
.animation-bottom-in {
animation-name: bottom-in;
animation-duration: 0.4s;
animation-timing-function: ease-out;
animation-fill-mode: both;
}
.animation-bottom-out {
animation-name: bottom-out;
animation-duration: 0.2s;
animation-timing-function: ease-out;
animation-fill-mode: both;
}
.animation-top-in {
animation-name: top-in;
animation-duration: 0.4s;
animation-timing-function: ease-out;
animation-fill-mode: both;
}
.animation-top-out {
animation-name: top-out;
animation-duration: 0.2s;
animation-timing-function: ease-out;
animation-fill-mode: both;
}
@keyframes bottom-in {
0% {
opacity: 0;
transform: translateY(-15%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes bottom-out {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(-20%);
}
}
@keyframes top-in {
0% {
opacity: 0;
transform: translateY(15%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes top-out {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(20%);
}
}
.contentMask {
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
z-index: 998;
}
}
.myitem {
border-bottom: 1px dashed #DADDDF;
margin: 0 24px;
}
.myitem:last-child {
border-bottom: none
}
</style>