new_huozhou_frontend/src/views/projectLib/projectContract/DetailTable.vue

<template>
    <!-- 自定义表单 -->
    <BasicModal v-bind="$attrs" @register="registerModal" title="项目合同信息详情" width="1200px" :showOkBtn="false"
        :showCancelBtn="false">
        <el-divider content-position="left">项目信息</el-divider>
        <BasicForm @register="registerMoneyForm" />
        <el-divider content-position="left">合同信息</el-divider>
        <BasicForm @register="registerContractForm" />
        <el-divider content-position="left">合同文件</el-divider>
        <UploadfileDetail :projectid="projectid" :stage="4" />
    </BasicModal>
</template>
<script lang="ts" name="addAndModify" setup>
import { ref, reactive, onMounted } from 'vue'
import { useForm, BasicForm } from '@/components/Form';
import { contractformSchemas, MoneyFormSchemas } from './projectContract.data';
import { getContractinfoByProjectId } from './projectContract.api';
import { queryProjectInfoById } from '@/views/projectLib/projectInfo/projectInfo.api'
import { useModalInner, BasicModal } from '@/components/Modal';
import { FormSchema } from '@/components/Form';
import UploadfileDetail from "@/views/ProcessApprovalSubPage/component/UploadfileDetail.vue"
import { cloneDeep } from 'lodash-es';

const [registerModal, { closeModal }] = useModalInner(init);


let fileList = reactive<Array<any>>([]);
let projectid = ref()
let payNum = ref(1)
let resMoney = ref()
let tempSchemas = cloneDeep(contractformSchemas) as Array<FormSchema>
const emit = defineEmits(['close']);

async function init(data) {
    payNum.value = 1
    tempSchemas = cloneDeep(contractformSchemas) as Array<FormSchema>
    console.log("datadatadata", data, tempSchemas)
    projectid.value = data.projectid
    let parammoney: any = {
        projectid: data.projectid
    }
    resMoney.value = await queryProjectInfoById(parammoney)
    setFieldsValueMoneyForm(resMoney.value)
    fileList.pop()
    let param: any = {
        projectid: data.projectid
    }
    let res = await getContractinfoByProjectId(param) as Array<any>
    let obj = new Object()
    //记录一共有几次支付
    let num = res.length
    //把数组变成对象
    for (let i = 1; i <= num; i++) {

        if (i == 1) {
            obj = res[i - 1]
        } else {
            Object.keys(res[i - 1]).forEach(key => {
                obj[key + i] = res[i - 1][key]
            })
        }
    }

    if (num > 1) {
        payNum.value = num
        for (let i = 2; i <= num; i++) {
            contractformSchemas.forEach(item => {
                let tempitem = cloneDeep(item)
                if (tempitem.field == "payDate") {
                    tempitem.label = "第" + i + "次支付"
                }
                if (tempitem.field == "totalMoney") {
                    tempitem.label = "第" + i + "支付总金额"
                }
                tempitem.field = tempitem.field + i
                tempSchemas.push(tempitem)
            })
        }
        resetSchema(tempSchemas)
    }
    console.log("结果是", res, obj)
    obj["id"] = data.projectid
    setFieldsValue(obj)
}
onMounted(async () => {

})

//项目金额相关信息
const [registerMoneyForm, { setFieldsValue: setFieldsValueMoneyForm }] = useForm({
    //注册表单列
    schemas: MoneyFormSchemas,
    showActionButtonGroup: false,
    //回车提交
    // autoSubmitOnEnter: true,
    // //不显示重置按钮
    // showResetButton: false,
    //自定义提交按钮文本和图标
    // submitButtonOptions: { text: '提交', preIcon: '' },
    //查询列占比 24代表一行 取值范围 0-24
    // actionColOptions: { span: 17 },
    disabled: true,
    size: "small",
    // labelCol: { style: { width: '120px' } },
    wrapperCol: { style: { width: 'auto' } },
});



//项目入库详情
const [registerContractForm, { setFieldsValue: setFieldsValue, resetSchema }] = useForm({
    //注册表单列
    schemas: contractformSchemas,
    showActionButtonGroup: false,
    //回车提交
    // autoSubmitOnEnter: true,
    // //不显示重置按钮
    // showResetButton: false,
    //自定义提交按钮文本和图标
    // submitButtonOptions: { text: '提交', preIcon: '' },
    //查询列占比 24代表一行 取值范围 0-24
    // actionColOptions: { span: 17 },
    size: 'small',
    disabled: true,
    // labelCol: { style: { width: '120px' } },
    wrapperCol: { style: { width: 'auto' } },
});

function dialogVisible() {
    closeModal()
    emit("close")
}


</script>
<style scoped></style>