```
feat(components, types, views): 添加付款方式和现金折扣率相关功能 在`components.d.ts`中添加了VanRadio和VanRadioGroup组件的类型定义。 在`src/types/index.ts`中新增了PayMethod类型,用于表示不同的付款方式。 在`src/views/Detail/index.vue`中增加了付款方式、付款比例、付款说明以及现金折扣率选择的相关UI和逻辑处理。具体包括: - 在订单详情中显示付款方式、付款比例和付款说明。 - 当任务名称包含“商务”且审批状态不为待审批时,显示现金折扣率选择区域。 - 新增getPayMethod函数,用于根据付款方式返回相应的描述。 - 在提交审批前检查是否选择了现金折扣率,并在需要时将其作为参数传递给后端。 - 更新样式文件以支持新的现金折扣率选择区域的样式。 ```master
parent
92dd433eee
commit
a29d0f589b
|
|
@ -20,6 +20,8 @@ declare module 'vue' {
|
|||
VanNavBar: typeof import('vant/es')['NavBar']
|
||||
VanPopup: typeof import('vant/es')['Popup']
|
||||
VanPullRefresh: typeof import('vant/es')['PullRefresh']
|
||||
VanRadio: typeof import('vant/es')['Radio']
|
||||
VanRadioGroup: typeof import('vant/es')['RadioGroup']
|
||||
VanSearch: typeof import('vant/es')['Search']
|
||||
VanStep: typeof import('vant/es')['Step']
|
||||
VanSteps: typeof import('vant/es')['Steps']
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ export interface LoginParams {
|
|||
|
||||
// 订单状态类型
|
||||
export type OrderStatus = '0' | '1' | '2' // 待审批、已审批、已拒绝
|
||||
export type PayMethod = '1-1' | '1-2' | '2-1' | '2-2' | '2-3' // 待审批、已审批、已拒绝
|
||||
|
||||
// 审批状态类型
|
||||
export type ApprovalStatus = 1 | 2 | 3 // 待审批、驳回、通过
|
||||
|
|
|
|||
|
|
@ -138,6 +138,18 @@
|
|||
</div><div class="info-item">
|
||||
<span class="label">其他特别说明</span>
|
||||
<span class="value">{{ currentOrderInfo.remark}}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">付款方式</span>
|
||||
<span class="value">{{ getPayMethod(currentOrderInfo.paymentMethod) }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">付款比例</span>
|
||||
<span class="value">{{ currentOrderInfo.paymentRatio }}%</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">付款说明</span>
|
||||
<span class="value">{{ currentOrderInfo.paymentDescription }}</span>
|
||||
</div>
|
||||
|
||||
|
||||
|
|
@ -396,7 +408,20 @@
|
|||
</van-tag>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 现金折扣率选择 (仅当taskName包含'商务'且为通过审批时显示) -->
|
||||
<div v-if="currentOrder?.todo?.taskName?.includes('商务') && currentApprovalStatus !== 0"
|
||||
class="discount-selection">
|
||||
<div class="discount-title">现金折扣率 *</div>
|
||||
<div class="discount-options">
|
||||
<van-radio-group v-model="selectedDiscount" direction="horizontal">
|
||||
<van-radio name="100%">100%</van-radio>
|
||||
<van-radio name="98.8%">98.8%</van-radio>
|
||||
<van-radio name="98.5%">98.5%</van-radio>
|
||||
</van-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 意见输入框 -->
|
||||
<div class="opinion-input">
|
||||
<van-field
|
||||
|
|
@ -440,7 +465,7 @@ import {
|
|||
getApprovalStatusColor,
|
||||
getFilePreviewUrl
|
||||
} from '@/utils'
|
||||
import type {OrderStatus, ApprovalStatus, AttachmentFile} from '@/types'
|
||||
import type {OrderStatus, ApprovalStatus, AttachmentFile, payMethod, PayMethod} from '@/types'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
|
@ -453,6 +478,7 @@ const approvalOpinion = ref('')
|
|||
const currentApprovalStatus = ref<ApprovalStatus>(3)
|
||||
const submitting = ref(false)
|
||||
const selectedTag = ref('')
|
||||
const selectedDiscount = ref('') // 现金折扣率选择
|
||||
|
||||
// Tab页签
|
||||
const activeTab = ref('order')
|
||||
|
|
@ -481,6 +507,16 @@ const getStatusClass = (status: OrderStatus) => {
|
|||
}
|
||||
return classMap[status] || 'pending'
|
||||
}
|
||||
const getPayMethod= (method: PayMethod) => {
|
||||
const methodMap = {
|
||||
'1-1': '全款支付,无需预付款',
|
||||
'1-2': '全款支付,需单独备货生产,预付订单总货款百分比',
|
||||
'2-1': '全款支付',
|
||||
'2-2': '全款支付,需单独备货生产,预付订单总货款百分比',
|
||||
'2-3': '商业汇票支付,预付订单总货款百分比'
|
||||
}
|
||||
return methodMap[method] || ''
|
||||
}
|
||||
|
||||
// 获取步骤图标
|
||||
const getStepIcon = (status?: ApprovalStatus) => {
|
||||
|
|
@ -564,6 +600,18 @@ const showApprovalDialog = (status: ApprovalStatus) => {
|
|||
currentApprovalStatus.value = status
|
||||
approvalOpinion.value = ''
|
||||
selectedTag.value = ''
|
||||
|
||||
// 重置现金折扣率选择
|
||||
selectedDiscount.value = ''
|
||||
|
||||
// 如果订单详情中包含默认的现金折扣率值,则设置为默认值
|
||||
if (currentOrder.value && currentOrder.value.projectOrderInfo) {
|
||||
const discountValue = getDiscountRate()
|
||||
if (discountValue) {
|
||||
selectedDiscount.value = discountValue.toString()
|
||||
}
|
||||
}
|
||||
|
||||
approvalDialogVisible.value = true
|
||||
}
|
||||
|
||||
|
|
@ -618,20 +666,41 @@ const submitApproval = async () => {
|
|||
return
|
||||
}
|
||||
|
||||
// 检查是否需要显示现金折扣率选择
|
||||
const showCashDiscount = currentOrder.value.todo.taskName &&
|
||||
currentOrder.value.todo.taskName.includes('商务')
|
||||
|
||||
if (showCashDiscount && currentApprovalStatus.value !== 0 && !selectedDiscount.value) {
|
||||
showToast('请选择现金折扣率')
|
||||
// 滚动到折扣率选择区域,使其可见
|
||||
setTimeout(() => {
|
||||
const discountElement = document.querySelector('.discount-selection')
|
||||
if (discountElement) {
|
||||
discountElement.scrollIntoView({behavior: 'smooth', block: 'center'})
|
||||
}
|
||||
}, 100)
|
||||
return
|
||||
}
|
||||
|
||||
submitting.value = true
|
||||
|
||||
try {
|
||||
|
||||
const params = {
|
||||
...currentOrder.value.todo, // 展开todo中的所有参数
|
||||
|
||||
approveOpinion: opinion || undefined , // 添加审批意见
|
||||
variables:{
|
||||
approveBtn:currentApprovalStatus.value,
|
||||
comment:opinion
|
||||
approveOpinion: opinion || undefined, // 添加审批意见
|
||||
variables: {
|
||||
approveBtn: currentApprovalStatus.value,
|
||||
comment: opinion
|
||||
}
|
||||
}
|
||||
|
||||
// 如果需要添加现金折扣率参数
|
||||
if (showCashDiscount && currentApprovalStatus.value !== 0 && selectedDiscount.value) {
|
||||
// 将现金折扣率参数与approveBtn放在同一级
|
||||
params.allPriceCountValue = selectedDiscount.value
|
||||
}
|
||||
|
||||
console.log('提交审批参数:', params)
|
||||
|
||||
await submitApprovalApi(params)
|
||||
|
|
@ -664,6 +733,18 @@ onMounted(async () => {
|
|||
console.log('获取订单详情结果:', result)
|
||||
console.log('当前订单信息:', currentOrder.value)
|
||||
console.log('当前订单基本信息:', currentOrderInfo.value)
|
||||
|
||||
// 检查订单详情中是否包含现金折扣率值
|
||||
if (currentOrder.value && currentOrder.value.projectOrderInfo) {
|
||||
// 假设现金折扣率存储在projectOrderInfo的某个字段中
|
||||
// 您可能需要根据实际的数据结构调整这个字段名
|
||||
const discountValue = currentOrder.value.projectOrderInfo.allPriceCountValue ||
|
||||
currentOrder.value.projectOrderInfo.discountRate ||
|
||||
currentOrder.value.projectOrderInfo.cashDiscountRate
|
||||
if (discountValue) {
|
||||
selectedDiscount.value = discountValue.toString()
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取订单详情失败:', error)
|
||||
showToast('获取订单详情失败')
|
||||
|
|
@ -1102,4 +1183,49 @@ onMounted(async () => {
|
|||
color: var(--primary-color);
|
||||
}
|
||||
}
|
||||
|
||||
/* 现金折扣率样式 */
|
||||
.discount-selection {
|
||||
margin: 20px 0;
|
||||
padding: 15px;
|
||||
background-color: #fffbe6;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #ffd700;
|
||||
box-shadow: 0 2px 8px rgba(255, 215, 0, 0.2);
|
||||
}
|
||||
|
||||
.discount-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&::before {
|
||||
content: '*';
|
||||
color: #ff4d4f;
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.discount-options {
|
||||
:deep(.van-radio-group) {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.van-radio {
|
||||
margin-right: 10px;
|
||||
flex: 1;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.van-radio__label {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue