From e401c041e7094c9f0cdc54cbce3c1462ff1d352c Mon Sep 17 00:00:00 2001
From: herenshan112 <hreenshan112@163.com>
Date: Thu, 14 Aug 2025 16:00:37 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A1=A8=E6=A0=BC=E5=9B=BA=E5=AE=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/hr/company/companyduty copy.vue | 274 ++++++++++++++++++++++
 src/views/hr/company/companyduty.vue      | 165 ++++++++-----
 2 files changed, 376 insertions(+), 63 deletions(-)
 create mode 100644 src/views/hr/company/companyduty copy.vue

diff --git a/src/views/hr/company/companyduty copy.vue b/src/views/hr/company/companyduty copy.vue
new file mode 100644
index 0000000..0f5d0ff
--- /dev/null
+++ b/src/views/hr/company/companyduty copy.vue	
@@ -0,0 +1,274 @@
+<!--
+@ 作者: 秦东
+@ 时间: 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 class="tabelFirst">
+            <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: first-child;
+    td: first-child;
+    th:first-child {
+      z-index: 3;
+      /*左上角单元格z-index，切记要设置，不然表格纵向横向滚动时会被该单元格右方或者下方的单元格遮挡*/
+      background: #f4f4f5;
+    }
+    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;
+  }
+  .tabelFirst {
+    position: sticky;
+    left: 0;
+    top: 0;
+  }
+}
+</style>
diff --git a/src/views/hr/company/companyduty.vue b/src/views/hr/company/companyduty.vue
index 0f5d0ff..51dc090 100644
--- a/src/views/hr/company/companyduty.vue
+++ b/src/views/hr/company/companyduty.vue
@@ -143,69 +143,91 @@ watch(
         </div>
       </template>
       <div class="deep_card__body">
-        <table>
-          <tr class="tabelFirst">
-            <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
+        <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"
                 >
-                <el-button
-                  :disabled="us.id == 0"
-                  type="danger"
-                  text
-                  size="small"
-                  @click="delOrgDuty(item.orgInfo, us)"
-                  >清空</el-button
+                  {{ 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>
-            </td>
-          </tr>
-        </table>
+                  <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>
+            </tbody>
+          </table>
+        </div>
       </div>
     </el-card>
     <SavePage
@@ -220,7 +242,7 @@ watch(
 .comBox {
   padding: 10px 20px 0 20px;
   :deep .el-card__header {
-    padding: 10px 15px;
+    padding: 10px 15px 0px 15px;
   }
   .deep_card__body {
     width: 100%;
@@ -247,12 +269,12 @@ watch(
     th,
     td {
       border: 1px solid #ddd;
-      padding: 5px 0 0 0px;
     }
     th {
       background-color: #2196f3;
       color: white;
       font-weight: bold;
+      line-height: 35px;
     }
     td {
       min-width: 160px;
@@ -271,4 +293,21 @@ watch(
     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>