fix: 线索详情页

src/views/market-manage/external-manage/clue-management/view-details/index.vue

@@ -1,11 +1,21 @@
 <template>
   <div class="page-detail">
-    <page-detail-layout :tabs="tabs" v-model:tab-active-key="tabActiveKey" :index-config="indexConfig"
-                        :steps-data="stepsData"
-                        title="华东电力二期治理项目">
+    <page-detail-layout
+      :tabs="tabs"
+      v-model:tab-active-key="tabActiveKey"
+      :index-config="indexConfig"
+      :steps-data="stepsData"
+      title="华东电力二期治理项目华东电力二期治理项目华东电力二期治理项目华东电力二期治理项目华东电力二期治理项目华东电力二期治理项目华东电力二期治理项目华东电力二期治理项目华东电力二期治理项目华东电力二期治理项目华东电力二期治理项目华东电力二期治理项目华东电力二期治理项目华东电力二期治理项目华东电力二期治理项目华东电力二期治理项目华东电力二期治理项目华东电力二期治理项目华东电力二期治理项目华东电力二期治理项目华东电力二期治理项目"
+    >
       <template #titleRight>
-        <!--        <img src="/@/assets/images/page-detail-layout/customer/SS_user.png" alt=""/>-->
-        <a-tag color="blue">转介绍</a-tag>
+        <!-- <img src="/@/assets/images/page-detail-layout/customer/SS_user.png" alt="" /> -->
+        <div class="risk-score">
+          <div class="risk-score-box">
+            <img class="risk-score-icon" src="/@/assets/images/market-manage/clue-manage/risk.svg" alt="" />
+            <div class="risk-score-text">危险74.9分</div>
+          </div>
+        </div>
+        <a-tag :bordered="false" color="blue">转介绍</a-tag>
       </template>
       <template #toolBtn>
         <a-button ghost type="primary" size="small">转移</a-button>
@@ -15,21 +25,17 @@
       </template>
 
       <template #titleBottom>
-        <a-tag color="#f0f4fe" v-for="(tagItem, tagIndex) in tagList" :key="tagIndex">
+        <div class="tag-list" v-for="(tagItem, tagIndex) in tagList" :key="tagIndex">
           <div class="tag-stl">
-            <img :src="tagItem.icon" alt=""/>
+            <img :src="tagItem.icon" alt="" />
             <span class="title-render">{{ tagItem.title }}</span>
           </div>
-        </a-tag>
+        </div>
       </template>
       <template #BasicInformation>
         <bs-contents-wrapper>
           <!-- 客户信息（动态列数） -->
-          <bs-descriptions
-              :items="bsDescriptionItems"
-              title="客户信息"
-              :extraProps="{ column: { ml: 3 } }"
-          >
+          <bs-descriptions :items="bsDescriptionItems" title="客户信息" :extraProps="{ column: { ml: 3 } }">
             <template #name1_label_slot>
               <span style="color: #1890ff">Label插槽</span>
             </template>
@@ -39,343 +45,369 @@
           </bs-descriptions>
 
           <!-- 管理信息（表格） -->
-          <bs-descriptions v-if="tableList&&tableList.length>0" title="协作团队">
-            <bs-table v-bind="tableOptions" v-if="tableList&&tableList.length>0"/>
+          <bs-descriptions v-if="tableList && tableList.length > 0" title="协作团队">
+            <bs-table v-bind="tableOptions" v-if="tableList && tableList.length > 0" />
           </bs-descriptions>
         </bs-contents-wrapper>
       </template>
 
       <template #sectionManagement>
-        <SectionManagement :id="id"/>
+        <SectionManagement :id="id" />
       </template>
 
       <template #infoMaterial>
-        <InfoMaterial :id="id"/>
+        <InfoMaterial :id="id" />
       </template>
 
       <template #cooperativeProject>
-        <CooperativeProject :id="id"/>
+        <CooperativeProject :id="id" />
       </template>
     </page-detail-layout>
-    <TransferPublicSeaModal ref="transferPublicSeaModalRef"/>
+    <TransferPublicSeaModal ref="transferPublicSeaModalRef" />
   </div>
 </template>
 
 <script setup>
-import {reactive, ref, watch} from 'vue';
-import PageDetailLayout from '/@/components/business/page-detail-layout/index.vue';
-import {BsDescriptions, BsContentsWrapper} from '/@/components/BsUi/index.js';
-import BsTable, {useBsTable} from '/@/components/BsUi/Table/index.js';
-import {clientManageApi} from '/@/api/market-manage/clue-management/index.js';
-import {onMounted,} from 'vue';
-import {useRoute} from 'vue-router';
-import SectionManagement from './components/SectionManagement.vue'
-import CooperativeProject from './components/CooperativeProject.vue'
-import InfoMaterial from './components/InfoMaterial.vue'
-import TransferPublicSeaModal from './components/TransferPublicSeaModal/index.vue';
+  import { reactive, ref, watch } from 'vue';
+  import PageDetailLayout from '/@/components/business/page-detail-layout/index.vue';
+  import { BsDescriptions, BsContentsWrapper } from '/@/components/BsUi/index.js';
+  import BsTable, { useBsTable } from '/@/components/BsUi/Table/index.js';
+  import { clientManageApi } from '/@/api/market-manage/clue-management/index.js';
+  import { onMounted } from 'vue';
+  import { useRoute } from 'vue-router';
+  import SectionManagement from './components/SectionManagement.vue';
+  import CooperativeProject from './components/CooperativeProject.vue';
+  import InfoMaterial from './components/InfoMaterial.vue';
+  import TransferPublicSeaModal from './components/TransferPublicSeaModal/index.vue';
 
-const route = useRoute();
-const {id} = route.query
-const tabActiveKey = ref('BasicInformation');
-const bsDescriptionItems = ref([]);
-const tableList = ref([]);
-const fetchData = (id) => {
-  if (!id) return;
-  clientManageApi.getQueryList(id).then((res) => {
-    tableList.value = res.data.teamDTOList;
-    setValue('gridOptions.data', res.data.teamDTOList)
-    const customerData = res.data;
-    bsDescriptionItems.value = [
-      {label: '项目类型', value: customerData.projectType?.[0].valueName || '--'},
-      {label: '线索名称', value: customerData.clueName || '--'},
-      {label: '线索来源', value: customerData.clueSource || '--'},
-      {label: '服务商名称', value: customerData.providerName || '--'},
-      {label: '项目名称', value: customerData.projectName || '--'},
-      {label: '工程属性', value: customerData.engineeringAttribute?.[0].valueName || '--'},
-      {label: '地区', value: customerData.district || '--'},
-      {label: '省市区', value: customerData.provinceName || '--'},
-      {label: '项目地址', value: customerData.address || '--',},
-      {label: '业主单位', value: ''},
-      {label: '设计单位', value: customerData.designUnitId || '--'},
-      {label: '总承包单位', value: customerData.contractorUnitId || '--'},
-      {label: '招标代理单位', value: customerData.tenderUnitId || '--',},
-      {label: '联合体', value: customerData.coalitionUnitState || '--',},
-      {label: '联合体情况说明', value: customerData.coalitionDescription || '--'},
-      {label: '项目所属行业', value: customerData.belongIndustry || '--'},
-      {label: '业务类型', value: customerData.businessType || '--'},
-      {label: '招标平台', value: customerData.tenderPlatform || '--'},
-      {label: '项目总概算', value: customerData.budgetAmount || '--'},
-      {label: '项目资金来源', value: customerData.financeSource || '--'},
-      {label: '分厂/几期/机组', value: customerData.shortDescription || '--'},
-    ];
-  })
-  clientManageApi.getQueryHeaderList(id).then((res) => {
-    console.log(res, 8885555)
-  })
-}
-const getImgUrl = (name) => {
-  return new URL('/src/assets/images/page-detail-layout/customer/' + name + '.svg', import.meta.url).href;
-};
-const tagList = [
-  {
-    title: 'XM202501120001',
-    icon: getImgUrl('icon-tianyancha'),
-  },
-  {
-    title: '华东电力集团',
-    icon: getImgUrl('icon-xiansuodengji'),
-  },
-  {
-    title: '山东省济南市历下区经开10路123号',
-    icon: getImgUrl('icon-biaoqianguanli'),
-  },
-  {
-    title: '曾用名',
-    icon: getImgUrl('icon-cengyongming'),
-  },
-];
-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 indexConfig = reactive({
-  sourceData: [
+  const route = useRoute();
+  const { id } = route.query;
+  const tabActiveKey = ref('BasicInformation');
+  const bsDescriptionItems = ref([]);
+  const tableList = ref([]);
+  const fetchData = (id) => {
+    if (!id) return;
+    clientManageApi.getQueryList(id).then((res) => {
+      tableList.value = res.data.teamDTOList;
+      setValue('gridOptions.data', res.data.teamDTOList);
+      const customerData = res.data;
+      bsDescriptionItems.value = [
+        { label: '项目类型', value: customerData.projectType?.[0].valueName || '--' },
+        { label: '线索名称', value: customerData.clueName || '--' },
+        { label: '线索来源', value: customerData.clueSource || '--' },
+        { label: '服务商名称', value: customerData.providerName || '--' },
+        { label: '项目名称', value: customerData.projectName || '--' },
+        { label: '工程属性', value: customerData.engineeringAttribute?.[0].valueName || '--' },
+        { label: '地区', value: customerData.district || '--' },
+        { label: '省市区', value: customerData.provinceName || '--' },
+        { label: '项目地址', value: customerData.address || '--' },
+        { label: '业主单位', value: '' },
+        { label: '设计单位', value: customerData.designUnitId || '--' },
+        { label: '总承包单位', value: customerData.contractorUnitId || '--' },
+        { label: '招标代理单位', value: customerData.tenderUnitId || '--' },
+        { label: '联合体', value: customerData.coalitionUnitState || '--' },
+        { label: '联合体情况说明', value: customerData.coalitionDescription || '--' },
+        { label: '项目所属行业', value: customerData.belongIndustry || '--' },
+        { label: '业务类型', value: customerData.businessType || '--' },
+        { label: '招标平台', value: customerData.tenderPlatform || '--' },
+        { label: '项目总概算', value: customerData.budgetAmount || '--' },
+        { label: '项目资金来源', value: customerData.financeSource || '--' },
+        { label: '分厂/几期/机组', value: customerData.shortDescription || '--' },
+      ];
+    });
+    clientManageApi.getQueryHeaderList(id).then((res) => {
+      console.log(res, 8885555);
+    });
+  };
+  const getImgUrl = (name) => {
+    return new URL('/src/assets/images/page-detail-layout/customer/' + name + '.svg', import.meta.url).href;
+  };
+  const tagList = [
     {
-      label: '预计合同金额',
-      value: '333,333,333(元)',
+      title: 'XM202501120001',
+      icon: getImgUrl('icon-tianyancha'),
     },
     {
-      label: '招标方式',
-      value: '公开',
+      title: '华东电力集团',
+      icon: getImgUrl('icon-xiansuodengji'),
     },
     {
-      label: '预计开工日期',
-      value: '2025.09.12',
+      title: '山东省济南市历下区经开10路123号',
+      icon: getImgUrl('icon-biaoqianguanli'),
     },
     {
-      label: '预计完工日期',
-      value: '2025.09.15',
+      title: '曾用名',
+      icon: getImgUrl('icon-cengyongming'),
+    },
+  ];
+  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,
     },
-
     {
-      label: '联系人',
-      value: '李阳',
+      title: '投标评审',
+      status: 'current',
+      number: 4,
+      lineTopNum: 0,
     },
     {
-      label: '联系电话',
-      value: '17753246827',
+      title: '投标管理',
+      status: 'todo',
+      number: 5,
+      lineTopNum: 0,
     },
     {
-      label: '营销归属人',
-      value: '李阳',
+      title: '中标捷报',
+      status: 'todo',
+      number: 6,
+      lineTopNum: 0,
     },
     {
-      label: '商务支持人',
-      value: '李阳',
+      title: '合同签订',
+      status: 'todo',
+      number: 7,
+      lineTopNum: 0,
     },
-  ],
-  labelKey: 'label',
-  valueKey: 'value',
-});
-onMounted(() => {
-  fetchData(route.query.id);
-});
-watch(
+  ];
+  const indexConfig = reactive({
+    sourceData: [
+      {
+        label: '预计合同金额',
+        value: '333,333,333(元)',
+      },
+      {
+        label: '招标方式',
+        value: '公开',
+      },
+      {
+        label: '预计开工日期',
+        value: '2025.09.12',
+      },
+      {
+        label: '预计完工日期',
+        value: '2025.09.15',
+      },
+
+      {
+        label: '联系人',
+        value: '李阳',
+      },
+      {
+        label: '联系电话',
+        value: '17753246827',
+      },
+      {
+        label: '营销归属人',
+        value: '李阳',
+      },
+      {
+        label: '商务支持人',
+        value: '李阳',
+      },
+    ],
+    labelKey: 'label',
+    valueKey: 'value',
+  });
+  onMounted(() => {
+    fetchData(route.query.id);
+  });
+  watch(
     () => route.query.id,
     (newId, oldId) => {
       if (newId && newId !== oldId) {
         fetchData(newId);
       }
     }
-);
-const tabs = ref([
-  {
-    title: '基本信息',
-    key: 'BasicInformation',
-    slotName: 'BasicInformation',
-    selectedIcon: getImgUrl('icon-jibenxinxi-all'),
-    unSelectedIcon: getImgUrl('icon-jibenxinxi'),
-  },
-  {
-    title: '标段管理',
-    key: 'sectionManagement',
-    slotName: 'sectionManagement',
-    selectedIcon: getImgUrl('icon-genjinqingkuang-all'),
-    unSelectedIcon: getImgUrl('icon-genjinqingkuang'),
-  },
-  {
-    title: '任务看板',
-    key: 'tab2',
-    slotName: 'tab2',
-    selectedIcon: getImgUrl('icon-guanliangongsi-all'),
-    unSelectedIcon: getImgUrl('icon-guanliangongsi'),
-  },
-  {
-    title: '服务成员',
-    key: 'tab3',
-    slotName: 'tab3',
-    selectedIcon: getImgUrl('icon-yingxiaotuandui-all'),
-    unSelectedIcon: getImgUrl('icon-yingxiaotuandui'),
-  },
-
-  {
-    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: '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 transferPublicSeaModalRef = ref(null);
+  );
+  const tabs = ref([
+    {
+      title: '基本信息',
+      key: 'BasicInformation',
+      slotName: 'BasicInformation',
+      selectedIcon: getImgUrl('icon-jibenxinxi-all'),
+      unSelectedIcon: getImgUrl('icon-jibenxinxi'),
+    },
+    {
+      title: '标段管理',
+      key: 'sectionManagement',
+      slotName: 'sectionManagement',
+      selectedIcon: getImgUrl('icon-genjinqingkuang-all'),
+      unSelectedIcon: getImgUrl('icon-genjinqingkuang'),
+    },
+    {
+      title: '任务看板',
+      key: 'tab2',
+      slotName: 'tab2',
+      selectedIcon: getImgUrl('icon-guanliangongsi-all'),
+      unSelectedIcon: getImgUrl('icon-guanliangongsi'),
+    },
+    {
+      title: '服务成员',
+      key: 'tab3',
+      slotName: 'tab3',
+      selectedIcon: getImgUrl('icon-yingxiaotuandui-all'),
+      unSelectedIcon: getImgUrl('icon-yingxiaotuandui'),
+    },
 
-const handleTransferPublicSea = () => {
-  transferPublicSeaModalRef.value.showModal();
-};
-const {
-  tableOptions,
-  setTablePropsValue: setValue,
-  getTablePropsValue: getValue,
-} = useBsTable({
-  tableOptions: {
-    gridOptions: {
-      loading: false,
-      data: [],
-      columns: [
-        {
-          field: 'marketingManager',
-          title: '营销经理',
-        },
-        {
-          field: 'marketingTeam',
-          title: '营销团队',
-        },
-        {
-          field: 'supportDescription',
-          title: '支持说明',
-        },
-      ],
+    {
+      title: '项目决策链',
+      key: 'cooperativeProject',
+      slotName: 'cooperativeProject',
+      selectedIcon: getImgUrl('icon-hezuoxiangmu-all'),
+      unSelectedIcon: getImgUrl('icon-hezuoxiangmu'),
     },
-    toolbarConfig: {
-      enable: false,
+    {
+      title: '竞争管理',
+      key: 'CustomerDecisionChain',
+      slotName: 'CustomerDecisionChain',
+      selectedIcon: getImgUrl('icon-kehujuecelian-all'),
+      unSelectedIcon: getImgUrl('icon-kehujuecelian'),
     },
-    pagerConfig: {
-      enabled: true,
-      isFixed: false,
-      pageSize: 10,
-      pageNum: 1,
-      total: 100,
+    {
+      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: '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 transferPublicSeaModalRef = ref(null);
+
+  const handleTransferPublicSea = () => {
+    transferPublicSeaModalRef.value.showModal();
+  };
+  const {
+    tableOptions,
+    setTablePropsValue: setValue,
+    getTablePropsValue: getValue,
+  } = useBsTable({
+    tableOptions: {
+      gridOptions: {
+        loading: false,
+        data: [],
+        columns: [
+          {
+            field: 'marketingManager',
+            title: '营销经理',
+          },
+          {
+            field: 'marketingTeam',
+            title: '营销团队',
+          },
+          {
+            field: 'supportDescription',
+            title: '支持说明',
+          },
+        ],
+      },
+      toolbarConfig: {
+        enable: false,
+      },
+      pagerConfig: {
+        enabled: true,
+        isFixed: false,
+        pageSize: 10,
+        pageNum: 1,
+        total: 100,
+      },
+    },
+  });
 </script>
 
 <style lang="scss" scoped>
-.page-detail {
-  width: 100%;
-
-  .tag-stl {
-    display: flex;
-    gap: 5px;
-    align-items: center;
+  .page-detail {
+    width: 100%;
+    .risk-score {
+      .risk-score-box {
+        position: relative;
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        width: 85px;
+        height: 21px;
+        border-radius: 4px;
+        background: #ffdddd;
+        padding-right: 5px;
+        padding-bottom: 2px;
+        .risk-score-icon {
+          position: absolute;
+          left: -10px;
+        }
+        .risk-score-text {
+          font-family: PingFang SC;
+          font-size: 12px;
+          font-weight: 500;
+          line-height: 12px;
+          color: #fc5a5a;
+        }
+      }
+    }
+    .tag-list {
+      margin-right: 13px;
+      .tag-stl {
+        display: flex;
+        gap: 5px;
+        align-items: center;
 
-    .title-render {
-      color: #999999;
-      font-size: 14px;
+        .title-render {
+          color: #1f1f1f;
+          font-size: 14px;
+          margin-bottom: 2px;
+        }
+      }
     }
   }
-}
-
-
 </style>