first commit

src/pages/Machine/AddMachineForm/index.tsx

@@ -0,0 +1,126 @@
+import React, { useEffect, useState } from 'react';
+import { Form, Input, Button, FormInstance, Spin, message, Select, DatePicker, InputNumber } from 'antd';
+import moment from 'moment';
+import { AddMachineData } from '@/services/services/machine';
+import { useModel } from '@umijs/max';
+
+interface AddMachineModalProps {
+  setFormRef: (form: FormInstance) => void;
+}
+
+const AddMachineForm: React.FC<AddMachineModalProps> = ({ setFormRef }) => {
+  const [form] = Form.useForm();
+  const [loading, setLoading] = useState<boolean>(false);
+  const [messageApi, messageHolder] = message.useMessage();
+  const { initialState } = useModel('@@initialState');
+
+  useEffect(() => {
+    setFormRef(form);
+    const currentDate = new Date();
+    const nextDayDate = new Date(currentDate);
+    nextDayDate.setDate(currentDate.getDate() + 1);
+    form.setFieldsValue({
+      useStatus: 0,
+      status: 1,
+      deactivationTime: moment(nextDayDate.toISOString()),
+      userId: initialState?.currentUser?.id ? initialState.currentUser.id : undefined
+    });
+  }, [form, setFormRef]);
+
+  const onFinish = async (values: MachineModel.AddMachineParams) => {
+    if (values.useStatus == 0 && !values.deactivationTime) {
+      messageApi.error("试用机器码需要设置停用时间")
+      return;
+    }
+    setLoading(true);
+    try {
+      await AddMachineData(values);
+      messageApi.success("添加机器码成功");
+    } catch (error: any) {
+      messageApi.error(error.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Spin spinning={loading} tip="保存中。。。">
+      <Form
+        form={form}
+        name="addRole"
+        labelCol={{ span: 6 }}
+        wrapperCol={{ span: 18 }}
+        style={{ maxWidth: 600 }}
+        onFinish={onFinish}
+      >
+        <Form.Item<MachineModel.AddMachineParams>
+          label="机器码"
+          name="machineId"
+          rules={[{ required: true, message: 'Please input the role name!' }]}
+        >
+          <Input />
+        </Form.Item>
+        <Form.Item<MachineModel.AddMachineParams>
+          label="使用状态"
+          name="useStatus"
+          rules={[{ required: true, message: 'Please input the role name!' }]}
+        >
+          <Select onChange={(value) => {
+            if (value == 1) {
+              form.setFieldsValue({ deactivationTime: null })
+            } else {
+              const currentDate = new Date();
+              const nextDayDate = new Date(currentDate);
+              nextDayDate.setDate(currentDate.getDate() + 1);
+              form.setFieldsValue({ deactivationTime: moment(nextDayDate) })
+            }
+          }}>
+            <Select.Option value={0}>试用</Select.Option>
+            <Select.Option value={1}>永久</Select.Option>
+          </Select>
+        </Form.Item>
+        <Form.Item<MachineModel.AddMachineParams>
+          label="状态"
+          name="status"
+          rules={[{ required: true, message: 'Please input the role name!' }]}
+        >
+          <Select >
+            <Select.Option value={0}>冻结</Select.Option>
+            <Select.Option value={1}>激活</Select.Option>
+          </Select>
+        </Form.Item>
+
+        <Form.Item<MachineModel.AddMachineParams>
+          label="停用时间"
+          name="deactivationTime"
+        >
+          <DatePicker showTime />
+        </Form.Item>
+        <Form.Item<MachineModel.AddMachineParams>
+          label="所属用户ID"
+          name="userId"
+          rules={[{ required: true, message: 'Please input the role name!' }]}
+        >
+          <InputNumber style={{ width: 200 }} keyboard={false} min={0} changeOnWheel={false} controls={false} />
+        </Form.Item>
+        <Form.Item<MachineModel.AddMachineParams>
+          label="备注"
+          name="remark"
+        >
+          <Input />
+        </Form.Item>
+
+        <Form.Item wrapperCol={{ offset: 6, span: 4 }}>
+          <Button type="primary" htmlType="submit">
+            Submit
+          </Button>
+        </Form.Item>
+      </Form>
+      {
+        messageHolder
+      }
+    </Spin>
+  );
+};
+
+export default AddMachineForm;

src/pages/Machine/MachineManagement/index.tsx

@@ -0,0 +1,275 @@
+
+import { useFormReset } from "@/hooks/useFormReset";
+import TemplateContainer from "@/pages/TemplateContainer";
+import { DeactivationMachine, MachinePermanent, QueryMachineList } from "@/services/services/machine";
+import { FormatDate } from "@/util/time";
+import { useAccess, useModel } from "@umijs/max";
+import { Button, Form, Input, message, Modal, Select, SelectProps, Spin, Table, Tag } from "antd";
+import { ColumnsType, TablePaginationConfig } from "antd/es/table";
+import { FilterValue, SorterResult, TableCurrentDataSource } from "antd/es/table/interface";
+import { delay, set } from "lodash";
+import { useEffect, useState } from "react";
+import ModifyMachine from "../ModifyMachine";
+import { PlusOutlined } from "@ant-design/icons";
+import AddMachineForm from "../AddMachineForm";
+
+const MachineManagement: React.FC = () => {
+
+  const { initialState } = useModel('@@initialState');
+  const [data, setData] = useState<MachineModel.MachineCollection[]>(); // 数据
+  const [messageApi, messageHolder] = message.useMessage();
+  const [form] = Form.useForm();
+  const access = useAccess();
+  const { setFormRef, resetForm } = useFormReset();
+  const [tableParams, setTableParams] = useState<TableModel.TableParams>({
+    pagination: {
+      current: 1,
+      pageSize: 10,
+      showQuickJumper: true,
+      totalBoundaryShowSizeChanger: true,
+    },
+  });
+  const [id, setId] = useState<string>('');
+  const [loading, setLoading] = useState<boolean>(true);
+  const [openModal, setOpenModal] = useState<boolean>(false);
+  const [openAddModal, setOpenAddModal] = useState<boolean>(false);
+  const [spinning, setSpinning] = useState<boolean>(false);
+  const [spinTip, setSpinTip] = useState<string>('');
+
+  useEffect(() => {
+    QueryMachineList(tableParams, form.getFieldsValue())
+      .then((res) => {
+        setData(res.collection);
+        setTableParams({
+          pagination: {
+            ...tableParams.pagination,
+            total: res.total
+          }
+        })
+        setLoading(false);
+      })
+      .catch((error: any) => {
+        messageApi.error(error.message);
+      })
+      .finally(() => {
+        setLoading(false);
+      })
+  }, []);
+
+  async function SetMachinePermanent(id: string): Promise<void> {
+    setSpinning(true);
+    setSpinTip('正在设置为永久。。。');
+    try {
+      // 
+      await MachinePermanent(id);
+      messageApi.success('设置为永久成功');
+      setSpinning(false);
+      // 重新加载数据
+      await QueryMachineBasic(form.getFieldsValue(), tableParams.pagination);
+    } catch (error: any) {
+      messageApi.error(error.message);
+    } finally {
+      setSpinning(false);
+    }
+  }
+
+  async function ChangeDeactivationMachine(id: string): Promise<void> {
+    setSpinning(true);
+    setSpinTip('正在停用。。。');
+    try {
+      await DeactivationMachine(id);
+      messageApi.success('停用成功');
+      setSpinning(false);
+      // 重新加载数据
+      await QueryMachineBasic(form.getFieldsValue(), tableParams.pagination);
+    } catch (error: any) {
+      messageApi.error(error.message);
+    } finally {
+      setSpinning(false);
+    }
+  }
+
+  async function QueryMachineBasic(params: MachineModel.QueryUMachineParams | null, pagination: TablePaginationConfig | null): Promise<void> {
+    setLoading(true);
+    try {
+      let tableParamsParams = pagination ? { pagination } : tableParams;
+      let res = await QueryMachineList(tableParamsParams, params ?? form.getFieldsValue());
+      setData(res.collection);
+      setTableParams({
+        pagination: {
+          ...tableParams.pagination,
+          total: res.total
+        }
+      })
+    } catch (error: any) {
+      message.error(error.message);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function handleTableChange(pagination: TablePaginationConfig, filters: Record<string, FilterValue | null>, sorter: SorterResult<MachineModel.MachineCollection> | SorterResult<MachineModel.MachineCollection>[], extra: TableCurrentDataSource<MachineModel.MachineCollection>): Promise<void> {
+    setLoading(true);
+    try {
+      let queryUser = await QueryMachineList({ pagination }, form.getFieldsValue());
+      setData(queryUser.collection);
+      setTableParams({
+        pagination: {
+          ...pagination,
+          total: queryUser.total
+        }
+      })
+    } catch (error: any) {
+      message.error(error.message);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function modalCancel(): Promise<void> {
+    setOpenModal(false);
+    setOpenAddModal(false);
+    resetForm();
+    setId('');
+    // 这边调用加载数据的方法
+    await QueryMachineBasic(null, null);
+  }
+
+  async function QueryMachineListByCondition(values: any): Promise<void> {
+    await QueryMachineBasic(values, null);
+  }
+
+
+  const columns: ColumnsType<MachineModel.MachineCollection> = [
+    {
+      title: 'ID',
+      dataIndex: 'machineId',
+    },
+    {
+      title: '创建人',
+      dataIndex: 'createId',
+      width: '100px',
+    },
+    {
+      title: '修改人',
+      dataIndex: 'updateId',
+      width: '100px',
+    },
+    {
+      title: '所属人',
+      dataIndex: 'userID',
+      width: '100px',
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'createTime',
+      render: (text) => FormatDate(text),
+      width: '160px',
+    },
+    {
+      title: '使用状态',
+      dataIndex: 'useStatus',
+      render: (text, record) => <Tag color={record.useStatus === 1 ? 'green' : 'red'}>{record.useStatus === 1 ? '永久' : '试用'}</Tag>,
+      width: '100px',
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      render: (text, record) => <Tag color={record.status === 1 ? 'blue' : 'red'}>{record.status === 1 ? '激活' : '冻结'}</Tag>,
+      width: '100px',
+    },
+    {
+      title: '停用时间',
+      dataIndex: 'deactivationTime',
+      render: (text) => FormatDate(text),
+      width: '160px',
+    },
+    {
+      title: '备注',
+      dataIndex: 'remark',
+    },
+    {
+      title: '操作',
+      width: '200px',
+      render: (text, record) => (
+        <div>
+          <Button hidden={!access.canEditMachine} style={{ marginRight: 5 }} type="primary" size="small"
+            onClick={() => { setOpenModal(true); setFormRef(form); setId(record.id) }}>编辑</Button>
+          <Button hidden={!access.canUpgradeMachine} type="primary" style={{ marginRight: 5 }} size="small"
+            onClick={async () => await SetMachinePermanent(record.id)}>永久</Button>
+          <Button hidden={!access.canDisableMachine} type="primary" danger size="small"
+            onClick={async () => await ChangeDeactivationMachine(record.id)}>停用</Button>
+        </div>
+      ),
+    },
+  ];
+
+  return (
+    <TemplateContainer navTheme={initialState?.settings?.navTheme ?? "realDark"}>
+      <Spin spinning={spinning} tip={spinTip}>
+        <Form
+          layout='inline'
+          form={form}
+          onFinish={QueryMachineListByCondition}
+        >
+          <Form.Item<MachineModel.QueryUMachineParams> label="机器码" name='machineId' style={{ marginBottom: 5 }}>
+            <Input placeholder="请输入机器码" />
+          </Form.Item>
+          {
+            access.isAdminOrSuperAdmin ?
+              <Form.Item<MachineModel.QueryUMachineParams> label="创建用户名" name='createdUserName' style={{ marginBottom: 5 }}>
+                <Input placeholder="请输入创建用户名" />
+              </Form.Item> :
+              null
+          }
+          {
+            access.isAdminOrSuperAdmin ?
+              <Form.Item<MachineModel.QueryUMachineParams> label="所属用户名" name='ownUserName' style={{ marginBottom: 5 }}>
+                <Input placeholder="请输入所属用户名" />
+              </Form.Item> :
+              null
+          }
+          <Form.Item<MachineModel.QueryUMachineParams> label="状态" name='status' style={{ marginBottom: 5 }}>
+            <Select allowClear placeholder="请选择状态" style={{ width: 200 }}>
+              <Select.Option value={1}>激活</Select.Option>
+              <Select.Option value={0}>冻结</Select.Option>
+            </Select>
+          </Form.Item>
+          <Form.Item<MachineModel.QueryUMachineParams> label="使用状态" name='useStatus' style={{ marginBottom: 5 }}>
+            <Select allowClear placeholder="请选择使用状态" style={{ width: 200 }}>
+              <Select.Option value={1}>永久</Select.Option>
+              <Select.Option value={0}>试用</Select.Option>
+            </Select>
+
+          </Form.Item>
+          <Form.Item<MachineModel.QueryUMachineParams> label="备注" name='remark' style={{ marginBottom: 5 }}>
+            <Input placeholder="请输入备注" />
+          </Form.Item>
+          <Form.Item>
+            <Button type="primary" htmlType='submit'>查询</Button>
+          </Form.Item>
+          <Form.Item>
+            <Button type="primary" icon={<PlusOutlined />} onClick={() => { setOpenAddModal(true); }}>新增</Button>
+          </Form.Item>
+        </Form>
+        <Table<MachineModel.MachineCollection>
+          columns={columns}
+          rowKey={(record) => record.id}
+          dataSource={data}
+          pagination={tableParams.pagination}
+          loading={loading}
+          onChange={handleTableChange}
+        />
+      </Spin>
+      <Modal width={840} title="编辑机器码" maskClosable={false} open={openModal} footer={null} onCancel={modalCancel}>
+        <ModifyMachine open={openModal} setFormRef={setFormRef} id={id} />
+      </Modal>
+      <Modal width={600} title="新增机器码" maskClosable={false} open={openAddModal} footer={null} onCancel={modalCancel}>
+        <AddMachineForm setFormRef={setFormRef} />
+      </Modal>
+      {messageHolder}
+    </TemplateContainer>
+  );
+};
+
+export default MachineManagement;

src/pages/Machine/ModifyMachine/index.tsx

@@ -0,0 +1,210 @@
+import React, { useEffect, useState } from 'react';
+import { Form, Input, Button, Row, Col, Select, FormInstance, message, Spin, DatePicker, DatePickerProps } from 'antd';
+import { GetMachineInfo, ModifyMachineData } from '@/services/services/machine';
+import { FormatDate } from '@/util/time';
+import { useModel } from '@umijs/max';
+import { RangePickerProps } from 'antd/es/date-picker';
+import moment from 'moment';
+
+
+interface ModifyMachineProps {
+  id: string;
+  setFormRef: (form: FormInstance) => void;
+  open: boolean;
+}
+
+const ModifyMachine: React.FC<ModifyMachineProps> = ({ id, setFormRef, open }) => {
+  const { initialState } = useModel('@@initialState');
+  const [form] = Form.useForm();
+  const [messageApi, messageHolder] = message.useMessage();
+  const [spinning, setSpinning] = useState<boolean>(true);
+  const [spinTip, setSpinTip] = useState<string>('加载中。。。');
+
+  useEffect(() => {
+    setFormRef(form);
+  }, [form, setFormRef]);
+
+  useEffect(() => {
+    setSpinning(true);
+    setSpinTip("加载中。。。");
+    GetMachineInfo(id).then((res) => {
+      // 对一些数据做处理
+      form.setFieldsValue({
+        ...res,
+        createTime: FormatDate(res.createTime),
+        updateTime: FormatDate(res.updateTime),
+        createdUserName: res.createdUser?.userName,
+        ownUserName: res.ownUser?.userName,
+        updatedUserName: res.updatedUser?.userName,
+        deactivationTime: res.deactivationTime ? moment(res.deactivationTime) : undefined,
+      });
+
+    }).catch((error: any) => {
+      messageApi.error(error.message);
+    }).finally(() => {
+      setSpinning(false);
+    })
+  }, [id, open, form, setFormRef]);
+
+  const onFinish = async (values: MachineModel.MachineInfo) => {
+    setSpinning(true);
+    setSpinTip("正在修改机器码。。。");
+    try {
+      await ModifyMachineData(values.id, {
+        machineId: values.machineId,
+        deactivationTime: values.deactivationTime,
+        useStatus: values.useStatus,
+        status: values.status,
+        remark: values.remark
+      } as MachineModel.ModifyMachineParams);
+      messageApi.success('机器码修改成功');
+    } catch (error: any) {
+      messageApi.error(error.message);
+    } finally {
+      setSpinning(false);
+    }
+  };
+
+  const onOk = (value: DatePickerProps['value'] | RangePickerProps['value']) => {
+    console.log('onOk: ', value);
+  };
+
+  return (
+    <Spin spinning={spinning} tip={spinTip}>
+      <Form
+        name="basic"
+        labelCol={{ span: 8 }}
+        wrapperCol={{ span: 16 }}
+        style={{ width: 800 }}
+        onFinish={onFinish}
+        autoComplete="off"
+        form={form}
+        initialValues={{
+          allDeviceCount: 1,
+          agentPercent: 0.5,
+          freeCount: 5
+        }}
+      >
+        <Row>
+          <Col span={12}>
+            <Form.Item<MachineModel.MachineInfo>
+              label="ID"
+              name="id"
+            >
+              <Input disabled={true} />
+            </Form.Item>
+          </Col>
+          <Col span={12}>
+            <Form.Item<MachineModel.MachineInfo>
+              label="机器码"
+              name="machineId"
+            >
+              <Input disabled={initialState?.currentUser?.roleNames?.includes("Admin") || initialState?.currentUser?.roleNames.includes("Super Admin")} />
+            </Form.Item>
+          </Col>
+
+          <Col span={12}>
+            <Form.Item
+              label="使用状态"
+              name="useStatus"
+              rules={[{ required: true, message: 'Please input your username!' }]}
+            >
+              <Select>
+                <Select.Option value={0}>试用</Select.Option>
+                <Select.Option value={1}>永久</Select.Option>
+              </Select>
+            </Form.Item>
+          </Col>
+          <Col span={12}>
+            <Form.Item
+              label="状态"
+              name="status"
+              rules={[{ required: true, message: 'Please input your username!' }]}
+            >
+              <Select>
+                <Select.Option value={0}>冻结</Select.Option>
+                <Select.Option value={1}>激活</Select.Option>
+              </Select>
+            </Form.Item>
+          </Col>
+
+          <Col span={12}>
+            <Form.Item
+              label="拥有者"
+              name="ownUserName"
+            >
+              <Input disabled />
+            </Form.Item>
+          </Col>
+
+          <Col span={12}>
+            <Form.Item
+              label="停用时间"
+              name="deactivationTime"
+            >
+              <DatePicker
+                showTime
+                onChange={(value, dateString) => {
+                  console.log('Selected Time: ', value);
+                  console.log('Formatted Selected Time: ', dateString);
+                }}
+                onOk={onOk}
+              />
+            </Form.Item>
+          </Col>
+
+          <Col span={12}>
+            <Form.Item<MachineModel.MachineInfo>
+              label="创建人"
+              name="createdUserName"
+            >
+              <Input disabled />
+            </Form.Item>
+          </Col>
+          <Col span={12}>
+            <Form.Item<MachineModel.MachineInfo>
+              label="创建时间"
+              name="createTime"
+            >
+              <Input disabled />
+            </Form.Item>
+          </Col>
+          <Col span={12}>
+            <Form.Item
+              label="更新人"
+              name="updatedUserName"
+            >
+              <Input disabled />
+            </Form.Item>
+          </Col>
+          <Col span={12}>
+            <Form.Item
+              label="更新时间"
+              name="updateTime"
+            >
+              <Input disabled />
+            </Form.Item>
+          </Col>
+
+          <Col span={12}>
+            <Form.Item
+              label="备注"
+              name="remark"
+            >
+              <Input.TextArea />
+            </Form.Item>
+          </Col>
+        </Row>
+
+        <Form.Item wrapperCol={{ offset: 4, span: 3 }}>
+          <Button type="primary" htmlType="submit">
+            提交修改
+          </Button>
+        </Form.Item>
+      </Form>
+      {messageHolder}
+    </Spin>
+  );
+};
+
+export default ModifyMachine;