This commit is contained in:
sexygoat
330
src/views/asset-management/exchange-management/detail.vue
Normal file
330
src/views/asset-management/exchange-management/detail.vue
Normal file
@@ -0,0 +1,330 @@
|
||||
<template>
|
||||
<div class="exchange-detail-page">
|
||||
<ElPageHeader @back="handleBack">
|
||||
<template #content>
|
||||
<span class="page-header-title">换货单详情</span>
|
||||
</template>
|
||||
</ElPageHeader>
|
||||
|
||||
<ElCard v-loading="loading" style="margin-top: 20px">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>换货单信息</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<ElDescriptions v-if="exchangeDetail" :column="2" border>
|
||||
<ElDescriptionsItem label="换货单号">
|
||||
{{ exchangeDetail.exchange_no }}
|
||||
</ElDescriptionsItem>
|
||||
<ElDescriptionsItem label="状态">
|
||||
<ElTag :type="getStatusType(exchangeDetail.status)">
|
||||
{{ exchangeDetail.status_text }}
|
||||
</ElTag>
|
||||
</ElDescriptionsItem>
|
||||
|
||||
<ElDescriptionsItem label="换货原因" :span="2">
|
||||
{{ exchangeDetail.exchange_reason }}
|
||||
</ElDescriptionsItem>
|
||||
|
||||
<ElDescriptionsItem label="旧资产类型">
|
||||
{{ exchangeDetail.old_asset_type === 'iot_card' ? 'IoT卡' : '设备' }}
|
||||
</ElDescriptionsItem>
|
||||
<ElDescriptionsItem label="旧资产标识符">
|
||||
{{ exchangeDetail.old_asset_identifier }}
|
||||
</ElDescriptionsItem>
|
||||
|
||||
<ElDescriptionsItem label="新资产类型">
|
||||
{{
|
||||
exchangeDetail.new_asset_type
|
||||
? exchangeDetail.new_asset_type === 'iot_card'
|
||||
? 'IoT卡'
|
||||
: '设备'
|
||||
: '--'
|
||||
}}
|
||||
</ElDescriptionsItem>
|
||||
<ElDescriptionsItem label="新资产标识符">
|
||||
{{ exchangeDetail.new_asset_identifier || '--' }}
|
||||
</ElDescriptionsItem>
|
||||
|
||||
<ElDescriptionsItem label="收货人姓名">
|
||||
{{ exchangeDetail.recipient_name || '--' }}
|
||||
</ElDescriptionsItem>
|
||||
<ElDescriptionsItem label="收货人电话">
|
||||
{{ exchangeDetail.recipient_phone || '--' }}
|
||||
</ElDescriptionsItem>
|
||||
|
||||
<ElDescriptionsItem label="收货地址" :span="2">
|
||||
{{ exchangeDetail.recipient_address || '--' }}
|
||||
</ElDescriptionsItem>
|
||||
|
||||
<ElDescriptionsItem label="快递公司">
|
||||
{{ exchangeDetail.express_company || '--' }}
|
||||
</ElDescriptionsItem>
|
||||
<ElDescriptionsItem label="快递单号">
|
||||
{{ exchangeDetail.express_no || '--' }}
|
||||
</ElDescriptionsItem>
|
||||
|
||||
<ElDescriptionsItem label="备注" :span="2">
|
||||
{{ exchangeDetail.remark || '--' }}
|
||||
</ElDescriptionsItem>
|
||||
|
||||
<ElDescriptionsItem label="创建时间">
|
||||
{{ formatDateTime(exchangeDetail.created_at) }}
|
||||
</ElDescriptionsItem>
|
||||
<ElDescriptionsItem label="更新时间">
|
||||
{{ formatDateTime(exchangeDetail.updated_at) }}
|
||||
</ElDescriptionsItem>
|
||||
</ElDescriptions>
|
||||
|
||||
<ElEmpty v-else description="未找到换货单信息" />
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div v-if="exchangeDetail" style="margin-top: 20px; text-align: center">
|
||||
<ElButton
|
||||
v-if="exchangeDetail.status === 1"
|
||||
type="warning"
|
||||
@click="handleCancel"
|
||||
v-permission="'exchange:cancel'"
|
||||
>
|
||||
取消换货
|
||||
</ElButton>
|
||||
|
||||
<ElButton
|
||||
v-if="exchangeDetail.status === 2"
|
||||
@click="handleRenew"
|
||||
v-permission="'exchange:renew'"
|
||||
>
|
||||
旧资产转新
|
||||
</ElButton>
|
||||
|
||||
<ElButton
|
||||
v-if="exchangeDetail.status === 2"
|
||||
type="primary"
|
||||
@click="showShipDialog"
|
||||
v-permission="'exchange:ship'"
|
||||
>
|
||||
发货
|
||||
</ElButton>
|
||||
|
||||
<ElButton
|
||||
v-if="exchangeDetail.status === 3"
|
||||
type="success"
|
||||
@click="handleComplete"
|
||||
v-permission="'exchange:complete'"
|
||||
>
|
||||
确认完成
|
||||
</ElButton>
|
||||
</div>
|
||||
</ElCard>
|
||||
|
||||
<!-- 发货对话框 -->
|
||||
<ElDialog v-model="shipDialogVisible" title="换货发货" width="600px">
|
||||
<ElForm ref="shipFormRef" :model="shipForm" :rules="shipRules" label-width="120px">
|
||||
<ElFormItem label="新资产标识符" prop="new_identifier">
|
||||
<ElInput v-model="shipForm.new_identifier" placeholder="请输入新资产标识符(ICCID/虚拟号/IMEI/SN)" />
|
||||
</ElFormItem>
|
||||
<ElFormItem label="快递公司" prop="express_company">
|
||||
<ElInput v-model="shipForm.express_company" placeholder="请输入快递公司" />
|
||||
</ElFormItem>
|
||||
<ElFormItem label="快递单号" prop="express_no">
|
||||
<ElInput v-model="shipForm.express_no" placeholder="请输入快递单号" />
|
||||
</ElFormItem>
|
||||
<ElFormItem label="是否迁移数据">
|
||||
<ElSwitch v-model="shipForm.migrate_data" />
|
||||
</ElFormItem>
|
||||
</ElForm>
|
||||
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<ElButton @click="shipDialogVisible = false">取消</ElButton>
|
||||
<ElButton type="primary" @click="handleConfirmShip" :loading="shipLoading">
|
||||
确认发货
|
||||
</ElButton>
|
||||
</div>
|
||||
</template>
|
||||
</ElDialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { ExchangeService } from '@/api/modules'
|
||||
import type { ExchangeResponse } from '@/api/modules/exchange'
|
||||
import { ElMessage, ElMessageBox, ElTag, ElSwitch } from 'element-plus'
|
||||
import type { FormInstance, FormRules } from 'element-plus'
|
||||
import { formatDateTime } from '@/utils/business/format'
|
||||
import { useAuth } from '@/composables/useAuth'
|
||||
|
||||
defineOptions({ name: 'ExchangeDetail' })
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const { hasAuth } = useAuth()
|
||||
|
||||
const loading = ref(false)
|
||||
const shipDialogVisible = ref(false)
|
||||
const shipLoading = ref(false)
|
||||
const shipFormRef = ref<FormInstance>()
|
||||
|
||||
const exchangeDetail = ref<ExchangeResponse | null>(null)
|
||||
const exchangeId = ref<number>(0)
|
||||
|
||||
const shipForm = reactive({
|
||||
new_identifier: '',
|
||||
express_company: '',
|
||||
express_no: '',
|
||||
migrate_data: true
|
||||
})
|
||||
|
||||
const shipRules = reactive<FormRules>({
|
||||
new_identifier: [{ required: true, message: '请输入新资产标识符', trigger: 'blur' }],
|
||||
express_company: [{ required: true, message: '请输入快递公司', trigger: 'blur' }],
|
||||
express_no: [{ required: true, message: '请输入快递单号', trigger: 'blur' }]
|
||||
})
|
||||
|
||||
const getStatusType = (status: number) => {
|
||||
const types: Record<number, string> = {
|
||||
1: 'warning',
|
||||
2: 'info',
|
||||
3: 'primary',
|
||||
4: 'success',
|
||||
5: 'danger'
|
||||
}
|
||||
return types[status] || 'info'
|
||||
}
|
||||
|
||||
// 加载换货单详情
|
||||
const loadExchangeDetail = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await ExchangeService.getExchangeDetail(exchangeId.value)
|
||||
if (res.code === 0 && res.data) {
|
||||
exchangeDetail.value = res.data
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载换货单详情失败:', error)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 取消换货
|
||||
const handleCancel = () => {
|
||||
ElMessageBox.prompt('请输入取消备注', '取消换货', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
inputType: 'textarea'
|
||||
})
|
||||
.then(async ({ value }) => {
|
||||
try {
|
||||
const res = await ExchangeService.cancelExchange(exchangeId.value, { remark: value })
|
||||
if (res.code === 0) {
|
||||
ElMessage.success('取消成功')
|
||||
loadExchangeDetail()
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('取消换货失败:', error)
|
||||
}
|
||||
})
|
||||
.catch(() => {})
|
||||
}
|
||||
|
||||
// 旧资产转新
|
||||
const handleRenew = () => {
|
||||
ElMessageBox.confirm('确定要将旧资产转为新资产吗？', '确认操作', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
.then(async () => {
|
||||
try {
|
||||
const res = await ExchangeService.renewExchange(exchangeId.value)
|
||||
if (res.code === 0) {
|
||||
ElMessage.success('操作成功')
|
||||
loadExchangeDetail()
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('旧资产转新失败:', error)
|
||||
}
|
||||
})
|
||||
.catch(() => {})
|
||||
}
|
||||
|
||||
// 显示发货对话框
|
||||
const showShipDialog = () => {
|
||||
shipDialogVisible.value = true
|
||||
}
|
||||
|
||||
// 确认发货
|
||||
const handleConfirmShip = () => {
|
||||
shipFormRef.value?.validate(async (valid) => {
|
||||
if (!valid) return
|
||||
|
||||
shipLoading.value = true
|
||||
try {
|
||||
const res = await ExchangeService.shipExchange(exchangeId.value, shipForm)
|
||||
if (res.code === 0) {
|
||||
ElMessage.success('发货成功')
|
||||
shipDialogVisible.value = false
|
||||
loadExchangeDetail()
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('发货失败:', error)
|
||||
} finally {
|
||||
shipLoading.value = false
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 确认完成
|
||||
const handleComplete = () => {
|
||||
ElMessageBox.confirm('确定要确认换货完成吗？', '确认操作', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
.then(async () => {
|
||||
try {
|
||||
const res = await ExchangeService.completeExchange(exchangeId.value)
|
||||
if (res.code === 0) {
|
||||
ElMessage.success('操作成功')
|
||||
loadExchangeDetail()
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('确认完成失败:', error)
|
||||
}
|
||||
})
|
||||
.catch(() => {})
|
||||
}
|
||||
|
||||
// 返回
|
||||
const handleBack = () => {
|
||||
router.back()
|
||||
}
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
exchangeId.value = Number(route.params.id)
|
||||
if (exchangeId.value) {
|
||||
loadExchangeDetail()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.exchange-detail-page {
|
||||
padding: 20px;
|
||||
|
||||
.page-header-title {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user