dy-admin-manager/src/views/chargeManager/index.vue

<template>
  <div class="m-container">
    <h2>
      <div class="squrt"></div>收费管理
      <!-- <div @click="chargeOperation('create')" v-permission="'paymentConfig/add'" class="newBand">添加</div> -->
    </h2>
    <div class="m-core">
      <!-- navMenu -->
      <location-hash v-model="activeIndex" @change="handleClick">
        <el-tabs v-model.trim="activeIndex" type="card" @tab-click="handleClick">
          <el-tab-pane lazy label="分润" name="0" v-if="permissionList.share">
              <three v-if="activeIndex == 0" />
          </el-tab-pane>
          <el-tab-pane lazy label="比例" name="1" v-if="permissionList.scalc">
              <one v-if="activeIndex == 1" />
          </el-tab-pane>
          <el-tab-pane lazy label="金额" name="2" v-if="permissionList.money">
              <two v-if="activeIndex == 2" />
          </el-tab-pane>
        </el-tabs>
      </location-hash>
    </div>
  </div>
</template>
<script>
import one from './one'
import two from './two'
import three from './three'
import { permission} from '@/utils/directivePage'
export default {
  components: {
    one,
    two,
    three
  },
  name: 'chargeManager',
  data () {
    const query = this.$route.query
    return {
      activeIndex: query.opt || '0',
      permissionList: {
        scalc: permission('/chargeManager/scalc'),
        money: permission('/chargeManager/money'),
        share: permission('/chargeManager/share'),
      }
    }
  },
  methods: {
    handleClick (val) {
      this.activeIndex = val.name
    }
  }
}
</script>
<style lang="scss" scoped>
/deep/.m-container {
  padding: 0 10px 40px
}
</style>