审批模板集成页面

yyb

13 小时以前 352f7bbb74f1b6c57b3d3e576849d0565932fbd4

 src/views/officeProcessAutomation/HrManage/regular-apply/index.vue

@@ -10,7 +10,7 @@
          placeholder="请输入申请人"
          clearable
          :prefix-icon="Search"
          @keyup.enter="handleQuery"
          @keyup.enter="onSearch"
        />
        <span class="search_title" style="margin-left: 12px">申请日期：</span>
        <el-date-picker
@@ -24,7 +24,7 @@
          style="width: 260px"
          clearable
        />
        <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>
@@ -39,667 +39,123 @@
        :page="page"
        :isSelection="false"
        :tableLoading="tableLoading"
        @pagination="pagination"
        @pagination="onPagination"
        :total="page.total"
      />
    </div>

    <!-- 新增 / 编辑 -->
    <el-dialog
      v-model="formDialog.visible"
      :title="formDialog.title"
      width="960px"
      append-to-body
      destroy-on-close
      class="regular-apply-form-dialog"
      @closed="onFormClosed"
    >
      <el-form ref="formRef" :model="form" :rules="formRules" label-width="140px" class="regular-apply-form">
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="申请人" prop="applicantName">
              <el-input v-model="form.applicantName" placeholder="请输入申请人" maxlength="50" show-word-limit />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="申请日期" prop="applyDate">
              <el-date-picker
                v-model="form.applyDate"
                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="regularizationDate">
              <el-date-picker
                v-model="form.regularizationDate"
                type="date"
                placeholder="请选择转正日期"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col v-if="!form.hasTemplateBinding" :span="12">
            <el-form-item label="审批方式" prop="approvalMode">
              <el-radio-group v-model="form.approvalMode">
                <el-radio value="parallel">与签</el-radio>
                <el-radio value="countersign">会签</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <template v-if="form.hasTemplateBinding">
          <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"
            :allow-change-template="formDialog.mode === 'add'"
            @change-template="reopenTemplateBind"
          />
        </template>
        <el-row v-else :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
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="24">
            <el-form-item label="试用期工作总结" prop="probationSummary">
              <el-input
                v-model="form.probationSummary"
                type="textarea"
                :rows="4"
                placeholder="请填写试用期工作总结"
                maxlength="2000"
                show-word-limit
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="!form.hasTemplateBinding" :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">
          <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"
      :module-key="APPROVAL_MODULE_KEYS.REGULAR"
      skip-form-confirm
      @confirm="onTemplateBound"
      @closed="onTemplateBindClosed"
    />

    <!-- 详情（只读） -->
    <el-dialog v-model="detailDialog.visible" title="转正申请详情" width="640px" append-to-body>
      <el-descriptions :column="1" border>
        <el-descriptions-item label="申请人">{{ detailRow.applicantName }}</el-descriptions-item>
        <el-descriptions-item label="申请日期">{{ detailRow.applyDate }}</el-descriptions-item>
        <el-descriptions-item label="转正日期">{{ detailRow.regularizationDate }}</el-descriptions-item>
        <el-descriptions-item label="试用期工作总结">{{ detailRow.probationSummary }}</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-item label="附件">
          <template v-if="detailRow.attachmentList?.length">
            <el-tag
              v-for="(f, i) in detailRow.attachmentList"
              :key="i"
              class="mr6 mb6"
              type="info"
            >
              {{ f.name }}
            </el-tag>
          </template>
          <span v-else>无</span>
        </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>

    <!-- 附件列表 -->
    <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-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">
          <template #default="{ row }">
            <el-button link type="primary" @click="mockDownload(row)">下载</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-empty v-else description="暂无附件" />
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="filesDialog.visible = false">关 闭</el-button>
        </div>
      </template>
    </el-dialog>
    <ApprovalInstanceDetailDialog
      v-model="detailDialog.visible"
      title="转正申请详情"
      :row="detailRow"
      @edit="openEditFromDetail"
    />
  </div>
</template>

<script setup>
import { Search } from "@element-plus/icons-vue";
import FileUpload from "@/components/AttachmentUpload/file/index.vue";
import { deptTreeSelect, userListNoPageByTenantId } from "@/api/system/user.js";
import { computed, getCurrentInstance, nextTick, onMounted, reactive, ref, watch } from "vue";
import { ElMessage } from "element-plus";
import { onMounted, reactive } 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 { buildInstanceTableColumns } from "../../ApproveManage/approve-shared/approvalInstanceFormConfigTable.js";
import { APPROVAL_MODULE_KEYS } from "../../ApproveManage/approve-shared/approvalModuleRegistry.js";
import {
  applyBindingToForm,
  buildFormPayloadRules,
} from "../../ApproveManage/approve-shared/approvalTemplateBindingUtils.js";
import { useApprovalInstanceModule } from "../../ApproveManage/approve-shared/useApprovalInstanceModule.js";
import { useFlowUserOptions } from "../../ApproveManage/approve-shared/useFlowUserOptions.js";

/** 与后端约定字段（占位） */
const createEmptyForm = () => ({
  id: undefined,
  applicantName: "",
  applyDate: "",
  regularizationDate: "",
  probationSummary: "",
  approvalMode: "parallel",
  approverIds: [],
  approverNames: "",
  attachmentList: [],
  hasTemplateBinding: false,
  templateId: "",
  templateName: "",
  templateSnapshot: null,
  formFieldDefs: [],
  formPayload: {},
  flowNodes: [],
  templateAttachments: [],
  storageBlobDTOs: [],
});

const { proxy } = getCurrentInstance();

/** 审批人树：部门树 + 系统用户（与 staff-archive / user-manage 同源接口） */
const approverTreeData = ref([]);
const approverLabelMap = ref({});

/** 接口返回统一拆成数组（兼容 axios 拦截器已解包为 { data } 或直接数组等情况） */
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 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
  );
}

/** 部门树节点主键（若依一般为 id，部分场景为 value） */
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}`,
  };
}

/** 按部门 id 分组；无部门或 id 为 0 的用户进入未分配列表 */
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;
    }
  });
}

/** 部门节点 id 加前缀，避免与 userId 数值冲突；可选节点为真实 userId 字符串 */
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,
    },
  ];
}

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 === "countersign") return "会签";
  return "与签";
}

function approvalResultLabel(v) {
  if (v === "approved") return "已通过";
  if (v === "rejected") return "已驳回";
  if (v === "cancelled") return "已撤销";
  return "待审批";
}

/** 本地模拟数据源 */
const allRows = ref([
  {
    id: "1",
    applicantName: "周明",
    applyDate: "2026-05-01",
    regularizationDate: "2026-06-01",
    probationSummary: "试用期内完成模块开发与联调，熟悉业务流程。",
    approvalMode: "parallel",
    approverIds: [],
    approverNames: "",
    approvalResult: "pending",
    attachmentList: [{ name: "工作总结.pdf" }, { name: "考核表.xlsx" }],
  },
  {
    id: "2",
    applicantName: "吴芳",
    applyDate: "2026-05-08",
    regularizationDate: "2026-06-10",
    probationSummary: "完成入职培训与岗位实践，达到岗位要求。",
    approvalMode: "countersign",
    approverIds: [],
    approverNames: "",
    approvalResult: "approved",
    attachmentList: [],
  },
]);

const searchForm = reactive({
  applicantName: "",
  applyDateRange: null,
});

const tableLoading = ref(false);
const page = reactive({
  current: 1,
  size: 10,
  total: 0,
});

const filteredList = computed(() => {
  let list = [...allRows.value];
  const name = (searchForm.applicantName || "").trim();
  if (name) {
    list = list.filter((r) => r.applicantName.includes(name));
  }
  const range = searchForm.applyDateRange;
  if (range && range.length === 2) {
    const [start, end] = range;
    list = list.filter((r) => r.applyDate >= start && r.applyDate <= end);
  }
  return list.sort((a, b) => (a.applyDate < b.applyDate ? 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;
const mod = useApprovalInstanceModule({
  moduleKey: APPROVAL_MODULE_KEYS.REGULAR,
  buildExtraListParams(sf) {
    const range = sf?.applyDateRange;
    if (Array.isArray(range) && range[0]) {
      return { createTime: range[0], createTimeEnd: range[1] };
    }
    return {};
  },
  { 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: "applyDate", width: 120 },
  { label: "转正日期", prop: "regularizationDate", width: 120 },
  { label: "试用期工作总结", prop: "probationSummary", minWidth: 200 },
  {
    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),
      },
      {
        name: "附件",
        type: "text",
        clickFun: (row) => openFiles(row),
      },
    ],
  },
]);
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 formDialog = reactive({
  visible: false,
  title: "",
  mode: "add",
});
const formRef = ref();
const form = reactive(createEmptyForm());
const templateBindVisible = ref(false);
const { flowUserOptions, loadFlowUsers } = useFlowUserOptions();

const formRules = computed(() => {
  const base = {
    applicantName: [{ required: true, message: "请输入申请人", trigger: "blur" }],
    applyDate: [{ required: true, message: "请选择申请日期", trigger: "change" }],
    regularizationDate: [{ required: true, message: "请选择转正日期", trigger: "change" }],
    probationSummary: [{ required: true, message: "请填写试用期工作总结", trigger: "blur" }],
  };
  if (form.hasTemplateBinding) {
    return { ...base, ...buildFormPayloadRules(form.formFieldDefs) };
  }
  return {
    ...base,
    approvalMode: [{ required: true, message: "请选择审批方式", trigger: "change" }],
    approverIds: [
      { type: "array", required: true, message: "请选择审批人", trigger: "change" },
    ],
  };
});
const tableColumn = buildInstanceTableColumns(tableData, buildTableActions);

const detailDialog = reactive({ visible: false });
const detailRow = ref({});

const filesDialog = reactive({ visible: false, row: null });

function handleQuery() {
  page.current = 1;
  tableLoading.value = true;
  setTimeout(() => {
    tableLoading.value = false;
  }, 150);
function onSearch() {
  handleQuery(searchForm);
}

function resetSearch() {
  searchForm.applicantName = "";
  searchForm.applyDateRange = null;
  handleQuery();
  onSearch();
}

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;
async function onSubmit() {
  const ok = await submitInstanceForm({ skipValidate: true });
  if (ok) ElMessage.success(isSubmitEdit.value ? "修改成功" : "提交成功");
}

function openFiles(row) {
  filesDialog.row = row;
  filesDialog.visible = true;
}

function mockDownload(row) {
  const url = row.url || row.downloadURL || row.previewURL || row.previewUrl;
  if (url) {
    window.open(url, "_blank");
    return;
  }
  proxy?.$modal?.msgSuccess?.(`已模拟下载：${row.name}`);
}

function openAddWithTemplate() {
  templateBindVisible.value = true;
}

function onTemplateBound(binding) {
  Object.assign(form, createEmptyForm());
  applyBindingToForm(form, binding);
  form.hasTemplateBinding = true;
  formDialog.mode = "add";
  formDialog.title = "新增转正申请";
  loadApproverTree();
onMounted(async () => {
  loadFlowUsers();
  formDialog.visible = true;
  nextTick(() => formRef.value?.clearValidate?.());
}

function reopenTemplateBind() {
  formDialog.visible = false;
  templateBindVisible.value = true;
}

function openFormDialog(mode, row) {
  formDialog.mode = mode;
  formDialog.title = mode === "add" ? "新增转正申请" : "编辑转正申请";
  loadApproverTree();
  Object.assign(form, createEmptyForm());
  if (mode === "edit" && row) {
    Object.assign(form, {
      id: row.id,
      applicantName: row.applicantName,
      applyDate: row.applyDate,
      regularizationDate: row.regularizationDate,
      probationSummary: row.probationSummary,
      approvalMode: row.approvalMode,
      approverIds: (row.approverIds || []).map((id) => String(id)),
      approverNames: row.approverNames,
      attachmentList: JSON.parse(JSON.stringify(row.attachmentList || [])),
    });
  }
  formDialog.visible = true;
  nextTick(() => formRef.value?.clearValidate?.());
}

function onFormClosed() {
  formRef.value?.resetFields?.();
}

async function submitForm() {
  try {
    await formRef.value?.validate?.();
  } catch {
    return;
  }
  form.approverNames = resolveApproverNames(form.approverIds);
  const payload = {
    applicantName: form.applicantName,
    applyDate: form.applyDate,
    regularizationDate: form.regularizationDate,
    probationSummary: form.probationSummary,
    approvalMode: form.approvalMode,
    approverIds: [...form.approverIds],
    approverNames: form.approverNames,
    attachmentList: JSON.parse(JSON.stringify(form.attachmentList || [])),
  };
  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);
    if (idx !== -1) {
      const prev = allRows.value[idx];
      allRows.value[idx] = {
        ...prev,
        id: form.id,
        ...payload,
        approvalResult: prev.approvalResult ?? "pending",
      };
    }
    proxy?.$modal?.msgSuccess?.("保存成功（本地模拟）");
  }
  formDialog.visible = false;
  handleQuery();
}

onMounted(() => {
  loadApproverTree();
  loadFlowUsers();
  await initModuleList(searchForm);
});
</script>

@@ -717,23 +173,5 @@
.search_title {
  font-size: 14px;
  color: var(--el-text-color-regular);
}
.upload-block {
  width: 100%;
}
.mr6 {
  margin-right: 6px;
}
.mb6 {
  margin-bottom: 6px;
}
.regular-apply-form :deep(.el-row) {
  margin-bottom: 0;
}
.regular-apply-form :deep(.el-form-item) {
  margin-bottom: 18px;
}
.regular-apply-form-dialog :deep(.el-dialog__body) {
  padding-top: 12px;
}
</style>