d1dd3dd404
后端已支持撤回时释放预占（见上一提交），前端同步：
一、文案与语义
按钮 完结 → 撤回，颜色 danger → warning（语义从「危险操作」变为
「可逆的库存释放」）。确认弹窗明确告知会释放多少项库存：
确定撤回申请单【APR-OUT-...】吗？
撤回后该单将被作废，其预占的 5 项物料库存会立即释放，
可供其它申请使用。此操作不可恢复。
用户看到的「1 件货」背后其实是一批被锁定的库存，不写清楚会让人
以为撤回只是「关掉一张单」。
二、报废新增撤回入口
报废审批页原先只有「执行报废」，没有撤回。补上按钮 + handleWithdraw()，
并新增 API 封装 withdrawScrapRequest()。
状态映射同步补充 4: '已撤回'（statusText / statusTagType）。
三、成功提示改为透传后端消息
后端会返回「申请单已撤回，释放 N 项预占库存」，比前端写死的文案
更有信息量，故改为 res?.msg 优先、前端文案兜底。
按钮可见性沿用 row.status === 1（已通过但未执行），与后端的执行守卫
（执行成功后 status 置 3）一致，故已执行或已撤回的单不会出现该按钮。
543 lines
18 KiB
Vue
543 lines
18 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
|
||
<!-- 顶部工具栏 -->
|
||
<div class="filter-container">
|
||
<span style="font-weight: bold; font-size: 15px; margin-right: 8px;">审批状态:</span>
|
||
<el-radio-group v-model="filterStatus" size="default" @change="handleStatusChange">
|
||
<el-radio-button label="">全部</el-radio-button>
|
||
<el-radio-button :label="0">待审批</el-radio-button>
|
||
<el-radio-button :label="1">已通过</el-radio-button>
|
||
<el-radio-button :label="2">已驳回</el-radio-button>
|
||
<el-radio-button :label="3">已完成</el-radio-button>
|
||
<el-radio-button :label="4">已完结</el-radio-button>
|
||
</el-radio-group>
|
||
<el-button type="primary" :icon="Refresh" @click="fetchData">刷新</el-button>
|
||
</div>
|
||
|
||
<!-- 数据表格 -->
|
||
<el-table
|
||
v-loading="loading"
|
||
:data="list"
|
||
border
|
||
stripe
|
||
style="margin-top: 16px;"
|
||
row-key="id"
|
||
:expand-row-keys="expandedRows"
|
||
@expand-change="handleExpandChange"
|
||
>
|
||
<!-- 展开行 -->
|
||
<el-table-column type="expand" width="60" align="center">
|
||
<template #default="{ row }">
|
||
<div style="padding: 12px 24px; background: #f5f7fa;">
|
||
<p style="margin: 0 0 10px 0; font-weight: bold; font-size: 13px; color: #606266;">
|
||
物料明细（共 {{ row.items?.length || 0 }} 项）
|
||
</p>
|
||
<el-table
|
||
v-if="row.items?.length"
|
||
:data="row.items"
|
||
border
|
||
size="small"
|
||
style="width: 100%;"
|
||
>
|
||
<el-table-column type="index" label="序号" width="60" align="center" />
|
||
<el-table-column prop="name" label="名称" min-width="140" show-overflow-tooltip />
|
||
<el-table-column prop="spec_model" label="规格型号" min-width="120" show-overflow-tooltip />
|
||
<!-- ★ 库位 + 备选库位：现场进不去时可改扫其它批次 -->
|
||
<el-table-column label="库位" width="150" show-overflow-tooltip>
|
||
<template #default="{ row: item }">
|
||
<span>{{ item.warehouse_location || '-' }}</span>
|
||
<el-popover
|
||
v-if="item.base_id"
|
||
placement="right"
|
||
:width="340"
|
||
trigger="click"
|
||
@show="loadAlternatives(item)"
|
||
>
|
||
<template #reference>
|
||
<el-icon class="alt-icon" title="查看备选库位">
|
||
<LocationInformation />
|
||
</el-icon>
|
||
</template>
|
||
|
||
<div v-loading="altLoading" class="alt-panel">
|
||
<div class="alt-title">
|
||
该物料的可选库位
|
||
<span v-if="altTotal > 0" class="alt-total">合计可用 {{ altTotal }}</span>
|
||
</div>
|
||
<div v-if="!altLoading && altItems.length === 0" class="alt-empty">
|
||
暂无其它可用库位
|
||
</div>
|
||
<div v-for="a in altItems" :key="a.source_table + '_' + a.stock_id" class="alt-row">
|
||
<el-tag :type="a.is_locked ? 'success' : 'info'" size="small" effect="plain">
|
||
{{ a.is_locked ? '推荐' : '备选' }}
|
||
</el-tag>
|
||
<span class="alt-loc">{{ a.warehouse_location || '(无库位)' }}</span>
|
||
<span class="alt-qty">可用 {{ a.available_quantity }}</span>
|
||
</div>
|
||
<div v-if="altItems.length" class="alt-hint">
|
||
现场取不到推荐库位时，可直接扫备选库位的条码借用
|
||
</div>
|
||
</div>
|
||
</el-popover>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="quantity" label="计划数量" width="100" align="center">
|
||
<template #default="{ row: item }">
|
||
<span style="color: #F56C6C; font-weight: bold;">{{ item.quantity ?? '-' }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<el-empty v-else description="暂无物料明细" :image-size="60" />
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column prop="request_no" label="申请单号" width="180">
|
||
<template #default="{ row }">
|
||
<el-link type="primary" :underline="false" @click="toggleExpand(row)">
|
||
{{ row.request_no }}
|
||
</el-link>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column label="申请人" width="140">
|
||
<template #default="{ row }">
|
||
{{ getApplicantName(row.applicant_id) }}
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column prop="remark" label="申请原因" min-width="180" show-overflow-tooltip />
|
||
|
||
<el-table-column label="物料种类" width="100" align="center">
|
||
<template #default="{ row }">
|
||
<el-tag size="small" type="info">{{ row.items?.length || 0 }} 种</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column label="归还期限" width="130" align="center">
|
||
<template #default="{ row }">
|
||
<span v-if="getReturnDeadline(row)" :style="row?.items?.[0]?.is_indefinite ? 'color:#E6A23C;font-weight:bold;' : ''">
|
||
{{ getReturnDeadline(row) }}
|
||
</span>
|
||
<span v-else style="color: #909399;">未填写</span>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column prop="created_at" label="申请时间" width="170" />
|
||
|
||
<el-table-column label="状态" width="100" align="center">
|
||
<template #default="{ row }">
|
||
<el-tag :type="statusTagType(row.status)" size="small">
|
||
{{ statusText(row.status) }}
|
||
</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column label="审批信息" width="180">
|
||
<template #default="{ row }">
|
||
<template v-if="row.status === 1">
|
||
<span style="color: #67C23A;">{{ getApproverName(row.actual_approver_id) }}</span>
|
||
<br />
|
||
<span style="font-size: 12px; color: #909399;">{{ row.approved_at || '' }}</span>
|
||
</template>
|
||
<template v-else-if="row.status === 2">
|
||
<span style="color: #F56C6C;">已驳回</span>
|
||
<el-tooltip v-if="row.reject_reason" :content="row.reject_reason" placement="top">
|
||
<el-icon style="margin-left: 4px; cursor: pointer;"><Warning /></el-icon>
|
||
</el-tooltip>
|
||
</template>
|
||
<template v-else-if="row.status === 3 || row.status === 4">
|
||
<span style="color: #909399;">{{ getApproverName(row.actual_approver_id) }}</span>
|
||
</template>
|
||
<span v-else style="color: #c0c4cc;">-</span>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column label="操作" width="180" fixed="right" align="center">
|
||
<template #default="{ row }">
|
||
<template v-if="row.status === 0">
|
||
<el-button
|
||
v-if="userStore.hasPermission('op_borrow_approval:operation')"
|
||
type="success"
|
||
size="small"
|
||
:loading="row._approving"
|
||
@click="handleApprove(row)"
|
||
>
|
||
通过
|
||
</el-button>
|
||
<el-button
|
||
v-if="userStore.hasPermission('op_borrow_approval:operation')"
|
||
type="danger"
|
||
size="small"
|
||
:loading="row._approving"
|
||
@click="openRejectDialog(row)"
|
||
>
|
||
驳回
|
||
</el-button>
|
||
</template>
|
||
<!-- ★ 已通过但未执行的申请单：可撤回（会释放预占库存） -->
|
||
<template v-else-if="row.status === 1">
|
||
<el-button
|
||
v-if="canCompleteRequest"
|
||
type="warning"
|
||
plain
|
||
size="small"
|
||
:loading="row._closing"
|
||
@click="handleComplete(row)"
|
||
>
|
||
撤回
|
||
</el-button>
|
||
</template>
|
||
<span v-else style="color: #c0c4cc;">-</span>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<!-- 分页 -->
|
||
<el-pagination
|
||
background
|
||
style="margin-top: 16px; justify-content: flex-end; display: flex;"
|
||
v-model:current-page="page"
|
||
v-model:page-size="pageSize"
|
||
:total="total"
|
||
:page-sizes="[10, 20, 50, 100]"
|
||
layout="total, prev, pager, next, sizes"
|
||
@size-change="handleSizeChange"
|
||
@current-change="handlePageChange"
|
||
/>
|
||
|
||
<!-- 驳回原因 Dialog -->
|
||
<el-dialog v-model="rejectDialogVisible" title="驳回申请" width="480px" destroy-on-close>
|
||
<el-form label-width="80px">
|
||
<el-form-item label="申请单号">
|
||
<span style="font-weight: bold; color: #409EFF;">{{ currentRejectRow?.request_no }}</span>
|
||
</el-form-item>
|
||
<el-form-item label="驳回原因" required>
|
||
<el-input
|
||
v-model="rejectReason"
|
||
type="textarea"
|
||
:rows="4"
|
||
placeholder="请填写驳回原因（必填）"
|
||
maxlength="200"
|
||
show-word-limit
|
||
/>
|
||
</el-form-item>
|
||
</el-form>
|
||
<template #footer>
|
||
<el-button @click="rejectDialogVisible = false">取消</el-button>
|
||
<el-button type="danger" :loading="rejectLoading" @click="confirmReject">确认驳回</el-button>
|
||
</template>
|
||
</el-dialog>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, computed, onMounted } from 'vue'
|
||
import { Refresh, Warning, LocationInformation } from '@element-plus/icons-vue'
|
||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||
import { getBorrowApprovalList, approveBorrowRequest, closeBorrowRequest } from '@/api/transaction'
|
||
import { getStockAlternatives } from '@/api/outbound'
|
||
import { useUserStore } from '@/stores/user'
|
||
|
||
const userStore = useUserStore()
|
||
|
||
// ★ 完结权限：超管 / 审批操作(op_borrow_approval:operation) / 借库执行(op_borrow:operation)
|
||
const canCompleteRequest = computed(() =>
|
||
userStore.role === 'SUPER_ADMIN' ||
|
||
userStore.hasPermission('op_borrow_approval:operation') ||
|
||
userStore.hasPermission('op_borrow:operation') ||
|
||
userStore.username === 'IRIS'
|
||
)
|
||
|
||
// ★ 撤回已通过但尚未执行的借库审批单（status 1 → 4）
|
||
//
|
||
// 撤回会把申请阶段预占的库存全部还回可用池（后端 release_reserved），
|
||
// 因此确认文案需明确告知 —— 用户看到的「1 件货」背后是一批被锁定的库存。
|
||
const handleComplete = (row: any) => {
|
||
const itemCount = row.items?.length || 0
|
||
ElMessageBox.confirm(
|
||
`确定撤回借库申请单【${row.request_no}】吗？\n\n` +
|
||
`撤回后该单将作废，其预占的 ${itemCount} 项物料库存会立即释放，` +
|
||
`可供其它申请使用。\n此操作不可恢复。`,
|
||
'⚠️ 撤回确认',
|
||
{ confirmButtonText: '确认撤回', cancelButtonText: '取消', type: 'warning' }
|
||
)
|
||
.then(async () => {
|
||
row._closing = true
|
||
try {
|
||
const res: any = await closeBorrowRequest(row.id)
|
||
ElMessage.success(res?.msg || `申请单 ${row.request_no} 已撤回`)
|
||
fetchData()
|
||
} catch (e: any) {
|
||
ElMessage.error(e?.response?.data?.msg || e?.msg || e?.message || '撤回失败')
|
||
} finally {
|
||
row._closing = false
|
||
}
|
||
})
|
||
.catch(() => {})
|
||
}
|
||
|
||
// --- 状态 ---
|
||
const list = ref<any[]>([])
|
||
const loading = ref(false)
|
||
const total = ref(0)
|
||
const page = ref(1)
|
||
const pageSize = ref(20)
|
||
const filterStatus = ref<number | ''>(0) // 默认筛选待审批
|
||
const expandedRows = ref<string[]>([])
|
||
|
||
// ============================================================================
|
||
// ★ 备选库位
|
||
//
|
||
// 借库的执行入口在审批页：展开行即为工人查看/去扫码的物料明细。申请单已把
|
||
// 货预占在某库位，工人现场可能进不去，需要改扫同物料的其它批次（后端执行端
|
||
// 按 base_id 校验身份、允许换批次）。此处复用出库模块的 /alternatives 端点，
|
||
// 逻辑完全一致：按 available_quantity > 0 过滤，只给真正能拿的库位。
|
||
//
|
||
// 点击图标才发请求，避免展开单据时打出一片并发查询。
|
||
// ============================================================================
|
||
const altLoading = ref(false)
|
||
const altItems = ref<any[]>([])
|
||
const altTotal = ref(0)
|
||
|
||
const loadAlternatives = async (item: any) => {
|
||
if (!item?.base_id) return
|
||
altLoading.value = true
|
||
altItems.value = []
|
||
altTotal.value = 0
|
||
try {
|
||
const res: any = await getStockAlternatives(item.base_id, {
|
||
stock_id: item.stock_id,
|
||
source_table: item.source_table,
|
||
})
|
||
altItems.value = res?.data?.items || []
|
||
altTotal.value = res?.data?.total_available || 0
|
||
} catch (e) {
|
||
ElMessage.error('查询备选库位失败')
|
||
} finally {
|
||
altLoading.value = false
|
||
}
|
||
}
|
||
|
||
// 驳回 Dialog
|
||
const rejectDialogVisible = ref(false)
|
||
const currentRejectRow = ref<any>(null)
|
||
const rejectReason = ref('')
|
||
const rejectLoading = ref(false)
|
||
|
||
// 申请人 / 审批人名称缓存
|
||
const userNameCache = ref<Record<number, string>>({})
|
||
|
||
// --- 工具函数 ---
|
||
const statusText = (status: number) => {
|
||
const map: Record<number, string> = {
|
||
0: '待审批', 1: '已通过', 2: '已驳回', 3: '已完成', 4: '已完结'
|
||
}
|
||
return map[status] ?? '-'
|
||
}
|
||
|
||
const statusTagType = (status: number) => {
|
||
const map: Record<number, string> = {
|
||
0: 'warning', 1: 'success', 2: 'danger', 3: 'info', 4: 'info'
|
||
}
|
||
return map[status] ?? 'info'
|
||
}
|
||
|
||
const getApplicantName = (id: number | null) => {
|
||
if (!id) return '-'
|
||
return userNameCache.value[id] ?? `用户 #${id}`
|
||
}
|
||
|
||
// 从申请单明细快照中读取归还期限（旧申请单无此字段时返回空串）
|
||
const getReturnDeadline = (row: any) => {
|
||
const first = row?.items?.[0]
|
||
if (first?.is_indefinite) return '长期借用'
|
||
if (first?.expected_return_time) return first.expected_return_time
|
||
return ''
|
||
}
|
||
|
||
const getApproverName = (id: number | null) => {
|
||
if (!id) return '-'
|
||
return userNameCache.value[id] ?? `用户 #${id}`
|
||
}
|
||
|
||
// --- 展开行 ---
|
||
const toggleExpand = (row: any) => {
|
||
const idx = expandedRows.value.indexOf(row.id)
|
||
if (idx > -1) {
|
||
expandedRows.value.splice(idx, 1)
|
||
} else {
|
||
expandedRows.value.push(row.id)
|
||
}
|
||
}
|
||
|
||
const handleExpandChange = () => {}
|
||
|
||
// --- 数据获取 ---
|
||
const fetchData = async () => {
|
||
loading.value = true
|
||
try {
|
||
const params: any = {
|
||
page: page.value,
|
||
limit: pageSize.value
|
||
}
|
||
if (filterStatus.value !== '') {
|
||
params.status = filterStatus.value
|
||
}
|
||
|
||
const res: any = await getBorrowApprovalList(params)
|
||
|
||
const records = res.data?.items || []
|
||
records.forEach((r: any) => {
|
||
if (r.applicant_id && !userNameCache.value[r.applicant_id]) {
|
||
if (r.applicant_name) {
|
||
userNameCache.value[r.applicant_id] = r.applicant_name
|
||
}
|
||
}
|
||
if (r.actual_approver_id && !userNameCache.value[r.actual_approver_id]) {
|
||
if (r.approver_name) {
|
||
userNameCache.value[r.actual_approver_id] = r.approver_name
|
||
}
|
||
}
|
||
r._approving = false
|
||
})
|
||
|
||
list.value = records
|
||
total.value = res.data?.total || records.length || 0
|
||
} catch (err: any) {
|
||
ElMessage.error(err?.msg || '加载审批列表失败')
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
// --- 筛选 ---
|
||
const handleStatusChange = () => {
|
||
page.value = 1
|
||
expandedRows.value = []
|
||
fetchData()
|
||
}
|
||
|
||
// --- 分页 ---
|
||
const handlePageChange = (p: number) => {
|
||
page.value = p
|
||
fetchData()
|
||
}
|
||
|
||
const handleSizeChange = (s: number) => {
|
||
pageSize.value = s
|
||
page.value = 1
|
||
fetchData()
|
||
}
|
||
|
||
// --- 审批操作 ---
|
||
const handleApprove = async (row: any) => {
|
||
try {
|
||
await ElMessageBox.confirm(
|
||
`确定要通过借库申请单 【${row.request_no}】 吗？`,
|
||
'审批确认',
|
||
{ confirmButtonText: '确定通过', cancelButtonText: '取消', type: 'info' }
|
||
)
|
||
} catch {
|
||
return
|
||
}
|
||
|
||
row._approving = true
|
||
try {
|
||
await approveBorrowRequest(row.id, { action: 'approve' })
|
||
ElMessage.success(`申请单 ${row.request_no} 已通过`)
|
||
await fetchData()
|
||
} catch (err: any) {
|
||
ElMessage.error(err?.msg || '审批操作失败')
|
||
} finally {
|
||
row._approving = false
|
||
}
|
||
}
|
||
|
||
const openRejectDialog = (row: any) => {
|
||
currentRejectRow.value = row
|
||
rejectReason.value = ''
|
||
rejectDialogVisible.value = true
|
||
}
|
||
|
||
const confirmReject = async () => {
|
||
const reason = rejectReason.value.trim()
|
||
if (!reason) {
|
||
ElMessage.warning('请填写驳回原因')
|
||
return
|
||
}
|
||
|
||
rejectLoading.value = true
|
||
try {
|
||
await approveBorrowRequest(currentRejectRow.value.id, {
|
||
action: 'reject',
|
||
reject_reason: reason
|
||
})
|
||
ElMessage.success(`申请单 ${currentRejectRow.value.request_no} 已驳回`)
|
||
rejectDialogVisible.value = false
|
||
await fetchData()
|
||
} catch (err: any) {
|
||
ElMessage.error(err?.msg || '驳回操作失败')
|
||
} finally {
|
||
rejectLoading.value = false
|
||
}
|
||
}
|
||
|
||
// --- 初始化 ---
|
||
onMounted(() => {
|
||
fetchData()
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* ★ 备选库位：库位旁的图标与浮层（与出库执行页同款） */
|
||
.alt-icon {
|
||
margin-left: 4px;
|
||
color: #409EFF;
|
||
cursor: pointer;
|
||
vertical-align: middle;
|
||
}
|
||
.alt-icon:hover { color: #66b1ff; }
|
||
|
||
.alt-panel { font-size: 13px; }
|
||
.alt-title {
|
||
font-weight: bold;
|
||
color: #303133;
|
||
margin-bottom: 8px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
.alt-total { font-weight: normal; color: #67C23A; font-size: 12px; }
|
||
.alt-empty { color: #909399; font-size: 12px; padding: 6px 0; }
|
||
.alt-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 5px 0;
|
||
border-bottom: 1px dashed #ebeef5;
|
||
}
|
||
.alt-row:last-of-type { border-bottom: none; }
|
||
.alt-loc { flex: 1; color: #409EFF; font-weight: 500; }
|
||
.alt-qty { color: #606266; font-size: 12px; }
|
||
.alt-hint {
|
||
margin-top: 8px;
|
||
padding-top: 8px;
|
||
border-top: 1px solid #ebeef5;
|
||
color: #E6A23C;
|
||
font-size: 12px;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.app-container {
|
||
padding: 20px;
|
||
}
|
||
.filter-container {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
flex-wrap: wrap;
|
||
}
|
||
</style> |