ShutongInterconnectedChemicalCloudPlatform/src/views/hr/teams/classTime/setupTimePage/workTimePage.vue

<!--
@ 作者: 秦东
@ 时间: 2025-01-22 10:01:49
@ 备注: 以班组为基准
-->
<script lang="ts" setup>
import constTimeVal from "@/api/calendar/dayWeekMonthYears";
import { guiZeInfo, teamsPickTry, workTeams } from "@/api/hr/people/type";
const props = defineProps({
  pickCycle: {
    type: String,
    default: "1",
  },
  teamInfo: {
    type: Object,
    default() {
      return {};
    },
  },
  tiemList: {
    type: Object,
    default() {
      return {};
    },
  },
  rulerInfo: {
    type: Object,
    default() {
      return {};
    },
  },
});
/**
@ 作者: 秦东
@ 时间: 2025-01-22 15:20:14
@ 功能: 当月最后一天
*/
const getCurrentMonthDays = () => {
  const now = new Date();
  const year = now.getFullYear();
  const month = now.getMonth() + 1; // 注意月份从 0 开始，所以要加 1

  // 获取当月的最后一天
  const lastDay = new Date(year, month, 0);
  return lastDay.getDate();
};

const emits = defineEmits(["update:pickCycle", "restdata"]);
const dayList = reactive<workTeams>([]);
const lunXunRule = ref<guiZeInfo[]>([]);
const teamPick = ref([]);
let jiShuQi = 1;
onMounted(() => {
  let listAry = [];
  switch (props.pickCycle) {
    case 2: //周
      listAry = constTimeVal.week;
      break;
    case 3: //月
      let lastDay = getCurrentMonthDays();
      console.log("最后一天", lastDay);
      for (let i = 1; i <= lastDay; i++) {
        listAry.push({
          id: i,
          name: i.toString(),
          value: "",
          days: i.toString(),
        });
      }
      break;
    case 4: //季度
      for (let i = 1; i <= 90; i++) {
        listAry.push({
          id: i,
          name: i.toString(),
          value: "",
          days: i.toString(),
        });
      }
      break;
    case 5: //年
      for (let i = 1; i <= 365; i++) {
        listAry.push({
          id: i,
          name: i.toString(),
          value: "",
          days: i.toString(),
        });
      }
      break;
    default:
      for (let i = 1; i <= jiShuQi; i++) {
        listAry.push({
          id: i,
          name: i.toString(),
          value: "",
          days: i.toString(),
        });
      }
      break;
  }
  lunXunRule.value.push({
    id: "",
    name: "",
    list: listAry,
  });
});
watch(
  () => props.pickCycle,
  (val: any) => {
    let listAry = [];
    switch (props.pickCycle) {
      case 2: //周
        listAry = [];
        listAry = constTimeVal.week;

        lunXunRule.value.forEach((item: guiZeInfo) => {
          item.list = listAry;
        });
        break;
      case 3: //月
        listAry = [];
        let lastDay = getCurrentMonthDays();
        console.log("最后一天", lastDay);
        for (let i = 1; i <= lastDay; i++) {
          listAry.push({
            id: i,
            name: i.toString(),
            value: "",
            days: i.toString(),
          });
        }
        lunXunRule.value.forEach((item: guiZeInfo) => {
          item.list = listAry;
        });
        break;
      case 4: //季度
        listAry = [];
        for (let i = 1; i <= 90; i++) {
          listAry.push({
            id: i,
            name: i.toString(),
            value: "",
            days: i.toString(),
          });
        }
        lunXunRule.value.forEach((item: guiZeInfo) => {
          item.list = listAry;
        });
        break;
      case 5: //年
        listAry = [];
        for (let i = 1; i <= 365; i++) {
          listAry.push({
            id: i,
            name: i.toString(),
            value: "",
            days: i.toString(),
          });
        }
        lunXunRule.value.forEach((item: guiZeInfo) => {
          item.list = listAry;
        });
        break;
      default:
        listAry = [];
        jiShuQi = 1;
        // for (let i = 1; i <= jiShuQi; i++) {
        //   listAry.push({
        //     id: i,
        //     name: i.toString(),
        //     value: "",
        //   });
        // }
        lunXunRule.value.splice(0);
        lunXunRule.value.push({
          id: "",
          name: "",
          list: [
            {
              id: jiShuQi,
              name: jiShuQi.toString(),
              value: "",
              days: jiShuQi.toString(),
            },
          ],
        });
        break;
    }

    console.log("计步器", jiShuQi);
  },
  {
    deep: true,
  }
);
//周期变化
// const pickCycleVal = computed({
//   get: () => {
//     let listAry = [];
//     switch (props.pickCycle) {
//       case 2: //周
//         listAry = constTimeVal.week;
//         break;
//       case 3: //月
//         let lastDay = getCurrentMonthDays();
//         console.log("最后一天", lastDay);
//         for (let i = 1; i <= lastDay; i++) {
//           listAry.push({
//             id: i,
//             name: i.toString(),
//             value: "",
//           });
//         }
//         break;
//       case 4: //季度
//         for (let i = 1; i <= 90; i++) {
//           listAry.push({
//             id: i,
//             name: i.toString(),
//             value: "",
//           });
//         }
//         break;
//       case 5: //年
//         for (let i = 1; i <= 365; i++) {
//           listAry.push({
//             id: i,
//             name: i.toString(),
//             value: "",
//           });
//         }
//         break;
//       default:
//         jiShuQi = 1;
//         listAry = [
//           {
//             id: jiShuQi,
//             name: jiShuQi.toString(),
//             value: "",
//           },
//         ];
//         break;
//     }
//     lunXunRule.forEach((item: guiZeInfo) => {
//       item.list = listAry;
//     });
//     console.log("转黄", lunXunRule);
//     return props.pickCycle;
//   },
//   set: (val) => {
//     emits("update:pickCycle", val);
//   },
// });
/**
@ 作者: 秦东
@ 时间: 2025-01-22 11:41:18
@ 功能: 添加周期
*/
const addCycle = (val: any) => {
  console.log("addCycle", val);
  let valNum = val.length + 1;
  let zhijie = {
    id: valNum,
    name: valNum.toString(),
    value: "",
    days: valNum.toString(),
  };
  val.push(zhijie);
  // if (lunXunRule && lunXunRule.length > 0) {
  //   console.log("添加周期1", lunXunRule);
  //   jiShuQi++;
  //   let zhijie = {
  //     id: jiShuQi,
  //     name: jiShuQi.toString(),
  //     value: "",
  //     days: jiShuQi.toString(),
  //   };
  //   lunXunRule.forEach((item: guiZeInfo) => {
  //     console.log("添加周期1------->", item.list, zhijie, item.list.length);
  //     // item.list[item.list.length] = zhijie;
  //     item.list.push(zhijie);
  //   });
  // } else {
  //   console.log("添加周期2", lunXunRule.list);
  //   jiShuQi = 1;
  //   lunXunRule.push({
  //     id: "",
  //     name: "",
  //     list: [
  //       {
  //         id: jiShuQi,
  //         name: jiShuQi,
  //         value: "",
  //         days: jiShuQi.toString(),
  //       },
  //     ],
  //   });
  // }

  //   console.log("添加周期", lunXunRule);
};
/**
@ 作者: 秦东
@ 时间: 2025-01-22 13:59:16
@ 功能: 添加班次
*/
const addTeamsInfo = () => {
  console.log("添加班次", jiShuQi);

  let listAry = [];
  switch (props.pickCycle) {
    case 2: //周
      listAry = constTimeVal.week;
      break;
    case 3: //月
      let lastDay = getCurrentMonthDays();
      console.log("最后一天", lastDay);
      for (let i = 1; i <= lastDay; i++) {
        listAry.push({
          id: i,
          name: i.toString(),
          value: "",
          days: i.toString(),
        });
      }

      break;
    case 4: //季度
      console.log("最后si天", props.pickCycle);
      for (let i = 1; i <= 90; i++) {
        listAry.push({
          id: i,
          name: i.toString(),
          value: "",
          days: i.toString(),
        });
      }
      break;
    case 5: //年
      console.log("最后nian天", vprops.pickCycle);
      for (let i = 1; i <= 365; i++) {
        listAry.push({
          id: i,
          name: i.toString(),
          value: "",
          days: i.toString(),
        });
      }
      break;
    default:
      for (let j = 1; j <= jiShuQi; j++) {
        listAry.push({
          id: j,
          name: j.toString(),
          value: "",
          days: j.toString(),
        });
      }
      //   console.log("最天", props.pickCycle);
      //   console.log("最天", listAry);
      //   console.log("最天", jiShuQi);
      break;
  }
  //   lunXunRule.forEach((item: guiZeInfo) => {
  //     item.list = listAry;
  //   });

  // 	let zhouqi = [];
  //   for (let j = 1; j <= jiShuQi; j++) {
  //     zhouqi.push({
  //       id: j,
  //       name: j.toString(),
  //       value: "",
  //     });
  //   }
  console.log("最天------------->", lunXunRule, listAry);
  lunXunRule.value.push({
    id: "",
    name: "",
    list: listAry,
  });
  console.log("最天------2324------->", lunXunRule);
};
/**
@ 作者: 秦东
@ 时间: 2025-01-22 14:25:44
@ 功能: 删除轮询周期
*/
const delCycle = (val: any) => {
  if (val && val.length > 0) {
    val.pop();
  }
  // if (lunXunRule && lunXunRule.length > 1) {
  //   console.log("删除轮询周期", lunXunRule);
  //   lunXunRule.forEach((item: guiZeInfo) => {
  //     item.list.pop();
  //     jiShuQi = item.list.length;
  //   });
  // }
};
/**
@ 作者: 秦东
@ 时间: 2025-01-22 14:40:09
@ 功能: 删除班次
*/
const delCycleTeam = (val: number) => {
  if (lunXunRule.value && lunXunRule.value.length > 1) {
    console.log("删除班次", val);
    lunXunRule.value.splice(val, 1);
  }
};
//监听轮询变换
watch(
  () => lunXunRule.value,
  (val: guiZeInfo[]) => {
    emits("restdata", val);
    if (val && val.length > 0) {
      teamPick.value = [];
      val.forEach((item: guiZeInfo) => {
        teamPick.value.push(item.id);

        if (props.tiemList && props.tiemList.length > 0) {
          props.tiemList.forEach((tlItem: any) => {
            if (item.id == tlItem.id) {
              item.name = tlItem.name;
            }
          });
        }

        if (props.teamInfo.list && props.teamInfo.list.length > 0) {
          props.teamInfo.list.forEach((itemTeam: any) => {
            // console.log("班组", itemTeam);
            // console.log("班组--1--》", item.list);
            if (item.list && item.list.length > 0) {
              item.list.forEach((itVal: any) => {
                // console.log("班组----》", itVal);
                if (itVal.value == itemTeam.id) {
                  itVal.days = itemTeam.title;
                }
              });
            }
          });
        }
      });
    }
  },
  {
    deep: true,
  }
);
/**
@ 作者: 秦东
@ 时间: 2025-01-22 14:51:14
@ 功能: 判断是否已经选择
*/
const isPickVal = (id: string) => {
  if (teamPick.value && teamPick.value.length > 0) {
    // console.log("判断是否已经选择", teamPick.value.includes(id));
    return teamPick.value.includes(id);
  }
  return false;
};
/**
@ 作者: 秦东
@ 时间: 2025-01-23 08:22:04
@ 功能: 初始化数据
*/
const initWorkTime = () => {
  // let listAry = [];
  // switch (props.pickCycle) {
  //   case 2: //周
  //     listAry = [];
  //     listAry = constTimeVal.week;

  //     lunXunRule.forEach((item: guiZeInfo) => {
  //       item.list = listAry;
  //     });
  //     break;
  //   case 3: //月
  //     listAry = [];
  //     let lastDay = getCurrentMonthDays();
  //     console.log("最后一天", lastDay);
  //     for (let i = 1; i <= lastDay; i++) {
  //       listAry.push({
  //         id: i,
  //         name: i.toString(),
  //         value: "",
  //         days: i.toString(),
  //       });
  //     }
  //     lunXunRule.forEach((item: guiZeInfo) => {
  //       item.list = listAry;
  //     });
  //     break;
  //   case 4: //季度
  //     listAry = [];
  //     for (let i = 1; i <= 90; i++) {
  //       listAry.push({
  //         id: i,
  //         name: i.toString(),
  //         value: "",
  //         days: i.toString(),
  //       });
  //     }
  //     lunXunRule.forEach((item: guiZeInfo) => {
  //       item.list = listAry;
  //     });
  //     break;
  //   case 5: //年
  //     listAry = [];
  //     for (let i = 1; i <= 365; i++) {
  //       listAry.push({
  //         id: i,
  //         name: i.toString(),
  //         value: "",
  //         days: i.toString(),
  //       });
  //     }
  //     lunXunRule.forEach((item: guiZeInfo) => {
  //       item.list = listAry;
  //     });
  //     break;
  //   default:
  //     listAry = [];
  //     jiShuQi = 1;
  //     lunXunRule.splice(0);
  //     lunXunRule.push({
  //       id: "",
  //       name: "",
  //       list: [
  //         {
  //           id: jiShuQi,
  //           name: jiShuQi.toString(),
  //           value: "",
  //           days: jiShuQi.toString(),
  //         },
  //       ],
  //     });
  //     break;
  // }
  // listAry = [];
  jiShuQi = 1;
  lunXunRule.value.splice(0);
  lunXunRule.value.push({
    id: "",
    name: "",
    list: [
      {
        id: jiShuQi,
        name: jiShuQi.toString(),
        value: "",
        days: jiShuQi.toString(),
      },
    ],
  });
};

/**
@ 作者: 秦东
@ 时间: 2025-01-23 13:19:32
@ 功能: 回填规则
*/
const callBackData = (val: any) => {
  lunXunRule.value.splice(0);
  if (val && val.length > 0) {
  }
  lunXunRule.value = val;
  // val.forEach((item: any) => {
  //   console.log("回填规则-2-->", item);
  //   lunXunRule.value.push(item);
  // });
  console.log("回填规则--->", val);
  console.log("回填规则", lunXunRule.value);
};

defineExpose({
  initWorkTime,
  callBackData,
});
</script>
<template>
  <table cellspacing="1" class="table_body" style="width: 100%">
    <tr>
      <td width="150">参与班次</td>
      <td>周期</td>
      <td v-if="props.pickCycle == 1" width="120">操作</td>
    </tr>
    <tr v-for="(item, index) in lunXunRule" :key="item.id">
      <td>
        <el-select v-model="item.id" placeholder="请选择班组" clearable>
          <el-option
            v-for="items in props.tiemList"
            :key="items.id.toString()"
            :label="items.name"
            :value="items.id.toString()"
            :disabled="isPickVal(items.id.toString())"
          >
          </el-option>
        </el-select>
        <el-button
          v-if="lunXunRule && lunXunRule.length > 1"
          type="danger"
          size="small"
          @click="delCycleTeam(index)"
          >删除班次</el-button
        >
      </td>
      <td align="left" style="display: grid">
        <div class="jksfd">
          <div
            v-for="(itemDay, indexDay) in item.list"
            :key="index + '_' + itemDay.id + '_' + indexDay"
            class="infobox"
          >
            <div class="titleBox">
              <el-text>{{ itemDay.name }}</el-text>
            </div>
            <div class="selectBox">
              <el-select
                v-model="itemDay.value"
                placeholder="请选择工作时间段"
                clearable
                :key="index + '_' + itemDay.id + '_' + indexDay"
              >
                <el-option
                  v-for="itemGroup in props.teamInfo.list"
                  :key="index + '_' + itemDay.id + '_' + indexDay"
                  :label="
                    itemGroup.title +
                    '(' +
                    itemGroup.startTime +
                    '-' +
                    itemGroup.endTime +
                    ')'
                  "
                  :value="itemGroup.id.toString()"
                >
                </el-option>
              </el-select>
            </div>
          </div>
        </div>
      </td>
      <td>
        <el-button type="primary" @click.top="addCycle(item.list)"
          ><i class="fa fa-plus"></i
        ></el-button>
        <el-button
          v-if="item.list && item.list.length > 1"
          type="danger"
          @click.top="delCycle(item.list)"
          ><i class="fa fa-minus"></i
        ></el-button>
      </td>
    </tr>
    <tr>
      <td :colspan="props.pickCycle == 1 ? 3 : 2">
        <el-button @click="addTeamsInfo" type="success" style="margin-bottom: 5px"
          >添加参数班次</el-button
        >
      </td>
    </tr>
  </table>
</template>
<style lang="scss" scoped>
.table_body {
  background-color: #ffffff;

  border-collapse: collapse;
  /*
       * 设置边框
       */
  td,
  th {
    border: 1px solid #f0f0f0;
    padding: 5px 5px 0 5px;
    text-align: center;
  }
}
.tdWidth {
  width: 200px;
}
.jksfd {
  display: flex;
  width: 100%;
  overflow: hidden;
  overflow-x: auto;
  .infobox {
    width: 200px;
    text-align: center;
    border: 1px solid rgb(177.3, 179.4, 183.6);
    // margin-left: -1px;
    margin-bottom: 5px;
    .selectBox {
      padding: 5px;
    }
    .titleBox {
      display: flex;
      width: 200px;
      background-color: rgb(177.3, 179.4, 183.6);
      span {
        width: 90%;
      }
      i {
        margin-right: 5px;
        margin-top: 8px;
        cursor: pointer;
      }
    }
  }
}
</style>