manHourHousekeeper/fhKeeper/formulahousekeeper/timesheet_mld/src/views/project/finance.vue

<template>
  <div class="financialAccountingCost w-full h-full">
    <el-menu
      :default-active="menuSelectionIndex"
      class="el-menu-vertical-demo h-full"
      :collapse="isCollapse"
      :collapse-transition="false"
      @select="menuselect"
      v-if="permissions.financialBonusDetails"
    >
      <el-menu-item index="financialDetails">
        <i class="el-icon-data-line"></i>
        <span slot="title">月薪分摊</span>
      </el-menu-item>
      <el-menu-item index="incomeDetail">
        <i class="el-icon-coin"></i>
        <span slot="title">奖金分摊</span>
      </el-menu-item>
    </el-menu>
    <!-- 主体内容 -->
    <div class="mainContent" style="width: 0px" v-if="permissions.financialBonusDetails">
      <!-- 资金明细 -->
      <template v-if="menuSelectionIndex == 'financialDetails'">
        <SalaryDetails @switchMenu="switchMenu" />
      </template>
      <!-- 奖金明细 -->
      <template v-if="menuSelectionIndex == 'incomeDetail'">
        <IncomeDetail @switchMenu="switchMenu" />
      </template>
    </div>
    <div class="mainContent" style="width: 0px" v-if="!permissions.financialBonusDetails">
      <SalaryDetails @switchMenu="switchMenu" />
    </div>
  </div>
</template>

<script>
import SalaryDetails from "./financeComponents/salaryDetails.vue";
import IncomeDetail from "./financeComponents/incomeDetail.vue";
export default {
  components: {
    SalaryDetails,
    IncomeDetail,
  },
  data() {
    return {
      user: JSON.parse(sessionStorage.getItem("user")),
      permissions: JSON.parse(sessionStorage.getItem("permissions")),
      menuSelectionIndex: "financialDetails",
      // menuSelectionIndex: "incomeDetail",
      isCollapse: false,
    };
  },
  mounted() {},
  methods: {
    menuselect(index) {
      this.menuSelectionIndex = index;
    },
    switchMenu() {
      this.isCollapse = !this.isCollapse
    }
  },
};
</script>

<style lang="scss" scoped>
.financialAccountingCost {
  display: flex;
  flex-direction: row;
  .mainContent {
    flex: 1;
    position: relative;
  }
  .el-menu-vertical-demo {
    position: relative;
  }
}

.w-full {
  width: 100%;
}
.h-full {
  height: 100%;
}
</style>