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

<template>
  <bs-table v-bind="tableOptions">
    <template #toolbarTop>
      <div class="tool-bar-top">
        <bs-tab-bar :tab-list="tabList" mode="capsule" v-model:active-key="activeKey"/>
        <a-button type="primary">
          <template #icon>
            <PlusSquareOutlined />
          </template>
          <span>添加竞争对手</span>
        </a-button>
      </div>
    </template>
  </bs-table>
</template>

<script setup lang="jsx">
  import { useBsTable, BsTable, BsTabBar } from '/@/components/BsUi/index.js';
  import { h, onMounted, ref } from 'vue';
  import { message } from 'ant-design-vue';
  import { BorderOuterOutlined, SearchOutlined, PlusSquareOutlined } from '@ant-design/icons-vue';
  import { DISPLAY_STATE } from '/@/components/BsUi/constant.js';

  const activeKey = ref("tab1");

  const tabList = ref([
    {
      label: '客户投资',
      key: 'tab1',
    },
    {
      label: '竞争对手',
      key: 'tab2',
    },
    {
      label: '历史项目报价',
      key: 'tab3',
    },
  ]);

  const {
    tableOptions,
    setTablePropsValue: setValue,
    getTablePropsValue: getValue,
  } = useBsTable({
    tableOptions: {
      toolbarTopConfig: {
        enable: true,
      },
      gridOptions: {
        loading: false,
        columns: [
          {
            type: 'seq',
            width: 80,
          },
          {
            title: "竞争对手",
            field: "name1",
            width: 150,
          },
          {
            title: "报价管理",
            field: "name2",
            width: 150,
          },
          {
            title: "单位类型",
            field: "name3",
            width: 150,
          },
          {
            title: "注册资本(元)",
            field: "name4",
            width: 150,
          },
          {
            title: "注册日期",
            field: "name5",
            width: 150,
          },
          {
            title: "员工人数",
            field: "name6",
            width: 150,
          },
          {
            title: "资源管理",
            field: "name7",
            width: 150,
          },
          {
            title: "优势分析",
            field: "name8",
            width: 150,
          },
          {
            title: "劣势分析",
            field: "name8",
            width: 150,
          },
          {
            title: "备注说明",
            field: "name9",
            width: 150,
          },
          {
            title: "添加人",
            field: "name10",
            width: 150,
          },
          {
            title: "添加时间",
            field: "name11",
            width: 150,
          },
          {
            // fixed: 'right',
            cellRender: {
              name: 'CellOption',
              extraProps: {
                buttons: [
                  {
                    title: '编辑',
                    code: 'edit',
                    display: ({ row }) => {
                      return DISPLAY_STATE.VISIBLE;
                    },
                    disabled({ row }) {
                      return false;
                    },
                    onClick({ row }) {},
                    extraProps: {},
                  },
                  {
                    title: '删除',
                    code: 'delete',
                    display: ({ row }) => {
                      return DISPLAY_STATE.VISIBLE;
                    },
                    disabled({ row }) {
                      return false;
                    },
                    onClick({ row }) {},
                    extraProps: {},
                  },
                ],
              },
            },
          },
        ],
        data: [], // 模拟数据源
      },
      searchConfig: {
        enable: false,
      },
      pagerConfig: {
        enable: false,
      },
      toolbarConfig: {
        enable: false,
      },
    },
  });
</script>

<style scoped lang="scss">
  .tool-bar-top {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
</style>