差旅报销费用报销

yyb

6 小时以前 df5efb2ca2b0cf74d9160ffe2b6c215c4ddc9c99

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

@@ -3,30 +3,35 @@
  <div class="app-container">
    <div class="search_form mb20">
      <div class="search_fields">
        <span class="search_title">审批类型：</span>
        <span class="search_title">模板类型：</span>
        <el-select
          v-model="searchForm.approvalType"
          placeholder="请选择审批类型"
          v-model="searchForm.businessType"
          placeholder="请选择模板类型"
          clearable
          filterable
          style="width: 200px"
        >
          <el-option
            v-for="opt in APPROVAL_TYPE_OPTIONS"
            v-for="opt in searchBusinessTypeOptions"
            :key="`search-biz-type-${opt.value}`"
            :label="opt.label"
            :value="opt.value"
          />
        </el-select>
        <span class="search_title" style="margin-left: 12px">审批状态：</span>
        <el-select
          v-model="searchForm.status"
          placeholder="请选择审批状态"
          clearable
          style="width: 140px"
        >
          <el-option
            v-for="opt in APPROVAL_STATUS_SEARCH_OPTIONS"
            :key="opt.value"
            :label="opt.label"
            :value="opt.value"
          />
        </el-select>
        <span class="search_title" style="margin-left: 12px">申请人名称：</span>
        <el-input
          v-model="searchForm.applicantKeyword"
          style="width: 200px"
          placeholder="请输入申请人名称"
          clearable
          :prefix-icon="Search"
          @keyup.enter="handleQuery"
        />
        <span class="search_title" style="margin-left: 12px">创建时间：</span>
        <el-date-picker
          v-model="searchForm.createTimeRange"
@@ -218,6 +223,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"
@@ -272,7 +335,9 @@
<script setup>
import { 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";
@@ -285,7 +350,9 @@
const al = useApproveList();
const {
  Search,
  APPROVAL_TYPE_OPTIONS,
  APPROVAL_STATUS_SEARCH_OPTIONS,
  searchBusinessTypeOptions,
  loadSearchBusinessTypeOptions,
  submitBusinessTypeOptions,
  submitTemplateCards,
  selectedBusinessTypeLabel,
@@ -302,9 +369,11 @@
  tableColumn,
  detailDialog,
  detailRow,
  reimburseDialog,
  approveDialog,
  approveOpinion,
  approveSubmitting,
  submitReimburseApprove,
  submitDialog,
  isSubmitEdit,
  submitDialogTitle,
@@ -335,8 +404,30 @@
  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);
  if (ret?.needOpinion) {
    ElMessage.warning("驳回时请填写审批意见");
    return;
  }
  if (ret?.ok) {
    ElMessage.success(result === "approved" ? "已通过" : "已驳回");
  }
}

async function onReimburseApprove(result) {
  const ret = await submitReimburseApprove(result);
  if (ret?.needOpinion) {
    ElMessage.warning("驳回时请填写审批意见");
    return;
@@ -350,10 +441,10 @@
  return formatDisplayTime(time) || "—";
}

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

function openEditFromDetail() {
@@ -362,8 +453,22 @@
  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();
  handleQuery();
});
</script>