upp

src/pages/A1atlas/A1add.tsx

@@ -11,14 +11,12 @@ import TextArea from 'antd/es/input/TextArea'
 import ZRichTexts from '@/components/ZRichTexts'
 
 type Props = {
-  acShuTxt: string
   addInfo: A1AddInfoType
   addFu: () => void
   closeFu: () => void
-  isNoAcIds: string[] //没有数据或者删除了的时候-既右侧没有操作的时候用到
 }
 
-function A1add({ addInfo, addFu, closeFu, isNoAcIds, acShuTxt }: Props) {
+function A1add({ addInfo, addFu, closeFu }: Props) {
   // 富文本的ref
   const ZRichTextRef = useRef<any>(null)
 
@@ -28,11 +26,11 @@ function A1add({ addInfo, addFu, closeFu, isNoAcIds, acShuTxt }: Props) {
   const [acCardInfo, setAcCardInfo] = useState({} as TypeA1dict)
   const [parentIdArr, setParentIdArr] = useState<string[] | null>(null)
 
-  useEffect(() => {
-    console.log(acCardInfo, parentIdArr)
-  }, [acCardInfo, parentIdArr])
+  // useEffect(() => {
+  //   console.log(acCardInfo, parentIdArr)
+  // }, [acCardInfo, parentIdArr])
 
-  const saveIdsRef = useRef<string[]>([])
+  // const saveIdsRef = useRef<string[]>([])
 
   useEffect(() => {
     // console.log('xxxxxxxxxx', addInfo)
@@ -48,13 +46,11 @@ function A1add({ addInfo, addFu, closeFu, isNoAcIds, acShuTxt }: Props) {
     }
 
     if (idsRes) {
-      // 保存的时候需要补前面3个级别
-      saveIdsRef.current = idsRes.filter((v, i) => i <= 2)
-      // 去掉0和前2级
-      idsRes = idsRes.filter((v, i) => i > 2)
+      // 去掉前面的0
+      idsRes = idsRes.filter((v, i) => !(i === 0 && v === '0'))
     }
 
-    setParentIdArr(idsRes)
+    setParentIdArr(idsRes ? idsRes.map(v => v + '') : [])
   }, [addInfo])
 
   const cardChange = useCallback((aa: any, bb: any) => {
@@ -109,37 +105,19 @@ function A1add({ addInfo, addFu, closeFu, isNoAcIds, acShuTxt }: Props) {
 
       if (acCardInfo) parentId = addInfo.txt === '编辑' ? acCardInfo.parentId : acCardInfo.id
       if (parentIdArr && parentId) {
-        let arrTemp = [...saveIdsRef.current, ...parentIdArr.filter(v => v !== addInfo.id)]
+        let arrTemp = [...parentIdArr.filter(v => v !== addInfo.id)]
         ancestor = arrTemp.join(',')
       }
 
-      // 新增并且没有父级
-      if (addInfo.txt === '新增' && !parentId && !ancestor) {
-        // console.log('xxx', saveIdsRef.current)
-
-        parentId = saveIdsRef.current[saveIdsRef.current.length - 1]
-        ancestor = saveIdsRef.current.join(',')
-        // console.log(123, parentId, ancestor)
-
-        // 外层没有选中
-        if (!addInfo.acInfo.id) {
-          parentId = isNoAcIds[isNoAcIds.length - 1]
-          ancestor = isNoAcIds.join(',')
-        }
-      }
-
-      // let level = 1
-      // if (parentIdArr) {
-      //   level = addInfo.txt === '新增' ? acCardInfo.level + 1 : acCardInfo.level
-      // }
       const obj = {
         ...values,
         id: addInfo.txt === '编辑' ? addInfo.id : null,
-        ancestor,
+        ancestor: '0,' + ancestor,
         // level,
         parentId,
         type: 'dict',
-        rtf: JSON.stringify(rtf.val || '')
+        rtf: JSON.stringify(rtf.val || ''),
+        sort: 999
       }
       // console.log(123, obj)
       // if (1 + 1 === 2) {
@@ -154,7 +132,7 @@ function A1add({ addInfo, addFu, closeFu, isNoAcIds, acShuTxt }: Props) {
         closeFu()
       }
     },
-    [acCardInfo, addFu, addInfo.acInfo.id, addInfo.id, addInfo.txt, closeFu, isNoAcIds, parentIdArr]
+    [acCardInfo, addFu, addInfo.id, addInfo.txt, closeFu, parentIdArr]
   )
 
   const [typeSon, settypeSon] = useState('2')
@@ -189,8 +167,7 @@ function A1add({ addInfo, addFu, closeFu, isNoAcIds, acShuTxt }: Props) {
                 changeOnSelect
                 fieldNames={{ label: 'name', value: 'id', children: 'children' }}
                 options={treeData}
-                // placeholder={addInfo.txt === '编辑' ? '空' : '请选择'}
-                placeholder={acShuTxt}
+                placeholder={acCardInfo.name === '程哲碑' ? '（空）' : '请选择父级节点'}
                 value={parentIdArr ? [...parentIdArr] : []}
                 onChange={cardChange}
               />
@@ -203,7 +180,12 @@ function A1add({ addInfo, addFu, closeFu, isNoAcIds, acShuTxt }: Props) {
             rules={[{ required: true, message: '请输入节点名称!' }]}
             getValueFromEvent={e => e.target.value.replace(/\s+/g, '')}
           >
-            <Input maxLength={30} showCount placeholder='请输入内容' />
+            <Input
+              disabled={acCardInfo.preset === '1'}
+              maxLength={30}
+              showCount
+              placeholder='请输入内容'
+            />
           </Form.Item>
 
           <div className='fromRow2'>
@@ -252,6 +234,7 @@ function A1add({ addInfo, addFu, closeFu, isNoAcIds, acShuTxt }: Props) {
             <Form.Item
               label='跳转链接'
               name='thumb'
+              rules={[{ required: true, message: '请输入跳转链接!' }]}
               getValueFromEvent={e => e.target.value.replace(/\s+/g, '')}
             >
               <TextArea maxLength={100} showCount placeholder='请输入内容' />

src/pages/A1atlas/data.ts

@@ -10,6 +10,8 @@ export type TypeA1dict = {
   display: 0 | 1
   isDetail: 0 | 1
   typeSon: '1' | '2'
+  preset: '1' | '0'
+  thumb: string
   // ---
   children?: TypeA1dict[]
 }

src/pages/A1atlas/index.module.scss

@@ -45,6 +45,12 @@
             background-color: var(--themeColor) !important;
             color: #fff !important;
             transition: none !important;
+            .site-tree-search-value {
+              color: var(--themeColor2);
+            }
+          }
+          .site-tree-search-value {
+            color: var(--themeColor);
           }
         }
       }
@@ -62,6 +68,10 @@
           font-size: 20px;
           font-weight: 700;
           color: var(--themeColor);
+          & > p {
+            color: #999;
+            font-size: 12px;
+          }
         }
       }
       .A1RrowBox {
@@ -81,6 +91,26 @@
         }
         .A1Rrow2 {
           width: calc(100% - 110px);
+          .A1Rrow2Text {
+            p {
+              min-height: 20px;
+            }
+            .media-wrap {
+              display: block;
+              margin: 10px auto;
+              max-width: 300px;
+              max-height: 300px;
+              video {
+                width: 100%;
+                height: 100%;
+                max-width: 300px;
+                max-height: 300px;
+              }
+            }
+          }
+          & > a {
+            color: var(--themeColor) !important;
+          }
         }
       }
     }

src/pages/A1atlas/index.tsx

@@ -15,21 +15,12 @@ function A1atlas() {
 
   const dispatch = useDispatch()
 
-  // 传给新增、编辑子组件（没有数据或者删除了的时候-既右侧没有操作的时候）
-  const isNoAcIds = useRef<string[]>([])
-
   useEffect(() => {
-    isNoAcIds.current = ['0']
-
     dispatch(
       API_A1getTree('', data => {
         setLoding(true)
         if (data && data.length) {
           setAcShu(data[0].id)
-          const txtDom: HTMLDivElement = document.querySelector('.ant-select-selection-item')!
-          if (txtDom) {
-            acShuTxtRef.current = txtDom.title
-          }
         }
       })
     )
@@ -37,17 +28,8 @@ function A1atlas() {
 
   const { dictAll } = useSelector((state: RootState) => state.A1atlas)
 
-  // 点击重置
-  const resetFu = useCallback(() => {
-    dispatch(API_A1getTree())
-    setValue('')
-    setValue2('')
-  }, [dispatch])
-
   // 当前选中的树节点ID
   const [acShu, setAcShu] = useState('1')
-  // 树节点文字信息
-  const acShuTxtRef = useRef('')
 
   // 点击树节点
   const onSelect = useCallback((id: any) => {
@@ -100,26 +82,28 @@ function A1atlas() {
           ) : (
             <span key={item.id}>{strTitle}</span>
           )
-
-        // 待完善
-
         title = (
           <>
-            {/* <FormOutlined />
-            &ensp; */}
+            {item.preset === '0' ? (
+              <>
+                <FormOutlined />
+                &ensp;
+              </>
+            ) : null}
+            {title}
+
             {item.isDetail === 1 ? (
               <>
-                <CopyOutlined />
                 &nbsp;
+                <CopyOutlined />
               </>
             ) : null}
             {item.display === 0 ? (
               <>
-                <StopOutlined />
                 &nbsp;
+                <StopOutlined />
               </>
             ) : null}
-            {title}
           </>
         )
         if (item.children) {
@@ -163,13 +147,25 @@ function A1atlas() {
     [rightData]
   )
 
+  // 点击重置
+  const resetFu = useCallback(
+    (val: 'base' | 'now') => {
+      dispatch(API_A1getTree())
+      setValue('')
+      setValue2('')
+      if (val === 'base') setAcShu('1')
+      else rightDataFu()
+    },
+    [dispatch, rightDataFu]
+  )
+
   // 点击删除
   const delTree = useCallback(
     async (id: string) => {
       const res = await A1_APIdel(id)
       if (res.code === 0) {
         MessageFu.success('删除成功!')
-        resetFu()
+        resetFu('base')
       }
     },
     [resetFu]
@@ -181,6 +177,21 @@ function A1atlas() {
     MessageFu.warning('正在开发中')
   }, [])
 
+  // 富文本返回
+  const text = useCallback((rtf: string) => {
+    let txt = '（空）'
+    try {
+      const obj = JSON.parse(rtf)
+      // console.log(12465, obj)
+      if (obj.txtArr && obj.txtArr.length) {
+        txt = obj.txtArr[0].txt || ''
+      }
+    } catch (error) {
+      console.log(error)
+    }
+    return txt
+  }, [])
+
   return (
     <div className={styles.A1atlas}>
       <div className='A1left'>
@@ -255,7 +266,11 @@ function A1atlas() {
         <div className='A1Rtit'>
           <div>
             {rightData.name}&emsp;
-            <Button type='primary' onClick={() => addSonFu(rightData.id)}>
+            <Button
+              type='primary'
+              onClick={() => addSonFu(rightData.id)}
+              // disabled={rightData.preset === '1'}
+            >
               编辑
             </Button>
             &emsp;
@@ -263,8 +278,14 @@ function A1atlas() {
               txtK='删除'
               onConfirm={() => delTree(rightData.id)}
               // disabled={noIdArr.includes(rightData.id)}
-              Dom={<Button danger>删除</Button>}
+              Dom={
+                <Button danger disabled={rightData.preset === '1'}>
+                  删除
+                </Button>
+              }
             />
+            &emsp;
+            <p hidden={rightData.preset === '0'}>预设的初始节点不可删除</p>
           </div>
           <Button type='primary' onClick={lookFu}>
             效果预览
@@ -282,7 +303,7 @@ function A1atlas() {
             <div className='A1Rrow'>
               <div className='A1Rrow1'>详情页开关：</div>
               <div className='A1Rrow2'>
-                {rightData.isDetail === 1 ? '开启' : rightData.display === 0 ? '关闭' : '（空）'}
+                {rightData.isDetail === 1 ? '开启' : rightData.isDetail === 0 ? '关闭' : '（空）'}
               </div>
             </div>
             <div className='A1Rrow'>
@@ -292,7 +313,20 @@ function A1atlas() {
 
             <div className='A1Rrow'>
               <div className='A1Rrow1'>详情页内容：</div>
-              <div className='A1Rrow2'>{rightData.typeSon === '2' ? '富文本' : '外链'}</div>
+              <div className='A1Rrow2'>
+                {rightData.typeSon === '2' ? (
+                  <div
+                    className='A1Rrow2Text'
+                    dangerouslySetInnerHTML={{ __html: text(rightData.rtf) }}
+                  ></div>
+                ) : rightData.thumb ? (
+                  <a href={rightData.thumb} target='_blank' rel='noreferrer'>
+                    {rightData.thumb}
+                  </a>
+                ) : (
+                  '（空）'
+                )}
+              </div>
             </div>
           </div>
         ) : null}
@@ -301,11 +335,9 @@ function A1atlas() {
       {/* 新增/编辑页面 中图法分类 */}
       {addInfo.id ? (
         <A1add
-          acShuTxt={acShuTxtRef.current}
           addInfo={addInfo}
-          addFu={() => resetFu()}
+          addFu={() => resetFu('now')}
           closeFu={() => setAddInfo({} as A1AddInfoType)}
-          isNoAcIds={isNoAcIds.current}
         />
       ) : null}
     </div>

src/pages/A2video/A2add/index.tsx

@@ -15,21 +15,12 @@ type Props = {
 
 function A2add({ info, addTableFu, closeFu }: Props) {
   useEffect(() => {
-    const txt = info.filePath || ''
-
-    let fileName = ''
-
-    if (txt) {
-      const resArr = txt.split('/')
-      fileName = resArr[resArr.length - 1]
-    }
-
     ZupThumbRef.current?.setFileComFileFu({
-      fileName,
-      filePath: txt,
-      thumb: txt
+      fileName: info.fileName || '',
+      filePath: info.filePath || '',
+      thumb: info.filePath || ''
     })
-  }, [info.filePath])
+  }, [info])
 
   // 封面图的ref
   const ZupThumbRef = useRef<any>(null)
@@ -41,7 +32,8 @@ function A2add({ info, addTableFu, closeFu }: Props) {
     const obj = {
       id: info.id,
       name: info.name,
-      filePath: coverUrl.filePath || ''
+      filePath: coverUrl.filePath || '',
+      fileName: coverUrl.fileName || ''
     }
     const res = await A2_APIedit(obj)
     if (res.code === 0) {

src/pages/A2video/data.ts

@@ -2,7 +2,8 @@ export type A2tableType = {
   createTime: string
   creatorId?: any
   creatorName?: any
-  filePath?: any
+  filePath: string
+  fileName: string
   id: number
   name: string
   updateTime: string

src/pages/A2video/index.tsx

@@ -25,34 +25,27 @@ function A2video() {
 
   const [editObj, setEditObj] = useState({} as A2tableType)
 
-  const filePathRes = useCallback((filePath: string) => {
-    let txt: React.ReactNode = '（空）'
-    if (filePath) {
-      const resArr = filePath.split('/')
-      const res = resArr[resArr.length - 1]
-      txt = (
-        <div
-          className='A2tableLook'
-          onClick={() =>
-            store.dispatch({
-              type: 'layout/lookDom',
-              payload: { src: filePath, type: 'video' }
-            })
-          }
-        >
-          {res}&emsp;
-          <EyeOutlined />
-        </div>
-      )
-    }
-    return txt
-  }, [])
-
   const tableLastBtn = useMemo(() => {
     return [
       {
         title: '视频文件',
-        render: (item: A2tableType) => filePathRes(item.filePath)
+        render: (item: A2tableType) =>
+          item.fileName ? (
+            <div
+              className='A2tableLook'
+              onClick={() =>
+                store.dispatch({
+                  type: 'layout/lookDom',
+                  payload: { src: item.filePath, type: 'video' }
+                })
+              }
+            >
+              {item.fileName}&emsp;
+              <EyeOutlined />
+            </div>
+          ) : (
+            '（空）'
+          )
       },
       {
         title: '操作',
@@ -63,7 +56,7 @@ function A2video() {
         )
       }
     ]
-  }, [filePathRes])
+  }, [])
   return (
     <div className={styles.A2video}>
       <MyTable