maintenance_system/src/views/materialManagement/procurementPlan.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-badge :value="pendingCount" type="warning">
                                <el-button :type="activeTab === 'pending' ? 'primary' : ''"
                                    @click="changeTab('pending')">待审批</el-button>
                            </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="caigouPlanList" border style="width: 100%;margin-top: 15px;">
                            <el-table-column label="计划编号" align="center" prop="jihuaBianhao" />
                            <el-table-column label="计划名称" align="center" prop="jihuaName" />
                            <el-table-column label="申请部门" align="center" prop="caigouDanweiName" />
                            <el-table-column label="申请人" align="center" prop="jingbanrenName" />
                            <el-table-column prop="createTime" label="申请日期" align="center" />
                            <el-table-column label="预计金额" align="center" prop="yujiJine" />
                            <el-table-column label="状态" align="center" prop="status">
                                <template #default="scope">
                                    <dict-tag :options="wz_caigou_examine" :value="scope.row.status" />
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" fixed="right" width="80" align="center">
                                <template #default="scope">
                                    <el-button type="text" @click="handleView(scope.row)">查看</el-button>
                                </template>
                            </el-table-column>
                        </el-table>

                        <!-- 分页 -->
                        <div class="pagination-section">
                            <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
                                v-model:limit="queryParams.pageSize" @pagination="getList" />
                        </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="12">
                            <el-form-item label="计划名称">
                                <el-input v-model="form.jihuaName" placeholder="请填写计划名称" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="合同名称">
                                <el-input v-model="form.hetonName" placeholder="请填写合同名称" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <!-- 下拉框行 -->
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <el-form-item label="合同类型">
                                <el-select v-model="form.hetonType" 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="form.caigouType" 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-input v-model="form.cangkuUrl" 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="form.danwei" placeholder="请选择">
                                    <!-- <el-option v-for="option in supplierList" :key="option.value" :label="option.label"
                                        :value="option.value" /> -->
                                        <el-option label="供应商1" value="供应商1" />
                                         <el-option label="供应商1" value="供应商1" />
                                          <el-option label="供应商1" value="供应商1" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="送货时间">
                                <el-date-picker v-model="form.chuhuoTime" type="date" placeholder="请选择送货日期"
                                    value-format="YYYY-MM-DD" style="width: 100%" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>

                <!-- 产品信息 -->
                <div class="form-section">
                    <h3>产品信息</h3>
                    <el-table :data="form.opsCaigouPlanChanpinBos" border style="width: 100%">
                        <el-table-column prop="chanpinName" label="产品名称">
                            <template #default="scope">
                                <el-input v-model="scope.row.chanpinName" placeholder="请填写" />
                            </template>
                        </el-table-column>
                        <el-table-column prop="chanpinType" label="产品型号">
                            <template #default="scope">
                                <el-input v-model="scope.row.chanpinType" placeholder="请填写" />
                            </template>
                        </el-table-column>
                        <el-table-column prop="chanpinMonovalent" label="产品单价">
                            <template #default="scope">
                                <el-input v-model="scope.row.chanpinMonovalent" placeholder="请填写" type="number"
                                    @change="calculateTotalPrice(scope.row)" />
                            </template>
                        </el-table-column>
                        <el-table-column prop="goumaiNumber" label="购买数量">
                            <template #default="scope">
                                <el-input v-model="scope.row.goumaiNumber" placeholder="请填写" type="number"
                                    @change="calculateTotalPrice(scope.row)" />
                            </template>
                        </el-table-column>
                        <el-table-column prop="danwei" label="单位">
                            <template #default="scope">
                                <el-input v-model="scope.row.danwei" 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="form.opsCaigouPlanChanpinBos.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="form.fukuantiaojian" placeholder="请选择">
                                    <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-select v-model="form.fapiaoKjfs" placeholder="请选择">
                                    <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>
                    </el-row>
                </div>

                <!-- 附件上传 -->
                <div class="form-section">
                    <h3>附件上传</h3>
                    <file-upload ref="fileUploadRef" :isDrag="true" :file-list="form.opsCaigouPlanFilesBos"
                        :is-show-tip="false"
                        @update:file-list="handleUpdateFileList"
                        :file-type="['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt', 'pdf', 'png', 'jpg', 'jpeg']" />
                </div>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="cancelNewProcurement">取消</el-button>
                    <el-button @click="saveDraft" :loading="buttonLoading">保存草稿</el-button>
                    <el-button type="primary" @click="submitProcurement" :loading="buttonLoading">提交申请</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 lang="ts">
import { ref, reactive, computed } from '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, wz_caigou_examine } = toRefs<any>(proxy?.useDict('wz_invoicing_way', 'wz_payment_terms', 'wz_purchase_type', 'wz_contract_type', 'wz_caigou_examine'));

import { listCaigouPlan, getSupplierList, addCaigouPlan } from '@/api/wuziguanli/caigouPlan';
import { CaigouPlanVO, CaigouPlanQuery, CaigouPlanForm } from '@/api/wuziguanli/caigouPlan/types';

import { useRouter } from 'vue-router';
const router = useRouter();


// 导入用户store
import { useUserStore } from '@/store/modules/user';
// 获取用户store
const userStore = useUserStore();

const caigouPlanList = ref<CaigouPlanVO[]>([]);
const buttonLoading = ref(false);
const loading = ref(true);
const total = ref(0);

const initFormData: CaigouPlanForm = {
    id: undefined,
    projectId: undefined,
    jihuaName: undefined,
    jihuaBianhao: undefined,
    caigouDanwei: undefined,
    caigouDanweiName: undefined,
    jingbanren: undefined,
    jingbanrenName: undefined,
    hetonType: undefined,
    caigouType: undefined,
    cangkuUrl: undefined,
    hetonName: undefined,
    gonyingshangId: 1,
    chuhuoTime: undefined,
    fukuantiaojian: undefined,
    fapiaoKjfs: undefined,
    status: undefined,
    shenheStatus: undefined,
    yujiJine: undefined,
    shijiJine: undefined,
    opsCaigouPlanFilesBos: [],
    opsCaigouPlanChanpinBos: [
        {
            chanpinName: '',
            chanpinType: '',
            chanpinMonovalent: 0,
            goumaiNumber: 0,
            danwei: '',
            totalPrice: 0
        }
    ],
}
const data = reactive<PageData<CaigouPlanForm, CaigouPlanQuery>>({
    form: { ...initFormData },
    queryParams: {
        pageNum: 1,
        pageSize: 10,
        projectId: undefined,
        jihuaName: undefined,
        jihuaBianhao: undefined,
        caigouDanwei: undefined,
        caigouDanweiName: undefined,
        jingbanren: undefined,
        jingbanrenName: undefined,
        hetonType: undefined,
        caigouType: undefined,
        cangkuUrl: undefined,
        hetonName: undefined,
        gonyingshangId: 1,
        chuhuoTime: undefined,
        fukuantiaojian: undefined,
        fapiaoKjfs: undefined,
        status: undefined,
        shenheStatus: undefined,
        yujiJine: undefined,
        shijiJine: undefined,
        opsCaigouPlanChanpinBos: [
            {
                chanpinName: '',
                chanpinType: '',
                chanpinMonovalent: 0,
                goumaiNumber: 0,
                danwei: '',
                totalPrice: 0
            }
        ],
        opsCaigouPlanFilesBos: undefined,
        params: {
        }
    },
    rules: {}
});
   
const { queryParams, form, rules } = toRefs(data);

/** 查询运维-物资-采购计划单列表 */
const getList = async () => {
    loading.value = true;
    const res = await listCaigouPlan(queryParams.value);
    caigouPlanList.value = res.rows;
    total.value = res.total;
    loading.value = false;
}
// 新增采购计划单
const addCaigouPlans = async () => {
    buttonLoading.value = true; // 显示按钮加载状态
    try {
        // 提交表单数据到后端
        const res = await addCaigouPlan(form.value);
        
        if (res.code === 200) {
            ElMessage({ message: '采购申请单已成功提交，等待审批！', type: 'success' });
            
            // 刷新列表数据
            getList();
            
            // 关闭对话框并重置表单
            resetNewProcurementForm();
            isNewProcurementDialogVisible.value = false;
        } else {
            // 显示详细的错误信息
            ElMessage({ 
                message: res.msg || '新增采购计划单失败，请重试', 
                type: 'error'
            });
        }
    } catch (error) {
        ElMessage({ message: '失败', type: 'error' });
    } finally {
        buttonLoading.value = false; // 无论成功失败，都关闭加载状态
    }
}



// 采购商列表
const supplierList = ref([]);
const getSupplierLists = async () => {
    const res = await getSupplierList({
        projectId: userStore.selectedProject.id
    });
    supplierList.value = res.rows;

}



onMounted(() => {
    getList();
    getSupplierLists();
});
// 监听用户选择的项目变化
watch(() => userStore.selectedProject, (newProject) => {
    if (newProject && newProject.id) {
        queryParams.value.projectId = newProject.id;
        // 只在新增表单时设置projectId，编辑表单保留原有值
        if (!form.value.id) {
            form.value.projectId = newProject.id;
        }
        // 调用getList刷新数据
        getList();
    }
}, { immediate: true, deep: true });
// 新建采购申请单对话框是否可见
const isNewProcurementDialogVisible = ref(false);

// 跳转查看详情
const handleView = (row) => {
    router.push({
        path: '/materialManagement/planDetails',
        query: {
            id: row.id
        }
    });
};
// 计算产品总价
const calculateTotalPrice = (row) => {
    if (!row.chanpinMonovalent || !row.goumaiNumber) {
        row.totalPrice = '0.00'; // 保存计算结果到对象中
        return '0.00';
    }
    const price = parseFloat(row.chanpinMonovalent);
    const quantity = parseInt(row.goumaiNumber);
    if (isNaN(price) || isNaN(quantity)) {
        row.totalPrice = '0.00'; // 保存计算结果到对象中
        return '0.00';
    }
    const result = (price * quantity).toFixed(2);
    row.totalPrice = result; // 保存计算结果到对象中
    return result;
};

// 添加产品
const addProduct = () => {
    form.value.opsCaigouPlanChanpinBos.push({
        chanpinName: '',
        chanpinType: '',
        chanpinMonovalent: 0,
        goumaiNumber: 0,
        danwei: '',
        totalPrice: 0
    });
};

// 删除产品
const removeProduct = (index) => {
    if (form.value.opsCaigouPlanChanpinBos.length <= 1) {
        ElMessage({ message: '至少保留一个产品信息', type: 'warning' });
        return;
    }
    form.value.opsCaigouPlanChanpinBos.splice(index, 1);
};

// 重置新建采购申请表单
const resetNewProcurementForm = () => {
    form.value.jihuaName = '';
    form.value.hetonName = '';
    form.value.hetonType = '';
    form.value.caigouType = '';
    form.value.cangkuUrl = '';
    form.value.danwei = '';
    form.value.chuhuoTime = '';
    form.value.fukuantiaojian = '';
    form.value.fapiaoKjfs = '';
    form.value.opsCaigouPlanChanpinBos = [{
        chanpinName: '',
        chanpinType: '',
        chanpinMonovalent: '',
        goumaiNumber: '',
        danwei: '',
        totalPrice: ''
    }];
    form.value.opsCaigouPlanFilesBos = [];
};

// 取消新建采购申请
const cancelNewProcurement = () => {
    // 检查是否有未保存的内容
    const hasContent = Object.values(form.value).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 (!form.value.jihuaName.trim()) {
        ElMessage({ message: '请填写计划名称', type: 'error' });
        return false;
    }

    // 检查已填写的产品信息的有效性
    for (let i = 0; i < form.value.opsCaigouPlanChanpinBos.length; i++) {
        const product = form.value.opsCaigouPlanChanpinBos[i];
        if (product.chanpinName && !product.chanpinType) {
            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 = async () => {
    // 验证草稿
    if (!validateDraft()) {
        return;
    }

    buttonLoading.value = true; // 显示按钮加载状态
    try {
        // 使用pinia store保存草稿
        const draftStore = useProcurementDraftStore();
        const savedDraft = draftStore.saveDraft(form.value.jihuaName, form.value);

        console.log('保存草稿:', {
            draftNumber: savedDraft.draftNumber,
            saveTime: savedDraft.saveTime,
            content: savedDraft.content
        });

        ElMessage({ message: `草稿已成功保存（编号：${savedDraft.draftNumber}），您可以在草稿箱中查看`, type: 'success' });
    } catch (error) {
        console.error('保存草稿失败:', error);
        ElMessage({ 
            message: '保存草稿失败，请重试', 
            type: 'error'
        });
    } finally {
        buttonLoading.value = false; // 无论成功失败，都关闭加载状态
    }
};

// 表单校验函数
const validateForm = () => {
    // 基础信息校验
    if (!form.value.jihuaName.trim()) {
        ElMessage({ message: '请填写计划名称', type: 'error' });
        return false;
    }

    if (!form.value.hetonName.trim()) {
        ElMessage({ message: '请填写合同名称', type: 'error' });
        return false;
    }

    if (!form.value.hetonType) {
        ElMessage({ message: '请选择合同类型', type: 'error' });
        return false;
    }

    if (!form.value.caigouType) {
        ElMessage({ message: '请选择采购类型', type: 'error' });
        return false;
    }

    if (!form.value.cangkuUrl) {
        ElMessage({ message: '请选择仓库地址', type: 'error' });
        return false;
    }

    if (!form.value.danwei) {
        ElMessage({ message: '请选择供应商单位', type: 'error' });
        return false;
    }

    // 产品信息校验
    const hasValidProduct = form.value.opsCaigouPlanChanpinBos.some(product => {
        return product.chanpinName &&
            product.chanpinType &&
            product.chanpinMonovalent && parseFloat(product.chanpinMonovalent) > 0 &&
            product.goumaiNumber && parseInt(product.goumaiNumber) > 0 &&
            product.danwei;
    });

    if (!hasValidProduct) {
        ElMessage({ message: '请至少填写一个有效的产品信息', type: 'error' });
        return false;
    }

    // 检查每个产品的有效性
    for (let i = 0; i < form.value.opsCaigouPlanChanpinBos.length; i++) {
        const product = form.value.opsCaigouPlanChanpinBos[i];
        if (product.chanpinName || product.chanpinType || product.chanpinMonovalent || product.goumaiNumber) {
            if (!product.chanpinName) {
                ElMessage({ message: `第${i + 1}行产品：请填写产品名称`, type: 'error' });
                return false;
            }
            if (!product.chanpinType) {
                ElMessage({ message: `第${i + 1}行产品：请填写产品型号`, type: 'error' });
                return false;
            }
            if (!product.chanpinMonovalent) {
                ElMessage({ message: `第${i + 1}行产品：请填写产品单价`, type: 'error' });
                return false;
            }
            if (parseFloat(product.chanpinMonovalent) <= 0) {
                ElMessage({ message: `第${i + 1}行产品：产品单价必须大于0`, type: 'error' });
                return false;
            }
            if (!product.goumaiNumber) {
                ElMessage({ message: `第${i + 1}行产品：请填写购买数量`, type: 'error' });
                return false;
            }
            if (parseInt(product.goumaiNumber) <= 0) {
                ElMessage({ message: `第${i + 1}行产品：购买数量必须大于0`, type: 'error' });
                return false;
            }
            if (!product.danwei) {
                ElMessage({ message: `第${i + 1}行产品：请填写单位`, type: 'error' });
                return false;
            }
        }
    }

    return true;
};

// 提交申请
const submitProcurement = async () => {
    // 在提交前，为所有产品行重新计算并保存总价
    form.value.opsCaigouPlanChanpinBos.forEach(product => {
        calculateTotalPrice(product);
    });

    // 表单验证
    if (!validateForm()) {
        return;
    }

    try {
        // 确认提交
        await ElMessageBox.confirm(
            '确定要提交采购申请单吗？提交后将进入审批流程，不可撤销。', 
            '确认提交', 
            {
                confirmButtonText: '确认提交',
                cancelButtonText: '取消',
                type: 'warning'
            }
        );

        // 调用提交函数
        await addCaigouPlans();

    } catch (error) {
        // 处理用户取消或其他错误
        if (error !== 'cancel') {
            console.error('提交采购申请单时发生错误:', error);
            ElMessage({ message: '提交过程中发生错误，请重试', type: 'error' });
        }
    }
}
    // });

// 处理文件上传完成后获取完整文件列表
const handleUpdateFileList = (fileList) => {
    form.value.opsCaigouPlanFilesBos = fileList.map(file => ({
        fileId: file.ossId,
        fileName: file.name,
        fileUrl: file.url,
    }));
};
</script>