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

src/api/PartyBuildingMgr/FullPartyMember.js

@@ -0,0 +1,47 @@
+import request from '@/utils/request';
+import { praseStrEmpty } from "@/utils/ruoyi";
+
+/**
+ * 查询列表
+ */
+export function listFullPartyMember(query) {
+  return request({
+    url: '/town/partymember/list',
+    method: 'get',
+    params: query
+  });
+}
+
+// 新增
+export function addFullPartyMember(data) {
+  return request({
+    url: '/town/partymember',
+    method: 'post',
+    data: data
+  });
+}
+
+// 修改用户
+export function updateFullPartyMember(data) {
+  return request({
+    url: '/town/partymember',
+    method: 'put',
+    data: data
+  });
+}
+
+// 查询详细
+export function viewFullPartyMember(id) {
+  return request({
+    url: '/town/partymember/' + praseStrEmpty(id),
+    method: 'get'
+  });
+}
+
+// 删除
+export function delFullPartyMember(ids) {
+  return request({
+    url: '/town/partymember/' + ids,
+    method: 'delete'
+  })
+}

src/components/RocPdfFileUpload/index.vue

@@ -0,0 +1,295 @@
+<!--
+ * @Description: 单个附件文件上传组件
+ * @Author: Rockery
+ * @Date: 2021-12-20 09:16:41
+ * @LastEditors: Rockery
+ * @LastEditTime: 2021-12-20 15:29:05
+ * @FilePath: \party_construct_web\src\components\RocPdfFileUpload\index.vue
+ * @Copyright: Copyright (c) 2016~2021 Rockery(1113269755@qq.com)
+-->
+
+<template>
+  <div class="rocpdffileupload">
+    <div class="rocpdffileupload-attachment">
+      <el-upload
+        ref="rocPdfFileUploadRef"
+        :limit="1"
+        accept=".pdf"
+        :auto-upload="false"
+        :show-file-list="true"
+        :action="actionUrl"
+        :headers="headers"
+        :before-upload="handleRocPdfFileUploadBeforeUpload"
+        :on-success="handleRocPdfFileUploadOnsuccess"
+        :on-change="handleRocPdfFileUploadOnchange"
+        :on-remove="handleRocPdfFileUploadOnRemove"
+        :on-exceed="handleRocPdfFileUploadOnExceed"
+        class="rocpdffileupload-attachment-fileupload"
+      >
+        <div class="rocpdffileupload-attachment-fileupload-content">
+          <i class="el-icon-plus" />
+          上传文件，格式：PDF
+        </div>
+      </el-upload>
+      <div
+        v-if="isUploadSuccess"
+        class="fl rocpdffileupload-attachment-addr"
+        @click="handleRocPdfFileUploadUrlClick"
+      >
+        <div>文件上传成功地址：</div>
+        <div>{{ successUrl }}</div>
+      </div>
+      <el-button
+        v-if="isSelect && !isUploadSuccess"
+        type="primary"
+        size="small"
+        @click="submitRocPdfFileUploadClick"
+      >上传文件</el-button>
+      <el-button v-if="isSelect" type="info" size="small" @click="removeRocPdfFileUploadClick">移除文件</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "Rocpdffileupload",
+  props: {
+    // 值
+    value: {
+      type: String,
+      default: ""
+    },
+    // PDF文件上传地址
+    uploadUrl: {
+      type: String,
+      default: ''
+    },
+    // 请求头对象
+    uploadHeaders: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    },
+    // 上传文件标题
+    uploadFileTitle: {
+      type: String,
+      default: ''
+    },
+  },
+  data() {
+    return {
+      // 是否选择PDF文件
+      isSelect: false,
+      // 是否等待上传PDF文件
+      isOnProgress: false,
+      // 是否上传PDF文件成功
+      isUploadSuccess: false,
+      // PDF文件上传成功数据对象
+      successUrl: '',
+      // PDF文件上传成功数据对象
+      successResp: {}
+    };
+  },
+  computed: {
+    // PDF文件上传地址
+    actionUrl() {
+      return this.uploadUrl;
+    },
+    // 请求头对象
+    headers() {
+      return this.uploadHeaders;
+    },
+    // 上传文件标题
+    fileTitle() {
+      if (this.uploadFileTitle) {
+        return `文件【${this.uploadFileTitle}】`;
+      }
+
+      return '文件';
+    },
+  },
+  created() {
+    this.initData();
+  },
+  mounted() {
+  },
+  methods: {
+    /**
+    * 初始化数据
+    */
+    async initData() {
+    },
+    /**
+     * 相关材料PDF文件上传预处理
+     */
+    handleRocPdfFileUploadBeforeUpload(file) {
+      if (file.type.indexOf('application/pdf') === -1) {
+        this.$refs.rocPdfFileUploadRef.clearFiles();
+        this.msgError(`${this.fileTitle}格式错误，请上传类型格式为PDF的文件！`);
+        return;
+      }
+    },
+    /**
+     * 相关材料PDF文件上传成功处理
+     */
+    handleRocPdfFileUploadOnsuccess(response, file, fileList) {
+      // 校验封面图片是否上传成功
+      if (response.code !== 200) {
+        this.$refs.rocPdfFileUploadRef?.clearFiles?.();
+        this.isSelect = false;
+        this.isUploadSuccess = false;
+        this.msgError(`上传PDF${this.fileTitle}失败，请重新选择PDF文件上传！`);
+        return;
+      }
+
+      // 绑定封面图片数据
+      this.successUrl = response?.data?.url;
+
+      // PDF文件上传成功数据对象
+      this.successResp = response?.data;
+      this.$emit("input", response?.data?.url);
+      this.isUploadSuccess = true;
+
+      // 判断是否继续操作
+      if (this.isOnProgress) {
+        this.isOnProgress = false;
+        this.$emit("wait-upload-success", this.successResp);
+      } else {
+        this.$alert(`PDF${this.fileTitle}上传成功！`, '上传结果', { dangerouslyUseHTMLString: true });
+      }
+    },
+    /**
+     * 相关材料PDF文件状态改变
+     */
+    handleRocPdfFileUploadOnchange(file, fileList) {
+      if (file.status === 'ready') {
+        if (((file.raw || {}).type || '').indexOf('application/pdf') === -1) {
+          this.$refs.rocPdfFileUploadRef.clearFiles();
+          this.isSelect = false;
+          this.msgError(`${this.fileTitle}格式错误，请上传类型格式为PDF的文件！`);
+          return;
+        }
+        this.isSelect = true;
+        this.isUploadSuccess = false;
+      }
+    },
+    /**
+     * 相关材料PDF文件列表移除文件时的钩子
+     */
+    handleRocPdfFileUploadOnRemove(file, fileList) {
+      this.successResp = {};
+      this.successUrl = '';
+      this.isUploadSuccess = false;
+      this.isSelect = false;
+      this.$emit("input", "");
+    },
+    /**
+     * 相关材料PDF文件超出个数限制时的钩子
+     */
+    handleRocPdfFileUploadOnExceed(files, fileList) {
+      this.msgWarning(`只允许上传单个PDF${this.fileTitle}`);
+    },
+    /**
+     * 提交上传相关材料PDF文件
+     */
+    submitRocPdfFileUploadClick() {
+      if (!this.isSelect) { return; }
+      this.$confirm(`确定上传PDF${this.fileTitle}操作吗？`, '提示', {
+        confirmButtonText: '确定 ',
+        cancelButtonText: '取消 ',
+        type: 'info'
+      }).then(() => {
+        this.$refs.rocPdfFileUploadRef?.submit?.();
+      }).catch(() => {
+        this.msgInfo('您已取消上传操作！');
+      });
+    },
+    /**
+     * 移除选择相关材料PDF文件
+     */
+    removeRocPdfFileUploadClick() {
+      this.successResp = {};
+      this.successUrl = '';
+      this.$refs.rocPdfFileUploadRef.clearFiles();
+      this.isUploadSuccess = false;
+      this.isSelect = false;
+      this.$emit("input", "");
+    },
+    /**
+     * PDF文件地址单击事件
+     */
+    handleRocPdfFileUploadUrlClick() {
+      this.$emit("pdf-url-incident", this.successResp);
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.rocpdffileupload {
+  .rocpdffileupload-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;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/components/UpdatePartyDevelop/scss/UpdatePartyDevelop.scss

@@ -0,0 +1,533 @@
+.updatepartydevelop {
+  &-head {
+    margin-bottom: 20px;
+    width: 100%;
+    padding: 15px 20px;
+    background: url("../../assets/images/home-head-img.png"), #ffffff;
+    background-size: 67px 67px, cover;
+    background-position: right 5px bottom 0px, center;
+    background-repeat: no-repeat, no-repeat;
+    border-radius: 10px;
+
+    &-title {
+      display: flex;
+      align-items: center;
+
+      div {
+        &:first-child {
+          height: 37px;
+          line-height: 37px;
+        }
+
+        &:last-child {
+          margin-left: 15px;
+          height: 37px;
+          font-size: 26px;
+          font-weight: 400;
+          color: #4f4f4f;
+          line-height: 37px;
+          letter-spacing: 1px;
+        }
+
+        img {
+          width: 34px;
+          height: 34px;
+        }
+      }
+    }
+  }
+
+  &-title {
+    display: flex;
+    align-items: center;
+
+    div {
+      &:first-child {
+        height: 37px;
+        line-height: 37px;
+      }
+
+      &:last-child {
+        margin-left: 15px;
+        height: 37px;
+        font-size: 26px;
+        font-weight: 400;
+        color: #4f4f4f;
+        line-height: 37px;
+        letter-spacing: 1px;
+      }
+
+      img {
+        width: 34px;
+        height: 34px;
+      }
+    }
+  }
+
+  &-line {
+    width: 100%;
+    height: 1px;
+    background: #d8dce5;
+    margin-bottom: 15px;
+  }
+
+  &-basic {
+    padding: 20px 20px 50px;
+    margin-bottom: 20px;
+    // margin: 87px 0 20px 0;
+    background: url("../../assets/images/home-head-img.png"), #ffffff;
+    background-size: 67px 67px, cover;
+    background-position: right 5px bottom 5px, center;
+    background-repeat: no-repeat, no-repeat;
+    border-radius: 10px;
+
+    ::v-deep {
+      .el-form-item__content {
+        .area-cascader-wrap {
+          .area-select {
+            height: 36px;
+            .area-selected-trigger {
+              padding: 0 25px 0 15px;
+            }
+          }
+
+          .area-select.large {
+            width: 100%;
+          }
+        }
+      }
+    }
+  }
+
+  &-situation {
+    padding: 20px 20px 72px;
+    margin-bottom: 20px;
+    background: url("../../assets/images/home-head-img.png"), #ffffff;
+    background-size: 67px 67px, cover;
+    background-position: right 5px bottom 5px, center;
+    background-repeat: no-repeat, no-repeat;
+    border-radius: 10px;
+
+    &-tabs.el-tabs {
+      margin-top: 20px;
+
+      ::v-deep {
+        .el-tabs__item {
+          font-size: 18px;
+          font-weight: 500;
+          color: #4f4f4f;
+          opacity: 0.9;
+        }
+
+        .el-tabs__active-bar {
+          background-color: #de0010;
+        }
+
+        .el-tabs__item.is-active {
+          color: #de0010;
+          background: #f9e9ea;
+        }
+      }
+    }
+
+    .roc-tabpane {
+      display: block;
+      width: 100%;
+      min-height: 600px;
+
+      &-head {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        height: 94px;
+
+        .tabpane-head-left {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 94px;
+          height: 94px;
+          border: 4px solid #979797;
+          border-radius: 50%;
+
+          &.is-active {
+            border: 4px solid #de0010;
+          }
+
+          &-title {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 78px;
+            height: 78px;
+            background: #979797;
+            border-radius: 50%;
+            font-size: 30px;
+            font-weight: 800;
+            color: #ffffff;
+            line-height: 42px;
+            letter-spacing: 1px;
+
+            &.is-active {
+              background: #de0010;
+            }
+          }
+        }
+        .tabpane-head-right {
+          margin-left: 15px;
+          height: 50px;
+          font-size: 36px;
+          font-weight: 400;
+          color: #111111;
+          line-height: 50px;
+          letter-spacing: 1px;
+        }
+      }
+
+      &-line {
+        margin-left: 46px;
+        width: 2px;
+        height: 46px;
+        border: 2px solid #979797;
+
+        &.is-active {
+          border: 2px solid #de0010;
+        }
+      }
+
+      &-step {
+        width: 100%;
+
+        &-item {
+          display: flex;
+          width: 100%;
+
+          .step-item-left {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-left: 16px;
+            width: 62px;
+            height: 62px;
+            border: 2px solid #979797;
+            border-radius: 50%;
+            font-size: 36px;
+            font-weight: 400;
+            color: #979797;
+            line-height: 50px;
+            letter-spacing: 1px;
+
+            &.is-active {
+              border: 2px solid #de0010;
+              color: #de0010;
+            }
+          }
+
+          .step-item-right {
+            flex: 1;
+            margin-left: 10px;
+            padding-bottom: 10px;
+
+            &-title {
+              margin-top: 10px;
+              margin-bottom: 8px;
+              height: 28px;
+              font-size: 20px;
+              font-weight: 400;
+              color: #111111;
+              line-height: 28px;
+            }
+
+            &-form {
+              ::v-deep {
+                .el-form-item.step-form-item {
+                  margin-bottom: 10px;
+                }
+
+                .el-form-item__label {
+                  padding: 0;
+                  text-align: left;
+                }
+              }
+            }
+          }
+        }
+
+        &-first_default,
+        &-second_default {
+          position: absolute;
+          margin-top: -64px;
+          margin-left: 46px;
+          width: 2px;
+          height: 64px;
+          border: 2px solid #979797;
+
+          &.is-active {
+            border: 2px solid #de0010;
+          }
+        }
+
+        &-first_nodefault,
+        &-second_nodefault {
+          position: absolute;
+          margin-top: -122px;
+          margin-left: 46px;
+          width: 2px;
+          height: 122px;
+          border: 2px solid #979797;
+
+          &.is-active {
+            border: 2px solid #de0010;
+          }
+        }
+
+        &-third_default {
+          position: absolute;
+          margin-top: -64px;
+          margin-left: 46px;
+          width: 2px;
+          height: 165px;
+          border: 2px solid #979797;
+
+          &.is-active {
+            border: 2px solid #de0010;
+          }
+        }
+
+        &-fourth_default {
+          position: absolute;
+          margin-top: -108px;
+          margin-left: 46px;
+          width: 2px;
+          height: 108px;
+          border: 2px solid #979797;
+
+          &.is-active {
+            border: 2px solid #de0010;
+          }
+        }
+
+        &-fourth_nodefault {
+          position: absolute;
+          margin-top: -200px;
+          margin-left: 46px;
+          width: 2px;
+          height: 200px;
+          border: 2px solid #979797;
+
+          &.is-active {
+            border: 2px solid #de0010;
+          }
+        }
+
+        &-fifth_default {
+          position: absolute;
+          margin-top: -257px;
+          margin-left: 46px;
+          width: 2px;
+          height: 257px;
+          border: 2px solid #979797;
+
+          &.is-active {
+            border: 2px solid #de0010;
+          }
+        }
+
+        &-fifth_nodefault {
+          position: absolute;
+          margin-top: -395px;
+          margin-left: 46px;
+          width: 2px;
+          height: 395px;
+          border: 2px solid #979797;
+
+          &.is-active {
+            border: 2px solid #de0010;
+          }
+        }
+
+        &-sixth_default {
+          position: absolute;
+          margin-top: -52px;
+          margin-left: 46px;
+          width: 2px;
+          height: 52px;
+          border: 2px solid #979797;
+
+          &.is-active {
+            border: 2px solid #de0010;
+          }
+        }
+
+        &-sixth_nodefault {
+          position: absolute;
+          margin-top: -97px;
+          margin-left: 46px;
+          width: 2px;
+          height: 97px;
+          border: 2px solid #979797;
+
+          &.is-active {
+            border: 2px solid #de0010;
+          }
+        }
+
+        &-seventh_default {
+          position: absolute;
+          margin-top: -110px;
+          margin-left: 46px;
+          width: 2px;
+          height: 128px;
+          border: 2px solid #979797;
+
+          &.is-active {
+            border: 2px solid #de0010;
+          }
+        }
+
+        &-seventh_nodefault {
+          position: absolute;
+          margin-top: -202px;
+          margin-left: 46px;
+          width: 2px;
+          height: 222px;
+          border: 2px solid #979797;
+
+          &.is-active {
+            border: 2px solid #de0010;
+          }
+        }
+
+        &-eighth_default {
+          position: absolute;
+          margin-top: -64px;
+          margin-left: 46px;
+          width: 2px;
+          height: 64px;
+          border: 2px solid #979797;
+
+          &.is-active {
+            border: 2px solid #de0010;
+          }
+        }
+
+        &-eighth_nodefault {
+          position: absolute;
+          margin-top: -122px;
+          margin-left: 46px;
+          width: 2px;
+          height: 122px;
+          border: 2px solid #979797;
+
+          &.is-active {
+            border: 2px solid #de0010;
+          }
+        }
+
+        &-ninth_default {
+          position: absolute;
+          margin-top: -98px;
+          margin-left: 46px;
+          width: 2px;
+          height: 98px;
+          border: 2px solid #979797;
+
+          &.is-active {
+            border: 2px solid #de0010;
+          }
+        }
+
+        &-ninth_nodefault {
+          position: absolute;
+          margin-top: -144px;
+          margin-left: 46px;
+          width: 2px;
+          height: 144px;
+          border: 2px solid #979797;
+
+          &.is-active {
+            border: 2px solid #de0010;
+          }
+        }
+
+        &-tenth_default {
+          position: absolute;
+          margin-top: -212px;
+          margin-left: 46px;
+          width: 2px;
+          height: 212px;
+          border: 2px solid #979797;
+
+          &.is-active {
+            border: 2px solid #de0010;
+          }
+        }
+
+        &-tenth_nodefault {
+          position: absolute;
+          margin-top: -350px;
+          margin-left: 46px;
+          width: 2px;
+          height: 350px;
+          border: 2px solid #979797;
+
+          &.is-active {
+            border: 2px solid #de0010;
+          }
+        }
+
+        &-eleventh_default {
+          position: absolute;
+          margin-top: -110px;
+          margin-left: 46px;
+          width: 2px;
+          height: 110px;
+          border: 2px solid #979797;
+
+          &.is-active {
+            border: 2px solid #de0010;
+          }
+        }
+
+        &-eleventh_nodefault {
+          position: absolute;
+          margin-top: -202px;
+          margin-left: 46px;
+          width: 2px;
+          height: 202px;
+          border: 2px solid #979797;
+
+          &.is-active {
+            border: 2px solid #de0010;
+          }
+        }
+
+        &-twelfth_default {
+          position: absolute;
+          margin-top: -52px;
+          margin-left: 46px;
+          width: 2px;
+          height: 72px;
+          border: 2px solid #979797;
+
+          &.is-active {
+            border: 2px solid #de0010;
+          }
+        }
+
+        &-twelfth_nodefault {
+          position: absolute;
+          margin-top: -98px;
+          margin-left: 46px;
+          width: 2px;
+          height: 118px;
+          border: 2px solid #979797;
+
+          &.is-active {
+            border: 2px solid #de0010;
+          }
+        }
+      }
+    }
+  }
+}

src/views/PartyBuildingMgr/FullPartyMember/FullPartyMemberIndex.vue

@@ -3,7 +3,7 @@
  * @Author: Rockery
  * @Date: 2021-12-10 10:39:07
  * @LastEditors: Rockery
- * @LastEditTime: 2021-12-16 10:51:58
+ * @LastEditTime: 2021-12-20 16:02:38
  * @FilePath: \party_construct_web\src\views\PartyBuildingMgr\FullPartyMember\FullPartyMemberIndex.vue
  * @Copyright: Copyright (c) 2016~2021 Rockery(1113269755@qq.com)
 -->
@@ -234,7 +234,10 @@
     </template>
     <template v-else-if="pageType == 'ADD'">
       <div class="fullpartymember-addpage">
-        <update-party-develop />
+        <update-party-develop
+          @page-submit="handleAddPageSubmitClick"
+          @page-close="handleAddPageCloseClick"
+        />
       </div>
     </template>
     <template v-else>
@@ -368,6 +371,13 @@
 </template>
 
 <script>
+import {
+  listFullPartyMember,
+  addFullPartyMember,
+  updateFullPartyMember,
+  viewFullPartyMember
+} from "@/api/PartyBuildingMgr/FullPartyMember";
+
 export default {
   name: "Fullpartymember",
   components: {
@@ -420,12 +430,21 @@ export default {
     /** 初始化数据 */
     async initData() {
       this.loading = true;
+      this.listActiveType = 'CARDLIST';
       await this.getMainOptions();
       this.getList();
     },
     /** 获取表格数据 */
     getList() {
-      this.loading = false;
+      this.loading = true;
+      listFullPartyMember(this.queryParams).then(
+        response => {
+          this.list = response.rows || [];
+          this.total = response.total ?? 0;
+          this.loading = false;
+          this.pageType = 'LIST';
+        }
+      );
     },
     /**
      * 获取主要选项列表
@@ -473,7 +492,7 @@ export default {
      * 新增按钮事件
      */
     handleAddClick() {
-
+      this.pageType = 'ADD';
     },
     /**
      * 转入按钮事件
@@ -632,6 +651,18 @@ export default {
      */
     handlePdfCloseClick(visible = false) {
       this.pdfDialogVisible = visible;
+    },
+    /**
+     * 新增页面保存按钮事件
+     */
+    handleAddPageSubmitClick(param) {
+      this.pageType = param;
+    },
+    /**
+     * 新增页面取消按钮事件
+     */
+    handleAddPageCloseClick(param) {
+      this.pageType = param;
     }
   }
 };

src/views/PartyBuildingMgr/SituationDesc/SituationDescIndex.vue

@@ -494,8 +494,8 @@ export default {
       };
     },
     /**
- * 相关材料PDF文件上传url点击事件
- */
+     * 相关材料PDF文件上传url点击事件
+     */
     handleDescFileMaterialsUploadUrlClick() {
       this.pdfDialogVisible = true;
     },

src/views/index.vue

@@ -152,7 +152,6 @@ export default {
   methods: {
     /** 初始化数据 */
     initData() {
-      console.log('Object===', this.$store.getters.nickName);
     }
   }
 };