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'
import { useUserStore } from '@/pinia/modules/user'
const userStore = useUserStore()
const _username = ref('')
_username.value = userStore.userInfo.userName + '/' + userStore.userInfo.nickName

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 kqny = ref('')
const jjgzzhysclick = async () => {
  var date = jjgzzhysformData.date;//202403
  var year = date.slice(0, 4);//2024
  var month = date.slice(4);//03
  if (month < 1 || month > 12) {
    ElMessage({type: 'warning',message: '月份必须在1到12月之间'})
    return false;
  } else {
    if (month.length === 1) {
      month = '0' + month;
    }
     kqny.value = year+month;
  }
  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}`;
  }
  var dateMonth = kqny.value.slice(-2);//获取date后两位月份
  //开始日期结束日期
  if (formatDate(jjgzzhysformData.start_date).slice(5, 7) !== dateMonth && formatDate(jjgzzhysformData.end_date).slice(5, 7) !== dateMonth) {
    ElMessage({type: 'warning',message: '考勤月份和开始日期和结束日期的月份不一致'})
    return false;
  }
  //法定假日1开始日期结束日期
  if (jjgzzhysformData.vacation_one_start && formatDate(jjgzzhysformData.vacation_one_start).slice(5, 7) !== dateMonth && jjgzzhysformData.vacation_one_end && formatDate(jjgzzhysformData.vacation_one_end).slice(5, 7) !== dateMonth) {
    ElMessage({ type: 'warning', message: '考勤月份和法定假日1的月份不一致' });
    return false;
  }
  //法定假日2开始日期结束日期
  if (jjgzzhysformData.vacation_two_start && formatDate(jjgzzhysformData.vacation_two_start).slice(5, 7) !== dateMonth && jjgzzhysformData.vacation_two_end && formatDate(jjgzzhysformData.vacation_two_end).slice(5, 7) !== dateMonth) {
    ElMessage({ type: 'warning', message: '考勤月份和开法定假日2的月份不一致' });
    return false;
  }
  //返回接口数据
  const formattedData = {
    sys_id: _username.value,
    date: kqny.value,
    start_date: formatDate(jjgzzhysformData.start_date),
    end_date: formatDate(jjgzzhysformData.end_date),
    days: '',
    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);
  const staffSalaryCount_add = await staffSalaryCount(formattedData);//调用接口
  console.log(staffSalaryCount_add)
  // if (staffSalaryCount_add.code === 0) {
  //   ElMessage({type: 'success',message: msg})
  // }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>