修改组件

gaoluyang

6 天以前 adeb8b768926ed50a3fb0857f366d6a0308d2cc0

 src/pages/cooperativeOffice/collaborativeApproval/index.vue

@@ -1,65 +1,94 @@
// 审批管理主页面
<template>
   <view class="sales-account">
      <!-- 页面头部 -->
      <view class="page-header">
         <view class="header-left">
            <up-icon name="arrow-left" size="20" color="#333" @click="goBack"></up-icon>
         </view>
         <view class="header-center">
            <text class="page-title">审批管理</text>
         </view>
      </view>
      <!-- 使用通用页面头部组件 -->
      <PageHeader title="审批管理" @back="goBack" />

      <!-- 搜索和筛选区域 -->
      <view class="search-filter-section">
         <view class="search-bar">
            <view class="search-input">
               <u-input placeholder="请输入采购合同号" class="search-text" v-model="searchKeyword">
                  <template #suffix>
                     <up-icon name="search" size="24" color="#999" @click="getList"></up-icon>
                  </template>
               </u-input>
               <input
                  class="search-text"
                  placeholder="请输入流程编号"
                  v-model="searchForm.approveId"
               />
            </view>
            <view class="filter-button" @click="showFilterOptions">
               <van-icon name="filter-o" size="24" color="#999"></van-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="total > 0">
      <!-- 审批列表 -->
      <view class="ledger-list" v-if="ledgerList.length > 0">
         <view v-for="(item, index) in ledgerList" :key="index">
            <view class="ledger-item" @click="handleItemClick(item)">
            <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>
                     </view>
                     <text class="item-id">{{ item.salesContractNo }}</text>
                     <text class="item-id">{{ item.approveId }}</text>
                  </view>
                  <view class="item-tag">
                     <van-tag :type="getTagClass(item.approveStatus)" size="medium">{{ formatReceiptType(item.approveStatus) }}</van-tag>
                  </view>
               </view>
               <up-divider></up-divider>

               <view class="item-details">
                  <view class="detail-info">
                     <view class="detail-row">
                        <text class="detail-label">申请人</text>
                        <text class="detail-value">{{ item.entryPersonName }}</text>
                     </view>
                     <view class="detail-row">
                        <text class="detail-label">申请日期</text>
                        <text class="detail-value highlightBlue">{{ item.entryDate }}</text>
                     </view>
                  <view class="detail-row">
                     <text class="detail-label">申请人</text>
                     <text class="detail-value">{{ item.approveUserName }}</text>
                  </view>
                  <view class="detail-row">
                     <text class="detail-label">申请部门</text>
                     <text class="detail-value">{{ item.approveDeptName }}</text>
                  </view>
                  <view class="detail-row-approveReason">
                     <text class="detail-label">审批事由</text>
                     <text class="detail-value highlightBlue">{{ item.approveReason }}</text>
                  </view>
                  <view class="detail-row">
                     <text class="detail-label">申请日期</text>
                     <text class="detail-value">{{ item.approveTime }}</text>
                  </view>
                  <view class="detail-row">
                     <text class="detail-label">结束日期</text>
                     <text class="detail-value">{{ item.approveOverTime }}</text>
                  </view>
                  <up-divider></up-divider>
                  <view class="detail-info">
                     <view class="detail-row">
                        <text class="detail-label">申请部门</text>
                        <text class="detail-value">{{ item.entryPersonName }}</text>
                     <view class="detail-row-user">
                        <text class="detail-label">当前审批人</text>
                        <view class="detail-value approver-value">
                           <view class="approver-chip">
                              <text class="approver-name">{{ item.approveUserCurrentName || '未分配' }}</text>
                           </view>
                        </view>
                     </view>
                     <view class="detail-row">
                        <text class="detail-label">审批状态</text>
                        <text class="detail-value highlightYellow">{{ item.entryDate }}</text>
                        <view class="actions">
                           <van-button
                              type="primary"
                              size="small"
                              class="action-btn edit"
                              :disabled="item.approveStatus == 2 || item.approveStatus == 1 || item.approveStatus == 4"
                              @click="handleItemClick(item)"
                           >
                              编辑
                           </van-button>
                           <van-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)"
                           >
                              审核
                           </van-button>
                        </view>
                     </view>
                  </view>
               </view>
@@ -69,7 +98,7 @@
      <view v-else class="no-data">
         <text>暂无审批数据</text>
      </view>

<!--      <van-floating-bubble icon="plus" @click="handleAdd"/>-->
      <!-- 浮动操作按钮 -->
      <view class="fab-button" @click="handleAdd">
         <up-icon name="plus" size="24" color="#ffffff"></up-icon>
@@ -80,19 +109,23 @@
<script setup>
   import {
      ref,
      reactive,
      onMounted
      toRefs,
      reactive
   } from "vue";
   import {
      ledgerListPage
   } from "@/api/cooperativeOffice/collaborativeApproval";

   // 搜索关键词
   const searchKeyword = ref("");

   // 销售台账数据
   import PageHeader from "@/components/PageHeader.vue";
   import {approveProcessListPage} from "@/api/collaborativeApproval/approvalProcess";
   import {onShow} from "@dcloudio/uni-app";
   import useUserStore from "@/store/modules/user";
	
   const userStore = useUserStore()
   // 数据
   const ledgerList = ref([]);
   const total = ref(0);
   const data = reactive({
      searchForm: {
         approveId: "",
      },
   });
   const { searchForm } = toRefs(data);

   // 返回上一页
   const goBack = () => {
@@ -104,12 +137,11 @@
         current: -1,
         size: -1,
      };
      ledgerListPage({
            ...page
      approveProcessListPage({
            ...page,approveType: 0,...searchForm.value
         })
         .then((res) => {
            ledgerList.value = res.records;
            total.value = res.total;
            ledgerList.value = res.data.records;
         })
         .catch(() => {
            // tableLoading.value = false;
@@ -124,23 +156,58 @@
         },
      });
   };
   // 格式化回款方式
   const formatReceiptType = (params) => {
      if (params == 0) {
         return "待审核";
      } else if (params == 1) {
         return "审核中";
      } else if (params == 2) {
         return "审核完成";
      } else if (params == 4) {
         return "已重新提交";
      } else {
         return '不通过';
      }
   };
   // 获取标签样式类
   const getTagClass = (type) => {
      if (type == 0) {
         return "warning";
      } else if (type == 1) {
         return "primary";
      } else if (type == 2) {
         return "success";
      } else if (type == 4) {
         return "primary";
      } else {
         return "danger";
      }
   };

   // 点击列表项
   const handleItemClick = (item) => {
      uni.showToast({
         title: `查看合同: ${item.contractId}`,
         icon: "none",
      // 使用本地存储传递数据
      uni.setStorageSync('invoiceLedgerEditRow', JSON.stringify(item));
      uni.navigateTo({
         url: `/pages/cooperativeOffice/collaborativeApproval/detail?operationType=edit&approveId=${item.approveId}`,
      });
   };

   // 添加新记录
   const handleAdd = () => {
      uni.navigateTo({
         url: "/pages/cooperativeOffice/collaborativeApproval/detail",
         url: "/pages/cooperativeOffice/collaborativeApproval/detail?operationType=add",
      });
   };
   // 点击审核
   const approve = (item) => {
      uni.navigateTo({
         url: `/pages/cooperativeOffice/collaborativeApproval/approve?approveId=${item.approveId}`
      })
   }

   onMounted(() => {
   onShow(() => {
      // 页面加载完成后的初始化逻辑
      getList();
   });
@@ -156,73 +223,28 @@
      background: #f8f9fa;
      position: relative;
   }

   .page-header {
      background: #ffffff;
      padding: 16px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #f0f0f0;
      position: sticky;
      /* 兼容 iOS 刘海/灵动岛安全区 */
      padding-top: env(safe-area-inset-top);
      top: 0;
      z-index: 100;
   }

   .header-left {
   .search-input {
      flex: 1;
      background: #f5f5f5;
      border-radius: 24px;
      padding: 10px 16px;
      display: flex;
      align-items: center;
      gap: 8px;
   }

   .nav-icon {
      width: 24px;
      height: 24px;
      background: #2979ff;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
   }

   .nav-text {
      font-size: 14px;
      color: #2979ff;
      font-weight: 500;
   }

   .header-center {
   .search-text {
      flex: 1;
      text-align: center;
   }

   .page-title {
      font-size: 18px;
      font-weight: 600;
      font-size: 14px;
      color: #333;
      background: transparent;
      border: none;
      outline: none;
   }
	
   .search-text::placeholder {
      color: #999;
   }

   .header-right {
      display: flex;
      align-items: center;
   }

   .status-bar {
      display: flex;
      align-items: center;
      gap: 4px;
   }

   .signal,
   .wifi,
   .battery {
      width: 16px;
      height: 8px;
      background: #333;
      border-radius: 2px;
   }

   .search-filter-section {
      padding: 10px 20px;
@@ -234,17 +256,16 @@
      align-items: center;
      gap: 12px;
   }

	
   .search-input {
      flex: 1;
      background: #f5f5f5;
      border-radius: 24px;
      padding: 4px 16px;
      padding: 10px 16px;
      display: flex;
      align-items: center;
      gap: 8px;
   }

   .search-text {
      flex: 1;
      font-size: 14px;
@@ -253,7 +274,7 @@
      border: none;
      outline: none;
   }

	
   .search-text::placeholder {
      color: #999;
   }
@@ -310,7 +331,6 @@
   }

   .item-tag {
      background: #4caf50;
      border-radius: 4px;
      padding: 2px 4px;
   }
@@ -324,16 +344,27 @@
   .item-details {
      padding: 16px 0;
   }

	
   .detail-row {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      margin-bottom: 8px;

		
      &:last-child {
         margin-bottom: 0;
      }
   }
   .detail-row-user {
      display: flex;
      align-items: center;
      justify-content: space-between;
   }
   .detail-row-approveReason {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 8px;
   }

   .detail-info {
@@ -387,4 +418,50 @@
      box-shadow: 0 4px 16px rgba(41, 121, 255, 0.3);
      z-index: 1000;
   }

   .approver-value {
      display: flex;
      justify-content: flex-end;
   }
   .approver-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: #f0f6ff;
      color: #2b7cff;
      border: 1px solid #e0efff;
      border-radius: 999px;
      padding: 4px 10px;
      max-width: 100%;
   }
   .approver-name {
      font-size: 12px;
      color: #2b7cff;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
   }

   .actions {
      display: flex;
      gap: 10px;
      align-items: center;
      justify-content: flex-end;
   }

   .action-btn {
      border-radius: 16px;
      height: 28px;
      line-height: 28px;
      padding: 0 12px;
   }
   .action-btn.edit {
      /* primary 样式来自组件，这里保留钩子以便后续需要扩展 */
   }
   .action-btn.approve {
      /* success 样式来自组件，这里保留钩子以便后续需要扩展 */
   }
   :deep(.van-floating-bubble) {
      background: #ed8d05;
   }
</style>