|
|
@@ -1,11 +1,11 @@
|
|
|
<!-- 我的订单- 我的履约 - 详情 -->
|
|
|
<template>
|
|
|
<app-modal direction="right" height="100%" v-model:show="showModal" :refresh="refresh">
|
|
|
- <app-view class="g-form" v-model="loading">
|
|
|
+ <app-view class="g-form">
|
|
|
<template #header>
|
|
|
<app-navbar title="履约详情" @back="closed" />
|
|
|
</template>
|
|
|
- <div v-if="props" class="order-detail__container g-form__container">
|
|
|
+ <div class="order-detail__container g-form__container">
|
|
|
<CellGroup title="履约信息">
|
|
|
<Cell title="类型" :value="selectedRow.typename" />
|
|
|
<Cell title="商品" :value="selectedRow.wrstandardname" />
|
|
|
@@ -23,16 +23,21 @@
|
|
|
<Cell title="履约单号" :value="selectedRow.performanceplanid" />
|
|
|
</CellGroup>
|
|
|
<CellGroup title="执行信息">
|
|
|
- <Steps v-for="(item, index) in datalist" :key="index" direction="vertical">
|
|
|
- <Step>
|
|
|
- <p>{{ item.stepindex }}</p>
|
|
|
- <p>{{ getPerformanceStepStatusName(item.stepstatus) }}</p>
|
|
|
- <h4>{{ item.steptypename }}</h4>
|
|
|
- <p>{{ item.stepstatus === 2 ? `剩余${item.remaindays}天` : ((item.stepstatus === 3 || item.stepstatus === 6) ? `${item.stepdays}` : '') }}</p>
|
|
|
- <p v-if="item.stepstatus != 2">{{ formatDate(item.starttime, 'YYYY-MM-DD') }}-{{ formatDate(item.endtime, 'YYYY-MM-DD') }}</p>
|
|
|
- <p v-if="item.stepstatus === 1">{{ item.stepdays }}天</p>
|
|
|
- </Step>
|
|
|
- </Steps>
|
|
|
+ <div class="planstep-info" v-for="(item, index) in dataList" :key="index">
|
|
|
+ <div class="planstep-info__up" :style="styles(item.stepstatus)">
|
|
|
+ <p class="stepindex">{{ item.stepindex }}</p>
|
|
|
+ <p class="steptypename">{{ item.steptypename }}</p>
|
|
|
+ <p class="stepstatus">{{ getPerformanceStepStatusName(item.stepstatus) }}</p>
|
|
|
+ </div>
|
|
|
+ <div class="planstep-info__mid">
|
|
|
+ <p class="starttime" v-if="item.stepstatus != 2">{{ handleNoneValue(item.starttime) }}</p>
|
|
|
+ <p class="remaindays">{{ remaindays(item) }}</p>
|
|
|
+ <p class="endtime" v-if="item.stepstatus != 2">{{ handleNoneValue(item.endtime) }}</p>
|
|
|
+ </div>
|
|
|
+ <div class="planstep-info__dwn" v-if="item.stepstatus === 1">
|
|
|
+ <p class="remaindays">{{ item.stepdays }}天</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</CellGroup>
|
|
|
</div>
|
|
|
<Form ref="formRef" class="g-form__container" @submit="toConfirm">
|
|
|
@@ -51,9 +56,9 @@
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
import { shallowRef, PropType } from 'vue'
|
|
|
-import { CellGroup, Cell, Button, Dialog, Field, FieldRule, Form, FormInstance, Step, Steps } from 'vant'
|
|
|
+import { CellGroup, Cell, Button, Dialog, Field, FieldRule, Form, FormInstance } from 'vant'
|
|
|
import { fullloading } from '@/utils/vant'
|
|
|
-import { formatDate, formatDecimal } from '@/filters'
|
|
|
+import { formatDate, formatDecimal, handleNoneValue } from '@/filters'
|
|
|
import { usePerformanceDelayApply, usePerformanceManualConfirm } from '@/business/performance'
|
|
|
import { queryWrPerformancePlanStep } from '@/services/api/performance'
|
|
|
import { getPerformanceStepStatusName } from '@/constants/order'
|
|
|
@@ -61,7 +66,6 @@ import { getPerformanceStepStatusName } from '@/constants/order'
|
|
|
import AppModal from '@/components/base/modal/index.vue'
|
|
|
import { useRequest } from '@/hooks/request'
|
|
|
|
|
|
-
|
|
|
const showModal = shallowRef(true)
|
|
|
// 是否刷新父组件数据
|
|
|
const refresh = shallowRef(false)
|
|
|
@@ -76,13 +80,39 @@ const props = defineProps({
|
|
|
})
|
|
|
|
|
|
const { confirmFormData, confirmSubmit } = usePerformanceManualConfirm(props.selectedRow.buyaccountid)
|
|
|
-const datalist = shallowRef<Model.WrPerformancePlanStep[]>([])
|
|
|
-const error = shallowRef(false)
|
|
|
const show = shallowRef(false)
|
|
|
const showDays = shallowRef(false)
|
|
|
const remark = shallowRef('')
|
|
|
const dialogTitle = shallowRef('是否要手动执行步骤？')
|
|
|
|
|
|
+const styles= (status: number) => {
|
|
|
+ let backgroundColor = '#2794ff'
|
|
|
+ if (status === 2) {
|
|
|
+ backgroundColor = '#2794ff'
|
|
|
+ } else if ([3, 6].includes(status)) {
|
|
|
+ backgroundColor = '#89c5ff'
|
|
|
+ } else {
|
|
|
+ backgroundColor = '#dde3e8'
|
|
|
+ }
|
|
|
+
|
|
|
+ return {
|
|
|
+ backgroundColor
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const remaindays = (item: Model.WrPerformancePlanStep) => {
|
|
|
+ let days = ''
|
|
|
+ if ([2].includes(item.stepstatus)) {
|
|
|
+ days = `剩余${item.remaindays}天`
|
|
|
+ }
|
|
|
+ else if ([3, 6].includes(item.stepstatus)) {
|
|
|
+ days = `${item.stepdays}`
|
|
|
+ } else {
|
|
|
+ days = ''
|
|
|
+ }
|
|
|
+ return days
|
|
|
+}
|
|
|
+
|
|
|
// 表单验证规则
|
|
|
const formRules: { [key in keyof Proto.PerformanceDelayApplyReq | 'remark' ]?: FieldRule[] } = {
|
|
|
delaydays: [{
|
|
|
@@ -95,16 +125,10 @@ const formRules: { [key in keyof Proto.PerformanceDelayApplyReq | 'remark' ]?: F
|
|
|
}],
|
|
|
}
|
|
|
|
|
|
-const { loading } = useRequest(queryWrPerformancePlanStep, {
|
|
|
+const { dataList } = useRequest(queryWrPerformancePlanStep, {
|
|
|
params: {
|
|
|
planid: props.selectedRow.performanceplanid
|
|
|
},
|
|
|
- onSuccess: (res) => {
|
|
|
- datalist.value.push(...res.data)
|
|
|
- },
|
|
|
- onError: () => {
|
|
|
- error.value = true
|
|
|
- }
|
|
|
})
|
|
|
|
|
|
const showConfirm = (showDelay: boolean) => {
|
|
|
@@ -154,5 +178,8 @@ const closed = (isRefresh = false) => {
|
|
|
defineExpose({
|
|
|
closed,
|
|
|
})
|
|
|
+</script>
|
|
|
|
|
|
-</script>
|
|
|
+<style lang="less">
|
|
|
+@import './index.less';
|
|
|
+</style>
|
