| | |
| | | <el-button @click="resetSearch">重置</el-button> |
| | | </div> |
| | | <div> |
| | | <el-button type="primary" @click="openFormDialog('add')">新增请假申请</el-button> |
| | | <el-button type="primary" @click="openAddWithTemplate">新增请假申请</el-button> |
| | | </div> |
| | | </div> |
| | | <div class="table_list"> |
| | |
| | | |
| | | <!-- 新增 / 编辑 --> |
| | | <el-dialog |
| | | v-if="formDialog.visible" |
| | | v-model="formDialog.visible" |
| | | :title="formDialog.title" |
| | | width="960px" |
| | |
| | | @closed="onFormClosed" |
| | | > |
| | | <el-form ref="formRef" :model="form" :rules="formRules" label-width="140px" class="leave-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> |
| | | |
| | | <FormPayloadFields :fields="templateDisplayFields" :form-payload="form.formPayload" /> |
| | | <el-row :gutter="24"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="请假类型" prop="leaveType"> |
| | | <el-select v-model="form.leaveType" placeholder="请选择请假类型" clearable filterable style="width: 100%"> |
| | | <el-option v-for="opt in LEAVE_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="leaveBalanceDays"> |
| | | <el-input-number |
| | |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row :gutter="24"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="请假开始时间" prop="leaveStartTime"> |
| | | <el-date-picker |
| | | v-model="form.leaveStartTime" |
| | | type="datetime" |
| | | placeholder="请选择开始时间" |
| | | format="YYYY-MM-DD HH:mm:ss" |
| | | value-format="YYYY-MM-DD HH:mm:ss" |
| | | style="width: 100%" |
| | | @change="onLeaveRangeChange" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="请假结束时间" prop="leaveEndTime"> |
| | | <el-date-picker |
| | | v-model="form.leaveEndTime" |
| | | type="datetime" |
| | | placeholder="请选择结束时间" |
| | | format="YYYY-MM-DD HH:mm:ss" |
| | | value-format="YYYY-MM-DD HH:mm:ss" |
| | | style="width: 100%" |
| | | @change="onLeaveRangeChange" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row :gutter="24"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="请假时长"> |
| | | <el-input :model-value="leaveDurationDisplay" readonly placeholder="根据起止时间自动计算"> |
| | | <el-input :model-value="leaveDurationDisplay" readonly placeholder="根据模板中请假时间自动计算"> |
| | | <template #append>天</template> |
| | | </el-input> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="审批方式" prop="approvalMode"> |
| | | <el-radio-group v-model="form.approvalMode"> |
| | | <el-radio value="parallel">与签</el-radio> |
| | | <el-radio value="or_sign">或签</el-radio> |
| | | </el-radio-group> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row :gutter="24"> |
| | | <el-col :span="24"> |
| | | <el-form-item label="审批人" prop="approverIds"> |
| | | <el-tree-select |
| | | v-model="form.approverIds" |
| | | :data="approverTreeData" |
| | | multiple |
| | | collapse-tags |
| | | collapse-tags-tooltip |
| | | :max-collapse-tags="2" |
| | | :render-after-expand="false" |
| | | placeholder="请选择审批人(可多选)" |
| | | style="width: 100%" |
| | | :props="{ value: 'id', label: 'label', children: 'children', disabled: 'disabled' }" |
| | | check-strictly |
| | | <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" |
| | | flow-attachments-only |
| | | hide-template-name |
| | | :allow-change-template="false" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row :gutter="24"> |
| | | <el-col :span="24"> |
| | | <el-form-item label="请假事由" prop="leaveReason"> |
| | | <el-input |
| | | v-model="form.leaveReason" |
| | | 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.LEAVE" |
| | | skip-form-confirm |
| | | @confirm="onTemplateBound" |
| | | @closed="onTemplateBindClosed" |
| | | /> |
| | | |
| | | <!-- 详情 --> |
| | | <el-dialog v-model="detailDialog.visible" title="请假申请详情" width="720px" append-to-body> |
| | |
| | | <el-descriptions-item label="审批人">{{ detailRow.approverNames || "—" }}</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 { deptTreeSelect, userListNoPageByTenantId } from "@/api/system/user.js"; |
| | | import { userListNoPageByTenantId } from "@/api/system/user.js"; |
| | | 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 LEAVE_TYPE_OPTIONS = [ |
| | |
| | | leaveBalanceDays: undefined, |
| | | leaveStartTime: "", |
| | | leaveEndTime: "", |
| | | leaveDurationDays: null, |
| | | leaveReason: "", |
| | | approvalMode: "parallel", |
| | | approverIds: [], |
| | | approverNames: "", |
| | | attachmentList: [], |
| | | hasTemplateBinding: false, |
| | | templateId: "", |
| | | templateName: "", |
| | | templateSnapshot: null, |
| | | formFieldDefs: [], |
| | | formPayload: {}, |
| | | flowNodes: [], |
| | | templateAttachments: [], |
| | | storageBlobDTOs: [], |
| | | }); |
| | | |
| | | const { proxy } = getCurrentInstance(); |
| | |
| | | return []; |
| | | } |
| | | |
| | | function filterDisabledDept(deptList) { |
| | | if (!Array.isArray(deptList)) return []; |
| | | return deptList.filter((dept) => { |
| | | if (dept.disabled) return false; |
| | | if (dept.children?.length) { |
| | | dept.children = filterDisabledDept(dept.children); |
| | | } |
| | | return true; |
| | | }); |
| | | } |
| | | |
| | | function getUserDeptId(u) { |
| | | return u.deptId ?? u.sysDeptId ?? u.dept?.deptId ?? u.dept?.id ?? u.dept_id; |
| | | } |
| | | |
| | | function getDeptNodeKey(node) { |
| | | const k = node?.id ?? node?.value ?? node?.deptId; |
| | | if (k == null || k === "") return null; |
| | | return k; |
| | | } |
| | | |
| | | function isActiveUser(u) { |
| | | if (u.delFlag === "2" || u.delFlag === 2) return false; |
| | | if (u.status == null) return true; |
| | | return String(u.status) === "0"; |
| | | } |
| | | |
| | | function userToTreeLeaf(u) { |
| | | return { |
| | | id: String(u.userId ?? u.id), |
| | | label: u.nickName || u.userName || `用户${u.userId ?? u.id}`, |
| | | }; |
| | | } |
| | | |
| | | function buildUsersByDeptId(users) { |
| | | const map = new Map(); |
| | | const unassigned = []; |
| | | for (const u of users) { |
| | | if (!isActiveUser(u)) continue; |
| | | const did = getUserDeptId(u); |
| | | if (did == null || did === "" || did === 0 || did === "0") { |
| | | unassigned.push(u); |
| | | continue; |
| | | } |
| | | const k = String(did); |
| | | if (!map.has(k)) map.set(k, []); |
| | | map.get(k).push(u); |
| | | } |
| | | return { map, unassigned }; |
| | | } |
| | | |
| | | function collectUserLabels(nodes, map) { |
| | | (nodes || []).forEach((n) => { |
| | | if (n.children?.length) { |
| | | collectUserLabels(n.children, map); |
| | | } else if (n.id != null && !String(n.id).startsWith("dept_")) { |
| | | map[String(n.id)] = n.label; |
| | | } |
| | | }); |
| | | } |
| | | |
| | | function mergeDeptTreeWithUsers(nodes, usersByDept) { |
| | | if (!Array.isArray(nodes)) return []; |
| | | const out = []; |
| | | for (const node of nodes) { |
| | | const deptIdRaw = getDeptNodeKey(node); |
| | | if (deptIdRaw == null) continue; |
| | | const sub = mergeDeptTreeWithUsers(node.children || [], usersByDept); |
| | | const usersHere = usersByDept.get(String(deptIdRaw)) || []; |
| | | const userChildren = usersHere.map(userToTreeLeaf); |
| | | const children = [...sub, ...userChildren]; |
| | | if (!children.length) continue; |
| | | out.push({ |
| | | id: `dept_${deptIdRaw}`, |
| | | label: node.label ?? node.deptName ?? "部门", |
| | | disabled: true, |
| | | children, |
| | | }); |
| | | } |
| | | return out; |
| | | } |
| | | |
| | | function buildFlatApproverTree(users) { |
| | | const list = users.filter(isActiveUser).map(userToTreeLeaf); |
| | | if (!list.length) return []; |
| | | return [ |
| | | { |
| | | id: "dept_all_users", |
| | | label: "系统用户", |
| | | disabled: true, |
| | | children: list, |
| | | }, |
| | | ]; |
| | | } |
| | | |
| | | const approverTreeData = ref([]); |
| | | const approverLabelMap = ref({}); |
| | | |
| | | async function loadApproverTree() { |
| | | try { |
| | | const [deptRes, userRes] = await Promise.all([deptTreeSelect(), userListNoPageByTenantId()]); |
| | | let rawTree = unwrapArray(deptRes); |
| | | rawTree = rawTree.length ? JSON.parse(JSON.stringify(rawTree)) : []; |
| | | let deptTree = filterDisabledDept(JSON.parse(JSON.stringify(rawTree))); |
| | | if (!deptTree.length && rawTree.length) { |
| | | deptTree = JSON.parse(JSON.stringify(rawTree)); |
| | | } |
| | | const users = unwrapArray(userRes); |
| | | const { map: usersByDept, unassigned } = buildUsersByDeptId(users); |
| | | let merged = mergeDeptTreeWithUsers(deptTree, usersByDept); |
| | | if (unassigned.length) { |
| | | merged.push({ |
| | | id: "dept_unassigned", |
| | | label: "未分配部门", |
| | | disabled: true, |
| | | children: unassigned.map(userToTreeLeaf), |
| | | }); |
| | | } |
| | | if (!merged.length && users.length) { |
| | | merged = buildFlatApproverTree(users); |
| | | } |
| | | approverTreeData.value = merged; |
| | | const map = {}; |
| | | collectUserLabels(merged, map); |
| | | approverLabelMap.value = map; |
| | | } catch { |
| | | approverTreeData.value = []; |
| | | approverLabelMap.value = {}; |
| | | proxy?.$modal?.msgWarning?.("审批人数据加载失败,请检查网络或稍后重试"); |
| | | } |
| | | } |
| | | |
| | | function resolveApproverNames(ids) { |
| | | if (!ids?.length) return ""; |
| | | const map = approverLabelMap.value; |
| | | return ids.map((id) => map[String(id)] || id).join("、"); |
| | | } |
| | | |
| | | function approvalModeLabel(mode) { |
| | | if (mode === "or_sign") return "或签"; |
| | | return "与签"; |
| | | } |
| | | |
| | | function approvalResultLabel(v) { |
| | | if (v === "approved") return "已通过"; |
| | | if (v === "rejected") return "已驳回"; |
| | | if (v === "cancelled") return "已撤销"; |
| | | return "待审批"; |
| | | } |
| | | |
| | | /** 按起止时间计算请假天数(含时分秒,结果保留两位小数) */ |
| | | function computeLeaveDays(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 days = t1.diff(t0, "millisecond") / (24 * 60 * 60 * 1000); |
| | | return Math.round(days * 100) / 100; |
| | | } |
| | | |
| | | function formatDuration(v) { |
| | | if (v == null || v === "") return "—"; |
| | | return `${v} 天`; |
| | | } |
| | | |
| | | function formatBalance(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) { |
| | |
| | | return undefined; |
| | | } |
| | | |
| | | 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 isLeaveBalanceField(field) { |
| | | const label = String(field?.label || ""); |
| | | return label.includes("假期余额") || field?.key === "leaveBalanceDays"; |
| | | } |
| | | |
| | | 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; |
| | | } |
| | | function isLeaveDurationField(field) { |
| | | const label = String(field?.label || ""); |
| | | return label.includes("请假时长") || field?.key === "leaveDurationDays"; |
| | | } |
| | | |
| | | function onApplicantChange(uid) { |
| | | function findLeaveTimeTemplateField(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 resolveLeaveTimeRange(payload, leaveTimeField) { |
| | | if (!leaveTimeField?.key) return { start: "", end: "" }; |
| | | const val = payload?.[leaveTimeField.key]; |
| | | if (!Array.isArray(val) || val.length < 2) return { start: "", end: "" }; |
| | | return { start: val[0] || "", end: val[1] || "" }; |
| | | } |
| | | |
| | | /** 按起止时间计算请假天数(含时分秒,结果保留两位小数) */ |
| | | function computeLeaveDays(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 days = t1.diff(t0, "millisecond") / (24 * 60 * 60 * 1000); |
| | | return Math.round(days * 100) / 100; |
| | | } |
| | | |
| | | function formatDuration(v) { |
| | | if (v == null || v === "") return "—"; |
| | | return `${v} 天`; |
| | | } |
| | | |
| | | function formatBalance(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 approvalModeLabel(mode) { |
| | | if (mode === "countersign") return "会签"; |
| | | if (mode === "or_sign") return "或签"; |
| | | return "与签"; |
| | | } |
| | | |
| | | function approvalResultLabel(v) { |
| | | if (v === "approved") return "已通过"; |
| | | if (v === "rejected") return "已驳回"; |
| | | if (v === "cancelled") return "已撤销"; |
| | | return "待审批"; |
| | | } |
| | | |
| | | 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); |
| | | form.leaveBalanceDays = mockLeaveBalance(u); |
| | | } else { |
| | | form.applicantId = ""; |
| | | form.applicantName = ""; |
| | | form.applicantNo = ""; |
| | | if (uid == null || uid === "") { |
| | | form.leaveBalanceDays = undefined; |
| | | } |
| | | } |
| | | } |
| | | |
| | | /** 系统用户缓存 */ |
| | | 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 leaveTimeTemplateField = computed(() => findLeaveTimeTemplateField(form.formFieldDefs)); |
| | | const applicantTemplateField = computed(() => findApplicantTemplateField(form.formFieldDefs)); |
| | | |
| | | const templateDisplayFields = computed(() => |
| | | (form.formFieldDefs || []).filter((f) => !isLeaveBalanceField(f) && !isLeaveDurationField(f)) |
| | | ); |
| | | |
| | | const leaveDurationDisplay = computed(() => { |
| | | const d = computeLeaveDays(form.leaveStartTime, form.leaveEndTime); |
| | | const { start, end } = resolveLeaveTimeRange(form.formPayload, leaveTimeTemplateField.value); |
| | | const d = computeLeaveDays(start, end); |
| | | return d == null ? "" : String(d); |
| | | }); |
| | | |
| | | function onLeaveRangeChange() { |
| | | nextTick(() => { |
| | | formRef.value?.validateField?.("leaveEndTime"); |
| | | }); |
| | | } |
| | | |
| | | const formRules = { |
| | | applicantId: [{ required: true, message: "请选择申请人", trigger: "change" }], |
| | | leaveType: [{ required: true, message: "请选择请假类型", trigger: "change" }], |
| | | const formRules = computed(() => ({ |
| | | ...buildFormPayloadRules(templateDisplayFields.value), |
| | | leaveBalanceDays: [ |
| | | { |
| | | required: true, |
| | |
| | | trigger: "blur", |
| | | }, |
| | | ], |
| | | leaveStartTime: [{ required: true, message: "请选择请假开始时间", trigger: "change" }], |
| | | leaveEndTime: [ |
| | | { required: true, message: "请选择请假结束时间", trigger: "change" }, |
| | | { |
| | | validator: (_rule, val, callback) => { |
| | | if (!form.leaveStartTime || !val) { |
| | | callback(); |
| | | return; |
| | | })); |
| | | |
| | | watch( |
| | | () => { |
| | | const key = applicantTemplateField.value?.key; |
| | | return key ? form.formPayload[key] : undefined; |
| | | }, |
| | | async (uid) => { |
| | | if (!applicantTemplateField.value) return; |
| | | if (!allUsersCache.value.length) { |
| | | await loadUserPool(); |
| | | } |
| | | const d = computeLeaveDays(form.leaveStartTime, val); |
| | | if (d == null) { |
| | | callback(new Error("结束时间须晚于开始时间")); |
| | | } else { |
| | | callback(); |
| | | syncApplicantFromUser(uid); |
| | | } |
| | | ); |
| | | |
| | | watch( |
| | | () => { |
| | | const key = leaveTimeTemplateField.value?.key; |
| | | return key ? form.formPayload[key] : undefined; |
| | | }, |
| | | trigger: "change", |
| | | () => { |
| | | const { start, end } = resolveLeaveTimeRange(form.formPayload, leaveTimeTemplateField.value); |
| | | form.leaveStartTime = start; |
| | | form.leaveEndTime = end; |
| | | form.leaveDurationDays = computeLeaveDays(start, end); |
| | | }, |
| | | ], |
| | | leaveReason: [{ required: true, message: "请填写请假事由", trigger: "blur" }], |
| | | approvalMode: [{ required: true, message: "请选择审批方式", trigger: "change" }], |
| | | approverIds: [ |
| | | { |
| | | type: "array", |
| | | required: true, |
| | | message: "请选择审批人", |
| | | trigger: "change", |
| | | }, |
| | | ], |
| | | }; |
| | | { deep: true } |
| | | ); |
| | | |
| | | const detailDialog = reactive({ visible: false }); |
| | | const detailRow = ref({}); |
| | |
| | | proxy?.$modal?.msgWarning?.("暂无下载地址"); |
| | | } |
| | | |
| | | async function openFormDialog(mode, row) { |
| | | formDialog.mode = mode; |
| | | formDialog.title = mode === "add" ? "新增请假申请" : "编辑请假申请"; |
| | | await loadApproverTree(); |
| | | 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 } = resolveLeaveTimeRange(form.formPayload, leaveTimeTemplateField.value); |
| | | form.leaveStartTime = start; |
| | | form.leaveEndTime = end; |
| | | form.leaveDurationDays = computeLeaveDays(start, end); |
| | | 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, { |
| | |
| | | leaveBalanceDays: row.leaveBalanceDays, |
| | | leaveStartTime: row.leaveStartTime, |
| | | leaveEndTime: row.leaveEndTime, |
| | | leaveDurationDays: row.leaveDurationDays, |
| | | leaveReason: row.leaveReason, |
| | | approvalMode: row.approvalMode === "countersign" ? "or_sign" : row.approvalMode || "parallel", |
| | | approverIds: (row.approverIds || []).map((id) => String(id)), |
| | | approverNames: row.approverNames, |
| | | attachmentList: JSON.parse(JSON.stringify(row.attachmentList || [])), |
| | | 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 syncLeaveFieldsFromPayload() { |
| | | const defs = form.formFieldDefs || []; |
| | | const payload = form.formPayload || {}; |
| | | const leaveTimeField = findLeaveTimeTemplateField(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 === "leaveType") && f.type === "select") { |
| | | form.leaveType = val != null && val !== "" ? val : ""; |
| | | } |
| | | if (label.includes("事由") || f.key === "summary" || label.includes("请假事由")) { |
| | | form.leaveReason = val != null ? String(val) : ""; |
| | | } |
| | | } |
| | | |
| | | const { start, end } = resolveLeaveTimeRange(payload, leaveTimeField); |
| | | form.leaveStartTime = start; |
| | | form.leaveEndTime = end; |
| | | form.leaveDurationDays = computeLeaveDays(start, end); |
| | | } |
| | | |
| | | async function submitForm() { |
| | | try { |
| | | await formRef.value?.validate?.(); |
| | | } catch { |
| | | return; |
| | | } |
| | | const days = computeLeaveDays(form.leaveStartTime, form.leaveEndTime); |
| | | if (days == null) { |
| | | proxy?.$modal?.msgWarning?.("请检查请假起止时间,结束时间须晚于开始时间"); |
| | | const flowCheck = validateTemplateBinding({ flowNodes: form.flowNodes }); |
| | | if (!flowCheck.ok) { |
| | | proxy?.$modal?.msgWarning?.(flowCheck.message || "请完善审批流程"); |
| | | return; |
| | | } |
| | | form.approverNames = resolveApproverNames(form.approverIds); |
| | | form.flowNodes = flowCheck.nodes; |
| | | |
| | | const applicantKey = applicantTemplateField.value?.key; |
| | | if (applicantKey) { |
| | | syncApplicantFromUser(form.formPayload[applicantKey]); |
| | | } |
| | | syncLeaveFieldsFromPayload(); |
| | | |
| | | if (form.leaveDurationDays == null) { |
| | | proxy?.$modal?.msgWarning?.("请检查模板中的请假时间,结束时间须晚于开始时间"); |
| | | return; |
| | | } |
| | | |
| | | const attachmentList = mapStorageBlobsToAttachmentList(form.storageBlobDTOs); |
| | | const payload = { |
| | | applicantId: form.applicantId, |
| | | applicantNo: form.applicantNo, |
| | |
| | | leaveBalanceDays: form.leaveBalanceDays, |
| | | leaveStartTime: form.leaveStartTime, |
| | | leaveEndTime: form.leaveEndTime, |
| | | leaveDurationDays: days, |
| | | leaveDurationDays: form.leaveDurationDays, |
| | | leaveReason: form.leaveReason, |
| | | approvalMode: form.approvalMode, |
| | | approverIds: [...form.approverIds], |
| | | approverNames: form.approverNames, |
| | | 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()}`; |
| | |
| | | } |
| | | |
| | | onMounted(() => { |
| | | loadApproverTree(); |
| | | loadFlowUsers(); |
| | | }); |
| | | </script> |
| | | |
| | |
| | | font-size: 14px; |
| | | color: var(--el-text-color-regular); |
| | | } |
| | | .upload-block { |
| | | width: 100%; |
| | | } |
| | | .mr6 { |
| | | margin-right: 6px; |
| | | } |
| | |
| | | .leave-apply-form :deep(.el-form-item) { |
| | | margin-bottom: 18px; |
| | | } |
| | | .template-name { |
| | | font-weight: 600; |
| | | color: var(--el-text-color-primary); |
| | | } |
| | | .ml12 { |
| | | margin-left: 12px; |
| | | } |
| | | .leave-apply-form-dialog :deep(.el-dialog__body) { |
| | | padding-top: 12px; |
| | | } |