开始写租凭-查看

src/pages/A1Camera/index.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import styles from './index.module.scss'
-import { Button, Cascader, Input, Popconfirm, Select, Table } from 'antd'
+import { Button, Cascader, Input, Select, Table } from 'antd'
 import {
   A1addType,
   TableSelectType,
@@ -20,6 +20,8 @@ import dayjs from 'dayjs'
 import AddCamera from './AddCamera'
 import { mapDataAll2 } from '../C1User/AddUser/city'
 import UpXlsx from '@/components/UpXlsx'
+import history from '@/utils/history'
+import MyPopconfirm from '@/components/MyPopconfirm'
 
 const tableSelectBase: TableSelectType = {
   siteArr: undefined,
@@ -249,8 +251,7 @@ function A1Camera() {
         title: '操作',
         render: (item: A1ListType) => (
           <>
-            {/* // 查看 待完善 */}
-            <Button size='small' type='text'>
+            <Button size='small' type='text' onClick={() => history.push(`/lookList/${item.id}`)}>
               查看
             </Button>
             <Button
@@ -260,17 +261,7 @@ function A1Camera() {
             >
               编辑
             </Button>
-            <Popconfirm
-              title='删除后无法恢复，是否删除?'
-              okText='删除'
-              cancelText='取消'
-              onConfirm={() => delByIdFu(item.id)}
-              okButtonProps={{ loading: false }}
-            >
-              <Button size='small' type='text' danger>
-                删除
-              </Button>
-            </Popconfirm>
+            <MyPopconfirm txtK='删除' onConfirm={() => delByIdFu(item.id)} />
           </>
         )
       }
@@ -454,7 +445,7 @@ function A1Camera() {
         />
       </div>
 
-      {/* 新增 编辑 查看 出来的页面 */}
+      {/* 新增 编辑  出来的页面 */}
       {openInfo.id ? (
         <AddCamera
           openInfo={openInfo}

src/pages/A2Abusiness/AddBusiness/index.tsx

@@ -20,12 +20,12 @@ type Props = {
   upTableFu: () => void
   addTableFu: () => void
 }
-type TableListType = {
+export type TableListType = {
   cameraSn: string
   cameraType: string
+  remark: string
   id: number
   idxx: string
-  remark: string
 }
 
 function AddBusiness({ topType, openInfo, closeFu, upTableFu, addTableFu }: Props) {

src/pages/A2Abusiness/index.tsx

@@ -9,9 +9,11 @@ import ExportJsonExcel from 'js-export-excel'
 import dayjs from 'dayjs'
 import { A2AListType } from '@/types'
 import { A1addType } from '../A1Camera/data'
-import { Button, Cascader, DatePicker, Input, Popconfirm, Table } from 'antd'
+import { Button, Cascader, DatePicker, Input, Table } from 'antd'
 import { mapDataAll2 } from '../C1User/AddUser/city'
 import AddBusiness from './AddBusiness'
+import history from '@/utils/history'
+import MyPopconfirm from '@/components/MyPopconfirm'
 
 const { RangePicker } = DatePicker
 
@@ -258,8 +260,11 @@ function A2Abusiness() {
         title: '操作',
         render: (item: A2AListType) => (
           <>
-            {/* // 查看 待完善 */}
-            <Button size='small' type='text'>
+            <Button
+              size='small'
+              type='text'
+              onClick={() => history.push(`/look${topType}/${item.id}`)}
+            >
               查看
             </Button>
             <Button
@@ -269,22 +274,12 @@ function A2Abusiness() {
             >
               编辑
             </Button>
-            <Popconfirm
-              title='删除后无法恢复，是否删除?'
-              okText='删除'
-              cancelText='取消'
-              onConfirm={() => delByIdFu(item.id)}
-              okButtonProps={{ loading: false }}
-            >
-              <Button size='small' type='text' danger>
-                删除
-              </Button>
-            </Popconfirm>
+            <MyPopconfirm txtK='删除' onConfirm={() => delByIdFu(item.id)} />
           </>
         )
       }
     ]
-  }, [delByIdFu])
+  }, [delByIdFu, topType])
 
   // 点击新增和编辑的数据
   const [openInfo, setOpenInfo] = useState<A1addType>({ id: 0, txt: '' })
@@ -455,7 +450,7 @@ function A2Abusiness() {
         共 <span>{A2ATableList.total}</span> 条数据
       </div>
 
-      {/* 新增 编辑 查看 出来的页面 */}
+      {/* 新增 编辑 出来的页面 */}
       {openInfo.id ? (
         <AddBusiness
           topType={topType}

src/pages/ALookPage/A1List/index.module.scss

@@ -0,0 +1,67 @@
+.A1List {
+  position: absolute;
+  z-index: 10;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+  border-radius: 10px;
+  padding: 15px 24px;
+  :global {
+    .lookListBtn {
+      text-align: end;
+      margin-bottom: 10px;
+      padding-right: 45px;
+    }
+
+    .lookListBox {
+      width: 100%;
+      height: calc(100% - 42px);
+      position: relative;
+      overflow-y: auto;
+      .lookTit {
+        width: calc(100% - 30px);
+        font-weight: 700;
+        color: var(--themeColor);
+        font-size: 18px;
+        padding: 12px 0;
+        border-top: 1px solid #ccc;
+      }
+
+      .lLtxt {
+        display: flex;
+        width: 100%;
+        margin-bottom: 10px;
+        .lLtxtLeft {
+          width: 100px;
+          text-align: right;
+          font-weight: 700;
+          span {
+            color: #ff4d4f;
+          }
+        }
+        .lLtxtRight {
+          width: calc(100% - 100px);
+        }
+      }
+    }
+
+    .lookListBoxAdd {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 100;
+      width: 100%;
+      height: 100%;
+      padding: 100px 200px;
+      background-color: rgba(0, 0, 0, 0.6);
+      border-radius: 10px;
+      & > div {
+        position: relative;
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+}

src/pages/ALookPage/A1List/index.tsx

@@ -0,0 +1,162 @@
+import React, { useCallback, useEffect, useState } from 'react'
+import styles from './index.module.scss'
+
+import { useParams } from 'react-router-dom'
+import { A1_APIgetInfo, A1_APIremove } from '@/store/action/A1Camera'
+import history from '@/utils/history'
+import { Button } from 'antd'
+import { MessageFu } from '@/utils/message'
+import MyPopconfirm from '@/components/MyPopconfirm'
+import { A1addType } from '@/pages/A1Camera/data'
+import AddCamera from '@/pages/A1Camera/AddCamera'
+import { TopTypeType } from '@/pages/A2Abusiness/data'
+import LookTable from '../components/LookTable'
+import { lookTable1 } from '../components/LookTable/tableData'
+
+type TxtOrdersType = {
+  id: number
+  type: TopTypeType
+  num: string
+  creatorName: string
+  updateTime: string
+}
+
+type TxtType = {
+  id: number
+  cameraSn: string
+  cameraType: 'KJ' | 'KK'
+  remark: string
+  // 业务订单数组
+  orders: TxtOrdersType[]
+}
+
+function A1List() {
+  const urlObj: any = useParams()
+
+  const [urlId, setUrlId] = useState(0)
+
+  // 获取地址栏参数
+  useEffect(() => {
+    setUrlId(Number(urlObj.id))
+  }, [urlObj])
+
+  // 通过id获取详情
+  const getInfoFu = useCallback(async (id: number) => {
+    const res = await A1_APIgetInfo(id)
+    if (res.code === 0) {
+      const data = res.data
+
+      setTxtInfo({
+        ...data,
+        orders: data.orders || []
+      })
+    }
+  }, [])
+
+  // 进页面发送请求
+  useEffect(() => {
+    if (urlId) {
+      getInfoFu(urlId)
+    }
+  }, [getInfoFu, urlId])
+
+  // 详情信息
+  const [txtInfo, setTxtInfo] = useState({} as TxtType)
+
+  // 点击删除
+  const delFu = useCallback(async () => {
+    const res = await A1_APIremove(urlId)
+    if (res.code === 0) {
+      MessageFu.success('删除成功!')
+      history.go(-1)
+    }
+  }, [urlId])
+
+  // 点击新增和编辑的数据
+  const [openInfo, setOpenInfo] = useState<A1addType>({ id: 0, txt: '' })
+
+  return (
+    <div className={styles.A1List}>
+      <div className='pageTitle'>相机列表-查看</div>
+
+      <div className='lookListBtn'>
+        <Button type='primary' onClick={() => setOpenInfo({ id: urlId, txt: '编辑' })}>
+          编辑
+        </Button>
+        &emsp;
+        <MyPopconfirm
+          txtK='删除'
+          loc='bottom'
+          onConfirm={() => delFu()}
+          Dom={<Button danger>删除</Button>}
+        />
+      </div>
+
+      {txtInfo.id ? (
+        <div className='lookListBox'>
+          <div className='lookTit'>相机信息</div>
+
+          <div className='lLtxt'>
+            <div className='lLtxtLeft'>
+              <span>*</span> 相机类型：
+            </div>
+            <div className='lLtxtRight'>{txtInfo.cameraType === 'KJ' ? '看见' : '看看'}</div>
+          </div>
+
+          <div className='lLtxt'>
+            <div className='lLtxtLeft'>
+              <span>*</span> SN编码：
+            </div>
+            <div className='lLtxtRight'>{txtInfo.cameraSn}</div>
+          </div>
+
+          <div className='lLtxt'>
+            <div className='lLtxtLeft'>备注：</div>
+            <div className='lLtxtRight'>{txtInfo.remark || '（空）'}</div>
+          </div>
+
+          <div className='lookTit'>业务订单</div>
+          <LookTable
+            list={txtInfo.orders}
+            columnsTemp={lookTable1}
+            lastBtn={[
+              {
+                title: '操作',
+                render: (item: TxtOrdersType) => (
+                  <Button
+                    size='small'
+                    type='text'
+                    onClick={() => history.push(`/look${item.type}/${item.id}`)}
+                  >
+                    查看
+                  </Button>
+                )
+              }
+            ]}
+          />
+
+          {/* 待完善 */}
+          <div className='lookTit'>物流订单</div>
+        </div>
+      ) : null}
+
+      {/* 编辑  出来的页面 */}
+      {openInfo.id ? (
+        <div className='lookListBoxAdd'>
+          <div>
+            <AddCamera
+              openInfo={openInfo}
+              closeFu={() => setOpenInfo({ id: 0, txt: '' })}
+              upTableFu={() => getInfoFu(urlId)}
+              addTableFu={() => {}}
+            />
+          </div>
+        </div>
+      ) : null}
+    </div>
+  )
+}
+
+const MemoA1List = React.memo(A1List)
+
+export default MemoA1List

src/pages/ALookPage/A2BX/index.module.scss

@@ -0,0 +1,4 @@
+.A2BX {
+  :global {
+  }
+}

src/pages/ALookPage/A2BX/index.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import styles from './index.module.scss'
+function A2BX() {
+  return (
+    <div className={styles.A2BX}>
+      <div className='pageTitle'>业务订单-查看（报修）</div>
+    </div>
+  )
+}
+
+const MemoA2BX = React.memo(A2BX)
+
+export default MemoA2BX

src/pages/ALookPage/A2DS/index.module.scss

@@ -0,0 +1,4 @@
+.A2DS {
+  :global {
+  }
+}

src/pages/ALookPage/A2DS/index.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import styles from './index.module.scss'
+function A2DS() {
+  return (
+    <div className={styles.A2DS}>
+      <div className='pageTitle'>业务订单-查看（租凭）</div>
+    </div>
+  )
+}
+
+const MemoA2DS = React.memo(A2DS)
+
+export default MemoA2DS

src/pages/ALookPage/A2WX/index.module.scss

@@ -0,0 +1,4 @@
+.A2WX {
+  :global {
+  }
+}

src/pages/ALookPage/A2WX/index.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import styles from './index.module.scss'
+function A2WX() {
+  return (
+    <div className={styles.A2WX}>
+      <div className='pageTitle'>业务订单-查看（租凭）</div>
+    </div>
+  )
+}
+
+const MemoA2WX = React.memo(A2WX)
+
+export default MemoA2WX

src/pages/ALookPage/A2XS/index.module.scss

@@ -0,0 +1,4 @@
+.A2XS {
+  :global {
+  }
+}

src/pages/ALookPage/A2XS/index.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import styles from './index.module.scss'
+function A2XS() {
+  return (
+    <div className={styles.A2XS}>
+      <div className='pageTitle'>业务订单-查看（销售）</div>
+    </div>
+  )
+}
+
+const MemoA2XS = React.memo(A2XS)
+
+export default MemoA2XS

src/pages/ALookPage/A2ZL/index.module.scss

@@ -0,0 +1,13 @@
+.A2ZL {
+  position: absolute;
+  z-index: 10;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+  border-radius: 10px;
+  padding: 15px 24px;
+  :global {
+  }
+}

src/pages/ALookPage/A2ZL/index.tsx

@@ -0,0 +1,51 @@
+import React, { useCallback, useEffect, useState } from 'react'
+import styles from './index.module.scss'
+import { useParams } from 'react-router-dom'
+import { TopTypeType } from '@/pages/A2Abusiness/data'
+import { A2A_APIgetInfo } from '@/store/action/A2Abusiness'
+function A2ZL() {
+  const urlObj: any = useParams()
+
+  const [urlId, setUrlId] = useState(0)
+
+  const [topType, setTopType] = useState<TopTypeType | ''>('')
+
+  // 获取地址栏参数
+  useEffect(() => {
+    setUrlId(Number(urlObj.id))
+  }, [urlObj])
+
+  // 通过id获取详情
+  const getInfoFu = useCallback(async (id: number) => {
+    const res = await A2A_APIgetInfo(id)
+    if (res.code === 0) {
+      const data = res.data
+
+      setTopType(data.type)
+
+      console.log(123, data)
+
+      // setTxtInfo({
+      //   ...data,
+      //   orders: data.orders || []
+      // })
+    }
+  }, [])
+
+  // 进页面发送请求
+  useEffect(() => {
+    if (urlId) {
+      getInfoFu(urlId)
+    }
+  }, [getInfoFu, urlId])
+
+  return (
+    <div className={styles.A2ZL}>
+      <div className='pageTitle'>业务订单-查看（租凭）</div>
+    </div>
+  )
+}
+
+const MemoA2ZL = React.memo(A2ZL)
+
+export default MemoA2ZL

src/pages/ALookPage/components/LookTable/index.module.scss

@@ -0,0 +1,13 @@
+.LookTable {
+  :global {
+    .tableListBox {
+      width: 1000px;
+      position: relative;
+      padding-bottom: 40px;
+      .tableNumBox {
+        right: 0 !important;
+        bottom: 10px !important;
+      }
+    }
+  }
+}

src/pages/ALookPage/components/LookTable/index.tsx

@@ -0,0 +1,82 @@
+import React, { useCallback, useMemo } from 'react'
+import styles from './index.module.scss'
+import { Table } from 'antd'
+
+type props = {
+  list: any //表格数据
+  columnsTemp: any[][] //表格展示
+  lastBtn: any[] //表格最后的操作
+  // 为空的定制字段
+  isNull?: string
+}
+
+function LookTable({ list, columnsTemp, isNull = '/', lastBtn }: props) {
+  const dataChangeFu = useCallback(
+    (v: any) => {
+      /**
+       * txt:正常数据
+       * txtChange:判断显示不同字段
+       * text:文字比较多的情况
+       */
+
+      const obj = {
+        txt: (item: any) => item[v[2]] || isNull,
+        txtChange: (item: any) => Reflect.get(v[3], item[v[2]]) || v[4] || isNull,
+        text: (item: any) => {
+          let tempCom: any = item[v[2]] || isNull
+
+          if (tempCom.length >= v[3]) {
+            tempCom = tempCom.substring(0, v[3]) + '...'
+          }
+
+          if (v[4]) {
+            // tempCom = tableComObj(v[4], [tempCom, item[v[2]]]);
+          } else if (item[v[2]].length >= v[3]) {
+            tempCom = (
+              <span style={{ cursor: 'pointer' }} title={item[v[2]]}>
+                {tempCom}
+              </span>
+            )
+          }
+
+          return tempCom
+        }
+      }
+
+      return Reflect.get(obj, v[0])
+    },
+    [isNull]
+  )
+
+  const columns = useMemo(() => {
+    const arr: any = columnsTemp.map((v: any) => ({
+      title: v[1],
+      render: dataChangeFu(v)
+    }))
+
+    return arr
+  }, [columnsTemp, dataChangeFu])
+
+  return (
+    <div className={styles.LookTable}>
+      {/* --------------表格-------------- */}
+      <div className='tableListBox'>
+        <Table
+          size='small'
+          dataSource={list}
+          columns={[...columns, ...lastBtn]}
+          rowKey='id'
+          pagination={false}
+        />
+        {/*  右下角的列表数量 */}
+        <div className='tableNumBox'>
+          共 <span>{list.length}</span> 条数据
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const MemoLookTable = React.memo(LookTable)
+
+export default MemoLookTable

src/pages/ALookPage/components/LookTable/tableData.ts

@@ -0,0 +1,7 @@
+// 业务订单的表格数据
+export const lookTable1 = [
+  ['txtChange', '订单类型', 'type', { ZL: '租赁', XS: '销售', BX: '报修', DS: '定损', WX: '维修' }],
+  ['txt', '订单编号', 'num'],
+  ['txt', '编辑人', 'creatorName'],
+  ['txt', '更新时间', 'updateTime']
+]

src/pages/ALookPage/components/初始化组件 copy/index.module.scss

@@ -0,0 +1,5 @@
+.AAAAA{
+  :global{
+    
+  }
+}

src/pages/ALookPage/components/初始化组件 copy/index.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import styles from "./index.module.scss";
+ function AAAAA() {
+  
+  return (
+    <div className={styles.AAAAA}>
+      <h1>AAAAA</h1>
+    </div>
+  )
+}
+
+const MemoAAAAA = React.memo(AAAAA);
+
+export default MemoAAAAA;

src/pages/Layout/data.ts

@@ -13,6 +13,15 @@ const tabLeftArr: RouterType = [
         Com: React.lazy(() => import('../A1Camera')),
         done: false
       },
+      // 相机列表的查看
+      {
+        id: '1.1.1',
+        name: '相机列表-查看',
+        path: '/lookList/:id',
+        Com: React.lazy(() => import('../ALookPage/A1List')),
+        done: false,
+        noShow: true
+      },
       {
         id: '1.3',
         name: '业务订单',
@@ -20,6 +29,47 @@ const tabLeftArr: RouterType = [
         Com: React.lazy(() => import('../A2Abusiness')),
         done: false
       },
+      // 业务订单的查看
+      {
+        id: '1.3.1',
+        name: '业务订单-查看-租凭',
+        path: '/lookZL/:id',
+        Com: React.lazy(() => import('../ALookPage/A2ZL')),
+        done: false,
+        noShow: true
+      },
+      {
+        id: '1.3.2',
+        name: '业务订单-查看-销售',
+        path: '/lookXS/:id',
+        Com: React.lazy(() => import('../ALookPage/A2XS')),
+        done: false,
+        noShow: true
+      },
+      {
+        id: '1.3.3',
+        name: '业务订单-查看-报修',
+        path: '/lookBX/:id',
+        Com: React.lazy(() => import('../ALookPage/A2BX')),
+        done: false,
+        noShow: true
+      },
+      {
+        id: '1.3.4',
+        name: '业务订单-查看-定损',
+        path: '/lookDS/:id',
+        Com: React.lazy(() => import('../ALookPage/A2DS')),
+        done: false,
+        noShow: true
+      },
+      {
+        id: '1.3.5',
+        name: '业务订单-查看-维修',
+        path: '/lookWX/:id',
+        Com: React.lazy(() => import('../ALookPage/A2WX')),
+        done: false,
+        noShow: true
+      },
       {
         id: '1.4',
         name: '物流订单',

src/pages/Layout/index.module.scss

@@ -4,7 +4,6 @@
   display: flex;
 
   :global {
-
     .layoutLeft {
       position: relative;
       z-index: 30;
@@ -13,12 +12,11 @@
       background-color: #f6f8f9;
       box-shadow: 0px 0px 6px 2px #ccc;
 
-
       .layoutLeftTop {
         text-align: center;
         padding: 20px 0 20px;
 
-        &>img {
+        & > img {
           width: 100px;
         }
       }
@@ -48,26 +46,18 @@
           }
 
           .active {
-            pointer-events: none;
+            // pointer-events: none;
             background-color: var(--themeColor);
             color: #fff;
           }
         }
-
-
-
-
-
       }
-
-
     }
 
     .layoutRight {
       width: calc(100% - 220px);
       height: 100%;
 
-
       .layoutRightTop {
         height: 60px;
         display: flex;
@@ -101,7 +91,7 @@
             width: 140px;
             opacity: 0;
             pointer-events: none;
-            transition: bottom .3s;
+            transition: bottom 0.3s;
             height: 120px;
             position: absolute;
             left: 50%;
@@ -109,13 +99,13 @@
             bottom: -80px;
 
             // color: rgb(226, 223, 223);
-            &>div {
+            & > div {
               box-shadow: 1px 1px 4px 4px #ccc;
               margin-top: 15px;
               border-radius: 10px;
               overflow: hidden;
 
-              &>span {
+              & > span {
                 background-color: #fff;
                 display: block;
                 width: 100%;
@@ -128,7 +118,6 @@
                 }
               }
             }
-
           }
 
           &:hover {
@@ -145,8 +134,6 @@
             .userInco2 {
               display: none;
             }
-
-
           }
         }
       }
@@ -162,16 +149,12 @@
           // overflow: hidden;
           position: relative;
 
-          &>div {
+          & > div {
             width: 100%;
             height: 100%;
           }
         }
       }
-
     }
-
-
-
   }
-}
+}

src/pages/Layout/index.tsx

@@ -1,198 +1,196 @@
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import { CaretUpOutlined, CaretDownOutlined } from "@ant-design/icons";
-import styles from "./index.module.scss";
-import SpinLoding from "@/components/SpinLoding";
-import { Route, Switch, useLocation } from "react-router-dom";
-import AuthRoute from "@/components/AuthRoute";
-import classNames from "classnames";
-import history from "@/utils/history";
-import { Button, Form, Input, Modal, Popconfirm } from "antd";
-import { Base64 } from "js-base64";
-import encodeStr from "@/utils/pass";
-import { passWordEditAPI } from "@/store/action/layout";
-import { getTokenInfo, removeTokenInfo } from "@/utils/storage";
-import { MessageFu } from "@/utils/message";
-import logoImg from "@/assets/img/logo.png";
-import logoImg2 from "@/assets/img/logo2.png";
-import NotFound from "@/components/NotFound";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons'
+import styles from './index.module.scss'
+import SpinLoding from '@/components/SpinLoding'
+import { Route, Switch, useLocation } from 'react-router-dom'
+import AuthRoute from '@/components/AuthRoute'
+import classNames from 'classnames'
+import history from '@/utils/history'
+import { Button, Form, Input, Modal, Popconfirm } from 'antd'
+import { Base64 } from 'js-base64'
+import encodeStr from '@/utils/pass'
+import { passWordEditAPI } from '@/store/action/layout'
+import { getTokenInfo, removeTokenInfo } from '@/utils/storage'
+import { MessageFu } from '@/utils/message'
+import logoImg from '@/assets/img/logo.png'
+import logoImg2 from '@/assets/img/logo2.png'
+import NotFound from '@/components/NotFound'
 
-import { RouterType, RouterTypeRow } from "@/types";
-import tabLeftArr from "./data";
-import { C1_APIgetInfo } from "@/store/action/C1User";
-import { envTxtRes } from "@/utils/envTxt";
+import { RouterType, RouterTypeRow } from '@/types'
+import tabLeftArr from './data'
+import { C1_APIgetInfo } from '@/store/action/C1User'
+import { envTxtRes } from '@/utils/envTxt'
 
 function Layout() {
   // 左侧菜单 和 路由 信息
-  const [list, setList] = useState([] as RouterType);
+  const [list, setList] = useState([] as RouterType)
 
   // 用户名
-  const [userName, setUserName] = useState("-");
+  const [userName, setUserName] = useState('-')
 
   // 进页面更新用户信息
   const getUserInfo = useCallback(async () => {
-    const userInfo = getTokenInfo().user;
+    const userInfo = getTokenInfo().user
     if (userInfo && userInfo.id) {
-      const res = await C1_APIgetInfo(userInfo.id);
+      const res = await C1_APIgetInfo(userInfo.id)
       if (res.code === 0) {
         // 设置右上角的名字
-        setUserName(res.data.realName);
+        setUserName(res.data.realName)
 
         // 铁塔管理员只能看 进度 和 场景
-        const arrTemp = ["2.1", "2.2"];
+        const arrTemp = ['2.1', '2.2']
 
-        const flag = res.data.roleId === 4;
+        const flag = res.data.roleId === 4
 
-        tabLeftArr.forEach((v) => {
-          v.son.forEach((v2) => {
+        tabLeftArr.forEach(v => {
+          v.son.forEach(v2 => {
             if (flag) {
               // 是铁塔管理员
-              if (arrTemp.includes(v2.id)) v2.done = true;
-              else v2.done = false;
-            } else v2.done = true;
-          });
-        });
+              if (arrTemp.includes(v2.id)) v2.done = true
+              else v2.done = false
+            } else v2.done = true
+          })
+        })
 
         setList(
-          tabLeftArr.map((v) => ({
+          tabLeftArr.map(v => ({
             ...v,
-            son: v.son.filter((v2) => v2.done),
+            son: v.son.filter(v2 => v2.done)
           }))
-        );
+        )
       }
     }
-  }, []);
+  }, [])
 
   useEffect(() => {
-    getUserInfo();
-  }, [getUserInfo]);
+    getUserInfo()
+  }, [getUserInfo])
 
   // 点击跳转
   const pathCutFu = useCallback((path: string) => {
-    history.push(path);
-  }, []);
+    history.push(path)
+  }, [])
 
   // 当前路径选中的左侧菜单
-  const location = useLocation();
-  const [path, setPath] = useState("");
+  const location = useLocation()
+  const [path, setPath] = useState('')
+
+  const businessUrlArr = useRef(['/lookZL', '/lookXS', '/lookBX', '/lookDS', '/lookWX'])
 
   useEffect(() => {
-    const arr = location.pathname.split("/");
-    let pathTemp = "/";
-    if (arr[1]) pathTemp = "/" + arr[1];
+    const arr = location.pathname.split('/')
+    let pathTemp = '/'
+    if (arr[1]) pathTemp = '/' + arr[1]
+
+    // 匹配相机列表的 查看
+    if (pathTemp === '/lookList') pathTemp = '/'
+
+    // 匹配业务订单的查看
+    if (businessUrlArr.current.includes(pathTemp)) pathTemp = '/business'
 
-    setPath(pathTemp);
-  }, [location]);
+    setPath(pathTemp)
+  }, [location])
 
   // 修改密码相关
-  const [open, setOpen] = useState(false);
+  const [open, setOpen] = useState(false)
 
   // 拿到新密码的输入框的值
-  const oldPasswordValue = useRef("");
+  const oldPasswordValue = useRef('')
 
-  const checkPassWord = (rule: any, value: any = "") => {
-    if (value !== oldPasswordValue.current)
-      return Promise.reject("新密码不一致!");
-    else return Promise.resolve(value);
-  };
+  const checkPassWord = (rule: any, value: any = '') => {
+    if (value !== oldPasswordValue.current) return Promise.reject('新密码不一致!')
+    else return Promise.resolve(value)
+  }
 
   const onFinish = async (values: any) => {
     // 通过校验之后发送请求
-    if (values.oldPassword === values.newPassword)
-      return MessageFu.warning("新旧密码不能相同!");
+    if (values.oldPassword === values.newPassword) return MessageFu.warning('新旧密码不能相同!')
     const obj = {
       oldPassword: encodeStr(Base64.encode(values.oldPassword)),
-      newPassword: encodeStr(Base64.encode(values.newPassword)),
-    };
-    const res: any = await passWordEditAPI(obj);
+      newPassword: encodeStr(Base64.encode(values.newPassword))
+    }
+    const res: any = await passWordEditAPI(obj)
     if (res.code === 0) {
-      MessageFu.success("修改成功!");
-      loginExit();
+      MessageFu.success('修改成功!')
+      loginExit()
     }
-  };
+  }
 
   // 点击退出登录
   const loginExit = () => {
-    removeTokenInfo();
-    history.push("/login");
-  };
+    removeTokenInfo()
+    history.push('/login')
+  }
 
   // 路由信息（过滤之后的）
   const RouterCom = useMemo(() => {
-    const arr: RouterTypeRow = [];
-    list.forEach((v) => {
+    const arr: RouterTypeRow = []
+    list.forEach(v => {
       if (v.son && v.son[0]) {
-        v.son.forEach((v2) => {
-          if (v2.done) arr.push(v2);
-        });
+        v.son.forEach(v2 => {
+          if (v2.done) arr.push(v2)
+        })
       }
-    });
-    return arr;
-  }, [list]);
+    })
+    return arr
+  }, [list])
 
   // 第一个页面不是 项目 管理 的时候 动态 跳转
   useEffect(() => {
-    if (RouterCom && RouterCom[0] && RouterCom[0].id !== "1.1")
-      history.replace(RouterCom[0].path);
-  }, [RouterCom]);
+    if (RouterCom && RouterCom[0] && RouterCom[0].id !== '1.1') history.replace(RouterCom[0].path)
+  }, [RouterCom])
 
   return (
     <div className={styles.Layout}>
       {/* 左边 */}
-      <div className="layoutLeft">
-        <div className="layoutLeftTop">
-          <img src={envTxtRes === "四维" ? logoImg : logoImg2} alt="" />
+      <div className='layoutLeft'>
+        <div className='layoutLeftTop'>
+          <img src={envTxtRes === '四维' ? logoImg : logoImg2} alt='' />
         </div>
         {/* 左边主体 */}
-        <div className="layoutLeftMain">
-          {list.map((v) => (
+        <div className='layoutLeftMain'>
+          {list.map(v => (
             <div
-              className={classNames("layoutLRowBox")}
+              className={classNames('layoutLRowBox')}
               key={v.id}
-              hidden={v.son.every((c) => !c.done)}
+              hidden={v.son.every(c => !c.done)}
             >
-              <div className="layoutLRowBoxTxt">{v.name}</div>
-              {v.son.map((v2) => (
-                <div
-                  key={v2.id}
-                  className={classNames(
-                    "layoutLRowBoxRow",
-                    path === v2.path ? "active" : ""
-                  )}
-                  onClick={() => pathCutFu(v2.path)}
-                >
-                  {v2.name}
-                </div>
-              ))}
+              <div className='layoutLRowBoxTxt'>{v.name}</div>
+              {v.son
+                .filter(c => !c.noShow)
+                .map(v2 => (
+                  <div
+                    key={v2.id}
+                    className={classNames('layoutLRowBoxRow', path === v2.path ? 'active' : '')}
+                    onClick={() => pathCutFu(v2.path)}
+                  >
+                    {v2.name}
+                  </div>
+                ))}
             </div>
           ))}
         </div>
       </div>
       {/* 右边 */}
-      <div className="layoutRight">
-        <div className="layoutRightTop">
+      <div className='layoutRight'>
+        <div className='layoutRightTop'>
           {/* 用户相关 */}
-          <div className="user">
-            {userName || "匿名"}
-            <div className="userInco userInco1">
+          <div className='user'>
+            {userName || '匿名'}
+            <div className='userInco userInco1'>
               <CaretUpOutlined rev={undefined} />
             </div>
-            <div className="userInco userInco2">
+            <div className='userInco userInco2'>
               <CaretDownOutlined rev={undefined} />
             </div>
-            <div className="userSet">
+            <div className='userSet'>
               <div>
                 <span onClick={() => setOpen(true)}>修改密码</span>
                 <Popconfirm
-                  placement="bottom"
-                  title="确定退出吗?"
-                  okText="确定"
-                  cancelText="取消"
+                  placement='bottom'
+                  title='确定退出吗?'
+                  okText='确定'
+                  cancelText='取消'
                   onConfirm={loginExit}
                   okButtonProps={{ loading: false }}
                 >
@@ -203,16 +201,16 @@ function Layout() {
           </div>
         </div>
         {/* 右边主体 */}
-        <div className="layoutRightMain">
+        <div className='layoutRightMain'>
           {/* 二级路由页面 */}
-          <div className="mainBoxR">
+          <div className='mainBoxR'>
             <React.Suspense fallback={<SpinLoding />}>
               <Switch>
-                {RouterCom.map((v) => (
+                {RouterCom.map(v => (
                   <AuthRoute key={v.id} exact path={v.path} component={v.Com} />
                 ))}
 
-                <Route path="*" component={NotFound} />
+                <Route path='*' component={NotFound} />
               </Switch>
             </React.Suspense>
           </div>
@@ -223,7 +221,7 @@ function Layout() {
       <Modal
         destroyOnClose
         open={open}
-        title="修改密码"
+        title='修改密码'
         onCancel={() => setOpen(false)}
         footer={
           [] // 设置footer为空，去掉 取消 确定默认按钮
@@ -231,41 +229,41 @@ function Layout() {
       >
         <Form
           scrollToFirstError={true}
-          name="basic"
+          name='basic'
           labelCol={{ span: 5 }}
           wrapperCol={{ span: 16 }}
           onFinish={onFinish}
-          autoComplete="off"
+          autoComplete='off'
         >
           <Form.Item
-            label="旧密码"
-            name="oldPassword"
-            rules={[{ required: true, message: "不能为空!" }]}
-            getValueFromEvent={(e) => e.target.value.replace(/\s+/g, "")}
+            label='旧密码'
+            name='oldPassword'
+            rules={[{ required: true, message: '不能为空!' }]}
+            getValueFromEvent={e => e.target.value.replace(/\s+/g, '')}
           >
             <Input.Password maxLength={20} />
           </Form.Item>
 
           <Form.Item
-            label="新密码"
-            name="newPassword"
+            label='新密码'
+            name='newPassword'
             rules={[
-              { required: true, message: "不能为空!" },
-              { min: 6, max: 15, message: "密码长度为6-15个字符!" },
+              { required: true, message: '不能为空!' },
+              { min: 6, max: 15, message: '密码长度为6-15个字符!' }
             ]}
-            getValueFromEvent={(e) => e.target.value.replace(/\s+/g, "")}
+            getValueFromEvent={e => e.target.value.replace(/\s+/g, '')}
           >
             <Input.Password
               maxLength={15}
-              onChange={(e) => (oldPasswordValue.current = e.target.value)}
+              onChange={e => (oldPasswordValue.current = e.target.value)}
             />
           </Form.Item>
 
           <Form.Item
-            label="确定新密码"
-            name="checkPass"
+            label='确定新密码'
+            name='checkPass'
             rules={[{ validator: checkPassWord }]}
-            getValueFromEvent={(e) => e.target.value.replace(/\s+/g, "")}
+            getValueFromEvent={e => e.target.value.replace(/\s+/g, '')}
           >
             <Input.Password maxLength={15} />
           </Form.Item>
@@ -273,16 +271,16 @@ function Layout() {
           <Form.Item wrapperCol={{ offset: 14, span: 16 }}>
             <Button onClick={() => setOpen(false)}>取消</Button>
             &emsp;
-            <Button type="primary" htmlType="submit">
+            <Button type='primary' htmlType='submit'>
               确定
             </Button>
           </Form.Item>
         </Form>
       </Modal>
     </div>
-  );
+  )
 }
 
 // 使用 React.memo 来优化组件，避免组件的无效更新，类似 类组件里面的PureComponent
-const MemoLayout = React.memo(Layout);
-export default MemoLayout;
+const MemoLayout = React.memo(Layout)
+export default MemoLayout

src/types/api/layot.d.ts

@@ -1,26 +1,27 @@
 export type LookDomType = {
-  src: string;
-  type: "video" | "audio" | "model" | "";
-  flag?: boolean;
-};
+  src: string
+  type: 'video' | 'audio' | 'model' | ''
+  flag?: boolean
+}
 
 export type RouterTypeRow = {
-  id: string;
-  name: string;
-  path: string;
-  Com: React.LazyExoticComponent<React.MemoExoticComponent<() => JSX.Element>>;
-  done: boolean;
-}[];
+  id: string
+  name: string
+  path: string
+  Com: React.LazyExoticComponent<React.MemoExoticComponent<() => JSX.Element>>
+  done: boolean
+  noShow?: boolean
+}[]
 
 export type RouterType = {
-  id: string;
-  name: string;
-  son: RouterTypeRow;
-}[];
+  id: string
+  name: string
+  son: RouterTypeRow
+}[]
 
 export type FileImgListType = {
-  id: number;
-  fileName: string;
-  filePath: string;
-  type: "img" | "video" | "doc";
-};
+  id: number
+  fileName: string
+  filePath: string
+  type: 'img' | 'video' | 'doc'
+}