<!--OA模块：工作交接-->
|
<template>
|
<div class="app-container">
|
<div class="search_form mb20">
|
<div>
|
<span class="search_title">申请人：</span>
|
<el-select
|
v-model="searchForm.applicantId"
|
filterable
|
remote
|
clearable
|
reserve-keyword
|
placeholder="请选择或搜索申请人"
|
style="width: 220px"
|
:remote-method="remoteSearchApplicant"
|
:loading="applicantSearchLoading"
|
>
|
<el-option
|
v-for="u in applicantSearchOptions"
|
:key="u.userId"
|
:label="userSelectLabel(u)"
|
:value="u.userId"
|
/>
|
</el-select>
|
<span class="search_title" style="margin-left: 12px">交接状态：</span>
|
<el-select v-model="searchForm.handoverStatus" placeholder="全部" clearable style="width: 140px">
|
<el-option v-for="o in handoverStatusOptions" :key="o.value" :label="o.label" :value="o.value" />
|
</el-select>
|
<span class="search_title" style="margin-left: 12px">交接类型：</span>
|
<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="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"
|
@submit="onSubmit"
|
/>
|
|
<ApprovalTemplateBindDialog
|
v-model:visible="templateBindVisible"
|
:module-key="APPROVAL_MODULE_KEYS.WORK_HANDOVER"
|
skip-form-confirm
|
@confirm="onTemplateBound"
|
@closed="onTemplateBindClosed"
|
/>
|
|
<ApprovalInstanceDetailDialog
|
v-model="detailDialog.visible"
|
title="工作交接详情"
|
:row="detailRow"
|
@edit="openEditFromDetail"
|
/>
|
</div>
|
</template>
|
|
<script setup>
|
import { userListNoPageByTenantId } from "@/api/system/user.js";
|
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 { 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";
|
|
const handoverStatusOptions = [
|
{ value: "in_progress", label: "进行中" },
|
{ value: "completed", label: "已完成" },
|
{ value: "returned", label: "已退回" },
|
];
|
|
const handoverTypeOptions = [
|
{ value: "resignation", label: "离职交接" },
|
{ value: "transfer", label: "调岗交接" },
|
];
|
|
const searchForm = reactive({
|
applicantId: "",
|
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([]);
|
const applicantSearchOptions = ref([]);
|
const applicantSearchLoading = ref(false);
|
|
function unwrapArray(payload) {
|
if (Array.isArray(payload)) return payload;
|
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 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 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);
|
}
|
|
async function loadUserPool() {
|
try {
|
const res = await userListNoPageByTenantId();
|
allUsersCache.value = unwrapArray(res);
|
} catch {
|
allUsersCache.value = [];
|
}
|
}
|
|
async function remoteSearchApplicant(query) {
|
applicantSearchLoading.value = true;
|
try {
|
if (!allUsersCache.value.length) await loadUserPool();
|
applicantSearchOptions.value = filterUsersByQuery(query);
|
} finally {
|
applicantSearchLoading.value = false;
|
}
|
}
|
|
const tableColumn = buildInstanceTableColumns(tableData, buildTableActions);
|
|
function onSearch() {
|
handleQuery(searchForm);
|
}
|
|
async function resetSearch() {
|
searchForm.applicantId = "";
|
searchForm.handoverStatus = "";
|
searchForm.handoverType = "";
|
onSearch();
|
await remoteSearchApplicant("");
|
}
|
|
function onPagination(obj) {
|
pagination(obj, searchForm);
|
}
|
|
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>
|
|
<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>
|
