bpa
/
BPA.KitChen.Web
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 1 Wiki Activity
Browse Source

储值卡会员管理、储值卡管理、储值卡账号管理

tags/小炒逻辑变更前
yangwenhua 2 years ago
parent
72a30a3ea0
commit
c0c149d350
3 changed files with 801 additions and 7 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +241
    -3
      src/pages/card/memberAccount/index.jsx
  2. +301
    -2
      src/pages/card/memberCard/index.jsx
  3. +259
    -2
      src/pages/card/storedValueCard/index.jsx

+ 241
- 3
src/pages/card/memberAccount/index.jsx View File

@@ -1,16 +1,254 @@
import React from "react";
import React, { useRef, useState } from "react";
import styles from "./index.less"; import styles from "./index.less";
import { PageContainer } from '@ant-design/pro-layout'; 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 * @returns
*/ */
const memberAccount = () => { 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) => [
<a onClick={() => onEditTableRow(record)}>编辑</a>,
<Popconfirm
title="你确定要删除此条数据吗？"
onConfirm={() => onDeleteTableRow(record)}
okText="确定"
cancelText="取消"
>
<a href="#">删除</a>
</Popconfirm>
],
},
];


return ( return (
<PageContainer> <PageContainer>
<div className={styles.member_card_container}> <div className={styles.member_card_container}>
储值卡会员账户管理
<ProTable
columns={columns}
actionRef={actionRef}
request={
() => {
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={() => [
<Button key="button" icon={<PlusOutlined />} type="primary" onClick={onCreateTableRow}>
新建
</Button>
]}
/>
<Modal width={600} title={currentOption.id ? '编辑会员' : '添加会员'} visible={isModalOpen} footer={false} onCancel={() => setIsModalOpen(false)}>
<Form
name="basic"
onFinish={onFinish}
>

<Form.Item
label="id"
name="id"
hidden={true}
>
<Input />
</Form.Item>

<Form.Item
label="姓名"
name="name"
rules={[
{
required: true,
message: '请输入姓名！',
},
]}
>
<Input />
</Form.Item>

<Form.Item
label="会员ID"
name="cardId"
rules={[
{
required: true,
message: '请输入会员ID！',
},
]}
>
<Input />
</Form.Item>

<Form.Item
label="状态"
name="status"
rules={[
{
required: true,
message: '请输入选择状态！',
},
]}
>
<Select>
<Select.Option value={0}>禁用</Select.Option>
<Select.Option value={1}>正常</Select.Option>
<Select.Option value={2}>挂失</Select.Option>
<Select.Option value={3}>作废</Select.Option>
</Select>
</Form.Item>

<Form.Item
label="余额"
name="money"
rules={[
{
required: true,
message: '请输入余额！',
},
]}
>
<Input />
</Form.Item>

<Form.Item>
<Button type="primary" htmlType="submit">
确定
</Button>
</Form.Item>
</Form>
</Modal>
</div> </div>
</PageContainer> </PageContainer>
) )


+ 301
- 2
src/pages/card/memberCard/index.jsx View File

@@ -1,16 +1,315 @@
import React from "react";
import React, { useRef, useState } from "react";
import styles from "./index.less"; import styles from "./index.less";
import { PageContainer } from '@ant-design/pro-layout'; 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 * @returns
*/ */
const memberCard = () => { 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) => [
<a onClick={() => onEditTableRow(record)}>编辑</a>,
<Popconfirm
title="你确定要删除此条数据吗？"
onConfirm={() => onDeleteTableRow(record)}
okText="确定"
cancelText="取消"
>
<a href="#">删除</a>
</Popconfirm>
],
},
];


return ( return (
<PageContainer> <PageContainer>
<div className={styles.member_card_container}> <div className={styles.member_card_container}>
储值卡会员管理页面
<ProTable
columns={columns}
actionRef={actionRef}
request={
() => {
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={() => [
<Button key="button" icon={<PlusOutlined />} type="primary" onClick={onCreateTableRow}>
新建
</Button>
]}
/>
<Modal width={600} title={currentOption.id ? '编辑会员' : '添加会员'} visible={isModalOpen} footer={false} onCancel={() => setIsModalOpen(false)}>
<Form
name="basic"
onFinish={onFinish}
>

<Form.Item
label="id"
name="id"
hidden={true}
>
<Input />
</Form.Item>

<Form.Item
label="姓名"
name="name"
rules={[
{
required: true,
message: '请输入姓名！',
},
]}
>
<Input />
</Form.Item>

<Form.Item
label="会员ID"
name="cardId"
rules={[
{
required: true,
message: '请输入会员ID！',
},
]}
>
<Input />
</Form.Item>

<Form.Item
label="状态"
name="status"
rules={[
{
required: true,
message: '请输入选择状态！',
},
]}
>
<Select>
<Select.Option value={true}>启用</Select.Option>
<Select.Option value={false}>停用</Select.Option>
</Select>
</Form.Item>

<Form.Item
label="电话"
name="phone"
rules={[
{
required: true,
message: '请输入电话！',
},
]}
>
<Input />
</Form.Item>

<Form.Item
label="性别"
name="sex"
rules={[
{
required: true,
message: '请输入选择性别！',
},
]}
>
<Select>
<Select.Option value={1}>男性</Select.Option>
<Select.Option value={0}>女性</Select.Option>
</Select>
</Form.Item>

<Form.Item
label="身份证"
name="identityCard"
rules={[
{
required: true,
message: '请输入身份证！',
},
]}
>
<Input />
</Form.Item>

<Form.Item
label="生日"
name="birthday"
rules={[
{
required: true,
message: '请输入选择生日！',
},
]}
>
<DatePicker style={{width: '100%'}} />
</Form.Item>

<Form.Item>
<Button type="primary" htmlType="submit">
确定
</Button>
</Form.Item>
</Form>
</Modal>
</div> </div>
</PageContainer> </PageContainer>
) )


+ 259
- 2
src/pages/card/storedValueCard/index.jsx View File

@@ -1,16 +1,273 @@
import React from "react";
import React, { useRef, useState } from "react";
import styles from "./index.less"; import styles from "./index.less";
import { PageContainer } from '@ant-design/pro-layout'; 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 * @returns
*/ */
const storedValueCard = () => { 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) => [
<a onClick={() => onEditTableRow(record)}>编辑</a>,
<Popconfirm
title="你确定要删除此条数据吗？"
onConfirm={() => onDeleteTableRow(record)}
okText="确定"
cancelText="取消"
>
<a href="#">删除</a>
</Popconfirm>
],
},
];


return ( return (
<PageContainer> <PageContainer>
<div className={styles.member_card_container}> <div className={styles.member_card_container}>
储值卡管理
<ProTable
columns={columns}
actionRef={actionRef}
request={
() => {
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={() => [
<Button key="button" icon={<PlusOutlined />} type="primary" onClick={onCreateTableRow}>
新建
</Button>
]}
/>
<Modal width={600} title={currentOption.id ? '编辑会员' : '添加会员'} visible={isModalOpen} footer={false} onCancel={() => setIsModalOpen(false)}>
<Form
name="basic"
onFinish={onFinish}
>

<Form.Item
label="id"
name="id"
hidden={true}
>
<Input />
</Form.Item>

<Form.Item
label="卡号"
name="cardNum"
rules={[
{
required: true,
message: '请输入卡号！',
},
]}
>
<Input />
</Form.Item>

<Form.Item
label="会员ID"
name="cardId"
rules={[
{
required: true,
message: '请输入会员ID！',
},
]}
>
<Input />
</Form.Item>

<Form.Item
label="状态"
name="status"
rules={[
{
required: true,
message: '请输入选择状态！',
},
]}
>
<Select>
<Select.Option value={0}>禁用</Select.Option>
<Select.Option value={1}>正常</Select.Option>
<Select.Option value={2}>挂失</Select.Option>
<Select.Option value={3}>作废</Select.Option>
</Select>
</Form.Item>

<Form.Item
label="类型"
name="type"
rules={[
{
required: true,
message: '请输入类型！',
},
]}
>
<Select>
<Select.Option value={0}>人脸</Select.Option>
<Select.Option value={1}>实体卡</Select.Option>
<Select.Option value={2}>指纹</Select.Option>
</Select>
</Form.Item>

<Form.Item>
<Button type="primary" htmlType="submit">
确定
</Button>
</Form.Item>
</Form>
</Modal>
</div> </div>
</PageContainer> </PageContainer>
) )


Write Preview
Loading…
Cancel
Save