内容发布模块

src/components/ZRichTextOne/index.module.scss

@@ -57,7 +57,7 @@
       }
 
       .bf-content {
-        height: 300px;
+        height: 400px;
         padding-bottom: 0px;
       }
 

src/components/ZRichTextOne/index.tsx

@@ -23,9 +23,10 @@ type Props = {
   isLook: boolean //是否是查看进来
   ref: any //当前自己的ref，给父组件调用
   myUrl: string //上传的api地址
+  titTxt?: string
 }
 
-function ZRichTextOne({ check, isLook, myUrl }: Props, ref: any) {
+function ZRichTextOne({ check, isLook, myUrl, titTxt = '请输入内容' }: Props, ref: any) {
   const [section, setSection] = useState(BraftEditor.createEditorState(''))
 
   // 判断 富文本是否为空
@@ -151,7 +152,7 @@ function ZRichTextOne({ check, isLook, myUrl }: Props, ref: any) {
         </div>
       </div>
       <div className={classNames('noUpThumb', check && isTxtFlag ? 'noUpThumbAc' : '')}>
-        {`请完整输入正文!`}
+        {titTxt}
       </div>
     </div>
   )

src/components/ZupTypes/index.tsx

@@ -345,7 +345,7 @@ function ZupTypes(
       )
       return dom
     },
-    [audioSize, fileList, isModelLink, modelSize, typeCheck, upFileFu, videoSize, videoTit]
+    [audioSize, fileList, isLook, isModelLink, modelSize, typeCheck, upFileFu, videoSize, videoTit]
   )
 
   // ------------让父组件调用的 回显

src/pages/A1intro/index.module.scss

@@ -5,9 +5,13 @@
   display: flex;
   justify-content: space-between;
   :global {
-    #ZRichTextOne {
-      .bf-content {
-        height: 600px;
+    .A1ll {
+      width: calc(100% - 150px);
+      #ZRichTextOne {
+        width: 100%;
+        .bf-content {
+          height: 650px;
+        }
       }
     }
   }

src/pages/A3goods/data.ts

@@ -9,14 +9,9 @@ export type A3listType = {
   coverSmall: string
   description: string
   fileType: string[]
-  videoUrl: string
-  videoName: string
-  imgIds: string[]
   fileIds: string[]
   fileDetails: FileListType[]
   modelLink: string
-  audioUrl: string
-  audioName: string
   sort: number
   createTime: string
   updateTime: string

src/pages/A4advanced/A4add/index.module.scss

@@ -0,0 +1,59 @@
+.A4add {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+  border-radius: 10px;
+  padding: 20px;
+  :global {
+    .A4main {
+      width: 100%;
+      height: 100%;
+      overflow-y: auto;
+      .ant-form {
+        width: 1000px;
+        .ant-form-item-label {
+          width: 120px;
+        }
+
+        .formBox {
+          display: flex;
+          margin-bottom: 24px;
+          .formBoxll {
+            width: 120px;
+            text-align: right;
+            line-height: 26px;
+            & > span {
+              color: #ff4d4f;
+            }
+          }
+          .formBoxrr {
+            width: calc(100% - 120px);
+          }
+        }
+        .sortForm {
+          position: relative;
+          .fromRowTit {
+            position: absolute;
+            left: 225px;
+            top: 6px;
+            color: #999;
+            font-size: 12px;
+          }
+        }
+        .BtnForm {
+          position: absolute;
+          right: 200px;
+          top: 50%;
+          transform: translateY(-50%);
+
+          .ant-btn {
+            margin-bottom: 30px;
+          }
+        }
+      }
+    }
+  }
+}

src/pages/A4advanced/A4add/index.tsx

@@ -0,0 +1,207 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+import styles from './index.module.scss'
+import { AddTxtType } from '@/pages/A2video/data'
+import { Button, DatePicker, Form, FormInstance, Input, InputNumber, Select } from 'antd'
+import { A4_APIgetInfo, A4_APIsave } from '@/store/action/A4advanced'
+import dayjs from 'dayjs'
+import { MessageFu } from '@/utils/message'
+import { A4typeSelectType } from '../data'
+import ZupOne from '@/components/ZupOne'
+import ZRichTextOne from '@/components/ZRichTextOne'
+import MyPopconfirm from '@/components/MyPopconfirm'
+
+type Props = {
+  txt: AddTxtType
+  _id: string
+  closeFu: () => void
+  addTableFu: () => void
+  editTableFu: () => void
+}
+
+function A4add({ txt, _id, closeFu, addTableFu, editTableFu }: Props) {
+  const FormBoxRef = useRef<FormInstance>(null)
+  // 封面图的ref
+  const ZupThumbRef = useRef<any>(null)
+  const ZRichTextRef = useRef<any>(null)
+
+  const getInfoFu = useCallback(async (_id: string) => {
+    const res = await A4_APIgetInfo(_id)
+    if (res.code === 0) {
+      const info = res.data
+
+      if (info.releaseDate) info.releaseDate = dayjs(info.releaseDate)
+
+      FormBoxRef.current?.setFieldsValue(info)
+
+      // 设置封面图
+      ZupThumbRef.current?.setFileComFileFu({
+        originalName: '',
+        originalUrl: info.cover,
+        compressedUrl: info.coverSmall
+      })
+      // 设置富文本
+      ZRichTextRef.current?.ritxtShowFu(info.description)
+    }
+  }, [])
+
+  useEffect(() => {
+    if (_id) getInfoFu(_id)
+    else {
+      FormBoxRef.current?.setFieldsValue({ releaseDate: dayjs() })
+    }
+  }, [_id, getInfoFu])
+
+  // 有没有点击确定，检验图片和富文本
+  const [fileCheck, setFileCheck] = useState(false)
+
+  // 没有通过校验
+  const onFinishFailed = useCallback(() => {
+    setFileCheck(true)
+    // return MessageFu.warning("有表单不符号规则!");
+  }, [])
+
+  // 通过校验点击确定
+  const onFinish = useCallback(
+    async (values: any) => {
+      setFileCheck(true)
+      // 封面图
+      const coverUrl = ZupThumbRef.current?.fileComFileResFu()
+      if (!coverUrl.originalUrl) return MessageFu.warning('请上传封面图')
+
+      // 富文本
+      const rtf = ZRichTextRef.current?.fatherBtnOkFu() || { flag: true }
+      if (rtf.flag) return MessageFu.warning('请输入内容')
+
+      const obj = {
+        ...values,
+        _id: txt === '新增' ? null : _id,
+        releaseDate: values.releaseDate ? dayjs(values.releaseDate).format('YYYY-MM-DD') : '',
+        cover: coverUrl.originalUrl || '',
+        coverSmall: coverUrl.compressedUrl || '',
+        description: rtf.val || ''
+      }
+
+      const res: any = await A4_APIsave(obj)
+
+      if (res.code === 0) {
+        if (txt === '新增') addTableFu()
+        else editTableFu()
+        MessageFu.success(txt === '新增' ? '新增成功' : '编辑成功')
+        closeFu()
+      }
+      // console.log("通过校验，点击确定");
+    },
+    [txt, _id, addTableFu, editTableFu, closeFu]
+  )
+
+  return (
+    <div className={styles.A4add}>
+      <div className='A4main'>
+        <Form
+          scrollToFirstError={true}
+          ref={FormBoxRef}
+          name='basic'
+          onFinish={onFinish}
+          onFinishFailed={onFinishFailed}
+          autoComplete='off'
+        >
+          <Form.Item
+            label='标题'
+            name='name'
+            rules={[{ required: true, message: '请输入标题' }]}
+            getValueFromEvent={e => e.target.value.trim()}
+          >
+            <Input readOnly={txt === '查看'} maxLength={30} showCount placeholder='请输入内容' />
+          </Form.Item>
+
+          <Form.Item
+            label='发布日期'
+            name='releaseDate'
+            rules={[{ required: true, message: '请选择发布日期' }]}
+          >
+            <DatePicker disabled={txt === '查看'} allowClear={false} />
+          </Form.Item>
+
+          <Form.Item label='类别' name='type' rules={[{ required: true, message: '请选择类别' }]}>
+            <Select
+              disabled={txt === '查看'}
+              style={{ width: 150 }}
+              options={A4typeSelectType}
+              placeholder='请选择'
+            />
+          </Form.Item>
+
+          <div className='formBox'>
+            <div className='formBoxll'>
+              <span>* </span>封面：
+            </div>
+            <div className='formBoxrr'>
+              <ZupOne
+                ref={ZupThumbRef}
+                isLook={txt === '查看'}
+                fileCheck={fileCheck}
+                myUrl='file/upload?upPath=A4advanced'
+                format={['image/jpeg', 'image/png']}
+                formatTxt='png、jpg和jpeg'
+                checkTxt='请上传封面图'
+                upTxt='最多1张'
+                myType='thumb'
+                size={5}
+              />
+            </div>
+          </div>
+
+          <div className='sortForm'>
+            <Form.Item
+              label='排序值'
+              name='sort'
+              initialValue={999}
+              rules={[{ required: true, message: '请输入排序值' }]}
+            >
+              <InputNumber readOnly={txt === '查看'} min={1} max={999} placeholder='请输入' />
+            </Form.Item>
+            <div className='fromRowTit'>
+              请输入1~999的数字。数字越大，排序越靠前。数字相同时，更新发布的内容排在前面
+            </div>
+          </div>
+
+          <div className='formBox'>
+            <div className='formBoxll'>
+              <span>* </span>内容：
+            </div>
+            <div className='formBoxrr'>
+              <ZRichTextOne
+                check={fileCheck}
+                myUrl='file/upload?upPath=A1intro'
+                isLook={txt === '查看'}
+                ref={ZRichTextRef}
+              />
+            </div>
+          </div>
+
+          {/* 确定和取消按钮 */}
+          <div className='BtnForm'>
+            <Form.Item>
+              {txt === '查看' ? (
+                <Button onClick={closeFu}>返回</Button>
+              ) : (
+                <>
+                  <Button type='primary' htmlType='submit'>
+                    提交
+                  </Button>
+                  <br />
+                  <br />
+                  <MyPopconfirm txtK='取消' onConfirm={closeFu} />
+                </>
+              )}
+            </Form.Item>
+          </div>
+        </Form>
+      </div>
+    </div>
+  )
+}
+
+const MemoA4add = React.memo(A4add)
+
+export default MemoA4add

src/pages/A4advanced/data.ts

@@ -0,0 +1,21 @@
+export type A4listType = {
+  _id: string
+  name: string
+  releaseDate: string
+  type: string
+  cover: string
+  coverSmall: string
+  description: string
+  modelLink: string
+  sort: number
+  createTime: string
+  updateTime: string
+}
+
+export const A4typeSelectType = [
+  { value: '新闻信息', label: '新闻信息' },
+  { value: '施工进度', label: '施工进度' },
+  { value: '重要节点', label: '重要节点' },
+  { value: '领导视察', label: '领导视察' },
+  { value: '轮播图', label: '轮播图' }
+]

src/pages/A4advanced/index.module.scss

@@ -1,4 +1,16 @@
 .A4advanced {
+  background-color: #fff;
+  border-radius: 10px;
+  padding: 20px;
+  position: relative;
   :global {
+    .A4top {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 20px;
+    }
+    .ant-table-cell {
+      padding: 8px !important;
+    }
   }
 }

src/pages/A4advanced/index.tsx

@@ -1,9 +1,151 @@
-import React from 'react'
+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 MyPopconfirm from '@/components/MyPopconfirm'
+import { AddTxtType } from '../A2video/data'
+import MyTable from '@/components/MyTable'
+import { A4tableC } from '@/utils/tableData'
+import A4add from './A4add'
 function A4advanced() {
+  const dispatch = useDispatch()
+
+  // 顶部筛选
+  const [fromData, setFromData] = useState<UserTableAPIType>({
+    pageNum: 1,
+    pageSize: 10,
+    searchKey: ''
+  })
+
+  // 封装发送请求的函数
+  const getListFu = useCallback(async () => {
+    dispatch(A4_APIgetList(fromData))
+  }, [dispatch, fromData])
+
+  useEffect(() => {
+    getListFu()
+  }, [getListFu])
+
+  const timeRef = useRef(-1)
+  // 输入框的输入
+  const txtChangeFu = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>, key: 'searchKey') => {
+      clearTimeout(timeRef.current)
+      timeRef.current = window.setTimeout(() => {
+        setFromData({
+          ...fromData,
+          [key]: e.target.value,
+          pageNum: 1
+        })
+      }, 500)
+    },
+    [fromData]
+  )
+  // 点击重置
+  const [inputKey, setInputKey] = useState(1)
+  const resetSelectFu = useCallback(() => {
+    setInputKey(Date.now())
+    setFromData({
+      pageNum: 1,
+      pageSize: 10,
+      searchKey: ''
+    })
+  }, [])
+
+  // 从仓库中获取表格数据
+  const tableInfo = useSelector((state: RootState) => state.A4advanced.tableInfo)
+
+  // 点击删除
+  const delTableFu = useCallback(
+    async (id: string) => {
+      const res: any = await A4_APIdel(id)
+      if (res.code === 0) {
+        MessageFu.success('删除成功')
+        getListFu()
+      }
+    },
+    [getListFu]
+  )
+
+  const tableLastBtn = useMemo(() => {
+    return [
+      {
+        title: '操作',
+        render: (item: A4listType) => (
+          <>
+            <Button
+              size='small'
+              type='text'
+              onClick={() => setEditInfo({ txt: '查看', _id: item._id })}
+            >
+              查看
+            </Button>
+            <Button
+              size='small'
+              type='text'
+              onClick={() => setEditInfo({ txt: '编辑', _id: item._id })}
+            >
+              编辑
+            </Button>
+            <MyPopconfirm txtK='删除' onConfirm={() => delTableFu(item._id)} />
+          </>
+        )
+      }
+    ]
+  }, [delTableFu])
+
+  // 新增 编辑 查看
+  const [editInfo, setEditInfo] = useState({ txt: '', _id: '' } as { txt: AddTxtType; _id: string })
+
   return (
     <div className={styles.A4advanced}>
-      <h1>A4advanced</h1>
+      <div className='pageTitle'>先进光源{editInfo.txt ? ` - ${editInfo.txt}` : ''}</div>
+      <div className='A4top'>
+        <div className='A4topll'>
+          <Input
+            key={inputKey}
+            maxLength={10}
+            showCount
+            style={{ width: 300 }}
+            placeholder='请输入标题'
+            allowClear
+            onChange={e => txtChangeFu(e, 'searchKey')}
+          />
+        </div>
+        <div className='A4toprr'>
+          <Button onClick={resetSelectFu}>重置</Button>&emsp;
+          <Button type='primary' onClick={() => setEditInfo({ txt: '新增', _id: '' })}>
+            新增
+          </Button>
+        </div>
+      </div>
+
+      {/* 表格主体 */}
+      <MyTable
+        yHeight={650}
+        list={tableInfo.list}
+        columnsTemp={A4tableC}
+        lastBtn={tableLastBtn}
+        pageNum={fromData.pageNum}
+        pageSize={fromData.pageSize}
+        total={tableInfo.total}
+        onChange={(pageNum, pageSize) => setFromData({ ...fromData, pageNum, pageSize })}
+      />
+      {/* 新增 查看 编辑 */}
+      {editInfo.txt ? (
+        <A4add
+          txt={editInfo.txt}
+          _id={editInfo._id}
+          closeFu={() => setEditInfo({ txt: '', _id: '' })}
+          addTableFu={resetSelectFu}
+          editTableFu={getListFu}
+        />
+      ) : null}
     </div>
   )
 }

src/pages/A5share/A5add/index.module.scss

@@ -0,0 +1,51 @@
+.A5add {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+  border-radius: 10px;
+  padding: 20px;
+  :global {
+    .ant-form {
+      width: 1000px;
+      .ant-form-item-label {
+        width: 120px;
+      }
+
+      .formBox {
+        display: flex;
+        margin-bottom: 24px;
+        .formBoxll {
+          width: 120px;
+          text-align: right;
+          line-height: 26px;
+          & > span {
+            color: #ff4d4f;
+          }
+        }
+        .formBoxrr {
+          width: calc(100% - 120px);
+        }
+      }
+      .sortForm {
+        position: relative;
+        .fromRowTit {
+          position: absolute;
+          left: 225px;
+          top: 6px;
+          color: #999;
+          font-size: 12px;
+        }
+      }
+      .BtnForm {
+        padding-left: 120px;
+        margin-top: 40px;
+        .ant-btn {
+          margin-right: 30px;
+        }
+      }
+    }
+  }
+}

src/pages/A5share/A5add/index.tsx

@@ -0,0 +1,209 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+import styles from './index.module.scss'
+import { AddTxtType } from '@/pages/A2video/data'
+import { Button, DatePicker, Form, FormInstance, Input, InputNumber, Select } from 'antd'
+import { A5_APIgetInfo, A5_APIsave } from '@/store/action/A5share'
+import dayjs from 'dayjs'
+import { MessageFu } from '@/utils/message'
+import { A5typeSelectType } from '../data'
+import ZupOne from '@/components/ZupOne'
+import MyPopconfirm from '@/components/MyPopconfirm'
+
+type Props = {
+  txt: AddTxtType
+  _id: string
+  closeFu: () => void
+  addTableFu: () => void
+  editTableFu: () => void
+}
+
+function A5add({ txt, _id, closeFu, addTableFu, editTableFu }: Props) {
+  const FormBoxRef = useRef<FormInstance>(null)
+  // 封面图的ref
+  const ZupThumbRef = useRef<any>(null)
+  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
+
+      if (info.releaseDate) info.releaseDate = dayjs(info.releaseDate)
+
+      FormBoxRef.current?.setFieldsValue(info)
+      // 设置封面图
+      ZupThumbRef.current?.setFileComFileFu({
+        originalName: '',
+        originalUrl: info.cover,
+        compressedUrl: info.coverSmall
+      })
+      // 设置视频
+      ZupVideoRef.current?.setFileComFileFu({
+        originalName: info.videoName,
+        originalUrl: info.videoUrl,
+        compressedUrl: ''
+      })
+    }
+  }, [])
+
+  useEffect(() => {
+    if (_id) getInfoFu(_id)
+    else FormBoxRef.current?.setFieldsValue({ releaseDate: dayjs() })
+  }, [_id, getInfoFu])
+
+  // 有没有点击确定，检验图片和视频
+  const [fileCheck, setFileCheck] = useState(false)
+
+  // 没有通过校验
+  const onFinishFailed = useCallback(() => {
+    setFileCheck(true)
+    // return MessageFu.warning("有表单不符号规则!");
+  }, [])
+
+  // 通过校验点击确定
+  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('请上传视频')
+
+      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
+      }
+
+      const res: any = await A5_APIsave(obj)
+
+      if (res.code === 0) {
+        if (txt === '新增') addTableFu()
+        else editTableFu()
+        MessageFu.success(txt === '新增' ? '新增成功' : '编辑成功')
+        closeFu()
+      }
+      // console.log("通过校验，点击确定");
+    },
+    [addTableFu, closeFu, editTableFu, _id, txt]
+  )
+
+  return (
+    <div className={styles.A5add}>
+      <Form
+        scrollToFirstError={true}
+        ref={FormBoxRef}
+        name='basic'
+        onFinish={onFinish}
+        onFinishFailed={onFinishFailed}
+        autoComplete='off'
+      >
+        <Form.Item
+          label='标题'
+          name='name'
+          rules={[{ required: true, message: '请输入标题' }]}
+          getValueFromEvent={e => e.target.value.trim()}
+        >
+          <Input readOnly={txt === '查看'} maxLength={30} showCount placeholder='请输入内容' />
+        </Form.Item>
+
+        <Form.Item
+          label='发布日期'
+          name='releaseDate'
+          rules={[{ required: true, message: '请选择发布日期' }]}
+        >
+          <DatePicker disabled={txt === '查看'} allowClear={false} />
+        </Form.Item>
+
+        <Form.Item label='类别' name='type' rules={[{ required: true, message: '请选择类别' }]}>
+          <Select
+            disabled={txt === '查看'}
+            style={{ width: 150 }}
+            options={A5typeSelectType}
+            placeholder='请选择'
+          />
+        </Form.Item>
+
+        <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='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 className='sortForm'>
+          <Form.Item
+            label='排序值'
+            name='sort'
+            initialValue={999}
+            rules={[{ required: true, message: '请输入排序值' }]}
+          >
+            <InputNumber readOnly={txt === '查看'} min={1} max={999} placeholder='请输入' />
+          </Form.Item>
+          <div className='fromRowTit'>
+            请输入1~999的数字。数字越大，排序越靠前。数字相同时，更新发布的内容排在前面
+          </div>
+        </div>
+        {/* 确定和取消按钮 */}
+        <div className='BtnForm'>
+          <Form.Item>
+            {txt === '查看' ? (
+              <Button onClick={closeFu}>返回</Button>
+            ) : (
+              <>
+                <Button type='primary' htmlType='submit'>
+                  提交
+                </Button>
+                <MyPopconfirm txtK='取消' onConfirm={closeFu} />
+              </>
+            )}
+          </Form.Item>
+        </div>
+      </Form>
+    </div>
+  )
+}
+
+const MemoA5add = React.memo(A5add)
+
+export default MemoA5add

src/pages/A5share/data.ts

@@ -0,0 +1,18 @@
+export type A5listType = {
+  _id: string
+  name: string
+  releaseDate: string
+  type: string
+  cover: string
+  coverSmall: string
+  video: string
+  sort: number
+  createTime: string
+  updateTime: string
+}
+
+export const A5typeSelectType = [
+  { value: '视频素材', label: '视频素材' },
+  { value: '图片资料', label: '图片资料' },
+  { value: '档案文件', label: '档案文件' }
+]

src/pages/A5share/index.module.scss

@@ -1,4 +1,16 @@
 .A5share {
+  background-color: #fff;
+  border-radius: 10px;
+  padding: 20px;
+  position: relative;
   :global {
+    .A5top {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 20px;
+    }
+    .ant-table-cell {
+      padding: 8px !important;
+    }
   }
 }

src/pages/A5share/index.tsx

@@ -1,9 +1,152 @@
-import React from 'react'
+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 MyPopconfirm from '@/components/MyPopconfirm'
+import { AddTxtType } from '../A2video/data'
+import MyTable from '@/components/MyTable'
+import { A4tableC } from '@/utils/tableData'
+import A5add from './A5add'
 function A5share() {
+  const dispatch = useDispatch()
+
+  // 顶部筛选
+  const [fromData, setFromData] = useState<UserTableAPIType>({
+    pageNum: 1,
+    pageSize: 10,
+    searchKey: ''
+  })
+
+  // 封装发送请求的函数
+  const getListFu = useCallback(async () => {
+    dispatch(A5_APIgetList(fromData))
+  }, [dispatch, fromData])
+
+  useEffect(() => {
+    getListFu()
+  }, [getListFu])
+
+  const timeRef = useRef(-1)
+  // 输入框的输入
+  const txtChangeFu = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>, key: 'searchKey') => {
+      clearTimeout(timeRef.current)
+      timeRef.current = window.setTimeout(() => {
+        setFromData({
+          ...fromData,
+          [key]: e.target.value,
+          pageNum: 1
+        })
+      }, 500)
+    },
+    [fromData]
+  )
+  // 点击重置
+  const [inputKey, setInputKey] = useState(1)
+  const resetSelectFu = useCallback(() => {
+    setInputKey(Date.now())
+    setFromData({
+      pageNum: 1,
+      pageSize: 10,
+      searchKey: ''
+    })
+  }, [])
+
+  // 从仓库中获取表格数据
+  const tableInfo = useSelector((state: RootState) => state.A5share.tableInfo)
+
+  // 点击删除
+  const delTableFu = useCallback(
+    async (id: string) => {
+      const res: any = await A5_APIdel(id)
+      if (res.code === 0) {
+        MessageFu.success('删除成功')
+        getListFu()
+      }
+    },
+    [getListFu]
+  )
+
+  const tableLastBtn = useMemo(() => {
+    return [
+      {
+        title: '操作',
+        render: (item: A5listType) => (
+          <>
+            <Button
+              size='small'
+              type='text'
+              onClick={() => setEditInfo({ txt: '查看', _id: item._id })}
+            >
+              查看
+            </Button>
+            <Button
+              size='small'
+              type='text'
+              onClick={() => setEditInfo({ txt: '编辑', _id: item._id })}
+            >
+              编辑
+            </Button>
+            <MyPopconfirm txtK='删除' onConfirm={() => delTableFu(item._id)} />
+          </>
+        )
+      }
+    ]
+  }, [delTableFu])
+
+  // 新增 编辑 查看
+  const [editInfo, setEditInfo] = useState({ txt: '', _id: '' } as { txt: AddTxtType; _id: string })
+
   return (
     <div className={styles.A5share}>
-      <h1>A5share</h1>
+      <div className='pageTitle'>素材共享{editInfo.txt ? ` - ${editInfo.txt}` : ''}</div>
+      <div className='A5top'>
+        <div className='A5topll'>
+          <Input
+            key={inputKey}
+            maxLength={10}
+            showCount
+            style={{ width: 300 }}
+            placeholder='请输入标题'
+            allowClear
+            onChange={e => txtChangeFu(e, 'searchKey')}
+          />
+        </div>
+        <div className='A5toprr'>
+          <Button onClick={resetSelectFu}>重置</Button>&emsp;
+          <Button type='primary' onClick={() => setEditInfo({ txt: '新增', _id: '' })}>
+            新增
+          </Button>
+        </div>
+      </div>
+
+      {/* 表格主体 */}
+      <MyTable
+        yHeight={650}
+        list={tableInfo.list}
+        columnsTemp={A4tableC}
+        lastBtn={tableLastBtn}
+        pageNum={fromData.pageNum}
+        pageSize={fromData.pageSize}
+        total={tableInfo.total}
+        onChange={(pageNum, pageSize) => setFromData({ ...fromData, pageNum, pageSize })}
+      />
+
+      {/* 新增 查看 编辑 */}
+      {editInfo.txt ? (
+        <A5add
+          txt={editInfo.txt}
+          _id={editInfo._id}
+          closeFu={() => setEditInfo({ txt: '', _id: '' })}
+          addTableFu={resetSelectFu}
+          editTableFu={getListFu}
+        />
+      ) : null}
     </div>
   )
 }

src/store/action/A4advanced.ts

@@ -0,0 +1,40 @@
+import http from '@/utils/http'
+import { AppDispatch } from '..'
+
+/**
+ * 先进光源-获取列表
+ */
+
+export const A4_APIgetList = (data: any): any => {
+  return async (dispatch: AppDispatch) => {
+    const res = await http.post('issue/getAdvancedList', data)
+    if (res.code === 0) {
+      const obj = {
+        list: res.data.list,
+        total: res.data.total
+      }
+      dispatch({ type: 'A4/getList', payload: obj })
+    }
+  }
+}
+
+/**
+ * 先进光源-新增/编辑数据
+ */
+export const A4_APIsave = (data: any) => {
+  return http.post('issue/saveAdvanced', data)
+}
+
+/**
+ * 先进光源-删除数据
+ */
+export const A4_APIdel = (_id: string) => {
+  return http.get(`issue/delAdvanced/${_id}`)
+}
+
+/**
+ * 先进光源-通过id获取详情
+ */
+export const A4_APIgetInfo = (_id: string) => {
+  return http.get(`issue/getAdvancedInfo/${_id}`)
+}

src/store/action/A5share.ts

@@ -0,0 +1,40 @@
+import http from '@/utils/http'
+import { AppDispatch } from '..'
+
+/**
+ * 素材共享-获取列表
+ */
+
+export const A5_APIgetList = (data: any): any => {
+  return async (dispatch: AppDispatch) => {
+    const res = await http.post('issue/getShareList', data)
+    if (res.code === 0) {
+      const obj = {
+        list: res.data.list,
+        total: res.data.total
+      }
+      dispatch({ type: 'A5/getList', payload: obj })
+    }
+  }
+}
+
+/**
+ * 素材共享-新增/编辑数据
+ */
+export const A5_APIsave = (data: any) => {
+  return http.post('issue/saveShare', data)
+}
+
+/**
+ * 素材共享-删除数据
+ */
+export const A5_APIdel = (_id: string) => {
+  return http.get(`issue/delShare/${_id}`)
+}
+
+/**
+ * 素材共享-通过id获取详情
+ */
+export const A5_APIgetInfo = (_id: string) => {
+  return http.get(`issue/getShareInfo/${_id}`)
+}

src/store/reducer/A4advanced.ts

@@ -0,0 +1,28 @@
+import { A4listType } from '@/pages/A4advanced/data'
+
+// 初始化状态
+const initState = {
+  // 列表数据
+  tableInfo: {
+    list: [] as A4listType[],
+    total: 0
+  }
+}
+
+// 定义 action 类型
+type Props = {
+  type: 'A4/getList'
+  payload: { list: A4listType[]; total: number }
+}
+
+// reducer
+export default function userReducer(state = initState, action: Props) {
+  switch (action.type) {
+    // 获取列表数据
+    case 'A4/getList':
+      return { ...state, tableInfo: action.payload }
+
+    default:
+      return state
+  }
+}

src/store/reducer/A5share.ts

@@ -0,0 +1,28 @@
+import { A5listType } from '@/pages/A5share/data'
+
+// 初始化状态
+const initState = {
+  // 列表数据
+  tableInfo: {
+    list: [] as A5listType[],
+    total: 0
+  }
+}
+
+// 定义 action 类型
+type Props = {
+  type: 'A5/getList'
+  payload: { list: A5listType[]; total: number }
+}
+
+// reducer
+export default function userReducer(state = initState, action: Props) {
+  switch (action.type) {
+    // 获取列表数据
+    case 'A5/getList':
+      return { ...state, tableInfo: action.payload }
+
+    default:
+      return state
+  }
+}

src/store/reducer/index.ts

@@ -5,6 +5,8 @@ import { combineReducers } from 'redux'
 import A0Layout from './layout'
 import A2video from './A2video'
 import A3goods from './A3goods'
+import A4advanced from './A4advanced'
+import A5share from './A5share'
 import Z1user from './Z1user'
 import Z2log from './Z2log'
 
@@ -13,6 +15,8 @@ const rootReducer = combineReducers({
   A0Layout,
   A2video,
   A3goods,
+  A4advanced,
+  A5share,
   Z1user,
   Z2log
 })

src/utils/tableData.ts

@@ -24,6 +24,14 @@ export const A2tableFuC = (val: string) => {
   ]
 }
 
+export const A4tableC = [
+  ['txt', `标题`, 'name'],
+  ['img', '封面', 'coverSmall'],
+  ['txt', `类别`, 'type'],
+  ['txt', '发布日期', 'releaseDate'],
+  ['txt', '排序值', 'sort']
+]
+
 export const Z1tableC = [
   ['txt', '用户名', 'userName'],
   ['txtChange', '角色', 'isAdmin', { 0: '普通成员', 1: '管理员' }],