389 lines
12 KiB
Vue
389 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="flex items-center overflow-hidden rounded-12rpx bg-white mx-24rpx mb-16rpx shadow-sm">
|
||
<view
|
||
v-for="tab in statusTabs"
|
||
:key="tab.value"
|
||
class="flex-1 py-20rpx text-center text-26rpx relative"
|
||
: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 w-1/2 h-4rpx 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.supplierName || '-' }}</text>
|
||
</view>
|
||
<!-- 产品 -->
|
||
<view class="mb-8rpx flex items-center justify-between text-26rpx text-[#666]">
|
||
<text class="text-[#999]">产品</text>
|
||
<text class="ml-16rpx line-clamp-1 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.inTime) }}</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="flex items-center justify-around mt-12rpx pt-16rpx border-t border-[#f0f0f0]">
|
||
<view class="text-center">
|
||
<view class="text-32rpx text-[#333] font-semibold">{{ formatCount(item.totalCount) }}</view>
|
||
<view class="text-22rpx text-[#999] mt-4rpx">数量</view>
|
||
</view>
|
||
<view class="text-center">
|
||
<view class="text-32rpx text-[#1890ff] font-semibold">{{ formatPrice(item.totalPrice) }}</view>
|
||
<view class="text-22rpx text-[#999] mt-4rpx">金额</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 操作按钮 -->
|
||
<view class="flex flex-wrap gap-12rpx px-24rpx pb-20rpx" @click.stop>
|
||
<wd-button
|
||
v-if="hasAccessByCodes(['erp:stock-in:update']) && item.status !== 20"
|
||
size="small" type="primary" plain @click="handleEdit(item)"
|
||
>
|
||
编辑
|
||
</wd-button>
|
||
<wd-button
|
||
v-if="hasAccessByCodes(['erp:stock-in:update-status']) && item.status === 10"
|
||
size="small" type="success" plain @click="handleApprove(item.id!)"
|
||
>
|
||
审批
|
||
</wd-button>
|
||
<wd-button
|
||
v-if="hasAccessByCodes(['erp:stock-in:update-status']) && item.status === 20"
|
||
size="small" type="warning" plain @click="handleReverseApprove(item.id!)"
|
||
>
|
||
反审批
|
||
</wd-button>
|
||
<wd-button
|
||
v-if="hasAccessByCodes(['erp:stock-in: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-in: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 { StockIn } from '@/api/erp/stock-in'
|
||
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 { deleteStockIn, getStockInPage, updateStockInStatus } from '@/api/erp/stock-in'
|
||
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<StockIn[]>([])
|
||
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 getStockInPage(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-in/form/index' })
|
||
}
|
||
|
||
/** 编辑 */
|
||
function handleEdit(item: StockIn) {
|
||
uni.navigateTo({ url: `/pages-erp/stock-in/form/index?id=${item.id}` })
|
||
}
|
||
|
||
/** 详情 */
|
||
function handleDetail(item: StockIn) {
|
||
uni.navigateTo({ url: `/pages-erp/stock-in/detail/index?id=${item.id}` })
|
||
}
|
||
|
||
/** 审批 */
|
||
function handleApprove(id: number) {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '确定要审批该入库单吗？',
|
||
success: async (res) => {
|
||
if (!res.confirm) return
|
||
try {
|
||
await updateStockInStatus(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 updateStockInStatus(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 deleteStockIn([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>
|