物流订单-从业务订单中添加

src/components/UpXlsx.tsx

@@ -67,7 +67,7 @@ function UpXlsx({ url, xlsxResInfoFu, dirCode, existSn }: Props, ref: any) {
 
             arr.forEach((v: any, i: number) => {
               if (v.id) v.idxx = v.id
-              else v.idxx = Date.now() - i * 100
+              else v.idxx = Date.now() - i * 200
               if (existSn.includes(v.cameraSn)) {
                 temp.push(v.cameraSn)
               } else {
@@ -81,7 +81,7 @@ function UpXlsx({ url, xlsxResInfoFu, dirCode, existSn }: Props, ref: any) {
               api.warning({
                 message: 'SN码' + JSON.stringify(temp) + '重复，已过滤',
                 duration: 0,
-                placement: 'top'
+                placement: 'bottomLeft'
               })
             }
           }

src/pages/A1Camera/AddCamera/index.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useRef, useState } from 'react'
 import styles from './index.module.scss'
 import { A1addType } from '../data'
 import { Button, Form, FormInstance, Input, Popconfirm } from 'antd'
-import { A1_APIadd, A1_APIgetInfo } from '@/store/action/A1Camera'
+import { A1_APIadd, A1_APIcheckSN, A1_APIgetInfo } from '@/store/action/A1Camera'
 import TextArea from 'antd/es/input/TextArea'
 import { MessageFu } from '@/utils/message'
 
@@ -60,10 +60,19 @@ function AddCamera({ openInfo, closeFu, upTableFu, addTableFu, isLoc, existSn }:
           return MessageFu.warning('SN码重复!')
         }
 
-        MessageFu.success('新增成功!')
-        obj.idxx = Date.now() + ''
-        addTableFu(obj)
-        closeFu()
+        //  传后端检查一下 sn的唯一性
+        const topRes = await A1_APIcheckSN(value.cameraSn)
+
+        if (topRes.code === 0) {
+          if (topRes.data && topRes.data.length > 0) {
+            return MessageFu.warning('SN码重复!')
+          } else {
+            MessageFu.success('新增成功!')
+            obj.idxx = Date.now() + ''
+            addTableFu(obj)
+            closeFu()
+          }
+        }
       } else {
         const res = await A1_APIadd(obj)
         if (res.code === 0) {

src/pages/A2Abusiness/AddBusiness/index.tsx

@@ -42,7 +42,7 @@ function AddBusiness({ topType, openInfo, closeFu, upTableFu, addTableFu }: Prop
 
   // 表格点击删除
   const delTableFu = useCallback(
-    (idxx: string) => {
+    (idxx: number) => {
       setTableList(tableList.filter(v => v.idxx !== idxx))
     },
     [tableList]
@@ -51,6 +51,7 @@ function AddBusiness({ topType, openInfo, closeFu, upTableFu, addTableFu }: Prop
   const columns = useMemo(() => {
     return [
       {
+        width: 100,
         title: '相机类型',
         render: (item: A2AListCamerasType) =>
           item.cameraType ? (item.cameraType === 'KK' ? '看看' : '看见') : '（空）'
@@ -73,7 +74,18 @@ function AddBusiness({ topType, openInfo, closeFu, upTableFu, addTableFu }: Prop
       },
       {
         title: '备注',
-        render: (item: A2AListCamerasType) => item.remark || '（空）'
+        render: (item: A2AListCamerasType) =>
+          item.remark ? (
+            item.remark.length >= 50 ? (
+              <span style={{ cursor: 'pointer' }} title={item.remark}>
+                {item.remark.substring(0, 50) + '...'}
+              </span>
+            ) : (
+              item.remark
+            )
+          ) : (
+            '（空）'
+          )
       },
       {
         title: '操作',

src/pages/A2Blogistics/AddLogistics/index.module.scss

@@ -70,6 +70,8 @@
         margin-bottom: 24px;
         width: 1000px;
         .formBoxLL {
+          position: relative;
+          top: 4px;
           width: 110px;
           text-align: right;
           & > span {

src/pages/A2Blogistics/AddLogistics/index.tsx

@@ -5,12 +5,13 @@ import { A2AListCamerasType } from '@/types'
 import { A1addType } from '@/pages/A1Camera/data'
 import { Button, DatePicker, Form, FormInstance, Input, Table, Tag, Tooltip } from 'antd'
 import MyPopconfirm from '@/components/MyPopconfirm'
-import { A2B_APIadd, A2B_APIgetInfo } from '@/store/action/A2Blogistics'
+import { A2B_APIadd, A2B_APIgetCamera, A2B_APIgetInfo } from '@/store/action/A2Blogistics'
 import dayjs from 'dayjs'
 import { MessageFu } from '@/utils/message'
 import UpXlsx from '@/components/UpXlsx'
 import AddCamera from '@/pages/A1Camera/AddCamera'
 import TextArea from 'antd/lib/input/TextArea'
+import CheckTable from '../CheckTable'
 
 type Props = {
   openInfo: A2BaddType
@@ -36,7 +37,7 @@ function AddLogistics({ openInfo, closeFu, upTableFu, addTableFu, orderNumTemp }
 
   // 表格点击删除
   const delTableFu = useCallback(
-    (idxx: string) => {
+    (idxx: number) => {
       setTableList(tableList.filter(v => v.idxx !== idxx))
     },
     [tableList]
@@ -45,6 +46,7 @@ function AddLogistics({ openInfo, closeFu, upTableFu, addTableFu, orderNumTemp }
   const columns = useMemo(() => {
     return [
       {
+        width: 100,
         title: '相机类型',
         render: (item: A2AListCamerasType) =>
           item.cameraType ? (item.cameraType === 'KK' ? '看看' : '看见') : '（空）'
@@ -67,7 +69,18 @@ function AddLogistics({ openInfo, closeFu, upTableFu, addTableFu, orderNumTemp }
       },
       {
         title: '备注',
-        render: (item: A2AListCamerasType) => item.remark || '（空）'
+        render: (item: A2AListCamerasType) =>
+          item.remark ? (
+            item.remark.length >= 50 ? (
+              <span style={{ cursor: 'pointer' }} title={item.remark}>
+                {item.remark.substring(0, 50) + '...'}
+              </span>
+            ) : (
+              item.remark
+            )
+          ) : (
+            '（空）'
+          )
       },
       {
         title: '操作',
@@ -87,6 +100,9 @@ function AddLogistics({ openInfo, closeFu, upTableFu, addTableFu, orderNumTemp }
     if (res.code === 0) {
       const data = res.data
 
+      // 回显业务订单
+      setOrderNum(data.orderNum)
+
       // 回显表格
       setTableList(
         data.cameras.map((v: any) => ({
@@ -149,6 +165,48 @@ function AddLogistics({ openInfo, closeFu, upTableFu, addTableFu, orderNumTemp }
   // 上传xlsx 的ref
   const upXlsxRef = useRef<any>(null)
 
+  // 点击 从业务订单中添加
+  const getCameraFu = useCallback(async () => {
+    if (!orderNum) return MessageFu.warning('请输入关联业务订单')
+    const res = await A2B_APIgetCamera(orderNum)
+    if (res.code === 0) {
+      const data: A2AListCamerasType[] = res.data || []
+      if (data.length) {
+        // 打开筛选列表
+        setCheckList(
+          data.map(v => ({
+            ...v,
+            idxx: v.id
+          }))
+        )
+        setCheckShow(true)
+      } else {
+        MessageFu.warning('当前 业务订单 未查询到数据')
+      }
+    }
+  }, [orderNum])
+
+  // 关联业务订单列表
+  const [checkList, setCheckList] = useState<A2AListCamerasType[]>([])
+
+  // 关联业务订单 打开 关闭
+  const [checkShow, setCheckShow] = useState(false)
+
+  // 从业务订单 弹窗列表中点击确定
+  const checkSonBtnOk = useCallback(
+    (arr: A2AListCamerasType[], delIdxx: number[]) => {
+      const idxxArr = arr.map(v => v.idxx)
+
+      const oldArr = tableList.filter(v => !idxxArr.includes(v.idxx))
+      const newArr = [...arr, ...oldArr]
+
+      const newArrRes = newArr.filter(v => !delIdxx.includes(v.idxx))
+
+      setTableList(newArrRes)
+    },
+    [tableList]
+  )
+
   return (
     <div className={styles.AddLogistics}>
       <div className='A2BaddMain'>
@@ -218,6 +276,10 @@ function AddLogistics({ openInfo, closeFu, upTableFu, addTableFu, orderNumTemp }
           <div>
             <div>相机清单</div>
             <div>
+              <Button type='primary' onClick={getCameraFu}>
+                从业务订单中添加
+              </Button>
+
               <a href='/xlsx/相机列表导入模板.xlsx' download>
                 <Button type='primary'>下载模块</Button>
               </a>
@@ -275,6 +337,19 @@ function AddLogistics({ openInfo, closeFu, upTableFu, addTableFu, orderNumTemp }
           </div>
         </div>
       ) : null}
+      {/* 点击关联业务订单 打开的页面*/}
+      {checkShow ? (
+        <div className='A2BtableBoxAdd'>
+          <div>
+            <CheckTable
+              checkTableList={checkList}
+              allList={tableList}
+              checkSonBtnOk={(arr, delIdxx) => checkSonBtnOk(arr, delIdxx)}
+              checkSonClose={() => setCheckShow(false)}
+            />
+          </div>
+        </div>
+      ) : null}
     </div>
   )
 }

src/pages/A2Blogistics/CheckTable/index.module.scss

@@ -0,0 +1,16 @@
+.CheckTable {
+  background-color: #fff;
+  border-radius: 10px;
+  padding: 20px;
+  position: relative;
+  :global {
+    .ant-table-body {
+      overflow-y: auto !important;
+      overflow-y: overlay !important;
+    }
+    .checkBtn {
+      margin-top: 20px;
+      text-align: center;
+    }
+  }
+}

src/pages/A2Blogistics/CheckTable/index.tsx

@@ -0,0 +1,122 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import styles from './index.module.scss'
+import { A2AListCamerasType } from '@/types'
+import { Button, Table } from 'antd'
+import MyPopconfirm from '@/components/MyPopconfirm'
+import { MessageFu } from '@/utils/message'
+
+type Props = {
+  checkSonBtnOk: (arr: A2AListCamerasType[], delIdxx: number[]) => void
+  checkSonClose: () => void
+  allList: A2AListCamerasType[]
+  checkTableList: A2AListCamerasType[]
+}
+
+function CheckTable({ checkTableList, allList, checkSonBtnOk, checkSonClose }: Props) {
+  // 选中的表格数据
+  const [tableSelectList, setTableSelectList] = useState<A2AListCamerasType[]>([])
+
+  // 本来是勾选的 取消勾选了 点击确定的时候需要删除
+  const delArrRef = useRef<number[]>([])
+
+  // 外层表格的所有 idxx 集合
+  const checkIDxx = useMemo(() => {
+    return allList.map(v => v.idxx)
+  }, [allList])
+
+  // 进入的时候回显 选中
+  useEffect(() => {
+    // 过滤
+    // 回显 选中表格的完整数据
+    const arr = checkTableList.filter(v => checkIDxx.includes(v.idxx))
+    setTableSelectList(arr)
+
+    // 保存进来的所有已经勾选的 idxx
+    delArrRef.current = arr.map(v => v.idxx)
+  }, [checkIDxx, checkTableList])
+
+  const rowSelection = useMemo(() => {
+    return {
+      onChange: (selectedRowKeys: any, selectedRows: any) => {
+        setTableSelectList(selectedRows)
+      },
+      // 回显选中
+      selectedRowKeys: tableSelectList.map(v => v.idxx)
+    }
+  }, [tableSelectList])
+
+  const btnOk = useCallback(() => {
+    // delArrRef.current===》进来的时候所有勾选的idxx集合
+    //--最后勾选的idxx集合
+    const lastIdxx = tableSelectList.map(v => v.idxx)
+
+    // 本来是勾选的，现在取消勾选了。取消勾选的idxx的集合
+    const delIdxx = delArrRef.current.filter(v => !lastIdxx.includes(v))
+
+    checkSonBtnOk(tableSelectList, delIdxx)
+    MessageFu.success('添加成功')
+    checkSonClose()
+  }, [checkSonBtnOk, checkSonClose, tableSelectList])
+
+  const columns = useMemo(() => {
+    return [
+      {
+        width: 100,
+        title: '相机类型',
+        render: (item: A2AListCamerasType) => (item.cameraType === 'KK' ? '看看' : '看见')
+      },
+      {
+        title: 'SN码',
+        render: (item: A2AListCamerasType) => item.cameraSn
+      },
+      {
+        title: '备注',
+        render: (item: A2AListCamerasType) =>
+          item.remark ? (
+            item.remark.length >= 50 ? (
+              <span style={{ cursor: 'pointer' }} title={item.remark}>
+                {item.remark.substring(0, 50) + '...'}
+              </span>
+            ) : (
+              item.remark
+            )
+          ) : (
+            '（空）'
+          )
+      }
+    ]
+  }, [])
+  // XS202408230J  xs0001  777
+  return (
+    <div className={styles.CheckTable}>
+      <Table
+        scroll={{ y: 530 }}
+        size='small'
+        rowSelection={{
+          type: 'checkbox',
+          ...rowSelection
+        }}
+        dataSource={checkTableList}
+        columns={columns}
+        rowKey='idxx'
+        pagination={false}
+      />
+      {/*  右下角的列表数量 */}
+      <div className='tableNumBox'>
+        共 <span>{checkTableList.length}</span> 条数据
+      </div>
+
+      <div className='checkBtn'>
+        <MyPopconfirm txtK='取消' onConfirm={checkSonClose} />
+        &emsp;
+        <Button type='primary' onClick={btnOk}>
+          确定
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+const MemoCheckTable = React.memo(CheckTable)
+
+export default MemoCheckTable

src/store/action/A1Camera.ts

@@ -43,3 +43,10 @@ export const A1_APIadd = (data: any) => {
 export const A1_APIgetInfo = (id: number) => {
   return http.get(`cms/camera/detail/${id}`)
 }
+
+/**
+ * 根据sn查询
+ */
+export const A1_APIcheckSN = (cameraSns: string) => {
+  return http.get(`cms/camera/findBySn/${cameraSns}`)
+}

src/store/action/A2Blogistics.ts

@@ -43,3 +43,10 @@ export const A2B_APIadd = (data: any) => {
 export const A2B_APIgetInfo = (id: number) => {
   return http.get(`cms/logistics/detail/${id}`)
 }
+
+/**
+ * 物流订单 从业务订单中添加
+ */
+export const A2B_APIgetCamera = (orderNum: string) => {
+  return http.get(`cms/logistics/order/getCamera${orderNum}`)
+}

src/types/api/A2Abusiness.ts

@@ -6,7 +6,7 @@ export type A2AListCamerasType = {
   cameraType: string
   remark: string
   id: number
-  idxx: string
+  idxx: number
 }
 
 export type A2AListType = {