批量提交和批量审批

zhangwencui

2026-09-02 fa7fa3b7e38e6828dbb6964e72eac8e6b87c2b6e

 src/views/officeProcessAutomation/ApproveManage/approve-list/index.vue

@@ -48,6 +48,13 @@
        <el-button :icon="RefreshRight" @click="resetSearch">重置</el-button>
      </div>
      <div class="search_actions">
        <el-button
          type="success"
          :icon="CircleCheck"
          @click="openBatchApproveDialog"
        >
          批量审批
        </el-button>
        <el-button type="primary" :icon="Plus" @click="openSubmitDialog">提交审批</el-button>
      </div>
    </div>
@@ -58,9 +65,10 @@
        :column="tableColumn"
        :tableData="tableData"
        :page="page"
        :isSelection="false"
        :isSelection="true"
        :tableLoading="tableLoading"
        :total="page.total"
        @selection-change="handleSelectionChange"
        @pagination="pagination"
      >
        <template #approveType="{ row }">
@@ -172,7 +180,7 @@
      class="approve-detail-dialog"
    >
      <div class="approve-detail-body">
        <ApproveDetailPanel :row="detailRow" />
        <ApproveDetailPanel :row="detailRow" :detail-data="detailData" />
        <div class="detail-block">
          <div class="detail-block-title">
            审批流程（{{ detailRow.tasks?.length || detailRow.flowNodes?.length || 0 }} 项）
@@ -223,6 +231,64 @@
      </template>
    </el-dialog>

    <!-- 差旅/费用报销详情（审批列表） -->
    <el-dialog
      v-model="reimburseDialog.visible"
      :title="reimburseDialog.mode === 'approve' ? reimburseApproveTitle : reimburseDetailTitle"
      width="1000px"
      append-to-body
      destroy-on-close
      @closed="approveOpinion = ''"
    >
      <FinReimburseApprovePanel
        :mode="reimburseDialog.mode"
        :module-key="reimburseDialog.moduleKey"
        :reimburse-row="reimburseDialog.reimburseRow"
        :loading="reimburseDialog.loading"
        v-model:approve-opinion="approveOpinion"
      />
      <template #footer>
        <template v-if="reimburseDialog.mode === 'approve'">
          <el-button
            type="success"
            :loading="approveSubmitting"
            @click="onReimburseApprove('approved')"
          >
            通 过
          </el-button>
          <el-button
            type="danger"
            :loading="approveSubmitting"
            @click="onReimburseApprove('rejected')"
          >
            驳 回
          </el-button>
          <el-button :disabled="approveSubmitting" @click="reimburseDialog.visible = false">
            取 消
          </el-button>
        </template>
        <template v-else>
          <el-button
            v-if="reimburseDialog.instanceRow?.approvalStatus === 'pending'"
            @click="openEditFromReimburseDetail"
          >
            修 改
          </el-button>
          <el-button
            v-if="
              reimburseDialog.instanceRow?.approvalStatus === 'pending' &&
              reimburseDialog.instanceRow?.isApprove
            "
            type="primary"
            @click="openReimburseApproveFromDetail"
          >
            去审批
          </el-button>
          <el-button type="primary" @click="reimburseDialog.visible = false">关 闭</el-button>
        </template>
      </template>
    </el-dialog>

    <!-- 审批操作 -->
    <el-dialog
      v-model="approveDialog.visible"
@@ -232,7 +298,7 @@
      destroy-on-close
      @closed="approveOpinion = ''"
    >
      <ApproveDetailPanel :row="approveDialog.row" />
      <ApproveDetailPanel :row="approveDialog.row" :detail-data="detailData" />
      <div class="detail-block mt16">
        <div class="detail-block-title">
          审批流程（{{ approveDialog.row?.tasks?.length || approveDialog.row?.flowNodes?.length || 0 }} 项）
@@ -271,13 +337,57 @@
        </el-button>
      </template>
    </el-dialog>

    <!-- 批量审批操作 -->
    <el-dialog
      v-model="batchApproveDialog.visible"
      title="批量审批处理"
      width="560px"
      append-to-body
      destroy-on-close
      @closed="batchApproveOpinion = ''"
    >
      <el-form label-width="100px">
        <el-form-item label="审批意见">
          <el-input
            v-model="batchApproveOpinion"
            type="textarea"
            :rows="4"
            maxlength="500"
            show-word-limit
            placeholder="通过可留空；驳回请填写具体原因"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button
          type="success"
          :loading="batchApproveSubmitting"
          @click="onBatchApprove('approved')"
        >
          通 过
        </el-button>
        <el-button
          type="danger"
          :loading="batchApproveSubmitting"
          @click="onBatchApprove('rejected')"
        >
          驳 回
        </el-button>
        <el-button :disabled="batchApproveSubmitting" @click="batchApproveDialog.visible = false">
          取 消
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { Plus, RefreshRight } from "@element-plus/icons-vue";
import { CircleCheck, Plus, RefreshRight } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { onMounted, ref } from "vue";
import { computed, onMounted, ref } from "vue";
import { APPROVAL_MODULE_KEYS } from "../approve-shared/approvalModuleRegistry.js";
import FinReimburseApprovePanel from "../../ReimburseManage/shared/components/FinReimburseApprovePanel.vue";
import ApprovalTemplateFormSection from "../approve-shared/components/ApprovalTemplateFormSection.vue";
import ApprovalTemplatePicker from "../approve-shared/components/ApprovalTemplatePicker.vue";
import { useFlowUserOptions } from "../approve-shared/useFlowUserOptions.js";
@@ -309,9 +419,15 @@
  tableColumn,
  detailDialog,
  detailRow,
  detailData,
  reimburseDialog,
  approveDialog,
  approveOpinion,
  approveSubmitting,
  batchApproveDialog,
  batchApproveOpinion,
  batchApproveSubmitting,
  submitReimburseApprove,
  submitDialog,
  isSubmitEdit,
  submitDialogTitle,
@@ -324,6 +440,8 @@
  handleQuery,
  resetSearch,
  pagination,
  handleSelectionChange,
  openBatchApproveDialog,
  resetSubmitDialogState,
  openSubmitDialog,
  openEditDialog,
@@ -331,6 +449,7 @@
  backToTemplatePick,
  submitInstanceForm,
  submitApprove,
  submitBatchApprove,
  openDetail,
  openApprove,
} = al;
@@ -341,6 +460,17 @@
  const ok = await submitInstanceForm();
  if (ok) ElMessage.success(isSubmitEdit.value ? "修改成功" : "审批已提交");
}

const reimburseDetailTitle = computed(() =>
  reimburseDialog.moduleKey === APPROVAL_MODULE_KEYS.COST_REIMBURSE
    ? "费用报销详情"
    : "差旅报销详情"
);
const reimburseApproveTitle = computed(() =>
  reimburseDialog.moduleKey === APPROVAL_MODULE_KEYS.COST_REIMBURSE
    ? "费用报销审批"
    : "差旅报销审批"
);

async function onApprove(result) {
  const ret = await submitApprove(result);
@@ -353,14 +483,40 @@
  }
}

async function onReimburseApprove(result) {
  const ret = await submitReimburseApprove(result);
  if (ret?.needOpinion) {
    ElMessage.warning("驳回时请填写审批意见");
    return;
  }
  if (ret?.ok) {
    ElMessage.success(result === "approved" ? "已通过" : "已驳回");
  }
}

async function onBatchApprove(result) {
  const ret = await submitBatchApprove(result);
  if (ret?.needOpinion) {
    ElMessage.warning("驳回时请填写审批意见");
    return;
  }
  if (ret?.ok) {
    if (ret.failCount > 0) {
      ElMessage.warning(`成功审批${ret.successCount}条，失败${ret.failCount}条`);
    } else {
      ElMessage.success(result === "approved" ? "批量审批已通过" : "批量审批已驳回");
    }
  }
}

function formatRecordTime(time) {
  return formatDisplayTime(time) || "—";
}

function openApproveFromDetail() {
async function openApproveFromDetail() {
  const row = detailRow.value;
  detailDialog.visible = false;
  openApprove(row);
  await openApprove(row);
}

function openEditFromDetail() {
@@ -369,6 +525,19 @@
  openEditDialog(row);
}

function openEditFromReimburseDetail() {
  const row = reimburseDialog.instanceRow;
  reimburseDialog.visible = false;
  if (row) openEditDialog(row);
}

async function openReimburseApproveFromDetail() {
  const row = reimburseDialog.instanceRow;
  if (!row) return;
  reimburseDialog.mode = "approve";
  approveOpinion.value = "";
}

onMounted(() => {
  loadFlowUsers();
  loadSearchBusinessTypeOptions();