yudao-ui-saas/src/views/oa/staffQuit/index.vue

<template>
  <div>
    <div class='fixed-header'>
      <oabar />
    </div>
    <div class="dashboard-container">
      <div v-if="status" class="apply-box">
        <el-card class="box-card" style="min-height: 800px;border-radius: 10px">
          <div class="from-box">
            <div class="title">离职申请</div>
            <el-divider></el-divider>
            <edit></edit>
          </div>
        </el-card>

      </div>
      <div v-else class="data-list-box">
        <el-card class="box-card" style="min-height: 800px;border-radius: 10px">
          <div class="dataList-box">
            <DataList></DataList>
          </div>
        </el-card>

      </div>

    </div>

  </div>
</template>

<script>
import Oabar from '../../../layout/components/Oabar.vue'
import DataList from "./DataList.vue";
import edit from "./edit.vue";

export default {
  name: 'Index',
  components: {
    Oabar,
    DataList,
    edit
  },
  data() {
    return {
      status: true,
    }
  },

  created() {
    
  },
  methods: {
    //获取状态
    setStatus(status) {
      this.status = status
    },
  }
}
</script>
<style lang="scss" scoped>
.fixed-header {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9;
  width: 100%;
  transition: width 0.28s;
}

.dashboard-container {
  background: #f5f6f8;
  bottom: 0;
  left: 0;
  overflow: auto;
  position: absolute;
  right: 0;
  top: 60px;
  padding: 32px;

  .apply-box {
    width: 70%;
    margin: 0 auto;
  }

  .data-list-box {
    width: 100%;
    margin: 0 auto;
  }
}

.from-box {
  padding: 20px 0;

  .title {
    font-weight: bold;
    font-size: 26px;
    margin-bottom: 20px;
  }
}

.dataList-box {
  padding: 10px 40px;
}
</style>