【ID1000408】后台管理系统-正式党员管理页面研发完成50%

src/api/PartyBuildingMgr/SituationDesc.js

@@ -0,0 +1,12 @@
+import request from '@/utils/request'
+
+/**
+ * 文件预览
+ */
+export function viewPdfFile(query) {
+  return request({
+    url: '/file/viewfile',
+    method: 'get',
+    params: query
+  })
+}

src/assets/styles/cust-global.scss

@@ -3,6 +3,8 @@
  * Copyright (c) 2016~2021 Rockery(1113269755@qq.com)
  */
 
+@import "~@/assets/styles/variables.scss";
+
 .mt15 {
   margin-top: 15px;
 }
@@ -38,7 +40,7 @@
   height: 1.5em !important;
 }
 
-#app .sidebar-container.has-logo .sidebar-wrapper{
+#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;
@@ -375,3 +377,118 @@
     color: #909399;
   }
 }
+
+.formitem-attachment {
+  &-fileupload {
+    .el-upload {
+      width: 100%;
+      border: 1px dashed #d9d9d9;
+      border-radius: 6px;
+      cursor: pointer;
+      position: relative;
+      overflow: hidden;
+
+      &:hover {
+        border-color: #409eff;
+      }
+    }
+
+    .el-upload-list.el-upload-list--text {
+      .el-upload-list__item:first-child {
+        margin-top: 0;
+      }
+    }
+
+    &-content {
+      width: 100%;
+      height: 32px;
+      font-size: 14px;
+      font-weight: 400;
+      color: #8c939d;
+      text-align: center;
+    }
+  }
+
+  &-addr {
+    width: 100%;
+    padding: 5px 0;
+
+    div {
+      &:first-child,
+      &:last-child {
+        margin-left: 4px;
+        width: 100%;
+        height: 20px;
+        vertical-align: middle;
+        font-size: 14px;
+        font-weight: 400;
+        color: #606266;
+        line-height: 20px;
+      }
+
+      &:last-child {
+        height: 25px;
+        line-height: 25px;
+        cursor: pointer;
+        opacity: 0.8;
+
+        &:hover {
+          color: #409eff;
+          text-decoration: underline;
+        }
+      }
+    }
+  }
+}
+
+.app-container.desc-page {
+  width: 100%;
+  min-height: calc(100vh - 84px);
+  background: url("../images/home-head-img.png"), #ffffff;
+  background-size: 67px 67px, cover;
+  background-position: right 5px bottom 80px, center;
+  background-repeat: no-repeat, no-repeat;
+}
+
+.openSidebar {
+  .pagefooter-btngroup {
+    position: fixed;
+    bottom: 40px;
+    width: calc(100% - #{$sideBarWidth} - 50px);
+    text-align: right;
+  }
+}
+
+.hideSidebar {
+  .pagefooter-btngroup {
+    position: fixed;
+    bottom: 40px;
+    width: calc(100% - 100px);
+    text-align: right;
+  }
+}
+
+.hideSidebar.mobile {
+  .pagefooter-btngroup {
+    position: fixed;
+    bottom: 40px;
+    width: calc(100% - 30px);
+    text-align: right;
+  }
+}
+
+.roc-form-item-label {
+  font-weight: 500;
+  font-style: normal;
+  font-size: 18px;
+  color: rgba(0, 0, 0, 0.847058823529412);
+  opacity: 0.9;
+}
+
+.roc-form-item-input {
+  font-weight: 400;
+  font-style: normal;
+  font-size: 18px;
+  color: rgba(0, 0, 0, 0.847058823529412);
+  opacity: 0.8;
+}

src/components/BottomRightNotification/index.vue

@@ -3,7 +3,7 @@
  * @Author: Rockery
  * @Date: 2021-12-14 11:50:13
  * @LastEditors: Rockery
- * @LastEditTime: 2021-12-14 16:47:39
+ * @LastEditTime: 2021-12-14 17:54:55
  * @FilePath: \party_construct_web\src\components\BottomRightNotification\index.vue
  * @Copyright: Copyright (c) 2016~2021 Rockery(1113269755@qq.com)
 -->
@@ -24,7 +24,7 @@ export default {
     };
   },
   created() {
-    this.initData();
+    // this.initData();
   },
   mounted() {
     this.intervalTimer = setInterval(() => {
@@ -34,7 +34,7 @@ export default {
           content: '您当前有 3 条数据将超出处理时间，请尽快安排处理'
         }
       );
-    }, 20000);
+    }, 120000);
   },
   destroyed() {
     this.intervalTimer && clearInterval(this.intervalTimer);
@@ -124,7 +124,7 @@ export default {
             )
           ]
         ),
-        duration: 10000
+        duration: 20000
       });
 
       this.rocBrNotifyObj = notify;

src/components/VuePdfDialog/index.vue → src/components/RocVuePdfDialog/index.vue

@@ -3,20 +3,20 @@
  * @Author: Rockery
  * @Date: 2021-12-13 17:40:22
  * @LastEditors: Rockery
- * @LastEditTime: 2021-12-14 15:22:45
- * @FilePath: \party_construct_web\src\components\VuePdfDialog\index.vue
+ * @LastEditTime: 2021-12-15 15:51:25
+ * @FilePath: \party_construct_web\src\components\RocVuePdfDialog\index.vue
  * @Copyright: Copyright (c) 2016~2021 Rockery(1113269755@qq.com)
 -->
 
 <template>
-  <div class="rocvuepdf">
+  <div class="rocvuepdfdialog">
     <el-dialog
       title="PDF文件预览"
       :visible.sync="visible"
       width="60%"
       append-to-body
       destroy-on-close
-      class="rocvuepdf-dialog"
+      class="rocvuepdfdialog-dialog"
       @close="handleCloseDialogClick"
     >
       <el-button-group>
@@ -26,12 +26,12 @@
           <i class="el-icon-arrow-right el-icon--right"></i>
         </el-button>
       </el-button-group>
-      <div class="rocvuepdf-dialog-page">当前页码：{{ pageNum }} / 总页码：{{ numPages }}</div>
+      <div class="rocvuepdfdialog-dialog-page">当前页码：{{ pageNum }} / 总页码：{{ numPages }}</div>
       <vue-pdf
         ref="vuePdfRef"
         :src="pdfUrl || '/file-api/statics/2021/12/13/6085efe9-74e1-4444-b47a-5c3533ec6901.pdf'"
         :page="pageNum"
-        class="rocvuepdf-dialog-pdfcontent"
+        class="rocvuepdfdialog-dialog-pdfcontent"
         @progress="loadedRatio = $event"
         @num-pages="numPages = $event"
       ></vue-pdf>
@@ -46,7 +46,7 @@
 import vuePdf from 'vue-pdf';
 
 export default {
-  name: 'Vuepdfdialog',
+  name: 'Rocvuepdfdialog',
   components: {
     'vue-pdf': vuePdf
   },
@@ -111,7 +111,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.rocvuepdf {
+.rocvuepdfdialog {
   &-dialog {
     ::v-deep {
       .el-dialog__header {

src/components/RocVuePdfPage/index.vue

@@ -0,0 +1,202 @@
+<!--
+ * @Description: pdf预览弹框
+ * @Author: Rockery
+ * @Date: 2021-12-13 17:40:22
+ * @LastEditors: Rockery
+ * @LastEditTime: 2021-12-15 17:42:25
+ * @FilePath: \party_construct_web\src\components\RocVuePdfPage\index.vue
+ * @Copyright: Copyright (c) 2016~2021 Rockery(1113269755@qq.com)
+-->
+
+<template>
+  <div class="rocvuepdfpage">
+    <el-row>
+      <el-col :span="24">
+        <div class="rocvuepdfpage-title">
+          <div>
+            <img :src="require('@/assets/logo/home-main-title-logo.png')" @error="imgViewerOnerror" />
+          </div>
+          <div>PDF文件预览</div>
+        </div>
+      </el-col>
+      <el-col :span="24">
+        <div class="rocvuepdfpage-line"></div>
+      </el-col>
+      <el-col :span="24">
+        <div v-loading="isLoading">
+          <el-row>
+            <el-col :span="24">
+              <div class="rocvuepdfpage-btngroup">
+                <el-button-group>
+                  <el-button
+                    type="primary"
+                    icon="el-icon-arrow-left"
+                    size="mini"
+                    @click="prePage"
+                  >上一页</el-button>
+                  <el-button type="primary" size="mini" @click="nextPage">
+                    下一页
+                    <i class="el-icon-arrow-right el-icon--right"></i>
+                  </el-button>
+                </el-button-group>
+              </div>
+            </el-col>
+            <el-col :span="24">
+              <div class="rocvuepdfpage-page">当前页码：{{ pageNum }} / 总页码：{{ numPages || '---' }}</div>
+            </el-col>
+
+            <el-col :span="24">
+              <template v-if="isLoadingSuccess">
+                <vue-pdf
+                  ref="vuePdfRef"
+                  :src="pdfUrl || '/file-api/statics/2021/12/13/6085efe9-74e1-4444-b47a-5c3533ec6901.pdf'"
+                  :page="pageNum"
+                  @progress="loadedRatio = $event"
+                  @num-pages="numPages = $event"
+                ></vue-pdf>
+              </template>
+              <template v-else>
+                <div class="rocvuepdfpage-nodata">文件预览失败</div>
+              </template>
+            </el-col>
+          </el-row>
+        </div>
+      </el-col>
+    </el-row>
+    <div class="pagefooter-btngroup">
+      <el-button
+        type="rocpartyprimaryplainbtn"
+        icon="el-icon-circle-close"
+        @click="handlePageCloseClick"
+      >关 闭</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import vuePdf from 'vue-pdf';
+
+export default {
+  name: 'Rocvuepdfpage',
+  components: {
+    'vue-pdf': vuePdf
+  },
+  props: {
+    pdfUrl: {
+      type: String,
+      required: true,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      numPages: null, // pdf 总页数
+      pageNum: 1,
+      loadedRatio: 0, // 当前页面的加载进度，范围是0-1 ，等于1的时候代表当前页已经完全加载完成了
+      isLoading: true,
+      isLoadingSuccess: true
+    };
+  },
+  mounted() {
+    this.getNumPages()
+  },
+  methods: {
+    /**
+     * 上一页按钮事件
+     */
+    prePage() {
+      let page = this.pageNum;
+      page = page > 1 ? page - 1 : this.numPages;
+      this.pageNum = page;
+    },
+    /**
+     * 下一页按钮事件
+     */
+    nextPage() {
+      let page = this.pageNum;
+      page = page < this.numPages ? page + 1 : 1;
+      this.pageNum = page;
+    },
+    /**
+     * 计算pdf页码总数
+     */
+    getNumPages() {
+      let loadingTask = vuePdf.createLoadingTask(this.pdfUrl);
+      loadingTask.promise.then(pdf => {
+        this.numPages = pdf.numPages;
+        this.isLoading = false;
+        this.isLoadingSuccess = true;
+      }).catch(err => {
+        console.error('PDF文件预览失败！');
+        this.isLoading = false;
+        this.isLoadingSuccess = false;
+      });
+    },
+    /**
+     * 对话框关闭事件
+    */
+    handlePageCloseClick() {
+      this.$emit("close", false);
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.rocvuepdfpage {
+  &-title {
+    display: flex;
+    align-items: center;
+    margin-bottom: 5px;
+
+    div {
+      &:first-child {
+        height: 37px;
+        line-height: 37px;
+      }
+
+      &:last-child {
+        margin-left: 15px;
+        height: 37px;
+        font-size: 26px;
+        font-weight: 400;
+        color: #4f4f4f;
+        line-height: 37px;
+        letter-spacing: 1px;
+      }
+
+      img {
+        width: 34px;
+        height: 34px;
+      }
+    }
+  }
+
+  &-line {
+    width: 100%;
+    height: 1px;
+    background: #d8dce5;
+    margin-bottom: 15px;
+  }
+
+  &-btngroup {
+    text-align: center;
+  }
+
+  &-page {
+    margin: 10px 0;
+    text-align: center;
+    color: #409eff;
+  }
+
+  &-nodata {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 200px;
+    font-size: 22px;
+    color: #747474;
+    opacity: 0.8;
+  }
+}
+</style>

src/components/UpdatePartyDevelop/index.vue

@@ -0,0 +1,219 @@
+<!--
+ * @Description: 更新党员发展
+ * @Author: Rockery
+ * @Date: 2021-12-15 17:54:05
+ * @LastEditors: Rockery
+ * @LastEditTime: 2021-12-15 18:09:59
+ * @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>
+            <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-row>
+              <el-col :span="24">
+                <div class="situationdesc-addpage-title">
+                  <div>
+                    <img
+                      :src="require('@/assets/logo/home-main-title-logo.png')"
+                      @error="imgViewerOnerror"
+                    />
+                  </div>
+                  <div>新增情况说明</div>
+                </div>
+              </el-col>
+              <el-col :span="24">
+                <div class="situationdesc-addpage-line"></div>
+              </el-col>
+              <el-col :span="24">
+                <el-form-item label="情况说明时间：" prop="beginTime">
+                  <el-date-picker
+                    v-model="formObj.formModel.name"
+                    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-form-item label="情况说明人:" prop="explainer">
+                  <el-select
+                    v-model="formObj.formModel.explainer"
+                    placeholder="请选择情况说明人"
+                    clearable
+                    style="width: 100%;"
+                  >
+                    <el-option
+                      v-for="situationExplainerOption in situationExplainerOptions"
+                      :key="situationExplainerOption.dictValue"
+                      :label="situationExplainerOption.dictLabel"
+                      :value="situationExplainerOption.dictValue"
+                    />
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="24">
+                <el-form-item label="情况说明：" prop="phone" class="formitem-attachment">
+                  <el-upload
+                    ref="descFileMaterialsUploadRef"
+                    :limit="1"
+                    accept=".pdf"
+                    :auto-upload="false"
+                    :show-file-list="true"
+                    :action="descFileMaterialsUpload.url"
+                    :headers="descFileMaterialsUpload.headers"
+                    :before-upload="handleBeforeUpload"
+                    :on-success="handleUploadOnsuccess"
+                    :on-change="handleUploadOnchange"
+                    :on-remove="handleUploadOnRemove"
+                    :on-exceed="handleUploadOnExceed"
+                    class="formitem-attachment-fileupload"
+                  >
+                    <div class="formitem-attachment-fileupload-content">
+                      <i class="el-icon-plus" />
+                      上传文件，格式：PDF
+                    </div>
+                  </el-upload>
+                  <div
+                    v-if="descFileMaterialsUpload.isUploadSuccess"
+                    class="fl formitem-attachment-addr"
+                    @click="handleDescFileMaterialsUploadUrlClick"
+                  >
+                    <div>文件上传成功地址：</div>
+                    <div>{{ formObj.formModel.bannerUrl }}</div>
+                  </div>
+                  <el-button
+                    v-if="descFileMaterialsUpload.isSelect && !descFileMaterialsUpload.isUploadSuccess"
+                    type="primary"
+                    size="small"
+                    @click="submitDescFileMaterialsUpload"
+                  >上传文件</el-button>
+                  <el-button
+                    v-if="descFileMaterialsUpload.isSelect"
+                    type="info"
+                    size="small"
+                    @click="removeDescFileMaterialsUpload"
+                  >移除文件</el-button>
+                </el-form-item>
+              </el-col>
+              <el-col :span="24">
+                <el-form-item
+                  label="说明了以下流程节点问题:"
+                  prop="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>
+              </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"
+              />
+            </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>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Orgrelationship",
+  data() {
+    return {
+      formObj: {
+        formModel: {},
+        formRules: {}
+      }
+    };
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.updatepartydevelop {
+  &-title {
+    display: flex;
+    align-items: center;
+
+    div {
+      &:first-child {
+        height: 37px;
+        line-height: 37px;
+      }
+
+      &:last-child {
+        margin-left: 15px;
+        height: 37px;
+        font-size: 26px;
+        font-weight: 400;
+        color: #4f4f4f;
+        line-height: 37px;
+        letter-spacing: 1px;
+      }
+
+      img {
+        width: 34px;
+        height: 34px;
+      }
+    }
+  }
+
+  &-line {
+    width: 100%;
+    height: 1px;
+    background: #d8dce5;
+    margin-bottom: 15px;
+  }
+}
+</style>

src/views/PartyBuildingMgr/FullPartyMember/FullPartyMemberIndex.vue

@@ -3,7 +3,7 @@
  * @Author: Rockery
  * @Date: 2021-12-10 10:39:07
  * @LastEditors: Rockery
- * @LastEditTime: 2021-12-14 16:57:22
+ * @LastEditTime: 2021-12-15 16:12:02
  * @FilePath: \party_construct_web\src\views\PartyBuildingMgr\FullPartyMember\FullPartyMemberIndex.vue
  * @Copyright: Copyright (c) 2016~2021 Rockery(1113269755@qq.com)
 -->
@@ -274,7 +274,7 @@
             </el-form-item>
           </el-col>
           <el-col :span="24">
-            <el-form-item label="相关材料：" prop="phone">
+            <el-form-item label="相关材料：" prop="phone" class="formitem-attachment">
               <el-upload
                 ref="relatedMaterialsUploadRef"
                 :limit="1"
@@ -288,16 +288,16 @@
                 :on-change="handleUploadOnchange"
                 :on-remove="handleUploadOnRemove"
                 :on-exceed="handleUploadOnExceed"
-                class="orgrelationchange-dialog-relatedmaterialsupload"
+                class="formitem-attachment-fileupload"
               >
-                <div class="relatedmaterialsupload-content">
+                <div class="formitem-attachment-fileupload-content">
                   <i class="el-icon-plus" />
                   上传文件，格式：PDF
                 </div>
               </el-upload>
               <div
                 v-if="relatedMaterialsUpload.isUploadSuccess"
-                class="fl attachment-addr"
+                class="fl formitem-attachment-addr"
                 @click="handleRelatedMaterialsUploadUrlClick"
               >
                 <div>文件上传成功地址：</div>
@@ -338,12 +338,12 @@
       </div>
     </el-dialog>
 
-    <vue-pdf-dialog
+    <roc-vue-pdf-dialog
       v-if="pdfDialogVisible"
       :visible.sync="pdfDialogVisible"
       pdfUrl="/file-api/statics/2021/12/13/6085efe9-74e1-4444-b47a-5c3533ec6901.pdf"
       @close="handlePdfCloseClick"
-    ></vue-pdf-dialog>
+    ></roc-vue-pdf-dialog>
   </div>
 </template>
 
@@ -351,7 +351,7 @@
 export default {
   name: "Fullpartymember",
   components: {
-    'vue-pdf-dialog': () => import('@/components/VuePdfDialog')
+    'roc-vue-pdf-dialog': () => import('@/components/RocVuePdfDialog')
   },
   data() {
     return {
@@ -802,67 +802,4 @@ export default {
     }
   }
 }
-
-.orgrelationchange-dialog {
-  &-relatedmaterialsupload {
-    ::v-deep {
-      .el-upload {
-        width: 100%;
-        border: 1px dashed #d9d9d9;
-        border-radius: 6px;
-        cursor: pointer;
-        position: relative;
-        overflow: hidden;
-
-        &:hover {
-          border-color: #409eff;
-        }
-      }
-
-      .el-upload-list.el-upload-list--text {
-        .el-upload-list__item:first-child {
-          margin-top: 0;
-        }
-      }
-    }
-
-    .relatedmaterialsupload-content {
-      width: 100%;
-      height: 32px;
-      font-size: 14px;
-      font-weight: 400;
-      color: #8c939d;
-      text-align: center;
-    }
-  }
-
-  .attachment-addr {
-    margin: 5px 0;
-    div {
-      &:first-child,
-      &:last-child {
-        margin-left: 4px;
-        width: 100%;
-        height: 20px;
-        vertical-align: middle;
-        font-size: 14px;
-        font-weight: 400;
-        color: #606266;
-        line-height: 20px;
-      }
-
-      &:last-child {
-        height: 25px;
-        line-height: 25px;
-        cursor: pointer;
-        opacity: 0.8;
-
-        &:hover {
-          color: #409eff;
-          text-decoration: underline;
-        }
-      }
-    }
-  }
-}
 </style>

src/views/PartyBuildingMgr/OrgRelationship/OrgRelationshipIndex.vue

@@ -1,9 +1,535 @@
 <!--
- * @Description: 
+ * @Description: 党建管理 => 组织关系变更
  * @Author: Rockery
  * @Date: 2021-12-10 10:45:41
  * @LastEditors: Rockery
- * @LastEditTime: 2021-12-10 10:45:42
+ * @LastEditTime: 2021-12-15 18:01:23
  * @FilePath: \party_construct_web\src\views\PartyBuildingMgr\OrgRelationship\OrgRelationshipIndex.vue
  * @Copyright: Copyright (c) 2016~2021 Rockery(1113269755@qq.com)
 -->
+
+<template>
+  <div
+    class="app-container orgrelationship"
+    :class="['ADD','VIEW'].includes(pageType) ? 'desc-page':''"
+  >
+    <template v-if="pageType === 'LIST'">
+      <div class="orgrelationship-main">
+        <el-row :gutter="10">
+          <el-col :span="24">
+            <div class="orgrelationship-main-title">
+              <div>
+                <img
+                  :src="require('@/assets/logo/home-main-title-logo.png')"
+                  @error="imgViewerOnerror"
+                />
+              </div>
+              <div>组织关系变更</div>
+            </div>
+          </el-col>
+          <div v-loading="loading">
+            <el-col :span="24" class="mt20">
+              <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>
+                  <el-button
+                    v-hasPermi="['partybuildingmgr:orgrelationship:query']"
+                    type="primary"
+                    icon="el-icon-search"
+                    @click="handleQueryClick"
+                  >搜索</el-button>
+                  <el-button
+                    v-hasPermi="['partybuildingmgr:orgrelationship:reset']"
+                    icon="el-icon-refresh"
+                    @click="resetQueryClick"
+                  >重置</el-button>
+                </el-form-item>
+              </el-form>
+            </el-col>
+            <el-col :span="24">
+              <el-table
+                :data="list"
+                stripe
+                border
+                :header-cell-style="{'text-align':'center'}"
+                header-row-class-name="orgrelationship-table_header-row"
+                class="orgrelationship-main-table"
+                style="width: 100%;"
+              >
+                <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="conditionPoint" :show-overflow-tooltip="true" />
+                <el-table-column label="备注" prop="conditionPoint" :show-overflow-tooltip="true" />
+                <el-table-column
+                  label="时间"
+                  align="center"
+                  prop="conditionTime"
+                  width="180"
+                  :show-overflow-tooltip="true"
+                />
+                <el-table-column
+                  label="操作"
+                  align="center"
+                  fixed="right"
+                  width="100"
+                  class-name="small-padding fixed-width"
+                >
+                  <template slot-scope="scope">
+                    <el-button
+                      v-hasPermi="['partybuildingmgr:orgrelationship:view']"
+                      size="mini"
+                      type="text"
+                      icon="el-icon-view"
+                      style="color: #909399;"
+                      @click="handleViewClick(scope.row)"
+                    >详情</el-button>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </el-col>
+            <el-col :span="24">
+              <pagination
+                v-show="total>0"
+                :total="total"
+                :page.sync="queryParams.pageNum"
+                :limit.sync="queryParams.pageSize"
+                @pagination="initData"
+              />
+            </el-col>
+          </div>
+        </el-row>
+      </div>
+    </template>
+    <template v-else-if="pageType === 'VIEW'">
+      <div class="orgrelationship-viewpage">
+        <el-row>
+          <el-col :span="24">
+            <div class="orgrelationship-viewpage-title">
+              <div>
+                <img
+                  :src="require('@/assets/logo/home-main-title-logo.png')"
+                  @error="imgViewerOnerror"
+                />
+              </div>
+              <div>组织关系变更详情</div>
+            </div>
+          </el-col>
+          <el-col :span="24">
+            <div class="orgrelationship-viewpage-line"></div>
+          </el-col>
+          <el-col :span="24">
+            <el-form
+              ref="orgRelationshipViewpageFormRef"
+              :model="viewPageFormObj.formModel"
+              label-width="120px"
+              class="orgrelationship-viewpage-form"
+            >
+              <el-row>
+                <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
+                  <el-form-item label prop="beginTime">
+                    <div slot="label" class="roc-form-item-label">变更时间：</div>
+                    <div
+                      class="roc-form-item-input"
+                    >{{ viewPageFormObj.formModel.beginTime || '2021年10月16日' }}</div>
+                  </el-form-item>
+                </el-col>
+                <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
+                  <el-form-item label="姓名：" prop="explainer">
+                    <div slot="label" class="roc-form-item-label">姓名：</div>
+                    <div
+                      class="roc-form-item-input"
+                    >{{ viewPageFormObj.formModel.explainer || '章姗姗' }}</div>
+                  </el-form-item>
+                </el-col>
+                <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
+                  <el-form-item label="身份证号：" prop="explainer">
+                    <div slot="label" class="roc-form-item-label">身份证号：</div>
+                    <div
+                      class="roc-form-item-input"
+                    >{{ viewPageFormObj.formModel.explainer || '520102198605081139' }}</div>
+                  </el-form-item>
+                </el-col>
+                <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
+                  <el-form-item label="类型：" prop="explainer">
+                    <div slot="label" class="roc-form-item-label">类型：</div>
+                    <div
+                      class="roc-form-item-input"
+                    >{{ viewPageFormObj.formModel.explainer || '转出' }}</div>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="24">
+                  <el-form-item label="相关材料：" prop="phone">
+                    <div slot="label" class="roc-form-item-label">相关材料：</div>
+                    <div class="orgrelationship-viewpage-form-desc">
+                      <div @click="handleViewPageCheckClick">查看</div>
+                      <div @click="handleViewPageDownloadClick">下载</div>
+                    </div>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="24">
+                  <el-form-item label="说明：" prop="explainer">
+                    <div slot="label" class="roc-form-item-label">说明：</div>
+                    <div
+                      class="roc-form-item-input"
+                    >{{ viewPageFormObj.formModel.explainer || '该同志由于XXXX原因，从我支部转出到XXXX支部' }}</div>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </el-form>
+          </el-col>
+        </el-row>
+        <div class="pagefooter-btngroup">
+          <el-button
+            type="rocpartyprimaryplainbtn"
+            icon="el-icon-circle-close"
+            @click="handleViewPageCloseClick"
+          >关 闭</el-button>
+        </div>
+      </div>
+    </template>
+    <template v-else-if="pageType === 'VIEWPDF'">
+      <div class="orgrelationship-viewpdfpage">
+        <roc-vue-pdf-page
+          pdf-url="/file-api/statics/2021/12/13/6085efe9-74e1-4444-b47a-5c3533ec6901.pdf"
+          @close="handleViewPdfPageCloseClick"
+        ></roc-vue-pdf-page>
+      </div>
+    </template>
+    <template v-else>
+      <div>&nbsp;</div>
+    </template>
+  </div>
+</template>
+
+<script>
+import { } from "@/api/PartyBuildingMgr/OrgRelationship";
+
+export default {
+  name: "Orgrelationship",
+  components: {
+    'roc-vue-pdf-page': () => import('@/components/RocVuePdfPage')
+  },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      pageType: 'LIST',
+      // 情况说明人选项列表
+      situationExplainerOptions: [],
+      total: 10,
+      queryParams: {
+        pageNum: 0,
+        pageSize: 10
+      },
+      list: [
+        {
+          name: '张三'
+        },
+        {
+          name: '李四'
+        }
+      ],
+      viewPageFormObj: {
+        formModel: {
+          checkList: []
+        }
+      },
+      pdfDialogVisible: false
+    };
+  },
+  created() {
+    this.initData();
+  },
+  methods: {
+    /**
+    * 初始化数据
+    */
+    initData() {
+      this.getList();
+    },
+    /**
+    * 获取表格数据
+    */
+    getList() {
+      this.loading = false;
+    },
+    /**
+    * 搜索按钮事件
+    */
+    handleQueryClick() {
+
+    },
+    /**
+    * 重置按钮事件
+    */
+    resetQueryClick() {
+
+    },
+    /**
+    * 详情按钮事件
+    */
+    handleViewClick(row) {
+      this.pageType = 'VIEW';
+    },
+    /**
+     * 详情页面查看按钮事件
+     */
+    handleViewPageCheckClick() {
+      viewPdfFile({ filename: '1f30fcfd-0d34-4127-a1cc-fad68fc27c7d.pdf' }).then(response => {
+        this.pageType = 'VIEWPDF';
+      });
+    },
+    /**
+     * 详情页面下载按钮事件
+     */
+    handleViewPageDownloadClick() {
+    },
+    /**
+     * 详情页面关闭按钮事件
+     */
+    handleViewPageCloseClick() {
+      this.pageType = 'LIST';
+    },
+    /**
+     * 预览PDF页面关闭按钮事件
+     */
+    handleViewPdfPageCloseClick() {
+      this.pageType = 'VIEW';
+    }
+  }
+};
+</script>
+
+<style  lang="scss" scoped>
+.orgrelationship {
+  .orgrelationship-main {
+    padding: 20px 20px 72px;
+    min-height: 750px;
+    background: url("../../../assets/images/home-head-img.png"), #ffffff;
+    background-size: 67px 67px, cover;
+    background-position: right 20px bottom 5px, 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;
+        }
+      }
+    }
+
+    &-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;
+        }
+      }
+    }
+
+    &-table {
+      ::v-deep {
+        .orgrelationship-table_header-row th.el-table__cell {
+          background-color: #e5d4b4;
+        }
+
+        .el-table__row {
+          background-color: #ffffff;
+        }
+
+        .el-table__row.el-table__row--striped {
+          background-color: #f0f0f0;
+        }
+      }
+    }
+  }
+
+  &-viewpage {
+    width: 100%;
+
+    &-title {
+      display: flex;
+      align-items: center;
+      margin-bottom: 5px;
+
+      div {
+        &:first-child {
+          height: 37px;
+          line-height: 37px;
+        }
+
+        &:last-child {
+          margin-left: 15px;
+          height: 37px;
+          font-size: 26px;
+          font-weight: 400;
+          color: #4f4f4f;
+          line-height: 37px;
+          letter-spacing: 1px;
+        }
+
+        img {
+          width: 34px;
+          height: 34px;
+        }
+      }
+    }
+
+    &-line {
+      width: 100%;
+      height: 1px;
+      background: #d8dce5;
+      margin-bottom: 15px;
+    }
+
+    &-form {
+      padding: 0 10%;
+
+      &-desc {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        height: 36px;
+        line-height: 36px;
+
+        div {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          height: 36px;
+          font-weight: 400;
+          font-style: normal;
+          font-size: 18px;
+          color: rgba(24, 144, 255, 0.996);
+          line-height: 36px;
+          cursor: pointer;
+
+          &:last-child {
+            margin-left: 20px;
+          }
+
+          &:hover {
+            text-decoration: underline;
+          }
+        }
+      }
+
+      &-processnode {
+        ::v-deep {
+          .el-checkbox {
+            display: flex;
+            align-items: center;
+
+            .el-checkbox__input {
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              height: 36px;
+              line-height: 36px;
+            }
+
+            .el-checkbox__label {
+              display: flex;
+              align-items: center;
+            }
+
+            &.is-disabled {
+              cursor: not-allowed;
+            }
+          }
+        }
+        .processnode-circle {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 24px;
+          height: 24px;
+          font-size: 14px;
+          color: #323232;
+          background: #ffffff;
+          border: 1px solid #323232;
+          border-radius: 50%;
+          line-height: 36px;
+          opacity: 0.9;
+        }
+
+        .processnode-label {
+          display: flex;
+          align-items: center;
+          margin-left: 5px;
+          height: 36px;
+          font-size: 16px;
+          font-weight: 400;
+          color: #333333;
+          line-height: 36px;
+          opacity: 0.9;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/PartyBuildingMgr/SituationDesc/SituationDescIndex.vue

@@ -3,155 +3,382 @@
  * @Author: Rockery
  * @Date: 2021-12-10 10:45:58
  * @LastEditors: Rockery
- * @LastEditTime: 2021-12-10 17:19:33
+ * @LastEditTime: 2021-12-15 16:29:09
  * @FilePath: \party_construct_web\src\views\PartyBuildingMgr\SituationDesc\SituationDescIndex.vue
  * @Copyright: Copyright (c) 2016~2021 Rockery(1113269755@qq.com)
 -->
 
 <template>
-  <div class="app-container situationdesc">
-    <div class="situationdesc-main">
-      <el-row :gutter="10">
-        <el-col :span="24">
-          <div class="situationdesc-main-title">
-            <div>
-              <img
-                :src="require('@/assets/logo/home-main-title-logo.png')"
-                @error="imgViewerOnerror"
-              />
+  <div
+    class="app-container situationdesc"
+    :class="['ADD','VIEW'].includes(pageType) ? 'desc-page':''"
+  >
+    <template v-if="pageType === 'LIST'">
+      <div class="situationdesc-main">
+        <el-row :gutter="10">
+          <el-col :span="24">
+            <div class="situationdesc-main-title">
+              <div>
+                <img
+                  :src="require('@/assets/logo/home-main-title-logo.png')"
+                  @error="imgViewerOnerror"
+                />
+              </div>
+              <div>情况说明管理</div>
             </div>
-            <div>情况说明管理</div>
+          </el-col>
+          <div v-loading="loading">
+            <el-col :span="24" class="mt20">
+              <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>
+                  <el-button
+                    v-hasPermi="['partybuildingmgr:situationdesc:query']"
+                    type="primary"
+                    icon="el-icon-search"
+                    @click="handleQueryClick"
+                  >搜索</el-button>
+                  <el-button
+                    v-hasPermi="['partybuildingmgr:situationdesc:reset']"
+                    icon="el-icon-refresh"
+                    @click="resetQueryClick"
+                  >重置</el-button>
+                </el-form-item>
+                <el-form-item class="fr" style="margin-right: 0;">
+                  <el-button
+                    v-hasPermi="['partybuildingmgr:situationdesc:add']"
+                    type="rocpartyprimarybtn"
+                    icon="el-icon-plus"
+                    @click="handleAddClick"
+                  >新增</el-button>
+                </el-form-item>
+              </el-form>
+            </el-col>
+            <el-col :span="24">
+              <el-table
+                :data="list"
+                stripe
+                border
+                :header-cell-style="{'text-align':'center'}"
+                header-row-class-name="situationdesc-table_header-row"
+                class="situationdesc-main-table"
+                style="width: 100%;"
+              >
+                <el-table-column
+                  label="情况说明人姓名"
+                  prop="name"
+                  width="180"
+                  :show-overflow-tooltip="true"
+                />
+                <el-table-column
+                  label="说明了以下流程节点问题"
+                  prop="conditionPoint"
+                  :show-overflow-tooltip="true"
+                />
+                <el-table-column
+                  label="情况说明时间"
+                  align="center"
+                  prop="conditionTime"
+                  width="180"
+                  :show-overflow-tooltip="true"
+                />
+                <el-table-column
+                  label="操作"
+                  align="center"
+                  fixed="right"
+                  width="100"
+                  class-name="small-padding fixed-width"
+                >
+                  <template slot-scope="scope">
+                    <el-button
+                      v-hasPermi="['partybuildingmgr:situationdesc:view']"
+                      size="mini"
+                      type="text"
+                      icon="el-icon-view"
+                      style="color: #909399;"
+                      @click="handleViewClick(scope.row)"
+                    >详情</el-button>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </el-col>
+            <el-col :span="24">
+              <pagination
+                v-show="total>0"
+                :total="total"
+                :page.sync="queryParams.pageNum"
+                :limit.sync="queryParams.pageSize"
+                @pagination="initData"
+              />
+            </el-col>
           </div>
-        </el-col>
-        <div v-loading="loading">
-          <el-col :span="24" class="mt20">
-            <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-row>
+      </div>
+    </template>
+    <template v-else-if="pageType === 'ADD'">
+      <div class="situationdesc-addpage">
+        <el-form
+          ref="situationDescAddpageFormRef"
+          :model="addPageFormObj.formModel"
+          :rules="addPageFormObj.formRules"
+          label-width="190px"
+          class="situationdesc-addpage-form"
+        >
+          <el-row>
+            <el-col :span="24">
+              <div class="situationdesc-addpage-title">
+                <div>
+                  <img
+                    :src="require('@/assets/logo/home-main-title-logo.png')"
+                    @error="imgViewerOnerror"
+                  />
+                </div>
+                <div>新增情况说明</div>
+              </div>
+            </el-col>
+            <el-col :span="24">
+              <div class="situationdesc-addpage-line"></div>
+            </el-col>
+            <el-col :span="24">
+              <el-form-item label="情况说明时间：" prop="beginTime">
                 <el-date-picker
-                  v-model="queryParams.endTime"
+                  v-model="addPageFormObj.formModel.name"
                   type="date"
-                  size="small"
                   clearable
                   value-format="yyyy-MM-dd"
                   style="width: 100%;"
-                  placeholder="请选择结束时间"
+                  placeholder="请选择情况说明时间"
                 ></el-date-picker>
               </el-form-item>
-              <el-form-item prop="name">
-                <el-input
-                  v-model="queryParams.name"
-                  placeholder="请输入情况说明人姓名"
+            </el-col>
+            <el-col :span="24">
+              <el-form-item label="情况说明人:" prop="explainer">
+                <el-select
+                  v-model="addPageFormObj.formModel.explainer"
+                  placeholder="请选择情况说明人"
                   clearable
-                  size="small"
                   style="width: 100%;"
-                  @keyup.enter.native="handleQuery"
-                />
+                >
+                  <el-option
+                    v-for="situationExplainerOption in situationExplainerOptions"
+                    :key="situationExplainerOption.dictValue"
+                    :label="situationExplainerOption.dictLabel"
+                    :value="situationExplainerOption.dictValue"
+                  />
+                </el-select>
               </el-form-item>
-              <el-form-item>
+            </el-col>
+            <el-col :span="24">
+              <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>{{ addPageFormObj.formModel.bannerUrl }}</div>
+                </div>
                 <el-button
-                  v-hasPermi="['partybuildingmgr:situationdesc:query']"
+                  v-if="descFileMaterialsUpload.isSelect && !descFileMaterialsUpload.isUploadSuccess"
                   type="primary"
-                  icon="el-icon-search"
-                  @click="handleQueryClick"
-                >搜索</el-button>
+                  size="small"
+                  @click="submitDescFileMaterialsUpload"
+                >上传文件</el-button>
                 <el-button
-                  v-hasPermi="['partybuildingmgr:situationdesc:reset']"
-                  icon="el-icon-refresh"
-                  @click="resetQueryClick"
-                >重置</el-button>
+                  v-if="descFileMaterialsUpload.isSelect"
+                  type="info"
+                  size="small"
+                  @click="removeDescFileMaterialsUpload"
+                >移除文件</el-button>
               </el-form-item>
-              <el-form-item class="fr" style="margin-right: 0;">
-                <el-button
-                  v-hasPermi="['partybuildingmgr:situationdesc:add']"
-                  type="rocpartyprimarybtn"
-                  icon="el-icon-plus"
-                  @click="handleAddClick"
-                >新增</el-button>
+            </el-col>
+            <el-col :span="24">
+              <el-form-item
+                label="说明了以下流程节点问题:"
+                prop="sort"
+                class="situationdesc-addpage-form-processnode"
+              >
+                <el-checkbox-group
+                  v-model="addPageFormObj.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>
-            </el-form>
-          </el-col>
-          <el-col :span="24">
-            <el-table
-              :data="list"
-              stripe
-              border
-              :header-cell-style="{'text-align':'center'}"
-              header-row-class-name="situationdesc-table_header-row"
-              class="situationdesc-main-table"
-              style="width: 100%;"
-            >
-              <el-table-column
-                label="情况说明人姓名"
-                prop="name"
-                width="180"
-                :show-overflow-tooltip="true"
-              />
-              <el-table-column
-                label="说明了以下流程节点问题"
-                prop="conditionPoint"
-                :show-overflow-tooltip="true"
-              />
-              <el-table-column
-                label="情况说明时间"
-                align="center"
-                prop="conditionTime"
-                width="180"
-                :show-overflow-tooltip="true"
-              />
-              <el-table-column
-                label="操作"
-                align="center"
-                fixed="right"
-                width="100"
-                class-name="small-padding fixed-width"
+            </el-col>
+          </el-row>
+        </el-form>
+        <div class="pagefooter-btngroup">
+          <el-button
+            type="rocpartyprimaryplainbtn"
+            icon="el-icon-circle-close"
+            @click="handleAddpageCloseClick"
+          >取 消</el-button>
+          <el-button
+            type="rocpartyprimarybtn"
+            icon="el-icon-circle-check"
+            @click="handleAddpageSubmitClick"
+          >确 定</el-button>
+        </div>
+      </div>
+    </template>
+    <template v-else-if="pageType === 'VIEW'">
+      <div class="situationdesc-viewpage">
+        <el-form
+          ref="situationDescViewpageFormRef"
+          :model="viewPageFormObj.formModel"
+          label-width="190px"
+          class="situationdesc-viewpage-form"
+        >
+          <el-row>
+            <el-col :span="24">
+              <div class="situationdesc-viewpage-title">
+                <div>
+                  <img
+                    :src="require('@/assets/logo/home-main-title-logo.png')"
+                    @error="imgViewerOnerror"
+                  />
+                </div>
+                <div>情况说明会详情</div>
+              </div>
+            </el-col>
+            <el-col :span="24">
+              <div class="situationdesc-viewpage-line"></div>
+            </el-col>
+            <el-col :span="24">
+              <el-form-item label="情况说明时间：" prop="beginTime">
+                <div>{{ viewPageFormObj.formModel.beginTime }}</div>
+              </el-form-item>
+            </el-col>
+            <el-col :span="24">
+              <el-form-item label="情况说明人:" prop="explainer">
+                <div>{{ viewPageFormObj.formModel.explainer }}</div>
+              </el-form-item>
+            </el-col>
+            <el-col :span="24">
+              <el-form-item label="情况说明：" prop="phone">
+                <div class="situationdesc-viewpage-form-desc">
+                  <div @click="handleViewPageCheckClick">查看</div>
+                  <div @click="handleViewPageDownloadClick">下载</div>
+                </div>
+              </el-form-item>
+            </el-col>
+            <el-col :span="24">
+              <el-form-item
+                label="说明了以下流程节点问题:"
+                prop="sort"
+                class="situationdesc-viewpage-form-processnode"
               >
-                <template slot-scope="scope">
-                  <el-button
-                    v-hasPermi="['partybuildingmgr:situationdesc:view']"
-                    size="mini"
-                    type="text"
-                    icon="el-icon-view"
-                    style="color: #909399;"
-                    @click="handleViewClick(scope.row)"
-                  >详情</el-button>
-                </template>
-              </el-table-column>
-            </el-table>
-          </el-col>
-          <el-col :span="24">
-            <pagination
-              v-show="total>0"
-              :total="total"
-              :page.sync="queryParams.pageNum"
-              :limit.sync="queryParams.pageSize"
-              @pagination="initData"
-            />
-          </el-col>
+                <el-checkbox-group v-model="viewPageFormObj.formModel.checkList">
+                  <el-checkbox label="《入党积极分子、发展对象培养教育考察登记表》" disabled>
+                    <div class="processnode-circle">6</div>
+                    <div class="processnode-label">《入党积极分子、发展对象培养教育考察登记表》</div>
+                  </el-checkbox>
+                  <el-checkbox label="支委会拟接收预备党员审查会议记录和上报的预审请示" disabled>
+                    <div class="processnode-circle">13</div>
+                    <div class="processnode-label">支委会拟接收预备党员审查会议记录和上报的预审请示</div>
+                  </el-checkbox>
+                </el-checkbox-group>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+        <div class="pagefooter-btngroup">
+          <el-button
+            type="rocpartyprimaryplainbtn"
+            icon="el-icon-circle-close"
+            @click="handleViewPageCloseClick"
+          >关 闭</el-button>
         </div>
-      </el-row>
-    </div>
+      </div>
+    </template>
+    <template v-else-if="pageType === 'VIEWPDF'">
+      <div class="situationdesc-viewpdfpage">
+        <roc-vue-pdf-page
+          pdf-url="/file-api/statics/2021/12/13/6085efe9-74e1-4444-b47a-5c3533ec6901.pdf"
+          @close="handleViewPdfPageCloseClick"
+        ></roc-vue-pdf-page>
+      </div>
+    </template>
+    <template v-else>
+      <div>&nbsp;</div>
+    </template>
   </div>
 </template>
 
 <script>
+import { viewPdfFile } from "@/api/PartyBuildingMgr/SituationDesc";
+
 export default {
   name: "Situationdesc",
+  components: {
+    'roc-vue-pdf-page': () => import('@/components/RocVuePdfPage')
+  },
   data() {
     return {
       // 遮罩层
       loading: true,
-      statusOptions: [],
+      pageType: 'LIST',
+      // 情况说明人选项列表
+      situationExplainerOptions: [],
       total: 10,
       queryParams: {
         pageNum: 0,
@@ -164,42 +391,246 @@ export default {
         {
           name: '李四'
         }
-      ]
+      ],
+      /** 新增或编辑弹框 */
+      addPageFormObj: {
+        formModel: {
+          bannerType: '0', // APP首页轮播图
+          name: undefined, // 名称
+          explainer: undefined, // 链接
+          sort: 0, // 排序
+          author: undefined, // 文章主体
+          bannerUrl: undefined, // 封面图片
+          content: undefined, // 内容
+          fileName: undefined, // 附件名称
+          fileUrl: undefined, // 附件地址
+          checkList: []
+        },
+        formRules: {
+          name: [{ required: true, message: '名称不能为空！', trigger: 'blur' }],
+          linkUrl: [{ required: true, message: '链接不能为空！', trigger: 'blur' }],
+          sort: [{ required: true, message: '排序不能为空！', trigger: ['blur', 'change'] }],
+          author: [{ required: true, message: '文章主体不能为空！', trigger: 'blur' }],
+          bannerUrl: [{ required: true, message: '封面图片不能为空！', trigger: 'change' }],
+          content: [{ required: true, message: '内容不能为空！', trigger: 'blur' }]
+        }
+      },
+      descFileMaterialsUpload: {
+        isSelect: false,
+        isUploadSuccess: false,
+        isOnProgress: false,
+        url: `${this.baseApiUrl}/file/upload`,
+        headers: { Authorization: 'Bearer ' + this.getToken() }
+      },
+      viewPageFormObj: {
+        formModel: {
+          checkList: []
+        }
+      },
+      pdfDialogVisible: false
     };
   },
   created() {
     this.initData();
   },
   methods: {
-    /** 初始化数据 */
+    /**
+    * 初始化数据
+    */
     initData() {
       this.getList();
     },
-    /** 获取表格数据 */
+    /**
+    * 获取表格数据
+    */
     getList() {
       this.loading = false;
     },
-    /** 搜索按钮事件 */
+    /**
+    * 搜索按钮事件
+    */
     handleQueryClick() {
 
     },
-    /** 重置按钮事件 */
+    /**
+    * 重置按钮事件
+    */
     resetQueryClick() {
 
     },
-    /** 新增按钮事件 */
+    /**
+    * 新增按钮事件
+    */
     handleAddClick() {
-
+      this.pageType = 'ADD';
+      this.descFileMaterialsUpload = {
+        ...this.descFileMaterialsUpload,
+        isSelect: false,
+        isUploadSuccess: false
+      };
     },
-    /** 详情按钮事件 */
+    /**
+    * 详情按钮事件
+    */
     handleViewClick(row) {
+      this.pageType = 'VIEW';
+    },
+    /**
+    * 新增页面确定按钮事件
+    */
+    handleAddpageSubmitClick() {
+      this.pageType = 'LIST';
+    },
+    /**
+    * 新增页面取消按钮事件
+    */
+    handleAddpageCloseClick() {
+      this.pageType = 'LIST';
+      this.descFileMaterialsUpload = {
+        ...this.descFileMaterialsUpload,
+        isSelect: false,
+        isUploadSuccess: false,
+        isOnProgress: false
+      };
+    },
+    /**
+ * 相关材料PDF文件上传url点击事件
+ */
+    handleDescFileMaterialsUploadUrlClick() {
+      this.pdfDialogVisible = true;
+    },
+    /**
+     * 相关材料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文件`);
+    },
+    /**
+     * PDF文件预览对话框关闭事件
+     */
+    handlePdfCloseClick(visible = false) {
+      this.pdfDialogVisible = visible;
+    },
+    /**
+     * 详情页面查看按钮事件
+     */
+    handleViewPageCheckClick() {
+      viewPdfFile({ filename: '1f30fcfd-0d34-4127-a1cc-fad68fc27c7d.pdf' }).then(response => {
+        this.pageType = 'VIEWPDF';
+      });
+    },
+    /**
+     * 详情页面下载按钮事件
+     */
+    handleViewPageDownloadClick() {
+    },
+    /**
+     * 详情页面关闭按钮事件
+     */
+    handleViewPageCloseClick() {
+      this.pageType = 'LIST';
+    },
+    /**
+     * 预览PDF页面关闭按钮事件
+     */
+    handleViewPdfPageCloseClick() {
+      this.pageType = 'VIEW';
     }
   }
 };
 </script>
 
-<style scoped lang="scss">
+<style  lang="scss" scoped>
 .situationdesc {
   .situationdesc-main {
     padding: 20px 20px 72px;
@@ -275,5 +706,217 @@ export default {
       }
     }
   }
+
+  &-addpage {
+    width: 100%;
+
+    &-title {
+      display: flex;
+      align-items: center;
+      margin-bottom: 5px;
+
+      div {
+        &:first-child {
+          height: 37px;
+          line-height: 37px;
+        }
+
+        &:last-child {
+          margin-left: 15px;
+          height: 37px;
+          font-size: 26px;
+          font-weight: 400;
+          color: #4f4f4f;
+          line-height: 37px;
+          letter-spacing: 1px;
+        }
+
+        img {
+          width: 34px;
+          height: 34px;
+        }
+      }
+    }
+
+    &-line {
+      width: 100%;
+      height: 1px;
+      background: #d8dce5;
+      margin-bottom: 15px;
+    }
+
+    &-form {
+      &-processnode {
+        ::v-deep {
+          .el-checkbox {
+            display: flex;
+            align-items: center;
+            margin-bottom: 20px;
+
+            .el-checkbox__input {
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              height: 24px;
+              line-height: 24px;
+            }
+
+            .el-checkbox__label {
+              display: flex;
+              align-items: center;
+            }
+          }
+        }
+        .processnode-circle {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 24px;
+          height: 24px;
+          font-size: 14px;
+          color: #323232;
+          background: #ffffff;
+          border: 1px solid #323232;
+          border-radius: 50%;
+          line-height: 24px;
+          opacity: 0.9;
+        }
+
+        .processnode-label {
+          display: flex;
+          align-items: center;
+          margin-left: 5px;
+          height: 24px;
+          font-size: 16px;
+          font-weight: 400;
+          color: #333333;
+          line-height: 20px;
+          opacity: 0.9;
+        }
+      }
+    }
+  }
+
+  &-viewpage {
+    width: 100%;
+
+    &-title {
+      display: flex;
+      align-items: center;
+      margin-bottom: 5px;
+
+      div {
+        &:first-child {
+          height: 37px;
+          line-height: 37px;
+        }
+
+        &:last-child {
+          margin-left: 15px;
+          height: 37px;
+          font-size: 26px;
+          font-weight: 400;
+          color: #4f4f4f;
+          line-height: 37px;
+          letter-spacing: 1px;
+        }
+
+        img {
+          width: 34px;
+          height: 34px;
+        }
+      }
+    }
+
+    &-line {
+      width: 100%;
+      height: 1px;
+      background: #d8dce5;
+      margin-bottom: 15px;
+    }
+
+    &-form {
+      &-desc {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        height: 36px;
+        line-height: 36px;
+
+        div {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          height: 36px;
+          font-weight: 400;
+          font-style: normal;
+          font-size: 18px;
+          color: rgba(24, 144, 255, 0.996);
+          line-height: 36px;
+          cursor: pointer;
+
+          &:last-child {
+            margin-left: 20px;
+          }
+
+          &:hover {
+            text-decoration: underline;
+          }
+        }
+      }
+
+      &-processnode {
+        ::v-deep {
+          .el-checkbox {
+            display: flex;
+            align-items: center;
+
+            .el-checkbox__input {
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              height: 36px;
+              line-height: 36px;
+            }
+
+            .el-checkbox__label {
+              display: flex;
+              align-items: center;
+            }
+
+            &.is-disabled {
+              cursor: not-allowed;
+            }
+          }
+        }
+        .processnode-circle {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 24px;
+          height: 24px;
+          font-size: 14px;
+          color: #323232;
+          background: #ffffff;
+          border: 1px solid #323232;
+          border-radius: 50%;
+          line-height: 36px;
+          opacity: 0.9;
+        }
+
+        .processnode-label {
+          display: flex;
+          align-items: center;
+          margin-left: 5px;
+          height: 36px;
+          font-size: 16px;
+          font-weight: 400;
+          color: #333333;
+          line-height: 36px;
+          opacity: 0.9;
+        }
+      }
+    }
+  }
 }
 </style>