|
|
@@ -0,0 +1,221 @@
|
|
|
+import { RootState } from "@/store";
|
|
|
+import { Button, Form, Input, Modal, Popconfirm, Table } from "antd";
|
|
|
+import React, {
|
|
|
+ useCallback,
|
|
|
+ useEffect,
|
|
|
+ useMemo,
|
|
|
+ useRef,
|
|
|
+ useState,
|
|
|
+} from "react";
|
|
|
+import { useDispatch, useSelector } from "react-redux";
|
|
|
+
|
|
|
+import styles from "./index.module.scss";
|
|
|
+import {
|
|
|
+ IDUserScoreSaveAPI,
|
|
|
+ getIDUserInfoByIdAPI,
|
|
|
+} from "@/store/action/A6IDUser";
|
|
|
+import { IDUserType, SaveIDUserScoreType } from "@/types";
|
|
|
+import { MessageFu } from "@/utils/message";
|
|
|
+type Props = {
|
|
|
+ id: number; //用户id
|
|
|
+ closeFu: () => void;
|
|
|
+};
|
|
|
+
|
|
|
+function IntegralEdit({ id,closeFu }: Props) {
|
|
|
+ const dispatch = useDispatch();
|
|
|
+
|
|
|
+ const pageNumRef = useRef(1);
|
|
|
+ const pagePageRef = useRef(10);
|
|
|
+ // 筛选和分页
|
|
|
+ const [tableSelect, setTableSelect] = useState({
|
|
|
+ searchKey: "",
|
|
|
+ pageSize: 10,
|
|
|
+ pageNum: 1,
|
|
|
+ startTime: "",
|
|
|
+ endTime: "",
|
|
|
+ });
|
|
|
+
|
|
|
+ // 获取当前用户信息
|
|
|
+ const [curIDUser, setCurIDUser] = useState<IDUserType>({
|
|
|
+ id: 1,
|
|
|
+ name: "用户1",
|
|
|
+ } as IDUserType);
|
|
|
+
|
|
|
+ const getInfoById = useCallback(async () => {
|
|
|
+ const res = await getIDUserInfoByIdAPI(id);
|
|
|
+ if (res.code === 0) {
|
|
|
+ setCurIDUser(res.data);
|
|
|
+ }
|
|
|
+ }, [id]);
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ pageNumRef.current = tableSelect.pageNum;
|
|
|
+ pagePageRef.current = tableSelect.pageSize;
|
|
|
+ getInfoById();
|
|
|
+ }, [dispatch, getInfoById, tableSelect]);
|
|
|
+
|
|
|
+ // ---------关于表格
|
|
|
+
|
|
|
+ // 页码变化
|
|
|
+ const paginationChange = (pageNum: number, pageSize: number) => {
|
|
|
+ pageNumRef.current = pageNum;
|
|
|
+ pagePageRef.current = pageSize;
|
|
|
+ setTableSelect({ ...tableSelect, pageNum, pageSize });
|
|
|
+ };
|
|
|
+
|
|
|
+ const results = useSelector((state: RootState) => state.A7Log.tableInfo);
|
|
|
+
|
|
|
+ const columns = useMemo(() => {
|
|
|
+ return [
|
|
|
+ {
|
|
|
+ title: "时间",
|
|
|
+ dataIndex: "createTime",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "类型",
|
|
|
+ dataIndex: "type",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "积分",
|
|
|
+ dataIndex: "type",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "说明",
|
|
|
+ dataIndex: "description",
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ }, []);
|
|
|
+
|
|
|
+ // 修改积分弹窗开关
|
|
|
+ const [editIntegralVisible, setEditIntegralVisible] = useState(false);
|
|
|
+ const [form] = Form.useForm();
|
|
|
+
|
|
|
+ const onFinish = useCallback(
|
|
|
+ async (values: any) => {
|
|
|
+ if (values.numberVal) {
|
|
|
+ const res: any = await IDUserScoreSaveAPI({} as SaveIDUserScoreType);
|
|
|
+ if (res.code === 0) {
|
|
|
+ MessageFu.success("提交成功!");
|
|
|
+ pageNumRef.current = tableSelect.pageNum;
|
|
|
+ pagePageRef.current = tableSelect.pageSize;
|
|
|
+ getInfoById();
|
|
|
+ setEditIntegralVisible(false);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ [getInfoById, tableSelect.pageNum, tableSelect.pageSize]
|
|
|
+ );
|
|
|
+
|
|
|
+ return (
|
|
|
+ <div className={styles.IntegralEdit}>
|
|
|
+ <div className="pageTitle">
|
|
|
+ <div>{curIDUser.name}</div>
|
|
|
+ <div>当前积分:5000</div>
|
|
|
+ <div>
|
|
|
+ <Button
|
|
|
+ className="scoreLimitBtn"
|
|
|
+ size="middle"
|
|
|
+ type="primary"
|
|
|
+ onClick={() => setEditIntegralVisible(true)}
|
|
|
+ >
|
|
|
+ 修改积分
|
|
|
+ </Button>
|
|
|
+ <Button
|
|
|
+ className="scoreLimitBtn"
|
|
|
+ size="middle"
|
|
|
+ type="primary"
|
|
|
+ style={{ marginLeft: "10px" }}
|
|
|
+ onClick={() => closeFu()}
|
|
|
+ >
|
|
|
+ 返回
|
|
|
+ </Button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ {/* 表格主体 */}
|
|
|
+ <div className="tableMain">
|
|
|
+ <Table
|
|
|
+ scroll={{ y: 625 }}
|
|
|
+ dataSource={results.list}
|
|
|
+ columns={columns}
|
|
|
+ rowKey="id"
|
|
|
+ pagination={{
|
|
|
+ showQuickJumper: true,
|
|
|
+ position: ["bottomCenter"],
|
|
|
+ showSizeChanger: true,
|
|
|
+ current: tableSelect.pageNum,
|
|
|
+ pageSize: tableSelect.pageSize,
|
|
|
+ total: results.total,
|
|
|
+ onChange: paginationChange,
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ {/* 修改积分 */}
|
|
|
+ <Modal
|
|
|
+ destroyOnClose
|
|
|
+ closable={false}
|
|
|
+ maskClosable={false}
|
|
|
+ open={editIntegralVisible}
|
|
|
+ title=" "
|
|
|
+ onCancel={() => setEditIntegralVisible(false)}
|
|
|
+ footer={
|
|
|
+ [] // 设置footer为空,去掉 取消 确定默认按钮
|
|
|
+ }
|
|
|
+ >
|
|
|
+ <Form
|
|
|
+ form={form}
|
|
|
+ name="basic"
|
|
|
+ labelCol={{ span: 8 }}
|
|
|
+ onFinish={onFinish}
|
|
|
+ autoComplete="off"
|
|
|
+ >
|
|
|
+ <Form.Item
|
|
|
+ label="积分变动"
|
|
|
+ name="numberVal"
|
|
|
+ style={{ marginTop: "40px" }}
|
|
|
+ rules={[{ required: true, message: "不能为空!" }]}
|
|
|
+ hide-required-asterisk={true}
|
|
|
+ getValueFromEvent={(e) =>
|
|
|
+ e.target.value.replace(/^(0+)|[^\d]+/g, "")
|
|
|
+ }
|
|
|
+ >
|
|
|
+ <Input
|
|
|
+ max={99999}
|
|
|
+ min={-99999}
|
|
|
+ placeholder="请输入-99999至99999的整数"
|
|
|
+ />
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item
|
|
|
+ label="积分原因"
|
|
|
+ style={{ marginTop: "40px" }}
|
|
|
+ hide-required-asterisk={true}
|
|
|
+ >
|
|
|
+ <Input maxLength={200} placeholder="请输入说明,不超过200字" />
|
|
|
+ </Form.Item>
|
|
|
+ {/* 确定和取消按钮 */}
|
|
|
+ <br />
|
|
|
+ <Form.Item wrapperCol={{ offset: 9, span: 16 }}>
|
|
|
+ <Button type="primary" htmlType="submit">
|
|
|
+ 提交
|
|
|
+ </Button>
|
|
|
+  
|
|
|
+ <Popconfirm
|
|
|
+ title="放弃编辑后,信息将不会保存!"
|
|
|
+ okText="放弃"
|
|
|
+ cancelText="取消"
|
|
|
+ onConfirm={() => {
|
|
|
+ setEditIntegralVisible(false);
|
|
|
+ }}
|
|
|
+ okButtonProps={{ loading: false }}
|
|
|
+ >
|
|
|
+ <Button>取消</Button>
|
|
|
+ </Popconfirm>
|
|
|
+ </Form.Item>
|
|
|
+ </Form>
|
|
|
+ </Modal>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+}
|
|
|
+
|
|
|
+const MemoIntegralEdit = React.memo(IntegralEdit);
|
|
|
+
|
|
|
+export default MemoIntegralEdit;
|