feat: 更新物料管理模块功能
1. 新增采购计划草稿存储功能 2. 优化出入库单和备件管理界面 3. 完善表单验证和交互逻辑 4. 调整表格列对齐方式 5. 移除冗余的审批备注字段 ps:出入口页面未完成
This commit is contained in:
re-JZzzz
@ -61,12 +61,12 @@ export function updatePaiban(data:any): AxiosPromise<any> {
|
||||
/**
|
||||
* 运维-人员排班-批量修改排班
|
||||
*/
|
||||
export function updateAllPaiban(): AxiosPromise<any> {
|
||||
return request({
|
||||
url: `/ops/personnel/scheduling/all`,
|
||||
method: 'put',
|
||||
});
|
||||
}
|
||||
// export function updateAllPaiban(): AxiosPromise<any> {
|
||||
// return request({
|
||||
// url: `/ops/personnel/scheduling/all`,
|
||||
// method: 'put',
|
||||
// });
|
||||
// }
|
||||
|
||||
/**
|
||||
* 运维-人员排班-删除排班
|
||||
|
||||
80
src/store/modules/procurementDraft.ts
Normal file
80
src/store/modules/procurementDraft.ts
Normal file
@ -0,0 +1,80 @@
|
||||
import { defineStore } from 'pinia';
|
||||
import { ref } from 'vue';
|
||||
import $cache from '@/plugins/cache';
|
||||
|
||||
// 草稿数据类型
|
||||
export interface ProcurementDraft {
|
||||
id: string;
|
||||
draftNumber: string;
|
||||
planName: string;
|
||||
saveTime: string;
|
||||
content: any;
|
||||
}
|
||||
|
||||
// 保存草稿到本地存储
|
||||
const saveDraftsToStorage = (drafts: ProcurementDraft[]) => {
|
||||
$cache.local.setJSON('procurementDrafts', drafts);
|
||||
};
|
||||
|
||||
// 从本地存储获取草稿
|
||||
const getDraftsFromStorage = (): ProcurementDraft[] => {
|
||||
const stored = $cache.local.getJSON('procurementDrafts');
|
||||
return stored && Array.isArray(stored) ? stored : [];
|
||||
};
|
||||
|
||||
export const useProcurementDraftStore = defineStore('procurementDraft', () => {
|
||||
const draftList = ref<ProcurementDraft[]>(getDraftsFromStorage());
|
||||
|
||||
// 保存草稿
|
||||
const saveDraft = (planName: string, content: any): ProcurementDraft => {
|
||||
const today = new Date();
|
||||
const dateStr = today.getFullYear() + '-' +
|
||||
String(today.getMonth() + 1).padStart(2, '0') + '-' +
|
||||
String(today.getDate()).padStart(2, '0');
|
||||
const randomNum = Math.floor(100 + Math.random() * 900);
|
||||
const draftNumber = `DRAFT-${dateStr}-${randomNum}`;
|
||||
|
||||
const newDraft: ProcurementDraft = {
|
||||
id: `draft_${Date.now()}_${randomNum}`,
|
||||
draftNumber,
|
||||
planName,
|
||||
saveTime: new Date().toLocaleString(),
|
||||
content: JSON.parse(JSON.stringify(content)) // 深拷贝内容
|
||||
};
|
||||
|
||||
// 添加到草稿列表并保存到本地存储
|
||||
draftList.value.unshift(newDraft);
|
||||
saveDraftsToStorage(draftList.value);
|
||||
|
||||
return newDraft;
|
||||
};
|
||||
|
||||
// 获取草稿列表
|
||||
const getDraftList = (): ProcurementDraft[] => {
|
||||
return draftList.value;
|
||||
};
|
||||
|
||||
// 获取单个草稿
|
||||
const getDraft = (draftId: string): ProcurementDraft | undefined => {
|
||||
return draftList.value.find(draft => draft.id === draftId);
|
||||
};
|
||||
|
||||
// 删除草稿
|
||||
const deleteDraft = (draftId: string): boolean => {
|
||||
const index = draftList.value.findIndex(draft => draft.id === draftId);
|
||||
if (index !== -1) {
|
||||
draftList.value.splice(index, 1);
|
||||
saveDraftsToStorage(draftList.value);
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
return {
|
||||
draftList,
|
||||
saveDraft,
|
||||
getDraftList,
|
||||
getDraft,
|
||||
deleteDraft
|
||||
};
|
||||
});
|
||||
@ -67,15 +67,6 @@
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="审批备注" prop="remark">
|
||||
<el-input v-model="supplierInfo.remark" :rows="1" placeholder="请输入审批备注"
|
||||
style="border: 1px solid red;color: red;" readonly value="1. 出货时间较长" />
|
||||
<!-- <div class="error-tip">1. 出货时间较长</div> -->
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
@ -92,11 +83,6 @@
|
||||
<el-table-column prop="usage" label="用途" />
|
||||
<el-table-column prop="total" label="合计" />
|
||||
</el-table>
|
||||
<el-form-item label="审批备注" style="margin-top: 10px">
|
||||
<el-input v-model="productInfo.remark" :rows="1" placeholder="请输入审批备注"
|
||||
style="border: 1px solid red;color: red;" readonly value="2. 单价高于市场价3.采购数量需重新评估" />
|
||||
<!-- <div class="error-tip">2. 单价高于市场价3.采购数量需重新评估</div> -->
|
||||
</el-form-item>
|
||||
</el-card>
|
||||
|
||||
<!-- 合同条款 -->
|
||||
@ -121,15 +107,6 @@
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="审批备注" prop="remark">
|
||||
<el-input v-model="contractInfo.remark" placeholder="请输入审批备注"
|
||||
style="border: 1px solid red;color: red;" readonly value="4. 付款方式未标明5.发票开具方式未标明" />
|
||||
<!-- <div class="error-tip">4. 付款方式未标明5.发票开具方式未标明</div> -->
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
|
||||
@ -15,7 +15,6 @@
|
||||
<div class="content" style="height: 100%;flex: 1;">
|
||||
<div class="menu">
|
||||
<el-input placeholder="请输入单据编号"></el-input>
|
||||
<el-select placeholder="请选择单据类型"></el-select>
|
||||
<el-select placeholder="请选择设备类型"></el-select>
|
||||
<el-select placeholder="请选择状态"></el-select>
|
||||
<el-select placeholder="请选择日期范围"></el-select>
|
||||
@ -27,19 +26,19 @@
|
||||
: '添加入库单' }}</el-button>
|
||||
</div>
|
||||
<el-table :data="tableData" border style="width: 100%;margin-top: 15px;height: 1000px;">
|
||||
<el-table-column prop="formNumber" label="单据编号" />
|
||||
<el-table-column prop="equipmentType" label="设备类型" />
|
||||
<el-table-column prop="handler" label="经手人" />
|
||||
<el-table-column prop="operationTime" label="操作时间" />
|
||||
<el-table-column prop="totalQuantity" label="总数量" />
|
||||
<el-table-column label="状态">
|
||||
<el-table-column prop="formNumber" label="单据编号" align="center" />
|
||||
<el-table-column prop="equipmentType" label="设备类型" align="center" />
|
||||
<el-table-column prop="handler" label="经手人" align="center" />
|
||||
<el-table-column prop="operationTime" label="操作时间" align="center" />
|
||||
<el-table-column prop="totalQuantity" label="总数量" align="center" />
|
||||
<el-table-column label="状态" align="center">
|
||||
<template #default="scope">
|
||||
<el-tag :type="getStatusTagType(scope.row.status)">
|
||||
{{ scope.row.status }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作">
|
||||
<el-table-column label="操作" align="center">
|
||||
<template #default="scope">
|
||||
<el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
|
||||
<el-button type="text" @click="handleDetail(scope.row)">详情</el-button>
|
||||
@ -108,6 +107,71 @@
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 编辑弹窗 -->
|
||||
<el-dialog v-model="editDialogVisible" title="编辑出入库单" width="500" @close="handleEditClose">
|
||||
<el-form :rules="rules" ref="editFormRef" :model="editForm" label-width="100">
|
||||
<el-form-item label="单据编号" prop="formNumber">
|
||||
<el-input v-model="editForm.formNumber" placeholder="请输入单据编号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="设备类型" prop="equipmentType">
|
||||
<el-select v-model="editForm.equipmentType" placeholder="请选择设备类型">
|
||||
<el-option label="设备类型1" value="1" />
|
||||
<el-option label="设备类型2" value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="总数量" prop="totalQuantity">
|
||||
<el-input-number v-model="editForm.totalQuantity" placeholder="请输入总数量" :min="0" :step="1" />
|
||||
</el-form-item>
|
||||
<el-form-item label="经手人" prop="handler">
|
||||
<el-input v-model="editForm.handler" placeholder="请输入经手人" />
|
||||
</el-form-item>
|
||||
<el-form-item label="联系电话" prop="contactPhone">
|
||||
<el-input v-model="editForm.contactPhone" placeholder="请输入联系电话" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="editDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="saveEdit">保存</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 详情弹窗 -->
|
||||
<el-dialog v-model="detailDialogVisible" title="出入库单详情" width="600" @close="handleDetailClose">
|
||||
<div class="detail-container">
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">单据编号：</span>
|
||||
<span class="detail-value">{{ currentRow.formNumber }}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">设备类型：</span>
|
||||
<span class="detail-value">{{ currentRow.equipmentType }}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">操作时间：</span>
|
||||
<span class="detail-value">{{ currentRow.operationTime }}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">总数量：</span>
|
||||
<span class="detail-value">{{ currentRow.totalQuantity }}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">经手人：</span>
|
||||
<span class="detail-value">{{ currentRow.handler }}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">状态：</span>
|
||||
<el-tag :type="getStatusTagType(currentRow.status)">{{ currentRow.status }}</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="detailDialogVisible = false">关闭</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
@ -212,6 +276,35 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* 详情弹窗样式 */
|
||||
.detail-container {
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.detail-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
font-weight: 500;
|
||||
color: #606266;
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.detail-value {
|
||||
color: #303133;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 12px 0;
|
||||
}
|
||||
|
||||
::v-deep(.el-card__body) {
|
||||
height: 100%;
|
||||
}
|
||||
@ -219,6 +312,8 @@
|
||||
<script setup>
|
||||
import SystemInfo from './components/SystemInfo.vue';
|
||||
import DataAnalysis from './components/DataAnalysis.vue';
|
||||
import { ref, computed } from 'vue';
|
||||
import { ElMessage, ElMessageBox } from 'element-plus';
|
||||
const type = ref('chuku');
|
||||
const form = ref({
|
||||
formNumber: '',
|
||||
@ -267,6 +362,34 @@ const formRef = ref(null);
|
||||
const handleCurrentChange = (val) => {
|
||||
currentPage.value = val;
|
||||
};
|
||||
|
||||
// 每页条数改变
|
||||
const handleSizeChange = (val) => {
|
||||
pageSize.value = val;
|
||||
currentPage.value = 1;
|
||||
};
|
||||
|
||||
// 模拟API调用函数
|
||||
const mockApiCall = (success = true) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
setTimeout(() => {
|
||||
if (success) {
|
||||
resolve({ success: true });
|
||||
} else {
|
||||
reject({ success: false, message: '操作失败，请稍后重试' });
|
||||
}
|
||||
}, 500);
|
||||
});
|
||||
}
|
||||
|
||||
// 编辑弹窗相关状态
|
||||
const editDialogVisible = ref(false);
|
||||
const editForm = ref({});
|
||||
const editFormRef = ref(null);
|
||||
|
||||
// 详情弹窗相关状态
|
||||
const detailDialogVisible = ref(false);
|
||||
const currentRow = ref({});
|
||||
const getStatusTagType = (status) => {
|
||||
if (status === '已完成') {
|
||||
return 'success'
|
||||
@ -277,4 +400,67 @@ const getStatusTagType = (status) => {
|
||||
}
|
||||
return ''
|
||||
}
|
||||
|
||||
// 处理编辑
|
||||
const handleEdit = (row) => {
|
||||
// 深拷贝当前行数据到编辑表单
|
||||
editForm.value = JSON.parse(JSON.stringify(row));
|
||||
editDialogVisible.value = true;
|
||||
};
|
||||
|
||||
// 保存编辑
|
||||
const saveEdit = async () => {
|
||||
try {
|
||||
// 模拟API调用
|
||||
await mockApiCall();
|
||||
editDialogVisible.value = false;
|
||||
ElMessage.success('编辑成功');
|
||||
// 这里应该刷新数据，但由于是模拟数据，暂时不处理
|
||||
} catch (error) {
|
||||
ElMessage.error(error.message || '编辑失败');
|
||||
}
|
||||
};
|
||||
|
||||
// 关闭编辑弹窗
|
||||
const handleEditClose = () => {
|
||||
// 重置表单
|
||||
editForm.value = {};
|
||||
if (editFormRef.value) {
|
||||
editFormRef.value.resetFields();
|
||||
}
|
||||
};
|
||||
|
||||
// 处理详情
|
||||
const handleDetail = (row) => {
|
||||
currentRow.value = row;
|
||||
detailDialogVisible.value = true;
|
||||
};
|
||||
|
||||
// 关闭详情弹窗
|
||||
const handleDetailClose = () => {
|
||||
currentRow.value = {};
|
||||
};
|
||||
|
||||
// 处理删除
|
||||
const handleDelete = async (row) => {
|
||||
try {
|
||||
await ElMessageBox.confirm(
|
||||
`确定要删除单据 ${row.formNumber} 吗？`,
|
||||
'确认删除',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}
|
||||
);
|
||||
// 模拟API调用
|
||||
await mockApiCall();
|
||||
ElMessage.success('删除成功');
|
||||
// 这里应该刷新数据，但由于是模拟数据，暂时不处理
|
||||
} catch (error) {
|
||||
if (error !== 'cancel') {
|
||||
ElMessage.error(error.message || '删除失败');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="procurementPlan">
|
||||
<el-row gutter="20">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="13">
|
||||
<el-card>
|
||||
<div style="display: flex;align-items: center;height: 120px;justify-content: space-around;">
|
||||
@ -79,37 +79,45 @@
|
||||
|
||||
<!-- 标签页导航 -->
|
||||
<div class="tabs">
|
||||
<el-badge :value="pendingCount" type="warning">
|
||||
<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-badge>
|
||||
<el-badge :value="purchasingCount" type="info">
|
||||
<el-button :type="activeTab === 'purchasing' ? 'primary' : ''"
|
||||
@click="changeTab('purchasing')">采购中</el-button>
|
||||
</el-badge>
|
||||
<el-badge :value="rejectedCount" type="danger">
|
||||
<el-button :type="activeTab === 'rejected' ? 'primary' : ''"
|
||||
@click="changeTab('rejected')">
|
||||
未通过
|
||||
</el-button>
|
||||
</el-badge>
|
||||
<el-badge :value="approvedCount" type="primary">
|
||||
<el-button :type="activeTab === 'approved' ? 'primary' : ''"
|
||||
@click="changeTab('approved')">已通过</el-button>
|
||||
</el-badge>
|
||||
<el-badge :value="completedCount" type="success">
|
||||
<el-button :type="activeTab === 'completed' ? 'primary' : ''"
|
||||
@click="changeTab('completed')">已完成</el-button>
|
||||
</el-badge>
|
||||
</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="状态">
|
||||
<el-table :data="filteredTableData" border style="width: 100%;margin-top: 15px;">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column prop="planNumber" label="计划编号" align="center" />
|
||||
<el-table-column prop="planName" label="计划名称" align="center" />
|
||||
<el-table-column prop="equipmentType" label="设备类型" align="center" />
|
||||
<el-table-column prop="requestDept" label="申请部门" align="center" />
|
||||
<el-table-column prop="applicant" label="申请人" align="center" />
|
||||
<el-table-column prop="requestDate" label="申请日期" align="center" />
|
||||
<el-table-column prop="estimatedAmount" label="预计金额" align="center" />
|
||||
<el-table-column label="状态" align="center">
|
||||
<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">
|
||||
<el-table-column label="操作" fixed="right" width="80" align="center">
|
||||
<template #default="scope">
|
||||
<el-button type="text" @click="handleView(scope.row)">查看</el-button>
|
||||
</template>
|
||||
@ -131,56 +139,43 @@
|
||||
<!-- 基础信息 -->
|
||||
<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-col :span="12">
|
||||
<el-form-item label="计划名称">
|
||||
<el-input v-model="newProcurementForm.planName" placeholder="请填写" />
|
||||
</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-col :span="12">
|
||||
<el-form-item label="合同名称">
|
||||
<el-input v-model="newProcurementForm.contractName" placeholder="请填写" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- 下拉框行 -->
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="合同类型">
|
||||
<el-select v-model="newProcurementForm.contractType" placeholder="请选择">
|
||||
<el-option v-for="option in wz_contract_type" :key="option.value" :label="option.label" :value="option.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="采购类型">
|
||||
<el-select v-model="newProcurementForm.procurementType" placeholder="请选择">
|
||||
<el-option v-for="option in wz_purchase_type" :key="option.value" :label="option.label" :value="option.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="仓库地址">
|
||||
<el-select v-model="newProcurementForm.contractAddress" placeholder="请选择">
|
||||
<el-option v-for="option in contractAddressOptions" :key="option.value" :label="option.label" :value="option.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<!-- 供应商信息 -->
|
||||
@ -190,17 +185,19 @@
|
||||
<el-col :span="6">
|
||||
<el-form-item label="供应商单位">
|
||||
<el-select v-model="newProcurementForm.supplierUnit" placeholder="请选择">
|
||||
<el-option label="请选择" value="" />
|
||||
<!-- 可以添加更多选项 -->
|
||||
<el-option v-for="option in supplierUnitOptions" :key="option.value" :label="option.label" :value="option.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-date-picker
|
||||
v-model="newProcurementForm.deliveryTime"
|
||||
type="date"
|
||||
placeholder="请选择送货日期"
|
||||
value-format="YYYY-MM-DD"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@ -222,12 +219,12 @@
|
||||
</el-table-column>
|
||||
<el-table-column prop="productPrice" label="产品单价">
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.productPrice" placeholder="请填写" type="number" />
|
||||
<el-input v-model="scope.row.productPrice" placeholder="请填写" type="number" @change="calculateTotalPrice(scope.row)" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="purchaseQuantity" label="购买数量">
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.purchaseQuantity" placeholder="请填写" type="number" />
|
||||
<el-input v-model="scope.row.purchaseQuantity" placeholder="请填写" type="number" @change="calculateTotalPrice(scope.row)" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="unit" label="单位">
|
||||
@ -258,15 +255,15 @@
|
||||
<el-form-item label="付款条件">
|
||||
<el-select v-model="newProcurementForm.paymentTerms" placeholder="请选择">
|
||||
<el-option label="请选择" value="" />
|
||||
<!-- 可以添加更多选项 -->
|
||||
<el-option v-for="option in wz_payment_terms" :key="option.value" :label="option.label" :value="option.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="结算方式">
|
||||
<el-form-item label="发票开具方式">
|
||||
<el-select v-model="newProcurementForm.settlementMethod" placeholder="请选择">
|
||||
<el-option label="请选择" value="" />
|
||||
<!-- 可以添加更多选项 -->
|
||||
<el-option v-for="option in wz_invoicing_way" :key="option.value" :label="option.label" :value="option.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
@ -374,26 +371,89 @@
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
<script setup>
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, computed } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { Upload } from '@element-plus/icons-vue';
|
||||
import { ElMessage, ElMessageBox } from 'element-plus';
|
||||
import { useProcurementDraftStore } from '@/store/modules/procurementDraft';
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
const { wz_invoicing_way,wz_payment_terms,wz_purchase_type,wz_contract_type} = toRefs<any>(proxy?.useDict('wz_invoicing_way','wz_payment_terms','wz_purchase_type','wz_contract_type'));
|
||||
|
||||
const router = useRouter();
|
||||
// 新建采购申请单对话框是否可见
|
||||
const isNewProcurementDialogVisible = ref(false);
|
||||
|
||||
// 当前激活的标签页
|
||||
const activeTab = ref('pending');
|
||||
|
||||
// 计算各状态的数量
|
||||
const pendingCount = computed(() => {
|
||||
return tableData.value.filter(item => item.status === '待审批').length;
|
||||
});
|
||||
|
||||
const purchasingCount = computed(() => {
|
||||
return tableData.value.filter(item => item.status === '采购中').length;
|
||||
});
|
||||
|
||||
const rejectedCount = computed(() => {
|
||||
return tableData.value.filter(item => item.status === '未通过').length;
|
||||
});
|
||||
|
||||
const approvedCount = computed(() => {
|
||||
return tableData.value.filter(item => item.status === '已通过').length;
|
||||
});
|
||||
|
||||
const completedCount = computed(() => {
|
||||
return tableData.value.filter(item => item.status === '已完成').length;
|
||||
});
|
||||
// 下拉框选项数据
|
||||
const contractAddressOptions = [
|
||||
{ label: '主仓库', value: 'main' },
|
||||
{ label: '一号仓库', value: 'warehouse1' },
|
||||
{ label: '二号仓库', value: 'warehouse2' },
|
||||
{ label: '三号仓库', value: 'warehouse3' },
|
||||
{ label: '车间仓库', value: 'workshop' }
|
||||
];
|
||||
|
||||
const supplierUnitOptions = [
|
||||
{ label: '供应商A', value: 'supplierA' },
|
||||
{ label: '供应商B', value: 'supplierB' },
|
||||
{ label: '供应商C', value: 'supplierC' },
|
||||
{ label: '供应商D', value: 'supplierD' },
|
||||
{ label: '供应商E', value: 'supplierE' }
|
||||
];
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// 新建采购申请单表单数据
|
||||
const newProcurementForm = reactive({
|
||||
planName: '',
|
||||
contractName: '',
|
||||
contractType: '',
|
||||
procurementType: '',
|
||||
contractAddress: '',
|
||||
supplierUnit: '',
|
||||
deliveryTime: '',
|
||||
paymentTerms: '',
|
||||
settlementMethod: '',
|
||||
products: [{
|
||||
productName: '',
|
||||
productModel: '',
|
||||
productPrice: '',
|
||||
purchaseQuantity: '',
|
||||
unit: ''
|
||||
}],
|
||||
fileList: []
|
||||
});
|
||||
// 表格数据
|
||||
const tableData = ref([
|
||||
{
|
||||
planNumber: 'PLAN-2023-0615-003',
|
||||
planNumber: 'PLAN-2023-0615-001',
|
||||
planName: 'Q2风电轴承采购计划',
|
||||
equipmentType: '风电设备',
|
||||
requestDept: '运维部',
|
||||
@ -403,126 +463,142 @@ const tableData = ref([
|
||||
status: '待审批'
|
||||
},
|
||||
{
|
||||
planNumber: 'PLAN-2023-0615-003',
|
||||
planName: 'Q2风电轴承采购计划',
|
||||
equipmentType: '风电设备',
|
||||
requestDept: '运维部',
|
||||
applicant: '王主管',
|
||||
requestDate: '2023-06-15 10:30',
|
||||
estimatedAmount: '300,000.00',
|
||||
planNumber: 'PLAN-2023-0615-002',
|
||||
planName: '发电机维修备件采购',
|
||||
equipmentType: '发电设备',
|
||||
requestDept: '维修部',
|
||||
applicant: '李工程师',
|
||||
requestDate: '2023-06-16 09:15',
|
||||
estimatedAmount: '150,000.00',
|
||||
status: '待审批'
|
||||
},
|
||||
{
|
||||
planNumber: 'PLAN-2023-0615-003',
|
||||
planName: 'Q2风电轴承采购计划',
|
||||
equipmentType: '风电设备',
|
||||
planName: 'Q2润滑油采购计划',
|
||||
equipmentType: '通用设备',
|
||||
requestDept: '运维部',
|
||||
applicant: '王主管',
|
||||
requestDate: '2023-06-15 10:30',
|
||||
estimatedAmount: '300,000.00',
|
||||
applicant: '张助理',
|
||||
requestDate: '2023-06-17 14:20',
|
||||
estimatedAmount: '50,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-0614-004',
|
||||
planName: '液压系统配件采购',
|
||||
equipmentType: '液压设备',
|
||||
requestDept: '工程部',
|
||||
applicant: '赵经理',
|
||||
requestDate: '2023-06-14 11:45',
|
||||
estimatedAmount: '220,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-0613-005',
|
||||
planName: '控制面板更新采购',
|
||||
equipmentType: '电气设备',
|
||||
requestDept: '电气部',
|
||||
applicant: '陈工程师',
|
||||
requestDate: '2023-06-13 16:10',
|
||||
estimatedAmount: '180,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-0612-006',
|
||||
planName: '安全防护装备采购',
|
||||
equipmentType: '安全设备',
|
||||
requestDept: '安全部',
|
||||
applicant: '孙主管',
|
||||
requestDate: '2023-06-12 08:50',
|
||||
estimatedAmount: '80,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-0611-007',
|
||||
planName: '水泵维修配件采购',
|
||||
equipmentType: '水处理设备',
|
||||
requestDept: '水处理部',
|
||||
applicant: '周工程师',
|
||||
requestDate: '2023-06-11 13:30',
|
||||
estimatedAmount: '60,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-0610-008',
|
||||
planName: '风机叶片检测设备采购',
|
||||
equipmentType: '检测设备',
|
||||
requestDept: '质检部',
|
||||
applicant: '吴经理',
|
||||
requestDate: '2023-06-10 10:20',
|
||||
estimatedAmount: '450,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-0609-009',
|
||||
planName: '仓库货架更新采购',
|
||||
equipmentType: '仓储设备',
|
||||
requestDept: '仓储部',
|
||||
applicant: '郑主管',
|
||||
requestDate: '2023-06-09 15:40',
|
||||
estimatedAmount: '90,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-0608-010',
|
||||
planName: '办公设备更新采购',
|
||||
equipmentType: '办公设备',
|
||||
requestDept: '行政部',
|
||||
applicant: '冯助理',
|
||||
requestDate: '2023-06-08 11:10',
|
||||
estimatedAmount: '120,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-0607-011',
|
||||
planName: '消防设备年检采购',
|
||||
equipmentType: '消防设备',
|
||||
requestDept: '安全部',
|
||||
applicant: '蒋经理',
|
||||
requestDate: '2023-06-07 09:30',
|
||||
estimatedAmount: '40,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-0606-012',
|
||||
planName: '网络设备升级采购',
|
||||
equipmentType: 'IT设备',
|
||||
requestDept: 'IT部',
|
||||
applicant: '沈工程师',
|
||||
requestDate: '2023-06-06 14:50',
|
||||
estimatedAmount: '160,000.00',
|
||||
status: '已完成'
|
||||
}
|
||||
]);
|
||||
|
||||
// 分页相关
|
||||
const currentPage = ref(1);
|
||||
const pageSize = ref(10);
|
||||
const total = ref(12);
|
||||
const total = computed(() => filteredTableData.value.length);
|
||||
|
||||
// 状态映射关系
|
||||
const statusMap = {
|
||||
pending: '待审批',
|
||||
purchasing: '采购中',
|
||||
rejected: '未通过',
|
||||
approved: '已通过',
|
||||
completed: '已完成'
|
||||
};
|
||||
|
||||
// 根据activeTab筛选后的数据
|
||||
const filteredTableData = computed(() => {
|
||||
if (activeTab.value === 'all') {
|
||||
return tableData.value;
|
||||
}
|
||||
return tableData.value.filter(item => item.status === statusMap[activeTab.value]);
|
||||
});
|
||||
|
||||
// 切换标签页
|
||||
const changeTab = (tab) => {
|
||||
activeTab.value = tab;
|
||||
// 这里可以根据标签页筛选数据
|
||||
currentPage.value = 1; // 切换标签页时重置到第一页
|
||||
};
|
||||
|
||||
@ -566,4 +642,298 @@ const handleSizeChange = (size) => {
|
||||
const handleCurrentChange = (current) => {
|
||||
currentPage.value = current;
|
||||
};
|
||||
|
||||
// 计算产品总价
|
||||
const calculateTotalPrice = (row) => {
|
||||
if (!row.productPrice || !row.purchaseQuantity) {
|
||||
return '0.00';
|
||||
}
|
||||
const price = parseFloat(row.productPrice);
|
||||
const quantity = parseInt(row.purchaseQuantity);
|
||||
if (isNaN(price) || isNaN(quantity)) {
|
||||
return '0.00';
|
||||
}
|
||||
return (price * quantity).toFixed(2);
|
||||
};
|
||||
|
||||
// 添加产品
|
||||
const addProduct = () => {
|
||||
newProcurementForm.products.push({
|
||||
productName: '',
|
||||
productModel: '',
|
||||
productPrice: '',
|
||||
purchaseQuantity: '',
|
||||
unit: ''
|
||||
});
|
||||
};
|
||||
|
||||
// 删除产品
|
||||
const removeProduct = (index) => {
|
||||
if (newProcurementForm.products.length <= 1) {
|
||||
ElMessage({ message: '至少保留一个产品信息', type: 'warning' });
|
||||
return;
|
||||
}
|
||||
newProcurementForm.products.splice(index, 1);
|
||||
};
|
||||
|
||||
// 重置新建采购申请表单
|
||||
const resetNewProcurementForm = () => {
|
||||
newProcurementForm.planName = '';
|
||||
newProcurementForm.contractName = '';
|
||||
newProcurementForm.contractType = '';
|
||||
newProcurementForm.procurementType = '';
|
||||
newProcurementForm.contractAddress = '';
|
||||
newProcurementForm.supplierUnit = '';
|
||||
newProcurementForm.deliveryTime = '';
|
||||
newProcurementForm.paymentTerms = '';
|
||||
newProcurementForm.settlementMethod = '';
|
||||
newProcurementForm.products = [{
|
||||
productName: '',
|
||||
productModel: '',
|
||||
productPrice: '',
|
||||
purchaseQuantity: '',
|
||||
unit: ''
|
||||
}];
|
||||
newProcurementForm.fileList = [];
|
||||
};
|
||||
|
||||
// 取消新建采购申请
|
||||
const cancelNewProcurement = () => {
|
||||
// 检查是否有未保存的内容
|
||||
const hasContent = Object.values(newProcurementForm).some(value => {
|
||||
if (Array.isArray(value)) {
|
||||
return value.length > 0 &&
|
||||
value.some(item =>
|
||||
typeof item === 'object' &&
|
||||
Object.values(item).some(v => v)
|
||||
);
|
||||
}
|
||||
return !!value;
|
||||
});
|
||||
|
||||
if (hasContent) {
|
||||
ElMessageBox.confirm('表单内容尚未保存，确定要关闭吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
resetNewProcurementForm();
|
||||
isNewProcurementDialogVisible.value = false;
|
||||
});
|
||||
} else {
|
||||
resetNewProcurementForm();
|
||||
isNewProcurementDialogVisible.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 草稿校验函数
|
||||
const validateDraft = () => {
|
||||
// 草稿只需要计划名称作为必填项
|
||||
if (!newProcurementForm.planName.trim()) {
|
||||
ElMessage({ message: '请填写计划名称', type: 'error' });
|
||||
return false;
|
||||
}
|
||||
|
||||
// 检查已填写的产品信息的有效性
|
||||
for (let i = 0; i < newProcurementForm.products.length; i++) {
|
||||
const product = newProcurementForm.products[i];
|
||||
if (product.productName && !product.productModel) {
|
||||
ElMessage({ message: `第${i + 1}行产品：填写了产品名称，请也填写产品型号`, type: 'warning' });
|
||||
}
|
||||
if (product.productPrice && parseFloat(product.productPrice) <= 0) {
|
||||
ElMessage({ message: `第${i + 1}行产品：产品单价应大于0`, type: 'warning' });
|
||||
}
|
||||
if (product.purchaseQuantity && parseInt(product.purchaseQuantity) <= 0) {
|
||||
ElMessage({ message: `第${i + 1}行产品：购买数量应大于0`, type: 'warning' });
|
||||
}
|
||||
}
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
// 保存草稿
|
||||
const saveDraft = () => {
|
||||
// 验证草稿
|
||||
if (!validateDraft()) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 使用pinia store保存草稿
|
||||
const draftStore = useProcurementDraftStore();
|
||||
const savedDraft = draftStore.saveDraft(newProcurementForm.planName, newProcurementForm);
|
||||
|
||||
console.log('保存草稿:', {
|
||||
draftNumber: savedDraft.draftNumber,
|
||||
saveTime: savedDraft.saveTime,
|
||||
content: savedDraft.content
|
||||
});
|
||||
|
||||
ElMessage({ message: `草稿已成功保存（编号：${savedDraft.draftNumber}），您可以在草稿箱中查看`, type: 'success' });
|
||||
};
|
||||
|
||||
// 表单校验函数
|
||||
const validateForm = () => {
|
||||
// 基础信息校验
|
||||
if (!newProcurementForm.planName.trim()) {
|
||||
ElMessage({ message: '请填写计划名称', type: 'error' });
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!newProcurementForm.contractName.trim()) {
|
||||
ElMessage({ message: '请填写合同名称', type: 'error' });
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!newProcurementForm.contractType) {
|
||||
ElMessage({ message: '请选择合同类型', type: 'error' });
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!newProcurementForm.procurementType) {
|
||||
ElMessage({ message: '请选择采购类型', type: 'error' });
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!newProcurementForm.contractAddress) {
|
||||
ElMessage({ message: '请选择仓库地址', type: 'error' });
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!newProcurementForm.supplierUnit) {
|
||||
ElMessage({ message: '请选择供应商单位', type: 'error' });
|
||||
return false;
|
||||
}
|
||||
|
||||
// 产品信息校验
|
||||
const hasValidProduct = newProcurementForm.products.some(product => {
|
||||
return product.productName &&
|
||||
product.productModel &&
|
||||
product.productPrice && parseFloat(product.productPrice) > 0 &&
|
||||
product.purchaseQuantity && parseInt(product.purchaseQuantity) > 0 &&
|
||||
product.unit;
|
||||
});
|
||||
|
||||
if (!hasValidProduct) {
|
||||
ElMessage({ message: '请至少填写一个有效的产品信息', type: 'error' });
|
||||
return false;
|
||||
}
|
||||
|
||||
// 检查每个产品的有效性
|
||||
for (let i = 0; i < newProcurementForm.products.length; i++) {
|
||||
const product = newProcurementForm.products[i];
|
||||
if (product.productName || product.productModel || product.productPrice || product.purchaseQuantity || product.unit) {
|
||||
if (!product.productName) {
|
||||
ElMessage({ message: `第${i + 1}行产品：请填写产品名称`, type: 'error' });
|
||||
return false;
|
||||
}
|
||||
if (!product.productModel) {
|
||||
ElMessage({ message: `第${i + 1}行产品：请填写产品型号`, type: 'error' });
|
||||
return false;
|
||||
}
|
||||
if (!product.productPrice) {
|
||||
ElMessage({ message: `第${i + 1}行产品：请填写产品单价`, type: 'error' });
|
||||
return false;
|
||||
}
|
||||
if (parseFloat(product.productPrice) <= 0) {
|
||||
ElMessage({ message: `第${i + 1}行产品：产品单价必须大于0`, type: 'error' });
|
||||
return false;
|
||||
}
|
||||
if (!product.purchaseQuantity) {
|
||||
ElMessage({ message: `第${i + 1}行产品：请填写购买数量`, type: 'error' });
|
||||
return false;
|
||||
}
|
||||
if (parseInt(product.purchaseQuantity) <= 0) {
|
||||
ElMessage({ message: `第${i + 1}行产品：购买数量必须大于0`, type: 'error' });
|
||||
return false;
|
||||
}
|
||||
if (!product.unit) {
|
||||
ElMessage({ message: `第${i + 1}行产品：请填写单位`, type: 'error' });
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
// 提交申请
|
||||
const submitProcurement = () => {
|
||||
// 表单验证
|
||||
if (!validateForm()) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 确认提交
|
||||
ElMessageBox.confirm('确定要提交采购申请单吗？提交后将进入审批流程，不可撤销。', '确认提交', {
|
||||
confirmButtonText: '确认提交',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
// 计算总金额
|
||||
const totalAmount = newProcurementForm.products.reduce((sum, product) => {
|
||||
const price = parseFloat(product.productPrice) || 0;
|
||||
const quantity = parseInt(product.purchaseQuantity) || 0;
|
||||
return sum + (price * quantity);
|
||||
}, 0);
|
||||
|
||||
// 生成计划编号
|
||||
const today = new Date();
|
||||
const dateStr = today.getFullYear() + '-' +
|
||||
String(today.getMonth() + 1).padStart(2, '0') + '-' +
|
||||
String(today.getDate()).padStart(2, '0');
|
||||
const randomNum = Math.floor(100 + Math.random() * 900);
|
||||
const planNumber = `PLAN-${dateStr}-${randomNum}`;
|
||||
|
||||
// 模拟提交数据
|
||||
const newPlan = {
|
||||
planNumber: planNumber,
|
||||
planName: newProcurementForm.planName,
|
||||
equipmentType: newProcurementForm.procurementType,
|
||||
requestDept: '当前部门',
|
||||
applicant: '当前用户',
|
||||
requestDate: new Date().toLocaleString(),
|
||||
estimatedAmount: totalAmount.toFixed(2),
|
||||
status: '待审批'
|
||||
};
|
||||
|
||||
// 添加到表格数据中
|
||||
tableData.value.unshift(newPlan);
|
||||
|
||||
ElMessage({ message: '采购申请单已成功提交，等待审批！', type: 'success' });
|
||||
|
||||
// 关闭对话框并重置表单
|
||||
resetNewProcurementForm();
|
||||
isNewProcurementDialogVisible.value = false;
|
||||
}).catch(() => {
|
||||
// 用户取消了提交
|
||||
});
|
||||
};
|
||||
|
||||
// 文件上传相关方法
|
||||
const handlePreview = (uploadFile) => {
|
||||
console.log('预览文件:', uploadFile);
|
||||
ElMessage({ message: '文件预览功能待实现', type: 'info' });
|
||||
};
|
||||
|
||||
const handleRemove = (uploadFile, uploadFiles) => {
|
||||
console.log('删除文件:', uploadFile);
|
||||
// 从fileList中移除文件
|
||||
const index = newProcurementForm.fileList.findIndex(file => file.uid === uploadFile.uid);
|
||||
if (index !== -1) {
|
||||
newProcurementForm.fileList.splice(index, 1);
|
||||
ElMessage({ message: `文件 "${uploadFile.name}" 已移除`, type: 'success' });
|
||||
}
|
||||
};
|
||||
|
||||
const beforeRemove = (uploadFile, uploadFiles) => {
|
||||
return ElMessageBox.confirm(`确定要删除文件 "${uploadFile.name}" 吗？`, '确认删除', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
});
|
||||
};
|
||||
|
||||
const handleExceed = (files, uploadFiles) => {
|
||||
ElMessage({ message: '最多只能上传5个文件，已自动过滤多余文件', type: 'warning' });
|
||||
};
|
||||
</script>
|
||||
@ -157,20 +157,18 @@
|
||||
</div>
|
||||
<div style="margin-top: 30px;">
|
||||
<div class="menu" style="background-color: #F2F2F2; padding: 20px;">
|
||||
<el-row gutter="30">
|
||||
<el-row :gutter="30">
|
||||
<el-col :span="3">
|
||||
<el-input placeholder="请输入备件名称"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="3">
|
||||
<el-select placeholder="设备类型">
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="3">
|
||||
<el-select placeholder="备件类别">
|
||||
<el-option v-for="option in wz_spareparts_type" :key="option.value" :label="option.label" :value="option.value" />
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="3">
|
||||
<el-select placeholder="全部状态">
|
||||
<el-select placeholder="库存状态">
|
||||
<el-option v-for="option in wz_inventory_type" :key="option.value" :label="option.label" :value="option.value" />
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
@ -180,20 +178,20 @@
|
||||
</el-row>
|
||||
</div>
|
||||
<el-table :data="pagedTableData" border style="width: 100%;margin-top: 10px;">
|
||||
<el-table-column prop="backupNumber" label="备件编号" />
|
||||
<el-table-column prop="backupName" label="备件名称" />
|
||||
<el-table-column prop="equipmentType" label="设备类型" />
|
||||
<el-table-column prop="specificationModel" label="规格型号" />
|
||||
<el-table-column prop="inventoryStatus" label="库存状态" />
|
||||
<el-table-column prop="inventoryQuantity" label="库存数量" />
|
||||
<el-table-column label="安全库存">
|
||||
<el-table-column prop="backupNumber" label="备件编号" align="center" />
|
||||
<el-table-column prop="backupName" label="备件名称" align="center" />
|
||||
<el-table-column prop="backType" label="备件类型" align="center" />
|
||||
<el-table-column prop="specificationModel" label="规格型号" align="center" />
|
||||
<el-table-column prop="safetyStockStatus" label="安全库存数量" align="center" />
|
||||
<el-table-column prop="inventoryQuantity" label="库存数量" align="center" />
|
||||
<el-table-column label="库存状态" align="center">
|
||||
<template #default="scope">
|
||||
<el-tag :type="getTagType(scope.row.safetyStockStatus)">
|
||||
{{ scope.row.safetyStockStatus }}
|
||||
<el-tag :type="getTagType(scope.row.inventoryStatus)">
|
||||
{{ scope.row.inventoryStatus }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作">
|
||||
<el-table-column label="操作" align="center">
|
||||
<template #default="scope">
|
||||
<el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
|
||||
<el-button type="text" @click="handleDetail(scope.row)">详情</el-button>
|
||||
@ -215,6 +213,99 @@
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<!-- 编辑弹窗 -->
|
||||
<el-dialog
|
||||
v-model="editDialogVisible"
|
||||
title="编辑备件信息"
|
||||
width="50%"
|
||||
@close="handleEditClose"
|
||||
>
|
||||
<el-form
|
||||
ref="editFormRef"
|
||||
:model="editForm"
|
||||
label-width="120px"
|
||||
style="max-width: 600px;"
|
||||
>
|
||||
<el-form-item label="备件编号" prop="backupNumber">
|
||||
<el-input v-model="editForm.backupNumber" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item label="备件名称" prop="backupName">
|
||||
<el-input v-model="editForm.backupName" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备件类型" prop="backType">
|
||||
<el-input v-model="editForm.backType" />
|
||||
</el-form-item>
|
||||
<el-form-item label="规格型号" prop="specificationModel">
|
||||
<el-input v-model="editForm.specificationModel" />
|
||||
</el-form-item>
|
||||
<el-form-item label="库存状态" prop="inventoryStatus">
|
||||
<el-select v-model="editForm.inventoryStatus">
|
||||
<el-option v-for="option in wz_inventory_type" :key="option.value" :label="option.label" :value="option.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="库存数量" prop="inventoryQuantity">
|
||||
<el-input v-model="editForm.inventoryQuantity" />
|
||||
</el-form-item>
|
||||
<el-form-item label="安全库存数量" prop="safetyStockStatus">
|
||||
<el-input v-model="editForm.safetyStockStatus" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="editDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="saveEdit">保存</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 详情弹窗 -->
|
||||
<el-dialog
|
||||
v-model="detailDialogVisible"
|
||||
title="备件详情"
|
||||
width="50%"
|
||||
@close="handleDetailClose"
|
||||
>
|
||||
<div class="detail-container">
|
||||
<div class="detail-item">
|
||||
<div class="detail-label">备件编号：</div>
|
||||
<div class="detail-value">{{ currentRow.backupNumber }}</div>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<div class="detail-label">备件名称：</div>
|
||||
<div class="detail-value">{{ currentRow.backupName }}</div>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<div class="detail-label">备件类型：</div>
|
||||
<div class="detail-value">{{ currentRow.backType }}</div>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<div class="detail-label">规格型号：</div>
|
||||
<div class="detail-value">{{ currentRow.specificationModel }}</div>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<div class="detail-label">库存状态：</div>
|
||||
<div class="detail-value">
|
||||
<el-tag :type="getTagType(currentRow.inventoryStatus)">
|
||||
{{ currentRow.inventoryStatus }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<div class="detail-label">库存数量：</div>
|
||||
<div class="detail-value">{{ currentRow.inventoryQuantity }}</div>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<div class="detail-label">安全库存数量：</div>
|
||||
<div class="detail-value">{{ currentRow.safetyStockStatus }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="detailDialogVisible = false">关闭</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped lang="scss">
|
||||
@ -284,9 +375,44 @@
|
||||
background-color: #409eff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* 详情弹窗样式 */
|
||||
.detail-container {
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.detail-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
width: 120px;
|
||||
font-weight: 500;
|
||||
color: #303133;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.detail-value {
|
||||
flex: 1;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding-top: 20px;
|
||||
}
|
||||
</style>
|
||||
<script setup>
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue';
|
||||
import TitleComponent from '@/components/TitleComponent';
|
||||
import { ElMessage, ElMessageBox } from 'element-plus';
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
const { wz_inventory_type,wz_spareparts_type} = toRefs<any>(proxy?.useDict('wz_inventory_type','wz_spareparts_type'));
|
||||
|
||||
|
||||
// 计算属性：根据当前页码和每页条数获取分页后的数据
|
||||
@ -294,97 +420,97 @@ const tableData = ref([
|
||||
{
|
||||
backupNumber: 'SOL-2023-001',
|
||||
backupName: '光伏逆变器模块',
|
||||
equipmentType: '光伏设备',
|
||||
backType: '光伏设备',
|
||||
specificationModel: 'SGGKTL-M',
|
||||
inventoryStatus: '12个',
|
||||
inventoryStatus: '正常',
|
||||
inventoryQuantity: '5个',
|
||||
safetyStockStatus: '正常'
|
||||
safetyStockStatus: '12个'
|
||||
},
|
||||
{
|
||||
backupNumber: 'SOL-2023-001',
|
||||
backupName: '光伏逆变器模块',
|
||||
equipmentType: '光伏设备',
|
||||
backType: '光伏设备',
|
||||
specificationModel: 'SGGKTL-M',
|
||||
inventoryStatus: '12个',
|
||||
inventoryStatus: '正常',
|
||||
inventoryQuantity: '5个',
|
||||
safetyStockStatus: '正常'
|
||||
safetyStockStatus: '12个'
|
||||
},
|
||||
{
|
||||
backupNumber: 'SOL-2023-001',
|
||||
backupName: '光伏逆变器模块',
|
||||
equipmentType: '光伏设备',
|
||||
backType: '光伏设备',
|
||||
specificationModel: 'SGGKTL-M',
|
||||
inventoryStatus: '12个',
|
||||
inventoryStatus: '正常',
|
||||
inventoryQuantity: '5个',
|
||||
safetyStockStatus: '正常'
|
||||
safetyStockStatus: '12个'
|
||||
},
|
||||
{
|
||||
backupNumber: 'SOL-2023-001',
|
||||
backupName: '光伏逆变器模块',
|
||||
equipmentType: '光伏设备',
|
||||
backType: '光伏设备',
|
||||
specificationModel: 'SGGKTL-M',
|
||||
inventoryStatus: '12个',
|
||||
inventoryStatus: '正常',
|
||||
inventoryQuantity: '5个',
|
||||
safetyStockStatus: '正常'
|
||||
safetyStockStatus: '12个'
|
||||
},
|
||||
{
|
||||
backupNumber: 'WIN-2023-045',
|
||||
backupName: '风力发电机轴承',
|
||||
equipmentType: '风电设备',
|
||||
backType: '风电设备',
|
||||
specificationModel: '6318-2RS1/C3',
|
||||
inventoryStatus: '3套',
|
||||
inventoryStatus: '低库存',
|
||||
inventoryQuantity: '5套',
|
||||
safetyStockStatus: '低库存'
|
||||
safetyStockStatus: '3套'
|
||||
},
|
||||
{
|
||||
backupNumber: 'SOL-2023-001',
|
||||
backupName: '光伏逆变器模块',
|
||||
equipmentType: '光伏设备',
|
||||
backType: '光伏设备',
|
||||
specificationModel: 'SGGKTL-M',
|
||||
inventoryStatus: '12个',
|
||||
inventoryStatus: '正常',
|
||||
inventoryQuantity: '5个',
|
||||
safetyStockStatus: '正常'
|
||||
safetyStockStatus: '12个'
|
||||
},
|
||||
{
|
||||
backupNumber: 'WIN-2023-045',
|
||||
backupName: '风力发电机轴承',
|
||||
equipmentType: '风电设备',
|
||||
backType: '风电设备',
|
||||
specificationModel: '6318-2RS1/C3',
|
||||
inventoryStatus: '3套',
|
||||
inventoryStatus: '低库存',
|
||||
inventoryQuantity: '5套',
|
||||
safetyStockStatus: '低库存'
|
||||
safetyStockStatus: '3套'
|
||||
},
|
||||
{
|
||||
backupNumber: 'WIN-2023-045',
|
||||
backupName: '风力发电机轴承',
|
||||
equipmentType: '风电设备',
|
||||
backType: '风电设备',
|
||||
specificationModel: '6318-2RS1/C3',
|
||||
inventoryStatus: '0套',
|
||||
inventoryStatus: '缺货',
|
||||
inventoryQuantity: '2套',
|
||||
safetyStockStatus: '缺货'
|
||||
safetyStockStatus: '0套'
|
||||
},
|
||||
{
|
||||
backupNumber: 'WIN-2023-045',
|
||||
backupName: '风力发电机轴承',
|
||||
equipmentType: '风电设备',
|
||||
backType: '风电设备',
|
||||
specificationModel: '6318-2RS1/C3',
|
||||
inventoryStatus: '3套',
|
||||
inventoryStatus: '低库存',
|
||||
inventoryQuantity: '5套',
|
||||
safetyStockStatus: '低库存'
|
||||
safetyStockStatus: '3套'
|
||||
},
|
||||
{
|
||||
backupNumber: 'WIN-2023-045',
|
||||
backupName: '风力发电机轴承',
|
||||
equipmentType: '风电设备',
|
||||
backType: '风电设备',
|
||||
specificationModel: '6318-2RS1/C3',
|
||||
inventoryStatus: '3套',
|
||||
inventoryStatus: '低库存',
|
||||
inventoryQuantity: '5套',
|
||||
safetyStockStatus: '低库存'
|
||||
safetyStockStatus: '3套'
|
||||
},
|
||||
{
|
||||
backupNumber: 'WIN-2023-045',
|
||||
backupName: '风力发电机轴承',
|
||||
equipmentType: '风电设备',
|
||||
backType: '风电设备',
|
||||
specificationModel: '6318-2RS1/C3',
|
||||
inventoryStatus: '3套',
|
||||
inventoryQuantity: '5套',
|
||||
@ -419,21 +545,109 @@ const getTagType = (status) => {
|
||||
return ''
|
||||
}
|
||||
|
||||
// 编辑相关状态
|
||||
const editDialogVisible = ref(false);
|
||||
const editForm = ref({
|
||||
backupNumber: '',
|
||||
backupName: '',
|
||||
backType: '',
|
||||
specificationModel: '',
|
||||
inventoryStatus: '',
|
||||
inventoryQuantity: '',
|
||||
safetyStockStatus: ''
|
||||
});
|
||||
const editFormRef = ref(null);
|
||||
|
||||
// 详情相关状态
|
||||
const detailDialogVisible = ref(false);
|
||||
const currentRow = ref({
|
||||
backupNumber: '',
|
||||
backupName: '',
|
||||
backType: '',
|
||||
specificationModel: '',
|
||||
inventoryStatus: '',
|
||||
inventoryQuantity: '',
|
||||
safetyStockStatus: ''
|
||||
});
|
||||
|
||||
// 模拟API调用函数
|
||||
const mockApiCall = (success = true) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
setTimeout(() => {
|
||||
if (success) {
|
||||
resolve({ success: true });
|
||||
} else {
|
||||
reject({ success: false, message: '操作失败，请稍后重试' });
|
||||
}
|
||||
}, 500);
|
||||
});
|
||||
};
|
||||
|
||||
// 编辑操作方法
|
||||
const handleEdit = (row) => {
|
||||
console.log('编辑', row)
|
||||
// 这里可以编写编辑的逻辑，比如跳转到编辑页面等
|
||||
}
|
||||
// 深拷贝当前行数据到编辑表单
|
||||
editForm.value = JSON.parse(JSON.stringify(row));
|
||||
editDialogVisible.value = true;
|
||||
};
|
||||
|
||||
// 保存编辑
|
||||
const saveEdit = async () => {
|
||||
try {
|
||||
// 模拟API调用
|
||||
await mockApiCall();
|
||||
editDialogVisible.value = false;
|
||||
ElMessage.success('编辑成功');
|
||||
// 这里应该刷新数据，但由于是模拟数据，暂时不处理
|
||||
} catch (error) {
|
||||
ElMessage.error(error.message || '编辑失败');
|
||||
}
|
||||
};
|
||||
|
||||
// 关闭编辑弹窗
|
||||
const handleEditClose = () => {
|
||||
editForm.value = {};
|
||||
};
|
||||
|
||||
// 详情操作方法
|
||||
const handleDetail = (row) => {
|
||||
console.log('详情', row)
|
||||
// 这里可以编写查看详情的逻辑
|
||||
}
|
||||
currentRow.value = row;
|
||||
detailDialogVisible.value = true;
|
||||
};
|
||||
|
||||
// 关闭详情弹窗
|
||||
const handleDetailClose = () => {
|
||||
currentRow.value = {};
|
||||
};
|
||||
|
||||
// 删除操作方法
|
||||
const handleDelete = (row) => {
|
||||
console.log('删除', row)
|
||||
// 这里可以编写删除的逻辑，比如提示确认删除，然后从表格数据中移除等
|
||||
}
|
||||
const handleDelete = async (row) => {
|
||||
try {
|
||||
await ElMessageBox.confirm(
|
||||
`确定要删除备件 ${row.backupName} 吗？`,
|
||||
'确认删除',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}
|
||||
);
|
||||
// 模拟API调用
|
||||
await mockApiCall();
|
||||
ElMessage.success('删除成功');
|
||||
// 从表格数据中移除该记录
|
||||
const index = tableData.value.findIndex(item => item.backupNumber === row.backupNumber);
|
||||
if (index !== -1) {
|
||||
tableData.value.splice(index, 1);
|
||||
total.value = tableData.value.length;
|
||||
// 如果删除的是当前页的最后一条数据，且当前页不是第一页，则切换到上一页
|
||||
if (pagedTableData.value.length === 0 && currentPage.value > 1) {
|
||||
currentPage.value--;
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
if (error !== 'cancel') {
|
||||
ElMessage.error(error.message || '删除失败');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user