drp-ui/src/views/business/spd/bo/basic/details.vue

<!-- 商机-详情 -->
<template>
  <div class="md-content">
    <!-- 头部信息 -->
    <el-row type="flex" justify="space-between">
      <el-col :span="6">
        <el-button size="small" @click="handleBack">返回</el-button>
      </el-col>
      <el-form ref="form" :model="form.basic">
        <el-col :span="10">
          <el-input
            v-model="form.basic.boName"
            placeholder="商机名称"
            size="medium"
            :disabled = "true"
          />
        </el-col>
        <el-col :span="6">
          <el-select
            v-model="form.basic.boState"
            placeholder="商机状态"
            size="medium"
            :disabled = "true"
          >
            <el-option
              v-for="dict in dict.type.mk_bo_state"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-select
            v-model="form.basic.winningState"
            placeholder="赢丢单状态"
            size="medium"
            :disabled = "true"
          >
            <el-option
              v-for="dict in dict.type.mk_bo_winstate"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-col>
      </el-form>
      <el-button-group>
        <el-col :span="6">
          <el-button size="small" icon="el-icon-d-arrow-left"></el-button>
        </el-col>
        <el-col :span="6">
          <el-button size="small" icon="el-icon-arrow-left"></el-button>
        </el-col>
        <el-col :span="6">
          <el-button size="small" icon="el-icon-arrow-right"></el-button>
        </el-col>
        <el-col :span="6">
          <el-button size="small" icon="el-icon-d-arrow-right"></el-button>
        </el-col>
      </el-button-group>
    </el-row>
    <!-- 主多页签 -->
    <el-tabs v-model="masterTabs" @tab-click="masterTabsSwitch">
      <!-- 基本信息页签 -->
      <el-tab-pane label="基本信息" name="first">
        项目流程
        <el-steps :active="form.basic.boStage" finish-status="success">
          <el-step title="商机审核" @click.native="viewingProcedure(0)"></el-step>
          <el-step title="项目立项" @click.native="viewingProcedure(1)"></el-step>
          <el-step title="售前提案/邀请考察" @click.native="viewingProcedure(2)"></el-step>
          <el-step title="开院务会" @click.native="viewingProcedure(3)"></el-step>
          <el-step title="院内立项" @click.native="viewingProcedure(4)"></el-step>
          <el-step title="进场调研" @click.native="viewingProcedure(5)"></el-step>
          <el-step title="解决方案" @click.native="viewingProcedure(6)"></el-step>
          <el-step title="投标与签合同" @click.native="viewingProcedure(7)"></el-step>
          <el-step title="进场实施" @click.native="viewingProcedure(8)"></el-step>
          <el-step title="落地方案" @click.native="viewingProcedure(9)"></el-step>
          <el-step title="实施交付" @click.native="viewingProcedure(10)"></el-step>
          <el-step title="上线仪式" @click.native="viewingProcedure(11)"></el-step>
        </el-steps>
        <!-- 流程按钮组 -->
        <div style="text-align: center">
          <el-button
            type="primary"
            style="margin-top: 12px"
            @click="next"
            v-show="form.basic.boStage == 0"
          >
            审核
          </el-button>
          <el-button
            style="margin-top: 12px"
            @click="next"
            v-show="
              !(
                form.basic.boStage == 0 ||
                form.basic.boFlow.projectApproval == 0
              ) &&
              !isUpdate &&
              this.form.basic.boStage < 12
            "
            >变更为下一阶段</el-button>
            <!-- <el-button style="margin-top: 12px;" @click="before" v-if="form.basic.boStage > 1">上一步</el-button> -->
        </div>
        <!-- 次多页签 -->
        <el-divider content-position="left" style="font-size: 30px">该阶段任务</el-divider>
        <el-tabs v-model="secondTabs" @tab-click="secondTabsSwitch">
          <!-- 阶段动作1 -->
          <el-tab-pane
            label="阶段动作"
            name="jd1"
            style="height: 200px; overflow-y: scroll"
            v-if="this.secondTabsName.jd1"
          >
            <el-form
              ref="form"
              :model="form.basic"
              :rules="rules"
              label-width="120px"
            >
              <el-row>
                <el-col :span="10">
                  <el-form-item label="医院应收总额" prop="totalHosRevenue">
                    <el-select
                      v-model="form.basic.totalHosRevenue"
                      placeholder="请输入医院营收总额"
                      :disabled="true"
                    >
                      <el-option
                        v-for="dict in dict.type.mk_bo_total_revenue"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="10">
                  <el-form-item label="医院耗材预估额" prop="hosDiscreetValue">
                    <el-input
                      v-model="form.basic.hosDiscreetValue"
                      placeholder="医院耗材预估额"
                      readonly
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-tab-pane>
          <!-- 阶段动作2 -->
          <el-tab-pane
            label="阶段动作"
            name="jd2"
            style="height: 200px; overflow-y: scroll"
            v-if="this.secondTabsName.jd2"
          >
            <el-form ref="form" :model="form.basic.boFlow" :rules="rules">
              <el-row>
                项目立项是否通过
                <el-radio
                  v-model="form.basic.boFlow.projectApproval"
                  label="1"
                  :disabled="!isUpdate"
                  >是</el-radio
                >
                <el-radio
                  v-model="form.basic.boFlow.projectApproval"
                  label="0"
                  :disabled="!isUpdate"
                  >否</el-radio
                >
              </el-row>
              <el-row v-if="form.basic.boFlow.projectApproval == 1">
                <el-col :span="1.5">
                  <el-input
                    v-model="form.basic.boFlow.businessCouncilAccessoryName"
                    placeholder="请上传商机审议会"
                    readonly
                  />
                </el-col>
                <el-col
                  :span="1.5"
                  v-show="!form.basic.boFlow.businessCouncilAccessoryUrlId"
                >
                  <el-button
                    type="info"
                    plain
                    icon="el-icon-upload2"
                    size="mini"
                    @click="uploadAccessory(`business_council_accessory`)"
                    >上传</el-button
                  >
                </el-col>
                <el-col
                  :span="1.5"
                  v-show="form.basic.boFlow.businessCouncilAccessoryUrlId"
                >
                  <el-button
                    type="warning"
                    plain
                    icon="el-icon-download"
                    size="mini"
                    @click="
                      exportAccessory(
                        form.basic.boFlow.businessCouncilAccessoryUrlId,
                        form.basic.boFlow.businessCouncilAccessoryName
                      )
                    "
                    >下载</el-button
                  >
                </el-col>
                <el-col
                  :span="1.5"
                  v-show="form.basic.boFlow.businessCouncilAccessoryUrlId"
                >
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-delete"
                    @click="deleteAccessory(`business_council_accessory`, 1)"
                    >删除</el-button
                  >
                </el-col>
              </el-row>
              <el-row v-if="form.basic.boFlow.projectApproval == 1">
                <el-col :span="1.5">
                  <el-input
                    v-model="form.basic.boFlow.projectProposalAccessoryName"
                    placeholder="请上传立项书"
                    readonly
                  />
                </el-col>
                <el-col
                  :span="1.5"
                  v-show="!form.basic.boFlow.projectProposalAccessoryUrlId"
                >
                  <el-button
                    type="info"
                    plain
                    icon="el-icon-upload2"
                    size="mini"
                    @click="uploadAccessory(`project_proposal_accessory`)"
                    >上传</el-button
                  >
                </el-col>
                <el-col
                  :span="1.5"
                  v-show="form.basic.boFlow.projectProposalAccessoryUrlId"
                >
                  <el-button
                    type="warning"
                    plain
                    icon="el-icon-download"
                    size="mini"
                    @click="
                      exportAccessory(
                        form.basic.boFlow.projectProposalAccessoryUrlId,
                        form.basic.boFlow.projectProposalAccessoryName
                      )
                    "
                    >下载</el-button
                  >
                </el-col>
                <el-col
                  :span="1.5"
                  v-show="form.basic.boFlow.projectProposalAccessoryUrlId"
                >
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-delete"
                    @click="deleteAccessory(`project_proposal_accessory`, 1)"
                    >删除</el-button
                  >
                </el-col>
              </el-row>
              <el-row>
                <el-col
                  :span="10"
                  v-if="form.basic.boFlow.projectApproval == 0"
                >
                  项目未通过原因：<el-input
                    v-model="form.basic.boFlow.noPassCause"
                    :disabled="!isUpdate"
                  />
                </el-col>
              </el-row>
            </el-form>
          </el-tab-pane>
          <!-- 立项模板 -->
          <el-tab-pane
            label="立项模板"
            name="lx"
            style="height: 200px; overflow-y: scroll"
            v-if="this.secondTabsName.lx"
          >
            <el-table
              :data="tableData"
              style="width: 100%">
              <el-table-column
                prop="type"
                label="文件类型"
                width="180">
              </el-table-column>
              <el-table-column
                prop="name"
                label="文件名称"
                width="180">
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <!-- 项目人员组成 -->
          <el-tab-pane
            label="项目人员组成"
            name="xmry"
            style="height: 200px; overflow-y: scroll"
            v-if="this.secondTabsName.xmry"
          >
            <PojpsnList
              :source="'BoDetails'"
              :bo="this.form.basic"
              v-if="secondTabs == 'xmry'"
            />
          </el-tab-pane>
          <!-- 方案模板 -->
          <el-tab-pane
            label="方案模板"
            name="fa"
            style="height: 200px; overflow-y: scroll"
            v-if="this.secondTabsName.fa"
          >
            <!-- <el-row>
              <el-button @click="pojproDownload">售前提案文件模板</el-button>
            </el-row>
            <el-row>
              <el-button @click="pojproDownload">考察报告模板</el-button>
            </el-row>
            <el-row>
              <el-button @click="pojproDownload">调研相关文件模板</el-button>
            </el-row>
            <el-row>
              <el-button @click="pojproDownload">投标模板</el-button>
            </el-row>
            <el-row>
              <el-button @click="pojproDownload">其他文件</el-button>
            </el-row> -->
            <el-table
              :data="tableData1"
              style="width: 100%">
              <el-table-column
                prop="type"
                label="文件类型"
                width="180">
              </el-table-column>
              <el-table-column
                prop="name"
                label="文件名称"
                width="250">
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <!-- 售前提案 -->
          <el-tab-pane
            label="售前提案"
            name="sq"
            style="height: 200px; overflow-y: scroll"
            v-if="this.secondTabsName.sq"
          >
            <el-form ref="form" :model="form.basic.boFlow" :rules="rules">
              <el-row>
                <el-col :span="1.5">
                  <el-input
                    v-model="form.basic.boFlow.preSaleProposalAccessoryName"
                    placeholder="请上传售前提案文件"
                    readonly
                  />
                </el-col>
                <el-col
                  :span="1.5"
                  v-show="!form.basic.boFlow.preSaleProposalAccessoryUrlId"
                >
                  <el-button
                    type="info"
                    plain
                    icon="el-icon-upload2"
                    size="mini"
                    @click="uploadAccessory(`pre_sale_proposal_accessory`)"
                    >上传</el-button
                  >
                </el-col>
                <el-col
                  :span="1.5"
                  v-show="form.basic.boFlow.preSaleProposalAccessoryUrlId"
                >
                  <el-button
                    type="warning"
                    plain
                    icon="el-icon-download"
                    size="mini"
                    @click="
                      exportAccessory(
                        form.basic.boFlow.preSaleProposalAccessoryUrlId,
                        form.basic.boFlow.preSaleProposalAccessoryName
                      )
                    "
                    >下载</el-button
                  >
                </el-col>
                <el-col
                  :span="1.5"
                  v-show="form.basic.boFlow.preSaleProposalAccessoryUrlId"
                >
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-delete"
                    @click="deleteAccessory(`pre_sale_proposal_accessory`, 1)"
                    >删除</el-button
                  >
                </el-col>
              </el-row>
            </el-form>
          </el-tab-pane>
          <!-- 邀请考察 -->
          <el-tab-pane
            label="邀请考察"
            name="kc"
            style="height: 200px; overflow-y: scroll"
            v-if="this.secondTabsName.kc"
          >
            <el-form ref="form" :model="form.basic.boFlow" :rules="rules">
              <el-row>
                <el-col :span="5">
                  <el-form-item label="考察开始时间" prop="inspectStartTime">
                    <el-date-picker
                      v-model="form.basic.boFlow.inspectStartTime"
                      type="datetime"
                      placeholder="选择日期时间"
                      :disabled="!isUpdate"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="考察结束时间" prop="inspectStartTime">
                    <el-date-picker
                      v-model="form.basic.boFlow.inspectEndTime"
                      type="datetime"
                      placeholder="选择日期时间"
                      :disabled="!isUpdate"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="1.5">
                  <el-input
                    v-model="form.basic.boFlow.investigationReportAccessoryName"
                    placeholder="请上传考察报告"
                    readonly
                  />
                </el-col>
                <el-col
                  :span="1.5"
                  v-show="!form.basic.boFlow.investigationReportAccessoryUrlId"
                >
                  <el-button
                    type="info"
                    plain
                    icon="el-icon-upload2"
                    size="mini"
                    @click="uploadAccessory(`investigation_report_accessory`)"
                    >上传</el-button
                  >
                </el-col>
                <el-col
                  :span="1.5"
                  v-show="form.basic.boFlow.investigationReportAccessoryUrlId"
                >
                  <el-button
                    type="warning"
                    plain
                    icon="el-icon-download"
                    size="mini"
                    @click="
                      exportAccessory(
                        form.basic.boFlow.investigationReportAccessoryUrlId,
                        form.basic.boFlow.investigationReportAccessoryName
                      )
                    "
                    >下载</el-button
                  >
                </el-col>
                <el-col
                  :span="1.5"
                  v-show="form.basic.boFlow.investigationReportAccessoryUrlId"
                >
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-delete"
                    @click="
                      deleteAccessory(`investigation_report_accessory`, 1)
                    "
                    >删除</el-button
                  >
                </el-col>
              </el-row>
            </el-form>
          </el-tab-pane>
          <!-- 开院务会 -->
          <el-tab-pane
            label="开院务会"
            name="kh"
            style="height: 200px; overflow-y: scroll"
            v-if="this.secondTabsName.kh"
          >
            <el-form ref="form" :model="form.basic.boFlow" :rules="rules">
              <el-row>
                <el-col :span="5">
                  <el-form-item label="开院务会时间" prop="conferenceTime">
                    <el-date-picker
                      v-model="form.basic.boFlow.conferenceTime"
                      type="datetime"
                      placeholder="选择日期时间"
                      :disabled="!isUpdate"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-tab-pane>
          <!-- 院内立项 -->
          <el-tab-pane
            label="院内立项"
            name="yn"
            style="height: 200px; overflow-y: scroll"
            v-if="this.secondTabsName.yn"
          >
            <el-form ref="form" :model="form.basic.boFlow" :rules="rules">
              <el-row>
                <el-col :span="5">
                  <el-form-item
                    label="院内立项时间"
                    prop="hospitalApprovalTime"
                  >
                    <el-date-picker
                      v-model="form.basic.boFlow.hospitalApprovalTime"
                      type="datetime"
                      placeholder="选择日期时间"
                      :disabled="!isUpdate"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item
                    label="院内立项牵头人"
                    prop="hospitalApprovalInitiator"
                  >
                    <el-input
                      v-model="form.basic.boFlow.hospitalApprovalInitiator"
                      placeholder="院内立项牵头人"
                      :disabled="!isUpdate"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-tab-pane>
          <!-- 进场调研 -->
          <el-tab-pane
            label="进场调研"
            name="jc"
            style="height: 200px; overflow-y: scroll"
            v-if="this.secondTabsName.jc"
          >
            <el-form ref="form" :model="form.basic.boFlow" :rules="rules">
              <el-row>
                <el-col :span="5">
                  <el-form-item label="调研时间" prop="researchTime">
                    <el-date-picker
                      v-model="form.basic.boFlow.researchTime"
                      type="datetime"
                      placeholder="选择日期时间"
                      :disabled="!isUpdate"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="1.5">
                  <el-input
                    v-model="form.basic.boFlow.investigateReportAccessoryName"
                    placeholder="请上传调研报告"
                    readonly
                  />
                </el-col>
                <el-col
                  :span="1.5"
                  v-show="!form.basic.boFlow.investigateReportAccessoryUrlId"
                >
                  <el-button
                    type="info"
                    plain
                    icon="el-icon-upload2"
                    size="mini"
                    @click="uploadAccessory(`investigate_report_accessory`)"
                    >上传</el-button
                  >
                </el-col>
                <el-col
                  :span="1.5"
                  v-show="form.basic.boFlow.investigateReportAccessoryUrlId"
                >
                  <el-button
                    type="warning"
                    plain
                    icon="el-icon-download"
                    size="mini"
                    @click="
                      exportAccessory(
                        form.basic.boFlow.investigateReportAccessoryUrlId,
                        form.basic.boFlow.investigateReportAccessoryName
                      )
                    "
                    >下载</el-button
                  >
                </el-col>
                <el-col
                  :span="1.5"
                  v-show="form.basic.boFlow.investigateReportAccessoryUrlId"
                >
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-delete"
                    @click="
                      deleteAccessory(`investigate_report_accessory`, 1)
                    "
                    >删除</el-button
                  >
                </el-col>
              </el-row>
            </el-form>
          </el-tab-pane>
          <!-- 挂网投标 -->
          <el-tab-pane
            label="挂网投标"
            name="gw"
            style="height: 200px; overflow-y: scroll"
            v-if="this.secondTabsName.gw"
          >
            <el-form ref="form" :model="form.basic.boFlow" :rules="rules">
              <el-row>
                <el-col :span="5">
                  <el-form-item label="挂网时间" prop="researchTime">
                    <el-date-picker
                      v-model="form.basic.boFlow.hangingTime"
                      type="datetime"
                      placeholder="选择日期时间"
                      :disabled="!isUpdate"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="1.5">
                  <el-input
                    v-model="form.basic.boFlow.biddingDocumentsAccessoryName"
                    placeholder="请上传投标书"
                    readonly
                  />
                </el-col>
                <el-col
                  :span="1.5"
                  v-show="!form.basic.boFlow.biddingDocumentsAccessoryUrlId"
                >
                  <el-button
                    type="info"
                    plain
                    icon="el-icon-upload2"
                    size="mini"
                    @click="uploadAccessory(`bidding_documents_accessory`)"
                    >上传</el-button
                  >
                </el-col>
                <el-col
                  :span="1.5"
                  v-show="form.basic.boFlow.biddingDocumentsAccessoryUrlId"
                >
                  <el-button
                    type="warning"
                    plain
                    icon="el-icon-download"
                    size="mini"
                    @click="
                      exportAccessory(
                        form.basic.boFlow.biddingDocumentsAccessoryUrlId,
                        form.basic.boFlow.biddingDocumentsAccessoryName
                      )
                    "
                    >下载</el-button
                  >
                </el-col>
                <el-col
                  :span="1.5"
                  v-show="form.basic.boFlow.biddingDocumentsAccessoryUrlId"
                >
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-delete"
                    @click="deleteAccessory(`bidding_documents_accessory`, 1)"
                    >删除</el-button
                  >
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="5">
                  投标是否通过
                  <el-radio
                    v-model="form.basic.boFlow.biddingDocumentsPass"
                    label="1"
                    :disabled="!isUpdate"
                    >是</el-radio
                  >
                  <el-radio
                    v-model="form.basic.boFlow.biddingDocumentsPass"
                    label="0"
                    :disabled="!isUpdate"
                    >否</el-radio
                  >
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="5">
                  <el-form-item label="我方优势" prop="researchTime" v-show="this.form.basic.boFlow.biddingDocumentsPass == '1'">
                    <el-input
                      v-model="form.ourAdvantage"
                      placeholder="我方优势"
                      :disabled="!isUpdate"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="我方劣势" prop="researchTime" v-show="this.form.basic.boFlow.biddingDocumentsPass == '0'">
                    <el-input
                      v-model="form.ourAdvantage"
                      placeholder="我方劣势"
                      :disabled="!isUpdate"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row v-if="form.basic.boFlow.biddingDocumentsPass == 1">
                <el-col :span="1.5">
                  <el-input
                    v-model="form.basic.boFlow.letterAcceptanceAccessoryName"
                    placeholder="请上传中标通知书"
                    readonly
                  />
                </el-col>
                <el-col
                  :span="1.5"
                  v-show="!form.basic.boFlow.letterAcceptanceAccessoryUrlId"
                >
                  <el-button
                    type="info"
                    plain
                    icon="el-icon-upload2"
                    size="mini"
                    @click="uploadAccessory(`letter_acceptance_accessory`)"
                    >上传</el-button
                  >
                </el-col>
                <el-col
                  :span="1.5"
                  v-show="form.basic.boFlow.letterAcceptanceAccessoryUrlId"
                >
                  <el-button
                    type="warning"
                    plain
                    icon="el-icon-download"
                    size="mini"
                    @click="
                      exportAccessory(
                        form.basic.boFlow.letterAcceptanceAccessoryUrlId,
                        form.basic.boFlow.letterAcceptanceAccessoryName
                      )
                    "
                    >下载</el-button
                  >
                </el-col>
                <el-col
                  :span="1.5"
                  v-show="form.basic.boFlow.letterAcceptanceAccessoryUrlId"
                >
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-delete"
                    @click="deleteAccessory(`letter_acceptance_accessory`, 1)"
                    >删除</el-button
                  >
                </el-col>
              </el-row>
            </el-form>
          </el-tab-pane>
          <!-- 合同签订 -->
          <el-tab-pane
            label="合同签订"
            name="ht"
            style="height: 200px; overflow-y: scroll"
            v-if="this.secondTabsName.ht"
          >
            <el-form ref="form" :model="form.basic.boFlow" :rules="rules">
              <el-row>
                <el-col :span="5">
                  <el-form-item label="合同签订时间" prop="contractSigningTime">
                    <el-date-picker
                      v-model="form.basic.boFlow.contractSigningTime"
                      type="datetime"
                      placeholder="选择日期时间"
                      :disabled="!isUpdate"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="1.5">
                  <el-input
                    v-model="form.basic.boFlow.contractDocumentAccessoryName"
                    placeholder="请上传合同文件"
                    readonly
                  />
                </el-col>
                <el-col
                  :span="1.5"
                  v-show="!form.basic.boFlow.contractDocumentAccessoryUrlId"
                >
                  <el-button
                    type="info"
                    plain
                    icon="el-icon-upload2"
                    size="mini"
                    @click="uploadAccessory(`contract_document_accessory`)"
                    >上传</el-button
                  >
                </el-col>
                <el-col
                  :span="1.5"
                  v-show="form.basic.boFlow.contractDocumentAccessoryUrlId"
                >
                  <el-button
                    type="warning"
                    plain
                    icon="el-icon-download"
                    size="mini"
                    @click="
                      exportAccessory(
                        form.basic.boFlow.contractDocumentAccessoryUrlId,
                        form.basic.boFlow.contractDocumentAccessoryName
                      )
                    "
                    >下载</el-button
                  >
                </el-col>
                <el-col
                  :span="1.5"
                  v-show="form.basic.boFlow.contractDocumentAccessoryUrlId"
                >
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-delete"
                    @click="deleteAccessory(`contract_document_accessory`, 1)"
                    >删除</el-button
                  >
                </el-col>
              </el-row>
            </el-form>
          </el-tab-pane>
          <!-- 跟进记录 -->
          <el-tab-pane
            label="跟进记录"
            name="gj"
            style="height: 200px; overflow-y: scroll"
            v-if="this.secondTabsName.gj"
          >
            <BehaviorList
              :source="'BoDetails'"
              :bo="this.behaviorParame"
              v-if="secondTabs == 'gj'"
            />
          </el-tab-pane>
        </el-tabs>
        <!-- 编辑按钮组 -->
        <el-row type="flex" class="row-bg" justify="end">
          <el-col :span="2" v-show="!isUpdate">
            <div class="grid-content bg-purple">
              <el-button
                @click="modifyButton"
                >修改</el-button
              >
            </div>
          </el-col>
          <el-col :span="2" v-show="isUpdate">
            <div class="grid-content bg-purple-light">
              <el-button
                @click="cancelButton"
                >取消</el-button
              >
            </div>
          </el-col>
          <el-col :span="2" v-show="isUpdate">
            <div class="grid-content bg-purple">
              <el-button
                @click="saveButton"
                >保存</el-button
              >
            </div>
          </el-col>
        </el-row>
        <!-- 基本信息 -->
        <el-divider content-position="left">基本信息</el-divider>
        <el-form ref="form" :model="form.basic" label-width="80px">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="商机来源" prop="boSource">
                <el-select
                  v-model="form.basic.boSource"
                  placeholder="商机来源"
                  readonly
                >
                  <el-option
                    v-for="dict in dict.type.mk_bo_source"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="商机类型" prop="boType">
                <el-select
                  v-model="form.basic.boType"
                  placeholder="商机类型"
                  readonly
                >
                  <el-option
                    v-for="dict in dict.type.mk_bo_type"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="客户名称" prop="customerName">
                <el-input
                  v-model="form.basic.customerName"
                  placeholder="请输入客户名称"
                  readonly
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="医院营收总额" prop="totalHosRevenue">
                <el-select
                  v-model="form.basic.totalHosRevenue"
                  placeholder="请输入医院营收总额"
                  readonly
                >
                  <el-option
                    v-for="dict in dict.type.mk_bo_total_revenue"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  ></el-option>
                </el-select>
                <!-- <el-input v-model="form.basic.totalHosRevenue" placeholder="请输入医院营收总额" :disabled="true"/> -->
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <!-- label="医院耗材预估值" -->
              <el-form-item  prop="hosDiscreetValue">

                <template slot="label">
                  <el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
                    <span>医院耗材预估值</span>
                  </el-tooltip>
                </template>

                <el-input
                  v-model="form.basic.hosDiscreetValue"
                  placeholder="请输入医院耗材预估值"
                  readonly
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="赢单率" prop="winningRate">
                <el-input
                  v-model="form.basic.winningRate"
                  placeholder="赢单率"
                  readonly
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-form-item label="商机内容" prop="boContent">
              <el-input
                v-model="form.basic.boContent"
                placeholder="商机内容"
                readonly
              />
            </el-form-item>
          </el-row>
        </el-form>
        <!-- 其它信息 -->
        <el-divider content-position="left">其它信息</el-divider>
        <el-form ref="form" :model="form.basic" label-width="80px">
          <el-row>
            <el-col :span="8">
              <el-form-item label="销售组织" prop="marketingOrganizingName">
                <el-input
                  size="small"
                  readonly
                  v-model="form.basic.marketingOrganizingName"
                  placeholder=""
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="销售区域" prop="marketingAreaName">
                <el-input
                  size="small"
                  readonly
                  v-model="form.basic.marketingAreaName"
                  placeholder=""
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="部门" prop="deptName">
                <el-input
                  size="small"
                  readonly
                  v-model="form.basic.deptName"
                  placeholder=""
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="负责人" prop="principalName">
                <el-input
                  size="small"
                  readonly
                  v-model="form.basic.principalName"
                  placeholder=""
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="创建人" prop="createBy">
                <el-input
                  size="small"
                  readonly
                  v-model="form.basic.createBy"
                  placeholder=""
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="创建时间" prop="createTime">
                <el-input
                  size="small"
                  readonly
                  v-model="form.basic.createTime"
                  placeholder=""
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>
      <!-- 商机任务页签 -->
      <el-tab-pane label="商机任务" name="second">
        <TaskList
          :source="'BoDetails'"
          :bo="this.form.basic"
          v-if="masterTabs == 'second'"
        />
      </el-tab-pane>
      <!-- 联系人页签 -->
      <el-tab-pane label="商机联系人" name="third">
        <ContactList
          :source="'BoDetails'"
          :bo="this.form.basic"
          v-if="masterTabs == 'third'"
        />
      </el-tab-pane>
      <!-- 附件页签 -->
      <el-tab-pane label="附件信息" name="fourth">
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="info"
              plain
              icon="el-icon-upload2"
              size="mini"
              @click="uploadAccessory(`list`)"
              >上传</el-button
            >
          </el-col>
        </el-row>
        <el-table v-loading="loading" :data="form.accessory">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column
            type="index"
            label="序号"
            width="55"
            align="center"
          />
          <el-table-column label="名称" align="center" prop="fileName" />
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-row>
                <el-col :span="1.5">
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-delete"
                    @click="deleteAccessory('list', scope.row)"
                    >删除</el-button
                  >
                </el-col>
                <el-col :span="1.5">
                  <el-button
                    type="warning"
                    plain
                    icon="el-icon-download"
                    size="mini"
                    @click="exportAccessory(scope.row.url, scope.row.fileName)"
                    >下载</el-button
                  >
                </el-col>
              </el-row>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <!-- 上传对话框 -->
    <el-dialog
      :title="upload.title"
      :visible.sync="upload.open"
      width="400px"
      append-to-body
    >
      <el-upload
        ref="upload"
        :limit="1"
        accept=".xlsx, .xls,.doc,docx"
        :headers="upload.headers"
        :action="upload.url + '?boId=' + form.basic.id + '&flag=' + upload.flag"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getBasic,
  nextFlow,
  updateBasicFlow,
  delAccessory,
} from "@/api/business/spd/bo/basic";
import { listAccessory } from "@/api/business/spd/bo/accessory";
import { getToken } from "@/utils/auth";
import TaskList from "../task/taskList.vue";
import ContactList from "../contact/contactList.vue";
import PojpsnList from "../pojpsn/pojpsnList.vue";
import BehaviorList from "../behavior/behaviorList.vue";
import axios from "axios";

export default {
  //名称
  name: "BoDetails",
  //注册引入的组件
  components: { TaskList, ContactList, PojpsnList, BehaviorList },
  //平台枚举
  dicts: [
    "mk_bo_type",
    "mk_bo_state",
    "mk_bo_winstate",
    "mk_bo_source",
    "mk_bo_total_revenue",
  ],
  //数据
  data() {
    return {
      masterTabs: "first",
      secondTabs: "jd1",
      loading: false,
      rules: {},
      // 基本信息
      form: {
        basic: {},
        accessory: [],
      },
      // 上传参数
      upload: {
        // 是否显示弹出层
        open: false,
        // 弹出层标题
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 上传类型
        flag: "",
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/mk/bo/basic/upload",
      },
      //单据当前修改状态
      isUpdate: false,
      //控制页签是否显示参数
      secondTabsName:{
        jd1 : false,
        jd2 : false,
        lx : false,
        xmry : false,
        fa : false,
        sq : false,
        kc : false,
        kh : false,
        yn : false,
        jc : false,
        gw : false,
        ht : false,
        gj : false,
      },
      //查询跟进记录参数
      behaviorParame:{
      },
      //当前查看的阶段是第几阶段，默认给个0吧。
      showStage: 0,
      //模板表格
      tableData: [{
                    type: '标准立项书模板',
                    name: '说明：请联系部门商务',
                  }, {
                    type: '商机审会决议书',
                    name: '说明：请联系部门商务',
                  },],
      tableData1: [{
                    type: '项目评估模板',
                    name: '说明: 请联系部门商务',
                  }, {
                    type: '售前模板',
                    name: '说明: 请联系事业发展部门商务',
                  },{
                    type: '售前调研模板',
                    name: 'xXxx医院SPD项目 售前调研表 下载',
                  },{
                    type: '投标参数模板',
                    name: '说明: 请联系事业发展商务',
                  },],
    };
  },
  //监听属性
  watch: {
    //阶段
    "form.basic.boStage": {
      handler(newName, oldName) {
        this.reST();
        switch(newName) {
          case 0:
            this.secondTabs = 'jd1';
            this.secondTabsName.jd1 = true;
            this.secondTabsName.gj = true;
            break;
          case 1:
            this.secondTabs = 'jd2';
            this.secondTabsName.jd2 = true;
            this.secondTabsName.lx = true;
            this.secondTabsName.xmry = true;
            this.secondTabsName.gj = true;
            break;
          case 2:
            break;
          case 3:
            break;
          case 4:
            break;
          case 5:
            break;
          case 6:
            this.secondTabs = 'fa';
            this.secondTabsName.fa = true;
            this.secondTabsName.sq = true;
            this.secondTabsName.kc = true;
            this.secondTabsName.kh = true;
            this.secondTabsName.yn = true;
            this.secondTabsName.jc = true;
            this.secondTabsName.gj = true;
            break;
          case 7:
            this.secondTabs = 'gw';
            this.secondTabsName.gw = true;
            this.secondTabsName.ht = true;
            this.secondTabsName.gj = true;
            break;
          case 8:
            break;
          case 9:
            break;
          case 10:
            break;
          case 11:
            break;
          case 12:
            break;
          default:
            break;
        }
      },
      immediate: true,
    },
  },
  //方法
  methods: {
    // 返回
    handleBack() {
      this.$router.push("/business/spd/bo/basic");
    },
    //主多页签切换
    masterTabsSwitch(e) {
      console.log("主标签页切换", e);
      switch (e.name) {
        case "second":
          //跟进记录
          break;
        case "third":
          //获取联系人
          break;
        case "fourth":
          //获取附件列表
          listAccessory(this.form.basic.id).then((response) => {
            this.form.accessory = response.rows;
          });
          break;
        default:
          break;
      }
    },
    //次多页签切换
    secondTabsSwitch(e) {
        console.log('次标签页切换',e);
        switch(e.name) {
          case 'gj':
              this.behaviorParame = JSON.parse(JSON.stringify(this.form.basic));
              console.log('this.showStage',this.showStage)
              this.behaviorParame.boStage = this.showStage;
              //跟进记录
              break;
          default:
              break;
        }
    },
    //下一步
    next() {
      //设置跳过部分步骤
      console.log();
      if (this.form.basic.boStage < 12) {
        var boStage = 0;
        var boId = this.form.basic.id;
        if (this.form.basic.boStage == 1) {
          boStage = this.form.basic.boStage + 5;
        } else if (this.form.basic.boStage == 7) {
          boStage = this.form.basic.boStage + 5;
        } else {
          boStage = this.form.basic.boStage + 1;
        }
        this.$modal.confirm('确定要变更为下一阶段吗！').then(function() {
          return nextFlow(boId, boStage);
        }).then(() => {
          getBasic(this.$route.params.id).then((response) => {
            this.form.basic = response.data;
            this.showStage = this.form.basic.boStage;
          });
          this.$modal.msgSuccess("流程扭转成功");
        }).catch(() => {});
      }
    },
    //页签全部收起
    reST(){
      this.secondTabsName = {
        jd1 : false,
        jd2 : false,
        lx : false,
        xmry : false,
        fa : false,
        sq : false,
        kc : false,
        kh : false,
        yn : false,
        jc : false,
        gw : false,
        ht : false,
        gj : false,
      }
    },
    //查看页签
    viewingProcedure(stage) {
      this.showStage = stage;
      if(this.form.basic.boStage < stage){
        this.$modal.alert("只能查看之前的阶段信息!");
      }else{
        this.reST();
        switch(stage) {
          case 0:
            this.secondTabs = 'jd1';
            this.secondTabsName.jd1 = true;
            this.secondTabsName.gj = true;
            break;
          case 1:
            this.secondTabs = 'jd2';
            this.secondTabsName.jd2 = true;
            this.secondTabsName.lx = true;
            this.secondTabsName.xmry = true;
            this.secondTabsName.gj = true;
            break;
          case 2:
            break;
          case 3:
            break;
          case 4:
            break;
          case 5:
            break;
          case 6:
            this.secondTabs = 'fa';
            this.secondTabsName.fa = true;
            this.secondTabsName.sq = true;
            this.secondTabsName.kc = true;
            this.secondTabsName.kh = true;
            this.secondTabsName.yn = true;
            this.secondTabsName.jc = true;
            this.secondTabsName.gj = true;
            break;
          case 7:
            this.secondTabs = 'gw';
            this.secondTabsName.gw = true;
            this.secondTabsName.ht = true;
            this.secondTabsName.gj = true;
            break;
          case 8:
            break;
          case 9:
            break;
          case 10:
            break;
          case 11:
            break;
          case 12:
            break;
          default:
            break;
        }
      }
    },
    //上传附件公共方法
    uploadAccessory(f) {
      // this.upload.title = "上传附件";
      this.upload.open = true;
      this.upload.flag = f;
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert(
        "<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
          response.msg +
          "</div>",
        "上传结果",
        { dangerouslyUseHTMLString: true }
      );
      if (this.upload.flag == "list") {
        listAccessory(this.form.basic.id).then((response) => {
          this.form.accessory = response.rows;
        });
      } else {
        getBasic(this.$route.params.id).then((response) => {
          this.form.basic = response.data;
        });
      }
    },
    //下载附件
    exportAccessory(urlId, fileName) {
      let resUrl =
        "https://test-sy.derom.com/document-center/fastdfs/download?id=" +
        urlId;
      axios
        .create({
          timeout: 3000,
          responseType: "blob", // 响应类型, 将响应数据转换为二进制数据
          headers: {},
        })
        .get(resUrl)
        .then((res) => {
          console.log(res);
          // 地址转换
          let url = window.URL.createObjectURL(res.data);
          const a = document.createElement("a");
          a.setAttribute("href", url);
          a.setAttribute("download", fileName);
          document.body.append(a);
          a.click();
          document.body.removeChild(a);
        });
    },
    //删除附件
    deleteAccessory(f, row) {
      console.log("flag", f);
      console.log("row", row);
      this.$modal
        .confirm("是否确认删除？")
        .then(function () {})
        .then(() => {
          delAccessory(this.form.basic.id, f, row.id).then((res) => {
            if (res.code == 200) {
              if (this.upload.flag == "list") {
                listAccessory(this.form.basic.id).then((response) => {
                  this.form.accessory = response.rows;
                });
              } else {
                getBasic(this.$route.params.id).then((response) => {
                  this.form.basic = response.data;
                });
              }
              this.$modal.msgSuccess("删除成功");
            } else {
              this.$modal.msgSuccess("删除失败");
            }
          });
        })
        .catch(() => {});
    },
    //修改按钮
    modifyButton() {
      this.isUpdate = true;
    },
    //取消按钮
    cancelButton() {
      this.isUpdate = false;
      getBasic(this.$route.params.id).then((response) => {
        this.form.basic = response.data;
      });
    },
    //保存按钮
    saveButton() {
      console.log("this.form.basic.boFlow", this.form.basic.boFlow);
      updateBasicFlow(this.form.basic.boFlow).then((response) => {
        this.$modal.msgSuccess("修改成功");
        this.isUpdate = false;
        getBasic(this.$route.params.id).then((response) => {
          this.form.basic = response.data;
        });
      });
    },
  },
  //创建钩子
  created() {
    getBasic(this.$route.params.id).then((response) => {
      this.form.basic = response.data;
    });
  },
};
</script>


<style scoped>
.md-content >>> .el-form-item {
  margin-bottom: 10px;
}

.md-content >>> .el-tabs--border-card > .el-tabs__content {
  padding-bottom: 8px;
}

.md-content .md-auditInfo >>> .el-form-item {
  margin-bottom: 0px;
}

.md-main >>> .el-form-item,
.md-vice >>> .el-form-item {
  width: 100%;
  box-sizing: border-box;
}

.md-main >>> .el-form-item__label,
.md-vice >>> .el-form-item__label {
  width: 40%;
}

.md-main >>> .el-form-item__content,
.md-md-vice >>> .el-form-item__content {
  width: 60%;
}

.md-content >>> .el-form-item__label {
  font-weight: normal;
  /* text-align: left;
  width: 28%; */
  white-space: nowrap;
  /* IE6 需要定义宽度 */
  overflow: hidden;

  -o-text-overflow: ellipsis;
  /* Opera */
  text-overflow: ellipsis;
  /* IE, Safari (WebKit) */
  /* -moz-binding: url('ellipsis.xml#ellipsis'); */
  /* Firefox */
}

.md-main >>> .material-table {
  height: 100%;
}

.md-vice >>> .material-table {
  height: 140px;
  overflow-y: auto;
  overflow-x: auto;
}
</style>