BoundLink-Plate-UI/src/views/customer-manage/customer-detail/index.vue

<template>
  <div class="page-detail">
    <page-detail-layout :tabs="tabs" v-model:tab-active-key="tabActiveKey" :index-config="indexConfig" title="江西大同环境治理有限公司">
      <template #titleRight>
        <img src="/@/assets/images/page-detail-layout/customer/SS_user.png" alt="" />
        <a-tag color="blue">企业单位</a-tag>
      </template>

      <template #toolBtn>
        <a-button danger ghost type="primary" size="small">加入黑名单</a-button>
        <a-button danger ghost type="primary" size="small">释放公海</a-button>
        <a-button ghost type="primary" size="small">客户转移</a-button>
        <a-button type="primary" size="small">信息编辑</a-button>
      </template>

      <template #titleBottom>
        <a-tag color="#f0f4fe" v-for="(tagItem, tagIndex) in tagList" :key="tagIndex">
          <div class="tag-stl">
            <img :src="tagItem.icon" alt="" />
            <span class="title-render">{{ tagItem.title }}</span>
          </div>
        </a-tag>
      </template>

      <template #BasicInfo>
        <BasicInfo />
      </template>
    </page-detail-layout>
  </div>
</template>

<script setup>
  import { reactive, ref } from 'vue';
  import PageDetailLayout from '/@/components/business/page-detail-layout/index.vue';
  import BasicInfo from './components/BasinInfo.vue';
  const stepsData = [
    {
      title: '标段备案',
      time: '2024-09-18',
      status: 'completed',
      number: 1,
      lineTopNum: 100,
    },
    {
      title: '商机管理',
      time: '2024-09-20',
      status: 'completed',
      number: 2,
      lineTopNum: 100,
    },
    {
      title: '项目立项',
      time: '2024-10-11',
      status: 'completed',
      number: 3,
      lineTopNum: 100,
    },
    {
      title: '投标评审',
      status: 'current',
      number: 4,
      lineTopNum: 0,
    },
    {
      title: '投标管理',
      status: 'todo',
      number: 5,
      lineTopNum: 0,
    },
    {
      title: '中标捷报',
      status: 'todo',
      number: 6,
      lineTopNum: 0,
    },
    {
      title: '合同签订',
      status: 'todo',
      number: 7,
      lineTopNum: 0,
    },
  ];
  const getImgUrl = (name) => {
    return new URL('/src/assets/images/page-detail-layout/customer/' + name + '.svg', import.meta.url).href;
  };

  const tagList = [
    {
      title: '天眼查',
      icon: getImgUrl('icon-tianyancha'),
    },
    {
      title: '线索登记',
      icon: getImgUrl('icon-xiansuodengji'),
    },
    {
      title: '标签管理',
      icon: getImgUrl('icon-biaoqianguanli'),
    },
    {
      title: '曾用名',
      icon: getImgUrl('icon-cengyongming'),
    },
  ];

  const tabs = ref([
    {
      title: '基本信息',
      key: 'BasicInfo',
      slotName: 'BasicInfo',
      selectedIcon: getImgUrl('icon-jibenxinxi-all'),
      unSelectedIcon: getImgUrl('icon-jibenxinxi'),
    },
    {
      title: '关联公司',
      key: 'LinkCompany',
      slotName: 'LinkCompany',
      selectedIcon: getImgUrl('icon-guanliangongsi-all'),
      unSelectedIcon: getImgUrl('icon-guanliangongsi'),
    },
    {
      title: '营销团队',
      key: 'MarketTeam',
      slotName: 'MarketTeam',
      selectedIcon: getImgUrl('icon-yingxiaotuandui-all'),
      unSelectedIcon: getImgUrl('icon-yingxiaotuandui'),
    },
    {
      title: '跟进情况',
      key: 'FollowUp',
      slotName: 'FollowUp',
      selectedIcon: getImgUrl('icon-genjinqingkuang-all'),
      unSelectedIcon: getImgUrl('icon-genjinqingkuang'),
    },
    {
      title: '合作项目',
      key: 'CooperativeProject',
      slotName: 'CooperativeProject',
      selectedIcon: getImgUrl('icon-hezuoxiangmu-all'),
      unSelectedIcon: getImgUrl('icon-hezuoxiangmu'),
    },
    {
      title: '客户决策链',
      key: 'CustomerDecisionChain',
      slotName: 'CustomerDecisionChain',
      selectedIcon: getImgUrl('icon-kehujuecelian-all'),
      unSelectedIcon: getImgUrl('icon-kehujuecelian'),
    },
    {
      title: '合同管理',
      key: 'ContractManagement',
      slotName: 'ContractManagement',
      selectedIcon: getImgUrl('icon-hetongguanli-all'),
      unSelectedIcon: getImgUrl('icon-hetongguanli'),
    },
    {
      title: '投资&竞争管理',
      key: 'InvestmentCompetitionManagement',
      slotName: 'InvestmentCompetitionManagement',
      selectedIcon: getImgUrl('icon-touzijingzheng-all'),
      unSelectedIcon: getImgUrl('icon-touzijingzheng'),
    },
    {
      title: '客户评价',
      key: 'CustomerReview',
      slotName: 'CustomerReview',
      selectedIcon: getImgUrl('icon-kehupingjia-all'),
      unSelectedIcon: getImgUrl('icon-kehupingjia'),
    },
    {
      title: '信息资料',
      key: 'InfoMaterial',
      slotName: 'InfoMaterial',
      selectedIcon: getImgUrl('icon-xinxiziliao-all'),
      unSelectedIcon: getImgUrl('icon-xinxiziliao'),
    },
    {
      title: '编辑记录',
      key: 'EditReport',
      slotName: 'EditReport',
      selectedIcon: getImgUrl('icon-bianjijilu-all'),
      unSelectedIcon: getImgUrl('icon-bianjijilu'),
    },
  ]);

  const indexConfig = reactive({
    sourceData: [
      {
        label: '客户类型',
        value: '控股',
      },
      {
        label: '归属公司',
        value: '青山',
      },
      {
        label: '合同数量',
        value: '1',
      },
      {
        label: '累计合同金额(元)',
        value: '333,333,333',
      },
      {
        label: '累计收款(元)',
        value: '333,333,333',
      },
      {
        label: '累计开票(元)',
        value: '333,333,333',
      },
      {
        label: '累计未回款(元)',
        value: '333,333,333',
      },
      {
        label: '归属营销经理',
        value: '刘玉宁',
      },
    ],
    labelKey: 'label',
    valueKey: 'value',
  });
</script>

<style lang="scss" scoped>
  .page-detail {
    width: 100%;

    .tag-stl {
      display: flex;
      gap: 5px;
      align-items: center;
      .title-render {
        color: #999999;
        font-size: 14px;
      }
    }
  }
</style>