Implement ISRM and SRM management views, including internal demand, purchase, inventory, supplier, contract, evaluation, and report functionalities. Update router configuration to support new views and enhance layout with appropriate icons and styles.
This commit is contained in:
182
src/views/srm/PurchaseView.vue
Normal file
182
src/views/srm/PurchaseView.vue
Normal file
@@ -0,0 +1,182 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { Plus, Edit, Delete, Search, Document } from '@element-plus/icons-vue'
|
||||
|
||||
interface Purchase {
|
||||
id: number
|
||||
purchaseNo: string
|
||||
supplier: string
|
||||
item: string
|
||||
quantity: number
|
||||
unitPrice: number
|
||||
totalAmount: number
|
||||
status: string
|
||||
createTime: string
|
||||
}
|
||||
|
||||
const tableData = ref<Purchase[]>([
|
||||
{
|
||||
id: 1,
|
||||
purchaseNo: 'PUR202401001',
|
||||
supplier: 'ABC科技有限公司',
|
||||
item: '服务器设备',
|
||||
quantity: 20,
|
||||
unitPrice: 8000,
|
||||
totalAmount: 160000,
|
||||
status: '待确认',
|
||||
createTime: '2024-01-15',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
purchaseNo: 'PUR202401002',
|
||||
supplier: 'XYZ办公用品公司',
|
||||
item: '办公桌椅',
|
||||
quantity: 50,
|
||||
unitPrice: 500,
|
||||
totalAmount: 25000,
|
||||
status: '已确认',
|
||||
createTime: '2024-01-14',
|
||||
},
|
||||
])
|
||||
|
||||
const searchForm = reactive({
|
||||
keyword: '',
|
||||
status: '',
|
||||
})
|
||||
|
||||
const pagination = reactive({
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
total: 50,
|
||||
})
|
||||
|
||||
const getStatusType = (status: string) => {
|
||||
const map: Record<string, string> = {
|
||||
待确认: 'warning',
|
||||
已确认: 'primary',
|
||||
已发货: 'info',
|
||||
已完成: 'success',
|
||||
已取消: 'danger',
|
||||
}
|
||||
return map[status] || 'info'
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="purchase-view">
|
||||
<el-page-header>
|
||||
<template #content>
|
||||
<span class="page-title">采购管理</span>
|
||||
</template>
|
||||
</el-page-header>
|
||||
|
||||
<el-card class="content-card" shadow="hover">
|
||||
<div class="toolbar">
|
||||
<el-form :inline="true" :model="searchForm" class="search-form">
|
||||
<el-form-item label="关键词">
|
||||
<el-input
|
||||
v-model="searchForm.keyword"
|
||||
placeholder="采购单号/供应商名称"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
>
|
||||
<template #prefix>
|
||||
<el-icon><Search /></el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态">
|
||||
<el-select v-model="searchForm.status" placeholder="全部" clearable style="width: 120px">
|
||||
<el-option label="待确认" value="待确认" />
|
||||
<el-option label="已确认" value="已确认" />
|
||||
<el-option label="已发货" value="已发货" />
|
||||
<el-option label="已完成" value="已完成" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="ElMessage.info('搜索功能')">搜索</el-button>
|
||||
<el-button @click="Object.assign(searchForm, { keyword: '', status: '' })">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-button type="primary" :icon="Plus" @click="ElMessage.info('创建采购单')">创建采购单</el-button>
|
||||
</div>
|
||||
|
||||
<el-table :data="tableData" stripe style="width: 100%">
|
||||
<el-table-column prop="purchaseNo" label="采购单号" width="150" />
|
||||
<el-table-column prop="supplier" label="供应商" width="180" />
|
||||
<el-table-column prop="item" label="物品名称" width="150" />
|
||||
<el-table-column prop="quantity" label="数量" width="100" />
|
||||
<el-table-column prop="unitPrice" label="单价" width="100">
|
||||
<template #default="scope">
|
||||
<span>¥{{ scope.row.unitPrice }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="totalAmount" label="总金额" width="120">
|
||||
<template #default="scope">
|
||||
<span style="color: #f56c6c; font-weight: 600">¥{{ scope.row.totalAmount.toLocaleString() }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="status" label="状态" width="100">
|
||||
<template #default="scope">
|
||||
<el-tag :type="getStatusType(scope.row.status)">{{ scope.row.status }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" width="120" />
|
||||
<el-table-column label="操作" width="200" fixed="right">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" link :icon="Document" @click="ElMessage.info('查看详情')">查看</el-button>
|
||||
<el-button type="primary" link :icon="Edit" @click="ElMessage.info('编辑采购单')">编辑</el-button>
|
||||
<el-button type="danger" link :icon="Delete" @click="ElMessage.info('删除采购单')">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div class="pagination">
|
||||
<el-pagination
|
||||
v-model:current-page="pagination.currentPage"
|
||||
v-model:page-size="pagination.pageSize"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:total="pagination.total"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.purchase-view {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.content-card {
|
||||
margin-top: 20px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.search-form {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user