Kaynağa Gözat

更新党员发展页面完成45%

Rockery 3 yıl önce
ebeveyn
işleme
90c78839b8

+ 88 - 0
src/assets/styles/cust-global.scss

@@ -496,3 +496,91 @@
   color: rgba(0, 0, 0, 0.847058823529412);
   opacity: 0.8;
 }
+
+.el-button--primary.didnotpass-btngroup-tipsbtn.is-active,
+.el-button--primary.didnotpass-btngroup-tipsbtn:active {
+  background: #ffffff;
+  border-color: #de0010;
+  color: #de0010;
+}
+
+.el-button--primary.didnotpass-btngroup-tipsbtn:focus,
+.el-button--primary.didnotpass-btngroup-tipsbtn:hover {
+  background: #ffffff;
+  border-color: #ec5a64;
+  color: #de0010;
+}
+
+.el-button--primary.didnotpass-btngroup-tipsbtn {
+  background-color: #ffffff;
+  border-color: #de0010;
+  font-size: 14px;
+  font-weight: 400;
+  color: #de0010;
+}
+
+.didnotpass-confirm-success {
+  .el-message-box__header {
+    .el-message-box__title {
+      font-size: 24px;
+      font-weight: 400;
+
+      .el-message-box__status {
+        font-size: 32px !important;
+      }
+    }
+  }
+
+  .el-message-box__content {
+    padding-top: 20px;
+    padding-bottom: 40px;
+    font-size: 18px;
+    font-weight: 400;
+  }
+}
+
+.didnotpass-confirm-warning {
+  width: 510px;
+
+  .el-message-box__header {
+    .el-message-box__title {
+      font-size: 24px;
+      font-weight: 400;
+
+      .el-message-box__status {
+        font-size: 32px !important;
+      }
+    }
+  }
+
+  .el-message-box__content {
+    padding-top: 20px;
+    padding-bottom: 40px;
+
+    .didnotpass-dialog-title {
+      margin-bottom: 15px;
+      width: 100%;
+      text-align: center;
+      font-size: 18px;
+      font-weight: 400;
+    }
+
+    .didnotpass-dialog-content {
+      display: flex;
+      margin-bottom: 15px;
+      width: 100%;
+      font-size: 16px;
+      font-weight: 400;
+
+      &-left {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 24px;
+        height: 24px;
+        border-radius: 50%;
+        border: 1px solid #979797;
+      }
+    }
+  }
+}

+ 1461 - 132
src/components/UpdatePartyDevelop/index.vue

@@ -3,7 +3,7 @@
  * @Author: Rockery
  * @Date: 2021-12-15 17:54:05
  * @LastEditors: Rockery
- * @LastEditTime: 2021-12-20 17:35:54
+ * @LastEditTime: 2021-12-21 18:14:11
  * @FilePath: \party_construct_web\src\components\UpdatePartyDevelop\index.vue
  * @Copyright: Copyright (c) 2016~2021 Rockery(1113269755@qq.com)
 -->
@@ -263,7 +263,6 @@
                         <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">
@@ -312,12 +311,13 @@
                           </el-col>
                           <el-col :span="24">
                             <div
-                              :class="innerWidth > 1200 ? 'roc-tabpane-step-first_default': 'roc-tabpane-step-first_nodefault'"
+                              class="roc-tabpane-step-tail"
+                              :style="{height: ((innerWidth > 1200) ? '64px' : '122px'), marginTop: ((innerWidth > 1200) ? '-64px' : '-122px')}"
                             ></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">
@@ -366,12 +366,13 @@
                           </el-col>
                           <el-col :span="24">
                             <div
-                              :class="innerWidth > 1200 ? 'roc-tabpane-step-second_default': 'roc-tabpane-step-second_nodefault'"
+                              class="roc-tabpane-step-tail"
+                              :style="{height: ((innerWidth > 1200) ? '64px' : '122px'), marginTop: ((innerWidth > 1200) ? '-64px' : '-122px')}"
                             ></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">
@@ -403,7 +404,10 @@
                             </div>
                           </el-col>
                           <el-col :span="24">
-                            <div class="roc-tabpane-step-third_default"></div>
+                            <div
+                              class="roc-tabpane-step-tail"
+                              :style="{height: ((innerWidth > 1200) ? '165px' : '165px'), marginTop: ((innerWidth > 1200) ? '-64px' : '-64px')}"
+                            ></div>
                           </el-col>
                         </el-row>
                       </div>
@@ -430,7 +434,6 @@
                         <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">
@@ -511,12 +514,13 @@
                           </el-col>
                           <el-col :span="24">
                             <div
-                              :class="innerWidth > 1200 ? 'roc-tabpane-step-fourth_default': 'roc-tabpane-step-fourth_nodefault'"
+                              class="roc-tabpane-step-tail"
+                              :style="{height: ((innerWidth > 1200) ? '108px' : '200px'), marginTop: ((innerWidth > 1200) ? '-108px' : '-200px')}"
                             ></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">
@@ -659,12 +663,13 @@
                           </el-col>
                           <el-col :span="24">
                             <div
-                              :class="innerWidth > 1200 ? 'roc-tabpane-step-fifth_default': 'roc-tabpane-step-fifth_nodefault'"
+                              class="roc-tabpane-step-tail"
+                              :style="{height: ((innerWidth > 1200) ? '257px' : '395px'), marginTop: ((innerWidth > 1200) ? '-257px' : '-395px')}"
                             ></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">
@@ -715,12 +720,13 @@
                           </el-col>
                           <el-col :span="24">
                             <div
-                              :class="innerWidth > 1200 ? 'roc-tabpane-step-sixth_default': 'roc-tabpane-step-sixth_nodefault'"
+                              class="roc-tabpane-step-tail"
+                              :style="{height: ((innerWidth > 1200) ? '52px' : '97px'), marginTop: ((innerWidth > 1200) ? '-52px' : '-97px')}"
                             ></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">
@@ -804,7 +810,8 @@
                           </el-col>
                           <el-col :span="24">
                             <div
-                              :class="innerWidth > 1200 ? 'roc-tabpane-step-seventh_default': 'roc-tabpane-step-seventh_nodefault'"
+                              class="roc-tabpane-step-tail"
+                              :style="{height: ((innerWidth > 1200) ? '128px' : '222px'), marginTop: ((innerWidth > 1200) ? '-110px' : '-202px')}"
                             ></div>
                           </el-col>
                         </el-row>
@@ -832,7 +839,6 @@
                         <el-row>
                           <!-- 8 讨论确定发展对象前听取意见记录 -->
                           <el-col :span="24">
-                            <!-- 步骤1 -->
                             <div class="roc-tabpane-step-item">
                               <div class="step-item-left">8</div>
                               <div class="step-item-right">
@@ -881,12 +887,13 @@
                           </el-col>
                           <el-col :span="24">
                             <div
-                              :class="innerWidth > 1200 ? 'roc-tabpane-step-eighth_default': 'roc-tabpane-step-eighth_nodefault'"
+                              class="roc-tabpane-step-tail"
+                              :style="{height: ((innerWidth > 1200) ? '64px' : '122px'), marginTop: ((innerWidth > 1200) ? '-64px' : '-122px')}"
                             ></div>
                           </el-col>
+
                           <!-- 9 确定为发展对象的支委会会议记录 -->
                           <el-col :span="24">
-                            <!-- 步骤1 -->
                             <div class="roc-tabpane-step-item">
                               <div class="step-item-left">9</div>
                               <div class="step-item-right">
@@ -952,12 +959,13 @@
                           </el-col>
                           <el-col :span="24">
                             <div
-                              :class="innerWidth > 1200 ? 'roc-tabpane-step-ninth_default': 'roc-tabpane-step-ninth_nodefault'"
+                              class="roc-tabpane-step-tail"
+                              :style="{height: ((innerWidth > 1200) ? '98px' : '144px'), marginTop: ((innerWidth > 1200) ? '-98px' : '-144px')}"
                             ></div>
                           </el-col>
+
                           <!-- 10 确定为发展对象相关公示材料及备案请示、报告、批复 -->
                           <el-col :span="24">
-                            <!-- 步骤1 -->
                             <div class="roc-tabpane-step-item">
                               <div class="step-item-left">10</div>
                               <div class="step-item-right">
@@ -1089,12 +1097,13 @@
                           </el-col>
                           <el-col :span="24">
                             <div
-                              :class="innerWidth > 1200 ? 'roc-tabpane-step-tenth_default': 'roc-tabpane-step-tenth_nodefault'"
+                              class="roc-tabpane-step-tail"
+                              :style="{height: ((innerWidth > 1200) ? '212px' : '350px'), marginTop: ((innerWidth > 1200) ? '-212px' : '-350px')}"
                             ></div>
                           </el-col>
+
                           <!-- 11 综合性政审报告和相关材料 -->
                           <el-col :span="24">
-                            <!-- 步骤1 -->
                             <div class="roc-tabpane-step-item">
                               <div class="step-item-left">11</div>
                               <div class="step-item-right">
@@ -1176,12 +1185,13 @@
                           </el-col>
                           <el-col :span="24">
                             <div
-                              :class="innerWidth > 1200 ? 'roc-tabpane-step-eleventh_default': 'roc-tabpane-step-eleventh_nodefault'"
+                              class="roc-tabpane-step-tail"
+                              :style="{height: ((innerWidth > 1200) ? '110px' : '202px'), marginTop: ((innerWidth > 1200) ? '-110px' : '-202px')}"
                             ></div>
                           </el-col>
+
                           <!-- 12 发展对象参加短期集中培训的结业证书 -->
                           <el-col :span="24">
-                            <!-- 步骤1 -->
                             <div class="roc-tabpane-step-item">
                               <div class="step-item-left">12</div>
                               <div class="step-item-right">
@@ -1232,7 +1242,8 @@
                           </el-col>
                           <el-col :span="24">
                             <div
-                              :class="innerWidth > 1200 ? 'roc-tabpane-step-twelfth_default': 'roc-tabpane-step-twelfth_nodefault'"
+                              class="roc-tabpane-step-tail"
+                              :style="{height: ((innerWidth > 1200) ? '72px' : '118px'), marginTop: ((innerWidth > 1200) ? '-52px' : '-98px')}"
                             ></div>
                           </el-col>
                         </el-row>
@@ -1241,115 +1252,1433 @@
                   </el-row>
                 </div>
               </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 class="pagefooter-btngroup">
-      <el-button
-        type="rocpartyprimaryplainbtn"
-        icon="el-icon-circle-close"
-        @click="handlePageCloseClick"
-      >取 消</el-button>
-      <el-button
-        type="rocpartyprimarybtn"
-        icon="el-icon-circle-check"
-        @click="handlePageSubmitClick"
-      >保 存</el-button>
-    </div>
-  </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);
+              <!-- 四、发展党员的预审 -->
+              <el-tab-pane label="四、发展党员的预审" name="PRETRIAL">
+                <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>
 
-export default {
-  name: "Updatepartydevelop",
-  components: {
-    'roc-pdf-file-upload': () => import('@/components/RocPdfFileUpload')
-  },
-  data() {
-    return {
-      // 性别选项列表
-      sexOptions: [],
-      formObj: {
-        formModel: {
-          checkList: [],
-          selected: []
-        },
-        formRules: {}
-      },
-      areaDataObj: {
-        pca: pca,
-        pcaa: pcaa
-      },
-      tabsModel: 'APPLY',
-      innerWidth: window.innerWidth
-    };
-  },
-  watch: {
-    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 || [];
-      });
-    },
-    /**
-     * 标签页点击事件
-     */
-    handleTabsClick() {
+                          <!-- 13 支委会拟接收预备党员审查会议记录和上报的预审请示 -->
+                          <el-col :span="24">
+                            <div class="roc-tabpane-step-item">
+                              <div class="step-item-left">13</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="devPartyPreTrialRadio"
+                                            label-width="120px"
+                                            class="step-form-item"
+                                          >
+                                            <el-radio-group
+                                              v-model="formObj.formModel.detDevTarRadio"
+                                            >
+                                              <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="devPartyPreTrialRevMeetTime"
+                                            label-width="100px"
+                                            class="step-form-item"
+                                          >
+                                            <el-date-picker
+                                              v-model="formObj.formModel.devPartyPreTrialRevMeetTime"
+                                              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="devPartyPreTrialRevMeetRecord"
+                                            label-width="100px"
+                                            class="step-form-item"
+                                          >
+                                            <roc-pdf-file-upload
+                                              key="ROCPDFFILEUPLOADDEVPARTYPRETRIALREVMEETRECORDKEY"
+                                              v-model="formObj.formModel.devPartyPreTrialRevMeetRecord"
+                                              upload-file-title="审查会议记录"
+                                              :upload-url="baseApiUrl + '/file/upload'"
+                                              :upload-headers="{ Authorization: 'Bearer ' + getToken() }"
+                                            ></roc-pdf-file-upload>
+                                          </el-form-item>
+                                        </el-col>
+                                        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
+                                          <el-form-item
+                                            label="上报预审请示时间:"
+                                            prop="submitDevPartyPreTrialTime"
+                                            label-width="130px"
+                                            class="step-form-item"
+                                          >
+                                            <el-date-picker
+                                              v-model="formObj.formModel.submitDevPartyPreTrialTime"
+                                              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="submitDevPartyPreTrialRecord"
+                                            label-width="100px"
+                                            class="step-form-item"
+                                          >
+                                            <roc-pdf-file-upload
+                                              key="ROCPDFFILEUPLOADSUBMITDEVPARTYPRETRIALRECORDKEY"
+                                              v-model="formObj.formModel.submitDevPartyPreTrialRecord"
+                                              upload-file-title="预审请示"
+                                              :upload-url="baseApiUrl + '/file/upload'"
+                                              :upload-headers="{ Authorization: 'Bearer ' + getToken() }"
+                                            ></roc-pdf-file-upload>
+                                          </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-tail"
+                              :style="{height: ((innerWidth > 1200) ? '156px' : '248px'), marginTop: ((innerWidth > 1200) ? '-156px' : '-248px')}"
+                            ></div>
+                          </el-col>
+
+                          <!-- 14 基层党委预审会议记录及预审批复 -->
+                          <el-col :span="24">
+                            <div class="roc-tabpane-step-item">
+                              <div class="step-item-left">14</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="devPartyPreTrialApprovalRadio"
+                                            label-width="120px"
+                                            class="step-form-item"
+                                          >
+                                            <el-radio-group
+                                              v-model="formObj.formModel.devPartyPreTrialApprovalRadio"
+                                            >
+                                              <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="devPartyPreTrialApprovalTime"
+                                            label-width="160px"
+                                            class="step-form-item"
+                                          >
+                                            <el-date-picker
+                                              v-model="formObj.formModel.devPartyPreTrialApprovalTime"
+                                              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="devPartyPreTrialApprovalRecord"
+                                            label-width="160px"
+                                            class="step-form-item"
+                                          >
+                                            <roc-pdf-file-upload
+                                              key="ROCPDFFILEUPLOADDEVPARTYPRETRIALAPPROVALRECORDKEY"
+                                              v-model="formObj.formModel.devPartyPreTrialApprovalRecord"
+                                              upload-file-title="基层党委预审会议记录"
+                                              :upload-url="baseApiUrl + '/file/upload'"
+                                              :upload-headers="{ Authorization: 'Bearer ' + getToken() }"
+                                            ></roc-pdf-file-upload>
+                                          </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-tail"
+                              :style="{height: ((innerWidth > 1200) ? '98px' : '144px'), marginTop: ((innerWidth > 1200) ? '-98px' : '-144px')}"
+                            ></div>
+                          </el-col>
+
+                          <!-- 15 发展党员工作有关工作部门征求意见情况 -->
+                          <el-col :span="24">
+                            <div class="roc-tabpane-step-item">
+                              <div class="step-item-left">15</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="solicitOpinionsTime"
+                                            label-width="110px"
+                                            class="step-form-item"
+                                          >
+                                            <el-date-picker
+                                              v-model="formObj.formModel.solicitOpinionsTime"
+                                              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="solicitOpinionsRecord"
+                                            label-width="140px"
+                                            class="step-form-item"
+                                          >
+                                            <roc-pdf-file-upload
+                                              key="ROCPDFFILEUPLOADSOLICITOPINIONSRECORDKEY"
+                                              v-model="formObj.formModel.solicitOpinionsRecord"
+                                              upload-file-title="征求意见情况的材料"
+                                              :upload-url="baseApiUrl + '/file/upload'"
+                                              :upload-headers="{ Authorization: 'Bearer ' + getToken() }"
+                                            ></roc-pdf-file-upload>
+                                          </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-tail"
+                              :style="{height: ((innerWidth > 1200) ? '52px' : '98px'), marginTop: ((innerWidth > 1200) ? '-52px' : '-98px')}"
+                            ></div>
+                          </el-col>
+                          
+                          <!-- 16 《中国共产党入党志愿书》 -->
+                          <el-col :span="24">
+                            <div class="roc-tabpane-step-item">
+                              <div class="step-item-left">16</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="volunteerTime"
+                                            label-width="116px"
+                                            class="step-form-item"
+                                          >
+                                            <el-date-picker
+                                              v-model="formObj.formModel.volunteerTime"
+                                              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="volunteerRecord"
+                                            label-width="190px"
+                                            class="step-form-item"
+                                          >
+                                            <roc-pdf-file-upload
+                                              key="ROCPDFFILEUPLOADVOLUNTEERRECORDKEY"
+                                              v-model="formObj.formModel.volunteerRecord"
+                                              upload-file-title="《中国共产党入党志愿书》"
+                                              :upload-url="baseApiUrl + '/file/upload'"
+                                              :upload-headers="{ Authorization: 'Bearer ' + getToken() }"
+                                            ></roc-pdf-file-upload>
+                                          </el-form-item>
+                                        </el-col>
+                                        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
+                                          <el-form-item
+                                            label="支委会接收预备党员的时间:"
+                                            prop="acceptPrepPartyTime"
+                                            label-width="190px"
+                                            class="step-form-item"
+                                          >
+                                            <el-date-picker
+                                              v-model="formObj.formModel.acceptPrepPartyTime"
+                                              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="grassrootsApproveTime"
+                                            label-width="260px"
+                                            class="step-form-item"
+                                          >
+                                            <el-date-picker
+                                              v-model="formObj.formModel.grassrootsApproveTime"
+                                              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="preparatoryPeriod"
+                                            label-width="56px"
+                                            class="step-form-item"
+                                          >
+                                            <el-date-picker
+                                              v-model="formObj.formModel.preparatoryPeriod"
+                                              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="branchCommitteeTime"
+                                            label-width="130px"
+                                            class="step-form-item"
+                                          >
+                                            <el-date-picker
+                                              v-model="formObj.formModel.branchCommitteeTime"
+                                              type="date"
+                                              clearable
+                                              value-format="yyyy-MM-dd"
+                                              style="width: 100%;"
+                                              placeholder="请选择支委会转正的时间"
+                                            ></el-date-picker>
+                                          </el-form-item>
+                                        </el-col>
+
+                                        <!-- 转正基层党委审批意见的时间 -->
+                                        <el-col :span="24">
+                                          <el-row :gutter="20">
+                                            <el-col :span="12">
+                                              <el-form-item
+                                                label="转正基层党委审批意见的时间:"
+                                                prop="promoteApprovalTime"
+                                                label-width="200px"
+                                                class="step-form-item"
+                                              >
+                                                <el-date-picker
+                                                  v-model="formObj.formModel.promoteApprovalTime"
+                                                  type="date"
+                                                  clearable
+                                                  value-format="yyyy-MM-dd"
+                                                  style="width: 100%;"
+                                                  placeholder="请选择转正基层党委审批意见的时间"
+                                                ></el-date-picker>
+                                              </el-form-item>
+                                            </el-col>
+                                          </el-row>
+                                        </el-col>
+
+                                        <!-- 是否延期转为正式党员 -->
+                                        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
+                                          <el-form-item
+                                            label="是否延期转为正式党员:"
+                                            prop="postponementRadio"
+                                            label-width="180px"
+                                            class="step-form-item"
+                                          >
+                                            <el-radio-group
+                                              v-model="formObj.formModel.postponementRadio"
+                                            >
+                                              <el-radio :label="1">是</el-radio>
+                                              <el-radio :label="0">否</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="postponementTime"
+                                            label-width="230px"
+                                            class="step-form-item"
+                                          >
+                                            <el-date-picker
+                                              v-model="formObj.formModel.postponementTime"
+                                              type="date"
+                                              clearable
+                                              value-format="yyyy-MM-dd"
+                                              style="width: 100%;"
+                                              placeholder="请选择延期转正基层党委审批意见的时间"
+                                            ></el-date-picker>
+                                          </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-tail"
+                              :style="{height: ((innerWidth > 1200) ? '256px' : '440px'), marginTop: ((innerWidth > 1200) ? '-236px' : '-420px')}"
+                            ></div>
+                          </el-col>
+                        </el-row>
+                      </div>
+                    </el-col>
+                  </el-row>
+                </div>
+              </el-tab-pane>
+
+              <!-- 五、预备党员的接收 -->
+              <el-tab-pane label="五、预备党员的接收" name="TAKEOVER">
+                <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>
+                          <!-- 17 支部大会接收为中共预备党员的会议记录和票决结果 -->
+                          <el-col :span="24">
+                            <div class="roc-tabpane-step-item">
+                              <div class="step-item-left">17</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="branchAssemblyTime"
+                                            label-width="140px"
+                                            class="step-form-item"
+                                          >
+                                            <el-date-picker
+                                              v-model="formObj.formModel.branchAssemblyTime"
+                                              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="branchAssemblyRecord"
+                                            label-width="140px"
+                                            class="step-form-item"
+                                          >
+                                            <roc-pdf-file-upload
+                                              key="ROCPDFFILEUPLOADBRANCHASSEMBLYRECORDKEY"
+                                              v-model="formObj.formModel.branchAssemblyRecord"
+                                              upload-file-title="支部大会的会议记录"
+                                              :upload-url="baseApiUrl + '/file/upload'"
+                                              :upload-headers="{ Authorization: 'Bearer ' + getToken() }"
+                                            ></roc-pdf-file-upload>
+                                          </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-tail"
+                              :style="{height: ((innerWidth > 1200) ? '52px' : '98px'), marginTop: ((innerWidth > 1200) ? '-52px' : '-98px')}"
+                            ></div>
+                          </el-col>
+
+                          <!-- 18 接收为中共预备党员审批请示 -->
+                          <el-col :span="24">
+                            <div class="roc-tabpane-step-item">
+                              <div class="step-item-left">18</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="communistPrepMemberTime"
+                                            label-width="100px"
+                                            class="step-form-item"
+                                          >
+                                            <el-date-picker
+                                              v-model="formObj.formModel.communistPrepMemberTime"
+                                              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="communistPrepMemberRecord"
+                                            label-width="100px"
+                                            class="step-form-item"
+                                          >
+                                            <roc-pdf-file-upload
+                                              key="ROCPDFFILEUPLOADCOMMUNISTPREPMEMBERRECORDKEY"
+                                              v-model="formObj.formModel.communistPrepMemberRecord"
+                                              upload-file-title="审批请示材料"
+                                              :upload-url="baseApiUrl + '/file/upload'"
+                                              :upload-headers="{ Authorization: 'Bearer ' + getToken() }"
+                                            ></roc-pdf-file-upload>
+                                          </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-tail"
+                              :style="{height: ((innerWidth > 1200) ? '52px' : '98px'), marginTop: ((innerWidth > 1200) ? '-52px' : '-98px')}"
+                            ></div>
+                          </el-col>
+
+                          <!-- 19 基层党委审批会议记录、会议纪要和批复 -->
+                          <el-col :span="24">
+                            <div class="roc-tabpane-step-item">
+                              <div class="step-item-left">19</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="prepPartyApprovalRadio"
+                                            label-width="90px"
+                                            class="step-form-item"
+                                          >
+                                            <el-radio-group
+                                              v-model="formObj.formModel.prepPartyApprovalRadio"
+                                            >
+                                              <el-radio :label="1">通过</el-radio>
+                                              <el-radio :label="0">未通过</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="prepPartyApprovalMeetTime"
+                                            label-width="160px"
+                                            class="step-form-item"
+                                          >
+                                            <el-date-picker
+                                              v-model="formObj.formModel.prepPartyApprovalMeetTime"
+                                              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="prepPartyApprovalMeetRecord"
+                                            label-width="230px"
+                                            class="step-form-item"
+                                          >
+                                            <roc-pdf-file-upload
+                                              key="ROCPDFFILEUPLOADPREPPARTYAPPROVALMEETRECORDKEY"
+                                              v-model="formObj.formModel.prepPartyApprovalMeetRecord"
+                                              upload-file-title="基层党委审批会议记录、会议纪要"
+                                              :upload-url="baseApiUrl + '/file/upload'"
+                                              :upload-headers="{ Authorization: 'Bearer ' + getToken() }"
+                                            ></roc-pdf-file-upload>
+                                          </el-form-item>
+                                        </el-col>
+
+                                        <!-- 批复时间 -->
+                                        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
+                                          <el-form-item
+                                            label="批复时间:"
+                                            prop="prepPartyApprovalTime"
+                                            label-width="76px"
+                                            class="step-form-item"
+                                          >
+                                            <el-date-picker
+                                              v-model="formObj.formModel.prepPartyApprovalTime"
+                                              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="prepPartyApprovalRecord"
+                                            label-width="76px"
+                                            class="step-form-item"
+                                          >
+                                            <roc-pdf-file-upload
+                                              key="ROCPDFFILEUPLOADPREPPARTYAPPROVALRECORDKEY"
+                                              v-model="formObj.formModel.prepPartyApprovalRecord"
+                                              upload-file-title="批复材料"
+                                              :upload-url="baseApiUrl + '/file/upload'"
+                                              :upload-headers="{ Authorization: 'Bearer ' + getToken() }"
+                                            ></roc-pdf-file-upload>
+                                          </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-tail"
+                              :style="{height: ((innerWidth > 1200) ? '156px' : '248px'), marginTop: ((innerWidth > 1200) ? '-156px' : '-248px')}"
+                            ></div>
+                          </el-col>
+
+                          <!-- 20 向上级党委组织部门的备案报告和批复 -->
+                          <el-col :span="24">
+                            <div class="roc-tabpane-step-item">
+                              <div class="step-item-left">20</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="replyRecordReportRadio"
+                                            label-width="90px"
+                                            class="step-form-item"
+                                          >
+                                            <el-radio-group
+                                              v-model="formObj.formModel.replyRecordReportRadio"
+                                            >
+                                              <el-radio :label="1">通过</el-radio>
+                                              <el-radio :label="0">未通过</el-radio>
+                                            </el-radio-group>
+                                          </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-tail"
+                              :style="{height: ((innerWidth > 1200) ? '62px' : '62px'), marginTop: ((innerWidth > 1200) ? '-42px' : '-42px')}"
+                            ></div>
+                          </el-col>
+                        </el-row>
+                      </div>
+                    </el-col>
+                  </el-row>
+                </div>
+              </el-tab-pane>
+
+              <!-- 六、预备党员的考察和转正 -->
+              <el-tab-pane label="六、预备党员的考察和转正" name="TURNPOSITIVE">
+                <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>
+                          <!-- 21 《预备党员培养考察教育登记表》 -->
+                          <el-col :span="24">
+                            <div class="roc-tabpane-step-item">
+                              <div class="step-item-left">21</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="prepPartyEduRegistTime"
+                                            label-width="60px"
+                                            class="step-form-item"
+                                          >
+                                            <el-date-picker
+                                              v-model="formObj.formModel.prepPartyEduRegistTime"
+                                              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="prepPartyEduRegistRecord"
+                                            label-width="230px"
+                                            class="step-form-item"
+                                          >
+                                            <roc-pdf-file-upload
+                                              key="ROCPDFFILEUPLOADPREPPARTYEDUREGISTRECORDKEY"
+                                              v-model="formObj.formModel.prepPartyEduRegistRecord"
+                                              upload-file-title="《预备党员培养考察教育登记表》"
+                                              :upload-url="baseApiUrl + '/file/upload'"
+                                              :upload-headers="{ Authorization: 'Bearer ' + getToken() }"
+                                            ></roc-pdf-file-upload>
+                                          </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-tail"
+                              :style="{height: ((innerWidth > 1200) ? '52px' : '98px'), marginTop: ((innerWidth > 1200) ? '-52px' : '-98px')}"
+                            ></div>
+                          </el-col>
+
+                          <!-- 22 转正申请书 -->
+                          <el-col :span="24">
+                            <div class="roc-tabpane-step-item">
+                              <div class="step-item-left">22</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="regularApplicationTime"
+                                            label-width="140px"
+                                            class="step-form-item"
+                                          >
+                                            <el-date-picker
+                                              v-model="formObj.formModel.regularApplicationTime"
+                                              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="regularApplicationRecord"
+                                            label-width="90px"
+                                            class="step-form-item"
+                                          >
+                                            <roc-pdf-file-upload
+                                              key="ROCPDFFILEUPLOADREGULARAPPLICATIONRECORDKEY"
+                                              v-model="formObj.formModel.regularApplicationRecord"
+                                              upload-file-title="转正申请书:"
+                                              :upload-url="baseApiUrl + '/file/upload'"
+                                              :upload-headers="{ Authorization: 'Bearer ' + getToken() }"
+                                            ></roc-pdf-file-upload>
+                                          </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-tail"
+                              :style="{height: ((innerWidth > 1200) ? '52px' : '98px'), marginTop: ((innerWidth > 1200) ? '-52px' : '-98px')}"
+                            ></div>
+                          </el-col>
+
+                          <!-- 23 预备期思想汇报 -->
+                          <el-col :span="24">
+                            <div class="roc-tabpane-step-item">
+                              <div class="step-item-left">23</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-width="0px" class="step-form-item">
+                                            <div class="step-item-twenty_third">与第7步的思想汇报合并</div>
+                                          </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-tail"
+                              :style="{height: ((innerWidth > 1200) ? '38px' : '38px'), marginTop: ((innerWidth > 1200) ? '-38px' : '-38px')}"
+                            ></div>
+                          </el-col>
+
+                          <!-- 24 预备党员转正征求党内外群众意见谈话记录 -->
+                          <el-col :span="24">
+                            <div class="roc-tabpane-step-item">
+                              <div class="step-item-left">24</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="prepPartyPublicOpinionTime"
+                                            label-width="116px"
+                                            class="step-form-item"
+                                          >
+                                            <el-date-picker
+                                              v-model="formObj.formModel.prepPartyPublicOpinionTime"
+                                              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="prepPartyPublicOpinionRecord"
+                                            label-width="190px"
+                                            class="step-form-item"
+                                          >
+                                            <roc-pdf-file-upload
+                                              key="ROCPDFFILEUPLOADPREPPARTYPUBLICOPINIONRECORDKEY"
+                                              v-model="formObj.formModel.prepPartyPublicOpinionRecord"
+                                              upload-file-title="征求意见的谈话记录"
+                                              :upload-url="baseApiUrl + '/file/upload'"
+                                              :upload-headers="{ Authorization: 'Bearer ' + getToken() }"
+                                            ></roc-pdf-file-upload>
+                                          </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-tail"
+                              :style="{height: ((innerWidth > 1200) ? '52px' : '98px'), marginTop: ((innerWidth > 1200) ? '-52px' : '-98px')}"
+                            ></div>
+                          </el-col>
+
+                          <!-- 25 转为正式党员的支部大会会议记录、票决结果及公示情况 -->
+                          <el-col :span="24">
+                            <div class="roc-tabpane-step-item">
+                              <div class="step-item-left">25</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="partyMeetingTime"
+                                            label-width="140px"
+                                            class="step-form-item"
+                                          >
+                                            <el-date-picker
+                                              v-model="formObj.formModel.partyMeetingTime"
+                                              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="partyMeetingRecord"
+                                            label-width="190px"
+                                            class="step-form-item"
+                                          >
+                                            <roc-pdf-file-upload
+                                              key="ROCPDFFILEUPLOADPARTYMEETINGRECORDKEY"
+                                              v-model="formObj.formModel.partyMeetingRecord"
+                                              upload-file-title="支部大会的会议记录"
+                                              :upload-url="baseApiUrl + '/file/upload'"
+                                              :upload-headers="{ Authorization: 'Bearer ' + getToken() }"
+                                            ></roc-pdf-file-upload>
+                                          </el-form-item>
+                                        </el-col>
+
+                                        <!-- 公示时间 -->
+                                        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
+                                          <el-form-item
+                                            label="公示时间:"
+                                            prop="partyPublicityTime"
+                                            label-width="116px"
+                                            class="step-form-item"
+                                          >
+                                            <el-date-picker
+                                              v-model="formObj.formModel.partyPublicityTime"
+                                              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="partyPublicityRecord"
+                                            label-width="190px"
+                                            class="step-form-item"
+                                          >
+                                            <roc-pdf-file-upload
+                                              key="ROCPDFFILEUPLOADPARTYPUBLICITYRECORDKEY"
+                                              v-model="formObj.formModel.partyPublicityRecord"
+                                              upload-file-title="公示材料"
+                                              :upload-url="baseApiUrl + '/file/upload'"
+                                              :upload-headers="{ Authorization: 'Bearer ' + getToken() }"
+                                            ></roc-pdf-file-upload>
+                                          </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-tail"
+                              :style="{height: ((innerWidth > 1200) ? '110px' : '202px'), marginTop: ((innerWidth > 1200) ? '-110px' : '-202px')}"
+                            ></div>
+                          </el-col>
+
+                          <!-- 26 转为中共正式党员审批请示 -->
+                          <el-col :span="24">
+                            <div class="roc-tabpane-step-item">
+                              <div class="step-item-left">26</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="partyApproveTime"
+                                            label-width="140px"
+                                            class="step-form-item"
+                                          >
+                                            <el-date-picker
+                                              v-model="formObj.formModel.partyApproveTime"
+                                              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="partyApproveRecord"
+                                            label-width="190px"
+                                            class="step-form-item"
+                                          >
+                                            <roc-pdf-file-upload
+                                              key="ROCPDFFILEUPLOADPARTYAPPROVERECORDKEY"
+                                              v-model="formObj.formModel.partyApproveRecord"
+                                              upload-file-title="审批请示材料"
+                                              :upload-url="baseApiUrl + '/file/upload'"
+                                              :upload-headers="{ Authorization: 'Bearer ' + getToken() }"
+                                            ></roc-pdf-file-upload>
+                                          </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-tail"
+                              :style="{height: ((innerWidth > 1200) ? '52px' : '98px'), marginTop: ((innerWidth > 1200) ? '-52px' : '-98px')}"
+                            ></div>
+                          </el-col>
+
+                          <!-- 27 基层党委审批会议记录、会议纪要和批复 -->
+                          <el-col :span="24">
+                            <div class="roc-tabpane-step-item">
+                              <div class="step-item-left">27</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="partyGrassrootsApprovalRadio"
+                                            label-width="90px"
+                                            class="step-form-item"
+                                          >
+                                            <el-radio-group
+                                              v-model="formObj.formModel.partyGrassrootsApprovalRadio"
+                                            >
+                                              <el-radio :label="1">通过</el-radio>
+                                              <el-radio :label="0">未通过</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="partyGrassrootsMeetTime"
+                                            label-width="160px"
+                                            class="step-form-item"
+                                          >
+                                            <el-date-picker
+                                              v-model="formObj.formModel.partyGrassrootsMeetTime"
+                                              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="partyGrassrootsMeetRecord"
+                                            label-width="230px"
+                                            class="step-form-item"
+                                          >
+                                            <roc-pdf-file-upload
+                                              key="ROCPDFFILEUPLOADPARTYGRASSROOTSMEETRECORDKEY"
+                                              v-model="formObj.formModel.partyGrassrootsMeetRecord"
+                                              upload-file-title="基层党委审批会议记录、会议纪要"
+                                              :upload-url="baseApiUrl + '/file/upload'"
+                                              :upload-headers="{ Authorization: 'Bearer ' + getToken() }"
+                                            ></roc-pdf-file-upload>
+                                          </el-form-item>
+                                        </el-col>
+
+                                        <!-- 批复时间 -->
+                                        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
+                                          <el-form-item
+                                            label="批复时间:"
+                                            prop="partyGrassrootsApproveTime"
+                                            label-width="140px"
+                                            class="step-form-item"
+                                          >
+                                            <el-date-picker
+                                              v-model="formObj.formModel.partyGrassrootsApproveTime"
+                                              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="partyGrassrootsApproveRecord"
+                                            label-width="190px"
+                                            class="step-form-item"
+                                          >
+                                            <roc-pdf-file-upload
+                                              key="ROCPDFFILEUPLOADPARTYGRASSROOTSAPPROVERECORDKEY"
+                                              v-model="formObj.formModel.partyGrassrootsApproveRecord"
+                                              upload-file-title="批复材料"
+                                              :upload-url="baseApiUrl + '/file/upload'"
+                                              :upload-headers="{ Authorization: 'Bearer ' + getToken() }"
+                                            ></roc-pdf-file-upload>
+                                          </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-tail"
+                              :style="{height: ((innerWidth > 1200) ? '156px' : '248px'), marginTop: ((innerWidth > 1200) ? '-176px' : '-268px')}"
+                            ></div>
+                          </el-col>
+                        </el-row>
+                      </div>
+                    </el-col>
+                  </el-row>
+                </div>
+              </el-tab-pane>
+
+              <!-- 未通过 -->
+              <el-tab-pane label="未通过" name="DIDNOTPASS">
+                <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">OK</div>
+                        </div>
+                        <div class="tabpane-head-right">成为正式党员</div>
+                      </div>
+                    </el-col>
+                    <el-col :span="24">
+                      <div class="roc-tabpane-didnotpass-btngroup">
+                        <el-button
+                          type="rocpartyprimaryplainbtn"
+                          @click="handleCheckProcessDataIntegrityClick"
+                        >检查过程与资料完整性</el-button>
+                        <el-button
+                          type="rocpartyprimarybtn"
+                          @click="handleBecomeFullPartyMemberClick"
+                        >转为正式党员</el-button>
+                      </div>
+                    </el-col>
+                  </el-row>
+                </div>
+              </el-tab-pane>
+            </el-tabs>
+          </el-col>
+          <el-col :span="24"></el-col>
+        </el-row>
+      </div>
+    </el-form>
+    <div class="pagefooter-btngroup">
+      <el-button
+        type="rocpartyprimaryplainbtn"
+        icon="el-icon-circle-close"
+        @click="handlePageCloseClick"
+      >取 消</el-button>
+      <el-button
+        type="rocpartyprimarybtn"
+        icon="el-icon-circle-check"
+        @click="handlePageSubmitClick"
+      >保 存</el-button>
+    </div>
+  </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",
+  components: {
+    'roc-pdf-file-upload': () => import('@/components/RocPdfFileUpload')
+  },
+  data() {
+    return {
+      // 性别选项列表
+      sexOptions: [],
+      formObj: {
+        formModel: {
+          checkList: [],
+          selected: []
+        },
+        formRules: {}
+      },
+      areaDataObj: {
+        pca: pca,
+        pcaa: pcaa
+      },
+      tabsModel: 'APPLY',
+      innerWidth: window.innerWidth
+    };
+  },
+  watch: {
+    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 || [];
+      });
+    },
+    /**
+     * 标签页点击事件
+     */
+    handleTabsClick() {
+
+    },
+    /**
+     * 检查过程与资料完整性点击事件
+     */
+    handleCheckProcessDataIntegrityClick() {
+      this.checkProcessDataIntegritySuccess();
+      // this.checkProcessDataIntegrityFail();
+    },
+    /**
+     * 检查过程与资料完整性成功
+     */
+    checkProcessDataIntegritySuccess() {
+      this.$confirm('所有过程与资料完整、齐全!', '过程与资料完整性检查结果', {
+        confirmButtonText: '好 的',
+        type: 'success',
+        center: true,
+        showClose: false,
+        showCancelButton: false,
+        customClass: 'didnotpass-confirm-success',
+        confirmButtonClass: 'didnotpass-btngroup-tipsbtn'
+      }).then(() => { }).catch(() => { });
+    },
+    /**
+     * 检查过程与资料完整性失败
+     */
+    checkProcessDataIntegrityFail() {
+      // 组装消息内容
+      let messageInfo = `<div class="didnotpass-dialog-title">以下节点存在缺失或校验不符的情况!</div>`;
+      messageInfo += `<div class="didnotpass-dialog-content"><div class="didnotpass-dialog-content-left">6</div><div class="didnotpass-dialog-content-right">《入党积极分子、发展对象培养教育考察登记表》</div></div>`;
+      messageInfo += `<div class="didnotpass-dialog-content"><div class="didnotpass-dialog-content-left">13</div><div class="didnotpass-dialog-content-right">支委会拟接收预备党员审查会议记录和上报的预审请示</div>`;
+
+      this.$confirm(
+        messageInfo,
+        '过程与资料完整性检查结果',
+        {
+          confirmButtonText: '好 的',
+          type: 'warning',
+          center: true,
+          showClose: false,
+          showCancelButton: false,
+          dangerouslyUseHTMLString: true,
+          customClass: 'didnotpass-confirm-warning',
+          confirmButtonClass: 'didnotpass-btngroup-tipsbtn'
+        }
+      ).then(() => { }).catch(() => { });
+    },
+    /**
+     * 转为正式党员点击事件
+     */
+    handleBecomeFullPartyMemberClick() {
 
     },
     /**

+ 23 - 262
src/components/UpdatePartyDevelop/scss/UpdatePartyDevelop.scss

@@ -249,285 +249,46 @@
                   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;
-          }
-        }
-
-        &-seventh_default {
-          position: absolute;
-          margin-top: -110px;
-          margin-left: 46px;
-          width: 2px;
-          height: 128px;
-          border: 2px solid #979797;
-
-          &.is-active {
-            border: 2px solid #de0010;
-          }
-        }
-
-        &-seventh_nodefault {
-          position: absolute;
-          margin-top: -202px;
-          margin-left: 46px;
-          width: 2px;
-          height: 222px;
-          border: 2px solid #979797;
-
-          &.is-active {
-            border: 2px solid #de0010;
-          }
-        }
-
-        &-eighth_default {
-          position: absolute;
-          margin-top: -64px;
-          margin-left: 46px;
-          width: 2px;
-          height: 64px;
-          border: 2px solid #979797;
-
-          &.is-active {
-            border: 2px solid #de0010;
-          }
-        }
-
-        &-eighth_nodefault {
-          position: absolute;
-          margin-top: -122px;
-          margin-left: 46px;
-          width: 2px;
-          height: 122px;
-          border: 2px solid #979797;
-
-          &.is-active {
-            border: 2px solid #de0010;
-          }
-        }
-
-        &-ninth_default {
-          position: absolute;
-          margin-top: -98px;
-          margin-left: 46px;
-          width: 2px;
-          height: 98px;
-          border: 2px solid #979797;
-
-          &.is-active {
-            border: 2px solid #de0010;
-          }
-        }
-
-        &-ninth_nodefault {
-          position: absolute;
-          margin-top: -144px;
-          margin-left: 46px;
-          width: 2px;
-          height: 144px;
-          border: 2px solid #979797;
-
-          &.is-active {
-            border: 2px solid #de0010;
-          }
-        }
-
-        &-tenth_default {
-          position: absolute;
-          margin-top: -212px;
-          margin-left: 46px;
-          width: 2px;
-          height: 212px;
-          border: 2px solid #979797;
-
-          &.is-active {
-            border: 2px solid #de0010;
-          }
-        }
-
-        &-tenth_nodefault {
-          position: absolute;
-          margin-top: -350px;
-          margin-left: 46px;
-          width: 2px;
-          height: 350px;
-          border: 2px solid #979797;
-
-          &.is-active {
-            border: 2px solid #de0010;
-          }
-        }
-
-        &-eleventh_default {
-          position: absolute;
-          margin-top: -110px;
-          margin-left: 46px;
-          width: 2px;
-          height: 110px;
-          border: 2px solid #979797;
-
-          &.is-active {
-            border: 2px solid #de0010;
-          }
-        }
-
-        &-eleventh_nodefault {
-          position: absolute;
-          margin-top: -202px;
-          margin-left: 46px;
-          width: 2px;
-          height: 202px;
-          border: 2px solid #979797;
-
-          &.is-active {
-            border: 2px solid #de0010;
+              .step-item-twenty_third {
+                margin-top: 10px;
+                height: 22px;
+                font-size: 16px;
+                font-weight: 400;
+                color: #ff0000;
+                line-height: 22px;
+              }
+            }
           }
         }
 
-        &-twelfth_default {
+        &-tail {
           position: absolute;
-          margin-top: -52px;
           margin-left: 46px;
           width: 2px;
-          height: 72px;
           border: 2px solid #979797;
 
           &.is-active {
             border: 2px solid #de0010;
           }
         }
+      }
 
-        &-twelfth_nodefault {
-          position: absolute;
-          margin-top: -98px;
-          margin-left: 46px;
-          width: 2px;
-          height: 118px;
-          border: 2px solid #979797;
+      &-didnotpass-btngroup {
+        margin: 50px 0 0 109px;
 
-          &.is-active {
-            border: 2px solid #de0010;
-          }
+        .el-button + .el-button {
+          margin-left: 30px;
         }
       }
     }
   }
 }
+
+::v-deep {
+  .didnotpass-btngroup-tipsbtn {
+    color: #de0010;
+    background-color: #ffffff;
+    border-color: #de0010;
+  }
+}