|
@@ -7,25 +7,41 @@
|
|
|
</el-link>
|
|
|
</div>
|
|
|
<div class="mr-8">
|
|
|
- <el-select v-model="optionVal" placeholder="请选择" style="width: 150px" filterable @change="getDetail()">
|
|
|
+ <el-select v-model="optionVal" placeholder="请选择" style="width: 150px" filterable @change="selectChange()">
|
|
|
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
|
|
</el-select>
|
|
|
</div>
|
|
|
<div class="flex-1 flex h-full justify-end overflow-auto scroll-bar-hide cursor-pointer" @wheel="handleScroll">
|
|
|
- <div :class="`${index === 0 ? 'startStep' : 'nextStep'} relative rounded-md flex items-center backGray pl-6 pr-6`"
|
|
|
+ <div
|
|
|
+ :class="`${index === 0 ? 'startStep' : 'nextStep'} ${(currentStage >= index || businessInfo.stageValue == '赢单') ? 'selected' : (currentStage >= index || businessInfo.stageValue == '输单') ? 'backOrange' : 'backGray'} relative rounded-md flex items-center pl-6 pr-6`"
|
|
|
v-for="(item, index) in stageList" :key="index">
|
|
|
<div class="pr-3 text-nowrap">{{ item.name }}</div>
|
|
|
<div class="text-nowrap">{{ item.plan }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="relative rounded-md flex items-center itemPing backGray endStep item pl-6 pr-6 mr-4 resetStyle">
|
|
|
+ <div class="relative rounded-md flex items-center itemPing backGray endStep item pl-6 pr-6 mr-4 resetStyle" v-if="currentStage >= 0">
|
|
|
<el-select v-model="stageStatusVal" placeholder="结束" style="width: 100px" class="selectClas"
|
|
|
@change="advanceChange()">
|
|
|
<el-option v-for="(item, index) in stageListOption" :key="index" :label="item.label" :value="item.value" />
|
|
|
</el-select>
|
|
|
</div>
|
|
|
- <div class="bg-[#075985] rounded-md text itemPing pl-2 pr-2 flex items-center aloneText" @click="advancementStage()">
|
|
|
- <el-link :underline="false">推进至阶段【验证客户】</el-link>
|
|
|
+ <div class="relative rounded-md flex items-center justify-around backOrange endStep item pl-6 pr-6 mr-4 resetStyle" v-if="businessInfo.stageValue == '输单'" style="padding-top: 6px;padding-bottom: 6px;">
|
|
|
+ <div>{{ businessInfo.stageValue }}</div>
|
|
|
+ <div class="ml-5">0%</div>
|
|
|
+ </div>
|
|
|
+ <div class="relative rounded-md flex items-center justify-around backWan endStep item pl-6 pr-6 mr-4 resetStyle" v-if="businessInfo.stageValue == '赢单'" style="padding-top: 6px;padding-bottom: 6px;">
|
|
|
+ <div>{{ businessInfo.stageValue }}</div>
|
|
|
+ <div class="ml-4"> 100%</div>
|
|
|
+ </div>
|
|
|
+ <div class="relative rounded-md flex items-center justify-around backGray endStep item pl-6 pr-6 mr-4 resetStyle" v-if="businessInfo.stageValue == '无效'" style="padding-top: 6px;padding-bottom: 6px;">
|
|
|
+ <div>{{ businessInfo.stageValue }}</div>
|
|
|
+ <div class="ml-5">0%</div>
|
|
|
+ </div>
|
|
|
+ <div class="bg-[#075985] rounded-md text itemPing pl-2 pr-2 flex items-center aloneText" @click="advancementStage()"
|
|
|
+ v-if="currentStage != -1">
|
|
|
+ <el-link :underline="false" v-if="(currentStage + 1) != stageList.length">推进至下个阶段【{{ stageList[currentStage +
|
|
|
+ 1]?.name }}】</el-link>
|
|
|
+ <el-link :underline="false" v-else>赢单</el-link>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 内容 -->
|
|
@@ -82,7 +98,7 @@ import type { FormInstance, FormRules } from 'element-plus'
|
|
|
import { Edit, ArrowLeft as IconView } from '@element-plus/icons-vue'
|
|
|
import { backPath } from '@/utils/tools'
|
|
|
import { useRoute } from "vue-router";
|
|
|
-import { BUSIESS_ALL, BUSIESS_GETSATE, BUSIESS_INFO } from '../api'
|
|
|
+import { BUSIESS_ALL, BUSIESS_GETSATE, BUSIESS_INFO, URL_SAVEREASON, URL_STAGEIDNEXT } from '../api'
|
|
|
|
|
|
import Information from '../component/information.vue'
|
|
|
import Attachment from '../component/attachment.vue'
|
|
@@ -94,7 +110,8 @@ import { post } from "@/utils/request";
|
|
|
|
|
|
type stageListType = {
|
|
|
name: string,
|
|
|
- plan: string
|
|
|
+ plan: string,
|
|
|
+ id?: number,
|
|
|
}
|
|
|
|
|
|
const route = useRoute()
|
|
@@ -105,6 +122,7 @@ const stageStatusVal = ref('')
|
|
|
const stageStatusValOriginally = ref('')
|
|
|
const advanceVal = ref('')
|
|
|
const options = ref<optionType[]>([])
|
|
|
+const currentStage = ref<any>('') // 当前阶段的下标
|
|
|
const allLoading = reactive({
|
|
|
skeletonLoading: false,
|
|
|
advanceSaveLoading: false
|
|
@@ -116,7 +134,7 @@ const allText = reactive({
|
|
|
advanceText: ''
|
|
|
})
|
|
|
|
|
|
-const businessInfo = ref({})
|
|
|
+const businessInfo = ref<any>({})
|
|
|
const stageListOption = ref<optionType[]>([])
|
|
|
const stageList = ref<stageListType[]>([])
|
|
|
|
|
@@ -139,8 +157,20 @@ function advanceChange() {
|
|
|
allVisible.advanceVisible = true
|
|
|
return
|
|
|
}
|
|
|
-
|
|
|
- advanceSave(false)
|
|
|
+ console.log(item, '<=====')
|
|
|
+ allLoading.skeletonLoading = true
|
|
|
+ post(URL_STAGEIDNEXT, {
|
|
|
+ id: businessInfo.value.id,
|
|
|
+ stageId: item.value,
|
|
|
+ stageValue: item.label,
|
|
|
+ }).then((_res) => {
|
|
|
+ globalPopup?.showSuccess('操作成功')
|
|
|
+ selectChange()
|
|
|
+ }).finally(() => {
|
|
|
+ setTimeout(() => {
|
|
|
+ allLoading.skeletonLoading = false
|
|
|
+ }, 500)
|
|
|
+ })
|
|
|
}
|
|
|
|
|
|
function advanceClose() {
|
|
@@ -149,16 +179,57 @@ function advanceClose() {
|
|
|
}
|
|
|
|
|
|
function advanceSave(flag: boolean) {
|
|
|
- if(!advanceVal && flag) {
|
|
|
+ if (!advanceVal.value && flag) {
|
|
|
globalPopup?.showError(`请输入${allText.advanceText}原因`)
|
|
|
return
|
|
|
}
|
|
|
- allLoading.advanceSaveLoading = true
|
|
|
- post('接口', {}).then(() => {
|
|
|
+ console.log(flag)
|
|
|
+ if (flag) {
|
|
|
+ allLoading.advanceSaveLoading = true
|
|
|
+ advancementStageNext(true)
|
|
|
+ return
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+function loseOrder() {
|
|
|
+ post(URL_SAVEREASON, {
|
|
|
+ id: businessInfo.value.id,
|
|
|
+ reason: advanceVal.value
|
|
|
+ }).then((_res) => {
|
|
|
globalPopup?.showSuccess('操作成功')
|
|
|
- getDetail()
|
|
|
+ selectChange()
|
|
|
}).finally(() => {
|
|
|
allLoading.advanceSaveLoading = false
|
|
|
+ allVisible.advanceVisible = false
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+function advancementStageNext(flag: boolean = false) {
|
|
|
+ let fromVal = {}
|
|
|
+ if (!flag) {
|
|
|
+ fromVal = {
|
|
|
+ id: businessInfo.value.id,
|
|
|
+ stageId: stageList.value[currentStage.value + 1].id,
|
|
|
+ stageValue: stageList.value[currentStage.value + 1].name,
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ const item: any = stageListOption.value.find((item) => item.value === stageStatusVal.value)
|
|
|
+ fromVal = {
|
|
|
+ id: businessInfo.value.id,
|
|
|
+ stageId: item.value,
|
|
|
+ stageValue: item.label,
|
|
|
+ }
|
|
|
+ }
|
|
|
+ post(URL_STAGEIDNEXT, { ...fromVal }).then((_res) => {
|
|
|
+ if (!flag) {
|
|
|
+ globalPopup?.showSuccess('操作成功')
|
|
|
+ selectChange()
|
|
|
+ } else {
|
|
|
+ loseOrder()
|
|
|
+ }
|
|
|
+ }).catch(() => {
|
|
|
+ allLoading.advanceSaveLoading = false
|
|
|
+ allVisible.advanceVisible = false
|
|
|
})
|
|
|
}
|
|
|
|
|
@@ -167,6 +238,7 @@ function getDetail() {
|
|
|
post(BUSIESS_INFO, { id: optionVal.value }).then(({ data }) => {
|
|
|
businessInfo.value = (data || []);
|
|
|
detailCompinentsData.value = data.taskList || []
|
|
|
+ setStageIndex()
|
|
|
}).finally(() => {
|
|
|
allLoading.skeletonLoading = false
|
|
|
})
|
|
@@ -192,22 +264,39 @@ function getOptionAll() {
|
|
|
|
|
|
function getSatge() {
|
|
|
post(BUSIESS_GETSATE, {}).then(({ data }) => {
|
|
|
- stageList.value = (data || []).sort((a: any, b: any) => { return a.seq - b.seq; }).filter((item: any) => !item.isFinish).map((item: any) => ({ name: item.name, plan: item.plan }))
|
|
|
+ stageList.value = (data || []).sort((a: any, b: any) => { return a.seq - b.seq; }).filter((item: any) => !item.isFinish).map((item: any) => ({ name: item.name, plan: item.plan, id: item.id }))
|
|
|
stageListOption.value = (data || []).sort((a: any, b: any) => { return a.seq - b.seq; }).filter((item: any) => item.isFinish).map((item: any) => ({ label: item.name, value: item.id, plan: item.plan }))
|
|
|
+ setStageIndex()
|
|
|
})
|
|
|
}
|
|
|
|
|
|
+function selectChange() {
|
|
|
+ getDetail()
|
|
|
+}
|
|
|
+
|
|
|
+function setStageIndex() {
|
|
|
+ currentStage.value = stageList.value.findIndex((item: any) => item.id == businessInfo.value.stageId)
|
|
|
+}
|
|
|
+
|
|
|
onMounted(() => {
|
|
|
const { id } = route.query
|
|
|
optionVal.value = id
|
|
|
- getSatge()
|
|
|
- getOptionAll()
|
|
|
getDetail()
|
|
|
+ getOptionAll()
|
|
|
+ getSatge()
|
|
|
+ setTimeout(() => {
|
|
|
+ setStageIndex()
|
|
|
+ }, 500)
|
|
|
})
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.businessDetail {
|
|
|
+ .selected {
|
|
|
+ background-color: #075985 !important;
|
|
|
+ color: #fff !important;
|
|
|
+ }
|
|
|
+
|
|
|
.icon {
|
|
|
.el-link {
|
|
|
color: #0052CC;
|
|
@@ -230,6 +319,14 @@ onMounted(() => {
|
|
|
background-color: #F4F5F7;
|
|
|
color: #000;
|
|
|
}
|
|
|
+ .backOrange {
|
|
|
+ background-color: #FF5531;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ .backWan {
|
|
|
+ background-color: #075985;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
|
|
|
.startStep {
|
|
|
clip-path: polygon(0% 0%,
|