manHourHousekeeper/fhKeeper/formulahousekeeper/customerBuler-crm/src/pages/customer/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="values" placeholder="请选择" style="width: 250px" @change="getDetail()">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>
    </div>
    <!-- 内容 -->
    <div class="flex-1 flex flex-col overflow-y-auto overflow-x-hidden scroll-bar"
      v-loading="allLoading.customerDetailLoading">
      <div class="w-full h-auto flex justify-between">
        <div class="bg-white shadow-md rounded-md" style="width: 46%;">
          <Information :data="information" @refreshData="getDetail" />
        </div>
        <div class="bg-white ml-2 shadow-md rounded-md flex-1">
          <Attachment :data="information" @refreshData="getDetail" />
        </div>
      </div>

      <div class="w-full h-auto flex justify-between mt-2">
        <div class="bg-white shadow-md rounded-md" style="width: 65%;">
          <DetailCompinents :data="detailCompinentsData" :information="information" :formTaskType="0"
            :filed="'customId'" :disabledList="['taskType', 'customId']"
            @refreshData="getDetail" />
        </div>
        <div class="bg-white ml-2 shadow-md rounded-md flex-1">
          <OperationRecord :data="information" />
        </div>
      </div>

      <div class="w-full h-auto flex justify-between mt-2">
        <div class="bg-white shadow-md rounded-md w-full">
          <RelatedContacts :data="information" @refreshData="getDetail" />
        </div>
      </div>

      <div class="w-full h-auto flex justify-between mt-2">
        <div class="bg-white shadow-md rounded-md w-full">
          <RelatedBusiness :data="information" @refreshData="getDetail" />
        </div>
      </div>

      <div class="w-full h-auto flex justify-between mt-2">
        <div class="bg-white shadow-md rounded-md w-full">
          <RelatedOrders :data="information" @refreshData="getDetail" />
        </div>
      </div>
    </div>
  </div>
</template>
  
<script lang="ts" setup>
import { ref, reactive, onMounted, inject } from "vue";
import type { FormInstance, FormRules } from 'element-plus'
import { backPath } from '@/utils/tools'
import { Edit, ArrowLeft as IconView } from '@element-plus/icons-vue'
import { URL_FETALL, URL_GETDETAIL } from '../api'
import { post, get } from "@/utils/request";
import { useRoute } from "vue-router";

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 RelatedBusiness from '../component/relatedBusiness.vue';
import RelatedContacts from "../component/relatedContacts.vue";
import RelatedOrders from "../component/relatedOrders.vue"
import DetailCompinents from '@/components/detailcompinents/relatedTasks.vue'
import { formatDate } from "@/utils/times";

const route = useRoute()
const globalPopup = inject<GlobalPopup>('globalPopup')
const rowId = ref(+(route.query.id || ''))
const values = ref<any>('')
const options = ref<optionType[]>([])
const information = ref<any>({})
const detailCompinentsData = ref([])
const allLoading = reactive({
  customerDetailLoading: false
})

function getDetail() {
  allLoading.customerDetailLoading = true
  post(URL_GETDETAIL, { id: values.value }).then((res) => {
    res.data.newCreateTime = formatDate(new Date(res.data.createTime)),
      information.value = res.data
      detailCompinentsData.value = res.data.tasks || []
  }).finally(() => {
    allLoading.customerDetailLoading = false
  })
}

function getAllCustomer() {
  get(URL_FETALL).then(({ data }) => {
    options.value = data.map((item: any) => ({
      value: item.id,
      label: item.customName
    }))
  })
}

onMounted(() => {
  values.value = rowId.value || ''
  getAllCustomer()
  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;
  }
}
</style>