留言管理

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

@@ -11,6 +11,7 @@ import MyTable from '@/components/MyTable'
 import { A1tableC } from '@/utils/tableData'
 import A1add from './A1add'
 import A1score from './A1score'
+
 function A1works() {
   const dispatch = useDispatch()
 
@@ -80,6 +81,7 @@ function A1works() {
       },
       {
         title: '简介',
+        width: 300,
         render: (item: A1tableType) => {
           const txt = item.intro
           return txt ? (
@@ -165,7 +167,7 @@ function A1works() {
       {/* 表格主体 */}
       <div className='A1tableBox'>
         <MyTable
-          yHeight={625}
+          yHeight={645}
           list={tableInfo.list}
           columnsTemp={A1tableC}
           lastBtn={tableLastBtn}

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

@@ -0,0 +1,20 @@
+.A2audit {
+  :global {
+    .ant-modal-close {
+      display: none;
+    }
+    .A2aTit {
+      display: flex;
+      justify-content: space-between;
+      cursor: pointer;
+      font-size: 24px;
+    }
+    .ant-btn {
+      margin: 0 10px;
+    }
+    .A2aMain {
+      padding: 30px;
+      text-align: center;
+    }
+  }
+}

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

@@ -0,0 +1,71 @@
+import React, { useCallback, useEffect, useState } from 'react'
+import styles from './index.module.scss'
+import { Button, Modal } from 'antd'
+import { A2SelectData } from '../data'
+import { CloseOutlined } from '@ant-design/icons'
+import { MessageFu } from '@/utils/message'
+import { A2_APIaudit } from '@/store/action/A2message'
+
+type Props = {
+  sId: number
+  state: number
+  closeFu: () => void
+  succFu: () => void
+}
+
+function A2audit({ sId, state, closeFu, succFu }: Props) {
+  const [newSta, setNewSta] = useState(-1)
+
+  useEffect(() => {
+    setNewSta(state)
+  }, [state])
+
+  // 审批
+  const auditFu = useCallback(
+    async (val: number) => {
+      if (val === state)
+        return MessageFu.warning(`当前已是${A2SelectData.find(v => v.value === val)?.label}状态`)
+      else {
+        const res = await A2_APIaudit(sId, val)
+        if (res.code === 0) {
+          MessageFu.success('审批成功')
+          succFu()
+          closeFu()
+        }
+      }
+    },
+    [closeFu, sId, state, succFu]
+  )
+
+  return (
+    <Modal
+      wrapClassName={styles.A2audit}
+      open={true}
+      title={
+        <div className='A2aTit'>
+          <div></div>
+          <CloseOutlined onClick={closeFu} />
+        </div>
+      }
+      footer={
+        [] // 设置footer为空，去掉 取消 确定默认按钮
+      }
+    >
+      <div className='A2aMain'>
+        {A2SelectData.map(v => (
+          <Button
+            key={v.label}
+            onClick={() => auditFu(v.value)}
+            type={v.value === newSta ? 'primary' : 'default'}
+          >
+            {v.label}
+          </Button>
+        ))}
+      </div>
+    </Modal>
+  )
+}
+
+const MemoA2audit = React.memo(A2audit)
+
+export default MemoA2audit

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

@@ -0,0 +1,31 @@
+export type A2FromDataType = {
+  pageNum: number
+  pageSize: number
+  status: '' | 0 | 1 | 2
+}
+
+export const A2SelectData = [
+  {
+    value: 0,
+    label: '待审批'
+  },
+  {
+    value: 1,
+    label: '通过'
+  },
+  {
+    value: 2,
+    label: '不通过'
+  }
+]
+
+export type A2tableType = {
+  content: string
+  createTime: string
+  creatorId?: any
+  creatorName: string
+  id: number
+  name: string
+  status: number
+  updateTime: string
+}

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

@@ -1,4 +1,33 @@
 .A2message {
   :global {
+    .A2top {
+      padding: 15px 24px;
+      border-radius: 10px;
+      background-color: #fff;
+      display: flex;
+      justify-content: space-between;
+
+      .A2topLeft {
+        display: flex;
+
+        & > div {
+          margin-right: 24px;
+        }
+        .ant-select-selection-placeholder {
+          color: black;
+        }
+      }
+    }
+
+    .A2tableBox {
+      border-radius: 10px;
+      overflow: hidden;
+      margin-top: 15px;
+      height: calc(100% - 77px);
+      background-color: #fff;
+      .ant-table-cell {
+        padding: 8px !important;
+      }
+    }
   }
 }

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

@@ -1,9 +1,139 @@
-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 { A2FromDataType, A2SelectData, A2tableType } from './data'
+import { A2_APIdel, A2_APIgetList } from '@/store/action/A2message'
+import { RootState } from '@/store'
+import { Button, Select } from 'antd'
+import MyTable from '@/components/MyTable'
+import { A2tableC } from '@/utils/tableData'
+import A2audit from './A2audit'
+import { MessageFu } from '@/utils/message'
+import MyPopconfirm from '@/components/MyPopconfirm'
+
+const baseFromData: A2FromDataType = {
+  pageNum: 1,
+  pageSize: 10,
+  status: ''
+}
+
 function A2message() {
+  const dispatch = useDispatch()
+
+  const [fromData, setFromData] = useState(baseFromData)
+
+  const getListFu = useCallback(() => {
+    dispatch(A2_APIgetList(fromData))
+  }, [dispatch, fromData])
+
+  useEffect(() => {
+    getListFu()
+  }, [getListFu])
+
+  const tableInfo = useSelector((state: RootState) => state.A2message.tableInfo)
+
+  const delTableFu = useCallback(
+    async (id: number) => {
+      const res = await A2_APIdel(id)
+      if (res.code === 0) {
+        MessageFu.success('删除成功!')
+        getListFu()
+      }
+    },
+    [getListFu]
+  )
+
+  const tableLastBtn = useMemo(() => {
+    return [
+      {
+        title: '简介',
+        width: 700,
+        render: (item: A2tableType) => {
+          const txt = item.content
+          return txt ? (
+            txt.length > 100 ? (
+              <span className='A1Tit' title={txt}>
+                {txt.substring(0, 100)}...
+              </span>
+            ) : (
+              txt
+            )
+          ) : (
+            '（空）'
+          )
+        }
+      },
+      {
+        title: '审批状态',
+        width: 120,
+        render: (item: A2tableType) => (
+          <Button
+            size='small'
+            type='text'
+            onClick={() => setAuditSta({ sta: item.status, id: item.id })}
+          >
+            {A2SelectData.find(v => v.value === item.status)?.label}
+          </Button>
+        )
+      },
+      {
+        title: '操作',
+        width: 120,
+        render: (item: A2tableType) => (
+          <MyPopconfirm txtK='删除' onConfirm={() => delTableFu(item.id)} />
+        )
+      }
+    ]
+  }, [delTableFu])
+
+  // 审批页面
+  const [auditSta, setAuditSta] = useState({ sta: -1, id: 0 })
+
   return (
     <div className={styles.A2message}>
       <div className='pageTitle'>留言管理</div>
+
+      {/* 顶部筛选 */}
+      <div className='A2top'>
+        <div className='A2topLeft'>
+          <div>
+            审批状态：
+            <Select
+              style={{ width: 200 }}
+              placeholder='全部'
+              value={fromData.status ? fromData.status : null}
+              options={A2SelectData}
+              onChange={e => setFromData({ ...fromData, status: e, pageNum: 1 })}
+            />
+          </div>
+        </div>
+
+        <div></div>
+      </div>
+
+      {/* 表格主体 */}
+      <div className='A2tableBox'>
+        <MyTable
+          yHeight={645}
+          list={tableInfo.list}
+          columnsTemp={A2tableC}
+          lastBtn={tableLastBtn}
+          pageNum={fromData.pageNum}
+          pageSize={fromData.pageSize}
+          total={tableInfo.total}
+          onChange={(pageNum, pageSize) => setFromData({ ...fromData, pageNum, pageSize })}
+        />
+      </div>
+
+      {/* 审批页面 */}
+      {auditSta.id ? (
+        <A2audit
+          state={auditSta.sta}
+          sId={auditSta.id}
+          closeFu={() => setAuditSta({ sta: -1, id: 0 })}
+          succFu={getListFu}
+        />
+      ) : null}
     </div>
   )
 }

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

@@ -0,0 +1,33 @@
+import http from '@/utils/http'
+import { AppDispatch } from '..'
+
+/**
+ *留言管理-列表
+ */
+
+export const A2_APIgetList = (data: any): any => {
+  return async (dispatch: AppDispatch) => {
+    const res = await http.post('cms/message/pageList', data)
+    if (res.code === 0) {
+      const obj = {
+        list: res.data.records,
+        total: res.data.total
+      }
+      dispatch({ type: 'A2/getList', payload: obj })
+    }
+  }
+}
+
+/**
+ * 留言管理-审批
+ */
+export const A2_APIaudit = (id: number, status: number) => {
+  return http.get(`cms/message/audit/${id}/${status}`)
+}
+
+/**
+ * 留言管理-删除
+ */
+export const A2_APIdel = (id: number) => {
+  return http.get(`cms/message/remove/${id}`)
+}

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

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

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

@@ -4,6 +4,7 @@ import { combineReducers } from 'redux'
 // 导入 登录 模块的 reducer
 import A0Layout from './layout'
 import A1works from './A1works'
+import A2message from './A2message'
 
 import Z1user from './Z1user'
 import Z2log from './Z2log'
@@ -12,6 +13,7 @@ import Z2log from './Z2log'
 const rootReducer = combineReducers({
   A0Layout,
   A1works,
+  A2message,
   Z1user,
   Z2log
 })

后台管理/src/utils/tableData.ts

@@ -23,6 +23,12 @@ export const A1tableC = [
   // ['text', '简介', 'intro', 100]
 ]
 
+export const A2tableC = [
+  ['txt', '留言时间', 'createTime'],
+  ['txt', '昵称', 'name']
+  // ['text', '简介', 'content', 100]
+]
+
 export const Z1tableC = [
   ['txt', '用户名', 'userName'],
   ['txtChange', '角色', 'isAdmin', { 1: '管理员', 0: '普通成员' }],