功能：后台管理飞手团队添加，修改，删除飞手技能，后台超级管理审批飞手技能

src/api/interface/flyerCenterType.ts

@@ -162,3 +162,34 @@ export type selectPilotListByTeamType = InterListFunction<
 >;
 // 后台-飞手团队踢飞手
 export type deletePilotFromTeamType = InterFunction<{ pilotId: number }, NonNullable<unknown>>;
+
+// 后台-获取飞手二级分类能力
+export type getAbilityListType = InterFunction<
+  {
+    userId?: number;
+    state: number;
+  },
+  {
+    id?: number;
+    inspectionId: number;
+    otherAbility: string;
+  }[]
+>;
+// 后台-审核飞手能力（二级分类）
+export type updatePilotAbilityStateType = InterFunction<
+  {
+    id?: number;
+    userId?: number;
+    state?: number;
+    otherAbility?: string;
+  },
+  NonNullable<unknown>
+>;
+
+// 后台-删除飞手能力（二级分类）
+export type deletePilotAbilityStateType = InterFunction<
+  {
+    id?: number;
+  },
+  NonNullable<unknown>
+>;

src/api/modules/flyerCenterAPI.ts

@@ -4,12 +4,15 @@ import {
   backListPilotType,
   backListReasonType,
   backPilotLogListType,
+  deletePilotAbilityStateType,
   deletePilotFromTeamType,
+  getAbilityListType,
   getPilotAuditSumType,
   insertPilotJoinTeamType,
   selectPilotByPhoneType,
   selectPilotListByTeamType,
   updateAuditStatusType,
+  updatePilotAbilityStateType,
   updateRemarkType,
 } from '~/api/interface/flyerCenterType';
 import axios from '../request';
@@ -52,4 +55,21 @@ export class FlyerCenterAPI {
   // 后台-飞手团队踢飞手
   static deletePilotFromTeam: deletePilotFromTeamType = (params) =>
     axios.get('/userapp/pilot/deletePilotFromTeam', { params });
+
+  // 后台-获取飞手能力（二级分类）
+  static selectInspectionAbility: getAbilityListType = (params) =>
+    axios.post('/userapp/pilot/selectInspectionAbility', params);
+
+  // 后台-审核飞手能力（二级分类）
+  static updatePilotAbility: updatePilotAbilityStateType = (params) =>
+    axios.post('/userapp/pilot/updateStateById', params);
+
+  static updateByIdAndOtherAbility: updatePilotAbilityStateType = (params) =>
+    axios.post('/userapp/pilot/updateByIdAndOtherAbility', params);
+
+  static deleteAbilityById: deletePilotAbilityStateType = (params) =>
+    axios.get('/userapp/pilot/deleteAbilityById', { params });
+
+  static insertByOtherAbility: deletePilotAbilityStateType = (params) =>
+    axios.post('/userapp/pilot/insertByOtherAbility', params);
 }

src/pages/flyerManage/flyerDetail/index.tsx

 import { FlyerCenterAPI } from '~/api';
 import { useSearchParams, useNavigate } from 'react-router-dom';
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { InterDataType } from '~/api/interface';
-import { backDetailPilotType } from '~/api/interface/flyerCenterType';
+import { backDetailPilotType, getAbilityListType } from '~/api/interface/flyerCenterType';
 import { Badge, Button, Col, Descriptions, Image, Row, Tag } from 'antd';
 import './index.scss';
 import ApproveModal from './components/approveModal';
 import { PlusOutlined } from '@ant-design/icons';
 import { Uploader } from '~/components/uploader';
 
+//飞手列表返回类型
+type getAbilityList = InterDataType<getAbilityListType>;
 //飞手详情返回类型
 type flyerDetailType = InterDataType<backDetailPilotType>;
 const FlyerDetail = () => {
@@ -19,10 +21,12 @@ const FlyerDetail = () => {
   const [flyerId, setFlyerId] = useState<number>(-1);
   const [flyerDetail, setFlyerDetail] = useState<flyerDetailType>();
   const [approveModalShow, setApproveModalShow] = useState<boolean>(false);
-
+  const [pilotAbilityList, setPilotAbilityList] = useState<getAbilityList>([]);
+  const [userId, setUserId] = useState<number>(0);
   const getFlyerDetail = (id: number) => {
     FlyerCenterAPI.getBackDetailPilot({ id }).then(({ result }) => {
       setFlyerDetail(result);
+      setUserId(result?.userAccountId);
     });
   };
   //审批弹窗
@@ -36,6 +40,15 @@ const FlyerDetail = () => {
     setApproveModalShow(false);
     getFlyerDetail(flyerId);
   };
+  //获取飞手已认证二级能力
+  const getSecondAbilityList = () => {
+    FlyerCenterAPI.selectInspectionAbility({
+      userId: userId,
+      state: 1,
+    }).then(({ result }) => {
+      setPilotAbilityList(result);
+    });
+  };
   //返回
   const backRoute = () => {
     navigate(-1);
@@ -53,10 +66,15 @@ const FlyerDetail = () => {
   };
 
   useEffect(() => {
+    console.log(searchParams.get('id'));
     getFlyerDetail(Number(searchParams.get('id')));
     setFlyerId(Number(searchParams.get('id')));
     setIsApprove(!!searchParams.get('isApprove'));
-  }, []);
+    if (userId !== 0) {
+      console.log(userId);
+      getSecondAbilityList();
+    }
+  }, [userId]);
 
   return (
     <div className='flyer-detail'>
@@ -135,6 +153,9 @@ const FlyerDetail = () => {
               <Descriptions.Item label='能力'>
                 {flyerDetail?.pilotAbility.map((v) => <Tag key={v.id}>{v.abilityName}</Tag>)}
               </Descriptions.Item>
+              <Descriptions.Item label='二级能力'>
+                {pilotAbilityList?.map((v) => <Tag key={v.inspectionId}>{v.otherAbility}</Tag>)}
+              </Descriptions.Item>
               <Descriptions.Item label='业务案例'>
                 {flyerDetail?.abilityUrl ? (
                   <Image.PreviewGroup>

src/pages/flyerManage/flyerList/components/approveAbilityModal/index.tsx

+import { Flex, Modal, ModalProps, Radio, Tag } from 'antd';
+import { FC, useEffect, useState } from 'react';
+import { FlyerCenterAPI } from '~/api';
+import { backListPilotType, getAbilityListType } from '~/api/interface/flyerCenterType';
+import { InterDataType } from '~/api/interface';
+
+//飞手列表返回类型
+type getAbilityList = InterDataType<getAbilityListType>;
+
+//飞手列表返回类型
+type flyerListType = InterDataType<backListPilotType>['list'];
+interface selfProps {
+  onCancel: () => void;
+  onOk: () => void;
+  flyerItem: flyerListType[0] | undefined;
+}
+
+const ApproveAbilityModel: FC<ModalProps & selfProps> = ({ open, onCancel, onOk, flyerItem }) => {
+  const [selectedValue, setSelectedValue] = useState(0);
+  const [tags, setTags] = useState<getAbilityList>([]);
+  const handleRadioChange = (e: any) => {
+    setSelectedValue(e.target.value);
+  };
+  const handleOk = () => {
+    FlyerCenterAPI.updatePilotAbility({
+      userId: flyerItem?.userAccountId,
+      state: selectedValue,
+    }).then((res) => {
+      if (res.code === '200') {
+        onOk();
+      }
+    });
+  };
+  //获取飞手二级能力未认证的
+  const getPilotSecondAbilityList = () => {
+    FlyerCenterAPI.selectInspectionAbility({
+      userId: flyerItem?.userAccountId,
+      state: 0,
+    }).then((res) => {
+      if (res.code === '200') {
+        setTags(res.result);
+      }
+    });
+  };
+
+  useEffect(() => {
+    if (!flyerItem?.id) return;
+    getPilotSecondAbilityList();
+  }, [open]);
+  return (
+    <Modal
+      title={'飞手申请二级技能'}
+      open={open}
+      onOk={handleOk}
+      onCancel={onCancel}
+      width={'500px'}
+      centered={true}
+    >
+      {tags.length ? (
+        <div style={{ marginBottom: 16 }}>
+          <Flex gap='4px 0' wrap='wrap'>
+            {tags.map((tag, index) => (
+              <Tag key={index} bordered={false}>
+                {tag.otherAbility}
+              </Tag>
+            ))}
+          </Flex>
+        </div>
+      ) : (
+        <div style={{ marginBottom: 16, marginTop: 16 }}>飞手暂无审核技能</div>
+      )}
+      <div>
+        <Radio.Group onChange={handleRadioChange} value={selectedValue}>
+          <Radio value='1'>同意</Radio>
+          <Radio value='2'>拒绝</Radio>
+        </Radio.Group>
+      </div>
+    </Modal>
+  );
+};
+
+export default ApproveAbilityModel;

src/pages/flyerManage/flyerList/index.tsx

@@ -8,6 +8,7 @@ import { backListPilotType, getPilotAuditSumType } from '~/api/interface/flyerCe
 import { getSecondDistrictInfoType } from '~/api/interface/commonType';
 import { useNavigate } from 'react-router-dom';
 import UpdateRemarkModal from './components/updateRemarkModal';
+import ApproveAbilityModel from './components/approveAbilityModal';
 import './index.scss';
 
 //飞手列表返回类型
@@ -35,6 +36,7 @@ const FlyerList = () => {
   // 飞手审批数据统计
   const [approveStatistics, setApproveStatistics] = useState<statisticsDataType>();
 
+  const [approveAbilityModalShow, setApproveAbilityModalShow] = useState<boolean>(false);
   //飞手列表
   const getFlyerList = (query?: flyerListParameters) => {
     setLoading(true);
@@ -130,11 +132,23 @@ const FlyerList = () => {
   const updateRemarkModalCancel = () => {
     setUpdateRemarkModalShow(false);
   };
+  const approveAbilityModalCancel = () => {
+    setApproveAbilityModalShow(false);
+  };
   const updateRemarkModalOk = () => {
     getFlyerList(query);
     setUpdateRemarkModalShow(false);
   };
 
+  const approveAbilityModalOk = () => {
+    setApproveAbilityModalShow(false);
+  };
+
+  const toFlyerAbilityApprove = (record: flyerListType[0]) => {
+    setCurrentTableItem(record);
+    setApproveAbilityModalShow(true);
+  };
+
   useEffect(() => {
     getFlyerList();
     getAbilityList();
@@ -248,6 +262,7 @@ const FlyerList = () => {
     {
       title: '操作',
       align: 'center',
+      width: '250px',
       render: (_text: string, record) => (
         <>
           <Button
@@ -256,7 +271,10 @@ const FlyerList = () => {
             disabled={record.auditStatus !== 0}
             onClick={() => toFlyerApprove(record)}
           >
-            审批
+            执照审批
+          </Button>
+          <Button type='link' danger onClick={() => toFlyerAbilityApprove(record)}>
+            技能审批
           </Button>
           <Button type='link' onClick={() => toFlyerDetail(record)}>
             详情
@@ -316,6 +334,12 @@ const FlyerList = () => {
         onCancel={updateRemarkModalCancel}
         flyerItem={currentTableItem}
       />
+      <ApproveAbilityModel
+        open={approveAbilityModalShow}
+        onOk={approveAbilityModalOk}
+        onCancel={approveAbilityModalCancel}
+        flyerItem={currentTableItem}
+      />
     </div>
   );
 };

src/pages/flyerManage/flyerTeam/comp/addFlyerSkillModal/index.tsx

+import { FC, useEffect } from 'react';
+import { Form, Input, Modal, ModalProps } from 'antd';
+import { getAbilityListType } from '~/api/interface/flyerCenterType';
+import { InterDataType } from '~/api/interface';
+import { FlyerCenterAPI } from '~/api';
+//飞手列表返回类型
+type getAbilityList = InterDataType<getAbilityListType>;
+interface selfProps {
+  onCancel: () => void;
+  pilotSkillInfo: getAbilityList[0] | undefined;
+  userId: number;
+}
+const AddFlyerSkillModal: FC<ModalProps & selfProps> = ({
+  open,
+  onCancel,
+  pilotSkillInfo,
+  userId,
+}) => {
+  const [formRef] = Form.useForm();
+  const handleOk = () => {
+    formRef.validateFields().then(async (val) => {
+      const res = await FlyerCenterAPI[
+        pilotSkillInfo?.id ? 'updateByIdAndOtherAbility' : 'insertByOtherAbility'
+      ]({
+        id: pilotSkillInfo?.id,
+        otherAbility: val?.skillName,
+        userId: userId,
+      });
+      if (res && res.code === '200') {
+        onCancel?.();
+      }
+    });
+  };
+
+  useEffect(() => {
+    if (!pilotSkillInfo?.id) return;
+    formRef.setFieldValue('skillName', pilotSkillInfo?.otherAbility);
+  }, [open]);
+  return (
+    <Modal
+      title={pilotSkillInfo?.id ? '修改飞手技能' : '添加飞手技能'}
+      open={open}
+      onOk={handleOk}
+      onCancel={onCancel}
+      width={'500px'}
+      centered={true}
+    >
+      <Form form={formRef} autoComplete={'off'}>
+        <Form.Item
+          label={pilotSkillInfo?.id ? '当前技能名称：' : '请输入技能名称：'}
+          name={'skillName'}
+          rules={[{ required: true, message: '请输入技能名称' }]}
+        >
+          <Input
+            type='text'
+            id='skillName'
+            placeholder={pilotSkillInfo?.id ? '点击修改...' : '输入技能名称'}
+            maxLength={10}
+          />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};
+
+export default AddFlyerSkillModal;

src/pages/flyerManage/flyerTeam/comp/updateFlyerSkillModal/index.tsx

+import { FC, useEffect, useState } from 'react';
+import { Button, Modal, ModalProps, Table } from 'antd';
+import { FlyerCenterAPI } from '~/api';
+import { getAbilityListType, selectPilotListByTeamType } from '~/api/interface/flyerCenterType';
+import { InterDataType, InterListType } from '~/api/interface';
+import { ColumnsType } from 'antd/es/table';
+import AddFlyerSkillModal from '~/pages/flyerManage/flyerTeam/comp/addFlyerSkillModal';
+import { PlusOutlined } from '@ant-design/icons';
+
+//飞手列表返回类型
+type getAbilityList = InterDataType<getAbilityListType>;
+// 列表的类型
+type TableType = InterListType<selectPilotListByTeamType>;
+interface selfProps {
+  onCancel: () => void;
+  flyerItem: TableType[0] | undefined;
+}
+const UpdateFlyerSkillModel: FC<ModalProps & selfProps> = ({ open, onCancel, flyerItem }) => {
+  const [pilotSkill, setPilotSkill] = useState<getAbilityList>([]);
+
+  const [addFlyerSkillShow, setAddFlyerSkillShow] = useState<boolean>(false);
+
+  const [userId, setUserId] = useState<number>(0);
+
+  const [pilotSkillInfo, setPilotSkillInfo] = useState<getAbilityList[0]>();
+  const handleOk = () => {
+    FlyerCenterAPI.updatePilotAbility({
+      userId: flyerItem?.userAccountId,
+      state: 1,
+    }).then((res) => {
+      if (res && res.code === '200') {
+        onCancel?.();
+      }
+    });
+  };
+
+  //获取飞手技能认证过的
+  const getPilotSecondAbilityList = () => {
+    FlyerCenterAPI.selectInspectionAbility({
+      userId: flyerItem?.userAccountId,
+      state: 1,
+    }).then((res) => {
+      if (res.code === '200') {
+        setPilotSkill(res.result);
+      }
+    });
+  };
+  const handleDelete = (record: getAbilityList[0]) => {
+    // console.log(record);
+    FlyerCenterAPI.deleteAbilityById({
+      id: record.id,
+    }).then((res) => {
+      if (res.code === '200') {
+        getPilotSecondAbilityList();
+      }
+    });
+  };
+  const updatePilotSkill = (record: getAbilityList[0]) => {
+    setPilotSkillInfo(record);
+    setAddFlyerSkillShow(true);
+  };
+
+  useEffect(() => {
+    if (flyerItem) {
+      setUserId(flyerItem?.userAccountId);
+      getPilotSecondAbilityList();
+    }
+  }, [flyerItem]);
+
+  const columns: ColumnsType<getAbilityList[0]> = [
+    {
+      title: '技能名称',
+      align: 'center',
+      dataIndex: 'otherAbility',
+    },
+    {
+      title: '操作',
+      align: 'center',
+      width: 200,
+      render: (_text, record) => (
+        <>
+          <Button
+            type='link'
+            disabled={!!record.inspectionId}
+            onClick={() => updatePilotSkill(record)}
+          >
+            修改
+          </Button>
+          <Button type='link' danger={true} onClick={() => handleDelete(record)}>
+            删除
+          </Button>
+        </>
+      ),
+    },
+  ];
+  return (
+    <>
+      <Modal
+        title={'飞手技能'}
+        open={open}
+        onOk={handleOk}
+        onCancel={onCancel}
+        width={'500px'}
+        centered={true}
+      >
+        <Button icon={<PlusOutlined />} type={'primary'} onClick={() => setAddFlyerSkillShow(true)}>
+          添加飞手技能
+        </Button>
+        <Table
+          size='small'
+          dataSource={pilotSkill}
+          columns={columns}
+          rowKey='id'
+          // scroll={{ x: 1000 }}
+          bordered
+        />
+      </Modal>
+      <AddFlyerSkillModal
+        open={addFlyerSkillShow}
+        onCancel={() => {
+          setAddFlyerSkillShow(false);
+          getPilotSecondAbilityList();
+        }}
+        pilotSkillInfo={pilotSkillInfo}
+        userId={userId}
+      />
+    </>
+  );
+};
+
+export default UpdateFlyerSkillModel;

src/pages/flyerManage/flyerTeam/index.tsx

-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import SearchBox from '~/components/search-box';
 import { Button, message, Modal, Table, Tag } from 'antd';
 import { PlusOutlined } from '@ant-design/icons';
@@ -7,6 +7,7 @@ import { ColumnsType } from 'antd/es/table';
 import { FlyerCenterAPI } from '~/api';
 import AddFlyerModal from '~/pages/flyerManage/flyerTeam/comp/addFlyerModal';
 import { selectPilotListByTeamType } from '~/api/interface/flyerCenterType';
+import UpdateFlyerSkillModel from 'src/pages/flyerManage/flyerTeam/comp/updateFlyerSkillModal';
 
 // 列表的类型
 type TableType = InterListType<selectPilotListByTeamType>;
@@ -27,6 +28,10 @@ const FlyerTeamView = () => {
   const [addEditShow, setAddEditShow] = useState(false);
   // 表格数据
   const [tableData, setTableData] = useState<TableType>([]);
+
+  const [flyerSkillShow, setFlyerSkillShow] = useState(false);
+
+  const [flyerInfoItem, setFlyerInfoItem] = useState<TableType[0]>();
   // 表格分页配置
   const [pagination, setPagination] = useState({
     total: 0,
@@ -84,6 +89,12 @@ const FlyerTeamView = () => {
       },
     });
   };
+
+  //打开修改飞手技能弹窗
+  const updatePilotSkill = (record: TableType[0]) => {
+    setFlyerInfoItem(record);
+    setFlyerSkillShow(true);
+  };
   // 页面挂载
   useEffect(() => {
     query = {};
@@ -135,6 +146,9 @@ const FlyerTeamView = () => {
           <Button type='link' danger onClick={() => handleDelete(record)}>
             删除
           </Button>
+          <Button type='link' onClick={() => updatePilotSkill(record)}>
+            飞手技能
+          </Button>
         </>
       ),
     },
@@ -185,6 +199,14 @@ const FlyerTeamView = () => {
           setAddEditShow(false);
         }}
       />
+      <UpdateFlyerSkillModel
+        open={flyerSkillShow}
+        onCancel={() => {
+          paginationChange(pagination.current, pagination.pageSize);
+          setFlyerSkillShow(false);
+        }}
+        flyerItem={flyerInfoItem}
+      />
     </>
   );
 };