mes-sdai-admin-backend-ui/src/view/performance/jjgzzhys.vue

<template>
  <div style="border: 1px black solid; width: 30%; height: 33%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
    <div style="margin-top: 55px">
      <el-form-item label="考勤年月:" class="mab" prop="keyOrder" label-width="100">
        <el-input v-model="jjgzzhysformData.date" @keyup.enter="jgzzhysProductValue" style="width: 130px;"/>
      </el-form-item>

      <el-form-item label="从:" class="mab" prop="keyOrder" label-width="100">
        <el-date-picker v-model="jjgzzhysformData.start_date" type="date" placeholder="选择日期" style="width: 130px;">
        </el-date-picker>
        &nbsp;到:&nbsp;&nbsp;
        <el-date-picker v-model="jjgzzhysformData.end_date" type="date" placeholder="选择日期" style="width: 130px;">
        </el-date-picker>
      </el-form-item>

      <el-form-item label="法定假日1从:" class="mab" prop="keyOrder" label-width="100">
        <el-date-picker v-model="jjgzzhysformData.vacation_one_start" type="date" placeholder="选择日期" style="width: 130px;">
        </el-date-picker>
        &nbsp;&nbsp;~:&nbsp;&nbsp;
        <el-date-picker v-model="jjgzzhysformData.vacation_one_end" type="date" placeholder="选择日期" style="width: 130px;">
        </el-date-picker>
      </el-form-item>

      <el-form-item label="法定假日2从:" class="mab" prop="keyOrder" label-width="100">
        <el-date-picker v-model="jjgzzhysformData.vacation_two_start" type="date" placeholder="选择日期" style="width: 130px;">
        </el-date-picker>
        &nbsp;&nbsp;~:&nbsp;&nbsp;
        <el-date-picker v-model="jjgzzhysformData.vacation_two_end" type="date" placeholder="选择日期" style="width: 130px;">
        </el-date-picker>
      </el-form-item>


      <div class="dialog-footer" style="text-align: right; margin-top: auto; margin-right: 20px;">
        <el-button type="primary" @click="jjgzzhysclick">继 续</el-button>
      </div>
    </div>
  </div>
</template>
<script setup>
import {ref, reactive} from 'vue'
import {
  staffSalaryCount,
} from '@/api/yunyin/yunying'
import { ElMessage } from 'element-plus'
const form = reactive({})
const visible = ref(true)
const jjgzzhysformData = reactive({
  date: '',
  start_date: '',
  end_date: '',
  vacation_one_start: '',
  vacation_one_end: '',
  vacation_two_start: '',
  vacation_two_end: '',
});
//=============页面默认加载获取=========
// 获取当前日期
const currentDate = new Date();
// 获取当前年份和月份
const year = currentDate.getFullYear();
const month = currentDate.getMonth() + 1;
// 如果月份小于 10，补零
const formattedMonth = month < 10 ? '0' + month : month;
// 组合年月
jjgzzhysformData.date = year.toString() + formattedMonth.toString();

// 封装日期格式化和处理月份范围的逻辑为一个函数
const formatAndSetDates = (yearMonth) => {
  // 提取年份和月份
  const yearPart = yearMonth.slice(0, 4);
  const monthPart = yearMonth.slice(4);
  // 构建开始日期和结束日期的字符串
  const startDateString = `${yearPart}-${monthPart}-01`;
  const endDateString = `${yearPart}-${monthPart}-${new Date(yearPart, monthPart, 0).getDate()}`;
  // 设置开始日期和结束日期
  jjgzzhysformData.start_date = startDateString;
  jjgzzhysformData.end_date = endDateString;
};

// 初始化时调用一次
formatAndSetDates(jjgzzhysformData.date);

// 考勤年月回车时调用
const jgzzhysProductValue = () => {
  formatAndSetDates(jjgzzhysformData.date);
};

//考勤年月按钮 继续
const jjgzzhysclick = async () => {
  // console.log(jjgzzhysformData.start_date)
  function formatDate(dateString) {
    if (dateString === null || dateString === '') {
      return '';
    }

    const formattedDate = new Date(dateString);
    const year = formattedDate.getFullYear();
    const month = String(formattedDate.getMonth() + 1).padStart(2, '0');
    const day = String(formattedDate.getDate()).padStart(2, '0');

    return `${year}-${month}-${day}`;
  }
  const formattedData = {
    date: jjgzzhysformData.date,
    start_date: formatDate(jjgzzhysformData.start_date),
    end_date: formatDate(jjgzzhysformData.end_date),
    vacation_one_start: formatDate(jjgzzhysformData.vacation_one_start),
    vacation_one_end: formatDate(jjgzzhysformData.vacation_one_end),
    vacation_two_start: formatDate(jjgzzhysformData.vacation_two_start),
    vacation_two_end: formatDate(jjgzzhysformData.vacation_two_end)
  };
  console.log(formattedData)
  console.log(formattedData)
  //目前没有接口，先不用调用
  const staffSalaryCount_add = await staffSalaryCount(formattedData);
  if (staffSalaryCount_add.code === 0) {
    ElMessage({type: 'success',message: '更新成功'})
  } else {
    ElMessage({type: 'error',message: '更新失败'})
  }
};
</script>
<style scoped>
:deep(.el-table td .cell) {
  line-height: 20px !important;
}
:deep(.el-tabs__header){
  margin-bottom: 0;
}
.search{
  margin-left: 0px !important;
  margin-right: 10px !important;
}
.bt{
  margin-left: 2px !important;
  padding: 3px !important;
  font-size: 12px;
}
.el-tabs__header{
  margin: 0px !important;
}
.gva-table-box{
  padding: 0px !important;
}
.el-pagination{
  margin-top: 0px !important;
}
.mab{
  margin-bottom: 5px;
}
</style>