01-table

<template>
  <div class="order-list">
    <Table
      bordered
      :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : undefined)"
      :columns="columns"
      :row-key="(record) => record.freightId"
      :dataSource="state.tableInfo"
      :scroll="{ x: '30%', y: '30%' }"
      :pagination="state.pagination"
      :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }"
      @change="pageChange"
      size="middle"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'tizhong'">
          <p>{{ record.freightRangeStart }} - {{ record.freightRangeEnd }}</p>
          <p>{{ record.freightUnitCount }}</p>
        </template>
        <template v-if="column.key === 'orderCode'">
          <p>{{ record.freightOrderCode }}</p>
          <p>{{ record.transportOrderMainCode }}</p>
        </template>
        <template v-if="column.key === 'swineryNumber'">{{ record.swineryNumber }}</template>
        <template v-if="column.key === 'action'">
          <Button type="link" style="padding: 0" @click="emitHandle('dispatch', column.freightId)"
            >派单</Button
          >
          <Button
            type="link"
            style="padding: 0 10px"
            @click="emitHandle('detail', column.freightId)"
            >详情</Button
          >
          <Tooltip placement="bottom">
            <template #title>
              <ul>
                <li>
                  <Button
                    type="link"
                    style="color: #fff"
                    @click="emitHandle('edit', column.freightId)"
                  >
                    编辑
                  </Button>
                </li>
                <li>
                  <Button
                    type="link"
                    style="color: #fff"
                    @click="emitHandle('copy', column.freightId)"
                  >
                    复制
                  </Button>
                </li>
                <li>
                  <Button
                    type="link"
                    style="color: #fff"
                    @click="emitHandle('abolish', column.freightId)"
                  >
                    作废
                  </Button>
                </li>
              </ul>
            </template>
            <Button type="link" style="padding: 0">更多</Button>
          </Tooltip>
        </template>
      </template>
    </Table>
  </div>
</template>
<script lang="ts" setup>
import { reactive, UnwrapRef } from 'vue';
// import { State, SearchForm } from './../data/contentdata';
import { Tooltip, Button, Table, TableColumnType } from 'ant-design-vue';
import { OrderListApi } from '/@/api/order/shipperOrder';

type Key = string | number;

interface SearchForm {
  pageNum: number;
  pageSize: number;
}
interface TableList {
  [proName: string]: string | number | null | boolean;
}
interface Pagination {
  total: number;
}
interface State {
  uploadLoading: boolean;
  isSelected: boolean;
  selectedRowKeys: Key[];
  selectedRowIndex: Key[];
  pagination: Pagination;
  tableInfo: TableList[];
  factoryList: any[];
}

const emit = defineEmits(['emit-handle']);

let formState: UnwrapRef<SearchForm> = reactive({
    pageSize: 10,
    pageNum: 1,
  }),
  state: State = reactive({
    factoryList: [],
    tableInfo: [],
    uploadLoading: false,
    isSelected: false,
    selectedRowIndex: [],
    selectedRowKeys: [],
    pagination: {
      hideOnSinglePage: true,
      showQuickJumper: true,
      showSizeChanger: true,
      showTotal: (total) => `共${total}条数据`,
      total: 0,
    },
  });

// table-------------------开始
getTransportFeeList(formState);
state.tableInfo = [
  {
    freightId: '682258055720677376',
    freightOrderCode: '6666666',
    businessTypeName: '666666',
    planDate: '2022-05-06',
    loadStartDate: null,
    sendFactoryName: '66666',
    freightRangeStart: null,
    freightRangeEnd: null,
    freightUnitCount: 140,
    salePlanNumber: '5666666666,666666',
    swineryNumber: '',
    transportOrderMainCode: null,
  },
];
async function getTransportFeeList(params) {
  const res = await OrderListApi(params);
  state.tableInfo = res.list;
  state.pagination.total = res.total;
}

const columns: TableColumnType[] = [
  { width: 130, title: '计划日期', dataIndex: 'planDate', key: 'planDate' },
  {
    width: 200,
    title: '发货信息',
    dataIndex: 'sendFactoryName',
    key: 'sendFactoryName',
  },
  { width: 100, title: '体重段/头', dataIndex: 'tizhong', key: 'tizhong' },
  {
    width: 180,
    title: '批次',
    dataIndex: 'swineryNumber',
    key: 'swineryNumber',
  },
  {
    width: 120,
    title: '计划装猪时间',
    dataIndex: 'loadStartDate',
    key: 'loadStartDate',
  },
  { width: 180, title: '货源单/运单号', dataIndex: 'orderCode', key: 'orderCode' },
  {
    width: 160,
    title: '操作',
    dataIndex: '',
    key: 'action',
    // fixed: 'right',
    align: 'center',
  },
];
const pageChange = (pagination) => {
  formState.pageNum = pagination.current;
  formState.pageSize = pagination.pageSize;
  getTransportFeeList(formState);
};
const onSelectChange = (inxArr: Key[]) => {
  console.log('selectedRowKeys changed: ', inxArr);
  state.selectedRowIndex = inxArr;
  state.selectedRowKeys = inxArr;
};

const emitHandle = (emitName: string, id) => {
  emit('emit-handle', { emitName, id });
};
// table-------------------结束
</script>
<style lang="less" scoped>
.order-list {
  .ant-form-item {
    margin-bottom: 10px;
  }
}
</style>