crm_uiapp/src/pages-erp/stock-out/index.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>