feat: 综合业务模块页面重构与交互完善

hsy

22 小时以前 2d3530a7c11557a40807ad7c0b9e302ce6ce3a9f

 src/views/officeProcessAutomation/ReimburseManage/cost-reimburse/index.vue

@@ -1,4 +1,4 @@
<!--OA模块：费用报销-->
<!--OA模块：费用报销（列表 /finReimbursement/listPage，reimbursementType=2）-->
<template>
  <div class="app-container">
    <div class="search_form mb20">
@@ -12,31 +12,42 @@
          :prefix-icon="Search"
          @keyup.enter="handleQuery"
        />
        <span class="search_title" style="margin-left: 12px">申请时间：</span>
        <el-date-picker
          v-model="searchForm.applyTimeFrom"
          type="date"
          placeholder="开始日期"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          style="width: 150px"
        <span class="search_title" style="margin-left: 10px;">部门：</span>
        <el-tree-select
          v-model="searchForm.deptId"
          :data="deptOptions"
          :props="{ value: 'id', label: 'label', children: 'children' }"
          value-key="id"
          placeholder="选择部门"
          check-strictly
          clearable
          style="width: 180px"
        />
        <span class="search_title" style="margin-left: 8px">至</span>
        <span class="search_title" style="margin-left: 10px;">项目：</span>
        <el-select v-model="searchForm.expenseCategory" clearable placeholder="选择项目" style="width: 150px">
          <el-option
            v-for="opt in EXPENSE_CATEGORY_OPTIONS"
            :key="opt.value"
            :label="opt.label"
            :value="opt.value"
          />
        </el-select>
        <span class="search_title" style="margin-left: 10px;">申请时间：</span>
        <el-date-picker
          v-model="searchForm.applyTimeTo"
          type="date"
          placeholder="结束日期"
          format="YYYY-MM-DD"
          v-model="searchForm.applyTimeRange"
          type="daterange"
          range-separator="-"
          start-placeholder="开始"
          end-placeholder="结束"
          value-format="YYYY-MM-DD"
          style="width: 150px; margin-left: 8px"
          clearable
          style="width: 240px"
        />
        <el-button type="primary" style="margin-left: 10px" @click="handleQuery">搜索</el-button>
        <el-button @click="resetSearch">重置</el-button>
      </div>
      <div class="search_actions">
        <el-button type="success" plain @click="handleImportClick">导入</el-button>
<!--        <el-button type="success" plain @click="handleImportClick">导入</el-button>-->
        <el-button type="warning" plain @click="handleExport">导出</el-button>
        <el-button type="primary" @click="openFormDialog('add')">新增费用报销</el-button>
      </div>
@@ -99,12 +110,21 @@
        <el-card class="form-section" shadow="never">
          <template #header><span class="card-header-title">基本信息</span></template>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="员工编号">
                <el-input v-model="form.employeeNo" readonly placeholder="选择员工后自动带出" />
            <el-col :span="8">
              <el-form-item label="归属部门" prop="deptId">
                <el-tree-select
                  v-model="form.deptId"
                  :data="deptOptions"
                  :props="{ value: 'id', label: 'label', children: 'children' }"
                  value-key="id"
                  placeholder="请选择部门"
                  check-strictly
                  style="width: 100%"
                  @change="onDeptChange"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
            <el-col :span="8">
              <el-form-item label="员工姓名" prop="applicantId">
                <el-select
                  v-model="form.applicantId"
@@ -125,6 +145,11 @@
                    :value="u.userId"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="员工编号">
                <el-input v-model="form.employeeNo" readonly placeholder="选择员工后自动带出" />
              </el-form-item>
            </el-col>
          </el-row>
@@ -268,17 +293,22 @@
        <el-card class="form-section" shadow="never">
          <template #header><span class="card-header-title">收款信息</span></template>
          <el-row :gutter="20">
            <el-col :span="8">
            <el-col :span="6">
              <el-form-item label="付款方" prop="payer">
                <el-input v-model="form.payer" placeholder="请输入付款方" maxlength="50" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="收款人" prop="payee">
                <el-input v-model="form.payee" placeholder="请输入收款人" maxlength="50" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
            <el-col :span="6">
              <el-form-item label="收款账号" prop="payeeAccount">
                <el-input v-model="form.payeeAccount" placeholder="银行卡号" maxlength="30" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
            <el-col :span="6">
              <el-form-item label="开户支行" prop="bankBranch">
                <el-input v-model="form.bankBranch" placeholder="开户支行全称" maxlength="100" />
              </el-form-item>
@@ -318,16 +348,27 @@
        </el-card>
      </el-form>
      <template #footer>
        <el-button v-if="!formDialog.readonly" type="primary" @click="submitForm">提 交</el-button>
        <el-button
          v-if="!formDialog.readonly"
          type="primary"
          :loading="submitSaving"
          @click="submitForm"
        >
          提 交
        </el-button>
        <el-button @click="formDialog.visible = false">{{ formDialog.readonly ? "关 闭" : "取 消" }}</el-button>
      </template>
    </el-dialog>

    <!-- 详情 -->
    <el-dialog v-model="detailDialog.visible" title="费用报销详情" width="900px" append-to-body destroy-on-close>
      <div v-loading="detailLoading">
      <DetailPanel :row="detailRow" />
      <el-divider content-position="left">审批流程</el-divider>
      <ApprovalFlowProgress :nodes="detailRow.approvalFlowNodes" :current-index="detailRow.currentNodeIndex ?? 0" />
      <ApprovalFlowProgress
        :nodes="detailRow.approvalFlowProgressNodes ?? detailRow.approvalFlowNodes"
        :current-index="detailRow.currentNodeIndex ?? 0"
      />
      <el-divider content-position="left">审批记录</el-divider>
      <el-timeline v-if="detailRow.approvalRecords?.length">
        <el-timeline-item
@@ -340,6 +381,7 @@
        </el-timeline-item>
      </el-timeline>
      <el-empty v-else description="暂无审批记录" :image-size="60" />
      </div>
      <template #footer>
        <el-button type="primary" @click="detailDialog.visible = false">关 闭</el-button>
      </template>
@@ -357,7 +399,7 @@
      <DetailPanel :row="approveDialog.row" />
      <el-divider content-position="left">流程进度</el-divider>
      <ApprovalFlowProgress
        :nodes="approveDialog.row?.approvalFlowNodes"
        :nodes="approveDialog.row?.approvalFlowProgressNodes ?? approveDialog.row?.approvalFlowNodes"
        :current-index="approveDialog.row?.currentNodeIndex ?? 0"
      />
      <el-form label-width="100px" class="mt16">
@@ -406,11 +448,13 @@
  formDialog,
  formRules,
  detailDialog,
  detailLoading,
  detailRow,
  approveDialog,
  approveOpinion,
  applicantFormSearchLoading,
  applicantFormOptions,
  deptOptions,
  flowUserOptions,
  detailTotalAmount,
  approvalRuleHint,
@@ -420,6 +464,7 @@
  remoteSearchApplicantForm,
  userSelectLabel,
  onApplicantChange,
  onDeptChange,
  onExpenseCategoryChange,
  applyTemplate,
  onDetailAmountChange,
@@ -431,6 +476,7 @@
  openFormDialog,
  onFormClosed,
  submitForm,
  submitSaving,
  approvalActionLabel,
  submitApprove,
  handleExport,