BoundLink-Plate-UI/src/views/support-manage/competition/opponent/index.vue

<template>
  <BsPageWrapper class="table-demo">
    <bs-table v-bind="tableOptions">
      <template #searchRight>
        <div>
          <a-button type="primary" @click="handleOpponentRegistration">
            <span>竞争对手登记</span>
          </a-button>
        </div>
      </template>
      <template #slotVue_default="{ row }">
        <a-dropdown>
          <a class="ant-dropdown-link" @click.prevent>{{ row.qualificationManage }}</a>
          <template #overlay>
            <a-menu>
              <a-menu-item>
                <a-table :dataSource="row.qualificationList" :columns="columns" :pagination="false" style="width: 350px;"/>
              </a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>
      </template>
    </bs-table>
  </BsPageWrapper>
</template>

<script setup lang="jsx">
  import BsTable, { useBsTable } from '/@/components/BsUi/Table/index.js';
  import { onMounted, ref } from 'vue';
  import { useRouter } from 'vue-router';
  import { DISPLAY_STATE } from '/@/components/BsUi/constant.js';

  const router = useRouter();
  const columns = ref([
    {
      title: '资质名称',
      dataIndex: 'qualificationList',
      key: 'qualificationList',
      align: 'center',
      width: '200px',
      customRender: ({record}) => {
        console.log('4343', record);
        return <div style="text-align: left;">{record.qualificationName[0].valueName}</div>
      },
    },
  ]);

  onMounted(() => {});

  const { tableOptions, setTablePropsValue, getTablePropsValue, refreshTable } = useBsTable({
    tableOptions: {
      url: '/supports/competitor/queryPage',
      gridOptions: {
        loading: false,
        columns: [
          {
            type: 'seq',
            width: 80,
          },
          {
            field: 'competitorName',
            title: '竞争对手名称',
            align: 'center',
          },
          {
            field: 'competitorId',
            title: '竞争对手ID',
            align: 'center',
          },
          {
            field: 'formerName',
            title: '曾用名',
            align: 'center',
          },
          {
            field: 'address',
            title: '注册地址',
            align: 'center',
          },
          {
            // field: 'flatsType',
            title: '单位类型',
            align: 'center',
            slots: {
              default({ row, column }) {
                return <span>{row?.attribute?.[0].valueName}</span>;
              },
            },
          },
          {
            field: 'registeredCapital',
            title: '注册资本(元)',
            align: 'center',
          },
          {
            field: 'registeredTime',
            title: '注册日期',
            align: 'center',
          },
          {
            field: 'employeeNumber',
            title: '员工人数',
            align: 'center',
          },
          {
            field: 'qualificationManage',
            title: '累计资质管理',
            align: 'center',
            slots: {
              default: 'slotVue_default',
            },
          },
          {
            field: 'biddingNumber',
            title: '已登记参标数量',
            align: 'center',
          },
          {
            field: 'winningNumber',
            title: '已登记中标数量',
            align: 'center',
          },
          {
            field: 'createUserId',
            title: '添加人',
            align: 'center',
            slots: {
              default({ row, column }) {
                return <span>{row?.createUserId?.actualName}</span>;
              },
            },
          },
          {
            field: 'createTime',
            title: '添加时间',
            align: 'center',
          },
          {
            cellRender: {
              name: 'CellOption',
              extraProps: {
                buttons: [
                  {
                    title: '查看详情',
                    code: 'view',
                    display: ({ row }) => {
                      return DISPLAY_STATE.VISIBLE;
                    },
                    disabled({ row }) {
                      return false;
                    },
                    onClick({ row }) {
                      goDetailPage(row);
                    },
                    extraProps: {},
                  },
                ],
              },
            },
          },
        ],
      },
      searchConfig: {
        enabled: true,
        fieldSpan: 4,
        fields: [
          {
            field: '',
            component: 'a-input',
            componentProps: {
              placeholder: '请输入竞争对手名称',
            },
          },
          {
            field: '',
            component: 'a-select',
            componentProps: {
              placeholder: '请选择单位类型',
            },
          },
          {
            field: '',
            component: 'a-select',
            componentProps: {
              placeholder: '请选择资质',
            },
          },
        ],
      },
    },
  });

  const goDetailPage = (record) => {
    console.log(record.id);
    router.push({
      path: '/support-manage/competition/opponent/opponent-detail',
      query: {
        id: record.id,
      },
    });
  };

  const handleOpponentRegistration = () => {
    router.push('/support-manage/competition/opponent/create-opponent');
  };
</script>

<style scoped lang="scss">
  .table-demo {
  }
</style>