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);">
                                {{ pendingCount }}
                            </div>
                        </div>
                        <div class="item">
                            <div class="text">
                                已批准计划
                            </div>
                            <div class="count" style="color: rgba(67, 101, 220, 1);">
                                {{ approvedCount }}
                            </div>
                        </div>
                        <div class="item">
                            <div class="text">
                                采购中计划
                            </div>
                            <div class="count" style="color: rgba(113, 214, 213, 1);">
                                {{ purchasingCount }}
                            </div>
                        </div>
                        <div class="item">
                            <div class="text">
                                已完成计划
                            </div>
                            <div class="count" style="color: rgba(0, 184, 122, 1);">
                                {{ completedCount }}
                            </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);">
                               {{ yearlyAmount.shijiJine }}
                            </div>
                        </div>
                        <div class="item">
                            <div class="text">
                                本年度采购预算金额
                            </div>
                            <div class="count" style="color: rgba(67, 101, 220, 1);">
                               {{ yearlyAmount.yujiJine }}
                            </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="handleAdd">新建采购申请单</el-button>
                        </div>

                        <!-- 标签页导航 -->
                        <div class="tabs">
                            <el-badge :value="total" type="success">
                                <el-button :type="activeTab === 'all' ? 'primary' : ''"
                                    @click="changeTab('all')">全部</el-button>
                            </el-badge>
                            <el-badge :value="pendingCount" type="warning">
                                <el-button :type="activeTab === '3' ? 'primary' : ''"
                                    @click="changeTab('3')">待审批</el-button>
                            </el-badge>
                            <el-badge :value="purchasingCount" type="primary">
                                <el-button :type="activeTab === '5' ? 'primary' : ''"
                                    @click="changeTab('5')">采购中</el-button>
                            </el-badge>
                            <el-badge :value="rejectedCount" type="danger">
                                <el-button :type="activeTab === '7' ? 'primary' : ''"
                                    @click="changeTab('7')">
                                    未通过
                                </el-button>
                            </el-badge>
                            <el-badge :value="approvedCount" type="success">
                                <el-button :type="activeTab === '9' ? 'primary' : ''"
                                    @click="changeTab('9')">已通过</el-button>
                            </el-badge>
                            <el-badge :value="completedCount" type="success">
                                <el-button :type="activeTab === '11' ? 'primary' : ''"
                                    @click="changeTab('11')">已完成</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" align="center">
                                <template #default="scope">
                                    <el-button type="text" @click="handleView(scope.row)">查看</el-button>
                                    <el-button type="text" @click="handleUpdate(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="isDialogVisible" :title="dialogTitle" 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="8">
                            <el-form-item label="计划名称">
                                <el-input v-model="form.jihuaName" placeholder="请填写计划名称" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="合同名称">
                                <el-input v-model="form.hetonName" placeholder="请填写合同名称" />
                            </el-form-item>
                        </el-col>
                        <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-row>
                    <!-- 下拉框行 -->
                    <el-row :gutter="20">
                        <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>
                    <el-row :gutter="20">
                        <el-col :span="24">
                            <el-form-item label="申请原因">
                                <el-input v-model="form.reason" placeholder="请输入申请原因" type="textarea" />
                            </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.gonyingshangId" placeholder="请选择">
                                    <el-option v-for="option in supplierList" :key="option.id" :label="option.supplierName"
                                        :value="option.id" />
                                </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)" min="0" />
                            </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)" min="0" />
                            </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="yontu" label="用途(简要描述)">
                            <template #default="scope">
                                <el-input v-model="scope.row.yontu" 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>
                    <!-- 附件 -->
                    <!-- <el-table :data="form.opsCaigouPlanFilesBos || []" border v-if="currentOperation === 'update'">
                        <el-table-column prop="fileName" label="文件名" align="center" />
                        <el-table-column label="文件类型" align="center">
                            <template #default="scope">
                                {{ getFileType(scope.row.fileName) }}
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" align="center">
                            <template #default="scope">
                                <el-button type="text" @click="handlePreview(scope.row)">
                                    预览
                                </el-button>
                                <el-button type="text" @click="handleDelete(scope.row)">
                                    删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table> -->

                    <file-upload ref="fileUploadRef" :isDrag="true" v-model="form.opsCaigouPlanFilesBos"
                        :is-show-tip="false"
                        :file-type="['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt', 'pdf', 'png', 'jpg', 'jpeg']" />
                </div>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="cancelOperation">取消</el-button>
                    <el-button v-if="currentOperation !== 'update'" @click="saveDraft" :loading="buttonLoading">保存草稿</el-button>
                    <el-button type="primary" @click="getSubmitFunction()" :loading="buttonLoading">
                        {{ currentOperation === 'add' ? '提交申请' : '更新' }}
                    </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, getCurrentInstance, onUnmounted } 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, caigouPlanDetail, updateCaigouPlan,getCount } from '@/api/wuziguanli/caigouPlan';
import { CaigouPlanVO, CaigouPlanQuery, CaigouPlanForm } from '@/api/wuziguanli/caigouPlan/types';

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

import FileUpload from '@/components/FileUpload/index.vue';


// 导入用户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 fileUploadRef = ref<InstanceType<typeof FileUpload>>();

// 标签页状态变量
const activeTab = ref('all');

// 各状态数量变量
const pendingCount = ref(0);
const purchasingCount = ref(0);
const rejectedCount = ref(0);
const approvedCount = ref(0);
const completedCount = ref(0);

// 标签页切换函数
const changeTab = (tab: string) => {
  activeTab.value = tab;
  // 重置页码
  queryParams.value.pageNum = 1;
  // 重新获取列表数据
  getList();
};

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: undefined,
    chuhuoTime: undefined,
    fukuantiaojian: undefined,
    fapiaoKjfs: undefined,
    status: undefined,
    shenheStatus: undefined,
    yujiJine: undefined,
    shijiJine: undefined,
    opsCaigouPlanFilesBos: undefined,
    opsCaigouPlanChanpinBos: [
        {
            chanpinName: '',
            chanpinType: '',
            chanpinMonovalent: 0,
            goumaiNumber: 0,
            danwei: '',
            yontu: '',
            totalPrice: 0
        }
    ],
    reason: undefined,
}
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: undefined,
        chuhuoTime: undefined,
        fukuantiaojian: undefined,
        fapiaoKjfs: undefined,
        status: undefined,
        shenheStatus: undefined,
        yujiJine: undefined,
        shijiJine: undefined,
        reason: undefined,
        opsCaigouPlanChanpinBos: [
            {
                chanpinName: '',
                chanpinType: '',
                chanpinMonovalent: 0,
                goumaiNumber: 0,
                danwei: '',
                yontu: '',
                totalPrice: 0
            }
        ],
        opsCaigouPlanFilesBos: undefined,
        params: {
        }
    },
    rules: {}
});

const { queryParams, form, rules } = toRefs(data);


// 查询运维-物资-采购计划单年度金额
const yearlyAmount=ref({
    yujiJine: 0,
    shijiJine: 0,
})
const getYearlyAmount = async () => {
    try {
        const res = await getCount(queryParams.value.projectId);
        if (res.code === 200) {
            yearlyAmount.value.shijiJine = res.data.shijiJine;
            yearlyAmount.value.yujiJine = res.data.yujiJine;
        }
    } catch (error) {
        ElMessage({ message: '获取年度金额失败，请重试', type: 'error' });
    }
}
/** 查询运维-物资-采购计划单列表 */
const getList = async () => {
    loading.value = true;
    
    // 创建查询参数的副本，避免直接修改原参数
    const queryParamsCopy = { ...queryParams.value };
    
    // 根据当前选中的标签页设置状态过滤条件
    if (activeTab.value !== 'all') {
        queryParamsCopy.status = activeTab.value;
    } else {
        // 如果是'全部'标签页，不设置状态过滤条件
        queryParamsCopy.status = undefined;
    }
    
    try {
        // 先查询所有数据来统计各状态数量
        const allDataRes = await listCaigouPlan({ ...queryParamsCopy, status: undefined });
        
        // 统计各状态数量
        pendingCount.value = allDataRes.rows.filter(item => item.status === '3').length;
        purchasingCount.value = allDataRes.rows.filter(item => item.status === '5').length;
        rejectedCount.value = allDataRes.rows.filter(item => item.status === '7').length;
        approvedCount.value = allDataRes.rows.filter(item => item.status === '9').length;
        completedCount.value = allDataRes.rows.filter(item => item.status === '11').length;
        total.value = allDataRes.total;
        
        // 然后查询当前标签页的数据
        const filteredRes = await listCaigouPlan(queryParamsCopy);
        caigouPlanList.value = filteredRes.rows;
        
    } catch (error) {
        ElMessage({ message: '获取数据失败，请重试', type: 'error' });
    } finally {
        loading.value = false;
    }
}
// 新增采购计划单提交函数
const addCaigouPlanSubmit = async () => {
    buttonLoading.value = true; // 显示按钮加载状态
     const submitData = JSON.parse(JSON.stringify(form.value));
    // 转换文件列表格式为后端期望的格式：[{fileName, fileId, fileUrl}]
        if (submitData.opsCaigouPlanFilesBos && submitData.opsCaigouPlanFilesBos.length > 0) {
            submitData.opsCaigouPlanFilesBos = submitData.opsCaigouPlanFilesBos.map(file => ({
                fileName: file.name,
                fileId: file.ossId,
                fileUrl: file.url
            }));
        }
        
        const res = await addCaigouPlan(submitData);
    try {
        // 创建表单数据的深拷贝，避免直接修改原表单数据
        const submitData = JSON.parse(JSON.stringify(form.value));
        
        // 转换文件列表格式为后端期望的格式：[{fileName, fileId, fileUrl}]
        if (submitData.opsCaigouPlanFilesBos && submitData.opsCaigouPlanFilesBos.length > 0) {
            submitData.opsCaigouPlanFilesBos = submitData.opsCaigouPlanFilesBos.map(file => ({
                fileName: file.name,
                fileId: file.ossId,
                fileUrl: file.url
            }));
        }
        
        const res = await addCaigouPlan(submitData);

        if (res.code === 200) {
            ElMessage({ message: '采购申请单已成功提交，等待审批！', type: 'success' });
            
            // 提交成功后，删除相关的草稿
            const procurementDraftStore = useProcurementDraftStore();
            const draftList = procurementDraftStore.getDraftList();
            
            // 查找并删除与当前计划名称匹配的草稿
            if (form.value.jihuaName && draftList && draftList.length > 0) {
                const matchingDraft = draftList.find(draft => 
                    draft.name === form.value.jihuaName
                );
                
                if (matchingDraft) {
                    procurementDraftStore.deleteDraft(matchingDraft.id);
                }
            }
            // 刷新列表数据
            getList();
            // 关闭对话框并重置表单
            resetNewProcurementForm();
            isDialogVisible.value = false;
        } else {
            // 显示详细的错误信息
            ElMessage({
                message: res.msg || '新增采购计划单失败，请重试',
                type: 'error'
            });
        }
    } catch (error) {
        ElMessage({ message: '操作失败', type: 'error' });
    } finally {
        buttonLoading.value = false; // 无论成功失败，都关闭加载状态
    }
}

// 更新采购计划单提交函数
const updateCaigouPlanSubmit = async () => {
    buttonLoading.value = true; // 显示按钮加载状态
    try {
        // 创建表单数据的深拷贝，避免直接修改原表单数据
        const submitData = JSON.parse(JSON.stringify(form.value));
        const res = await updateCaigouPlan(submitData);
        if (res.code === 200) {
            ElMessage({ message: '采购申请单已成功更新！', type: 'success' });
            // 刷新列表数据
            getList();
            // 关闭对话框并重置表单
            resetNewProcurementForm();
            isDialogVisible.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.data;
    

}
// 获取文件类型（后缀名）
const getFileType = (fileName: string): string => {
    if (!fileName) return '';
    const lastDotIndex = fileName.lastIndexOf('.');
    if (lastDotIndex === -1) return '';
    return fileName.substring(lastDotIndex + 1).toLowerCase();
};

// 预览文件
const handlePreview = (file) => {
    // 实际场景可在这里处理文件预览逻辑，如打开新窗口等
    window.open(file.fileUrl, '_blank');
};
// 删除文件
const handleDelete = (file) => {
    // 这里简单地从表格数据中移除该文件
    form.value.opsCaigouPlanFilesBos = form.value.opsCaigouPlanFilesBos.filter(f => f !== file);
};

onMounted(() => {
    getList();
    getSupplierLists();
    getYearlyAmount();
});
// 监听用户选择的项目变化
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 isDialogVisible = ref(false);
// 当前操作类型：'add' 或 'update'
const currentOperation = ref('add');
// 对话框标题
const dialogTitle = computed(() => {
    return currentOperation.value === 'add' ? '新建采购申请单' : '编辑采购申请单';
});

// 跳转查看
const handleView = (row) => {
    router.push({
        path: '/materialManagement/planDetails',
        query: {
            id: row.id
        }
    });
};

// 处理新增
const handleAdd = async () => {
    currentOperation.value = 'add';
    resetNewProcurementForm();
    
    // 检查是否有保存的草稿
    const procurementDraftStore = useProcurementDraftStore();
    const draftList = procurementDraftStore.getDraftList();
    
    if (draftList && draftList.length > 0) {
        try {
            // 提示用户是否恢复上次保存的草稿
            await ElMessageBox.confirm(
                '检测到您有未提交的草稿，是否恢复？',
                '恢复草稿',
                {
                    confirmButtonText: '恢复',
                    cancelButtonText: '不恢复',
                    type: 'info'
                }
            );
            
            // 获取最新的草稿并恢复
            const latestDraft = draftList[0]; // 假设列表是按创建时间降序排列的
            const draftData = procurementDraftStore.getDraft(latestDraft.id);
            
            if (draftData) {
                form.value = JSON.parse(JSON.stringify(draftData.content));
                // 确保产品列表和附件列表有默认值
                if (!form.value.opsCaigouPlanChanpinBos || form.value.opsCaigouPlanChanpinBos.length === 0) {
                    form.value.opsCaigouPlanChanpinBos = [{chanpinName: '',chanpinType: '',chanpinMonovalent: '',goumaiNumber: '',danwei: '',yontu: '',totalPrice: ''}];
                }
                if (!form.value.opsCaigouPlanFilesBos) {
                    form.value.opsCaigouPlanFilesBos = [];
                }
            }
        } catch (error) {
            // 用户选择不恢复草稿，继续使用空表单
            if (error !== 'cancel') {
                console.error('恢复草稿时发生错误:', error);
            }
        }
    }
    
    isDialogVisible.value = true;
};

// 根据操作类型获取对应的提交函数
const getSubmitFunction = computed(() => {
    return currentOperation.value === 'add' ? submitAddProcurement : submitUpdateProcurement;
});

// 处理编辑
const handleUpdate = async (row) => {
    currentOperation.value = 'update';
    buttonLoading.value = true;
    try {
        // 获取采购计划详情
        const res = await caigouPlanDetail(row.id);
        if (res.code === 200) {
            // 深拷贝数据，避免直接修改原始数据
            form.value = JSON.parse(JSON.stringify(res.data));
            // 将数据字段从Vos后缀改为Bos后缀
            if (form.value.opsCaigouPlanChanpinVos) {
                form.value.opsCaigouPlanChanpinBos = form.value.opsCaigouPlanChanpinVos;
                delete form.value.opsCaigouPlanChanpinVos;
            }
            if (form.value.opsCaigouPlanFilesVos) {
                // 转换文件数据格式为FileUpload组件期望的格式
                form.value.opsCaigouPlanFilesBos = form.value.opsCaigouPlanFilesVos.map(file => ({
                    ossId: file.fileId,
                    name: file.fileName,
                    url: file.fileUrl
                }));
                delete form.value.opsCaigouPlanFilesVos;
            }
            // 确保产品列表和附件列表有默认值
            if (!form.value.opsCaigouPlanChanpinBos || form.value.opsCaigouPlanChanpinBos.length === 0) {
                form.value.opsCaigouPlanChanpinBos = [{
                    chanpinName: '',
                    chanpinType: '',
                    chanpinMonovalent: 0,
                    goumaiNumber: 0,
                    danwei: '',
                    yontu: '',
                    totalPrice: 0
                }];
            }
            if (!form.value.opsCaigouPlanFilesBos || form.value.opsCaigouPlanFilesBos.length === 0) {
                form.value.opsCaigouPlanFilesBos = [];
            }
            // 显示对话框
            isDialogVisible.value = true;
        } else {
            ElMessage({ message: res.msg || '获取采购计划详情失败', type: 'error' });
        }
    } catch (error) {
        ElMessage({ message: '获取采购计划详情失败', type: 'error' });
    } finally {
        buttonLoading.value = false;
    }
};
// 计算产品总价
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.gonyingshangId = '';
    form.value.gonyingshangName = '';
    form.value.reason = '';
    form.value.opsCaigouPlanChanpinBos = [{
        chanpinName: '',
        chanpinType: '',
        chanpinMonovalent: '',
        goumaiNumber: '',
        danwei: '',
        yontu: '',
        totalPrice: ''
    }];
    form.value.opsCaigouPlanFilesBos = [];
    // 清空文件上传组件中的文件列表
    if (fileUploadRef.value) {
        fileUploadRef.value.clearAllFiles();
    }
};

// 表单校验函数
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.gonyingshangId) {
        ElMessage({ message: '请选择供应商单位', type: 'error' });
        return false;
    }
    if (!form.value.reason) {
        ElMessage({ message: '请填写申请原因', type: 'error' });
        return false;
    }
    // 附件校验
    if (!form.value.opsCaigouPlanFilesBos || form.value.opsCaigouPlanFilesBos.length === 0) {
        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 &&
            product.yontu;
    });

    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;
            }
            if (!product.yontu) {
                ElMessage({ message: `第${i + 1}行产品：请填写用途`, type: 'error' });
                return false;
            }

        }
    }

    return true;
};

// 新增申请提交
const submitAddProcurement = async () => {
    // 在提交前，为所有产品行重新计算并保存总价
    form.value.opsCaigouPlanChanpinBos.forEach(product => {
        calculateTotalPrice(product);
    });
    // 表单验证
    if (!validateForm()) {
        return;
    }
    try {
        // 确认提交
        await ElMessageBox.confirm(
            '确定要提交采购申请单吗？提交后将进入审批流程，不可撤销。',
            '确认操作',
            {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning'
            }
        );
        // 调用新增提交函数
        await addCaigouPlanSubmit();
    } catch (error) {
        // 处理用户取消或其他错误
        if (error !== 'cancel') {
            ElMessage({ message: '提交过程中发生错误，请重试', type: 'error' });
        }
    }
}

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

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

    try {
        // 确认提交
        await ElMessageBox.confirm(
            '确定要更新采购申请单吗？',
            '确认操作',
            {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning'
            }
        );

        // 调用更新提交函数
        await updateCaigouPlanSubmit();

    } catch (error) {
        // 处理用户取消或其他错误
        if (error !== 'cancel') {
            ElMessage({ message: '更新过程中发生错误，请重试', type: 'error' });
        }
    }
}



// 检查表单是否有内容
const hasFormContent = () => {
    // 检查基础信息字段
    if (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.reason) {
        return true;
    }
    
    // 检查产品信息
    if (form.value.opsCaigouPlanChanpinBos) {
        for (const product of form.value.opsCaigouPlanChanpinBos) {
            if (product.chanpinName || 
                product.chanpinType || 
                product.chanpinMonovalent || 
                product.goumaiNumber || 
                product.danwei || 
                product.yontu) {
                return true;
            }
        }
    }
    
    // 检查附件
    if (form.value.opsCaigouPlanFilesBos && form.value.opsCaigouPlanFilesBos.length > 0) {
        return true;
    }
    
    return false;
};

// 取消操作
const cancelOperation = async () => {
    // 检查是否有表单内容
    if (hasFormContent()) {
        try {
            // 提示用户确认是否放弃编辑
            await ElMessageBox.confirm(
                '您有未保存的内容，确定要取消吗？',
                '确认取消',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }
            );
            // 重置表单
            resetNewProcurementForm();
            // 关闭对话框
            isDialogVisible.value = false;
        } catch (error) {
            // 用户取消了确认操作
            if (error !== 'cancel') {
                console.error('取消操作时发生错误:', error);
            }
            // 不执行任何操作，保持对话框打开
        }
    } else {
        // 没有表单内容，直接关闭对话框并重置
        resetNewProcurementForm();
        isDialogVisible.value = false;
    }
};

// 保存草稿
const saveDraft = async () => {
    buttonLoading.value = true;
    try {
        // 检查是否有计划名称
        if (!form.value.jihuaName || !form.value.jihuaName.trim()) {
            ElMessage({ message: '请填写计划名称后再保存草稿', type: 'warning' });
            return;
        }
        
        // 获取草稿存储
        const procurementDraftStore = useProcurementDraftStore();
        
        // 保存草稿到pinia存储
        const savedDraft = procurementDraftStore.saveDraft(form.value.jihuaName, form.value);
        
        // 显示成功消息
        ElMessage({ message: '草稿保存成功', type: 'success' });
        
        // 关闭对话框
        isDialogVisible.value = false;
    } catch (error) {
        ElMessage({ message: '草稿保存失败，请重试', type: 'error' });
    } finally {
        buttonLoading.value = false;
    }
};

// 组件卸载时清除草稿
onUnmounted(() => {
    try {
        // 获取草稿存储
        const procurementDraftStore = useProcurementDraftStore();
        // 清除所有草稿
        procurementDraftStore.clearAllDrafts();
    } catch (error) {
        console.error('组件卸载时清除草稿失败:', error);
        // 这里不显示错误消息，因为组件已经卸载
    }
});

</script>