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

zhangwencui

7 天以前 7d83122dba56d6beeaf3772c72005344baf5fd3d

 src/pages/sales/invoiceLedger/index.vue

@@ -1,37 +1,41 @@
<template>
   <view class="sales-account">
      <!-- 使用通用页面头部组件 -->
      <PageHeader title="开票台账" @back="goBack" />
		
    <PageHeader title="开票台账"
                @back="goBack" />
      <!-- 搜索和筛选区域（保持与销售台账风格一致） -->
      <view class="search-section">
         <view class="search-bar">
            <view class="search-input">
               <up-input
                  class="search-text"
          <up-input class="search-text"
                  placeholder="请输入客户名称/合同号搜索"
                  v-model="searchForm.searchText"
                  @change="handleQuery"
                  clearable
               />
                    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 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-list"
          v-if="ledgerList.length > 0">
      <view v-for="(item, index) in ledgerList"
            :key="index">
            <view class="ledger-item">
               <view class="item-header">
                  <view class="item-left">
                     <view class="document-icon">
                        <up-icon name="file-text" size="16" color="#ffffff"></up-icon>
                <up-icon name="file-text"
                         size="16"
                         color="#ffffff"></up-icon>
                     </view>
                     <text class="item-id">{{ item.salesContractNo }}</text>
                  </view>
@@ -84,23 +88,19 @@
                  </view>
               </view>
               <view class="action-buttons">
                  <up-button
                     type="primary"
            <up-button type="primary"
                     size="small"
                     class="action-btn"
                     :disabled="item.invoicePerson !== userStore.nickName"
                     @click="openEdit(item)"
                  >
                       @click="openEdit(item)">
                     编辑
                  </up-button>
                  <up-button
                     type="error"
            <up-button type="error"
                     size="small"
                     plain
                     class="action-btn"
                     :disabled="item.invoicePerson !== userStore.nickName"
                     @click="handleDelete(item)"
                  >
                       @click="handleDelete(item)">
                     删除
                  </up-button>
<!--                  <up-button-->
@@ -126,94 +126,100 @@
            </view>
         </view>
      </view>
      <view v-else class="no-data">
    <view v-else
          class="no-data">
         <text>暂无开票台账数据</text>
      </view>
		
      <!-- 筛选弹窗 -->
      <up-popup v-model="showFilter" mode="bottom" round><up-transition>
    <up-popup v-model="showFilter"
              mode="bottom"
              round><up-transition>
         <view class="filter-popup">
            <up-cell-group title="筛选条件" inset>
               <up-input
                  label="开票日期"
          <up-cell-group title="筛选条件"
                         inset>
            <up-input label="开票日期"
                  readonly
                  placeholder="请选择日期范围"
                  @click="showInvoiceRange = true"
                  v-model="invoiceRangeLabel"
               />
               <up-input
                  label="录入日期"
                      v-model="invoiceRangeLabel" />
            <up-input label="录入日期"
                  readonly
                  @click="showCreateDatePicker = true"
                  v-model="searchForm.createTimeStart"
               />
                      v-model="searchForm.createTimeStart" />
               <view class="switch-row">
                  <text class="switch-label">不显示有发票行</text>
                  <up-switch v-model="searchForm.status" size="20" />
              <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>
            <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"
    <up-popup v-model="showInvoiceRange"
              mode="bottom"><up-transition>
        <up-datetime-picker mode="date"
            type="range"
            title="选择开票日期范围"
            @confirm="onInvoiceRangeConfirm"
            @cancel="showInvoiceRange = false"
         />
                            @cancel="showInvoiceRange = false" />
      </up-transition></up-popup>
		
      <!-- 日期：录入日期 -->
      <up-popup v-model="showCreateDatePicker" mode="bottom"><up-transition>
         <up-datetime-picker
            mode="date"
    <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"
         />
                            @cancel="showCreateDatePicker = false" />
      </up-transition></up-popup>
		
		
		
      <!-- 单行上传弹窗（无表单） -->
      <up-popup v-model="showUpload" mode="bottom" round><up-transition>
    <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"
          <up-cell-group title="上传附件（仅支持 pdf，最大10MB，最多10个）"
                         inset>
            <up-upload accept="pdf"
                  multiple
                  :maxCount="10"
                  :afterRead="afterReadRowUpload"
                  :beforeRead="beforeReadPdf"
               >
                       :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">
            <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>
                <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>
            <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">
    <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>
@@ -221,316 +227,323 @@
</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 { 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'
    registrationProductPage,
  } from "@/api/salesManagement/invoiceLedger.js";
import {onShow} from "@dcloudio/uni-app";

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

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

// 列表与查询
const ledgerList = ref([])
const page = reactive({ current: -1, size: -1 })
  const ledgerList = ref([]);
  const page = reactive({ current: -1, size: -1 });
const searchForm = reactive({
   searchText: '',
    searchText: "",
   status: false,
   createTimeStart: ''
})
    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()
}
    uni.navigateBack();
  };

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

const getList = async () => {
   try {
      showLoadingToast('加载中...')
      const { invoiceDate, ...rest } = searchForm
      const res = await registrationProductPage({ ...rest, ...page })
      showLoadingToast("加载中...");
      const { invoiceDate, ...rest } = searchForm;
      const res = await registrationProductPage({ ...rest, ...page });
      // 兼容不同返回结构
      ledgerList.value = res?.data?.records || res?.records || res?.data || []
      closeToast()
      ledgerList.value = res?.data?.records || res?.records || res?.data || [];
      closeToast();
   } catch (e) {
      closeToast()
      showToast('获取列表失败')
      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 = ''
}
    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()
}
    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
      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
      showInvoiceRange.value = false;
   }
}
  };
const onCreateDateConfirm = ({ selectedValues }) => {
   try {
      searchForm.createTimeStart = selectedValues.join('-')
      currentCreateDate.value = selectedValues
      showCreateDatePicker.value = false
      searchForm.createTimeStart = selectedValues.join("-");
      currentCreateDate.value = selectedValues;
      showCreateDatePicker.value = false;
   } catch (err) {
      showCreateDatePicker.value = false
      showCreateDatePicker.value = false;
   }
}
  };

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

// 删除
const handleDelete = (row) => {
  const handleDelete = row => {
   uni.showModal({
      title: '删除确认',
      content: '该发票台账将被删除，是否确认删除？',
      success: async (res) => {
      title: "删除确认",
      content: "该发票台账将被删除，是否确认删除？",
      success: async res => {
         if (res.confirm) {
            try {
               showLoadingToast('处理中...')
               await delInvoiceLedgerByRegProductId(row.id)
               closeToast()
               showToast('删除成功')
               getList()
            showLoadingToast("处理中...");
            await delInvoiceLedgerByRegProductId(row.id);
            closeToast();
            showToast("删除成功");
            getList();
            } catch (e) {
               closeToast()
               showToast('删除失败，请重试')
            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 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) => {
  // 行上传
  const openUpload = row => {
    currentId.value = row.id;
    fileList.value = [];
    showUpload.value = true;
  };
  const confirmUpload = async () => {
   try {
      const files = Array.isArray(file) ? file : file?.file ? [file] : [file]
      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 uploaded = await uploadSingleFile(f)
         fileList.value.push(uploaded)
      const sizeOk = f.size <= 10 * 1024 * 1024;
      const ext = (f.name || "").split(".").pop()?.toLowerCase();
      if (ext !== "pdf") {
        showToast("仅支持pdf文件");
        return false;
      }
      showToast('上传成功')
   } catch (e) {
      showToast('上传失败')
      if (!sizeOk) {
        showToast("上传文件大小不能超过10MB");
        return false;
   }
}
    return true;
  };

const afterReadRowUpload = async (file) => {
  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 files = Array.isArray(file) ? file : file?.file ? [file] : [file]
            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)
        const uploaded = await uploadSingleFile(f);
        fileList.value.push(uploaded);
      }
      showToast('上传成功')
      showToast("上传成功");
   } catch (e) {
      showToast('上传失败')
      showToast("上传失败");
   }
}
  };

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

const getFileNameFromUrl = (url) => {
  const afterReadRowUpload = async file => {
   try {
      if (!url) return ''
      return decodeURIComponent(url.split('/').pop())
      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) {
      return url
      showToast("上传失败");
   }
  };

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

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

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

// 开票台账特有样式
.filter-popup {
@@ -597,9 +610,9 @@
.cancel-btn {
   font-weight: 400;
   font-size: 1rem;
   color: #FFFFFF;
    color: #ffffff;
   width: 6.375rem;
   background: #C7C9CC;
    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;
}
@@ -607,9 +620,9 @@
.save-btn {
   font-weight: 400;
   font-size: 1rem;
   color: #FFFFFF;
    color: #ffffff;
   width: 14rem;
   background: linear-gradient( 140deg, #00BAFF 0%, #006CFB 100%);
    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;
}