feat(mes)：完成 cal plan 【排班计划】的迁移

apps/web-antd/src/views/mes/cal/plan/data.ts

@@ -0,0 +1,280 @@
+import type { VbenFormApi, VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesCalPlanApi } from '#/api/mes/cal/plan';
+
+import { h } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { Button } from 'ant-design-vue';
+
+import { generateAutoCode } from '#/api/mes/md/autocode/record';
+import { getRangePickerDefaultProps } from '#/utils';
+import {
+  MesAutoCodeRuleCode,
+  MesCalPlanStatusEnum,
+  MesCalShiftMethodEnum,
+  MesCalShiftTypeEnum,
+} from '#/views/mes/utils/constants';
+
+/** 新增/修改排班计划的表单 */
+export function useFormSchema(formApi?: VbenFormApi): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'status',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+      defaultValue: MesCalPlanStatusEnum.PREPARE,
+    },
+    {
+      fieldName: 'code',
+      label: '计划编码',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入计划编码',
+      },
+      rules: 'required',
+      suffix: () =>
+        h(
+          Button,
+          {
+            type: 'default',
+            onClick: async () => {
+              try {
+                const code = await generateAutoCode(MesAutoCodeRuleCode.CAL_PLAN_CODE);
+                await formApi?.setFieldValue('code', code);
+              } catch (error) {
+                console.error(error);
+              }
+            },
+          },
+          { default: () => '生成' },
+        ),
+    },
+    {
+      fieldName: 'name',
+      label: '计划名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入计划名称',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'calendarType',
+      label: '班组类型',
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: getDictOptions(DICT_TYPE.MES_CAL_CALENDAR_TYPE, 'number'),
+        placeholder: '请选择班组类型',
+      },
+      rules: 'selectRequired',
+    },
+    {
+      fieldName: 'startDate',
+      label: '开始日期',
+      component: 'DatePicker',
+      componentProps: {
+        format: 'YYYY-MM-DD',
+        placeholder: '请选择开始日期',
+        valueFormat: 'x',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'endDate',
+      label: '结束日期',
+      component: 'DatePicker',
+      componentProps: {
+        format: 'YYYY-MM-DD',
+        placeholder: '请选择结束日期',
+        valueFormat: 'x',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'shiftType',
+      label: '轮班方式',
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: getDictOptions(DICT_TYPE.MES_CAL_SHIFT_TYPE, 'number'),
+        placeholder: '请选择轮班方式',
+      },
+      rules: 'selectRequired',
+    },
+    {
+      fieldName: 'shiftMethod',
+      label: '倒班方式',
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: getDictOptions(DICT_TYPE.MES_CAL_SHIFT_METHOD, 'number'),
+        placeholder: '请选择倒班方式',
+      },
+      dependencies: {
+        triggerFields: ['shiftType'],
+        show: (values) => !!values.shiftType && values.shiftType !== MesCalShiftTypeEnum.SINGLE,
+      },
+    },
+    {
+      fieldName: 'shiftCount',
+      label: '倒班天数',
+      component: 'InputNumber',
+      componentProps: {
+        class: '!w-full',
+        min: 1,
+        precision: 0,
+      },
+      dependencies: {
+        triggerFields: ['shiftMethod'],
+        show: (values) => values.shiftMethod === MesCalShiftMethodEnum.DAY,
+      },
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      formItemClass: 'col-span-3',
+      componentProps: {
+        placeholder: '请输入备注',
+        rows: 3,
+      },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'code',
+      label: '计划编码',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入计划编码',
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '计划名称',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入计划名称',
+      },
+    },
+    {
+      fieldName: 'startDate',
+      label: '开始日期',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+      },
+    },
+    {
+      fieldName: 'endDate',
+      label: '结束日期',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+      },
+    },
+    {
+      fieldName: 'shiftType',
+      label: '轮班方式',
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: getDictOptions(DICT_TYPE.MES_CAL_SHIFT_TYPE, 'number'),
+        placeholder: '请选择轮班方式',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: getDictOptions(DICT_TYPE.MES_CAL_PLAN_STATUS, 'number'),
+        placeholder: '请选择状态',
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions<MesCalPlanApi.Plan>['columns'] {
+  return [
+    {
+      field: 'code',
+      title: '计划编码',
+      minWidth: 140,
+      slots: {
+        default: 'code',
+      },
+    },
+    { field: 'name', title: '计划名称', minWidth: 150 },
+    {
+      field: 'calendarType',
+      title: '班组类型',
+      width: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.MES_CAL_CALENDAR_TYPE },
+      },
+    },
+    { field: 'startDate', title: '开始日期', width: 150, formatter: 'formatDate' },
+    { field: 'endDate', title: '结束日期', width: 150, formatter: 'formatDate' },
+    {
+      field: 'shiftType',
+      title: '轮班方式',
+      width: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.MES_CAL_SHIFT_TYPE },
+      },
+    },
+    {
+      field: 'shiftMethod',
+      title: '倒班方式',
+      width: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.MES_CAL_SHIFT_METHOD },
+      },
+    },
+    {
+      field: 'status',
+      title: '单据状态',
+      width: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.MES_CAL_PLAN_STATUS },
+      },
+    },
+    { field: 'createTime', title: '创建时间', width: 180, formatter: 'formatDateTime' },
+    {
+      title: '操作',
+      width: 160,
+      fixed: 'right',
+      slots: {
+        default: 'actions',
+      },
+    },
+  ];
+}

apps/web-antd/src/views/mes/cal/plan/index.vue

@@ -0,0 +1,144 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesCalPlanApi } from '#/api/mes/cal/plan';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { Button, message } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deletePlan, exportPlan, getPlanPage } from '#/api/mes/cal/plan';
+import { $t } from '#/locales';
+import { MesCalPlanStatusEnum } from '#/views/mes/utils/constants';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建排班计划 */
+function handleCreate() {
+  formModalApi.setData({ type: 'create' }).open();
+}
+
+/** 查看排班计划 */
+function handleDetail(row: MesCalPlanApi.Plan) {
+  formModalApi.setData({ id: row.id, type: 'detail' }).open();
+}
+
+/** 编辑排班计划 */
+function handleEdit(row: MesCalPlanApi.Plan) {
+  formModalApi.setData({ id: row.id, type: 'update' }).open();
+}
+
+/** 删除排班计划 */
+async function handleDelete(row: MesCalPlanApi.Plan) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    duration: 0,
+  });
+  try {
+    await deletePlan(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+/** 导出排班计划 */
+async function handleExport() {
+  const data = await exportPlan(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '排班计划.xls', source: data });
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) =>
+          await getPlanPage({ pageNo: page.currentPage, pageSize: page.pageSize, ...formValues }),
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MesCalPlanApi.Plan>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="排班计划列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['排班计划']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['mes:cal-plan:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['mes:cal-plan:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+      <template #code="{ row }">
+        <Button type="link" @click="handleDetail(row)">{{ row.code }}</Button>
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          v-if="row.status === MesCalPlanStatusEnum.PREPARE"
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              auth: ['mes:cal-plan:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['mes:cal-plan:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>

apps/web-antd/src/views/mes/cal/plan/modules/form.vue

@@ -0,0 +1,154 @@
+<script lang="ts" setup>
+import type { MesCalPlanApi } from '#/api/mes/cal/plan';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { Button, message, Popconfirm, Tabs } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { confirmPlan, createPlan, getPlan, updatePlan } from '#/api/mes/cal/plan';
+import { $t } from '#/locales';
+import { MesCalPlanStatusEnum } from '#/views/mes/utils/constants';
+
+import { useFormSchema } from '../data';
+import ShiftList from './shift-list.vue';
+import PlanTeamList from './team-list.vue';
+
+const emit = defineEmits(['success']);
+const formMode = ref<'create' | 'detail' | 'update'>('create'); // 表单模式
+const subTabsName = ref('shift'); // 当前资源页签
+const formData = ref<MesCalPlanApi.Plan>();
+const isDetail = computed(() => formMode.value === 'detail'); // 是否查看模式
+const canConfirm = computed(
+  () => formMode.value === 'update' && formData.value?.status === MesCalPlanStatusEnum.PREPARE,
+); // 是否可确认计划
+const getTitle = computed(() => {
+  if (formMode.value === 'detail') {
+    return $t('ui.actionTitle.view', ['排班计划']);
+  }
+  return formMode.value === 'update'
+    ? $t('ui.actionTitle.edit', ['排班计划'])
+    : $t('ui.actionTitle.create', ['排班计划']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-1',
+    labelWidth: 100,
+  },
+  wrapperClass: 'grid-cols-3',
+  layout: 'horizontal',
+  schema: [],
+  showDefaultActions: false,
+});
+
+/** 表单 schema 需要 formApi 引用，所以通过 setState 设置 schema */
+formApi.setState({ schema: useFormSchema(formApi) });
+
+/** 确认排班计划 */
+async function handleConfirmPlan() {
+  const { valid } = await formApi.validate();
+  if (!valid || !formData.value?.id) {
+    return;
+  }
+
+  modalApi.lock();
+  try {
+    const data = (await formApi.getValues()) as MesCalPlanApi.Plan;
+    await updatePlan(data);
+    await confirmPlan(formData.value.id);
+    await modalApi.close();
+    emit('success');
+    message.success('确认成功');
+  } finally {
+    modalApi.unlock();
+  }
+}
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    if (isDetail.value) {
+      await modalApi.close();
+      return;
+    }
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as MesCalPlanApi.Plan;
+    try {
+      if (formMode.value === 'create') {
+        const id = await createPlan(data);
+        formData.value = { ...data, id: id as number, status: MesCalPlanStatusEnum.PREPARE };
+        await formApi.setFieldValue('id', id);
+        formMode.value = 'update';
+      } else {
+        await updatePlan(data);
+        formData.value = { ...formData.value, ...data };
+      }
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    await formApi.resetForm();
+    subTabsName.value = 'shift';
+    const data = modalApi.getData<{ id?: number; type?: 'create' | 'detail' | 'update' }>();
+    formMode.value = data?.type || 'create';
+    formApi.setDisabled(formMode.value === 'detail');
+    modalApi.setState({ showConfirmButton: formMode.value !== 'detail' });
+    if (!data?.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getPlan(data.id);
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-4/5">
+    <Form class="mx-4" />
+    <Tabs
+      v-if="formMode !== 'create' && formData?.id"
+      v-model:active-key="subTabsName"
+      class="mx-4 mt-4"
+    >
+      <Tabs.TabPane key="shift" tab="班次">
+        <ShiftList :form-type="formMode" :plan-id="formData.id" />
+      </Tabs.TabPane>
+      <Tabs.TabPane key="team" tab="班组">
+        <PlanTeamList :form-type="formMode" :plan-id="formData.id" />
+      </Tabs.TabPane>
+    </Tabs>
+    <template #prepend-footer>
+      <div class="flex flex-auto items-center">
+        <Popconfirm
+          v-if="canConfirm"
+          title="确认该排班计划？确认后将不可修改或删除。"
+          @confirm="handleConfirmPlan"
+        >
+          <Button type="primary">确认计划</Button>
+        </Popconfirm>
+      </div>
+    </template>
+  </Modal>
+</template>

apps/web-antd/src/views/mes/cal/plan/modules/shift-list.vue

@@ -0,0 +1,236 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesCalPlanShiftApi } from '#/api/mes/cal/plan/shift';
+
+import { computed, ref, watch } from 'vue';
+
+import { message, Modal } from 'ant-design-vue';
+
+import { useVbenForm, z } from '#/adapter/form';
+import { TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  createPlanShift,
+  deletePlanShift,
+  getPlanShiftListByPlan,
+  updatePlanShift,
+} from '#/api/mes/cal/plan/shift';
+import { $t } from '#/locales';
+
+const props = withDefaults(defineProps<{ formType?: string; planId: number }>(), {
+  formType: 'update',
+});
+const isEditable = computed(() => props.formType !== 'detail'); // 是否可编辑
+const formOpen = ref(false); // 班次表单是否打开
+const formLoading = ref(false); // 班次表单提交中
+const shiftFormType = ref<'create' | 'update'>('create'); // 班次表单模式
+const formTitle = computed(() => (shiftFormType.value === 'create' ? '添加班次' : '修改班次'));
+const list = ref<MesCalPlanShiftApi.PlanShift[]>([]); // 班次列表
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'planId',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'sort',
+      label: '顺序',
+      component: 'InputNumber',
+      componentProps: {
+        class: '!w-full',
+        min: 1,
+        precision: 0,
+      },
+      rules: z.number().default(1),
+    },
+    {
+      fieldName: 'name',
+      label: '班次名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入班次名称',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'startTime',
+      label: '开始时间',
+      component: 'TimePicker',
+      componentProps: {
+        format: 'HH:mm',
+        placeholder: '请选择开始时间',
+        valueFormat: 'HH:mm',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'endTime',
+      label: '结束时间',
+      component: 'TimePicker',
+      componentProps: {
+        format: 'HH:mm',
+        placeholder: '请选择结束时间',
+        valueFormat: 'HH:mm',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+        rows: 3,
+      },
+    },
+  ],
+  showDefaultActions: false,
+});
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    autoResize: true,
+    border: true,
+    columns: [
+      { field: 'sort', title: '顺序', width: 80 },
+      { field: 'name', title: '班次名称', minWidth: 120 },
+      { field: 'startTime', title: '开始时间', width: 100 },
+      { field: 'endTime', title: '结束时间', width: 100 },
+      { field: 'remark', title: '备注', minWidth: 150 },
+      {
+        title: '操作',
+        width: 130,
+        fixed: 'right',
+        slots: {
+          default: 'actions',
+        },
+        visible: isEditable.value,
+      },
+    ],
+    data: list.value,
+    minHeight: 240,
+    pagerConfig: {
+      enabled: false,
+    },
+    rowConfig: {
+      isHover: true,
+      keyField: 'id',
+    },
+    showOverflow: true,
+    toolbarConfig: {
+      enabled: false,
+    },
+  } as VxeTableGridOptions<MesCalPlanShiftApi.PlanShift>,
+});
+
+/** 加载班次列表 */
+async function getList() {
+  gridApi.setLoading(true);
+  try {
+    list.value = await getPlanShiftListByPlan(props.planId);
+    gridApi.setGridOptions({ data: list.value });
+  } finally {
+    gridApi.setLoading(false);
+  }
+}
+
+/** 打开班次表单 */
+async function openForm(type: 'create' | 'update', row?: MesCalPlanShiftApi.PlanShift) {
+  formOpen.value = true;
+  shiftFormType.value = type;
+  await formApi.resetForm();
+  await formApi.setValues(row ? { ...row } : { planId: props.planId, sort: 1 });
+}
+
+/** 提交班次表单 */
+async function submitForm() {
+  const { valid } = await formApi.validate();
+  if (!valid) {
+    return;
+  }
+  formLoading.value = true;
+  try {
+    const data = (await formApi.getValues()) as MesCalPlanShiftApi.PlanShift;
+    await (shiftFormType.value === 'create' ? createPlanShift(data) : updatePlanShift(data));
+    formOpen.value = false;
+    message.success($t('ui.actionMessage.operationSuccess'));
+    await getList();
+  } finally {
+    formLoading.value = false;
+  }
+}
+
+/** 删除班次 */
+async function handleDelete(id: number) {
+  await deletePlanShift(id);
+  message.success($t('ui.actionMessage.deleteSuccess', ['班次']));
+  await getList();
+}
+
+watch(
+  () => props.planId,
+  (value) => {
+    if (value) {
+      getList();
+    }
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <div>
+    <div v-if="isEditable" class="mb-3 flex items-center justify-start">
+      <TableAction
+        :actions="[{ label: '添加班次', type: 'primary', onClick: openForm.bind(null, 'create') }]"
+      />
+    </div>
+    <Grid class="w-full">
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            { label: '编辑', type: 'link', onClick: openForm.bind(null, 'update', row) },
+            {
+              label: '删除',
+              type: 'link',
+              danger: true,
+              popConfirm: {
+                title: '确认删除该班次吗？',
+                confirm: handleDelete.bind(null, row.id!),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+    <Modal
+      v-model:open="formOpen"
+      :title="formTitle"
+      width="520px"
+      :confirm-loading="formLoading"
+      @ok="submitForm"
+    >
+      <Form class="mx-4" />
+    </Modal>
+  </div>
+</template>

apps/web-antd/src/views/mes/cal/plan/modules/team-list.vue

@@ -0,0 +1,207 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesCalPlanTeamApi } from '#/api/mes/cal/plan/team';
+import type { MesCalTeamApi } from '#/api/mes/cal/team';
+import type { MesCalTeamMemberApi } from '#/api/mes/cal/team/member';
+
+import { computed, ref, watch } from 'vue';
+
+import { Card, message } from 'ant-design-vue';
+
+import { TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { createPlanTeam, deletePlanTeam, getPlanTeamListByPlan } from '#/api/mes/cal/plan/team';
+import { getTeamMemberListByTeam } from '#/api/mes/cal/team/member';
+import { $t } from '#/locales';
+import { CalTeamSelectDialog } from '#/views/mes/cal/team/components';
+
+const props = withDefaults(defineProps<{ formType?: string; planId: number }>(), {
+  formType: 'update',
+});
+const isEditable = computed(() => props.formType !== 'detail'); // 是否可编辑
+const list = ref<MesCalPlanTeamApi.PlanTeam[]>([]); // 计划班组列表
+const memberList = ref<MesCalTeamMemberApi.TeamMember[]>([]); // 班组成员列表
+const selectedTeamId = ref<number>(); // 选中班组编号
+const selectedTeamName = ref(''); // 选中班组名称
+const teamDialogRef = ref<InstanceType<typeof CalTeamSelectDialog>>(); // 班组选择弹窗
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    autoResize: true,
+    border: true,
+    columns: [
+      { field: 'teamId', title: '班组编号', width: 100 },
+      { field: 'teamCode', title: '班组编码', minWidth: 120 },
+      { field: 'teamName', title: '班组名称', minWidth: 120 },
+      { field: 'remark', title: '备注', minWidth: 150 },
+      {
+        title: '操作',
+        width: 90,
+        fixed: 'right',
+        slots: {
+          default: 'actions',
+        },
+        visible: isEditable.value,
+      },
+    ],
+    data: list.value,
+    minHeight: 260,
+    pagerConfig: {
+      enabled: false,
+    },
+    rowConfig: {
+      isCurrent: true,
+      isHover: true,
+      keyField: 'id',
+    },
+    showOverflow: true,
+    toolbarConfig: {
+      enabled: false,
+    },
+  } as VxeTableGridOptions<MesCalPlanTeamApi.PlanTeam>,
+  gridEvents: {
+    cellClick: ({ row }: { row: MesCalPlanTeamApi.PlanTeam }) => handleTeamSelect(row),
+  },
+});
+
+const [MemberGrid, memberGridApi] = useVbenVxeGrid({
+  gridOptions: {
+    autoResize: true,
+    border: true,
+    columns: [
+      { field: 'nickname', title: '用户昵称', minWidth: 100 },
+      { field: 'telephone', title: '手机号', minWidth: 120 },
+      { field: 'remark', title: '备注', minWidth: 120 },
+    ],
+    data: memberList.value,
+    minHeight: 260,
+    pagerConfig: {
+      enabled: false,
+    },
+    rowConfig: {
+      isHover: true,
+      keyField: 'id',
+    },
+    showOverflow: true,
+    toolbarConfig: {
+      enabled: false,
+    },
+  } as VxeTableGridOptions<MesCalTeamMemberApi.TeamMember>,
+});
+
+/** 加载计划班组列表 */
+async function getList() {
+  gridApi.setLoading(true);
+  try {
+    list.value = await getPlanTeamListByPlan(props.planId);
+    gridApi.setGridOptions({ data: list.value });
+  } finally {
+    gridApi.setLoading(false);
+  }
+}
+
+/** 选择班组后加载成员 */
+async function handleTeamSelect(row?: MesCalPlanTeamApi.PlanTeam) {
+  if (!row?.teamId) {
+    selectedTeamId.value = undefined;
+    selectedTeamName.value = '';
+    memberList.value = [];
+    memberGridApi.setGridOptions({ data: memberList.value });
+    return;
+  }
+  selectedTeamId.value = row.teamId;
+  selectedTeamName.value = row.teamName || '';
+  memberGridApi.setLoading(true);
+  try {
+    memberList.value = await getTeamMemberListByTeam(row.teamId);
+    memberGridApi.setGridOptions({ data: memberList.value });
+  } finally {
+    memberGridApi.setLoading(false);
+  }
+}
+
+/** 打开班组选择弹窗 */
+function openTeamSelect() {
+  teamDialogRef.value?.open(list.value.map((item) => item.teamId!).filter(Boolean));
+}
+
+/** 处理班组选择 */
+async function handleTeamsSelected(rows: MesCalTeamApi.Team[]) {
+  const existingTeamIds = new Set(list.value.map((item) => item.teamId));
+  const newTeams = rows.filter((team) => team.id && !existingTeamIds.has(team.id));
+  if (newTeams.length === 0) {
+    message.warning('所选班组已全部添加过');
+    return;
+  }
+  gridApi.setLoading(true);
+  try {
+    for (const team of newTeams) {
+      await createPlanTeam({ planId: props.planId, teamId: team.id });
+    }
+    message.success('成功添加 ' + newTeams.length + ' 个班组');
+    await getList();
+  } finally {
+    gridApi.setLoading(false);
+  }
+}
+
+/** 删除计划班组 */
+async function handleDelete(row: MesCalPlanTeamApi.PlanTeam) {
+  await deletePlanTeam(row.id!);
+  message.success($t('ui.actionMessage.deleteSuccess', [row.teamName]));
+  if (row.teamId === selectedTeamId.value) {
+    await handleTeamSelect(undefined);
+  }
+  await getList();
+}
+
+watch(
+  () => props.planId,
+  (value) => {
+    if (value) {
+      getList();
+    }
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <div>
+    <div v-if="isEditable" class="mb-3 flex items-center justify-start">
+      <TableAction :actions="[{ label: '添加班组', type: 'primary', onClick: openTeamSelect }]" />
+    </div>
+    <div class="grid grid-cols-5 gap-4">
+      <div class="col-span-3">
+        <Grid class="w-full">
+          <template #actions="{ row }">
+            <TableAction
+              :actions="[
+                {
+                  label: '删除',
+                  type: 'link',
+                  danger: true,
+                  popConfirm: {
+                    title: '确认删除该班组吗？',
+                    confirm: handleDelete.bind(null, row),
+                  },
+                },
+              ]"
+            />
+          </template>
+        </Grid>
+      </div>
+      <div class="col-span-2">
+        <Card class="h-full" size="small">
+          <template #title>
+            {{ selectedTeamName ? `「${selectedTeamName}」班组成员` : '班组成员' }}
+          </template>
+          <div v-if="!selectedTeamId">
+            <div class="py-8 text-center text-gray-400">请点击左侧班组查看成员</div>
+          </div>
+          <MemberGrid v-else class="w-full" />
+        </Card>
+      </div>
+    </div>
+    <CalTeamSelectDialog ref="teamDialogRef" :multiple="true" @selected="handleTeamsSelected" />
+  </div>
+</template>

apps/web-ele/src/views/mes/cal/holiday/data.ts

@@ -0,0 +1,47 @@
+import type { VbenFormSchema } from '#/adapter/form';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { z } from '#/adapter/form';
+import { HolidayType } from '#/views/mes/utils/constants';
+
+/** 假期设置表单 */
+export function useHolidayFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'day',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'dayDisplay',
+      label: '日期',
+      component: 'Input',
+      componentProps: {
+        disabled: true,
+      },
+    },
+    {
+      fieldName: 'type',
+      label: '类型',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.MES_CAL_HOLIDAY_TYPE, 'number'),
+      },
+      rules: z.number().default(HolidayType.WORKDAY),
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+        rows: 3,
+      },
+    },
+  ];
+}

apps/web-ele/src/views/mes/cal/holiday/index.vue

@@ -0,0 +1,192 @@
+<script lang="ts" setup>
+import { computed, onMounted, ref, watch } from 'vue';
+
+import { useAccess } from '@vben/access';
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+
+import dayjs from 'dayjs';
+import { ElButton, ElMessage, ElTag } from 'element-plus';
+import { SolarDay } from 'tyme4ts';
+
+import { getHolidayList } from '#/api/mes/cal/holiday';
+import { HolidayType } from '#/views/mes/utils/constants';
+
+import HolidayForm from './modules/form.vue';
+
+import 'dayjs/locale/zh-cn';
+
+dayjs.locale('zh-cn');
+
+const currentDate = ref(dayjs()); // 当前日历月份
+const holidaySet = ref(new Set<string>()); // 节假日日期集合
+const lastFetchedMonth = ref(''); // 上次加载月份
+const { hasAccessByCodes } = useAccess();
+
+const [HolidayFormModal, holidayFormModalApi] = useVbenModal({
+  connectedComponent: HolidayForm,
+  destroyOnClose: true,
+});
+
+const weekLabels = ['日', '一', '二', '三', '四', '五', '六']; // 星期标题
+const calendarDays = computed(() => {
+  const monthStart = currentDate.value.startOf('month');
+  const start = monthStart.subtract(monthStart.day(), 'day');
+  return Array.from({ length: 42 }, (_, index) => {
+    const date = start.add(index, 'day');
+    return { day: date.format('YYYY-MM-DD'), inMonth: date.month() === currentDate.value.month() };
+  });
+});
+const currentMonthTitle = computed(() => currentDate.value.format('YYYY 年 MM 月'));
+
+/** 加载假期列表 */
+async function getList() {
+  holidaySet.value = new Set<string>();
+  const current = currentDate.value;
+  const startDay = current.subtract(1, 'month').startOf('month').format('YYYY-MM-DD 00:00:00');
+  const endDay = current.add(1, 'month').endOf('month').format('YYYY-MM-DD 23:59:59');
+  const list = await getHolidayList({ startDay, endDay });
+  const days = new Set<string>();
+  for (const item of list || []) {
+    const day = item.day ? dayjs(item.day).format('YYYY-MM-DD') : '';
+    if (day && item.type === HolidayType.HOLIDAY) {
+      days.add(day);
+    }
+  }
+  holidaySet.value = days;
+  lastFetchedMonth.value = current.format('YYYY-MM');
+}
+
+/** 打开假期设置表单 */
+function handleDayClick(item: { day: string; inMonth: boolean }) {
+  if (!item.inMonth) {
+    return;
+  }
+  if (!hasAccessByCodes(['mes:cal-holiday:create'])) {
+    ElMessage.warning('没有假期设置权限');
+    return;
+  }
+  holidayFormModalApi.setData({ day: item.day }).open();
+}
+
+/** 切换到上月 */
+function handlePrevMonth() {
+  currentDate.value = currentDate.value.subtract(1, 'month');
+}
+
+/** 切换到下月 */
+function handleNextMonth() {
+  currentDate.value = currentDate.value.add(1, 'month');
+}
+
+/** 切换到今天 */
+function handleToday() {
+  currentDate.value = dayjs();
+}
+
+/** 判断是否周末 */
+function isWeekend(day: string) {
+  const weekday = dayjs(day).day();
+  return weekday === 0 || weekday === 6;
+}
+
+/** 获取农历信息 */
+function getLunarInfo(day: string) {
+  const [year, month, date] = day.split('-').map(Number);
+  try {
+    const solarDay = SolarDay.fromYmd(year!, month!, date!);
+    const lunarDay = solarDay.getLunarDay();
+    const solarFestival = solarDay.getFestival();
+    const lunarFestival = lunarDay.getFestival();
+    const termDay = solarDay.getTermDay();
+    const termName = termDay.getDayIndex() === 0 ? termDay.getSolarTerm().getName() : '';
+    return {
+      solarFestival: solarFestival ? solarFestival.getName() : '',
+      lunarFestival: lunarFestival ? lunarFestival.getName() : '',
+      termName,
+      lunarText: lunarDay.getLunarMonth().getName() + lunarDay.getName(),
+    };
+  } catch {
+    return { solarFestival: '', lunarFestival: '', termName: '', lunarText: '' };
+  }
+}
+
+/** 获取农历显示文本 */
+function getLunarDisplay(day: string) {
+  const info = getLunarInfo(day);
+  return info.solarFestival || info.lunarFestival || info.termName || info.lunarText;
+}
+
+/** 判断是否有节日 */
+function hasFestival(day: string) {
+  const info = getLunarInfo(day);
+  return !!(info.solarFestival || info.lunarFestival || info.termName);
+}
+
+watch(currentDate, (newDate) => {
+  const newMonth = newDate.format('YYYY-MM');
+  if (newMonth !== lastFetchedMonth.value) {
+    getList();
+  }
+});
+
+onMounted(getList);
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="【排班】班组设置、节假日设置" url="https://doc.iocoder.cn/mes/cal/team/" />
+    </template>
+    <HolidayFormModal @success="getList" />
+    <div class="flex h-full flex-col overflow-hidden rounded border bg-background">
+      <div class="flex items-center justify-between border-b p-4">
+        <div class="text-lg font-semibold">{{ currentMonthTitle }}</div>
+        <div class="flex items-center gap-2">
+          <ElButton @click="handlePrevMonth">上月</ElButton>
+          <ElButton @click="handleToday">今天</ElButton>
+          <ElButton @click="handleNextMonth">下月</ElButton>
+        </div>
+      </div>
+      <div class="grid grid-cols-7 border-b text-center text-sm text-muted-foreground">
+        <div v-for="label in weekLabels" :key="label" class="py-2">{{ label }}</div>
+      </div>
+      <div class="grid flex-1 grid-cols-7 grid-rows-6">
+        <button
+          v-for="item in calendarDays"
+          :key="item.day"
+          class="min-h-[104px] border-b border-r p-2 text-left transition hover:bg-muted/50"
+          :class="{
+            'cursor-pointer': item.inMonth,
+            'bg-muted/30 text-muted-foreground': !item.inMonth,
+          }"
+          type="button"
+          @click="handleDayClick(item)"
+        >
+          <div class="flex items-center justify-between">
+            <span
+              class="text-base font-medium"
+              :class="{ 'text-red-500': isWeekend(item.day) && item.inMonth }"
+            >
+              {{ item.day.slice(8) }}
+            </span>
+            <template v-if="item.inMonth">
+              <span v-if="holidaySet.has(item.day)">
+                <ElTag effect="dark" type="success">休</ElTag>
+              </span>
+              <span v-else><ElTag effect="dark">班</ElTag></span>
+            </template>
+          </div>
+          <div
+            class="mt-1 text-xs"
+            :class="{
+              'text-green-600': hasFestival(item.day),
+              'text-muted-foreground': !hasFestival(item.day),
+            }"
+          >
+            {{ getLunarDisplay(item.day) }}
+          </div>
+        </button>
+      </div>
+    </div>
+  </Page>
+</template>

apps/web-ele/src/views/mes/cal/holiday/modules/form.vue

@@ -0,0 +1,84 @@
+<script lang="ts" setup>
+import type { MesCalHolidayApi } from '#/api/mes/cal/holiday';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import dayjs from 'dayjs';
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import { getHolidayByDay, saveHoliday } from '#/api/mes/cal/holiday';
+import { HolidayType } from '#/views/mes/utils/constants';
+
+import { useHolidayFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useHolidayFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as MesCalHolidayApi.Holiday & { dayDisplay?: string };
+    try {
+      await saveHoliday({ day: data.day, type: data.type, remark: data.remark });
+      await modalApi.close();
+      emit('success');
+      ElMessage.success('设置成功');
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      return;
+    }
+    await formApi.resetForm();
+    const data = modalApi.getData<{ day: string }>();
+    if (!data?.day) {
+      return;
+    }
+    const timestamp = dayjs(data.day + ' 00:00:00').valueOf();
+    await formApi.setValues({
+      day: timestamp,
+      dayDisplay: data.day,
+      type: HolidayType.WORKDAY,
+      remark: '',
+    });
+    modalApi.lock();
+    try {
+      const holiday = await getHolidayByDay(dayjs(timestamp).format('YYYY-MM-DD HH:mm:ss'));
+      if (holiday) {
+        await formApi.setValues({
+          type: holiday.type ?? HolidayType.WORKDAY,
+          remark: holiday.remark ?? '',
+        });
+      }
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal title="假期设置" class="w-1/3">
+    <Form class="mx-4" />
+  </Modal>
+</template>