142 lines
3.9 KiB
Vue
142 lines
3.9 KiB
Vue
<template>
|
|
<div v-if="userStore.hasPermission('scrap_list:view')" class="app-container">
|
|
<div class="filter-container">
|
|
<el-input v-model="sku" placeholder="SKU" style="width: 200px" @keyup.enter="fetchData" />
|
|
<el-date-picker
|
|
v-model="dateRange"
|
|
type="daterange"
|
|
range-separator="至"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期"
|
|
value-format="YYYY-MM-DD"
|
|
style="margin-left: 10px; width: 240px"
|
|
/>
|
|
<el-button type="primary" @click="fetchData">查询</el-button>
|
|
<el-button @click="resetFilter">重置</el-button>
|
|
</div>
|
|
|
|
<el-table
|
|
:data="list"
|
|
border
|
|
stripe
|
|
style="margin-top: 20px"
|
|
v-loading="loading"
|
|
>
|
|
<el-table-column prop="sku" label="SKU" width="140" show-overflow-tooltip />
|
|
<el-table-column label="物料名称" min-width="160">
|
|
<template #default="{ row }">
|
|
{{ row.material_name || '-' }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="规格型号" min-width="140">
|
|
<template #default="{ row }">
|
|
{{ row.spec_model || '-' }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="quantity" label="报废数量" width="100" align="right" />
|
|
<el-table-column prop="reason" label="报废原因" min-width="160" show-overflow-tooltip />
|
|
<el-table-column prop="operator_name" label="操作人" width="100" />
|
|
<el-table-column prop="operation_time" label="报废时间" width="160" />
|
|
<el-table-column label="损失金额" width="100" align="right">
|
|
<template #default="{ row }">
|
|
{{ row.total_loss ? `¥${row.total_loss}` : '-' }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="approval_status" label="审批状态" width="100" align="center">
|
|
<template #default="{ row }">
|
|
<el-tag :type="getStatusType(row.approval_status)">
|
|
{{ getStatusText(row.approval_status) }}
|
|
</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<el-pagination
|
|
background
|
|
layout="prev, pager, next, total"
|
|
:total="total"
|
|
:page-size="pageSize"
|
|
:current-page="page"
|
|
@current-change="handlePage"
|
|
style="margin-top: 10px; text-align: right"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted } from 'vue'
|
|
import { getScrapRecords } from '@/api/scrap'
|
|
import { useUserStore } from '@/stores/user'
|
|
|
|
const userStore = useUserStore()
|
|
|
|
const list = ref<any[]>([])
|
|
const total = ref(0)
|
|
const page = ref(1)
|
|
const pageSize = ref(50)
|
|
const sku = ref('')
|
|
const dateRange = ref<[string, string] | null>(null)
|
|
const loading = ref(false)
|
|
|
|
const fetchData = async () => {
|
|
loading.value = true
|
|
try {
|
|
const params: any = {
|
|
page: page.value,
|
|
pageSize: pageSize.value,
|
|
sku: sku.value
|
|
}
|
|
if (dateRange.value && dateRange.value.length === 2) {
|
|
params.start_date = dateRange.value[0]
|
|
params.end_date = dateRange.value[1]
|
|
}
|
|
const res = await getScrapRecords(params)
|
|
list.value = res.data.list || []
|
|
total.value = res.data.total || 0
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
const handlePage = (val: number) => {
|
|
page.value = val
|
|
fetchData()
|
|
}
|
|
|
|
const resetFilter = () => {
|
|
sku.value = ''
|
|
dateRange.value = null
|
|
page.value = 1
|
|
fetchData()
|
|
}
|
|
|
|
const getStatusType = (status: string) => {
|
|
const map: Record<string, string> = {
|
|
approved: 'success',
|
|
rejected: 'danger',
|
|
pending: 'warning'
|
|
}
|
|
return map[status] || 'info'
|
|
}
|
|
|
|
const getStatusText = (status: string) => {
|
|
const map: Record<string, string> = {
|
|
approved: '已审批',
|
|
rejected: '已拒绝',
|
|
pending: '待审批'
|
|
}
|
|
return map[status] || status
|
|
}
|
|
|
|
onMounted(fetchData)
|
|
</script>
|
|
|
|
<style scoped>
|
|
.filter-container {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
}
|
|
</style>
|