藏品详情-藏品信息

后台管理/src/assets/styles/base.css

@@ -168,3 +168,9 @@ textarea {
 .ant-image-preview-operations {
   background-color: rgba(0, 0, 0, 0.8) !important;
 }
+.AIdroRow {
+  display: block;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+}

后台管理/src/assets/styles/base.less

@@ -280,3 +280,9 @@ textarea {
 // .ant-image-preview-operations-wrapper {
 //   z-index: 9999 !important;
 // }
+.AIdroRow {
+  display: block;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+}

后台管理/src/components/Z3upFiles/index.module.scss

@@ -1,73 +1,3 @@
-.Z3upFiles {
-  position: relative;
-  width: 100%;
-  height: 100%;
-
-  :global {
-    .Z3files {
-      width: 500px;
-      // padding-top: 6px;
-
-      .Z3filesRow {
-        display: flex;
-        margin-top: 5px;
-        justify-content: space-between;
-        align-items: center;
-        font-size: 16px;
-        border-bottom: 1px dashed #999;
-        padding-bottom: 5px;
-
-        .Z3files1 {
-          width: calc(100% - 130px);
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-        }
-
-        .Z3files2 {
-          display: flex;
-          width: 120px;
-          justify-content: flex-end;
-
-          & > span {
-            cursor: pointer;
-          }
-
-          a {
-            color: black;
-          }
-        }
-      }
-    }
-
-    .fileTit {
-      margin-top: 14px;
-      font-size: 14px;
-      color: rgb(126, 124, 124);
-
-      .noUpThumb {
-        position: relative;
-        overflow: hidden;
-        opacity: 0;
-        transition: top 0.2s;
-        color: #ff4d4f;
-        top: -10px;
-      }
-
-      .noUpThumbAc {
-        top: 0;
-        opacity: 1;
-      }
-    }
-
-    .lookNone {
-      position: relative;
-      top: 4px;
-      left: 10px;
-    }
-  }
-}
-
 // ----------
 .Z3upFiles {
   a {
@@ -75,8 +5,6 @@
   }
 
   .Z3files {
-    margin-top: 16px;
-
     .Z3filesRow {
       display: flex;
       align-items: center;
@@ -154,9 +82,4 @@
       }
     }
   }
-
-  .lookNone {
-    color: #999;
-    font-style: italic;
-  }
 }

后台管理/src/components/Z3upFiles/index.tsx

@@ -255,7 +255,7 @@ function Z3upFiles(
           </Button>
         )}
 
-        <div className={styles.Z3files}>
+        <div className={styles.Z3files} style={{ marginTop: isLook ? '0' : '16px' }}>
           <DndContext
             collisionDetection={closestCenter}
             onDragStart={handleDragStart}
@@ -300,7 +300,7 @@ function Z3upFiles(
           </div>
         </div>
       </div>
-      {isLook && fileList.length <= 0 ? <div className={styles.lookNone}>（空）</div> : null}
+      {isLook && fileList.length <= 0 ? <div>（空）</div> : null}
     </div>
   )
 }

后台管理/src/pages/A0goodsInfo/Tab1info/data.ts

@@ -0,0 +1,60 @@
+import { B1listType } from '@/pages/B1ledger/data'
+import { pcsPingFu, selectChange, sizeChange, timeChange } from '@/utils/deriveFu'
+import { dictSelect } from '@/utils/select'
+
+export const pageShowArr1 = [
+  { name: '藏品编号', key: 'num' },
+  { name: '原编号', key: 'formerNum' },
+  { name: '藏品标题', key: 'name', full: true },
+  { name: '入馆日期', key: 'inHouseTime', fu: (item: B1listType) => timeChange(item.inHouseTime) },
+  {
+    name: '登记日期',
+    key: 'registerTime',
+    fu: (item: B1listType) => timeChange(item.registerTime)
+  },
+  {
+    name: '来源类型',
+    key: 'sourceDictId',
+    fu: (item: B1listType) => selectChange(dictSelect('藏品来源'), item.sourceDictId)
+  },
+  { name: '来源详情', key: 'sourceInfo' }
+]
+
+export const pageShowArr2 = [
+  { name: '藏品简介', key: 'intro', full: true },
+  {
+    name: '年代',
+    key: 'ageDictId',
+    fu: (item: B1listType) => selectChange(dictSelect('藏品年代'), item.ageDictId)
+  },
+  {
+    name: '类型',
+    key: 'typeDictId',
+    fu: (item: B1listType) => selectChange(dictSelect('藏品类型'), item.typeDictId)
+  },
+  { name: '级别', key: 'level' },
+  {
+    name: '材质',
+    key: 'textureDictId',
+    fu: (item: B1listType) => selectChange(dictSelect('藏品材质'), item.textureDictId)
+  },
+  { name: '完残程度', key: 'torn' },
+  {
+    name: '数量',
+    key: 'pcs pcsUnitDictId',
+    fu: (item: B1listType) => pcsPingFu(dictSelect('数量单位'), item.pcs, item.pcsUnitDictId)
+  },
+  {
+    name: '重量',
+    key: 'quality qualityUnit',
+    fu: (item: B1listType) => pcsPingFu(dictSelect('数量单位'), item.quality, item.qualityUnit)
+  },
+  { name: '有无说明牌', key: 'isNote' },
+  {
+    name: '尺寸',
+    key: 'sizeL sizeW sizeH sizeUnit',
+    full: true,
+    fu: (item: B1listType) => sizeChange(item.sizeL, item.sizeW, item.sizeH, item.sizeUnit)
+  },
+  { name: '备注', key: 'remark', full: true }
+]

后台管理/src/pages/A0goodsInfo/Tab1info/index.module.scss

@@ -0,0 +1,64 @@
+.Tab1info {
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  font-size: 16px;
+  :global {
+    .T1_1 {
+      display: flex;
+      justify-content: space-between;
+
+      padding-bottom: 10px;
+      border-bottom: 1px solid #ccc;
+
+      .T1_1ll {
+        width: calc(100% - 180px);
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        align-self: center;
+
+        .T1_1row {
+          width: 48%;
+          display: flex;
+          margin-bottom: 10px;
+          & > span {
+            width: 100px;
+            text-align: right;
+            font-weight: 700;
+          }
+          & > p {
+            width: calc(100% - 100px);
+            word-wrap: break-word;
+          }
+        }
+        .T1_1rowFull {
+          width: 100%;
+          margin-right: 0;
+        }
+      }
+      .T1_1rr {
+        width: 150px;
+        display: flex;
+        align-items: center;
+      }
+    }
+    .T1_2 {
+      padding-top: 20px;
+    }
+    .T1_3 {
+      padding-top: 20px;
+      display: flex;
+      & > div {
+        &:nth-of-type(1) {
+          width: 100px;
+          text-align: right;
+          font-weight: 700;
+        }
+        &:nth-of-type(2) {
+          width: 600px;
+        }
+      }
+    }
+  }
+}

后台管理/src/pages/A0goodsInfo/Tab1info/index.tsx

@@ -0,0 +1,76 @@
+import React, { useEffect, useRef } from 'react'
+import styles from './index.module.scss'
+import { B1listType } from '@/pages/B1ledger/data'
+import ImageLazy from '@/components/ImageLazy'
+import { pageShowArr1, pageShowArr2 } from './data'
+import classNames from 'classnames'
+import Z3upFiles from '@/components/Z3upFiles'
+
+type Props = {
+  info: B1listType
+}
+
+function Tab1info({ info }: Props) {
+  // 上传附件的ref
+  const filesRef = useRef<any>(null)
+
+  useEffect(() => {
+    filesRef.current?.showList(info.file)
+  }, [info.file])
+
+  return (
+    <div className={styles.Tab1info}>
+      {info.id ? (
+        <>
+          <div className='T1_1'>
+            <div className='T1_1ll'>
+              {pageShowArr1.map(v => (
+                <div className={classNames('T1_1row', v.full ? 'T1_1rowFull' : '')} key={v.name}>
+                  <span>{v.name}：</span>
+                  <p>{v.fu ? v.fu(info) : info[v.key as 'num'] || '（空）'}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <div className='T1_1 T1_2'>
+            <div className='T1_1ll'>
+              {pageShowArr2.map(v => (
+                <div className={classNames('T1_1row', v.full ? 'T1_1rowFull' : '')} key={v.name}>
+                  <span>{v.name}：</span>
+                  <p>{v.fu ? v.fu(info) : info[v.key as 'num'] || '（空）'}</p>{' '}
+                </div>
+              ))}
+            </div>
+            <div className='T1_1rr'>
+              <ImageLazy
+                width={150}
+                height={150}
+                srcBig={info.thumbPc || info.thumb}
+                src={info.thumb}
+              />
+            </div>
+          </div>
+
+          <div className='T1_3'>
+            <div>附件：</div>
+            <div>
+              <Z3upFiles
+                isLook={true}
+                size={500}
+                ref={filesRef}
+                fileCheck={false}
+                dirCode='goodsAdd'
+                myUrl='cms/order/register/upload'
+              />
+            </div>
+          </div>
+        </>
+      ) : null}
+    </div>
+  )
+}
+
+const MemoTab1info = React.memo(Tab1info)
+
+export default MemoTab1info

后台管理/src/pages/A0goodsInfo/Tab2log/index.module.scss

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

后台管理/src/pages/A0goodsInfo/Tab2log/index.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import styles from './index.module.scss'
+function Tab2log() {
+  return (
+    <div className={styles.Tab2log}>
+      <h1>Tab2log 待完善</h1>
+    </div>
+  )
+}
+
+const MemoTab2log = React.memo(Tab2log)
+
+export default MemoTab2log

后台管理/src/pages/A0goodsInfo/Tab3stock/index.module.scss

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

后台管理/src/pages/A0goodsInfo/Tab3stock/index.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import styles from './index.module.scss'
+function Tab3stock() {
+  return (
+    <div className={styles.Tab3stock}>
+      <h1>Tab3stock 待完善</h1>
+    </div>
+  )
+}
+
+const MemoTab3stock = React.memo(Tab3stock)
+
+export default MemoTab3stock

后台管理/src/pages/A0goodsInfo/index.module.scss

@@ -1,4 +1,42 @@
 .A0goodsInfo {
+  background-color: #fff;
+  border-radius: 10px;
+  padding: 20px 20px 0;
   :global {
+    .AItop {
+      display: flex;
+      justify-content: space-between;
+      border-bottom: 1px solid #ccc;
+
+      .AItop1 {
+        display: flex;
+
+        .AItop1Row {
+          cursor: pointer;
+          font-size: 18px;
+          height: 36px;
+          margin-right: 30px;
+        }
+        .AItop1RowAc {
+          color: var(--themeColor);
+          position: relative;
+          &::before {
+            content: '';
+            position: absolute;
+            width: 110%;
+            left: -5%;
+            bottom: -2px;
+            height: 4px;
+            background-color: var(--themeColor);
+          }
+        }
+      }
+    }
+
+    .AImain {
+      margin-top: 15px;
+      width: 100%;
+      height: calc(100% - 55px);
+    }
   }
 }

后台管理/src/pages/A0goodsInfo/index.tsx

@@ -1,9 +1,108 @@
-import React from 'react'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import styles from './index.module.scss'
+import { useParams } from 'react-router-dom'
+import { API_getGoodsInfo } from '@/store/action/B1ledger'
+import { B1listType } from '../B1ledger/data'
+import classNames from 'classnames'
+import { Button, Dropdown, MenuProps } from 'antd'
+import Tab1info from './Tab1info'
+import Tab2log from './Tab2log'
+import Tab3stock from './Tab3stock'
+const topBtnArr = ['藏品信息', '编辑记录', '库存状态']
+
+// 待完善 按钮的各种状态
+
 function A0goodsInfo() {
+  const { id } = useParams<any>()
+
+  const getInfoFu = useCallback(async () => {
+    const res = await API_getGoodsInfo(id)
+    if (res.code === 0) {
+      setGoodsInfo(res.data)
+    }
+  }, [id])
+
+  useEffect(() => {
+    getInfoFu()
+  }, [getInfoFu])
+
+  // 所有藏品信息
+  const [goodsInfo, setGoodsInfo] = useState({} as B1listType)
+
+  // tab切换
+  const [btnAc, setBtnAc] = useState('藏品信息')
+
+  const items1 = useMemo(() => {
+    let arr: MenuProps['items'] = [
+      {
+        key: '1',
+        label: <span className='AIdroRow'>修改</span>
+      },
+      {
+        key: '2',
+        label: (
+          <span className='AIdroRow' style={{ color: '#ff4d4d' }}>
+            删除
+          </span>
+        )
+      }
+    ]
+
+    return arr
+  }, [])
+
+  const items2 = useMemo(() => {
+    let arr: MenuProps['items'] = [
+      {
+        key: '1',
+        label: <span className='AIdroRow'>入库</span>
+      },
+      {
+        key: '2',
+        label: <span className='AIdroRow'>移库</span>
+      },
+      {
+        key: '3',
+        label: <span className='AIdroRow'>出库</span>
+      }
+    ]
+
+    return arr
+  }, [])
+
   return (
     <div className={styles.A0goodsInfo}>
-      <h1>A0goodsInfo</h1>
+      <div className='pageTitle'>藏品详情</div>
+
+      <div className='AItop'>
+        <div className='AItop1'>
+          {topBtnArr.map(v => (
+            <div
+              key={v}
+              className={classNames('AItop1Row', btnAc === v ? 'AItop1RowAc' : '')}
+              onClick={() => setBtnAc(v)}
+            >
+              {v}
+            </div>
+          ))}
+        </div>
+
+        <div className='AItop2'>
+          <Dropdown menu={{ items: items1 }} placement='bottom' arrow>
+            <Button type='primary'>档案管理</Button>
+          </Dropdown>
+          &emsp;
+          <Dropdown menu={{ items: items2 }} placement='bottom' arrow>
+            <Button type='primary'>库房管理</Button>
+          </Dropdown>
+        </div>
+      </div>
+
+      <div className='AImain'>
+        {btnAc === '藏品信息' ? <Tab1info info={goodsInfo} /> : null}
+        {btnAc === '编辑记录' ? <Tab2log /> : null}
+        {btnAc === '库存状态' ? <Tab3stock /> : null}
+      </div>
     </div>
   )
 }

后台管理/src/pages/B1ledger/data.ts

@@ -14,18 +14,60 @@ export const B1fromDataBase: B1fromDataType = {
   pageSize: 10
 }
 
+// 藏品附件
+export type GoodsFileType = {
+  createTime: string
+  creatorId: number
+  creatorName: string
+  fileName: string
+  filePath: string
+  fileSize: string
+  id: number
+  moduleId?: any
+  moduleName: string
+  parentId?: any
+  thumb: string
+  type: string
+  updateTime?: any
+}
+
+// 藏品所有参数
 export type B1listType = {
+  ageDictId: number
   createTime: string
   creatorId: number
+  creatorName?: any
+  file: GoodsFileType[]
+  fileIds: string
+  formerNum: string
   id: number
+  inHouseTime: string
+  intro: string
+  isNote: string
+  level: string
   name: string
   num: string
+  pcs: number
+  pcsUnitDictId: number
+  quality: number
+  qualityUnit: string
+  registerTime: string
+  remark: string
+  siteDateIn?: any
+  siteDateOut?: any
+  siteLoc?: any
+  siteStatus?: any
+  sizeH: number
+  sizeL: number
+  sizeUnit: string
+  sizeW: number
+  sourceDictId: number
+  sourceInfo: string
   status: number
+  textureDictId: number
+  thumb: string
+  thumbPc: string
+  torn: string
+  typeDictId: number
   updateTime: string
-  inHouseTime?: string
-  registerTime?: string
-  typeDictId?: number
-  textureDictId?: number
-  pcs?: number
-  pcsUnitDictId?: number
 }

后台管理/src/pages/B1ledger/index.tsx

@@ -10,7 +10,7 @@ import { RootState } from '@/store'
 import A0addGoods from '../A0addGoods'
 import { B1tableC } from '@/utils/tableData'
 import { B1devFu } from '@/utils/deriveFu'
-import history from '@/utils/history'
+import history, { openLink } from '@/utils/history'
 
 function B1ledger() {
   // 待完善 表格/导出 入库时间 出库时间 当前位置相关
@@ -58,7 +58,7 @@ function B1ledger() {
         title: '操作',
         render: (item: B1listType) => {
           return (
-            <Button size='small' type='text' onClick={() => history.push(`/goodsLook/${item.id}`)}>
+            <Button size='small' type='text' onClick={() => openLink(`/goodsLook/${item.id}`)}>
               查看
             </Button>
           )

后台管理/src/store/action/B1ledger.ts

@@ -26,3 +26,10 @@ export const B1_APIgetlist = (data: any, exportFlag?: boolean): any => {
 export const API_addGoods = (data: any) => {
   return http.post('cms/order/register/create', data)
 }
+
+/**
+ * 藏品详情-获取详情
+ */
+export const API_getGoodsInfo = (id: number) => {
+  return http.get(`cms/goods/detail/${id}`)
+}

后台管理/src/utils/deriveFu.ts

@@ -32,12 +32,12 @@ const devDownFu = (
 }
 
 // 日期处理
-const timeChange = (val?: string) => {
+export const timeChange = (val?: string) => {
   return val ? dayjs(val).format('YYYY-MM-DD') : '（空）'
 }
 
 // 下拉框处理
-const selectChange = (data: any[], val?: number) => {
+export const selectChange = (data: any[], val?: number) => {
   let txt = '（空）'
   if (val) {
     const obj = data.find(v => v.value === val)
@@ -46,19 +46,38 @@ const selectChange = (data: any[], val?: number) => {
   return txt
 }
 
-// 数量处理
-const pcsPingFu = (data: any[], val1?: number, val2?: number) => {
+// 数量/重量处理
+export const pcsPingFu = (data: any[], val1?: number, val2?: number | string) => {
   let txt = '（空）'
   if (val1) {
     txt = val1 + ''
     if (val2) {
-      const txt2 = selectChange(data, val2)
-      if (txt2 !== '（空）') txt += txt2
+      if (typeof val2 === 'number') {
+        const txt2 = selectChange(data, val2)
+        if (txt2 !== '（空）') txt += txt2
+      } else txt += val2
     }
   }
   return txt
 }
 
+// 尺寸处理
+export const sizeChange = (val1?: number, val2?: number, val3?: number, val4?: string) => {
+  let danWei = val4 || ''
+  let txt1 = val1 ? `通长${val1}` : ''
+  let txt2 = val2 ? `通宽${val2}` : ''
+  let txt3 = val3 ? `通高${val3}` : ''
+  txt1 = txt1 ? txt1 + danWei : ''
+  txt2 = txt2 ? txt2 + danWei : ''
+  txt3 = txt3 ? txt3 + danWei : ''
+
+  let arr = [txt1, txt2, txt3]
+  arr = arr.filter(v => v)
+
+  if (!txt1 && !txt2 && !txt3) return '（空）'
+  else return arr.join(' - ')
+}
+
 const dataChange = (key: string, val: any, val2?: any) => {
   if (['inHouseTime', 'registerTime'].includes(key)) return timeChange(val)
   else if (['typeDictId'].includes(key)) return selectChange(dictSelect('藏品类型'), val)

后台管理/src/utils/history.ts

@@ -1,3 +1,10 @@
 import { createHashHistory } from 'history'
 const history = createHashHistory()
 export default history
+
+// 新窗口打开藏品详情页面
+export const openLink = (path: string) => {
+  const urlAll = window.location.href
+  const qian = urlAll.split('/#/')[0]
+  window.open(`${qian}/#${path}`, '_blank')
+}