feat(物料管理): 新增采购计划、出入库管理及相关组件
添加物料管理模块，包括采购计划、出入库管理功能及相关组件 新增审批流程、系统信息、数据分析等子组件 添加相关图片资源及样式调整
This commit is contained in:
569
src/views/materialManagement/procurementPlan.vue
Normal file
569
src/views/materialManagement/procurementPlan.vue
Normal file
@ -0,0 +1,569 @@
|
||||
<template>
|
||||
<div class="procurementPlan">
|
||||
<el-row gutter="20">
|
||||
<el-col :span="13">
|
||||
<el-card>
|
||||
<div style="display: flex;align-items: center;height: 120px;justify-content: space-around;">
|
||||
<div class="img">
|
||||
<img src="/assets/caigou.png" alt="">
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="text">
|
||||
待审批计划
|
||||
</div>
|
||||
<div class="count" style="color: rgba(255, 178, 30, 1);">
|
||||
12
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="text">
|
||||
已批准计划
|
||||
</div>
|
||||
<div class="count" style="color: rgba(67, 101, 220, 1);">
|
||||
28
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="text">
|
||||
采购中计划
|
||||
</div>
|
||||
<div class="count" style="color: rgba(113, 214, 213, 1);">
|
||||
15
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="text">
|
||||
已完成计划
|
||||
</div>
|
||||
<div class="count" style="color: rgba(0, 184, 122, 1);">
|
||||
86
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="11">
|
||||
<el-card>
|
||||
<div style="display: flex;align-items: center;height: 120px;justify-content: space-around;">
|
||||
<div class="img">
|
||||
<img src="/assets/qian.jpg" alt="">
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="text">
|
||||
本年度已采购金额
|
||||
</div>
|
||||
<div class="count" style="color: rgba(255, 153, 0, 1);">
|
||||
520,000.00
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="text">
|
||||
本年度采购预算金额
|
||||
</div>
|
||||
<div class="count" style="color: rgba(67, 101, 220, 1);">
|
||||
3,000,000.00
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row style="margin-top: 20px;">
|
||||
<el-col :span="24">
|
||||
<el-card style="border-radius: 10px;">
|
||||
<div class="content">
|
||||
<div class="tabs">
|
||||
<el-button type="success">导出</el-button>
|
||||
<el-button type="primary" @click="isNewProcurementDialogVisible = true">新建采购申请单</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 标签页导航 -->
|
||||
<div class="tabs">
|
||||
<el-button :type="activeTab === 'pending' ? 'primary' : ''"
|
||||
@click="changeTab('pending')">待审批</el-button>
|
||||
<el-button :type="activeTab === 'procuring' ? 'primary' : ''"
|
||||
@click="changeTab('procuring')">采购中</el-button>
|
||||
<el-badge :value="5" type="danger">
|
||||
<el-button :type="activeTab === 'rejected' ? 'primary' : ''"
|
||||
@click="changeTab('rejected')">
|
||||
未通过
|
||||
</el-button>
|
||||
</el-badge>
|
||||
<el-button :type="activeTab === 'approved' ? 'primary' : ''"
|
||||
@click="changeTab('approved')">已通过</el-button>
|
||||
<el-button :type="activeTab === 'completed' ? 'primary' : ''"
|
||||
@click="changeTab('completed')">已完成</el-button>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<el-table :data="tableData" border style="width: 100%;margin-top: 15px;">
|
||||
<el-table-column type="selection" width="55" />
|
||||
<el-table-column prop="planNumber" label="计划编号" />
|
||||
<el-table-column prop="planName" label="计划名称" />
|
||||
<el-table-column prop="equipmentType" label="设备类型" />
|
||||
<el-table-column prop="requestDept" label="申请部门" />
|
||||
<el-table-column prop="applicant" label="申请人" />
|
||||
<el-table-column prop="requestDate" label="申请日期" />
|
||||
<el-table-column prop="estimatedAmount" label="预计金额" />
|
||||
<el-table-column label="状态">
|
||||
<template #default="scope">
|
||||
<el-tag :type="getStatusTagType(scope.row.status)">{{ scope.row.status }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" fixed="right" width="80">
|
||||
<template #default="scope">
|
||||
<el-button type="text" @click="handleView(scope.row)">查看</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-section">
|
||||
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
|
||||
:current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper" :total="total" background />
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-dialog v-model="isNewProcurementDialogVisible" title="新建采购申请单" width="60%" :close-on-click-modal="false">
|
||||
<div class="new-procurement-form">
|
||||
<!-- 基础信息 -->
|
||||
<div class="form-section">
|
||||
<h3>基础信息</h3>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="订单编号">
|
||||
<el-input v-model="newProcurementForm.planNumber" disabled value="PLAN-2023-0615-003" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="创建时间">
|
||||
<el-input v-model="newProcurementForm.createTime" disabled value="2023-11-02-16:32" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="采购单位">
|
||||
<el-input v-model="newProcurementForm.procurementUnit" disabled value="大连好果汁有限公司" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="经办人">
|
||||
<el-input v-model="newProcurementForm.handler" disabled value="李四" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="合同类型">
|
||||
<el-select v-model="newProcurementForm.contractType" placeholder="请选择">
|
||||
<el-option label="请选择" value="" />
|
||||
<!-- 可以添加更多选项 -->
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="采购类型">
|
||||
<el-select v-model="newProcurementForm.procurementType" placeholder="请选择">
|
||||
<el-option label="请选择" value="" />
|
||||
<!-- 可以添加更多选项 -->
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="仓库地址">
|
||||
<el-select v-model="newProcurementForm.contractAddress" placeholder="请选择">
|
||||
<el-option label="请选择" value="" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="合同名称">
|
||||
<el-input v-model="newProcurementForm.contractName" placeholder="请填写" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<!-- 供应商信息 -->
|
||||
<div class="form-section">
|
||||
<h3>供应商信息</h3>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="供应商单位">
|
||||
<el-select v-model="newProcurementForm.supplierUnit" placeholder="请选择">
|
||||
<el-option label="请选择" value="" />
|
||||
<!-- 可以添加更多选项 -->
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="送货时间">
|
||||
<el-select v-model="newProcurementForm.deliveryTime" placeholder="请选择">
|
||||
<el-option label="请选择" value="" />
|
||||
<!-- 可以添加更多选项 -->
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<!-- 产品信息 -->
|
||||
<div class="form-section">
|
||||
<h3>产品信息</h3>
|
||||
<el-table :data="newProcurementForm.products" border style="width: 100%">
|
||||
<el-table-column prop="productName" label="产品名称">
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.productName" placeholder="请填写" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="productModel" label="产品型号">
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.productModel" placeholder="请填写" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="productPrice" label="产品单价">
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.productPrice" placeholder="请填写" type="number" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="purchaseQuantity" label="购买数量">
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.purchaseQuantity" placeholder="请填写" type="number" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="unit" label="单位">
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.unit" placeholder="请填写" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="totalPrice" label="合计" :formatter="calculateTotalPrice">
|
||||
<template #default="scope">
|
||||
<span>{{ calculateTotalPrice(scope.row) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" fixed="right" width="80">
|
||||
<template #default="scope">
|
||||
<el-button type="text" @click="removeProduct(scope.$index)"
|
||||
:disabled="newProcurementForm.products.length <= 1">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-button type="primary" size="small" @click="addProduct" style="margin-top: 10px">添加产品</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 合同条款 -->
|
||||
<div class="form-section">
|
||||
<h3>合同条款</h3>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="付款条件">
|
||||
<el-select v-model="newProcurementForm.paymentTerms" placeholder="请选择">
|
||||
<el-option label="请选择" value="" />
|
||||
<!-- 可以添加更多选项 -->
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="结算方式">
|
||||
<el-select v-model="newProcurementForm.settlementMethod" placeholder="请选择">
|
||||
<el-option label="请选择" value="" />
|
||||
<!-- 可以添加更多选项 -->
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<!-- 附件上传 -->
|
||||
<div class="form-section">
|
||||
<h3>附件上传</h3>
|
||||
<div class="upload-section">
|
||||
<el-upload class="upload-demo" action="" :on-preview="handlePreview" :on-remove="handleRemove"
|
||||
:before-remove="beforeRemove" multiple :limit="5" :on-exceed="handleExceed"
|
||||
:file-list="newProcurementForm.fileList" list-type="text">
|
||||
<el-button type="primary" :icon="Upload">上传文件</el-button>
|
||||
<template #tip>
|
||||
<div class="el-upload__tip">
|
||||
请将文件拖到此处，或点击上传<br>
|
||||
最多上传5个文件，单个文件大小不超过20M
|
||||
</div>
|
||||
</template>
|
||||
</el-upload>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="cancelNewProcurement">取消</el-button>
|
||||
<el-button @click="saveDraft">保存草稿</el-button>
|
||||
<el-button type="primary" @click="submitProcurement">提交申请</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<style sc oped lang="scss">
|
||||
.procurementPlan {
|
||||
background-color: #F2F8FC;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.img {
|
||||
img {
|
||||
display: block;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
text-align: center;
|
||||
|
||||
.text {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.count {
|
||||
font-size: 25px;
|
||||
font-weight: 600;
|
||||
text-align: left;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
/* 分页区域样式 */
|
||||
.pagination-section {
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
margin-top: 15px;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.pagination-controls .el-pagination {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.pagination-controls .el-pagination button {
|
||||
min-width: 32px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.pagination-controls .el-pagination .el-pager li {
|
||||
min-width: 32px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.pagination-controls .el-pagination .el-pager li.active {
|
||||
background-color: #409eff;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
<script setup>
|
||||
import { ref, reactive, computed } from 'vue';
|
||||
import { Upload } from '@element-plus/icons-vue';
|
||||
import { ElMessage, ElMessageBox } from 'element-plus';
|
||||
const router = useRouter();
|
||||
// 新建采购申请单对话框是否可见
|
||||
const isNewProcurementDialogVisible = ref(false);
|
||||
|
||||
// 当前激活的标签页
|
||||
const activeTab = ref('pending');
|
||||
// 新建采购申请单表单数据
|
||||
const newProcurementForm = reactive({
|
||||
paymentTerms: '',
|
||||
settlementMethod: '',
|
||||
fileList: []
|
||||
});
|
||||
// 表格数据
|
||||
const tableData = ref([
|
||||
{
|
||||
planNumber: 'PLAN-2023-0615-003',
|
||||
planName: 'Q2风电轴承采购计划',
|
||||
equipmentType: '风电设备',
|
||||
requestDept: '运维部',
|
||||
applicant: '王主管',
|
||||
requestDate: '2023-06-15 10:30',
|
||||
estimatedAmount: '300,000.00',
|
||||
status: '待审批'
|
||||
},
|
||||
{
|
||||
planNumber: 'PLAN-2023-0615-003',
|
||||
planName: 'Q2风电轴承采购计划',
|
||||
equipmentType: '风电设备',
|
||||
requestDept: '运维部',
|
||||
applicant: '王主管',
|
||||
requestDate: '2023-06-15 10:30',
|
||||
estimatedAmount: '300,000.00',
|
||||
status: '待审批'
|
||||
},
|
||||
{
|
||||
planNumber: 'PLAN-2023-0615-003',
|
||||
planName: 'Q2风电轴承采购计划',
|
||||
equipmentType: '风电设备',
|
||||
requestDept: '运维部',
|
||||
applicant: '王主管',
|
||||
requestDate: '2023-06-15 10:30',
|
||||
estimatedAmount: '300,000.00',
|
||||
status: '待审批'
|
||||
},
|
||||
{
|
||||
planNumber: 'PLAN-2023-0615-003',
|
||||
planName: 'Q2风电轴承采购计划',
|
||||
equipmentType: '风电设备',
|
||||
requestDept: '运维部',
|
||||
applicant: '王主管',
|
||||
requestDate: '2023-06-15 10:30',
|
||||
estimatedAmount: '300,000.00',
|
||||
status: '待审批'
|
||||
},
|
||||
{
|
||||
planNumber: 'PLAN-2023-0615-003',
|
||||
planName: 'Q2风电轴承采购计划',
|
||||
equipmentType: '风电设备',
|
||||
requestDept: '运维部',
|
||||
applicant: '王主管',
|
||||
requestDate: '2023-06-15 10:30',
|
||||
estimatedAmount: '300,000.00',
|
||||
status: '待审批'
|
||||
},
|
||||
{
|
||||
planNumber: 'PLAN-2023-0615-003',
|
||||
planName: 'Q2风电轴承采购计划',
|
||||
equipmentType: '风电设备',
|
||||
requestDept: '运维部',
|
||||
applicant: '王主管',
|
||||
requestDate: '2023-06-15 10:30',
|
||||
estimatedAmount: '300,000.00',
|
||||
status: '待审批'
|
||||
},
|
||||
{
|
||||
planNumber: 'PLAN-2023-0615-003',
|
||||
planName: 'Q2风电轴承采购计划',
|
||||
equipmentType: '风电设备',
|
||||
requestDept: '运维部',
|
||||
applicant: '王主管',
|
||||
requestDate: '2023-06-15 10:30',
|
||||
estimatedAmount: '300,000.00',
|
||||
status: '待审批'
|
||||
},
|
||||
{
|
||||
planNumber: 'PLAN-2023-0615-003',
|
||||
planName: 'Q2风电轴承采购计划',
|
||||
equipmentType: '风电设备',
|
||||
requestDept: '运维部',
|
||||
applicant: '王主管',
|
||||
requestDate: '2023-06-15 10:30',
|
||||
estimatedAmount: '300,000.00',
|
||||
status: '待审批'
|
||||
},
|
||||
{
|
||||
planNumber: 'PLAN-2023-0615-003',
|
||||
planName: 'Q2风电轴承采购计划',
|
||||
equipmentType: '风电设备',
|
||||
requestDept: '运维部',
|
||||
applicant: '王主管',
|
||||
requestDate: '2023-06-15 10:30',
|
||||
estimatedAmount: '300,000.00',
|
||||
status: '待审批'
|
||||
},
|
||||
{
|
||||
planNumber: 'PLAN-2023-0615-003',
|
||||
planName: 'Q2风电轴承采购计划',
|
||||
equipmentType: '风电设备',
|
||||
requestDept: '运维部',
|
||||
applicant: '王主管',
|
||||
requestDate: '2023-06-15 10:30',
|
||||
estimatedAmount: '300,000.00',
|
||||
status: '待审批'
|
||||
},
|
||||
{
|
||||
planNumber: 'PLAN-2023-0615-003',
|
||||
planName: 'Q2风电轴承采购计划',
|
||||
equipmentType: '风电设备',
|
||||
requestDept: '运维部',
|
||||
applicant: '王主管',
|
||||
requestDate: '2023-06-15 10:30',
|
||||
estimatedAmount: '300,000.00',
|
||||
status: '待审批'
|
||||
},
|
||||
{
|
||||
planNumber: 'PLAN-2023-0615-003',
|
||||
planName: 'Q2风电轴承采购计划',
|
||||
equipmentType: '风电设备',
|
||||
requestDept: '运维部',
|
||||
applicant: '王主管',
|
||||
requestDate: '2023-06-15 10:30',
|
||||
estimatedAmount: '300,000.00',
|
||||
status: '待审批'
|
||||
}
|
||||
]);
|
||||
|
||||
// 分页相关
|
||||
const currentPage = ref(1);
|
||||
const pageSize = ref(10);
|
||||
const total = ref(12);
|
||||
|
||||
// 切换标签页
|
||||
const changeTab = (tab) => {
|
||||
activeTab.value = tab;
|
||||
// 这里可以根据标签页筛选数据
|
||||
currentPage.value = 1; // 切换标签页时重置到第一页
|
||||
};
|
||||
|
||||
// 获取状态标签类型
|
||||
const getStatusTagType = (status) => {
|
||||
switch (status) {
|
||||
case '待审批':
|
||||
return 'warning';
|
||||
case '采购中':
|
||||
return 'info';
|
||||
case '未通过':
|
||||
return 'danger';
|
||||
case '已通过':
|
||||
return 'primary';
|
||||
case '已完成':
|
||||
return 'success';
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
};
|
||||
|
||||
// 查看详情
|
||||
const handleView = (row) => {
|
||||
console.log('查看采购计划详情:', row);
|
||||
router.push({
|
||||
path: '/materialManagement/planDetails',
|
||||
query: {
|
||||
planNumber: row.planNumber
|
||||
}
|
||||
});
|
||||
// 这里可以实现查看详情的逻辑，比如打开详情弹窗或跳转到详情页
|
||||
};
|
||||
|
||||
// 分页大小变化
|
||||
const handleSizeChange = (size) => {
|
||||
pageSize.value = size;
|
||||
currentPage.value = 1;
|
||||
};
|
||||
|
||||
// 当前页码变化
|
||||
const handleCurrentChange = (current) => {
|
||||
currentPage.value = current;
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user