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
0f84473208
commit
9a50fac95e
3 changed files with 169 additions and 112 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +163
    -111
      src/pages/card/gate/index.jsx
  2. +0
    -1
      src/pages/card/machine/index.jsx
  3. +6
    -0
      src/pages/card/service.js

+ 163
- 111
src/pages/card/gate/index.jsx View File

@@ -1,11 +1,15 @@
import React, { useRef, useState, useEffect } 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, Modal, Select, Popconfirm, message } from 'antd';
import { Button, Form, Input, Select, Drawer, message, Col, Row } from 'antd';
import styles from "./index.less";
import '@wangeditor/editor/dist/css/style.css'
import { Editor, Toolbar } from '@wangeditor/editor-for-react'
import axios from 'axios';
import cardAPI from "../service";


/**
* 档口管理
* @returns
@@ -20,6 +24,52 @@ const Gate = () => {
const [current, setCurrent] = useState(1);
const [pageSize, setPageSize] = useState(10);

// editor 实例
const [editor, setEditor] = useState(null);
// 编辑器内容
const [html, setHtml] = useState('');
// 工具栏配置
const toolbarConfig = {};
// 编辑器配置
const editorConfig = {
placeholder: '请输入大屏横幅...',
MENU_CONF: {
uploadImage: {
async customUpload(file, insertFn) {
// file 即选中的文件
// 自己实现上传，并得到图片 url alt href
//覆盖action 上传之前获取上传地址
let index = file.name.lastIndexOf(".");
let ext = file.name.substr(index + 1);
let fileData = null;
cardAPI.GetCosRequestURL({ directory: "kitchen", fileExtension: ext, method: "PUT" }).then((r) => {
const action = r.allUrl;
const reader = new FileReader();
reader.readAsArrayBuffer(file);
reader.onload = (e) => {
fileData = e.target.result;
axios.put(action, fileData).then(response => {
if (response.status == 200 || response.statusText == 'OK') {
// 最后插入图片
insertFn(r.seeUrl, r.seeUrl, r.seeUrl);
message.success('上传成功！');
}
});
};
});

}
}
}
}

// 及时销毁 editor ，重要！
useEffect(() => {
if (editor == null) return
editor.destroy()
setEditor(null)
}, [isModalOpen])

/**
* 点击编辑按钮
* @param {*} record
@@ -27,6 +77,7 @@ const Gate = () => {
const onEditTableRow = (record) => {
setCurrentOption(record);
setIsModalOpen(true);
setHtml(record.remaek);
modalForm.setFieldsValue(record);
}

@@ -38,19 +89,13 @@ const Gate = () => {
modalForm.resetFields();
}

/**
* 删除数据
* @param {*} record
*/
const onDeleteTableRow = (record) => {
console.log('删除', record)
}

/**
* 提交表单
*/
const onFinish = async (values) => {
if (values.id) {
values.remaek = html;
const response = await cardAPI.UpdateGateInfo(values);
if (response.statusCode === 200) {
message.success('更新档口成功！');
@@ -60,6 +105,7 @@ const Gate = () => {
message.error(response.errors || '更新档口失败');
}
} else {
values.remaek = html;
const response = await cardAPI.AddGate(values);
if (response.statusCode === 200) {
message.success('新增档口成功！');
@@ -125,10 +171,6 @@ const Gate = () => {
}
},
},
{
title: '大屏横幅',
dataIndex: 'remaek',
},
{
title: '操作',
valueType: 'option',
@@ -215,121 +257,131 @@ const Gate = () => {
</Button>
]}
/>
<Modal width={600} title={currentOption.id ? '编辑档口' : '添加档口'} visible={isModalOpen} footer={false} onCancel={() => setIsModalOpen(false)}>
<Drawer width={1500} title={currentOption.id ? '编辑档口' : '添加档口'} visible={isModalOpen} onClose={() => setIsModalOpen(false)}>
<Form
name="basic"
onFinish={onFinish}
form={modalForm}
labelCol={{ span: 4 }}
>

<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="归属门店"
name="storeId"
rules={[
{
required: true,
message: '请输入归属门店！',
},
]}
>
<Select>
{
storeList.map(store => {
return (
<Select.Option key={store.id} value={store.id}>{store.store_Name}</Select.Option>
)
})
}
</Select>
</Form.Item>

<Form.Item
label="属性"
name="mode"
rules={[
{
required: true,
message: '请输入选择属性！',
},
]}
>
<Select>
<Select.Option value={1}>固定金额</Select.Option>
<Select.Option value={2}>自由设定</Select.Option>
</Select>
</Form.Item>

<Form.Item
label="金额"
name="price"
rules={[
{
required: true,
message: '请输入金额！',
},
]}
>
<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>
</Form.Item>

<Form.Item
label="大屏横幅"
name="remaek"
rules={[
{
required: true,
message: '请输入大屏横幅！',
},
]}
>
<Input />
<Input size="large" />
</Form.Item>

<Row>
<Col xs={12} sm={12} md={12} lg={12} xl={12}>
<Form.Item
label="档口名称"
name="name"
rules={[
{
required: true,
message: '请输入档口名称！',
},
]}
>
<Input size="large" />
</Form.Item>
</Col>
<Col xs={12} sm={12} md={12} lg={12} xl={12}>
<Form.Item
label="归属门店"
name="storeId"
rules={[
{
required: true,
message: '请输入归属门店！',
},
]}
>
<Select size="large">
{
storeList.map(store => {
return (
<Select.Option key={store.id} value={store.id}>{store.store_Name}</Select.Option>
)
})
}
</Select>
</Form.Item>
</Col>
<Col xs={12} sm={12} md={12} lg={12} xl={12}>
<Form.Item
label="属性"
name="mode"
rules={[
{
required: true,
message: '请输入选择属性！',
},
]}
>
<Select size="large">
<Select.Option value={1}>固定金额</Select.Option>
<Select.Option value={2}>自由设定</Select.Option>
</Select>
</Form.Item>
</Col>
<Col xs={12} sm={12} md={12} lg={12} xl={12}>
<Form.Item
label="金额"
name="price"
rules={[
{
required: true,
message: '请输入金额！',
},
]}
>
<Input size="large" />
</Form.Item>
</Col>
<Col xs={12} sm={12} md={12} lg={12} xl={12}>
<Form.Item
label="状态"
name="status"
rules={[
{
required: true,
message: '请输入类型！',
}
]}
>
<Select size="large">
<Select.Option value={0}>正常</Select.Option>
<Select.Option value={1}>禁用</Select.Option>
<Select.Option value={2}>删除</Select.Option>
</Select>
</Form.Item>
</Col>
</Row>
<div style={{ border: '1px solid #ccc', zIndex: 100 }}>
<Toolbar
editor={editor}
defaultConfig={toolbarConfig}
mode="default"
style={{ borderBottom: '1px solid #ccc' }}
/>
<Editor
defaultConfig={editorConfig}
value={html}
onCreated={setEditor}
onChange={editor => setHtml(editor.getHtml())}
mode="default"
style={{ height: '500px', overflowY: 'hidden' }}
/>
</div>
<Form.Item>
<Button type="primary" htmlType="submit">
<Button type="primary" htmlType="submit" style={{ marginTop: '10px' }}>
确定
</Button>
</Form.Item>
</Form>
</Modal>
</Drawer>
</div>
</PageContainer>
)


+ 0
- 1
src/pages/card/machine/index.jsx View File

@@ -200,7 +200,6 @@ const Machine = () => {
<Select style={{ width: 300 }} value={selectedStore} onChange={(value) => {
setSelectedStore(value);
onFetchGateList(value);
actionRef.current.reload();
}}>
{
storeList.map(item => {


+ 6
- 0
src/pages/card/service.js View File

@@ -82,4 +82,10 @@ export default {
},
/** 刷卡机管理：End */

GetCosRequestURL(data) {
return request(`/kitchen/api/systemconfig/GetCosRequestSignURL`, {
method: 'POST',
data: data,
});
},
}

Write Preview
Loading…
Cancel
Save