td_official/src/views/ctr/index.vue

<template>
    <div class="container">
        <el-steps style="max-width: 100%" :active="active" finish-status="success" align-center>
            <el-step title="选择合同类型" />
            <el-step title="录入合同内容" />
            <el-step title="录入收款方式" />
        </el-steps>
        <div class="content">
            <template v-if="active == 0">
                <div>
                    <el-button type="success" size="large" @click="checkContractType('income')">收入合同</el-button>
                    <el-button type="primary" size="large" @click="checkContractType('expenses')">支出合同</el-button>
                </div>

            </template>
            <template v-else-if="active == 1">
                <template v-if="contractType == 'income'">
                    <el-form ref="incomeContractFormRef" :model="form" :rules="rules" label-width="80px">
                        <el-form-item label="项目名称">
                            <el-input :model-value="projectName" placeholder="请输入项目ID" disabled />
                        </el-form-item>
                        <el-form-item label="合同编号" prop="contractCode">
                            <el-input v-model="form.contractCode" placeholder="请输入合同编号" />
                        </el-form-item>
                        <el-form-item label="业主单位" prop="contractOwner">
                            <el-input v-model="form.contractOwner" placeholder="请输入业主单位" />
                        </el-form-item>
                        <el-form-item label="承包内容">
                            <editor v-model="form.contractedContent" :min-height="192" />
                        </el-form-item>
                        <el-form-item label="合同金额" prop="amount">
                            <el-input v-model="form.amount" placeholder="请输入合同金额" />
                        </el-form-item>
                        <el-form-item label="备注" prop="remark">
                            <el-input v-model="form.remark" placeholder="请输入备注" />
                        </el-form-item>
                        <el-form-item label="附件">
                            <FileUpload :multiple="true" :fileType="['pdf']" :onUploadSuccess="onUploadSuccess"
                                :ref="fileRef" :defaultFileList="fileList" />
                        </el-form-item>
                    </el-form>
                </template>
                <template v-else-if="contractType == 'expenses'">
                    <el-form ref="expensesContractFormRef" :model="form" :rules="rules" label-width="80px">
                        <el-form-item label="项目名称">
                            <el-input :model-value="projectName" placeholder="请输入项目ID" disabled />
                        </el-form-item>
                        <el-form-item label="合同编号" prop="contractCode">
                            <el-input v-model="form.contractCode" placeholder="请输入合同编号" />
                        </el-form-item>
                        <el-form-item label="供应商" prop="contractSupplier">
                            <el-input v-model="form.contractSupplier" placeholder="请输入供应商" />
                        </el-form-item>
                        <el-form-item label="分包内容">
                            <editor v-model="form.contractedContent" :min-height="192" />
                        </el-form-item>
                        <el-form-item label="合同金额" prop="amount">
                            <el-input v-model="form.amount" placeholder="请输入合同金额" />
                        </el-form-item>
                        <el-form-item label="招标Id" prop="tenderId">
                            <el-input v-model="form.tenderId" placeholder="请输入招标Id" />
                        </el-form-item>
                        <el-form-item label="备注" prop="remark">
                            <el-input v-model="form.remark" placeholder="请输入备注" />
                        </el-form-item>
                        <el-form-item label="附件">
                            <FileUpload :multiple="true" :fileType="['pdf']" :onUploadSuccess="onUploadSuccess"
                                :ref="fileRef" :defaultFileList="fileList" />
                        </el-form-item>
                    </el-form>
                </template>
                <el-button type="primary" @click="active++">下一步</el-button>

            </template>
        </div>

    </div>
</template>
<script setup>
import FileUpload from '@/components/FileUpload';
const active = ref(0);
const contractType = ref("")
const form = ref({})
const fileList = ref([])
const checkContractType = (type) => {
    contractType.value = type;
    form.value.contractType = type;
    active.value++;
    form.value.step = active.value;

};
const projectName = computed(() => {
    return JSON.parse(localStorage.getItem("selectedProject"))['name']
});
const onUploadSuccess = (data) => {
    data.forEach(item => {
        // const { name: fileName, url: fileUrl, ossId } = item;
        // fileList.value.push({ fileName, fileUrl, ossId, contractType: contractType.value });
        fileList.value.push(item);

    });
}
const fileRef = ref(null);
watch(form, (val) => {
    localStorage.setItem("tempContractForm", JSON.stringify({ ...val, fileList: fileList.value }));
}, { deep: true });
watch(fileList, (val) => {
    localStorage.setItem("tempContractForm", JSON.stringify({ ...form.value, fileList: val }));
}, { deep: true });
onMounted(() => {
    const tempForm = localStorage.getItem("tempContractForm");
    if (tempForm) {
        ElMessageBox.confirm('检测到有未完成的合同录入，是否继续？', '提示', {
            confirmButtonText: '继续',
            cancelButtonText: '取消',
            type: 'warning',
        }).then(() => {
            const t = JSON.parse(tempForm);
            const { fileList: files, ...rest } = JSON.parse(tempForm);
            form.value = rest;
            fileList.value = files || [];
            contractType.value = form.value.contractType;
            active.value = 1;
            console.log(fileList.value);

        }).catch(() => {
            localStorage.removeItem("tempContractForm");
        });

    }
});
</script>
<style scoped lang="scss">
.container {
    padding: 20px;

    .content {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 30px;
        flex-direction: column;
    }
}
</style>