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 { get_org } from "@/api/opk/zxy/news/api";
import SavePage from "@/views/hr/company/savePageNew.vue";

const currOrgManList = ref([]);
const currOrgCont = ref(309);
const currOrgContName = ref("山东恒信高科能源有限公司");
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: 0,
  month: 1,
  night: [],
  years: 2025,
  isCompany: 0,
  morning: [],
  afternoon: [],

  allDayAll: [],
  baiTianAll: [],
  nightAll: [],
  morningAll: [],
  afternoonAll: [],
});
const initInfo = () => {
  companyDutyInit().then((res: any) => {
    console.log("初始化数据：", res.data);
    initConter.value = res.data;
    currOrgCont.value = res.data.currentOrg;
    currOrgContName.value = res.data.currentOrgName;
    getOrgList(res.data.currentOrg, res.data.year, res.data.month);
    // get_org({
    //   id: res.data.currentOrg.toString(),
    //   all: 1,
    // }).then((res: any) => {
    //   console.log("获取行政组织人员信息get_org", res);
    //   currOrgManList.value = res.data;
    // });
  });
};

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

onMounted(() => {
  initInfo();
});
//删除一设定人员
const delTag = () => {
  console.log("删除一设定人员");
};
//选中行政组织
const pickOrg = (val: any) => {
  getOrgList(val, initConter.value.year, initConter.value.month);
  get_org({
    id: val.toString(),
    all: 1,
  }).then((res: any) => {
    console.log("获取行政组织人员信息get_org", res);
    currOrgManList.value = res.data;
  });
};
//编辑数据
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;
  saveInfo.morning = val.morning ? val.morning : [];
  saveInfo.afternoon = val.afternoon ? val.afternoon : [];
  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,
  }
);
//判读那是否显示
const isShowOrg = (item: any) => {
  let showOrg = [296, 389, 401, 309];
  console.log("判读那是否显示", item);
  if (item && showOrg.includes(item.id)) {
    return true;
  }
  // return true
};
//监听改变行政组织
// watch(
//   () => currOrgCont.value,
//   (val: any) => {
//     get_org({
//       id: val.toString(),
//       all: 1,
//     })
//       .then((res: any) => {
//         console.log("获取行政组织人员信息get_org", res);
//         orgPeopleList.value = res.data;

//       })
//   },
//   {
//     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">
        <div class="table-test">
          <table>
            <thead>
              <tr class="sticky-row">
                <th class="lie_row"></th>
                <th
                  align="center"
                  v-for="(item, index) in initConter.monthAllDay"
                  :key="index"
                  style="width: 300px"
                >
                  {{ item }}
                </th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in workManLsit" :key="index">
                <td class="lie_row">{{ item.orgInfo.name }}</td>
                <td
                  v-for="(us, usi) in item.dutyList"
                  :key="usi"
                  style="vertical-align: bottom"
                >
                  <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-divider v-if="us.morning">值班</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>
                    <el-divider v-if="us.morning">上午</el-divider>
                    <el-space wrap>
                      <el-tag
                        v-for="(mItem, mi) in us.morning"
                        closable
                        @close="delTag()"
                        >{{ mItem.name }}</el-tag
                      >
                    </el-space>

                    <el-divider v-if="us.afternoon">下午</el-divider>
                    <el-space wrap>
                      <el-tag
                        v-for="(mItem, mi) in us.afternoon"
                        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>
            </tbody>
          </table>
        </div>
      </div>
    </el-card>
    <SavePage
      v-if="saveOpen"
      v-model:is-open="saveOpen"
      :duty-cont="saveInfo"
      :cumpany-id="initConter.currentOrg"
      :curr-org-cont="currOrgCont"
      :curr-org-cont-name="currOrgContName"
      @pickRefresh="pickRefresh"
    />
  </div>
</template>
<style lang="scss" scoped>
.comBox {
  padding: 10px 20px 0 20px;
  :deep .el-card__header {
    padding: 10px 15px 0px 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: first-child;
    td: first-child;
    th:first-child {
      z-index: 3;
      /*左上角单元格z-index，切记要设置，不然表格纵向横向滚动时会被该单元格右方或者下方的单元格遮挡*/
      background: #f4f4f5;
    }
    th,
    td {
      border: 1px solid #ddd;
    }
    th {
      background-color: #2196f3;
      color: white;
      font-weight: bold;
      line-height: 35px;
    }
    td {
      min-width: 160px;
      color: #555;
    }
  }
  .butBox {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #ddd;
    margin-top: 5px;
  }
  .tabelFirst {
    position: sticky;
    left: 0;
    top: 0;
  }
}
.table-test {
  //overflow-x: auto;  //固定列操作
  overflow: auto;
  height: calc(100vh - 265px);
}

.sticky-row {
  position: sticky;
  top: 0; //固定行
  background-color: white;
}
.lie_row {
  position: sticky;
  left: 0; //固定左边一列
  background-color: #f4f4f5;
  padding: 0 5px;
}
</style>