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: 30px">
      <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: 30px;">
        <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: null,
  end_date: null,
  vacation_one_start: null,
  vacation_one_end: null,
  vacation_two_start: null,
  vacation_two_end: null,
});
//=============页面默认加载获取=========
// 获取当前日期
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 () => {
  function formatDate(dateString) {
    const date = new Date(dateString);
    return date.getFullYear() + '-' +
        (date.getMonth() + 1).toString().padStart(2, '0') + '-' +
        date.getDate().toString().padStart(2, '0') + ' ';
  }

  const currentYear = new Date().getFullYear(); // 获取当前年份

  const isCurrentYearOrNull = (dateString) => {
    if (dateString === null) {
      return true; // 如果日期为null，也视为空
    }
    const year = parseInt(dateString.substring(0, 4)); // 提取日期的年份并转换为整数
    return year === currentYear || year === 1970; // 比较年份是否等于当前年份或者为1970
  };

  const start_date_formatted = isCurrentYearOrNull(jjgzzhysformData.start_date) ? formatDate(jjgzzhysformData.start_date) : "";
  const end_date_formatted = isCurrentYearOrNull(jjgzzhysformData.end_date) ? formatDate(jjgzzhysformData.end_date) : "";
  const vacation_one_start_formatted = isCurrentYearOrNull(jjgzzhysformData.vacation_one_start) ? formatDate(jjgzzhysformData.vacation_one_start) : "";
  const vacation_one_end_formatted = isCurrentYearOrNull(jjgzzhysformData.vacation_one_end) ? formatDate(jjgzzhysformData.vacation_one_end) : "";
  const vacation_two_start_formatted = isCurrentYearOrNull(jjgzzhysformData.vacation_two_start) ? formatDate(jjgzzhysformData.vacation_two_start) : "";
  const vacation_two_end_formatted = isCurrentYearOrNull(jjgzzhysformData.vacation_two_end) ? formatDate(jjgzzhysformData.vacation_two_end) : "";

  const formattedData = {
    start_date: start_date_formatted,
    end_date: end_date_formatted,
    vacation_one_start: vacation_one_start_formatted,
    vacation_one_end: vacation_one_end_formatted,
    vacation_two_start: vacation_two_start_formatted,
    vacation_two_end: vacation_two_end_formatted
  };
  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>