| | |
| | | <div class="search_actions"> |
| | | <el-button type="success" plain @click="handleImportClick">导入</el-button> |
| | | <el-button type="warning" plain @click="handleExport">导出</el-button> |
| | | <el-button type="primary" @click="openFormDialog('add')">新增加班申请</el-button> |
| | | <el-button type="primary" @click="openAddWithTemplate">新增加班申请</el-button> |
| | | </div> |
| | | </div> |
| | | <input ref="importInputRef" type="file" accept="application/json,.json" class="sr-only-input" @change="onImportFile" /> |
| | |
| | | |
| | | <!-- 新增 / 编辑 --> |
| | | <el-dialog |
| | | v-if="formDialog.visible" |
| | | v-model="formDialog.visible" |
| | | :title="formDialog.title" |
| | | width="1040px" |
| | | width="960px" |
| | | append-to-body |
| | | destroy-on-close |
| | | class="overtime-apply-form-dialog" |
| | | @closed="onFormClosed" |
| | | > |
| | | <el-form ref="formRef" :model="form" :rules="formRules" label-width="140px" class="overtime-apply-form"> |
| | | <el-row :gutter="24"> |
| | | <el-col :span="24"> |
| | | <el-form-item label="申请人" prop="applicantId"> |
| | | <el-select |
| | | v-model="form.applicantId" |
| | | filterable |
| | | remote |
| | | clearable |
| | | reserve-keyword |
| | | placeholder="请选择或搜索申请人" |
| | | style="width: 100%" |
| | | :remote-method="remoteSearchApplicantForm" |
| | | :loading="applicantFormSearchLoading" |
| | | @change="onApplicantChange" |
| | | <el-form-item v-if="form.templateSnapshot" label="审批模板"> |
| | | <span class="template-name">{{ form.templateSnapshot.label || form.templateName }}</span> |
| | | <el-button |
| | | v-if="formDialog.mode === 'add'" |
| | | type="primary" |
| | | link |
| | | class="ml12" |
| | | @click="reopenTemplateBind" |
| | | > |
| | | <el-option |
| | | v-for="u in applicantFormOptions" |
| | | :key="u.userId" |
| | | :label="userSelectLabel(u)" |
| | | :value="u.userId" |
| | | /> |
| | | </el-select> |
| | | 更换模板 |
| | | </el-button> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row :gutter="24"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="加班类型" prop="overtimeType"> |
| | | <el-select v-model="form.overtimeType" placeholder="请选择加班类型" clearable filterable style="width: 100%"> |
| | | <el-option v-for="opt in OVERTIME_TYPE_OPTIONS" :key="opt.value" :label="opt.label" :value="opt.value" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="加班日期" prop="overtimeDate"> |
| | | <el-date-picker |
| | | v-model="form.overtimeDate" |
| | | type="date" |
| | | placeholder="请选择加班日期" |
| | | format="YYYY-MM-DD" |
| | | value-format="YYYY-MM-DD" |
| | | style="width: 100%" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row :gutter="24"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="加班开始日期" prop="overtimeStartTime"> |
| | | <el-date-picker |
| | | v-model="form.overtimeStartTime" |
| | | type="datetime" |
| | | placeholder="请选择开始时间" |
| | | format="YYYY-MM-DD HH:mm:ss" |
| | | value-format="YYYY-MM-DD HH:mm:ss" |
| | | style="width: 100%" |
| | | @change="onOvertimeRangeChange" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="加班结束日期" prop="overtimeEndTime"> |
| | | <el-date-picker |
| | | v-model="form.overtimeEndTime" |
| | | type="datetime" |
| | | placeholder="请选择结束时间" |
| | | format="YYYY-MM-DD HH:mm:ss" |
| | | value-format="YYYY-MM-DD HH:mm:ss" |
| | | style="width: 100%" |
| | | @change="onOvertimeRangeChange" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | |
| | | <FormPayloadFields :fields="templateDisplayFields" :form-payload="form.formPayload" /> |
| | | <el-row :gutter="24"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="加班时长"> |
| | | <el-input :model-value="overtimeHoursDisplay" readonly placeholder="根据起止时间自动计算"> |
| | | <el-input :model-value="overtimeHoursDisplay" readonly placeholder="根据模板中加班时间自动计算"> |
| | | <template #append>小时</template> |
| | | </el-input> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row :gutter="24"> |
| | | <el-col :span="24"> |
| | | <el-form-item label="审批流程" prop="approvalFlowNodes"> |
| | | <ApprovalFlowEditor |
| | | v-model="form.approvalFlowNodes" |
| | | <ApprovalTemplateFormSection |
| | | :active-template="form.templateSnapshot" |
| | | :fields="form.formFieldDefs" |
| | | :form-payload="form.formPayload" |
| | | v-model:flow-nodes="form.flowNodes" |
| | | v-model:attachments="form.storageBlobDTOs" |
| | | :template-attachments="form.templateAttachments" |
| | | :user-options="flowUserOptions" |
| | | @update:model-value="onApprovalFlowChange" |
| | | flow-attachments-only |
| | | hide-template-name |
| | | :allow-change-template="false" |
| | | /> |
| | | <p class="flow-tip">至少保留一个节点;每个节点选择一名审批人;可新增、删除或调整顺序。</p> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row :gutter="24"> |
| | | <el-col :span="24"> |
| | | <el-form-item label="加班事由" prop="overtimeReason"> |
| | | <el-input |
| | | v-model="form.overtimeReason" |
| | | type="textarea" |
| | | :rows="4" |
| | | placeholder="请填写加班事由" |
| | | maxlength="2000" |
| | | show-word-limit |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row :gutter="24"> |
| | | <el-col :span="24"> |
| | | <el-form-item label="附件"> |
| | | <div class="upload-block"> |
| | | <FileUpload v-model:file-list="form.attachmentList" :limit="10" button-text="点击选择文件" /> |
| | | </div> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | </el-form> |
| | | <template #footer> |
| | | <div class="dialog-footer"> |
| | |
| | | </div> |
| | | </template> |
| | | </el-dialog> |
| | | |
| | | <ApprovalTemplateBindDialog |
| | | v-model:visible="templateBindVisible" |
| | | :module-key="APPROVAL_MODULE_KEYS.OVERTIME" |
| | | skip-form-confirm |
| | | @confirm="onTemplateBound" |
| | | @closed="onTemplateBindClosed" |
| | | /> |
| | | |
| | | <!-- 详情 --> |
| | | <el-dialog v-model="detailDialog.visible" title="加班申请详情" width="720px" append-to-body> |
| | |
| | | <el-descriptions-item label="加班时长">{{ formatHours(detailRow.overtimeHours) }}</el-descriptions-item> |
| | | <el-descriptions-item label="加班事由">{{ detailRow.overtimeReason }}</el-descriptions-item> |
| | | <el-descriptions-item label="审批流程"> |
| | | <template v-if="sortedApprovalNodes(detailRow).length"> |
| | | <template v-if="detailFlowSteps(detailRow).length"> |
| | | <div class="detail-flow-chain"> |
| | | <template v-for="(n, i) in sortedApprovalNodes(detailRow)" :key="i"> |
| | | <span class="detail-flow-step">{{ i + 1 }}. {{ approvalNodeLabel(n) }}</span> |
| | | <span v-if="i < sortedApprovalNodes(detailRow).length - 1" class="detail-flow-sep">→</span> |
| | | <template v-for="(step, i) in detailFlowSteps(detailRow)" :key="i"> |
| | | <span class="detail-flow-step">{{ step }}</span> |
| | | <span v-if="i < detailFlowSteps(detailRow).length - 1" class="detail-flow-sep">→</span> |
| | | </template> |
| | | </div> |
| | | </template> |
| | |
| | | <el-descriptions-item label="审批结果">{{ approvalResultLabel(detailRow.approvalResult) }}</el-descriptions-item> |
| | | <el-descriptions-item label="创建时间">{{ detailRow.createTime || "—" }}</el-descriptions-item> |
| | | <el-descriptions-item label="附件"> |
| | | <template v-if="detailRow.attachmentList?.length"> |
| | | <el-tag v-for="(f, i) in detailRow.attachmentList" :key="i" class="mr6 mb6" type="info"> |
| | | <template v-if="rowAttachmentList(detailRow).length"> |
| | | <el-tag v-for="(f, i) in rowAttachmentList(detailRow)" :key="i" class="mr6 mb6" type="info"> |
| | | {{ f.name }} |
| | | </el-tag> |
| | | </template> |
| | |
| | | |
| | | <!-- 附件列表 --> |
| | | <el-dialog v-model="filesDialog.visible" title="附件" width="520px" append-to-body> |
| | | <el-table v-if="filesDialog.row?.attachmentList?.length" :data="filesDialog.row.attachmentList" border> |
| | | <el-table v-if="rowAttachmentList(filesDialog.row).length" :data="rowAttachmentList(filesDialog.row)" border> |
| | | <el-table-column type="index" label="序号" width="60" align="center" /> |
| | | <el-table-column prop="name" label="文件名" min-width="200" show-overflow-tooltip /> |
| | | <el-table-column label="操作" width="100" align="center"> |
| | |
| | | <script setup> |
| | | import { Search } from "@element-plus/icons-vue"; |
| | | import dayjs from "dayjs"; |
| | | import FileUpload from "@/components/AttachmentUpload/file/index.vue"; |
| | | import ApprovalFlowEditor from "./components/ApprovalFlowEditor.vue"; |
| | | import { userListNoPageByTenantId } from "@/api/system/user.js"; |
| | | import { computed, getCurrentInstance, nextTick, reactive, ref, watch } from "vue"; |
| | | import { computed, getCurrentInstance, nextTick, onMounted, reactive, ref, watch } from "vue"; |
| | | import ApprovalTemplateBindDialog from "../../ApproveManage/approve-shared/components/ApprovalTemplateBindDialog.vue"; |
| | | import ApprovalTemplateFormSection from "../../ApproveManage/approve-shared/components/ApprovalTemplateFormSection.vue"; |
| | | import FormPayloadFields from "../../ApproveManage/approve-list/components/FormPayloadFields.vue"; |
| | | import { APPROVAL_MODULE_KEYS } from "../../ApproveManage/approve-shared/approvalModuleRegistry.js"; |
| | | import { |
| | | applyBindingToForm, |
| | | attachmentDisplayName, |
| | | buildFormPayloadRules, |
| | | validateTemplateBinding, |
| | | } from "../../ApproveManage/approve-shared/approvalTemplateBindingUtils.js"; |
| | | import { useFlowUserOptions } from "../../ApproveManage/approve-shared/useFlowUserOptions.js"; |
| | | import { SELECT_OPTION_SOURCE } from "../../ApproveManage/approve-template/selectOptionSource.js"; |
| | | |
| | | /** 加班类型(value 与后端对齐占位) */ |
| | | const OVERTIME_TYPE_OPTIONS = [ |
| | |
| | | { label: "休息日加班", value: "weekend" }, |
| | | { label: "法定节假日加班", value: "holiday" }, |
| | | ]; |
| | | |
| | | /** 本地演示:两条空节点,提交前须为每节点选择审批人 */ |
| | | function demoApprovalFlowNodes() { |
| | | return [ |
| | | { approverId: null, approverName: "", sortOrder: 1, nodeOrder: 1, roleName: "", roleCode: "" }, |
| | | { approverId: null, approverName: "", sortOrder: 2, nodeOrder: 2, roleName: "", roleCode: "" }, |
| | | ]; |
| | | } |
| | | |
| | | function sortedApprovalNodes(row) { |
| | | const list = row?.approvalFlowNodes; |
| | | if (!Array.isArray(list) || !list.length) return []; |
| | | return [...list].sort((a, b) => (a.sortOrder ?? a.nodeOrder ?? 0) - (b.sortOrder ?? b.nodeOrder ?? 0)); |
| | | } |
| | | |
| | | function approvalNodeLabel(n) { |
| | | const name = (n.approverName || "").trim(); |
| | | if (name) return name; |
| | | return "未选择审批人"; |
| | | } |
| | | |
| | | function overtimeTypeLabel(v) { |
| | | const hit = OVERTIME_TYPE_OPTIONS.find((x) => x.value === v); |
| | |
| | | overtimeDate: "", |
| | | overtimeStartTime: "", |
| | | overtimeEndTime: "", |
| | | overtimeHours: null, |
| | | overtimeReason: "", |
| | | attachmentList: [], |
| | | approvalFlowNodes: [ |
| | | { approverId: null, approverName: "", sortOrder: 1, nodeOrder: 1, roleName: "", roleCode: "" }, |
| | | ], |
| | | hasTemplateBinding: false, |
| | | templateId: "", |
| | | templateName: "", |
| | | templateSnapshot: null, |
| | | formFieldDefs: [], |
| | | formPayload: {}, |
| | | flowNodes: [], |
| | | templateAttachments: [], |
| | | storageBlobDTOs: [], |
| | | }); |
| | | |
| | | const { proxy } = getCurrentInstance(); |
| | |
| | | if (payload && Array.isArray(payload.data)) return payload.data; |
| | | if (payload && Array.isArray(payload.rows)) return payload.rows; |
| | | return []; |
| | | } |
| | | |
| | | function isActiveUser(u) { |
| | | if (u.delFlag === "2" || u.delFlag === 2) return false; |
| | | if (u.status == null) return true; |
| | | return String(u.status) === "0"; |
| | | } |
| | | |
| | | function approvalResultLabel(v) { |
| | | if (v === "approved") return "已通过"; |
| | | if (v === "rejected") return "已驳回"; |
| | | if (v === "cancelled") return "已撤销"; |
| | | return "待审批"; |
| | | } |
| | | |
| | | /** 按起止时间计算加班时长(小时,保留两位小数) */ |
| | | function computeOvertimeHours(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 formatHours(v) { |
| | | if (v == null || v === "") return "—"; |
| | | return `${v} 小时`; |
| | | } |
| | | |
| | | const allUsersCache = ref([]); |
| | | |
| | | async function loadUserPool() { |
| | | try { |
| | | const res = await userListNoPageByTenantId(); |
| | | allUsersCache.value = unwrapArray(res); |
| | | } catch { |
| | | allUsersCache.value = []; |
| | | } |
| | | } |
| | | |
| | | function userSelectLabel(u) { |
| | | const nick = u.nickName || ""; |
| | | const name = u.userName || ""; |
| | | if (nick && name && nick !== name) return `${nick}(${name})`; |
| | | return nick || name || `用户${u.userId ?? u.id ?? ""}`; |
| | | } |
| | | |
| | | function userById(id) { |
| | |
| | | ); |
| | | } |
| | | |
| | | function filterUsersByQuery(query) { |
| | | const list = allUsersCache.value.filter((u) => isActiveUser(u)); |
| | | const q = (query || "").trim().toLowerCase(); |
| | | if (!q) return [...list]; |
| | | return list.filter((u) => { |
| | | const nick = (u.nickName || "").toLowerCase(); |
| | | const uname = (u.userName || "").toLowerCase(); |
| | | const phone = (u.phonenumber || u.phone || "").toString(); |
| | | return nick.includes(q) || uname.includes(q) || phone.includes(q); |
| | | function isOvertimeHoursField(field) { |
| | | const label = String(field?.label || ""); |
| | | return label.includes("加班时长") || field?.key === "overtimeHours"; |
| | | } |
| | | |
| | | function findOvertimeTimeTemplateField(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 resolveOvertimeTimeRange(payload, overtimeTimeField) { |
| | | if (!overtimeTimeField?.key) return { start: "", end: "" }; |
| | | const val = payload?.[overtimeTimeField.key]; |
| | | if (!Array.isArray(val) || val.length < 2) return { start: "", end: "" }; |
| | | return { start: val[0] || "", end: val[1] || "" }; |
| | | } |
| | | |
| | | /** 按起止时间计算加班时长(小时,保留两位小数) */ |
| | | function computeOvertimeHours(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 formatHours(v) { |
| | | if (v == null || v === "") return "—"; |
| | | return `${v} 小时`; |
| | | } |
| | | |
| | | function mapStorageBlobsToAttachmentList(blobs) { |
| | | return (blobs || []).map((f) => ({ |
| | | name: attachmentDisplayName(f), |
| | | url: f.url || f.downloadURL || f.previewURL || f.previewUrl, |
| | | })); |
| | | } |
| | | |
| | | function rowAttachmentList(row) { |
| | | if (!row) return []; |
| | | if (row.attachmentList?.length) return row.attachmentList; |
| | | return mapStorageBlobsToAttachmentList(row.storageBlobDTOs); |
| | | } |
| | | |
| | | function approvalResultLabel(v) { |
| | | if (v === "approved") return "已通过"; |
| | | if (v === "rejected") return "已驳回"; |
| | | if (v === "cancelled") return "已撤销"; |
| | | return "待审批"; |
| | | } |
| | | |
| | | function sortedApprovalNodes(row) { |
| | | const list = row?.approvalFlowNodes; |
| | | if (!Array.isArray(list) || !list.length) return []; |
| | | return [...list].sort((a, b) => (a.sortOrder ?? a.nodeOrder ?? 0) - (b.sortOrder ?? b.nodeOrder ?? 0)); |
| | | } |
| | | |
| | | function approvalNodeLabel(n) { |
| | | const name = (n.approverName || "").trim(); |
| | | return name || "未选择审批人"; |
| | | } |
| | | |
| | | /** 详情审批流程:优先模板 flowNodes,兼容旧版 approvalFlowNodes */ |
| | | function detailFlowSteps(row) { |
| | | const nodes = row?.flowNodes; |
| | | if (Array.isArray(nodes) && nodes.length) { |
| | | return [...nodes] |
| | | .sort((a, b) => (a.nodeOrder ?? 0) - (b.nodeOrder ?? 0)) |
| | | .map((n, i) => { |
| | | const names = (n.approvers || []) |
| | | .map((a) => (a.approverName || "").trim()) |
| | | .filter(Boolean) |
| | | .join("、"); |
| | | return `${i + 1}. ${names || "未选择审批人"}`; |
| | | }); |
| | | } |
| | | |
| | | const applicantFormSearchLoading = ref(false); |
| | | const applicantFormOptions = ref([]); |
| | | |
| | | async function remoteSearchApplicantForm(query) { |
| | | applicantFormSearchLoading.value = true; |
| | | try { |
| | | if (!allUsersCache.value.length) { |
| | | await loadUserPool(); |
| | | } |
| | | applicantFormOptions.value = filterUsersByQuery(query); |
| | | } finally { |
| | | applicantFormSearchLoading.value = false; |
| | | } |
| | | return sortedApprovalNodes(row).map((n, i) => `${i + 1}. ${approvalNodeLabel(n)}`); |
| | | } |
| | | |
| | | function onApplicantChange(uid) { |
| | | function syncApplicantFromUser(uid) { |
| | | const u = userById(uid); |
| | | if (u) { |
| | | form.applicantId = uid != null && uid !== "" ? uid : ""; |
| | | form.applicantName = u.nickName || u.userName || ""; |
| | | form.applicantNo = applicantNoFromUser(u); |
| | | } else { |
| | | form.applicantId = ""; |
| | | form.applicantName = ""; |
| | | form.applicantNo = ""; |
| | | } |
| | | } |
| | | |
| | | const allUsersCache = ref([]); |
| | | |
| | | async function loadUserPool() { |
| | | try { |
| | | const res = await userListNoPageByTenantId(); |
| | | allUsersCache.value = unwrapArray(res); |
| | | } catch { |
| | | allUsersCache.value = []; |
| | | } |
| | | } |
| | | |
| | |
| | | }); |
| | | const formRef = ref(); |
| | | const form = reactive(createEmptyForm()); |
| | | const templateBindVisible = ref(false); |
| | | const pendingTemplateBinding = ref(null); |
| | | const { flowUserOptions, loadFlowUsers } = useFlowUserOptions(); |
| | | |
| | | const flowUserOptions = computed(() => allUsersCache.value.filter((u) => isActiveUser(u))); |
| | | const overtimeTimeTemplateField = computed(() => findOvertimeTimeTemplateField(form.formFieldDefs)); |
| | | const applicantTemplateField = computed(() => findApplicantTemplateField(form.formFieldDefs)); |
| | | |
| | | const templateDisplayFields = computed(() => |
| | | (form.formFieldDefs || []).filter((f) => !isOvertimeHoursField(f)) |
| | | ); |
| | | |
| | | const overtimeHoursDisplay = computed(() => { |
| | | const h = computeOvertimeHours(form.overtimeStartTime, form.overtimeEndTime); |
| | | const { start, end } = resolveOvertimeTimeRange(form.formPayload, overtimeTimeTemplateField.value); |
| | | const h = computeOvertimeHours(start, end); |
| | | return h == null ? "" : String(h); |
| | | }); |
| | | |
| | | function onOvertimeRangeChange() { |
| | | nextTick(() => { |
| | | formRef.value?.validateField?.("overtimeEndTime"); |
| | | }); |
| | | } |
| | | const formRules = computed(() => buildFormPayloadRules(templateDisplayFields.value)); |
| | | |
| | | function onApprovalFlowChange() { |
| | | nextTick(() => formRef.value?.validateField?.("approvalFlowNodes")); |
| | | watch( |
| | | () => { |
| | | const key = applicantTemplateField.value?.key; |
| | | return key ? form.formPayload[key] : undefined; |
| | | }, |
| | | async (uid) => { |
| | | if (!applicantTemplateField.value) return; |
| | | if (!allUsersCache.value.length) { |
| | | await loadUserPool(); |
| | | } |
| | | syncApplicantFromUser(uid); |
| | | } |
| | | ); |
| | | |
| | | const formRules = { |
| | | applicantId: [{ required: true, message: "请选择申请人", trigger: "change" }], |
| | | overtimeType: [{ required: true, message: "请选择加班类型", trigger: "change" }], |
| | | overtimeDate: [{ required: true, message: "请选择加班日期", trigger: "change" }], |
| | | overtimeStartTime: [{ required: true, message: "请选择加班开始时间", trigger: "change" }], |
| | | overtimeEndTime: [ |
| | | { required: true, message: "请选择加班结束时间", trigger: "change" }, |
| | | { |
| | | validator: (_rule, val, callback) => { |
| | | if (!form.overtimeStartTime || !val) { |
| | | callback(); |
| | | return; |
| | | } |
| | | const h = computeOvertimeHours(form.overtimeStartTime, val); |
| | | if (h == null) { |
| | | callback(new Error("结束时间须晚于开始时间")); |
| | | } else { |
| | | callback(); |
| | | watch( |
| | | () => { |
| | | const key = overtimeTimeTemplateField.value?.key; |
| | | return key ? form.formPayload[key] : undefined; |
| | | }, |
| | | () => { |
| | | const { start, end } = resolveOvertimeTimeRange(form.formPayload, overtimeTimeTemplateField.value); |
| | | form.overtimeStartTime = start; |
| | | form.overtimeEndTime = end; |
| | | form.overtimeHours = computeOvertimeHours(start, end); |
| | | if (start) { |
| | | form.overtimeDate = dayjs(start).format("YYYY-MM-DD"); |
| | | } |
| | | }, |
| | | trigger: "change", |
| | | }, |
| | | ], |
| | | overtimeReason: [{ required: true, message: "请填写加班事由", trigger: "blur" }], |
| | | approvalFlowNodes: [ |
| | | { |
| | | validator: (_rule, _val, callback) => { |
| | | const nodes = form.approvalFlowNodes || []; |
| | | if (!nodes.length) { |
| | | callback(new Error("请至少保留一个审批节点")); |
| | | return; |
| | | } |
| | | if (nodes.some((n) => n.approverId == null || n.approverId === "")) { |
| | | callback(new Error("每个审批节点必须选择一名审批人")); |
| | | return; |
| | | } |
| | | const ids = nodes.map((n) => String(n.approverId)); |
| | | if (new Set(ids).size !== ids.length) { |
| | | callback(new Error("同一审批人不能重复出现在多个节点")); |
| | | return; |
| | | } |
| | | callback(); |
| | | }, |
| | | trigger: "change", |
| | | }, |
| | | ], |
| | | }; |
| | | { deep: true } |
| | | ); |
| | | |
| | | const detailDialog = reactive({ visible: false }); |
| | | const detailRow = ref({}); |
| | | |
| | | const filesDialog = reactive({ visible: false, row: null }); |
| | | |
| | | const importInputRef = ref(null); |
| | | |
| | | function handleQuery() { |
| | |
| | | overtimeEndTime: raw.overtimeEndTime ?? "", |
| | | overtimeHours: hours == null || Number.isNaN(hours) ? 0 : Math.round(hours * 100) / 100, |
| | | overtimeReason: raw.overtimeReason ?? "", |
| | | hasTemplateBinding: false, |
| | | approvalFlowNodes: Array.isArray(raw.approvalFlowNodes) && raw.approvalFlowNodes.length |
| | | ? raw.approvalFlowNodes.map((n) => ({ ...n })) |
| | | : [], |
| | |
| | | reader.readAsText(file, "utf-8"); |
| | | } |
| | | |
| | | async function openFormDialog(mode, row) { |
| | | formDialog.mode = mode; |
| | | formDialog.title = mode === "add" ? "新增加班申请" : "编辑加班申请"; |
| | | if (!allUsersCache.value.length) { |
| | | await loadUserPool(); |
| | | function openAddWithTemplate() { |
| | | formDialog.visible = false; |
| | | pendingTemplateBinding.value = null; |
| | | templateBindVisible.value = true; |
| | | } |
| | | |
| | | function onTemplateBound(binding) { |
| | | pendingTemplateBinding.value = binding; |
| | | } |
| | | |
| | | async function onTemplateBindClosed() { |
| | | const binding = pendingTemplateBinding.value; |
| | | if (!binding) return; |
| | | pendingTemplateBinding.value = null; |
| | | await openFormWithBinding(binding); |
| | | } |
| | | |
| | | async function openFormWithBinding(binding) { |
| | | Object.assign(form, createEmptyForm()); |
| | | applyBindingToForm(form, binding); |
| | | form.hasTemplateBinding = true; |
| | | formDialog.mode = "add"; |
| | | formDialog.title = "新增加班申请"; |
| | | await Promise.all([loadUserPool(), loadFlowUsers()]); |
| | | const applicantKey = applicantTemplateField.value?.key; |
| | | if (applicantKey && form.formPayload[applicantKey]) { |
| | | syncApplicantFromUser(form.formPayload[applicantKey]); |
| | | } |
| | | const { start, end } = resolveOvertimeTimeRange(form.formPayload, overtimeTimeTemplateField.value); |
| | | form.overtimeStartTime = start; |
| | | form.overtimeEndTime = end; |
| | | form.overtimeHours = computeOvertimeHours(start, end); |
| | | if (start) form.overtimeDate = dayjs(start).format("YYYY-MM-DD"); |
| | | formDialog.visible = true; |
| | | nextTick(() => formRef.value?.clearValidate?.()); |
| | | } |
| | | |
| | | function reopenTemplateBind() { |
| | | formDialog.visible = false; |
| | | pendingTemplateBinding.value = null; |
| | | templateBindVisible.value = true; |
| | | } |
| | | |
| | | async function openFormDialog(mode, row) { |
| | | if (mode === "edit" && row && !row.hasTemplateBinding) { |
| | | proxy?.$modal?.msgWarning?.("该记录为旧版数据,请重新通过模板发起申请"); |
| | | return; |
| | | } |
| | | formDialog.mode = mode; |
| | | formDialog.title = "编辑加班申请"; |
| | | Object.assign(form, createEmptyForm()); |
| | | if (mode === "edit" && row) { |
| | | Object.assign(form, { |
| | |
| | | overtimeDate: row.overtimeDate, |
| | | overtimeStartTime: row.overtimeStartTime, |
| | | overtimeEndTime: row.overtimeEndTime, |
| | | overtimeHours: row.overtimeHours, |
| | | overtimeReason: row.overtimeReason, |
| | | attachmentList: JSON.parse(JSON.stringify(row.attachmentList || [])), |
| | | approvalFlowNodes: row.approvalFlowNodes?.length |
| | | ? JSON.parse(JSON.stringify(row.approvalFlowNodes)) |
| | | : [], |
| | | hasTemplateBinding: true, |
| | | templateId: row.templateId, |
| | | templateName: row.templateName, |
| | | templateSnapshot: row.templateSnapshot, |
| | | formFieldDefs: row.formFieldDefs || [], |
| | | formPayload: JSON.parse(JSON.stringify(row.formPayload || {})), |
| | | flowNodes: JSON.parse(JSON.stringify(row.flowNodes || [])), |
| | | templateAttachments: JSON.parse(JSON.stringify(row.templateAttachments || [])), |
| | | storageBlobDTOs: JSON.parse(JSON.stringify(row.storageBlobDTOs || [])), |
| | | }); |
| | | const u = userById(row.applicantId); |
| | | if (u) { |
| | | applicantFormOptions.value = [u]; |
| | | } else if (row.applicantId) { |
| | | applicantFormOptions.value = [ |
| | | { |
| | | userId: row.applicantId, |
| | | nickName: row.applicantName, |
| | | userName: row.applicantNo, |
| | | }, |
| | | ]; |
| | | await loadUserPool(); |
| | | const applicantKey = applicantTemplateField.value?.key; |
| | | if (applicantKey) { |
| | | syncApplicantFromUser(form.formPayload[applicantKey]); |
| | | } |
| | | } else { |
| | | remoteSearchApplicantForm(""); |
| | | loadFlowUsers(); |
| | | } |
| | | formDialog.visible = true; |
| | | nextTick(() => formRef.value?.clearValidate?.()); |
| | |
| | | formRef.value?.resetFields?.(); |
| | | } |
| | | |
| | | /** 从模板填报项同步列表展示字段 */ |
| | | function syncOvertimeFieldsFromPayload() { |
| | | const defs = form.formFieldDefs || []; |
| | | const payload = form.formPayload || {}; |
| | | const overtimeTimeField = findOvertimeTimeTemplateField(defs); |
| | | |
| | | for (const f of defs) { |
| | | const label = String(f.label || ""); |
| | | const val = payload[f.key]; |
| | | |
| | | if (label.includes("申请人") && !label.includes("日期") && !label.includes("时间")) { |
| | | if (val != null && val !== "") { |
| | | form.applicantId = val; |
| | | const u = userById(val); |
| | | if (u) { |
| | | form.applicantName = u.nickName || u.userName || ""; |
| | | form.applicantNo = applicantNoFromUser(u); |
| | | } |
| | | } |
| | | } |
| | | if ((label.includes("加班类型") || f.key === "overtimeType") && f.type === "select") { |
| | | form.overtimeType = val != null && val !== "" ? val : ""; |
| | | } |
| | | if (label.includes("加班日期") && f.type === "date") { |
| | | form.overtimeDate = val || ""; |
| | | } |
| | | if (label.includes("事由") || f.key === "summary" || label.includes("加班事由")) { |
| | | form.overtimeReason = val != null ? String(val) : ""; |
| | | } |
| | | } |
| | | |
| | | const { start, end } = resolveOvertimeTimeRange(payload, overtimeTimeField); |
| | | form.overtimeStartTime = start; |
| | | form.overtimeEndTime = end; |
| | | form.overtimeHours = computeOvertimeHours(start, end); |
| | | if (!form.overtimeDate && start) { |
| | | form.overtimeDate = dayjs(start).format("YYYY-MM-DD"); |
| | | } |
| | | } |
| | | |
| | | async function submitForm() { |
| | | try { |
| | | await formRef.value?.validate?.(); |
| | | } catch { |
| | | return; |
| | | } |
| | | const hours = computeOvertimeHours(form.overtimeStartTime, form.overtimeEndTime); |
| | | if (hours == null) { |
| | | proxy?.$modal?.msgWarning?.("请检查加班起止时间,结束时间须晚于开始时间"); |
| | | const flowCheck = validateTemplateBinding({ flowNodes: form.flowNodes }); |
| | | if (!flowCheck.ok) { |
| | | proxy?.$modal?.msgWarning?.(flowCheck.message || "请完善审批流程"); |
| | | return; |
| | | } |
| | | form.flowNodes = flowCheck.nodes; |
| | | |
| | | const applicantKey = applicantTemplateField.value?.key; |
| | | if (applicantKey) { |
| | | syncApplicantFromUser(form.formPayload[applicantKey]); |
| | | } |
| | | syncOvertimeFieldsFromPayload(); |
| | | |
| | | if (form.overtimeHours == null) { |
| | | proxy?.$modal?.msgWarning?.("请检查模板中的加班时间,结束时间须晚于开始时间"); |
| | | return; |
| | | } |
| | | |
| | | const attachmentList = mapStorageBlobsToAttachmentList(form.storageBlobDTOs); |
| | | const payload = { |
| | | applicantId: form.applicantId, |
| | | applicantNo: form.applicantNo, |
| | |
| | | overtimeDate: form.overtimeDate, |
| | | overtimeStartTime: form.overtimeStartTime, |
| | | overtimeEndTime: form.overtimeEndTime, |
| | | overtimeHours: hours, |
| | | overtimeHours: form.overtimeHours, |
| | | overtimeReason: form.overtimeReason, |
| | | approvalFlowNodes: (form.approvalFlowNodes || []).map((n, i) => ({ |
| | | approverId: n.approverId, |
| | | approverName: |
| | | n.approverName || userById(n.approverId)?.nickName || userById(n.approverId)?.userName || "", |
| | | sortOrder: i + 1, |
| | | nodeOrder: i + 1, |
| | | roleName: n.roleName || "", |
| | | roleCode: n.roleCode || "", |
| | | })), |
| | | attachmentList: JSON.parse(JSON.stringify(form.attachmentList || [])), |
| | | hasTemplateBinding: true, |
| | | templateId: form.templateId, |
| | | templateName: form.templateName, |
| | | templateSnapshot: form.templateSnapshot, |
| | | formFieldDefs: form.formFieldDefs, |
| | | formPayload: JSON.parse(JSON.stringify(form.formPayload || {})), |
| | | flowNodes: JSON.parse(JSON.stringify(form.flowNodes || [])), |
| | | templateAttachments: JSON.parse(JSON.stringify(form.templateAttachments || [])), |
| | | storageBlobDTOs: JSON.parse(JSON.stringify(form.storageBlobDTOs || [])), |
| | | attachmentList, |
| | | }; |
| | | if (formDialog.mode === "add") { |
| | | const id = `local_${Date.now()}`; |
| | |
| | | handleQuery(); |
| | | } |
| | | |
| | | onMounted(() => { |
| | | loadFlowUsers(); |
| | | }); |
| | | </script> |
| | | |
| | | <style scoped> |
| | |
| | | white-space: nowrap; |
| | | border: 0; |
| | | } |
| | | .upload-block { |
| | | width: 100%; |
| | | } |
| | | .mr6 { |
| | | margin-right: 6px; |
| | | } |
| | |
| | | .overtime-apply-form :deep(.el-form-item) { |
| | | margin-bottom: 18px; |
| | | } |
| | | .template-name { |
| | | font-weight: 600; |
| | | color: var(--el-text-color-primary); |
| | | } |
| | | .ml12 { |
| | | margin-left: 12px; |
| | | } |
| | | .overtime-apply-form-dialog :deep(.el-dialog__body) { |
| | | padding-top: 12px; |
| | | } |
| | | .flow-tip { |
| | | margin: 10px 0 0; |
| | | font-size: 12px; |
| | | line-height: 1.5; |
| | | color: var(--el-text-color-secondary); |
| | | } |
| | | .detail-flow-chain { |
| | | display: flex; |