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">
      <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="value" placeholder="请选择" style="width: 150px">
          <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 2" :key="index">
          <div class="pr-3 text-nowrap">验证客户</div>
          <div class="text-nowrap">30%</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 in stageStatus" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </div>
      <div class="bg-[#0052CC] rounded-md text itemPing pl-2 pr-2 flex items-center">
        <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 { stageStatus } 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';

const value = ref('')
const stageStatusVal = ref('')
const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
]


function handleScroll(event: any) { // 滚表横向滚动
  if (event.deltaY) {
    event.preventDefault();
    const element = event.currentTarget;
    element.scrollLeft += event.deltaY;
  }
}
</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;
  }

  .selectClas >>> .el-select__wrapper {
    background-color: none !important;
    box-shadow: none !important;
  }
}
</style>