| | |
| | | <template> |
| | | <view class="sales-account"> |
| | | <!-- 使用通用页面头部组件 --> |
| | | <PageHeader title="销售台账" @back="goBack" /> |
| | | |
| | | <!-- 搜索和筛选区域 --> |
| | | <view class="search-filter-section"> |
| | | <view class="search-bar"> |
| | | <view class="search-input"> |
| | | <input |
| | | class="search-text" |
| | | placeholder="请输入销售合同号/客户名称" |
| | | v-model="searchKeyword" |
| | | /> |
| | | </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" @click="handleInfo('edit', 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 class="item-tag">--> |
| | | <!-- <text class="tag-text">{{ item.recorder }}</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">{{ item.paymentMethod }}</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">{{ item.executionDate }}</text> |
| | | </view> |
| | | <up-divider></up-divider> |
| | | <view class="detail-info"> |
| | | <view class="detail-row"> |
| | | <text class="detail-label">录入人</text> |
| | | <text class="detail-value">{{ item.entryPersonName }}</text> |
| | | </view> |
| | | <view class="detail-row"> |
| | | <text class="detail-label">录入日期</text> |
| | | <text class="detail-value">{{ item.entryDate }}</text> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | <view v-else class="no-data"> |
| | | <text>暂无销售台账数据</text> |
| | | </view> |
| | | |
| | | <!-- 浮动操作按钮 --> |
| | | <view class="fab-button" @click="handleInfo('add')"> |
| | | <up-icon name="plus" size="24" color="#ffffff"></up-icon> |
| | | </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="salesContractNo" |
| | | @change="getList" |
| | | clearable /> |
| | | </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="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 class="item-tag">--> |
| | | <!-- <text class="tag-text">{{ item.recorder }}</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.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">{{ item.paymentMethod }}</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">{{ item.executionDate }}</text> |
| | | </view> |
| | | <up-divider></up-divider> |
| | | <view class="detail-info"> |
| | | <view class="detail-row"> |
| | | <text class="detail-label">录入人</text> |
| | | <text class="detail-value">{{ item.entryPersonName }}</text> |
| | | </view> |
| | | <view class="detail-row"> |
| | | <text class="detail-label">录入日期</text> |
| | | <text class="detail-value">{{ item.entryDate }}</text> |
| | | </view> |
| | | </view> |
| | | <up-divider></up-divider> |
| | | <view class="detail-buttons"> |
| | | <u-button class="detail-button" |
| | | size="small" |
| | | type="primary" |
| | | @click.stop="handleInfo('edit', item)"> |
| | | 编辑 |
| | | </u-button> |
| | | <u-button class="detail-button" |
| | | size="small" |
| | | type="primary" |
| | | plain |
| | | @click.stop="openOut(item)"> |
| | | 发货状态 |
| | | </u-button> |
| | | <u-button class="detail-button" |
| | | size="small" |
| | | type="error" |
| | | plain |
| | | @click.stop="handleDelete(item)"> |
| | | 删除 |
| | | </u-button> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | <view v-else |
| | | class="no-data"> |
| | | <text>暂无销售台账数据</text> |
| | | </view> |
| | | <!-- 浮动操作按钮 --> |
| | | <view class="fab-button" |
| | | @click="handleInfo('add')"> |
| | | <up-icon name="plus" |
| | | size="24" |
| | | color="#ffffff"></up-icon> |
| | | </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"; |
| | | import PageHeader from "@/components/PageHeader.vue"; |
| | | const userStore = useUserStore() |
| | | import { ref } from "vue"; |
| | | import { onShow } from "@dcloudio/uni-app"; |
| | | import { |
| | | ledgerListPage, |
| | | delLedger, |
| | | productList, |
| | | } from "@/api/salesManagement/salesLedger"; |
| | | import useUserStore from "@/store/modules/user"; |
| | | import PageHeader from "@/components/PageHeader.vue"; |
| | | const userStore = useUserStore(); |
| | | const showLoadingToast = message => { |
| | | uni.showLoading({ |
| | | title: message, |
| | | mask: true, |
| | | }); |
| | | }; |
| | | const closeToast = () => { |
| | | uni.hideLoading(); |
| | | }; |
| | | |
| | | // 搜索关键词 |
| | | const searchKeyword = ref(''); |
| | | // 搜索关键词 |
| | | const salesContractNo = ref(""); |
| | | |
| | | // 销售台账数据 |
| | | const ledgerList = ref([]); |
| | | const total = ref(0); |
| | | // 销售台账数据 |
| | | const ledgerList = ref([]); |
| | | |
| | | // 返回上一页 |
| | | const goBack = () => { |
| | | uni.navigateBack(); |
| | | }; |
| | | // 查询列表 |
| | | const getList = () => { |
| | | const page = { |
| | | current: -1, |
| | | size: -1 |
| | | } |
| | | ledgerListPage({...page}).then((res) => { |
| | | ledgerList.value = res.records; |
| | | total.value = res.total; |
| | | }).catch(() => { |
| | | // tableLoading.value = false; |
| | | }); |
| | | }; |
| | | // 判断是否存在已发货/发货完成的产品 |
| | | const hasShippedProducts = products => { |
| | | if (!products || products.length === 0) return false; |
| | | return products.some(p => { |
| | | const statusStr = (p.shippingStatus ?? "").toString(); |
| | | // 包含“发货”或有发货日期/车牌号视为已发货 |
| | | return ( |
| | | statusStr.includes("发货") || |
| | | !!p.shippingDate || |
| | | !!p.shippingCarNumber |
| | | ); |
| | | }); |
| | | }; |
| | | |
| | | // 处理台账信息操作(查看/编辑/新增) |
| | | const handleInfo = (type, row) => { |
| | | try { |
| | | // 设置操作类型 |
| | | uni.setStorageSync('operationType', type); |
| | | |
| | | // 如果是查看或编辑操作 |
| | | if (type !== 'add') { |
| | | // 验证行数据是否存在 |
| | | if (!row) { |
| | | uni.showToast({ |
| | | title: '数据不存在', |
| | | icon: 'error' |
| | | }); |
| | | return; |
| | | // 返回上一页 |
| | | const goBack = () => { |
| | | uni.navigateBack(); |
| | | }; |
| | | // 查询列表 |
| | | const getList = () => { |
| | | showLoadingToast("加载中..."); |
| | | const page = { |
| | | current: -1, |
| | | size: -1, |
| | | }; |
| | | ledgerListPage({ ...page, salesContractNo: salesContractNo.value }) |
| | | .then(res => { |
| | | console.log("销售台账----", res); |
| | | ledgerList.value = res.records; |
| | | closeToast(); |
| | | }) |
| | | .catch(() => { |
| | | closeToast(); |
| | | }); |
| | | }; |
| | | const openOut = item => { |
| | | uni.setStorageSync("outData", JSON.stringify(item)); |
| | | uni.navigateTo({ |
| | | url: "/pages/sales/salesAccount/out", |
| | | }); |
| | | }; |
| | | |
| | | // 删除单条销售台账 |
| | | const handleDelete = async row => { |
| | | if (!row || !row.id) return; |
| | | |
| | | // 获取产品列表,用于判断是否已发货 |
| | | let products = row.children && row.children.length > 0 ? row.children : null; |
| | | if (!products) { |
| | | try { |
| | | const res = await productList({ salesLedgerId: row.id, type: 1 }); |
| | | products = res.data || res.records || []; |
| | | } catch (e) { |
| | | products = []; |
| | | } |
| | | |
| | | // 检查权限:只有录入人才能编辑 |
| | | if (row.entryPerson != userStore.id) { |
| | | // 非录入人跳转到只读详情页面 |
| | | uni.setStorageSync('editData', JSON.stringify(row)); |
| | | uni.navigateTo({ |
| | | url: '/pages/sales/salesAccount/view' |
| | | }); |
| | | return; |
| | | } |
| | | |
| | | // 录入人编辑:存储数据并跳转到编辑页面 |
| | | uni.setStorageSync('editData', JSON.stringify(row)); |
| | | uni.navigateTo({ |
| | | url: '/pages/sales/salesAccount/detail' |
| | | } |
| | | |
| | | if (hasShippedProducts(products)) { |
| | | uni.showToast({ |
| | | title: "已发货/发货完成的销售订单不能删除", |
| | | icon: "none", |
| | | }); |
| | | return; |
| | | } |
| | | |
| | | // 新增操作:直接跳转到编辑页面 |
| | | uni.navigateTo({ |
| | | url: '/pages/sales/salesAccount/detail' |
| | | }); |
| | | |
| | | } catch (error) { |
| | | console.error('处理台账信息操作失败:', error); |
| | | uni.showToast({ |
| | | title: '操作失败,请重试', |
| | | icon: 'error' |
| | | }); |
| | | } |
| | | }; |
| | | |
| | | onShow(() => { |
| | | uni.showModal({ |
| | | title: "删除确认", |
| | | content: "选中的内容将被删除,是否确认删除?", |
| | | success: async res => { |
| | | if (res.confirm) { |
| | | try { |
| | | showLoadingToast("处理中..."); |
| | | await delLedger([row.id]); |
| | | closeToast(); |
| | | uni.showToast({ |
| | | title: "删除成功", |
| | | icon: "success", |
| | | }); |
| | | getList(); |
| | | } catch (e) { |
| | | closeToast(); |
| | | uni.showToast({ |
| | | title: "删除失败,请重试", |
| | | icon: "none", |
| | | }); |
| | | } |
| | | } |
| | | }, |
| | | }); |
| | | }; |
| | | // 处理台账信息操作(查看/编辑/新增) |
| | | const handleInfo = (type, row) => { |
| | | try { |
| | | // 设置操作类型 |
| | | uni.setStorageSync("operationType", type); |
| | | |
| | | // 如果是查看或编辑操作 |
| | | if (type !== "add") { |
| | | // 验证行数据是否存在 |
| | | if (!row) { |
| | | uni.showToast({ |
| | | title: "数据不存在", |
| | | icon: "error", |
| | | }); |
| | | return; |
| | | } |
| | | |
| | | // 检查权限:只有录入人才能编辑 |
| | | if (row.entryPerson != userStore.id) { |
| | | // 非录入人跳转到只读详情页面 |
| | | uni.setStorageSync("editData", JSON.stringify(row)); |
| | | uni.navigateTo({ |
| | | url: "/pages/sales/salesAccount/view", |
| | | }); |
| | | return; |
| | | } |
| | | |
| | | // 录入人编辑:存储数据并跳转到编辑页面 |
| | | uni.setStorageSync("editData", JSON.stringify(row)); |
| | | uni.navigateTo({ |
| | | url: "/pages/sales/salesAccount/detail", |
| | | }); |
| | | return; |
| | | } |
| | | |
| | | // 新增操作:直接跳转到编辑页面 |
| | | uni.navigateTo({ |
| | | url: "/pages/sales/salesAccount/detail", |
| | | }); |
| | | } catch (error) { |
| | | console.error("处理台账信息操作失败:", error); |
| | | uni.showToast({ |
| | | title: "操作失败,请重试", |
| | | icon: "error", |
| | | }); |
| | | } |
| | | }; |
| | | |
| | | onShow(() => { |
| | | // 页面显示时刷新列表 |
| | | getList(); |
| | | }); |
| | | }); |
| | | </script> |
| | | |
| | | <style scoped lang="scss"> |
| | | .u-divider { |
| | | margin: 0 !important; |
| | | } |
| | | .sales-account { |
| | | min-height: 100vh; |
| | | background: #f8f9fa; |
| | | position: relative; |
| | | } |
| | | |
| | | |
| | | |
| | | .search-filter-section { |
| | | padding: 10px 20px; |
| | | background: #ffffff; |
| | | } |
| | | |
| | | .search-bar { |
| | | display: flex; |
| | | align-items: center; |
| | | gap: 12px; |
| | | } |
| | | |
| | | .search-input { |
| | | flex: 1; |
| | | background: #f5f5f5; |
| | | border-radius: 24px; |
| | | padding: 10px 16px; |
| | | display: flex; |
| | | align-items: center; |
| | | gap: 8px; |
| | | } |
| | | |
| | | .search-text { |
| | | flex: 1; |
| | | font-size: 14px; |
| | | color: #333; |
| | | background: transparent; |
| | | border: none; |
| | | outline: none; |
| | | } |
| | | |
| | | .search-text::placeholder { |
| | | color: #999; |
| | | } |
| | | |
| | | .filter-button { |
| | | width: 40px; |
| | | height: 40px; |
| | | border-radius: 8px; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | } |
| | | |
| | | .ledger-list { |
| | | padding: 20px; |
| | | } |
| | | |
| | | .ledger-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-header { |
| | | padding: 16px 0; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | } |
| | | |
| | | .item-left { |
| | | display: flex; |
| | | align-items: center; |
| | | gap: 8px; |
| | | } |
| | | |
| | | .document-icon { |
| | | width: 24px; |
| | | height: 24px; |
| | | background: #2979ff; |
| | | border-radius: 4px; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | } |
| | | |
| | | .item-id { |
| | | font-size: 14px; |
| | | color: #333; |
| | | font-weight: 500; |
| | | } |
| | | |
| | | .item-tag { |
| | | background: #4caf50; |
| | | border-radius: 4px; |
| | | padding: 2px 4px; |
| | | } |
| | | |
| | | .tag-text { |
| | | font-size: 11px; |
| | | color: #ffffff; |
| | | font-weight: 500; |
| | | } |
| | | |
| | | .item-details { |
| | | padding: 16px 0; |
| | | } |
| | | |
| | | .detail-row { |
| | | display: flex; |
| | | align-items: flex-end; |
| | | justify-content: space-between; |
| | | margin-bottom: 8px; |
| | | |
| | | &:last-child { |
| | | margin-bottom: 0; |
| | | } |
| | | } |
| | | .detail-info { |
| | | margin-top: 10px; |
| | | display: flex; |
| | | align-items: flex-start; |
| | | justify-content: space-between; |
| | | } |
| | | |
| | | .detail-label { |
| | | font-size: 12px; |
| | | color: #777777; |
| | | min-width: 60px; |
| | | } |
| | | |
| | | .detail-value { |
| | | font-size: 12px; |
| | | color: #000000; |
| | | text-align: right; |
| | | flex: 1; |
| | | margin-left: 16px; |
| | | } |
| | | |
| | | .detail-value.highlight { |
| | | color: #2979ff; |
| | | font-weight: 500; |
| | | } |
| | | |
| | | .no-data { |
| | | padding: 40px 0; |
| | | text-align: center; |
| | | color: #999; |
| | | } |
| | | |
| | | .fab-button { |
| | | position: fixed; |
| | | bottom: calc(30px + env(safe-area-inset-bottom)); |
| | | right: 30px; |
| | | width: 56px; |
| | | height: 56px; |
| | | background: #2979ff; |
| | | border-radius: 50%; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | box-shadow: 0 4px 16px rgba(41, 121, 255, 0.3); |
| | | z-index: 1000; |
| | | /* 确保浮动按钮不被底部安全区域遮挡 */ |
| | | } |
| | | @import "@/styles/sales-common.scss"; |
| | | .detail-buttons { |
| | | display: flex; |
| | | gap: 10px; |
| | | justify-content: space-between; |
| | | } |
| | | </style> |