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

<template>
  <div class="resi-container">
    <el-card class="resi-card-table">
      <div class="resi-row-btn">
        <el-button class="diy-button--add"
                   size="small"
                   @click="addOrUpdateHandle()">新增</el-button>
      </div>

      <el-table :data="tableData"
                v-loading="tableLoading"
                border
                style="width: 100%"
                class="resi-table">
        <table-tree-column prop="partyOrgName" label="党组织名称" header-align="center"></table-tree-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)"
                       type="text"
                       size="small"
                       class="div-table-button--detail">{{'查看党员'}}</el-button>
            <el-button v-if="scope.row.agencyId == agencyId || scope.row.agencyPids.includes(agencyId)"
                       @click="handleAdd('2', 'add', scope.row)"
                       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)"
                       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="handleEdit(scope.row, 'edit')"
                       type="text"
                       size="small"
                       class="div-table-button--edit">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
    </el-card>
  </div>
</template>

<script>
    import mixinViewModule from '@/mixins/view-module'
    import AddOrUpdate from './icpartyorg-add-or-update'
    import TableTreeColumn from '@/components/table-tree-column'

    export default {
  mixins: [mixinViewModule],
  data () {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/resi/partymember/icPartyOrg/getTreelist',
        getDataListIsPage: true,
        deleteURL: '/resi/partymember/icPartyOrg',
        deleteIsBatch: true
      },
      dataForm: {
        id: '',
        customerId: ''
      },
      tableLoading: false,
      tableData: [],
      agencyId: ''
    }
  },
  components: {
    AddOrUpdate,
    TableTreeColumn
  },
  async created () {
    this.agencyId = localStorage.getItem('agencyId')
    this.dataForm.customerId = localStorage.getItem('customerId')
    this.getTableData()
    // this.pageLoading = true
  },
  methods:{
    // 新增 / 修改
    addOrUpdateHandle (id) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.dataForm.id = id
        this.$refs.addOrUpdate.init()
      })
    },
    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.msg)
                } else {
                  this.tableData = res.data
                }
              })
              .catch(() => {})
      this.tableLoading = 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>