Browse Source

假设限制条件前端页面

wucl 8 months ago
parent
commit
3be30bcf63

+ 3 - 0
src/api/houseGuaranty.js

@@ -22,6 +22,9 @@ const houseGuaranty = {
             return request.get(`/house/guaranty/process`)
         }
         
+    },
+    getTargetsById(params){
+        return request.get(`/house/guaranty/targets/${params}`)
     }
 
 }

+ 1 - 1
src/views/house/folder/parent.vue

@@ -262,7 +262,7 @@ export default {
       }
     },
     docDetail(id){
-      this.$router.push({path:"/home/houseWorkbench/consignor",query:{'id':id}})
+      this.$router.push({path:"/home/houseWorkbench/consignor",query:{'id':id}});
     }
   }
 }

+ 5 - 1
src/views/house/workbench/components/bench.vue

@@ -2,7 +2,7 @@
     <section class="bench-main">
       <router-view v-slot="{ Component }">
         <transition>
-            <component :is="Component"  @getProcessParentId="getProcessParentId"/>
+            <component :is="Component"  @getProcessParentId="getProcessParentId" @getDocumentId="getDocumentId"/>
         </transition>
       </router-view>
     </section>
@@ -35,6 +35,10 @@
     methods:{
       getProcessParentId(value){
           this.$emit("getProcessParentId",value);
+      },
+
+      getDocumentId(value){
+        this.$emit("getDocumentId",value);
       }
   
     }

+ 6 - 2
src/views/house/workbench/components/timeline.vue

@@ -22,7 +22,11 @@ export default {
 
   props: {
      processParentId:{
-      type:Number,
+      type:String,
+      required:false,
+     },
+     documentId:{
+      type:String,
       required:false,
      }
   },
@@ -47,7 +51,7 @@ export default {
     },
     methods:{
       goto(path) {
-        this.$router.push(`/home/houseWorkbench/${path}`)
+        this.$router.push(`/home/houseWorkbench/${path}?id=${this.documentId}`)
       },
       getProcesses(){
         houseGuaranty.getProcesses(this.processParentId).then(res=>{

+ 437 - 78
src/views/house/workbench/conditions.vue

@@ -2,78 +2,441 @@
     <div class="contrl">
         <div style="width: 95%;">
             <div class="title-div">
-                <span>1.一般假设</span>
+                <span>完善估价对象详细信息</span>
             </div>
-        </div>
-        <div class="ordinaryAssumption">
-            <el-card v-for="(p ,index) in ordinaryAssumptionTmpls" shadow="never"  
-            :class="['report-item',p.soltMark?'solt-conflict':'']">
-                <div style="display: flex;">
-                    <p v-show="!p.isEdit">
-                    {{ (index+1) +'、'+ p.paragraph }}
-                    </p>
-                    <el-input style="height: 100%; width: 100%; font-size: 18px;" v-show="p.isEdit" type="textarea" :rows="3"
-                     v-model="p.paragraph" />
-                    <div style="float: right;">
-                        <div  class="operation" @click="removeParagraph(index)">
-                        <el-icon>
-                            <Delete />
-                        </el-icon>
-                        </div>
-                        <div  class="operation" @click="editParagraph(p)">
-                        <el-icon>
-                            <Edit />
-                        </el-icon>
-                        </div>
+
+            <el-tabs v-model="activeName" class="targets-tabs">
+                <el-tab-pane :label="'估价对象' + t.id" :name="index" :lazy="true" v-for="(t, index) in targets">
+                    <div class="targetTable">
+                        <el-divider content-position="left">一览表</el-divider>
+                        <el-table :data="t.list" border stripe size="medium" :header-row-style="{ color: '#333333'}"
+                            style="
+                        border-left: 1px solid #ebeced;
+                        border-right: 1px solid #ebeced;
+                        color: #333333;">
+                            <el-table-column prop="id" label="估价对象" width="60" align="center" />
+                            <el-table-column prop="no" label="序号" width="60" align="center" />
+                            <el-table-column prop="certificateNo" label="权属证书号" align="center"/>
+                            <el-table-column prop="ownShipUser" label="权利人" show-overflow-tooltip width="100"
+                                align="center" />
+                            <el-table-column prop="location" label="坐落" show-overflow-tooltip width="100"
+                                align="center" />
+                            <el-table-column prop="atFloor" label="所在楼层" width="60" align="center" />
+                            <el-table-column prop="structure" label="结构" width="60" align="center" />
+                            <el-table-column prop="useTo" label="用途" width="60" align="center" />
+                            <!-- <el-table-column prop="outerAcreage" label="分摊或占用土地使用权面积(㎡)" align="center" /> -->
+                            <el-table-column prop="acreage" label="建筑面积(㎡)" width="60" align="center" />
+                            <el-table-column prop="price" label="单价(元/㎡)" width="60" align="center" />
+                            <el-table-column prop="amount" label="总价(万元)" width="60" align="center" />
+                            <!-- <el-table-column prop="landCertificateNo" label="国有土地使用证号" />
+                            <el-table-column prop="landType" label="地类(用途)" width="60" align="center" /> -->
+                            <el-table-column prop="actAddress" label="实勘地址" show-overflow-tooltip align="center"/>
+                        </el-table>
                     </div>
-                   
-                </div>
-            </el-card>
+                    <div>
+                        <el-divider content-position="left">一般假设、未定事项假设、不相一致假设、依据不足假设</el-divider>
+                        <el-form :inline="true" :model="t" label-width="auto" style="margin-top: 30px;">
+                            <el-row :gutter="24">
+                                <el-col :span="12">
+                                    <el-form-item label="是否建筑物部分:">
+                                        <el-select v-model="t.isPart" clearable placeholder="请选择">
+                                            <el-option label="是" value="是" />
+                                            <el-option label="否" value="否" />
+                                            <el-option label="酒店部分" value="酒店部分" />
+                                        </el-select>
+                                    </el-form-item>
+                                </el-col>
+                                <el-col :span="12">
+                                    <el-form-item label="是否登记建成年份:">
+                                        <el-select v-model="t.hasBuildingYear" clearable placeholder="请选择" @change="handleBuidingYear(t)">
+                                            <el-option label="是" :value="true" />
+                                            <el-option label="否" :value="false" />
+                                        </el-select>
+                                    </el-form-item>
+                                </el-col>
+                            </el-row>
+                            <el-row :gutter="24">
+                                <el-col :span="12" v-if="!t.hasBuildingYear">
+                                    <el-form-item label="调查的建成年份:">
+                                        <el-date-picker v-model="t.buildingYear" type="year" format="YYYY年"
+                                            value-format="YYYY年" placeholder>
+                                        </el-date-picker>
+                                    </el-form-item>
+                                </el-col>
+                                <el-col :span="12">
+                                    <el-form-item label="国有土地证类型:">
+                                        <el-select v-model="t.landCertificateType" clearable placeholder="请选择">
+                                            <el-option label="无" value="无" />
+                                            <el-option label="大证" value="大证" />
+                                            <el-option label="分户土地证" value="分户土地证" />
+                                        </el-select>
+                                    </el-form-item>
+                                </el-col>
+                            </el-row>
+                            <el-row :gutter="24">
+                                <el-col :span="12">
+                                    <el-form-item label="土地用途:">
+                                        <el-select v-model="t.landUseTo" clearable placeholder="请选择">
+                                            <el-option label="商业" value="商业" />
+                                            <el-option label="住宅" value="住宅" />
+                                            <el-option label="工业" value="工业" />
+                                        </el-select>
+                                    </el-form-item>
+                                </el-col>
+                                <el-col :span="12">
+                                    <el-form-item label="土地使用权终止日期:">
+                                        <el-date-picker v-model="t.landExpireDate" type="date" placeholder="请选择"
+                                            format="YYYY年MM月DD日" value-format="YYYY年MM月DD日" />
+                                    </el-form-item>
+                                </el-col>
+                            </el-row>
+                            <el-row :gutter="24">
+                                <el-col :span="12">
+                                    <el-form-item label="土地无分户产权时分摊面积(㎡):">
+                                       <el-input v-model="t.shareAcreage1" />
+                                    </el-form-item>
+                                </el-col>
+                                <el-col :span="12">
+                                    <el-form-item label="是否采用分层面积处理方式:">
+                                        <el-select v-model="t.isLayer" clearable placeholder="请选择">
+                                            <el-option label="是" :value="true" />
+                                            <el-option label="否" :value="false" />
+                                        </el-select>
+                                    </el-form-item>
+                                </el-col>
+                            </el-row>
+                            <el-row :gutter="24" v-if="t.isLayer">
+                                <el-col :span="12">
+                                    <el-form-item label="分层面积处理方式是否有图:">
+                                        <el-select v-model="t.hasLayerImage" clearable placeholder="请选择">
+                                            <el-option label="有图" value="有图" />
+                                            <el-option label="无图" value="无图" />
+                                        </el-select>
+                                    </el-form-item>
+                                </el-col>
+                                <el-col :span="12">
+                                    <el-form-item label="一层面积(㎡):">
+                                       <el-input v-model="t.floor1Acreage" />
+                                    </el-form-item>
+                                </el-col>
+                            </el-row>
+                            <el-row :gutter="24" v-if="t.isLayer=='是'">
+                                <el-col :span="12">
+                                    <el-form-item label="二层面积(㎡):">
+                                        <el-input v-model="t.floor2Acreage" />
+                                    </el-form-item>
+                                </el-col>
+                                <el-col :span="12">
+                                    <el-form-item label="三层面积(㎡):">
+                                       <el-input v-model="t.floor3Acreage" />
+                                    </el-form-item>
+                                </el-col>
+                            </el-row>
+                            <el-row :gutter="24">
+                                <el-col :span="12">
+                                    <el-form-item label="查勘地址与登记地址是否一致:">
+                                        <el-select v-model="t.isAddressSame" clearable placeholder="请选择">
+                                            <el-option label="是" :value="true" />
+                                            <el-option label="否" :value="false" />
+                                        </el-select>
+                                    </el-form-item>
+                                </el-col>
+                                <el-col :span="12">
+                                    <el-form-item label="查勘之日与价值时点是否一致:">
+                                        <el-select v-model="t.isDateTimeSame" clearable placeholder="请选择">
+                                            <el-option label="是" value="是" />
+                                            <el-option label="否" value="否" />
+                                        </el-select>
+                                    </el-form-item>
+                                </el-col>
+                            </el-row>
+                            <el-row :gutter="24">
+                                <el-col :span="12" v-if="t.isAddressSame">
+                                    <el-form-item label="地址不一致时是否开具地址证明:">
+                                        <el-select v-model="t.isAddressCertificate" clearable placeholder="请选择">
+                                            <el-option label="是" :value="true" />
+                                            <el-option label="否" :value="false" />
+                                        </el-select>
+                                    </el-form-item>
+                                </el-col>
+                                <el-col :span="12">
+                                    <el-form-item label="是否考虑建筑物残值:">
+                                        <el-select v-model="t.isBuildingReduceValue" clearable placeholder="请选择">
+                                            <el-option label="是" :value="true" />
+                                            <el-option label="否" :value="false" />
+                                        </el-select>
+                                    </el-form-item>
+                                </el-col>
+                            </el-row>
+                            <el-row :gutter="24">
+                                <el-col :span="12">
+                                    <el-form-item label="是否提供权属证件原件:">
+                                        <el-select v-model="t.hasOriginCertificate" clearable placeholder="请选择">
+                                            <el-option label="是" :value="true" />
+                                            <el-option label="否" :value="false" />
+                                        </el-select>
+                                    </el-form-item>
+                                </el-col>
+                                <el-col :span="12" v-if="t.hasOriginCertificate">
+                                    <el-form-item label="《权利状况说明及承诺书》承诺证件一致:" >
+                                        <el-select v-model="t.isPromise" clearable placeholder="请选择">
+                                            <el-option label="是" :value="true" />
+                                            <el-option label="否" :value="false" />
+                                        </el-select>
+                                    </el-form-item>
+                                </el-col>
+                            </el-row>
+                            <el-row :gutter="24">
+                                <el-col :span="12">
+                                    <el-form-item label="提供《国有建设用地使用权出让合同》:">
+                                        <el-select v-model="t.hasLandUseRightContract" clearable placeholder="请选择">
+                                            <el-option label="是" :value="true" />
+                                            <el-option label="否" :value="false" />
+                                        </el-select>
+                                    </el-form-item>
+                                </el-col>
+                            </el-row>
+                            <el-divider content-position="left">租赁权</el-divider>
+                            <el-row :gutter="24">
+                                <el-col :span="12">
+                                    <el-form-item label="估价对象是否已出租:">
+                                        <el-select v-model="t.isRentOut" clearable placeholder="请选择" @change="handleIsRentOut(t)">
+                                            <el-option label="是" :value="true" />
+                                            <el-option label="否" :value="false" />
+                                        </el-select>
+                                    </el-form-item>
+                                </el-col>
+                                
+                                <el-col :span="12" v-if="t.isRentOut">
+                                    <el-form-item label="是否提供租赁合同:" >
+                                        <el-select v-model="t.hasRentOutContract" clearable placeholder="请选择" @change="handleRentOutContract(t)">
+                                            <el-option label="是" :value="true" />
+                                            <el-option label="否" :value="false" />
+                                        </el-select>
+                                    </el-form-item>
+                                </el-col>
+                            </el-row>
+                            <el-row :gutter="24" v-if="t.isRentOut">
+                                <el-col :span="12">
+                                    <el-form-item label="是否考虑租约限制:">
+                                        <el-select v-model="t.isRentLimit" clearable placeholder="请选择" @change="handleisRentLimit(t)">
+                                            <el-option label="是" :value="true" />
+                                            <el-option label="否" :value="false" />
+                                        </el-select>
+                                    </el-form-item>
+                                </el-col>
+                            </el-row>
+                            <el-row :gutter="24" v-if="t.isRentOut">
+                                <el-col :span="12" v-if="!t.isRentLimit">
+                                    <el-form-item label="未考虑租约限制原因:" >
+                                        <el-select v-model="t.notRentLimitReason" clearable placeholder="请选择">
+                                            <el-option label="高于市场租金" value="高于市场租金" />
+                                            <el-option label="与市场租金相当" value="与市场租金相当" />
+                                            <el-option label="未提供合同" value="未提供合同" />
+                                            <el-option label="无" value="无" />
+                                        </el-select>
+                                    </el-form-item>
+                                </el-col>
+                            </el-row>
+                            <el-row :gutter="24" v-if="t.isRentOut">
+                                <el-col :span="12" v-if="t.isRentLimit">
+                                    <el-form-item label="考虑租约限制原因:" >
+                                        <el-select v-model="t.rentLimitReason" clearable placeholder="请选择">
+                                            <el-option label="低于市场租金" value="低于市场租金" />
+                                            <el-option label="无" value="无" />
+                                        </el-select>
+                                    </el-form-item>
+                                </el-col>
+                            </el-row>
+                            <el-row :gutter="24" v-if="t.isRentOut">
+                                <el-col :span="12">
+                                    <el-form-item label="租约起始日期:" >
+                                        <el-date-picker v-model="t.rentStartDate" type="date" placeholder="请选择"
+                                        format="YYYY年MM月DD日" value-format="YYYY年MM月DD日" />
+                                    </el-form-item>
+                                </el-col>
+                                <el-col :span="12">
+                                    <el-form-item label="租约结束日期:" >
+                                        <el-date-picker v-model="t.rentEndDate" type="date" placeholder="请选择"
+                                        format="YYYY年MM月DD日" value-format="YYYY年MM月DD日" />
+                                    </el-form-item>
+                                </el-col>
+                            </el-row>
+                            <el-row :gutter="24" v-if="t.hasRentOutContract">
+                                <el-col :span="12">
+                                    <el-form-item label="价值时点租金:">
+                                        <el-input v-model="t.rentMoney" clearable />
+                                    </el-form-item>
+                                </el-col>
+                                <el-col :span="12">
+                                    <el-form-item label="承租人:" >
+                                        <el-input v-model="t.rentUser" clearable />
+                                    </el-form-item>
+                                </el-col>
+                            </el-row>
+                           
+                                <el-divider content-position="left">担保物权</el-divider>
+                                <el-row :gutter="24">
+                                <el-col :span="12">
+                                    <el-form-item label="是否设置抵押权:" >
+                                        <el-select v-model="t.hasPledge" clearable placeholder="请选择">
+                                            <el-option label="是" :value="true" />
+                                            <el-option label="否" :value="false" />
+                                        </el-select>
+                                    </el-form-item>
+                                </el-col>
+                            </el-row>
+                            <el-row :gutter="24" v-if="t.hasPledge">
+                                <el-col :span="12">
+                                    <el-form-item label="抵押权人:">
+                                        <el-input v-model="t.pledgeUser" clearable />
+                                    </el-form-item>
+                                </el-col>
+                                <el-col :span="12">
+                                    <el-form-item label="抵押权类型:" >
+                                        <el-select v-model="t.pledgeType" clearable placeholder="请选择">
+                                            <el-option label="一般抵押权" value="一般抵押权" />
+                                            <el-option label="最高额抵押权" value="最高额抵押权" />
+                                        </el-select>
+                                    </el-form-item>
+                                </el-col>
+                            </el-row>
+                            <el-row :gutter="24" v-if="t.hasPledge">
+                                <el-col :span="12">
+                                    <el-form-item label="抵押权利价值:">
+                                        <el-input v-model="t.pledgeValue" clearable />
+                                    </el-form-item>
+                                </el-col>
+                                <el-col :span="12">
+                                    <el-form-item label="同一抵押权人续贷:" >
+                                        <el-select v-model="t.samePledgeContinue" clearable placeholder="请选择">
+                                            <el-option label="是" :value="true" />
+                                            <el-option label="否" :value="false" />
+                                        </el-select>
+                                    </el-form-item>
+                                </el-col>
+                            </el-row>
+                            <el-row :gutter="24" v-if="t.hasPledge">
+                                <el-col :span="12">
+                                    <el-form-item label="新抵押权利人:">
+                                        <el-input v-model="t.newPledgeUser" clearable />
+                                    </el-form-item>
+                                </el-col>
+                                <el-col :span="12">
+                                    <el-form-item label="已设立最高额抵押权且抵押未到期:" >
+                                        <el-select v-model="t.highPledgeNotExpire" clearable placeholder="请选择">
+                                            <el-option label="是" :value="true" />
+                                            <el-option label="否" :value="false" />
+                                        </el-select>
+                                    </el-form-item>
+                                </el-col>
+                            </el-row>
+                            <el-row :gutter="24">
+                                <el-col :span="12" v-if="t.hasPledge">
+                                    <el-form-item label="现拟设立最高额抵押权同一抵押权人:" >
+                                        <el-select v-model="t.samePledgeHigh" clearable placeholder="请选择">
+                                            <el-option label="是" :value="true" />
+                                            <el-option label="否" :value="false" />
+                                        </el-select>
+                                    </el-form-item>
+                                </el-col>
+                                <el-col :span="12">
+                                    <el-form-item label="其他法定优先受偿款(万元):" >
+                                        <el-input v-model="t.firstMoney" clearable />
+                                    </el-form-item>
+                                </el-col>
+                            </el-row>
+                            <el-row :gutter="24">
+                                <el-col :span="12">
+                                    <el-form-item label="拖欠工程款(万元):" >
+                                        <el-input v-model="t.debtMonty" clearable />
+                                    </el-form-item>
+                                </el-col>
+                                <el-col :span="12">
+                                    <el-form-item label="是否扣除法定优先受偿款:" >
+                                        <el-select v-model="t.isTakeOutFirstMoney" clearable placeholder="请选择">
+                                            <el-option label="是" :value="true" />
+                                            <el-option label="否" :value="false" />
+                                        </el-select>
+                                    </el-form-item>
+                                </el-col>
+                            </el-row>
+                        </el-form>
+                    </div>
+                </el-tab-pane>
+
+            </el-tabs>
         </div>
+
     </div>
 </template>
 
 
 <script>
-import tempHouseParagraph from '@/api/tmplHouseParagraph'
+import houseGuaranty from '@/api/houseGuaranty';
+
 export default {
 
-    components:{
+    components: {
     },
 
-    created(){
-        this.getOrdinaryAssumption();
+    created() {
+        this.docId = this.$route.query.id;
+        this.getTargets();
     },
 
-    data(){
-        return{
-            nextPath:'/home/houseWorkbench/entityInfo',
-            lastPath:'/home/houseWorkbench/baseInfo',
-            ordinaryAssumptionTmpls:[],
-            isEdit:false
-           
+    data() {
+        return {
+            activeName: 0,
+            docId: null,
+            targets: [],
+
         }
     },
 
-    methods:{
-        /**
-         * 获取一般假设模版
-         */
-        getOrdinaryAssumption(){
-            const param = new Object();
-            param.docMold = "GUARANTY";
-            param.chapter = "ORDINARY_ASSUMPTION";
-            tempHouseParagraph.getParagraphByMoldAndChapter(param).then(res => {
-                if (res.code === 200){
-                    this.ordinaryAssumptionTmpls = res.data;
+    methods: {
+
+        getTargets() {
+            houseGuaranty.getTargetsById(this.docId).then(res => {
+                if (res.code === 200) {
+                    this.targets = res.data;
+
                 }
             })
         },
-        removeParagraph(index){
-            this.ordinaryAssumptionTmpls.splice(index,1)
+
+        handleIsRentOut(t){
+            if (!t.isRentOut){
+                t.hasRentOutContract = null;
+                t.isRentLimit = null;
+                t.notRentLimitReason = null;
+                t.rentLimitReason = null;
+                t.rentStartDate = null;
+                t.rentEndDate = null;
+                t.rentMoney = null;
+                t.rentUser = null;
+            }
+        },
+
+        handleRentOutContract(t){
+            if (!t.hasRentOutContract){
+                t.rentMoney = null;
+                t.rentUser = null;
+            }
+        },
+
+        handleisRentLimit(t){
+            if (!t.isRentLimit){
+                t.rentLimitReason = null;
+            }
+            if (t.isRentLimit){
+                t.notRentLimitReason = null;
+            }
         },
-        editParagraph(p){
-            p.isEdit = !p.isEdit 
+        handleBuidingYear(t){
+            if (t.hasBuildingYear){
+                t.buildingYear = null;
+            }
         }
 
     }
@@ -89,52 +452,48 @@ export default {
     float: left;
 
 }
+
 .title-div {
     height: 80px;
     line-height: 80px;
     width: 300px;
-    float: left;
     font-size: 20px;
     font-weight: 900;
 }
 
-.solt-conflict{
-    border-color: #ff6154;
+.el-select {
+    --el-select-width: 220px;
 }
-.operation {
-  width: 30px;
-  height: 30px;
-  margin-top: 0px;
-  font-size: 20px;
-  text-align: center;
-  border: 1.5px solid #dae1eb ;
-  border-radius: 0.3em;
-  color: #dae1eb;
+
+.el-input {
+    --el-input-width: 220px;
 }
-.operation:hover {
-  color: #ff6154;
-  border: 1.5px solid #ff6154;
-  cursor: pointer;
+
+:deep(.el-table .cell) {
+    padding: 0px;
 }
+
 :deep(.el-input__wrapper.is-focus) {
-  --el-input-focus-border: #ff6154;
-  --el-input-focus-border-color:#ff6154;
+    --el-input-focus-border: #ff6154;
+    --el-input-focus-border-color: #ff6154;
 }
 
-:deep(.el-select__wrapper.is-focused){
+:deep(.el-select__wrapper.is-focused) {
     box-shadow: #ff6154;
-    --el-select-input-focus-border-color:#ff6154;
-    --el-color-primary:#ff6154;
+    --el-select-input-focus-border-color: #ff6154;
+    --el-color-primary: #ff6154;
 }
+
 :deep(.el-radio__input.is-checked .el-radio__inner) {
-    background:#ff6154;
-    border-color:#ff6154;
+    background: #ff6154;
+    border-color: #ff6154;
 }
-:deep(.el-radio__inner:hover){
-    border-color:#ff6154;
+
+:deep(.el-radio__inner:hover) {
+    border-color: #ff6154;
 }
-:deep(.el-radio__input.is-checked+.el-radio__label){
+
+:deep(.el-radio__input.is-checked+.el-radio__label) {
     color: #ff6154;
 }
-
 </style>

+ 1 - 1
src/views/house/workbench/consignor.vue

@@ -30,7 +30,6 @@
 <script>
 import SheetView from '../../../components/SheetView/index.vue'
 import houseGuaranty from '@/api/houseGuaranty';
-import { downloadCollect1 } from '@/api/fileUpload'
 import fileUtil from '@/utils/file'
 import Steps from '../../../components/Steps/index.vue'
 
@@ -67,6 +66,7 @@ export default {
     created() {
         this.docId = this.$route.query.id;
         this.getProcess();
+        this.$emit('getDocumentId',this.docId)
     },
 
     methods: {

+ 8 - 3
src/views/house/workbench/index.vue

@@ -4,8 +4,8 @@
         <div class="breadcrumb">
          <Breadcrumb />
         </div>
-        <Bench  @getProcessParentId="getProcessParentId" ></Bench>
-        <Timeline :processParentId="processParentId"></Timeline>
+        <Bench  @getProcessParentId="getProcessParentId" @getDocumentId="getDocumentId"></Bench>
+        <Timeline :processParentId="processParentId" :documentId="documentId"></Timeline>
       </div>
     </div>
   </template>
@@ -23,7 +23,8 @@
       },
       data() {
         return {
-          processParentId:null
+          processParentId:null,
+          documentId:null
         }
       },
 
@@ -31,6 +32,10 @@
       methods:{
         getProcessParentId(value){
           this.processParentId = value;
+        },
+
+        getDocumentId(value){
+          this.documentId = value;
         }
       }
     }