|
@@ -2,15 +2,20 @@
|
|
|
<div class="w-full h-full flex flex-col">
|
|
|
<div class="flex-1 overflow-y-auto my-3 px-6">
|
|
|
<van-steps direction="vertical" :active="stageIndex">
|
|
|
- <template v-for="item in stageList">
|
|
|
+ <template v-for="(item, index) in stageList">
|
|
|
<van-step>
|
|
|
- <div>{{ item.name }} {{ item.plan }}</div>
|
|
|
+ <div class="flex flex-row items-center bg-white rounded">
|
|
|
+ <div :class="`verticalArrangement px-2 py-3 ${showStageClass(index)}`">
|
|
|
+ {{ showStageText(index) }}
|
|
|
+ </div>
|
|
|
+ <div class="flex-1 pl-3">{{ item.name }} {{ item.plan }}</div>
|
|
|
+ </div>
|
|
|
</van-step>
|
|
|
</template>
|
|
|
</van-steps>
|
|
|
</div>
|
|
|
|
|
|
- <div class="px-6 flex flex-col pb-4 mt-2" v-if="stageIndex <= stageList.length">
|
|
|
+ <div class="px-6 flex flex-col pb-4 mt-2" v-if="stageIndex <= stageList.length && displayButtonOrNot">
|
|
|
<van-button type="primary" class="btn-3" v-if="stageIndex < stageList.length - 1"
|
|
|
@click="promotionStage()">推荐下阶段({{
|
|
|
stageList[+stageIndex + 1]?.name
|
|
@@ -28,7 +33,7 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import { ref, watch } from 'vue';
|
|
|
+import { ref, watch, computed } from 'vue';
|
|
|
import { useLifecycle } from '@hooks/useCommon.js';
|
|
|
import { ACQUISITION_STAGE, GET_BUSINESS_OPPORTUNITY_DETAILS, PROMOTION_STAGE, STAGE_NOTES } from '@hooks/useApi'
|
|
|
import requests from "@common/requests";
|
|
@@ -53,11 +58,48 @@ const stageIndex = ref(0)
|
|
|
const stageSetting = ref([])
|
|
|
const transitionalData = ref({})
|
|
|
const showDisold = ref(false)
|
|
|
+const displayButtonOrNot = ref(true)
|
|
|
|
|
|
watch(() => props.info, (val) => {
|
|
|
getBusinessOpportunityDetails(val.id)
|
|
|
})
|
|
|
|
|
|
+function showStageText(index) {
|
|
|
+ const row = stageList.value[index]
|
|
|
+ const idx = stageIndex.value
|
|
|
+ const flag = displayButtonOrNot.value
|
|
|
+ const idList = stageSetting.value.map(item => item.id)
|
|
|
+
|
|
|
+ if(!flag && index == idx) {
|
|
|
+ return row.name
|
|
|
+ }
|
|
|
+
|
|
|
+ return idx > index ? '已完成' : idx == index ? '进行中' : '未开始'
|
|
|
+}
|
|
|
+
|
|
|
+function showStageClass (index) {
|
|
|
+ const idx = stageIndex.value
|
|
|
+ const flag = displayButtonOrNot.value
|
|
|
+ const row = stageList.value[index]
|
|
|
+ const idList = stageSetting.value.map(item => item.id)
|
|
|
+ if(idx > index) {
|
|
|
+ return 'ended'
|
|
|
+ }
|
|
|
+ if(idx == index && flag) {
|
|
|
+ return 'haveInHand'
|
|
|
+ }
|
|
|
+
|
|
|
+ if(flag && idx < index) {
|
|
|
+ return 'notStartedYet'
|
|
|
+ }
|
|
|
+
|
|
|
+ if(!flag && idList.includes(row.id)) {
|
|
|
+ return row.name == '赢单' ? 'winningOrders' : row.name == '输单' ? 'singleLoss' : 'invalid'
|
|
|
+ }
|
|
|
+
|
|
|
+ return ''
|
|
|
+}
|
|
|
+
|
|
|
function completionStage(type) {
|
|
|
const typeObj = { 1: '赢单', 2: '输单', 3: '无效' }
|
|
|
const row = stageSetting.value.find(item => item.name === typeObj[type])
|
|
@@ -126,9 +168,11 @@ function acquisitionStage(row) {
|
|
|
stageList.value = (res.data || []).filter(item => !(['赢单', '输单', '无效'].includes(item.name)))
|
|
|
stageSetting.value = (res.data || []).filter(item => (['赢单', '输单', '无效'].includes(item.name)))
|
|
|
const val = (stageSetting.value || []).filter(item => item.id === row.stageId)
|
|
|
+ displayButtonOrNot.value = true
|
|
|
if(val.length > 0) {
|
|
|
stageList.value.push(val[0])
|
|
|
stageIndex.value = stageList.value.length - 1
|
|
|
+ displayButtonOrNot.value = false
|
|
|
}
|
|
|
})
|
|
|
}
|
|
@@ -152,6 +196,38 @@ useLifecycle({
|
|
|
</script>
|
|
|
|
|
|
<style lang='scss' scoped>
|
|
|
+.verticalArrangement {
|
|
|
+ writing-mode: vertical-rl;
|
|
|
+ border-radius: 6px;
|
|
|
+ background: #D9D9D9;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 1.2;
|
|
|
+}
|
|
|
+
|
|
|
+.ended {
|
|
|
+ background: #D9D9D9;
|
|
|
+ color: #858585;
|
|
|
+}
|
|
|
+.haveInHand {
|
|
|
+ background: #075985;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+.notStartedYet {
|
|
|
+ background: #E6E6E6;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+.winningOrders {
|
|
|
+ background: #07C160;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+.singleLoss {
|
|
|
+ background: #FF976A;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+.invalid {
|
|
|
+ background: #EE0A24;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
.btn-3 {
|
|
|
margin-bottom: 10px;
|
|
|
}
|