party_construct_web/src/components/UpdatePartyDevelop/index.vue

<!--
 * @Description: 更新党员发展
 * @Author: Rockery
 * @Date: 2021-12-15 17:54:05
 * @LastEditors: Rockery
 * @LastEditTime: 2021-12-17 18:15:28
 * @FilePath: \party_construct_web\src\components\UpdatePartyDevelop\index.vue
 * @Copyright: Copyright (c) 2016~2021 Rockery(1113269755@qq.com)
-->
<template>
  <div class="updatepartydevelop">
    <div class="updatepartydevelop-head">
      <div class="updatepartydevelop-head-title">
        <div>
          <img :src="require('@/assets/logo/home-main-title-logo.png')" @error="imgViewerOnerror" />
        </div>
        <div>正式党员管理</div>
      </div>
    </div>
    <el-form
      ref="updatePartyDevelopFormRef"
      :model="formObj.formModel"
      :rules="formObj.formRules"
      label-width="170px"
      class="situationdesc-addpage-form"
    >
      <div class="updatepartydevelop-basic">
        <el-row>
          <el-col :span="24">
            <div class="updatepartydevelop-title">
              <div>
                <img
                  :src="require('@/assets/logo/home-main-title-logo.png')"
                  @error="imgViewerOnerror"
                />
              </div>
              <div>个人基本情况</div>
            </div>
          </el-col>
          <el-col :span="24">
            <div class="updatepartydevelop-line"></div>
          </el-col>
          <el-col :span="24">
            <el-row>
              <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                <el-form-item label="姓名：" prop="name">
                  <el-input v-model="formObj.formModel.name" placeholder="请输入姓名" clearable />
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                <el-form-item label="性别：" prop="sex">
                  <el-select
                    v-model="formObj.formModel.sex"
                    placeholder="请选择性别"
                    clearable
                    size="small"
                    style="width: 100%;"
                  >
                    <el-option
                      v-for="sexOption in sexOptions"
                      :key="sexOption.dictValue"
                      :label="sexOption.dictLabel"
                      :value="sexOption.dictValue"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                <el-form-item label="民族：" prop="nation">
                  <el-input v-model="formObj.formModel.nation" placeholder="请输入民族" clearable />
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                <el-form-item label="出生年月：" prop="dateOfBirth">
                  <el-date-picker
                    v-model="formObj.formModel.dateOfBirth"
                    type="date"
                    clearable
                    value-format="yyyy-MM-dd"
                    style="width: 100%;"
                    placeholder="请选择出生年月"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                <el-form-item label="籍贯：" prop="sex">
                  <area-cascader
                    type="all"
                    v-model="formObj.formModel.selected"
                    :level="0"
                    :data="areaDataObj.pca"
                    separator="-"
                    placeholder="请选择籍贯"
                  ></area-cascader>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                <el-form-item label="学历：" prop="sex">
                  <el-select
                    v-model="formObj.formModel.sex"
                    placeholder="请选择学历"
                    clearable
                    size="small"
                    style="width: 100%;"
                  >
                    <el-option
                      v-for="sexOption in sexOptions"
                      :key="sexOption.dictValue"
                      :label="sexOption.dictLabel"
                      :value="sexOption.dictValue"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                <el-form-item label="入团时间：" prop="dateOfBirth">
                  <el-date-picker
                    v-model="formObj.formModel.dateOfBirth"
                    type="date"
                    clearable
                    value-format="yyyy-MM-dd"
                    style="width: 100%;"
                    placeholder="请选择入团时间"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                <el-form-item label="单位、职务或职务：" prop="nation">
                  <el-input v-model="formObj.formModel.nation" placeholder="请输入单位、职务或职务" clearable />
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                <el-form-item label="参加工作时间：" prop="dateOfBirth">
                  <el-date-picker
                    v-model="formObj.formModel.dateOfBirth"
                    type="date"
                    clearable
                    value-format="yyyy-MM-dd"
                    style="width: 100%;"
                    placeholder="请选择参加工作时间"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                <el-form-item label="居民身份证号码：" prop="nation">
                  <el-input v-model="formObj.formModel.nation" placeholder="请输入居民身份证号码" clearable />
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                <el-form-item label="现居地：" prop="selected2">
                  <el-row>
                    <el-col :span="12">
                      <area-cascader
                        type="all"
                        v-model="formObj.formModel.selected2"
                        :level="1"
                        :data="areaDataObj.pcaa"
                        separator="-"
                        placeholder="请选择地区"
                      ></area-cascader>
                    </el-col>
                    <el-col :span="12">
                      <el-input
                        v-model="formObj.formModel.nation"
                        placeholder="请输入详细街道地址"
                        clearable
                      />
                    </el-col>
                  </el-row>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                <el-form-item label="本人简历（包括学历）：" prop="phone" class="formitem-attachment">
                  <el-upload
                    ref="descFileMaterialsUploadRef"
                    :limit="1"
                    accept=".pdf"
                    :auto-upload="false"
                    :show-file-list="true"
                    :action="descFileMaterialsUpload.url"
                    :headers="descFileMaterialsUpload.headers"
                    :before-upload="handleBeforeUpload"
                    :on-success="handleUploadOnsuccess"
                    :on-change="handleUploadOnchange"
                    :on-remove="handleUploadOnRemove"
                    :on-exceed="handleUploadOnExceed"
                    class="formitem-attachment-fileupload"
                  >
                    <div class="formitem-attachment-fileupload-content">
                      <i class="el-icon-plus" />
                      上传文件，格式：PDF
                    </div>
                  </el-upload>
                  <div
                    v-if="descFileMaterialsUpload.isUploadSuccess"
                    class="fl formitem-attachment-addr"
                    @click="handleDescFileMaterialsUploadUrlClick"
                  >
                    <div>文件上传成功地址：</div>
                    <div>{{ formObj.formModel.bannerUrl }}</div>
                  </div>
                  <el-button
                    v-if="descFileMaterialsUpload.isSelect && !descFileMaterialsUpload.isUploadSuccess"
                    type="primary"
                    size="small"
                    @click="submitDescFileMaterialsUpload"
                  >上传文件</el-button>
                  <el-button
                    v-if="descFileMaterialsUpload.isSelect"
                    type="info"
                    size="small"
                    @click="removeDescFileMaterialsUpload"
                  >移除文件</el-button>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                <el-form-item label="其他情况：" prop="phone" class="formitem-attachment">
                  <el-upload
                    ref="descFileMaterialsUploadRef"
                    :limit="1"
                    accept=".pdf"
                    :auto-upload="false"
                    :show-file-list="true"
                    :action="descFileMaterialsUpload.url"
                    :headers="descFileMaterialsUpload.headers"
                    :before-upload="handleBeforeUpload"
                    :on-success="handleUploadOnsuccess"
                    :on-change="handleUploadOnchange"
                    :on-remove="handleUploadOnRemove"
                    :on-exceed="handleUploadOnExceed"
                    class="formitem-attachment-fileupload"
                  >
                    <div class="formitem-attachment-fileupload-content">
                      <i class="el-icon-plus" />
                      上传文件，格式：PDF
                    </div>
                  </el-upload>
                  <div
                    v-if="descFileMaterialsUpload.isUploadSuccess"
                    class="fl formitem-attachment-addr"
                    @click="handleDescFileMaterialsUploadUrlClick"
                  >
                    <div>文件上传成功地址：</div>
                    <div>{{ formObj.formModel.bannerUrl }}</div>
                  </div>
                  <el-button
                    v-if="descFileMaterialsUpload.isSelect && !descFileMaterialsUpload.isUploadSuccess"
                    type="primary"
                    size="small"
                    @click="submitDescFileMaterialsUpload"
                  >上传文件</el-button>
                  <el-button
                    v-if="descFileMaterialsUpload.isSelect"
                    type="info"
                    size="small"
                    @click="removeDescFileMaterialsUpload"
                  >移除文件</el-button>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                <el-form-item label="两寸正面免冠照片：" prop="phone" class="formitem-attachment">
                  <el-upload
                    ref="descFileMaterialsUploadRef"
                    :limit="1"
                    accept=".pdf"
                    :auto-upload="false"
                    :show-file-list="true"
                    :action="descFileMaterialsUpload.url"
                    :headers="descFileMaterialsUpload.headers"
                    :before-upload="handleBeforeUpload"
                    :on-success="handleUploadOnsuccess"
                    :on-change="handleUploadOnchange"
                    :on-remove="handleUploadOnRemove"
                    :on-exceed="handleUploadOnExceed"
                    class="formitem-attachment-fileupload"
                  >
                    <div class="formitem-attachment-fileupload-content">
                      <i class="el-icon-plus" />
                      上传文件，格式：PDF
                    </div>
                  </el-upload>
                  <div
                    v-if="descFileMaterialsUpload.isUploadSuccess"
                    class="fl formitem-attachment-addr"
                    @click="handleDescFileMaterialsUploadUrlClick"
                  >
                    <div>文件上传成功地址：</div>
                    <div>{{ formObj.formModel.bannerUrl }}</div>
                  </div>
                  <el-button
                    v-if="descFileMaterialsUpload.isSelect && !descFileMaterialsUpload.isUploadSuccess"
                    type="primary"
                    size="small"
                    @click="submitDescFileMaterialsUpload"
                  >上传文件</el-button>
                  <el-button
                    v-if="descFileMaterialsUpload.isSelect"
                    type="info"
                    size="small"
                    @click="removeDescFileMaterialsUpload"
                  >移除文件</el-button>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="备注：" prop="nation">
                  <el-input
                    type="textarea"
                    clearable
                    maxlength="300"
                    show-word-limit
                    :autosize="{ minRows: 6}"
                    placeholder="请输入内容"
                    v-model="formObj.formModel.nation"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </div>
      <div class="updatepartydevelop-situation">
        <el-row>
          <el-col :span="24">
            <div class="updatepartydevelop-title">
              <div>
                <img
                  :src="require('@/assets/logo/home-main-title-logo.png')"
                  @error="imgViewerOnerror"
                />
              </div>
              <div>党员发展情况</div>
            </div>
          </el-col>
          <el-col :span="24">
            <div class="updatepartydevelop-line"></div>
          </el-col>
          <el-col :span="24">
            <el-tabs
              type="border-card"
              v-model="tabsModel"
              class="updatepartydevelop-situation-tabs"
              @tab-click="handleTabsClick"
            >
              <!-- 一、申请入党 -->
              <el-tab-pane label="一、申请入党" name="APPLY">
                <div class="roc-tabpane">
                  <el-row>
                    <el-col :span="24">
                      <div class="roc-tabpane-head">
                        <div class="tabpane-head-left">
                          <div class="tabpane-head-left-title">一</div>
                        </div>
                        <div class="tabpane-head-right">申请入党</div>
                      </div>
                    </el-col>
                    <el-col :span="24">
                      <div class="roc-tabpane-line"></div>
                    </el-col>
                    <el-col :span="24">
                      <div class="roc-tabpane-step">
                        <el-row>
                          <!-- 1 入党申请书 -->
                          <el-col :span="24">
                            <!-- 步骤1 -->
                            <div class="roc-tabpane-step-item">
                              <div class="step-item-left">1</div>
                              <div class="step-item-right">
                                <el-row>
                                  <el-col :span="24">
                                    <div class="step-item-right-title">入党申请书</div>
                                    <div class="step-item-right-form">
                                      <el-row :gutter="20">
                                        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                                          <el-form-item
                                            label="递交入党申请书时间："
                                            prop="dateOfBirth"
                                            label-width="141px"
                                          >
                                            <el-date-picker
                                              v-model="formObj.formModel.dateOfBirth"
                                              type="date"
                                              clearable
                                              value-format="yyyy-MM-dd"
                                              style="width: 100%;"
                                              placeholder="请选择入团时间"
                                            ></el-date-picker>
                                          </el-form-item>
                                        </el-col>
                                        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                                          <el-form-item
                                            label="入党申请书："
                                            prop="dateOfBirth"
                                            label-width="96px"
                                          >
                                            <el-upload
                                              ref="descFileMaterialsUploadRef"
                                              :limit="1"
                                              accept=".pdf"
                                              :auto-upload="false"
                                              :show-file-list="true"
                                              :action="descFileMaterialsUpload.url"
                                              :headers="descFileMaterialsUpload.headers"
                                              :before-upload="handleBeforeUpload"
                                              :on-success="handleUploadOnsuccess"
                                              :on-change="handleUploadOnchange"
                                              :on-remove="handleUploadOnRemove"
                                              :on-exceed="handleUploadOnExceed"
                                              class="formitem-attachment-fileupload"
                                            >
                                              <div class="formitem-attachment-fileupload-content">
                                                <i class="el-icon-plus" />
                                                上传文件，格式：PDF
                                              </div>
                                            </el-upload>
                                            <div
                                              v-if="descFileMaterialsUpload.isUploadSuccess"
                                              class="fl formitem-attachment-addr"
                                              @click="handleDescFileMaterialsUploadUrlClick"
                                            >
                                              <div>文件上传成功地址：</div>
                                              <div>{{ formObj.formModel.bannerUrl }}</div>
                                            </div>
                                            <el-button
                                              v-if="descFileMaterialsUpload.isSelect && !descFileMaterialsUpload.isUploadSuccess"
                                              type="primary"
                                              size="small"
                                              @click="submitDescFileMaterialsUpload"
                                            >上传文件</el-button>
                                            <el-button
                                              v-if="descFileMaterialsUpload.isSelect"
                                              type="info"
                                              size="small"
                                              @click="removeDescFileMaterialsUpload"
                                            >移除文件</el-button>
                                          </el-form-item>
                                        </el-col>
                                      </el-row>
                                    </div>
                                  </el-col>
                                </el-row>
                              </div>
                            </div>
                          </el-col>
                          <el-col :span="24">
                            <div
                              :class="innerWidth > 1200 ? 'roc-tabpane-step-first_default': 'roc-tabpane-step-first_nodefault'"
                            ></div>
                          </el-col>
                          <!-- 2 党组织派人与入党申请人谈话的记录 -->
                          <el-col :span="24">
                            <!-- 步骤1 -->
                            <div class="roc-tabpane-step-item">
                              <div class="step-item-left">2</div>
                              <div class="step-item-right">
                                <el-row>
                                  <el-col :span="24">
                                    <div class="step-item-right-title">党组织派人与入党申请人谈话的记录</div>
                                    <div class="step-item-right-form">
                                      <el-row :gutter="20">
                                        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                                          <el-form-item
                                            label="组织派人谈话时间："
                                            prop="dateOfBirth"
                                            label-width="126px"
                                          >
                                            <el-date-picker
                                              v-model="formObj.formModel.dateOfBirth"
                                              type="date"
                                              clearable
                                              value-format="yyyy-MM-dd"
                                              style="width: 100%;"
                                              placeholder="请选择组织派人谈话时间"
                                            ></el-date-picker>
                                          </el-form-item>
                                        </el-col>
                                        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                                          <el-form-item
                                            label="谈话记录："
                                            prop="dateOfBirth"
                                            label-width="96px"
                                          >
                                            <el-upload
                                              ref="descFileMaterialsUploadRef"
                                              :limit="1"
                                              accept=".pdf"
                                              :auto-upload="false"
                                              :show-file-list="true"
                                              :action="descFileMaterialsUpload.url"
                                              :headers="descFileMaterialsUpload.headers"
                                              :before-upload="handleBeforeUpload"
                                              :on-success="handleUploadOnsuccess"
                                              :on-change="handleUploadOnchange"
                                              :on-remove="handleUploadOnRemove"
                                              :on-exceed="handleUploadOnExceed"
                                              class="formitem-attachment-fileupload"
                                            >
                                              <div class="formitem-attachment-fileupload-content">
                                                <i class="el-icon-plus" />
                                                上传文件，格式：PDF
                                              </div>
                                            </el-upload>
                                            <div
                                              v-if="descFileMaterialsUpload.isUploadSuccess"
                                              class="fl formitem-attachment-addr"
                                              @click="handleDescFileMaterialsUploadUrlClick"
                                            >
                                              <div>文件上传成功地址：</div>
                                              <div>{{ formObj.formModel.bannerUrl }}</div>
                                            </div>
                                            <el-button
                                              v-if="descFileMaterialsUpload.isSelect && !descFileMaterialsUpload.isUploadSuccess"
                                              type="primary"
                                              size="small"
                                              @click="submitDescFileMaterialsUpload"
                                            >上传文件</el-button>
                                            <el-button
                                              v-if="descFileMaterialsUpload.isSelect"
                                              type="info"
                                              size="small"
                                              @click="removeDescFileMaterialsUpload"
                                            >移除文件</el-button>
                                          </el-form-item>
                                        </el-col>
                                      </el-row>
                                    </div>
                                  </el-col>
                                </el-row>
                              </div>
                            </div>
                          </el-col>
                          <el-col :span="24">
                            <div
                              :class="innerWidth > 1200 ? 'roc-tabpane-step-second_default': 'roc-tabpane-step-second_nodefault'"
                            ></div>
                          </el-col>
                          <!-- 3 身份证或户口本复印件 -->
                          <el-col :span="24">
                            <!-- 步骤1 -->
                            <div class="roc-tabpane-step-item">
                              <div class="step-item-left">3</div>
                              <div class="step-item-right">
                                <el-row>
                                  <el-col :span="24">
                                    <div class="step-item-right-title">身份证或户口本复印件</div>
                                    <div class="step-item-right-form">
                                      <el-row :gutter="20">
                                        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                                          <el-form-item
                                            label="身份证或户口本："
                                            prop="dateOfBirth"
                                            label-width="116px"
                                          >
                                            <el-upload
                                              ref="descFileMaterialsUploadRef"
                                              :limit="1"
                                              accept=".pdf"
                                              :auto-upload="false"
                                              :show-file-list="true"
                                              :action="descFileMaterialsUpload.url"
                                              :headers="descFileMaterialsUpload.headers"
                                              :before-upload="handleBeforeUpload"
                                              :on-success="handleUploadOnsuccess"
                                              :on-change="handleUploadOnchange"
                                              :on-remove="handleUploadOnRemove"
                                              :on-exceed="handleUploadOnExceed"
                                              class="formitem-attachment-fileupload"
                                            >
                                              <div class="formitem-attachment-fileupload-content">
                                                <i class="el-icon-plus" />
                                                上传文件，格式：PDF
                                              </div>
                                            </el-upload>
                                            <div
                                              v-if="descFileMaterialsUpload.isUploadSuccess"
                                              class="fl formitem-attachment-addr"
                                              @click="handleDescFileMaterialsUploadUrlClick"
                                            >
                                              <div>文件上传成功地址：</div>
                                              <div>{{ formObj.formModel.bannerUrl }}</div>
                                            </div>
                                            <el-button
                                              v-if="descFileMaterialsUpload.isSelect && !descFileMaterialsUpload.isUploadSuccess"
                                              type="primary"
                                              size="small"
                                              @click="submitDescFileMaterialsUpload"
                                            >上传文件</el-button>
                                            <el-button
                                              v-if="descFileMaterialsUpload.isSelect"
                                              type="info"
                                              size="small"
                                              @click="removeDescFileMaterialsUpload"
                                            >移除文件</el-button>
                                          </el-form-item>
                                        </el-col>
                                      </el-row>
                                    </div>
                                  </el-col>
                                </el-row>
                              </div>
                            </div>
                          </el-col>
                          <el-col :span="24">
                            <div class="roc-tabpane-step-third_default"></div>
                          </el-col>
                        </el-row>
                      </div>
                    </el-col>
                  </el-row>
                </div>
              </el-tab-pane>
              <el-tab-pane label="二、入党积极分子的确定和考察" name="POSITIVE">
                <div class="roc-tabpane">
                  <el-row>
                    <el-col :span="24">
                      <div class="roc-tabpane-head">
                        <div class="tabpane-head-left">
                          <div class="tabpane-head-left-title">二</div>
                        </div>
                        <div class="tabpane-head-right">入党积极分子的确定和培养</div>
                      </div>
                    </el-col>
                    <el-col :span="24">
                      <div class="roc-tabpane-line"></div>
                    </el-col>
                    <el-col :span="24">
                      <div class="roc-tabpane-step">
                        <el-row>
                          <!-- 4 党员（群团组织）推荐入党积极分子登记表 -->
                          <el-col :span="24">
                            <!-- 步骤1 -->
                            <div class="roc-tabpane-step-item">
                              <div class="step-item-left">4</div>
                              <div class="step-item-right">
                                <el-row>
                                  <el-col :span="24">
                                    <div class="step-item-right-title">党员（群团组织）推荐入党积极分子登记表</div>
                                    <div class="step-item-right-form">
                                      <el-row :gutter="20">
                                        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                                          <el-form-item
                                            label="推荐人："
                                            prop="dateOfBirth"
                                            label-width="65px"
                                            class="step-form-item"
                                          >
                                            <el-input
                                              v-model="formObj.formModel.nation"
                                              placeholder="请输入推荐人"
                                              clearable
                                            />
                                          </el-form-item>
                                        </el-col>
                                        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                                          <el-form-item
                                            label="谈话记录："
                                            prop="dateOfBirth"
                                            label-width="96px"
                                            class="step-form-item"
                                          >
                                            <el-upload
                                              ref="descFileMaterialsUploadRef"
                                              :limit="1"
                                              accept=".pdf"
                                              :auto-upload="false"
                                              :show-file-list="true"
                                              :action="descFileMaterialsUpload.url"
                                              :headers="descFileMaterialsUpload.headers"
                                              :before-upload="handleBeforeUpload"
                                              :on-success="handleUploadOnsuccess"
                                              :on-change="handleUploadOnchange"
                                              :on-remove="handleUploadOnRemove"
                                              :on-exceed="handleUploadOnExceed"
                                              class="formitem-attachment-fileupload"
                                            >
                                              <div class="formitem-attachment-fileupload-content">
                                                <i class="el-icon-plus" />
                                                上传文件，格式：PDF
                                              </div>
                                            </el-upload>
                                            <div
                                              v-if="descFileMaterialsUpload.isUploadSuccess"
                                              class="fl formitem-attachment-addr"
                                              @click="handleDescFileMaterialsUploadUrlClick"
                                            >
                                              <div>文件上传成功地址：</div>
                                              <div>{{ formObj.formModel.bannerUrl }}</div>
                                            </div>
                                            <el-button
                                              v-if="descFileMaterialsUpload.isSelect && !descFileMaterialsUpload.isUploadSuccess"
                                              type="primary"
                                              size="small"
                                              @click="submitDescFileMaterialsUpload"
                                            >上传文件</el-button>
                                            <el-button
                                              v-if="descFileMaterialsUpload.isSelect"
                                              type="info"
                                              size="small"
                                              @click="removeDescFileMaterialsUpload"
                                            >移除文件</el-button>
                                          </el-form-item>
                                        </el-col>
                                        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                                          <el-form-item
                                            label="推荐入党积极分子时间："
                                            prop="dateOfBirth"
                                            label-width="161px"
                                            class="step-form-item"
                                          >
                                            <el-date-picker
                                              v-model="formObj.formModel.dateOfBirth"
                                              type="date"
                                              clearable
                                              value-format="yyyy-MM-dd"
                                              style="width: 100%;"
                                              placeholder="请选择入团时间"
                                            ></el-date-picker>
                                          </el-form-item>
                                        </el-col>
                                        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                                          <el-form-item
                                            label="推荐入党积极分子登记表："
                                            prop="dateOfBirth"
                                            label-width="171px"
                                            class="step-form-item"
                                          >
                                            <el-upload
                                              ref="descFileMaterialsUploadRef"
                                              :limit="1"
                                              accept=".pdf"
                                              :auto-upload="false"
                                              :show-file-list="true"
                                              :action="descFileMaterialsUpload.url"
                                              :headers="descFileMaterialsUpload.headers"
                                              :before-upload="handleBeforeUpload"
                                              :on-success="handleUploadOnsuccess"
                                              :on-change="handleUploadOnchange"
                                              :on-remove="handleUploadOnRemove"
                                              :on-exceed="handleUploadOnExceed"
                                              class="formitem-attachment-fileupload"
                                            >
                                              <div class="formitem-attachment-fileupload-content">
                                                <i class="el-icon-plus" />
                                                上传文件，格式：PDF
                                              </div>
                                            </el-upload>
                                            <div
                                              v-if="descFileMaterialsUpload.isUploadSuccess"
                                              class="fl formitem-attachment-addr"
                                              @click="handleDescFileMaterialsUploadUrlClick"
                                            >
                                              <div>文件上传成功地址：</div>
                                              <div>{{ formObj.formModel.bannerUrl }}</div>
                                            </div>
                                            <el-button
                                              v-if="descFileMaterialsUpload.isSelect && !descFileMaterialsUpload.isUploadSuccess"
                                              type="primary"
                                              size="small"
                                              @click="submitDescFileMaterialsUpload"
                                            >上传文件</el-button>
                                            <el-button
                                              v-if="descFileMaterialsUpload.isSelect"
                                              type="info"
                                              size="small"
                                              @click="removeDescFileMaterialsUpload"
                                            >移除文件</el-button>
                                          </el-form-item>
                                        </el-col>
                                      </el-row>
                                    </div>
                                  </el-col>
                                </el-row>
                              </div>
                            </div>
                          </el-col>
                          <el-col :span="24">
                            <div
                              :class="innerWidth > 1200 ? 'roc-tabpane-step-fourth_default': 'roc-tabpane-step-fourth_nodefault'"
                            ></div>
                          </el-col>
                          <!-- 5 确定为入党积极分子的支委会会议记录、备案请示和批复 -->
                          <el-col :span="24">
                            <!-- 步骤1 -->
                            <div class="roc-tabpane-step-item">
                              <div class="step-item-left">5</div>
                              <div class="step-item-right">
                                <el-row>
                                  <el-col :span="24">
                                    <div class="step-item-right-title">确定为入党积极分子的支委会会议记录、备案请示和批复</div>
                                    <div class="step-item-right-form">
                                      <el-row :gutter="20">
                                        <el-col :span="24">
                                          <el-form-item
                                            label="会议结果："
                                            prop="dateOfBirth"
                                            label-width="76px"
                                            class="step-form-item"
                                          >
                                            <el-radio-group v-model="formObj.formModel.radio">
                                              <el-radio :label="3">通过</el-radio>
                                              <el-radio :label="6">未通过</el-radio>
                                            </el-radio-group>
                                          </el-form-item>
                                        </el-col>
                                        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                                          <el-form-item
                                            label="支委会会议时间："
                                            prop="dateOfBirth"
                                            label-width="126px"
                                            class="step-form-item"
                                          >
                                            <el-date-picker
                                              v-model="formObj.formModel.dateOfBirth"
                                              type="date"
                                              clearable
                                              value-format="yyyy-MM-dd"
                                              style="width: 100%;"
                                              placeholder="请选择组织派人谈话时间"
                                            ></el-date-picker>
                                          </el-form-item>
                                        </el-col>
                                        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                                          <el-form-item
                                            label="确定为入党积极分子的支委会会议记录："
                                            prop="dateOfBirth"
                                            label-width="256px"
                                            class="step-form-item"
                                          >
                                            <el-upload
                                              ref="descFileMaterialsUploadRef"
                                              :limit="1"
                                              accept=".pdf"
                                              :auto-upload="false"
                                              :show-file-list="true"
                                              :action="descFileMaterialsUpload.url"
                                              :headers="descFileMaterialsUpload.headers"
                                              :before-upload="handleBeforeUpload"
                                              :on-success="handleUploadOnsuccess"
                                              :on-change="handleUploadOnchange"
                                              :on-remove="handleUploadOnRemove"
                                              :on-exceed="handleUploadOnExceed"
                                              class="formitem-attachment-fileupload"
                                            >
                                              <div class="formitem-attachment-fileupload-content">
                                                <i class="el-icon-plus" />
                                                上传文件，格式：PDF
                                              </div>
                                            </el-upload>
                                            <div
                                              v-if="descFileMaterialsUpload.isUploadSuccess"
                                              class="fl formitem-attachment-addr"
                                              @click="handleDescFileMaterialsUploadUrlClick"
                                            >
                                              <div>文件上传成功地址：</div>
                                              <div>{{ formObj.formModel.bannerUrl }}</div>
                                            </div>
                                            <el-button
                                              v-if="descFileMaterialsUpload.isSelect && !descFileMaterialsUpload.isUploadSuccess"
                                              type="primary"
                                              size="small"
                                              @click="submitDescFileMaterialsUpload"
                                            >上传文件</el-button>
                                            <el-button
                                              v-if="descFileMaterialsUpload.isSelect"
                                              type="info"
                                              size="small"
                                              @click="removeDescFileMaterialsUpload"
                                            >移除文件</el-button>
                                          </el-form-item>
                                        </el-col>
                                        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                                          <el-form-item
                                            label="递交备案请示时间："
                                            prop="dateOfBirth"
                                            label-width="126px"
                                            class="step-form-item"
                                          >
                                            <el-date-picker
                                              v-model="formObj.formModel.dateOfBirth"
                                              type="date"
                                              clearable
                                              value-format="yyyy-MM-dd"
                                              style="width: 100%;"
                                              placeholder="请选择组织派人谈话时间"
                                            ></el-date-picker>
                                          </el-form-item>
                                        </el-col>
                                        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                                          <el-form-item
                                            label="确定为入党积极分子的备案请示："
                                            prop="dateOfBirth"
                                            label-width="216px"
                                            class="step-form-item"
                                          >
                                            <el-upload
                                              ref="descFileMaterialsUploadRef"
                                              :limit="1"
                                              accept=".pdf"
                                              :auto-upload="false"
                                              :show-file-list="true"
                                              :action="descFileMaterialsUpload.url"
                                              :headers="descFileMaterialsUpload.headers"
                                              :before-upload="handleBeforeUpload"
                                              :on-success="handleUploadOnsuccess"
                                              :on-change="handleUploadOnchange"
                                              :on-remove="handleUploadOnRemove"
                                              :on-exceed="handleUploadOnExceed"
                                              class="formitem-attachment-fileupload"
                                            >
                                              <div class="formitem-attachment-fileupload-content">
                                                <i class="el-icon-plus" />
                                                上传文件，格式：PDF
                                              </div>
                                            </el-upload>
                                            <div
                                              v-if="descFileMaterialsUpload.isUploadSuccess"
                                              class="fl formitem-attachment-addr"
                                              @click="handleDescFileMaterialsUploadUrlClick"
                                            >
                                              <div>文件上传成功地址：</div>
                                              <div>{{ formObj.formModel.bannerUrl }}</div>
                                            </div>
                                            <el-button
                                              v-if="descFileMaterialsUpload.isSelect && !descFileMaterialsUpload.isUploadSuccess"
                                              type="primary"
                                              size="small"
                                              @click="submitDescFileMaterialsUpload"
                                            >上传文件</el-button>
                                            <el-button
                                              v-if="descFileMaterialsUpload.isSelect"
                                              type="info"
                                              size="small"
                                              @click="removeDescFileMaterialsUpload"
                                            >移除文件</el-button>
                                          </el-form-item>
                                        </el-col>
                                        <el-col :span="24">
                                          <el-form-item
                                            label="批复结果："
                                            prop="dateOfBirth"
                                            label-width="76px"
                                            class="step-form-item"
                                          >
                                            <el-radio-group v-model="formObj.formModel.radio">
                                              <el-radio :label="3">通过</el-radio>
                                              <el-radio :label="6">未通过</el-radio>
                                            </el-radio-group>
                                          </el-form-item>
                                        </el-col>
                                        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                                          <el-form-item
                                            label="获得批复的时间："
                                            prop="dateOfBirth"
                                            label-width="126px"
                                            class="step-form-item"
                                          >
                                            <el-date-picker
                                              v-model="formObj.formModel.dateOfBirth"
                                              type="date"
                                              clearable
                                              value-format="yyyy-MM-dd"
                                              style="width: 100%;"
                                              placeholder="请选择获得批复的时间"
                                            ></el-date-picker>
                                          </el-form-item>
                                        </el-col>
                                        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                                          <el-form-item
                                            label="确定为入党积极分子的批复："
                                            prop="dateOfBirth"
                                            label-width="186px"
                                            class="step-form-item"
                                          >
                                            <el-upload
                                              ref="descFileMaterialsUploadRef"
                                              :limit="1"
                                              accept=".pdf"
                                              :auto-upload="false"
                                              :show-file-list="true"
                                              :action="descFileMaterialsUpload.url"
                                              :headers="descFileMaterialsUpload.headers"
                                              :before-upload="handleBeforeUpload"
                                              :on-success="handleUploadOnsuccess"
                                              :on-change="handleUploadOnchange"
                                              :on-remove="handleUploadOnRemove"
                                              :on-exceed="handleUploadOnExceed"
                                              class="formitem-attachment-fileupload"
                                            >
                                              <div class="formitem-attachment-fileupload-content">
                                                <i class="el-icon-plus" />
                                                上传文件，格式：PDF
                                              </div>
                                            </el-upload>
                                            <div
                                              v-if="descFileMaterialsUpload.isUploadSuccess"
                                              class="fl formitem-attachment-addr"
                                              @click="handleDescFileMaterialsUploadUrlClick"
                                            >
                                              <div>文件上传成功地址：</div>
                                              <div>{{ formObj.formModel.bannerUrl }}</div>
                                            </div>
                                            <el-button
                                              v-if="descFileMaterialsUpload.isSelect && !descFileMaterialsUpload.isUploadSuccess"
                                              type="primary"
                                              size="small"
                                              @click="submitDescFileMaterialsUpload"
                                            >上传文件</el-button>
                                            <el-button
                                              v-if="descFileMaterialsUpload.isSelect"
                                              type="info"
                                              size="small"
                                              @click="removeDescFileMaterialsUpload"
                                            >移除文件</el-button>
                                          </el-form-item>
                                        </el-col>
                                      </el-row>
                                    </div>
                                  </el-col>
                                </el-row>
                              </div>
                            </div>
                          </el-col>
                          <el-col :span="24">
                            <div
                              :class="innerWidth > 1200 ? 'roc-tabpane-step-fifth_default': 'roc-tabpane-step-fifth_nodefault'"
                            ></div>
                          </el-col>
                          <!-- 6 《入党积极分子、发展对象培养教育考察登记表》 -->
                          <el-col :span="24">
                            <!-- 步骤1 -->
                            <div class="roc-tabpane-step-item">
                              <div class="step-item-left">6</div>
                              <div class="step-item-right">
                                <el-row>
                                  <el-col :span="24">
                                    <div class="step-item-right-title">《入党积极分子、发展对象培养教育考察登记表》</div>
                                    <div class="step-item-right-form">
                                      <el-row :gutter="20">
                                        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                                          <el-form-item
                                            label="确定为积极分子的时间："
                                            prop="dateOfBirth"
                                            label-width="156px"
                                            class="step-form-item"
                                          >
                                            <el-date-picker
                                              v-model="formObj.formModel.dateOfBirth"
                                              type="date"
                                              clearable
                                              value-format="yyyy-MM-dd"
                                              style="width: 100%;"
                                              placeholder="请选择确定为积极分子的时间"
                                            ></el-date-picker>
                                          </el-form-item>
                                        </el-col>
                                        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                                          <el-form-item
                                            label="培养教育考察登记表："
                                            prop="dateOfBirth"
                                            label-width="146px"
                                            class="step-form-item"
                                          >
                                            <el-upload
                                              ref="descFileMaterialsUploadRef"
                                              :limit="1"
                                              accept=".pdf"
                                              :auto-upload="false"
                                              :show-file-list="true"
                                              :action="descFileMaterialsUpload.url"
                                              :headers="descFileMaterialsUpload.headers"
                                              :before-upload="handleBeforeUpload"
                                              :on-success="handleUploadOnsuccess"
                                              :on-change="handleUploadOnchange"
                                              :on-remove="handleUploadOnRemove"
                                              :on-exceed="handleUploadOnExceed"
                                              class="formitem-attachment-fileupload"
                                            >
                                              <div class="formitem-attachment-fileupload-content">
                                                <i class="el-icon-plus" />
                                                上传文件，格式：PDF
                                              </div>
                                            </el-upload>
                                            <div
                                              v-if="descFileMaterialsUpload.isUploadSuccess"
                                              class="fl formitem-attachment-addr"
                                              @click="handleDescFileMaterialsUploadUrlClick"
                                            >
                                              <div>文件上传成功地址：</div>
                                              <div>{{ formObj.formModel.bannerUrl }}</div>
                                            </div>
                                            <el-button
                                              v-if="descFileMaterialsUpload.isSelect && !descFileMaterialsUpload.isUploadSuccess"
                                              type="primary"
                                              size="small"
                                              @click="submitDescFileMaterialsUpload"
                                            >上传文件</el-button>
                                            <el-button
                                              v-if="descFileMaterialsUpload.isSelect"
                                              type="info"
                                              size="small"
                                              @click="removeDescFileMaterialsUpload"
                                            >移除文件</el-button>
                                          </el-form-item>
                                        </el-col>
                                      </el-row>
                                    </div>
                                  </el-col>
                                </el-row>
                              </div>
                            </div>
                          </el-col>
                          <el-col :span="24">
                            <div
                              :class="innerWidth > 1200 ? 'roc-tabpane-step-sixth_default': 'roc-tabpane-step-sixth_nodefault'"
                            ></div>
                          </el-col>
                          <!-- 7 入党积极分子思想汇报与参加短期集中培训的结业证书 -->
                          <el-col :span="24">
                            <!-- 步骤1 -->
                            <div class="roc-tabpane-step-item">
                              <div class="step-item-left">7</div>
                              <div class="step-item-right">
                                <el-row>
                                  <el-col :span="24">
                                    <div class="step-item-right-title">入党积极分子思想汇报与参加短期集中培训的结业证书</div>
                                    <div class="step-item-right-form">
                                      <el-row :gutter="20">
                                        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                                          <el-form-item
                                            label="结业时间："
                                            prop="dateOfBirth"
                                            label-width="76px"
                                            class="step-form-item"
                                          >
                                            <el-date-picker
                                              v-model="formObj.formModel.dateOfBirth"
                                              type="date"
                                              clearable
                                              value-format="yyyy-MM-dd"
                                              style="width: 100%;"
                                              placeholder="请选择确定为积极分子的时间"
                                            ></el-date-picker>
                                          </el-form-item>
                                        </el-col>
                                        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                                          <el-form-item
                                            label="结业证书："
                                            prop="dateOfBirth"
                                            label-width="76px"
                                            class="step-form-item"
                                          >
                                            <el-upload
                                              ref="descFileMaterialsUploadRef"
                                              :limit="1"
                                              accept=".pdf"
                                              :auto-upload="false"
                                              :show-file-list="true"
                                              :action="descFileMaterialsUpload.url"
                                              :headers="descFileMaterialsUpload.headers"
                                              :before-upload="handleBeforeUpload"
                                              :on-success="handleUploadOnsuccess"
                                              :on-change="handleUploadOnchange"
                                              :on-remove="handleUploadOnRemove"
                                              :on-exceed="handleUploadOnExceed"
                                              class="formitem-attachment-fileupload"
                                            >
                                              <div class="formitem-attachment-fileupload-content">
                                                <i class="el-icon-plus" />
                                                上传文件，格式：PDF
                                              </div>
                                            </el-upload>
                                            <div
                                              v-if="descFileMaterialsUpload.isUploadSuccess"
                                              class="fl formitem-attachment-addr"
                                              @click="handleDescFileMaterialsUploadUrlClick"
                                            >
                                              <div>文件上传成功地址：</div>
                                              <div>{{ formObj.formModel.bannerUrl }}</div>
                                            </div>
                                            <el-button
                                              v-if="descFileMaterialsUpload.isSelect && !descFileMaterialsUpload.isUploadSuccess"
                                              type="primary"
                                              size="small"
                                              @click="submitDescFileMaterialsUpload"
                                            >上传文件</el-button>
                                            <el-button
                                              v-if="descFileMaterialsUpload.isSelect"
                                              type="info"
                                              size="small"
                                              @click="removeDescFileMaterialsUpload"
                                            >移除文件</el-button>
                                          </el-form-item>
                                        </el-col>
                                        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                                          <el-form-item
                                            label="思想汇报递交时间1："
                                            prop="dateOfBirth"
                                            label-width="136px"
                                            class="step-form-item"
                                          >
                                            <el-date-picker
                                              v-model="formObj.formModel.dateOfBirth"
                                              type="date"
                                              clearable
                                              value-format="yyyy-MM-dd"
                                              style="width: 100%;"
                                              placeholder="请选择思想汇报递交时间1"
                                            ></el-date-picker>
                                          </el-form-item>
                                        </el-col>
                                        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                                          <el-form-item
                                            label="思想汇报1："
                                            prop="dateOfBirth"
                                            label-width="86px"
                                            class="step-form-item"
                                          >
                                            <el-upload
                                              ref="descFileMaterialsUploadRef"
                                              :limit="1"
                                              accept=".pdf"
                                              :auto-upload="false"
                                              :show-file-list="true"
                                              :action="descFileMaterialsUpload.url"
                                              :headers="descFileMaterialsUpload.headers"
                                              :before-upload="handleBeforeUpload"
                                              :on-success="handleUploadOnsuccess"
                                              :on-change="handleUploadOnchange"
                                              :on-remove="handleUploadOnRemove"
                                              :on-exceed="handleUploadOnExceed"
                                              class="formitem-attachment-fileupload"
                                            >
                                              <div class="formitem-attachment-fileupload-content">
                                                <i class="el-icon-plus" />
                                                上传文件，格式：PDF
                                              </div>
                                            </el-upload>
                                            <div
                                              v-if="descFileMaterialsUpload.isUploadSuccess"
                                              class="fl formitem-attachment-addr"
                                              @click="handleDescFileMaterialsUploadUrlClick"
                                            >
                                              <div>文件上传成功地址：</div>
                                              <div>{{ formObj.formModel.bannerUrl }}</div>
                                            </div>
                                            <el-button
                                              v-if="descFileMaterialsUpload.isSelect && !descFileMaterialsUpload.isUploadSuccess"
                                              type="primary"
                                              size="small"
                                              @click="submitDescFileMaterialsUpload"
                                            >上传文件</el-button>
                                            <el-button
                                              v-if="descFileMaterialsUpload.isSelect"
                                              type="info"
                                              size="small"
                                              @click="removeDescFileMaterialsUpload"
                                            >移除文件</el-button>
                                          </el-form-item>
                                        </el-col>
                                      </el-row>
                                    </div>
                                  </el-col>
                                </el-row>
                              </div>
                            </div>
                          </el-col>
                          <el-col :span="24">
                            <div class="roc-tabpane-step-third_default"></div>
                          </el-col>
                        </el-row>
                      </div>
                    </el-col>
                  </el-row>
                </div>
              </el-tab-pane>
              <el-tab-pane label="三、发展对象的确定和考察" name="DEVELOP"></el-tab-pane>
              <el-tab-pane label="四、发展党员的预审" name="PRETRIAL"></el-tab-pane>
              <el-tab-pane label="五、预备党员的接收" name="TAKEOVER"></el-tab-pane>
              <el-tab-pane label="六、预备党员的考察和转正" name="TURNPOSITIVE"></el-tab-pane>
              <el-tab-pane label="未通过" name="DIDNOTPASS"></el-tab-pane>
            </el-tabs>
          </el-col>
          <el-col :span="24"></el-col>
        </el-row>
      </div>
    </el-form>
  </div>
</template>

<script>
import Vue from 'vue';
import { pca, pcaa } from 'area-data';
import 'vue-area-linkage/dist/index.css';
import VueAreaLinkage from 'vue-area-linkage';
Vue.use(VueAreaLinkage);

export default {
  name: "Updatepartydevelop",
  data() {
    return {
      // 性别选项列表
      sexOptions: [],
      situationExplainerOptions: [],
      formObj: {
        formModel: {
          checkList: [],
          selected: []
        },
        formRules: {}
      },
      descFileMaterialsUpload: {
        isSelect: false,
        isUploadSuccess: false,
        isOnProgress: false,
        url: `${this.baseApiUrl}/file/upload`,
        headers: { Authorization: 'Bearer ' + this.getToken() }
      },
      areaDataObj: {
        pca: pca,
        pcaa: pcaa
      },
      tabsModel: 'APPLY',
      innerWidth: window.innerWidth
    };
  },
  watch: {
    rightLoading: 'handleRightLoad',
    leftLoading: 'handleLeftLoad',
    timelineList: {
      handler(val, oldval) {
        this.setMaxScrollLeft();
        if (!oldval && val) {
          if (this.positionId != null) {
            return this.positionById(this.positionId);
          }
          if (this.positionIndex != null) {
            this.positionByIndex(this.positionIndex);
          }
        }
      }, deep: true
    },
    innerWidth: {
      immediate: true,
      handler(newValue) {
      }
    }
  },
  created() {
    this.initData();
  },
  mounted() {
    window.addEventListener(
      "resize",
      () => {
        return (() => {
          this.innerWidth = window.innerWidth;
        })();
      }
    );
  },
  methods: {
    /**
    * 初始化数据
    */
    async initData() {
      await this.getMainOptions();
    },
    /**
     * 获取主要选项列表
     */
    async getMainOptions() {
      // 性别选项列表
      await this.getDicts('sys_user_sex').then(response => {
        this.sexOptions = response?.data || [];
      });
    },
    /**
     * 相关材料PDF文件上传预处理
     */
    handleBeforeUpload(file) {
      if (file.type.indexOf('application/pdf') === -1) {
        this.$refs.descFileMaterialsUploadRef.clearFiles();
        this.msgError('文件格式错误，请上传类型格式为PDF的文件！');
        return;
      }
    },
    /**
     * 相关材料PDF文件上传成功处理
     */
    handleUploadOnsuccess(response, file, fileList) {
      // 校验封面图片是否上传成功
      if (response.code !== 200) {
        this.$refs.descFileMaterialsUploadRef?.clearFiles?.();
        this.descFileMaterialsUpload.isSelect = false;
        this.descFileMaterialsUpload.isUploadSuccess = false;
        this.msgError('上传PDF文件失败，请重新选择PDF文件上传！');
        return;
      }

      // 绑定封面图片数据
      this.addPageFormObj.formModel.bannerUrl = response?.data?.url;
      this.descFileMaterialsUpload.isUploadSuccess = true;

      // 判断是否继续操作
      if (this.descFileMaterialsUpload.isOnProgress) {
        this.descFileMaterialsUpload.isOnProgress = false;
        this.$confirm(`封面图片上传成功，是否继续${(this.operationTypeByForm === 'SAVE') ? '保存' : ((this.operationTypeByForm === 'RELEASE') ? '发布' : '预览')}数据操作？`, '提示', {
          confirmButtonText: '确定 ',
          cancelButtonText: '取消 ',
          type: 'info'
        }).then(() => {
          this.handleBannerSubmitAddEditClick(this.operationTypeByForm);
        }).catch(() => {
          this.msgInfo('取消了继续保存数据操作！');
        });
      } else {
        this.$alert('上传成功！', '上传结果', { dangerouslyUseHTMLString: true });
      }
    },
    /**
     * 相关材料PDF文件状态改变
     */
    handleUploadOnchange(file, fileList) {
      if (file.status === 'ready') {
        if (((file.raw || {}).type || '').indexOf('application/pdf') === -1) {
          this.$refs.descFileMaterialsUploadRef.clearFiles();
          this.descFileMaterialsUpload.isSelect = false;
          this.msgError('文件格式错误，请上传类型格式为PDF的文件！');
          return;
        }
        this.descFileMaterialsUpload.isSelect = true;
        this.descFileMaterialsUpload.isUploadSuccess = false;
      }
    },
    /**
     * 提交上传相关材料PDF文件
     */
    submitDescFileMaterialsUpload() {
      if (!this.descFileMaterialsUpload.isSelect) { return; }
      this.$confirm('确定上传操作吗？', '提示', {
        confirmButtonText: '确定 ',
        cancelButtonText: '取消 ',
        type: 'info'
      }).then(() => {
        this.$refs.descFileMaterialsUploadRef?.submit?.();
      }).catch(() => {
        this.msgInfo('您已取消上传操作！');
      });
    },
    /**
     * 移除选择相关材料PDF文件
     */
    removeDescFileMaterialsUpload() {
      this.addPageFormObj.formModel.bannerUrl = '';
      this.$refs.descFileMaterialsUploadRef.clearFiles();
      this.descFileMaterialsUpload.isUploadSuccess = false;
      this.descFileMaterialsUpload.isSelect = false;
    },
    /**
     * 相关材料PDF文件列表移除文件时的钩子
     */
    handleUploadOnRemove(file, fileList) {
      this.addPageFormObj.formModel.bannerUrl = '';
      this.descFileMaterialsUpload.isUploadSuccess = false;
      this.descFileMaterialsUpload.isSelect = false;
    },
    /**
     * 相关材料PDF文件超出个数限制时的钩子
     */
    handleUploadOnExceed(files, fileList) {
      this.msgWarning(`只允许上传单个相关材料PDF文件`);
    },
    /**
     * 标签页点击事件
     */
    handleTabsClick() {

    }
  }
}
</script>

<style lang="scss" scoped>
.updatepartydevelop {
  &-head {
    margin-bottom: 20px;
    width: 100%;
    padding: 15px 20px;
    background: url("../../assets/images/home-head-img.png"), #ffffff;
    background-size: 67px 67px, cover;
    background-position: right 5px bottom 0px, center;
    background-repeat: no-repeat, no-repeat;
    border-radius: 10px;

    &-title {
      display: flex;
      align-items: center;

      div {
        &:first-child {
          height: 37px;
          line-height: 37px;
        }

        &:last-child {
          margin-left: 15px;
          height: 37px;
          font-size: 26px;
          font-weight: 400;
          color: #4f4f4f;
          line-height: 37px;
          letter-spacing: 1px;
        }

        img {
          width: 34px;
          height: 34px;
        }
      }
    }
  }

  &-title {
    display: flex;
    align-items: center;

    div {
      &:first-child {
        height: 37px;
        line-height: 37px;
      }

      &:last-child {
        margin-left: 15px;
        height: 37px;
        font-size: 26px;
        font-weight: 400;
        color: #4f4f4f;
        line-height: 37px;
        letter-spacing: 1px;
      }

      img {
        width: 34px;
        height: 34px;
      }
    }
  }

  &-line {
    width: 100%;
    height: 1px;
    background: #d8dce5;
    margin-bottom: 15px;
  }

  &-basic {
    padding: 20px 20px 50px;
    margin-bottom: 20px;
    // margin: 87px 0 20px 0;
    background: url("../../assets/images/home-head-img.png"), #ffffff;
    background-size: 67px 67px, cover;
    background-position: right 5px bottom 5px, center;
    background-repeat: no-repeat, no-repeat;
    border-radius: 10px;

    ::v-deep {
      .el-form-item__content {
        .area-cascader-wrap {
          .area-select {
            height: 36px;
            .area-selected-trigger {
              padding: 0 25px 0 15px;
            }
          }

          .area-select.large {
            width: 100%;
          }
        }
      }
    }
  }

  &-situation {
    padding: 20px 20px 72px;
    margin-bottom: 20px;
    background: url("../../assets/images/home-head-img.png"), #ffffff;
    background-size: 67px 67px, cover;
    background-position: right 5px bottom 5px, center;
    background-repeat: no-repeat, no-repeat;
    border-radius: 10px;

    &-tabs.el-tabs {
      margin-top: 20px;

      ::v-deep {
        .el-tabs__item {
          font-size: 18px;
          font-weight: 500;
          color: #4f4f4f;
          opacity: 0.9;
        }

        .el-tabs__active-bar {
          background-color: #de0010;
        }

        .el-tabs__item.is-active {
          color: #de0010;
          background: #f9e9ea;
        }
      }
    }

    .roc-tabpane {
      display: block;
      width: 100%;
      min-height: 600px;

      &-head {
        display: flex;
        align-items: center;
        width: 100%;
        height: 94px;

        .tabpane-head-left {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 94px;
          height: 94px;
          border: 4px solid #979797;
          border-radius: 50%;

          &.is-active {
            border: 4px solid #de0010;
          }

          &-title {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 78px;
            height: 78px;
            background: #979797;
            border-radius: 50%;
            font-size: 30px;
            font-weight: 800;
            color: #ffffff;
            line-height: 42px;
            letter-spacing: 1px;

            &.is-active {
              background: #de0010;
            }
          }
        }
        .tabpane-head-right {
          margin-left: 15px;
          height: 50px;
          font-size: 36px;
          font-weight: 400;
          color: #111111;
          line-height: 50px;
          letter-spacing: 1px;
        }
      }

      &-line {
        margin-left: 46px;
        width: 2px;
        height: 46px;
        border: 2px solid #979797;

        &.is-active {
          border: 2px solid #de0010;
        }
      }

      &-step {
        width: 100%;

        &-item {
          display: flex;
          width: 100%;

          .step-item-left {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: 16px;
            width: 62px;
            height: 62px;
            border: 2px solid #979797;
            border-radius: 50%;
            font-size: 36px;
            font-weight: 400;
            color: #979797;
            line-height: 50px;
            letter-spacing: 1px;

            &.is-active {
              border: 2px solid #de0010;
              color: #de0010;
            }
          }

          .step-item-right {
            flex: 1;
            margin-left: 10px;
            padding-bottom: 10px;

            &-title {
              margin-top: 10px;
              margin-bottom: 8px;
              height: 28px;
              font-size: 20px;
              font-weight: 400;
              color: #111111;
              line-height: 28px;
            }

            &-form {
              ::v-deep {
                .el-form-item.step-form-item {
                  margin-bottom: 10px;
                }

                .el-form-item__label {
                  padding: 0;
                  text-align: left;
                }
              }
            }
          }
        }
        &-first_default,
        &-second_default {
          position: absolute;
          margin-top: -64px;
          margin-left: 46px;
          width: 2px;
          height: 64px;
          border: 2px solid #979797;

          &.is-active {
            border: 2px solid #de0010;
          }
        }

        &-first_nodefault,
        &-second_nodefault {
          position: absolute;
          margin-top: -122px;
          margin-left: 46px;
          width: 2px;
          height: 122px;
          border: 2px solid #979797;

          &.is-active {
            border: 2px solid #de0010;
          }
        }

        &-third_default {
          position: absolute;
          margin-top: -64px;
          margin-left: 46px;
          width: 2px;
          height: 165px;
          border: 2px solid #979797;

          &.is-active {
            border: 2px solid #de0010;
          }
        }

        &-fourth_default {
          position: absolute;
          margin-top: -108px;
          margin-left: 46px;
          width: 2px;
          height: 108px;
          border: 2px solid #979797;

          &.is-active {
            border: 2px solid #de0010;
          }
        }

        &-fourth_nodefault {
          position: absolute;
          margin-top: -200px;
          margin-left: 46px;
          width: 2px;
          height: 200px;
          border: 2px solid #979797;

          &.is-active {
            border: 2px solid #de0010;
          }
        }

        &-fifth_default {
          position: absolute;
          margin-top: -257px;
          margin-left: 46px;
          width: 2px;
          height: 257px;
          border: 2px solid #979797;

          &.is-active {
            border: 2px solid #de0010;
          }
        }

        &-fifth_nodefault {
          position: absolute;
          margin-top: -395px;
          margin-left: 46px;
          width: 2px;
          height: 395px;
          border: 2px solid #979797;

          &.is-active {
            border: 2px solid #de0010;
          }
        }

        &-sixth_default {
          position: absolute;
          margin-top: -52px;
          margin-left: 46px;
          width: 2px;
          height: 52px;
          border: 2px solid #979797;

          &.is-active {
            border: 2px solid #de0010;
          }
        }

        &-sixth_nodefault {
          position: absolute;
          margin-top: -97px;
          margin-left: 46px;
          width: 2px;
          height: 97px;
          border: 2px solid #979797;

          &.is-active {
            border: 2px solid #de0010;
          }
        }
      }
    }
  }
}
</style>