客户往来详情，接口字段变更

zhangwencui

2 天以前 7d83122dba56d6beeaf3772c72005344baf5fd3d

客户往来详情，接口字段变更

 src/pages/index.vue

@@ -38,54 +38,54 @@
    <!--            </view>-->
    <!--        </view>-->
    <!-- 营销管理模块 -->
    <!--    <view class="common-module marketing-module">-->
    <!--      <view class="module-header">-->
    <!--        <view class="module-title-container">-->
    <!--          <text class="module-title">营销管理</text>-->
    <!--        </view>-->
    <!--      </view>-->
    <!--      <view class="module-content">-->
    <!--        <up-grid :border="false"-->
    <!--                 col="4">-->
    <!--          <up-grid-item v-for="(item, index) in marketingItems"-->
    <!--                        :key="index"-->
    <!--                        @click="handleCommonItemClick(item)">-->
    <!--            <view class="icon-container"-->
    <!--                  :style="{ background: item.bgColor }">-->
    <!--              <up-icon :name="item.icon"-->
    <!--                       :size="58"-->
    <!--                       color="#ffffff"></up-icon>-->
    <!--            </view>-->
    <!--            <text class="item-label">{{item.label}}</text>-->
    <!--          </up-grid-item>-->
    <!--        </up-grid>-->
    <!--      </view>-->
    <!--    </view>-->
    <view class="common-module marketing-module">
      <view class="module-header">
        <view class="module-title-container">
          <text class="module-title">营销管理</text>
        </view>
      </view>
      <view class="module-content">
        <up-grid :border="false"
                 col="4">
          <up-grid-item v-for="(item, index) in marketingItems"
                        :key="index"
                        @click="handleCommonItemClick(item)">
            <view class="icon-container"
                  :style="{ background: item.bgColor }">
              <up-icon :name="item.icon"
                       :size="58"
                       color="#ffffff"></up-icon>
            </view>
            <text class="item-label">{{item.label}}</text>
          </up-grid-item>
        </up-grid>
      </view>
    </view>
    <!--    &lt;!&ndash; 采购管理模块 &ndash;&gt;-->
    <!--    <view class="common-module purchase-module">-->
    <!--      <view class="module-header">-->
    <!--        <view class="module-title-container">-->
    <!--          <text class="module-title">采购管理</text>-->
    <!--        </view>-->
    <!--      </view>-->
    <!--      <view class="module-content">-->
    <!--        <up-grid :border="false"-->
    <!--                 col="4">-->
    <!--          <up-grid-item v-for="(item, index) in purchaseItems"-->
    <!--                        :key="index"-->
    <!--                        @click="handleCommonItemClick(item)">-->
    <!--            <view class="icon-container"-->
    <!--                  :style="{ background: item.bgColor }">-->
    <!--              <up-icon :name="item.icon"-->
    <!--                       :size="58"-->
    <!--                       color="#ffffff"></up-icon>-->
    <!--            </view>-->
    <!--            <text class="item-label">{{item.label}}</text>-->
    <!--          </up-grid-item>-->
    <!--        </up-grid>-->
    <!--      </view>-->
    <!--    </view>-->
    <!--    &lt;!&ndash; 协同办公模块 &ndash;&gt;-->
    <view class="common-module purchase-module">
      <view class="module-header">
        <view class="module-title-container">
          <text class="module-title">采购管理</text>
        </view>
      </view>
      <view class="module-content">
        <up-grid :border="false"
                 col="4">
          <up-grid-item v-for="(item, index) in purchaseItems"
                        :key="index"
                        @click="handleCommonItemClick(item)">
            <view class="icon-container"
                  :style="{ background: item.bgColor }">
              <up-icon :name="item.icon"
                       :size="58"
                       color="#ffffff"></up-icon>
            </view>
            <text class="item-label">{{item.label}}</text>
          </up-grid-item>
        </up-grid>
      </view>
    </view>
    <!-- &lt;!&ndash; 协同办公模块 &ndash;&gt; -->
    <view class="common-module collaboration-module">
      <view class="module-header">
        <view class="module-title-container">
@@ -163,29 +163,29 @@
      </view>
    </view>
    <!-- 设备管理模块 -->
    <!--    <view class="common-module equipment-module">-->
    <!--      <view class="module-header">-->
    <!--        <view class="module-title-container">-->
    <!--          <text class="module-title">设备管理</text>-->
    <!--        </view>-->
    <!--      </view>-->
    <!--      <view class="module-content">-->
    <!--        <up-grid :border="false"-->
    <!--                 col="4">-->
    <!--          <up-grid-item v-for="(item, index) in equipmentItems"-->
    <!--                        :key="index"-->
    <!--                        @click="handleCommonItemClick(item)">-->
    <!--            <view class="icon-container"-->
    <!--                  :style="{ background: item.bgColor }">-->
    <!--              <up-icon :name="item.icon"-->
    <!--                       :size="58"-->
    <!--                       color="#ffffff"></up-icon>-->
    <!--            </view>-->
    <!--            <text class="item-label">{{item.label}}</text>-->
    <!--          </up-grid-item>-->
    <!--        </up-grid>-->
    <!--      </view>-->
    <!--    </view>-->
    <view class="common-module equipment-module">
      <view class="module-header">
        <view class="module-title-container">
          <text class="module-title">设备管理</text>
        </view>
      </view>
      <view class="module-content">
        <up-grid :border="false"
                 col="4">
          <up-grid-item v-for="(item, index) in equipmentItems"
                        :key="index"
                        @click="handleCommonItemClick(item)">
            <view class="icon-container"
                  :style="{ background: item.bgColor }">
              <up-icon :name="item.icon"
                       :size="58"
                       color="#ffffff"></up-icon>
            </view>
            <text class="item-label">{{item.label}}</text>
          </up-grid-item>
        </up-grid>
      </view>
    </view>
  </view>
</template>


 src/pages/sales/invoiceLedger/index.vue

@@ -1,616 +1,629 @@
<template>
    <view class="sales-account">
        <!-- 使用通用页面头部组件 -->
        <PageHeader title="开票台账" @back="goBack" />
		
        <!-- 搜索和筛选区域（保持与销售台账风格一致） -->
        <view class="search-section">
            <view class="search-bar">
                <view class="search-input">
                    <up-input
                        class="search-text"
                        placeholder="请输入客户名称/合同号搜索"
                        v-model="searchForm.searchText"
                        @change="handleQuery"
                        clearable
                    />
                </view>
                <!--                <view class="filter-button" @click="showFilter = true">-->
                <!--                    <up-icon name="list" size="24" color="#999"></up-icon>-->
                <!--                </view>-->
                <view class="filter-button" @click="handleQuery">
                    <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-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>
                        </view>
                    </view>
                    <up-divider></up-divider>
                    <view class="item-details">
                        <view class="detail-row">
                            <text class="detail-label">客户名称</text>
                            <text class="detail-value">{{ item.customerName }}</text>
                        </view>
                        <view class="detail-row">
                            <text class="detail-label">客户合同号</text>
                            <text class="detail-value">{{ item.customerContractNo }}</text>
                        </view>
                        <view class="detail-row">
                            <text class="detail-label">项目</text>
                            <text class="detail-value">{{ item.projectName }}</text>
                        </view>
                        <view class="detail-row">
                            <text class="detail-label">产品大类</text>
                            <text class="detail-value">{{ item.productCategory }}</text>
                        </view>
                        <view class="detail-row">
                            <text class="detail-label">规格型号</text>
                            <text class="detail-value">{{ item.specificationModel }}</text>
                        </view>
                        <view class="detail-row">
                            <text class="detail-label">发票号</text>
                            <text class="detail-value">{{ item.invoiceNo || '-' }}</text>
                        </view>
                        <view class="detail-row">
                            <text class="detail-label">发票金额(元)</text>
                            <text class="detail-value highlight">{{ formatAmount(item.invoiceTotal) }}</text>
                        </view>
                        <view class="detail-row">
                            <text class="detail-label">税率(%)</text>
                            <text class="detail-value">{{ item.taxRate }}</text>
                        </view>
                        <view class="detail-row">
                            <text class="detail-label">录入人</text>
                            <text class="detail-value">{{ item.invoicePerson }}</text>
                        </view>
                        <view class="detail-row">
                            <text class="detail-label">录入日期</text>
                            <text class="detail-value">{{ formatDateTime(item.createTime) }}</text>
                        </view>
                        <view class="detail-row">
                            <text class="detail-label">开票日期</text>
                            <text class="detail-value">{{ item.invoiceDate || '-' }}</text>
                        </view>
                    </view>
                    <view class="action-buttons">
                        <up-button
                            type="primary"
                            size="small"
                            class="action-btn"
                            :disabled="item.invoicePerson !== userStore.nickName"
                            @click="openEdit(item)"
                        >
                            编辑
                        </up-button>
                        <up-button
                            type="error"
                            size="small"
                            plain
                            class="action-btn"
                            :disabled="item.invoicePerson !== userStore.nickName"
                            @click="handleDelete(item)"
                        >
                            删除
                        </up-button>
<!--                        <up-button-->
<!--                            size="small"-->
<!--                            plain-->
<!--                            class="action-btn"-->
<!--                            v-if="item.invoiceFileName"-->
<!--                            @click="openFileActions(item.commonFiles || [])"-->
<!--                        >-->
<!--                            查看附件-->
<!--                        </up-button>-->
<!--                        <up-button-->
<!--                            type="primary"-->
<!--                            size="small"-->
<!--                            class="action-btn"-->
<!--                            v-else-->
<!--                            :disabled="item.invoicePerson !== userStore.nickName"-->
<!--                            @click="openUpload(item)"-->
<!--                        >-->
<!--                            上传-->
<!--                        </up-button>-->
                    </view>
                </view>
            </view>
        </view>
        <view v-else class="no-data">
            <text>暂无开票台账数据</text>
        </view>
		
        <!-- 筛选弹窗 -->
        <up-popup v-model="showFilter" mode="bottom" round><up-transition>
            <view class="filter-popup">
                <up-cell-group title="筛选条件" inset>
                    <up-input
                        label="开票日期"
                        readonly
                        placeholder="请选择日期范围"
                        @click="showInvoiceRange = true"
                        v-model="invoiceRangeLabel"
                    />
                    <up-input
                        label="录入日期"
                        readonly
                        @click="showCreateDatePicker = true"
                        v-model="searchForm.createTimeStart"
                    />
                    <view class="switch-row">
                        <text class="switch-label">不显示有发票行</text>
                        <up-switch v-model="searchForm.status" size="20" />
                    </view>
                </up-cell-group>
                <view class="filter-actions">
                    <up-button @click="resetFilter">重置</up-button>
                    <up-button type="primary" @click="confirmFilter">确定</up-button>
                </view>
            </view>
        </up-transition></up-popup>
		
        <!-- 日历：开票日期范围 -->
        <up-popup v-model="showInvoiceRange" mode="bottom"><up-transition>
            <up-datetime-picker
                mode="date"
                type="range"
                title="选择开票日期范围"
                @confirm="onInvoiceRangeConfirm"
                @cancel="showInvoiceRange = false"
            />
        </up-transition></up-popup>
		
        <!-- 日期：录入日期 -->
        <up-popup v-model="showCreateDatePicker" mode="bottom"><up-transition>
            <up-datetime-picker
                mode="date"
                type="selector"
                v-model="currentCreateDate"
                title="选择录入日期"
                @confirm="onCreateDateConfirm"
                @cancel="showCreateDatePicker = false"
            />
        </up-transition></up-popup>
		
		
		
        <!-- 单行上传弹窗（无表单） -->
        <up-popup v-model="showUpload" mode="bottom" round><up-transition>
            <view class="upload-container">
                <up-cell-group title="上传附件（仅支持 pdf，最大10MB，最多10个）" inset>
                    <up-upload
                        accept="pdf"
                        multiple
                        :maxCount="10"
                        :afterRead="afterReadRowUpload"
                        :beforeRead="beforeReadPdf"
                    >
                        <up-button type="primary">点击上传</up-button>
                    </up-upload>
                    <view class="uploaded-list" v-if="fileList.length">
                        <view class="uploaded-item" v-for="(f, idx) in fileList" :key="idx">
                            <text class="file-name">{{ f.name || getFileNameFromUrl(f.url) }}</text>
                            <up-button size="mini" type="error" plain @click="removeUploaded(idx)">移除</up-button>
                        </view>
                    </view>
                </up-cell-group>
                <view class="filter-actions">
                    <up-button @click="showUpload = false">取消</up-button>
                    <up-button type="primary" @click="confirmUpload">确认</up-button>
                </view>
            </view>
        </up-transition></up-popup>
		
        <!-- 附件列表选择 -->
        <up-action-sheet v-model="showFileSheet" :actions="fileActions" cancel-text="取消" close-on-click-action @select="onSelectFile">
            <view class="up-action-sheet__cancel" @click="showFileSheet = false">
                取消
            </view>
        </up-action-sheet>
    </view>
  <view class="sales-account">
    <!-- 使用通用页面头部组件 -->
    <PageHeader title="开票台账"
                @back="goBack" />
    <!-- 搜索和筛选区域（保持与销售台账风格一致） -->
    <view class="search-section">
      <view class="search-bar">
        <view class="search-input">
          <up-input class="search-text"
                    placeholder="请输入客户名称/合同号搜索"
                    v-model="searchForm.searchText"
                    @change="handleQuery"
                    clearable />
        </view>
        <!--                <view class="filter-button" @click="showFilter = true">-->
        <!--                    <up-icon name="list" size="24" color="#999"></up-icon>-->
        <!--                </view>-->
        <view class="filter-button"
              @click="handleQuery">
          <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-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>
            </view>
          </view>
          <up-divider></up-divider>
          <view class="item-details">
            <view class="detail-row">
              <text class="detail-label">客户名称</text>
              <text class="detail-value">{{ item.customerName }}</text>
            </view>
            <view class="detail-row">
              <text class="detail-label">客户合同号</text>
              <text class="detail-value">{{ item.customerContractNo }}</text>
            </view>
            <view class="detail-row">
              <text class="detail-label">项目</text>
              <text class="detail-value">{{ item.projectName }}</text>
            </view>
            <view class="detail-row">
              <text class="detail-label">产品大类</text>
              <text class="detail-value">{{ item.productCategory }}</text>
            </view>
            <view class="detail-row">
              <text class="detail-label">规格型号</text>
              <text class="detail-value">{{ item.specificationModel }}</text>
            </view>
            <view class="detail-row">
              <text class="detail-label">发票号</text>
              <text class="detail-value">{{ item.invoiceNo || '-' }}</text>
            </view>
            <view class="detail-row">
              <text class="detail-label">发票金额(元)</text>
              <text class="detail-value highlight">{{ formatAmount(item.invoiceTotal) }}</text>
            </view>
            <view class="detail-row">
              <text class="detail-label">税率(%)</text>
              <text class="detail-value">{{ item.taxRate }}</text>
            </view>
            <view class="detail-row">
              <text class="detail-label">录入人</text>
              <text class="detail-value">{{ item.invoicePerson }}</text>
            </view>
            <view class="detail-row">
              <text class="detail-label">录入日期</text>
              <text class="detail-value">{{ formatDateTime(item.createTime) }}</text>
            </view>
            <view class="detail-row">
              <text class="detail-label">开票日期</text>
              <text class="detail-value">{{ item.invoiceDate || '-' }}</text>
            </view>
          </view>
          <view class="action-buttons">
            <up-button type="primary"
                       size="small"
                       class="action-btn"
                       :disabled="item.invoicePerson !== userStore.nickName"
                       @click="openEdit(item)">
              编辑
            </up-button>
            <up-button type="error"
                       size="small"
                       plain
                       class="action-btn"
                       :disabled="item.invoicePerson !== userStore.nickName"
                       @click="handleDelete(item)">
              删除
            </up-button>
            <!--                        <up-button-->
            <!--                            size="small"-->
            <!--                            plain-->
            <!--                            class="action-btn"-->
            <!--                            v-if="item.invoiceFileName"-->
            <!--                            @click="openFileActions(item.commonFiles || [])"-->
            <!--                        >-->
            <!--                            查看附件-->
            <!--                        </up-button>-->
            <!--                        <up-button-->
            <!--                            type="primary"-->
            <!--                            size="small"-->
            <!--                            class="action-btn"-->
            <!--                            v-else-->
            <!--                            :disabled="item.invoicePerson !== userStore.nickName"-->
            <!--                            @click="openUpload(item)"-->
            <!--                        >-->
            <!--                            上传-->
            <!--                        </up-button>-->
          </view>
        </view>
      </view>
    </view>
    <view v-else
          class="no-data">
      <text>暂无开票台账数据</text>
    </view>
    <!-- 筛选弹窗 -->
    <up-popup v-model="showFilter"
              mode="bottom"
              round><up-transition>
        <view class="filter-popup">
          <up-cell-group title="筛选条件"
                         inset>
            <up-input label="开票日期"
                      readonly
                      placeholder="请选择日期范围"
                      @click="showInvoiceRange = true"
                      v-model="invoiceRangeLabel" />
            <up-input label="录入日期"
                      readonly
                      @click="showCreateDatePicker = true"
                      v-model="searchForm.createTimeStart" />
            <view class="switch-row">
              <text class="switch-label">不显示有发票行</text>
              <up-switch v-model="searchForm.status"
                         size="20" />
            </view>
          </up-cell-group>
          <view class="filter-actions">
            <up-button @click="resetFilter">重置</up-button>
            <up-button type="primary"
                       @click="confirmFilter">确定</up-button>
          </view>
        </view>
      </up-transition></up-popup>
    <!-- 日历：开票日期范围 -->
    <up-popup v-model="showInvoiceRange"
              mode="bottom"><up-transition>
        <up-datetime-picker mode="date"
                            type="range"
                            title="选择开票日期范围"
                            @confirm="onInvoiceRangeConfirm"
                            @cancel="showInvoiceRange = false" />
      </up-transition></up-popup>
    <!-- 日期：录入日期 -->
    <up-popup v-model="showCreateDatePicker"
              mode="bottom"><up-transition>
        <up-datetime-picker mode="date"
                            type="selector"
                            v-model="currentCreateDate"
                            title="选择录入日期"
                            @confirm="onCreateDateConfirm"
                            @cancel="showCreateDatePicker = false" />
      </up-transition></up-popup>
    <!-- 单行上传弹窗（无表单） -->
    <up-popup v-model="showUpload"
              mode="bottom"
              round><up-transition>
        <view class="upload-container">
          <up-cell-group title="上传附件（仅支持 pdf，最大10MB，最多10个）"
                         inset>
            <up-upload accept="pdf"
                       multiple
                       :maxCount="10"
                       :afterRead="afterReadRowUpload"
                       :beforeRead="beforeReadPdf">
              <up-button type="primary">点击上传</up-button>
            </up-upload>
            <view class="uploaded-list"
                  v-if="fileList.length">
              <view class="uploaded-item"
                    v-for="(f, idx) in fileList"
                    :key="idx">
                <text class="file-name">{{ f.name || getFileNameFromUrl(f.url) }}</text>
                <up-button size="mini"
                           type="error"
                           plain
                           @click="removeUploaded(idx)">移除</up-button>
              </view>
            </view>
          </up-cell-group>
          <view class="filter-actions">
            <up-button @click="showUpload = false">取消</up-button>
            <up-button type="primary"
                       @click="confirmUpload">确认</up-button>
          </view>
        </view>
      </up-transition></up-popup>
    <!-- 附件列表选择 -->
    <up-action-sheet v-model="showFileSheet"
                     :actions="fileActions"
                     cancel-text="取消"
                     close-on-click-action
                     @select="onSelectFile">
      <view class="up-action-sheet__cancel"
            @click="showFileSheet = false">
        取消
      </view>
    </up-action-sheet>
  </view>
</template>

<script setup>
import {reactive, ref} from 'vue'
import dayjs from 'dayjs'
import PageHeader from '@/components/PageHeader.vue'
import useUserStore from '@/store/modules/user'
import {getToken} from '@/utils/auth'
import config from '@/config.js'
import {
    commitFile,
    delInvoiceLedgerByRegProductId,
    registrationProductPage
} from '@/api/salesManagement/invoiceLedger.js'
import {onShow} from "@dcloudio/uni-app";
  import { reactive, ref } from "vue";
  import dayjs from "dayjs";
  import PageHeader from "@/components/PageHeader.vue";
  import useUserStore from "@/store/modules/user";
  import { getToken } from "@/utils/auth";
  import config from "@/config.js";
  import {
    commitFile,
    delInvoiceLedgerByRegProductId,
    registrationProductPage,
  } from "@/api/salesManagement/invoiceLedger.js";
  import { onShow } from "@dcloudio/uni-app";

const showToast = (message) => {
    uni.showToast({
        title: message,
        icon: 'none'
    })
}
const showLoadingToast = (message) => {
    uni.showLoading({
        title: message,
        mask: true
    })
}
const closeToast = () => {
    uni.hideLoading()
}
  const showToast = message => {
    uni.showToast({
      title: message,
      icon: "none",
    });
  };
  const showLoadingToast = message => {
    uni.showLoading({
      title: message,
      mask: true,
    });
  };
  const closeToast = () => {
    uni.hideLoading();
  };

const userStore = useUserStore()
  const userStore = useUserStore();

// 列表与查询
const ledgerList = ref([])
const page = reactive({ current: -1, size: -1 })
const searchForm = reactive({
    searchText: '',
    status: false,
    createTimeStart: ''
})
  // 列表与查询
  const ledgerList = ref([]);
  const page = reactive({ current: -1, size: -1 });
  const searchForm = reactive({
    searchText: "",
    status: false,
    createTimeStart: "",
  });

// 顶部交互
const showFilter = ref(false)
const showInvoiceRange = ref(false)
const showCreateDatePicker = ref(false)
const invoiceRangeLabel = ref('')
const currentCreateDate = ref([new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate()])
  // 顶部交互
  const showFilter = ref(false);
  const showInvoiceRange = ref(false);
  const showCreateDatePicker = ref(false);
  const invoiceRangeLabel = ref("");
  const currentCreateDate = ref([
    new Date().getFullYear(),
    new Date().getMonth() + 1,
    new Date().getDate(),
  ]);

const currentId = ref('')
const fileList = ref([]) // 行上传或通用上传列表
  const currentId = ref("");
  const fileList = ref([]); // 行上传或通用上传列表

// 行上传弹窗
const showUpload = ref(false)
  // 行上传弹窗
  const showUpload = ref(false);

// 附件查看
const showFileSheet = ref(false)
const fileActions = ref([])
let currentFilesToOpen = []
  // 附件查看
  const showFileSheet = ref(false);
  const fileActions = ref([]);
  let currentFilesToOpen = [];

const formatAmount = (val) => {
    if (val === undefined || val === null || val === '') return '0.00'
    const num = Number(val)
    if (Number.isNaN(num)) return '0.00'
    return num.toFixed(2)
}
const formatDateTime = (val) => {
    if (!val) return ''
    return dayjs(val).format('YYYY-MM-DD HH:mm:ss')
}
  const formatAmount = val => {
    if (val === undefined || val === null || val === "") return "0.00";
    const num = Number(val);
    if (Number.isNaN(num)) return "0.00";
    return num.toFixed(2);
  };
  const formatDateTime = val => {
    if (!val) return "";
    return dayjs(val).format("YYYY-MM-DD HH:mm:ss");
  };

const goBack = () => {
    uni.navigateBack()
}
  const goBack = () => {
    uni.navigateBack();
  };

const handleQuery = () => {
    getList()
}
  const handleQuery = () => {
    getList();
  };

const getList = async () => {
    try {
        showLoadingToast('加载中...')
        const { invoiceDate, ...rest } = searchForm
        const res = await registrationProductPage({ ...rest, ...page })
        // 兼容不同返回结构
        ledgerList.value = res?.data?.records || res?.records || res?.data || []
        closeToast()
    } catch (e) {
        closeToast()
        showToast('获取列表失败')
    }
}
  const getList = async () => {
    try {
      showLoadingToast("加载中...");
      const { invoiceDate, ...rest } = searchForm;
      const res = await registrationProductPage({ ...rest, ...page });
      // 兼容不同返回结构
      ledgerList.value = res?.data?.records || res?.records || res?.data || [];
      closeToast();
    } catch (e) {
      closeToast();
      showToast("获取列表失败");
    }
  };

// 筛选逻辑
const resetFilter = () => {
    searchForm.searchText = ''
    searchForm.status = false
    const start = dayjs().startOf('month').format('YYYY-MM-DD')
    const end = dayjs().endOf('month').format('YYYY-MM-DD')
    searchForm.invoiceDate = [start, end]
    searchForm.invoiceDateStart = start
    searchForm.invoiceDateEnd = end
    searchForm.createTimeStart = ''
    invoiceRangeLabel.value = ''
}
const confirmFilter = () => {
    showFilter.value = false
    getList()
}
const onInvoiceRangeConfirm = ({ selectedValues }) => {
    try {
        const start = dayjs(selectedValues[0]).format('YYYY-MM-DD')
        const end = dayjs(selectedValues[1]).format('YYYY-MM-DD')
        searchForm.invoiceDateStart = start
        searchForm.invoiceDateEnd = end
        invoiceRangeLabel.value = `${start} 至 ${end}`
        showInvoiceRange.value = false
    } catch (err) {
        showInvoiceRange.value = false
    }
}
const onCreateDateConfirm = ({ selectedValues }) => {
    try {
        searchForm.createTimeStart = selectedValues.join('-')
        currentCreateDate.value = selectedValues
        showCreateDatePicker.value = false
    } catch (err) {
        showCreateDatePicker.value = false
    }
}
  // 筛选逻辑
  const resetFilter = () => {
    searchForm.searchText = "";
    searchForm.status = false;
    const start = dayjs().startOf("month").format("YYYY-MM-DD");
    const end = dayjs().endOf("month").format("YYYY-MM-DD");
    searchForm.invoiceDate = [start, end];
    searchForm.invoiceDateStart = start;
    searchForm.invoiceDateEnd = end;
    searchForm.createTimeStart = "";
    invoiceRangeLabel.value = "";
  };
  const confirmFilter = () => {
    showFilter.value = false;
    getList();
  };
  const onInvoiceRangeConfirm = ({ selectedValues }) => {
    try {
      const start = dayjs(selectedValues[0]).format("YYYY-MM-DD");
      const end = dayjs(selectedValues[1]).format("YYYY-MM-DD");
      searchForm.invoiceDateStart = start;
      searchForm.invoiceDateEnd = end;
      invoiceRangeLabel.value = `${start} 至 ${end}`;
      showInvoiceRange.value = false;
    } catch (err) {
      showInvoiceRange.value = false;
    }
  };
  const onCreateDateConfirm = ({ selectedValues }) => {
    try {
      searchForm.createTimeStart = selectedValues.join("-");
      currentCreateDate.value = selectedValues;
      showCreateDatePicker.value = false;
    } catch (err) {
      showCreateDatePicker.value = false;
    }
  };

// 编辑逻辑改为跳转新页面
const openEdit = (row) => {
    try {
        uni.setStorageSync('invoiceLedgerEditRow', JSON.stringify(row))
        uni.navigateTo({ url: '/pages/sales/invoiceLedger/detail' })
    } catch (e) {
        showToast('跳转失败')
    }
}
  // 编辑逻辑改为跳转新页面
  const openEdit = row => {
    try {
      uni.setStorageSync("invoiceLedgerEditRow", JSON.stringify(row));
      uni.navigateTo({ url: "/pages/sales/invoiceLedger/detail" });
    } catch (e) {
      showToast("跳转失败");
    }
  };

// 删除
const handleDelete = (row) => {
    uni.showModal({
        title: '删除确认',
        content: '该发票台账将被删除，是否确认删除？',
        success: async (res) => {
            if (res.confirm) {
                try {
                    showLoadingToast('处理中...')
                    await delInvoiceLedgerByRegProductId(row.id)
                    closeToast()
                    showToast('删除成功')
                    getList()
                } catch (e) {
                    closeToast()
                    showToast('删除失败，请重试')
                }
            }
        }
    })
}
  // 删除
  const handleDelete = row => {
    uni.showModal({
      title: "删除确认",
      content: "该发票台账将被删除，是否确认删除？",
      success: async res => {
        if (res.confirm) {
          try {
            showLoadingToast("处理中...");
            await delInvoiceLedgerByRegProductId(row.id);
            closeToast();
            showToast("删除成功");
            getList();
          } catch (e) {
            closeToast();
            showToast("删除失败，请重试");
          }
        }
      },
    });
  };

// 行上传
const openUpload = (row) => {
    currentId.value = row.id
    fileList.value = []
    showUpload.value = true
}
const confirmUpload = async () => {
    try {
        const payload = { fileList: fileList.value, id: currentId.value }
        showLoadingToast('提交中...')
        await commitFile(payload)
        closeToast()
        showToast('提交成功')
        showUpload.value = false
        fileList.value = []
        currentId.value = ''
        getList()
    } catch (e) {
        closeToast()
        showToast('提交失败，请重试')
    }
}
  // 行上传
  const openUpload = row => {
    currentId.value = row.id;
    fileList.value = [];
    showUpload.value = true;
  };
  const confirmUpload = async () => {
    try {
      const payload = { fileList: fileList.value, id: currentId.value };
      showLoadingToast("提交中...");
      await commitFile(payload);
      closeToast();
      showToast("提交成功");
      showUpload.value = false;
      fileList.value = [];
      currentId.value = "";
      getList();
    } catch (e) {
      closeToast();
      showToast("提交失败，请重试");
    }
  };

// 上传相关
const beforeReadPdf = (file) => {
    // 兼容多文件
    const files = Array.isArray(file) ? file : [file]
    for (const f of files) {
        const sizeOk = f.size <= 10 * 1024 * 1024
        const ext = (f.name || '').split('.').pop()?.toLowerCase()
        if (ext !== 'pdf') {
            showToast('仅支持pdf文件')
            return false
        }
        if (!sizeOk) {
            showToast('上传文件大小不能超过10MB')
            return false
        }
    }
    return true
}
  // 上传相关
  const beforeReadPdf = file => {
    // 兼容多文件
    const files = Array.isArray(file) ? file : [file];
    for (const f of files) {
      const sizeOk = f.size <= 10 * 1024 * 1024;
      const ext = (f.name || "").split(".").pop()?.toLowerCase();
      if (ext !== "pdf") {
        showToast("仅支持pdf文件");
        return false;
      }
      if (!sizeOk) {
        showToast("上传文件大小不能超过10MB");
        return false;
      }
    }
    return true;
  };

const uploadSingleFile = async (fileObj) => {
    return new Promise((resolve, reject) => {
        showLoadingToast('正在上传...')
        uni.uploadFile({
            url: config.baseUrl + '/invoiceLedger/uploadFile',
            filePath: fileObj.url || fileObj.file?.path || fileObj.tempFilePath,
            name: 'file',
            header: { Authorization: 'Bearer ' + getToken() },
            success: (res) => {
                closeToast()
                try {
                    const data = JSON.parse(res.data || '{}')
                    if (data.code === 200) {
                        resolve(data.data)
                    } else {
                        reject(new Error(data.msg || '上传失败'))
                    }
                } catch (err) {
                    reject(err)
                }
            },
            fail: (err) => {
                closeToast()
                reject(err)
            }
        })
    })
}
  const uploadSingleFile = async fileObj => {
    return new Promise((resolve, reject) => {
      showLoadingToast("正在上传...");
      uni.uploadFile({
        url: config.baseUrl + "/invoiceLedger/uploadFile",
        filePath: fileObj.url || fileObj.file?.path || fileObj.tempFilePath,
        name: "file",
        header: { Authorization: "Bearer " + getToken() },
        success: res => {
          closeToast();
          try {
            const data = JSON.parse(res.data || "{}");
            if (data.code === 200) {
              resolve(data.data);
            } else {
              reject(new Error(data.msg || "上传失败"));
            }
          } catch (err) {
            reject(err);
          }
        },
        fail: err => {
          closeToast();
          reject(err);
        },
      });
    });
  };

const afterReadEditUpload = async (file) => {
    try {
        const files = Array.isArray(file) ? file : file?.file ? [file] : [file]
        for (const f of files) {
            const uploaded = await uploadSingleFile(f)
            fileList.value.push(uploaded)
        }
        showToast('上传成功')
    } catch (e) {
        showToast('上传失败')
    }
}
  const afterReadEditUpload = async file => {
    try {
      const files = Array.isArray(file) ? file : file?.file ? [file] : [file];
      for (const f of files) {
        const uploaded = await uploadSingleFile(f);
        fileList.value.push(uploaded);
      }
      showToast("上传成功");
    } catch (e) {
      showToast("上传失败");
    }
  };

const afterReadRowUpload = async (file) => {
    try {
        const files = Array.isArray(file) ? file : file?.file ? [file] : [file]
        for (const f of files) {
            const uploaded = await uploadSingleFile(f)
            fileList.value.push(uploaded)
        }
        showToast('上传成功')
    } catch (e) {
        showToast('上传失败')
    }
}
  const afterReadRowUpload = async file => {
    try {
      const files = Array.isArray(file) ? file : file?.file ? [file] : [file];
      for (const f of files) {
        const uploaded = await uploadSingleFile(f);
        fileList.value.push(uploaded);
      }
      showToast("上传成功");
    } catch (e) {
      showToast("上传失败");
    }
  };

const removeUploaded = (index) => {
    fileList.value.splice(index, 1)
}
  const removeUploaded = index => {
    fileList.value.splice(index, 1);
  };

const getFileNameFromUrl = (url) => {
    try {
        if (!url) return ''
        return decodeURIComponent(url.split('/').pop())
    } catch (e) {
        return url
    }
}
  const getFileNameFromUrl = url => {
    try {
      if (!url) return "";
      return decodeURIComponent(url.split("/").pop());
    } catch (e) {
      return url;
    }
  };

// 附件查看
const openFileActions = (commonFiles) => {
    currentFilesToOpen = commonFiles || []
    fileActions.value = (commonFiles || []).map((f, idx) => ({ name: getFileNameFromUrl(f.url || ''), index: idx }))
    showFileSheet.value = true
}
const onSelectFile = async (action) => {
    try {
        const item = currentFilesToOpen[action.index]
        if (!item || !item.url) return
        showLoadingToast('下载中...')
        uni.downloadFile({
            url: item.url,
            success: (res) => {
                closeToast()
                if (res.statusCode === 200) {
                    uni.openDocument({ filePath: res.tempFilePath })
                } else {
                    showToast('下载失败')
                }
            },
            fail: () => {
                closeToast()
                showToast('下载失败')
            }
        })
    } catch (e) {
        closeToast()
        showToast('打开失败')
    }
}
  // 附件查看
  const openFileActions = commonFiles => {
    currentFilesToOpen = commonFiles || [];
    fileActions.value = (commonFiles || []).map((f, idx) => ({
      name: getFileNameFromUrl(f.url || ""),
      index: idx,
    }));
    showFileSheet.value = true;
  };
  const onSelectFile = async action => {
    try {
      const item = currentFilesToOpen[action.index];
      if (!item || !item.url) return;
      showLoadingToast("下载中...");
      uni.downloadFile({
        url: item.url,
        success: res => {
          closeToast();
          if (res.statusCode === 200) {
            uni.openDocument({ filePath: res.tempFilePath });
          } else {
            showToast("下载失败");
          }
        },
        fail: () => {
          closeToast();
          showToast("下载失败");
        },
      });
    } catch (e) {
      closeToast();
      showToast("打开失败");
    }
  };

onShow(() => {
    getList()
})
  onShow(() => {
    getList();
  });
</script>

<style scoped lang="scss">
@import '@/styles/sales-common.scss';
  @import "@/styles/sales-common.scss";

// 开票台账特有样式
.filter-popup {
    padding: 12px 12px 20px;
}
  // 开票台账特有样式
  .filter-popup {
    padding: 12px 12px 20px;
  }

.switch-row {
    padding: 12px 16px;
}
  .switch-row {
    padding: 12px 16px;
  }

.filter-actions {
    display: flex;
    gap: 12px;
    padding: 12px 16px 16px;
    justify-content: space-between;
}
  .filter-actions {
    display: flex;
    gap: 12px;
    padding: 12px 16px 16px;
    justify-content: space-between;
  }

.edit-container {
    padding-bottom: 5rem;
}
  .edit-container {
    padding-bottom: 5rem;
  }

.uploaded-list {
    padding: 8px 16px 0 16px;
}
  .uploaded-list {
    padding: 8px 16px 0 16px;
  }

.uploaded-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #f5f5f5;
}
  .uploaded-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #f5f5f5;
  }

.file-name {
    font-size: 12px;
    color: #333;
    margin-right: 8px;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
  .file-name {
    font-size: 12px;
    color: #333;
    margin-right: 8px;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

.tip-text {
    padding: 4px 16px 0 16px;
    font-size: 12px;
    color: #888;
}
  .tip-text {
    padding: 4px 16px 0 16px;
    font-size: 12px;
    color: #888;
  }

.footer-btns {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0.75rem 0;
    box-shadow: 0 -0.125rem 0.5rem rgba(0,0,0,0.05);
    z-index: 1000;
}
  .footer-btns {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0.75rem 0;
    box-shadow: 0 -0.125rem 0.5rem rgba(0, 0, 0, 0.05);
    z-index: 1000;
  }

.cancel-btn {
    font-weight: 400;
    font-size: 1rem;
    color: #FFFFFF;
    width: 6.375rem;
    background: #C7C9CC;
    box-shadow: 0 0.25rem 0.625rem 0 rgba(3,88,185,0.2);
    border-radius: 2.5rem 2.5rem 2.5rem 2.5rem;
}
  .cancel-btn {
    font-weight: 400;
    font-size: 1rem;
    color: #ffffff;
    width: 6.375rem;
    background: #c7c9cc;
    box-shadow: 0 0.25rem 0.625rem 0 rgba(3, 88, 185, 0.2);
    border-radius: 2.5rem 2.5rem 2.5rem 2.5rem;
  }

.save-btn {
    font-weight: 400;
    font-size: 1rem;
    color: #FFFFFF;
    width: 14rem;
    background: linear-gradient( 140deg, #00BAFF 0%, #006CFB 100%);
    box-shadow: 0 0.25rem 0.625rem 0 rgba(3,88,185,0.2);
    border-radius: 2.5rem 2.5rem 2.5rem 2.5rem;
}
  .save-btn {
    font-weight: 400;
    font-size: 1rem;
    color: #ffffff;
    width: 14rem;
    background: linear-gradient(140deg, #00baff 0%, #006cfb 100%);
    box-shadow: 0 0.25rem 0.625rem 0 rgba(3, 88, 185, 0.2);
    border-radius: 2.5rem 2.5rem 2.5rem 2.5rem;
  }
</style>

 src/pages/sales/invoicingRegistration/index.vue

@@ -1,252 +1,256 @@
<template>
    <view class="sales-account">
        <!-- 使用通用页面头部组件 -->
        <PageHeader title="开票登记" @back="goBack" />
		
        <!-- 搜索和筛选区域 -->
        <view class="search-section">
            <view class="search-bar">
                <view class="search-input">
                    <up-input
                        class="search-text"
                        placeholder="请输入客户名称搜索"
                        v-model="customerName"
                        clearable
                        @change="getList"
                    />
                </view>
                <view class="filter-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 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>
                            </view>
                            <text class="item-id">{{ item.salesContractNo }}</text>
                        </view>
                    </view>
                    <up-divider></up-divider>
					
                    <view class="item-details">
                        <view class="detail-row">
                            <text class="detail-label">客户名称</text>
                            <text class="detail-value">{{ item.customerName }}</text>
                        </view>
                        <view class="detail-row">
                            <text class="detail-label">客户合同号</text>
                            <text class="detail-value">{{ item.customerContractNo }}</text>
                        </view>
                        <view class="detail-row">
                            <text class="detail-label">业务员</text>
                            <text class="detail-value">{{ item.salesman }}</text>
                        </view>
                        <view class="detail-row">
                            <text class="detail-label">项目名称</text>
                            <text class="detail-value">{{ item.projectName }}</text>
                        </view>
                        <view class="detail-row">
                            <text class="detail-label">合同金额(元)</text>
                            <text class="detail-value highlight">{{ item.contractAmount }}</text>
                        </view>
                        <view class="detail-row">
                            <text class="detail-label">已开票金额(元)</text>
                            <text class="detail-value highlight">{{ item.invoiceTotal }}</text>
                        </view>
                        <view class="detail-row">
                            <text class="detail-label">未开票金额(元)</text>
                            <text class="detail-value redlight">{{ item.noInvoiceAmountTotal }}</text>
                        </view>
                    </view>
					
                    <!-- 操作按钮区域 -->
                    <view class="action-buttons">
                        <up-button
                            type="primary"
                            size="small"
                            @click="handleAddInvoice(item)"
                            class="action-btn"
                            :disabled="item.noInvoiceAmountTotal == 0"
                        >
                            新增开票
                        </up-button>
                        <up-button
                            size="small"
                            @click="handleViewDetail(item)"
                            class="action-btn"
                        >
                            查看详情
                        </up-button>
                    </view>
                </view>
            </view>
        </view>
        <view v-else class="no-data">
            <text>暂无销售台账数据</text>
        </view>
    </view>
  <view class="sales-account">
    <!-- 使用通用页面头部组件 -->
    <PageHeader title="开票登记"
                @back="goBack" />
    <!-- 搜索和筛选区域 -->
    <view class="search-section">
      <view class="search-bar">
        <view class="search-input">
          <up-input class="search-text"
                    placeholder="请输入客户名称搜索"
                    v-model="customerName"
                    clearable
                    @change="getList" />
        </view>
        <view class="filter-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 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>
              </view>
              <text class="item-id">{{ item.salesContractNo }}</text>
            </view>
          </view>
          <up-divider></up-divider>
          <view class="item-details">
            <view class="detail-row">
              <text class="detail-label">客户名称</text>
              <text class="detail-value">{{ item.customerName }}</text>
            </view>
            <view class="detail-row">
              <text class="detail-label">客户合同号</text>
              <text class="detail-value">{{ item.customerContractNo }}</text>
            </view>
            <view class="detail-row">
              <text class="detail-label">业务员</text>
              <text class="detail-value">{{ item.salesman }}</text>
            </view>
            <view class="detail-row">
              <text class="detail-label">项目名称</text>
              <text class="detail-value">{{ item.projectName }}</text>
            </view>
            <view class="detail-row">
              <text class="detail-label">合同金额(元)</text>
              <text class="detail-value highlight">{{ item.contractAmount }}</text>
            </view>
            <view class="detail-row">
              <text class="detail-label">已开票金额(元)</text>
              <text class="detail-value highlight">{{ item.invoiceTotal }}</text>
            </view>
            <view class="detail-row">
              <text class="detail-label">未开票金额(元)</text>
              <text class="detail-value redlight">{{ item.noInvoiceAmountTotal }}</text>
            </view>
          </view>
          <!-- 操作按钮区域 -->
          <view class="action-buttons">
            <up-button type="primary"
                       size="small"
                       @click="handleAddInvoice(item)"
                       class="action-btn"
                       :disabled="item.noInvoiceAmountTotal == 0">
              新增开票
            </up-button>
            <up-button size="small"
                       @click="handleViewDetail(item)"
                       class="action-btn">
              查看详情
            </up-button>
          </view>
        </view>
      </view>
    </view>
    <view v-else
          class="no-data">
      <text>暂无销售台账数据</text>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import {ledgerListPage} from "@/api/salesManagement/salesLedger";
import useUserStore from "@/store/modules/user";
const userStore = useUserStore()
  import { ref } from "vue";
  import { onShow } from "@dcloudio/uni-app";
  import { ledgerListPage } from "@/api/salesManagement/salesLedger";
  import useUserStore from "@/store/modules/user";
  const userStore = useUserStore();

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

// 销售台账数据
const ledgerList = ref([]);
const total = ref(0);
  // 销售台账数据
  const ledgerList = ref([]);
  const total = ref(0);

// 返回上一页
const goBack = () => {
    uni.navigateBack();
};
// 查询列表
const getList = () => {
    showLoadingToast('加载中...')
    const page = {
        current: -1,
        size: -1
    }
    ledgerListPage({...page, customerName: customerName.value}).then((res) => {
        ledgerList.value = res.records;
        total.value = res.total;
        closeToast()
    }).catch(() => {
        closeToast()
    });
};
  // 返回上一页
  const goBack = () => {
    uni.navigateBack();
  };
  // 查询列表
  const getList = () => {
    showLoadingToast("加载中...");
    const page = {
      current: -1,
      size: -1,
    };
    ledgerListPage({ ...page, customerName: customerName.value })
      .then(res => {
        ledgerList.value = res.records;
        // total.value = res.total;
        total.value = 100;
        closeToast();
      })
      .catch(() => {
        closeToast();
      });
  };

// 显示加载提示
const showLoadingToast = (message) => {
    uni.showLoading({
        title: message,
        mask: true
    });
};
  // 显示加载提示
  const showLoadingToast = message => {
    uni.showLoading({
      title: message,
      mask: true,
    });
  };

// 关闭提示
const closeToast = () => {
    uni.hideLoading();
};
  // 关闭提示
  const closeToast = () => {
    uni.hideLoading();
  };

// 处理新增开票
const handleAddInvoice = (item) => {
    try {
        // 存储选中的合同信息
        uni.setStorageSync('editData', JSON.stringify(item));
		
        // 跳转到新增开票页面
        uni.navigateTo({
            url: '/pages/sales/invoicingRegistration/add'
        });
    } catch (error) {
        console.error('处理新增开票失败:', error);
        uni.showToast({
            title: '操作失败，请重试',
            icon: 'error'
        });
    }
};
  // 处理新增开票
  const handleAddInvoice = item => {
    try {
      // 存储选中的合同信息
      uni.setStorageSync("editData", JSON.stringify(item));

// 处理查看详情
const handleViewDetail = (item) => {
    try {
        // 存储数据
        uni.setStorageSync('editData', JSON.stringify(item));
		
        // 跳转到详情页面
        uni.navigateTo({
            url: '/pages/sales/invoicingRegistration/view'
        });
    } catch (error) {
        console.error('处理查看详情失败:', error);
        uni.showToast({
            title: '操作失败，请重试',
            icon: 'error'
        });
    }
};
      // 跳转到新增开票页面
      uni.navigateTo({
        url: "/pages/sales/invoicingRegistration/add",
      });
    } catch (error) {
      console.error("处理新增开票失败:", error);
      uni.showToast({
        title: "操作失败，请重试",
        icon: "error",
      });
    }
  };

onShow(() => {
    // 页面显示时刷新列表
    getList();
});
  // 处理查看详情
  const handleViewDetail = item => {
    try {
      // 存储数据
      uni.setStorageSync("editData", JSON.stringify(item));

      // 跳转到详情页面
      uni.navigateTo({
        url: "/pages/sales/invoicingRegistration/view",
      });
    } catch (error) {
      console.error("处理查看详情失败:", error);
      uni.showToast({
        title: "操作失败，请重试",
        icon: "error",
      });
    }
  };

  onShow(() => {
    // 页面显示时刷新列表
    getList();
  });
</script>

<style scoped lang="scss">
@import '@/styles/sales-common.scss';
  @import "@/styles/sales-common.scss";

// 开票登记特有样式
.nav-icon {
    width: 24px;
    height: 24px;
    background: #2979ff;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}
  // 开票登记特有样式
  .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;
}
  .nav-text {
    font-size: 14px;
    color: #2979ff;
    font-weight: 500;
  }

.header-center {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 0;
    right: 0;
    pointer-events: none;
}
  .header-center {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 0;
    right: 0;
    pointer-events: none;
  }

.page-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    pointer-events: auto;
}
  .page-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    pointer-events: auto;
  }

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

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

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

.detail-value.redlight {
    color: red;
    font-weight: 500;
}
  .detail-value.redlight {
    color: red;
    font-weight: 500;
  }

.fab-button {
    bottom: 30px; // 与其他页面的 calc(30px + env(safe-area-inset-bottom)) 不同
}
  .fab-button {
    bottom: 30px; // 与其他页面的 calc(30px + env(safe-area-inset-bottom)) 不同
  }
</style>

 src/pages/sales/receiptPaymentLedger/detail.vue

@@ -1,307 +1,315 @@
<template>
    <view class="receipt-payment-detail">
        <!-- 使用通用页面头部组件 -->
        <PageHeader title="客户往来详情" @back="goBack" />
		
        <!-- 统计信息 -->
        <view class="summary-info" v-if="tableData.length > 0">
            <view class="summary-item">
                <text class="summary-label">总记录数</text>
                <text class="summary-value">{{ tableData.length }}</text>
            </view>
            <view class="summary-item">
                <text class="summary-label">开票总金额</text>
                <text class="summary-value">{{ formatAmount(invoiceTotal) }}</text>
            </view>
            <view class="summary-item">
                <text class="summary-label">回款总金额</text>
                <text class="summary-value highlight">{{ formatAmount(receiptTotal) }}</text>
            </view>
            <view class="summary-item">
                <text class="summary-label">应收总金额</text>
                <text class="summary-value danger">{{ formatAmount(unReceiptTotal) }}</text>
            </view>
        </view>
		
        <!-- 回款记录明细列表 -->
        <view class="detail-list" v-if="tableData.length > 0">
            <view v-for="(item, index) in tableData" :key="index" class="detail-item">
                <view class="item-header">
                    <view class="item-left">
                        <view class="record-icon">
                            <up-icon name="file-text" size="16" color="#ffffff"></up-icon>
                        </view>
                        <text class="item-index">{{ index + 1 }}</text>
                    </view>
                    <view class="item-date">{{ item.happenTime }}</view>
                </view>
                <up-divider></up-divider>
                <view class="item-details">
                    <view class="detail-row">
                        <text class="detail-label">开票金额(元)</text>
                        <text class="detail-value">{{ formatAmount(item.invoiceAmount) }}</text>
                    </view>
                    <view class="detail-row">
                        <text class="detail-label">回款金额(元)</text>
                        <text class="detail-value highlight">{{ formatAmount(item.receiptAmount) }}</text>
                    </view>
                    <view class="detail-row">
                        <text class="detail-label">应收金额(元)</text>
                        <text class="detail-value danger">{{ formatAmount(item.unReceiptAmount) }}</text>
                    </view>
                </view>
            </view>
        </view>
        <view v-else class="no-data">
            <text>暂无回款记录</text>
        </view>
    </view>
  <view class="receipt-payment-detail">
    <!-- 使用通用页面头部组件 -->
    <PageHeader title="客户往来详情"
                @back="goBack" />
    <!-- 统计信息 -->
    <view class="summary-info"
          v-if="tableData.length > 0">
      <view class="summary-item">
        <text class="summary-label">总记录数</text>
        <text class="summary-value">{{ tableData.length }}</text>
      </view>
      <view class="summary-item">
        <text class="summary-label">开票总金额</text>
        <text class="summary-value">{{ formatAmount(invoiceTotal) }}</text>
      </view>
      <view class="summary-item">
        <text class="summary-label">回款总金额</text>
        <text class="summary-value highlight">{{ formatAmount(receiptTotal) }}</text>
      </view>
      <view class="summary-item">
        <text class="summary-label">应收总金额</text>
        <text class="summary-value danger">{{ formatAmount(unReceiptTotal) }}</text>
      </view>
    </view>
    <!-- 回款记录明细列表 -->
    <view class="detail-list"
          v-if="tableData.length > 0">
      <view v-for="(item, index) in tableData"
            :key="index"
            class="detail-item">
        <view class="item-header">
          <view class="item-left">
            <view class="record-icon">
              <up-icon name="file-text"
                       size="16"
                       color="#ffffff"></up-icon>
            </view>
            <text class="item-index">{{ index + 1 }}</text>
          </view>
          <view class="item-date">{{ item.happenTime }}</view>
        </view>
        <up-divider></up-divider>
        <view class="item-details">
          <view class="detail-row">
            <text class="detail-label">开票金额(元)</text>
            <text class="detail-value">{{ formatAmount(item.invoiceTotal) }}</text>
          </view>
          <view class="detail-row">
            <text class="detail-label">回款金额(元)</text>
            <text class="detail-value highlight">{{ formatAmount(item.receiptPaymentAmount) }}</text>
          </view>
          <view class="detail-row">
            <text class="detail-label">应收金额(元)</text>
            <text class="detail-value danger">{{ formatAmount(item.unReceiptPaymentAmount) }}</text>
          </view>
        </view>
      </view>
    </view>
    <view v-else
          class="no-data">
      <text>暂无回款记录</text>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import { customerInteractions } from "@/api/salesManagement/receiptPayment.js";
  import { ref, computed, onMounted } from "vue";
  import { onShow } from "@dcloudio/uni-app";
  import { customerInteractions } from "@/api/salesManagement/receiptPayment.js";

// 客户信息
const customerId = ref('');
  // 客户信息
  const customerId = ref("");

// 表格数据
const tableData = ref([]);
  // 表格数据
  const tableData = ref([]);

const invoiceTotal = computed(() => {
    return tableData.value.reduce((sum, item) => {
        return sum + (parseFloat(item.invoiceAmount) || 0);
    }, 0);
});
  const invoiceTotal = computed(() => {
    return tableData.value.reduce((sum, item) => {
      return sum + (parseFloat(item.invoiceTotal) || 0);
    }, 0);
  });

const receiptTotal = computed(() => {
    return tableData.value.reduce((sum, item) => {
        return sum + (parseFloat(item.receiptAmount) || 0);
    }, 0);
});
  const receiptTotal = computed(() => {
    return tableData.value.reduce((sum, item) => {
      return sum + (parseFloat(item.receiptPaymentAmount) || 0);
    }, 0);
  });

const unReceiptTotal = computed(() => {
    return tableData.value.reduce((sum, item) => {
        return sum + (parseFloat(item.unReceiptAmount) || 0);
    }, 0);
});
  const unReceiptTotal = computed(() => {
    return tableData.value.reduce((sum, item) => {
      return sum + (parseFloat(item.unReceiptPaymentAmount) || 0);
    }, 0);
  });

// 返回上一页
const goBack = () => {
    uni.removeStorageSync('customerId')
    uni.navigateBack();
};
  // 返回上一页
  const goBack = () => {
    uni.removeStorageSync("customerId");
    uni.navigateBack();
  };

// 获取页面参数
const getPageParams = () => {
    // 从本地存储获取客户ID
    const storedCustomerId = uni.getStorageSync('customerId');
    if (storedCustomerId) {
        customerId.value = storedCustomerId;
    }
};
  // 获取页面参数
  const getPageParams = () => {
    // 从本地存储获取客户ID
    const storedCustomerId = uni.getStorageSync("customerId");
    if (storedCustomerId) {
      customerId.value = storedCustomerId;
    }
  };

// 查询列表
const getList = () => {
    if (!customerId.value) {
        uni.showToast({
            title: '客户信息缺失',
            icon: 'error'
        });
        return;
    }
	
    showLoadingToast('加载中...')
    const param = {
        customerId: customerId.value,
        current: -1,
        size: -1
    };
	
    customerInteractions(param).then((res) => {
        tableData.value = res.data;
        closeToast()
    }).catch(() => {
        closeToast()
        uni.showToast({
            title: '查询失败',
            icon: 'error'
        });
    });
};
  // 查询列表
  const getList = () => {
    if (!customerId.value) {
      uni.showToast({
        title: "客户信息缺失",
        icon: "error",
      });
      return;
    }

// 格式化金额
const formatAmount = (amount) => {
    return amount ? parseFloat(amount).toFixed(2) : '0.00';
};
    showLoadingToast("加载中...");
    const param = {
      customerId: customerId.value,
      current: -1,
      size: -1,
    };

// 显示加载提示
const showLoadingToast = (message) => {
    uni.showLoading({
        title: message,
        mask: true
    });
};
    customerInteractions(param)
      .then(res => {
        tableData.value = res.data;
        closeToast();
      })
      .catch(() => {
        closeToast();
        uni.showToast({
          title: "查询失败",
          icon: "error",
        });
      });
  };

// 关闭提示
const closeToast = () => {
    uni.hideLoading();
};
  // 格式化金额
  const formatAmount = amount => {
    return amount ? parseFloat(amount).toFixed(2) : "0.00";
  };

onShow(() => {
    // 页面显示时获取参数并刷新列表
    getPageParams();
    getList();
});
  // 显示加载提示
  const showLoadingToast = message => {
    uni.showLoading({
      title: message,
      mask: true,
    });
  };

onMounted(() => {
    // 页面加载时获取参数并刷新列表
    getPageParams();
    getList();
});
  // 关闭提示
  const closeToast = () => {
    uni.hideLoading();
  };

  onShow(() => {
    // 页面显示时获取参数并刷新列表
    getPageParams();
    getList();
  });

  onMounted(() => {
    // 页面加载时获取参数并刷新列表
    getPageParams();
    getList();
  });
</script>

<style scoped lang="scss">
.receipt-payment-detail {
    min-height: 100vh;
    background: #f8f9fa;
    position: relative;
}
  .receipt-payment-detail {
    min-height: 100vh;
    background: #f8f9fa;
    position: relative;
  }

.u-divider {
    margin: 0 !important;
}
  .u-divider {
    margin: 0 !important;
  }

.summary-info {
    background: #ffffff;
    margin: 20px 20px 0 20px;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
  .summary-info {
    background: #ffffff;
    margin: 20px 20px 0 20px;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  }

.summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
	
    &:last-child {
        margin-bottom: 0;
    }
}
  .summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;

.summary-label {
    font-size: 14px;
    color: #666;
}
    &:last-child {
      margin-bottom: 0;
    }
  }

.summary-value {
    font-size: 14px;
    color: #333;
    font-weight: 500;
}
  .summary-label {
    font-size: 14px;
    color: #666;
  }

.summary-value.highlight {
    color: #2979ff;
    font-weight: 600;
}
  .summary-value {
    font-size: 14px;
    color: #333;
    font-weight: 500;
  }

.summary-value.danger {
    color: #ff4757;
    font-weight: 600;
}
  .summary-value.highlight {
    color: #2979ff;
    font-weight: 600;
  }

.detail-list {
    padding: 20px;
}
  .summary-value.danger {
    color: #ff4757;
    font-weight: 600;
  }

.detail-item {
    background: #ffffff;
    border-radius: 12px;
    margin-bottom: 16px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    padding: 0 16px;
}
  .detail-list {
    padding: 20px;
  }

.item-header {
    padding: 10px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
  .detail-item {
    background: #ffffff;
    border-radius: 12px;
    margin-bottom: 16px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    padding: 0 16px;
  }

.item-left {
    display: flex;
    align-items: center;
    gap: 8px;
}
  .item-header {
    padding: 10px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

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

.item-index {
    font-size: 14px;
    color: #333;
    font-weight: 500;
}
  .record-icon {
    width: 24px;
    height: 24px;
    background: #2979ff;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

.item-date {
    font-size: 12px;
    color: #666;
}
  .item-index {
    font-size: 14px;
    color: #333;
    font-weight: 500;
  }

.item-details {
    padding: 16px 0;
}
  .item-date {
    font-size: 12px;
    color: #666;
  }

.detail-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 8px;
	
    &:last-child {
        margin-bottom: 0;
    }
}
  .item-details {
    padding: 16px 0;
  }

.detail-label {
    font-size: 12px;
    color: #777777;
    min-width: 60px;
}
  .detail-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 8px;

.detail-value {
    font-size: 12px;
    color: #000000;
    text-align: right;
    flex: 1;
    margin-left: 16px;
}
    &:last-child {
      margin-bottom: 0;
    }
  }

.detail-value.highlight {
    color: #2979ff;
    font-weight: 500;
}
  .detail-label {
    font-size: 12px;
    color: #777777;
    min-width: 60px;
  }

.detail-value.danger {
    color: #ff4757;
    font-weight: 500;
}
  .detail-value {
    font-size: 12px;
    color: #000000;
    text-align: right;
    flex: 1;
    margin-left: 16px;
  }

.no-data {
    padding: 40px 0;
    text-align: center;
    color: #999;
}
  .detail-value.highlight {
    color: #2979ff;
    font-weight: 500;
  }

  .detail-value.danger {
    color: #ff4757;
    font-weight: 500;
  }

  .no-data {
    padding: 40px 0;
    text-align: center;
    color: #999;
  }
</style>