426 lines
12 KiB
Vue
426 lines
12 KiB
Vue
<template>
|
||
<view class="yd-page-container">
|
||
<!-- 顶部导航栏 -->
|
||
<wd-navbar
|
||
title="其他出库"
|
||
left-arrow placeholder safe-area-inset-top fixed
|
||
@click-left="handleBack"
|
||
/>
|
||
|
||
<!-- 搜索组件 -->
|
||
<view @click="searchVisible = true">
|
||
<wd-search :placeholder="searchPlaceholder" hide-cancel disabled />
|
||
</view>
|
||
|
||
<!-- 快捷筛选标签 -->
|
||
<view class="mx-24rpx mb-16rpx flex items-center overflow-hidden rounded-12rpx bg-white shadow-sm">
|
||
<view
|
||
v-for="tab in statusTabs"
|
||
:key="tab.value"
|
||
class="relative flex-1 py-20rpx text-center text-26rpx"
|
||
:class="queryParams.status === tab.value ? 'text-[#1890ff] font-semibold' : 'text-[#666]'"
|
||
@click="onTabChange(tab.value)"
|
||
>
|
||
{{ tab.label }}
|
||
<view
|
||
v-if="queryParams.status === tab.value"
|
||
class="absolute bottom-0 left-1/4 h-4rpx w-1/2 rounded-2rpx bg-[#1890ff]"
|
||
/>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 出库单列表 -->
|
||
<view class="px-24rpx">
|
||
<view
|
||
v-for="item in list"
|
||
:key="item.id"
|
||
class="mb-20rpx overflow-hidden rounded-12rpx bg-white shadow-sm"
|
||
@click="handleDetail(item)"
|
||
>
|
||
<view class="p-24rpx">
|
||
<!-- 头部：单号 + 状态 -->
|
||
<view class="mb-16rpx flex items-center justify-between">
|
||
<view class="text-28rpx text-[#333] font-semibold">
|
||
{{ item.no || '-' }}
|
||
</view>
|
||
<view
|
||
class="rounded-8rpx px-16rpx py-4rpx text-24rpx"
|
||
:class="item.status === 20 ? 'bg-[#f6ffed] text-[#52c41a]' : 'bg-[#fff7e6] text-[#fa8c16]'"
|
||
>
|
||
{{ item.status === 20 ? '已审核' : '未审核' }}
|
||
</view>
|
||
</view>
|
||
<!-- 客户 -->
|
||
<view class="mb-8rpx flex items-center justify-between text-26rpx text-[#666]">
|
||
<text class="text-[#999]">客户</text>
|
||
<text>{{ item.customerName || '-' }}</text>
|
||
</view>
|
||
<!-- 产品 -->
|
||
<view class="mb-8rpx flex items-center justify-between text-26rpx text-[#666]">
|
||
<text class="text-[#999]">产品</text>
|
||
<text class="line-clamp-1 ml-16rpx text-right" style="max-width: 400rpx;">{{ item.productNames || '-' }}</text>
|
||
</view>
|
||
<!-- 出库时间 -->
|
||
<view class="mb-8rpx flex items-center justify-between text-26rpx text-[#666]">
|
||
<text class="text-[#999]">出库时间</text>
|
||
<text>{{ formatDate(item.outTime) }}</text>
|
||
</view>
|
||
<!-- 创建人 -->
|
||
<view class="mb-12rpx flex items-center justify-between text-26rpx text-[#666]">
|
||
<text class="text-[#999]">创建人</text>
|
||
<text>{{ item.creatorName || '-' }}</text>
|
||
</view>
|
||
<!-- 数量金额区域 -->
|
||
<view class="mt-12rpx flex items-center justify-around border-t border-[#f0f0f0] pt-16rpx">
|
||
<view class="text-center">
|
||
<view class="text-32rpx text-[#333] font-semibold">
|
||
{{ formatCount(item.totalCount) }}
|
||
</view>
|
||
<view class="mt-4rpx text-22rpx text-[#999]">
|
||
数量
|
||
</view>
|
||
</view>
|
||
<view class="text-center">
|
||
<view class="text-32rpx text-[#f5222d] font-semibold">
|
||
{{ formatPrice(item.totalPrice) }}
|
||
</view>
|
||
<view class="mt-4rpx text-22rpx text-[#999]">
|
||
金额
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 操作按钮 -->
|
||
<view class="flex flex-wrap gap-12rpx px-24rpx pb-20rpx" @click.stop>
|
||
<wd-button
|
||
v-if="hasAccessByCodes(['erp:stock-out:query']) && item.status !== 20"
|
||
size="small" type="primary" plain @click="handleTaskScan(item)"
|
||
>
|
||
去扫码
|
||
</wd-button>
|
||
<wd-button
|
||
v-if="hasAccessByCodes(['erp:stock-out:update']) && item.status !== 20"
|
||
size="small" type="primary" plain @click="handleEdit(item)"
|
||
>
|
||
编辑
|
||
</wd-button>
|
||
<wd-button
|
||
v-if="hasAccessByCodes(['erp:stock-out:update-status']) && item.status === 10"
|
||
size="small" type="success" plain @click="handleApprove(item.id!)"
|
||
>
|
||
审批
|
||
</wd-button>
|
||
<wd-button
|
||
v-if="hasAccessByCodes(['erp:stock-out:update-status']) && item.status === 20"
|
||
size="small" type="warning" plain @click="handleReverseApprove(item.id!)"
|
||
>
|
||
反审批
|
||
</wd-button>
|
||
<wd-button
|
||
v-if="hasAccessByCodes(['erp:stock-out:delete']) && item.status !== 20"
|
||
size="small" type="error" plain @click="handleDelete(item.id!)"
|
||
>
|
||
删除
|
||
</wd-button>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 加载更多 -->
|
||
<view v-if="loadMoreState !== 'loading' && list.length === 0" class="py-100rpx text-center">
|
||
<wd-status-tip image="content" tip="暂无出库单数据" />
|
||
</view>
|
||
<wd-loadmore
|
||
v-if="list.length > 0"
|
||
:state="loadMoreState"
|
||
@reload="loadMore"
|
||
/>
|
||
</view>
|
||
|
||
<!-- 新增按钮 -->
|
||
<wd-fab
|
||
v-if="hasAccessByCodes(['erp:stock-out:create'])"
|
||
position="right-bottom"
|
||
type="primary"
|
||
:expandable="false"
|
||
@click="handleAdd"
|
||
/>
|
||
|
||
<!-- 搜索弹窗 -->
|
||
<wd-popup v-model="searchVisible" position="top" @close="searchVisible = false">
|
||
<view class="yd-search-form-container" :style="{ paddingTop: `${getNavbarHeight()}px` }">
|
||
<view class="yd-search-form-item">
|
||
<view class="yd-search-form-label">
|
||
出库单号
|
||
</view>
|
||
<wd-input v-model="searchForm.no" placeholder="请输入出库单号" clearable />
|
||
</view>
|
||
<view class="yd-search-form-item">
|
||
<view class="yd-search-form-label">
|
||
审核状态
|
||
</view>
|
||
<view class="yd-search-form-radio-group">
|
||
<view
|
||
v-for="opt in statusOptions"
|
||
:key="opt.value"
|
||
class="yd-search-form-radio"
|
||
:class="{ 'yd-search-form-radio--active': searchForm.status === opt.value }"
|
||
@click="searchForm.status = opt.value"
|
||
>
|
||
{{ opt.label }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="yd-search-form-actions">
|
||
<wd-button class="flex-1" plain @click="handleReset">
|
||
重置
|
||
</wd-button>
|
||
<wd-button class="flex-1" type="primary" @click="handleSearch">
|
||
搜索
|
||
</wd-button>
|
||
</view>
|
||
</view>
|
||
</wd-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import type { StockOut } from '@/api/erp/stock-out'
|
||
import type { LoadMoreState } from '@/http/types'
|
||
import { onReachBottom } from '@dcloudio/uni-app'
|
||
import { computed, onMounted, reactive, ref } from 'vue'
|
||
import { useToast } from 'wot-design-uni'
|
||
import { deleteStockOut, getStockOutPage, updateStockOutStatus } from '@/api/erp/stock-out'
|
||
import { useAccess } from '@/hooks/useAccess'
|
||
import { getNavbarHeight, navigateBackPlus } from '@/utils'
|
||
|
||
definePage({
|
||
style: {
|
||
navigationBarTitleText: '',
|
||
navigationStyle: 'custom',
|
||
},
|
||
})
|
||
|
||
const { hasAccessByCodes } = useAccess()
|
||
const toast = useToast()
|
||
const total = ref(0)
|
||
const list = ref<StockOut[]>([])
|
||
const loadMoreState = ref<LoadMoreState>('loading')
|
||
const queryParams = ref<Record<string, any>>({
|
||
pageNo: 1,
|
||
pageSize: 10,
|
||
status: undefined,
|
||
})
|
||
|
||
// 搜索相关
|
||
const searchVisible = ref(false)
|
||
const searchForm = reactive({
|
||
no: undefined as string | undefined,
|
||
status: undefined as number | undefined,
|
||
})
|
||
|
||
/** 状态标签 */
|
||
const statusTabs = [
|
||
{ value: undefined, label: '全部' },
|
||
{ value: 10, label: '未审核' },
|
||
{ value: 20, label: '已审核' },
|
||
]
|
||
|
||
/** 状态选项 */
|
||
const statusOptions = [
|
||
{ value: undefined, label: '全部' },
|
||
{ value: 10, label: '未审核' },
|
||
{ value: 20, label: '已审核' },
|
||
]
|
||
|
||
/** 搜索条件 placeholder */
|
||
const searchPlaceholder = computed(() => {
|
||
const conditions: string[] = []
|
||
if (searchForm.no)
|
||
conditions.push(`单号:${searchForm.no}`)
|
||
if (searchForm.status !== undefined) {
|
||
const statusLabel = statusOptions.find(o => o.value === searchForm.status)?.label
|
||
if (statusLabel && statusLabel !== '全部')
|
||
conditions.push(`状态:${statusLabel}`)
|
||
}
|
||
return conditions.length > 0 ? conditions.join(' | ') : '搜索出库单'
|
||
})
|
||
|
||
/** 格式化数量 */
|
||
function formatCount(count?: number) {
|
||
if (count === undefined || count === null)
|
||
return '-'
|
||
return count.toFixed(2)
|
||
}
|
||
|
||
/** 格式化金额 */
|
||
function formatPrice(price?: number) {
|
||
if (price === undefined || price === null)
|
||
return '-'
|
||
return `¥${price.toFixed(2)}`
|
||
}
|
||
|
||
/** 格式化日期 */
|
||
function formatDate(dateStr?: string) {
|
||
if (!dateStr)
|
||
return '-'
|
||
return dateStr.substring(0, 10)
|
||
}
|
||
|
||
/** 返回上一页 */
|
||
function handleBack() {
|
||
navigateBackPlus()
|
||
}
|
||
|
||
/** 切换状态标签 */
|
||
function onTabChange(status: number | undefined) {
|
||
queryParams.value.status = status
|
||
list.value = []
|
||
queryParams.value.pageNo = 1
|
||
getList()
|
||
}
|
||
|
||
/** 查询出库单列表 */
|
||
async function getList() {
|
||
loadMoreState.value = 'loading'
|
||
try {
|
||
const params = { ...queryParams.value }
|
||
if (searchForm.no)
|
||
params.no = searchForm.no
|
||
const data = await getStockOutPage(params)
|
||
list.value = [...list.value, ...data.list]
|
||
total.value = data.total
|
||
loadMoreState.value = list.value.length >= total.value ? 'finished' : 'loading'
|
||
} catch {
|
||
queryParams.value.pageNo = queryParams.value.pageNo > 1 ? queryParams.value.pageNo - 1 : 1
|
||
loadMoreState.value = 'error'
|
||
}
|
||
}
|
||
|
||
/** 搜索 */
|
||
function handleSearch() {
|
||
searchVisible.value = false
|
||
queryParams.value = {
|
||
pageNo: 1,
|
||
pageSize: queryParams.value.pageSize,
|
||
status: searchForm.status,
|
||
}
|
||
list.value = []
|
||
getList()
|
||
}
|
||
|
||
/** 重置 */
|
||
function handleReset() {
|
||
searchForm.no = undefined
|
||
searchForm.status = undefined
|
||
searchVisible.value = false
|
||
queryParams.value = { pageNo: 1, pageSize: 10, status: undefined }
|
||
list.value = []
|
||
getList()
|
||
}
|
||
|
||
/** 加载更多 */
|
||
function loadMore() {
|
||
if (loadMoreState.value === 'finished')
|
||
return
|
||
queryParams.value.pageNo++
|
||
getList()
|
||
}
|
||
|
||
/** 新增出库单 */
|
||
function handleAdd() {
|
||
uni.navigateTo({ url: '/pages-erp/stock-out/form/index' })
|
||
}
|
||
|
||
/** 编辑 */
|
||
function handleEdit(item: StockOut) {
|
||
uni.navigateTo({ url: `/pages-erp/stock-out/form/index?id=${item.id}` })
|
||
}
|
||
|
||
/** 去扫码执行 */
|
||
function handleTaskScan(item: StockOut) {
|
||
uni.navigateTo({ url: `/pages-erp/stock-out/task-scan/index?id=${item.id}` })
|
||
}
|
||
|
||
/** 详情 */
|
||
function handleDetail(item: StockOut) {
|
||
uni.navigateTo({ url: `/pages-erp/stock-out/detail/index?id=${item.id}` })
|
||
}
|
||
|
||
/** 审批 */
|
||
function handleApprove(id: number) {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '确定要审批该出库单吗？',
|
||
success: async (res) => {
|
||
if (!res.confirm)
|
||
return
|
||
try {
|
||
await updateStockOutStatus(id, 20)
|
||
toast.success('审批成功')
|
||
refreshList()
|
||
} catch {
|
||
// error handled by http
|
||
}
|
||
},
|
||
})
|
||
}
|
||
|
||
/** 反审批 */
|
||
function handleReverseApprove(id: number) {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '确定要反审批该出库单吗？',
|
||
success: async (res) => {
|
||
if (!res.confirm)
|
||
return
|
||
try {
|
||
await updateStockOutStatus(id, 10)
|
||
toast.success('反审批成功')
|
||
refreshList()
|
||
} catch {
|
||
// error handled by http
|
||
}
|
||
},
|
||
})
|
||
}
|
||
|
||
/** 删除 */
|
||
function handleDelete(id: number) {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '确定要删除该出库单吗？',
|
||
success: async (res) => {
|
||
if (!res.confirm)
|
||
return
|
||
try {
|
||
await deleteStockOut([id])
|
||
toast.success('删除成功')
|
||
refreshList()
|
||
} catch {
|
||
// error handled by http
|
||
}
|
||
},
|
||
})
|
||
}
|
||
|
||
/** 刷新列表 */
|
||
function refreshList() {
|
||
list.value = []
|
||
queryParams.value.pageNo = 1
|
||
getList()
|
||
}
|
||
|
||
/** 触底加载更多 */
|
||
onReachBottom(() => {
|
||
loadMore()
|
||
})
|
||
|
||
/** 初始化 */
|
||
onMounted(() => {
|
||
getList()
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
</style>
|