ShutongInterconnectedChemicalCloudPlatform/src/views/hr/company/companyduty.vue

<!--
@ 作者: 秦东
@ 时间: 2025-08-11 14:11:11
@ 备注: 公司值班
-->
<script lang="ts" setup>
import {
  companyDutyInit,
  getYearMonthWorkMan,
  delOneDayDuty,
} from "@/api/hr/paiban/index";

import SavePage from "@/views/hr/company/savePage.vue";

const pickMonth = ref("");
const initConter = ref("");
const isSelect = ref(false);
const saveOpen = ref(false);
const workManLsit = ref([]);
const saveInfo = reactive({
  id: 0,
  orgid: 0,
  orgname: "",
  allDay: [],
  baiTian: [],
  days: 1,
  holiday: 2,
  month: 1,
  night: [],
  years: 2025,
  isCompany: 0,
});
const initInfo = () => {
  companyDutyInit().then((res: any) => {
    console.log("初始化数据：", res.data);
    initConter.value = res.data;
    getOrgList(res.data.currentOrg, res.data.year, res.data.month);
  });
};

//获取行政组织列表
const getOrgList = (orgid: any, years: any, months: any) => {
  getYearMonthWorkMan({
    orgId: orgid,
    years: years,
    month: months,
  }).then((resData) => {
    console.log("排班数据数据：", resData);
    workManLsit.value = resData.data.list;
    initConter.value.titlePc = resData.data.title;
  });
};

onMounted(() => {
  initInfo();
});
//删除一设定人员
const delTag = () => {
  console.log("删除一设定人员");
};
//选中行政组织
const pickOrg = (val: any) => {
  getOrgList(val, initConter.value.year, initConter.value.month);
};
//编辑数据
const saveData = (ord: any, val: any) => {
  console.log("编辑数据", ord, val);
  saveInfo.id = val.id;
  saveInfo.orgid = ord.id ? ord.id : "";
  saveInfo.orgname = ord.name ? ord.name : "";
  saveInfo.allDay = val.allDay ? val.allDay : [];
  saveInfo.baiTian = val.baiTian ? val.baiTian : [];
  saveInfo.days = val.days ? val.days : 1;
  saveInfo.holiday = val.holiday ? val.holiday : 2;
  saveInfo.month = val.month ? val.month : 1;
  saveInfo.night = val.night ? val.night : [];
  saveInfo.years = val.years ? val.years : 2025;
  saveInfo.isCompany = ord.isCompany ? ord.isCompany : 0;
  saveOpen.value = true;
  console.log("编辑数据", saveInfo);
};

//清空值班人员
const delOrgDuty = (ord: any, val: any) => {
  console.log("清空值班人员", initConter.value, val);
  delOneDayDuty({ id: val.id }).then(() => {
    getOrgList(initConter.value.currentOrg, val.years, val.month);
  });
};

//刷新
const pickRefresh = (ordId: any, years: any, months: any) => {
  console.log("数据刷新", ordId, years, months);
  getOrgList(ordId, years, months);
};
//监听日期变化
watch(
  () => pickMonth.value,
  (val: any) => {
    let newDay = new Date(val);
    let yearVal = val.getFullYear();
    let monthVal = val.getMonth() + 1;
    getOrgList(initConter.value.currentOrg, yearVal, monthVal);
  },
  {
    deep: true,
  }
);
</script>
<template>
  <div class="comBox">
    <el-card shadow="always">
      <template #header>
        <div class="card_header">
          <div>
            <el-select
              v-if="initConter.orgLevel == 5"
              v-model="initConter.currentOrg"
              placeholder="请选择行政组织"
              style="width: 300px"
              @change="pickOrg($event)"
            >
              <el-option
                v-for="item in initConter.orgList"
                :key="item.id"
                :label="item.name + '(' + item.id + ')'"
                :value="item.id"
              />
            </el-select>
            <div v-else>
              <div v-for="item in initConter.orgList">
                <span v-if="item.id == initConter.currentOrg"
                  >{{ item.name }}({{ item.id }})</span
                >
              </div>
            </div>
          </div>
          <div>{{ initConter.titlePc }}</div>
          <div>
            <!-- <el-button type="primary">添加值班信息</el-button> -->
            <el-date-picker v-model="pickMonth" type="month" placeholder="请选择月份" />
          </div>
        </div>
      </template>
      <div class="deep_card__body">
        <table>
          <tr>
            <td></td>
            <td
              align="center"
              v-for="(item, index) in initConter.monthAllDay"
              :key="index"
              style="width: 300px"
            >
              {{ item }}
            </td>
          </tr>
          <tr v-for="(item, index) in workManLsit" :key="index">
            <td>{{ item.orgInfo.name }}</td>
            <td v-for="(us, usi) in item.dutyList" :key="usi">
              <div v-if="us.holiday == 1">
                <el-divider v-if="us.baiTian">白天</el-divider>
                <el-space wrap>
                  <el-tag v-for="(mItem, mi) in us.baiTian" closable @close="delTag()">{{
                    mItem.name
                  }}</el-tag>
                </el-space>
                <el-divider v-if="us.night">夜间</el-divider>
                <el-space wrap>
                  <el-tag v-for="(mItem, mi) in us.night" closable @close="delTag()">{{
                    mItem.name
                  }}</el-tag>
                </el-space>
                <el-divider v-if="us.allDay">全天</el-divider>
                <el-space wrap>
                  <el-tag v-for="(mItem, mi) in us.allDay" closable @close="delTag()">{{
                    mItem.name
                  }}</el-tag>
                </el-space>
              </div>
              <div v-else>
                <el-space wrap>
                  <el-tag v-for="(mItem, mi) in us.allDay" closable @close="delTag()">{{
                    mItem.name
                  }}</el-tag>
                </el-space>
              </div>

              <div class="butBox">
                <el-button
                  type="primary"
                  text
                  size="small"
                  @click="saveData(item.orgInfo, us)"
                  >编辑</el-button
                >
                <el-button
                  :disabled="us.id == 0"
                  type="danger"
                  text
                  size="small"
                  @click="delOrgDuty(item.orgInfo, us)"
                  >清空</el-button
                >
              </div>
            </td>
          </tr>
        </table>
      </div>
    </el-card>
    <SavePage
      v-model:is-open="saveOpen"
      :duty-cont="saveInfo"
      :cumpany-id="initConter.currentOrg"
      @pickRefresh="pickRefresh"
    />
  </div>
</template>
<style lang="scss" scoped>
.comBox {
  padding: 10px 20px 0 20px;
  :deep .el-card__header {
    padding: 10px 15px;
  }
  .deep_card__body {
    width: 100%;
    overflow: auto;
  }
  .card_header {
    display: flex;
    justify-content: space-between;
    image-rendering: css;
    align-items: center;
  }
  .tableBox {
  }
  :deep table {
    width: 100%;
    border-collapse: collapse;
    th,
    td {
      border: 1px solid #ddd;
      padding: 5px 0 0 0px;
    }
    th {
      background-color: #2196f3;
      color: white;
      font-weight: bold;
    }
    td {
      min-width: 160px;
      color: #555;
    }
  }
  .butBox {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #ddd;
    margin-top: 5px;
  }
}
</style>