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:
186
src/views/isrm/InternalPurchaseView.vue
Normal file
186
src/views/isrm/InternalPurchaseView.vue
Normal file
@@ -0,0 +1,186 @@
|
||||
<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
|
||||
demandNo: string
|
||||
supplier: string
|
||||
item: string
|
||||
quantity: number
|
||||
unitPrice: number
|
||||
totalAmount: number
|
||||
status: string
|
||||
createTime: string
|
||||
}
|
||||
|
||||
const tableData = ref<Purchase[]>([
|
||||
{
|
||||
id: 1,
|
||||
purchaseNo: 'PUR202401001',
|
||||
demandNo: 'DEM202401001',
|
||||
supplier: '内部供应商A',
|
||||
item: '服务器设备',
|
||||
quantity: 10,
|
||||
unitPrice: 5000,
|
||||
totalAmount: 50000,
|
||||
status: '待确认',
|
||||
createTime: '2024-01-15',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
purchaseNo: 'PUR202401002',
|
||||
demandNo: 'DEM202401002',
|
||||
supplier: '内部供应商B',
|
||||
item: '办公用品',
|
||||
quantity: 100,
|
||||
unitPrice: 50,
|
||||
totalAmount: 5000,
|
||||
status: '已确认',
|
||||
createTime: '2024-01-14',
|
||||
},
|
||||
])
|
||||
|
||||
const searchForm = reactive({
|
||||
keyword: '',
|
||||
status: '',
|
||||
})
|
||||
|
||||
const pagination = reactive({
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
total: 30,
|
||||
})
|
||||
|
||||
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="demandNo" label="需求编号" width="150" />
|
||||
<el-table-column prop="supplier" label="内部供应商" width="150" />
|
||||
<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