288 lines
7.9 KiB
Vue
288 lines
7.9 KiB
Vue
<template>
|
||
<view class="container">
|
||
<view class="form-card">
|
||
<uni-forms label-width="160rpx">
|
||
<!-- 托盘码输入 -->
|
||
<uni-forms-item label="托盘码">
|
||
<view class="input-row">
|
||
<uni-easyinput
|
||
v-model="trayCode"
|
||
placeholder="请扫描或输入托盘码"
|
||
:clearable="true"
|
||
class="tray-input"
|
||
@confirm="handleQuery"
|
||
/>
|
||
<button class="query-btn" :loading="querying" hover-class="button-hover" @click="handleQuery">查询</button>
|
||
</view>
|
||
</uni-forms-item>
|
||
|
||
<!-- 查询结果信息展示 -->
|
||
<template v-if="materialInfo">
|
||
<uni-forms-item label="物料编码">
|
||
<view class="info-field"><text class="info-value">{{ materialInfo.productId || '-' }}</text></view>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="物料名称">
|
||
<view class="info-field"><text class="info-value">{{ materialInfo.productName || '-' }}</text></view>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="库存数量">
|
||
<view class="info-field"><text class="info-value">{{ (materialInfo.quantity || '0') + ' ' + (materialInfo.spare3 || '') }}</text></view>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="部门">
|
||
<view class="info-field"><text class="info-value">{{ materialInfo.deptName || '-' }}</text></view>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="所在货位">
|
||
<view class="info-field"><text class="info-value">{{ materialInfo.cargoSpaceName || materialInfo.cargoSpaceId || '-' }}</text></view>
|
||
</uni-forms-item>
|
||
|
||
|
||
<!-- 三个出库按钮（带权限控制）-->
|
||
<view class="btn-group">
|
||
<!-- 出来看看：exitId=1, type=2 权限: job:outmydoJob:pointOut -->
|
||
<button
|
||
v-if="$auth.hasPermi('job:outmydoJob:pointOut')"
|
||
class="submit-button btn-primary"
|
||
:loading="submitting === 'out'"
|
||
hover-class="button-hover"
|
||
@click="handleOut('out')"
|
||
>出来看看</button>
|
||
|
||
<!-- 出库端出库：exitId=2, type=2 权限: job:outmydoJob:pointOut1 -->
|
||
<button
|
||
v-if="$auth.hasPermi('job:outmydoJob:pointOut1')"
|
||
class="submit-button btn-warning"
|
||
:loading="submitting === 'out1'"
|
||
hover-class="button-hover"
|
||
@click="handleOut('out1')"
|
||
>出库端出库</button>
|
||
|
||
<!-- 入库端出库：exitId=1, type=2 权限: job:outmydoJob:pointOut2 -->
|
||
<button
|
||
v-if="$auth.hasPermi('job:outmydoJob:pointOut2')"
|
||
class="submit-button btn-danger"
|
||
:loading="submitting === 'out2'"
|
||
hover-class="button-hover"
|
||
@click="handleOut('out2')"
|
||
>入库端出库</button>
|
||
</view>
|
||
</template>
|
||
|
||
<!-- 空状态 -->
|
||
<view v-if="queried && !materialInfo" class="empty-tip">
|
||
<uni-icons type="info" size="30" color="#ccc"></uni-icons>
|
||
<text class="empty-text">未查询到该托盘的物料信息</text>
|
||
</view>
|
||
</uni-forms>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { queryTrayInfo, pointOut } from '@/api/out/appointOut.js'
|
||
|
||
/**
|
||
* 三种出库方式（对应 pointOut.vue 逻辑）
|
||
* out → 出来看看 exitId=1 type=2 权限: job:outmydoJob:pointOut
|
||
* out1 → 出库端出库 exitId=2 type=2 权限: job:outmydoJob:pointOut1
|
||
* out2 → 入库端出库 exitId=1 type=2 权限: job:outmydoJob:pointOut2
|
||
*/
|
||
const TYPE_MAP = {
|
||
out: { exitId: '1', type: '2', label: '出来看看', permi: 'job:outmydoJob:pointOut' },
|
||
out1: { exitId: '2', type: '2', label: '出库端出库', permi: 'job:outmydoJob:pointOut1' },
|
||
out2: { exitId: '1', type: '2', label: '入库端出库', permi: 'job:outmydoJob:pointOut2' }
|
||
}
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
trayCode: '',
|
||
querying: false,
|
||
queried: false,
|
||
materialInfo: null,
|
||
submitting: '' // 当前提交中的按钮 key：'out' | 'out1' | 'out2' | ''
|
||
}
|
||
},
|
||
|
||
methods: {
|
||
// ─── 查询托盘 ─────────────────────────────────────────────
|
||
async handleQuery() {
|
||
const code = this.trayCode.trim()
|
||
if (!code) {
|
||
uni.showToast({ title: '请输入托盘码', icon: 'none' })
|
||
return
|
||
}
|
||
this.querying = true
|
||
this.materialInfo = null
|
||
this.queried = false
|
||
try {
|
||
const res = await queryTrayInfo({ trayCode: code })
|
||
this.queried = true
|
||
if (res.code === 200 && res.rows && res.rows.length > 0) {
|
||
this.materialInfo = res.rows[0]
|
||
} else {
|
||
uni.showToast({ title: res.msg || '未查询到物料信息', icon: 'none' })
|
||
}
|
||
} catch (e) {
|
||
this.queried = true
|
||
uni.showToast({ title: '查询失败，请重试', icon: 'none' })
|
||
} finally {
|
||
this.querying = false
|
||
}
|
||
},
|
||
|
||
// ─── 出库（三种方式共用） ──────────────────────────────────
|
||
handleOut(btnKey) {
|
||
if (!this.materialInfo) {
|
||
uni.showToast({ title: '请先查询托盘信息', icon: 'none' })
|
||
return
|
||
}
|
||
const cfg = TYPE_MAP[btnKey]
|
||
const stockId = this.materialInfo.stockId || this.materialInfo.trayCode
|
||
|
||
uni.showModal({
|
||
title: '出库确认',
|
||
content: `托盘：${this.materialInfo.trayCode}\n物料：${this.materialInfo.productName || this.materialInfo.productId}\n方式：${cfg.label}`,
|
||
success: async (modal) => {
|
||
if (!modal.confirm) return
|
||
this.submitting = btnKey
|
||
try {
|
||
const res = await pointOut(stockId, cfg.exitId, cfg.type)
|
||
if (res.code === 200) {
|
||
uni.showToast({ title: '出库作业已生成', icon: 'success', duration: 2000 })
|
||
setTimeout(() => {
|
||
this.trayCode = ''
|
||
this.materialInfo = null
|
||
this.queried = false
|
||
}, 1500)
|
||
} else {
|
||
uni.showToast({ title: res.msg || '出库失败', icon: 'none' })
|
||
}
|
||
} catch (e) {
|
||
uni.showToast({ title: '出库操作失败，请重试', icon: 'none' })
|
||
} finally {
|
||
this.submitting = ''
|
||
}
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.container {
|
||
padding: 30rpx;
|
||
background-color: #f5f5f5;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.form-card {
|
||
background-color: #fff;
|
||
border-radius: 16rpx;
|
||
padding: 40rpx 30rpx;
|
||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
|
||
}
|
||
|
||
:deep(.uni-forms-item) {
|
||
padding-bottom: 30rpx;
|
||
|
||
// label 固定宽度，不换行
|
||
.uni-forms-item__label {
|
||
width: 160rpx !important;
|
||
min-width: 160rpx !important;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
font-weight: 500;
|
||
white-space: nowrap;
|
||
overflow: visible;
|
||
}
|
||
}
|
||
|
||
// ── 物料信息只读展示行（替代 disabled input，颜色完全自控）──
|
||
.info-field {
|
||
width: 100%;
|
||
min-height: 72rpx;
|
||
background-color: #f5f7fa;
|
||
border-radius: 8rpx;
|
||
padding: 0 24rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.info-value {
|
||
font-size: 28rpx;
|
||
color: #222;
|
||
font-weight: 500;
|
||
}
|
||
|
||
// ── 托盘码输入行 ───────────────────────────────────
|
||
.input-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16rpx;
|
||
}
|
||
|
||
.tray-input {
|
||
flex: 1;
|
||
}
|
||
|
||
.query-btn {
|
||
flex-shrink: 0;
|
||
width: 140rpx;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
font-size: 28rpx;
|
||
background-color: #3B7FFF;
|
||
color: #fff;
|
||
border-radius: 8rpx;
|
||
padding: 0;
|
||
}
|
||
|
||
// ── 三按钮组 ──────────────────────────────────────
|
||
.btn-group {
|
||
display: flex;
|
||
gap: 20rpx;
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.submit-button {
|
||
flex: 1;
|
||
height: 88rpx;
|
||
line-height: 88rpx;
|
||
font-size: 28rpx;
|
||
border-radius: 44rpx;
|
||
color: #fff;
|
||
padding: 0;
|
||
}
|
||
|
||
.btn-primary {
|
||
background-color: #3B7FFF;
|
||
}
|
||
|
||
.btn-warning {
|
||
background-color: #fa8c16;
|
||
}
|
||
|
||
.btn-danger {
|
||
background-color: #f5222d;
|
||
}
|
||
|
||
.button-hover {
|
||
opacity: 0.8;
|
||
transform: translateY(2rpx);
|
||
}
|
||
|
||
// ── 空状态 ────────────────────────────────────────
|
||
.empty-tip {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 60rpx 0 20rpx;
|
||
gap: 16rpx;
|
||
}
|
||
|
||
.empty-text {
|
||
font-size: 28rpx;
|
||
color: #bbb;
|
||
}
|
||
</style>
|