Skip to content

D
Dui123
Commit dcca1194 authored by rzf's avatar rzf
Browse files
Options

后台页面

parent f6532b36
Show whitespace changes
Inline Side-by-side
Showing with 397 additions and 75 deletions
src/component/AdminIndex/AdminIndex.jsx
View file @ dcca1194
...@@ -6,6 +6,7 @@ import ToolModal from '../../modal/ToolModal' ...@@ -6,6 +6,7 @@ import ToolModal from '../../modal/ToolModal'
import PublishModal from '../../modal/PublishModal' import PublishModal from '../../modal/PublishModal'
import TypeModal from '../../modal/TypeModal' import TypeModal from '../../modal/TypeModal'
import PageModal from '../../modal/PageModal' import PageModal from '../../modal/PageModal'
import RemoveType from '../../modal/RemoveType'
import { useContext, useEffect, useState } from "react"; import { useContext, useEffect, useState } from "react";
function AdminIndex() { function AdminIndex() {
...@@ -13,6 +14,7 @@ function AdminIndex() { ...@@ -13,6 +14,7 @@ function AdminIndex() {
const [publish, setPublish] = useState(false) const [publish, setPublish] = useState(false)
const [typeModal, setTypeModal] = useState(false) const [typeModal, setTypeModal] = useState(false)
const [pageModal, setpageModal] = useState(false) const [pageModal, setpageModal] = useState(false)
const [removeType, setremoveType] = useState(false)
return ( return (
<div className='admin'> <div className='admin'>
...@@ -20,6 +22,7 @@ function AdminIndex() { ...@@ -20,6 +22,7 @@ function AdminIndex() {
<Button onClick={() => setTypeModal(true)}>新建类型</Button> <Button onClick={() => setTypeModal(true)}>新建类型</Button>
<Button onClick={() => setPublish(true)}>发布</Button> <Button onClick={() => setPublish(true)}>发布</Button>
<Button onClick={() => setpageModal(true)}>页面管理</Button> <Button onClick={() => setpageModal(true)}>页面管理</Button>
<Button onClick={() => setremoveType(true)}>类型管理</Button>
{visible && <ToolModal {visible && <ToolModal
visible={visible} visible={visible}
onCancel={() => onCancel={() =>
...@@ -44,6 +47,12 @@ function AdminIndex() { ...@@ -44,6 +47,12 @@ function AdminIndex() {
setpageModal(false) setpageModal(false)
} }
/>} />}
{removeType && <RemoveType
visible={removeType}
onCancel={() =>
setremoveType(false)
}
/>}
</div> </div>
) )
} }
......
src/component/AdminIndex/AdminIndex.scss
View file @ dcca1194
.admin { .admin {
float: left; position: fixed;
top: 40%;
.ant-btn{ .ant-btn{
width: 100px !important; width: 100px !important;
} }
......
src/component/ToolType/ToolType.jsx
View file @ dcca1194
...@@ -46,7 +46,7 @@ function ToolType(props) { ...@@ -46,7 +46,7 @@ function ToolType(props) {
}) })
} }
</div> </div>
<div className="child-type"> {/* <div className="child-type">
{ {
dataCenter?.type?.length && dataCenter.type.filter(v => v.typeId === typeId)[0].typeContent.map(v => { dataCenter?.type?.length && dataCenter.type.filter(v => v.typeId === typeId)[0].typeContent.map(v => {
return ( return (
...@@ -54,7 +54,7 @@ function ToolType(props) { ...@@ -54,7 +54,7 @@ function ToolType(props) {
) )
}) })
} }
</div> </div> */}
</> </>
) )
} }
......
src/config/apiConfig.js
View file @ dcca1194
const apiConfig = { const apiConfig = {
domain: 'http://' + '172.16.231.162' + ':3001', domain: 'http://' + '172.16.130.180' + ':3001',
} }
export default apiConfig export default apiConfig
src/dataCenter/Root.jsx
View file @ dcca1194
...@@ -30,6 +30,7 @@ function DataCenter(props) { ...@@ -30,6 +30,7 @@ function DataCenter(props) {
fetch(generateUrl(path, requestData), {credentials: 'include'}) fetch(generateUrl(path, requestData), {credentials: 'include'})
.then(res => res.json()) .then(res => res.json())
.then(res => { .then(res => {
console.log(res);
if (res.success) { if (res.success) {
!!dataName && dispatch(UPDATE_DATA({[dataName]: res.data})) !!dataName && dispatch(UPDATE_DATA({[dataName]: res.data}))
} else { } else {
......
src/modal/PageModal.jsx
View file @ dcca1194
import React, { useState } from 'react'; import React, { useState, useEffect, useContext } from 'react';
import { Root } from "../dataCenter/Root";
import { Button, Modal, Form, Input, Radio, Select, Table, Space } from 'antd'; import { Button, Modal, Form, Input, Radio, Select, Table, Space } from 'antd';
import PublishModal from "./PublishModal" import PublishModal from "./PublishModal"
...@@ -6,6 +7,7 @@ function PageModal({ visible, onCancel, onPublish }) { ...@@ -6,6 +7,7 @@ function PageModal({ visible, onCancel, onPublish }) {
const [publish, setPublish] = useState(false) const [publish, setPublish] = useState(false)
const [pageData, setpageData] = useState('') const [pageData, setpageData] = useState('')
const { fetchData, updateIndex, dataCenter } = useContext(Root)
const onChangePage = (values) => { const onChangePage = (values) => {
console.log(values); console.log(values);
...@@ -17,20 +19,36 @@ function PageModal({ visible, onCancel, onPublish }) { ...@@ -17,20 +19,36 @@ function PageModal({ visible, onCancel, onPublish }) {
// setVisible(false); // setVisible(false);
}; };
const columns = [ const columns = [
{
title: '页面Id',
dataIndex: 'pageId',
width: 150,
align: 'center'
},
{ {
title: '页面名称', title: '页面名称',
dataIndex: 'name', dataIndex: 'pageName',
width: 200, width: 200,
align: 'center'
}, },
{ {
title: '页面类型', title: '页面Url',
dataIndex: 'age', dataIndex: 'pageUrl',
width: 300, width: 300,
align: 'center',
render: (text, record) => (
<Space size="middle">
<a href={record.pageUrl}>{record.pageUrl}</a>
</Space>
),
}, },
{ {
title: '操作', title: '操作',
key: 'action', key: 'action',
align: 'center',
width: 100, width: 100,
render: (text, record) => ( render: (text, record) => (
<Space size="middle"> <Space size="middle">
...@@ -40,6 +58,17 @@ function PageModal({ visible, onCancel, onPublish }) { ...@@ -40,6 +58,17 @@ function PageModal({ visible, onCancel, onPublish }) {
), ),
}, },
]; ];
useEffect(() => {
console.log(dataCenter);
dataCenter?.type && fetchData('/page/queryPage', {}, 'queryPage')
.then((res) => {
updateIndex()
})
}, [])
const data = [ const data = [
{ {
key: '1', key: '1',
...@@ -125,7 +154,7 @@ function PageModal({ visible, onCancel, onPublish }) { ...@@ -125,7 +154,7 @@ function PageModal({ visible, onCancel, onPublish }) {
onCancel={onCancel} onCancel={onCancel}
onOk={onCancel} onOk={onCancel}
> >
<Table columns={columns} dataSource={data} pagination={{ pageSize: 10 }} size="middle" /> <Table columns={columns} dataSource={dataCenter?.queryPage && dataCenter.queryPage} pagination={{ pageSize: 10 }} size="middle" />
</Modal> </Modal>
{publish && <PublishModal {publish && <PublishModal
visible={publish} visible={publish}
......
src/modal/PublishModal.jsx
View file @ dcca1194
import './PublishModal.scss' import './PublishModal.scss'
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect, useContext } from 'react';
import { Root } from "../dataCenter/Root";
import { UnControlled as CodeMirror } from 'react-codemirror2' import { UnControlled as CodeMirror } from 'react-codemirror2'
import { Button, Modal, Form, Input, Radio, Select, message } from 'antd'; import { Button, Modal, Form, Input, Radio, Select, message } from 'antd';
import apiConfig from "../config/apiConfig";
import 'codemirror/addon/display/autorefresh'; import 'codemirror/addon/display/autorefresh';
import 'codemirror/addon/comment/comment'; import 'codemirror/addon/comment/comment';
...@@ -23,7 +25,8 @@ const PublishModal = ({ visible, onCancel, data }) => { ...@@ -23,7 +25,8 @@ const PublishModal = ({ visible, onCancel, data }) => {
const [code, setcode] = useState('') const [code, setcode] = useState('')
const [pageName, setPageName] = useState('') const [pageName, setPageName] = useState('')
const [oldCode, setoldCode] = useState('') const [oldCode, setoldCode] = useState('')
const { fetchData, updateIndex, dataCenter } = useContext(Root)
console.log(data);
const onCreate = (values) => { const onCreate = (values) => {
console.log(code); console.log(code);
...@@ -31,8 +34,33 @@ const PublishModal = ({ visible, onCancel, data }) => { ...@@ -31,8 +34,33 @@ const PublishModal = ({ visible, onCancel, data }) => {
message.error('请补全信息！') message.error('请补全信息！')
return return
} }
if (data) {
fetch('http://172.16.231.162:3001/submit/release', { fetch(`${apiConfig.domain}/page/updatePage`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
pageId: data.pageId,
pageName: pageName,
code: code
})
})
.then(response => response.json())
.then(data => {
if (data.success) {
onCancel()
message.success('发布成功！')
dataCenter?.type && fetchData('/page/queryPage', {}, 'queryPage')
.then((res) => {
updateIndex()
})
} else {
message.error(data.error || '发布失败')
}
});
} else {
fetch(`${apiConfig.domain}/page/addPage`, {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/json' 'Content-Type': 'application/json'
...@@ -43,13 +71,24 @@ const PublishModal = ({ visible, onCancel, data }) => { ...@@ -43,13 +71,24 @@ const PublishModal = ({ visible, onCancel, data }) => {
}) })
}) })
.then(response => response.json()) .then(response => response.json())
.then(data => console.log(data)); .then(data => {
if (data.success) {
onCancel() onCancel()
message.success('发布成功！')
dataCenter?.type && fetchData('/page/queryPage', {}, 'queryPage')
.then((res) => {
updateIndex()
})
} else {
message.error(data.error || '发布失败')
}
});
}
}; };
useEffect(() => { useEffect(() => {
// setPageName(data.name) data&&setPageName(data.pageName)
}, []) }, [data])
return ( return (
<Modal <Modal
...@@ -71,7 +110,7 @@ const PublishModal = ({ visible, onCancel, data }) => { ...@@ -71,7 +110,7 @@ const PublishModal = ({ visible, onCancel, data }) => {
}, },
]} ]}
> >
<Input placeholder="请输入页面名称" value={pageName} onChange={(e) => { setPageName(e.target.value) }} /> <Input placeholder="请输入页面名称" defaultValue={data?.pageName ? data.pageName : pageName} onChange={(e) => { setPageName(e.target.value) }} />
</Form.Item> </Form.Item>
<Form.Item <Form.Item
name="type" name="type"
......
src/modal/RemoveType.jsx 0 → 100644
View file @ dcca1194
import { Table, Badge, Menu, Dropdown, Popconfirm, Space, Modal } from 'antd';
import React, { useState, useEffect, useContext } from 'react';
import { DownOutlined } from '@ant-design/icons';
import TypeModal from '../modal/TypeModal'
import { Root } from "../dataCenter/Root";
const menu = (
<Menu>
<Menu.Item>Action 1</Menu.Item>
<Menu.Item>Action 2</Menu.Item>
</Menu>
);
function RemoveType({ visible, onCancel }) {
const [typeModal, setTypeModal] = useState(false)
const [oldData, setoldData] = useState('')
const { fetchData, updateIndex, dataCenter } = useContext(Root)
const changType = (data) => {
setoldData(data)
setTypeModal(true)
}
const removeType = (data) => {
console.log(data);
}
useEffect(() => {
dataCenter?.type && fetchData('/query/queryChildType', { typeId: dataCenter?.type[0]?.typeId }, 'childType')
.then((res) => {
updateIndex()
console.log(res);
})
}, [])
const columns = [
{ title: '类型名', width: 100, dataIndex: 'name', key: 'name' },
{ title: 'Id', width: 100, dataIndex: 'platform', align: 'center', key: 'platform' },
{
title: '操作', width: 100, key: 'operation', align: 'center',
render: (text, record) => (
<Space size="middle">
<Popconfirm title="确定删除吗？" okText="确定" cancelText="取消" onConfirm={() => removeType(record)}>
<a href="#">删除</a>
</Popconfirm>
<a href="#" onClick={() => changType(record)}>修改</a>
</Space>
)
},
];
const data = [{
key: 1,
name: '甲类型1',
platform: 'iOS',
version: '10.3.4.5654',
upgradeNum: 500,
creator: 'Jack',
createdAt: '2014-12-24 23:12:00',
children: [
{
key: 3,
platform: '3',
name: '子类型31',
upgradeNum: 'Upgraded: 3',
},
]
}, {
key: 2,
name: '甲类型2',
platform: 'iOS',
version: '10.3.4.5654',
upgradeNum: 500,
creator: 'Jack',
createdAt: '2014-12-24 23:12:00',
children: [
{
key: 3,
platform: '32',
name: '子类型32',
upgradeNum: 'Upgraded: 3',
},
]
}, {
key: 3,
name: '甲类型3',
platform: 'iOS',
upgradeNum: 500,
children: [
{
key: 3,
platform: '33',
name: '子类型33',
upgradeNum: 'Upgraded: 3',
},
]
}];
return (
<Modal
visible={visible}
title="类型管理"
okText="确定"
cancelText="取消"
width='1000px'
onCancel={onCancel}
onOk={onCancel}
>
<Table
columns={columns}
dataSource={data}
/>
{typeModal && <TypeModal
visible={typeModal}
onCancel={() =>
setTypeModal(false)
}
data={oldData}
/>}
</Modal>
);
}
export default RemoveType
\ No newline at end of file
src/modal/ToolModal.jsx
View file @ dcca1194
import React, { useState,useEffect } from 'react'; import React, { useState, useEffect, useContext } from 'react';
import { Button, Modal, Form, Input, Radio, Select } from 'antd'; import { Root } from "../dataCenter/Root";
import { Button, Modal, Form, Input, Radio, Select, message } from 'antd';
const { Option } = Select; const { Option } = Select;
const ToolModal = ({ visible, onCancel, data }) => { const ToolModal = ({ visible, onCancel, data }) => {
const [form] = Form.useForm(); const [form] = Form.useForm();
const { fetchData, updateIndex, dataCenter } = useContext(Root)
const formItemLayout = { const formItemLayout = {
labelCol: { span: 4 }, labelCol: { span: 4 },
wrapperCol: { span: 18 }, wrapperCol: { span: 18 },
}; };
const onCreate = (values) => { const onCreate = (values) => {
console.log('Received values of form: ', values); let input = {
// setVisible(false); toolBoxName: values.name,
toolBoxIcon: values.icon,
toolBoxDesc: values.depict,
toolBoxUrl: values.url,
}
if (!data) {
input = {
...input,
typeId: values.type,
childType: values.childType
}
fetchData('/add/addToolBox', input)
.then((res) => {
if (res.success) {
message.success('新建成功')
updateIndex()
onCancel()
}
})
} else {
fetchData('/update/updateToolBox', input)
.then((res) => {
if (res.success) {
message.success('修改成功')
updateIndex()
onCancel()
}
})
}
}; };
const onGenderChange = (value) => { const onGenderChange = (value) => {
switch (value) {
case 'male':
form.setFieldsValue({ form.setFieldsValue({
note: 'Hi, man!', type: value,
}); });
return; fetchData('/query/queryChildType', { typeId: value }, 'childType')
.then((res) => {
case 'female': updateIndex()
form.setFieldsValue({ console.log(res);
note: 'Hi, lady!', })
}); console.log(dataCenter);
return; };
const onChildGenderChange = (value) => {
case 'other':
form.setFieldsValue({ form.setFieldsValue({
note: 'Hi there!', childType: value,
}); });
}
}; };
useEffect(() => { useEffect(() => {
data && form.setFieldsValue({ dataCenter?.type && fetchData('/query/queryChildType', { typeId: dataCenter?.type[0]?.typeId }, 'childType')
name: data.toolBoxName, .then((res) => {
icon: data.toolBoxIcon, updateIndex()
url: data.toolBoxUrl, console.log(res);
depict: data.toolBoxDesc,
}) })
}, []) }, [])
return ( return (
<Modal <Modal
visible={visible} visible={visible}
...@@ -53,7 +80,7 @@ const ToolModal = ({ visible, onCancel, data }) => { ...@@ -53,7 +80,7 @@ const ToolModal = ({ visible, onCancel, data }) => {
form form
.validateFields() .validateFields()
.then((values) => { .then((values) => {
form.resetFields(); // form.resetFields();
onCreate(values); onCreate(values);
}) })
.catch((info) => { .catch((info) => {
...@@ -66,9 +93,12 @@ const ToolModal = ({ visible, onCancel, data }) => { ...@@ -66,9 +93,12 @@ const ToolModal = ({ visible, onCancel, data }) => {
// layout="vertical" // layout="vertical"
{...formItemLayout} {...formItemLayout}
name="form_in_modal" name="form_in_modal"
initialValues={{ initialValues={data ? {
modifier: 'public', name: data.toolBoxName,
}} icon: data.toolBoxIcon,
url: data.toolBoxUrl,
depict: data.toolBoxDesc,
} : { type: dataCenter?.type && dataCenter?.type[0]?.typeId }}
> >
<Form.Item <Form.Item
name="name" name="name"
...@@ -130,11 +160,35 @@ const ToolModal = ({ visible, onCancel, data }) => { ...@@ -130,11 +160,35 @@ const ToolModal = ({ visible, onCancel, data }) => {
<Select <Select
placeholder="请选择类型" placeholder="请选择类型"
onChange={onGenderChange} onChange={onGenderChange}
// allowClear
>
{
dataCenter?.type?.length && dataCenter?.type.map(v => {
return (
<Option key={v.typeId} value={v.typeId}>{v.typeName}</Option>
)
})
}
</Select>
</Form.Item>}
{!data && dataCenter?.childType && <Form.Item
name="childType"
label="子类型"
>
<Select
placeholder="请选择子类型"
onChange={onChildGenderChange}
allowClear allowClear
> >
<Option value="male">male</Option> {
<Option value="female">female</Option> dataCenter?.childType?.length && dataCenter?.childType.map(v => {
<Option value="other">other</Option> return (
<Option key={v.childTypeId} value={v.childTypeId}>{v.childTypeName}</Option>
)
})
}
</Select> </Select>
</Form.Item>} </Form.Item>}
</Form> </Form>
......
src/modal/TypeModal.jsx
View file @ dcca1194
import React, { useState } from 'react'; import React, { useState } from 'react';
import { Button, Modal, Form, Input, Radio, Select } from 'antd'; import { Button, Modal, Form, Input, Radio, Select, message, Tabs } from 'antd';
import { useContext } from "react";
import { Root } from "../dataCenter/Root";
const { Option } = Select; const { Option } = Select;
const TypeModal = ({ visible, onCancel }) => { const { TabPane } = Tabs;
const TypeModal = ({ visible, onCancel, data }) => {
console.log(data);
const [form] = Form.useForm(); const [form] = Form.useForm();
const formItemLayout = { const formItemLayout = {
labelCol: { span: 4 }, labelCol: { span: 4 },
wrapperCol: { span: 18 }, wrapperCol: { span: 18 },
}; };
const { fetchData, updateIndex } = useContext(Root)
const [value, setValue] = React.useState(1);
const onCreate = (values) => { const onCreate = (values) => {
console.log('Received values of form: ', values); console.log(values);
// setVisible(false); if (data) {
} else {
fetchData('/add/addType', values)
.then((res) => {
if (res.success) {
message.success('新建成功')
updateIndex()
onCancel()
}
})
}
}; };
// function callback(key) {
// console.log(key);
// }
const onChange = e => {
console.log('radio checked', e.target.value);
setValue(e.target.value);
};
return ( return (
<Modal <Modal
visible={visible} visible={visible}
title="新建类型" title={`${data ? '修改' : '新建'}类型`}
okText="确定" okText="确定"
cancelText="取消" cancelText="取消"
onCancel={onCancel} onCancel={onCancel}
...@@ -24,7 +54,7 @@ const TypeModal = ({ visible, onCancel }) => { ...@@ -24,7 +54,7 @@ const TypeModal = ({ visible, onCancel }) => {
form form
.validateFields() .validateFields()
.then((values) => { .then((values) => {
form.resetFields(); // form.resetFields();
onCreate(values); onCreate(values);
}) })
.catch((info) => { .catch((info) => {
...@@ -39,20 +69,55 @@ const TypeModal = ({ visible, onCancel }) => { ...@@ -39,20 +69,55 @@ const TypeModal = ({ visible, onCancel }) => {
name="form_in_modal" name="form_in_modal"
initialValues={{ initialValues={{
modifier: 'public', modifier: 'public',
'radio-group': 1
}} }}
> >
{!data && <Form.Item name="radio-group" label="类型">
<Radio.Group onChange={onChange} value={value}>
<Radio value={1}>父类型</Radio>
<Radio value={2}>子类型</Radio>
</Radio.Group>
</Form.Item>}
{value === 1 || data ? <Form.Item
name="typeName"
label={`${data ? '' : '父'}类型`}
rules={[
{
required: true,
message: '请输入类型名称!',
},
]}
>
<Input placeholder="请输入类型名称" />
</Form.Item> :
<>
<Form.Item <Form.Item
name="type" name="select"
label="类型" label="父类型"
hasFeedback
rules={[{ required: true, message: '请选择父类型!' }]}
>
<Select placeholder="请选择父类型">
<Option value="china">China</Option>
<Option value="usa">U.S.A</Option>
</Select>
</Form.Item>
<Form.Item
name="typeName"
label="子类型"
rules={[ rules={[
{ {
required: true, required: true,
message: '请输入类型!', message: '请输入类型名称!',
}, },
]} ]}
> >
<Input placeholder="请输入类型" /> <Input placeholder="请输入类型名称" />
</Form.Item> </Form.Item>
</>
}
</Form> </Form>
</Modal> </Modal>
); );
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment