修改组件

gaoluyang

6 天以前 adeb8b768926ed50a3fb0857f366d6a0308d2cc0

 src/pages/cooperativeOffice/collaborativeApproval/index.vue

@@ -8,51 +8,87 @@
      <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>
@@ -62,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>
@@ -73,20 +109,23 @@
<script setup>
   import {
      ref,
      reactive,
      onMounted
      toRefs,
      reactive
   } from "vue";
   import {
      ledgerListPage
   } from "@/api/cooperativeOffice/collaborativeApproval";
   import PageHeader from "@/components/PageHeader.vue";

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

   // 销售台账数据
   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 = () => {
@@ -98,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;
@@ -118,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();
   });
@@ -150,7 +223,27 @@
      background: #f8f9fa;
      position: relative;
   }

   .search-input {
      flex: 1;
      background: #f5f5f5;
      border-radius: 24px;
      padding: 10px 16px;
      display: flex;
      align-items: center;
      gap: 8px;
   }
   .search-text {
      flex: 1;
      font-size: 14px;
      color: #333;
      background: transparent;
      border: none;
      outline: none;
   }
	
   .search-text::placeholder {
      color: #999;
   }


   .search-filter-section {
@@ -163,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;
@@ -182,7 +274,7 @@
      border: none;
      outline: none;
   }

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

   .item-tag {
      background: #4caf50;
      border-radius: 4px;
      padding: 2px 4px;
   }
@@ -253,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 {
@@ -316,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>