product-inventory-management.git

<!--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="handleQuery">搜索</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="pagination"
        :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>
 
    <ApprovalTemplateBindDialog
      v-model:visible="templateBindVisible"
      :module-key="APPROVAL_MODULE_KEYS.WORK_HANDOVER"
      skip-form-confirm
      @confirm="onTemplateBound"
      @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>
  </div>
</template>
 
<script setup>
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,
  buildFormPayloadRules,
  validateTemplateBinding,
} from "../../ApproveManage/approve-shared/approvalTemplateBindingUtils.js";
import { useFlowUserOptions } from "../../ApproveManage/approve-shared/useFlowUserOptions.js";
 
const { proxy } = getCurrentInstance();
 
const handoverStatusOptions = [
  { value: "in_progress", label: "进行中" },
  { value: "completed", label: "已完成" },
  { value: "returned", label: "已退回" },
];
 
const handoverTypeOptions = [
  { value: "resignation", label: "离职交接" },
  { 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,
  applicantId: "",
  applicantName: "",
  leaveDate: "",
  handoverStatus: "in_progress",
  handoverType: "resignation",
  handoverPersonId: "",
  handoverPersonName: "",
  hasTemplateBinding: false,
  templateId: "",
  templateName: "",
  templateSnapshot: null,
  formFieldDefs: [],
  formPayload: {},
  flowNodes: [],
  templateAttachments: [],
  storageBlobDTOs: [],
});
 
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;
  }
}
 
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 approvalModeLabel(mode) {
  if (mode === "countersign") return "会签";
  return "与签";
}
 
function approvalResultLabel(v) {
  if (v === "approved") return "已通过";
  if (v === "rejected") return "已驳回";
  if (v === "cancelled") return "已撤销";
  return "待审批";
}
 
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));
  }
  if (searchForm.handoverStatus) {
    list = list.filter((r) => r.handoverStatus === searchForm.handoverStatus);
  }
  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 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);
}
 
async function resetSearch() {
  searchForm.applicantId = "";
  searchForm.handoverStatus = "";
  searchForm.handoverType = "";
  handleQuery();
  await remoteSearchApplicant("");
}
 
function pagination(obj) {
  page.current = obj.page;
  page.size = obj.limit;
}
 
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();
}
 
onMounted(async () => {
  await loadUserPool();
  loadFlowUsers();
  await remoteSearchApplicant("");
});
</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);
}
.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>