569 lines
23 KiB
Vue
569 lines
23 KiB
Vue
<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> |