87 lines
2.9 KiB
Vue
87 lines
2.9 KiB
Vue
|
<template>
|
|||
|
|
<div class="app-container">
|
|||
|
|
<div class="filter-container">
|
|||
|
|
<el-input v-model="listQuery.keyword" placeholder="单号/姓名/SKU" style="width: 200px;" class="filter-item" />
|
|||
|
|
<el-date-picker
|
|||
|
|
v-model="listQuery.dateRange"
|
|||
|
|
type="daterange"
|
|||
|
|
range-separator="至"
|
|||
|
|
start-placeholder="开始日期"
|
|||
|
|
end-placeholder="结束日期"
|
|||
|
|
class="filter-item"
|
|||
|
|
style="margin-left: 10px;"
|
|||
|
|
/>
|
|||
|
|
<el-button type="primary" class="filter-item" style="margin-left: 10px;" @click="fetchData">查询</el-button>
|
|||
|
|
<el-button type="success" class="filter-item" @click="$router.push('/stock/outbound/create')">新建出库</el-button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<el-table :data="list" v-loading="loading" border style="width: 100%; margin-top: 20px;">
|
|||
|
|
<el-table-column prop="outbound_no" label="出库单号" width="180" />
|
|||
|
|
<el-table-column prop="outbound_time" label="出库时间" width="180" />
|
|||
|
|
<el-table-column prop="outbound_type" label="类型" width="100">
|
|||
|
|
<template #default="{ row }">
|
|||
|
|
<el-tag>{{ formatType(row.outbound_type) }}</el-tag>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column prop="sku" label="SKU" width="150" />
|
|||
|
|
<el-table-column prop="quantity" label="数量" width="100" />
|
|||
|
|
<el-table-column prop="consumer_name" label="领用/客户" width="120" />
|
|||
|
|
<el-table-column prop="operator_name" label="操作员" width="120" />
|
|||
|
|
<el-table-column label="签名" width="100" align="center">
|
|||
|
|
<template #default="{ row }">
|
|||
|
|
<el-button type="primary" link @click="viewSignature(row.signature_path)">查看</el-button>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
</el-table>
|
|||
|
|
|
|||
|
|
<el-dialog v-model="dialogVisible" title="电子签名凭证" width="500px">
|
|||
|
|
<img :src="currentSignature" style="width: 100%; border: 1px solid #eee;" alt="Signature" />
|
|||
|
|
</el-dialog>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup lang="ts">
|
|||
|
|
import { ref, onMounted, reactive } from 'vue'
|
|||
|
|
import { getOutboundList } from '@/api/outbound'
|
|||
|
|
|
|||
|
|
const list = ref([])
|
|||
|
|
const loading = ref(false)
|
|||
|
|
const dialogVisible = ref(false)
|
|||
|
|
const currentSignature = ref('')
|
|||
|
|
|
|||
|
|
const listQuery = reactive({
|
|||
|
|
keyword: '',
|
|||
|
|
dateRange: []
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const fetchData = async () => {
|
|||
|
|
loading.value = true
|
|||
|
|
try {
|
|||
|
|
const res = await getOutboundList(listQuery)
|
|||
|
|
list.value = res.data.items || [] // 假设后端返回 { items: [] }
|
|||
|
|
} catch (e) {
|
|||
|
|
console.error(e)
|
|||
|
|
} finally {
|
|||
|
|
loading.value = false
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const formatType = (type: string) => {
|
|||
|
|
const map: any = {
|
|||
|
|
'SALES': '销售出库',
|
|||
|
|
'USE': '内部领用',
|
|||
|
|
'TRANSFER': '调拨',
|
|||
|
|
'SCRAP': '报废'
|
|||
|
|
}
|
|||
|
|
return map[type] || type
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const viewSignature = (url: string) => {
|
|||
|
|
currentSignature.value = url // 这里可能需要拼接 BaseURL，取决于你 upload 接口返回的是相对路径还是绝对路径
|
|||
|
|
dialogVisible.value = true
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
onMounted(() => {
|
|||
|
|
fetchData()
|
|||
|
|
})
|
|||
|
|
</script>
|