李红攀:V2.0.001小程序的采摘管理
This commit is contained in:
297
src/pages-erp/purchase-order/detail/index.vue
Normal file
297
src/pages-erp/purchase-order/detail/index.vue
Normal file
@@ -0,0 +1,297 @@
|
||||
<template>
|
||||
<view class="yd-page-container">
|
||||
<!-- 顶部导航栏 -->
|
||||
<wd-navbar
|
||||
title="采购订单详情"
|
||||
left-arrow placeholder safe-area-inset-top fixed
|
||||
@click-left="handleBack"
|
||||
/>
|
||||
|
||||
<!-- 详情内容 -->
|
||||
<view v-if="formData">
|
||||
<!-- 基本信息 -->
|
||||
<wd-cell-group title="基本信息" border>
|
||||
<wd-cell title="采购单编号" :value="formData.no" />
|
||||
<wd-cell title="采购状态">
|
||||
<view
|
||||
class="rounded-8rpx px-16rpx py-4rpx text-24rpx"
|
||||
:class="getStatusClass(formData.status)"
|
||||
>
|
||||
{{ getStatusText(formData.status) }}
|
||||
</view>
|
||||
</wd-cell>
|
||||
<wd-cell title="供应商" :value="formData.supplierName || '-'" />
|
||||
<wd-cell title="下单时间" :value="formatDateTime(formData.orderTime)" />
|
||||
<wd-cell title="创建人" :value="formData.creatorName || '-'" />
|
||||
<wd-cell title="审核人" :value="formData.auditorName || '-'" />
|
||||
<wd-cell title="创建时间" :value="formatDateTime(formData.createTime)" />
|
||||
</wd-cell-group>
|
||||
|
||||
<!-- 合同信息 -->
|
||||
<wd-cell-group title="合同信息" border>
|
||||
<wd-cell title="发票类别" :value="formData.invoiceTypeName || '-'" />
|
||||
<wd-cell title="运费承担方" :value="formData.freightPayerName || '-'" />
|
||||
<wd-cell title="结算方式" :value="formData.settlementMethodName || '-'" />
|
||||
</wd-cell-group>
|
||||
|
||||
<!-- 金额信息 -->
|
||||
<wd-cell-group title="金额信息" border>
|
||||
<wd-cell title="合计数量" :value="String(formData.totalCount || 0)" />
|
||||
<wd-cell title="合计产品价格" :value="`¥${formData.totalProductPrice || 0}`" />
|
||||
<wd-cell title="合计税额" :value="`¥${formData.totalTaxPrice || 0}`" />
|
||||
<wd-cell title="优惠率" :value="`${formData.discountPercent || 0}%`" />
|
||||
<wd-cell title="优惠金额" :value="`¥${formData.discountPrice || 0}`" />
|
||||
<wd-cell title="定金金额" :value="`¥${formData.depositPrice || 0}`" />
|
||||
<wd-cell title="最终合计价格">
|
||||
<text class="text-[#f5222d] font-semibold">¥{{ formData.totalPrice || 0 }}</text>
|
||||
</wd-cell>
|
||||
</wd-cell-group>
|
||||
|
||||
<!-- 入库/退货信息 -->
|
||||
<wd-cell-group title="入库/退货" border>
|
||||
<wd-cell title="入库数量" :value="String(formData.inCount || 0)" />
|
||||
<wd-cell title="退货数量" :value="String(formData.returnCount || 0)" />
|
||||
</wd-cell-group>
|
||||
|
||||
<!-- 请购单信息 -->
|
||||
<wd-cell-group v-if="formData.purchaseRequisitionNo" title="关联请购单" border>
|
||||
<wd-cell title="请购单编号" :value="formData.purchaseRequisitionNo" />
|
||||
</wd-cell-group>
|
||||
|
||||
<!-- 订单明细 -->
|
||||
<view class="mx-24rpx mt-24rpx">
|
||||
<view class="mb-16rpx text-32rpx text-[#333] font-semibold">
|
||||
订单明细({{ formData.items?.length || 0 }}项)
|
||||
</view>
|
||||
<view v-if="formData.items && formData.items.length > 0">
|
||||
<view
|
||||
v-for="(item, index) in formData.items"
|
||||
:key="item.id || index"
|
||||
class="mb-16rpx overflow-hidden rounded-12rpx bg-white shadow-sm"
|
||||
>
|
||||
<!-- 产品头部 -->
|
||||
<view class="flex items-center justify-between bg-[#f8f8f8] px-24rpx py-16rpx">
|
||||
<view class="flex items-center">
|
||||
<text class="text-28rpx text-[#333] font-semibold">{{ item.productName || '-' }}</text>
|
||||
<text v-if="item.productBarCode" class="ml-12rpx text-22rpx text-[#999]">{{ item.productBarCode }}</text>
|
||||
</view>
|
||||
<text v-if="item.supplierName" class="text-24rpx text-[#1890ff]">{{ item.supplierName }}</text>
|
||||
</view>
|
||||
<view class="p-24rpx">
|
||||
<!-- 产品规格 -->
|
||||
<view v-if="item.productSpec" class="mb-12rpx flex items-center text-26rpx text-[#666]">
|
||||
<text class="mr-8rpx text-[#999]">规格:</text>
|
||||
<text>{{ item.productSpec }}</text>
|
||||
</view>
|
||||
<!-- 单价 / 数量 / 单位 -->
|
||||
<view class="mb-12rpx flex items-center text-26rpx text-[#666]">
|
||||
<view class="mr-24rpx flex items-center">
|
||||
<text class="mr-8rpx text-[#999]">单价:</text>
|
||||
<text class="text-[#f5222d]">¥{{ item.productPrice || 0 }}</text>
|
||||
</view>
|
||||
<view class="mr-24rpx flex items-center">
|
||||
<text class="mr-8rpx text-[#999]">数量:</text>
|
||||
<text class="font-semibold">{{ item.count || 0 }}</text>
|
||||
</view>
|
||||
<view class="flex items-center">
|
||||
<text class="mr-8rpx text-[#999]">单位:</text>
|
||||
<text>{{ item.productUnitName || '-' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 税率 / 税额 -->
|
||||
<view v-if="item.taxPercent" class="mb-12rpx flex items-center text-26rpx text-[#666]">
|
||||
<view class="mr-24rpx flex items-center">
|
||||
<text class="mr-8rpx text-[#999]">税率:</text>
|
||||
<text>{{ item.taxPercent }}%</text>
|
||||
</view>
|
||||
<view class="flex items-center">
|
||||
<text class="mr-8rpx text-[#999]">税额:</text>
|
||||
<text>¥{{ item.taxPrice || 0 }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 入库 / 退货 / 库存 -->
|
||||
<view class="mb-12rpx flex items-center justify-between text-26rpx text-[#666]">
|
||||
<view class="flex items-center">
|
||||
<text class="mr-8rpx text-[#999]">入库:</text>
|
||||
<text>{{ item.inCount || 0 }}</text>
|
||||
</view>
|
||||
<view class="flex items-center">
|
||||
<text class="mr-8rpx text-[#999]">退货:</text>
|
||||
<text>{{ item.returnCount || 0 }}</text>
|
||||
</view>
|
||||
<view class="flex items-center">
|
||||
<text class="mr-8rpx text-[#999]">库存:</text>
|
||||
<text>{{ item.stockCount || 0 }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 备注 -->
|
||||
<view v-if="item.remark" class="text-24rpx text-[#999]">
|
||||
备注:{{ item.remark }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="py-60rpx text-center text-28rpx text-[#999]">
|
||||
暂无订单明细
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 备注 -->
|
||||
<wd-cell-group v-if="formData.remark" title="备注" border>
|
||||
<wd-cell :value="formData.remark" />
|
||||
</wd-cell-group>
|
||||
</view>
|
||||
|
||||
<!-- 底部操作按钮 -->
|
||||
<view class="yd-detail-footer">
|
||||
<view class="yd-detail-footer-actions">
|
||||
<wd-button
|
||||
v-if="hasAccessByCodes(['erp:purchase-order:update']) && formData?.status === 10"
|
||||
class="flex-1" type="warning" @click="handleEdit"
|
||||
>
|
||||
编辑
|
||||
</wd-button>
|
||||
<wd-button
|
||||
v-if="hasAccessByCodes(['erp:purchase-order:update-status']) && formData?.status === 10"
|
||||
class="flex-1" type="success" @click="handleApprove"
|
||||
>
|
||||
审批
|
||||
</wd-button>
|
||||
<wd-button
|
||||
v-if="hasAccessByCodes(['erp:purchase-order:delete']) && formData?.status !== 20"
|
||||
class="flex-1" type="error" :loading="deleting" @click="handleDelete"
|
||||
>
|
||||
删除
|
||||
</wd-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { PurchaseOrder } from '@/api/erp/purchase-order'
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { useToast } from 'wot-design-uni'
|
||||
import { deletePurchaseOrder, getPurchaseOrder, updatePurchaseOrderStatus } from '@/api/erp/purchase-order'
|
||||
import { useAccess } from '@/hooks/useAccess'
|
||||
import { navigateBackPlus } from '@/utils'
|
||||
import { formatDateTime } from '@/utils/date'
|
||||
|
||||
const props = defineProps<{
|
||||
id?: number | any
|
||||
}>()
|
||||
|
||||
definePage({
|
||||
style: {
|
||||
navigationBarTitleText: '',
|
||||
navigationStyle: 'custom',
|
||||
},
|
||||
})
|
||||
|
||||
const { hasAccessByCodes } = useAccess()
|
||||
const toast = useToast()
|
||||
const formData = ref<PurchaseOrder>()
|
||||
const deleting = ref(false)
|
||||
|
||||
/** 获取状态文本 */
|
||||
function getStatusText(status?: number) {
|
||||
switch (status) {
|
||||
case 10: return '未审批'
|
||||
case 20: return '已审批'
|
||||
case 30: return '已驳回'
|
||||
default: return '未知'
|
||||
}
|
||||
}
|
||||
|
||||
/** 获取状态样式 */
|
||||
function getStatusClass(status?: number) {
|
||||
switch (status) {
|
||||
case 10: return 'bg-[#fff7e6] text-[#fa8c16]'
|
||||
case 20: return 'bg-[#f6ffed] text-[#52c41a]'
|
||||
case 30: return 'bg-[#fff1f0] text-[#f5222d]'
|
||||
default: return 'bg-[#f5f5f5] text-[#999]'
|
||||
}
|
||||
}
|
||||
|
||||
/** 返回上一页 */
|
||||
function handleBack() {
|
||||
navigateBackPlus('/pages-erp/purchase-order/index')
|
||||
}
|
||||
|
||||
/** 加载详情 */
|
||||
async function getDetail() {
|
||||
if (!props.id) {
|
||||
return
|
||||
}
|
||||
try {
|
||||
toast.loading('加载中...')
|
||||
formData.value = await getPurchaseOrder(props.id)
|
||||
} finally {
|
||||
toast.close()
|
||||
}
|
||||
}
|
||||
|
||||
/** 编辑操作 */
|
||||
function handleEdit() {
|
||||
uni.navigateTo({
|
||||
url: `/pages-erp/purchase-order/form/index?id=${props.id}`,
|
||||
})
|
||||
}
|
||||
|
||||
/** 审批操作 */
|
||||
function handleApprove() {
|
||||
if (!props.id) {
|
||||
return
|
||||
}
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定要审批通过该采购订单吗?',
|
||||
success: async (res) => {
|
||||
if (!res.confirm) {
|
||||
return
|
||||
}
|
||||
try {
|
||||
await updatePurchaseOrderStatus(props.id, 20)
|
||||
toast.success('审批成功')
|
||||
getDetail()
|
||||
} catch {
|
||||
// error handled by http
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
/** 删除操作 */
|
||||
function handleDelete() {
|
||||
if (!props.id) {
|
||||
return
|
||||
}
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定要删除该采购订单吗?',
|
||||
success: async (res) => {
|
||||
if (!res.confirm) {
|
||||
return
|
||||
}
|
||||
deleting.value = true
|
||||
try {
|
||||
await deletePurchaseOrder([props.id])
|
||||
toast.success('删除成功')
|
||||
setTimeout(() => {
|
||||
handleBack()
|
||||
}, 500)
|
||||
} finally {
|
||||
deleting.value = false
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
/** 初始化 */
|
||||
onMounted(() => {
|
||||
getDetail()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
Reference in New Issue
Block a user