zhangwencui
2026-01-16 00b5cbce9f587931c7dc5455df707b0acc753e69
src/pages/cooperativeOffice/collaborativeApproval/index.vue
@@ -2,33 +2,37 @@
<template>
   <view class="sales-account">
      <!-- 使用通用页面头部组件 -->
      <PageHeader title="审批管理" @back="goBack" />
    <PageHeader :title="pageTitle"
                @back="goBack" />
      <!-- 搜索和筛选区域 -->
      <view class="search-section">
         <view class="search-bar">
            <view class="search-input">
               <up-input
                  class="search-text"
          <up-input class="search-text"
                  placeholder="请输入流程编号"
                  v-model="searchForm.approveId"
                  clearable
               />
                    clearable />
            </view>
            <view class="search-button" @click="getList">
               <up-icon name="search" size="24" color="#999"></up-icon>
        <view class="search-button"
              @click="getList">
          <up-icon name="search"
                   size="24"
                   color="#999"></up-icon>
            </view>
         </view>
      </view>
      <!-- 审批列表 -->
      <view class="ledger-list" v-if="ledgerList.length > 0">
         <view v-for="(item, index) in ledgerList" :key="index">
    <view class="ledger-list"
          v-if="ledgerList.length > 0">
      <view v-for="(item, index) in ledgerList"
            :key="index">
            <view class="ledger-item">
               <view class="item-header">
                  <view class="item-left">
                     <view class="document-icon">
                        <up-icon name="file-text" size="16" color="#ffffff"></up-icon>
                <up-icon name="file-text"
                         size="16"
                         color="#ffffff"></up-icon>
                     </view>
                     <text class="item-id">{{ item.approveId }}</text>
                  </view>
@@ -37,7 +41,6 @@
                  </view>
               </view>
               <up-divider></up-divider>
               <view class="item-details">
                  <view class="detail-row">
                     <text class="detail-label">申请人</text>
@@ -55,7 +58,6 @@
                     <text class="detail-label">申请日期</text>
                     <text class="detail-value">{{ item.approveTime }}</text>
                  </view>
                  <!-- approveType=2 请假相关字段 -->
                  <template v-if="item.approveType === 2">
                     <view class="detail-row">
@@ -67,19 +69,18 @@
                        <text class="detail-value">{{ item.endDate || '-' }}</text>
                     </view>
                  </template>
                  <!-- approveType=3 出差相关字段 -->
                  <view v-if="item.approveType === 3" class="detail-row">
            <view v-if="item.approveType === 3"
                  class="detail-row">
                     <text class="detail-label">出差地点</text>
                     <text class="detail-value">{{ item.location || '-' }}</text>
                  </view>
                  <!-- approveType=4 报销相关字段 -->
                  <view v-if="item.approveType === 4" class="detail-row">
            <view v-if="item.approveType === 4"
                  class="detail-row">
                     <text class="detail-label">报销金额</text>
                     <text class="detail-value highlightYellow">{{ item.price ? `¥${item.price}` : '-' }}</text>
                  </view>
                  <view class="detail-row">
                     <text class="detail-label">结束日期</text>
                     <text class="detail-value">{{ item.approveOverTime }}</text>
@@ -96,22 +97,18 @@
                     </view>
                     <view class="detail-row">
                        <view class="actions">
                           <u-button
                              type="primary"
                  <u-button type="primary"
                              size="small"
                              class="action-btn edit"
                              :disabled="item.approveStatus == 2 || item.approveStatus == 1 || item.approveStatus == 4"
                              @click="handleItemClick(item)"
                           >
                            @click="handleItemClick(item)">
                                 编辑
                           </u-button>
                           <u-button
                              type="success"
                  <u-button type="success"
                              size="small"
                              class="action-btn approve"
                              :disabled="item.approveUserCurrentId == null || item.approveStatus == 2 || item.approveStatus == 3 || item.approveStatus == 4 || item.approveUserCurrentId !== userStore.id"
                              @click="approve(item)"
                           >
                            @click="approve(item)">
                                 审核
                           </u-button>
                        </view>
@@ -121,22 +118,22 @@
            </view>
         </view>
      </view>
      <view v-else class="no-data">
    <view v-else
          class="no-data">
         <text>暂无审批数据</text>
      </view>
      <!-- 浮动操作按钮 -->
      <view class="fab-button" @click="handleAdd">
         <up-icon name="plus" size="24" color="#ffffff"></up-icon>
    <view class="fab-button"
          @click="handleAdd">
      <up-icon name="plus"
               size="24"
               color="#ffffff"></up-icon>
      </view>
   </view>
</template>
<script setup>
   import {
      ref,
      toRefs,
      reactive
   } from "vue";
  import { ref, toRefs, reactive } from "vue";
   import PageHeader from "@/components/PageHeader.vue";
   import {approveProcessListPage} from "@/api/collaborativeApproval/approvalProcess";
   import {onShow} from "@dcloudio/uni-app";
@@ -146,11 +143,27 @@
   const props = defineProps({
      approveType: {
         type: Number,
         default: 0
      }
      default: 0,
    },
   });
   
   const userStore = useUserStore()
  // 映射 approveType 到对应的页面标题
  const getPageTitle = type => {
    const titleMap = {
      1: "公出管理",
      2: "请假管理",
      3: "出差管理",
      4: "报销管理",
      5: "采购管理",
      6: "报价管理",
      7: "出库管理",
    };
    return titleMap[type] || "审批管理";
  };
  const pageTitle = getPageTitle(props.approveType);
  const userStore = useUserStore();
   // 数据
   const ledgerList = ref([]);
   const data = reactive({
@@ -166,27 +179,29 @@
   };
   // 查询列表
   const getList = () => {
      showLoadingToast('加载中...')
    showLoadingToast("加载中...");
      const page = {
         current: -1,
         size: -1,
      };
      approveProcessListPage({
            ...page,approveType: props.approveType,...searchForm.value
      ...page,
      approveType: props.approveType,
      ...searchForm.value,
         })
         .then((res) => {
      .then(res => {
            ledgerList.value = res.data.records;
            closeToast()
        closeToast();
         })
         .catch(() => {
            closeToast()
        closeToast();
         });
   };
   // 显示加载提示
   const showLoadingToast = (message) => {
  const showLoadingToast = message => {
      uni.showLoading({
         title: message,
         mask: true
      mask: true,
      });
   };
@@ -199,13 +214,13 @@
   const showFilterOptions = () => {
      uni.showActionSheet({
         itemList: ["按日期筛选", "按状态筛选", "按金额筛选"],
         success: (res) => {
      success: res => {
            console.log("选择了筛选选项:", res.tapIndex);
         },
      });
   };
   // 格式化回款方式
   const formatReceiptType = (params) => {
  const formatReceiptType = params => {
      if (params == 0) {
         return "待审核";
      } else if (params == 1) {
@@ -215,11 +230,11 @@
      } else if (params == 4) {
         return "已重新提交";
      } else {
         return '不通过';
      return "不通过";
      }
   };
   // 获取标签样式类
   const getTagClass = (type) => {
  const getTagClass = type => {
      if (type == 0) {
         return "warning";
      } else if (type == 1) {
@@ -234,12 +249,12 @@
   };
   // 点击列表项
   const handleItemClick = (item) => {
  const handleItemClick = item => {
      // 使用本地存储传递数据
      uni.setStorageSync('invoiceLedgerEditRow', JSON.stringify(item));
      uni.setStorageSync('operationType', 'edit');
      uni.setStorageSync('approveId', item.approveId);
      uni.setStorageSync('approveType', props.approveType);
    uni.setStorageSync("invoiceLedgerEditRow", JSON.stringify(item));
    uni.setStorageSync("operationType", "edit");
    uni.setStorageSync("approveId", item.approveId);
    uni.setStorageSync("approveType", props.approveType);
      uni.navigateTo({
         url: "/pages/cooperativeOffice/collaborativeApproval/detail",
      });
@@ -247,20 +262,22 @@
   // 添加新记录
   const handleAdd = () => {
      uni.setStorageSync('operationType', 'add');
      uni.setStorageSync('approveType', props.approveType);
    uni.setStorageSync("operationType", "add");
    uni.setStorageSync("approveType", props.approveType);
      uni.navigateTo({
         url: `/pages/cooperativeOffice/collaborativeApproval/detail?approveType=${props.approveType}`,
      });
   };
   // 点击审核
   const approve = (item) => {
      uni.setStorageSync('approveId', item.approveId);
      uni.setStorageSync('approveType', props.approveType);
  const approve = item => {
    uni.setStorageSync("approveId", item.approveId);
    uni.setStorageSync("approveType", props.approveType);
      uni.navigateTo({
         url: "/pages/cooperativeOffice/collaborativeApproval/approve?approveType=" + props.approveType
      })
   }
      url:
        "/pages/cooperativeOffice/collaborativeApproval/approve?approveType=" +
        props.approveType,
    });
  };
   onShow(() => {
      // 页面加载完成后的初始化逻辑
@@ -347,5 +364,4 @@
      line-height: 28px;
      padding: 0 12px;
   }
</style>