diff --git a/yudao-ui-admin-vben-master/src/views/stpagea/enterpriseCentre/enterpriseDetails/index.vue b/yudao-ui-admin-vben-master/src/views/stpagea/enterpriseCentre/enterpriseDetails/index.vue
index ed29c2e..1bdc167 100644
--- a/yudao-ui-admin-vben-master/src/views/stpagea/enterpriseCentre/enterpriseDetails/index.vue
+++ b/yudao-ui-admin-vben-master/src/views/stpagea/enterpriseCentre/enterpriseDetails/index.vue
@@ -8,7 +8,7 @@ import EmployeeInfo from './src/EmployeeInfo.vue'
 import CustomerInfo from './src/CustomerInfo.vue'
 import SupplierInfo from './src/SupplierInfo.vue'
 import ProviderInfo from './src/ProviderInfo.vue'
-import OperationRecords from './src/OperationRecords.vue'
+import OperateRecords from './src/OperateRecords.vue'
 import headerImg from '@/assets/images/test/w100h100.png'
 import { DownOutlined } from '@ant-design/icons-vue';
 
@@ -140,7 +140,7 @@ const activeKey = ref('1');
               客户信息
             </span>
           </template>
-          <EmployeeInfo />
+          <CustomerInfo />
         </a-tab-pane>
         <a-tab-pane key="7">
           <template #tab>
@@ -148,17 +148,9 @@ const activeKey = ref('1');
               供应商信息
             </span>
           </template>
-          <CustomerInfo />
-        </a-tab-pane>
-        <a-tab-pane key="8">
-          <template #tab>
-            <span class="tab-title">
-              服务商信息
-            </span>
-          </template>
           <SupplierInfo />
         </a-tab-pane>
-        <a-tab-pane key="9">
+        <a-tab-pane key="8">
           <template #tab>
             <span class="tab-title">
               服务商信息
@@ -166,13 +158,13 @@ const activeKey = ref('1');
           </template>
           <ProviderInfo />
         </a-tab-pane>
-        <a-tab-pane key="10">
+        <a-tab-pane key="9">
           <template #tab>
             <span class="tab-title">
               操作记录
             </span>
           </template>
-          <OperationRecords />
+          <OperateRecords />
         </a-tab-pane>
       </a-tabs>
     </a-col>
diff --git a/yudao-ui-admin-vben-master/src/views/stpagea/enterpriseCentre/enterpriseDetails/src/BusinessOrganization.vue b/yudao-ui-admin-vben-master/src/views/stpagea/enterpriseCentre/enterpriseDetails/src/BusinessOrganization.vue
deleted file mode 100644
index ccc814f..0000000
--- a/yudao-ui-admin-vben-master/src/views/stpagea/enterpriseCentre/enterpriseDetails/src/BusinessOrganization.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<script lang="ts" setup>
-</script>
-
-<template>
-  <div class="basic-information">
-    业务组织内容
-  </div>
-</template>
-
-<style lang="less" scoped>
-</style>
\ No newline at end of file
diff --git a/yudao-ui-admin-vben-master/src/views/stpagea/enterpriseCentre/enterpriseDetails/src/CustomerInfo.vue b/yudao-ui-admin-vben-master/src/views/stpagea/enterpriseCentre/enterpriseDetails/src/CustomerInfo.vue
index 0f1809d..16de80e 100644
--- a/yudao-ui-admin-vben-master/src/views/stpagea/enterpriseCentre/enterpriseDetails/src/CustomerInfo.vue
+++ b/yudao-ui-admin-vben-master/src/views/stpagea/enterpriseCentre/enterpriseDetails/src/CustomerInfo.vue
@@ -1,11 +1,455 @@
 <script lang="ts" setup>
+import { ref, watch, h } from 'vue'
+import type { TreeProps } from 'ant-design-vue';
+import difference from 'lodash-es/difference';
+import type { Dayjs } from 'dayjs';
+import {
+  SearchOutlined,
+  UndoOutlined,
+  ReloadOutlined
+} from '@ant-design/icons-vue';
+
+
+type RangeValue = [Dayjs, Dayjs];
+const valTime = ref<RangeValue>();
+// 左边
+const treeData: TreeProps['treeData'] = [
+  {
+    title: '济钢城市矿产',
+    key: '0-0',
+    children: [
+      {
+        title: '城市矿产科技',
+        key: '0-0-1'
+      },
+      {
+        title: '日照济钢金属',
+        key: '0-0-2'
+      },
+      {
+        title: '济钢愿景工业',
+        key: '0-0-3',
+        children: [
+          {
+            title: '废钢',
+            key: '0-0-3-1'
+          },
+          {
+            title: '废铁',
+            key: '0-0-3-2'
+          },
+          {
+            title: '废铝',
+            key: '0-0-3-3'
+          },
+          {
+            title: '废纸',
+            key: '0-0-3-4'
+          },
+          {
+            title: '煤炭',
+            key: '0-0-3-5'
+          }
+        ]
+      },
+      {
+        title: '城市矿产科技（佛山）',
+        key: '0-0-4'
+      }
+    ],
+  }
+];
+
+const expandedKeys = ref<string[]>(['0-0']);
+const selectedKeys = ref<string[]>(['0-0-0', '0-0-1']);
+const checkedKeys = ref<string[]>(['0-0-0', '0-0-1']);
+watch(expandedKeys, () => {
+  console.log('expandedKeys', expandedKeys);
+});
+watch(selectedKeys, () => {
+  console.log('selectedKeys', selectedKeys);
+});
+watch(checkedKeys, () => {
+  console.log('checkedKeys', checkedKeys);
+});
+const handleExpand = (keys: string[], { expanded, node }) => {
+  // node.parent add from 3.0.0-alpha.10
+  const tempKeys = ((node.parent ? node.parent.children : treeData) || []).map(({ key }) => key);
+  if (expanded) {
+    expandedKeys.value = difference(keys, tempKeys).concat(node.key);
+  } else {
+    expandedKeys.value = keys;
+  }
+};
+// 右边
+const headStyleV: any = { color: '#262626', 'background-color': '#F7F8FA', 'border-radius': '3px' }
+const rowSelection = ref({
+  checkStrictly: false,
+  onChange: (selectedRowKeys: (string | number)[], selectedRows: any[]) => {
+    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
+  },
+  onSelect: (record: any, selected: boolean, selectedRows: any[]) => {
+    console.log(record, selected, selectedRows);
+  },
+  onSelectAll: (selected: boolean, selectedRows: any[], changeRows: any[]) => {
+    console.log(selected, selectedRows, changeRows);
+  },
+});
+const columns: any = [
+  {
+    title: '客户名称',
+    dataIndex: 'k1a',
+    key: 'k1a',
+    sorter: true,
+    fixed: 'left',
+    width: 150
+  },
+  {
+    title: '客户分类',
+    dataIndex: 'k2',
+    key: 'k2',
+    sorter: true,
+    width: 120
+  },
+  {
+    title: '客户类型',
+    dataIndex: 'k3',
+    key: 'k3',
+    sorter: true,
+    width: 120
+  },
+  {
+    title: '资金款项',
+    dataIndex: 'k4',
+    key: 'k4',
+    sorter: true,
+    width: 120
+  },
+  {
+    title: '合作模式',
+    dataIndex: 'k5a',
+    key: 'k5a',
+    sorter: true,
+    width: 200
+  },
+  {
+    title: '隶属机构/业务线',
+    dataIndex: 'k6a',
+    key: 'k6a',
+    sorter: true,
+    width: 200
+  },
+  {
+    title: '状态',
+    dataIndex: 'k7',
+    key: 'k7',
+    sorter: true,
+    width: 200
+  },
+  {
+    title: '客户分级',
+    dataIndex: 'k8',
+    key: 'k8',
+    sorter: true,
+    width: 200
+  },
+  {
+    title: '归属人员',
+    dataIndex: 'k9',
+    key: 'k9',
+    sorter: true,
+    width: 200
+  },
+  {
+    title: '新增时间',
+    dataIndex: 'k10a',
+    key: 'k10a',
+    sorter: true,
+    width: 200
+  },
+  {
+    title: '更新时间',
+    dataIndex: 'k11a',
+    key: 'k11a',
+    sorter: true,
+    width: 200
+  },
+  {
+    title: '操作',
+    dataIndex: 'key',
+    key: 'key',
+    fixed: 'right',
+    width: 100
+  }
+]
+const dataSource: any = [
+  {
+    key: '1',
+    k1a: '客户名称',
+    k1b: '20230910001',
+    k2: '一级',
+    k3: '钢厂',
+    k4: '垫资',
+    k5a: '联营',
+    k5b: '业绩返点',
+    k6a: '济钢城市矿产',
+    k6b: '废钢',
+    k7: '已关闭',
+    k8: '1',
+    k9: '康宁',
+    k10a: '康宁',
+    k10b: '2023-09-03 23:26:08',
+    k11a: '康宁',
+    k11b: '2023-09-03 23:26:08',
+  }
+];
 </script>
 
 <template>
-  <div class="basic-information">
-    客户信息内容
-  </div>
+  <a-row :wrap="false" class="branch-y1">
+    <a-col flex="1 1 auto">
+      <a-card title="客户信息" :bordered="false" style="border-radius: 3px;" :headStyle="headStyleV">
+        <a-row>
+          <a-col :span="4">
+            <div style="padding: 0px 20px;"><a-input placeholder="公司/业务线" /></div>
+            <div style="padding: 0px 20px;"><a-tree v-model:selectedKeys="selectedKeys" :expanded-keys="expandedKeys"
+                :tree-data="treeData" @expand="handleExpand">
+                <template #title="{ title, key }">
+                  <span v-if="key === '0-0-1-0'" style="color: #1890ff">{{ title }}</span>
+                  <template v-else>{{ title }}</template>
+                </template>
+              </a-tree></div>
+          </a-col>
+          <a-col :span="20">
+            <a-card title="当前：济钢城市矿产科技有限公司（总公司）" :bordered="false" style="border-radius: 3px;" :headStyle="headStyleV">
+              <a-row>
+                <a-col flex="1 1 auto" style="padding: 0px 0px 16px 0px;">
+                  <a-space :size="[8, 16]" wrap>
+                    <a-input placeholder="客户名称或编号" />
+                    <a-select allowClear placeholder="客户状态">
+                      <a-select-option value="opt1">待确认</a-select-option>
+                      <a-select-option value="opt2">待认证</a-select-option>
+                      <a-select-option value="opt3">待审核</a-select-option>
+                      <a-select-option value="opt4">待签署</a-select-option>
+                      <a-select-option value="opt5">正常合作</a-select-option>
+                      <a-select-option value="opt6">暂停合作</a-select-option>
+                      <a-select-option value="opt7">已关闭</a-select-option>
+                    </a-select>
+                    <a-select allowClear placeholder="客户类型">
+                      <a-select-option value="opt1">钢厂</a-select-option>
+                      <a-select-option value="opt2">钢贸企业</a-select-option>
+                      <a-select-option value="opt3">VIP大客户</a-select-option>
+                      <a-select-option value="opt4">其他企业</a-select-option>
+                    </a-select>
+                    <a-button type="primary" :icon="h(SearchOutlined)">查询</a-button>
+                    <a-button :icon="h(UndoOutlined)">重置</a-button>
+                  </a-space>
+                </a-col>
+                <a-col flex="0 0 20px" style="padding: 10px 0px 16px 0px;">
+                  <a-space :size="[8, 16]" wrap>
+                    <ReloadOutlined title="刷新列表" style="cursor: pointer;" />
+                  </a-space>
+                </a-col>
+              </a-row>
+              <a-row>
+                <a-col :span="24">
+                  <a-table class="ant-table-striped" :dataSource="dataSource" :row-selection="rowSelection"
+                    :columns="columns"
+                    :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-tr-b' : 'table-tr-a')"
+                    :scroll="{ x: 1500, y: 500 }">
+                    <template #bodyCell="{ column, record }">
+                      <template v-if="column.key === 'k1a'">
+                        <a>
+                          <a-row>
+                            <a-col :span="24">
+                              <div>{{ record.k1a }}</div>
+                            </a-col>
+                          </a-row>
+                          <a-row>
+                            <a-col :span="24">
+                              <div>{{ record.k1b }}</div>
+                            </a-col>
+                          </a-row>
+                        </a>
+                      </template>
+                      <template v-else-if="column.key === 'k5a'">
+                        <a-row>
+                          <a-col :span="24">
+                            <div>{{ record.k5a }}</div>
+                          </a-col>
+                        </a-row>
+                        <a-row>
+                          <a-col :span="24">
+                            <div>{{ record.k5b }}</div>
+                          </a-col>
+                        </a-row>
+                      </template>
+                      <template v-else-if="column.key === 'k6a'">
+                        <a-row>
+                          <a-col :span="24">
+                            <div>{{ record.k6a }}</div>
+                          </a-col>
+                        </a-row>
+                        <a-row>
+                          <a-col :span="24">
+                            <div>{{ record.k6b }}</div>
+                          </a-col>
+                        </a-row>
+                      </template>
+                      <template v-else-if="column.key === 'k4a'">
+                        <a-row>
+                          <a-col :span="24">
+                            <div>{{ record.k4a }}</div>
+                          </a-col>
+                        </a-row>
+                        <a-row>
+                          <a-col :span="24">
+                            <div>{{ record.k4b }}</div>
+                          </a-col>
+                        </a-row>
+                      </template>
+                      <template v-else-if="column.key === 'k5'">
+                        <template v-if="record.k5 == true">
+                          <div class="dot-true"></div>启用
+                        </template>
+                        <template v-else>
+                          <div class="dot-false"></div>禁用
+                        </template>
+                      </template>
+                      <template v-else-if="column.key === 'k7'">
+                        <template v-if="record.k7 == 'opt1'">
+                          <span class="dot-true"></span><span>已关闭</span>
+                        </template>
+                        <template v-if="record.k7 == 'opt1'">
+                          <a-row>
+                            <a-col :span="6">
+                              <div class="dot-true"></div>
+                            </a-col>
+                            <a-col :span="18">
+                              <div>已关闭</div>
+                            </a-col>
+                          </a-row>
+                        </template>
+                        <template v-if="record.k7 == 'opt1'">
+                          <a-row>
+                            <a-col :span="6">
+                              <div class="dot-true"></div>
+                            </a-col>
+                            <a-col :span="18">
+                              <div>已关闭</div>
+                            </a-col>
+                          </a-row>
+                        </template>
+                        <template v-if="record.k7 == 'opt1'">
+                          <a-row>
+                            <a-col :span="6">
+                              <div class="dot-true"></div>
+                            </a-col>
+                            <a-col :span="18">
+                              <div>已关闭</div>
+                            </a-col>
+                          </a-row>
+                        </template>
+                        <template v-if="record.k7 == 'opt1'">
+                          <a-row>
+                            <a-col :span="6">
+                              <div class="dot-true"></div>
+                            </a-col>
+                            <a-col :span="18">
+                              <div>已关闭</div>
+                            </a-col>
+                          </a-row>
+                        </template>
+                        <template v-if="record.k7 == 'opt1'">
+                          <a-row>
+                            <a-col :span="6">
+                              <div class="dot-true"></div>
+                            </a-col>
+                            <a-col :span="18">
+                              <div>已关闭</div>
+                            </a-col>
+                          </a-row>
+                        </template>
+                        <template v-else>
+                          <a-row>
+                            <a-col :span="6">
+                              <div class="dot-false"></div>
+                            </a-col>
+                            <a-col :span="18">
+                              <div>离线</div>
+                            </a-col>
+                          </a-row>
+                        </template>
+                      </template>
+                      <template v-else-if="column.key === 'k8'">
+                        <a-rate :value=record.k8 disabled />
+                      </template>
+                      <template v-else-if="column.key === 'k10a'">
+                        <a-row>
+                          <a-col :span="24">
+                            <div>{{ record.k10a }}</div>
+                          </a-col>
+                        </a-row>
+                        <a-row>
+                          <a-col :span="24">
+                            <div>{{ record.k10b }}</div>
+                          </a-col>
+                        </a-row>
+                      </template>
+                      <template v-else-if="column.key === 'k11a'">
+                        <a-row>
+                          <a-col :span="24">
+                            <div>{{ record.k10a }}</div>
+                          </a-col>
+                        </a-row>
+                        <a-row>
+                          <a-col :span="24">
+                            <div>{{ record.k10b }}</div>
+                          </a-col>
+                        </a-row>
+                      </template>
+                      <template v-else-if="column.key === 'key'">
+                        <div><a>详情</a></div>
+                      </template>
+                    </template>
+                  </a-table>
+                </a-col>
+              </a-row>
+            </a-card>
+          </a-col>
+        </a-row>
+      </a-card>
+    </a-col>
+  </a-row>
 </template>
 
 <style lang="less" scoped>
+:where(.css-dev-only-do-not-override-176pxz6) :deep(.ant-table-thead) .ant-table-cell {
+  background-color: rgb(245, 245, 245);
+  color: rgb(102, 102, 102);
+}
+
+:where(.css-dev-only-do-not-override-176pxz6) :deep(.table-tr-a) {
+  background-color: rgb(255, 255, 255);
+}
+
+:where(.css-dev-only-do-not-override-176pxz6) :deep(.table-tr-b) {
+  background-color: rgb(245, 245, 245);
+}
+
+.dot-true {
+  width: 10px;
+  height: 10px;
+  background-color: green;
+  border-radius: 100%;
+  margin: 7px 0px;
+}
+
+.dot-false {
+  width: 10px;
+  height: 10px;
+  background-color: red;
+  border-radius: 100%;
+  margin: 7px 0px;
+}
 </style>
\ No newline at end of file
diff --git a/yudao-ui-admin-vben-master/src/views/stpagea/enterpriseCentre/enterpriseDetails/src/EmployeeInfo.vue b/yudao-ui-admin-vben-master/src/views/stpagea/enterpriseCentre/enterpriseDetails/src/EmployeeInfo.vue
index 121e1cb..a6ff6d3 100644
--- a/yudao-ui-admin-vben-master/src/views/stpagea/enterpriseCentre/enterpriseDetails/src/EmployeeInfo.vue
+++ b/yudao-ui-admin-vben-master/src/views/stpagea/enterpriseCentre/enterpriseDetails/src/EmployeeInfo.vue
@@ -79,63 +79,76 @@ const columns: any = [
     dataIndex: 'k1a',
     key: 'k1a',
     sorter: true,
+    fixed: 'left',
+    width: 150
   },
   {
     title: '职务',
     dataIndex: 'k2a',
     key: 'k2a',
     sorter: true,
+    width: 200
   },
   {
     title: '组织部门',
     dataIndex: 'k3a',
     key: 'k3a',
     sorter: true,
+    width: 200
   },
   {
     title: '关联业务',
     dataIndex: 'k4a',
     key: 'k4a',
     sorter: true,
+    width: 200
   },
   {
     title: '账号状态',
     dataIndex: 'k5',
     key: 'k5',
+    width: 200
   },
   {
     title: '手机',
     dataIndex: 'k6',
     key: 'k6',
+    width: 200
   },
   {
     title: '在线状态',
     dataIndex: 'k7',
     key: 'k7',
     sorter: true,
+    width: 200
   },
   {
     title: '最后登录',
     dataIndex: 'k8',
     key: 'k8',
     sorter: true,
+    width: 200
   },
   {
     title: '添加时间',
     dataIndex: 'k9a',
     key: 'k9a',
     sorter: true,
+    width: 200
   },
   {
     title: '更新时间',
     dataIndex: 'k10a',
     key: 'k10a',
     sorter: true,
+    width: 200
   },
   {
     title: '操作',
     dataIndex: 'k1a',
-    key: 'k1a',
+    key: 'key',
+    fixed: 'right',
+    width: 100
   }
 ]
 const dataSource: any = [
@@ -244,7 +257,7 @@ const dataSource: any = [
     k3b: '济钢城市矿产',
     k4a: '废钢、废铝',
     k4b: '济钢城市矿产',
-    k5: true,
+    k5: false,
     k6: '18088889999',
     k7: true,
     k8: '2023-09-03 23:26:08',
@@ -265,7 +278,7 @@ const dataSource: any = [
     k4b: '济钢城市矿产',
     k5: true,
     k6: '18088889999',
-    k7: true,
+    k7: false,
     k8: '2023-09-03 23:26:08',
     k9a: '康宁',
     k9b: '2023-09-03 23:26:08',
@@ -341,7 +354,7 @@ const dataSource: any = [
                 <a-col :span="24">
                   <a-table class="ant-table-striped" :dataSource="dataSource" :row-selection="rowSelection"
                     :columns="columns"
-                    :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-tr-b' : 'table-tr-a')">
+                    :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-tr-b' : 'table-tr-a')" :scroll="{ x: 1500, y: 500 }">
                     <template #bodyCell="{ column, record }">
                       <template v-if="column.key === 'k1a'">
                         <a>
@@ -393,8 +406,8 @@ const dataSource: any = [
                           </a-col>
                         </a-row>
                       </template>
-                      <template v-else-if="column.key === 'k7'">
-                        <template v-if="record.k7 == true">
+                      <template v-else-if="column.key === 'k5'">
+                        <template v-if="record.k5 == true">
                           <a-row>
                             <a-col :span="6">
                               <div class="dot-true"></div>
@@ -415,7 +428,53 @@ const dataSource: any = [
                           </a-row>
                         </template>
                       </template>
-                      <template v-else-if="column.key === 'k9'">
+                      <template v-else-if="column.key === 'k7'">
+                        <template v-if="record.k7 == true">
+                          <a-row>
+                            <a-col :span="6">
+                              <div class="dot-true"></div>
+                            </a-col>
+                            <a-col :span="18">
+                              <div>在线</div>
+                            </a-col>
+                          </a-row>
+                        </template>
+                        <template v-else>
+                          <a-row>
+                            <a-col :span="6">
+                              <div class="dot-false"></div>
+                            </a-col>
+                            <a-col :span="18">
+                              <div>离线</div>
+                            </a-col>
+                          </a-row>
+                        </template>
+                      </template>
+                      <template v-else-if="column.key === 'k9a'">
+                        <a-row>
+                          <a-col :span="24">
+                            <div>{{ record.k9a }}</div>
+                          </a-col>
+                        </a-row>
+                        <a-row>
+                          <a-col :span="24">
+                            <div>{{ record.k9b }}</div>
+                          </a-col>
+                        </a-row>
+                      </template>
+                      <template v-else-if="column.key === 'k10a'">
+                        <a-row>
+                          <a-col :span="24">
+                            <div>{{ record.k10a }}</div>
+                          </a-col>
+                        </a-row>
+                        <a-row>
+                          <a-col :span="24">
+                            <div>{{ record.k10b }}</div>
+                          </a-col>
+                        </a-row>
+                      </template>
+                      <template v-else-if="column.key === 'key'">
                         <div><a>详情</a></div>
                       </template>
                     </template>
diff --git a/yudao-ui-admin-vben-master/src/views/stpagea/enterpriseCentre/enterpriseDetails/src/OperateRecords.vue b/yudao-ui-admin-vben-master/src/views/stpagea/enterpriseCentre/enterpriseDetails/src/OperateRecords.vue
new file mode 100644
index 0000000..086433f
--- /dev/null
+++ b/yudao-ui-admin-vben-master/src/views/stpagea/enterpriseCentre/enterpriseDetails/src/OperateRecords.vue
@@ -0,0 +1,169 @@
+<script lang="ts" setup>
+const headStyleV: any = { color: '#262626', 'background-color': '#F7F8FA', 'border-radius': '3px' }
+const columns: any = [
+  {
+    title: '操作时间',
+    dataIndex: 'k1',
+    key: 'k1',
+  },
+  {
+    title: '操作者',
+    dataIndex: 'k2',
+    key: 'k2',
+  },
+  {
+    title: '操作类型',
+    dataIndex: 'k3',
+    key: 'k3',
+  },
+  {
+    title: '操作详情',
+    dataIndex: 'k4',
+    key: 'k4',
+  }
+]
+const dataSource: any = [
+  {
+    key: '1',
+    k1: '2023-09-03 15:43:23',
+    k2: '康宁',
+    k3: '修改状态',
+    k4: '设为启用（备注内容：***）'
+  },
+  {
+    key: '2',
+    k1: '2023-09-03 15:43:23',
+    k2: '康宁',
+    k3: '修改状态',
+    k4: '设为停用（备注内容：***）'
+  },
+  {
+    key: '3',
+    k1: '2023-09-03 15:43:23',
+    k2: '康宁',
+    k3: '修改部门',
+    k4: '修改部门（旧值：***  新值：***）'
+  },
+  {
+    key: '4',
+    k1: '2023-09-03 15:43:23',
+    k2: '康宁',
+    k3: '修改职务',
+    k4: '修改职务（旧值：***  新值：***）'
+  },
+  {
+    key: '5',
+    k1: '2023-09-03 15:43:23',
+    k2: '康宁',
+    k3: '修改状态',
+    k4: '设为启用（备注内容：***）'
+  },
+  {
+    key: '6',
+    k1: '2023-09-03 15:43:23',
+    k2: '康宁',
+    k3: '修改状态',
+    k4: '设为停用（备注内容：***）'
+  },
+  {
+    key: '7',
+    k1: '2023-09-03 15:43:23',
+    k2: '康宁',
+    k3: '修改部门',
+    k4: '修改部门（旧值：***  新值：***）'
+  },
+  {
+    key: '8',
+    k1: '2023-09-03 15:43:23',
+    k2: '康宁',
+    k3: '修改职务',
+    k4: '修改职务（旧值：***  新值：***）'
+  },
+  {
+    key: '9',
+    k1: '2023-09-03 15:43:23',
+    k2: '康宁',
+    k3: '修改状态',
+    k4: '设为启用（备注内容：***）'
+  },
+  {
+    key: '10',
+    k1: '2023-09-03 15:43:23',
+    k2: '康宁',
+    k3: '修改状态',
+    k4: '设为停用（备注内容：***）'
+  },
+  {
+    key: '11',
+    k1: '2023-09-03 15:43:23',
+    k2: '康宁',
+    k3: '修改部门',
+    k4: '修改部门（旧值：***  新值：***）'
+  },
+  {
+    key: '12',
+    k1: '2023-09-03 15:43:23',
+    k2: '康宁',
+    k3: '修改职务',
+    k4: '修改职务（旧值：***  新值：***）'
+  },
+  {
+    key: '13',
+    k1: '2023-09-03 15:43:23',
+    k2: '康宁',
+    k3: '修改状态',
+    k4: '设为启用（备注内容：***）'
+  },
+  {
+    key: '14',
+    k1: '2023-09-03 15:43:23',
+    k2: '康宁',
+    k3: '修改状态',
+    k4: '设为停用（备注内容：***）'
+  },
+  {
+    key: '15',
+    k1: '2023-09-03 15:43:23',
+    k2: '康宁',
+    k3: '修改部门',
+    k4: '修改部门（旧值：***  新值：***）'
+  },
+  {
+    key: '16',
+    k1: '2023-09-03 15:43:23',
+    k2: '康宁',
+    k3: '修改职务',
+    k4: '修改职务（旧值：***  新值：***）'
+  },
+];
+</script>
+
+<template>
+  <a-row :wrap="false" class="basic-info-y1">
+    <a-col flex="1 1 auto">
+      <a-card title="操作记录" :bordered="false" style="border-radius: 3px;" :headStyle="headStyleV">
+        <a-table class="ant-table-striped" :dataSource="dataSource" :columns="columns"
+          :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-tr-b' : 'table-tr-a')"
+          :pagination="{ defaultPageSize: 100, hideOnSinglePage: true }">
+          <template #bodyCell="{ column, record }">
+          </template>
+        </a-table>
+      </a-card>
+    </a-col>
+  </a-row>
+</template>
+
+<style lang="less" scoped>
+:where(.css-dev-only-do-not-override-176pxz6) :deep(.ant-table-thead) .ant-table-cell {
+  background-color: rgb(245, 245, 245);
+  color: rgb(102, 102, 102);
+}
+
+:where(.css-dev-only-do-not-override-176pxz6) :deep(.table-tr-a) {
+  background-color: rgb(255, 255, 255);
+}
+
+:where(.css-dev-only-do-not-override-176pxz6) :deep(.table-tr-b) {
+  background-color: rgb(245, 245, 245);
+}
+</style>
\ No newline at end of file
diff --git a/yudao-ui-admin-vben-master/src/views/stpagea/enterpriseCentre/enterpriseDetails/src/OperationRecords.vue b/yudao-ui-admin-vben-master/src/views/stpagea/enterpriseCentre/enterpriseDetails/src/OperationRecords.vue
deleted file mode 100644
index 223f676..0000000
--- a/yudao-ui-admin-vben-master/src/views/stpagea/enterpriseCentre/enterpriseDetails/src/OperationRecords.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<script lang="ts" setup>
-</script>
-
-<template>
-  <div class="basic-information">
-    员工信息内容
-  </div>
-</template>
-
-<style lang="less" scoped>
-</style>
\ No newline at end of file
diff --git a/yudao-ui-admin-vben-master/src/views/stpagea/enterpriseCentre/enterpriseDetails/src/ProviderInfo.vue b/yudao-ui-admin-vben-master/src/views/stpagea/enterpriseCentre/enterpriseDetails/src/ProviderInfo.vue
index 4dd11b1..1f69bd1 100644
--- a/yudao-ui-admin-vben-master/src/views/stpagea/enterpriseCentre/enterpriseDetails/src/ProviderInfo.vue
+++ b/yudao-ui-admin-vben-master/src/views/stpagea/enterpriseCentre/enterpriseDetails/src/ProviderInfo.vue
@@ -1,11 +1,569 @@
 <script lang="ts" setup>
+import { ref, watch, h } from 'vue'
+import type { TreeProps } from 'ant-design-vue';
+import difference from 'lodash-es/difference';
+import type { Dayjs } from 'dayjs';
+import {
+  SearchOutlined,
+  UndoOutlined,
+  ReloadOutlined
+} from '@ant-design/icons-vue';
+
+
+type RangeValue = [Dayjs, Dayjs];
+const valTime = ref<RangeValue>();
+// 左边
+const treeData: TreeProps['treeData'] = [
+  {
+    title: '济钢城市矿产',
+    key: '0-0',
+    children: [
+      {
+        title: '城市矿产科技',
+        key: '0-0-1'
+      },
+      {
+        title: '日照济钢金属',
+        key: '0-0-2'
+      },
+      {
+        title: '济钢愿景工业',
+        key: '0-0-3',
+        children: [
+          {
+            title: '废钢',
+            key: '0-0-3-1'
+          },
+          {
+            title: '废铁',
+            key: '0-0-3-2'
+          },
+          {
+            title: '废铝',
+            key: '0-0-3-3'
+          },
+          {
+            title: '废纸',
+            key: '0-0-3-4'
+          },
+          {
+            title: '煤炭',
+            key: '0-0-3-5'
+          }
+        ]
+      },
+      {
+        title: '城市矿产科技（佛山）',
+        key: '0-0-4'
+      }
+    ],
+  }
+];
+
+const expandedKeys = ref<string[]>(['0-0']);
+const selectedKeys = ref<string[]>(['0-0-0', '0-0-1']);
+const checkedKeys = ref<string[]>(['0-0-0', '0-0-1']);
+watch(expandedKeys, () => {
+  console.log('expandedKeys', expandedKeys);
+});
+watch(selectedKeys, () => {
+  console.log('selectedKeys', selectedKeys);
+});
+watch(checkedKeys, () => {
+  console.log('checkedKeys', checkedKeys);
+});
+const handleExpand = (keys: string[], { expanded, node }) => {
+  // node.parent add from 3.0.0-alpha.10
+  const tempKeys = ((node.parent ? node.parent.children : treeData) || []).map(({ key }) => key);
+  if (expanded) {
+    expandedKeys.value = difference(keys, tempKeys).concat(node.key);
+  } else {
+    expandedKeys.value = keys;
+  }
+};
+// 右边
+const headStyleV: any = { color: '#262626', 'background-color': '#F7F8FA', 'border-radius': '3px' }
+const rowSelection = ref({
+  checkStrictly: false,
+  onChange: (selectedRowKeys: (string | number)[], selectedRows: any[]) => {
+    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
+  },
+  onSelect: (record: any, selected: boolean, selectedRows: any[]) => {
+    console.log(record, selected, selectedRows);
+  },
+  onSelectAll: (selected: boolean, selectedRows: any[], changeRows: any[]) => {
+    console.log(selected, selectedRows, changeRows);
+  },
+});
+const columns: any = [
+  {
+    title: '服务商名称',
+    dataIndex: 'k1a',
+    key: 'k1a',
+    sorter: true,
+    fixed: 'left',
+    width: 150
+  },
+  {
+    title: '服务商分类',
+    dataIndex: 'k2',
+    key: 'k2',
+    sorter: true,
+    width: 120
+  },
+  {
+    title: '服务商类型',
+    dataIndex: 'k3',
+    key: 'k3',
+    sorter: true,
+    width: 120
+  },
+  {
+    title: '资金款项',
+    dataIndex: 'k4',
+    key: 'k4',
+    sorter: true,
+    width: 120
+  },
+  {
+    title: '合作模式',
+    dataIndex: 'k5a',
+    key: 'k5a',
+    sorter: true,
+    width: 200
+  },
+  {
+    title: '隶属机构/业务线',
+    dataIndex: 'k6a',
+    key: 'k6a',
+    sorter: true,
+    width: 200
+  },
+  {
+    title: '状态',
+    dataIndex: 'k7',
+    key: 'k7',
+    sorter: true,
+    width: 200
+  },
+  {
+    title: '供应商分级',
+    dataIndex: 'k8',
+    key: 'k8',
+    sorter: true,
+    width: 200
+  },
+  {
+    title: '归属人员',
+    dataIndex: 'k9',
+    key: 'k9',
+    sorter: true,
+    width: 200
+  },
+  {
+    title: '新增时间',
+    dataIndex: 'k10a',
+    key: 'k10a',
+    sorter: true,
+    width: 200
+  },
+  {
+    title: '更新时间',
+    dataIndex: 'k11a',
+    key: 'k11a',
+    sorter: true,
+    width: 200
+  },
+  {
+    title: '操作',
+    dataIndex: 'key',
+    key: 'key',
+    fixed: 'right',
+    width: 100
+  }
+]
+const dataSource: any = [
+  {
+    key: '1',
+    k1a: '服务商名称',
+    k1b: '20230910001',
+    k2: '一级',
+    k3: '仓储企业',
+    k4: '垫资',
+    k5a: '买断',
+    k5b: '资源服务',
+    k6a: '济钢城市矿产',
+    k6b: '废钢',
+    k7: '已关闭',
+    k8: '1',
+    k9: '康宁',
+    k10a: '康宁',
+    k10b: '2023-09-03 23:26:08',
+    k11a: '康宁',
+    k11b: '2023-09-03 23:26:08',
+  },
+  {
+    key: '2',
+    k1a: '服务商名称',
+    k1b: '20230910002',
+    k2: '二级',
+    k3: '加工企业',
+    k4: '不垫资',
+    k5a: '买断',
+    k5b: '买断合作',
+    k6a: '济钢城市矿产',
+    k6b: '废钢',
+    k7: '待确认',
+    k8: '2',
+    k9: '开胜',
+    k10a: '康宁',
+    k10b: '2023-09-03 23:26:08',
+    k11a: '康宁',
+    k11b: '2023-09-03 23:26:08',
+  },
+  {
+    key: '3',
+    k1a: '服务商名称',
+    k1b: '20230910003',
+    k2: '三级',
+    k3: '运输企业',
+    k4: '垫资',
+    k5a: '买断',
+    k5b: '买断合作',
+    k6a: '济钢城市矿产',
+    k6b: '废钢',
+    k7: '待认证',
+    k8: '3',
+    k9: '云鹏',
+    k10a: '康宁',
+    k10b: '2023-09-03 23:26:08',
+    k11a: '康宁',
+    k11b: '2023-09-03 23:26:08',
+  },
+  {
+    key: '4',
+    k1a: '服务商名称',
+    k1b: '20230910004',
+    k2: '三级',
+    k3: '其他企业',
+    k4: '不垫资',
+    k5a: '买断',
+    k5b: '买断合作',
+    k6a: '济钢城市矿产',
+    k6b: '废钢',
+    k7: '待认证',
+    k8: '3',
+    k9: '云鹏',
+    k10a: '康宁',
+    k10b: '2023-09-03 23:26:08',
+    k11a: '康宁',
+    k11b: '2023-09-03 23:26:08',
+  },
+  {
+    key: '5',
+    k1a: '服务商名称',
+    k1b: '20230910005',
+    k2: '一级',
+    k3: '仓储企业',
+    k4: '垫资',
+    k5a: '买断',
+    k5b: '资源服务',
+    k6a: '济钢城市矿产',
+    k6b: '废钢',
+    k7: '已关闭',
+    k8: '1',
+    k9: '康宁',
+    k10a: '康宁',
+    k10b: '2023-09-03 23:26:08',
+    k11a: '康宁',
+    k11b: '2023-09-03 23:26:08',
+  },
+  {
+    key: '6',
+    k1a: '服务商名称',
+    k1b: '20230910006',
+    k2: '二级',
+    k3: '加工企业',
+    k4: '不垫资',
+    k5a: '买断',
+    k5b: '买断合作',
+    k6a: '济钢城市矿产',
+    k6b: '废钢',
+    k7: '待确认',
+    k8: '2',
+    k9: '开胜',
+    k10a: '康宁',
+    k10b: '2023-09-03 23:26:08',
+    k11a: '康宁',
+    k11b: '2023-09-03 23:26:08',
+  },
+  {
+    key: '7',
+    k1a: '服务商名称',
+    k1b: '20230910007',
+    k2: '三级',
+    k3: '运输企业',
+    k4: '不垫资',
+    k5a: '买断',
+    k5b: '买断合作',
+    k6a: '济钢城市矿产',
+    k6b: '废钢',
+    k7: '待认证',
+    k8: '3',
+    k9: '云鹏',
+    k10a: '康宁',
+    k10b: '2023-09-03 23:26:08',
+    k11a: '康宁',
+    k11b: '2023-09-03 23:26:08',
+  }
+];
 </script>
 
 <template>
-  <div class="basic-information">
-    服务商信息内容
-  </div>
+  <a-row :wrap="false" class="branch-y1">
+    <a-col flex="1 1 auto">
+      <a-card title="服务商信息" :bordered="false" style="border-radius: 3px;" :headStyle="headStyleV">
+        <a-row>
+          <a-col :span="4">
+            <div style="padding: 0px 20px;"><a-input placeholder="公司/业务线" /></div>
+            <div style="padding: 0px 20px;"><a-tree v-model:selectedKeys="selectedKeys" :expanded-keys="expandedKeys"
+                :tree-data="treeData" @expand="handleExpand">
+                <template #title="{ title, key }">
+                  <span v-if="key === '0-0-1-0'" style="color: #1890ff">{{ title }}</span>
+                  <template v-else>{{ title }}</template>
+                </template>
+              </a-tree></div>
+          </a-col>
+          <a-col :span="20">
+            <a-card title="当前：济钢城市矿产科技有限公司（总公司）" :bordered="false" style="border-radius: 3px;" :headStyle="headStyleV">
+              <a-row>
+                <a-col flex="1 1 auto" style="padding: 0px 0px 16px 0px;">
+                  <a-space :size="[8, 16]" wrap>
+                    <a-input placeholder="客户名称或编号" />
+                    <a-select allowClear placeholder="客户状态">
+                      <a-select-option value="opt1">待确认</a-select-option>
+                      <a-select-option value="opt2">待认证</a-select-option>
+                      <a-select-option value="opt3">待审核</a-select-option>
+                      <a-select-option value="opt4">待签署</a-select-option>
+                      <a-select-option value="opt5">正常合作</a-select-option>
+                      <a-select-option value="opt6">暂停合作</a-select-option>
+                      <a-select-option value="opt7">已关闭</a-select-option>
+                    </a-select>
+                    <a-select allowClear placeholder="客户类型">
+                      <a-select-option value="opt1">钢厂</a-select-option>
+                      <a-select-option value="opt2">钢贸企业</a-select-option>
+                      <a-select-option value="opt3">VIP大客户</a-select-option>
+                      <a-select-option value="opt4">其他企业</a-select-option>
+                    </a-select>
+                    <a-button type="primary" :icon="h(SearchOutlined)">查询</a-button>
+                    <a-button :icon="h(UndoOutlined)">重置</a-button>
+                  </a-space>
+                </a-col>
+                <a-col flex="0 0 20px" style="padding: 10px 0px 16px 0px;">
+                  <a-space :size="[8, 16]" wrap>
+                    <ReloadOutlined title="刷新列表" style="cursor: pointer;" />
+                  </a-space>
+                </a-col>
+              </a-row>
+              <a-row>
+                <a-col :span="24">
+                  <a-table class="ant-table-striped" :dataSource="dataSource" :row-selection="rowSelection"
+                    :columns="columns"
+                    :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-tr-b' : 'table-tr-a')"
+                    :scroll="{ x: 1500, y: 500 }">
+                    <template #bodyCell="{ column, record }">
+                      <template v-if="column.key === 'k1a'">
+                        <a>
+                          <a-row>
+                            <a-col :span="24">
+                              <div>{{ record.k1a }}</div>
+                            </a-col>
+                          </a-row>
+                          <a-row>
+                            <a-col :span="24">
+                              <div>{{ record.k1b }}</div>
+                            </a-col>
+                          </a-row>
+                        </a>
+                      </template>
+                      <template v-else-if="column.key === 'k5a'">
+                        <a-row>
+                          <a-col :span="24">
+                            <div>{{ record.k5a }}</div>
+                          </a-col>
+                        </a-row>
+                        <a-row>
+                          <a-col :span="24">
+                            <div>{{ record.k5b }}</div>
+                          </a-col>
+                        </a-row>
+                      </template>
+                      <template v-else-if="column.key === 'k6a'">
+                        <a-row>
+                          <a-col :span="24">
+                            <div>{{ record.k6a }}</div>
+                          </a-col>
+                        </a-row>
+                        <a-row>
+                          <a-col :span="24">
+                            <div>{{ record.k6b }}</div>
+                          </a-col>
+                        </a-row>
+                      </template>
+                      <template v-else-if="column.key === 'k4a'">
+                        <a-row>
+                          <a-col :span="24">
+                            <div>{{ record.k4a }}</div>
+                          </a-col>
+                        </a-row>
+                        <a-row>
+                          <a-col :span="24">
+                            <div>{{ record.k4b }}</div>
+                          </a-col>
+                        </a-row>
+                      </template>
+                      <template v-else-if="column.key === 'k5'">
+                        <template v-if="record.k5 == true">
+                          <div class="dot-true"></div>启用
+                        </template>
+                        <template v-else>
+                          <div class="dot-false"></div>禁用
+                        </template>
+                      </template>
+                      <template v-else-if="column.key === 'k7'">
+                        <template v-if="record.k7 == 'opt1'">
+                          <span class="dot-true"></span><span>已关闭</span>
+                        </template>
+                        <template v-if="record.k7 == 'opt1'">
+                          <a-row>
+                            <a-col :span="6">
+                              <div class="dot-true"></div>
+                            </a-col>
+                            <a-col :span="18">
+                              <div>已关闭</div>
+                            </a-col>
+                          </a-row>
+                        </template>
+                        <template v-if="record.k7 == 'opt1'">
+                          <a-row>
+                            <a-col :span="6">
+                              <div class="dot-true"></div>
+                            </a-col>
+                            <a-col :span="18">
+                              <div>已关闭</div>
+                            </a-col>
+                          </a-row>
+                        </template>
+                        <template v-if="record.k7 == 'opt1'">
+                          <a-row>
+                            <a-col :span="6">
+                              <div class="dot-true"></div>
+                            </a-col>
+                            <a-col :span="18">
+                              <div>已关闭</div>
+                            </a-col>
+                          </a-row>
+                        </template>
+                        <template v-if="record.k7 == 'opt1'">
+                          <a-row>
+                            <a-col :span="6">
+                              <div class="dot-true"></div>
+                            </a-col>
+                            <a-col :span="18">
+                              <div>已关闭</div>
+                            </a-col>
+                          </a-row>
+                        </template>
+                        <template v-if="record.k7 == 'opt1'">
+                          <a-row>
+                            <a-col :span="6">
+                              <div class="dot-true"></div>
+                            </a-col>
+                            <a-col :span="18">
+                              <div>已关闭</div>
+                            </a-col>
+                          </a-row>
+                        </template>
+                        <template v-else>
+                          <a-row>
+                            <a-col :span="6">
+                              <div class="dot-false"></div>
+                            </a-col>
+                            <a-col :span="18">
+                              <div>离线</div>
+                            </a-col>
+                          </a-row>
+                        </template>
+                      </template>
+                      <template v-else-if="column.key === 'k8'">
+                        <a-rate :value=record.k8 disabled />
+                      </template>
+                      <template v-else-if="column.key === 'k10a'">
+                        <a-row>
+                          <a-col :span="24">
+                            <div>{{ record.k10a }}</div>
+                          </a-col>
+                        </a-row>
+                        <a-row>
+                          <a-col :span="24">
+                            <div>{{ record.k10b }}</div>
+                          </a-col>
+                        </a-row>
+                      </template>
+                      <template v-else-if="column.key === 'k11a'">
+                        <a-row>
+                          <a-col :span="24">
+                            <div>{{ record.k10a }}</div>
+                          </a-col>
+                        </a-row>
+                        <a-row>
+                          <a-col :span="24">
+                            <div>{{ record.k10b }}</div>
+                          </a-col>
+                        </a-row>
+                      </template>
+                      <template v-else-if="column.key === 'key'">
+                        <div><a>详情</a></div>
+                      </template>
+                    </template>
+                  </a-table>
+                </a-col>
+              </a-row>
+            </a-card>
+          </a-col>
+        </a-row>
+      </a-card>
+    </a-col>
+  </a-row>
 </template>
 
 <style lang="less" scoped>
+:where(.css-dev-only-do-not-override-176pxz6) :deep(.ant-table-thead) .ant-table-cell {
+  background-color: rgb(245, 245, 245);
+  color: rgb(102, 102, 102);
+}
+
+:where(.css-dev-only-do-not-override-176pxz6) :deep(.table-tr-a) {
+  background-color: rgb(255, 255, 255);
+}
+
+:where(.css-dev-only-do-not-override-176pxz6) :deep(.table-tr-b) {
+  background-color: rgb(245, 245, 245);
+}
+
+.dot-true {
+  width: 10px;
+  height: 10px;
+  background-color: green;
+  border-radius: 100%;
+  margin: 7px 0px;
+}
+
+.dot-false {
+  width: 10px;
+  height: 10px;
+  background-color: red;
+  border-radius: 100%;
+  margin: 7px 0px;
+}
 </style>
\ No newline at end of file
diff --git a/yudao-ui-admin-vben-master/src/views/stpagea/enterpriseCentre/enterpriseDetails/src/SupplierInfo.vue b/yudao-ui-admin-vben-master/src/views/stpagea/enterpriseCentre/enterpriseDetails/src/SupplierInfo.vue
index d4a99ac..16de80e 100644
--- a/yudao-ui-admin-vben-master/src/views/stpagea/enterpriseCentre/enterpriseDetails/src/SupplierInfo.vue
+++ b/yudao-ui-admin-vben-master/src/views/stpagea/enterpriseCentre/enterpriseDetails/src/SupplierInfo.vue
@@ -1,11 +1,455 @@
 <script lang="ts" setup>
+import { ref, watch, h } from 'vue'
+import type { TreeProps } from 'ant-design-vue';
+import difference from 'lodash-es/difference';
+import type { Dayjs } from 'dayjs';
+import {
+  SearchOutlined,
+  UndoOutlined,
+  ReloadOutlined
+} from '@ant-design/icons-vue';
+
+
+type RangeValue = [Dayjs, Dayjs];
+const valTime = ref<RangeValue>();
+// 左边
+const treeData: TreeProps['treeData'] = [
+  {
+    title: '济钢城市矿产',
+    key: '0-0',
+    children: [
+      {
+        title: '城市矿产科技',
+        key: '0-0-1'
+      },
+      {
+        title: '日照济钢金属',
+        key: '0-0-2'
+      },
+      {
+        title: '济钢愿景工业',
+        key: '0-0-3',
+        children: [
+          {
+            title: '废钢',
+            key: '0-0-3-1'
+          },
+          {
+            title: '废铁',
+            key: '0-0-3-2'
+          },
+          {
+            title: '废铝',
+            key: '0-0-3-3'
+          },
+          {
+            title: '废纸',
+            key: '0-0-3-4'
+          },
+          {
+            title: '煤炭',
+            key: '0-0-3-5'
+          }
+        ]
+      },
+      {
+        title: '城市矿产科技（佛山）',
+        key: '0-0-4'
+      }
+    ],
+  }
+];
+
+const expandedKeys = ref<string[]>(['0-0']);
+const selectedKeys = ref<string[]>(['0-0-0', '0-0-1']);
+const checkedKeys = ref<string[]>(['0-0-0', '0-0-1']);
+watch(expandedKeys, () => {
+  console.log('expandedKeys', expandedKeys);
+});
+watch(selectedKeys, () => {
+  console.log('selectedKeys', selectedKeys);
+});
+watch(checkedKeys, () => {
+  console.log('checkedKeys', checkedKeys);
+});
+const handleExpand = (keys: string[], { expanded, node }) => {
+  // node.parent add from 3.0.0-alpha.10
+  const tempKeys = ((node.parent ? node.parent.children : treeData) || []).map(({ key }) => key);
+  if (expanded) {
+    expandedKeys.value = difference(keys, tempKeys).concat(node.key);
+  } else {
+    expandedKeys.value = keys;
+  }
+};
+// 右边
+const headStyleV: any = { color: '#262626', 'background-color': '#F7F8FA', 'border-radius': '3px' }
+const rowSelection = ref({
+  checkStrictly: false,
+  onChange: (selectedRowKeys: (string | number)[], selectedRows: any[]) => {
+    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
+  },
+  onSelect: (record: any, selected: boolean, selectedRows: any[]) => {
+    console.log(record, selected, selectedRows);
+  },
+  onSelectAll: (selected: boolean, selectedRows: any[], changeRows: any[]) => {
+    console.log(selected, selectedRows, changeRows);
+  },
+});
+const columns: any = [
+  {
+    title: '客户名称',
+    dataIndex: 'k1a',
+    key: 'k1a',
+    sorter: true,
+    fixed: 'left',
+    width: 150
+  },
+  {
+    title: '客户分类',
+    dataIndex: 'k2',
+    key: 'k2',
+    sorter: true,
+    width: 120
+  },
+  {
+    title: '客户类型',
+    dataIndex: 'k3',
+    key: 'k3',
+    sorter: true,
+    width: 120
+  },
+  {
+    title: '资金款项',
+    dataIndex: 'k4',
+    key: 'k4',
+    sorter: true,
+    width: 120
+  },
+  {
+    title: '合作模式',
+    dataIndex: 'k5a',
+    key: 'k5a',
+    sorter: true,
+    width: 200
+  },
+  {
+    title: '隶属机构/业务线',
+    dataIndex: 'k6a',
+    key: 'k6a',
+    sorter: true,
+    width: 200
+  },
+  {
+    title: '状态',
+    dataIndex: 'k7',
+    key: 'k7',
+    sorter: true,
+    width: 200
+  },
+  {
+    title: '客户分级',
+    dataIndex: 'k8',
+    key: 'k8',
+    sorter: true,
+    width: 200
+  },
+  {
+    title: '归属人员',
+    dataIndex: 'k9',
+    key: 'k9',
+    sorter: true,
+    width: 200
+  },
+  {
+    title: '新增时间',
+    dataIndex: 'k10a',
+    key: 'k10a',
+    sorter: true,
+    width: 200
+  },
+  {
+    title: '更新时间',
+    dataIndex: 'k11a',
+    key: 'k11a',
+    sorter: true,
+    width: 200
+  },
+  {
+    title: '操作',
+    dataIndex: 'key',
+    key: 'key',
+    fixed: 'right',
+    width: 100
+  }
+]
+const dataSource: any = [
+  {
+    key: '1',
+    k1a: '客户名称',
+    k1b: '20230910001',
+    k2: '一级',
+    k3: '钢厂',
+    k4: '垫资',
+    k5a: '联营',
+    k5b: '业绩返点',
+    k6a: '济钢城市矿产',
+    k6b: '废钢',
+    k7: '已关闭',
+    k8: '1',
+    k9: '康宁',
+    k10a: '康宁',
+    k10b: '2023-09-03 23:26:08',
+    k11a: '康宁',
+    k11b: '2023-09-03 23:26:08',
+  }
+];
 </script>
 
 <template>
-  <div class="basic-information">
-    供应商信息内容
-  </div>
+  <a-row :wrap="false" class="branch-y1">
+    <a-col flex="1 1 auto">
+      <a-card title="客户信息" :bordered="false" style="border-radius: 3px;" :headStyle="headStyleV">
+        <a-row>
+          <a-col :span="4">
+            <div style="padding: 0px 20px;"><a-input placeholder="公司/业务线" /></div>
+            <div style="padding: 0px 20px;"><a-tree v-model:selectedKeys="selectedKeys" :expanded-keys="expandedKeys"
+                :tree-data="treeData" @expand="handleExpand">
+                <template #title="{ title, key }">
+                  <span v-if="key === '0-0-1-0'" style="color: #1890ff">{{ title }}</span>
+                  <template v-else>{{ title }}</template>
+                </template>
+              </a-tree></div>
+          </a-col>
+          <a-col :span="20">
+            <a-card title="当前：济钢城市矿产科技有限公司（总公司）" :bordered="false" style="border-radius: 3px;" :headStyle="headStyleV">
+              <a-row>
+                <a-col flex="1 1 auto" style="padding: 0px 0px 16px 0px;">
+                  <a-space :size="[8, 16]" wrap>
+                    <a-input placeholder="客户名称或编号" />
+                    <a-select allowClear placeholder="客户状态">
+                      <a-select-option value="opt1">待确认</a-select-option>
+                      <a-select-option value="opt2">待认证</a-select-option>
+                      <a-select-option value="opt3">待审核</a-select-option>
+                      <a-select-option value="opt4">待签署</a-select-option>
+                      <a-select-option value="opt5">正常合作</a-select-option>
+                      <a-select-option value="opt6">暂停合作</a-select-option>
+                      <a-select-option value="opt7">已关闭</a-select-option>
+                    </a-select>
+                    <a-select allowClear placeholder="客户类型">
+                      <a-select-option value="opt1">钢厂</a-select-option>
+                      <a-select-option value="opt2">钢贸企业</a-select-option>
+                      <a-select-option value="opt3">VIP大客户</a-select-option>
+                      <a-select-option value="opt4">其他企业</a-select-option>
+                    </a-select>
+                    <a-button type="primary" :icon="h(SearchOutlined)">查询</a-button>
+                    <a-button :icon="h(UndoOutlined)">重置</a-button>
+                  </a-space>
+                </a-col>
+                <a-col flex="0 0 20px" style="padding: 10px 0px 16px 0px;">
+                  <a-space :size="[8, 16]" wrap>
+                    <ReloadOutlined title="刷新列表" style="cursor: pointer;" />
+                  </a-space>
+                </a-col>
+              </a-row>
+              <a-row>
+                <a-col :span="24">
+                  <a-table class="ant-table-striped" :dataSource="dataSource" :row-selection="rowSelection"
+                    :columns="columns"
+                    :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-tr-b' : 'table-tr-a')"
+                    :scroll="{ x: 1500, y: 500 }">
+                    <template #bodyCell="{ column, record }">
+                      <template v-if="column.key === 'k1a'">
+                        <a>
+                          <a-row>
+                            <a-col :span="24">
+                              <div>{{ record.k1a }}</div>
+                            </a-col>
+                          </a-row>
+                          <a-row>
+                            <a-col :span="24">
+                              <div>{{ record.k1b }}</div>
+                            </a-col>
+                          </a-row>
+                        </a>
+                      </template>
+                      <template v-else-if="column.key === 'k5a'">
+                        <a-row>
+                          <a-col :span="24">
+                            <div>{{ record.k5a }}</div>
+                          </a-col>
+                        </a-row>
+                        <a-row>
+                          <a-col :span="24">
+                            <div>{{ record.k5b }}</div>
+                          </a-col>
+                        </a-row>
+                      </template>
+                      <template v-else-if="column.key === 'k6a'">
+                        <a-row>
+                          <a-col :span="24">
+                            <div>{{ record.k6a }}</div>
+                          </a-col>
+                        </a-row>
+                        <a-row>
+                          <a-col :span="24">
+                            <div>{{ record.k6b }}</div>
+                          </a-col>
+                        </a-row>
+                      </template>
+                      <template v-else-if="column.key === 'k4a'">
+                        <a-row>
+                          <a-col :span="24">
+                            <div>{{ record.k4a }}</div>
+                          </a-col>
+                        </a-row>
+                        <a-row>
+                          <a-col :span="24">
+                            <div>{{ record.k4b }}</div>
+                          </a-col>
+                        </a-row>
+                      </template>
+                      <template v-else-if="column.key === 'k5'">
+                        <template v-if="record.k5 == true">
+                          <div class="dot-true"></div>启用
+                        </template>
+                        <template v-else>
+                          <div class="dot-false"></div>禁用
+                        </template>
+                      </template>
+                      <template v-else-if="column.key === 'k7'">
+                        <template v-if="record.k7 == 'opt1'">
+                          <span class="dot-true"></span><span>已关闭</span>
+                        </template>
+                        <template v-if="record.k7 == 'opt1'">
+                          <a-row>
+                            <a-col :span="6">
+                              <div class="dot-true"></div>
+                            </a-col>
+                            <a-col :span="18">
+                              <div>已关闭</div>
+                            </a-col>
+                          </a-row>
+                        </template>
+                        <template v-if="record.k7 == 'opt1'">
+                          <a-row>
+                            <a-col :span="6">
+                              <div class="dot-true"></div>
+                            </a-col>
+                            <a-col :span="18">
+                              <div>已关闭</div>
+                            </a-col>
+                          </a-row>
+                        </template>
+                        <template v-if="record.k7 == 'opt1'">
+                          <a-row>
+                            <a-col :span="6">
+                              <div class="dot-true"></div>
+                            </a-col>
+                            <a-col :span="18">
+                              <div>已关闭</div>
+                            </a-col>
+                          </a-row>
+                        </template>
+                        <template v-if="record.k7 == 'opt1'">
+                          <a-row>
+                            <a-col :span="6">
+                              <div class="dot-true"></div>
+                            </a-col>
+                            <a-col :span="18">
+                              <div>已关闭</div>
+                            </a-col>
+                          </a-row>
+                        </template>
+                        <template v-if="record.k7 == 'opt1'">
+                          <a-row>
+                            <a-col :span="6">
+                              <div class="dot-true"></div>
+                            </a-col>
+                            <a-col :span="18">
+                              <div>已关闭</div>
+                            </a-col>
+                          </a-row>
+                        </template>
+                        <template v-else>
+                          <a-row>
+                            <a-col :span="6">
+                              <div class="dot-false"></div>
+                            </a-col>
+                            <a-col :span="18">
+                              <div>离线</div>
+                            </a-col>
+                          </a-row>
+                        </template>
+                      </template>
+                      <template v-else-if="column.key === 'k8'">
+                        <a-rate :value=record.k8 disabled />
+                      </template>
+                      <template v-else-if="column.key === 'k10a'">
+                        <a-row>
+                          <a-col :span="24">
+                            <div>{{ record.k10a }}</div>
+                          </a-col>
+                        </a-row>
+                        <a-row>
+                          <a-col :span="24">
+                            <div>{{ record.k10b }}</div>
+                          </a-col>
+                        </a-row>
+                      </template>
+                      <template v-else-if="column.key === 'k11a'">
+                        <a-row>
+                          <a-col :span="24">
+                            <div>{{ record.k10a }}</div>
+                          </a-col>
+                        </a-row>
+                        <a-row>
+                          <a-col :span="24">
+                            <div>{{ record.k10b }}</div>
+                          </a-col>
+                        </a-row>
+                      </template>
+                      <template v-else-if="column.key === 'key'">
+                        <div><a>详情</a></div>
+                      </template>
+                    </template>
+                  </a-table>
+                </a-col>
+              </a-row>
+            </a-card>
+          </a-col>
+        </a-row>
+      </a-card>
+    </a-col>
+  </a-row>
 </template>
 
 <style lang="less" scoped>
+:where(.css-dev-only-do-not-override-176pxz6) :deep(.ant-table-thead) .ant-table-cell {
+  background-color: rgb(245, 245, 245);
+  color: rgb(102, 102, 102);
+}
+
+:where(.css-dev-only-do-not-override-176pxz6) :deep(.table-tr-a) {
+  background-color: rgb(255, 255, 255);
+}
+
+:where(.css-dev-only-do-not-override-176pxz6) :deep(.table-tr-b) {
+  background-color: rgb(245, 245, 245);
+}
+
+.dot-true {
+  width: 10px;
+  height: 10px;
+  background-color: green;
+  border-radius: 100%;
+  margin: 7px 0px;
+}
+
+.dot-false {
+  width: 10px;
+  height: 10px;
+  background-color: red;
+  border-radius: 100%;
+  margin: 7px 0px;
+}
 </style>
\ No newline at end of file