upp

src/pages/A2classify/A2add.tsx

@@ -1,7 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import styles from './index.module.scss'
 import { Button, Cascader, Form, FormInstance, Input, InputNumber, Modal } from 'antd'
-import { TopLeftArrType } from '.'
 import MyPopconfirm from '@/components/MyPopconfirm'
 import { useSelector } from 'react-redux'
 import { RootState } from '@/store'
@@ -16,22 +15,21 @@ export type A2AddInfoType = {
 }
 
 type Props = {
-  topType: TopLeftArrType
   addInfo: A2AddInfoType
   addFu: () => void
   closeFu: () => void
 }
 
-function A2add({ topType, addInfo, addFu, closeFu }: Props) {
+function A2add({ addInfo, addFu, closeFu }: Props) {
   const treeData = useSelector((state: RootState) => state.A2classify.treeData)
 
   // 级联选择器改变的时候 筛选当前级联的 信息出来
   const [acCardInfo, setAcCardInfo] = useState({} as A2TreeType)
   const [parentIdArr, setParentIdArr] = useState<number[] | null>(null)
 
-  useEffect(() => {
-    console.log(acCardInfo, parentIdArr)
-  }, [acCardInfo, parentIdArr])
+  // useEffect(() => {
+  //   console.log(acCardInfo, parentIdArr)
+  // }, [acCardInfo, parentIdArr])
 
   useEffect(() => {
     setAcCardInfo(addInfo.acInfo)
@@ -98,7 +96,7 @@ function A2add({ topType, addInfo, addFu, closeFu }: Props) {
         level,
         parentId
       }
-      console.log(123, obj)
+      // console.log(123, obj)
       // if (1 + 1 === 2) {
       //   return
       // }
@@ -117,7 +115,7 @@ function A2add({ topType, addInfo, addFu, closeFu }: Props) {
     <Modal
       wrapClassName={styles.A2add}
       open={true}
-      title={`${addInfo.txt} - ${topType}`}
+      title={`${addInfo.txt} - 中图法分类`}
       footer={
         [] // 设置footer为空，去掉 取消 确定默认按钮
       }
@@ -132,8 +130,8 @@ function A2add({ topType, addInfo, addFu, closeFu }: Props) {
           onFinishFailed={onFinishFailed}
           autoComplete='off'
         >
-          <div className='fromRow'>
-            <div className='fromRowll'>父级分类：</div>
+          <div className='fromRow' hidden={addInfo.txt === '编辑'}>
+            <div className='fromRowll'>{addInfo.txt === '新增' ? '父级' : '当前'}分类：</div>
             <div className='fromRowrr'>
               <Cascader
                 style={{ width: 658 }}
@@ -172,12 +170,7 @@ function A2add({ topType, addInfo, addFu, closeFu }: Props) {
               name='sort'
               rules={[{ required: true, message: '请输入排序值!' }]}
             >
-              <InputNumber
-                min={1}
-                max={999}
-                precision={0}
-                placeholder='请输入1~999的数字。数字越小，排序越靠前'
-              />
+              <InputNumber min={1} max={999} precision={0} placeholder='请输入' />
             </Form.Item>
             <div className='fromRowTit'>
               请输入1~999的数字。数字越小，排序越靠前。数字相同时，更新发布的内容排在前面

src/pages/A2classify/A2add2.tsx

@@ -0,0 +1,113 @@
+import React, { useCallback, useEffect, useRef } from 'react'
+import styles from './index.module.scss'
+import { Button, Form, FormInstance, Input, InputNumber, Modal } from 'antd'
+import MyPopconfirm from '@/components/MyPopconfirm'
+import { A2_APIgetInfo2, A2_APIsave2 } from '@/store/action/A2classify'
+import { MessageFu } from '@/utils/message'
+
+type Props = {
+  tab2Id: number
+  addFu: (flag: boolean) => void
+  closeFu: () => void
+}
+
+function A2add2({ tab2Id, addFu, closeFu }: Props) {
+  // 设置表单初始数据（区分编辑和新增）
+  const FormBoxRef = useRef<FormInstance>(null)
+
+  const getInfoFu = useCallback(async (id: number) => {
+    const res = await A2_APIgetInfo2(id)
+    if (res.code === 0) {
+      FormBoxRef.current?.setFieldsValue({
+        ...res.data
+      })
+    }
+  }, [])
+  useEffect(() => {
+    if (tab2Id > 0) getInfoFu(tab2Id)
+    else {
+      FormBoxRef.current?.setFieldsValue({
+        sort: 999
+      })
+    }
+  }, [getInfoFu, tab2Id])
+
+  // 没有通过校验
+  const onFinishFailed = useCallback(() => {
+    // return MessageFu.warning("有表单不符号规则!");
+  }, [])
+
+  // 通过校验点击确定
+  const onFinish = useCallback(
+    async (values: any) => {
+      const res = await A2_APIsave2({
+        ...values,
+        id: tab2Id > 0 ? tab2Id : null
+      })
+      if (res.code === 0) {
+        MessageFu.success(tab2Id > 0 ? '编辑成功!' : '新增成功!')
+        addFu(tab2Id > 0 ? true : false)
+        closeFu()
+      }
+    },
+    [addFu, closeFu, tab2Id]
+  )
+  return (
+    <Modal
+      wrapClassName={styles.A2add}
+      open={true}
+      title={`${tab2Id > 0 ? '编辑' : '新增'} - 展示分类`}
+      footer={
+        [] // 设置footer为空，去掉 取消 确定默认按钮
+      }
+    >
+      <div className='A2aMain'>
+        <Form
+          scrollToFirstError={true}
+          ref={FormBoxRef}
+          name='basic'
+          labelCol={{ span: 3 }}
+          onFinish={onFinish}
+          onFinishFailed={onFinishFailed}
+          autoComplete='off'
+        >
+          <Form.Item
+            label='分类名称'
+            name='name'
+            rules={[{ required: true, message: '请输入分类名称!' }]}
+            getValueFromEvent={e => e.target.value.replace(/\s+/g, '')}
+          >
+            <Input maxLength={20} showCount placeholder='请输入内容' />
+          </Form.Item>
+
+          <div className='fromRow2'>
+            <Form.Item
+              label='排序值'
+              name='sort'
+              rules={[{ required: true, message: '请输入排序值!' }]}
+            >
+              <InputNumber min={1} max={999} precision={0} placeholder='请输入' />
+            </Form.Item>
+            <div className='fromRowTit'>
+              请输入1~999的数字。数字越小，排序越靠前。数字相同时，更新发布的内容排在前面
+            </div>
+          </div>
+
+          {/* 确定和取消按钮 */}
+          <br />
+          <Form.Item wrapperCol={{ offset: 9, span: 16 }}>
+            <Button type='primary' htmlType='submit'>
+              提交
+            </Button>
+            &emsp;
+            <MyPopconfirm txtK='取消' onConfirm={closeFu} />
+          </Form.Item>
+        </Form>
+      </div>
+    </Modal>
+  )
+}
+
+const MemoA2add2 = React.memo(A2add2)
+
+export default MemoA2add2

src/pages/A2classify/index.module.scss

@@ -32,7 +32,7 @@
         display: flex;
         justify-content: space-between;
         .A2m1ll {
-          width: 50%;
+          width: 40%;
           background-color: #e8e8e8;
           padding: 20px;
           overflow-y: auto;
@@ -40,9 +40,13 @@
             color: red;
             font-weight: 700;
           }
+          .ant-tree {
+            min-height: 100%;
+            padding: 10px;
+          }
         }
         .A2m1rr {
-          width: calc(50% - 24px);
+          width: calc(60% - 24px);
           border: 1px solid #ccc;
           padding: 20px;
           .A2mr1 {

src/pages/A2classify/index.tsx

@@ -4,11 +4,14 @@ import { Button, Input, Tree, TreeDataNode } from 'antd'
 import { treeResIdFu } from './data'
 import { useDispatch, useSelector } from 'react-redux'
 import { RootState } from '@/store'
-import { A2_APIdel1, A2_APIgetList1 } from '@/store/action/A2classify'
+import { A2_APIdel1, A2_APIdel2, A2_APIgetList1, A2_APIgetList2 } from '@/store/action/A2classify'
 import MyPopconfirm from '@/components/MyPopconfirm'
 import { MessageFu } from '@/utils/message'
 import A2add, { A2AddInfoType } from './A2add'
-import { A2TreeType } from '@/types'
+import { A2tableType, A2TreeType } from '@/types'
+import MyTable from '@/components/MyTable'
+import { A2tableC } from '@/utils/tableData'
+import A2add2 from './A2add2'
 
 export type TopLeftArrType = '中图法分类' | '展示分类'
 
@@ -24,14 +27,17 @@ function A2classify() {
     dispatch(A2_APIgetList1())
   }, [dispatch])
 
+  const getList2 = useCallback(
+    async (val: string) => {
+      dispatch(A2_APIgetList2({ pageNum: 1, pageSize: 9999, searchKey: val }))
+    },
+    [dispatch]
+  )
+
   useEffect(() => {
     getList1()
   }, [getList1])
 
-  const getList2 = useCallback((val: string) => {
-    console.log('获取展示', val)
-  }, [])
-
   // 点击重置
   const resetSelectFu = useCallback(
     (flag?: boolean) => {
@@ -155,6 +161,38 @@ function A2classify() {
     [rightData]
   )
 
+  // -----------------展示分类
+  const tableInfo = useSelector((state: RootState) => state.A2classify.tableInfo)
+
+  const delTableFu = useCallback(
+    async (id: number) => {
+      const res = await A2_APIdel2(id)
+      if (res.code === 0) {
+        MessageFu.success('删除成功!')
+        getList2(value)
+      }
+    },
+    [getList2, value]
+  )
+  const tableLastBtn = useMemo(() => {
+    return [
+      {
+        title: '操作',
+        render: (item: A2tableType) => (
+          <>
+            <Button size='small' type='text' onClick={() => setTab2Id(item.id)}>
+              编辑
+            </Button>
+            <MyPopconfirm txtK='删除' onConfirm={() => delTableFu(item.id)} />
+          </>
+        )
+      }
+    ]
+  }, [delTableFu])
+
+  // tab新增/编辑
+  const [tab2Id, setTab2Id] = useState(0)
+
   return (
     <div className={styles.A2classify}>
       <div className='pageTitle'>图书分类</div>
@@ -182,7 +220,11 @@ function A2classify() {
           <Button onClick={() => resetSelectFu()}>重置</Button>&emsp;
           <Button
             type='primary'
-            onClick={() => setAddInfo({ id: -1, txt: '新增', acInfo: rightData })}
+            onClick={() =>
+              topType === '展示分类'
+                ? setTab2Id(-1)
+                : setAddInfo({ id: -1, txt: '新增', acInfo: rightData })
+            }
           >
             新增
           </Button>
@@ -259,19 +301,33 @@ function A2classify() {
           </div>
         </div>
         <div className='A2m2' hidden={topType !== '展示分类'}>
-          222
+          <MyTable
+            yHeight={678}
+            list={tableInfo.list}
+            columnsTemp={A2tableC}
+            lastBtn={tableLastBtn}
+            pagingInfo={false}
+          />
         </div>
       </div>
 
-      {/* 新增/编辑页面 */}
+      {/* 新增/编辑页面 中图法分类 */}
       {addInfo.id ? (
         <A2add
-          topType={topType}
           addInfo={addInfo}
           addFu={() => resetSelectFu(true)}
           closeFu={() => setAddInfo({} as A2AddInfoType)}
         />
       ) : null}
+
+      {/* 新增/编辑 展示分类 */}
+      {tab2Id ? (
+        <A2add2
+          tab2Id={tab2Id}
+          addFu={flag => (flag ? getList2(value) : resetSelectFu())}
+          closeFu={() => setTab2Id(0)}
+        />
+      ) : null}
     </div>
   )
 }

src/store/action/A2classify.ts

@@ -34,3 +34,43 @@ export const A2_APIgetInfo1 = (id: number) => {
 export const A2_APIsave1 = (data: any) => {
   return http.post('cms/storage/save', data)
 }
+
+// -------------------展示分类--------------------
+
+/**
+ *展示分类-列表
+ */
+
+export const A2_APIgetList2 = (data: any): any => {
+  return async (dispatch: AppDispatch) => {
+    const res = await http.post('cms/exhibitType/getList', data)
+    if (res.code === 0) {
+      const obj = {
+        list: res.data,
+        total: 50
+      }
+      dispatch({ type: 'A2/getList', payload: obj })
+    }
+  }
+}
+
+/**
+ * 展示分类-删除
+ */
+export const A2_APIdel2 = (id: number) => {
+  return http.get(`cms/exhibitType/remove/${id}`)
+}
+
+/**
+ * 展示分类-获取详情
+ */
+export const A2_APIgetInfo2 = (id: number) => {
+  return http.get(`cms/exhibitType/detail/${id}`)
+}
+
+/**
+ * 展示分类-新增、编辑
+ */
+export const A2_APIsave2 = (data: any) => {
+  return http.post('cms/exhibitType/save', data)
+}

src/store/reducer/A2classify.ts

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

src/types/api/A2classify.d.ts

@@ -12,3 +12,13 @@ export type A2TreeType = {
   sort: number
   creatorName: string
 }
+
+export type A2tableType = {
+  createTime: string
+  creatorId: number
+  creatorName: string
+  id: number
+  name: string
+  sort: number
+  updateTime: string
+}

src/utils/tableData.ts

@@ -14,6 +14,12 @@
 //     ["text", "创建日期",'description', 50,A],
 //   ];
 
+export const A2tableC = [
+  ['txt', '分类名称', 'name'],
+  ['txt', '排序值', 'sort'],
+  ['txt', '编辑人', 'creatorName'],
+  ['txt', '编辑时间', 'updateTime']
+]
 
 export const Z1tableC = [
   ['txt', '用户名', 'userName'],