素材共享

src/components/ZupOne/index.tsx

@@ -65,13 +65,14 @@ function ZupOne(
       if (e.target.files) {
         // 拿到files信息
         const filesInfo = e.target.files[0]
-        // console.log("-----", filesInfo.type);
 
         // 校验格式
         const type = format
 
         if (myType === 'pdf') {
-          if (!filesInfo.type.includes('pdf')) {
+          const lastNameArr = filesInfo.name.split('.')
+          const lastName = lastNameArr[lastNameArr.length - 1]
+          if (!['doc', 'docx', 'pdf'].includes(lastName)) {
             e.target.value = ''
             return MessageFu.warning(`只支持${formatTxt}格式!`)
           }
@@ -142,7 +143,7 @@ function ZupOne(
     if (myType === 'video') accept = '.mp4'
     else if (myType === 'audio') accept = '.mp3'
     else if (myType === 'model') accept = '.4dage'
-    else if (myType === 'pdf') accept = '.pdf'
+    else if (myType === 'pdf') accept = '.pdf,.docx,.doc'
     return accept
   }, [myType])
 
@@ -235,13 +236,16 @@ function ZupOne(
         <div className='fileInfo'>
           <div className='upSuccTxt'>{fileUrl.originalName}</div>
           {/* 视频预览 */}
-          <div
-            className='clearCover'
-            hidden={!fileUrl.originalUrl}
-            onClick={() => lookFileNoImgFu(myType)}
-          >
-            <EyeOutlined rev={undefined} />
-          </div>
+          {myType === 'pdf' && fileUrl.originalName.includes('.doc') ? null : (
+            <div
+              className='clearCover'
+              hidden={!fileUrl.originalUrl}
+              onClick={() => lookFileNoImgFu(myType)}
+            >
+              <EyeOutlined rev={undefined} />
+            </div>
+          )}
+
           {/* 视频下载 */}
           <a
             href={baseURL + fileUrl.originalUrl}

src/pages/A2video/data.ts

@@ -17,3 +17,17 @@ export const A2typeSelectType = [
   { value: '追光视频', label: '追光视频' },
   { value: '科普视频', label: '科普视频' }
 ]
+
+export type TypeSelectType = {
+  pageNum: number
+  pageSize: number
+  searchKey: string
+  type: string
+}
+
+export const fromDataBase: TypeSelectType = {
+  pageNum: 1,
+  pageSize: 10,
+  searchKey: '',
+  type: ''
+}

src/pages/A2video/index.tsx

@@ -1,12 +1,11 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import styles from './index.module.scss'
 import { useDispatch, useSelector } from 'react-redux'
-import { UserTableAPIType } from '@/types'
 import { A2_APIdel, A2_APIgetList } from '@/store/action/A2video'
 import { RootState } from '@/store'
 import { MessageFu } from '@/utils/message'
-import { A2listType, AddTxtType } from './data'
-import { Button, Input } from 'antd'
+import { A2listType, A2typeSelectType, AddTxtType, fromDataBase } from './data'
+import { Button, Input, Select } from 'antd'
 import MyPopconfirm from '@/components/MyPopconfirm'
 import MyTable from '@/components/MyTable'
 import A2add from './A2add'
@@ -15,11 +14,7 @@ function A2video() {
   const dispatch = useDispatch()
 
   // 顶部筛选
-  const [fromData, setFromData] = useState<UserTableAPIType>({
-    pageNum: 1,
-    pageSize: 10,
-    searchKey: ''
-  })
+  const [fromData, setFromData] = useState(fromDataBase)
 
   // 封装发送请求的函数
   const getListFu = useCallback(async () => {
@@ -49,11 +44,7 @@ function A2video() {
   const [inputKey, setInputKey] = useState(1)
   const resetSelectFu = useCallback(() => {
     setInputKey(Date.now())
-    setFromData({
-      pageNum: 1,
-      pageSize: 10,
-      searchKey: ''
-    })
+    setFromData({ ...fromDataBase })
   }, [])
 
   // 从仓库中获取表格数据
@@ -115,6 +106,15 @@ function A2video() {
             allowClear
             onChange={e => txtChangeFu(e, 'searchKey')}
           />
+          &emsp;
+          <Select
+            allowClear
+            style={{ width: 150 }}
+            placeholder='类别'
+            options={A2typeSelectType}
+            value={fromData.type || null}
+            onChange={e => setFromData({ ...fromData, type: e, pageNum: 1 })}
+          />
         </div>
         <div className='A2toprr'>
           <Button onClick={resetSelectFu}>重置</Button>&emsp;

src/pages/A3goods/index.tsx

@@ -1,14 +1,13 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import styles from './index.module.scss'
 import { useDispatch, useSelector } from 'react-redux'
-import { UserTableAPIType } from '@/types'
 import { A3_APIdel, A3_APIgetList } from '@/store/action/A3goods'
 import { RootState } from '@/store'
 import { MessageFu } from '@/utils/message'
-import { A3listType } from './data'
-import { Button, Input } from 'antd'
+import { A3listType, A3typeSelectType } from './data'
+import { Button, Input, Select } from 'antd'
 import MyPopconfirm from '@/components/MyPopconfirm'
-import { AddTxtType } from '../A2video/data'
+import { AddTxtType, fromDataBase } from '../A2video/data'
 import MyTable from '@/components/MyTable'
 import A3add from './A3add'
 import { A2tableFuC } from '@/utils/tableData'
@@ -16,11 +15,7 @@ function A3goods() {
   const dispatch = useDispatch()
 
   // 顶部筛选
-  const [fromData, setFromData] = useState<UserTableAPIType>({
-    pageNum: 1,
-    pageSize: 10,
-    searchKey: ''
-  })
+  const [fromData, setFromData] = useState(fromDataBase)
 
   // 封装发送请求的函数
   const getListFu = useCallback(async () => {
@@ -51,11 +46,7 @@ function A3goods() {
   const [inputKey, setInputKey] = useState(1)
   const resetSelectFu = useCallback(() => {
     setInputKey(Date.now())
-    setFromData({
-      pageNum: 1,
-      pageSize: 10,
-      searchKey: ''
-    })
+    setFromData({ ...fromDataBase })
   }, [])
 
   // 从仓库中获取表格数据
@@ -118,6 +109,15 @@ function A3goods() {
             allowClear
             onChange={e => txtChangeFu(e, 'searchKey')}
           />
+          &emsp;
+          <Select
+            allowClear
+            style={{ width: 150 }}
+            placeholder='类别'
+            options={A3typeSelectType}
+            value={fromData.type || null}
+            onChange={e => setFromData({ ...fromData, type: e, pageNum: 1 })}
+          />
         </div>
         <div className='A3toprr'>
           <Button onClick={resetSelectFu}>重置</Button>&emsp;

src/pages/A4advanced/index.tsx

@@ -1,14 +1,13 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import styles from './index.module.scss'
 import { useDispatch, useSelector } from 'react-redux'
-import { UserTableAPIType } from '@/types'
 import { A4_APIdel, A4_APIgetList } from '@/store/action/A4advanced'
 import { RootState } from '@/store'
 import { MessageFu } from '@/utils/message'
-import { A4listType } from './data'
-import { Button, Input } from 'antd'
+import { A4listType, A4typeSelectType } from './data'
+import { Button, Input, Select } from 'antd'
 import MyPopconfirm from '@/components/MyPopconfirm'
-import { AddTxtType } from '../A2video/data'
+import { AddTxtType, fromDataBase } from '../A2video/data'
 import MyTable from '@/components/MyTable'
 import { A4tableC } from '@/utils/tableData'
 import A4add from './A4add'
@@ -16,11 +15,7 @@ function A4advanced() {
   const dispatch = useDispatch()
 
   // 顶部筛选
-  const [fromData, setFromData] = useState<UserTableAPIType>({
-    pageNum: 1,
-    pageSize: 10,
-    searchKey: ''
-  })
+  const [fromData, setFromData] = useState(fromDataBase)
 
   // 封装发送请求的函数
   const getListFu = useCallback(async () => {
@@ -50,11 +45,7 @@ function A4advanced() {
   const [inputKey, setInputKey] = useState(1)
   const resetSelectFu = useCallback(() => {
     setInputKey(Date.now())
-    setFromData({
-      pageNum: 1,
-      pageSize: 10,
-      searchKey: ''
-    })
+    setFromData({ ...fromDataBase })
   }, [])
 
   // 从仓库中获取表格数据
@@ -116,6 +107,15 @@ function A4advanced() {
             allowClear
             onChange={e => txtChangeFu(e, 'searchKey')}
           />
+          &emsp;
+          <Select
+            allowClear
+            style={{ width: 150 }}
+            placeholder='类别'
+            options={A4typeSelectType}
+            value={fromData.type || null}
+            onChange={e => setFromData({ ...fromData, type: e, pageNum: 1 })}
+          />
         </div>
         <div className='A4toprr'>
           <Button onClick={resetSelectFu}>重置</Button>&emsp;

src/pages/A5share/A5add/index.tsx

@@ -8,6 +8,7 @@ import { MessageFu } from '@/utils/message'
 import { A5typeSelectType } from '../data'
 import ZupOne from '@/components/ZupOne'
 import MyPopconfirm from '@/components/MyPopconfirm'
+import ZupTypes from '@/components/ZupTypes'
 
 type Props = {
   txt: AddTxtType
@@ -18,32 +19,66 @@ type Props = {
 }
 
 function A5add({ txt, _id, closeFu, addTableFu, editTableFu }: Props) {
+  const infoRef = useRef<any>({})
+
   const FormBoxRef = useRef<FormInstance>(null)
   // 封面图的ref
   const ZupThumbRef = useRef<any>(null)
+
+  // 视频的ref
   const ZupVideoRef = useRef<any>(null)
 
-  const getInfoFu = useCallback(async (_id: string) => {
-    const res = await A5_APIgetInfo(_id)
-    if (res.code === 0) {
-      const info = res.data
+  // 文档的ref
+  const ZupDocRef = useRef<any>(null)
 
-      if (info.releaseDate) info.releaseDate = dayjs(info.releaseDate)
+  // 图片的ref
+  const ZupImgRef = useRef<any>(null)
 
-      FormBoxRef.current?.setFieldsValue(info)
+  const [type, setType] = useState('')
+
+  useEffect(() => {
+    if (type) {
       // 设置封面图
       ZupThumbRef.current?.setFileComFileFu({
         originalName: '',
-        originalUrl: info.cover,
-        compressedUrl: info.coverSmall
+        originalUrl: infoRef.current.cover || '',
+        compressedUrl: infoRef.current.coverSmall || ''
       })
+    }
+
+    if (type === '视频素材') {
       // 设置视频
       ZupVideoRef.current?.setFileComFileFu({
-        originalName: info.videoName,
-        originalUrl: info.videoUrl,
+        originalName: infoRef.current.videoName || '',
+        originalUrl: infoRef.current.videoUrl || '',
+        compressedUrl: ''
+      })
+    } else if (type === '图片资料') {
+      //  设置附件类型
+      ZupImgRef.current?.setFileComFileFu({
+        type: ['img'],
+        fileList: infoRef.current.fileDetails || []
+      })
+    } else if (type === '档案文件') {
+      // 设置文档
+      ZupDocRef.current?.setFileComFileFu({
+        originalName: infoRef.current.docName || '',
+        originalUrl: infoRef.current.docUrl || '',
         compressedUrl: ''
       })
     }
+  }, [type])
+
+  const getInfoFu = useCallback(async (_id: string) => {
+    const res = await A5_APIgetInfo(_id)
+    if (res.code === 0) {
+      const info = res.data
+      infoRef.current = info
+      setType(info.type)
+      if (info.releaseDate) info.releaseDate = dayjs(info.releaseDate)
+
+      FormBoxRef.current?.setFieldsValue(info)
+    }
   }, [])
 
   useEffect(() => {
@@ -64,24 +99,69 @@ function A5add({ txt, _id, closeFu, addTableFu, editTableFu }: Props) {
   const onFinish = useCallback(
     async (values: any) => {
       setFileCheck(true)
-      // 封面图
-      const coverUrl = ZupThumbRef.current?.fileComFileResFu()
-      if (!coverUrl.originalUrl) return MessageFu.warning('请上传封面图')
 
-      // 视频
-      const videoUrl = ZupVideoRef.current?.fileComFileResFu()
-      if (!videoUrl.originalUrl) return MessageFu.warning('请上传视频')
+      let cover = ''
+      let coverSmall = ''
+
+      if (type && type !== '图片资料') {
+        // 封面图
+        const coverUrl = ZupThumbRef.current?.fileComFileResFu()
+        if (!coverUrl.originalUrl) return MessageFu.warning('请上传封面图')
+        cover = coverUrl.originalUrl || ''
+        coverSmall = coverUrl.compressedUrl || ''
+      }
+
+      let videoUrl = ''
+      let videoName = ''
+
+      let docUrl = ''
+      let docName = ''
+
+      let fileIds = []
+
+      if (type === '视频素材') {
+        const videoUrlObj = ZupVideoRef.current?.fileComFileResFu()
+        if (!videoUrlObj.originalUrl) return MessageFu.warning('请上传视频')
+        videoUrl = videoUrlObj.originalUrl || ''
+        videoName = videoUrlObj.originalName || ''
+      } else if (type === '图片资料') {
+        // 文件类型
+        const {
+          sonIsOk,
+          sonFileIds,
+          cover: cover2,
+          coverSmall: coverSmall2
+        } = ZupImgRef.current?.fileComFileResFu()
+        if (sonIsOk) return MessageFu.warning('请上传图片')
+        cover = cover2
+        coverSmall = coverSmall2
+        fileIds = sonFileIds || []
+      } else if (type === '档案文件') {
+        const docUrlObj = ZupDocRef.current?.fileComFileResFu()
+        if (!docUrlObj.originalUrl) return MessageFu.warning('请上传文档')
+        docUrl = docUrlObj.originalUrl || ''
+        docName = docUrlObj.originalName || ''
+      }
 
       const obj = {
         ...values,
         _id: txt === '新增' ? null : _id,
         releaseDate: values.releaseDate ? dayjs(values.releaseDate).format('YYYY-MM-DD') : '',
-        cover: coverUrl.originalUrl || '',
-        coverSmall: coverUrl.compressedUrl || '',
-        videoUrl: videoUrl.originalUrl || '',
-        videoName: videoUrl.originalName
+        cover,
+        coverSmall,
+        videoUrl,
+        videoName,
+        docUrl,
+        docName,
+        fileIds
       }
 
+      // if (1 + 1 === 2) {
+      //   console.log(123456, obj)
+
+      //   return
+      // }
+
       const res: any = await A5_APIsave(obj)
 
       if (res.code === 0) {
@@ -92,7 +172,7 @@ function A5add({ txt, _id, closeFu, addTableFu, editTableFu }: Props) {
       }
       // console.log("通过校验，点击确定");
     },
-    [addTableFu, closeFu, editTableFu, _id, txt]
+    [type, txt, _id, addTableFu, editTableFu, closeFu]
   )
 
   return (
@@ -124,6 +204,8 @@ function A5add({ txt, _id, closeFu, addTableFu, editTableFu }: Props) {
 
         <Form.Item label='类别' name='type' rules={[{ required: true, message: '请选择类别' }]}>
           <Select
+            value={type}
+            onChange={e => setType(e)}
             disabled={txt === '查看'}
             style={{ width: 150 }}
             options={A5typeSelectType}
@@ -131,45 +213,92 @@ function A5add({ txt, _id, closeFu, addTableFu, editTableFu }: Props) {
           />
         </Form.Item>
 
-        <div className='formBox'>
-          <div className='formBoxll'>
-            <span>* </span>封面：
+        {type && type !== '图片资料' ? (
+          <div className='formBox'>
+            <div className='formBoxll'>
+              <span>* </span>封面：
+            </div>
+            <div className='formBoxrr'>
+              <ZupOne
+                ref={ZupThumbRef}
+                isLook={txt === '查看'}
+                fileCheck={fileCheck}
+                myUrl='file/upload?upPath=A5share'
+                format={['image/jpeg', 'image/png']}
+                formatTxt='png、jpg和jpeg'
+                checkTxt='请上传封面图'
+                upTxt='最多1张'
+                myType='thumb'
+                size={5}
+              />
+            </div>
           </div>
-          <div className='formBoxrr'>
-            <ZupOne
-              ref={ZupThumbRef}
-              isLook={txt === '查看'}
-              fileCheck={fileCheck}
-              myUrl='file/upload?upPath=A5share'
-              format={['image/jpeg', 'image/png']}
-              formatTxt='png、jpg和jpeg'
-              checkTxt='请上传封面图'
-              upTxt='最多1张'
-              myType='thumb'
-              size={5}
-            />
+        ) : null}
+
+        {type === '视频素材' ? (
+          <div className='formBox'>
+            <div className='formBoxll'>
+              <span>* </span>视频：
+            </div>
+            <div className='formBoxrr'>
+              <ZupOne
+                ref={ZupVideoRef}
+                isLook={txt === '查看'}
+                fileCheck={fileCheck}
+                myUrl='file/upload?upPath=A5share'
+                format={['video/mp4']}
+                formatTxt='mp4'
+                checkTxt='请上传视频'
+                upTxt='最多1个'
+                myType='video'
+                size={500}
+              />
+            </div>
           </div>
-        </div>
+        ) : null}
 
-        <div className='formBox'>
-          <div className='formBoxll'>
-            <span>* </span>视频：
+        {type === '图片资料' ? (
+          <div className='formBox'>
+            <div className='formBoxll'>
+              <span>* </span>图片：
+            </div>
+            <div className='formBoxrr'>
+              <ZupTypes
+                ref={ZupImgRef}
+                selecFlag='图片'
+                fileCheck={fileCheck}
+                myUrl='file/upload?upPath=A5share'
+                isLook={txt === '查看'}
+                imgLength={20}
+                multipleImg={true}
+                oneIsCover={true}
+                isTypeShow={true}
+              />
+            </div>
           </div>
-          <div className='formBoxrr'>
-            <ZupOne
-              ref={ZupVideoRef}
-              isLook={txt === '查看'}
-              fileCheck={fileCheck}
-              myUrl='file/upload?upPath=A5share'
-              format={['video/mp4']}
-              formatTxt='mp4'
-              checkTxt='请上传视频'
-              upTxt='最多1个'
-              myType='video'
-              size={500}
-            />
+        ) : null}
+
+        {type === '档案文件' ? (
+          <div className='formBox'>
+            <div className='formBoxll'>
+              <span>* </span>文档：
+            </div>
+            <div className='formBoxrr'>
+              <ZupOne
+                ref={ZupDocRef}
+                isLook={txt === '查看'}
+                fileCheck={fileCheck}
+                myUrl='file/upload?upPath=A5share'
+                format={['video/mp4']}
+                formatTxt='pdf/doc/docx'
+                checkTxt='请上传文档'
+                upTxt='最多1个'
+                myType='pdf'
+                size={50}
+              />
+            </div>
           </div>
-        </div>
+        ) : null}
 
         <div className='sortForm'>
           <Form.Item

src/pages/A5share/index.tsx

@@ -1,14 +1,13 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import styles from './index.module.scss'
 import { useDispatch, useSelector } from 'react-redux'
-import { UserTableAPIType } from '@/types'
 import { A5_APIdel, A5_APIgetList } from '@/store/action/A5share'
 import { RootState } from '@/store'
 import { MessageFu } from '@/utils/message'
-import { A5listType } from './data'
-import { Button, Input } from 'antd'
+import { A5listType, A5typeSelectType } from './data'
+import { Button, Input, Select } from 'antd'
 import MyPopconfirm from '@/components/MyPopconfirm'
-import { AddTxtType } from '../A2video/data'
+import { AddTxtType, fromDataBase } from '../A2video/data'
 import MyTable from '@/components/MyTable'
 import { A4tableC } from '@/utils/tableData'
 import A5add from './A5add'
@@ -16,11 +15,7 @@ function A5share() {
   const dispatch = useDispatch()
 
   // 顶部筛选
-  const [fromData, setFromData] = useState<UserTableAPIType>({
-    pageNum: 1,
-    pageSize: 10,
-    searchKey: ''
-  })
+  const [fromData, setFromData] = useState(fromDataBase)
 
   // 封装发送请求的函数
   const getListFu = useCallback(async () => {
@@ -50,11 +45,7 @@ function A5share() {
   const [inputKey, setInputKey] = useState(1)
   const resetSelectFu = useCallback(() => {
     setInputKey(Date.now())
-    setFromData({
-      pageNum: 1,
-      pageSize: 10,
-      searchKey: ''
-    })
+    setFromData({ ...fromDataBase })
   }, [])
 
   // 从仓库中获取表格数据
@@ -116,6 +107,15 @@ function A5share() {
             allowClear
             onChange={e => txtChangeFu(e, 'searchKey')}
           />
+          &emsp;
+          <Select
+            allowClear
+            style={{ width: 150 }}
+            placeholder='类别'
+            options={A5typeSelectType}
+            value={fromData.type || null}
+            onChange={e => setFromData({ ...fromData, type: e, pageNum: 1 })}
+          />
         </div>
         <div className='A5toprr'>
           <Button onClick={resetSelectFu}>重置</Button>&emsp;