engineering_admin/src/views/project_list/detail.vue

<template>
    <div class="detail-popup">
        <popup ref="popupRef" title="项目立项详情" :async="true" width="80vw" @confirm="handleSubmit" @close="handleClose">
            <el-form ref="formRef" :model="formData" label-width="auto">
                <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                    <el-tab-pane label="概况" name="demo-1">
                        <Overview :formData="formData" v-if="activeName == 'demo-1'"></Overview>
                    </el-tab-pane>

                    <el-tab-pane label="商机" name="demo-2">
                        <Business v-if="activeName == 'demo-2'" :project_id="project_id"></Business>
                    </el-tab-pane>

                    <el-tab-pane label="投标" name="demo-3">
                        <tender v-if="activeName == 'demo-3'" :project_id="project_id"></tender>
                    </el-tab-pane>

                    <el-tab-pane label="合同" name="demo-4">
                        <contract v-if="activeName == 'demo-4'" :project_id="project_id"></contract>
                    </el-tab-pane>

                    <el-tab-pane label="预算" name="demo-5">
                        <budget v-if="activeName == 'demo-5'" :project_id="project_id"></budget>
                    </el-tab-pane>

                    <el-tab-pane label="采购" name="demo-8">
                        <procurement v-if="activeName == 'demo-8'" :project_id="project_id"></procurement>
                    </el-tab-pane>

                    <el-tab-pane label="分包" name="demo-9">
                        <subcontract v-if="activeName == 'demo-9'" :project_id="project_id"></subcontract>
                    </el-tab-pane>

                    <el-tab-pane label="人力" name="demo-12">
                        <manpower v-if="activeName == 'demo-12'" :project_id="project_id"></manpower>
                    </el-tab-pane>

                    <el-tab-pane label="收款" name="demo-14">
                        <Collection v-if="activeName == 'demo-14'" :project_id="project_id"></Collection>
                    </el-tab-pane>

                    <el-tab-pane label="付款" name="demo-15">
                        <payment v-if="activeName == 'demo-15'" :project_id="project_id"></payment>
                    </el-tab-pane>

                    <el-tab-pane label="文档" name="demo-16">
                        <documentation v-if="activeName == 'demo-16'" :project_id="project_id"></documentation>
                    </el-tab-pane>

                    <el-tab-pane label="费用" name="demo-17">
                        <expenses v-if="activeName == 'demo-17'" :project_id="project_id"></expenses>
                    </el-tab-pane>



                </el-tabs>
            </el-form>
        </popup>
    </div>
</template>

<script lang="ts" setup name="customdetail">

import type { FormInstance } from 'element-plus'
import Popup from '@/components/popup/index.vue'
import { apiCustomDetail } from '@/api/custom'
import { timeFormat } from '@/utils/util'
import type { PropType } from 'vue'
import type { TabsPaneContext } from 'element-plus'
import { apiCustomerDemandLists } from '@/api/customer_demand'
import { apiProjectFollowUpLists } from '@/api/project_follow_up'
import { apiCustomerDemandSolutionLists } from '@/api/customer_demand_solution'
import { apiProjectEstimateLists } from '@/api/project_estimate'
import { apiCompetitorLists } from '@/api/competitor'
import { apiCustomServiceLists } from '@/api/custom_service'
import { subpackagdetailLists } from '@/api/project_subpackage_budget_detail'
import Overview from "./components/Overview.vue"
import Business from "./components/Business.vue"
import tender from "./components/tender.vue"
import contract from "./components/contract.vue"
import budget from "./components/budget.vue"
import procurement from "./components/procurement.vue"
import subcontract from "./components/subcontract.vue"
import manpower from "./components/manpower.vue"
import Collection from "./components/Collection.vue"
import payment from "./components/payment.vue"
import documentation from "./components/documentation.vue"
import expenses from "./components/expenses.vue"
// import manpower from "./components/manpower.vue"




const active = ref('first-1')
const activeName = ref('demo-1')
const handleClick = (tab: TabsPaneContext, event: Event) => {
    // console.log(tab, event)
}
defineProps({
    dictData: {
        type: Object as PropType<Record<string, any[]>>,
        default: () => ({})
    }
})
const emit = defineEmits(['success', 'close'])
const formRef = shallowRef<FormInstance>()
const popupRef = shallowRef<InstanceType<typeof Popup>>()
const formDataannex = reactive([])
const datas = reactive({
    provinceOptions: [],
    cityOptions: [],
    areaOptions: [],
});



const pager12 = reactive({
    page_size: 10,
    page_no: 1,
    project_id: ""
})
const pager13 = reactive({
    page_size: 10,
    page_no: 1,
    project_id: ""
})
const pager14 = reactive({
    page_size: 10,
    page_no: 1,
    project_id: ""
})

const pager15 = reactive({
    page_size: 10,
    page_no: 1,
    project_id: ""
})
const pager16 = reactive({
    page_size: 10,
    page_no: 1,
    project_id: ""
})

const pager17 = reactive({
    page_size: 10,
    page_no: 1,
    project_id: ""
})
const pager18 = reactive({
    page_size: 10,
    page_no: 1,
    project_id: ""
})



const pager21 = reactive({
    page_size: 10,
    page_no: 1,
    project_id: ""
})


const pager22 = reactive({
    page_size: 10,
    page_no: 1,
    project_id: ""
})


const pager23 = reactive({
    page_size: 10,
    page_no: 1,
    project_id: ""
})


const pager24 = reactive({
    page_size: 10,
    page_no: 1,
    project_id: ""
})
const pager25 = reactive({
    page_size: 10,
    page_no: 1,
    project_id: ""
})
const pager26 = reactive({
    page_size: 10,
    page_no: 1,
    project_id: ""
})
const pager27 = reactive({
    page_size: 10,
    page_no: 1,
    project_id: ""
})
const pager28 = reactive({
    page_size: 10,
    page_no: 1,
    project_id: ""
})
const pager29 = reactive({
    page_size: 10,
    page_no: 1,
    project_id: ""
})
const pager30 = reactive({
    page_size: 10,
    page_no: 1,
    project_id: ""
})
const pager31 = reactive({
    page_size: 10,
    page_no: 1,
    project_id: ""
})
const pager32 = reactive({
    page_size: 10,
    page_no: 1,
    project_id: ""
})




const total12 = ref(0)
const total13 = ref(0)
const total14 = ref(0)
const total15 = ref(0)
const total16 = ref(0)
const total17 = ref(0)
const total18 = ref(0)

const total21 = ref(0)

const total22 = ref(0)
const total23 = ref(0)

const total24 = ref(0)

const total25 = ref(0)
const total26 = ref(0)
const total27 = ref(0)
const total28 = ref(0)
const total29 = ref(0)
const total30 = ref(0)
const total31 = ref(0)
const total32 = ref(0)
const total33 = ref(0)

const tableData12 = ref([])
const tableData13 = ref([])
const tableData15 = ref([])
const tableData16 = ref([])
const tableData17 = ref([])
const tableData18 = ref([])


const tableData21 = ref([])
const tableData22 = ref([])

const tableData23 = ref([])

const tableData24 = ref([])
const tableData25 = ref([])

const tableData26 = ref([])
const tableData27 = ref([])
const tableData28 = ref([])
const tableData29 = ref([])
const tableData30 = ref([])
const tableData31 = ref([])
const tableData32 = ref([])
// 表单数据
const formData = reactive({

})

//条数

const handleSizeChange7 = (val: number) => {

    pager7.page_size = val
    buydocumentLists()
}
const handleSizeChange8 = (val: number) => {

    pager8.page_size = val
    examinationLists()
}
const handleSizeChange9 = (val: number) => {

    pager9.page_size = val
    bidResultLists()
}
const handleSizeChange10 = (val: number) => {

    pager10.page_size = val
    applyLists()
}

const handleSizeChange11 = (val: number) => {

    pager11.page_size = val

    refundLists()
}

const handleSizeChange12 = (val: number) => {

    pager12.page_size = val

    personnelLists()
}

const handleSizeChange13 = (val: number) => {

    pager13.page_size = val

    laborcontractLists()
}

const handleSizeChange14 = (val: number) => {

    pager14.page_size = val

    insurancemanagementlists()
}


const handleSizeChange15 = (val: number) => {

    pager15.page_size = val

    attendanceRecord()
}

const handleSizeChange16 = (val: number) => {

    pager16.page_size = val

    attendancedetail()

}
const handleSizeChange17 = (val: number) => {

    pager16.page_size = val

    attendancedetail()

}


const handleSizeChange18 = (val: number) => {

    pager18.page_size = val

    customServiceLists()

}
const handleSizeChange19 = (val: number) => {

    pager19.page_size = val

    contractLists()
}

const handleSizeChange20 = (val: number) => {

    pager20.page_size = val
    contcractNegotiationLists()
}
const handleSizeChange21 = (val: number) => {

    pager21.page_size = val

    customServiceLists()
}

const handleSizeChange22 = (val: number) => {

    pager22.page_size = val

    customServiceLists()
}
const handleSizeChange23 = (val: number) => {

    pager23.page_size = val

    customServiceLists()
}

const handleSizeChange24 = (val: number) => {

    pager24.page_size = val

    customServiceLists()
}

const handleSizeChange25 = (val: number) => {

    pager25.page_size = val

    customServiceLists()
}

const handleSizeChange26 = (val: number) => {

    pager26.page_size = val

    customServiceLists()
}


const handleSizeChange27 = (val: number) => {

    pager27.page_size = val

    customServiceLists()
}


const handleSizeChange28 = (val: number) => {

    pager28.page_size = val

    customServiceLists()
}


const handleSizeChange29 = (val: number) => {

    pager29.page_size = val

    invoiceapplyLists()
}




const handleSizeChange30 = (val: number) => {

    pager30.page_size = val

    returnedLists()
}
const handleSizeChange31 = (val: number) => {

    pager30.page_size = val

    returnedrecordLists()
}
const handleSizeChange32 = (val: number) => {

    pager30.page_size = val
    refundapplyLists()
}



//分页

// const handleCurrentChange6 = (val: number) => {
//     pager6.page_no = val
//     console.log(`current page: ${val}`)
//     decisionLists()
// }
// const handleCurrentChange7 = (val: number) => {
//     pager7.page_no = val
//     console.log(`current page: ${val}`)
//     buydocumentLists()
// }
// const handleCurrentChange8 = (val: number) => {
//     pager8.page_no = val
//     console.log(`current page: ${val}`)
//     examinationLists()
// }
// const handleCurrentChange9 = (val: number) => {
//     pager9.page_no = val
//     console.log(`current page: ${val}`)
//     bidResultLists()
// }
// const handleCurrentChange10 = (val: number) => {
//     pager10.page_no = val
//     console.log(`current page: ${val}`)
//     applyLists()
// }
// const handleCurrentChange11 = (val: number) => {
//     pager11.page_no = val
//     console.log(`current page: ${val}`)

//     refundLists()
// }

const handleCurrentChange12 = (val: number) => {
    pager12.page_no = val
    console.log(`current page: ${val}`)
    personnelLists()
}
const handleCurrentChange13 = (val: number) => {
    pager13.page_no = val
    console.log(`current page: ${val}`)

    laborcontractLists()
}

const handleCurrentChange14 = (val: number) => {
    pager14.page_no = val
    console.log(`current page: ${val}`)

    insurancemanagementlists()
}

const handleCurrentChange15 = (val: number) => {
    pager15.page_no = val
    console.log(`current page: ${val}`)

    attendanceRecord()
}
const handleCurrentChange16 = (val: number) => {
    pager16.page_no = val
    console.log(`current page: ${val}`)

    attendancedetail()
}

const handleCurrentChange17 = (val: number) => {
    pager17.page_no = val
    console.log(`current page: ${val}`)

    salarypaymentLists()

}

const handleCurrentChange18 = (val: number) => {
    pager18.page_no = val
    console.log(`current page: ${val}`)

    customServiceLists()
}

const handleCurrentChange19 = (val: number) => {
    pager19.page_no = val
    console.log(`current page: ${val}`)

    contractLists()
}


const handleCurrentChange20 = (val: number) => {
    pager20.page_no = val
    console.log(`current page: ${val}`)

    contcractNegotiationLists()
}

const handleCurrentChange21 = (val: number) => {
    pager21.page_no = val
    console.log(`current page: ${val}`)

    customServiceLists()
}


const handleCurrentChange22 = (val: number) => {
    pager22.page_no = val
    console.log(`current page: ${val}`)

    customServiceLists()
}


const handleCurrentChange23 = (val: number) => {
    pager23.page_no = val
    console.log(`current page: ${val}`)

    customServiceLists()
}

const handleCurrentChange24 = (val: number) => {
    pager24.page_no = val
    console.log(`current page: ${val}`)

    customServiceLists()
}


const handleCurrentChange25 = (val: number) => {
    pager25.page_no = val
    console.log(`current page: ${val}`)

    customServiceLists()
}
const handleCurrentChange26 = (val: number) => {
    pager26.page_no = val
    console.log(`current page: ${val}`)

    customServiceLists()
}


const handleCurrentChange27 = (val: number) => {
    pager27.page_no = val
    console.log(`current page: ${val}`)

    customServiceLists()
}


const handleCurrentChange28 = (val: number) => {
    pager28.page_no = val
    console.log(`current page: ${val}`)

    customServiceLists()
}

const handleCurrentChange29 = (val: number) => {
    pager29.page_no = val
    console.log(`current page: ${val}`)
    invoiceapplyLists()
}


const handleCurrentChange30 = (val: number) => {
    pager30.page_no = val
    console.log(`current page: ${val}`)

    returnedLists()
}


const handleCurrentChange31 = (val: number) => {
    pager31.page_no = val
    console.log(`current page: ${val}`)

    returnedrecordLists()
}
const handleCurrentChange32 = (val: number) => {
    pager32.page_no = val
    console.log(`current page: ${val}`)

    refundapplyLists()
}






















//获取项目人员列表

const personnelLists = () => {
    projectpersonnelLists(pager12).then((res) => {
        tableData12.value = res.lists
        total11.value = res.count
    })
}


//获取保险管理列表

const insurancemanagementlists = () => {
    insurancemanagementLists(pager14).then((res) => {
        tableData14.value = res.lists
        total13.value = res.count
    })
}
//获取考勤记录列表

const attendanceRecord = () => {
    attendanceRecordLists(pager15).then((res) => {
        tableData15.value = res.lists
        total14.value = res.count
    })
}

//获取考勤明细列表

const attendancedetail = () => {
    attendancedetailLists(pager16).then((res) => {
        tableData16.value = res.lists
        total15.value = res.count
    })
}
//获取工资付款列表

const salarypaymentLists = () => {
    projectsalaryDetailLists(pager17).then((res) => {
        tableData17.value = res.lists
        total16.value = res.count
    })
}

//售后信息
const customServiceLists = () => {
    apiCustomServiceLists(pager18).then((res) => {
        tableData18.value = res.lists
        total17.value = res.count
    })
}


//获取分包预算列表
const subpackagList = () => {
    subpackagdetailLists(pager21).then((res) => {
        tableData21.value = res.lists
        total20.value = res.count
    })
}

// 获取收票记录列表
const financereceiptLists = () => {
    apifinancereceiptLists(pager22).then((res) => {
        tableData22.value = res.lists
        total21.value = res.count
    })
}

// 获取付款计划列表
const planLists = () => {
    paymentplanLists(pager23).then((res) => {
        tableData23.value = res.lists
        total22.value = res.count
    })
}

//获取付款记录
const payapplyLists = () => {
    paymentapplyLists(pager24).then((res) => {
        tableData24.value = res.lists
        total22.value = res.count
    })
}


//获取退款记录
const financerefundLists = () => {
    apiFinancerefundLists(pager25).then((res) => {
        tableData25.value = res.lists
        total24.value = res.count
    })
}

//获取采购合同

const procurementContractLists = () => {
    apiProcurementContractLists(pager26).then((res) => {
        tableData26.value = res.lists
        total25.value = res.count
    })
}
//获取分包合同
const subcontractingContractLists = () => {
    apiSubcontractingContractLists(pager27).then((res) => {
        tableData27.value = res.lists
        total26.value = res.count
    })
}

//获取分包合同洽商
const negotiationLists = () => {
    apinegotiationLists(pager28).then((res) => {
        tableData28.value = res.lists
        total27.value = res.count
    })
}

//获取开票申请
const invoiceapplyLists = () => {
    apiinvoiceapplyLists(pager29).then((res) => {
        tableData29.value = res.lists
        total28.value = res.count
    })
}

//获取回款计划
const returnedLists = () => {
    apireturnedLists(pager30).then((res) => {
        tableData30.value = res.lists
        total29.value = res.count
    })
}

//获取回款记录
const returnedrecordLists = () => {
    apireturnedrecordLists(pager31).then((res) => {
        tableData31.value = res.lists
        total30.value = res.count
    })
}

//获取退款申请
const refundapplyLists = () => {
    apirefundapplyLists(pager32).then((res) => {
        tableData32.value = res.lists
        total31.value = res.count
    })
}

const project_id = ref(0)


// 获取详情
const setFormData = async (data: Record<any, any>) => {



    // for (const key in formData) {
    //     if (data[key] != null && data[key] != undefined) {
    //         //@ts-ignore
    //         formData[key] = data[key]

    //     }

    // }
    project_id.value = data.id

    // pager11.project_id = data.id
    // pager11.project_id = data.id
    // pager12.project_id = data.id
    // pager13.project_id = data.id
    // pager14.project_id = data.id
    // pager15.project_id = data.id
    // pager16.project_id = data.id
    // pager17.project_id = data.id
    // pager18.project_id = data.id
    // pager19.project_id = data.id
    // pager20.project_id = data.id
    // pager21.project_id = data.id
    // pager22.project_id = data.id
    // pager23.project_id = data.id
    // pager24.project_id = data.id
    // pager20.project_id = data.id
    // pager25.project_id = data.id
    // pager26.project_id = data.id
    // pager27.project_id = data.id
    // pager28.project_id = data.id
    // pager29.project_id = data.id
    // pager30.project_id = data.id
    // pager31.project_id = data.id
    // pager32.project_id = data.id
    Object.assign(formData, data)

    // if (data.annex && data.annex.length > 0) {
    //     const arry1 = data.annex.map((item: any, index: any) => {
    //         return {
    //             name: `文件${index + 1}`,
    //             uri: item
    //         };
    //     });
    //     Object.assign(formDataannex, arry1)
    // }
    // followUpLists()
    // demandList()
    // // competitorLists()
    // solutionLists()
    // estimateLists()
    // decisionLists()
    // buydocumentLists()
    // examinationLists()
    // bidResultLists()
    // applyLists()
    // refundLists()
    // personnelLists()
    // laborcontractLists()
    // insurancemanagementlists()
    // attendanceRecord()
    // attendancedetail()
    // salarypaymentLists()
    // customServiceLists()
    // contractLists()
    // contcractNegotiationLists()
    // subpackagList()
    // financereceiptLists()
    // planLists()
    // payapplyLists()
    // financerefundLists()
    // procurementContractLists()
    // subcontractingContractLists()
    // negotiationLists()
    // invoiceapplyLists()
    // returnedLists()
    // returnedrecordLists()
    // refundapplyLists()
}

const getDetail = async (row: Record<string, any>) => {
    const data = await apiCustomDetail({
        id: formData.id
    })
    setFormData(data)
}


// 提交按钮
const handleSubmit = async () => {
    popupRef.value?.close()

}

//打开弹窗
const open = () => {
    popupRef.value?.open()
}

// 关闭回调
const handleClose = () => {
    emit('close')
}








defineExpose({
    open,
    setFormData,
    getDetail
})
</script>
<style lang="scss" scoped>
.tit {
    font-size: 1.2em;
    margin-bottom: 10px;
}
</style>