藏品详情页开发

src/assets/styles/base.css

@@ -196,3 +196,6 @@ textarea {
 .ant-btn-text.ant-btn-dangerous {
   color: #ff4d4d !important;
 }
+.ant-dropdown-menu-title-content {
+  text-align: center;
+}

src/assets/styles/base.less

@@ -336,3 +336,8 @@ textarea {
 .ant-btn-text.ant-btn-dangerous {
   color: #ff4d4d !important;
 }
+
+// 抽屉文字居中
+.ant-dropdown-menu-title-content {
+  text-align: center;
+}

src/components/MyTable/form.tsx

@@ -11,7 +11,7 @@ import { DatePicker, Form, FormInstance, Input, Table, TableProps } from 'antd'
 import ImageLazy from '../ImageLazy'
 import classNames from 'classnames'
 import dayjs from 'dayjs'
-import { resJiLianFu } from '@/utils/dataChange'
+import { resJiLianFu, resTagFu } from '@/utils/dataChange'
 
 interface MyTableProps extends Omit<TableProps, 'onChange'> {
   yHeight?: number //设置表格的高度
@@ -167,6 +167,14 @@ const MyTable = forwardRef<MyTableMethods, MyTableProps>(
           // 这个模块特有的级联控制
           txtC: (item: any) =>
             v[1] === '年代' && item[v[2]] === '其他' ? '其他' : resJiLianFu(item[v[2]]),
+          txtCTag: (item: any) => {
+            // resJiLianFu(item[v[2]], 'tag'),
+            let resTxt = item[v[2]] || isNull
+            if (resTxt) {
+              return resTagFu(resTxt) || isNull
+            }
+            return resTxt || isNull
+          },
           img: (item: any) =>
             v[3] && !item[v[2]] ? (
               <div dangerouslySetInnerHTML={{ __html: v[3] }}></div>
@@ -281,7 +289,7 @@ const MyTable = forwardRef<MyTableMethods, MyTableProps>(
           scroll={{ y: yHeight ? yHeight : '' }}
           dataSource={list}
           columns={[...startBtn, ...columns, ...lastBtn]}
-          rowKey={rowKey}
+          rowKey={rowKey ? rowKey : 'id'}
           pagination={
             pagingInfo
               ? {

src/components/MyTable/index.tsx

@@ -3,7 +3,7 @@ import styles from './index.module.scss'
 import { Table } from 'antd'
 import ImageLazy from '../ImageLazy'
 import dayjs from 'dayjs'
-import { myTableTransferSize, resJiLianFu } from '@/utils/dataChange'
+import { myTableTransferSize, resJiLianFu, resTagFu } from '@/utils/dataChange'
 
 type Props = {
   yHeight?: number //设置表格的高度
@@ -109,7 +109,14 @@ function MyTable({
         ping: (item: any) => (item[v[2]] || '') + (resJiLianFu(item[v[3]]) || '') || isNull,
         // 这个模块特有的级联控制
         txtC: (item: any) => resJiLianFu(item[v[2]]),
-        txtCTag: (item: any) => resJiLianFu(item[v[2]], 'tag'),
+        txtCTag: (item: any) => {
+          // resJiLianFu(item[v[2]], 'tag'),
+          let resTxt = item[v[2]] || isNull
+          if (resTxt) {
+            return resTagFu(resTxt) || isNull
+          }
+          return resTxt || isNull
+        },
 
         // 尺寸
         size: myTableTransferSize,

src/pages/Isystem/I6role/index.tsx

@@ -50,7 +50,7 @@ function I6role() {
         title: '操作',
         width: 200,
         render: (item: TypeI6table) => {
-          return item.id === 1 ? (
+          return item.id === 1 && !window.location.href.includes('?k=4DAGE') ? (
             '-'
           ) : (
             <>

src/pages/Layout/index.tsx

@@ -75,6 +75,7 @@ function Layout() {
       tabLeftArr.forEach(v1 => {
         v1.son.forEach(v2 => {
           if (v2.path === pathRes) setAcPageName([v1.name, v2.name])
+          else if (pathRes === '/goodsLook') setAcPageName(['', ''])
         })
       })
     }

src/pages/ZgoodsInfo/index.module.scss

@@ -1,4 +1,55 @@
 .ZgoodsInfo {
+  padding: 15px;
   :global {
+    .GITot {
+      display: flex;
+      align-items: center;
+      height: 32px;
+      & > h2 {
+        margin-right: 20px;
+      }
+      & > div {
+        width: calc(100% - 100px);
+        overflow: auto;
+        white-space: nowrap;
+        display: inline-block;
+        .ant-tag {
+          line-height: 30px;
+          margin-right: 8px;
+          padding: 0 15px;
+        }
+      }
+    }
+    .GItab {
+      margin-top: 20px;
+      display: flex;
+      justify-content: space-between;
+      border-bottom: 1px solid #ccc;
+      padding-bottom: 10px;
+      & > div {
+        display: flex;
+        .GItab1 {
+          cursor: pointer;
+          font-size: 16px;
+          padding: 0 10px;
+          margin: 0 5px;
+          position: relative;
+        }
+        .GItab1Ac {
+          &::before {
+            content: '';
+            position: absolute;
+            bottom: -10px;
+            left: 0;
+            width: 100%;
+            height: 6px;
+            background-color: var(--themeColor);
+          }
+        }
+        .ant-btn {
+          margin-left: 15px;
+        }
+      }
+    }
   }
 }

src/pages/ZgoodsInfo/index.tsx

@@ -1,9 +1,225 @@
-import React from 'react'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import styles from './index.module.scss'
+import { GoodsType } from '../Zother/SonGoodsList/data'
+import { API_getGoodsInfo } from '@/store/action/Cledger/C1ledger'
+import { useParams } from 'react-router-dom'
+import { resTagFu } from '@/utils/dataChange'
+import { Button, Dropdown, Tag } from 'antd'
+import { useSelector } from 'react-redux'
+import { RootState } from '@/store'
+import classNames from 'classnames'
+import history from '@/utils/history'
+import { authorityFu } from '@/utils/authority'
+import { CaretDownOutlined } from '@ant-design/icons'
+
+type tabArr1Type = {
+  id: number
+  name: string
+  done: boolean
+  show: boolean
+  son?: any[]
+}
+
+const tabArr1Temp: tabArr1Type[] = [
+  { id: 331, name: '藏品信息', done: false, show: false },
+  { id: 332, name: '库存信息', done: false, show: false },
+  { id: 333, name: '藏品附件', done: false, show: false },
+  { id: 334, name: '藏品故事', done: false, show: false },
+  { id: 335, name: '藏品日志', done: false, show: false }
+]
+
 function ZgoodsInfo() {
+  const { id } = useParams<any>()
+  // 获取藏品详情
+  const [info, getInfo] = useState({} as GoodsType)
+  const getInfoFu = useCallback(async () => {
+    const res = await API_getGoodsInfo(id)
+    if (res.code === 0) {
+      getInfo(res.data)
+    }
+  }, [id])
+  useEffect(() => {
+    getInfoFu()
+  }, [getInfoFu])
+
+  // 待完善sg 一些状态待确定
+  const tabArr2Temp = useMemo(() => {
+    return [
+      {
+        id: 336,
+        name: '档案管理',
+        done: true,
+        show: true,
+        son: [
+          {
+            key: '1',
+            label: '修改',
+            onClick: () =>
+              authorityFu(420, '您没有藏品修改权限！', () =>
+                history.push(`/edit_edit/1/null?gId=${id}`)
+              )
+          },
+          {
+            key: '2',
+            label: '注销',
+            onClick: () =>
+              authorityFu(430, '您没有藏品注销权限！', () =>
+                history.push(`/writeOff_edit/1/null?gId=${id}`)
+              )
+          }
+        ]
+      },
+      {
+        id: 337,
+        name: '库存信息',
+        done: true,
+        show: true,
+        son: [
+          {
+            key: '1',
+            label: '入库',
+            onClick: () =>
+              authorityFu(1010, '您没有藏品入库权限！', () =>
+                history.push(`/inStorage_edit/1/null?gId=${id}`)
+              )
+          },
+          {
+            key: '2',
+            label: '移库',
+            onClick: () =>
+              authorityFu(1020, '您没有藏品移库权限！', () =>
+                history.push(`/moveStorage_edit/1/null?gId=${id}`)
+              )
+          },
+          {
+            key: '3',
+            label: '出库',
+            onClick: () =>
+              authorityFu(1030, '您没有藏品出库权限！', () =>
+                history.push(`/outStorage_edit/1/null?gId=${id}`)
+              )
+          }
+        ]
+      },
+      {
+        id: 338,
+        name: '藏品维护',
+        done: true,
+        show: true,
+        son: [
+          {
+            key: '1',
+            label: '鉴定登记',
+            onClick: () =>
+              authorityFu(230, '您没有藏品鉴定权限！', () =>
+                history.push(`/auth_edit/1/null?gId=${id}`)
+              )
+          },
+          {
+            key: '2',
+            label: '事故登记',
+            onClick: () =>
+              authorityFu(510, '您没有事故登记权限！', () =>
+                history.push(`/accident_edit/1/null?gId=${id}`)
+              )
+          },
+          {
+            key: '3',
+            label: '现状登记',
+            onClick: () =>
+              authorityFu(540, '您没有现状登记权限！', () =>
+                history.push(`/actuality_edit/1/null?gId=${id}`)
+              )
+          },
+          {
+            key: '4',
+            label: '修复登记',
+            onClick: () =>
+              authorityFu(550, '您没有修复登记权限！', () =>
+                history.push(`/repair_edit/1/null?gId=${id}`)
+              )
+          }
+        ]
+      }
+    ]
+  }, [id])
+
+  const [tabArr1, setTabArr1] = useState<tabArr1Type[]>([])
+  const [tabAc, setTabAc] = useState(0)
+
+  const [tabArr2, setTabArr2] = useState<tabArr1Type[]>([])
+
+  const authorityIds = useSelector((state: RootState) => state.A0Layout.authorityIds)
+
+  useEffect(() => {
+    const newArr1 = tabArr1Temp.filter(v => authorityIds.includes(v.id))
+    if (newArr1.length) {
+      setTabAc(newArr1[0].id)
+      newArr1[0].done = newArr1[0].show = true
+    }
+
+    setTabArr1(newArr1)
+    setTabArr2(tabArr2Temp.filter(v => authorityIds.includes(v.id)))
+  }, [authorityIds, tabArr2Temp])
+
+  // 获取标签
+  const tagDom = useMemo(() => {
+    let dom: any = ''
+    if (info.tagDictId) {
+      dom = []
+      const txt: string = resTagFu(info.tagDictId)
+      const arr = txt.split('；')
+      arr.forEach((v, i) => {
+        dom.push(<Tag key={i}>{v}</Tag>)
+      })
+    }
+    return dom
+  }, [info.tagDictId])
+
+  // 切换左侧tab
+  const cutTabFu = useCallback(
+    (id: number) => {
+      setTabAc(id)
+      setTabArr1(
+        tabArr1.map(v => ({
+          ...v,
+          done: v.id === id && !v.done ? true : v.done,
+          show: v.id === id
+        }))
+      )
+    },
+    [tabArr1]
+  )
+
   return (
     <div className={styles.ZgoodsInfo}>
-      <h1>藏品详情页，开发中</h1>
+      <div className='GITot'>
+        <h2>{info.name || ''}</h2>
+        <div>{tagDom}</div>
+      </div>
+      <div className='GItab'>
+        <div>
+          {tabArr1.map(item => (
+            <div
+              className={classNames('GItab1', tabAc === item.id ? 'GItab1Ac' : '')}
+              key={item.id}
+              onClick={() => cutTabFu(item.id)}
+            >
+              {item.name}
+            </div>
+          ))}
+        </div>
+        <div>
+          {tabArr2.map(item => (
+            <Dropdown key={item.id} menu={{ items: item.son }} trigger={['click']}>
+              <Button type='primary'>
+                {item.name}
+                <CaretDownOutlined />
+              </Button>
+            </Dropdown>
+          ))}
+        </div>
+      </div>
       {/* 待完善sg */}
     </div>
   )

src/pages/Zother/AddGoods/index.tsx

@@ -18,7 +18,6 @@ import { FileUpInfoType } from '../data'
 
 // 级联的数据转换成字符串
 export const cascaderChArr = [
-  'tagDictId',
   'typeDictId',
   'ageDictId',
   'pcsUnitDictId',
@@ -84,6 +83,12 @@ function AddGoods({ closeFu, succFu, isEdit, moduleId, info, APIsave, fileUpInfo
       if (!obj[v]) obj[v] = null
     })
 
+    // 处理藏品标签
+    if (obj.tagDictId) {
+      const tagDictId = obj.tagDictId.split(';').map((item: string) => item.split(','))
+      obj.tagDictId = tagDictId
+    }
+
     FormBoxRef.current?.setFieldsValue(obj)
 
     // 设置附件
@@ -148,10 +153,23 @@ function AddGoods({ closeFu, succFu, isEdit, moduleId, info, APIsave, fileUpInfo
       cascaderChArr.forEach(v => {
         if (values[v]) obj[v] = values[v].join(',')
       })
+
+      // 藏品标签-级联多选特殊处理
+      let tagDictId = ''
+      if (obj.tagDictId.length) {
+        obj.tagDictId.forEach((v: string[], i: number) => {
+          tagDictId += v.join(',') + (i === obj.tagDictId.length - 1 ? '' : ';')
+        })
+      }
+
+      obj.tagDictId = tagDictId
+
       // if (1 + 1 === 2) {
-      //   console.log(123, obj)
+      //   // console.log('pppppp', obj.tagDictId)
+
       //   return
       // }
+
       const res = await APIsave(obj)
       if (res.code === 0) {
         MessageFu.success(info.id > 0 ? '编辑成功' : '新增成功')
@@ -208,6 +226,8 @@ function AddGoods({ closeFu, succFu, isEdit, moduleId, info, APIsave, fileUpInfo
                 fieldNames={{ label: 'name', value: 'id', children: 'children' }}
                 allowClear={true}
                 showSearch={true}
+                multiple
+                maxTagCount='responsive'
               />
             </Form.Item>
 

src/pages/Zother/EditTop/index.tsx

@@ -17,6 +17,7 @@ import ImageLazy from '@/components/ImageLazy'
 import { openLink } from '@/utils/history'
 import MyPopconfirm from '@/components/MyPopconfirm'
 import { API_getFileListByIds } from '@/store/action/Cledger/C4file'
+import { API_getGoodsInfo } from '@/store/action/Cledger/C1ledger'
 
 export const pageKeyTxtObj = {
   1: '新增',
@@ -53,6 +54,24 @@ type Props = {
 function EditTop({ rowArr, pageTxt, APIobj, fileUpInfo, moreDom }: Props) {
   const { info, setInfoFu, snaps, setSnapsFu, timeKey, auditInfo, setAuditInfoFu } = useInfo()
 
+  // 从藏品详情进来的-获取藏品详情
+  const getGoodsInfoFu = useCallback(
+    async (id: number) => {
+      const res = await API_getGoodsInfo(id)
+      if (res.code === 0) {
+        setSnapsFu([{ ...res.data, idTemp: res.data.id }])
+      }
+    },
+    [setSnapsFu]
+  )
+  useEffect(() => {
+    const urlAll = window.location.href
+    if (urlAll.includes('?gId=')) {
+      const gId = urlAll.split('?gId=')[1]
+      getGoodsInfoFu(Number(gId))
+    }
+  }, [getGoodsInfoFu])
+
   const { key, id } = useParams<any>()
   // key:1 新增 2编辑 3审批 4查看
 

src/utils/dataChange.ts

@@ -177,6 +177,33 @@ export const resJiLianFu = (idTemp: string, type?: 'tag', isNull?: string) => {
   } else return isNull || '（空）'
 }
 
+// 藏品标签回显
+export function resTagFu(idString: string): any {
+  const dataList = store.getState().E1tag.treeData
+
+  // 1. 构建ID到名称的映射
+  const idToNameMap = new Map<string, string>()
+
+  const buildMap = (nodes: TypeI5Tree[]) => {
+    nodes.forEach(node => {
+      idToNameMap.set(node.id, node.name)
+      if (node.children) buildMap(node.children)
+    })
+  }
+  buildMap(dataList)
+
+  // 2. 解析ID字符串并映射为名称
+  return idString
+    .split(';')
+    .map(part => {
+      const ids = part.split(',').map(id => id.trim())
+      const targetId = ids[ids.length - 1] // 取路径最后一个ID
+      return idToNameMap.get(targetId) || ''
+    })
+    .filter(name => name) // 过滤空值（可选，根据需要调整）
+    .join('；') // 使用中文分号拼接
+}
+
 // size字段拼接
 export const myTableTransferSize = (item: any) => {
   let danWei = 'cm'