赵正易
9115f03533
新增出库单列表、出库计划清单和成品出库页面 添加防抖函数工具和PDA出库相关API接口 重构出库逻辑，支持按计划批次出库和严格校验 优化扫码录入和出库操作流程，增加计划完成状态显示
136 lines
2.3 KiB
Vue
136 lines
2.3 KiB
Vue
<template>
|
||
<view v-if="show" class="popup-mask" @click="clickMask">
|
||
<view class="popup-container" :class="[mode, round ? 'round' : '']" :style="customStyle" @click.stop>
|
||
<slot></slot>
|
||
<view v-if="closeable" class="popup-close" @click="close">
|
||
<text class="close-icon">×</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'CustomPopup',
|
||
props: {
|
||
// 是否显示弹窗
|
||
show: {
|
||
type: Boolean,
|
||
default: false
|
||
}
|
||
},
|
||
watch: {
|
||
show: {
|
||
handler(newVal) {
|
||
if (newVal) {
|
||
this.$emit('open');
|
||
}
|
||
},
|
||
immediate: true
|
||
}
|
||
},
|
||
// 弹窗模式 center-居中显示 top-顶部显示 bottom-底部显示 left-左侧显示 right-右侧显示
|
||
mode: {
|
||
type: String,
|
||
default: 'center'
|
||
},
|
||
// 是否显示圆角
|
||
round: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
// 是否显示关闭按钮
|
||
closeable: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
// 自定义样式
|
||
customStyle: {
|
||
type: Object,
|
||
default: () => ({})
|
||
},
|
||
// 是否开启安全区适配
|
||
safeAreaInsetTop: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
methods: {
|
||
// 关闭弹窗
|
||
close() {
|
||
this.$emit('close');
|
||
},
|
||
// 点击遮罩层
|
||
clickMask() {
|
||
this.$emit('clickMask');
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.popup-mask {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 999;
|
||
}
|
||
|
||
.popup-container {
|
||
background-color: #fff;
|
||
position: relative;
|
||
max-width: 90%;
|
||
max-height: 90%;
|
||
}
|
||
|
||
.popup-container.center {
|
||
align-self: center;
|
||
}
|
||
|
||
.popup-container.top {
|
||
align-self: flex-start;
|
||
width: 100%;
|
||
}
|
||
|
||
.popup-container.bottom {
|
||
align-self: flex-end;
|
||
width: 100%;
|
||
}
|
||
|
||
.popup-container.left {
|
||
align-self: center;
|
||
height: 100%;
|
||
}
|
||
|
||
.popup-container.right {
|
||
align-self: center;
|
||
height: 100%;
|
||
}
|
||
|
||
.popup-container.round {
|
||
border-radius: 10rpx;
|
||
}
|
||
|
||
.popup-close {
|
||
position: absolute;
|
||
top: 20rpx;
|
||
right: 20rpx;
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.close-icon {
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
color: #999;
|
||
}
|
||
</style> |