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 -->

      <tab-router
        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-tab-pane lazy label="商品" name="3" v-if="permissionList.shop">
          <four v-if="activeIndex == 3" />
        </el-tab-pane>
      </tab-router>
    </div>
  </div>
</template>
<script>
import one from "./one";
import two from "./two";
import three from "./three";
import four from "./four";
import { permission } from "@/utils/directivePage";
export default {
  components: {
    one,
    two,
    three,
    four
  },
  name: "chargeManager",
  data() {
    const query = this.$route.query;
    return {
      activeIndex: "0",
      permissionList: {
        scalc: permission("/chargeManager/scalc"),
        money: permission("/chargeManager/money"),
        share: permission("/chargeManager/share"),
        shop:permission("/chargeManager/shop"),
      },
    };
  },
  methods: {
    handleClick(val) {
      this.activeIndex = val.name;
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .m-container {
  padding: 0 10px 40px;
}
</style>