productivity-platform-web/src/views/house/workbench/consignor.vue

<template>
    <div class="contrl">
        <div v-if="upload.excelId">
            <div class="title1-div">
            <span style="font-weight: bold;">报告基本信息</span>
        </div>
        <el-form ref="base" :model="baseInfo" label-width="180" label-position="right" 
            style="max-width: 100%; border: 1.5px #dae1eb solid; padding-top: 20px; padding-bottom: 5px; border-radius: 5px;" :inline="true">
            <el-row>
                <el-col :span="24">
                    <el-form-item label="估价项目名称:" class="form-item" prop="docName">
                        <el-input :value="baseInfo.docName" disabled readonly style="width: 96.2%;" />
                         <!-- <div style="width: 100%; background-color: #dae1eb;">2</div> -->
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="12">
                    <el-form-item label="报告业务类型:" class="form-item" prop="businessType">
                        <el-input :value="baseInfo.businessType=='GUARANTY'?'抵押类':'-'" disabled readonly />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="报告号:" class="form-item" prop="docNo">
                        <el-input :value="baseInfo.docNo" disabled readonly />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="12">
                    <el-form-item label="委托人:" class="form-item" prop="consignor">
                        <el-input :value="baseInfo.consignor" disabled readonly />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="不动产权利人:" class="form-item" prop="owner">
                        <el-input :value="baseInfo.owner" disabled readonly />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="12">
                    <el-form-item label="估价师1:" class="form-item" prop="appraiser1">
                        <el-input :value="baseInfo.appraiser1" disabled readonly />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="估价师2:" class="form-item" prop="appraiser2">
                        <el-input :value="baseInfo.appraiser2" disabled readonly />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="12">
                    <el-form-item label="估价师1注册号:" class="form-item" prop="appraNo1">
                        <el-input :value="baseInfo.appraNo1" disabled readonly />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="估价师2注册号:" class="form-item" prop="appraNo2">
                        <el-input :value="baseInfo.appraNo2" disabled readonly />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="12">
                    <el-form-item label="出具报告日期:" class="form-item" prop="docDate">
                        <el-input :value="baseInfo.docDate" disabled readonly />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="价值时点:" class="form-item" prop="valueTiming">
                        <el-input :value="baseInfo.valueTiming" disabled readonly />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="12">
                    <el-form-item label="评估方法:" class="form-item" prop="workMethod">
                        <el-input :value="baseInfo.workMethod" disabled readonly />
                    </el-form-item>
                </el-col>
            </el-row>
            <!-- <div style="width: 100%; text-align: right;">
                <el-button type="text" @click="saveBaseInfo()">
                    修改基本信息
                </el-button>
            </div> -->
        </el-form>
        <div style="margin-top: 30px; width: 100%; text-align: right; ">
            <el-button type="text" @click="genarate()">
                    生成《致委托人函》
                    <el-icon style="vertical-align: -20%;">
                        <ArrowRightBold />
                    </el-icon>
                </el-button>
        </div>
        </div>
        <div style="width: 95%;">
            <div class="title-div">
                <span style="font-weight: bold;">上传估价结果一览表</span>
            </div>
        </div>
        <div class="download-btn">
            <img src="../../../assets/icons/form.png"
                style="width: 26px; height: 26px; float: left; margin-top: 27px;" />
            <el-tooltip content="点击下载" effect="light" placement="top">
                <span class="form-name" @click="downloadCollect1">报告自动生成_模版1.0.xlsx</span>
            </el-tooltip>
        </div>

        <div class="target-windows">
            <SheetView :uploadUrl="'/api/file/house/guaranty/target'"
                @getUploadReture="uploadReture" v-model:targetsHtml="process.targetsHtml"></SheetView>
        </div>

      
       
    </div>
</template>

<script>
import SheetView from '../../../components/SheetView/index.vue'
import houseGuaranty from '@/api/houseGuaranty';
import globalConfig from '@/api/globalConfig';
import houseExcelData from '@/api/houseExcelData';
import fileUtil from '@/utils/file'
import Steps from '../../../components/Steps/index.vue'

export default {
    components: {
        SheetView,
        Steps,
    },

    data() {
        return {
            // rules: {
            //     consignor: [{ required: true, message: '委托人不能为空', trigger: 'blur' }],
            //     docNo: [{ required: true, message: '报告号不能为空', trigger: 'blur' }],
            //     appraiser1: [{ required: true, message: '估价师1不能为空', trigger: 'blur' }],
            //     appraiser2: [{ required: true, message: '估价师2不能为空', trigger: 'blur' }],
            //     docDate: [{ required: true, message: '出具报告日期不能为空', trigger: 'blur' }],
            //     valueTiming: [{ required: true, message: '价值时点不能为空', trigger: 'blur' }],
            //     methodList: [{ required: true, message: '评估方法不能为空', trigger: 'blur' }],
            //     consignorType: [{ required: true, message: '委托人类型不能为空', trigger: 'blur' }],
            //     consignorAddress: [{ required: true, message: '委托人住所不能为空', trigger: 'blur' }],
            //     consignorPerson: [{ required: true, message: '法定代表人不能为空', trigger: 'blur' }],
            //     consignorMoney: [{ required: true, message: '注册资本不能为空', trigger: 'blur' }],
            //     creditCode: [{ required: true, message: '统一社会信用代码不能为空', trigger: 'blur' }],
            //     pledgeUser: [{ required: true, message: '抵押权人不能为空', trigger: 'blur' }],
            //     pledgeType: [{ required: true, message: '抵押权类型不能为空', trigger: 'blur' }],
            //     pledgeValue: [{ required: true, message: '抵押权价值不能为空', trigger: 'blur' }],
            //     newPledgeUser: [{ required: true, message: '新抵押权人不能为空', trigger: 'blur' }],
            // },
            nextPath: '/home/houseWorkbench/certificate',
            excelHtml: null,
            upload: {
                excelId:null,
                fileName:null,
                filePath:null
            },
            processId: null,
            docId: null,
            process: {
                id: null,
                home: null,
                targetsHtml: null,
                createdTime: null,
                updateTime: null
            },
            stepDialog: false,
            stepArray: [
                { name: '上传表单' },
                { name: '解析估价对象一览表' },
                { name: '生成致委托人函' },
                { name: '完成' }
            ],
            baseInfo: {
                id: null,
                businessType: null,
                docName: null,
                docNo: null,
                consignor: null,
                owner: null,
                appraiser1: null,
                appraiser2: null,
                appraNo1: null,
                appraNo2: null,
                docDate: null,
                valueTiming: null,
                workMethod: null,
            },
            apprisers: []
        }
    },

    created() {
        this.docId = this.$route.query.id;
        this.upload.excelId = this.$route.query.businessId;
        this.getProcess();
        this.$emit('getDocumentId', this.docId);
        this.$emit('getBusinessId', this.upload.excelId);
        this.getBaseInfo();
        // this.getApprisers();

    },

    methods: {
        genConsignorLetter() {
            houseGuaranty.genConsignorLetter(this.processId, this.docId).then(res => {
                if (res.code === 200) {
                    ElMessage({
                        message: '致委托人函已生成',
                        type: 'success',
                        plain: true
                    })
                    this.$emit('getProcessParentId', this.processId);
                    this.$emit('getDocumentId', this.docId)
                }
            })
        },


        uploadReture(data) {
            this.upload = data;
            this.docId = data.docId;
            this.getBaseInfo();
            setTimeout(()=>{
                this.generateTargetWord();
            },1000)
            
        },

        genTargetTableWord(excelData, homePath) {
            if (excelData && homePath) {
                const param = new Object();
                param.html = excelData;
                param.homePath = homePath;
                houseGuaranty.genTargetsTableWord(param).then(res => {
                    if (res.code === 200) {
                        this.processId = res.data;
                    }
                })

            }
        },

        analysisExcel(id) {
            houseGuaranty.analysisCollect1(id).then(res => {
                if (res.code === 200) {
                    this.genConsignorLetter(id);
                }
            })
        },

        generateTargetWord(){
            const targetTableHtml = document.getElementsByTagName('table')[0].outerHTML;
            const certificateTableHtml = document.getElementsByTagName('table')[1].outerHTML;
            if (targetTableHtml && this.upload) {
                const param = new Object();
                param.targetTableHtml = targetTableHtml;
                param.certificateTableHtml = certificateTableHtml;
                param.homePath = this.upload.filePath;
                param.excelId = this.upload.excelId;
                houseGuaranty.genTargetsTableWord(param).then(res => {
                    if (res.code === 200) {
                        this.baseInfo.processId = res.data;
                        this.processId = res.data;
                    } 
                })
            }
        },

        genarate() {
            if (this.processId === null || typeof this.processId === 'undefined') {
                ElMessage({
                    message: '请先上传估价对象一览表',
                    type: 'error',
                    plain: true
                })
            }
            if (this.upload.excelId && this.processId) {
                const loading = this.$loading();
                houseGuaranty.genConsignorLetter(this.upload.excelId,this.processId).then(res => {
                    if (res.code === 200) {
                        ElMessage({
                            message: '致委托人函已生成',
                            type: 'success',
                            plain: true
                        })
                        this.$emit('getProcessParentId', this.processId);
                        this.$emit('getDocumentId', this.docId);
                        this.$emit('getBusinessId', this.upload.excelId);
                        loading.close();
                    }else {
                        ElMessage({
                            message: '致委托人函生成失败，请检查Excel文件。',
                            type: 'error',
                            plain: true
                        })
                        loading.close();
                    }

                })
            }


        },

        getProcess() {
            if (this.docId) {
                houseGuaranty.getProcessByDocId(this.docId).then(res => {
                    if (res.code === 200) {
                        this.process = res.data;
                        this.processId = this.process.id;
                        this.$emit('getProcessParentId', this.process.id)
                    }
                })
            }
        },

        downloadCollect1() {
            fileUtil.download("/file/download/house/guaranty/collect1");
        },

        getApprisers() {
            globalConfig.getByType("APPRAISER").then(res => {
                if (res.code === 200) {
                    this.apprisers = res.data;
                }
            })
        },

        changeAppr1() {
            let apprNo = this.apprisers.filter(item => item.key == this.baseInfo.appraiser1);
            this.baseInfo.appraNo1 = apprNo[0].value;
        },
        changeAppr2() {
            let apprNo = this.apprisers.filter(item => item.key == this.baseInfo.appraiser2);
            this.baseInfo.appraNo2 = apprNo[0].value;
        },
        getBaseInfo() {
            if (this.upload.excelId) {
                const loading = this.$loading();
                houseExcelData.getBaseInfo(this.upload.excelId).then(res => {
                    if (res.code === 200) {
                        this.baseInfo = res.data;
                        ElMessage({
                            message: '数据获取成功',
                            type: 'success',
                            plain: true
                        })
                        loading.close();
                    }else{
                        ElMessage({
                            message: '数据获取出错',
                            type: 'error',
                            plain: true
                        })
                        loading.close();
                    }
                })
            }

        },
        saveBaseInfo() {
            this.$refs.base.validate(valid => {
                if (valid) {
                    this.baseInfo.processId = this.processId;
                    this.baseInfo.methods = JSON.stringify(this.baseInfo.methodList);
                    houseGuarantyBase.save(this.baseInfo).then(res => {
                        if (res.code === 200 && res.data) {
                            this.baseInfo.id = res.data
                            ElMessage({
                                message: '基本信息保存成功',
                                type: 'success',
                                plain: true
                            })
                        }
                    })
                }
            })

        },
        savePladge(){
            this.$refs.pledge.validate(valid => {
                if (valid) {
                    this.baseInfo.processId = this.processId;
                    this.baseInfo.methods = JSON.stringify(this.baseInfo.methodList);
                    houseGuarantyBase.save(this.baseInfo).then(res => {
                        if (res.code === 200 && res.data) {
                            this.baseInfo.id = res.data
                            ElMessage({
                                message: '抵押权信息保存成功',
                                type: 'success',
                                plain: true
                            })
                        }
                    })
                }
            })
        }

    }
}


</script>

<style scoped>
.contrl {
    font-size: 20px;
    width: 70.9%;
    border-right: 1.5px #dae1eb solid;
    padding: 0px 20px 20px 0px;
    float: left;

}

:deep(.el-input__wrapper.is-focus) {
    --el-input-focus-border: #ff6154;
    --el-input-focus-border-color: #ff6154;
}

.target-windows {
    margin-top: 80px;
    overflow-y: scroll;
    padding: 5px;
    border: 1.5px #dae1eb solid;
    border-radius: 0.3em;
}

.download-btn {
    height: 80px;
    line-height: 80px;
    float: right;
    margin-left: 20px;
}

.form-name {
    margin-left: 5px;
    font-size: 16px;
    text-decoration: underline;
}

.form-name:hover {
    cursor: pointer;
    color: #ff6154;
}

.title-div {
    height: 80px;
    line-height: 80px;
    width: 300px;
    float: left;
    font-size: 20px;
    font-weight: 900;
}

.title1-div {
    height: 80px;
    line-height: 80px;
    width: 300px;
    font-size: 20px;
    font-weight: 900;
}

:deep(.el-select) {
    width: 350px;
}

:deep(.el-input) {
    width: 350px;
}

:deep(.el-table .cell) {
    padding: 0px;
}

:deep(.el-input__wrapper.is-focus) {
    --el-input-focus-border: #ff6154;
    --el-input-focus-border-color: #ff6154;
}

:deep(.el-radio-group__wrapper.is-focused) {
    box-shadow: #ff6154;
    --el-radio-group-input-focus-border-color: #ff6154;
    --el-color-primary: #ff6154;
}

:deep(.el-radio__input.is-checked .el-radio__inner) {
    background: #ff6154;
    border-color: #ff6154;
}

:deep(.el-radio__inner:hover) {
    border-color: #ff6154;
}

:deep(.el-radio__input.is-checked+.el-radio__label) {
    color: #ff6154;

}

:deep(.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active) {
    color: #ff6154;
}

:deep(.el-tabs__item.is-active, .el-tabs__item:hover) {
    color: #ff6154;
}

:deep(.el-checkbox__label) {
    font-size: 15px;
}

:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
    background-color: #ff6154;
    border-color: #ff6154;
    font-size: 20px;
}

:deep(.el-checkbox__input.is-checked+.el-checkbox__label) {
    color: #ff6154;

}

:deep(.el-tabs__active-bar) {
    background-color: #ff6154;
}

:deep(.el-tabs__item.is-active) {
    color: #ff6154;
}

:deep(.el-tabs__item:hover) {
    color: #ff6154;
}

:deep(.el-input__wrapper.is-focus) {
    --el-input-focus-border: #ff6154;
    --el-input-focus-border-color: #ff6154;
}

:deep(.el-button--text:hover) {
    color: #ff6154;
}

:deep(.el-button--text) {
    color: #ff6154;
}

:deep(.el-input.is-disabled .el-input__inner){
    -webkit-text-fill-color:black
}
</style>