fix: 客户详情逻辑修改

src/views/customer-manage/customer-detail/components/BasinInfo.vue

@@ -0,0 +1,236 @@
+<template>
+  <bs-contents-wrapper>
+    <bs-descriptions :items="customerItems" title="客户信息" :extra-props="{ column: 4 }">
+      <template #provider_value_slot>
+        <div class="provider">
+          <a-button type="link">
+            <template #icon><LinkOutlined /></template>
+            服务商名称
+          </a-button>
+          <a-tag color="blue">服务商变更</a-tag>
+        </div>
+      </template>
+
+      <template #webAddr_value_slot>
+        <a-button type="link">
+          <template #icon><LinkOutlined /></template>
+          具体地址
+        </a-button>
+      </template>
+    </bs-descriptions>
+    <bs-descriptions :items="manageInfoItems" title="管理信息" :extra-props="{ column: 4 }">
+      <bs-table v-bind="tableOptions" />
+
+      <template #company_value_slot>
+        <a-button type="link">
+          <template #icon><LinkOutlined /></template>
+          政府地址
+        </a-button>
+      </template>
+    </bs-descriptions>
+
+
+    <bs-descriptions :items="otherItems" title="其他信息" :extra-props="{ column: 4 }"></bs-descriptions>
+  </bs-contents-wrapper>
+</template>
+
+<script setup lang="jsx">
+  import { h, ref } from 'vue';
+  import { BsDescriptions, BsContentsWrapper } from '/@/components/BsUi/index.js';
+  import { BsTable, useBsTable } from '/@/components/BsUi/index.js';
+
+  const customerItems = ref([
+    {
+      label: '客户地区',
+      field: 'name',
+      value: '国内客户',
+    },
+    {
+      label: '客户来源',
+      field: 'name1',
+      value: '服务商提供',
+    },
+    {
+      label: '服务商名称',
+      field: 'name1',
+      valueSlot: 'provider_value_slot',
+      extraProps: {
+        span: 2,
+      },
+    },
+    {
+      label: '客户名称',
+      field: 'name1',
+      value: '江西大同环境治理公司',
+    },
+    {
+      label: '属性',
+      field: 'name1',
+      value: '有限责任公司',
+    },
+    {
+      label: '统一社会代码',
+      field: 'name1',
+      value: '913702007180133454',
+      extraProps: {
+        span: 2,
+      },
+    },
+    {
+      label: '存续状态',
+      field: 'name1',
+      value: '正常',
+    },
+    {
+      label: '注册地址',
+      field: 'name1',
+      value: '江西省南昌经济技术开发区下罗（江西省公路管理局物资储运总站内）',
+      extraProps: {
+        span: 3,
+      },
+    },
+    {
+      label: '注册资本',
+      field: 'name1',
+      value: '1000万',
+    },
+    {
+      label: '官网地址',
+      field: 'name1',
+      valueSlot: 'webAddr_value_slot',
+    },
+    {
+      label: '经营范围',
+      field: 'name1',
+      value: '经营范围信息展示位置在这里，文字信息两列的话就要缩略显示，鼠标指入显示全部，详细看右侧的图...',
+      extraProps: {
+        span: 2,
+      },
+    },
+    {
+      label: '企业简介',
+      field: 'name1',
+      value:
+        '望山山庄旅游度假集团，是国务院国有资产监督管理委员会直接管理的大型中央企业，总部设在深圳，已形成以文化、旅游、房地产、电子科技为主业的发展格局，是首批国家级文化产业示范园区、全国文化企业30强、中国旅游集团20强...',
+      extraProps: {
+        span: 4,
+      },
+    },
+    {
+      label: '初始对接人',
+      field: 'name1',
+      value: '何平',
+    },
+    {
+      label: '初始对接人电话',
+      field: 'name1',
+      value: '15006362052',
+    },
+    {
+      label: '办公地址',
+      field: 'name1',
+      value: '江西省南昌经济技术开发区下罗（江西省公路管理局物资储运总站内）',
+      extraProps: {
+        span: 2,
+      },
+    },
+  ]);
+
+  const {
+    tableOptions,
+    setTablePropsValue: setValue,
+    getTablePropsValue: getValue,
+  } = useBsTable({
+    tableOptions: {
+      toolbarTopConfig: {
+        enable: false,
+      },
+      gridOptions: {
+        loading: false,
+        columns: [
+          {
+            title: '上级单位名称',
+            field: 'name1',
+          },
+          {
+            title: '法定代表人',
+            field: 'name2',
+          },
+          {
+            title: '法定代表人',
+            field: 'name3',
+          },
+          {
+            title: '省市区地址',
+            field: 'name4',
+          },
+          {
+            title: '企业责权说明',
+            field: 'name5',
+          },
+        ],
+        data: [
+          {
+            id: 1,
+            name1: '测试数据',
+          },
+        ], // 模拟数据源
+      },
+      searchConfig: {
+        enabled: false,
+      },
+      pagerConfig: {
+        enabled: false,
+        isFixed: false,
+      },
+      toolbarConfig: {
+        enable: false,
+      },
+      // 表格初始化之前,只加载一次
+      beforeMount() {
+        console.log('表格加载前');
+      },
+      // 表格初始化完成,只加载一次
+      mounted(gridRef) {
+        console.log('表格加载后', gridRef);
+      },
+    },
+  });
+
+  const manageInfoItems = ref([
+    {
+      label: '集团公司',
+      valueSlot: 'company_value_slot',
+    },
+    {
+      label: '客户等级',
+      value: 'A级',
+    },
+    {
+      label: '客户行业',
+      value: '行业名称信息展示',
+    },
+    {
+      label: '客户类型',
+      value: '投资单位',
+    },
+    {
+      label: '归属区域',
+      value: '归属区域信息展示位置',
+    },
+    {
+      label: '归属营销人员',
+      value: '韩晓辉',
+    },
+  ]);
+
+  const otherItems = ref([])
+</script>
+
+<style lang="scss" scoped>
+  .provider {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+  }
+</style>

src/views/customer-manage/customer-detail/index.vue

@@ -22,31 +22,9 @@
         </a-tag>
       </template>
 
-      <template #tab1>
-        <bs-contents-wrapper>
-          <bs-descriptions :items="bsDescriptionItems" title="表头1">
-            <template #name1_label_slot>
-              <span style="color: red">label插槽</span>
-            </template>
-            <template #name1_value_slot> <span style="color: blue">value插槽</span></template>
-          </bs-descriptions>
-          <bs-descriptions :items="bsDescriptionItems" title="表头2">
-            <template #name1_label_slot>
-              <span style="color: red">label插槽</span>
-            </template>
-            <template #name1_value_slot> <span style="color: blue">value插槽</span></template>
-          </bs-descriptions>
-          <bs-descriptions :items="bsDescriptionItems" title="表头3">
-            <template #name1_label_slot>
-              <span style="color: red">label插槽</span>
-            </template>
-            <template #name1_value_slot> <span style="color: blue">value插槽</span></template>
-          </bs-descriptions>
-          <bs-descriptions title="表头4"> 内容4 </bs-descriptions>
-        </bs-contents-wrapper>
+      <template #BasicInfo>
+        <BasicInfo />
       </template>
-      <template #tab2>tab2</template>
-      <template #tab3>tab3</template>
     </page-detail-layout>
   </div>
 </template>
@@ -54,7 +32,7 @@
 <script setup>
   import { reactive, ref } from 'vue';
   import PageDetailLayout from '/@/components/business/page-detail-layout/index.vue';
-  import { BsDescriptions, BsContentsWrapper } from '/@/components/BsUi/index.js';
+  import BasicInfo from "./components/BasinInfo.vue"
 
   const getImgUrl = (name) => {
     return new URL('/src/assets/images/page-detail-layout/customer/' + name + '.svg', import.meta.url).href;