From 8f4acc38ac7172c088033190f11db04d53d84be3 Mon Sep 17 00:00:00 2001 From: yangwenhua <1289978696@qq.com> Date: Tue, 20 Sep 2022 18:24:39 +0800 Subject: [PATCH] =?UTF-8?q?=E5=BF=AB=E9=80=9F=E5=BC=80=E5=A7=8B=EF=BC=9A?= =?UTF-8?q?=E5=AE=8C=E6=88=90=E9=97=A8=E5=BA=97=E9=85=8D=E7=BD=AE=E3=80=81?= =?UTF-8?q?=E8=AE=BE=E5=A4=87=E9=85=8D=E7=BD=AE=E3=80=81=E8=8F=9C=E8=B0=B1?= =?UTF-8?q?=E9=85=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/DeviceConfig/index.jsx | 284 ++++++++++++++ .../components/DeviceConfig/index.less | 10 + .../components/FoodMenuConfig/index.jsx | 43 +++ .../components/FoodMenuConfig/index.less | 0 .../components/StepsButton/index.jsx | 32 ++ .../components/StepsButton/index.less | 5 + .../components/StoreConfig/index.jsx | 361 ++++++++++++++---- .../components/StoreConfig/index.less | 8 + src/pages/quickStart/index.jsx | 140 ++++--- src/pages/quickStart/index.less | 6 +- src/pages/quickStart/service.js | 69 ++++ 11 files changed, 805 insertions(+), 153 deletions(-) create mode 100644 src/pages/quickStart/components/DeviceConfig/index.jsx create mode 100644 src/pages/quickStart/components/DeviceConfig/index.less create mode 100644 src/pages/quickStart/components/FoodMenuConfig/index.jsx create mode 100644 src/pages/quickStart/components/FoodMenuConfig/index.less create mode 100644 src/pages/quickStart/components/StepsButton/index.jsx create mode 100644 src/pages/quickStart/components/StepsButton/index.less create mode 100644 src/pages/quickStart/service.js diff --git a/src/pages/quickStart/components/DeviceConfig/index.jsx b/src/pages/quickStart/components/DeviceConfig/index.jsx new file mode 100644 index 0000000..515f402 --- /dev/null +++ b/src/pages/quickStart/components/DeviceConfig/index.jsx @@ -0,0 +1,284 @@ +import React, { useState, useEffect, useRef } from 'react'; +import { Form, Input, Select, InputNumber, TreeSelect, message, Button, Modal } from 'antd'; +import ProTable from '@ant-design/pro-table'; +import quickAPI from "../../service"; +import StepsButton from "../StepsButton"; +import styles from "./index.less"; + + +const DeviceConfig = (props) => { + const { Option, OptGroup } = Select; + const [addDeviceTypeForm] = Form.useForm(); + + //设备类型列表 + const [deviceTypeList, setDeviceTypeList] = useState([]); + //设备分类 + const [deviceClassList, setDeviceClassList] = useState([]); + //组织树 + const [orgTree, setOrgTree] = useState([]); + //设备版本 + const [deviceVersion, setDeviceVersion] = useState([]); + //是否显示设备分类弹窗 + const [isModalOpen, setIsModalOpen] = useState(false); + + /** + * 提交表单 + * @param {*} formValues + */ + const onFinishSubmit = (formValues) => { + props.onFinishForm('devicConfig', formValues); + } + + /** + * 获取设备类型列表 + */ + const onFetchDeviceTypeList = async () => { + const response = await quickAPI.GetDicList('DeviceClientType'); + if (response.statusCode === 200) { + setDeviceTypeList(response.data); + } else { + message.error(response.errors || '获取设备类型出错'); + } + } + + //获取组织树 + const onFetchOrgTree = async () => { + const response = await quickAPI.getOrgTree(); + if (response.statusCode === 200) { + setOrgTree(response.data); + } else { + message.error(response.errors || '获取组织架构出错'); + } + } + + /** + * 获取设备分类 + */ + const onFetchDeviceClass = async () => { + const response = await quickAPI.GetDeviceType(); + if (response.statusCode === 200) { + response.data.forEach(item => item.value = item.deviceName); + setDeviceClassList(response.data); + } else { + message.error(response.errors || '获取设备分类出错'); + } + } + + /** + * 获取设备版本 + */ + const onFetchDeviceVersion = async () => { + const response = await quickAPI.GetDeviceVersions(); + if (response.statusCode === 200) { + setDeviceVersion(response.data); + } else { + message.error(response.errors || '获取设备版本出错'); + } + } + + /** + * 添加设备分类 + */ + const onSaveDeviceType = async (values) => { + const response = await quickAPI.AddDeviceType(values); + if (response.data) { + message.success('设备分类添加成功!'); + setIsModalOpen(false); + onFetchDeviceClass(); + } else { + message.error(response.errors || '添加设备分类出错'); + } + } + + const actionRef = useRef(); + const [selectedRowsState, setSelectedRows] = useState([]); + const columns = [ + { + title: '主键', + dataIndex: 'id', + hideInSearch: true, + hideInTable: true, + tip: '规则名称是唯一的 key', + }, + { + title: '设备名称', + dataIndex: 'deviceName', + valueType: 'textarea', + }, + { + title: '设备类型', + dataIndex: 'deviceTypeKey', + valueEnum: deviceTypeList, + hideInSearch: true, + }, + { + title: '设备分类', + dataIndex: 'deviceTypeId', + valueEnum: deviceClassList, + }, + { + title: '状态', + dataIndex: 'status', + valueEnum: { + 0: { text: '正常', status: 'Processing' }, + 1: { text: '停用', status: 'Success' }, + }, + hideInSearch: true, + } + ]; + + useEffect(() => { + onFetchOrgTree(); + onFetchDeviceClass(); + onFetchDeviceTypeList(); + onFetchDeviceVersion(); + }, []); + + return <> +
+ + + + + + + + + + + + + + +
+ + + + +
+ + prevValues.deviceTypeKey !== currentValues.deviceTypeKey} + > + {({ getFieldValue }) => + getFieldValue('deviceTypeKey') === 'TMC' ? ( + + + + ) : null + } + + + + + + + + + + + + + + + + +
+ + { + let data = []; + let total = 0; + await quickAPI.GetDeviceInfoPage(params).then((r) => { + data = r.data.data; + total = r.data.total; + }); + return { + data: data, + success: true, + total: total, + }; + }} + columns={columns} + rowSelection={{ + onChange: (_, selectedRows) => { + setSelectedRows(selectedRows); + }, + }} + /> + + setIsModalOpen(false)}> +
+ + + + + + + + +
+
+ +} + +export default DeviceConfig; \ No newline at end of file diff --git a/src/pages/quickStart/components/DeviceConfig/index.less b/src/pages/quickStart/components/DeviceConfig/index.less new file mode 100644 index 0000000..104755a --- /dev/null +++ b/src/pages/quickStart/components/DeviceConfig/index.less @@ -0,0 +1,10 @@ +.add_row_content { + position: relative; +} + +.add_row_btn { + position: absolute; + top: 50%; + transform: translateY(-50%); + right: -100px +} \ No newline at end of file diff --git a/src/pages/quickStart/components/FoodMenuConfig/index.jsx b/src/pages/quickStart/components/FoodMenuConfig/index.jsx new file mode 100644 index 0000000..73ea69e --- /dev/null +++ b/src/pages/quickStart/components/FoodMenuConfig/index.jsx @@ -0,0 +1,43 @@ +import React, { useState, useEffect } from 'react'; +import { Form, Input, Select, InputNumber, TreeSelect, message, Button, Modal } from 'antd'; +import quickAPI from "../../service"; +import StepsButton from "../StepsButton"; +import styles from "./index.less"; + + +const FoodMenuConfig = (props) => { + + /** + * 提交表单 + * @param {*} formValues + */ + const onFinishSubmit = (formValues) => { + props.onFinishForm('foodMenuConfig', formValues); + } + + return <> +
+ + + + + + + + + + + +
+ +} + +export default FoodMenuConfig; \ No newline at end of file diff --git a/src/pages/quickStart/components/FoodMenuConfig/index.less b/src/pages/quickStart/components/FoodMenuConfig/index.less new file mode 100644 index 0000000..e69de29 diff --git a/src/pages/quickStart/components/StepsButton/index.jsx b/src/pages/quickStart/components/StepsButton/index.jsx new file mode 100644 index 0000000..00cad05 --- /dev/null +++ b/src/pages/quickStart/components/StepsButton/index.jsx @@ -0,0 +1,32 @@ +import { Button } from 'antd'; +import styles from "./index.less"; + + +const StepsButton = (props) => { + return
+ {props.current > 0 && ( + + )} + + {props.current < props.steps.length - 1 && ( + + )} + + {props.current === props.steps.length - 1 && ( + + )} +
+} + +export default StepsButton; \ No newline at end of file diff --git a/src/pages/quickStart/components/StepsButton/index.less b/src/pages/quickStart/components/StepsButton/index.less new file mode 100644 index 0000000..1216f7b --- /dev/null +++ b/src/pages/quickStart/components/StepsButton/index.less @@ -0,0 +1,5 @@ +.steps_btns { + display: flex; + justify-content: center; + align-items: center; +} \ No newline at end of file diff --git a/src/pages/quickStart/components/StoreConfig/index.jsx b/src/pages/quickStart/components/StoreConfig/index.jsx index 6028f3d..928b959 100644 --- a/src/pages/quickStart/components/StoreConfig/index.jsx +++ b/src/pages/quickStart/components/StoreConfig/index.jsx @@ -1,91 +1,292 @@ -import React, { useState } from 'react'; -import { Modal, Form, Input, Button, Select, InputNumber, TreeSelect } from 'antd'; +import React, { useState, useEffect, useRef } from 'react'; +import { Form, Input, Select, InputNumber, TreeSelect, message, Radio } from 'antd'; +import { ProTable } from '@ant-design/pro-table'; +import StepsButton from "../StepsButton"; +import quickAPI from "../../service"; +import styles from "./index.less"; const StoreConfig = (props) => { const { TextArea } = Input; const { Option, OptGroup } = Select; + const [storeForm] = Form.useForm(); + //组织树 + const [orgTree, setOrgTree] = useState([]); + //支付方式列表 + const [payTypeList, setPayTypeList] = useState([]); - return <> -
- - - - - - - - - - + //提交表单 + const onFinishSubmit = (formValues) => { + props.onFinishForm('storeConfig', formValues, true); + } - - - - { + storeForm.resetFields(); + setIsCreateStore(value); + if (value) { + let emptyStore = { + id: "", + code: "", + name: "", + pid: "", + type: 0, + payTemplateId: "", + store_Addr: "", + store_Loc: "", + tel: "", + sort: 1, + remark: "" + } + props.onFinishForm('storeConfig', emptyStore); + storeForm.setFieldsValue(emptyStore); + setSelectedRows([]) + } + } + + const actionRef = useRef(); + + //获取组织树 + const onFetchOrgTree = async () => { + const response = await quickAPI.getOrgTree(); + if (response.statusCode === 200) { + const org = [ + { + key: '0', + parentId: '0', + title: '顶级', + value: '0', + children: response.data || [], + } + ] + setOrgTree(org); + } else { + message.error(response.errors || '获取组织架构出错'); + } + } + + //获取支付配置 + const getPayTemplateList = async () => { + const response = await quickAPI.getPayTemplateList(); + if (response.statusCode === 200) { + setPayTypeList(response.data.data); + } else { + message.error(response.errors || '获取获取支付方式出错'); + } + } + + //组织列表 + const columns = [ + { + title: '主键', + dataIndex: 'id', + tip: 'key', + hideInSearch: true, + hideInTable: true, + }, + { + title: '组织名称', + dataIndex: 'name', + }, + { + title: '组织类型', + dataIndex: 'type', + valueEnum: { + 0: { + text: '机构', + }, + 1: { + text: '配送中心', + }, + 2: { + text: '直营店', + }, + 3: { + text: '加盟店', + }, + }, + } + ]; + + const [selectedRows, setSelectedRows] = useState(props.storeConfig.id ? [props.storeConfig.id] : []); + + /** + * 选择组织 + */ + const rowSelection = { + onChange: (selectedRowKeys, selectedRows) => { + if (selectedRows.length > 0) { + props.onFinishForm('storeConfig', selectedRows[0]); + storeForm.setFieldsValue(selectedRows[0]); + setSelectedRows(selectedRows); + } else { + let emptyStore = { + id: "", + code: "", + name: "", + pid: "", + type: 0, + payTemplateId: "", + store_Addr: "", + store_Loc: "", + tel: "", + sort: 1, + remark: "" + } + props.onFinishForm('storeConfig', emptyStore); + storeForm.setFieldsValue(emptyStore); + setSelectedRows([]) + } + }, + selectedRowKeys: selectedRows + }; + + useEffect(() => { + onFetchOrgTree(); + getPayTemplateList(); + }, []); + + return
+
+ +
+ +
+ - - - - - - - - - - - - - - - -