zjugis_OA/client/src/views/OaSystem/personnelManagement/weeklyCenter/weeklyCenter.vue

<template>
  <div class="dailyCenterBox">
    <h4 class="title">工作周报填报</h4>
    <div class="box">
      <div class="calendarBox">
        <WeekCalendar :onChange="onChange" />
      </div>
      <div class="contentBox" v-if="writeData.isLog">
        <DetailBox :detail="writeData.isLog" />
      </div>
      <div class="contentBox" v-else>
        <EditorDetail :weekDate="writeData.weekDate" :writeData="writeData" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import WeekCalendar from './WeekCalendar.vue'
import DetailBox from '../components/DetailBoxWeek.vue'
import EditorDetail from './editorDetail.vue'
import moment from 'moment'
// import request from '@/config/axios'

defineOptions({ name: 'WeeklyCenter' })

// 本周填写的日期
const writeData = ref<any>({
  weekDate: [
    moment().startOf('isoWeek').format('YYYY-MM-DD'),
    moment().endOf('isoWeek').format('YYYY-MM-DD')
  ]
})
const onChange = (data) => {
  writeData.value = data
}
</script>

<style lang="scss" scoped>
.dailyCenterBox {
  width: 100%;
  margin-top: 35px;
  height: calc(100% - 35px);
  background-color: #fff;
  border-radius: 20px;
  padding: 30px;
  position: relative;

  .title {
    font-size: 20px;
    margin-bottom: 20px;
    color: #121518;
  }
  .box {
    width: 100%;
    height: calc(100% - 50px);
    display: flex;
    justify-content: space-between;
  }
  .calendarBox {
    width: 50%;
    position: relative;
  }
  .contentBox {
    width: 50%;
    margin-top: 20px;
    height: calc(100% - 250px);
  }
}
</style>