ShutongInterconnectedChemicalCloudPlatform/src/views/hr/teams/scheduling.vue

<!--
@ 作者: 秦东
@ 时间: 2025-01-15 14:13:24
@ 备注: 排班管理
-->
<script lang="ts" setup>
import DateClass from "@/api/calendar/DateClass";
import { clockFactory } from "@/api/calendar/utils";
import { accordRoleGiveOrg, gainShiftRules } from "@/api/hr/people/index";

import MonthPage from "@/views/hr/teams/classTime/monthPage.vue";
import WeekPage from "@/views/hr/teams/classTime/weekPage.vue";
import DayPage from "@/views/hr/teams/classTime/dayPage.vue";
import SetupShiftRules from "@/views/hr/teams/classTime/setupShiftRules.vue";

const orgTreeLoading = ref(false);
const orgTreeList = ref([]); //行政组织树数据
const orgTreeProps = {
  children: "child",
  label: "name",
}; //行政组织树对照值
const monthPageRef = ref(null);
const weekPageRef = ref(null);
const dayPageRef = ref(null);
const cureeOrgName = ref("");
const cureeOrgId = ref(0);
const taday = ref<any>([]); //当前日期
const curtteDayType = ref(1);
const curtteDay = ref(1);
const shiftRulesOpen = ref(false);
const teamRulerIsm = ref({
  begainTime: "",
  id: "",
  orgId: "",
  periodName: "",
  periodid: "",
  rules: "",
  rulesTime: "长白班(1)",
  starttime: "",
  time: "",
  typeIdStr: "",
  typeName: "",
  typeid: "",
});
/**
@ 作者: 秦东
@ 时间: 2025-01-16 09:46:35
@ 功能: 获取行政组织树
*/
const gainOrgTree = () => {
  orgTreeLoading.value = true;
  accordRoleGiveOrg()
    .then((dada) => {
      console.log("获取行政组织树", dada);
      orgTreeList.value = dada.data.orgTree;
      if (dada.data.orgName != "") {
        cureeOrgName.value = dada.data.orgName;
        cureeOrgId.value = dada.data.orgId;
      } else if (dada.data.maindeparmentName != "") {
        cureeOrgName.value = dada.data.maindeparmentName;
        cureeOrgId.value = dada.data.maindeparment;
      } else if (dada.data.companyName != "") {
        cureeOrgName.value = dada.data.companyName;
        cureeOrgId.value = dada.data.company;
      }
      getCurrOrgRules(cureeOrgId.value.toString());
    })
    .finally(() => {
      orgTreeLoading.value = false;
    });
};
/**
@ 作者: 秦东
@ 时间: 2025-01-16 09:57:20
@ 功能: 选中行政组织
*/
const handleOrgTreeNodeClick = (val: any) => {
  //   console.log("选中行政组织", val);
  cureeOrgName.value = val.name;
  cureeOrgId.value = val.id;
  getCurrOrgRules(val.id.toString());
  switch (curtteDayType.value) {
    case 1:
      monthPageRef.value.analyban(val.id.toString());
      break;
    case 2:
      weekPageRef.value.analysisWeek(val.id.toString());
      break;
    case 3:
      dayPageRef.value.analysisDays(val.id.toString());
      break;
    default:
  }
  // monthPageRef.value.analyban(val.id.toString());
};

//当前月
const curtteMonth = computed(() => {
  if (taday.value.length <= 0) {
    taday.value = DateClass.getCurrent();
  }
  //   console.log("当前月", taday.value);
  if (curtteDayType.value != 2) {
    if (taday.value.length >= 2) {
      return taday.value[0] + "年" + taday.value[1] + "月";
    }
  } else {
    if (taday.value.start != undefined) {
      return taday.value.start[0] + "年";
    } else {
      return taday.value[0] + "年" + taday.value[1] + "月";
    }
  }
});
//当前星期
const curttWeek = computed(() => {
  if (taday.value.length <= 0) {
    taday.value = DateClass.getCurrent();
  }
  //   console.log("当前星期", taday.value);
  if (curtteDayType.value != 2) {
    return DateClass.getWeek(
      DateClass.solarWeek(taday.value[0], taday.value[1], taday.value[2])
    );
  } else {
    return (
      taday.value.start[1] +
      "月" +
      taday.value.start[2] +
      "-" +
      taday.value.end[1] +
      "月" +
      taday.value.end[2]
    );
  }
});
/**
@ 作者: 秦东
@ 时间: 2024-07-12 11:12:12
@ 功能: 后退时间
*/
const backTime = () => {
  if (taday.value.length <= 0) {
    taday.value = DateClass.getCurrent();
  }
  //   console.log("后退时间", taday.value);
  if (curtteDayType.value != 2) {
    taday.value = DateClass.gobackTime(
      taday.value[0],
      taday.value[1],
      taday.value[2],
      curtteDayType.value,
      -1
    );
  } else {
    let weekObject = DateClass.gobackTime(
      taday.value.start[0],
      taday.value.start[1],
      taday.value.start[2],
      curtteDayType.value,
      -1
    );
    taday.value = weekObject;
  }
  console.log("curtteDayType.value--------->", curtteDayType.value);
  nextTick(() => {
    switch (curtteDayType.value) {
      case 1:
        console.log("curtteDayType.value-----1---->", curtteDayType.value);
        monthPageRef.value.analyban();
        break;
      case 2:
        console.log("curtteDayType.value---2------>", curtteDayType.value);
        weekPageRef.value.analysisWeek();
        break;
      case 3:
        console.log("curtteDayType.value---3------>", curtteDayType.value);
        dayPageRef.value.analysisDays();
        break;
      default:
        console.log("curtteDayType.value---4------>", curtteDayType.value);
    }
  });
};
/**
@ 作者: 秦东
@ 时间: 2024-07-12 14:04:06
@ 功能: 前进时间
*/
const forwardTime = () => {
  //   console.log("前进时间", curtteDayType.value);
  if (taday.value.length <= 0) {
    taday.value = DateClass.getCurrent();
  }
  if (curtteDayType.value != 2) {
    taday.value = DateClass.moveTime(
      taday.value[0],
      taday.value[1],
      taday.value[2],
      curtteDayType.value
    );
  } else {
    let weekObject = DateClass.moveTime(
      taday.value.start[0],
      taday.value.start[1],
      taday.value.start[2],
      curtteDayType.value
    );
    taday.value = weekObject;
  }
  console.log("curtteDayType.value--------->", curtteDayType.value);
  nextTick(() => {
    switch (curtteDayType.value) {
      case 1:
        console.log("curtteDayType.value-----1---->", curtteDayType.value);
        monthPageRef.value.analyban();
        break;
      case 2:
        console.log("curtteDayType.value---2------>", curtteDayType.value);
        weekPageRef.value.analysisWeek();
        break;
      case 3:
        console.log("curtteDayType.value---3------>", curtteDayType.value);
        dayPageRef.value.analysisDays();
        break;
      default:
        console.log("curtteDayType.value---4------>", curtteDayType.value);
    }
  });
};
/**
@ 作者: 秦东
@ 时间: 2024-07-13 16:58:07
@ 功能: 回到今日
*/

const goTady = () => {
  taday.value = DateClass.getCurrent();
};
/**
@ 作者: 秦东
@ 时间: 2024-07-13 08:33:01
@ 功能: 选择时间
*/
const pickTime = (val: number) => {
  curtteDayType.value = val;
  switch (val) {
    case 2:
      taday.value = DateClass.getCurrent();
      let weekObject = DateClass.gobackTime(
        taday.value[0],
        taday.value[1],
        taday.value[2],
        curtteDayType.value
      );
      taday.value = weekObject;
      break;
    case 3:
      taday.value = DateClass.getCurrent();
      break;
    default:
      taday.value = DateClass.getCurrent();
      break;
  }
};
/**
@ 作者: 秦东
@ 时间: 2025-01-16 16:39:32
@ 功能: 获取当前行政组织排班制度
*/
const getCurrOrgRules = (orgId: any) => {
  gainShiftRules({ id: orgId }).then((data: any) => {
    console.log("获取当前行政组织排班制度", data, data.code == 0);
    if (data.code == 0) {
      teamRulerIsm.value.begainTime = data.data.begainTime;
      teamRulerIsm.value.id = data.data.id.toString();
      teamRulerIsm.value.orgId = data.data.orgId.toString();
      teamRulerIsm.value.periodName = data.data.periodName;
      teamRulerIsm.value.periodid = data.data.periodid.toString();
      teamRulerIsm.value.rules = data.data.rules.toString();
      teamRulerIsm.value.rulesTime = data.data.rulesTime;
      teamRulerIsm.value.starttime = data.data.starttime;
      teamRulerIsm.value.time = data.data.time;
      teamRulerIsm.value.typeIdStr = data.data.typeIdStr;
      teamRulerIsm.value.typeName = data.data.typeName;
      teamRulerIsm.value.typeid = data.data.typeid;
    } else {
      teamRulerIsm.value.begainTime = "";
      teamRulerIsm.value.id = "";
      teamRulerIsm.value.orgId = "";
      teamRulerIsm.value.periodName = "";
      teamRulerIsm.value.periodid = "";
      teamRulerIsm.value.rules = "";
      teamRulerIsm.value.rulesTime = "";
      teamRulerIsm.value.starttime = "";
      teamRulerIsm.value.time = "";
      teamRulerIsm.value.typeIdStr = "";
      teamRulerIsm.value.typeName = "";
      teamRulerIsm.value.typeid = "";
    }
  });
};
/**
@ 作者: 秦东
@ 时间: 2025-01-16 15:30:43
@ 功能: 更新倒班制度及源点
*/
const updateShiftRules = (val?: any) => {
  getCurrOrgRules(cureeOrgId.value.toString());
};
onMounted(() => {
  gainOrgTree();
  if (taday.value.length <= 0) {
    taday.value = DateClass.getCurrent();
  }
});

/**
@ 作者: 秦东
@ 时间: 2025-01-16 16:50:12
@ 功能: 设置执行倒班制度及源点数据
*/
const setupOrgRules = () => {
  shiftRulesOpen.value = true;
};
</script>
<template>
  <div class="app-container">
    <el-container>
      <el-aside width="300px" style="border-right: solid 1px #f0f0f0">
        <el-scrollbar class="orgTreeBox">
          <el-tree
            ref="orgTreeRef"
            v-loading="orgTreeLoading"
            node-key="id"
            class="orgTree"
            :data="orgTreeList"
            :props="orgTreeProps"
            :expand-on-click-node="false"
            :check-on-click-node="true"
            :check-strictly="true"
            :default-expand-all="false"
            @node-click="handleOrgTreeNodeClick"
          />
        </el-scrollbar>
      </el-aside>
      <el-container>
        <el-header
          class="contentBetween"
          style="border-bottom: solid 1px #f0f0f0; padding-top: 5px"
        >
          <el-text>当前行政组织：{{ cureeOrgName }}</el-text>
          <div>
            <el-text
              >执行倒班制度及源点：{{ teamRulerIsm.typeName }} [
              {{ teamRulerIsm.begainTime }}]</el-text
            >
            <el-button type="primary" text @click="setupOrgRules">设置</el-button>
          </div>
        </el-header>
        <el-main>
          <div class="calBox">
            <!--日历头部-->
            <div class="calHead">
              <div>
                <i class="fa fa-calendar icont"></i>
                <el-text class="day">{{ curtteMonth }}</el-text>
                <el-text class="week">{{ curttWeek }}</el-text>
              </div>
              <div>
                <el-button-group class="ml-4">
                  <el-button size="small" @click="goTady()">今天</el-button>
                  <el-button
                    :color="curtteDayType == 1 ? '#a0cfff' : ''"
                    @click="pickTime(1)"
                    size="small"
                    >月</el-button
                  >
                  <el-button
                    :color="curtteDayType == 2 ? '#a0cfff' : ''"
                    @click="pickTime(2)"
                    size="small"
                    >周</el-button
                  >
                  <el-button
                    :color="curtteDayType == 3 ? '#a0cfff' : ''"
                    @click="pickTime(3)"
                    size="small"
                    >日</el-button
                  >
                  <el-button
                    size="small"
                    class="fa fa-angle-left"
                    @click="backTime()"
                  ></el-button>
                  <el-button
                    size="small"
                    class="fa fa-angle-right"
                    @click="forwardTime()"
                  ></el-button>
                </el-button-group>
              </div>
            </div>
            <div class="weekNumber">
              <MonthPage
                ref="monthPageRef"
                v-if="curtteDayType == 1"
                :ta-day="taday"
                :org-id="cureeOrgId"
              />
              <WeekPage
                ref="weekPageRef"
                v-if="curtteDayType == 2"
                :ta-day="taday"
                :org-id="cureeOrgId"
              />
              <DayPage
                ref="dayPageRef"
                v-if="curtteDayType == 3"
                :ta-day="taday"
                :org-id="cureeOrgId"
              />
            </div>
          </div>

          <SetupShiftRules
            v-model:open="shiftRulesOpen"
            :org-id="cureeOrgId"
            :org-name="cureeOrgName"
            :ruler-info="teamRulerIsm"
            @updateShiftRules="updateShiftRules"
          />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<style lang="scss" scoped>
.app-container {
  :deep .el-tree-node__content {
    padding: 16px 0;
  }
}
.orgTreeBox {
  height: calc(100vh - 210px);
}
.contentBetween {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.calBox {
  width: 100%;
  height: calc(100vh - 290px);
  .calHead {
    padding: 10px 0;
    border-bottom: 1px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .icont {
      font-size: 20px;
    }
    .day {
      font-size: 20px;
      padding: 0 10px;
      font-weight: bold;
    }
  }
}
</style>