88 lines
3.0 KiB
Vue
88 lines
3.0 KiB
Vue
|
<script setup>
|
|||
|
|
import { reactive, ref } from 'vue'
|
|||
|
|
import request from '../utils/request'
|
|||
|
|
|
|||
|
|
const orderNo = ref('')
|
|||
|
|
const loading = ref(false)
|
|||
|
|
const queried = ref(false)
|
|||
|
|
const rows = ref([])
|
|||
|
|
const total = ref(0)
|
|||
|
|
const page = reactive({ current: 1, size: 20 })
|
|||
|
|
|
|||
|
|
function gapOf(row) {
|
|||
|
|
return Math.max((row.totalQty || 0) - (row.outQty || 0), 0)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function load() {
|
|||
|
|
if (!orderNo.value.trim()) return
|
|||
|
|
loading.value = true
|
|||
|
|
try {
|
|||
|
|
const data = await request.get('/ledger/query', {
|
|||
|
|
params: { orderNo: orderNo.value.trim(), page: page.current, pageSize: page.size }
|
|||
|
|
})
|
|||
|
|
rows.value = data?.list || []
|
|||
|
|
total.value = data?.total || 0
|
|||
|
|
queried.value = true
|
|||
|
|
} finally {
|
|||
|
|
loading.value = false
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function search() {
|
|||
|
|
page.current = 1
|
|||
|
|
load()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function statusTag(s) {
|
|||
|
|
return s === '领料完结' ? 'success' : s === '进行中' ? 'primary' : 'info'
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<div>
|
|||
|
|
<el-card shadow="never" class="mb12">
|
|||
|
|
<el-form inline @submit.prevent="search">
|
|||
|
|
<el-form-item label="工单号">
|
|||
|
|
<el-input v-model="orderNo" placeholder="输入工单号查询物料台账" clearable autofocus
|
|||
|
|
style="width:280px" @keyup.enter="search" />
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item>
|
|||
|
|
<el-button type="primary" :loading="loading" @click="search">查询</el-button>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-form>
|
|||
|
|
</el-card>
|
|||
|
|
|
|||
|
|
<el-card v-if="queried" shadow="never">
|
|||
|
|
<template #header>工单 {{ orderNo }} 物料台账（共 {{ total }} 条）</template>
|
|||
|
|
<el-table :data="rows" border v-loading="loading" empty-text="暂无台账数据">
|
|||
|
|
<el-table-column prop="orderNo" label="工单号" min-width="140" />
|
|||
|
|
<el-table-column prop="materialCode" label="物料编码" min-width="150" />
|
|||
|
|
<el-table-column prop="materialName" label="物料名称" min-width="150">
|
|||
|
|
<template #default="{ row }">{{ row.materialName || '-' }}</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column prop="totalQty" label="需求总量" width="100" align="center" />
|
|||
|
|
<el-table-column prop="outQty" label="已出库" width="90" align="center" />
|
|||
|
|
<el-table-column label="缺口" width="90" align="center">
|
|||
|
|
<template #default="{ row }">{{ gapOf(row) }}</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column label="状态" width="110" align="center">
|
|||
|
|
<template #default="{ row }">
|
|||
|
|
<el-tag :type="statusTag(row.status)" size="small">{{ row.status }}</el-tag>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
</el-table>
|
|||
|
|
<div class="pager">
|
|||
|
|
<el-pagination background layout="total, prev, pager, next" :total="total"
|
|||
|
|
:current-page="page.current" :page-size="page.size"
|
|||
|
|
@current-change="(p) => { page.current = p; load() }" />
|
|||
|
|
</div>
|
|||
|
|
</el-card>
|
|||
|
|
|
|||
|
|
<el-empty v-else description="请输入工单号查询" />
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.mb12 { margin-bottom: 12px; }
|
|||
|
|
.pager { display: flex; justify-content: flex-end; margin-top: 10px; }
|
|||
|
|
</style>
|