150 lines
6.3 KiB
Vue
150 lines
6.3 KiB
Vue
<template>
|
|
<div class="page-container">
|
|
<el-card class="search-card" shadow="never">
|
|
<el-form :model="searchForm" inline>
|
|
<el-form-item label="订单编号">
|
|
<el-input v-model="searchForm.orderCode" placeholder="请输入订单编号" clearable style="width: 180px;" />
|
|
</el-form-item>
|
|
<el-form-item label="客户名称">
|
|
<el-input v-model="searchForm.customerName" placeholder="请输入客户名称" clearable style="width: 180px;" />
|
|
</el-form-item>
|
|
<el-form-item label="交货日期">
|
|
<el-date-picker
|
|
v-model="searchForm.dateRange"
|
|
type="daterange"
|
|
range-separator="至"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期"
|
|
value-format="YYYY-MM-DD"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="handleSearch">
|
|
<el-icon><Search /></el-icon>查询
|
|
</el-button>
|
|
<el-button @click="handleReset">
|
|
<el-icon><Refresh /></el-icon>重置
|
|
</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-card>
|
|
|
|
<el-card class="table-card" shadow="never">
|
|
<div class="toolbar">
|
|
<el-button type="success" @click="handleExport">
|
|
<el-icon><Download /></el-icon>导出
|
|
</el-button>
|
|
<el-button @click="handlePrint">
|
|
<el-icon><Printer /></el-icon>打印
|
|
</el-button>
|
|
</div>
|
|
|
|
<el-table v-loading="loading" :data="tableData" stripe border>
|
|
<el-table-column type="index" label="序号" width="60" />
|
|
<el-table-column prop="orderCode" label="订单编号" width="150" />
|
|
<el-table-column prop="customerName" label="客户名称" min-width="180" show-overflow-tooltip />
|
|
<el-table-column prop="materialCode" label="物料编号" width="120" />
|
|
<el-table-column prop="materialName" label="物料名称" min-width="150" show-overflow-tooltip />
|
|
<el-table-column prop="spec" label="规格型号" width="150" />
|
|
<el-table-column prop="unit" label="单位" width="80" />
|
|
<el-table-column prop="orderQty" label="订单数量" width="100" align="right" />
|
|
<el-table-column prop="deliveredQty" label="已发货" width="100" align="right" />
|
|
<el-table-column prop="remainQty" label="待发货" width="100" align="right" />
|
|
<el-table-column prop="deliveryDate" label="交货日期" width="120" />
|
|
<el-table-column prop="daysRemain" label="剩余天数" width="100" align="center">
|
|
<template #default="{ row }">
|
|
<el-tag :type="getDaysType(row.daysRemain)">{{ row.daysRemain }}天</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="status" label="状态" width="100" align="center">
|
|
<template #default="{ row }">
|
|
<el-tag :type="getStatusType(row.status)">{{ row.status }}</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<div class="pagination-wrapper">
|
|
<el-pagination
|
|
v-model:current-page="pagination.page"
|
|
v-model:page-size="pagination.pageSize"
|
|
:page-sizes="[20, 50, 100]"
|
|
:total="pagination.total"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
@size-change="loadData"
|
|
@current-change="loadData"
|
|
/>
|
|
</div>
|
|
</el-card>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, reactive, onMounted } from 'vue'
|
|
import { ElMessage } from 'element-plus'
|
|
import { Search, Refresh, Download, Printer } from '@element-plus/icons-vue'
|
|
|
|
interface SevenDayRow {
|
|
orderCode: string
|
|
customerName: string
|
|
materialCode: string
|
|
materialName: string
|
|
spec: string
|
|
unit: string
|
|
orderQty: number
|
|
deliveredQty: number
|
|
remainQty: number
|
|
deliveryDate: string
|
|
daysRemain: number
|
|
status: string
|
|
}
|
|
|
|
const searchForm = reactive({ orderCode: '', customerName: '', dateRange: [] as string[] })
|
|
const pagination = reactive({ page: 1, pageSize: 20, total: 0 })
|
|
const loading = ref(false)
|
|
const tableData = ref<SevenDayRow[]>([])
|
|
|
|
const mockData: SevenDayRow[] = [
|
|
{ orderCode: 'SO2024010001', customerName: '深圳市ABC科技有限公司', materialCode: 'M001', materialName: '电子元器件A', spec: '10*10*5mm', unit: '个', orderQty: 100, deliveredQty: 50, remainQty: 50, deliveryDate: '2024-01-25', daysRemain: 2, status: '紧急' },
|
|
{ orderCode: 'SO2024010001', customerName: '深圳市ABC科技有限公司', materialCode: 'M002', materialName: '电子元器件B', spec: '20*15*8mm', unit: '个', orderQty: 200, deliveredQty: 150, remainQty: 50, deliveryDate: '2024-01-25', daysRemain: 2, status: '紧急' },
|
|
{ orderCode: 'SO2024010002', customerName: '广州市XYZ贸易有限公司', materialCode: 'M003', materialName: '机械零件C', spec: 'Φ50*100mm', unit: '件', orderQty: 50, deliveredQty: 0, remainQty: 50, deliveryDate: '2024-02-01', daysRemain: 7, status: '正常' }
|
|
]
|
|
|
|
const getDaysType = (days: number) => {
|
|
if (days <= 1) return 'danger'
|
|
if (days <= 3) return 'warning'
|
|
return 'success'
|
|
}
|
|
|
|
const getStatusType = (status: string) => {
|
|
const map: Record<string, string> = { '紧急': 'danger', '正常': 'success', '已完成': 'info' }
|
|
return map[status] || ''
|
|
}
|
|
|
|
const loadData = async () => {
|
|
loading.value = true
|
|
setTimeout(() => {
|
|
let list = [...mockData]
|
|
if (searchForm.orderCode) list = list.filter(r => r.orderCode.includes(searchForm.orderCode))
|
|
if (searchForm.customerName) list = list.filter(r => r.customerName.includes(searchForm.customerName))
|
|
tableData.value = list
|
|
pagination.total = list.length
|
|
loading.value = false
|
|
}, 300)
|
|
}
|
|
|
|
const handleSearch = () => { pagination.page = 1; loadData() }
|
|
const handleReset = () => { searchForm.orderCode = ''; searchForm.customerName = ''; searchForm.dateRange = []; handleSearch() }
|
|
const handleExport = () => ElMessage.info('导出功能开发中')
|
|
const handlePrint = () => ElMessage.info('打印功能开发中')
|
|
|
|
onMounted(() => loadData())
|
|
</script>
|
|
|
|
<style scoped>
|
|
.page-container { padding: 4px; }
|
|
.search-card { margin-bottom: 16px; }
|
|
.search-card :deep(.el-card__body) { padding-bottom: 0; }
|
|
.toolbar { margin-bottom: 16px; display: flex; gap: 8px; }
|
|
.pagination-wrapper { margin-top: 16px; display: flex; justify-content: flex-end; }
|
|
</style>
|