item-management-web/src/views/personal/readonlyDetail.vue

<template>
  <div class="app-container">
    <el-collapse v-model="activeName">
      <el-collapse-item>
        <template slot="title">
          <span style="font-size:20px; margin-left:20px;letter-spacing:2px;color:red">
            <i class="el-icon-warning"></i>
            <span> {{ nodeName ? '当前节点：' + nodeName : '当前状态：已归档' }}</span>
            <span> 项目编号：{{ businessSubId }}</span>
          </span>
          <span style="font-size:15px; margin-left:15px;letter-spacing:2px; color:RGB(168,168,168)">
            点击展开查看实时流程图
          </span>
        </template>
        <WorkflowBoard ref='board' :nodeBusinessInfo="nodeBusinessInfo" />
      </el-collapse-item>
    </el-collapse>
    <div class="button-area">
      <el-button class="y-save" round type="info" @click="goBack">返回</el-button>
    </div>
    <el-tabs v-model="activeTagName" @tab-click="handleClick" type="border-card">
      <el-tab-pane name="order" class="pane-class" :lazy=true>
        <span slot="label"><i class="el-icon-document"></i> 个贷订单</span>
        <el-form ref="personalForm" :model="personal">
          <div class="createMajor-main-container">
            <div class="postInfo-container">
              <div>
                <el-divider content-position="left">
                  <h3 class="title">
                    <div class="avatar-wrapper icon-title">订单</div>
                    <div class="icon-info">个贷订单</div>
                  </h3>
                </el-divider>
              </div>
              <el-row class="row-style">
                <el-col :xs="24" :sm="12" :lg="6" :span="6">
                  <el-form-item label="项目编号：" prop="orderId" label-width="120px" class="postInfo-container-item">
                    <el-input :value="personal.orderId" class="filter-item" readonly disabled />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :lg="6" :span="6">
                  <el-form-item label="评估目的：" prop="evaluateAim" label-width="120px" class="postInfo-container-item">
                    <el-input :value="personal.evaluateAim" class="filter-item" readonly disabled />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :lg="12" :span="6">
                  <el-form-item label="房屋用途：" prop="purpose" label-width="160px" class="postInfo-container-item">
                    <el-checkbox-group v-model="personal.purpose">
                      <el-checkbox-button label="HOUSE" name="purpose">住宅</el-checkbox-button>
                      <el-checkbox-button label="BUSINESS" name="purpose">商业</el-checkbox-button>
                      <el-checkbox-button label="OFFICE" name="purpose">办公</el-checkbox-button>
                      <el-checkbox-button label="INDUSTRIAL" name="purpose">工业</el-checkbox-button>
                      <el-checkbox-button label="OTHER" name="purpose">其他</el-checkbox-button>
                    </el-checkbox-group>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row class="row-style">
                <el-col :xs="12" :sm="12" :lg="24" :span="6">
                  <el-form-item label="坐落：" prop="location" label-width="120px" class="postInfo-container-item">
                    <el-input :value="personal.location" class="filter-item" readonly disabled />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row class="row-style">
                <el-col :xs="24" :sm="12" :lg="6" :span="6">
                  <el-form-item label="客户类型：" prop="clienteleType" label-width="120px" class="postInfo-container-item">
                    <el-input :value="personal.clienteleType" class="filter-item" readonly disabled />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :lg="6" :span="6">
                  <el-form-item label="客户名称：" prop="clienteleId" label-width="120px" class="postInfo-container-item">
                    <el-input :value="personal.clientName" class="filter-item" readonly disabled />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :lg="6" :span="6">
                  <el-form-item label="业务来源：" prop="clienteleSubId" label-width="120px" class="postInfo-container-item">
                    <el-input :value="personal.clientSubName" class="filter-item" readonly disabled />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :lg="6" :span="6">
                  <el-form-item label="客户联系人：" prop="clienteleContactId" label-width="120px"
                    class="postInfo-container-item">
                    <el-input :value="personal.contactName" class="filter-item" readonly disabled />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row class="row-style">
                <el-col :xs="24" :sm="12" :lg="6" :span="6">
                  <el-form-item label="联系人电话：" prop="clienteleContactId" label-width="120px"
                    class="postInfo-container-item">
                    <el-input :value="personal.contactTel" class="filter-item" readonly disabled />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :lg="6" :span="6">
                  <el-form-item label="联系人部门：" prop="clienteleContactId" label-width="120px"
                    class="postInfo-container-item">
                    <el-input :value="personal.cdepartment" class="filter-item" readonly disabled />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :lg="6" :span="6">
                  <el-form-item label="联系人职务：" prop="clienteleContactId" label-width="120px"
                    class="postInfo-container-item">
                    <el-input :value="personal.cduty" class="filter-item" readonly disabled />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :lg="6" :span="6">
                  <el-form-item label="中介：" prop="agent" label-width="120px" class="postInfo-container-item">
                    <el-input :value="personal.agent" class="filter-item" readonly disabled />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row class="row-style">
                <el-col :xs="24" :sm="12" :lg="6" :span="6">
                  <el-form-item label="贷款性质：" prop="loanNature" label-width="120px" class="postInfo-container-item">
                    <el-input :value="personal.loanNature" class="filter-item" readonly disabled />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :lg="6" :span="6">
                  <el-form-item label="贷款用途：" prop="loanAim" label-width="120px" class="postInfo-container-item">
                    <el-input :value="personal.loanAim" class="filter-item" readonly disabled />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :lg="6" :span="6">
                  <el-form-item label="贷款额度：" prop="loanLimit" label-width="120px" class="postInfo-container-item">
                    <el-input :value="personal.loanLimit" class="filter-item" readonly disabled>
                      <template slot="append">万元</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :lg="6" :span="6">
                  <el-form-item label="贷款期限：" prop="loanPeriod" label-width="120px" class="postInfo-container-item">
                    <el-input :value="personal.loanPeriod" class="filter-item" readonly disabled>
                      <template slot="append">年</template>
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row class="row-style">
                <el-col :xs="24" :sm="12" :lg="6" :span="6">
                  <el-form-item label="贷款是否到期：" prop="loanExpire" label-width="140px" class="postInfo-container-item">
                    <el-radio v-model="personal.loanExpire" :label="false" border>否</el-radio>
                    <el-radio v-model="personal.loanExpire" :label="true" border>是</el-radio>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :lg="12" :span="6">
                  <el-form-item label="资料说明：" prop="credentials" label-width="120px" class="postInfo-container-item">
                    <el-checkbox-group v-model="personal.credentials">
                      <el-checkbox-button label="HOUSE_CERTIFICATE" name="credentials">房产证</el-checkbox-button>
                      <el-checkbox-button label="LAND_CERTIFICATE" name="credentials">国土证</el-checkbox-button>
                      <el-checkbox-button label="IMMOVABLE_CERTIFICATE" name="credentials">不动产权证</el-checkbox-button>
                      <el-checkbox-button label="LEASE_CONTRACT" name="credentials">租赁合同</el-checkbox-button>
                      <el-checkbox-button label="IDENTITY_CARD" name="credentials">身份证</el-checkbox-button>
                      <el-checkbox-button label="NONE" name="credentials">无资料</el-checkbox-button>
                    </el-checkbox-group>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row class="row-style">
                <el-col :xs="24" :sm="12" :lg="6" :span="6">
                  <el-form-item label="委托人1：" prop="bailorA" label-width="120px" class="postInfo-container-item">
                    <el-input :value="personal.bailorA" class="filter-item" readonly disabled />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :lg="6" :span="6">
                  <el-form-item label="委托人1电话：" prop="bailoraTel" label-width="120px" class="postInfo-container-item">
                    <el-input :value="personal.bailoraTel" class="filter-item" readonly disabled />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :lg="6" :span="6">
                  <el-form-item label="委托人2：" prop="bailorB" label-width="120px" class="postInfo-container-item">
                    <el-input :value="personal.bailorB" class="filter-item" readonly disabled />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :lg="6" :span="6">
                  <el-form-item label="委托人2电话：" prop="bailorbTel" label-width="120px" class="postInfo-container-item">
                    <el-input :value="personal.bailorbTel" class="filter-item" readonly disabled />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row class="row-style">
                <el-col :xs="24" :sm="12" :lg="6" :span="6">
                  <el-form-item label="终端客户类型：" prop="terminalClienteleType" label-width="140px"
                    class="postInfo-container-item">
                    <el-input :value="personal.terminalClienteleType" class="filter-item" readonly disabled />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :lg="12" :span="6" v-show="personal.terminalClienteleType != ''">
                  <el-form-item label="终端客户名称：" prop="terminalClienteleId" label-width="140px"
                    class="postInfo-container-item">
                    <el-input :value="personal.tterminalClienteleName" class="filter-item" readonly disabled />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :lg="6" :span="6" v-show="personal.terminalClienteleType === '企业'">
                  <el-form-item label="终端联系人：" prop="terminalClienteleContactId" label-width="120px"
                    class="postInfo-container-item">
                    <el-input :value="personal.tterminalClienteleContactName" class="filter-item" readonly disabled />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :lg="6" :span="6" v-show="personal.terminalClienteleType != ''">
                  <el-form-item label="终端联系电话：" prop="clienteleType" label-width="130px"
                    class="postInfo-container-item">
                    <el-input :value="personal.tmobile" class="filter-item" readonly disabled />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row class="row-style">
                <el-col :xs="24" :sm="12" :lg="23" :span="12">
                  <el-form-item label="订单备注：" prop="remark" label-width="120px" class="postInfo-container-item">
                    <el-input :value="personal.remark" class="filter-item" type="text" readonly disabled />
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-form>
        <el-form ref="personalMemberForm" :model="personal" :rules="rules">
          <div class="createMajor-main-container">
            <div class="postInfo-container">
              <div>
                <el-divider content-position="left">
                  <h3 class="title">
                    <div class="avatar-wrapper icon-title">人员</div>
                    <div class="icon-info">项目人员</div>
                  </h3>
                </el-divider>
              </div>
              <el-row class="row-style">
                <el-col :xs="24" :sm="12" :lg="5" :span="6">
                  <el-form-item label="客户经理：" prop="clientManager" label-width="120px" class="postInfo-container-item">
                    <el-input :value="personal.clientManager" class="filter-item" readonly disabled />
                  </el-form-item>
                </el-col>

                <el-col :xs="24" :sm="12" :lg="5" :span="6">
                  <el-form-item label="内业人员：" prop="inwardStaffName" label-width="120px"
                    class="postInfo-container-item">
                    <el-input :value="personal.inwardStaffName" class="filter-item" readonly disabled />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :lg="5" :span="6">
                  <el-form-item label="外业人员：" prop="outwardStaff" label-width="120px" class="postInfo-container-item">
                    <el-input :value="personal.outwardStaffName" class="filter-item" readonly disabled />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :lg="5" :span="6">
                  <el-form-item label="定价内业：" prop="pricingStaffName" label-width="120px"
                    class="postInfo-container-item">
                    <el-input :value="personal.pricingStaffName" class="filter-item" readonly disabled />
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-form>
      </el-tab-pane>
      <el-tab-pane name="scene" class="pane-class" :lazy=true>
        <span slot="label"><i class="el-icon-search"></i> 外业实勘</span>
        <el-form ref="sceneForm" :model="sceneForm" class="form-container">
          <div class="createMajor-main-container">
            <div class="postInfo-container">
              <div>
                <el-divider content-position="left">
                  <h3 class="title">
                    <div class="avatar-wrapper icon-title">实勘</div>
                    <div class="icon-info">实勘信息</div>
                  </h3>
                </el-divider>
              </div>
              <div>
                <el-row class="row-style" style="margin-top: 10px;">
                  <el-col :xs="24" :sm="12" :lg="6" :span="6">
                    <el-form-item prop="orderId" label-width="120px" class="postInfo-container-item" label="订单号:">
                      <el-input disabled readonly :value="personal.orderId" class="filter-item" />
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :sm="12" :lg="6" :span="6">
                    <el-form-item prop="sceneUserName" label-width="120px" class="postInfo-container-item" label="实勘人:">
                      <el-input disabled readonly :value="personal.outwardStaffName" class="filter-item" />
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :sm="12" :lg="12" :span="6">
                    <el-form-item prop="productionType" label-width="120px" class="postInfo-container-item" label="坐落：">
                      <el-input disabled readonly :value="personal.location" class="filter-item" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row class="row-style">
                  <el-col :xs="24" :sm="12" :lg="6" :span="6">
                    <el-form-item prop="inRingDewlling" label-width="120px" class="postInfo-container-item"
                      :rules="{ required: true, message: '绕城内住宅不能为空', trigger: 'blur' }" label="绕城内住宅:">
                      <el-input v-model="sceneForm.inRingDewlling" disabled readonly class="filter-item">
                        <template slot="append">套</template>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :sm="12" :lg="6" :span="6">
                    <el-form-item prop="outRingDewlling" label-width="120px" class="postInfo-container-item"
                      :rules="{ required: true, message: '绕城外住宅不能为空', trigger: 'blur' }" label="绕城外住宅:">
                      <el-input v-model="sceneForm.outRingDewlling" disabled readonly class="filter-item">
                        <template slot="append">套</template>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :sm="12" :lg="6" :span="6">
                    <el-form-item prop="inRingBuilding" label-width="120px" class="postInfo-container-item"
                      :rules="{ required: true, message: '绕城内商业不能为空', trigger: 'blur' }" label="绕城内商业:">
                      <el-input v-model="sceneForm.inRingBuilding" disabled readonly class="filter-item">
                        <template slot="append">套</template>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :sm="12" :lg="6" :span="6">
                    <el-form-item prop="outRingBuilding" label-width="120px" class="postInfo-container-item"
                      :rules="{ required: true, message: '绕城外商业不能为空', trigger: 'blur' }" label="绕城外商业:">
                      <el-input v-model="sceneForm.outRingBuilding" disabled readonly class="filter-item">
                        <template slot="append">套</template>
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row class="row-style">
                  <el-col :xs="24" :sm="12" :lg="24" :span="6">
                    <el-form-item label="实勘备注：" prop="remark" label-width="120px" class="postInfo-container-item">
                      <el-input v-model="sceneForm.remark" :autosize="{ minRows: 3, maxRows: 3 }" class="filter-item"
                        type="textarea" disabled readonly />
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
            </div>
          </div>
        </el-form>
      </el-tab-pane>
      <el-tab-pane  name="evaluate" class="pane-class" :lazy=true>
        <span slot="label"><i class="el-icon-office-building"></i> 评估对象</span>
        <el-form ref="targetForm" :model="target">
          <div class="createMajor-main-container">
            <div class="postInfo-container">
              <div>
                <el-divider content-position="left">
                  <h3 class="title">
                    <div class="avatar-wrapper icon-title">价格</div>
                    <div class="icon-info">评估价格</div>
                  </h3>
                </el-divider>
              </div>
            </div>
          </div>
          <el-row class="row-style">
            <el-col :xs="24" :sm="12" :lg="18" :span="6">
              <el-form-item label="流程：" prop="acreage" label-width="140px" class="postInfo-container-item" >
                <el-switch :value="target.isOnline" disabled style="margin-bottom: 5px;" active-text="线上" inactive-text="线下"
                  >
                </el-switch>
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :lg="6" :span="6">
              <el-form-item label="打印二维码：" prop="validateCode" label-width="140px" class="postInfo-container-item">
                <a @mouseenter="showQR=true">出入库二维码</a> <a @mouseenter="showQR=false" style="margin-left: 5px">验证二维码</a>
                <div class="qr-code-div">
                  <img v-show="showQR" class="qr-code" :src="target.qrCode" alt="出入库二维码" @click="printQR(target.qrCode)"/>
                  <img v-show="!showQR" class="qr-code" :src="target.validateCode" alt="验证二维码" @click="printQR(target.validateCode)"/>
                </div>
              </el-form-item>
            </el-col>
            
          </el-row>
          <el-row class="row-style">
            <el-col :xs="12" :sm="12" :lg="18" :span="6">
              <el-form-item label="项目名称：" prop="location" label-width="140px" class="postInfo-container-item">
                <el-input :value="personal.location"  disabled readonly class="filter-item"  />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="row-style">
            <el-col :xs="24" :sm="12" :lg="6" :span="6">
              <el-form-item label="委托方1：" prop="bailorA" label-width="140px" class="postInfo-container-item">
                <el-input :value="personal.bailorA"  disabled readonly class="filter-item"  />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :lg="6" :span="6">
              <el-form-item label="委托方2：" prop="bailorB" label-width="140px" class="postInfo-container-item">
                <el-input :value="personal.bailorB" disabled readonly class="filter-item"  />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="row-style">
            <el-col :xs="24" :sm="12" :lg="6" :span="6">
              <el-form-item label="评估面积：" prop="acreage" label-width="140px"
                :rules="{ required: true, message: '评估面积不能为空', trigger: 'blur' }" class="postInfo-container-item">
                <el-input :value="target.acreage"  disabled readonly 
                 style="width: 100%;">
                  <template slot="append">
                    <span>平</span>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :lg="6" :span="6">
              <el-form-item label="评估单价：" prop="price" label-width="140px"
                :rules="{ required: true, message: '评估单价不能为空', trigger: 'blur' }" class="postInfo-container-item">
                <el-input :value="target.price"  disabled readonly 
                   style="width: 100%;">
                   <template slot="append">
                    <span>元</span>
                  </template>
                  </el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :lg="6" :span="6">
              <el-form-item label="评估总价：" prop="amount" label-width="140px"
                :rules="{ required: true, message: '评估总价不能为空', trigger: 'blur' }" class="postInfo-container-item">
                <el-input :value="target.amount"  disabled readonly 
                   style="width: 100%;">
                   <template slot="append">
                    <span>万元</span>
                  </template>
                  </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>
      <el-tab-pane name="comparable" class="pane-class" :lazy=true>
        <span slot="label"><i class="el-icon-office-building"></i> 可比实例</span>
        <div class="createMajor-main-container">
            <div class="postInfo-container">
              <div>
                <el-divider content-position="left">
                  <h3 class="title">
                    <div class="avatar-wrapper icon-title">实例</div>
                    <div class="icon-info">可比实例</div>
                  </h3>
                </el-divider>
              </div>
            </div>
            <el-form ref="compareToForm" :model="compareList" v-if="target.isOnline">
          <el-row class="row-style">
            <el-col :xs="24" :sm="12" :lg="4" :span="6">
              <el-form-item label="修正系数：" prop="fixValue" label-width="120px"
                :rules="{ required: true, message: '修正系数不能为空', trigger: 'blur' }" class="postInfo-container-item">
                <el-input-number v-model="compareList.fixValue" :step="0.1" :min="1" size="medium" style="width: 100%;"
                  controls-position="right"></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :lg="4" :span="6">
              <el-form-item label="是否划拨：" prop="rightsType" label-width="120px"
                :rules="{ required: true, message: '是否划拨不能为空', trigger: 'blur' }" class="postInfo-container-item">
                <el-select v-model="compareList.rightsType" placeholder="请选择" @change="selectRightsType()">
                  <el-option label="划拨" value="ALLOT">划拨</el-option>
                  <el-option label="出让" value="SELL">出让</el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :lg="4" :span="6" v-show="compareList.rightsType === 'ALLOT'">
              <el-form-item label="环线位置：" prop="rollingLevel" label-width="120px"
                :rules="{ required: compareList.rightsType === 'ALLOT', message: '是否划拨不能为空', trigger: 'blur' }"
                class="postInfo-container-item">
                <el-select v-model="compareList.rollingLevel" placeholder="请选择" @change="selectRoll()">
                  <el-option label="二环内" :value=1>二环内</el-option>
                  <el-option label="二至三环" :value=2>二至三环</el-option>
                  <el-option label="三环外" :value=3>三环外</el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :lg="4" :span="6">
              <el-form-item label="计算方式：" prop="calculateType" label-width="120px"
                :rules="{ required: true, message: '计算方式不能为空', trigger: 'blur' }" class="postInfo-container-item">
                <el-select v-model="compareList.calculateType" clearable placeholder="请选择"
                  @change="selectCalculateType()">
                  <el-option label="简单算术平均" value="SIMPLE">简单算术平均</el-option>
                  <el-option label="加权算术平均" value="WEIGHT">加权算术平均</el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-table v-loading="calculating" element-loading-text="正在计算..." element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(144, 147, 153, 0.5)" :data="compareList.analysisData" border="border"
            stripe :header-cell-style="{ color: '#333333' }" style="
                              border-left: 1px solid #ebeced;
                              border-right: 1px solid #ebeced;
                              color: #333333; font-size: 16px;">
            <el-table-column prop="index" label="指标" width="180" align="center">
              <template scope="scope">
                <span v-if="requiredIndex.includes(scope.row.index)" style="color:red">* </span>
                <span>{{ scope.row.index }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="compareA" label="实例A" align="center">
              <template scope="scope" style="float:right">
                <div v-if="needWeight.includes(scope.row.index)">
                  <el-input style="width:60%" v-model="scope.row.compareA.valueA" />
                  <el-input-number v-model="scope.row.compareA.weight" :max="150" :min="1" size="small"
                    controls-position="right" style="width:30%;margin-left:10%"></el-input-number>
                </div>
                <div v-else-if="scope.row.index === '市场状况'">
                  <el-date-picker v-model="scope.row.compareA.valueA" type="month" style="width:60%" placeholder="选择月">
                  </el-date-picker>
                  <el-input-number v-model="scope.row.compareA.weight" :max="150" :min="1" size="small"
                    controls-position="right" style="width:30%;margin-left:10%"></el-input-number>
                </div>
                <div v-else-if="scope.row.index === '楼层/总楼层'">
                  <el-input style="width:26%" v-model="scope.row.compareA.valueA" />
                  <span style="margin-left:2%;margin-right:2%">/</span>
                  <el-input style="width:26%" v-model="scope.row.compareA.valueB" />
                  <el-input-number v-model="scope.row.compareA.weight" :min="1" :max="150" size="small"
                    controls-position="right" style="width:30%;margin-left:10%"></el-input-number>
                </div>
                <div v-else-if="scope.row.index === '修正后价格'">
                  <span v-if="scope.row.compareA.valueA"
                    style="color:RGB(144,147,153);font-weight:bold;font-size:20px">￥{{ parseFloat(scope.row.compareA.valueA).toLocaleString() }}</span>
                </div>
                <div v-else-if="scope.row.index === '权重'">
                  <el-input-number v-if="compareList.calculateType === 'WEIGHT'" v-model="scope.row.compareA.valueA"
                    style="width:100%;" :min="0" :max="1" size="small" :step="0.1"
                    controls-position="right"></el-input-number>
                </div>
                <div v-else-if="scope.row.index === '总价(元)'">
                  <span v-if="scope.row.compareA.valueA"
                    style="color:RGB(144,147,153);font-weight:bold;font-size:16px">￥{{ parseFloat(scope.row.compareA.valueA).toLocaleString() }}</span>
                </div>
                <div v-else-if="scope.row.index === '单价(元)'">
                  <el-input-number v-model="scope.row.compareA.valueA" style="width:100%;" :min="0" size="small"
                    controls-position="right"></el-input-number>
                </div>
                <div v-else-if="scope.row.index === '室内装饰'">
                  <el-select v-model="scope.row.compareA.valueA" placeholder="请选择" style="width:60%">
                    <el-option label="精装" value="精装">精装</el-option>
                    <el-option label="中等装修" value="中等装修">中等装修</el-option>
                    <el-option label="简装" value="简装">简装</el-option>
                    <el-option label="清水" value="清水">清水</el-option>
                  </el-select>
                  <el-input-number v-model="scope.row.compareA.weight" :max="150" :min="1" size="small"
                    controls-position="right" style="width:30%;margin-left:10%"></el-input-number>
                </div>
                <div v-else>
                  <el-input style="width:100%" v-model="scope.row.compareA.valueA" />
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="compareB" label="实例B" align="center">
              <template scope="scope" style="float:right">
                <div v-if="needWeight.includes(scope.row.index)">
                  <el-input style="width:60%" v-model="scope.row.compareB.valueA" />
                  <el-input-number v-model="scope.row.compareB.weight" :max="150" :min="1" size="small"
                    controls-position="right" style="width:30%;margin-left:10%"></el-input-number>
                </div>
                <div v-else-if="scope.row.index === '市场状况'">
                  <el-date-picker v-model="scope.row.compareB.valueA" type="month" style="width:60%" placeholder="选择月">
                  </el-date-picker>
                  <el-input-number v-model="scope.row.compareB.weight" :max="150" :min="1" size="small"
                    controls-position="right" style="width:30%;margin-left:10%"></el-input-number>
                </div>
                <div v-else-if="scope.row.index === '楼层/总楼层'">
                  <el-input style="width:26%" v-model="scope.row.compareB.valueA" />
                  <span style="margin-left:2%;margin-right:2%">/</span>
                  <el-input style="width:26%" v-model="scope.row.compareB.valueB" />
                  <el-input-number v-model="scope.row.compareB.weight" :min="1" :max="150" size="small"
                    controls-position="right" style="width:30%;margin-left:10%"></el-input-number>
                </div>
                <div v-else-if="scope.row.index === '修正后价格'">
                  <span v-if="scope.row.compareB.valueA"
                    style="color:RGB(144,147,153);font-weight:bold;font-size:20px">￥{{ parseFloat(scope.row.compareB.valueA).toLocaleString() }}</span>
                </div>
                <div v-else-if="scope.row.index === '权重'">
                  <el-input-number v-if="compareList.calculateType === 'WEIGHT'" v-model="scope.row.compareB.valueA"
                    style="width:100%;" :min="0" :max="1" size="small" :step="0.1"
                    controls-position="right"></el-input-number>
                </div>
                <div v-else-if="scope.row.index === '总价(元)'">
                  <span v-if="scope.row.compareB.valueA"
                    style="color:RGB(144,147,153);font-weight:bold;font-size:16px">￥{{ parseFloat(scope.row.compareB.valueA).toLocaleString() }}</span>
                </div>
                <div v-else-if="scope.row.index === '单价(元)'">
                  <el-input-number v-model="scope.row.compareB.valueA" style="width:100%;" :min="0" size="small"
                    controls-position="right"></el-input-number>
                </div>
                <div v-else-if="scope.row.index === '室内装饰'">
                  <el-select v-model="scope.row.compareB.valueA" placeholder="请选择" style="width:60%">
                    <el-option label="精装" value="精装">精装</el-option>
                    <el-option label="中等装修" value="中等装修">中等装修</el-option>
                    <el-option label="简装" value="简装">简装</el-option>
                    <el-option label="清水" value="清水">清水</el-option>
                  </el-select>
                  <el-input-number v-model="scope.row.compareB.weight" :max="150" :min="1" size="small"
                    controls-position="right" style="width:30%;margin-left:10%"></el-input-number>
                </div>
                <div v-else>
                  <el-input style="width:100%" v-model="scope.row.compareB.valueA" />
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="compareC" label="实例C" align="center">
              <template scope="scope" style="float:right">
                <div v-if="needWeight.includes(scope.row.index)">
                  <el-input style="width:60%" v-model="scope.row.compareC.valueA" />
                  <el-input-number v-model="scope.row.compareC.weight" :max="150" :min="1" size="small"
                    controls-position="right" style="width:30%;margin-left:10%"></el-input-number>
                </div>
                <div v-else-if="scope.row.index === '市场状况'">
                  <el-date-picker v-model="scope.row.compareC.valueA" type="month" style="width:60%" placeholder="选择月">
                  </el-date-picker>
                  <el-input-number v-model="scope.row.compareC.weight" :max="150" :min="1" size="small"
                    controls-position="right" style="width:30%;margin-left:10%"></el-input-number>
                </div>
                <div v-else-if="scope.row.index === '楼层/总楼层'">
                  <el-input style="width:26%" v-model="scope.row.compareC.valueA" />
                  <span style="margin-left:2%;margin-right:2%">/</span>
                  <el-input style="width:26%" v-model="scope.row.compareC.valueB" />
                  <el-input-number v-model="scope.row.compareC.weight" :min="1" :max="150" size="small"
                    controls-position="right" style="width:30%;margin-left:10%"></el-input-number>
                </div>
                <div v-else-if="scope.row.index === '修正后价格'">
                  <span v-if="scope.row.compareC.valueA"
                    style="color:RGB(144,147,153);font-weight:bold;font-size:20px">￥{{ parseFloat(scope.row.compareC.valueA).toLocaleString() }}</span>
                </div>
                <div v-else-if="scope.row.index === '权重'">
                  <el-input-number v-if="compareList.calculateType === 'WEIGHT'" v-model="scope.row.compareC.valueA"
                    style="width:100%;" :min="0" :max="1" size="small" :step="0.1"
                    controls-position="right"></el-input-number>
                </div>
                <div v-else-if="scope.row.index === '总价(元)'">
                  <span v-if="scope.row.compareC.valueA"
                    style="color:RGB(144,147,153);font-weight:bold;font-size:16px">￥{{ parseFloat(scope.row.compareC.valueA).toLocaleString() }}</span>
                </div>
                <div v-else-if="scope.row.index === '单价(元)'">
                  <el-input-number v-model="scope.row.compareC.valueA" style="width:100%;" :min="0" size="small"
                    controls-position="right"></el-input-number>
                </div>
                <div v-else-if="scope.row.index === '室内装饰'">
                  <el-select v-model="scope.row.compareC.valueA" placeholder="请选择" style="width:60%">
                    <el-option label="精装" value="精装">精装</el-option>
                    <el-option label="中等装修" value="中等装修">中等装修</el-option>
                    <el-option label="简装" value="简装">简装</el-option>
                    <el-option label="清水" value="清水">清水</el-option>
                  </el-select>
                  <el-input-number v-model="scope.row.compareC.weight" :max="150" :min="1" size="small"
                    controls-position="right" style="width:30%;margin-left:10%"></el-input-number>
                </div>
                <div v-else>
                  <el-input style="width:100%" v-model="scope.row.compareC.valueA" />
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="target" label="评估对象" align="center">
              <template scope="scope" style="float:right">
                <div v-if="needWeight.includes(scope.row.index)">
                  <el-input style="width:60%" v-model="scope.row.target.valueA" />
                  <el-input-number v-model="scope.row.target.weight" :min="1" size="small" controls-position="right"
                    style="width:30%;margin-left:10%"></el-input-number>
                </div>
                <div v-else-if="scope.row.index === '市场状况'">
                  <el-date-picker v-model="scope.row.target.valueA" type="month" style="width:60%" placeholder="选择月">
                  </el-date-picker>
                  <el-input-number v-model="scope.row.target.weight" :max="150" :min="1" size="small"
                    controls-position="right" style="width:30%;margin-left:10%"></el-input-number>
                </div>
                <div v-else-if="scope.row.index === '楼层/总楼层'">
                  <el-input style="width:26%" v-model="scope.row.target.valueA" />
                  <span style="margin-left:2%;margin-right:2%">/</span>
                  <el-input style="width:26%" v-model="scope.row.target.valueB" />
                  <el-input-number v-model="scope.row.target.weight" :max="150" :min="1" size="small"
                    controls-position="right" style="width:30%;margin-left:10%"></el-input-number>
                </div>
                <div v-else-if="scope.row.index === '修正后价格'">
                  <span v-if="scope.row.target.valueA"
                    style="color:red;font-weight:bold;font-size:20px">￥{{ parseFloat(scope.row.target.valueA).toLocaleString() }}</span>
                </div>
                <div v-else-if="scope.row.index === '权重'">
                  <el-input-number v-if="false" v-model="scope.row.target.valueA" style="width:100%;" :min="0" :max="1"
                    size="small" :step="0.1" controls-position="right"></el-input-number>
                </div>
                <div v-else-if="scope.row.index === '总价(元)' || scope.row.index === '单价(元)'">
                  <span v-if="scope.row.target.valueA"
                    style="color:red;font-weight:bold;font-size:16px">￥{{ parseFloat(scope.row.target.valueA).toLocaleString() }}</span>
                </div>
                <div v-else-if="scope.row.index === '室内装饰'">
                  <el-select v-model="scope.row.target.valueA" placeholder="请选择" style="width:60%">
                    <el-option label="精装" value="精装">精装</el-option>
                    <el-option label="中等装修" value="中等装修">中等装修</el-option>
                    <el-option label="简装" value="简装">简装</el-option>
                    <el-option label="清水" value="清水">清水</el-option>
                  </el-select>
                  <el-input-number v-model="scope.row.target.weight" :max="150" :min="1" size="small"
                    controls-position="right" style="width:30%;margin-left:10%"></el-input-number>
                </div>
                <div v-else>
                  <el-input style="width:100%" v-model="scope.row.target.valueA" />
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-form>
          </div>
      </el-tab-pane>
      <el-tab-pane name="certificateInfo" class="pane-class" :lazy=true>
        <span slot="label"><i class="el-icon-postcard"></i> 证件信息</span>
        <el-tabs v-model="certificateInfo" v-if="certificateInfo!=null">
          <el-tab-pane name="HOUSE_CERTIFICATE" class="pane-class" :lazy=true v-if="houseShow">
            <span slot="label"><i class="el-icon-postcard"></i> 房产证</span>
            <HouseCertificate @custom-event="getPersonalTarget()" :id="target.id" :linkAttributes="linkAttributes"
              :houseCertificateObject="target.houseCertificate" :editStatus="certificateCouldEdit">
            </HouseCertificate>
          </el-tab-pane>
          <el-tab-pane name="LAND_CERTIFICATE" class="pane-class" :lazy=true v-if="landShow">
            <span slot="label"><i class="el-icon-postcard"></i> 国土证</span>
            <LandCertificate @custom-event="getPersonalTarget()" :id="target.id"
              :landCertificateObject="target.landCertificate" :editStatus="certificateCouldEdit"></LandCertificate>
          </el-tab-pane>
          <el-tab-pane name="IMMOVABLE_CERTIFICATE" class="pane-class" :lazy=true v-if="immovalbeShow">
            <span slot="label"><i class="el-icon-postcard"></i> 不动产权证</span>
            <ImmovableCertificate @custom-event="getPersonalTarget()" :id="target.id" :linkAttributes="linkAttributes"
              :immovableCertificateObject="target.immovableCertificate" :editStatus="certificateCouldEdit">
            </ImmovableCertificate>
          </el-tab-pane>
        </el-tabs>
        <span v-else style="color: RGB(168,168,168)">未提供任何证件信息</span>
      </el-tab-pane>
      <el-tab-pane name="otherInfo" class="pane-class" :lazy=true>
        <span slot="label"><i class="el-icon-chat-line-square"></i> 附加信息</span>
        <el-tabs v-model="otherInfo">
          <el-tab-pane name="entityInfo" class="pane-class" :lazy=true>
            <span slot="label"><i class="el-icon-paperclip"></i> 实物状况</span>
            <EntityInfo @custom-event="getPersonalTarget()" ref="entityCompent" :id="target.id"
              :linkAttributes="linkAttributes" :entityInfoObject="target.entityInfo" :editStatus="certificateCouldEdit">
            </EntityInfo>
          </el-tab-pane>
          <el-tab-pane name="backgroundInfo" class="pane-class" :lazy=true>
            <span slot="label"><i class="el-icon-paperclip"></i> 区位状况</span>
            <BackgroundInfo @custom-event="getPersonalTarget()" :id="target.id"
              :backgroundInfoObject="target.backgroundInfo" :editStatus="certificateCouldEdit"></BackgroundInfo>
          </el-tab-pane>
          <el-tab-pane name="sellingAbilityInfo" class="pane-class" :lazy=true>
            <span slot="label"><i class="el-icon-paperclip"></i> 变现能力</span>
            <SellingAbilityInfo @custom-event="getPersonalTarget()" :id="target.id" :outWardStaffId="personal.outwardStaff"
              :sellingAbilityInfoObject="target.sellingAbility" :editStatus="certificateCouldEdit"></SellingAbilityInfo>
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>
      <el-tab-pane name="producution" class="pane-class" :lazy=true>
        <span slot="label"><i class="el-icon-document-checked"></i> 产品信息</span>
        <div class="createMajor-main-container"
          v-if="currentNode.code === 'QUOTATION_FEEDBACK' || currentNode.code === 'STATEMENT_FEEDBACK'">
          <div class="postInfo-container">
            <div>
              <el-divider content-position="left">
                <h3 class="title">
                  <div class="avatar-wrapper icon-title">反馈</div>
                  <div class="icon-info">客户反馈</div>
                </h3>
              </el-divider>
            </div>
            <el-form ref="feedbackFrom" class="form-container" style="margin-top:30px" :rules="rules">
              <el-row>
                <el-col :xs="24" :sm="12" :lg="8" :span="6">
                  <el-form-item label="出具产品类型：" prop="production" label-width="160px" class="postInfo-container-item">
                    <el-checkbox-group v-model="feedback" style="width:300px">
                      <el-checkbox-button label="STATEMENT" name="production">价值意见书</el-checkbox-button>
                      <el-checkbox-button label="REPORT" name="production">报告</el-checkbox-button>
                      <el-checkbox-button label="LETTER" name="production">复评函</el-checkbox-button>
                      <el-tooltip class="item" effect="dark" content="只出具价值意见书，不再出具其他产品。" placement="top-start">
                        <el-checkbox-button v-if="currentNode.nodeCode === 'STATEMENT_FEEDBACK'" label="NONE"
                          name="production">不再出具</el-checkbox-button>
                      </el-tooltip>
                    </el-checkbox-group>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </div>
        <div class="createMajor-main-container">
          <div class="postInfo-container">
            <div>
              <el-divider content-position="left">
                <h3 class="title">
                  <div class="avatar-wrapper icon-title">产品</div>
                  <div class="icon-info">产品信息</div>
                  <el-button type="text" style="margin-left: 20px;" @click="downloadAll()">全部下载</el-button>
                </h3>
              </el-divider>
            </div>
          </div>
        </div>
        <div style="display: flex;margin-top: 100px; width: 100%;">
          <el-card :body-style="{ padding: '0px' }" shadow="always"
            style="margin-left: 5%; margin-right: 5%; width: 20%;">
            <img :src="statementCardPNG" class="image">
            <div style="padding: 14px;">
              <span>房地产意见书</span>
              <span class="checked">{{ statementProd.checkState }}<i v-if="statementProd.checkState"
                  class="el-icon-circle-check"></i></span>
              <time class="time">{{ statementProd.modified }}</time>
              <div class="control">
                <el-button type="text" class="button" @click="doStamp(statementProd.files)" disabled>加盖公章</el-button>
                <el-button type="text" class="button" @click="warehouse()" disabled>出入库</el-button>
                <el-button type="text" class="button" @click="genProductionFile(1)" disabled>系统生成</el-button>
              </div>
            </div>
            <el-upload style="position: relative; top: -10px; padding: 10px;"
              :action="'/api/personalProduction/upload/' + target.id + '/1'" :file-list="statementProd.files" disabled 
              :on-preview="handleAttachmentPreview">
              <el-button type="text" style="position: relative; left: 10px;top: -4px;" disabled>手动上传</el-button>
            </el-upload>

          </el-card>
          <el-card :body-style="{ padding: '0px' }" shadow="always"
            style="margin-left: 5%; margin-right: 5%;width: 20%;">
            <img :src="technicCardPNG" class="image">
            <div style="padding: 14px;">
              <span>技术报告</span>
              <span class="checked">{{ technicReportProd.checkState }}<i v-if="technicReportProd.checkState"
                  class="el-icon-circle-check"></i></span>
              <time class="time">{{ technicReportProd.modified }}</time>
              <div class="control">
                <el-button type="text" class="button" @click="doStamp(technicReportProd.files)"
                  disabled>加盖公章</el-button>
                <el-button type="text" class="button" @click="warehouse()" disabled>出入库</el-button>
                <el-button type="text" class="button" @click="genProductionFile(2)" disabled>系统生成</el-button>
              </div>
            </div>
            <el-upload style="position: relative; top: -10px; padding: 10px;"
              :action="'/api/personalProduction/upload/' + target.id + '/2'" :file-list="technicReportProd.files"
              :on-preview="handleAttachmentPreview">
              <el-button type="text" style="position: relative; left: 10px;top: -4px;" disabled>手动上传</el-button>
            </el-upload>
          </el-card>
          <el-card :body-style="{ padding: '0px' }" shadow="always" style="margin-left: 5%; margin-right: 5%;width: 20%;">
            <img :src="finalCardPNG" class="image">
            <div style="padding: 14px;">
              <span>结果报告</span>
              <span class="checked">{{ finalReprotProd.checkState }}<i v-if="finalReprotProd.checkState"
                  class="el-icon-circle-check"></i></span>
              <time class="time">{{ finalReprotProd.modified }}</time>
              <div class="control">
                <el-button type="text" class="button" @click="doStamp(finalReprotProd.files)" disabled>加盖公章</el-button>
                <el-button type="text" class="button" @click="warehouse()" disabled>出入库</el-button>
                <el-button type="text" class="button" @click="genProductionFile(3)" disabled>系统生成</el-button>
              </div>
            </div>
            <el-upload style="position: relative; top: -10px;padding: 10px;"
              :action="'/api/personalProduction/upload/' + target.id + '/3'" :file-list="finalReprotProd.files"
              :on-preview="handleAttachmentPreview">
              <el-button type="text" style="position: relative; left: 10px;top: -4px;" disabled>手动上传</el-button>
            </el-upload>
          </el-card>
        </div>
      </el-tab-pane>
      <el-tab-pane name="workflowLog" class="pane-class" :lazy=true>
        <span slot="label"><i class="el-icon-date"></i> 流程日志</span>
        <div class="createMajor-main-container">
          <div class="postInfo-container">
            <div>
              <el-divider content-position="left">
                <h3 class="title">
                  <div class="avatar-wrapper icon-title">日志</div>
                  <div class="icon-info">流程审批日志</div>
                </h3>
              </el-divider>
            </div>
          </div>
        </div>
        <el-table :data="workflowLogs" stripe :header-row-style="{ color: '#333333' }" border
          style="width: 100%; margin-top:20px">
          <el-table-column prop="nodeName" label="节点名称" align="center">
          </el-table-column>
          <el-table-column prop="state" label="处理结果" align="center">
          </el-table-column>
          <el-table-column prop="handlerName" label="处理人" align="center">
          </el-table-column>
          <el-table-column prop="longTime" label="处理时长" align="center">
          </el-table-column>
          <el-table-column prop="created" label="处理时间" align="center">
          </el-table-column>
          <el-table-column prop="comments" label="处理意见" align="center" show-overflow-tooltip>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import YDetailPageLayout from '@/components/YDetailPageLayout/index_detail'
import WorkflowBoard from '@/components/workflowBoard'
import HouseCertificate from '@/components/personalForms/houseCertificate'
import LandCertificate from '@/components/personalForms/landCertificate'
import ImmovableCertificate from '@/components/personalForms/immovableCertificate'
import EntityInfo from '@/components/personalForms/entityInfo'
import BackgroundInfo from '@/components/personalForms/backgroundInfo'
import SellingAbilityInfo from '@/components/personalForms/sellingAbilityInfo'
import existPNG from '@/assets/images/exist.png'
import emptyPNG from '@/assets/images/empty.png'

export default {
  name: 'personalTodoDetail',
  components: {
    YDetailPageLayout,
    WorkflowBoard,
    HouseCertificate,
    LandCertificate,
    ImmovableCertificate,
    EntityInfo,
    BackgroundInfo,
    SellingAbilityInfo
  },
  watch: {
    $route(to, from) {
      if (to.path === from.path){
        this.personalId = this.$route.query.id;
        this.businessSubId = this.$route.query.orderId;
        this.nodeName = this.$route.query.currentNodeName;
        this.nodeBusinessInfo.doWorkflow = false
        this.nodeBusinessInfo.businessId = this.$route.query.id;
        this.nodeBusinessInfo.businessSubId = this.$route.query.orderId;
        this.getPersonalTarget();
        this.getPersonal();
        this.getOutWardStaffList();
        this.getWorkflowLogs();
        this.getCurrentNodeInfo();
        this.getProductions();
        this.getScene();
      }
    },
    personal: {
      handler(newVal, oldVal) {
        if (newVal.outwardStaff) {
          this.outwardStaffTip = false;
        } else {
          this.outwardStaffTip = true;
        }
        this.certificateInfo = newVal.credentials[0];
        if (newVal.credentials.includes("HOUSE_CERTIFICATE")){
          this.houseShow = true;
        }else{
          this.houseShow = false;
        }
        if (newVal.credentials.includes("LAND_CERTIFICATE")){
          this.landShow = true;
        }else{
          this.landShow = false;
        }
        if (newVal.credentials.includes("IMMOVABLE_CERTIFICATE")){
          this.immovalbeShow = true;
        }else{
          this.immovalbeShow = false;
        }
      },
      deep: true
    },
    activeTagName: {
      handler(newVal, oldVal) {
        if (newVal != 'order') {
          this.outwardStaffTip = false;
        }
      },
    },
    target: {
      handler(newVal, oldVal) {
        if (newVal.acreage != null && newVal.price != null) {
          newVal.amount = (newVal.acreage * newVal.price/10000).toFixed(2)
        }
        if (newVal.id) {
          this.getProductions();
        }
       
      },
      deep: true
    },
    feedback: {
      handler(newVal, oldVal) {
        if (newVal != oldVal) {
          this.$refs.board.getInstanceQueue();
        }
      },
      deep: true
    }
  },
  computed: {
    certificateCouldEdit() {
      let currentNodeCode = this.$route.query.currentNodeCode;
      if (currentNodeCode === 'GENERATE_STATEMENT') {
        return true;
      } else {
        return false;
      }

    },
  },

  data() {
    return {
      rules: {
        outwardStaff: [
          { required: true, message: '外业人员不能为空', trigger: 'blur' },
        ],
      },
      workflowLogs: [],
      activeName: 'workflowInfo',
      activeTagName: 'order',
      nodeBusinessInfo: {
        currentNodePermission: {
          commit: true,
          reversible: true,
          restartable: true,
          terminable: true,
          skippable: true,
        },
        mainBusiness: "PERSONAL_BUSINESS",
        doWorkflow: false,
        businessId: null,
        currentNodeInstanceId: null,
        currentNodeInstanceCode: null,
        production: [],
        businessSubId: null,
        ifFeedback: null,
        ccId: null
      },
      currentNode: {
        flowId: null,
        pnodeId: null,
        nodeId: null,
        flowCode: null,
        nodeName: "",
        nodeCode: null,
        state: "",
        instanceId: null,
        sequence: null,
        restartable: null,
        reversible: null,
        skippable: null,
        terminable: null,
        tasks: []
      },
      personal: {
        id: null,
        clientManagerId: null,
        clientManager: null,
        evaluateAim: null,
        purpose: [],
        location: null,
        clienteleType: null,
        clienteleId: null,
        cclienteleName: null,
        cclienteleSubName: null,
        agent: null,
        cclienteleContactName: null,
        cmobile: null,
        cdepartment: null,
        cduty: null,
        loanNature: null,
        loanAim: null,
        loanLimit: null,
        loanPeriod: null,
        loanExpire: false,
        credentials: [],
        bailorA: null,
        bailorATel: null,
        bailorB: null,
        bailorBTel: null,
        terminalClienteleType: null,
        tterminalClienteleName: null,
        tterminalClienteleContactName: null,
        tmobile: null,
        remark: null,
        inwardStaffName: null,
        outwardStaff: null,
        outwardStaffName: null,
        pricingStaffName: null,
        inwardStaffName: null,
      },
      outwardStaffs: [],
      outwardStaffTip: true,
      certificateName: null,
      otherInfo: null,
      target: {
        id: null,
        personalId: null,
        location: null,
        acreage: null,
        amount: null,
        price: null,
        isOnline: false,
        feedback: null,
        houseCertificate: null,
        landCertificate: null,
        immovableCertificate: null,
        entityInfo: null,
        backgroundInfo: null,
        sellingAbility: null,
        sellMoney: null,
        sellMoneyBase: null,
        sellMoneyRate: null
      },
      compareList: {
        targetId: null,
        calculateId: null,
        fixValue: 1,
        rightsType: 'SELL',
        rollingLevel: 1,
        calculateType: 'SIMPLE',
        method: 'COMPARE',
        analysisData: [
          {
            "sorted": null,
            "index": "坐落",
            "compareA": { valueA: null },
            "compareB": { valueA: null },
            "compareC": { valueA: null },
            "target": { valueA: null },
          },
          {
            "sorted": null,
            "index": "总价(元)",
            "compareA": { valueA: null },
            "compareB": { valueA: null },
            "compareC": { valueA: null },
            "target": { valueA: null },
          },
          {
            "sorted": null,
            "index": "单价(元)",
            "compareA": { valueA: null },
            "compareB": { valueA: null },
            "compareC": { valueA: null },
            "target": { valueA: null },
          },
          {
            "sorted": null,
            "index": "市场状况",
            "compareA": { valueA: null, weight: 100 },
            "compareB": { valueA: null, weight: 100 },
            "compareC": { valueA: null, weight: 100 },
            "target": { valueA: null, weight: 100 },
          },
          {
            "sorted": null,
            "index": "所在楼栋",
            "compareA": { valueA: '对中庭', weight: 100 },
            "compareB": { valueA: '对中庭', weight: 100 },
            "compareC": { valueA: '对中庭', weight: 100 },
            "target": { valueA: '对中庭', weight: 100 },
          },
          {
            "sorted": null,
            "index": "建筑面积(平)",
            "compareA": { valueA: 0, weight: 100 },
            "compareB": { valueA: 0, weight: 100 },
            "compareC": { valueA: 0, weight: 100 },
            "target": { valueA: 0, weight: 100 },
          },
          {
            "sorted": null,
            "index": "楼层/总楼层",
            "compareA": { valueA: null, valueb: null, weight: 100 },
            "compareB": { valueA: null, valueb: null, weight: 100 },
            "compareC": { valueA: null, valueb: null, weight: 100 },
            "target": { valueA: null, valueb: null, weight: 100 },
          },
          {
            "sorted": null,
            "index": "户型",
            "compareA": { valueA: null, weight: 100 },
            "compareB": { valueA: null, weight: 100 },
            "compareC": { valueA: null, weight: 100 },
            "target": { valueA: null, weight: 100 },
          },
          {
            "sorted": null,
            "index": "室内装饰",
            "compareA": { valueA: '精装', weight: 100 },
            "compareB": { valueA: '精装', weight: 100 },
            "compareC": { valueA: '精装', weight: 100 },
            "target": { valueA: '精装', weight: 100 },
          },
          {
            "sorted": null,
            "index": "其他",
            "compareA": { valueA: null, weight: 100 },
            "compareB": { valueA: null, weight: 100 },
            "compareC": { valueA: null, weight: 100 },
            "target": { valueA: null, weight: 100 },
          },
          {
            "sorted": null,
            "index": "修正后价格",
            "compareA": { valueA: null },
            "compareB": { valueA: null },
            "compareC": { valueA: null },
            "target": { valueA: null },
          }
        ],
        price: null,
        amount: null,
        acreage: null,
        sellMoney: null,
        sellMoneyBase: null,
        sellMoneyRate: null
      },
      needWeight: ['所在楼栋', '建筑面积(平)', '户型', '其他'],
      requiredIndex: ['单价(元)', '坐落', '市场状况', '所在楼栋', '建筑面积(平)', '户型', '室内装饰', '楼层/总楼层', '权重'],
      calculateWeight: {
        "sorted": null,
        "index": "权重",
        "compareA": { valueA: null },
        "compareB": { valueA: null },
        "compareC": { valueA: null },
        "target": { valueA: null },
      },
      calculating: false,
      decideProductionTypeDialog: false,
      linkAttributes: {
        location: null,
        bailor1: null,
        bailor1Tel: null,
        bailor2: null,
        bailor2Tel: null,
        acreage: null,
        allFloor: null,
        purpose: null,
        ownerName: null,
        atFloor: null

      },
      statementProd: {
        id: null,
        targetId: null,
        files: [],
        created: null,
        checkSatae: null
      },
      technicReportProd: {
        id: null,
        targetId: null,
        files: [],
        created: null,
        checkSatae: null
      },
      finalReprotProd: {
        id: null,
        targetId: null,
        files: [],
        created: null,
        checkSatae: null
      },
      statementCardPNG: emptyPNG,
      technicCardPNG: emptyPNG,
      finalCardPNG: emptyPNG,
      outWarehouseDialog: false,
      inWarehouseDialog: false,
      warehouseTip: null,
      productionId: null,
      // hasStatement: false,
      // hasReport: false,
      feedback: null,
      checkDialog: false,
      checkProDTO: {
        targetId: null,
        production: null
      },
      sceneForm: {
        id: null,
        personalId: null,
        inRingDewlling: null,
        outRingDewlling: null,
        inRingBuilding: null,
        outRingBuilding: null,
        remark: null
      },
      otherInfo: 'entityInfo',
      certificateInfo: null,
      houseShow:false,
      immovalbeShow:false,
      landShow:false,
      qrCodeUrl:null,
      showQR:true

    }
  },

  created() {
    this.personalId = this.$route.query.id;
    this.businessSubId = this.$route.query.orderId;
    this.nodeName = this.$route.query.currentNodeName;
    this.nodeBusinessInfo.doWorkflow = false
    this.nodeBusinessInfo.businessId = this.$route.query.id;
    this.nodeBusinessInfo.businessSubId = this.$route.query.orderId;
    this.getPersonalTarget();
    this.getPersonal();
    this.getOutWardStaffList();
    this.getWorkflowLogs();
    this.getCurrentNodeInfo();
    this.getProductions();
    this.getScene();
  },

  methods: {
    getPersonal() {
      if (this.personalId) {
        this.$api.personal.detail(this.personalId).then(res => {
          if (res.code === 200) {
            res.data.credentials = JSON.parse(res.data.credentials);
            res.data.purpose = JSON.parse(res.data.purpose);
            this.personal = res.data;
            this.linkAttributes.location = this.personal.location;
            this.linkAttributes.bailor1 = this.personal.bailorA;
            this.linkAttributes.bailor1Tel = this.personal.bailoraTel;
            this.linkAttributes.bailor2 = this.personal.bailorB;
            this.linkAttributes.bailor2Tel = this.personal.bailorbTel;
            this.linkAttributes.purpose = this.personal.purpose;
            if (this.personal.evaluateAim === '抵押') {
              this.linkAttributes.ownerName = this.personal.bailorA;
            }
            this.nodeBusinessInfo.ccId = this.personal.clienteleId;
          }
        })
      }
    },
    getPersonalTarget() {
      if (this.personalId) {
        this.$api.personalTarget.detail(this.personalId).then(res => {
          if (res.code === 200) {
            this.target = res.data;
            this.linkAttributes.acreage = this.target.acreage;
            if (res.data.isOnline) {
              this.getCaluateTable(res.data.id)
            }
            if (res.data.houseCertificate) {
              this.target.houseCertificate = JSON.parse(res.data.houseCertificate);
            }
            if (res.data.landCertificate) {
              this.target.landCertificate = JSON.parse(res.data.landCertificate);
            }
            if (res.data.immovableCertificate) {
              this.target.immovableCertificate = JSON.parse(res.data.immovableCertificate);
            }
            if (res.data.entityInfo) {
              this.target.entityInfo = JSON.parse(res.data.entityInfo);
            }
            if (res.data.backgroundInfo) {
              this.target.backgroundInfo = JSON.parse(res.data.backgroundInfo);
            }
            if (res.data.sellingAbility) {
              this.target.sellingAbility = JSON.parse(res.data.sellingAbility);
            }
            if (res.data.feedback) {
              this.feedback = JSON.parse(res.data.feedback);
              this.nodeBusinessInfo.production = this.feedback;
              // if (this.feedback.includes("STATEMENT")) {
              //   this.hasStatement = true;
              // }
              // if (this.feedback.includes("REPORT")) {
              //   this.hasReport = true;
              // }
            } else {
              this.feedback = [];
            }

          }
        })
      }
    },
    getCurrentNodeInfo() {
      if (this.personalId) {
        this.$api.workNodeInstance.currentNode({ "mainBusiness": "PERSONAL_BUSINESS", "businessId": this.personalId, "businessSubId": this.businessSubId }).then(res => {
          if (res.code === 200) {
            if (res.data) {
              this.currentNode = res.data;
              this.nodeBusinessInfo.currentInstanceNodeId = res.data.instanceId;
              this.nodeBusinessInfo.currentNodeInstanceCode = res.data.nodeCode;
              this.nodeBusinessInfo.currentNodePermission.restartable = res.data.restartable;
              this.nodeBusinessInfo.currentNodePermission.reversible = res.data.reversible;
              this.nodeBusinessInfo.currentNodePermission.skippable = res.data.skippable;
              this.nodeBusinessInfo.currentNodePermission.terminable = res.data.terminable;
            }
          }
        })
      }
    },
    handleClick(tab) { },
   
    getWorkflowLogs() {
      let param = {
        businessId: this.personalId,
        businessType: 'PERSONAL_BUSINESS',
        businessSubId: this.businessSubId
      }
      this.$api.workflowLog.list(param).then(res => {
        if (res.code === 200) {
          this.workflowLogs = res.data;
        }
      })
    },
    goBack() {
      const back = this.$route.query.back
      if (back) {
        this.$router.push(back)
      }
    },
    getOutWardStaffList() {
      this.$api.user.postUser("个贷外业岗").then(res => {
        if (res.code === 200) {
          this.outwardStaffs = res.data;
        }
      })
    },

    getCaluateTable(targetId) {
      if (targetId) {
        this.$api.personalCalculate.getResult(targetId).then(res => {
          if (res.code === 200 && res.data) {
            this.compareList = res.data;
            this.linkAttributes.allFloor = this.compareList.analysisData[6].target.valueB;
            this.linkAttributes.atFloor = this.compareList.analysisData[6].target.valueA;
            this.linkAttributes.houseType = this.compareList.analysisData[7].target.valueA;
          }
        })
      }
    },
    calculateSwith() {
      this.$api.personalTarget.calculateSwith(this.target.isOnline, this.target.id);
      if (this.target.isOnline && !this.compareList.calculateId) {
        this.getCaluateTable(this.target.id);
      }
      if (this.target.isOnline) {
        setTimeout(() => {
          const element = document.getElementById("evaluteObject");
          element.scrollTop = element.scrollHeight;
        }, 500);

      }
    },
    getProductions() {
      if (this.target.id) {
        this.$api.personalProduction.getProductions(this.target.id).then(res => {
          if (res.code === 200) {
            const words = res.data
            words.forEach(word => {
              if (word.production === 'STATEMENT') {
                this.statementProd = word;
                const fs = [];
                if (word.filePath) {
                  this.statementCardPNG = existPNG;
                  const sta = JSON.parse(word.filePath)
                  sta.id = word.id;
                  fs.push(sta);
                } else {
                  this.statementCardPNG = emptyPNG;
                }
                this.statementProd.files = fs;
              }
              if (word.production === 'TECHNIC') {
                this.technicReportProd = word;
                const fs = [];
                if (word.filePath) {
                  const tec = JSON.parse(word.filePath)
                  tec.id = word.id;
                  this.technicCardPNG = existPNG;
                  fs.push(tec);
                } else {
                  this.technicCardPNG = emptyPNG;
                }
                this.technicReportProd.files = fs;
              }
              if (word.production === 'FINAL') {
                this.finalReprotProd = word;
                const fs = [];
                if (word.filePath) {
                  const final = JSON.parse(word.filePath)
                  final.id = word.id;
                  this.finalCardPNG = existPNG;
                  fs.push(final);
                } else {
                  this.finalCardPNG = emptyPNG;
                }
                this.finalReprotProd.files = fs;
              }
            });
          }
        })
      }
    },
    downloadPkg() {
      if (this.target.id) {
        this.$api.personalProduction.downloadPkg(this.target.id);
      }
    },
    getScene() {
      this.$api.personalScene.getScene(this.personalId).then(res => {
        if (res.code === 200 && res.data) {
          this.sceneForm = res.data;
        }
      })
    },
    printQR(path){
      let routeUrl = this.$router.resolve({
          path: `/print/code?path=${path}`
      });
      window.open(routeUrl.href, '_blank');
  
    },

    handleAttachmentPreview(file) {
      // window.open(file.url)
      this.officeFileView(file.name, file.url);
    },
    // 文档预览
    officeFileView(name, url) {
      if (name || url) {
        const route = this.$router.resolve({
          path: "/office/view/window",
          query: {
            // 文档标题
            title: name,
            // 文档url地址
            url: url,
            mode:'view'
          }
        });
        // 在新窗口打开页面
        window.open(route.href, "_blank");
      } else {
        this.$notify({
          title: '失败',
          message: 'url为空，无法打开，如未保存请保存后再试！',
          type: 'error',
          duration: 2000
        });
      }
    },

    downloadAll(){
      if (this.target.id) {
        let fileName = this.businessSubId;
        this.$api.personalProduction.downloadPkg(this.target.id).then(res=>{
          let blob = new Blob([res],{type:"application/octet-stream;"})
            const url = window.URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.href = url;
            console.log(blob)
            link.setAttribute('download',fileName+'产品包.zip');
            document.body.appendChild(link);
            link.click();
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.row-style {
  margin-left: 40px;
  margin-right: 1%;
}

.major-radio {
  width: 92px
}

.task-class {
  /deep/ .el-form-item__label {
    color: red;
  }
}

.evaluate-table {
  margin-left: 40px;
  margin-top: 35px;
}

.pane-class {
  width: 100%;
  overflow-y: scroll;
}

/deep/ .cell-class {
  font-size: 13px;
  color: black;
}

.table {
  /deep/ thead {
    .el-table-column--selection {
      .cell {
        display: none;
      }
    }
  }
}

/deep/.doWarehouseClass {
  border-radius: 10px;
}

.button-area {
  position: absolute;
  top: 20px;
  right: 50px;
}

.error-type {
  margin-right: 5px;
}

.error-type:hover {
  cursor: pointer;
}

.box-card {
  margin-top: 40px
}

.time {
  font-size: 13px;
  color: #999;
  float: right;
  margin-top: 5px;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  float: left;
}

.image {
  width: 100%;
  padding: 0%;
  display: block;
}

.control {
  z-index: 999;
  position: relative;
  top: 10px;
}

.checked {
  margin-left: 10px;
  font-size: 12px;
  color: green;
}
.qr-code-div{
  background-color: RGB(245, 245, 245);
  width: 150px;
  height: 150px;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}
.qr-code{
  width: 150px;
  height: 150px;
  z-index: 999;
  border: 1px #919398 solid;
  border-radius: 5px;
  }
.qr-code-div:hover {
  cursor: pointer;
  // background-color:RGB(220,220,220); 
  // width: 205px; 
  // height: 205px; 

}
a:hover{
  cursor: pointer;
  color: #5a9cf8
}
</style>