初步完工

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

@@ -28,6 +28,9 @@
       .ant-table-cell {
         padding: 8px !important;
       }
+      .A2Tit {
+        cursor: pointer;
+      }
     }
   }
 }

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

@@ -52,7 +52,7 @@ function A2message() {
           const txt = item.content
           return txt ? (
             txt.length > 100 ? (
-              <span className='A1Tit' title={txt}>
+              <span className='A2Tit' title={txt}>
                 {txt.substring(0, 100)}...
               </span>
             ) : (

后台管理/src/pages/A3relation/A3group/A3gAdd/index.tsx

@@ -16,6 +16,8 @@ function A3gAdd({ info, closeFu, upTableFu }: Props) {
   // 拿到所有外层人物的列表
   const [waiList, setWaiList] = useState<A3tableType[]>([])
 
+  const [qianList, setQianList] = useState<A3tableType[]>([])
+
   const getListFu = useCallback(async () => {
     // 拿到所有外层人物的列表
     const res2 = await A3_APIG_getUserList()
@@ -42,6 +44,11 @@ function A3gAdd({ info, closeFu, upTableFu }: Props) {
       if (info.personIds) {
         personIdsArr = info.personIds.split(',').map(v => Number(v))
         personIdsOld.current = personIdsArr
+
+        // 编辑的时候把已经选择的 添加到数组前面
+        const txtArr: string[] = info.personsName || []
+
+        setQianList(personIdsArr.map((v, i) => ({ id: v, name: txtArr[i] } as A3tableType)))
       }
 
       FormBoxRef.current?.setFieldsValue({ ...info, personIdsArr })
@@ -76,6 +83,11 @@ function A3gAdd({ info, closeFu, upTableFu }: Props) {
         }
       }
 
+      // if (1 + 1 === 2) {
+      //   console.log(123, obj)
+      //   return
+      // }
+
       const res = await A3_APIG_save(obj)
       if (res.code === 0) {
         MessageFu.success(info.id > 0 ? '编辑成功' : '新增成功')
@@ -128,7 +140,7 @@ function A3gAdd({ info, closeFu, upTableFu }: Props) {
               placeholder='请选择'
               // value={personIds||[]}
               // onChange={value => setPersonIds(value)}
-              options={waiList}
+              options={[...qianList, ...waiList]}
               fieldNames={{ value: 'id', label: 'name' }}
             />
           </Form.Item>

后台管理/src/pages/A5photoWall/A5add/index.module.scss

@@ -0,0 +1,48 @@
+.A5add {
+  :global {
+    .ant-modal-close {
+      display: none;
+    }
+    .ant-modal {
+      width: 800px !important;
+    }
+    .A5aMain {
+      border-top: 1px solid #ccc;
+      padding-top: 20px;
+
+      .formRow {
+        display: flex;
+
+        .formLeft {
+          position: relative;
+          top: 3px;
+          width: 63px;
+          text-align: right;
+
+          & > span {
+            color: #ff4d4f;
+          }
+        }
+
+        .formRight {
+          width: calc(100% - 63px);
+        }
+      }
+      .A5fromRow {
+        position: relative;
+
+        .A5_6Frow {
+          position: absolute;
+          left: 165px;
+          top: 5px;
+          color: #999;
+          font-size: 12px;
+        }
+      }
+      .A5aBtn {
+        margin-top: 40px;
+        padding-left: 66px;
+      }
+    }
+  }
+}

后台管理/src/pages/A5photoWall/A5add/index.tsx

@@ -0,0 +1,160 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+import styles from './index.module.scss'
+import { A5tableType } from '../data'
+import { Button, Form, FormInstance, InputNumber, Modal } from 'antd'
+import { MessageFu } from '@/utils/message'
+import { A5_APIsave } from '@/store/action/A5photoWall'
+import TextArea from 'antd/es/input/TextArea'
+import ZupOne from '@/components/ZupOne'
+import MyPopconfirm from '@/components/MyPopconfirm'
+
+type Props = {
+  info: A5tableType
+  closeFu: () => void
+  addTableFu: () => void
+  upTableFu: () => void
+}
+
+function A5add({ info, closeFu, addTableFu, upTableFu }: Props) {
+  // 表单的ref
+  const FormBoxRef = useRef<FormInstance>(null)
+
+  // 封面图的ref
+  const ZupThumbRef = useRef<any>(null)
+
+  // 编辑进来获取详情
+  const getInfoFu = useCallback(
+    (id: number) => {
+      FormBoxRef.current?.setFieldsValue(info)
+      // 设置封面图
+      ZupThumbRef.current?.setFileComFileFu({
+        fileName: '',
+        filePath: info.thumbPc,
+        thumb: info.thumb
+      })
+    },
+    [info]
+  )
+
+  useEffect(() => {
+    if (info.id > 0) getInfoFu(info.id)
+    else FormBoxRef.current?.setFieldsValue({ sort: 999 })
+  }, [getInfoFu, info.id])
+
+  // 附件 是否 已经点击过确定
+  const [fileCheck, setFileCheck] = useState(false)
+
+  // 没有通过校验
+  const onFinishFailed = useCallback(() => {
+    setFileCheck(true)
+  }, [])
+
+  //  通过校验点击确定
+  const onFinish = useCallback(
+    async (values: any) => {
+      setFileCheck(true)
+
+      const coverUrl1 = ZupThumbRef.current?.fileComFileResFu()
+      // 没有传 封面图
+      if (!coverUrl1.filePath) return MessageFu.warning('请上传图片')
+
+      const obj = {
+        ...values,
+        id: info.id > 0 ? info.id : null,
+        thumb: coverUrl1.thumb || '',
+        thumbPc: coverUrl1.filePath || ''
+      }
+
+      // if (1 + 1 === 2) {
+      //   console.log('------222', obj)
+      //   return
+      // }
+
+      const res = await A5_APIsave(obj)
+
+      if (res.code === 0) {
+        MessageFu.success(`${info.id > 0 ? '编辑' : '新增'}成功`)
+        if (info.id > 0) upTableFu()
+        else addTableFu()
+        closeFu()
+      }
+    },
+    [addTableFu, closeFu, info.id, upTableFu]
+  )
+
+  return (
+    <Modal
+      wrapClassName={styles.A5add}
+      open={true}
+      title={info.id > 0 ? '编辑图片' : '新增图片'}
+      footer={
+        [] // 设置footer为空，去掉 取消 确定默认按钮
+      }
+    >
+      <div className='A5aMain'>
+        <Form
+          ref={FormBoxRef}
+          name='basic'
+          labelCol={{ span: 2 }}
+          onFinish={onFinish}
+          onFinishFailed={onFinishFailed}
+          autoComplete='off'
+          scrollToFirstError
+        >
+          {/* 图片 */}
+          <div className='formRow'>
+            <div className='formLeft'>
+              <span>* </span>
+              图片：
+            </div>
+            <div className='formRight'>
+              <ZupOne
+                ref={ZupThumbRef}
+                isLook={false}
+                fileCheck={fileCheck}
+                size={5}
+                dirCode='A5photoWall'
+                myUrl='cms/img/upload'
+                format={['image/jpeg', 'image/png']}
+                formatTxt='png、jpg和jpeg'
+                checkTxt='请上传图片'
+                upTxt='最多1张'
+                myType='thumb'
+              />
+            </div>
+          </div>
+
+          <Form.Item label='介绍' name='intro'>
+            <TextArea maxLength={200} showCount placeholder='请输入内容' />
+          </Form.Item>
+
+          <div className='A5fromRow'>
+            <Form.Item
+              label='排序值'
+              name='sort'
+              rules={[{ required: true, message: '请输入排序值' }]}
+            >
+              <InputNumber min={1} max={999} precision={0} placeholder='请输入' />
+            </Form.Item>
+            <div className='A5_6Frow'>
+              请输入1~999的数字。数字越小，排序越靠前。数字相同时，更新发布的内容排在前面
+            </div>
+          </div>
+
+          {/* 确定和取消按钮 */}
+          <Form.Item className='A5aBtn'>
+            <Button type='primary' htmlType='submit'>
+              提交
+            </Button>
+            &emsp;
+            <MyPopconfirm txtK='取消' onConfirm={closeFu} />
+          </Form.Item>
+        </Form>
+      </div>
+    </Modal>
+  )
+}
+
+const MemoA5add = React.memo(A5add)
+
+export default MemoA5add

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

@@ -0,0 +1,11 @@
+export type A5tableType = {
+  createTime: string
+  creatorId: number
+  creatorName: string
+  id: number
+  intro: string
+  sort: number
+  thumb: string
+  thumbPc: string
+  updateTime: string
+}

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

@@ -1,4 +1,35 @@
 .A5photoWall {
   :global {
+    .A5top {
+      padding: 15px 24px;
+      border-radius: 10px;
+      background-color: #fff;
+      display: flex;
+      justify-content: space-between;
+    }
+
+    .A5tableBox {
+      border-radius: 10px;
+      overflow: hidden;
+      margin-top: 15px;
+      height: calc(100% - 77px);
+      background-color: #fff;
+      .ant-table-tbody .ant-table-cell {
+        padding: 8px !important;
+      }
+
+      .A5tableFen {
+        & > p {
+          margin-top: 5px;
+          text-decoration: underline;
+          color: var(--themeColor);
+          cursor: pointer;
+        }
+      }
+
+      .A5Tit {
+        cursor: pointer;
+      }
+    }
   }
 }

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

@@ -1,9 +1,124 @@
-import React from 'react'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import styles from './index.module.scss'
+import { useDispatch, useSelector } from 'react-redux'
+import { A5_APIdel, A5_APIgetList } from '@/store/action/A5photoWall'
+import { RootState } from '@/store'
+import { MessageFu } from '@/utils/message'
+import { A5tableType } from './data'
+import { Button } from 'antd'
+import MyPopconfirm from '@/components/MyPopconfirm'
+import MyTable from '@/components/MyTable'
+import A5add from './A5add'
+
+const baseFromData = {
+  pageNum: 1,
+  pageSize: 10
+}
+
 function A5photoWall() {
+  const dispatch = useDispatch()
+
+  const [fromData, setFromData] = useState(baseFromData)
+
+  const getListFu = useCallback(() => {
+    dispatch(A5_APIgetList(fromData))
+  }, [dispatch, fromData])
+
+  useEffect(() => {
+    getListFu()
+  }, [getListFu])
+
+  const tableInfo = useSelector((state: RootState) => state.A5photoWall.tableInfo)
+
+  const delTableFu = useCallback(
+    async (id: number) => {
+      const res = await A5_APIdel(id)
+      if (res.code === 0) {
+        MessageFu.success('删除成功!')
+        getListFu()
+      }
+    },
+    [getListFu]
+  )
+
+  const tableLastBtn = useMemo(() => {
+    return [
+      {
+        title: '介绍',
+        width: 1000,
+        render: (item: A5tableType) => {
+          const txt = item.intro
+          return txt ? (
+            txt.length > 100 ? (
+              <span className='A5Tit' title={txt}>
+                {txt.substring(0, 100)}...
+              </span>
+            ) : (
+              txt
+            )
+          ) : (
+            '（空）'
+          )
+        }
+      },
+      {
+        title: '排序',
+        render: (item: A5tableType) => item.sort
+      },
+      {
+        title: '操作',
+        render: (item: A5tableType) => (
+          <>
+            <Button size='small' type='text' onClick={() => setEditInfo(item)}>
+              编辑
+            </Button>
+            <MyPopconfirm txtK='删除' onConfirm={() => delTableFu(item.id)} />
+          </>
+        )
+      }
+    ]
+  }, [delTableFu])
+
+  // 新增和编辑
+  const [editInfo, setEditInfo] = useState({} as A5tableType)
+
   return (
     <div className={styles.A5photoWall}>
       <div className='pageTitle'>照片墙</div>
+
+      {/* 顶部筛选 */}
+      <div className='A5top'>
+        <div></div>
+
+        <div>
+          <Button type='primary' onClick={() => setEditInfo({ id: -1 } as A5tableType)}>
+            新增图片
+          </Button>
+        </div>
+      </div>
+
+      {/* 表格主体 */}
+      <div className='A5tableBox'>
+        <MyTable
+          yHeight={625}
+          list={tableInfo.list}
+          columnsTemp={[['img', '图片', 'thumb']]}
+          lastBtn={tableLastBtn}
+          pageNum={fromData.pageNum}
+          pageSize={fromData.pageSize}
+          total={tableInfo.total}
+          onChange={(pageNum, pageSize) => setFromData({ ...fromData, pageNum, pageSize })}
+        />
+      </div>
+      {/* 新增和编辑 */}
+      {editInfo.id ? (
+        <A5add
+          info={editInfo}
+          closeFu={() => setEditInfo({} as A5tableType)}
+          addTableFu={() => setFromData({ ...baseFromData })}
+          upTableFu={getListFu}
+        />
+      ) : null}
     </div>
   )
 }

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

@@ -0,0 +1,33 @@
+import http from '@/utils/http'
+import { AppDispatch } from '..'
+
+/**
+ *照片墙-列表
+ */
+
+export const A5_APIgetList = (data: any): any => {
+  return async (dispatch: AppDispatch) => {
+    const res = await http.post('cms/img/pageList', data)
+    if (res.code === 0) {
+      const obj = {
+        list: res.data.records,
+        total: res.data.total
+      }
+      dispatch({ type: 'A5/getList', payload: obj })
+    }
+  }
+}
+
+/**
+ * 照片墙-删除
+ */
+export const A5_APIdel = (id: number) => {
+  return http.get(`cms/img/remove/${id}`)
+}
+
+/**
+ * 照片墙-新增、编辑
+ */
+export const A5_APIsave = (data: any) => {
+  return http.post('cms/img/save', data)
+}

后台管理/src/store/reducer/A5photoWall.ts

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

后台管理/src/store/reducer/index.ts

@@ -7,6 +7,7 @@ import A1works from './A1works'
 import A2message from './A2message'
 import A3relation from './A3relation'
 import A4evaluate from './A4evaluate'
+import A5photoWall from './A5photoWall'
 
 import Z1user from './Z1user'
 import Z2log from './Z2log'
@@ -18,6 +19,7 @@ const rootReducer = combineReducers({
   A2message,
   A3relation,
   A4evaluate,
+  A5photoWall,
   Z1user,
   Z2log
 })