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

<template>
  <div>
    <div class="flex flex-col flex-center full-height">
      <span class="font-16 grey-6 bold">年度资金管理</span>
      <div v-if="user.info.viewStage === 1">
        <base-button
            class="mt-20"
            title="全县投资情况"
            icon=""
            :type="active === -1 ? '1' : '2'"
            @click="viewAll"
        />
        <el-link
            type="primary"
            class="mt-20 pointer"
            @click="
            download(
              'https://wutong-1302848345.cos.ap-chengdu.myqcloud.com/wtzx/0c8500447e3947cab5a1353b891db963.docx'
            )
          "
        >智能监测预警分析报告
        </el-link
        >
      </div>
      <div v-else style="height: 55px"></div>
      <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" v-if="user.info.viewStage === 1"/>
        </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'
import {useStore} from '@/store/user.js'

export default {
  name: 'left',
  components: {baseButton},
  setup() {
    const user = useStore()
    return {user}
  },
  props: {
    hasChildren: {
      type: Boolean,
      default: true
    }
  },
  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
          })
          if (this.active !== -1) {
            this.change(0)
          }
          // 如果不是发改局，默认选中第一条
          if (this.user.info.viewStage !== 1) {
            this.active = 0
            this.change(0)
          } else {
            this.active = -1
            this.$emit('change', null)
          }
        } 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)
    },
    download(url) {
      window.open(
          url,
          '_blank' // <- This is what makes it open in a new window.
      )
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  height: 835px;
  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>