BoundLink-Plate-UI/src/views/market-manage/external-manage/clue-management/view-details/components/CooperativeProject.vue

<template>
  <a-layout class="management-container">
    <!-- 左侧单位树形结构 -->
<!--    <a-layout-sider width="300" class="left-sider">-->
<!--      <div class="decision-framework">-->
<!--        <h3 class="section-title">决策框架构</h3>-->

<!--        &lt;!&ndash; 业主单位 &ndash;&gt;-->
<!--        <div class="company-section">-->
<!--          <h4 class="company-title">业主单位</h4>-->
<!--          <div class="group-section">-->
<!--            <h5 class="group-title">集团公司名称信息展示位置</h5>-->
<!--            <a-list :data-source="ownerSubsidiaries" :bordered="false" size="small">-->
<!--              <template #renderItem="{ item }">-->
<!--                <a-list-item class="subsidiary-item">{{ item }}</a-list-item>-->
<!--              </template>-->
<!--            </a-list>-->
<!--          </div>-->
<!--        </div>-->

<!--        &lt;!&ndash; 总承包单位 &ndash;&gt;-->
<!--        <div class="company-section">-->
<!--          <h4 class="company-title">总承包单位</h4>-->
<!--          <div class="group-section">-->
<!--            <h5 class="group-title">集团公司名称信息展示位置</h5>-->
<!--            <a-list :data-source="contractorSubsidiaries" :bordered="false" size="small">-->
<!--              <template #renderItem="{ item }">-->
<!--                <a-list-item class="subsidiary-item">{{ item }}</a-list-item>-->
<!--              </template>-->
<!--            </a-list>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </a-layout-sider>-->

    <!-- 右侧人员表格 -->
    <a-layout-content class="right-content">
      <div class="association-chain">
        <h3 class="section-title">关联链列表</h3>
        <bs-table v-bind="tableOptions">
          <template #toolbarLeft>
            <a-space>
              <span>累计留资客户 283人</span>
            </a-space>
          </template>
        </bs-table>
<!--        <a-table-->
<!--            :columns="columns"-->
<!--            :data-source="dataSource"-->
<!--            :pagination="false"-->
<!--            size="middle"-->
<!--            bordered-->
<!--        >-->
<!--          <template #bodyCell="{ column, record }">-->
<!--            <template v-if="column.key === 'operation'">-->
<!--              <a-space>-->
<!--                <a-button type="link" size="small" @click="handleEdit(record)">编辑</a-button>-->
<!--                <a-button type="link" size="small" danger @click="handleDelete(record)">删除</a-button>-->
<!--              </a-space>-->
<!--            </template>-->
<!--          </template>-->
<!--        </a-table>-->
      </div>
    </a-layout-content>
  </a-layout>
</template>

<script setup>
import { ref } from 'vue';
import {
  Layout,
  LayoutSider,
  LayoutContent,
  List,
  ListItem,
  Table,
  Button,
  Space,
  message
} from 'ant-design-vue';
import BsTable, {useBsTable} from "/@/components/BsUi/Table/index.js";

const ownerSubsidiaries = [
  '下属公司名称信息展示',
  '下属公司名称信息展示位置',
  '下属公司名称信息展示位置',
  '下属公司名称信息展示位置',
  '下属公司名称信息展示位置',
  '下属公司名称信息展示位置',
  '下属公司名称信息展示位置',
  '下属公司名称信息展示位置'
];

const contractorSubsidiaries = [
  '下属公司名称信息展示位置',
  '下属公司名称信息展示位置'
];
const {
  tableOptions,
  setTablePropsValue: setValue,
  getTablePropsValue: getValue,
} = useBsTable({
  tableOptions: {
    url: '',
    gridOptions: {
      loading: false,
      columns: [
        {
          field: 'knowRunyang',
          title: '姓名',
        },
        {
          field: 'knowRunyang',
          title: '性别',
        },
        {
          field: 'companyName',
          title: '年龄',

        },
        {
          field: 'address',
          title: '联系电话',
        },
        {
          field: 'contact',
          title: '类型',
        },
        {
          field: 'contactPhone',
          title: '职务',
        },
        {
          field: 'post',
          title: '邮箱',
        },
        {
          field: 'needDescription',
          title: '关系深度',
        },
        {
          field: 'communicativeProject',
          title: '爱好',
        },
        {
          field: 'projectDescription',
          title: '家庭情况',
        },
        {
          field: 'follow',
          title: '家庭住址',
        },
        {
          field: 'follow',
          title: '操作',
        },
      ],
    },
    pagerConfig: {
      enabled: true,
      pageSize: 10,
      pageNum: 1,
      total: 0,
      isFixed: false
    },
    toolbarConfig: {
      enable: false,
    },
    tableSearchBeforeBiz() {
      const searchParams = getValue('searchConfig.data');
      setValue('searchConfig.data', {...searchParams, id: id});
    },
  },
});


const handleEdit = (record) => {
  message.info(`编辑 ${record.name}`);
  // 这里添加实际的编辑逻辑
};

const handleDelete = (record) => {
  // dataSource.value = dataSource.value.filter(item => item.key !== record.key);
  // message.success(`已删除 ${record.name}`);
};
</script>

<style scoped>
.management-container {
  height: 100vh;
  background: #fff;
}

.left-sider {
  background: #fff;
  border-right: 1px solid #f0f0f0;
  padding: 16px;
  overflow-y: auto;
}

.right-content {
  padding: 16px;
  overflow-y: auto;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 16px;
  color: #333;
}

.company-section {
  margin-bottom: 24px;
}

.company-title {
  font-size: 15px;
  font-weight: bold;
  margin: 12px 0 8px 0;
  color: #333;
}

.group-title {
  font-size: 14px;
  font-weight: normal;
  margin: 8px 0;
  color: #666;
  padding-left: 8px;
}

.subsidiary-item {
  padding: 4px 0 4px 16px;
  font-size: 13px;
  color: #666;
}

/* 调整列表项样式 */
:deep(.ant-list-item) {
  padding: 0 !important;
  border: none !important;
}

/* 表格样式调整 */
:deep(.ant-table) {
  background: #fff;
}

:deep(.ant-table-thead > tr > th) {
  background: #fafafa;
  font-weight: bold;
}
</style>