ZL查看（差物流订单）

src/components/ZRichTexts/index.tsx

@@ -130,10 +130,9 @@ function ZRichTexts({ check, dirCode, isLook, myUrl, topType }: Props, ref: any)
     }
   }, [])
 
-  // 让父组件调用的返回 富文本信息 和 表单校验 isTxtFlag为ture表示未通过校验
+  // 让父组件调用的返回 富文本信息 和 表单校验 isTxtFlag为true表示未通过校验
   const fatherBtnOkFu = useCallback(() => {
     const arr: any[] = []
-
     sectionArr.forEach((v, i) => {
       arr.push({
         ...v,
@@ -142,7 +141,7 @@ function ZRichTexts({ check, dirCode, isLook, myUrl, topType }: Props, ref: any)
     })
 
     const obj = {
-      isSection: 'no',
+      isSection: isTxtFlag,
       txtArr: arr
     }
 

src/pages/A2Abusiness/AddBusiness/index.module.scss

@@ -56,7 +56,7 @@
       .A2AaddBtn {
         position: absolute;
         top: 50%;
-        left: 1200px;
+        left: 1145px;
         transform: translateY(-50%);
         .ant-row {
           width: auto;

src/pages/A2Abusiness/AddBusiness/index.tsx

@@ -11,7 +11,8 @@ import { mapDataAll3 } from '@/pages/C1User/AddUser/city'
 import UpXlsx from '@/components/UpXlsx'
 import AddCamera from '@/pages/A1Camera/AddCamera'
 import dayjs from 'dayjs'
-import { TopTypeType } from '../data'
+import { A2AtopTypeArr, A2AtopTypeObj, TopTypeType } from '../data'
+import { A2AListCamerasType } from '@/types'
 
 type Props = {
   topType: TopTypeType
@@ -20,17 +21,10 @@ type Props = {
   upTableFu: () => void
   addTableFu: () => void
 }
-export type TableListType = {
-  cameraSn: string
-  cameraType: string
-  remark: string
-  id: number
-  idxx: string
-}
 
 function AddBusiness({ topType, openInfo, closeFu, upTableFu, addTableFu }: Props) {
   // 表格数据
-  const [tableList, setTableList] = useState<TableListType[]>([])
+  const [tableList, setTableList] = useState<A2AListCamerasType[]>([])
 
   // 点击表格里面新增的数据
   const [tableAdd, setTableAdd] = useState<A1addType>({ id: 0, txt: '' })
@@ -55,12 +49,12 @@ function AddBusiness({ topType, openInfo, closeFu, upTableFu, addTableFu }: Prop
     return [
       {
         title: '相机类型',
-        render: (item: TableListType) =>
+        render: (item: A2AListCamerasType) =>
           item.cameraType ? (item.cameraType === 'KK' ? '看看' : '看见') : '（空）'
       },
       {
         title: 'SN码',
-        render: (item: TableListType) => (
+        render: (item: A2AListCamerasType) => (
           <>
             {item.cameraSn}
             {item.id ? (
@@ -76,11 +70,11 @@ function AddBusiness({ topType, openInfo, closeFu, upTableFu, addTableFu }: Prop
       },
       {
         title: '备注',
-        render: (item: TableListType) => item.remark || '（空）'
+        render: (item: A2AListCamerasType) => item.remark || '（空）'
       },
       {
         title: '操作',
-        render: (item: TableListType) => (
+        render: (item: A2AListCamerasType) => (
           <MyPopconfirm txtK='删除' onConfirm={() => delTableFu(item.idxx)} />
         )
       }
@@ -195,6 +189,11 @@ function AddBusiness({ topType, openInfo, closeFu, upTableFu, addTableFu }: Prop
   // 上传xlsx 的ref
   const upXlsxRef = useRef<any>(null)
 
+  // 第二个信息标题
+  const tit2 = useMemo(() => {
+    return Reflect.get(A2AtopTypeObj, topType)
+  }, [topType])
+
   return (
     <div className={styles.AddBusiness}>
       <div className='A2AaddMain'>
@@ -235,16 +234,18 @@ function AddBusiness({ topType, openInfo, closeFu, upTableFu, addTableFu }: Prop
           </div>
 
           <Form.Item
-            label='租凭日期'
+            label={`${A2AtopTypeArr.find(v => v.key === topType)?.name}日期`}
             name='dateStart'
             rules={[{ required: true, message: '请选择日期!' }]}
           >
             <DatePicker placeholder='请选择日期' />
           </Form.Item>
 
-          <Form.Item label='预计归还日期' name='dateEnd'>
-            <DatePicker placeholder='请选择日期' />
-          </Form.Item>
+          {['ZL'].includes(topType) ? (
+            <Form.Item label='预计归还日期' name='dateEnd'>
+              <DatePicker placeholder='请选择日期' />
+            </Form.Item>
+          ) : null}
 
           <div className='formBox'>
             <div className='formBoxLL'>备注：</div>
@@ -260,10 +261,10 @@ function AddBusiness({ topType, openInfo, closeFu, upTableFu, addTableFu }: Prop
             </div>
           </div>
 
-          <div className='A2Atit'>租凭方信息</div>
+          <div className='A2Atit'>{tit2}信息</div>
 
           <Form.Item
-            label='租赁方名称'
+            label={`${tit2}名称`}
             name='zlName'
             rules={[{ required: true, message: '请输入内容!' }]}
             getValueFromEvent={e => e.target.value.replace(/\s+/g, '')}

src/pages/A2Abusiness/data.ts

@@ -24,3 +24,10 @@ export const A2AtopTypeArr: { name: string; key: TopTypeType }[] = [
 ]
 
 export type TopTypeType = 'ZL' | 'XS' | 'BX' | 'DS' | 'WX'
+export const A2AtopTypeObj: any = {
+  ZL: '租赁方',
+  XS: '购买方',
+  BX: '报修方',
+  DS: '报损方',
+  WX: '收货方'
+}

src/pages/A2Abusiness/index.tsx

@@ -351,12 +351,12 @@ function A2Abusiness() {
           </div>
 
           <div className='A2AtopRow'>
-            <span>租凭日期：</span>
+            <span>租赁日期：</span>
             <RangePicker key={inputKey} onChange={timeChange} />
           </div>
 
           <div className='A2AtopRow'>
-            <span>租凭方名称：</span>
+            <span>租赁方名称：</span>
             <Input
               key={inputKey}
               maxLength={20}

src/pages/ALookPage/A1List/index.tsx

@@ -72,7 +72,7 @@ function A1List() {
     }
   }, [urlId])
 
-  // 点击新增和编辑的数据
+  // 点击编辑
   const [openInfo, setOpenInfo] = useState<A1addType>({ id: 0, txt: '' })
 
   return (

src/pages/ALookPage/A2DS/index.tsx

@@ -3,7 +3,7 @@ import styles from './index.module.scss'
 function A2DS() {
   return (
     <div className={styles.A2DS}>
-      <div className='pageTitle'>业务订单-查看（租凭）</div>
+      <div className='pageTitle'>业务订单-查看（租赁）</div>
     </div>
   )
 }

src/pages/ALookPage/A2WX/index.tsx

@@ -3,7 +3,7 @@ import styles from './index.module.scss'
 function A2WX() {
   return (
     <div className={styles.A2WX}>
-      <div className='pageTitle'>业务订单-查看（租凭）</div>
+      <div className='pageTitle'>业务订单-查看（租赁）</div>
     </div>
   )
 }

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

@@ -9,5 +9,47 @@
   border-radius: 10px;
   padding: 15px 24px;
   :global {
+    .lookZLBtn {
+      text-align: end;
+      margin-bottom: 10px;
+      padding-right: 45px;
+    }
+
+    .lookZLBox {
+      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;
+      }
+      .lookTit {
+        display: flex;
+        width: 1000px;
+        justify-content: space-between;
+      }
+    }
+
+    .lookZLBoxAdd {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 100;
+      width: 100%;
+      height: 100%;
+      padding: 50px;
+      background-color: rgba(0, 0, 0, 0.6);
+      border-radius: 10px;
+      & > div {
+        position: relative;
+        width: 100%;
+        height: 100%;
+      }
+    }
   }
 }

src/pages/ALookPage/A2ZL/index.tsx

@@ -1,14 +1,26 @@
-import React, { useCallback, useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useMemo, 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'
+import { A2A_APIgetInfo, A2A_APIremove } from '@/store/action/A2Abusiness'
+import { Button } from 'antd'
+import MyPopconfirm from '@/components/MyPopconfirm'
+import { A1addType } from '@/pages/A1Camera/data'
+import { MessageFu } from '@/utils/message'
+import history from '@/utils/history'
+import { A2AListCamerasType, A2AListType } from '@/types'
+import AddBusiness from '@/pages/A2Abusiness/AddBusiness'
+import LookTxt from '../components/LookTxt'
+import { A2AtopTypeObj } from '@/pages/A2Abusiness/data'
+import LookTxt2 from '../components/LookTxt2'
+import LookTable from '../components/LookTable'
+import { lookTable2 } from '../components/LookTable/tableData'
+
 function A2ZL() {
   const urlObj: any = useParams()
 
   const [urlId, setUrlId] = useState(0)
 
-  const [topType, setTopType] = useState<TopTypeType | ''>('')
+  const [info, setInfo] = useState({} as A2AListType)
 
   // 获取地址栏参数
   useEffect(() => {
@@ -21,14 +33,14 @@ function A2ZL() {
     if (res.code === 0) {
       const data = res.data
 
-      setTopType(data.type)
-
-      console.log(123, data)
-
-      // setTxtInfo({
-      //   ...data,
-      //   orders: data.orders || []
-      // })
+      const rtf = data.rtf || '{"isSection":"true","txtArr":[{"txt":"<p></p>"}]}'
+      const refObj = JSON.parse(rtf)
+      setInfo({
+        ...data,
+        cameras: data.cameras || [],
+        files: data.files || [],
+        rtf: refObj
+      })
     }
   }, [])
 
@@ -39,9 +51,95 @@ function A2ZL() {
     }
   }, [getInfoFu, urlId])
 
+  // 点击删除
+  const delFu = useCallback(async () => {
+    const res = await A2A_APIremove(urlId)
+    if (res.code === 0) {
+      MessageFu.success('删除成功!')
+      history.go(-1)
+    }
+  }, [urlId])
+
+  // 点击编辑
+  const [openInfo, setOpenInfo] = useState<A1addType>({ id: 0, txt: '' })
+
+  // 第二个信息标题
+  const tit2 = useMemo(() => {
+    return Reflect.get(A2AtopTypeObj, info.type)
+  }, [info.type])
+
   return (
     <div className={styles.A2ZL}>
-      <div className='pageTitle'>业务订单-查看（租凭）</div>
+      <div className='pageTitle'>业务订单-查看（租赁）</div>
+
+      <div className='lookZLBtn'>
+        <Button type='primary' onClick={() => setOpenInfo({ id: urlId, txt: '编辑' })}>
+          编辑
+        </Button>
+        &emsp;
+        <MyPopconfirm
+          txtK='删除'
+          loc='bottom'
+          onConfirm={() => delFu()}
+          Dom={<Button danger>删除</Button>}
+        />
+      </div>
+
+      {info.id ? (
+        <div className='lookZLBox'>
+          <div className='lookTit'>订单信息</div>
+
+          <LookTxt info={info} />
+
+          <div className='lookTit'>{tit2}信息</div>
+
+          <LookTxt2 info={info} tit2={tit2} />
+
+          <div className='lookTit'>相机清单</div>
+
+          <LookTable
+            list={info.cameras}
+            columnsTemp={lookTable2}
+            lastBtn={[
+              {
+                title: '操作',
+                render: (item: A2AListCamerasType) => (
+                  <Button
+                    size='small'
+                    type='text'
+                    onClick={() => history.push(`/lookList/${item.id}`)}
+                  >
+                    查看
+                  </Button>
+                )
+              }
+            ]}
+          />
+
+          {/* 待完善 */}
+          <div className='lookTit'>
+            <div>物流订单</div>
+            <div>
+              <Button type='primary'>新增出库</Button>&emsp;<Button type='primary'>新增入库</Button>
+            </div>
+          </div>
+        </div>
+      ) : null}
+
+      {/* 编辑 出来的页面 */}
+      {openInfo.id ? (
+        <div className='lookZLBoxAdd'>
+          <div>
+            <AddBusiness
+              topType={info.type}
+              openInfo={openInfo}
+              closeFu={() => setOpenInfo({ id: 0, txt: '' })}
+              upTableFu={() => getInfoFu(urlId)}
+              addTableFu={() => {}}
+            />
+          </div>
+        </div>
+      ) : null}
     </div>
   )
 }

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

@@ -5,3 +5,9 @@ export const lookTable1 = [
   ['txt', '编辑人', 'creatorName'],
   ['txt', '更新时间', 'updateTime']
 ]
+
+export const lookTable2 = [
+  ['txtChange', '相机类型', 'cameraType', { KK: '看看', KJ: '看见' }],
+  ['txt', 'SN码', 'cameraSn'],
+  ['text', '备注', 'remark', 50]
+]

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

@@ -0,0 +1,32 @@
+.LookTxt {
+  :global {
+    .lLtxt {
+      display: flex;
+      width: 100%;
+      margin-bottom: 10px;
+      .lLtxtLeft {
+        width: 110px;
+        text-align: right;
+        font-weight: 700;
+        span {
+          color: #ff4d4f;
+        }
+      }
+      .lLtxtRight {
+        width: calc(100% - 110px);
+        img {
+          max-width: 300px;
+          max-height: 300px;
+        }
+        .Z3filesRow {
+          margin-top: 0;
+          margin-bottom: 5px;
+        }
+        .lookNone {
+          top: 0;
+          left: 0;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,71 @@
+import React, { useEffect, useRef } from 'react'
+import styles from './index.module.scss'
+import { A2AListType } from '@/types'
+import Z3upFiles from '@/components/Z3upFiles'
+
+type Props = {
+  info: A2AListType
+}
+
+function LookTxt({ info }: Props) {
+  // 合同附件的ref
+  const listFilesRef = useRef<any>(null)
+
+  useEffect(() => {
+    // 回显 合同附件
+    listFilesRef.current.sonFilesShowFu(info.files)
+  }, [info.files])
+
+  return (
+    <div className={styles.LookTxt}>
+      <div className='lLtxt'>
+        <div className='lLtxtLeft'>
+          <span>*</span> 钉钉审批编号：
+        </div>
+        <div className='lLtxtRight'>{info.dingNum}</div>
+      </div>
+
+      <div className='lLtxt'>
+        <div className='lLtxtLeft'>合同附件：</div>
+        <div className='lLtxtRight'>
+          <Z3upFiles
+            max={5}
+            accept='*'
+            isLook={true}
+            ref={listFilesRef}
+            fileCheck={false}
+            dirCode='A2business'
+            myUrl='cms/order/upload'
+            topType={info.type}
+          />
+        </div>
+      </div>
+
+      <div className='lLtxt'>
+        <div className='lLtxtLeft'>
+          <span>*</span> 租赁日期 ：
+        </div>
+        <div className='lLtxtRight'>{info.dateStart}</div>
+      </div>
+
+      <div className='lLtxt'>
+        <div className='lLtxtLeft'>预计归还日期：</div>
+        <div className='lLtxtRight'>{info.dateEnd || '（空）'}</div>
+      </div>
+
+      <div className='lLtxt'>
+        <div className='lLtxtLeft'>备注：</div>
+        <div
+          className='lLtxtRight'
+          dangerouslySetInnerHTML={{
+            __html: info.rtf.isSection ? '（空）' : info.rtf.txtArr[0].txt
+          }}
+        ></div>
+      </div>
+    </div>
+  )
+}
+
+const MemoLookTxt = React.memo(LookTxt)
+
+export default MemoLookTxt

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

@@ -0,0 +1,32 @@
+.LookTxt2 {
+  :global {
+    .lLtxt {
+      display: flex;
+      width: 100%;
+      margin-bottom: 10px;
+      .lLtxtLeft {
+        width: 110px;
+        text-align: right;
+        font-weight: 700;
+        span {
+          color: #ff4d4f;
+        }
+      }
+      .lLtxtRight {
+        width: calc(100% - 110px);
+        img {
+          max-width: 300px;
+          max-height: 300px;
+        }
+        .Z3filesRow {
+          margin-top: 0;
+          margin-bottom: 5px;
+        }
+        .lookNone {
+          top: 0;
+          left: 0;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,48 @@
+import React, { useEffect } from 'react'
+import styles from './index.module.scss'
+import { A2AListType } from '@/types'
+
+type Props = {
+  info: A2AListType
+  tit2: string
+}
+
+function LookTxt2({ info, tit2 }: Props) {
+  useEffect(() => {}, [info.files])
+
+  return (
+    <div className={styles.LookTxt2}>
+      <div className='lLtxt'>
+        <div className='lLtxtLeft'>
+          <span>*</span> {tit2}名称：
+        </div>
+        <div className='lLtxtRight'>{info.zlName}</div>
+      </div>
+
+      <div className='lLtxt'>
+        <div className='lLtxtLeft'>
+          <span>*</span> 城市：
+        </div>
+        <div className='lLtxtRight'>{info.zlProvince + '-' + info.zlCity}</div>
+      </div>
+
+      <div className='lLtxt'>
+        <div className='lLtxtLeft'>
+          <span>*</span> 负责人：
+        </div>
+        <div className='lLtxtRight'>{info.zlUser}</div>
+      </div>
+
+      <div className='lLtxt'>
+        <div className='lLtxtLeft'>
+          <span>*</span> 联系方式：
+        </div>
+        <div className='lLtxtRight'>{info.zlPhone}</div>
+      </div>
+    </div>
+  )
+}
+
+const MemoLookTxt2 = React.memo(LookTxt2)
+
+export default MemoLookTxt2

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

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

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

@@ -1,14 +0,0 @@
-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

@@ -32,7 +32,7 @@ const tabLeftArr: RouterType = [
       // 业务订单的查看
       {
         id: '1.3.1',
-        name: '业务订单-查看-租凭',
+        name: '业务订单-查看-租赁',
         path: '/lookZL/:id',
         Com: React.lazy(() => import('../ALookPage/A2ZL')),
         done: false,

src/types/api/A2Abusiness.ts

@@ -1,6 +1,17 @@
+import { TopTypeType } from '@/pages/A2Abusiness/data'
+import { FileImgListType } from './layot'
+
+export type A2AListCamerasType = {
+  cameraSn: string
+  cameraType: string
+  remark: string
+  id: number
+  idxx: string
+}
+
 export type A2AListType = {
   cameraIds: string
-  cameras?: any
+  cameras?: A2AListCamerasType[]
   createTime: string
   creatorId: number
   creatorName: string
@@ -8,14 +19,14 @@ export type A2AListType = {
   dateStart: string
   dingNum: string
   fileIds: string
-  files?: any
+  files?: FileImgListType[]
   id: number
   num: string
   pcs: number
   price?: any
-  rtf: string
+  rtf: { isSection: boolean; txtArr: { txt: string }[] }
   rtfDesc: string
-  type: string
+  type: TopTypeType
   updateTime: string
   user: string
   zlCity: string