功能：飞手列表

src/api/interface/home.ts

@@ -769,3 +769,22 @@ export type GetInfoById = InterFunction<
     updateTime: string;
   }
 >;
+// 演示规范
+export type GetSecondDistrictInfo = InterFunction<
+  // 入参
+  {},
+  // 出参
+  {
+    id: number;
+    name: string;
+    level: number;
+    pid: number;
+    childInfo: Array<{
+      id: number;
+      name: string;
+      level: number;
+      pid: number;
+      childInfo: null;
+    }>;
+  }[]
+>;

src/api/modules/home.ts

@@ -6,6 +6,7 @@ import {
   GetAppGambitListType,
   GetInfoById,
   GetPageHomeCategoriesType,
+  GetSecondDistrictInfo,
   IndustryListPagesType,
   LeaseGoodsListType,
   ListBannerImgType,
@@ -91,4 +92,8 @@ export class HomeAPI {
   // 查询-招标快讯详情
   static getInfoById: GetInfoById = (params) =>
     request.get('/release/tender/infoById', { params });
+
+  // 地域
+  static getSecondDistrictInfo: GetSecondDistrictInfo = (params) =>
+    request.get('/pms/webDevice/getSecondDistrictInfo', params);
 }

src/components/SearchBox/index.tsx

-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { ReloadOutlined, SearchOutlined } from '@ant-design/icons';
 import {
   App,
   Button,
+  Cascader,
   Form,
   Input,
   InputProps,
@@ -14,7 +15,7 @@ import styled from 'styled-components';
 
 // 搜索类型
 export type SearchColumns = {
-  type: 'Input' | 'Select';
+  type: 'Input' | 'Select' | 'Cascader' | 'DatePicker' | 'RangePicker';
   label?: string;
   name: string;
   placeholder: string;
@@ -22,13 +23,11 @@ export type SearchColumns = {
   width?: number;
   disable?: boolean;
   required?: boolean;
-  options?: {
-    value?: any;
-    label?: string;
-    children?: { value?: any; label?: string; children?: any }[];
-  }[];
+  options?: SelectProps['options'];
   onSelect?: (e: SelectProps['onSelect']) => void;
   onChange?: (e: InputProps['onChange']) => void;
+  api?: any;
+  transform?: (e: any) => SelectProps['options'];
 };
 // 组件传参
 type PropsType = {
@@ -64,6 +63,39 @@ const SearchBoxView: React.FC<PropsType> = ({
     if (!values) return;
     onSearch?.(values);
   };
+  // 重置数据
+  const handleReset = () => {
+    formRef.resetFields();
+    onSearch?.({});
+  };
+  // 组件的optionList
+  const [optionList, setOptionList] = useState<SelectProps['options'][]>();
+  // 获取组件的option
+  const getOptionData = async () => {
+    // 如果没有api，直接返回
+    if (!columns?.some((i) => i?.api)) return;
+    // 获取数据
+    const dataList = await Promise.all(
+      // @ts-ignore es-lint-disable-next-line
+      columns?.map((i) => i?.api),
+    );
+    // 设置数据
+    setOptionList(
+      columns?.map((i, j) => {
+        if (i?.api) {
+          return (
+            i?.transform?.(dataList?.[j]?.result) || dataList?.[j]?.result || []
+          );
+        }
+        return i?.options || [];
+      }),
+    );
+  };
+  // 组件挂载
+  useEffect(() => {
+    // if (!columns?.length) return;
+    getOptionData().then();
+  }, []);
   return (
     <SearchBoxWrap>
       <Form
@@ -105,7 +137,16 @@ const SearchBoxView: React.FC<PropsType> = ({
                 style={{ width: i?.width || '200px' }}
                 disabled={i?.disable}
                 onSelect={i?.onSelect}
-                options={i?.options || []}
+                options={optionList?.[j] || i?.options || []}
+                allowClear
+              />
+            )}
+            {i?.type === 'Cascader' && (
+              <Cascader
+                placeholder={i?.placeholder}
+                style={{ width: i?.width || '200px' }}
+                disabled={i?.disable}
+                options={optionList?.[j] || i?.options || []}
                 allowClear
               />
             )}
@@ -123,7 +164,11 @@ const SearchBoxView: React.FC<PropsType> = ({
               </Button>
             )}
             {isReset && (
-              <Button type="default" icon={<ReloadOutlined />}>
+              <Button
+                type="default"
+                icon={<ReloadOutlined />}
+                onClick={handleReset}
+              >
                 重置
               </Button>
             )}

src/components/home-comp/home-tab/comp/tabView05.tsx

@@ -46,6 +46,14 @@ const TabView05 = () => {
       // console.log('列表数据 --->', list, pageNo, totalPage);
     }
   };
+  // 搜索事件
+  const handleSearch = async (value: ReqType) => {
+    await getFlyerList({
+      ...value,
+      areaNumber: (value?.areaNumber as unknown as number[])?.at(-1),
+      pageNo: 1,
+    });
+  };
   // 跳转列表
   const handleMore = async () => {
     await router.push('/flyer');
@@ -57,28 +65,43 @@ const TabView05 = () => {
   // 搜索列数据
   const searchColumns: SearchColumns[] = [
     {
-      type: 'Input',
+      type: 'Cascader',
       // label: '飞手姓名',
-      name: 'userName',
-      placeholder: '请输入飞手姓名',
+      name: 'areaNumber',
+      placeholder: '请选择飞手地区',
       maxlength: 20,
       width: 120,
+      api: HomeAPI.getSecondDistrictInfo(),
+      transform: (data) =>
+        data?.map((i: any) => ({
+          label: i.name,
+          value: i.id,
+          children: i.childInfo?.map((k: any) => ({
+            label: k.name,
+            value: k.id,
+          })),
+        })),
     },
     {
       type: 'Select',
       // label: '任务能力',
-      name: 'auditStatus',
+      name: 'abilityId',
       placeholder: '请选择任务能力',
       width: 120,
+      api: HomeAPI.IndustryListPages({ pageNo: 1, pageSize: 999 }),
+      transform: (data) =>
+        data.list?.map((i: any) => ({ label: i.typeName, value: i.id })),
+    },
+    {
+      type: 'Select',
+      // label: '执照类型',
+      name: 'licenseType',
+      placeholder: '请选择执照类型',
+      width: 120,
       options: [
-        {
-          value: 1,
-          label: '空闲',
-        },
-        {
-          value: 2,
-          label: '忙碌',
-        },
+        { label: 'CAAC', value: 'CAAC' },
+        { label: 'UTC', value: 'UTC' },
+        { label: '其他', value: 'OTHER' },
       ],
     },
   ];
@@ -95,6 +118,7 @@ const TabView05 = () => {
             <RightOutlined className="text-primary" />
           </div>
         }
+        onSearch={handleSearch}
       />
       <div className="tab-title flex-between">
         <div className="title-name">飞手约单</div>

src/components/productList/index.tsx

@@ -12,6 +12,7 @@ const ProductListWrap = styled.div`
     min-height: 60vh;
     flex-wrap: wrap;
     align-items: flex-start;
+    align-content: flex-start;
   }
   .list-empty {
     position: relative;

src/pages/flyer/comp/_flyerListItem.tsx

+import React from 'react';
+import { RightOutlined } from '@ant-design/icons';
+import { Rate } from 'antd';
+import styled from 'styled-components';
+import { InterListType } from '@/api/interface';
+import { AppListPilotType } from '@/api/interface/home';
+
+// 详情类型
+type DetailType = InterListType<AppListPilotType>[0];
+
+const FlyerListItem: React.FC<{ detail: DetailType }> = ({ detail }) => {
+  return (
+    <FlyerListItemWrap>
+      <div className="item-arrow">
+        <RightOutlined style={{ fontSize: 10, color: '#A0A0A0' }} />
+      </div>
+      <div className="item-head flex-start">
+        <img
+          className="head-image"
+          src={detail?.userImg}
+          alt={detail?.userName}
+        />
+        <div className="head-content">
+          <div className="content-title flex-start">
+            <div className="title-name">{detail?.userName}</div>
+            <Rate
+              allowHalf
+              disabled
+              defaultValue={4}
+              style={{ fontSize: '12px', color: '#FE562F' }}
+            />
+          </div>
+          <div className="content-text flex-start">
+            <div className="text-item">{detail?.residentCity}</div>
+            <div className="text-item">{detail?.age}岁</div>
+            <div className="text-item">{detail?.yearsOfWorking}年经验</div>
+          </div>
+          <div className="content-tag flex-start">
+            {detail?.pilotAbility?.map((n, m) => (
+              <div className="tag-item" key={m}>
+                {n.abilityName}
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+      <div className="item-foot flex-start">
+        <div className="foot-state">空闲</div>
+        <div
+          className="foot-text text-ellipsis"
+          title={detail?.individualResume}
+        >
+          {detail?.individualResume}
+        </div>
+      </div>
+    </FlyerListItemWrap>
+  );
+};
+
+export default FlyerListItem;
+// 样式
+const FlyerListItemWrap = styled.div`
+  position: relative;
+  box-sizing: border-box;
+  width: calc((100% - (0.85rem * 3)) / 4);
+  //width: 14.13rem;
+  min-height: 5.54rem;
+  background: #ffffff;
+  border-radius: 0.25rem;
+  border: 0.04rem solid #e3e3e3;
+  margin: 0 0.85rem 0.85rem 0;
+  padding: 0.83rem 0 0 0.83rem;
+  &:nth-child(4n) {
+    margin-right: 0;
+  }
+  &:active,
+  &:hover {
+    filter: brightness(0.95);
+  }
+  .item-arrow {
+    position: absolute;
+    top: 0.67rem;
+    right: 0.67rem;
+  }
+  .item-head {
+    flex-wrap: nowrap;
+    .head-image {
+      width: 3rem;
+      height: 3rem;
+      border-radius: 4px;
+      margin-right: 0.38rem;
+    }
+    .head-content {
+      position: relative;
+      width: calc(100% - 4rem);
+      .content-title {
+        align-items: baseline;
+        margin-bottom: 0.2rem;
+        .title-name {
+          font-size: 14px;
+          font-weight: 550;
+          color: #333333;
+          margin-right: 0.2rem;
+        }
+      }
+      .content-text {
+        margin-bottom: 0.2rem;
+        .text-item {
+          font-size: 12px;
+          font-weight: 400;
+          margin-right: 0.5rem;
+          &:last-child {
+            margin-right: 0;
+          }
+        }
+      }
+      .content-tag {
+        flex-wrap: wrap;
+        margin-bottom: 0.33rem;
+        min-height: 0.79rem;
+        .tag-item {
+          min-width: 2.42rem;
+          height: 0.79rem;
+          border-radius: 0.17rem;
+          border: 0.04rem solid #fe562f;
+          text-align: center;
+          line-height: 0.79rem;
+          font-size: 0.5rem;
+          font-weight: 400;
+          color: #fe562f;
+          margin-right: 0.33rem;
+        }
+      }
+      &::after {
+        position: absolute;
+        content: '';
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        //width: 8.21rem;
+        height: 0.02rem;
+        background: #dedede;
+      }
+    }
+  }
+  .item-foot {
+    min-height: 1.42rem;
+    box-sizing: border-box;
+    padding: 0.33rem 0;
+    .foot-state {
+      position: relative;
+      width: 3rem;
+      text-align: center;
+      margin-right: 0.33rem;
+      font-size: 12px;
+      color: #44d979;
+      &::after {
+        position: absolute;
+        content: '';
+        top: calc((100% - 0.25rem) / 2);
+        left: 0;
+        width: 0.25rem;
+        height: 0.25rem;
+        background: #44d979;
+        border-radius: 50%;
+      }
+    }
+    .foot-text {
+      width: calc(100% - 3.33rem);
+      font-size: 12px;
+      font-weight: 400;
+      color: #999999;
+    }
+  }
+`;

src/pages/flyer/index.tsx

-import React from 'react';
+import React, { useEffect, useState } from 'react';
+import { Empty } from 'antd';
 import styled from 'styled-components';
+import { HomeAPI } from '@/api';
+import { InterListType, InterReqType } from '@/api/interface';
+import { AppListPilotType } from '@/api/interface/home';
+import BreadcrumbView from '@/components/breadcrumb';
 import LayoutView from '@/components/layout';
+import ProductListView from '@/components/productList';
+import SearchBoxView, { SearchColumns } from '@/components/SearchBox';
+import FlyerListItem from '@/pages/flyer/comp/_flyerListItem';
 
+// 列表类型
+type ListType = InterListType<AppListPilotType>;
+// 参数类型
+type ReqType = InterReqType<AppListPilotType>;
+// 搜索列数据
+const searchColumns: SearchColumns[] = [
+  {
+    type: 'Cascader',
+    // label: '飞手姓名',
+    name: 'areaNumber',
+    placeholder: '请选择飞手地区',
+    maxlength: 20,
+    width: 120,
+    api: HomeAPI.getSecondDistrictInfo(),
+    transform: (data) =>
+      data?.map((i: any) => ({
+        label: i.name,
+        value: i.id,
+        children: i.childInfo?.map((k: any) => ({
+          label: k.name,
+          value: k.id,
+        })),
+      })),
+  },
+  {
+    type: 'Select',
+    // label: '任务能力',
+    name: 'abilityId',
+    placeholder: '请选择任务能力',
+    width: 120,
+    api: HomeAPI.IndustryListPages({ pageNo: 1, pageSize: 999 }),
+    transform: (data) =>
+      data.list?.map((i: any) => ({ label: i.typeName, value: i.id })),
+  },
+  {
+    type: 'Select',
+    // label: '执照类型',
+    name: 'licenseType',
+    placeholder: '请选择执照类型',
+    width: 120,
+    options: [
+      { label: 'CAAC', value: 'CAAC' },
+      { label: 'UTC', value: 'UTC' },
+      { label: '其他', value: 'OTHER' },
+    ],
+  },
+];
 const FlyerPageView = () => {
+  // 分页数据
+  const [pagination, setPagination] = useState({
+    pageNo: 1,
+    pageSize: 16,
+    totalPage: 0,
+    totalCount: 0,
+  });
+  // 飞手列表
+  const [flyerList, setFlyerList] = useState<ListType>([]);
+  // 获取飞手列表
+  const getFlyerList = async (data?: ReqType) => {
+    const res = await HomeAPI.appListPilot({
+      // 审批通过
+      auditStatus: 1,
+      pageNo: pagination.pageNo,
+      pageSize: pagination.pageSize,
+      ...data,
+    });
+    if (res && res.code === '200') {
+      const { list, pageNo, totalPage, totalCount } = res.result;
+      setFlyerList(list);
+      setPagination({
+        ...pagination,
+        pageNo,
+        totalPage,
+        totalCount,
+      });
+      // console.log('列表数据 --->', list, pageNo, totalPage);
+    }
+  };
+  // 搜索事件
+  const handleSearch = async (value: ReqType) => {
+    await getFlyerList({
+      ...value,
+      areaNumber: (value?.areaNumber as unknown as number[])?.at(-1),
+      pageNo: 1,
+    });
+  };
+  // 翻页事件
+  const handlePageChange = async (pageNo: number, pageSize: number) => {
+    await getFlyerList({ pageNo, pageSize });
+  };
+  // 组件挂载
+  useEffect(() => {
+    getFlyerList().then();
+  }, []);
   return (
     <LayoutView>
       <FlyerPageWrap>
-        <div>FlyerPageWrap</div>
+        {/* 面包屑 */}
+        <BreadcrumbView />
+        {/* 条件筛选 */}
+        <SearchBoxView columns={searchColumns} onSearch={handleSearch} />
+        <div className="h-4 w-full" />
+        {/* 飞手列表 */}
+        <ProductListView pagination={pagination} onChange={handlePageChange}>
+          {flyerList?.length ? (
+            flyerList?.map((i, j) => <FlyerListItem key={j} detail={i} />)
+          ) : (
+            <div className="list-empty flex-center">
+              <Empty />
+            </div>
+          )}
+        </ProductListView>
       </FlyerPageWrap>
     </LayoutView>
   );
@@ -14,4 +129,10 @@ const FlyerPageView = () => {
 
 export default FlyerPageView;
 // 样式
-const FlyerPageWrap = styled.div``;
+const FlyerPageWrap = styled.div`
+  position: relative;
+  max-width: 1190px;
+  box-sizing: border-box;
+  padding: 2rem 0 0 0;
+  margin: 0 auto;
+`;