Merge branch 'master' of lizhiqi/yongxu-web into master

config/routes.ts

@@ -78,6 +78,12 @@
     icon: 'Appstore',
     component: './RoleManagement',
   },
+  {
+    path: '/ParameterConfiguration',
+    name: '参数配置',
+    icon: 'Appstore',
+    component: './ParameterConfiguration',
+  },
   // 房间列表
   {
     path: '/roomList',

src/pages/ParameterConfiguration/edit.tsx

@@ -0,0 +1,154 @@
+import { Col, Form, Input, message, Modal, Row, Select } from 'antd';
+import React from 'react';
+import { createParameters, editParameters } from '@/services/ParameterConfiguration';
+
+const { TextArea } = Input;
+
+interface userEditPros {
+  visible: boolean;
+  editCallback: () => void;
+  params: any;
+}
+
+/**
+ * 参数配置编辑页面
+ * @param props
+ * @constructor
+ */
+const Edit: React.FC<userEditPros> = (props) => {
+  const { params, visible, editCallback } = props;
+  const [form] = Form.useForm();
+
+  const onCancel = () => {
+    editCallback();
+  };
+
+  const onOk = () => {
+    form.validateFields().then((values) => {
+      if (values) {
+        const data = { ...values };
+        // 编辑
+        if (params) {
+          data.record_id = params.record_id;
+          editParameters(data)
+            .then((res) => {
+              if (res.code === 0) {
+                message.success('编辑成功');
+                editCallback();
+              } else {
+                message.error(res?.message);
+                editCallback();
+              }
+            })
+            .catch((e) => {
+              message.error(e?.message);
+              editCallback();
+            });
+        } else {
+          // 新增
+          createParameters(data)
+            .then((res) => {
+              if (res.code === 0) {
+                message.success('保存成功');
+                editCallback();
+              } else {
+                message.error(res?.message);
+                editCallback();
+              }
+            })
+            .catch((e) => {
+              message.error(e?.message);
+              editCallback();
+            });
+        }
+      }
+    });
+  };
+
+  const formItemLayout = {
+    labelCol: {
+      span: 6,
+    },
+    wrapperCol: {
+      span: 16,
+    },
+  };
+
+  return (
+    <Modal
+      title={`${params ? '编辑' : '新增'}`}
+      open={visible}
+      onOk={onOk}
+      onCancel={onCancel}
+      width={800}
+    >
+      <Form form={form}>
+        <Row>
+          <Col span={24}>
+            <Form.Item
+              {...formItemLayout}
+              name="code"
+              label="编号"
+              rules={[{ required: true, message: '请输入编号' }]}
+              initialValue={params?.code}
+            >
+              <Input placeholder="请输入编号" />
+            </Form.Item>
+          </Col>
+          <Col span={24}>
+            <Form.Item
+              {...formItemLayout}
+              name="name"
+              label="名称"
+              rules={[{ required: true, message: '请输入名称' }]}
+              initialValue={params?.name}
+            >
+              <Input placeholder="请输入名称" />
+            </Form.Item>
+          </Col>
+          <Col span={24}>
+            <Form.Item
+              {...formItemLayout}
+              name="value"
+              label="参数值"
+              rules={[{ required: true, message: '请输入参数值' }]}
+              initialValue={params?.value}
+            >
+              <Input placeholder="请输入参数值" />
+            </Form.Item>
+          </Col>
+          <Col span={24}>
+            <Form.Item
+              {...formItemLayout}
+              name="status"
+              label="状态"
+              rules={[{ required: true, message: '请选择状态' }]}
+              initialValue={params?.status}
+            >
+              <Select placeholder="请选择状态">
+                <Select.Option value={1} key={1}>
+                  启用
+                </Select.Option>
+                <Select.Option value={2} key={2}>
+                  停用
+                </Select.Option>
+              </Select>
+            </Form.Item>
+          </Col>
+          <Col span={24}>
+            <Form.Item
+              {...formItemLayout}
+              name="memo"
+              label="备注"
+              rules={[{ required: false, message: '请输入备注' }]}
+              initialValue={params?.memo ? params?.memo : ''}
+            >
+              <TextArea placeholder="请输入备注" rows={4} />
+            </Form.Item>
+          </Col>
+        </Row>
+      </Form>
+    </Modal>
+  );
+};
+export default Edit;

src/pages/ParameterConfiguration/index.tsx

@@ -0,0 +1,305 @@
+import React, { useEffect, useState } from 'react';
+import { PageContainer } from '@ant-design/pro-components';
+import { Button, Card, Form, Input, message, Modal, Select, Space, Table } from 'antd';
+import type { ColumnsType } from 'antd/es/table';
+import Edit from '@/pages/ParameterConfiguration/edit';
+import { ReloadOutlined, SearchOutlined } from '@ant-design/icons';
+import {
+  delParameters,
+  disableParameters,
+  enableParameters,
+  queryParameters,
+} from '@/services/ParameterConfiguration';
+
+interface DataType {
+  code: string;
+  name: string;
+  value: string;
+  status: number;
+  memo: string;
+  record_id: string;
+}
+
+const ParameterConfiguration: React.FC = () => {
+  const [form] = Form.useForm();
+  const [loading, setLoading] = useState(false);
+  const [pagination, setPagination] = useState({ total: 0, current: 1, pageSize: 10 });
+  const [dataList, setDataList] = useState([]);
+  const [visible, setVisible] = useState(false);
+  const [params, setParams] = useState(null);
+  const [searchData, setSearchData] = useState<object | null>({});
+
+  const getList = () => {
+    const data = {
+      q: 'page',
+      current: pagination.current,
+      pageSize: pagination.pageSize,
+      ...searchData,
+    };
+    queryParameters(data).then((res) => {
+      if (res.code === 0) {
+        setDataList(res.data.list);
+        setPagination(res.data.pagination);
+        setLoading(false);
+      }
+    });
+  };
+
+  useEffect(() => {
+    setLoading(true);
+    getList();
+  }, []);
+
+  // 查询
+  const onFinish = () => {
+    form.validateFields().then((data) => {
+      setLoading(true);
+      setSearchData(data);
+    });
+  };
+
+  useEffect(() => {
+    getList();
+  }, [searchData]);
+
+  // 重置
+  const onReset = () => {
+    form.resetFields();
+    setLoading(true);
+    setSearchData(null);
+  };
+
+  // 切换列表
+  const tableChange = () => {
+    setLoading(true);
+    const data = {
+      q: 'page',
+      current: pagination.current,
+      pageSize: pagination.pageSize,
+      ...searchData,
+    };
+    queryParameters(data).then((res) => {
+      if (res.code === 0) {
+        setDataList(res.data.list);
+        setPagination(res.data.pagination);
+        setLoading(false);
+      }
+    });
+  };
+
+  // 新增
+  const onAdd = () => {
+    setVisible(true);
+  };
+
+  // 编辑
+  const toEdit = (record: any) => {
+    setVisible(true);
+    setParams(record);
+  };
+
+  // 删除
+  const toDel = (record: DataType) => {
+    Modal.confirm({
+      title: '删除',
+      content: `是否确认删除?`,
+      onOk: () => {
+        delParameters(record.record_id)
+          .then((res) => {
+            if (res.code === 0) {
+              message.success('删除成功');
+            } else {
+              message.error('删除失败');
+            }
+            getList();
+          })
+          .catch((e) => {
+            message.error(e?.message);
+          });
+      },
+    });
+  };
+
+  // 弹框回调
+  const editCallback = () => {
+    setVisible(false);
+    getList();
+  };
+
+  // 启用
+  const toEnable = (record: DataType) => {
+    Modal.confirm({
+      content: `是否确认启用参数配置?`,
+      onOk: () => {
+        enableParameters(record.record_id)
+          .then((res) => {
+            if (res.code === 0) {
+              message.success('启用成功');
+              getList();
+            } else {
+              message.error('启用失败');
+            }
+          })
+          .catch((e) => {
+            message.error(e?.message);
+          });
+      },
+    });
+  };
+
+  // 禁用
+  const toDisable = (record: DataType) => {
+    Modal.confirm({
+      content: `是否确认禁用参数配置?`,
+      onOk: () => {
+        disableParameters(record.record_id)
+          .then((res) => {
+            if (res.code === 0) {
+              message.success('禁用成功');
+              getList();
+            } else {
+              message.error('禁用失败');
+            }
+          })
+          .catch((e) => {
+            message.error(e?.message);
+          });
+      },
+    });
+  };
+
+  const columns: ColumnsType<DataType> = [
+    {
+      title: '序号',
+      align: 'center',
+      key: 'index',
+      render: (_: any, row: any, index: number) => index + 1,
+    },
+    {
+      title: '编号',
+      dataIndex: 'code',
+      key: 'code',
+    },
+    {
+      title: '名称',
+      dataIndex: 'name',
+      key: 'version',
+    },
+    {
+      title: '参数值',
+      dataIndex: 'value',
+      key: 'value',
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      key: 'status',
+      render: (v) => v && <span>{{ 1: '启用', 2: '禁用' }[v]}</span>,
+    },
+    {
+      title: '备注',
+      dataIndex: 'memo',
+      key: 'memo',
+    },
+    {
+      title: '操作',
+      key: 'action',
+      render: (_, record) => (
+        <Space size="middle">
+          <a
+            onClick={() => {
+              toEdit(record);
+            }}
+          >
+            编辑
+          </a>
+          <a
+            style={{ color: 'red' }}
+            onClick={() => {
+              toDel(record);
+            }}
+          >
+            删除
+          </a>
+          {record.status === 1 && (
+            <a
+              style={{ color: 'red' }}
+              onClick={() => {
+                toDisable(record);
+              }}
+            >
+              禁用
+            </a>
+          )}
+          {record.status === 2 && (
+            <a
+              onClick={() => {
+                toEnable(record);
+              }}
+            >
+              启用
+            </a>
+          )}
+        </Space>
+      ),
+    },
+  ];
+
+  const paginationProps = {
+    showSizeChanger: true,
+    showQuickJumper: true,
+    showTotal: (total: number) => {
+      return <span> 共 {total}条 </span>;
+    },
+    ...pagination,
+  };
+
+  return (
+    <PageContainer>
+      <div>
+        <Card>
+          <Form form={form} layout="inline" onFinish={onFinish}>
+            <Form.Item name="like_name" label="名称">
+              <Input placeholder="请输入名称" />
+            </Form.Item>
+            <Form.Item name="status" label="状态">
+              <Select placeholder="请选择状态" style={{ width: '175px' }}>
+                <Select.Option value={1} key={1}>
+                  启用
+                </Select.Option>
+                <Select.Option value={2} key={2}>
+                  禁用
+                </Select.Option>
+              </Select>
+            </Form.Item>
+            <Form.Item style={{ marginBottom: '10px' }}>
+              <Space>
+                <Button type="primary" htmlType="submit">
+                  <SearchOutlined />
+                  查询
+                </Button>
+                <Button htmlType="button" onClick={onReset}>
+                  <ReloadOutlined />
+                  重置
+                </Button>
+              </Space>
+            </Form.Item>
+          </Form>
+          <Button type="primary" onClick={onAdd} style={{ margin: '20px 0' }}>
+            新增
+          </Button>
+          <Table
+            columns={columns}
+            dataSource={dataList}
+            rowKey={(record) => record.record_id}
+            pagination={paginationProps}
+            loading={loading}
+            onChange={tableChange}
+          />
+          {visible && <Edit editCallback={editCallback} params={params} visible={visible} />}
+        </Card>
+      </div>
+    </PageContainer>
+  );
+};
+export default ParameterConfiguration;

src/services/ParameterConfiguration.ts

@@ -0,0 +1,62 @@
+import { request } from '@@/plugin-request/request';
+import { stringify } from 'qs';
+
+/**
+ * 查询参数配置列表数据
+ * @param params
+ */
+export async function queryParameters(params: object) {
+  return request(`/web/v1/system_parameters?${stringify(params)}`);
+}
+
+/**
+ * 编辑参数配置
+ * @param params
+ */
+export async function editParameters(params: any) {
+  return request(`/web/v1/system_parameters/${params.record_id}`, {
+    method: 'PUT',
+    data: params,
+  });
+}
+
+/**
+ * 新增参数配置
+ * @param params
+ */
+export async function createParameters(params: object) {
+  return request(`/web/v1/system_parameters`, {
+    method: 'POST',
+    data: params,
+  });
+}
+
+/**
+ * 删除参数配置
+ * @param record_id
+ */
+export async function delParameters(record_id: any) {
+  return request(`/web/v1/system_parameters/${record_id}`, {
+    method: 'DELETE',
+  });
+}
+
+/**
+ * 启用
+ * @param id
+ */
+export async function enableParameters(id: string) {
+  return request(`/web/v1/system_parameters/${id}/enable`, {
+    method: 'PATCH',
+  });
+}
+
+/**
+ * 禁用
+ * @param id
+ */
+export async function disableParameters(id: string) {
+  return request(`/web/v1/system_parameters/${id}/disable`, {
+    method: 'PATCH',
+  });
+}