pay-company/src/pages/work_order/evaluated/index.tsx

import {
  MyColumns,
  MyPageContainer,
  MyProTableProps,
  useCurrentPermissions,
} from '@/common';
import { Apis } from '@/gen/Apis';
import {
  HouseWorkOrdersLocationEnum,
  HouseWorkOrdersStatusEnum,
  HouseWorkOrdersTypeEnum,
} from '@/gen/Enums';
import { ProTable } from '@ant-design/pro-components';
import { useSearchParams } from '@umijs/max';
import { Space } from 'antd';
import WorkOrderShow from '../list/modals/WorkOrderShow';

export default function Index({ title = '客户评价' }) {
  const [searchParams, setSearchParams]: any = useSearchParams();
  const getCurrentPermissions = useCurrentPermissions();

  let tableRender = (item: any, action: any) => {
    return getCurrentPermissions({
      show: <WorkOrderShow item={item} title="详情" reload={action?.reload} />,
    });
  };

  return (
    <MyPageContainer
      title={title}
      enableTabs={true}
      tabKey="workorders"
      tabLabel={title}
    >
      <ProTable<Record<any, any>>
        {...MyProTableProps.props}
        // headerTitle={title}
        request={async (params, sort) =>
          MyProTableProps.request(
            {
              ...params,
              type: [
                HouseWorkOrdersTypeEnum.Repair.value,
                HouseWorkOrdersTypeEnum.Incident.value,
                HouseWorkOrdersTypeEnum.Complaint.value,
              ],
              is_evaluated: true,
              status: HouseWorkOrdersStatusEnum.Completed.value,
            },
            sort,
            Apis.WorkOrder.HouseWorkOrders.List,
          )
        }
        columns={[
          MyColumns.ID({
            search: false,
          }),
          MyColumns.EnumTag({
            title: '工单状态',
            dataIndex: 'status',
            valueEnum: HouseWorkOrdersStatusEnum,
            search: false,
          }),
          MyColumns.EnumTag({
            title: '工单类型',
            dataIndex: 'type',
            valueEnum: HouseWorkOrdersTypeEnum,
            search: false,
          }),
          MyColumns.EnumTag({
            title: '报修位置',
            dataIndex: 'location',
            valueEnum: HouseWorkOrdersLocationEnum,
          }),

          {
            title: '位置信息',
            dataIndex: ['asset_house', 'full_name'],
            render: (_, record) => {
              return (
                <Space>
                  {record?.asset_house?.full_name
                    ? record?.asset_house?.full_name
                    : record?.asset_project?.name}
                </Space>
              );
            },
            search: {
              transform: (value) => {
                return { house_name: value };
              },
            },
          },
          {
            title: '工单描述',
            dataIndex: 'content',
            search: false,
            width: 120, // 关键：固定列宽（若父容器过窄，可设 minWidth: 200 优先保证列宽）
            render: (text) => (
              <div
                style={{
                  width: '100%', // 继承列宽
                  // height: '60px', // 设置固定高度，约显示3行文本
                  overflow: 'hidden', // 超出隐藏
                  textOverflow: 'ellipsis', // 省略号
                  display: '-webkit-box',
                  WebkitBoxOrient: 'vertical',
                  WebkitLineClamp: 1, // 显示3行
                }}
              >
                {text}
              </div>
            ),
          },
          {
            title: '评价星级',
            dataIndex: 'evaluation_score',
            search: false,
            render: (dom: React.ReactNode) => {
              // 确保score是1-5之间的有效数字
              const score = Number(dom);
              const validScore = Math.max(
                0,
                Math.min(5, isNaN(score) ? 0 : score),
              );
              // 创建对应数量的星星
              return (
                <div style={{ color: '#ffd700' }}>
                  {Array(validScore)
                    .fill(0)
                    .map((_, index) => (
                      <span key={index}>★</span>
                    ))}
                  {Array(5 - validScore)
                    .fill(0)
                    .map((_, index) => (
                      <span key={index} style={{ color: '#d9d9d9' }}>
                        ☆
                      </span>
                    ))}
                  <span style={{ marginLeft: '8px', color: '#666' }}>
                    {validScore}星
                  </span>
                </div>
              );
            },
          },
          // MyColumns.CreatedAt(),
          MyColumns.Option({
            render: (_, item: any, index, action) => (
              <Space key={index}>
                <>{tableRender(item, action)}</>
              </Space>
            ),
          }),
        ]}
      />
    </MyPageContainer>
  );
}