diff --git a/src/pages/card/memberAccount/index.jsx b/src/pages/card/memberAccount/index.jsx index 31272f8..19223ee 100644 --- a/src/pages/card/memberAccount/index.jsx +++ b/src/pages/card/memberAccount/index.jsx @@ -1,16 +1,254 @@ -import React from "react"; +import React, { useRef, useState } from "react"; import styles from "./index.less"; import { PageContainer } from '@ant-design/pro-layout'; +import { PlusOutlined } from '@ant-design/icons'; +import ProTable from '@ant-design/pro-table'; +import { Button, Form, Input, DatePicker, Modal, Select, Popconfirm } from 'antd'; /** - * 储值卡会员账户管理 + * 储值卡账户管理 * @returns */ const memberAccount = () => { + const actionRef = useRef(); + const modalForm = Form.useForm(); + const [isModalOpen, setIsModalOpen] = useState(false); + const [currentOption, setCurrentOption] = useState({ id: '' }); + + /** + * 点击编辑按钮 + * @param {*} record + */ + const onEditTableRow = (record) => { + setCurrentOption(record); + setIsModalOpen(true); + // modalForm.setFieldsValue(record); + } + + /** + * 点击新建 + */ + const onCreateTableRow = () => { + setIsModalOpen(true); + } + + /** + * 删除数据 + * @param {*} record + */ + const onDeleteTableRow = (record) => { + console.log('删除', record) + } + + /** + * 提交表单 + */ + const onFinish = (values) => { + console.log('value', values); + if (values.id) { + console.log('更新') + } else { + console.log('创建') + } + } + + const columns = [ + { + title: 'ID', + dataIndex: 'id', + ellipsis: true, + }, + { + title: '姓名', + dataIndex: 'name', + ellipsis: true, + }, + { + title: '会员ID', + dataIndex: 'cardId', + ellipsis: true, + }, + { + disable: true, + title: '状态', + dataIndex: 'status', + valueType: 'select', + valueEnum: { + 0: { + text: '禁用', + status: 'Error', + }, + 1: { + text: '正常', + status: 'Success', + }, + 2: { + text: '挂失', + status: 'Error', + }, + 3: { + text: '作废', + status: 'Error', + }, + }, + }, + { + title: '余额', + dataIndex: 'money', + }, + { + title: '操作', + valueType: 'option', + key: 'option', + render: (text, record, _, action) => [ + onEditTableRow(record)}>编辑, + onDeleteTableRow(record)} + okText="确定" + cancelText="取消" + > + 删除 + + ], + }, + ]; + + return (
- 储值卡会员账户管理 + { + const data = [ + { + id: '1008611', + name: '彭于晏', + cardId: '1008611-100111', + status: 0, + money: '18208', + }, + { + id: '10086112', + name: '彭于晏2', + cardId: '21008611-100111', + status: 1, + money: '18206', + }, + ] + return { + data: data, + success: true, + total: 2, + } + } + } + cardBordered + editable={{ + type: 'multiple', + }} + rowKey="id" + search={{ + labelWidth: 'auto', + }} + options={{ + setting: { + listsHeight: 400, + }, + }} + pagination={{ + pageSize: 5, + onChange: (page) => console.log(page), + }} + dateFormatter="string" + headerTitle="储值卡账户管理" + toolBarRender={() => [ + + ]} + /> + setIsModalOpen(false)}> +
+ + + + + + + + + + + + + + + + + + + + + + +
+
) diff --git a/src/pages/card/memberCard/index.jsx b/src/pages/card/memberCard/index.jsx index 7cb2bc6..5703517 100644 --- a/src/pages/card/memberCard/index.jsx +++ b/src/pages/card/memberCard/index.jsx @@ -1,16 +1,315 @@ -import React from "react"; +import React, { useRef, useState } from "react"; import styles from "./index.less"; import { PageContainer } from '@ant-design/pro-layout'; +import { PlusOutlined } from '@ant-design/icons'; +import ProTable from '@ant-design/pro-table'; +import { Button, Form, Input, DatePicker, Modal, Select, Popconfirm } from 'antd'; /** * 储值卡会员管理页面 * @returns */ const memberCard = () => { + const actionRef = useRef(); + const modalForm = Form.useForm(); + const [isModalOpen, setIsModalOpen] = useState(false); + const [currentOption, setCurrentOption] = useState({ id: '' }); + + /** + * 点击编辑按钮 + * @param {*} record + */ + const onEditTableRow = (record) => { + setCurrentOption(record); + setIsModalOpen(true); + modalForm.setFieldsValue(record); + } + + /** + * 点击新建 + */ + const onCreateTableRow = () => { + setIsModalOpen(true); + } + + /** + * 删除数据 + * @param {*} record + */ + const onDeleteTableRow = (record) => { + console.log('删除', record) + } + + /** + * 提交表单 + */ + const onFinish = (values) => { + console.log('value', values); + if (values.id) { + console.log('更新') + } else { + console.log('创建') + } + } + + const columns = [ + { + title: 'ID', + dataIndex: 'id', + ellipsis: true, + }, + { + title: '姓名', + dataIndex: 'name', + ellipsis: true, + }, + { + title: '会员ID', + dataIndex: 'cardId', + ellipsis: true, + }, + { + disable: true, + title: '状态', + dataIndex: 'status', + valueType: 'select', + valueEnum: { + false: { + text: '停用', + status: 'Error', + }, + true: { + text: '启用', + status: 'Success', + }, + }, + }, + { + title: '电话', + dataIndex: 'phone', + ellipsis: true, + }, + { + title: '性别', + dataIndex: 'sex', + ellipsis: true, + }, + { + title: '身份证', + dataIndex: 'identityCard', + ellipsis: true, + }, + { + title: '生日', + dataIndex: 'birthday', + valueType: 'date', + }, + { + title: '备注', + dataIndex: 'remark', + ellipsis: true + }, + { + title: '操作', + valueType: 'option', + key: 'option', + render: (text, record, _, action) => [ + onEditTableRow(record)}>编辑, + onDeleteTableRow(record)} + okText="确定" + cancelText="取消" + > + 删除 + + ], + }, + ]; + + return (
- 储值卡会员管理页面 + { + const data = [ + { + id: '1008611', + name: '彭于晏', + cardId: '1008611-100111', + status: true, + phone: '18208260000', + sex: 1, + identityCard: '511522111222226655', + birthday: '2022-9-8', + remark: '备注' + }, + { + id: '10086112', + name: '彭于晏2', + cardId: '21008611-100111', + status: false, + phone: '18208260000', + sex: 0, + identityCard: '511522111222226655', + birthday: '2022-9-8', + remark: '备注' + }, + ] + return { + data: data, + success: true, + total: 2, + } + } + } + cardBordered + editable={{ + type: 'multiple', + }} + rowKey="id" + search={{ + labelWidth: 'auto', + }} + options={{ + setting: { + listsHeight: 400, + }, + }} + pagination={{ + pageSize: 5, + onChange: (page) => console.log(page), + }} + dateFormatter="string" + headerTitle="储值卡会员管理" + toolBarRender={() => [ + + ]} + /> + setIsModalOpen(false)}> +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
) diff --git a/src/pages/card/storedValueCard/index.jsx b/src/pages/card/storedValueCard/index.jsx index 5eb8f24..59fad18 100644 --- a/src/pages/card/storedValueCard/index.jsx +++ b/src/pages/card/storedValueCard/index.jsx @@ -1,16 +1,273 @@ -import React from "react"; +import React, { useRef, useState } from "react"; import styles from "./index.less"; import { PageContainer } from '@ant-design/pro-layout'; +import { PlusOutlined } from '@ant-design/icons'; +import ProTable from '@ant-design/pro-table'; +import { Button, Form, Input, DatePicker, Modal, Select, Popconfirm } from 'antd'; /** * 储值卡管理 * @returns */ const storedValueCard = () => { + const actionRef = useRef(); + const modalForm = Form.useForm(); + const [isModalOpen, setIsModalOpen] = useState(false); + const [currentOption, setCurrentOption] = useState({ id: '' }); + + /** + * 点击编辑按钮 + * @param {*} record + */ + const onEditTableRow = (record) => { + setCurrentOption(record); + setIsModalOpen(true); + // modalForm.setFieldsValue(record); + } + + /** + * 点击新建 + */ + const onCreateTableRow = () => { + setIsModalOpen(true); + } + + /** + * 删除数据 + * @param {*} record + */ + const onDeleteTableRow = (record) => { + console.log('删除', record) + } + + /** + * 提交表单 + */ + const onFinish = (values) => { + console.log('value', values); + if (values.id) { + console.log('更新') + } else { + console.log('创建') + } + } + + const columns = [ + { + title: 'ID', + dataIndex: 'id', + ellipsis: true, + }, + { + title: '卡号', + dataIndex: 'cardNum', + ellipsis: true, + }, + { + title: '会员ID', + dataIndex: 'cardId', + ellipsis: true, + }, + { + disable: true, + title: '状态', + dataIndex: 'status', + valueType: 'select', + valueEnum: { + 0: { + text: '禁用', + status: 'Error', + }, + 1: { + text: '正常', + status: 'Success', + }, + 2: { + text: '挂失', + status: 'Error', + }, + 3: { + text: '作废', + status: 'Error', + }, + }, + }, + { + title: '类型', + dataIndex: 'type', + valueType: 'select', + valueEnum: { + 0: { + text: '人脸', + status: 'Success', + }, + 1: { + text: '实体卡', + status: 'Success', + }, + 2: { + text: '指纹', + status: 'Success', + } + }, + }, + { + title: '操作', + valueType: 'option', + key: 'option', + render: (text, record, _, action) => [ + onEditTableRow(record)}>编辑, + onDeleteTableRow(record)} + okText="确定" + cancelText="取消" + > + 删除 + + ], + }, + ]; + + return (
- 储值卡管理 + { + const data = [ + { + id: '1008611', + cardNum: '100546549568', + cardId: '1008611-100111', + type: 0, + status: 0, + }, + { + id: '10086112', + cardNum: '111彭于213123asdf晏2', + cardId: '21008611-100111', + status: 1, + type: 1, + }, + ] + return { + data: data, + success: true, + total: 2, + } + } + } + cardBordered + editable={{ + type: 'multiple', + }} + rowKey="id" + search={{ + labelWidth: 'auto', + }} + options={{ + setting: { + listsHeight: 400, + }, + }} + pagination={{ + pageSize: 5, + onChange: (page) => console.log(page), + }} + dateFormatter="string" + headerTitle="储值卡账户管理" + toolBarRender={() => [ + + ]} + /> + setIsModalOpen(false)}> +
+ + + + + + + + + + + + + + + + + + + + + + +
+
)