wt_project_web_bak/src/views/invest/components/left.vue

<template>
  <div>
    <div class="flex flex-col flex-center">
      <span class="font-16 grey-6 bold">年度资金管理</span>
      <base-button class="mt-20" title="全县投资情况" icon="" :type='active === -1 ? "1" :"2" ' @click='viewAll'/>
      <div class='full-width flex flex-center mt-20'>
        <el-tabs v-model="activeName" class="font-16" @tab-change="getOrg">
          <el-tab-pane label="住建局" name="1"/>
          <el-tab-pane label="乡镇" name="2"/>
        </el-tabs>
      </div>
      <div class='content hide-scrollbar'>
        <div v-for='(i,index) in deptList' class='item white bold font-16' :key='i.id'
             :class='active === index ? "item-select white" : "" ' @click='change(index)'>
          {{ i.deptName }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import baseButton from '@/components/base-button.vue'

export default {
  name: 'left',
  components: { baseButton },
  data () {
    return {
      activeName: '1',
      deptList: [],
      active: -1
    }
  },
  created () {
    this.getOrg()
  },
  methods: {
    getOrg () {
      this.$api.common.deptList({ type: this.activeName }).then(res => {
        if (res.code === 200) {
          this.deptList = res.data.map(e => {
            e.checked = false
            return e
          })
          this.change(0)
        } else {
          this.$message.error(res.msg)
        }
      })
    },

    change (index) {
      this.active = index
      this.$emit('change', this.deptList[index])
    },
    viewAll () {
      this.active = -1
      this.$emit('change', null)
    }
  }
}
</script>

<style lang='scss' scoped>
.content {
  height: 1020px;
  overflow-y: scroll
}

.item {
  padding: 10px 20px;
  margin-bottom: 10px;
  color: #ABADAA;
  border-bottom: #ABADAA solid 0.5px;
}

.item-select {
  background-color: #4390F9;
  border-radius: 10px;
  padding: 10px 20px;
  margin-bottom: 10px;
  color: white;
}
</style>