inl-ui 0.0.37 → 0.0.39

package/src/pageComponent/views/workforceManager/workforcePlan/mainTable.tsx

@@ -1,333 +1,333 @@
-import { computed, defineComponent, PropType, ref, watch } from "vue";
-import dayjs, { Dayjs } from "dayjs";
-import _ from "lodash";
-
-import workforceApi from "@/api/workforceManager";
-
-import DayContent from "./dayContent";
-import { message } from "ant-design-vue";
-
-const MainTable = defineComponent({
-  emits: ["refresh"],
-  props: {
-    month: {
-      type: Object as PropType<Dayjs>,
-      required: true,
-    },
-    depId: {
-      type: String,
-    },
-    depName: {
-      type: String,
-    },
-    allData: {
-      type: Array as PropType<any[]>,
-      default: () => [],
-    },
-  },
-  setup(props, { emit }) {
-    // 岗位列表
-    const postList = ref<any[]>([]);
-    const getPostList = async () => {
-      if (props.depId) {
-        const { data } = await workforceApi.getPostByDepId(props.depId);
-        postList.value = data;
-      }
-    };
-    watch(() => props.depId, getPostList, { immediate: true });
-
-    // 图表左侧岗位
-    const workplaceList = computed(() => {
-      const shiftinfoShiftdutyJobposts =
-        props.allData?.[0]?.shiftinfoShiftdutyJobposts;
-      if (shiftinfoShiftdutyJobposts) {
-        const allJobs: any[] = [];
-        shiftinfoShiftdutyJobposts.forEach((item: any) => {
-          if (item.detailInfos) {
-            item.detailInfos.forEach((i: any) => {
-              if (!allJobs.find((a: any) => `${i.jobPostId}` === a.value)) {
-                const post = postList.value.find(
-                  (post) => post.id === `${i.jobPostId}`
-                );
-                if (post) {
-                  allJobs.push({
-                    value: post.id,
-                    label: post.name,
-                  });
-                }
-              }
-            });
-          }
-        });
-        return allJobs;
-      }
-      return [];
-    });
-
-    // 班次列表
-    const shiftList = computed(() => {
-      const res: any[] = [];
-      const shiftinfoShiftdutyJobposts =
-        props.allData[0].shiftinfoShiftdutyJobposts ?? [];
-      shiftinfoShiftdutyJobposts.forEach((shift: any) => {
-        res.push(
-          ...shift.detailInfos.map((item: any) => ({
-            label: item.shiftName,
-            value: item.shiftId,
-          }))
-        );
-      });
-
-      return _.uniqBy(res, "value");
-    });
-
-    // 获取日期对应的一条数据
-    const getDayData = (date: Dayjs) => {
-      return props.allData.find((item) =>
-        dayjs(item.planInfoVO.planDate).isSame(date)
-      );
-    };
-
-    // 班组列表
-    const teamList = ref<any[]>([]);
-
-    watch(
-      () => props.depId,
-      async (val) => {
-        if (!val) return;
-        const { data } = await workforceApi.getTeamByDepId(val);
-        teamList.value = data.map((item: any) => {
-          // item.id = item.id;
-          return item;
-        });
-      },
-      { immediate: true }
-    );
-
-    // 当前日历的第一天 (数据的第一天)
-    const firstOfCalendar = computed(() => {
-      if (!props.allData.length) return dayjs();
-      const actualFirstDay = dayjs(props.allData[0].planInfoVO.planDate);
-      const firstDayOfFirstWeek = actualFirstDay.startOf("week");
-      return firstDayOfFirstWeek;
-    });
-
-    // 当前月有几周 / 几排
-    const weekCount = computed(() => {
-      if (!props.allData.length) return 0;
-      // 本月最后一天所在周的最后一天
-      const lastDay = dayjs(
-        props.allData[props.allData.length - 1].planInfoVO.planDate
-      );
-      const lastDayOfLastWeek = lastDay.endOf("week");
-
-      const week = lastDayOfLastWeek.diff(firstOfCalendar.value, "week");
-      return week + 1;
-    });
-
-    /* ====== 编辑窗口 ====== */
-    const functionForm = ref<any>({});
-    // 修改职能
-    const isFunctionShow = ref(false);
-    const onFunctionClick = (date: Dayjs, record: any) => {
-      functionForm.value = record;
-      functionForm.value.dateRange = [date, date];
-      isFunctionShow.value = true;
-    };
-    // 修改班次职能
-    const isScheduleShow = ref(false);
-    const onScheduleClick = (date: Dayjs, record: any) => {
-      functionForm.value = record;
-      functionForm.value.dateRange = [date, date];
-      isScheduleShow.value = true;
-    };
-
-    // 修改职能提交
-    const handleShiftDutyConfirm = async () => {
-      const data = {
-        shiftDuty: functionForm.value.shiftDuty,
-        start: functionForm.value.dateRange[0].valueOf(),
-        end: functionForm.value.dateRange[1].valueOf(),
-      };
-
-      if (isScheduleShow.value) {
-        await workforceApi.editShiftDuty({
-          ...data,
-          shiftId: functionForm.value.shiftId,
-        });
-      } else {
-        await workforceApi.editDayDuty(data);
-      }
-      message.success("操作成功");
-      isFunctionShow.value = false;
-      isScheduleShow.value = false;
-      emit("refresh");
-    };
-
-    // 班组  ===========
-    const teamForm = ref<any>({});
-    // 清空班组
-    const isClearTeamShow = ref(false);
-    const onClearTeamClick = (date: Dayjs, record: any) => {
-      teamForm.value = record;
-      teamForm.value.shiftId = [record.shiftId];
-      teamForm.value.dateRange = [date, date];
-      isClearTeamShow.value = true;
-    };
-
-    // 修改班组
-    const isEditTeamShow = ref(false);
-    const onEditTeamClick = (date: Dayjs, record: any) => {
-      teamForm.value = record;
-      teamForm.value.dateRange = [date, date];
-      teamForm.value.shiftId = [record.shiftId];
-      isEditTeamShow.value = true;
-    };
-    // 清空/修改 班组 提交
-    const handleEditTeamCofirm = async () => {
-      await workforceApi.editShiftTeam({
-        deptId: props.depId,
-        start: teamForm.value.dateRange[0].valueOf(),
-        end: teamForm.value.dateRange[1].valueOf(),
-        workgroupId: isClearTeamShow.value ? null : teamForm.value.workgroupId,
-        jobPostId: teamForm.value.jobPostId,
-        shiftIds: teamForm.value.shiftId,
-      });
-      message.success("操作成功");
-      isClearTeamShow.value = false;
-      isEditTeamShow.value = false;
-      emit("refresh");
-    };
-
-    return () => (
-      <div class="main-table">
-        {Array.from({ length: weekCount.value }).map((_, i) => (
-          <div class="week-row">
-            <div class="row-head">
-              <div class="top">
-                <div>部门</div>
-                <div>岗位</div>
-              </div>
-              <div class="bottom">
-                <div class="left" title={props.depName}>
-                  {props.depName}
-                </div>
-                <div class="right">
-                  {workplaceList.value.map((item: any) => (
-                    <div title={item.label}>{item.label}</div>
-                  ))}
-                </div>
-              </div>
-            </div>
-            <div class="days">
-              {Array.from({ length: 7 }).map((item, index) => {
-                const date = firstOfCalendar.value
-                  .add(i, "weeks")
-                  .add(index, "days");
-                return (
-                  <DayContent
-                    date={date}
-                    data={getDayData(date)}
-                    onFunctionClick={(record: any) =>
-                      onFunctionClick(date, record)
-                    }
-                    onScheduleClick={(record: any) =>
-                      onScheduleClick(date, record)
-                    }
-                    onClearTeam={(record: any) =>
-                      onClearTeamClick(date, record)
-                    }
-                    onEditTeam={(record: any) => onEditTeamClick(date, record)}
-                  />
-                );
-              })}
-            </div>
-          </div>
-        ))}
-
-        <a-modal
-          title={isFunctionShow.value ? "修改职能" : "修改班组职能"}
-          centered
-          visible={isFunctionShow.value || isScheduleShow.value}
-          onUpdate:visible={() => {
-            isFunctionShow.value = false;
-            isScheduleShow.value = false;
-          }}
-          onOk={handleShiftDutyConfirm}
-        >
-          <a-form labelCol={{ span: 4 }} model={functionForm.value}>
-            <a-form-item label="修改日期">
-              <a-range-picker
-                allowClear={false}
-                picker="date"
-                v-model={[functionForm.value.dateRange, "value"]}
-              ></a-range-picker>
-            </a-form-item>
-            {isScheduleShow.value && (
-              <a-form-item label="修改班次">
-                {
-                  shiftList.value.find(
-                    (item) => item.value === functionForm.value.shiftId
-                  )?.label
-                }
-              </a-form-item>
-            )}
-            <a-form-item label="修改后职能">
-              <a-select v-model={[functionForm.value.shiftDuty, "value"]}>
-                <a-select-option key={1}>检修班</a-select-option>
-                <a-select-option key={2}>生产班</a-select-option>
-              </a-select>
-            </a-form-item>
-          </a-form>
-        </a-modal>
-
-        <a-modal
-          title={isClearTeamShow.value ? "清空班组" : "修改班组"}
-          centered
-          visible={isClearTeamShow.value || isEditTeamShow.value}
-          onUpdate:visible={() => {
-            isClearTeamShow.value = isEditTeamShow.value = false;
-          }}
-          onOk={handleEditTeamCofirm}
-        >
-          <a-form labelCol={{ span: 4 }} model={teamForm.value}>
-            <a-form-item label="部门">{props.depName}</a-form-item>
-            <a-form-item label="岗位">
-              {
-                workplaceList.value.find(
-                  (item: any) => item.value === `${teamForm.value.jobPostId}`
-                )?.label
-              }
-            </a-form-item>
-            <a-form-item label="所选日期">
-              <a-range-picker
-                picker="date"
-                disabledDate={(date: Dayjs) =>
-                  date.month() !== props.month.month()
-                }
-                v-model={[teamForm.value.dateRange, "value"]}
-              ></a-range-picker>
-            </a-form-item>
-            <a-form-item label="所选班次">
-              <a-checkbox-group
-                options={shiftList.value}
-                v-model={[teamForm.value.shiftId, "value"]}
-              ></a-checkbox-group>
-            </a-form-item>
-            {isEditTeamShow.value && (
-              <a-form-item label="修改后班组">
-                <a-select v-model={[teamForm.value.workgroupId, "value"]}>
-                  {teamList.value.map((item) => (
-                    <a-select-option key={item.id}>{item.name}</a-select-option>
-                  ))}
-                </a-select>
-              </a-form-item>
-            )}
-          </a-form>
-        </a-modal>
-      </div>
-    );
-  },
-});
-
-export default MainTable;
+import { computed, defineComponent, PropType, ref, watch } from "vue";
+import dayjs, { Dayjs } from "dayjs";
+import _ from "lodash";
+
+import workforceApi from "@/api/workforceManager";
+
+import DayContent from "./dayContent";
+import { message } from "ant-design-vue";
+
+const MainTable = defineComponent({
+  emits: ["refresh"],
+  props: {
+    month: {
+      type: Object as PropType<Dayjs>,
+      required: true,
+    },
+    depId: {
+      type: String,
+    },
+    depName: {
+      type: String,
+    },
+    allData: {
+      type: Array as PropType<any[]>,
+      default: () => [],
+    },
+  },
+  setup(props, { emit }) {
+    // 岗位列表
+    const postList = ref<any[]>([]);
+    const getPostList = async () => {
+      if (props.depId) {
+        const { data } = await workforceApi.getPostByDepId(props.depId);
+        postList.value = data;
+      }
+    };
+    watch(() => props.depId, getPostList, { immediate: true });
+
+    // 图表左侧岗位
+    const workplaceList = computed(() => {
+      const shiftinfoShiftdutyJobposts =
+        props.allData?.[0]?.shiftinfoShiftdutyJobposts;
+      if (shiftinfoShiftdutyJobposts) {
+        const allJobs: any[] = [];
+        shiftinfoShiftdutyJobposts.forEach((item: any) => {
+          if (item.detailInfos) {
+            item.detailInfos.forEach((i: any) => {
+              if (!allJobs.find((a: any) => `${i.jobPostId}` === a.value)) {
+                const post = postList.value.find(
+                  (post) => post.id === `${i.jobPostId}`
+                );
+                if (post) {
+                  allJobs.push({
+                    value: post.id,
+                    label: post.name,
+                  });
+                }
+              }
+            });
+          }
+        });
+        return allJobs;
+      }
+      return [];
+    });
+
+    // 班次列表
+    const shiftList = computed(() => {
+      const res: any[] = [];
+      const shiftinfoShiftdutyJobposts =
+        props.allData[0].shiftinfoShiftdutyJobposts ?? [];
+      shiftinfoShiftdutyJobposts.forEach((shift: any) => {
+        res.push(
+          ...shift.detailInfos.map((item: any) => ({
+            label: item.shiftName,
+            value: item.shiftId,
+          }))
+        );
+      });
+
+      return _.uniqBy(res, "value");
+    });
+
+    // 获取日期对应的一条数据
+    const getDayData = (date: Dayjs) => {
+      return props.allData.find((item) =>
+        dayjs(item.planInfoVO.planDate).isSame(date)
+      );
+    };
+
+    // 班组列表
+    const teamList = ref<any[]>([]);
+
+    watch(
+      () => props.depId,
+      async (val) => {
+        if (!val) return;
+        const { data } = await workforceApi.getTeamByDepId(val);
+        teamList.value = data.map((item: any) => {
+          // item.id = item.id;
+          return item;
+        });
+      },
+      { immediate: true }
+    );
+
+    // 当前日历的第一天 (数据的第一天)
+    const firstOfCalendar = computed(() => {
+      if (!props.allData.length) return dayjs();
+      const actualFirstDay = dayjs(props.allData[0].planInfoVO.planDate);
+      const firstDayOfFirstWeek = actualFirstDay.startOf("week");
+      return firstDayOfFirstWeek;
+    });
+
+    // 当前月有几周 / 几排
+    const weekCount = computed(() => {
+      if (!props.allData.length) return 0;
+      // 本月最后一天所在周的最后一天
+      const lastDay = dayjs(
+        props.allData[props.allData.length - 1].planInfoVO.planDate
+      );
+      const lastDayOfLastWeek = lastDay.endOf("week");
+
+      const week = lastDayOfLastWeek.diff(firstOfCalendar.value, "week");
+      return week + 1;
+    });
+
+    /* ====== 编辑窗口 ====== */
+    const functionForm = ref<any>({});
+    // 修改职能
+    const isFunctionShow = ref(false);
+    const onFunctionClick = (date: Dayjs, record: any) => {
+      functionForm.value = record;
+      functionForm.value.dateRange = [date, date];
+      isFunctionShow.value = true;
+    };
+    // 修改班次职能
+    const isScheduleShow = ref(false);
+    const onScheduleClick = (date: Dayjs, record: any) => {
+      functionForm.value = record;
+      functionForm.value.dateRange = [date, date];
+      isScheduleShow.value = true;
+    };
+
+    // 修改职能提交
+    const handleShiftDutyConfirm = async () => {
+      const data = {
+        shiftDuty: functionForm.value.shiftDuty,
+        start: functionForm.value.dateRange[0].valueOf(),
+        end: functionForm.value.dateRange[1].valueOf(),
+      };
+
+      if (isScheduleShow.value) {
+        await workforceApi.editShiftDuty({
+          ...data,
+          shiftId: functionForm.value.shiftId,
+        });
+      } else {
+        await workforceApi.editDayDuty(data);
+      }
+      message.success("操作成功");
+      isFunctionShow.value = false;
+      isScheduleShow.value = false;
+      emit("refresh");
+    };
+
+    // 班组  ===========
+    const teamForm = ref<any>({});
+    // 清空班组
+    const isClearTeamShow = ref(false);
+    const onClearTeamClick = (date: Dayjs, record: any) => {
+      teamForm.value = record;
+      teamForm.value.shiftId = [record.shiftId];
+      teamForm.value.dateRange = [date, date];
+      isClearTeamShow.value = true;
+    };
+
+    // 修改班组
+    const isEditTeamShow = ref(false);
+    const onEditTeamClick = (date: Dayjs, record: any) => {
+      teamForm.value = record;
+      teamForm.value.dateRange = [date, date];
+      teamForm.value.shiftId = [record.shiftId];
+      isEditTeamShow.value = true;
+    };
+    // 清空/修改 班组 提交
+    const handleEditTeamCofirm = async () => {
+      await workforceApi.editShiftTeam({
+        deptId: props.depId,
+        start: teamForm.value.dateRange[0].valueOf(),
+        end: teamForm.value.dateRange[1].valueOf(),
+        workgroupId: isClearTeamShow.value ? null : teamForm.value.workgroupId,
+        jobPostId: teamForm.value.jobPostId,
+        shiftIds: teamForm.value.shiftId,
+      });
+      message.success("操作成功");
+      isClearTeamShow.value = false;
+      isEditTeamShow.value = false;
+      emit("refresh");
+    };
+
+    return () => (
+      <div class="main-table">
+        {Array.from({ length: weekCount.value }).map((_, i) => (
+          <div class="week-row">
+            <div class="row-head">
+              <div class="top">
+                <div>部门</div>
+                <div>岗位</div>
+              </div>
+              <div class="bottom">
+                <div class="left" title={props.depName}>
+                  {props.depName}
+                </div>
+                <div class="right">
+                  {workplaceList.value.map((item: any) => (
+                    <div title={item.label}>{item.label}</div>
+                  ))}
+                </div>
+              </div>
+            </div>
+            <div class="days">
+              {Array.from({ length: 7 }).map((item, index) => {
+                const date = firstOfCalendar.value
+                  .add(i, "weeks")
+                  .add(index, "days");
+                return (
+                  <DayContent
+                    date={date}
+                    data={getDayData(date)}
+                    onFunctionClick={(record: any) =>
+                      onFunctionClick(date, record)
+                    }
+                    onScheduleClick={(record: any) =>
+                      onScheduleClick(date, record)
+                    }
+                    onClearTeam={(record: any) =>
+                      onClearTeamClick(date, record)
+                    }
+                    onEditTeam={(record: any) => onEditTeamClick(date, record)}
+                  />
+                );
+              })}
+            </div>
+          </div>
+        ))}
+
+        <a-modal
+          title={isFunctionShow.value ? "修改职能" : "修改班组职能"}
+          centered
+          visible={isFunctionShow.value || isScheduleShow.value}
+          onUpdate:visible={() => {
+            isFunctionShow.value = false;
+            isScheduleShow.value = false;
+          }}
+          onOk={handleShiftDutyConfirm}
+        >
+          <a-form labelCol={{ span: 4 }} model={functionForm.value}>
+            <a-form-item label="修改日期">
+              <a-range-picker
+                allowClear={false}
+                picker="date"
+                v-model={[functionForm.value.dateRange, "value"]}
+              ></a-range-picker>
+            </a-form-item>
+            {isScheduleShow.value && (
+              <a-form-item label="修改班次">
+                {
+                  shiftList.value.find(
+                    (item) => item.value === functionForm.value.shiftId
+                  )?.label
+                }
+              </a-form-item>
+            )}
+            <a-form-item label="修改后职能">
+              <a-select v-model={[functionForm.value.shiftDuty, "value"]}>
+                <a-select-option key={1}>检修班</a-select-option>
+                <a-select-option key={2}>生产班</a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-form>
+        </a-modal>
+
+        <a-modal
+          title={isClearTeamShow.value ? "清空班组" : "修改班组"}
+          centered
+          visible={isClearTeamShow.value || isEditTeamShow.value}
+          onUpdate:visible={() => {
+            isClearTeamShow.value = isEditTeamShow.value = false;
+          }}
+          onOk={handleEditTeamCofirm}
+        >
+          <a-form labelCol={{ span: 4 }} model={teamForm.value}>
+            <a-form-item label="部门">{props.depName}</a-form-item>
+            <a-form-item label="岗位">
+              {
+                workplaceList.value.find(
+                  (item: any) => item.value === `${teamForm.value.jobPostId}`
+                )?.label
+              }
+            </a-form-item>
+            <a-form-item label="所选日期">
+              <a-range-picker
+                picker="date"
+                disabledDate={(date: Dayjs) =>
+                  date.month() !== props.month.month()
+                }
+                v-model={[teamForm.value.dateRange, "value"]}
+              ></a-range-picker>
+            </a-form-item>
+            <a-form-item label="所选班次">
+              <a-checkbox-group
+                options={shiftList.value}
+                v-model={[teamForm.value.shiftId, "value"]}
+              ></a-checkbox-group>
+            </a-form-item>
+            {isEditTeamShow.value && (
+              <a-form-item label="修改后班组">
+                <a-select v-model={[teamForm.value.workgroupId, "value"]}>
+                  {teamList.value.map((item) => (
+                    <a-select-option key={item.id}>{item.name}</a-select-option>
+                  ))}
+                </a-select>
+              </a-form-item>
+            )}
+          </a-form>
+        </a-modal>
+      </div>
+    );
+  },
+});
+
+export default MainTable;