名人评价

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

@@ -1,19 +1,33 @@
-import React, { useCallback, useEffect, useRef } from 'react'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
 import styles from './index.module.scss'
 import { Button, Form, FormInstance, Input, Modal, Select } from 'antd'
 import { A3GlistType, A3tableType } from '../../data'
 import MyPopconfirm from '@/components/MyPopconfirm'
-import { A3_APIG_save } from '@/store/action/A3relation'
+import { A3_APIG_getUserList, A3_APIG_save } from '@/store/action/A3relation'
 import { MessageFu } from '@/utils/message'
 
 type Props = {
   info: A3GlistType
-  waiList: A3tableType[]
   closeFu: () => void
   upTableFu: () => void
 }
 
-function A3gAdd({ info, waiList, closeFu, upTableFu }: Props) {
+function A3gAdd({ info, closeFu, upTableFu }: Props) {
+  // 拿到所有外层人物的列表
+  const [waiList, setWaiList] = useState<A3tableType[]>([])
+
+  const getListFu = useCallback(async () => {
+    // 拿到所有外层人物的列表
+    const res2 = await A3_APIG_getUserList()
+    if (res2.code === 0) {
+      setWaiList(res2.data || [])
+    }
+  }, [])
+
+  useEffect(() => {
+    getListFu()
+  }, [getListFu])
+
   // 表单的ref
   const FormBoxRef = useRef<FormInstance>(null)
 

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

@@ -1,8 +1,8 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import styles from './index.module.scss'
 import { Button } from 'antd'
-import { A3_APIG_del, A3_APIG_getList, A3_APIgetList } from '@/store/action/A3relation'
-import { A3GlistType, A3tableType } from '../data'
+import { A3_APIG_del, A3_APIG_getList } from '@/store/action/A3relation'
+import { A3GlistType } from '../data'
 import MyTable from '@/components/MyTable'
 import MyPopconfirm from '@/components/MyPopconfirm'
 import { MessageFu } from '@/utils/message'
@@ -14,23 +14,13 @@ type Props = {
 }
 
 function A3group({ closeFu, upTableFu }: Props) {
-  // 拿到所有外层人物的列表
-  const [waiList, setWaiList] = useState<A3tableType[]>([])
-
   const [list, setList] = useState<A3GlistType[]>([])
 
-  const getListFu = useCallback(async (flag?: boolean) => {
+  const getListFu = useCallback(async () => {
     const res = await A3_APIG_getList()
     if (res.code === 0) {
       setList(res.data || [])
     }
-    if (!flag) {
-      // 拿到所有外层人物的列表
-      const res2 = await A3_APIgetList({ pageNum: 1, pageSize: 99999 }, true)
-      if (res2.code === 0) {
-        setWaiList(res2.data.records || [])
-      }
-    }
   }, [])
 
   useEffect(() => {
@@ -42,6 +32,8 @@ function A3group({ closeFu, upTableFu }: Props) {
       const res = await A3_APIG_del(id)
       if (res.code === 0) {
         MessageFu.success('删除成功!')
+        waiUpFlag.current = true
+
         getListFu()
       }
     },
@@ -106,11 +98,10 @@ function A3group({ closeFu, upTableFu }: Props) {
       {addInfo.id ? (
         <A3gAdd
           info={addInfo}
-          waiList={waiList}
           closeFu={() => setAddInfo({} as A3GlistType)}
           upTableFu={() => {
             waiUpFlag.current = true
-            getListFu(true)
+            getListFu()
           }}
         />
       ) : null}

后台管理/src/pages/A4evaluate/A4add/index.module.scss

@@ -0,0 +1,48 @@
+.A4add {
+  :global {
+    .ant-modal-close {
+      display: none;
+    }
+    .ant-modal {
+      width: 800px !important;
+    }
+    .A4aMain {
+      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);
+        }
+      }
+      .A4fromRow {
+        position: relative;
+
+        .A4_6Frow {
+          position: absolute;
+          left: 165px;
+          top: 5px;
+          color: #999;
+          font-size: 12px;
+        }
+      }
+      .A4aBtn {
+        margin-top: 40px;
+        padding-left: 66px;
+      }
+    }
+  }
+}

后台管理/src/pages/A4evaluate/A4add/index.tsx

@@ -0,0 +1,129 @@
+import React, { useCallback, useEffect, useRef } from 'react'
+import styles from './index.module.scss'
+import { A4tableType } from '../data'
+import { Button, Form, FormInstance, Input, InputNumber, Modal } from 'antd'
+import { A4_APIsave } from '@/store/action/A4evaluate'
+import { MessageFu } from '@/utils/message'
+import MyPopconfirm from '@/components/MyPopconfirm'
+import TextArea from 'antd/es/input/TextArea'
+
+type Props = {
+  info: A4tableType
+  closeFu: () => void
+  addTableFu: () => void
+  upTableFu: () => void
+}
+
+function A4add({ info, closeFu, addTableFu, upTableFu }: Props) {
+  // 表单的ref
+  const FormBoxRef = useRef<FormInstance>(null)
+
+  // 编辑进来获取详情
+  const getInfoFu = useCallback(
+    (id: number) => {
+      FormBoxRef.current?.setFieldsValue(info)
+    },
+    [info]
+  )
+
+  useEffect(() => {
+    if (info.id > 0) getInfoFu(info.id)
+    else FormBoxRef.current?.setFieldsValue({ sort: 999 })
+  }, [getInfoFu, info.id])
+
+  // 没有通过校验
+  const onFinishFailed = useCallback(() => {}, [])
+
+  //  通过校验点击确定
+  const onFinish = useCallback(
+    async (values: any) => {
+      const obj = {
+        ...values,
+        id: info.id > 0 ? info.id : null
+      }
+
+      // if (1 + 1 === 2) {
+      //   console.log('------222', obj)
+      //   return
+      // }
+
+      const res = await A4_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.A4add}
+      open={true}
+      title={info.id > 0 ? '编辑评价' : '新增评价'}
+      footer={
+        [] // 设置footer为空，去掉 取消 确定默认按钮
+      }
+    >
+      <div className='A4aMain'>
+        <Form
+          ref={FormBoxRef}
+          name='basic'
+          labelCol={{ span: 2 }}
+          onFinish={onFinish}
+          onFinishFailed={onFinishFailed}
+          autoComplete='off'
+          scrollToFirstError
+        >
+          <Form.Item
+            label='姓名'
+            name='name'
+            rules={[{ required: true, message: '请输入姓名' }]}
+            // getValueFromEvent={(e) => e.target.value.replace(/\s+/g, "")}
+            getValueFromEvent={e => e.target.value.trim()}
+          >
+            <Input maxLength={10} showCount placeholder='请输入内容' />
+          </Form.Item>
+
+          <Form.Item
+            label='留言'
+            name='intro'
+            getValueFromEvent={e => e.target.value.trim()}
+            rules={[{ required: true, message: '请输入留言' }]}
+          >
+            <TextArea maxLength={200} showCount placeholder='请输入内容' />
+          </Form.Item>
+
+          <div className='A4fromRow'>
+            <Form.Item
+              label='排序值'
+              name='sort'
+              rules={[{ required: true, message: '请输入排序值' }]}
+            >
+              <InputNumber min={1} max={999} precision={0} placeholder='请输入' />
+            </Form.Item>
+            <div className='A4_6Frow'>
+              请输入1~999的数字。数字越小，排序越靠前。数字相同时，更新发布的内容排在前面
+            </div>
+          </div>
+
+          {/* 确定和取消按钮 */}
+          <Form.Item className='A4aBtn'>
+            <Button type='primary' htmlType='submit'>
+              提交
+            </Button>
+            &emsp;
+            <MyPopconfirm txtK='取消' onConfirm={closeFu} />
+          </Form.Item>
+        </Form>
+      </div>
+    </Modal>
+  )
+}
+
+const MemoA4add = React.memo(A4add)
+
+export default MemoA4add

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

@@ -0,0 +1 @@
+export type A4tableType = any

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

@@ -1,4 +1,22 @@
 .A4evaluate {
   :global {
+    .A4top {
+      padding: 15px 24px;
+      border-radius: 10px;
+      background-color: #fff;
+      display: flex;
+      justify-content: space-between;
+    }
+
+    .A4tableBox {
+      border-radius: 10px;
+      overflow: hidden;
+      margin-top: 15px;
+      height: calc(100% - 77px);
+      background-color: #fff;
+      .ant-table-tbody .ant-table-cell {
+        padding: 8px !important;
+      }
+    }
   }
 }

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

@@ -1,9 +1,125 @@
-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 { RootState } from '@/store'
+import { A4_APIdel, A4_APIgetList } from '@/store/action/A4evaluate'
+import { MessageFu } from '@/utils/message'
+import { A4tableType } from './data'
+import { Button } from 'antd'
+import MyPopconfirm from '@/components/MyPopconfirm'
+import MyTable from '@/components/MyTable'
+import A4add from './A4add'
+
+const baseFromData = {
+  pageNum: 1,
+  pageSize: 10
+}
+
 function A4evaluate() {
+  const dispatch = useDispatch()
+
+  const [fromData, setFromData] = useState(baseFromData)
+
+  const getListFu = useCallback(() => {
+    dispatch(A4_APIgetList(fromData))
+  }, [dispatch, fromData])
+
+  useEffect(() => {
+    getListFu()
+  }, [getListFu])
+
+  const tableInfo = useSelector((state: RootState) => state.A4evaluate.tableInfo)
+
+  const delTableFu = useCallback(
+    async (id: number) => {
+      const res = await A4_APIdel(id)
+      if (res.code === 0) {
+        MessageFu.success('删除成功!')
+        getListFu()
+      }
+    },
+    [getListFu]
+  )
+
+  const tableLastBtn = useMemo(() => {
+    return [
+      {
+        title: '留言',
+        width: 800,
+        render: (item: A4tableType) => {
+          const txt = item.intro
+          return txt ? (
+            txt.length > 200 ? (
+              <span className='A1Tit' title={txt}>
+                {txt.substring(0, 200)}...
+              </span>
+            ) : (
+              txt
+            )
+          ) : (
+            '（空）'
+          )
+        }
+      },
+      {
+        title: '排序',
+        render: (item: A4tableType) => item.sort || '（空）'
+      },
+      {
+        title: '操作',
+        render: (item: A4tableType) => (
+          <>
+            <Button size='small' type='text' onClick={() => setAddInfo(item)}>
+              编辑
+            </Button>
+            <MyPopconfirm txtK='删除' onConfirm={() => delTableFu(item.id)} />
+          </>
+        )
+      }
+    ]
+  }, [delTableFu])
+
+  // 新增和编辑
+  const [addInfo, setAddInfo] = useState({} as A4tableType)
+
   return (
     <div className={styles.A4evaluate}>
       <div className='pageTitle'>名人评价</div>
+
+      {/* 顶部筛选 */}
+      <div className='A4top'>
+        <div></div>
+
+        <div>
+          <Button type='primary' onClick={() => setAddInfo({ id: -1 } as A4tableType)}>
+            新增评价
+          </Button>
+        </div>
+      </div>
+
+      {/* 表格主体 */}
+      <div className='A4tableBox'>
+        <MyTable
+          yHeight={625}
+          list={tableInfo.list}
+          columnsTemp={[['txt', '姓名', 'name']]}
+          lastBtn={tableLastBtn}
+          pageNum={fromData.pageNum}
+          pageSize={fromData.pageSize}
+          total={tableInfo.total}
+          onChange={(pageNum, pageSize) => setFromData({ ...fromData, pageNum, pageSize })}
+        />
+      </div>
+
+      {/* 新增和编辑-评价 */}
+      {addInfo.id ? (
+        <A4add
+          info={addInfo}
+          closeFu={() => setAddInfo({} as A4tableType)}
+          addTableFu={() => setFromData({ ...baseFromData })}
+          upTableFu={getListFu}
+        />
+      ) : null}
     </div>
   )
 }

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

@@ -55,3 +55,10 @@ export const A3_APIG_del = (id: number) => {
 export const A3_APIG_save = (data: any) => {
   return http.post('cms/relation/save', data)
 }
+
+/**
+ * 人际关系-关系组-获取关系组人员列表
+ */
+export const A3_APIG_getUserList = () => {
+  return http.get('cms/relation/getPerson')
+}

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

@@ -0,0 +1,33 @@
+import http from '@/utils/http'
+import { AppDispatch } from '..'
+
+/**
+ *名人评价-列表
+ */
+
+export const A4_APIgetList = (data: any): any => {
+  return async (dispatch: AppDispatch) => {
+    const res = await http.post('cms/member/pageList', data)
+    if (res.code === 0) {
+      const obj = {
+        list: res.data.records,
+        total: res.data.total
+      }
+      dispatch({ type: 'A4/getList', payload: obj })
+    }
+  }
+}
+
+/**
+ * 名人评价-删除
+ */
+export const A4_APIdel = (id: number) => {
+  return http.get(`cms/member/remove/${id}`)
+}
+
+/**
+ * 名人评价-新增、编辑
+ */
+export const A4_APIsave = (data: any) => {
+  return http.post('cms/member/save', data)
+}

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

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

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

@@ -6,6 +6,7 @@ import A0Layout from './layout'
 import A1works from './A1works'
 import A2message from './A2message'
 import A3relation from './A3relation'
+import A4evaluate from './A4evaluate'
 
 import Z1user from './Z1user'
 import Z2log from './Z2log'
@@ -16,6 +17,7 @@ const rootReducer = combineReducers({
   A1works,
   A2message,
   A3relation,
+  A4evaluate,
   Z1user,
   Z2log
 })