manHourHousekeeper/fhKeeper/formulahousekeeper/customerBuler-crm/src/pages/business/detail/index.vue

<template>
  <div class="h-full flex p-3 flex-col businessDetail">
    <div class="w-full bg-white p-2 mb-2 shadow-md rounded-md flex items-center" v-loading="allLoading.skeletonLoading">
      <div class="icon mr-4">
        <el-link :underline="false" @click="backPath()">
          <el-icon class="el-icon--right"><icon-view /></el-icon> 返回商机列表
        </el-link>
      </div>
      <div class="mr-8">
        <el-select v-model="optionVal" placeholder="请选择" style="width: 150px" filterable @change="getDetail()">
          <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`"
          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">
        <el-select v-model="stageStatusVal" placeholder="结束" style="width: 100px" class="selectClas">
          <el-option v-for="(item, index) in stageListOption" :key="index" :label="item.label" :value="item.value" />
        </el-select>
      </div>
      <div class="bg-[#0052CC] rounded-md text itemPing pl-2 pr-2 flex items-center aloneText">
        <el-link :underline="false">推进至阶段【验证客户】</el-link>
      </div>
    </div>
    <!-- 内容 -->
    <div class="flex-1 flex flex-col overflow-y-auto overflow-x-hidden scroll-bar">
      <div class="w-full h-auto flex justify-between">
        <div class="bg-white shadow-md rounded-md" style="width: 46%;">
          <Information />
        </div>
        <div class="bg-white ml-2 shadow-md rounded-md flex-1">
          <Attachment />
        </div>
      </div>

      <div class="w-full h-auto flex justify-between mt-2">
        <div class="bg-white shadow-md rounded-md" style="width: 65%;">
          <RelatedTasks />
        </div>
        <div class="bg-white ml-2 shadow-md rounded-md flex-1">
          <OperationRecord />
        </div>
      </div>

      <div class="w-full h-auto flex justify-between mt-2">
        <div class="bg-white shadow-md rounded-md w-full">
          <Products />
        </div>
      </div>
    </div>
  </div>
</template>
  
<script lang="ts" setup>
import { ref, reactive, onMounted, inject } from "vue";
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 Information from '../component/information.vue'
import Attachment from '../component/attachment.vue'
import RelatedTasks from '../component/relatedTasks.vue';
import OperationRecord from '../component/operationRecord.vue';
import Products from '../component/products.vue';
import { post } from "@/utils/request";
import { number } from "echarts";

type stageListType = {
  name: string,
  plan: string
}

const route = useRoute()
const optionVal = ref<any>('')
const stageStatusVal = ref('')
const options = ref<optionType[]>([])
const allLoading = reactive({
  skeletonLoading: false
})

const businessInfo = ref({})
const stageListOption = ref<optionType[]>([])
const stageList = ref<stageListType[]>([])


function getDetail() {
  allLoading.skeletonLoading
  post(BUSIESS_INFO, { id: optionVal.value }).then(({ data }) => {
    console.log(data, '<====== 数据')
    businessInfo.value = (data || []);
  }).finally(() => {
    allLoading.skeletonLoading
  })
}

function handleScroll(event: any) { // 滚表横向滚动
  if (event.deltaY) {
    event.preventDefault();
    const element = event.currentTarget;
    element.scrollLeft += event.deltaY;
  }
}

function getOptionAll() {
  post(BUSIESS_ALL, {}).then((res) => {
    const { data } = res
    options.value = (data || []).map((item: any) => ({
      value: item.id + '',
      label: item.name
    }))
  })
}

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 }))
    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 }))
  })
}

onMounted(() => {
  const { id } = route.query
  optionVal.value = id
  getSatge()
  getOptionAll()
  getDetail()
})
</script>
  
<style lang="scss" scoped>
.businessDetail {
  .icon {
    .el-link {
      color: #0052CC;
    }
  }

  .text {
    .el-link {
      color: #fff;
      font-size: 14px;
    }
  }

  .backDarkBlue {
    background-color: #0052CC;
    color: #fff;
  }

  .backGray {
    background-color: #F4F5F7;
    color: #000;
  }

  .startStep {
    clip-path: polygon(0% 0%,
        90% 0%,
        100% 50%,
        90% 100%,
        0% 100%);
  }

  .nextStep {
    clip-path: polygon(0% 0%,
        90% 0%,
        100% 50%,
        90% 100%,
        0% 100%,
        10% 50%);
  }

  .endStep {

    clip-path: polygon(0% 0%,
        100% 0%,
        100% 100%,
        0% 100%,
        10% 50%);
  }

  .itemPing {
    padding-top: 4px;
    padding-bottom: 4px;
  }

  .aloneText {
    padding-top: 9px;
    padding-bottom: 9px;
  }
}
</style>
<style lang="scss">
.businessDetail {
  .el-select__wrapper {
    background-color: #F4F5F7;
    box-shadow: none !important;
  }
}
</style>