<template>
|
<div class="outbound-order-page">
|
<a-card>
|
<a-space style="margin-bottom: 16px">
|
<a-button type="primary" @click="handleAdd">
|
<template #icon><plus-outlined /></template>
|
新增出库单
|
</a-button>
|
<a-input-search
|
v-model:value="searchText"
|
placeholder="搜索出库单号"
|
style="width: 200px"
|
@search="handleSearch"
|
/>
|
</a-space>
|
|
<a-table
|
:columns="columns"
|
:data-source="dataSource"
|
:loading="loading"
|
:pagination="pagination"
|
@change="handleTableChange"
|
row-key="Id"
|
>
|
<template #bodyCell="{ column, record }">
|
<template v-if="column.key === 'OrderStatus'">
|
<a-tag :color="getStatusColor(record.OrderStatus)">
|
{{ getStatusText(record.OrderStatus) }}
|
</a-tag>
|
</template>
|
<template v-else-if="column.key === 'action'">
|
<a-space>
|
<a @click="handleView(record)">查看</a>
|
<a-divider type="vertical" />
|
<a @click="handleEdit(record)">编辑</a>
|
<a-divider type="vertical" />
|
<a-popconfirm title="确定要删除吗？" @confirm="handleDelete(record)">
|
<a style="color: red">删除</a>
|
</a-popconfirm>
|
</a-space>
|
</template>
|
</template>
|
</a-table>
|
</a-card>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { ref, reactive, onMounted } from 'vue';
|
import { message } from 'ant-design-vue';
|
import { PlusOutlined } from '@ant-design/icons-vue';
|
import type { OutboundOrderInfo } from '../../../types/common';
|
|
const columns = [
|
{ title: '出库单号', dataIndex: 'OutboundOrderNo', key: 'OutboundOrderNo' },
|
{ title: '出库类型', dataIndex: 'OutboundType', key: 'OutboundType' },
|
{ title: '仓库编码', dataIndex: 'WarehouseCode', key: 'WarehouseCode' },
|
{ title: '仓库名称', dataIndex: 'WarehouseName', key: 'WarehouseName' },
|
{ title: '订单状态', dataIndex: 'OrderStatus', key: 'OrderStatus' },
|
{ title: '创建时间', dataIndex: 'CreateDate', key: 'CreateDate' },
|
{ title: '创建人', dataIndex: 'Creator', key: 'Creator' },
|
{ title: '操作', key: 'action', width: 200 },
|
];
|
|
const dataSource = ref<OutboundOrderInfo[]>([]);
|
const loading = ref(false);
|
const searchText = ref('');
|
const pagination = reactive({
|
current: 1,
|
pageSize: 20,
|
total: 0,
|
showSizeChanger: true,
|
showTotal: (total: number) => `共 ${total} 条`,
|
});
|
|
onMounted(() => {
|
fetchData();
|
});
|
|
async function fetchData() {
|
loading.value = true;
|
try {
|
// 这里调用实际的 API
|
setTimeout(() => {
|
dataSource.value = [];
|
pagination.total = 0;
|
loading.value = false;
|
}, 500);
|
} catch (error) {
|
console.error('Fetch data error:', error);
|
loading.value = false;
|
}
|
}
|
|
function handleTableChange(pag: any) {
|
pagination.current = pag.current;
|
pagination.pageSize = pag.pageSize;
|
fetchData();
|
}
|
|
function handleSearch() {
|
pagination.current = 1;
|
fetchData();
|
}
|
|
function handleAdd() {
|
message.info('新增出库单功能');
|
}
|
|
function handleView(record: OutboundOrderInfo) {
|
message.info(`查看出库单: ${record.OutboundOrderNo}`);
|
}
|
|
function handleEdit(record: OutboundOrderInfo) {
|
message.info(`编辑出库单: ${record.OutboundOrderNo}`);
|
}
|
|
async function handleDelete(record: OutboundOrderInfo) {
|
message.success('删除成功');
|
fetchData();
|
}
|
|
function getStatusColor(status?: number) {
|
const colorMap: Record<number, string> = {
|
0: 'default',
|
1: 'processing',
|
2: 'success',
|
3: 'error',
|
};
|
return colorMap[status || 0] || 'default';
|
}
|
|
function getStatusText(status?: number) {
|
const textMap: Record<number, string> = {
|
0: '待处理',
|
1: '处理中',
|
2: '已完成',
|
3: '已取消',
|
};
|
return textMap[status || 0] || '未知';
|
}
|
</script>
|
|
<style scoped>
|
.outbound-order-page {
|
padding: 0;
|
}
|
</style>
|
