upp

README.md

@@ -1,25 +1,2 @@
------定义函数的时候设置返回值为any----- 以下 问题1 可以忽略
-
-1.版本类型问题
-
-找到 import { useDispatch } from "react-redux";
-
-按住 Ctrl 点击 useDispatch 出来 useDispatch.d.ts类型声明文件
-（路径node_modules>react-redux>es>hooks>useDispatch.d.ts）
-
-找到最后面的 AnyAction，按住 Ctrl 点击 进入
-（路径node_modules>redux>index.d.ts）
-
-找到
-export interface Action<T = any> {
-  type: T
-}
-
-在type后面加一个 ?   即=>
-
-export interface Action<T = any> {
-  type?: T
-}
-
-2.使用 yarn。 npm有问题
+1.使用 yarn。 npm有问题
 

src/pages/Z0column/Z0edit.tsx

@@ -4,6 +4,8 @@ import { Button, Input, Modal } from "antd";
 import { Z0EditInfoType } from "./data";
 import MyPopconfirm from "@/components/MyPopconfirm";
 import TextArea from "antd/es/input/TextArea";
+import { MessageFu } from "@/utils/message";
+import { Z0_APIadd } from "@/store/action/Z0column";
 
 type Props = {
   editInfo: Z0EditInfoType;
@@ -22,7 +24,25 @@ function Z0edit({ editInfo, closeFu, upTableFu }: Props) {
     }
   }, [editInfo]);
 
-  const btnOkFu = useCallback(async () => {}, []);
+  const btnOkFu = useCallback(async () => {
+    if (name.length <= 0) return MessageFu.warning("请输入栏目名称!");
+
+    const flag = editInfo.id > 0;
+
+    const obj = {
+      id: flag ? editInfo.id : null,
+      name,
+      rtf,
+      type: editInfo.type,
+    };
+
+    const res = await Z0_APIadd(obj);
+    if (res.code === 0) {
+      MessageFu.success(flag ? "编辑成功!" : "新增成功!");
+      upTableFu();
+      closeFu();
+    }
+  }, [closeFu, editInfo.id, editInfo.type, name, rtf, upTableFu]);
 
   return (
     <Modal

src/pages/Z0column/data.ts

@@ -5,3 +5,22 @@ export type Z0EditInfoType = {
   type: string;
   tit:string
 };
+
+
+export const Z0tableList =[
+  {
+    id:1,
+    name:'宁博动态',
+    type:'dict-news',
+  },
+  {
+    id:2,
+    name:'宁博藏珍',
+    type:'dict-goods',
+  },
+  {
+    id:3,
+    name:'宁博活动',
+    type:'dict-activity',
+  }
+]

src/pages/Z0column/index.tsx

@@ -8,7 +8,7 @@ import { Z0tableC } from "@/utils/tableData";
 import { Button } from "antd";
 import { Z0tableType } from "@/types";
 import MyPopconfirm from "@/components/MyPopconfirm";
-import { Z0EditInfoType } from "./data";
+import { Z0EditInfoType, Z0tableList } from "./data";
 import { MessageFu } from "@/utils/message";
 import Z0edit from "./Z0edit";
 function Z0column() {
@@ -103,60 +103,48 @@ function Z0column() {
     [delTableFu, moveTableFu]
   );
 
+  // 整理表格数据
+  const tableListRes = useCallback(
+    (id: number) => {
+      const objTemp = {
+        1: dynamic,
+        2: goods,
+        3: activity,
+      };
+      return Reflect.get(objTemp, id) || ([] as Z0tableType[]);
+    },
+    [activity, dynamic, goods]
+  );
+
   return (
     <div className={styles.Z0column}>
       <div className="pageTitle">栏目管理</div>
-      <div className="Z0tit">
-        宁博动态
-        <Button
-          type="primary"
-          onClick={() =>
-            setEditInfo({ id: -1, tit: "宁博动态" } as Z0EditInfoType)
-          }
-        >
-          新增
-        </Button>
-      </div>
-      <MyTable
-        list={dynamic}
-        columnsTemp={Z0tableC}
-        lastBtn={tableLastBtn("dict-news", dynamic, "宁博动态")}
-        pagingInfo={false}
-      />
-      <div className="Z0tit">
-        宁博藏珍
-        <Button
-          type="primary"
-          onClick={() =>
-            setEditInfo({ id: -1, tit: "宁博藏珍" } as Z0EditInfoType)
-          }
-        >
-          新增
-        </Button>
-      </div>
-      <MyTable
-        list={goods}
-        columnsTemp={Z0tableC}
-        lastBtn={tableLastBtn("dict-goods", goods, "宁博藏珍")}
-        pagingInfo={false}
-      />
-      <div className="Z0tit">
-        宁博活动
-        <Button
-          type="primary"
-          onClick={() =>
-            setEditInfo({ id: -1, tit: "宁博活动" } as Z0EditInfoType)
-          }
-        >
-          新增
-        </Button>
-      </div>
-      <MyTable
-        list={activity}
-        columnsTemp={Z0tableC}
-        lastBtn={tableLastBtn("dict-activity", activity, "宁博活动")}
-        pagingInfo={false}
-      />
+
+      {Z0tableList.map((v) => (
+        <div key={v.id}>
+          <div className="Z0tit">
+            {v.name}
+            <Button
+              type="primary"
+              onClick={() =>
+                setEditInfo({
+                  id: -1,
+                  tit: v.name,
+                  type: v.type,
+                } as Z0EditInfoType)
+              }
+            >
+              新增
+            </Button>
+          </div>
+          <MyTable
+            list={tableListRes(v.id)}
+            columnsTemp={Z0tableC}
+            lastBtn={tableLastBtn(v.type, tableListRes(v.id), v.name)}
+            pagingInfo={false}
+          />
+        </div>
+      ))}
 
       {/* 新增和编辑 */}
       {editInfo.id ? (

src/pages/Z1user/UserAdd/index.tsx

@@ -82,7 +82,10 @@ function UserAdd({ id, closePage, upTableList, addTableList }: Props) {
           <Form.Item
             label="账号名"
             name="userName"
-            rules={[{ required: true, message: "请输入账号名!" }]}
+            rules={[
+              { required: true, message: "请输入账号名!" },
+              { min: 6, message: "最少6个字!" },
+            ]}
             getValueFromEvent={(e) => e.target.value.replace(/\s+/g, "")}
           >
             <Input

src/pages/Z1user/Z1auth.tsx

@@ -0,0 +1,105 @@
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import styles from "./index.module.scss";
+import { Button, Checkbox, Modal } from "antd";
+import MyPopconfirm from "@/components/MyPopconfirm";
+import { Z1_APIgetAuthByUserId, Z1_APIsetAuth } from "@/store/action/Z1user";
+import classNmaes from "classnames";
+import { MessageFu } from "@/utils/message";
+
+export type UserListType = {
+  authority: boolean;
+  id: number;
+  name: string;
+  resourceType: string;
+};
+
+type Props = {
+  authInfo: { id: number; name: string };
+  closeFu: () => void;
+};
+
+function Z1auth({ authInfo, closeFu }: Props) {
+  const getAuthByUserIdFu = useCallback(async () => {
+    const res = await Z1_APIgetAuthByUserId(authInfo.id);
+    if (res.code === 0) setList(res.data);
+  }, [authInfo.id]);
+
+  useEffect(() => {
+    getAuthByUserIdFu();
+  }, [getAuthByUserIdFu]);
+
+  const [list, setList] = useState<UserListType[]>([]);
+
+  // 多选框变化
+  const onChange = useCallback(
+    (val: boolean, id: number) => {
+      setList(
+        list.map((v) => ({
+          ...v,
+          authority: v.id === id ? val : v.authority,
+        }))
+      );
+    },
+    [list]
+  );
+
+  // 至少选中一个
+  const isOneRes = useMemo(() => {
+    return list.filter((v) => v.authority).length <= 0;
+  }, [list]);
+
+  // 点击确定
+  const btnOkFu = useCallback(async () => {
+    const obj = {
+      userId: authInfo.id,
+      resources: list.filter((c) => c.authority).map((v) => v.id),
+    };
+
+    const res = await Z1_APIsetAuth(obj);
+
+    if (res.code === 0) {
+      MessageFu.success("授权成功!");
+      closeFu();
+    }
+  }, [authInfo.id, closeFu, list]);
+
+  return (
+    <Modal
+      wrapClassName={styles.Z1auth}
+      open={true}
+      title={`${authInfo.name} - 权限管理`}
+      footer={
+        [] // 设置footer为空，去掉 取消 确定默认按钮
+      }
+    >
+      <div className="Z1aEmain">
+        {list.map((v) => (
+          <div key={v.id} className="Z1aRow">
+            <Checkbox
+              checked={v.authority}
+              onChange={(e) => onChange(e.target.checked, v.id)}
+            >
+              {v.name}
+            </Checkbox>
+          </div>
+        ))}
+
+        <div className={classNmaes("Z1aErr", isOneRes ? "Z1aErrAc" : "")}>
+          至少选中一个
+        </div>
+
+        <div className="Z1aEbtn">
+          <Button type="primary" onClick={btnOkFu} disabled={isOneRes}>
+            提交
+          </Button>
+          &emsp;
+          <MyPopconfirm txtK="取消" onConfirm={closeFu} />
+        </div>
+      </div>
+    </Modal>
+  );
+}
+
+const MemoZ1auth = React.memo(Z1auth);
+
+export default MemoZ1auth;

src/pages/Z1user/index.tsx

@@ -20,6 +20,7 @@ import UserAdd from "./UserAdd";
 import MyTable from "@/components/MyTable";
 import { Z1tableC } from "@/utils/tableData";
 import MyPopconfirm from "@/components/MyPopconfirm";
+import Z1auth from "./Z1auth";
 
 function Z1user() {
   const dispatch = useDispatch();
@@ -123,11 +124,19 @@ function Z1user() {
                   </Button>
                 }
               />
-
               <Button
                 size="small"
                 type="text"
-                onClick={() => openEditPageFu(item.id!)}
+                onClick={() =>
+                  setAuthInfo({ id: item.id, name: item.userName })
+                }
+              >
+                权限管理
+              </Button>
+              <Button
+                size="small"
+                type="text"
+                onClick={() => openEditPageFu(item.id)}
               >
                 编辑
               </Button>
@@ -139,6 +148,9 @@ function Z1user() {
     ];
   }, [delTableFu, openEditPageFu, resetPassFu]);
 
+  // 授权管理
+  const [authInfo, setAuthInfo] = useState({ id: 0, name: "" });
+
   return (
     <div className={styles.Z1user}>
       <div className="pageTitle">用户管理</div>
@@ -160,7 +172,14 @@ function Z1user() {
           <div className="selectBoxRow">
             &emsp;&emsp;<Button onClick={resetSelectFu}>重置</Button>
             &emsp;&emsp;
-            <Button type="primary" onClick={() => openEditPageFu(0)}>
+            <Button
+              type="primary"
+              onClick={() => {
+                if (tableInfo.total >= 20)
+                  return MessageFu.warning("最多20个账号!");
+                openEditPageFu(0);
+              }}
+            >
               新增
             </Button>
           </div>
@@ -191,6 +210,14 @@ function Z1user() {
           addTableList={resetSelectFu}
         />
       ) : null}
+
+      {/* 点击授权 */}
+      {authInfo.id ? (
+        <Z1auth
+          authInfo={authInfo}
+          closeFu={() => setAuthInfo({ id: 0, name: "" })}
+        />
+      ) : null}
     </div>
   );
 }

src/store/action/Z0column.ts

@@ -46,3 +46,10 @@ export const Z0_APIdel = (id: number) => {
 export const Z0_APIsort = (id1: number, id2: number) => {
   return http.get(`cms/dict/sort/${id1}/${id2}`);
 };
+
+/**
+ * 栏目 新增/编辑
+ */
+export const Z0_APIadd = (data: any) => {
+  return http.post("cms/dict/save", data);
+};

src/store/action/Z1user.ts

@@ -4,7 +4,7 @@ import { AppDispatch } from "..";
 /**
  * 获取用户管理表格列表
  */
-export const getUserListAPI = (data: UserTableAPIType):any => {
+export const getUserListAPI = (data: UserTableAPIType): any => {
   return async (dispatch: AppDispatch) => {
     const res = await http.post("sys/user/list", data);
     if (res.code === 0) {
@@ -45,3 +45,17 @@ export const userSaveAPI = (data: SaveUserType) => {
 export const getUserInfoByIdAPI = (id: number) => {
   return http.get(`sys/user/detail/${id}`);
 };
+
+/**
+ * 角色授权-获取
+ */
+export const Z1_APIgetAuthByUserId = (userId: number) => {
+  return http.get(`sys/user/perm/getUserTree/${userId}`);
+};
+
+/**
+ * 角色授权-设置
+ */
+export const Z1_APIsetAuth = (data: any) => {
+  return http.post("sys/user/perm/auth", data);
+};