<template>
|
<div class="app-container">
|
<el-card class="search-card" shadow="never">
|
<el-form :model="searchForm" :inline="true">
|
<el-form-item label="供应商名称：">
|
<el-input v-model="searchForm.supplierName" placeholder="请输入供应商名称" clearable />
|
</el-form-item>
|
<el-form-item label="订单状态：">
|
<el-select v-model="searchForm.status" placeholder="请选择状态" clearable>
|
<el-option label="草稿" value="draft" />
|
<el-option label="待审核" value="pending" />
|
<el-option label="已审核" value="approved" />
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="handleSearch">搜索</el-button>
|
<el-button @click="resetSearch">重置</el-button>
|
</el-form-item>
|
</el-form>
|
</el-card>
|
|
<el-card class="table-card" shadow="never">
|
<div class="table-header">
|
<el-button type="primary" @click="openDialog('add')">新增订单</el-button>
|
<el-button type="danger" @click="handleBatchDelete" :disabled="!selectedRows.length">批量删除</el-button>
|
</div>
|
|
<el-table :data="tableData" border v-loading="loading" @selection-change="handleSelectionChange">
|
<el-table-column type="selection" width="55" align="center" />
|
<el-table-column label="订单编号" prop="orderNo" width="180" />
|
<el-table-column label="供应商名称" prop="supplierName" />
|
<el-table-column label="订单状态" prop="status" width="100">
|
<template #default="{ row }">
|
<el-tag :type="getStatusType(row.status)">{{ getStatusText(row.status) }}</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column label="总金额" prop="totalAmount" width="120">
|
<template #default="{ row }">¥{{ row.totalAmount.toFixed(2) }}</template>
|
</el-table-column>
|
<el-table-column label="创建时间" prop="createTime" width="180" />
|
<el-table-column label="操作" width="200" align="center">
|
<template #default="{ row }">
|
<el-button type="primary" size="small" @click="openDialog('edit', row)">编辑</el-button>
|
<el-button type="success" size="small" @click="viewDetails(row)">查看</el-button>
|
<el-button type="danger" size="small" @click="handleDelete(row)">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-card>
|
|
<el-dialog v-model="dialogVisible" :title="dialogType === 'add' ? '新增采购订单' : '编辑采购订单'" width="800px">
|
<el-form :model="formData" ref="formRef" label-width="120px">
|
<el-form-item label="供应商名称" prop="supplierName">
|
<el-select v-model="formData.supplierName" placeholder="请选择供应商" style="width: 100%">
|
<el-option label="供应商A" value="供应商A" />
|
<el-option label="供应商B" value="供应商B" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="备注">
|
<el-input v-model="formData.remark" type="textarea" :rows="3" placeholder="请输入备注信息" />
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<el-button @click="dialogVisible = false">取消</el-button>
|
<el-button type="primary" @click="handleSubmit">确定</el-button>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, reactive } from 'vue'
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
|
const loading = ref(false)
|
const dialogVisible = ref(false)
|
const dialogType = ref('add')
|
const selectedRows = ref([])
|
|
const searchForm = reactive({
|
supplierName: '',
|
status: ''
|
})
|
|
const formData = reactive({
|
supplierName: '',
|
remark: ''
|
})
|
|
const mockData = [
|
{
|
id: 1,
|
orderNo: 'PO20241201001',
|
supplierName: '供应商A',
|
status: 'approved',
|
totalAmount: 12500.00,
|
createTime: '2024-12-01 10:30:00',
|
remark: '常规采购'
|
}
|
]
|
|
const tableData = ref([...mockData])
|
|
const getStatusType = (status) => {
|
const statusMap = { draft: 'info', pending: 'warning', approved: 'success' }
|
return statusMap[status] || 'info'
|
}
|
|
const getStatusText = (status) => {
|
const statusMap = { draft: '草稿', pending: '待审核', approved: '已审核' }
|
return statusMap[status] || '未知'
|
}
|
|
const handleSearch = () => {
|
loading.value = true
|
setTimeout(() => {
|
loading.value = false
|
}, 500)
|
}
|
|
const resetSearch = () => {
|
Object.assign(searchForm, { supplierName: '', status: '' })
|
}
|
|
const openDialog = (type, row = {}) => {
|
dialogType.value = type
|
if (type === 'edit' && row.id) {
|
Object.assign(formData, { supplierName: row.supplierName, remark: row.remark })
|
} else {
|
Object.assign(formData, { supplierName: '', remark: '' })
|
}
|
dialogVisible.value = true
|
}
|
|
const handleSubmit = () => {
|
if (dialogType.value === 'add') {
|
const newOrder = {
|
id: Date.now(),
|
orderNo: `PO${Date.now()}`,
|
supplierName: formData.supplierName,
|
status: 'draft',
|
totalAmount: 0,
|
createTime: new Date().toLocaleString(),
|
remark: formData.remark
|
}
|
tableData.value.unshift(newOrder)
|
ElMessage.success('新增成功')
|
}
|
dialogVisible.value = false
|
}
|
|
const viewDetails = (row) => {
|
ElMessage.info('查看详情功能')
|
}
|
|
const handleDelete = (row) => {
|
ElMessageBox.confirm('确定要删除这条记录吗？', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
const index = tableData.value.findIndex(item => item.id === row.id)
|
if (index !== -1) {
|
tableData.value.splice(index, 1)
|
ElMessage.success('删除成功')
|
}
|
})
|
}
|
|
const handleBatchDelete = () => {
|
if (selectedRows.value.length === 0) {
|
ElMessage.warning('请选择要删除的记录')
|
return
|
}
|
ElMessage.success('批量删除成功')
|
}
|
|
const handleSelectionChange = (rows) => {
|
selectedRows.value = rows
|
}
|
</script>
|
|
<style scoped>
|
.app-container { padding: 20px; }
|
.search-card { margin-bottom: 20px; }
|
.table-card { margin-bottom: 20px; }
|
.table-header { margin-bottom: 20px; }
|
</style>
|
