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

package.json

@@ -37,6 +37,7 @@
   },
   "dependencies": {
     "@riophae/vue-treeselect": "0.4.0",
+    "area-data": "5.0.6",
     "axios": "0.24.0",
     "clipboard": "2.0.6",
     "core-js": "3.19.3",
@@ -55,6 +56,7 @@
     "sortablejs": "1.10.2",
     "v-viewer": "1.6.4",
     "vue": "2.6.14",
+    "vue-area-linkage": "5.1.0",
     "vue-count-to": "1.0.13",
     "vue-cropper": "0.5.8",
     "vue-pdf": "4.3.0",

src/assets/styles/cust-global.scss

@@ -40,11 +40,15 @@
   height: 1.5em !important;
 }
 
-#app .sidebar-container.has-logo .sidebar-wrapper {
-  background: url("../images/layout-sidebar-wrapper-bg.png"), #304156;
-  background-size: 209px 290px, cover;
-  background-position: right 36px bottom 58px, center;
-  background-repeat: no-repeat, no-repeat;
+#app {
+  background: #f2f2f2;
+
+  .sidebar-container.has-logo .sidebar-wrapper {
+    background: url("../images/layout-sidebar-wrapper-bg.png"), #304156;
+    background-size: 209px 290px, cover;
+    background-position: right 36px bottom 58px, center;
+    background-repeat: no-repeat, no-repeat;
+  }
 }
 
 /* rocpartyprimarybtn button color ----Start */

src/components/UpdatePartyDevelop/index.vue

@@ -3,82 +3,262 @@
  * @Author: Rockery
  * @Date: 2021-12-15 17:54:05
  * @LastEditors: Rockery
- * @LastEditTime: 2021-12-15 18:09:59
+ * @LastEditTime: 2021-12-16 18:06:40
  * @FilePath: \party_construct_web\src\components\UpdatePartyDevelop\index.vue
  * @Copyright: Copyright (c) 2016~2021 Rockery(1113269755@qq.com)
 -->
 <template>
   <div class="updatepartydevelop">
-    <div class="updatepartydevelop-basic">
-      <el-row>
-        <el-col :span="24">
-          <div class="updatepartydevelop-title">
-            <div>
-              <img
-                :src="require('@/assets/logo/home-main-title-logo.png')"
-                @error="imgViewerOnerror"
-              />
+    <div class="updatepartydevelop-head">
+      <div class="updatepartydevelop-head-title">
+        <div>
+          <img :src="require('@/assets/logo/home-main-title-logo.png')" @error="imgViewerOnerror" />
+        </div>
+        <div>正式党员管理</div>
+      </div>
+    </div>
+    <el-form
+      ref="updatePartyDevelopFormRef"
+      :model="formObj.formModel"
+      :rules="formObj.formRules"
+      label-width="170px"
+      class="situationdesc-addpage-form"
+    >
+      <div class="updatepartydevelop-basic">
+        <el-row>
+          <el-col :span="24">
+            <div class="updatepartydevelop-title">
+              <div>
+                <img
+                  :src="require('@/assets/logo/home-main-title-logo.png')"
+                  @error="imgViewerOnerror"
+                />
+              </div>
+              <div>个人基本情况</div>
             </div>
-            <div>个人基本情况</div>
-          </div>
-        </el-col>
-        <el-col :span="24">
-          <div class="updatepartydevelop-line"></div>
-        </el-col>
-        <el-col :span="24">
-          <el-form
-            ref="updatePartyDevelopFormRef"
-            :model="formObj.formModel"
-            :rules="formObj.formRules"
-            label-width="190px"
-            class="situationdesc-addpage-form"
-          >
+          </el-col>
+          <el-col :span="24">
+            <div class="updatepartydevelop-line"></div>
+          </el-col>
+          <el-col :span="24">
             <el-row>
-              <el-col :span="24">
-                <div class="situationdesc-addpage-title">
-                  <div>
-                    <img
-                      :src="require('@/assets/logo/home-main-title-logo.png')"
-                      @error="imgViewerOnerror"
+              <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
+                <el-form-item label="姓名：" prop="name">
+                  <el-input v-model="formObj.formModel.name" placeholder="请输入姓名" clearable />
+                </el-form-item>
+              </el-col>
+              <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
+                <el-form-item label="性别：" prop="sex">
+                  <el-select
+                    v-model="formObj.formModel.sex"
+                    placeholder="请选择性别"
+                    clearable
+                    size="small"
+                    style="width: 100%;"
+                  >
+                    <el-option
+                      v-for="sexOption in sexOptions"
+                      :key="sexOption.dictValue"
+                      :label="sexOption.dictLabel"
+                      :value="sexOption.dictValue"
                     />
-                  </div>
-                  <div>新增情况说明</div>
-                </div>
+                  </el-select>
+                </el-form-item>
               </el-col>
-              <el-col :span="24">
-                <div class="situationdesc-addpage-line"></div>
+              <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
+                <el-form-item label="民族：" prop="nation">
+                  <el-input v-model="formObj.formModel.nation" placeholder="请输入民族" clearable />
+                </el-form-item>
               </el-col>
-              <el-col :span="24">
-                <el-form-item label="情况说明时间：" prop="beginTime">
+              <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
+                <el-form-item label="出生年月：" prop="dateOfBirth">
                   <el-date-picker
-                    v-model="formObj.formModel.name"
+                    v-model="formObj.formModel.dateOfBirth"
                     type="date"
                     clearable
                     value-format="yyyy-MM-dd"
                     style="width: 100%;"
-                    placeholder="请选择情况说明时间"
+                    placeholder="请选择出生年月"
                   ></el-date-picker>
                 </el-form-item>
               </el-col>
-              <el-col :span="24">
-                <el-form-item label="情况说明人:" prop="explainer">
+              <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
+                <el-form-item label="籍贯：" prop="sex">
+                  <area-cascader
+                    type="all"
+                    v-model="formObj.formModel.selected"
+                    :level="0"
+                    :data="areaDataObj.pca"
+                    separator="-"
+                    placeholder="请选择籍贯"
+                  ></area-cascader>
+                </el-form-item>
+              </el-col>
+              <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
+                <el-form-item label="学历：" prop="sex">
                   <el-select
-                    v-model="formObj.formModel.explainer"
-                    placeholder="请选择情况说明人"
+                    v-model="formObj.formModel.sex"
+                    placeholder="请选择学历"
                     clearable
+                    size="small"
                     style="width: 100%;"
                   >
                     <el-option
-                      v-for="situationExplainerOption in situationExplainerOptions"
-                      :key="situationExplainerOption.dictValue"
-                      :label="situationExplainerOption.dictLabel"
-                      :value="situationExplainerOption.dictValue"
+                      v-for="sexOption in sexOptions"
+                      :key="sexOption.dictValue"
+                      :label="sexOption.dictLabel"
+                      :value="sexOption.dictValue"
                     />
                   </el-select>
                 </el-form-item>
               </el-col>
-              <el-col :span="24">
-                <el-form-item label="情况说明：" prop="phone" class="formitem-attachment">
+              <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
+                <el-form-item label="入团时间：" prop="dateOfBirth">
+                  <el-date-picker
+                    v-model="formObj.formModel.dateOfBirth"
+                    type="date"
+                    clearable
+                    value-format="yyyy-MM-dd"
+                    style="width: 100%;"
+                    placeholder="请选择入团时间"
+                  ></el-date-picker>
+                </el-form-item>
+              </el-col>
+              <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
+                <el-form-item label="单位、职务或职务：" prop="nation">
+                  <el-input v-model="formObj.formModel.nation" placeholder="请输入单位、职务或职务" clearable />
+                </el-form-item>
+              </el-col>
+              <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
+                <el-form-item label="参加工作时间：" prop="dateOfBirth">
+                  <el-date-picker
+                    v-model="formObj.formModel.dateOfBirth"
+                    type="date"
+                    clearable
+                    value-format="yyyy-MM-dd"
+                    style="width: 100%;"
+                    placeholder="请选择参加工作时间"
+                  ></el-date-picker>
+                </el-form-item>
+              </el-col>
+              <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
+                <el-form-item label="居民身份证号码：" prop="nation">
+                  <el-input v-model="formObj.formModel.nation" placeholder="请输入居民身份证号码" clearable />
+                </el-form-item>
+              </el-col>
+              <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
+                <el-form-item label="现居地：" prop="selected2">
+                  <el-row>
+                    <el-col :span="12">
+                      <area-cascader
+                        type="all"
+                        v-model="formObj.formModel.selected2"
+                        :level="1"
+                        :data="areaDataObj.pcaa"
+                        separator="-"
+                        placeholder="请选择地区"
+                      ></area-cascader>
+                    </el-col>
+                    <el-col :span="12">
+                      <el-input
+                        v-model="formObj.formModel.nation"
+                        placeholder="请输入详细街道地址"
+                        clearable
+                      />
+                    </el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+              <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
+                <el-form-item label="本人简历（包括学历）：" prop="phone" class="formitem-attachment">
+                  <el-upload
+                    ref="descFileMaterialsUploadRef"
+                    :limit="1"
+                    accept=".pdf"
+                    :auto-upload="false"
+                    :show-file-list="true"
+                    :action="descFileMaterialsUpload.url"
+                    :headers="descFileMaterialsUpload.headers"
+                    :before-upload="handleBeforeUpload"
+                    :on-success="handleUploadOnsuccess"
+                    :on-change="handleUploadOnchange"
+                    :on-remove="handleUploadOnRemove"
+                    :on-exceed="handleUploadOnExceed"
+                    class="formitem-attachment-fileupload"
+                  >
+                    <div class="formitem-attachment-fileupload-content">
+                      <i class="el-icon-plus" />
+                      上传文件，格式：PDF
+                    </div>
+                  </el-upload>
+                  <div
+                    v-if="descFileMaterialsUpload.isUploadSuccess"
+                    class="fl formitem-attachment-addr"
+                    @click="handleDescFileMaterialsUploadUrlClick"
+                  >
+                    <div>文件上传成功地址：</div>
+                    <div>{{ formObj.formModel.bannerUrl }}</div>
+                  </div>
+                  <el-button
+                    v-if="descFileMaterialsUpload.isSelect && !descFileMaterialsUpload.isUploadSuccess"
+                    type="primary"
+                    size="small"
+                    @click="submitDescFileMaterialsUpload"
+                  >上传文件</el-button>
+                  <el-button
+                    v-if="descFileMaterialsUpload.isSelect"
+                    type="info"
+                    size="small"
+                    @click="removeDescFileMaterialsUpload"
+                  >移除文件</el-button>
+                </el-form-item>
+              </el-col>
+              <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
+                <el-form-item label="其他情况：" prop="phone" class="formitem-attachment">
+                  <el-upload
+                    ref="descFileMaterialsUploadRef"
+                    :limit="1"
+                    accept=".pdf"
+                    :auto-upload="false"
+                    :show-file-list="true"
+                    :action="descFileMaterialsUpload.url"
+                    :headers="descFileMaterialsUpload.headers"
+                    :before-upload="handleBeforeUpload"
+                    :on-success="handleUploadOnsuccess"
+                    :on-change="handleUploadOnchange"
+                    :on-remove="handleUploadOnRemove"
+                    :on-exceed="handleUploadOnExceed"
+                    class="formitem-attachment-fileupload"
+                  >
+                    <div class="formitem-attachment-fileupload-content">
+                      <i class="el-icon-plus" />
+                      上传文件，格式：PDF
+                    </div>
+                  </el-upload>
+                  <div
+                    v-if="descFileMaterialsUpload.isUploadSuccess"
+                    class="fl formitem-attachment-addr"
+                    @click="handleDescFileMaterialsUploadUrlClick"
+                  >
+                    <div>文件上传成功地址：</div>
+                    <div>{{ formObj.formModel.bannerUrl }}</div>
+                  </div>
+                  <el-button
+                    v-if="descFileMaterialsUpload.isSelect && !descFileMaterialsUpload.isUploadSuccess"
+                    type="primary"
+                    size="small"
+                    @click="submitDescFileMaterialsUpload"
+                  >上传文件</el-button>
+                  <el-button
+                    v-if="descFileMaterialsUpload.isSelect"
+                    type="info"
+                    size="small"
+                    @click="removeDescFileMaterialsUpload"
+                  >移除文件</el-button>
+                </el-form-item>
+              </el-col>
+              <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
+                <el-form-item label="两寸正面免冠照片：" prop="phone" class="formitem-attachment">
                   <el-upload
                     ref="descFileMaterialsUploadRef"
                     :limit="1"
@@ -122,66 +302,564 @@
                 </el-form-item>
               </el-col>
               <el-col :span="24">
-                <el-form-item
-                  label="说明了以下流程节点问题:"
-                  prop="sort"
-                  class="situationdesc-addpage-form-processnode"
-                >
-                  <el-checkbox-group v-model="formObj.formModel.checkList" style="width: 100%;">
-                    <el-checkbox label="《入党积极分子、发展对象培养教育考察登记表》" style="width: 100%;">
-                      <div class="processnode-circle">6</div>
-                      <div class="processnode-label">《入党积极分子、发展对象培养教育考察登记表》</div>
-                    </el-checkbox>
-                    <el-checkbox label="支委会拟接收预备党员审查会议记录和上报的预审请示" style="width: 100%;">
-                      <div class="processnode-circle">13</div>
-                      <div class="processnode-label">支委会拟接收预备党员审查会议记录和上报的预审请示</div>
-                    </el-checkbox>
-                  </el-checkbox-group>
+                <el-form-item label="备注：" prop="nation">
+                  <el-input
+                    type="textarea"
+                    clearable
+                    maxlength="300"
+                    show-word-limit
+                    :autosize="{ minRows: 6}"
+                    placeholder="请输入内容"
+                    v-model="formObj.formModel.nation"
+                  />
                 </el-form-item>
               </el-col>
             </el-row>
-          </el-form>
-        </el-col>
-      </el-row>
-    </div>
-    <div class="updatepartydevelop-situation">
-      <el-row>
-        <el-col :span="24">
-          <div class="updatepartydevelop-title">
-            <div>
-              <img
-                :src="require('@/assets/logo/home-main-title-logo.png')"
-                @error="imgViewerOnerror"
-              />
+          </el-col>
+        </el-row>
+      </div>
+      <div class="updatepartydevelop-situation">
+        <el-row>
+          <el-col :span="24">
+            <div class="updatepartydevelop-title">
+              <div>
+                <img
+                  :src="require('@/assets/logo/home-main-title-logo.png')"
+                  @error="imgViewerOnerror"
+                />
+              </div>
+              <div>党员发展情况</div>
             </div>
-            <div>党员发展情况</div>
-          </div>
-        </el-col>
-        <el-col :span="24">
-          <div class="updatepartydevelop-line"></div>
-        </el-col>
-        <el-col :span="24"></el-col>
-      </el-row>
-    </div>
+          </el-col>
+          <el-col :span="24">
+            <div class="updatepartydevelop-line"></div>
+          </el-col>
+          <el-col :span="24">
+            <el-tabs
+              type="border-card"
+              v-model="tabsModel"
+              class="updatepartydevelop-situation-tabs"
+              @tab-click="handleTabsClick"
+            >
+              <!-- 一、申请入党 -->
+              <el-tab-pane label="一、申请入党" name="APPLY">
+                <div class="roc-tabpane">
+                  <el-row>
+                    <el-col :span="24">
+                      <div class="roc-tabpane-head">
+                        <div class="tabpane-head-left">
+                          <div>一</div>
+                        </div>
+                        <div class="tabpane-head-right">申请入党</div>
+                      </div>
+                    </el-col>
+                    <el-col :span="24">
+                      <div class="roc-tabpane-line"></div>
+                    </el-col>
+                    <el-col :span="24">
+                      <div class="roc-tabpane-step">
+                        <el-row>
+                          <!-- 1 入党申请书 -->
+                          <el-col :span="24">
+                            <!-- 步骤1 -->
+                            <div class="roc-tabpane-step-item">
+                              <div class="step-item-left">1</div>
+                              <div class="step-item-right">
+                                <el-row>
+                                  <el-col :span="24">
+                                    <div class="step-item-right-title">入党申请书</div>
+                                    <div class="step-item-right-form">
+                                      <el-row :gutter="10">
+                                        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
+                                          <el-form-item
+                                            label="递交入党申请书时间："
+                                            prop="dateOfBirth"
+                                            label-width="141px"
+                                            class="step-form-item"
+                                          >
+                                            <el-date-picker
+                                              v-model="formObj.formModel.dateOfBirth"
+                                              type="date"
+                                              clearable
+                                              value-format="yyyy-MM-dd"
+                                              style="width: 100%;"
+                                              placeholder="请选择入团时间"
+                                            ></el-date-picker>
+                                          </el-form-item>
+                                        </el-col>
+                                        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
+                                          <el-form-item
+                                            label="入党申请书："
+                                            prop="dateOfBirth"
+                                            label-width="96px"
+                                          >
+                                            <el-upload
+                                              ref="descFileMaterialsUploadRef"
+                                              :limit="1"
+                                              accept=".pdf"
+                                              :auto-upload="false"
+                                              :show-file-list="true"
+                                              :action="descFileMaterialsUpload.url"
+                                              :headers="descFileMaterialsUpload.headers"
+                                              :before-upload="handleBeforeUpload"
+                                              :on-success="handleUploadOnsuccess"
+                                              :on-change="handleUploadOnchange"
+                                              :on-remove="handleUploadOnRemove"
+                                              :on-exceed="handleUploadOnExceed"
+                                              class="formitem-attachment-fileupload"
+                                            >
+                                              <div class="formitem-attachment-fileupload-content">
+                                                <i class="el-icon-plus" />
+                                                上传文件，格式：PDF
+                                              </div>
+                                            </el-upload>
+                                            <div
+                                              v-if="descFileMaterialsUpload.isUploadSuccess"
+                                              class="fl formitem-attachment-addr"
+                                              @click="handleDescFileMaterialsUploadUrlClick"
+                                            >
+                                              <div>文件上传成功地址：</div>
+                                              <div>{{ formObj.formModel.bannerUrl }}</div>
+                                            </div>
+                                            <el-button
+                                              v-if="descFileMaterialsUpload.isSelect && !descFileMaterialsUpload.isUploadSuccess"
+                                              type="primary"
+                                              size="small"
+                                              @click="submitDescFileMaterialsUpload"
+                                            >上传文件</el-button>
+                                            <el-button
+                                              v-if="descFileMaterialsUpload.isSelect"
+                                              type="info"
+                                              size="small"
+                                              @click="removeDescFileMaterialsUpload"
+                                            >移除文件</el-button>
+                                          </el-form-item>
+                                        </el-col>
+                                      </el-row>
+                                    </div>
+                                  </el-col>
+                                </el-row>
+                              </div>
+                            </div>
+                          </el-col>
+                          <el-col :span="24">
+                            <div
+                              :class="innerWidth > 1200 ? 'roc-tabpane-step-first_default': 'roc-tabpane-step-first_nodefault'"
+                            ></div>
+                          </el-col>
+                          <!-- 2 党组织派人与入党申请人谈话的记录 -->
+                          <el-col :span="24">
+                            <!-- 步骤1 -->
+                            <div class="roc-tabpane-step-item">
+                              <div class="step-item-left">2</div>
+                              <div class="step-item-right">
+                                <el-row>
+                                  <el-col :span="24">
+                                    <div class="step-item-right-title">党组织派人与入党申请人谈话的记录</div>
+                                    <div class="step-item-right-form">
+                                      <el-row :gutter="10">
+                                        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
+                                          <el-form-item
+                                            label="组织派人谈话时间："
+                                            prop="dateOfBirth"
+                                            label-width="126px"
+                                            class="step-form-item"
+                                          >
+                                            <el-date-picker
+                                              v-model="formObj.formModel.dateOfBirth"
+                                              type="date"
+                                              clearable
+                                              value-format="yyyy-MM-dd"
+                                              style="width: 100%;"
+                                              placeholder="请选择组织派人谈话时间"
+                                            ></el-date-picker>
+                                          </el-form-item>
+                                        </el-col>
+                                        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
+                                          <el-form-item
+                                            label="谈话记录："
+                                            prop="dateOfBirth"
+                                            label-width="96px"
+                                          >
+                                            <el-upload
+                                              ref="descFileMaterialsUploadRef"
+                                              :limit="1"
+                                              accept=".pdf"
+                                              :auto-upload="false"
+                                              :show-file-list="true"
+                                              :action="descFileMaterialsUpload.url"
+                                              :headers="descFileMaterialsUpload.headers"
+                                              :before-upload="handleBeforeUpload"
+                                              :on-success="handleUploadOnsuccess"
+                                              :on-change="handleUploadOnchange"
+                                              :on-remove="handleUploadOnRemove"
+                                              :on-exceed="handleUploadOnExceed"
+                                              class="formitem-attachment-fileupload"
+                                            >
+                                              <div class="formitem-attachment-fileupload-content">
+                                                <i class="el-icon-plus" />
+                                                上传文件，格式：PDF
+                                              </div>
+                                            </el-upload>
+                                            <div
+                                              v-if="descFileMaterialsUpload.isUploadSuccess"
+                                              class="fl formitem-attachment-addr"
+                                              @click="handleDescFileMaterialsUploadUrlClick"
+                                            >
+                                              <div>文件上传成功地址：</div>
+                                              <div>{{ formObj.formModel.bannerUrl }}</div>
+                                            </div>
+                                            <el-button
+                                              v-if="descFileMaterialsUpload.isSelect && !descFileMaterialsUpload.isUploadSuccess"
+                                              type="primary"
+                                              size="small"
+                                              @click="submitDescFileMaterialsUpload"
+                                            >上传文件</el-button>
+                                            <el-button
+                                              v-if="descFileMaterialsUpload.isSelect"
+                                              type="info"
+                                              size="small"
+                                              @click="removeDescFileMaterialsUpload"
+                                            >移除文件</el-button>
+                                          </el-form-item>
+                                        </el-col>
+                                      </el-row>
+                                    </div>
+                                  </el-col>
+                                </el-row>
+                              </div>
+                            </div>
+                          </el-col>
+                          <el-col :span="24">
+                            <div
+                              :class="innerWidth > 1200 ? 'roc-tabpane-step-second_default': 'roc-tabpane-step-second_nodefault'"
+                            ></div>
+                          </el-col>
+                          <!-- 3 身份证或户口本复印件 -->
+                          <el-col :span="24">
+                            <!-- 步骤1 -->
+                            <div class="roc-tabpane-step-item">
+                              <div class="step-item-left">3</div>
+                              <div class="step-item-right">
+                                <el-row>
+                                  <el-col :span="24">
+                                    <div class="step-item-right-title">身份证或户口本复印件</div>
+                                    <div class="step-item-right-form">
+                                      <el-row :gutter="10">
+                                        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
+                                          <el-form-item
+                                            label="身份证或户口本："
+                                            prop="dateOfBirth"
+                                            label-width="116px"
+                                          >
+                                            <el-upload
+                                              ref="descFileMaterialsUploadRef"
+                                              :limit="1"
+                                              accept=".pdf"
+                                              :auto-upload="false"
+                                              :show-file-list="true"
+                                              :action="descFileMaterialsUpload.url"
+                                              :headers="descFileMaterialsUpload.headers"
+                                              :before-upload="handleBeforeUpload"
+                                              :on-success="handleUploadOnsuccess"
+                                              :on-change="handleUploadOnchange"
+                                              :on-remove="handleUploadOnRemove"
+                                              :on-exceed="handleUploadOnExceed"
+                                              class="formitem-attachment-fileupload"
+                                            >
+                                              <div class="formitem-attachment-fileupload-content">
+                                                <i class="el-icon-plus" />
+                                                上传文件，格式：PDF
+                                              </div>
+                                            </el-upload>
+                                            <div
+                                              v-if="descFileMaterialsUpload.isUploadSuccess"
+                                              class="fl formitem-attachment-addr"
+                                              @click="handleDescFileMaterialsUploadUrlClick"
+                                            >
+                                              <div>文件上传成功地址：</div>
+                                              <div>{{ formObj.formModel.bannerUrl }}</div>
+                                            </div>
+                                            <el-button
+                                              v-if="descFileMaterialsUpload.isSelect && !descFileMaterialsUpload.isUploadSuccess"
+                                              type="primary"
+                                              size="small"
+                                              @click="submitDescFileMaterialsUpload"
+                                            >上传文件</el-button>
+                                            <el-button
+                                              v-if="descFileMaterialsUpload.isSelect"
+                                              type="info"
+                                              size="small"
+                                              @click="removeDescFileMaterialsUpload"
+                                            >移除文件</el-button>
+                                          </el-form-item>
+                                        </el-col>
+                                      </el-row>
+                                    </div>
+                                  </el-col>
+                                </el-row>
+                              </div>
+                            </div>
+                          </el-col>
+                          <el-col :span="24">
+                            <div
+                              class="roc-tabpane-step-second_default"
+                            ></div>
+                          </el-col>
+                        </el-row>
+                      </div>
+                    </el-col>
+                  </el-row>
+                </div>
+              </el-tab-pane>
+              <el-tab-pane label="二、入党积极分子的确定和考察" name="POSITIVE"></el-tab-pane>
+              <el-tab-pane label="三、发展对象的确定和考察" name="DEVELOP"></el-tab-pane>
+              <el-tab-pane label="四、发展党员的预审" name="PRETRIAL"></el-tab-pane>
+              <el-tab-pane label="五、预备党员的接收" name="TAKEOVER"></el-tab-pane>
+              <el-tab-pane label="六、预备党员的考察和转正" name="TURNPOSITIVE"></el-tab-pane>
+              <el-tab-pane label="未通过" name="DIDNOTPASS"></el-tab-pane>
+            </el-tabs>
+          </el-col>
+          <el-col :span="24"></el-col>
+        </el-row>
+      </div>
+    </el-form>
   </div>
 </template>
 
 <script>
+import Vue from 'vue';
+import { pca, pcaa } from 'area-data';
+import 'vue-area-linkage/dist/index.css';
+import VueAreaLinkage from 'vue-area-linkage';
+Vue.use(VueAreaLinkage);
+
 export default {
-  name: "Orgrelationship",
+  name: "Updatepartydevelop",
   data() {
     return {
+      // 性别选项列表
+      sexOptions: [],
+      situationExplainerOptions: [],
       formObj: {
-        formModel: {},
+        formModel: {
+          checkList: [],
+          selected: []
+        },
         formRules: {}
-      }
+      },
+      descFileMaterialsUpload: {
+        isSelect: false,
+        isUploadSuccess: false,
+        isOnProgress: false,
+        url: `${this.baseApiUrl}/file/upload`,
+        headers: { Authorization: 'Bearer ' + this.getToken() }
+      },
+      areaDataObj: {
+        pca: pca,
+        pcaa: pcaa
+      },
+      tabsModel: 'APPLY',
+      innerWidth: window.innerWidth
     };
+  },
+  watch: {
+    rightLoading: 'handleRightLoad',
+    leftLoading: 'handleLeftLoad',
+    timelineList: {
+      handler(val, oldval) {
+        this.setMaxScrollLeft();
+        if (!oldval && val) {
+          if (this.positionId != null) {
+            return this.positionById(this.positionId);
+          }
+          if (this.positionIndex != null) {
+            this.positionByIndex(this.positionIndex);
+          }
+        }
+      }, deep: true
+    },
+    innerWidth: {
+      immediate: true,
+      handler(newValue) {
+      }
+    }
+  },
+  created() {
+    this.initData();
+  },
+  mounted() {
+    window.addEventListener(
+      "resize",
+      () => {
+        return (() => {
+          this.innerWidth = window.innerWidth;
+        })();
+      }
+    );
+  },
+  methods: {
+    /**
+    * 初始化数据
+    */
+    async initData() {
+      await this.getMainOptions();
+    },
+    /**
+     * 获取主要选项列表
+     */
+    async getMainOptions() {
+      // 性别选项列表
+      await this.getDicts('sys_user_sex').then(response => {
+        this.sexOptions = response?.data || [];
+      });
+    },
+    /**
+     * 相关材料PDF文件上传预处理
+     */
+    handleBeforeUpload(file) {
+      if (file.type.indexOf('application/pdf') === -1) {
+        this.$refs.descFileMaterialsUploadRef.clearFiles();
+        this.msgError('文件格式错误，请上传类型格式为PDF的文件！');
+        return;
+      }
+    },
+    /**
+     * 相关材料PDF文件上传成功处理
+     */
+    handleUploadOnsuccess(response, file, fileList) {
+      // 校验封面图片是否上传成功
+      if (response.code !== 200) {
+        this.$refs.descFileMaterialsUploadRef?.clearFiles?.();
+        this.descFileMaterialsUpload.isSelect = false;
+        this.descFileMaterialsUpload.isUploadSuccess = false;
+        this.msgError('上传PDF文件失败，请重新选择PDF文件上传！');
+        return;
+      }
+
+      // 绑定封面图片数据
+      this.addPageFormObj.formModel.bannerUrl = response?.data?.url;
+      this.descFileMaterialsUpload.isUploadSuccess = true;
+
+      // 判断是否继续操作
+      if (this.descFileMaterialsUpload.isOnProgress) {
+        this.descFileMaterialsUpload.isOnProgress = false;
+        this.$confirm(`封面图片上传成功，是否继续${(this.operationTypeByForm === 'SAVE') ? '保存' : ((this.operationTypeByForm === 'RELEASE') ? '发布' : '预览')}数据操作？`, '提示', {
+          confirmButtonText: '确定 ',
+          cancelButtonText: '取消 ',
+          type: 'info'
+        }).then(() => {
+          this.handleBannerSubmitAddEditClick(this.operationTypeByForm);
+        }).catch(() => {
+          this.msgInfo('取消了继续保存数据操作！');
+        });
+      } else {
+        this.$alert('上传成功！', '上传结果', { dangerouslyUseHTMLString: true });
+      }
+    },
+    /**
+     * 相关材料PDF文件状态改变
+     */
+    handleUploadOnchange(file, fileList) {
+      if (file.status === 'ready') {
+        if (((file.raw || {}).type || '').indexOf('application/pdf') === -1) {
+          this.$refs.descFileMaterialsUploadRef.clearFiles();
+          this.descFileMaterialsUpload.isSelect = false;
+          this.msgError('文件格式错误，请上传类型格式为PDF的文件！');
+          return;
+        }
+        this.descFileMaterialsUpload.isSelect = true;
+        this.descFileMaterialsUpload.isUploadSuccess = false;
+      }
+    },
+    /**
+     * 提交上传相关材料PDF文件
+     */
+    submitDescFileMaterialsUpload() {
+      if (!this.descFileMaterialsUpload.isSelect) { return; }
+      this.$confirm('确定上传操作吗？', '提示', {
+        confirmButtonText: '确定 ',
+        cancelButtonText: '取消 ',
+        type: 'info'
+      }).then(() => {
+        this.$refs.descFileMaterialsUploadRef?.submit?.();
+      }).catch(() => {
+        this.msgInfo('您已取消上传操作！');
+      });
+    },
+    /**
+     * 移除选择相关材料PDF文件
+     */
+    removeDescFileMaterialsUpload() {
+      this.addPageFormObj.formModel.bannerUrl = '';
+      this.$refs.descFileMaterialsUploadRef.clearFiles();
+      this.descFileMaterialsUpload.isUploadSuccess = false;
+      this.descFileMaterialsUpload.isSelect = false;
+    },
+    /**
+     * 相关材料PDF文件列表移除文件时的钩子
+     */
+    handleUploadOnRemove(file, fileList) {
+      this.addPageFormObj.formModel.bannerUrl = '';
+      this.descFileMaterialsUpload.isUploadSuccess = false;
+      this.descFileMaterialsUpload.isSelect = false;
+    },
+    /**
+     * 相关材料PDF文件超出个数限制时的钩子
+     */
+    handleUploadOnExceed(files, fileList) {
+      this.msgWarning(`只允许上传单个相关材料PDF文件`);
+    },
+    /**
+     * 标签页点击事件
+     */
+    handleTabsClick() {
+
+    }
   }
 }
 </script>
 
 <style lang="scss" scoped>
 .updatepartydevelop {
+  &-head {
+    margin-bottom: 20px;
+    width: 100%;
+    padding: 15px 20px;
+    background: url("../../assets/images/home-head-img.png"), #ffffff;
+    background-size: 67px 67px, cover;
+    background-position: right 5px bottom 0px, center;
+    background-repeat: no-repeat, no-repeat;
+    border-radius: 10px;
+
+    &-title {
+      display: flex;
+      align-items: center;
+
+      div {
+        &:first-child {
+          height: 37px;
+          line-height: 37px;
+        }
+
+        &:last-child {
+          margin-left: 15px;
+          height: 37px;
+          font-size: 26px;
+          font-weight: 400;
+          color: #4f4f4f;
+          line-height: 37px;
+          letter-spacing: 1px;
+        }
+
+        img {
+          width: 34px;
+          height: 34px;
+        }
+      }
+    }
+  }
+
   &-title {
     display: flex;
     align-items: center;
@@ -215,5 +893,193 @@ export default {
     background: #d8dce5;
     margin-bottom: 15px;
   }
+
+  &-basic {
+    padding: 20px 20px 50px;
+    margin-bottom: 20px;
+    // margin: 87px 0 20px 0;
+    background: url("../../assets/images/home-head-img.png"), #ffffff;
+    background-size: 67px 67px, cover;
+    background-position: right 5px bottom 5px, center;
+    background-repeat: no-repeat, no-repeat;
+    border-radius: 10px;
+
+    ::v-deep {
+      .el-form-item__content {
+        .area-cascader-wrap {
+          .area-select {
+            height: 36px;
+            .area-selected-trigger {
+              padding: 0 25px 0 15px;
+            }
+          }
+
+          .area-select.large {
+            width: 100%;
+          }
+        }
+      }
+    }
+  }
+
+  &-situation {
+    padding: 20px 20px 72px;
+    margin-bottom: 20px;
+    background: url("../../assets/images/home-head-img.png"), #ffffff;
+    background-size: 67px 67px, cover;
+    background-position: right 5px bottom 5px, center;
+    background-repeat: no-repeat, no-repeat;
+    border-radius: 10px;
+
+    &-tabs.el-tabs {
+      margin-top: 20px;
+
+      ::v-deep {
+        .el-tabs__item {
+          font-size: 18px;
+          font-weight: 500;
+          color: #4f4f4f;
+          opacity: 0.9;
+        }
+
+        .el-tabs__active-bar {
+          background-color: #de0010;
+        }
+
+        .el-tabs__item.is-active {
+          color: #de0010;
+          background: #f9e9ea;
+        }
+      }
+    }
+
+    .roc-tabpane {
+      display: block;
+      width: 100%;
+
+      &-head {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        height: 94px;
+
+        .tabpane-head-left {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 94px;
+          height: 94px;
+          border: 4px solid #de0010;
+          border-radius: 50%;
+
+          div {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 78px;
+            height: 78px;
+            background: #de0010;
+            border-radius: 50%;
+            font-size: 30px;
+            font-weight: 800;
+            color: #ffffff;
+            line-height: 42px;
+            letter-spacing: 1px;
+          }
+        }
+        .tabpane-head-right {
+          margin-left: 15px;
+          height: 50px;
+          font-size: 36px;
+          font-weight: 400;
+          color: #111111;
+          line-height: 50px;
+          letter-spacing: 1px;
+        }
+      }
+
+      &-line {
+        margin-left: 46px;
+        width: 2px;
+        height: 46px;
+        border: 2px solid #de0010;
+      }
+
+      &-step {
+        width: 100%;
+
+        &-item {
+          display: flex;
+          width: 100%;
+
+          .step-item-left {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-left: 16px;
+            width: 62px;
+            height: 62px;
+            border: 2px solid #de0010;
+            border-radius: 50%;
+            font-size: 36px;
+            font-weight: 400;
+            color: #de0010;
+            line-height: 50px;
+            letter-spacing: 1px;
+          }
+
+          .step-item-right {
+            flex: 1;
+            margin-left: 10px;
+            padding-bottom: 10px;
+
+            &-title {
+              margin-top: 10px;
+              margin-bottom: 8px;
+              height: 28px;
+              font-size: 20px;
+              font-weight: 400;
+              color: #111111;
+              line-height: 28px;
+            }
+
+            &-form {
+              ::v-deep {
+                .step-form-item {
+                  .el-form-item__label {
+                  }
+                }
+
+                .el-form-item__label {
+                  padding: 0;
+                  text-align: left;
+                }
+              }
+            }
+          }
+        }
+
+        &-first_default,
+        &-second_default {
+          position: absolute;
+          margin-top: -64px;
+          margin-left: 46px;
+          width: 2px;
+          height: 64px;
+          border: 2px solid #de0010;
+        }
+
+        &-first_nodefault,
+        &-second_nodefault {
+          position: absolute;
+          margin-top: -122px;
+          margin-left: 46px;
+          width: 2px;
+          height: 122px;
+          border: 2px solid #de0010;
+        }
+      }
+    }
+  }
 }
 </style>

src/settings.js

@@ -24,7 +24,7 @@ module.exports = {
   /**
    * 是否固定头部
    */
-  fixedHeader: false,
+  fixedHeader: true,
 
   /**
    * 是否显示logo

src/views/PartyBuildingMgr/FullPartyMember/FullPartyMemberIndex.vue

@@ -3,223 +3,243 @@
  * @Author: Rockery
  * @Date: 2021-12-10 10:39:07
  * @LastEditors: Rockery
- * @LastEditTime: 2021-12-15 16:12:02
+ * @LastEditTime: 2021-12-16 10:51:58
  * @FilePath: \party_construct_web\src\views\PartyBuildingMgr\FullPartyMember\FullPartyMemberIndex.vue
  * @Copyright: Copyright (c) 2016~2021 Rockery(1113269755@qq.com)
 -->
 
 <template>
   <div class="app-container fullpartymember">
-    <div class="fullpartymember-head">
-      <div class="fullpartymember-head-title">
-        <div>
-          <img :src="require('@/assets/logo/home-main-title-logo.png')" @error="imgViewerOnerror" />
-        </div>
-        <div>正式党员管理</div>
-      </div>
-      <div class="fullpartymember-head-btn">
-        <div>列表样式</div>
-        <svg-icon
-          icon-class="partydatacard"
-          class="fullpartymember-head-btn-card"
-          :class="{ 'is-active': listActiveType === 'CARDLIST' }"
-          @click="handleCardListClick"
-        />
-        <svg-icon
-          icon-class="partydatalist"
-          class="fullpartymember-head-btn-list"
-          :class="{ 'is-active': listActiveType === 'TABLELIST' }"
-          @click="handleTableListClick"
-        />
-      </div>
-    </div>
-
-    <div class="app-container-queryform" v-show="showSearch">
-      <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
-        <el-form-item prop="beginTime">
-          <el-date-picker
-            v-model="queryParams.beginTime"
-            type="date"
-            size="small"
-            clearable
-            value-format="yyyy-MM-dd"
-            style="width: 100%;"
-            placeholder="请选择入党开始时间"
-          ></el-date-picker>
-        </el-form-item>
-        <el-form-item prop="endTime">
-          <el-date-picker
-            v-model="queryParams.endTime"
-            type="date"
-            size="small"
-            clearable
-            value-format="yyyy-MM-dd"
-            style="width: 100%;"
-            placeholder="请选择入党结束时间"
-          ></el-date-picker>
-        </el-form-item>
-        <el-form-item prop="name">
-          <el-input
-            v-model="queryParams.name"
-            placeholder="请输入姓名"
-            clearable
-            size="small"
-            style="width: 100%;"
-            @keyup.enter.native="handleQuery"
-          />
-        </el-form-item>
-        <el-form-item prop="sex">
-          <el-select
-            v-model="queryParams.sex"
-            placeholder="请选择性别"
-            clearable
-            size="small"
-            style="width: 100%;"
-          >
-            <el-option
-              v-for="sexOption in sexOptions"
-              :key="sexOption.dictValue"
-              :label="sexOption.dictLabel"
-              :value="sexOption.dictValue"
+    <template v-if="pageType == 'LIST'">
+      <div class="fullpartymember-listpage">
+        <div class="fullpartymember-head">
+          <div class="fullpartymember-head-title">
+            <div>
+              <img
+                :src="require('@/assets/logo/home-main-title-logo.png')"
+                @error="imgViewerOnerror"
+              />
+            </div>
+            <div>正式党员管理</div>
+          </div>
+          <div class="fullpartymember-head-btn">
+            <div>列表样式</div>
+            <svg-icon
+              icon-class="partydatacard"
+              class="fullpartymember-head-btn-card"
+              :class="{ 'is-active': listActiveType === 'CARDLIST' }"
+              @click="handleCardListClick"
             />
-          </el-select>
-        </el-form-item>
-        <el-form-item>
-          <el-button
-            v-hasPermi="['partybuildingmgr:situationdesc:query']"
-            type="primary"
-            icon="el-icon-search"
-            size="mini"
-            @click="handleQueryClick"
-          >搜索</el-button>
-          <el-button
-            v-hasPermi="['partybuildingmgr:situationdesc:reset']"
-            icon="el-icon-refresh"
-            size="mini"
-            @click="resetQueryClick"
-          >重置</el-button>
-        </el-form-item>
-      </el-form>
-    </div>
-
-    <div class="app-container-main fullpartymember-main" :class="showSearch ? 'mt15' : ''">
-      <el-row :gutter="10" class="mb8">
-        <el-col :span="1.5">
-          <el-button
-            v-hasPermi="['partybuildingmgr:situationdesc:add']"
-            type="rocpartyprimarybtn"
-            icon="el-icon-plus"
-            size="mini"
-            @click="handleAddClick"
-          >新增</el-button>
-        </el-col>
-        <el-col :span="1.5">
-          <el-button
-            v-hasPermi="['partybuildingmgr:situationdesc:transferin']"
-            type="rocpartyprimaryplainbtn"
-            icon="el-icon-circle-plus-outline"
-            size="mini"
-            @click="handleTransferInClick"
-          >转入</el-button>
-        </el-col>
-        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-      </el-row>
-      <el-row :gutter="10">
-        <template v-if="listActiveType === 'CARDLIST'">
-          <el-col :span="24">
-            <div class="fullpartymember-main-list">
-              <template v-if="list.length > 0">
-                <div class="list-row">
-                  <div v-for="item in 20" :key="item" class="list-cell">
-                    <div class="list-cell-img">
-                      <img
-                        :src="require('@/assets/images/home-main-list-card-img.png')"
-                        @error="imgViewerOnerror"
-                      />
-                      <div class="list-cell-shield">
-                        <div class="list-cell-shield-content">
-                          <div class="shield-content-label">入党时间</div>
-                          <div class="shield-content-datetime">1921年7月1日</div>
-                          <el-button
-                            type="rocwhiteplainbtn"
-                            style="width: 100%;"
-                            @click="handleViewMaterialClick"
-                          >查看资料</el-button>
-                          <div
-                            class="shield-content-relation"
-                            @click="handleOrgRelationChangeClick"
-                          >组织关系变更 ></div>
+            <svg-icon
+              icon-class="partydatalist"
+              class="fullpartymember-head-btn-list"
+              :class="{ 'is-active': listActiveType === 'TABLELIST' }"
+              @click="handleTableListClick"
+            />
+          </div>
+        </div>
+
+        <div class="app-container-queryform" v-show="showSearch">
+          <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
+            <el-form-item prop="beginTime">
+              <el-date-picker
+                v-model="queryParams.beginTime"
+                type="date"
+                size="small"
+                clearable
+                value-format="yyyy-MM-dd"
+                style="width: 100%;"
+                placeholder="请选择入党开始时间"
+              ></el-date-picker>
+            </el-form-item>
+            <el-form-item prop="endTime">
+              <el-date-picker
+                v-model="queryParams.endTime"
+                type="date"
+                size="small"
+                clearable
+                value-format="yyyy-MM-dd"
+                style="width: 100%;"
+                placeholder="请选择入党结束时间"
+              ></el-date-picker>
+            </el-form-item>
+            <el-form-item prop="name">
+              <el-input
+                v-model="queryParams.name"
+                placeholder="请输入姓名"
+                clearable
+                size="small"
+                style="width: 100%;"
+                @keyup.enter.native="handleQuery"
+              />
+            </el-form-item>
+            <el-form-item prop="sex">
+              <el-select
+                v-model="queryParams.sex"
+                placeholder="请选择性别"
+                clearable
+                size="small"
+                style="width: 100%;"
+              >
+                <el-option
+                  v-for="sexOption in sexOptions"
+                  :key="sexOption.dictValue"
+                  :label="sexOption.dictLabel"
+                  :value="sexOption.dictValue"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item>
+              <el-button
+                v-hasPermi="['partybuildingmgr:situationdesc:query']"
+                type="primary"
+                icon="el-icon-search"
+                size="mini"
+                @click="handleQueryClick"
+              >搜索</el-button>
+              <el-button
+                v-hasPermi="['partybuildingmgr:situationdesc:reset']"
+                icon="el-icon-refresh"
+                size="mini"
+                @click="resetQueryClick"
+              >重置</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+
+        <div class="app-container-main fullpartymember-main" :class="showSearch ? 'mt15' : ''">
+          <el-row :gutter="10" class="mb8">
+            <el-col :span="1.5">
+              <el-button
+                v-hasPermi="['partybuildingmgr:situationdesc:add']"
+                type="rocpartyprimarybtn"
+                icon="el-icon-plus"
+                size="mini"
+                @click="handleAddClick"
+              >新增</el-button>
+            </el-col>
+            <el-col :span="1.5">
+              <el-button
+                v-hasPermi="['partybuildingmgr:situationdesc:transferin']"
+                type="rocpartyprimaryplainbtn"
+                icon="el-icon-circle-plus-outline"
+                size="mini"
+                @click="handleTransferInClick"
+              >转入</el-button>
+            </el-col>
+            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+          </el-row>
+          <el-row :gutter="10">
+            <template v-if="listActiveType === 'CARDLIST'">
+              <el-col :span="24">
+                <div class="fullpartymember-main-list">
+                  <template v-if="list.length > 0">
+                    <div class="list-row">
+                      <div v-for="item in 20" :key="item" class="list-cell">
+                        <div class="list-cell-img">
+                          <img
+                            :src="require('@/assets/images/home-main-list-card-img.png')"
+                            @error="imgViewerOnerror"
+                          />
+                          <div class="list-cell-shield">
+                            <div class="list-cell-shield-content">
+                              <div class="shield-content-label">入党时间</div>
+                              <div class="shield-content-datetime">1921年7月1日</div>
+                              <el-button
+                                type="rocwhiteplainbtn"
+                                style="width: 100%;"
+                                @click="handleViewMaterialClick"
+                              >查看资料</el-button>
+                              <div
+                                class="shield-content-relation"
+                                @click="handleOrgRelationChangeClick"
+                              >组织关系变更 ></div>
+                            </div>
+                          </div>
                         </div>
+                        <div class="list-cell-name">罗正峰</div>
                       </div>
                     </div>
-                    <div class="list-cell-name">罗正峰</div>
-                  </div>
+                  </template>
+                  <template v-else>
+                    <div class="fullpartymember-main-list-nodata">暂无数据</div>
+                  </template>
                 </div>
-              </template>
-              <template v-else>
-                <div class="fullpartymember-main-list-nodata">暂无数据</div>
-              </template>
-            </div>
-          </el-col>
-        </template>
-        <template v-else>
-          <el-col :span="24" class="mt15">
-            <el-table
-              :data="list"
-              stripe
-              border
-              :header-cell-style="{'text-align':'center'}"
-              header-row-class-name="develop-table_header-row"
-              class="develop-main-table"
-              style="width: 100%;"
-            >
-              <el-table-column label="党员姓名" prop="name" :show-overflow-tooltip="true" />
-              <el-table-column label="性别" prop="name" align="center" :show-overflow-tooltip="true" />
-              <el-table-column label="党龄" prop="name" :show-overflow-tooltip="true" />
-              <el-table-column label="入党介绍人" prop="name" :show-overflow-tooltip="true" />
-              <el-table-column label="申请入党时间" prop="name" :show-overflow-tooltip="true" />
-              <el-table-column label="正式入党时间" prop="name" :show-overflow-tooltip="true" />
-              <el-table-column
-                label="操作"
-                align="center"
-                fixed="right"
-                width="200"
-                class-name="small-padding fixed-width"
-              >
-                <template slot-scope="scope">
-                  <el-button
-                    v-hasPermi="['partybuildingmgr:partymemberdevelop:view']"
-                    size="mini"
-                    type="text"
-                    icon="el-icon-view"
-                    style="color: #909399;"
-                    @click="handleViewClick(scope.row)"
-                  >详情</el-button>
-                  <el-button
-                    v-hasPermi="['partybuildingmgr:partymemberdevelop:reactivate']"
-                    size="mini"
-                    type="text"
-                    style="color: #de0010;"
-                    @click="handleReactivateClick(scope.row)"
+              </el-col>
+            </template>
+            <template v-else>
+              <el-col :span="24" class="mt15">
+                <el-table
+                  :data="list"
+                  stripe
+                  border
+                  :header-cell-style="{'text-align':'center'}"
+                  header-row-class-name="develop-table_header-row"
+                  class="develop-main-table"
+                  style="width: 100%;"
+                >
+                  <el-table-column label="党员姓名" prop="name" :show-overflow-tooltip="true" />
+                  <el-table-column
+                    label="性别"
+                    prop="name"
+                    align="center"
+                    :show-overflow-tooltip="true"
+                  />
+                  <el-table-column label="党龄" prop="name" :show-overflow-tooltip="true" />
+                  <el-table-column label="入党介绍人" prop="name" :show-overflow-tooltip="true" />
+                  <el-table-column label="申请入党时间" prop="name" :show-overflow-tooltip="true" />
+                  <el-table-column label="正式入党时间" prop="name" :show-overflow-tooltip="true" />
+                  <el-table-column
+                    label="操作"
+                    align="center"
+                    fixed="right"
+                    width="200"
+                    class-name="small-padding fixed-width"
                   >
-                    <svg-icon icon-class="relachange" />&nbsp;&nbsp;组织关系变更
-                  </el-button>
-                </template>
-              </el-table-column>
-            </el-table>
-          </el-col>
-        </template>
-        <el-col :span="24">
-          <pagination
-            v-show="total>0"
-            :total="total"
-            :page.sync="queryParams.pageNum"
-            :limit.sync="queryParams.pageSize"
-            @pagination="initData"
-          />
-        </el-col>
-      </el-row>
-    </div>
+                    <template slot-scope="scope">
+                      <el-button
+                        v-hasPermi="['partybuildingmgr:partymemberdevelop:view']"
+                        size="mini"
+                        type="text"
+                        icon="el-icon-view"
+                        style="color: #909399;"
+                        @click="handleViewClick(scope.row)"
+                      >详情</el-button>
+                      <el-button
+                        v-hasPermi="['partybuildingmgr:partymemberdevelop:reactivate']"
+                        size="mini"
+                        type="text"
+                        style="color: #de0010;"
+                        @click="handleReactivateClick(scope.row)"
+                      >
+                        <svg-icon icon-class="relachange" />&nbsp;&nbsp;组织关系变更
+                      </el-button>
+                    </template>
+                  </el-table-column>
+                </el-table>
+              </el-col>
+            </template>
+            <el-col :span="24">
+              <pagination
+                v-show="total>0"
+                :total="total"
+                :page.sync="queryParams.pageNum"
+                :limit.sync="queryParams.pageSize"
+                @pagination="initData"
+              />
+            </el-col>
+          </el-row>
+        </div>
+      </div>
+    </template>
+    <template v-else-if="pageType == 'ADD'">
+      <div class="fullpartymember-addpage">
+        <update-party-develop />
+      </div>
+    </template>
+    <template v-else>
+      <div>&nbsp;</div>
+    </template>
 
     <!-- 组织关系变更对话框 -->
     <el-dialog
@@ -351,10 +371,13 @@
 export default {
   name: "Fullpartymember",
   components: {
-    'roc-vue-pdf-dialog': () => import('@/components/RocVuePdfDialog')
+    'roc-vue-pdf-dialog': () => import('@/components/RocVuePdfDialog'),
+    'update-party-develop': () => import('@/components/UpdatePartyDevelop')
   },
   data() {
     return {
+      // 页面类型
+      pageType: 'ADD',
       // 遮罩层
       loading: true,
       // 显示搜索条件
@@ -363,7 +386,6 @@ export default {
       listActiveType: 'CARDLIST',
       // 性别选项列表
       sexOptions: [],
-
       // 查询条件
       queryParams: {
         pageNum: 0,