npmapps 1.0.5 → 1.0.7

package/app/employeeSchedulingManagement/index.vue

@@ -0,0 +1,436 @@
+<template>
+  <div class="employeeSchedulingManagement">
+    <div class="header" v-if="!isShiftChange">
+      <div class="left">
+        <el-input
+          size="mini"
+          placeholder="请输入内容"
+          :value="attendanceCycleByMonthObj.monthName"
+          class="input-with-select"
+          style="margin-right: 10px"
+        >
+          <el-button
+            slot="append"
+            icon="el-icon-search"
+            @click="openAttendanceCycle"
+          ></el-button>
+        </el-input>
+        <el-button size="mini" type="" @click="openBatchScheduling">批量排班</el-button>
+        <el-button size="mini" type="">导出排班</el-button>
+
+        <el-button size="mini" type=""  @click="openBatchShiftChange">批量调班</el-button>
+        <el-button size="mini" type="" @click="shiftChangeForSelected"
+          >为选中人员调班</el-button
+        >
+        <el-button size="mini" type="">导入排班</el-button>
+        <el-button size="mini" type="" @click="openShiftChangeRecord">查看调班记录</el-button>
+        <el-checkbox style="margin-left: 10px" v-model="showOnlyUnscheduled"
+          >只显示未排班人员</el-checkbox
+        >
+      </div>
+      <div class="right">
+        <el-input
+          size="mini"
+          placeholder="考勤组"
+          :value="attendanceGroupObj.monthName"
+          class="input-with-select"
+          style="margin-right: 10px"
+        >
+          <el-button
+            slot="append"
+            icon="el-icon-search"
+            @click="openAttendanceGroup"
+          ></el-button>
+        </el-input>
+      </div>
+    </div>
+    <div class="header" v-else>
+      <div class="left">
+        <el-button size="mini" type="" @click="saveShiftChange">保存</el-button>
+        <el-button size="mini" type="" @click="closeShiftChange"
+          >取消</el-button
+        >
+      </div>
+    </div>
+    <el-table
+      v-loading="loading"
+      size="mini"
+      :data="tableData"
+      style="width: 100%"
+      border
+      @selection-change="handleSelectionChange"
+      ref="multipleTable"
+    >
+      <el-table-column
+        v-if="!isShiftChange"
+        type="selection"
+        width="55"
+      ></el-table-column>
+      <el-table-column prop="employeeId" label="工号" width="180" fixed="left">
+        <template slot="header">
+          <div style="padding-left: 6px">工号</div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="name" label="姓名" width="180" fixed="left">
+        <template slot="header">
+          <div style="padding-left: 6px">姓名</div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="organization" label="机构" show-overflow-tooltip>
+        <template slot="header">
+          <div style="padding-left: 6px">机构</div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="department" label="部门" show-overflow-tooltip>
+        <template slot="header">
+          <div style="padding-left: 6px">部门</div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="position" label="岗位" show-overflow-tooltip>
+        <template slot="header">
+          <div style="padding-left: 6px">岗位</div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="city" label="城市" show-overflow-tooltip>
+        <template slot="header">
+          <div style="padding-left: 6px">城市</div>
+        </template>
+      </el-table-column>
+      <el-table-column
+        v-for="item in shiftPlan"
+        :key="item.tdDate"
+        :prop="'shift_' + item.day"
+        :label="item.day + '(' + item.week + ')'"
+        :width="isShiftChange ? 100 : 50"
+      >
+        <template slot="header" slot-scope="scope">
+          <div class="flex">
+            <div style="border-bottom: 1px solid #ccc; padding-left: 6px">
+              {{ item.day }}
+            </div>
+            <div style="padding-left: 6px">
+              {{ item.week }}
+              <i
+                v-if="isShiftChange && item.editFlag !== '0'"
+                class="el-icon-edit"
+              ></i>
+            </div>
+          </div>
+        </template>
+        <template slot-scope="scope">
+          <shiftItem
+            :scope="scope"
+            :shiftColor="shiftColor"
+            :isShiftChange="isShiftChange"
+            :columnItem="item"
+          />
+          <!-- <div>
+                        <div class="tag" :style="`background-color: ${handleShiftColor(scope, 'color')};`">{{
+                            handleShiftColor(scope,'font') }}</div>
+                    </div> -->
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="footer">
+      <div class="left">
+        <div v-for="item in shiftColor" :key="item.shiftId" class="flex">
+          <div class="tag" :style="`background-color: ${item.color};`">
+            {{ item.font }}
+          </div>
+          <div>{{ item.shiftName }}</div>
+        </div>
+      </div>
+      <div class="right">
+        <el-pagination
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="currentPage"
+          :page-sizes="[10, 20, 30, 100]"
+          :page-size="10"
+          layout="total, sizes, prev, pager, next"
+          :total="total"
+        >
+        </el-pagination>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getTableDataApi, getShiftPlanApi, getShiftColorApi } from "./data";
+import shiftItem from "./shiftItem.vue";
+import { dialogFn } from "../dialogFnJsx/index.js";
+import attendanceCycle from "../components/attendanceCycle/index.vue";
+import attendanceGroup from "../components/attendanceGroup/index.vue";
+import batchScheduling from "./batchScheduling";
+import batchShiftChange from "./batchShiftChange";
+import shiftChangeRecord from "./shiftChangeRecord";
+export default {
+  components: {
+    shiftItem,
+  },
+  data() {
+    return {
+      tableData: [],
+      shiftPlan: [],
+      shiftColor: [],
+      isShiftChange: false,
+      currentPage: 4,
+      total: 10000,
+      attendanceCycleByMonthObj: {
+        name: "2025年度4月",
+        id: 1,
+        startDate: "2025-04-01",
+        endDate: "2025-04-30",
+      },
+      attendanceGroupObj: {
+        name: "2025年度4月",
+        id: 1,
+        startDate: "2025-04-01",
+        endDate: "2025-04-30",
+      },
+      loading: false,
+      showOnlyUnscheduled: false,
+      multipleSelection: [],
+    };
+  },
+  created() {
+    this.getTableData();
+    this.getShiftPlan();
+    this.getShiftColor();
+  },
+  methods: {
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+    },
+    getTableData() {
+      this.loading = true;
+      getTableDataApi().then((res) => {
+        this.tableData = res;
+        this.loading = false;
+        console.log(this.tableData, "this.tableData");
+      });
+    },
+    getShiftPlan() {
+      getShiftPlanApi().then((res) => {
+        this.shiftPlan = res;
+      });
+    },
+    getShiftColor() {
+      getShiftColorApi().then((res) => {
+        this.shiftColor = res;
+      });
+    },
+    handleShiftColor({ row, column }, keyName) {
+      const property = column.property || "";
+      const list = property.split("_") || [];
+      const key = list[1];
+      let shiftId;
+      if (key) {
+        shiftId = row.shiftPlanDetails[key].shiftId;
+        const sc = this.shiftColor.find((item) => item.shiftId === shiftId);
+        return sc[keyName];
+      }
+    },
+    shiftChangeForSelected() {
+      if (!this.multipleSelection.length) {
+        return this.$message.error("请选择要修改的行");
+      }
+      this.tableData = this.multipleSelection;
+      this.isShiftChange = true;
+      this.clearSelection();
+      this.multipleSelection = [];
+      console.log(this.tableData, "tableData");
+    },
+    openAttendanceCycle() {
+      const config = {
+        props: {
+          title: "选择考勤周期",
+          width: "50%",
+        },
+        slots: {
+          default: (
+            <attendanceCycle
+              close={() => close()}
+              setData={(row) => this.attendanceCycleChange(row)}
+            />
+          ),
+        },
+      };
+      let { close } = this.$dialogFnByJsx(config);
+    },
+    openAttendanceGroup() {
+      const config = {
+        props: {
+          title: "选择考勤组",
+          width: "50%",
+        },
+        slots: {
+          default: (
+            <attendanceGroup
+              close={() => close()}
+              setData={(row) => this.attendanceGroupChange(row)}
+            />
+          ),
+        },
+      };
+      let { close } = this.$dialogFnByJsx(config);
+    },
+    attendanceCycleChange(row) {
+      this.attendanceCycleByMonthObj = row;
+      this.getTableData();
+      this.getShiftPlan();
+      this.getShiftColor();
+    },
+    attendanceGroupChange(row) {
+      this.attendanceGroupObj = row;
+    },
+
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    },
+    clearSelection() {
+      this.$refs.multipleTable.clearSelection();
+    },
+    saveShiftChange() {
+      console.log(this.tableData, "this.tableData");
+      this.closeShiftChange();
+    },
+    closeShiftChange() {
+      this.isShiftChange = false;
+      this.getTableData();
+    },
+
+    openBatchScheduling() {
+      const config = {
+        props: {
+          title: "批量排班",
+          width: "80%",
+          top: "20px",
+        },
+        slots: {
+          default: (
+            <batchScheduling
+              close={() => close()}
+            />
+          ),
+        },
+      };
+      let { close } = this.$dialogFnByJsx(config);
+    },
+
+    openBatchShiftChange() { 
+      const config = { 
+        props: { 
+          title: "批量调班", 
+          width: "80%", 
+          top: "20px", 
+        }, 
+        slots: { 
+          default: ( 
+            <batchShiftChange 
+              close={() => close()} 
+            /> 
+          ), 
+        },
+      };
+      let { close } = this.$dialogFnByJsx(config);
+    },
+
+    openShiftChangeRecord() { 
+      if(this.multipleSelection.length === 0) return this.$message.error("请选择");
+       const config = { 
+        props: { 
+          title: "调班记录", 
+          width: "80%", 
+        }, 
+        slots: { 
+          default: ( 
+            <shiftChangeRecord 
+              close={() => close()} 
+              personnelList = {this.multipleSelection}
+            /> 
+          ), 
+        },
+      };
+      let {close} = this.$dialogFnByJsx(config);
+    },
+  },
+};
+</script>
+
+<style lang="less">
+.employeeSchedulingManagement {
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 40px;
+    .left {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  .el-table {
+    .el-table__header-wrapper {
+      .el-table__cell {
+        padding-top: 6px;
+        padding-bottom: 6px;
+      }
+
+      .cell {
+        padding-left: 0 !important;
+        padding-right: 0 !important;
+      }
+    }
+
+    .tag {
+      border-radius: 4px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 20px;
+      color: #fff;
+    }
+  }
+  .footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 40px;
+    .right {
+      margin-left: 20px;
+    }
+    .left {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      overflow: hidden;
+      &:hover {
+        overflow-x: auto;
+        margin-top: 15px;
+      }
+      .flex {
+        display: flex;
+        align-items: center;
+        flex-shrink: 0;
+        margin-right: 20px;
+      }
+      .tag {
+        margin-right: 6px;
+        padding: 0 10px;
+        height: 20px;
+        border-radius: 4px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-shrink: 0;
+      }
+    }
+  }
+}
+</style>

package/app/employeeSchedulingManagement/shiftChangeRecord/index.vue

@@ -0,0 +1,250 @@
+<template>
+  <div class="shiftChangeRecord">
+    <div class="header">
+      <div class="left">
+        <el-image
+          style="width: 60px; height: 60px; border-radius: 50%"
+          src=""
+        ></el-image>
+      </div>
+      <div class="right">
+        <div class="top">
+          <div class="name">许XX（男）</div>
+          <div class="id">011111</div>
+        </div>
+        <div class="bottom">
+          <div>董事长</div>
+          <div>董事长 总裁室 xxxx</div>
+        </div>
+      </div>
+    </div>
+    <div class="content">
+      <div class="content-header">
+        <div class="left">
+          <el-input
+            size="mini"
+            placeholder="请输入内容"
+            :value="attendanceCycleObj.monthName"
+            class="input-with-select"
+            style="margin-right: 10px; width: 200px"
+          >
+            <el-button
+              slot="append"
+              icon="el-icon-search"
+              @click="openAttendanceCycle"
+            ></el-button>
+          </el-input>
+          <el-input
+            style="width: 120px"
+            size="mini"
+            :value="attendanceCycleObj.name"
+            readonly
+          />
+          <span style="margin: 0 5px">至</span>
+          <el-input
+            style="width: 120px"
+            size="mini"
+            :value="attendanceCycleObj.name"
+            readonly
+          />
+        </div>
+        <div class="right">
+          <el-button
+            type=""
+            size="mini"
+            :disabled="previousItemDisabled"
+            @click="onPreviousItem"
+            >上一条</el-button
+          ><el-button
+            type=""
+            size="mini"
+            :disabled="nextItemDisabled"
+            @click="onNextItem"
+            >下一条</el-button
+          >
+          <el-select
+            style="width: 120px; margin-left: 10px"
+            size="mini"
+            v-model="personnelId"
+          >
+            <el-option
+              v-for="item in personnelList"
+              :key="item.employeeId"
+              :label="item.name"
+              :value="item.employeeId"
+            ></el-option>
+          </el-select>
+        </div>
+      </div>
+      <div>
+        <el-table v-loading="tableLoading" size="mini" :data="tableData" style="width: 100%" border>
+          <el-table-column label="工作日期" prop="workDate"></el-table-column>
+          <el-table-column
+            label="调整前班次"
+            prop="previousShift"
+          ></el-table-column>
+          <el-table-column label="调整后班次" prop="newShift"></el-table-column>
+          <el-table-column
+            label="调整后班次"
+            prop="dataSource"
+          ></el-table-column>
+        </el-table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import attendanceCycle from "../../components/attendanceCycle/index.vue";
+import { getShiftChangeRecordTableDataApi } from "../data";
+export default {
+  // 调班记录
+  name: "shiftChangeRecord",
+  props: {
+    close: {
+      type: Function,
+      default: () => {},
+    },
+    personnelList: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      attendanceCycleObj: {
+        name: "2025年度4月",
+        id: 1,
+        startDate: "2025-04-01",
+        endDate: "2025-04-30",
+      },
+      personnelId: "",
+      tableData: [],
+      nextItemDisabled: false,
+      previousItemDisabled: false,
+      tableLoading: false,
+    };
+  },
+  watch: {
+    personnelId(val) {
+      this.getTableData();
+      this.nextItemDisabled = false;
+      this.previousItemDisabled = false;
+      const index = this.personnelList.findIndex(
+        (item) => item.employeeId === val
+      );
+      if (index === -1) return;
+      if (index === 0) this.previousItemDisabled = true;
+      if (index === this.personnelList.length - 1) this.nextItemDisabled = true;
+    },
+  },
+  mounted() {
+    this.getTableData();
+    this.initPersonneId();
+  },
+  methods: {
+    initPersonneId() {
+      if (this.personnelList.length)
+        this.personnelId = this.personnelList[0].employeeId;
+    },
+    openAttendanceCycle() {
+      const config = {
+        props: {
+          title: "选择考勤周期",
+          width: "80%",
+        },
+        slots: {
+          default: (
+            <attendanceCycle
+              close={() => close()}
+              setData={(row) => this.attendanceCycleChange(row)}
+            />
+          ),
+        },
+      };
+      let { close } = this.$dialogFnByJsx(config);
+    },
+    attendanceCycleChange(row) {
+      this.attendanceCycleByMonthObj = row;
+      this.getTableData();
+      this.getShiftPlan();
+      this.getShiftColor();
+    },
+    async getTableData() {
+      try {
+        this.tableLoading = true;
+        const res = await getShiftChangeRecordTableDataApi();
+        this.tableData = res;
+        this.tableLoading = false;
+      } catch (error) {
+        this.tableLoading = false;
+      }
+    },
+    onPreviousItem() {
+      const index = this.personnelList.findIndex(
+        (item) => item.employeeId === this.personnelId
+      );
+      console.log(index, "onPreviousItem");
+
+      if (index > 0) {
+        this.personnelId = this.personnelList[index - 1].employeeId;
+      }
+    },
+    onNextItem() {
+      const index = this.personnelList.findIndex(
+        (item) => item.employeeId === this.personnelId
+      );
+      console.log(index, "onNextItem");
+
+      if (index < this.personnelList.length - 1) {
+        this.personnelId = this.personnelList[index + 1].employeeId;
+      }
+    },
+  },
+};
+</script>
+
+<style lang="less">
+.shiftChangeRecord {
+  .header {
+    display: flex;
+    border: 1px solid #ccc;
+    padding: 10px;
+    .left {
+      width: 60px;
+      margin-right: 10px;
+    }
+    .right {
+      width: 300px;
+      padding: 5px;
+      .top {
+        display: flex;
+        height: 24px;
+        align-items: center;
+        .name {
+          font-size: 16px;
+          font-weight: 600;
+        }
+      }
+      .bottom {
+        display: flex;
+        height: 24px;
+        align-items: center;
+      }
+    }
+  }
+  .content {
+    .content-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: 40px;
+      margin: 10px 0;
+      .left {
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+}
+</style>