party_construct_web/src/views/PartyBuildingMgr/PartyMemberDevelop/PartyMemberDevelopIndex.vue

<!--
 * @Description: 党建管理 => 党员发展管理
 * @Author: Rockery
 * @Date: 2021-12-10 10:37:47
 * @LastEditors: Rockery
 * @LastEditTime: 2022-01-07 14:43:25
 * @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">
    <template v-if="pageType == 'LIST'">
      <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="1"></el-tab-pane>
              <el-tab-pane label="二、入党积极分子的确定和考察" name="2"></el-tab-pane>
              <el-tab-pane label="三、发展对象的确定和考察" name="3"></el-tab-pane>
              <el-tab-pane label="四、发展党员的预审" name="4"></el-tab-pane>
              <el-tab-pane label="五、预备党员的接收" name="5"></el-tab-pane>
              <el-tab-pane label="六、预备党员的考察和转正" name="6"></el-tab-pane>
              <el-tab-pane label="未通过" name="7"></el-tab-pane>
            </el-tabs>
          </el-col>

          <div>
            <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 !== '7'">
                  <el-form-item prop="minType">
                    <el-select
                      v-model="queryParams.minType"
                      placeholder="请选择待更新节点"
                      clearable
                      size="small"
                      style="width: 100%;"
                    >
                      <el-option
                        v-for="minTypeOption in minTypeOptions"
                        :key="minTypeOption.value"
                        :label="minTypeOption.label"
                        :value="minTypeOption.value"
                      />
                    </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 === '1'">
                  <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 === '5'">
                  <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
                v-loading="loading"
                :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" />
                <template v-if="tabsModel !== '7'">
                  <el-table-column label="当前待更新节点" prop="flowStatus" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                      <span>{{ nodeDataObj[scope.row.flowStatus] || '—' }}</span>
                    </template>
                  </el-table-column>
                </template>
                <el-table-column
                  label="递交入党申请时间"
                  align="center"
                  prop="applyAddPartyTime"
                  :show-overflow-tooltip="true"
                >
                  <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.applyAddPartyTime, '{y}年{m}月{d}日') || '—' }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="备注" prop="remark" :show-overflow-tooltip="true">
                  <template slot-scope="scope">
                    <span>{{ scope.row.remark || '—' }}</span>
                  </template>
                </el-table-column>
                <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 === '7'"
                      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>
    </template>
    <template v-else-if="pageType == 'ADD'">
      <div class="partymemberdevelop-addpage">
        <div class="partymemberdevelop-addpage-head">
          <div class="partymemberdevelop-addpage-head-title">
            <div>
              <img
                :src="require('@/assets/logo/home-main-title-logo.png')"
                @error="imgViewerOnerror"
              />
            </div>
            <div>党员发展管理</div>
          </div>
        </div>
        <update-party-develop
          :id="currentRow.id"
          :operate-type.sync="operateType"
          @page-submit="handleAddPageSubmitClick"
          @page-close="handleAddPageCloseClick"
        />
      </div>
    </template>
    <template v-else-if="pageType == 'VIEW'">
      <div class="partymemberdevelop-addpage">
        <div class="partymemberdevelop-addpage-head">
          <div class="partymemberdevelop-addpage-head-title">
            <div>
              <img
                :src="require('@/assets/logo/home-main-title-logo.png')"
                @error="imgViewerOnerror"
              />
            </div>
            <div>党员发展管理</div>
          </div>
        </div>
        <party-member-details
          :operate-type.sync="operateType"
          @page-submit="handleAddPageSubmitClick"
          @page-close="handleAddPageCloseClick"
        />
      </div>
    </template>
    <template v-else>
      <div>&nbsp;</div>
    </template>
  </div>
</template>

<script>
import MinTypeOptionObj from './JsonData/MinTypeOptionObj';
import NodeDataObj from './JsonData/NodeDataObj';
import {
  listPartyMemberDevelop
} from "@/api/PartyBuildingMgr/PartyMemberDevelop";

export default {
  name: "Partymemberdevelop",
  components: {
    'update-party-develop': () => import('@/components/UpdatePartyDevelop'),
    'party-member-details': () => import('@/components/PartyMemberDetails')
  },
  data() {
    return {
      // 页面类型
      pageType: 'LIST',
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      tabsModel: '1',
      // 待更新节点选项列表
      minTypeOptions: [],
      total: 10,
      queryParams: {
        name: undefined,
        maxType: '1',
        minType: undefined,
        pageNum: 1,
        pageSize: 10,
        orderByColumn: 'id',
        isAsc: 'desc'
      },
      list: [
        {
          name: '张三'
        },
        {
          name: '李四'
        }
      ],
      operateType: 'ADD',
      currentRow: {},
      minTypeOptionObj: { ...MinTypeOptionObj },
      nodeDataObj: { ...NodeDataObj }
    };
  },
  created() {
    this.minTypeOptions = this.minTypeOptionObj[this.tabsModel];
    this.initData();
  },
  methods: {
    /** 初始化数据 */
    initData() {
      this.getList();
    },
    /** 获取表格数据 */
    getList() {
      this.loading = true;
      listPartyMemberDevelop(this.queryParams).then(
        response => {
          this.list = response.rows || [];
          this.total = response.total ?? 20;
          this.loading = false;
        }
      );
    },
    /** 标签页点击事件 */
    handleTabsClick(targetName) {
      (targetName.name !== '7') && (this.minTypeOptions = this.minTypeOptionObj[targetName.name]);
      this.queryParams = {
        name: undefined,
        maxType: targetName.name,
        minType: undefined,
        pageNum: 1,
        pageSize: 10,
        orderByColumn: 'id',
        isAsc: 'desc'
      };
      this.getList();
    },
    /** 搜索按钮事件 */
    handleQueryClick() {
      this.queryParams.pageNum = 1;
      this.initData();
    },
    /** 重置按钮事件 */
    resetQueryClick() {
      this.resetForm("queryForm");
      this.handleQueryClick();
    },
    /** 新增按钮事件 */
    handleAddClick() {
      this.pageType = 'ADD';
      this.operateType = 'ADD';
    },
    /** 预备党员转入按钮事件 */
    handleTransferInClick() {

    },
    /** 重新激活按钮事件 */
    handleReactivateClick(row) {

    },
    /** 更新按钮事件 */
    handleUpdateClick(row) {
      if (!row.id) return;
      this.pageType = 'ADD';
      this.operateType = 'EDIT';
      this.currentRow = row;
    },
    /** 详情按钮事件 */
    handleViewClick(row) {
      this.pageType = 'VIEW';
    },
    /**
     * 新增页面保存按钮事件
     */
    handleAddPageSubmitClick(param) {
      this.pageType = param;
      this.initData();
    },
    /**
     * 新增页面取消按钮事件
     */
    handleAddPageCloseClick(param) {
      this.pageType = param;
      this.initData();
    }
  }
};
</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;
        }
      }
    }
  }

  &-addpage {
    &-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;
          }
        }
      }
    }
  }
}
</style>