ShibeiWorkPlatform_Frontend/src/views/modules/partymember/icpartyorgtree.vue

<template>
  <el-card ref="searchCard" class="resi-card-table">
      <div class="resi-row-btn">
        <el-button class="diy-button--add"
                  size="small"
                  @click="addOrUpdateHandle()">新增</el-button>
      </div>
      <!-- 列表表格 -->
      <el-table
          class="resi-table"
          v-loading="tableLoading"
          :data="tableData"
          :default-expand-all="true"
          row-key="id"
          border
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
          :header-cell-style="{background:'#2195FE',color:'#FFFFFF'}"
          :height="tableHeight">
          <el-table-column prop="partyOrgName" label="党组织名称"></el-table-column>
          <el-table-column label="操作" align="center" width="300">
              <template slot-scope="scope">
                <el-button v-if="scope.row.agencyId == agencyId || scope.row.agencyPids.includes(agencyId)"
                          @click="handleLook(scope.row.agencyPids, scope.row.id, scope.row)"
                          type="text"
                          size="small"
                          class="div-table-button--detail">{{'查看党员'}}</el-button>
                <el-button v-if="(scope.row.agencyId == agencyId || scope.row.agencyPids.includes(agencyId)) && scope.row.partyOrgType != '5'"
                          @click="addOrUpdateHandle('', scope.row.id, scope.row.orgPids, '', scope.row.partyOrgType, scope.row.partyOrgName)"
                          type="text"
                          size="small"
                          class="div-table-button--add">新增下级</el-button>
                <el-button  v-if="scope.row.agencyId == agencyId || scope.row.agencyPids.includes(agencyId)"
                          @click="addOrUpdateHandle(scope.row.id, '', '', scope.row.pid, '', '')"
                          type="text"
                          size="small"
                          class="div-table-button--edit">修改</el-button>
                <el-button  v-if="scope.row.agencyId == agencyId || scope.row.agencyPids.includes(agencyId)"
                            @click="deleteAgency(scope.row.id)"
                            type="text"
                            size="small"
                            class="btn-color-del">删除</el-button>
              </template>
          </el-table-column>
      </el-table>
      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getTableData"></add-or-update>
      <!-- 查看党员 -->
      <el-dialog :visible.sync="lookMemberShow"
                :close-on-click-modal="false"
                :close-on-press-escape="false"
                :title="memberTitle"
                width="1050px"
                top="5vh"
                class="dialog-h"
                @closed="lookMemberClose">
        <look-Member ref="ref_table_Member"
                        @lookMemberCancle="lookMemberCancle"
                        @lookMemberOk="lookMemberOk"></look-Member>
      </el-dialog>
  </el-card>
</template>

<script>
    import AddOrUpdate from './icpartyorg-add-or-update'
    import TableTreeColumn from '@/components/table-tree-column'
    import lookMember from './lookMember'
    import { mapGetters } from 'vuex'
    export default {
    data () {
      return {
        searchH: 0,
        dataForm: {
          id: '',
          customerId: '',
          orgPids: '',
          agencyId: ''
        },
        tableLoading: false,
        tableData: [],
        agencyId: '',
        addOrUpdateVisible: false,
        lookMemberShow: false,
        memberTitle: '查看党员'
      }
    },
    components: {
      AddOrUpdate,
      TableTreeColumn,
      lookMember
    },
    computed: {
      ...mapGetters(['clientHeight', 'iframeHeight']),
      tableHeight() {
        const h = this.clientHeight - this.searchH - 230 + this.iframeHeigh
        const _h = this.clientHeight - 230 - this.searchH
        return this.$store.state.inIframe ? h : _h
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.searchH = this.$refs.searchCard.$el.offsetHeight
        console.log('tableHeight', this.tableHeight)
      })
    },
    async created () {
      this.agencyId = localStorage.getItem('agencyId')
      this.dataForm.customerId = localStorage.getItem('customerId')
      this.dataForm.agencyId = localStorage.getItem('agencyId')
      this.getTableData()
      // this.pageLoading = true
    },
    methods:{
      // 查询列表
      async getTableData () {
        this.tableLoading = true
        let params = {
          customerId: localStorage.getItem('customerId')
        }
        await this.$http.get('/resi/partymember/icPartyOrg/getTreelist', {params: this.dataForm}).then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.internalMsg ? res.internalMsg : res.msg ? res.msg : '查询失败')
          } else {
            this.tableData = res.data
          }
        }).catch(() => {})
        this.tableLoading = false
      },
      // 新增 / 修改
      addOrUpdateHandle (id, orgId, orgPids, pid, partyOrgType, partyOrgName) {
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.addOrUpdate.dataForm.id = id
          // 新增下级需要传
          this.$refs.addOrUpdate.dataForm.orgId = orgId // 党组织
          this.$refs.addOrUpdate.dataForm.orgPids = orgPids
          this.$refs.addOrUpdate.dataForm.pid = pid
          this.$refs.addOrUpdate.dataForm._partyOrgType = partyOrgType
          this.$refs.addOrUpdate.dataForm.sjdzzName = partyOrgName
          this.$refs.addOrUpdate.init()
        })
      },
      // 删除
      deleteAgency (id) {
        this.$confirm(this.$t('prompt.info', { 'handle': this.$t('delete') }), this.$t('prompt.title'), {
          confirmButtonText: this.$t('confirm'),
          cancelButtonText: this.$t('cancel'),
          type: 'warning'
        }).then(() => {
        this.$http.delete('/resi/partymember/icPartyOrg/delete', {'data': [id]}).then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.internalMsg ? res.internalMsg : res.msg ? res.msg : '查询失败')
          }
          this.$message({
            message: this.$t('prompt.success'),
            type: 'success',
            duration: 500,
            onClose: () => {
              this.getTableData()
            }
          })
        }).catch(() => {})
        }).catch(() => {})
      },
      // 查看党员
      handleLook(agencyPids, id, row) {
        this.lookMemberShow = true
        this.$nextTick(() => {
            this.$refs.ref_table_Member.initForm(agencyPids.split(':')[agencyPids.split(':').length - 1], id)
        })
      },
      lookMemberClose () {
        this.lookMemberShow = false
      },
      lookMemberCancle () {
        this.lookMemberShow = false
      },
      lookMemberOk () {
        this.lookMemberShow = false
      }
    }
}
</script>
<style lang="scss" scoped>
  .resi-container .resi-card-table {
    ::v-deep .el-table {
      th {
        color: #fff;
        background-color: rgba(33, 149, 254, 1);
      }

      .cell {
        span:nth-of-type(3) {
          display: inline-block;
          width: 90%;
          word-break: break-all;
        }
      }
    }
  }
  .resi-table {
    ::v-deep .el-button--text {
      text-decoration: underline;
    }
    ::v-deep .btn-color-del {
      margin-left: 10px;
      color: rgba(213, 16, 16, 1);
    }
    ::v-deep .btn-color-edit {
      color: rgba(0, 167, 169, 1);
    }
  }
</style>
<style lang="scss" scoped>
  .resi-row-btn {
    display: flex;
    margin-bottom: 13px;
    ::v-deep .el-button {
      // margin-left: 10px;
      border: 0;
    }
    ::v-deep .el-select {
      margin-right: 10px;
    }
    .el-button--success {
      background: rgba(34, 193, 195, 1);
    }
  }
  .avatar-uploader {
    ::v-deep .el-upload {
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .el-upload:hover {
      border-color: #409eff;
    }
    .avatar {
      width: 70px;
      height: 70px;
      display: block;
    }
    .avatar-uploader-icon {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      font-size: 28px;
      color: #8c939d;
      width: 70px;
      height: 70px;
      line-height: 70px;
      text-align: center;
    }
  }

  .resi-btns {
    margin-top: 20px;
    text-align: center;
  }
</style>