党建管理 => 正式党员管理

package.json

@@ -57,6 +57,7 @@
     "vue": "2.6.14",
     "vue-count-to": "1.0.13",
     "vue-cropper": "0.5.8",
+    "vue-pdf": "4.3.0",
     "vue-router": "3.5.3",
     "vuedraggable": "2.24.3",
     "vuex": "3.6.2"

src/assets/styles/cust-global.scss

@@ -27,7 +27,7 @@
   padding-left: 20px;
 }
 
-.brad-10{
+.brad-10 {
   border-radius: 10px;
 }
 
@@ -38,6 +38,84 @@
   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;
+}
+
+/* rocpartyprimarybtn button color ----Start */
+.el-button--rocpartyprimarybtn.is-active,
+.el-button--rocpartyprimarybtn:active {
+  background: #de0010;
+  border-color: #de0010;
+  color: #ffffff;
+}
+
+.el-button--rocpartyprimarybtn:focus,
+.el-button--rocpartyprimarybtn:hover {
+  background: #ec5a64;
+  border-color: #ec5a64;
+  color: #ffffff;
+}
+
+.el-button--rocpartyprimarybtn {
+  background-color: #de0010;
+  border-color: #de0010;
+  color: #ffffff;
+}
+/* rocpartyprimarybtn button color ----End */
+
+/* rocpartyprimaryplainbtn button color ----Start */
+.el-button--rocpartyprimaryplainbtn.is-active,
+.el-button--rocpartyprimaryplainbtn:active {
+  background: #ffffff;
+  border-color: #de0010;
+  color: #de0010;
+}
+
+.el-button--rocpartyprimaryplainbtn:focus,
+.el-button--rocpartyprimaryplainbtn:hover {
+  background: #f2f2f2;
+  border-color: #ec5a64;
+  color: #de0010;
+}
+
+.el-button--rocpartyprimaryplainbtn {
+  background-color: #ffffff;
+  border-color: #de0010;
+  color: #de0010;
+}
+/* rocpartyprimaryplainbtn button color ----End */
+
+/* rocwhiteplainbtn button color ----Start */
+.el-button--rocwhiteplainbtn.is-active,
+.el-button--rocwhiteplainbtn:active {
+  background: transparent;
+  border-color: #ffffff;
+  color: #ffffff;
+}
+
+.el-button--rocwhiteplainbtn:focus,
+.el-button--rocwhiteplainbtn:hover {
+  background: transparent;
+  border-color: #ffffff;
+  color: #ffffff;
+}
+
+.el-button--rocwhiteplainbtn {
+  background-color: transparent;
+  border-color: #ffffff;
+  color: #ffffff;
+
+  span {
+    font-size: 16px;
+    font-weight: 400;
+  }
+}
+/* rocwhiteplainbtn button color ----End */
+
 .app-container {
   padding: 15px;
 

src/components/BottomRightNotification/index.vue

@@ -0,0 +1,223 @@
+<!--
+ * @Description: 自定义右下角弹出的消息
+ * @Author: Rockery
+ * @Date: 2021-12-14 11:50:13
+ * @LastEditors: Rockery
+ * @LastEditTime: 2021-12-14 16:47:39
+ * @FilePath: \party_construct_web\src\components\BottomRightNotification\index.vue
+ * @Copyright: Copyright (c) 2016~2021 Rockery(1113269755@qq.com)
+-->
+
+<template>
+  <div class="rocbrnotify">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Bottomrightnotification',
+  data() {
+    return {
+      rocBrNotifyObj: null,
+      intervalTimer: null
+    };
+  },
+  created() {
+    this.initData();
+  },
+  mounted() {
+    this.intervalTimer = setInterval(() => {
+      this.openMessageTips(
+        {
+          messageId: '999999',
+          content: '您当前有 3 条数据将超出处理时间，请尽快安排处理'
+        }
+      );
+    }, 20000);
+  },
+  destroyed() {
+    this.intervalTimer && clearInterval(this.intervalTimer);
+  },
+  methods: {
+    /** 初始化数据 */
+    initData() {
+      this.openMessageTips(
+        {
+          messageId: '999999',
+          content: '您当前有 3 条数据将超出处理时间，请尽快安排处理'
+        }
+      );
+    },
+    /**
+     * 打开一个新的通知
+    */
+    openMessageTips(message) {
+      let _this = this;
+      this.handleCloseBtnClick();
+
+      // 组织通知数据
+      let notify = this.$notify({
+        position: 'bottom-right',
+        showClose: false,
+        dangerouslyUseHTMLString: true,
+        customClass: 'rocbrnotify-dialog',
+        message: this.$createElement(
+          'div',
+          {
+            class: {
+              'rocbrnotify-dialog-container': true
+            }
+          },
+          [
+            this.$createElement(
+              'div',
+              {
+                class: {
+                  'rocbrnotify-dialog-title': true
+                }
+              },
+              '待处理通知'
+            ),
+            this.$createElement(
+              'div',
+              {
+                class: {
+                  'rocbrnotify-dialog-content': true
+                }
+              },
+              [this.$createElement('span', null, message.content)]
+            ),
+            this.$createElement(
+              'div',
+              {
+                class: {
+                  'rocbrnotify-dialog-btngroup': true
+                }
+              },
+              [
+                this.$createElement(
+                  'el-button',
+                  {
+                    attrs: {
+                      type: 'rocpartyprimarybtn'
+                    },
+                    on: {
+                      click: this.handleViewBtnClick
+                    }
+                  },
+                  "查看"
+                ),
+                this.$createElement(
+                  'el-button',
+                  {
+                    attrs: {
+                      type: 'rocpartyprimaryplainbtn'
+                    },
+                    on: {
+                      click: this.handleCloseBtnClick
+                    }
+                  },
+                  "好的"
+                )
+              ]
+            )
+          ]
+        ),
+        duration: 10000
+      });
+
+      this.rocBrNotifyObj = notify;
+    },
+    /**
+     * 右下角弹出的消息的查看事件
+    */
+    handleViewBtnClick() {
+      this.handleCloseBtnClick();
+      this.$router.replace({
+        path: '/redirect/index'
+      });
+    },
+    /**
+     * 右下角弹出的消息的好的事件
+    */
+    handleCloseBtnClick() {
+      this.rocBrNotifyObj && this.rocBrNotifyObj.close();
+      this.rocBrNotifyObj = null;
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.rocbrnotify-dialog {
+  &-title {
+    text-align: center;
+    font-size: 24px;
+    font-weight: 700;
+    color: #333333;
+  }
+
+  &-content {
+    margin-top: 20px;
+    width: 100%;
+    font-size: 16px;
+    font-weight: 400;
+    color: #333333;
+    opacity: 0.8;
+  }
+
+  &-btngroup {
+    margin-top: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &-viewbtn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 60px;
+      height: 32px;
+      background: rgba(255, 17, 17, 1);
+      border: none;
+      border-radius: 4px;
+      font-weight: 400;
+      font-size: 14px;
+      color: #ffffff;
+      line-height: 22px;
+      opacity: 0.9;
+      cursor: pointer;
+
+      &:hover {
+        background: rgb(253, 96, 96);
+      }
+    }
+
+    &-closebtn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-left: 15px;
+      width: 60px;
+      height: 32px;
+      background: #ffffff;
+      box-sizing: border-box;
+      border-width: 1px;
+      border-style: solid;
+      border-color: rgba(255, 17, 17, 1);
+      border-radius: 4px;
+      font-weight: 400;
+      font-size: 14px;
+      color: #ff1111;
+      line-height: 22px;
+      opacity: 0.8;
+      cursor: pointer;
+
+      &:hover {
+        background: #f8f8f8;
+      }
+    }
+  }
+}
+</style>

src/components/VuePdfDialog/index.vue

@@ -0,0 +1,133 @@
+<!--
+ * @Description: pdf预览弹框
+ * @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
+ * @Copyright: Copyright (c) 2016~2021 Rockery(1113269755@qq.com)
+-->
+
+<template>
+  <div class="rocvuepdf">
+    <el-dialog
+      title="PDF文件预览"
+      :visible.sync="visible"
+      width="60%"
+      append-to-body
+      destroy-on-close
+      class="rocvuepdf-dialog"
+      @close="handleCloseDialogClick"
+    >
+      <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 class="rocvuepdf-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"
+        @progress="loadedRatio = $event"
+        @num-pages="numPages = $event"
+      ></vue-pdf>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="handleCloseDialogClick">关 闭</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import vuePdf from 'vue-pdf';
+
+export default {
+  name: 'Vuepdfdialog',
+  components: {
+    'vue-pdf': vuePdf
+  },
+  props: {
+    visible: {
+      type: Boolean,
+      required: true,
+      default: true
+    },
+    pdfUrl: {
+      type: String,
+      required: true,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      numPages: null, // pdf 总页数
+      pageNum: 1,
+      loadedRatio: 0, // 当前页面的加载进度，范围是0-1 ，等于1的时候代表当前页已经完全加载完成了
+    };
+  },
+  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;
+      }).catch(err => {
+        console.error('pdf 加载失败', err);
+      });
+    },
+    /**
+     * 对话框关闭事件
+    */
+    handleCloseDialogClick() {
+      this.$emit("close", false);
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.rocvuepdf {
+  &-dialog {
+    ::v-deep {
+      .el-dialog__header {
+        border-bottom: 1px solid #dfe4ed;
+      }
+
+      .el-dialog__body {
+        padding: 20px 20px 30px;
+        text-align: center;
+      }
+    }
+
+    &-page {
+      margin: 10px 0;
+      color: #409eff;
+    }
+  }
+}
+</style>

src/layout/components/Sidebar/index.vue

@@ -1,7 +1,7 @@
 <template>
     <div :class="{'has-logo':showLogo}" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBg : variables.menuLightBg }">
         <logo v-if="showLogo" :collapse="isCollapse" />
-        <el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper">
+        <el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper" class="sidebar-wrapper">
             <el-menu
                 :default-active="activeMenu"
                 :collapse="isCollapse"

src/layout/index.vue

@@ -12,15 +12,17 @@
         <settings />
       </right-panel>
     </div>
+    <bottom-right-notification />
   </div>
 </template>
 
 <script>
-import RightPanel from '@/components/RightPanel'
-import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
-import ResizeMixin from './mixin/ResizeHandler'
-import { mapState } from 'vuex'
-import variables from '@/assets/styles/variables.scss'
+import RightPanel from '@/components/RightPanel';
+import BottomRightNotification from "@/components/BottomRightNotification";
+import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components';
+import ResizeMixin from './mixin/ResizeHandler';
+import { mapState } from 'vuex';
+import variables from '@/assets/styles/variables.scss';
 
 export default {
   name: 'Layout',
@@ -30,7 +32,8 @@ export default {
     RightPanel,
     Settings,
     Sidebar,
-    TagsView
+    TagsView,
+    BottomRightNotification
   },
   mixins: [ResizeMixin],
   computed: {

src/main.js

@@ -24,6 +24,7 @@ import { handleOpenLoading, handleCloseLoading, imgViewerOnerror } from "@/utils
 
 // 分页组件
 import Pagination from "@/components/Pagination";
+
 // 自定义表格工具扩展
 import RightToolbar from "@/components/RightToolbar";
 

src/store/getters.js

@@ -14,6 +14,8 @@ const getters = {
   topbarRouters:state => state.permission.topbarRouters,
   defaultRoutes:state => state.permission.defaultRoutes,
   sidebarRouters:state => state.permission.sidebarRouters,
-  projectName: state => state.settings.projectName
+  projectName: state => state.settings.projectName,
+  nickName: state => state.user.nickName,
+  roleName: state => state.user.roleName
 }
 export default getters

src/store/modules/user.js

@@ -7,7 +7,9 @@ const user = {
     name: '',
     avatar: '',
     roles: [],
-    permissions: []
+    permissions: [],
+    nickName: '',
+    roleName: ''
   },
 
   mutations: {
@@ -28,6 +30,12 @@ const user = {
     },
     SET_PERMISSIONS: (state, permissions) => {
       state.permissions = permissions
+    },
+    SET_NICKNAME: (state, nickName) => {
+      state.nickName = nickName
+    },
+    SET_ROLENAME: (state, roleName) => {
+      state.roleName = roleName
     }
   },
 
@@ -66,6 +74,8 @@ const user = {
           }
           commit('SET_NAME', user.userName)
           commit('SET_AVATAR', avatar)
+          commit('SET_NICKNAME', user.nickName)
+          commit('SET_ROLENAME', user.roles?.[0]?.roleName || '暂无')
           resolve(res)
         }).catch(error => {
           reject(error)
@@ -74,7 +84,7 @@ const user = {
     },
 
     // 刷新token
-    RefreshToken({commit, state}) {
+    RefreshToken({ commit, state }) {
       return new Promise((resolve, reject) => {
         refreshToken(state.token).then(res => {
           setExpiresIn(res.data)
@@ -85,7 +95,7 @@ const user = {
         })
       })
     },
-    
+
     // 退出系统
     LogOut({ commit, state }) {
       return new Promise((resolve, reject) => {

src/views/PartyBuildingMgr/FullPartyMember/FullPartyMemberIndex.vue

@@ -0,0 +1,868 @@
+<!--
+ * @Description: 党建管理 => 正式党员管理
+ * @Author: Rockery
+ * @Date: 2021-12-10 10:39:07
+ * @LastEditors: Rockery
+ * @LastEditTime: 2021-12-14 16:57:22
+ * @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"
+            />
+          </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>
+              </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)"
+                  >
+                    <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>
+
+    <!-- 组织关系变更对话框 -->
+    <el-dialog
+      title="组织关系变更"
+      :visible.sync="orgRelationChangeObj.open"
+      width="700px"
+      append-to-body
+      class="orgrelationchange-dialog"
+    >
+      <el-form
+        ref="orgRelationChangeFormRef"
+        :model="orgRelationChangeObj.form"
+        :rules="orgRelationChangeObj.rules"
+        label-width="90px"
+      >
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="变更时间：" prop="deptName">
+              <el-input
+                v-model="orgRelationChangeObj.form.deptName"
+                clearable
+                placeholder="请输入部门名称"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="姓名：" prop="deptName">
+              <el-input v-model="orgRelationChangeObj.form.deptName" disabled />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="身份证号：" prop="leader">
+              <el-input v-model="orgRelationChangeObj.form.leader" disabled />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="类型：" prop="orgRelationChangeType">
+              <el-select
+                v-model="orgRelationChangeObj.form.orgRelationChangeType"
+                placeholder="请选择类型"
+                clearable
+                size="small"
+                style="width: 100%;"
+              >
+                <el-option
+                  v-for="orgRelationChangeTypeOption in orgRelationChangeTypeOptions"
+                  :key="orgRelationChangeTypeOption.dictValue"
+                  :label="orgRelationChangeTypeOption.dictLabel"
+                  :value="orgRelationChangeTypeOption.dictValue"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="相关材料：" prop="phone">
+              <el-upload
+                ref="relatedMaterialsUploadRef"
+                :limit="1"
+                accept=".pdf"
+                :auto-upload="false"
+                :show-file-list="true"
+                :action="relatedMaterialsUpload.url"
+                :headers="relatedMaterialsUpload.headers"
+                :before-upload="handleBeforeUpload"
+                :on-success="handleUploadOnsuccess"
+                :on-change="handleUploadOnchange"
+                :on-remove="handleUploadOnRemove"
+                :on-exceed="handleUploadOnExceed"
+                class="orgrelationchange-dialog-relatedmaterialsupload"
+              >
+                <div class="relatedmaterialsupload-content">
+                  <i class="el-icon-plus" />
+                  上传文件，格式：PDF
+                </div>
+              </el-upload>
+              <div
+                v-if="relatedMaterialsUpload.isUploadSuccess"
+                class="fl attachment-addr"
+                @click="handleRelatedMaterialsUploadUrlClick"
+              >
+                <div>文件上传成功地址：</div>
+                <div>{{ orgRelationChangeObj.form.bannerUrl }}</div>
+              </div>
+              <el-button
+                v-if="relatedMaterialsUpload.isSelect && !relatedMaterialsUpload.isUploadSuccess"
+                type="primary"
+                size="small"
+                class="fl"
+                @click="submitRelatedMaterialsUpload"
+              >上传文件</el-button>
+              <el-button
+                v-if="relatedMaterialsUpload.isSelect"
+                type="info"
+                size="small"
+                class="fl"
+                @click="removeRelatedMaterialsUpload"
+              >移除文件</el-button>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="说明：" prop="email">
+              <el-input
+                v-model="orgRelationChangeObj.form.email"
+                type="textarea"
+                :autosize="{ minRows: 4}"
+                placeholder="请输入说明"
+                clearable
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="orgRelationChangeSubmitForm">确 定</el-button>
+        <el-button @click="orgRelationChangeCancelClick">取 消</el-button>
+      </div>
+    </el-dialog>
+
+    <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>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Fullpartymember",
+  components: {
+    'vue-pdf-dialog': () => import('@/components/VuePdfDialog')
+  },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 列表样式
+      listActiveType: 'CARDLIST',
+      // 性别选项列表
+      sexOptions: [],
+
+      // 查询条件
+      queryParams: {
+        pageNum: 0,
+        pageSize: 10
+      },
+      // 数据总条数
+      total: 10,
+      // 表格列表
+      list: [1],
+      orgRelationChangeObj: {
+        open: false,
+        form: {},
+        rules: {
+
+        }
+      },
+      orgRelationChangeTypeOptions: [],
+      relatedMaterialsUpload: {
+        isSelect: false,
+        isUploadSuccess: false,
+        isOnProgress: false,
+        url: `${this.baseApiUrl}/file/upload`,
+        headers: { Authorization: 'Bearer ' + this.getToken() }
+      },
+      pdfDialogVisible: false
+    };
+  },
+  created() {
+    this.initData();
+  },
+  methods: {
+    /** 初始化数据 */
+    async initData() {
+      this.loading = true;
+      await this.getMainOptions();
+      this.getList();
+    },
+    /** 获取表格数据 */
+    getList() {
+      this.loading = false;
+    },
+    /**
+     * 获取主要选项列表
+     */
+    async getMainOptions() {
+      // 性别选项列表
+      await this.getDicts('sys_user_sex').then(response => {
+        this.sexOptions = response?.data || [];
+      });
+    },
+    /**
+     * 获取次要选项列表
+     */
+    async getSubOptions() {
+      // 组织关系变更类型列表
+      await this.getDicts('org_relation_change_type').then(response => {
+        this.orgRelationChangeTypeOptions = response?.data || [];
+      });
+    },
+    /**
+     * 卡片列表图标事件
+     */
+    handleCardListClick() {
+      this.listActiveType = 'CARDLIST';
+    },
+    /**
+     * 表格列表图标事件
+     */
+    handleTableListClick() {
+      this.listActiveType = 'TABLELIST';
+    },
+    /**
+     * 搜索按钮事件
+     */
+    handleQueryClick() {
+
+    },
+    /**
+     * 重置按钮事件
+     */
+    resetQueryClick() {
+
+    },
+    /**
+     * 新增按钮事件
+     */
+    handleAddClick() {
+
+    },
+    /**
+     * 转入按钮事件
+     */
+    handleTransferInClick() {
+
+    },
+    /**
+     * 立即处理按钮事件
+     */
+    handleImmediateProcessingClick() {
+
+    },
+    /**
+     * 查看资料按钮事件
+     */
+    handleViewMaterialClick() {
+
+    },
+    /**
+     * 组织关系变更事件
+     */
+    async handleOrgRelationChangeClick() {
+      await this.getSubOptions();
+
+      this.relatedMaterialsUpload = {
+        ...this.relatedMaterialsUpload,
+        isSelect: false,
+        isUploadSuccess: false
+      };
+      this.orgRelationChangeObj.open = true;
+    },
+    /**
+     * 组织关系变更对话框确定按钮事件
+     */
+    orgRelationChangeSubmitForm() {
+    },
+    /**
+     * 组织关系变更对话框取消按钮事件
+     */
+    orgRelationChangeCancelClick() {
+      this.orgRelationChangeObj.open = false;
+      this.relatedMaterialsUpload = {
+        ...this.relatedMaterialsUpload,
+        isSelect: false,
+        isUploadSuccess: false,
+        isOnProgress: false
+      };
+      this.orgRelationChangeObj.form = {};
+      this.resetForm("orgRelationChangeFormRef");
+    },
+    /**
+     * 相关材料PDF文件上传url点击事件
+     */
+    handleRelatedMaterialsUploadUrlClick() {
+      this.pdfDialogVisible = true;
+    },
+    /**
+     * 相关材料PDF文件上传预处理
+     */
+    handleBeforeUpload(file) {
+      if (file.type.indexOf('application/pdf') === -1) {
+        this.$refs.relatedMaterialsUploadRef.clearFiles();
+        this.msgError('文件格式错误，请上传类型格式为PDF的文件！');
+        return;
+      }
+    },
+    /**
+     * 相关材料PDF文件上传成功处理
+     */
+    handleUploadOnsuccess(response, file, fileList) {
+      // 校验封面图片是否上传成功
+      if (response.code !== 200) {
+        this.$refs.relatedMaterialsUploadRef?.clearFiles?.();
+        this.relatedMaterialsUpload.isSelect = false;
+        this.relatedMaterialsUpload.isUploadSuccess = false;
+        this.msgError('上传PDF文件失败，请重新选择PDF文件上传！');
+        return;
+      }
+
+      // 绑定封面图片数据
+      this.orgRelationChangeObj.form.bannerUrl = response?.data?.url;
+      this.relatedMaterialsUpload.isUploadSuccess = true;
+
+      // 判断是否继续操作
+      if (this.relatedMaterialsUpload.isOnProgress) {
+        this.relatedMaterialsUpload.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.relatedMaterialsUploadRef.clearFiles();
+          this.relatedMaterialsUpload.isSelect = false;
+          this.msgError('文件格式错误，请上传类型格式为PDF的文件！');
+          return;
+        }
+        this.relatedMaterialsUpload.isSelect = true;
+        this.relatedMaterialsUpload.isUploadSuccess = false;
+      }
+    },
+    /**
+     * 提交上传相关材料PDF文件
+     */
+    submitRelatedMaterialsUpload() {
+      if (!this.relatedMaterialsUpload.isSelect) { return; }
+      this.$confirm('确定上传操作吗？', '提示', {
+        confirmButtonText: '确定 ',
+        cancelButtonText: '取消 ',
+        type: 'info'
+      }).then(() => {
+        this.$refs.relatedMaterialsUploadRef?.submit?.();
+      }).catch(() => {
+        this.msgInfo('您已取消上传操作！');
+      });
+    },
+    /**
+     * 移除选择相关材料PDF文件
+     */
+    removeRelatedMaterialsUpload() {
+      this.orgRelationChangeObj.form.bannerUrl = '';
+      this.$refs.relatedMaterialsUploadRef.clearFiles();
+      this.relatedMaterialsUpload.isUploadSuccess = false;
+      this.relatedMaterialsUpload.isSelect = false;
+    },
+    /**
+     * 相关材料PDF文件列表移除文件时的钩子
+     */
+    handleUploadOnRemove(file, fileList) {
+      this.orgRelationChangeObj.form.bannerUrl = '';
+      this.relatedMaterialsUpload.isUploadSuccess = false;
+      this.relatedMaterialsUpload.isSelect = false;
+    },
+    /**
+     * 相关材料PDF文件超出个数限制时的钩子
+     */
+    handleUploadOnExceed(files, fileList) {
+      this.msgWarning(`只允许上传单个相关材料PDF文件`);
+    },
+    /**
+     * PDF文件预览对话框关闭事件
+     */
+    handlePdfCloseClick(visible = false) {
+      this.pdfDialogVisible = visible;
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.fullpartymember {
+  &-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 15px;
+    width: 100%;
+    padding: 10px 20px;
+    background-color: #ffffff;
+    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;
+        }
+      }
+    }
+
+    &-btn {
+      display: flex;
+      align-items: center;
+
+      div {
+        &:first-child {
+          margin-right: 15px;
+          height: 37px;
+          font-size: 16px;
+          font-weight: 400;
+          color: #646464;
+          line-height: 37px;
+          letter-spacing: 1px;
+        }
+      }
+
+      &-card {
+        margin-right: 10px;
+        font-size: 26px;
+        cursor: pointer;
+        color: #909090;
+
+        &.is-active {
+          color: #e53333;
+        }
+      }
+
+      &-list {
+        font-size: 28px;
+        cursor: pointer;
+        color: #909090;
+
+        &.is-active {
+          color: #e53333;
+        }
+      }
+    }
+  }
+
+  &-main {
+    padding: 20px 20px 72px;
+    min-height: 660px;
+    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;
+
+    &-list {
+      position: relative;
+      margin: 20px 0 10px;
+      width: 100%;
+
+      .list-row {
+        position: relative;
+        width: 100%;
+
+        .list-cell {
+          float: left;
+          margin: 0 10px 20px 10px;
+          // overflow: hidden;
+          width: 203px;
+          height: 283px;
+          background: #de0010;
+
+          &-name {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin-top: -5px;
+            width: 100%;
+            height: 45px;
+            font-size: 20px;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 28px;
+            opacity: 0.8;
+          }
+
+          &-img {
+            img {
+              width: 203px;
+              height: 239px;
+            }
+
+            .list-cell-shield {
+              display: none;
+              position: absolute;
+              margin-top: -243px;
+              width: 203px;
+              height: 239px;
+              background-image: none;
+              background-color: rgba(0, 0, 0, 0.3);
+
+              &-content {
+                padding: 20px 30px;
+                width: 100%;
+
+                .shield-content-label {
+                  width: 100%;
+                  font-weight: 400;
+                  font-size: 20px;
+                  color: #ffffff;
+                }
+
+                .shield-content-datetime {
+                  margin: 20px 0 40px;
+                  width: 100%;
+                  font-weight: 400;
+                  font-size: 18px;
+                  color: #ffffff;
+                }
+
+                .shield-content-relation {
+                  display: flex;
+                  justify-content: center;
+                  align-items: center;
+                  margin-top: 20px;
+                  width: 100%;
+                  font-weight: 400;
+                  font-size: 14px;
+                  color: #ffffff;
+                  cursor: pointer;
+                }
+              }
+            }
+
+            &:hover .list-cell-shield {
+              display: block;
+            }
+          }
+        }
+      }
+
+      &-nodata {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        height: 386px;
+        border: 1px solid #b5b5b5;
+        border-radius: 5px;
+        color: #747474;
+        opacity: 0.8;
+      }
+    }
+  }
+}
+
+.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

@@ -0,0 +1,9 @@
+<!--
+ * @Description: 
+ * @Author: Rockery
+ * @Date: 2021-12-10 10:45:41
+ * @LastEditors: Rockery
+ * @LastEditTime: 2021-12-10 10:45:42
+ * @FilePath: \party_construct_web\src\views\PartyBuildingMgr\OrgRelationship\OrgRelationshipIndex.vue
+ * @Copyright: Copyright (c) 2016~2021 Rockery(1113269755@qq.com)
+-->

src/views/PartyBuildingMgr/PartyMemberDevelop/PartyMemberDevelopIndex.vue

@@ -0,0 +1,328 @@
+<!--
+ * @Description: 党建管理 => 党员发展管理
+ * @Author: Rockery
+ * @Date: 2021-12-10 10:37:47
+ * @LastEditors: Rockery
+ * @LastEditTime: 2021-12-10 17:25:59
+ * @FilePath: \party_construct_web\src\views\PartyBuildingMgr\PartyMemberDevelop\PartyMemberDevelopIndex.vue
+ * @Copyright: Copyright (c) 2016~2021 Rockery(1113269755@qq.com)
+-->
+
+<template>
+  <div class="app-container partymemberdevelop">
+    <div class="develop-main">
+      <el-row :gutter="10">
+        <el-col :span="24">
+          <div class="develop-main-title">
+            <div>
+              <img
+                :src="require('@/assets/logo/home-main-title-logo.png')"
+                @error="imgViewerOnerror"
+              />
+            </div>
+            <div>党员发展管理</div>
+          </div>
+        </el-col>
+        <el-col :span="24">
+          <el-tabs v-model="tabsModel" class="develop-main-tabs" @tab-click="handleTabsClick">
+            <el-tab-pane label="一、申请入党" name="APPLY"></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>
+
+        <div v-loading="loading">
+          <el-col :span="24" class="mt10">
+            <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
+              <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>
+              <template v-if="tabsModel !== 'DIDNOTPASS'">
+                <el-form-item prop="status">
+                  <el-select
+                    v-model="queryParams.status"
+                    placeholder="请选择待更新节点"
+                    clearable
+                    size="small"
+                    style="width: 100%;"
+                  >
+                    <el-option
+                      v-for="dict in statusOptions"
+                      :key="dict.dictValue"
+                      :label="dict.dictLabel"
+                      :value="dict.dictValue"
+                    />
+                  </el-select>
+                </el-form-item>
+              </template>
+              <el-form-item>
+                <el-button
+                  v-hasPermi="['partybuildingmgr:partymemberdevelop:query']"
+                  type="primary"
+                  icon="el-icon-search"
+                  @click="handleQueryClick"
+                >搜索</el-button>
+                <el-button
+                  v-hasPermi="['partybuildingmgr:partymemberdevelop:reset']"
+                  icon="el-icon-refresh"
+                  @click="resetQueryClick"
+                >重置</el-button>
+              </el-form-item>
+              <template v-if="tabsModel === 'APPLY'">
+                <el-form-item class="fr" style="margin-right: 0;">
+                  <el-button
+                    v-hasPermi="['partybuildingmgr:partymemberdevelop:add']"
+                    type="rocpartyprimarybtn"
+                    icon="el-icon-plus"
+                    @click="handleAddClick"
+                  >新增</el-button>
+                </el-form-item>
+              </template>
+              <template v-else-if="tabsModel === 'TAKEOVER'">
+                <el-form-item class="fr" style="margin-right: 0;">
+                  <el-button
+                    v-hasPermi="['partybuildingmgr:partymemberdevelop:transferin']"
+                    type="rocpartyprimaryplainbtn"
+                    icon="el-icon-circle-plus-outline"
+                    @click="handleTransferInClick"
+                  >预备党员转入</el-button>
+                </el-form-item>
+              </template>
+              <template v-else></template>
+            </el-form>
+          </el-col>
+          <el-col :span="24">
+            <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" :show-overflow-tooltip="true" />
+              <el-table-column
+                label="递交入党申请时间"
+                align="center"
+                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-if="tabsModel === 'DIDNOTPASS'"
+                    v-hasPermi="['partybuildingmgr:partymemberdevelop:reactivate']"
+                    size="mini"
+                    type="text"
+                    icon="el-icon-check"
+                    style="color: #de0010;"
+                    @click="handleReactivateClick(scope.row)"
+                  >重新激活</el-button>
+                  <el-button
+                    v-hasPermi="['partybuildingmgr:partymemberdevelop:edit']"
+                    size="mini"
+                    type="text"
+                    icon="el-icon-edit"
+                    style="color: #67c23a;"
+                    @click="handleUpdateClick(scope.row)"
+                  >更新</el-button>
+                  <el-button
+                    v-hasPermi="['partybuildingmgr:partymemberdevelop: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>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Partymemberdevelop",
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 显示搜索条件
+      showSearch: true,
+      tabsModel: 'APPLY',
+      statusOptions: [],
+      total: 10,
+      queryParams: {
+        pageNum: 0,
+        pageSize: 10
+      },
+      list: [
+        {
+          name: '张三'
+        },
+        {
+          name: '李四'
+        }
+      ]
+    };
+  },
+  created() {
+    this.initData();
+  },
+  methods: {
+    /** 初始化数据 */
+    initData() {
+      this.getList();
+    },
+    /** 获取表格数据 */
+    getList() {
+      this.loading = false;
+    },
+    /** 标签页点击事件 */
+    handleTabsClick(targetName) {
+      console.log('targetName==', targetName.name);
+      this.getList();
+    },
+    /** 搜索按钮事件 */
+    handleQueryClick() {
+
+    },
+    /** 重置按钮事件 */
+    resetQueryClick() {
+
+    },
+    /** 新增按钮事件 */
+    handleAddClick() {
+
+    },
+    /** 预备党员转入按钮事件 */
+    handleTransferInClick() {
+
+    },
+    /** 重新激活按钮事件 */
+    handleReactivateClick(row) {
+
+    },
+    /** 更新按钮事件 */
+    handleUpdateClick(row) {
+
+    },
+    /** 详情按钮事件 */
+    handleViewClick(row) {
+
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.partymemberdevelop {
+  .develop-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 {
+        .develop-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;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/PartyBuildingMgr/SituationDesc/SituationDescIndex.vue

@@ -0,0 +1,279 @@
+<!--
+ * @Description: 党建管理 => 情况说明管理
+ * @Author: Rockery
+ * @Date: 2021-12-10 10:45:58
+ * @LastEditors: Rockery
+ * @LastEditTime: 2021-12-10 17:19:33
+ * @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>
+            <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-row>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Situationdesc",
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      statusOptions: [],
+      total: 10,
+      queryParams: {
+        pageNum: 0,
+        pageSize: 10
+      },
+      list: [
+        {
+          name: '张三'
+        },
+        {
+          name: '李四'
+        }
+      ]
+    };
+  },
+  created() {
+    this.initData();
+  },
+  methods: {
+    /** 初始化数据 */
+    initData() {
+      this.getList();
+    },
+    /** 获取表格数据 */
+    getList() {
+      this.loading = false;
+    },
+    /** 搜索按钮事件 */
+    handleQueryClick() {
+
+    },
+    /** 重置按钮事件 */
+    resetQueryClick() {
+
+    },
+    /** 新增按钮事件 */
+    handleAddClick() {
+
+    },
+    /** 详情按钮事件 */
+    handleViewClick(row) {
+
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.situationdesc {
+  .situationdesc-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 {
+        .situationdesc-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;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/index.vue

@@ -15,8 +15,8 @@
                   @error="imgViewerOnerror"
                 />
               </div>
-              <div class="head-left-middle-name">张旭光</div>
-              <div class="head-left-middle-role">管理员</div>
+              <div class="head-left-middle-name">{{ $store.getters.nickName }}</div>
+              <div class="head-left-middle-role">{{ $store.getters.roleName }}</div>
             </div>
           </div>
         </el-col>
@@ -106,7 +106,7 @@
                     </div>
                     <div class="home-main-list_card-status">已逾期2天</div>
                     <div class="home-main-list_card-btn">
-                      <el-button type="danger">立即处理</el-button>
+                      <el-button type="rocpartyprimarybtn">立即处理</el-button>
                     </div>
                   </div>
                 </el-col>
@@ -152,6 +152,7 @@ export default {
   methods: {
     /** 初始化数据 */
     initData() {
+      console.log('Object===', this.$store.getters.nickName);
     }
   }
 };
@@ -329,11 +330,11 @@ export default {
   }
 
   &-main {
-    padding: 20px 20px;
+    padding: 20px 20px 72px;
     min-height: 660px;
     background: url("../assets/images/home-head-img.png"), #ffffff;
     background-size: 67px 67px, cover;
-    background-position: right 20px bottom 30px, center;
+    background-position: right 20px bottom 5px, center;
     background-repeat: no-repeat, no-repeat;
     border-radius: 10px;