From 9a50fac95efb39670a0b95d0a49a4cd10175a50f Mon Sep 17 00:00:00 2001
From: yangwenhua <1289978696@qq.com>
Date: Tue, 13 Sep 2022 15:48:34 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=A7=E5=B1=8F=E6=A8=AA=E5=B9=85=E5=AF=8C?=
 =?UTF-8?q?=E6=96=87=E6=9C=AC=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/card/gate/index.jsx    | 274 ++++++++++++++++++-------------
 src/pages/card/machine/index.jsx |   1 -
 src/pages/card/service.js        |   6 +
 3 files changed, 169 insertions(+), 112 deletions(-)

diff --git a/src/pages/card/gate/index.jsx b/src/pages/card/gate/index.jsx
index 8d298ec..f3aeb29 100644
--- a/src/pages/card/gate/index.jsx
+++ b/src/pages/card/gate/index.jsx
@@ -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>
     )
diff --git a/src/pages/card/machine/index.jsx b/src/pages/card/machine/index.jsx
index e240d46..fc56f4c 100644
--- a/src/pages/card/machine/index.jsx
+++ b/src/pages/card/machine/index.jsx
@@ -200,7 +200,6 @@ const Machine = () => {
                             <Select style={{ width: 300 }} value={selectedStore} onChange={(value) => {
                                 setSelectedStore(value);
                                 onFetchGateList(value);
-                                actionRef.current.reload();
                             }}>
                                 {
                                     storeList.map(item => {
diff --git a/src/pages/card/service.js b/src/pages/card/service.js
index 580f43d..e25c5af 100644
--- a/src/pages/card/service.js
+++ b/src/pages/card/service.js
@@ -82,4 +82,10 @@ export default {
     },
     /** 刷卡机管理：End */
 
+    GetCosRequestURL(data) {
+		return request(`/kitchen/api/systemconfig/GetCosRequestSignURL`, {
+			method: 'POST',
+			data: data,
+		});
+	},
 }
\ No newline at end of file