From 352f7bbb74f1b6c57b3d3e576849d0565932fbd4 Mon Sep 17 00:00:00 2001
From: yyb <995253665@qq.com>
Date: 星期三, 20 五月 2026 16:50:36 +0800
Subject: [PATCH] 审批模板集成页面
---
src/views/officeProcessAutomation/HrManage/work-handover/index.vue | 570 ++++++++++----------------------------------------------
1 files changed, 107 insertions(+), 463 deletions(-)
diff --git a/src/views/officeProcessAutomation/HrManage/work-handover/index.vue b/src/views/officeProcessAutomation/HrManage/work-handover/index.vue
index ed2e8d0..9078e97 100644
--- a/src/views/officeProcessAutomation/HrManage/work-handover/index.vue
+++ b/src/views/officeProcessAutomation/HrManage/work-handover/index.vue
@@ -30,7 +30,7 @@
<el-select v-model="searchForm.handoverType" placeholder="鍏ㄩ儴" clearable style="width: 140px">
<el-option v-for="o in handoverTypeOptions" :key="o.value" :label="o.label" :value="o.value" />
</el-select>
- <el-button type="primary" style="margin-left: 10px" @click="handleQuery">鎼滅储</el-button>
+ <el-button type="primary" style="margin-left: 10px" @click="onSearch">鎼滅储</el-button>
<el-button @click="resetSearch">閲嶇疆</el-button>
</div>
<div>
@@ -45,56 +45,24 @@
:page="page"
:isSelection="false"
:tableLoading="tableLoading"
- @pagination="pagination"
+ @pagination="onPagination"
:total="page.total"
/>
</div>
- <!-- 鏂板 / 缂栬緫 -->
- <el-dialog
- v-if="formDialog.visible"
- v-model="formDialog.visible"
- :title="formDialog.title"
- width="960px"
- append-to-body
- destroy-on-close
- class="work-handover-form-dialog"
- @closed="onFormClosed"
- >
- <el-form ref="formRef" :model="form" :rules="formRules" label-width="140px" class="work-handover-form">
- <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-button>
- </el-form-item>
- <FormPayloadFields :fields="form.formFieldDefs" :form-payload="form.formPayload" :columns="2" />
- <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>
- <template #footer>
- <div class="dialog-footer">
- <el-button type="primary" @click="submitForm">纭� 瀹�</el-button>
- <el-button @click="formDialog.visible = false">鍙� 娑�</el-button>
- </div>
- </template>
- </el-dialog>
+ <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"
+ @submit="onSubmit"
+ />
<ApprovalTemplateBindDialog
v-model:visible="templateBindVisible"
@@ -104,42 +72,26 @@
@closed="onTemplateBindClosed"
/>
- <!-- 璇︽儏 -->
- <el-dialog v-model="detailDialog.visible" title="宸ヤ綔浜ゆ帴璇︽儏" width="560px" append-to-body>
- <el-descriptions :column="1" border>
- <el-descriptions-item label="鐢宠浜�">{{ detailRow.applicantName }}</el-descriptions-item>
- <el-descriptions-item label="绂昏亴鏃ユ湡">{{ detailRow.leaveDate || "鈥�" }}</el-descriptions-item>
- <el-descriptions-item label="浜ゆ帴鐘舵��">{{ handoverStatusLabel(detailRow.handoverStatus) }}</el-descriptions-item>
- <el-descriptions-item label="浜ゆ帴绫诲瀷">{{ handoverTypeLabel(detailRow.handoverType) }}</el-descriptions-item>
- <el-descriptions-item label="浜ゆ帴浜�">{{ detailRow.handoverPersonName || "鈥�" }}</el-descriptions-item>
- <el-descriptions-item label="瀹℃壒缁撴灉">{{ approvalResultLabel(detailRow.approvalResult) }}</el-descriptions-item>
- <el-descriptions-item label="瀹℃壒鏂瑰紡">{{ approvalModeLabel(detailRow.approvalMode) }}</el-descriptions-item>
- <el-descriptions-item label="瀹℃壒浜�">{{ detailRow.approverNames || "鈥�" }}</el-descriptions-item>
- </el-descriptions>
- <template #footer>
- <div class="dialog-footer">
- <el-button type="primary" @click="detailDialog.visible = false">鍏� 闂�</el-button>
- </div>
- </template>
- </el-dialog>
+ <ApprovalInstanceDetailDialog
+ v-model="detailDialog.visible"
+ title="宸ヤ綔浜ゆ帴璇︽儏"
+ :row="detailRow"
+ @edit="openEditFromDetail"
+ />
</div>
</template>
<script setup>
import { userListNoPageByTenantId } from "@/api/system/user.js";
-import { computed, getCurrentInstance, nextTick, onMounted, reactive, ref, watch } from "vue";
+import { ElMessage } from "element-plus";
+import { onMounted, reactive, ref } from "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 ApprovalTemplateFormSection from "../../ApproveManage/approve-shared/components/ApprovalTemplateFormSection.vue";
-import FormPayloadFields from "../../ApproveManage/approve-list/components/FormPayloadFields.vue";
+import { buildInstanceTableColumns } from "../../ApproveManage/approve-shared/approvalInstanceFormConfigTable.js";
import { APPROVAL_MODULE_KEYS } from "../../ApproveManage/approve-shared/approvalModuleRegistry.js";
-import {
- applyBindingToForm,
- buildFormPayloadRules,
- validateTemplateBinding,
-} from "../../ApproveManage/approve-shared/approvalTemplateBindingUtils.js";
+import { useApprovalInstanceModule } from "../../ApproveManage/approve-shared/useApprovalInstanceModule.js";
import { useFlowUserOptions } from "../../ApproveManage/approve-shared/useFlowUserOptions.js";
-
-const { proxy } = getCurrentInstance();
const handoverStatusOptions = [
{ value: "in_progress", label: "杩涜涓�" },
@@ -152,84 +104,48 @@
{ value: "transfer", label: "璋冨矖浜ゆ帴" },
];
-function handoverStatusLabel(v) {
- return handoverStatusOptions.find((o) => o.value === v)?.label || "鈥�";
-}
-
-function handoverTypeLabel(v) {
- return handoverTypeOptions.find((o) => o.value === v)?.label || "鈥�";
-}
-
-/** 涓庡悗绔害瀹氬瓧娈碉紙鏈湴鍗犱綅锛屽悗鏈熸帴鍙ｅ榻愶級 */
-const createEmptyForm = () => ({
- id: undefined,
+const searchForm = reactive({
applicantId: "",
- applicantName: "",
- leaveDate: "",
- handoverStatus: "in_progress",
- handoverType: "resignation",
- handoverPersonId: "",
- handoverPersonName: "",
- hasTemplateBinding: false,
- templateId: "",
- templateName: "",
- templateSnapshot: null,
- formFieldDefs: [],
- formPayload: {},
- flowNodes: [],
- templateAttachments: [],
- storageBlobDTOs: [],
+ handoverStatus: "",
+ handoverType: "",
});
+const mod = useApprovalInstanceModule({
+ moduleKey: APPROVAL_MODULE_KEYS.WORK_HANDOVER,
+});
+
+const {
+ tableData,
+ tableLoading,
+ page,
+ detailDialog,
+ detailRow,
+ submitDialog,
+ 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([]);
-
-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) {
- if (id == null || id === "") return undefined;
- return allUsersCache.value.find((u) => String(u.userId ?? u.id) === String(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);
- });
-}
-
-async function loadUserPool() {
- try {
- const res = await userListNoPageByTenantId();
- allUsersCache.value = unwrapArray(res);
- } catch {
- allUsersCache.value = [];
- }
-}
-
-const applicantSearchLoading = ref(false);
const applicantSearchOptions = ref([]);
-
-async function remoteSearchApplicant(query) {
- applicantSearchLoading.value = true;
- try {
- if (!allUsersCache.value.length) {
- await loadUserPool();
- }
- applicantSearchOptions.value = filterUsersByQuery(query);
- } finally {
- applicantSearchLoading.value = false;
- }
-}
+const applicantSearchLoading = ref(false);
function unwrapArray(payload) {
if (Array.isArray(payload)) return payload;
@@ -244,330 +160,74 @@
return String(u.status) === "0";
}
-function approvalModeLabel(mode) {
- if (mode === "countersign") return "浼氱";
- return "涓庣";
+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 approvalResultLabel(v) {
- if (v === "approved") return "宸查�氳繃";
- if (v === "rejected") return "宸查┏鍥�";
- if (v === "cancelled") return "宸叉挙閿�";
- return "寰呭鎵�";
+function filterUsersByQuery(query) {
+ const list = allUsersCache.value.filter((u) => isActiveUser(u));
+ const q = (query || "").trim().toLowerCase();
+ if (!q) return list.slice(0, 50);
+ return list
+ .filter((u) => {
+ const nick = (u.nickName || "").toLowerCase();
+ const name = (u.userName || "").toLowerCase();
+ const id = String(u.userId ?? u.id ?? "");
+ return nick.includes(q) || name.includes(q) || id.includes(q);
+ })
+ .slice(0, 50);
}
-function handoverStatusTagType(v) {
- if (v === "completed") return "success";
- if (v === "returned") return "danger";
- return "warning";
-}
-
-function handoverTypeTagType(v) {
- return v === "transfer" ? "info" : "";
-}
-
-const allRows = ref([]);
-
-const searchForm = reactive({
- applicantId: "",
- handoverStatus: "",
- handoverType: "",
-});
-
-const tableLoading = ref(false);
-const page = reactive({
- current: 1,
- size: 10,
- total: 0,
-});
-
-const filteredList = computed(() => {
- let list = [...allRows.value];
- if (searchForm.applicantId) {
- list = list.filter((r) => String(r.applicantId) === String(searchForm.applicantId));
+async function loadUserPool() {
+ try {
+ const res = await userListNoPageByTenantId();
+ allUsersCache.value = unwrapArray(res);
+ } catch {
+ allUsersCache.value = [];
}
- if (searchForm.handoverStatus) {
- list = list.filter((r) => r.handoverStatus === searchForm.handoverStatus);
+}
+
+async function remoteSearchApplicant(query) {
+ applicantSearchLoading.value = true;
+ try {
+ if (!allUsersCache.value.length) await loadUserPool();
+ applicantSearchOptions.value = filterUsersByQuery(query);
+ } finally {
+ applicantSearchLoading.value = false;
}
- if (searchForm.handoverType) {
- list = list.filter((r) => r.handoverType === searchForm.handoverType);
- }
- return list.sort((a, b) => (a.leaveDate < b.leaveDate ? 1 : -1));
-});
+}
-watch(
- filteredList,
- (list) => {
- page.total = list.length;
- const maxPage = Math.max(1, Math.ceil(list.length / page.size) || 1);
- if (page.current > maxPage) {
- page.current = maxPage;
- }
- },
- { immediate: true }
-);
+const tableColumn = buildInstanceTableColumns(tableData, buildTableActions);
-const tableData = computed(() => {
- const list = filteredList.value;
- const start = (page.current - 1) * page.size;
- return list.slice(start, start + page.size);
-});
-
-const tableColumn = ref([
- { label: "鐢宠浜�", prop: "applicantName", minWidth: 100 },
- { label: "绂昏亴鏃ユ湡", prop: "leaveDate", width: 120 },
- {
- label: "浜ゆ帴鐘舵��",
- prop: "handoverStatus",
- width: 110,
- dataType: "tag",
- formatData: (v) => handoverStatusLabel(v),
- formatType: (v) => handoverStatusTagType(v),
- },
- {
- label: "浜ゆ帴绫诲瀷",
- prop: "handoverType",
- width: 110,
- dataType: "tag",
- formatData: (v) => handoverTypeLabel(v),
- formatType: (v) => handoverTypeTagType(v),
- },
- { label: "浜ゆ帴浜�", prop: "handoverPersonName", minWidth: 100 },
- {
- label: "瀹℃壒缁撴灉",
- prop: "approvalResult",
- width: 110,
- dataType: "tag",
- formatData: (v) => approvalResultLabel(v),
- formatType: (v) => {
- if (v === "approved") return "success";
- if (v === "rejected") return "danger";
- if (v === "cancelled") return "info";
- return "warning";
- },
- },
- {
- dataType: "action",
- label: "鎿嶄綔",
- align: "center",
- fixed: "right",
- width: 200,
- operation: [
- { name: "缂栬緫", type: "text", clickFun: (row) => openFormDialog("edit", row) },
- { name: "璇︽儏", type: "text", clickFun: (row) => openDetail(row) },
- ],
- },
-]);
-
-const formDialog = reactive({
- visible: false,
- title: "",
- mode: "add",
-});
-const formRef = ref();
-const form = reactive(createEmptyForm());
-const templateBindVisible = ref(false);
-const pendingTemplateBinding = ref(null);
-const { flowUserOptions, loadFlowUsers } = useFlowUserOptions();
-
-const formRules = computed(() => buildFormPayloadRules(form.formFieldDefs));
-
-const detailDialog = reactive({ visible: false });
-const detailRow = ref({});
-
-function handleQuery() {
- page.current = 1;
- tableLoading.value = true;
- setTimeout(() => {
- tableLoading.value = false;
- }, 150);
+function onSearch() {
+ handleQuery(searchForm);
}
async function resetSearch() {
searchForm.applicantId = "";
searchForm.handoverStatus = "";
searchForm.handoverType = "";
- handleQuery();
+ onSearch();
await remoteSearchApplicant("");
}
-function pagination(obj) {
- page.current = obj.page;
- page.size = obj.limit;
+function onPagination(obj) {
+ pagination(obj, searchForm);
}
-function openDetail(row) {
- detailRow.value = { ...row };
- detailDialog.visible = true;
-}
-
-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()]);
- await syncHandoverFieldsFromPayload();
- formDialog.visible = true;
- nextTick(() => formRef.value?.clearValidate?.());
-}
-
-function reopenTemplateBind() {
- formDialog.visible = false;
- pendingTemplateBinding.value = null;
- templateBindVisible.value = true;
-}
-
-function syncApplicantFromUser(uid) {
- const u = userById(uid);
- form.applicantId = uid != null && uid !== "" ? uid : "";
- form.applicantName = u ? u.nickName || u.userName || "" : "";
-}
-
-function syncHandoverPersonFromUser(uid) {
- const u = userById(uid);
- form.handoverPersonId = uid != null && uid !== "" ? uid : "";
- form.handoverPersonName = u ? u.nickName || u.userName || "" : "";
-}
-
-/** 浠庢ā鏉垮～鎶ラ」鍚屾鍒楄〃灞曠ず瀛楁 */
-async function syncHandoverFieldsFromPayload() {
- const defs = form.formFieldDefs || [];
- const payload = form.formPayload || {};
- for (const f of defs) {
- const label = String(f.label || "");
- const val = payload[f.key];
- if (label.includes("鐢宠浜�") && !label.includes("浜ゆ帴浜�")) {
- syncApplicantFromUser(val);
- } else if (label.includes("浜ゆ帴浜�")) {
- syncHandoverPersonFromUser(val);
- } else if (label.includes("绂昏亴") && f.type === "date") {
- form.leaveDate = val || "";
- } else if (label.includes("浜ゆ帴鐘舵��")) {
- form.handoverStatus = val != null && val !== "" ? val : form.handoverStatus;
- } else if (label.includes("浜ゆ帴绫诲瀷")) {
- form.handoverType = val != null && val !== "" ? val : form.handoverType;
- }
- }
-}
-
-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, {
- id: row.id,
- applicantId: row.applicantId,
- applicantName: row.applicantName,
- leaveDate: row.leaveDate,
- handoverStatus: row.handoverStatus,
- handoverType: row.handoverType,
- handoverPersonId: row.handoverPersonId,
- handoverPersonName: row.handoverPersonName,
- 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 || [])),
- });
- await loadUserPool();
- await syncHandoverFieldsFromPayload();
- loadFlowUsers();
- }
- formDialog.visible = true;
- nextTick(() => formRef.value?.clearValidate?.());
-}
-
-function onFormClosed() {
- formRef.value?.resetFields?.();
-}
-
-async function submitForm() {
- try {
- await formRef.value?.validate?.();
- } catch {
- return;
- }
- const flowCheck = validateTemplateBinding({ flowNodes: form.flowNodes });
- if (!flowCheck.ok) {
- proxy?.$modal?.msgWarning?.(flowCheck.message || "璇峰畬鍠勫鎵规祦绋�");
- return;
- }
- form.flowNodes = flowCheck.nodes;
- await syncHandoverFieldsFromPayload();
- const payload = {
- applicantId: form.applicantId,
- applicantName: form.applicantName,
- leaveDate: form.leaveDate,
- handoverStatus: form.handoverStatus,
- handoverType: form.handoverType,
- handoverPersonId: form.handoverPersonId,
- handoverPersonName: form.handoverPersonName,
- 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 || [])),
- };
- if (formDialog.mode === "add") {
- const id = `local_${Date.now()}`;
- allRows.value.unshift({
- id,
- ...payload,
- approvalResult: "pending",
- });
- proxy?.$modal?.msgSuccess?.("鏂板鎴愬姛");
- } else {
- const idx = allRows.value.findIndex((r) => r.id === form.id);
- const prev = idx !== -1 ? allRows.value[idx] : {};
- if (idx !== -1) {
- allRows.value[idx] = {
- ...prev,
- id: form.id,
- ...payload,
- };
- }
- proxy?.$modal?.msgSuccess?.("淇濆瓨鎴愬姛");
- }
- formDialog.visible = false;
- handleQuery();
+async function onSubmit() {
+ const ok = await submitInstanceForm({ skipValidate: true });
+ if (ok) ElMessage.success(isSubmitEdit.value ? "淇敼鎴愬姛" : "鎻愪氦鎴愬姛");
}
onMounted(async () => {
await loadUserPool();
loadFlowUsers();
await remoteSearchApplicant("");
+ await initModuleList(searchForm);
});
</script>
@@ -585,21 +245,5 @@
.search_title {
font-size: 14px;
color: var(--el-text-color-regular);
-}
-.work-handover-form :deep(.el-row) {
- margin-bottom: 0;
-}
-.work-handover-form :deep(.el-form-item) {
- margin-bottom: 18px;
-}
-.work-handover-form-dialog :deep(.el-dialog__body) {
- padding-top: 12px;
-}
-.template-name {
- font-weight: 600;
- color: var(--el-text-color-primary);
-}
-.ml12 {
- margin-left: 12px;
}
</style>
--
Gitblit v1.9.3