新疆马铃薯 1.添加调休审批页面

gaoluyang

2026-06-25 0e3d8dbbd767316b33de9adce1b3c4ce869c6b99

新疆马铃薯
1.添加调休审批页面

 src/views/officeProcessAutomation/ApproveManage/approve-shared/approvalModuleRegistry.js

@@ -8,6 +8,7 @@
  RESIGN: "resign",
  WORK_HANDOVER: "work_handover",
  LEAVE: "leave",
  COMPENSATORY: "compensatory",
  OVERTIME: "overtime",
  TRAVEL_REIMBURSE: "travel_reimburse",
  COST_REIMBURSE: "cost_reimburse",
@@ -20,6 +21,7 @@
  [APPROVAL_MODULE_KEYS.TRANSFER]: 11,
  [APPROVAL_MODULE_KEYS.WORK_HANDOVER]: 13,
  [APPROVAL_MODULE_KEYS.LEAVE]: 14,
  [APPROVAL_MODULE_KEYS.COMPENSATORY]: 19,
  [APPROVAL_MODULE_KEYS.OVERTIME]: 15,
  [APPROVAL_MODULE_KEYS.TRAVEL_REIMBURSE]: 16,
  [APPROVAL_MODULE_KEYS.COST_REIMBURSE]: 17,
@@ -57,6 +59,12 @@
    businessType: APPROVAL_BUSINESS_TYPE[APPROVAL_MODULE_KEYS.LEAVE],
    typeLabels: ["请假", "请假申请", "请假审批"],
  },
  [APPROVAL_MODULE_KEYS.COMPENSATORY]: {
    label: "调休申请",
    approvalType: "compensatory",
    businessType: APPROVAL_BUSINESS_TYPE[APPROVAL_MODULE_KEYS.COMPENSATORY],
    typeLabels: ["调休", "调休申请", "调休审批"],
  },
  [APPROVAL_MODULE_KEYS.OVERTIME]: {
    label: "加班申请",
    approvalType: "overtime",

 src/views/officeProcessAutomation/AttendManage/compensatory-leave/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,314 @@
<!--OA模块：调休申请-->
<template>
  <div class="app-container">
    <div class="search_form mb20">
      <div>
        <span class="search_title">审批单号：</span>
        <el-input
          v-model="searchForm.instanceNo"
          style="width: 220px"
          placeholder="请输入审批单号"
          clearable
          @keyup.enter="onSearch"
        />
        <span class="search_title" style="margin-left: 12px">申请人：</span>
        <el-input
          v-model="searchForm.applicantKeyword"
          style="width: 220px"
          placeholder="姓名或编号"
          clearable
          :prefix-icon="Search"
          @keyup.enter="onSearch"
        />
        <el-button type="primary" style="margin-left: 10px" @click="onSearch">搜索</el-button>
        <el-button @click="resetSearch">重置</el-button>
      </div>
      <div>
        <el-button type="primary" @click="openAddWithTemplate">新增调休申请</el-button>
      </div>
    </div>
    <div class="table_list">
      <PIMTable
        rowKey="id"
        :column="tableColumn"
        :tableData="tableData"
        :page="page"
        :isSelection="false"
        :tableLoading="tableLoading"
        @pagination="onPagination"
        :total="page.total"
      />
    </div>

    <ApprovalInstanceSubmitDialog
      v-model="submitDialog.visible"
      :title="submitDialogTitle"
      :form="submitForm"
      :rules="submitFormRules"
      :fields="submitFormFields"
      :active-template="activeTemplate"
      :user-options="flowUserOptions"
      :is-edit="isSubmitEdit"
      :saving="submitSaving"
      :form-ref="submitFormRef"
      flow-attachments-only
      @submit="onSubmit"
    >
      <template #before="{ form, fields }">
        <FormPayloadFields :fields="displayTemplateFields(fields)" :form-payload="form.formPayload" />
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="调休余额" prop="compensatoryBalanceHours">
              <el-input-number
                v-model="form.compensatoryBalanceHours"
                :min="0"
                :max="9999"
                :precision="2"
                :step="1"
                controls-position="right"
                placeholder="小时"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="调休时长">
              <el-input :model-value="compensatoryDurationDisplay(form)" readonly placeholder="根据模板中调休时间自动计算">
                <template #append>小时</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </template>
    </ApprovalInstanceSubmitDialog>

    <ApprovalTemplateBindDialog
      v-model:visible="templateBindVisible"
      :module-key="APPROVAL_MODULE_KEYS.COMPENSATORY"
      skip-form-confirm
      @confirm="onTemplateBound"
      @closed="onTemplateBindClosed"
    />

    <ApprovalInstanceDetailDialog
      v-model="detailDialog.visible"
      title="调休申请详情"
      :row="detailRow"
      @edit="openEditFromDetail"
    />
  </div>
</template>

<script setup>
import { Search } from "@element-plus/icons-vue";
import dayjs from "dayjs";
import { userListNoPageByTenantId } from "@/api/system/user.js";
import { ElMessage } from "element-plus";
import { computed, onMounted, reactive, ref, watch } from "vue";
import FormPayloadFields from "../../ApproveManage/approve-list/components/FormPayloadFields.vue";
import ApprovalInstanceDetailDialog from "../../ApproveManage/approve-shared/components/ApprovalInstanceDetailDialog.vue";
import ApprovalInstanceSubmitDialog from "../../ApproveManage/approve-shared/components/ApprovalInstanceSubmitDialog.vue";
import ApprovalTemplateBindDialog from "../../ApproveManage/approve-shared/components/ApprovalTemplateBindDialog.vue";
import { buildInstanceTableColumns } from "../../ApproveManage/approve-shared/approvalInstanceFormConfigTable.js";
import { APPROVAL_MODULE_KEYS } from "../../ApproveManage/approve-shared/approvalModuleRegistry.js";
import { useApprovalInstanceModule } from "../../ApproveManage/approve-shared/useApprovalInstanceModule.js";
import { useFlowUserOptions } from "../../ApproveManage/approve-shared/useFlowUserOptions.js";
import { SELECT_OPTION_SOURCE } from "../../ApproveManage/approve-template/selectOptionSource.js";

function isCompensatoryBalanceField(field) {
  const label = String(field?.label || "");
  return label.includes("调休余额") || field?.key === "compensatoryBalanceHours";
}

function isCompensatoryDurationField(field) {
  const label = String(field?.label || "");
  return label.includes("调休时长") || field?.key === "compensatoryDurationHours";
}

function displayTemplateFields(fields = []) {
  return (fields || []).filter((f) => !isCompensatoryBalanceField(f) && !isCompensatoryDurationField(f));
}

function findCompensatoryTimeTemplateField(fields = []) {
  return (
    fields.find((f) => f?.type === "datetimerange" && String(f?.label || "").includes("调休时间")) ||
    fields.find((f) => f?.type === "datetimerange" && f?.key === "dateRange") ||
    fields.find((f) => f?.type === "datetimerange") ||
    null
  );
}

function findApplicantTemplateField(fields = []) {
  return (
    fields.find((f) => String(f?.label || "").includes("申请人")) ||
    fields.find((f) => f?.type === "select" && f?.optionSource === SELECT_OPTION_SOURCE.USER) ||
    null
  );
}

function resolveCompensatoryTimeRange(payload, compensatoryTimeField) {
  if (!compensatoryTimeField?.key) return { start: "", end: "" };
  const val = payload?.[compensatoryTimeField.key];
  if (!Array.isArray(val) || val.length < 2) return { start: "", end: "" };
  return { start: val[0] || "", end: val[1] || "" };
}

function computeCompensatoryHours(startStr, endStr) {
  if (!startStr || !endStr) return null;
  const t0 = dayjs(startStr);
  const t1 = dayjs(endStr);
  if (!t0.isValid() || !t1.isValid() || !t1.isAfter(t0)) return null;
  const hours = t1.diff(t0, "millisecond") / (60 * 60 * 1000);
  return Math.round(hours * 100) / 100;
}

function compensatoryDurationDisplay(form) {
  const compensatoryTimeField = findCompensatoryTimeTemplateField(form.formFieldDefs);
  const { start, end } = resolveCompensatoryTimeRange(form.formPayload, compensatoryTimeField);
  const h = computeCompensatoryHours(start, end);
  return h == null ? "" : String(h);
}

const searchForm = reactive({
  instanceNo: "",
  applicantKeyword: "",
});

function validateCompensatoryBeforeSave() {
  const compensatoryTimeField = findCompensatoryTimeTemplateField(submitForm.formFieldDefs);
  const { start, end } = resolveCompensatoryTimeRange(submitForm.formPayload, compensatoryTimeField);
  if (computeCompensatoryHours(start, end) == null) {
    ElMessage.warning("请检查模板中的调休时间，结束时间须晚于开始时间");
    throw new Error("invalid compensatory time");
  }
}

const mod = useApprovalInstanceModule({
  moduleKey: APPROVAL_MODULE_KEYS.COMPENSATORY,
  beforeSave: validateCompensatoryBeforeSave,
  extraFormRules: {
    compensatoryBalanceHours: [{ required: true, message: "请填写调休余额", trigger: "blur" }],
  },
});

const {
  tableData,
  tableLoading,
  page,
  detailDialog,
  detailRow,
  submitDialog,
  submitEditRow,
  submitForm,
  submitFormRef,
  submitSaving,
  isSubmitEdit,
  activeTemplate,
  submitFormFields,
  submitFormRules,
  submitDialogTitle,
  templateBindVisible,
  handleQuery,
  initModuleList,
  pagination,
  openAddWithTemplate,
  onTemplateBound,
  onTemplateBindClosed,
  openEditFromDetail,
  submitInstanceForm,
  buildTableActions,
} = mod;

const { flowUserOptions, loadFlowUsers } = useFlowUserOptions();
const allUsersCache = ref([]);

const applicantTemplateField = computed(() =>
  findApplicantTemplateField(submitForm.formFieldDefs)
);

function unwrapArray(payload) {
  if (Array.isArray(payload)) return payload;
  if (payload && Array.isArray(payload.data)) return payload.data;
  return [];
}

async function loadUserPool() {
  try {
    const res = await userListNoPageByTenantId();
    allUsersCache.value = unwrapArray(res);
  } catch {
    allUsersCache.value = [];
  }
}

watch(
  () => submitDialog.visible,
  (v) => {
    if (!v) return;
    if (submitForm.compensatoryBalanceHours == null && isSubmitEdit.value) {
      submitForm.compensatoryBalanceHours =
        submitEditRow.value?.formPayload?.compensatoryBalanceHours ??
        submitEditRow.value?.compensatoryBalanceHours;
    }
    if (submitForm.compensatoryBalanceHours == null && !isSubmitEdit.value) {
      submitForm.compensatoryBalanceHours = undefined;
    }
  }
);

watch(
  () => {
    const key = applicantTemplateField.value?.key;
    return key ? submitForm.formPayload[key] : undefined;
  },
  async (uid) => {
    if (!applicantTemplateField.value || !uid) return;
    if (!allUsersCache.value.length) await loadUserPool();
  }
);

const tableColumn = buildInstanceTableColumns(tableData, buildTableActions, {
  moduleKey: APPROVAL_MODULE_KEYS.COMPENSATORY,
});

function onSearch() {
  handleQuery(searchForm);
}

function resetSearch() {
  searchForm.instanceNo = "";
  searchForm.applicantKeyword = "";
  onSearch();
}

function onPagination(obj) {
  pagination(obj, searchForm);
}

async function onSubmit() {
  const ok = await submitInstanceForm({ skipValidate: true });
  if (ok) ElMessage.success(isSubmitEdit.value ? "修改成功" : "提交成功");
}

onMounted(async () => {
  loadFlowUsers();
  await initModuleList(searchForm);
});
</script>

<style scoped>
.mb20 {
  margin-bottom: 20px;
}
.search_form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.search_title {
  font-size: 14px;
  color: var(--el-text-color-regular);
}
</style>