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'
import PublishModal from '../../modal/PublishModal'
import TypeModal from '../../modal/TypeModal'
import PageModal from '../../modal/PageModal'
import RemoveType from '../../modal/RemoveType'
import { useContext, useEffect, useState } from "react";
function AdminIndex() {
......@@ -13,6 +14,7 @@ function AdminIndex() {
const [publish, setPublish] = useState(false)
const [typeModal, setTypeModal] = useState(false)
const [pageModal, setpageModal] = useState(false)
const [removeType, setremoveType] = useState(false)
return (
<div className='admin'>
......@@ -20,6 +22,7 @@ function AdminIndex() {
<Button onClick={() => setTypeModal(true)}>新建类型</Button>
<Button onClick={() => setPublish(true)}>发布</Button>
<Button onClick={() => setpageModal(true)}>页面管理</Button>
<Button onClick={() => setremoveType(true)}>类型管理</Button>
{visible && <ToolModal
visible={visible}
onCancel={() =>
......@@ -44,6 +47,12 @@ function AdminIndex() {
setpageModal(false)
}
/>}
{removeType && <RemoveType
visible={removeType}
onCancel={() =>
setremoveType(false)
}
/>}
</div>
)
}
......
src/component/AdminIndex/AdminIndex.scss
View file @ dcca1194
.admin {
float: left;
position: fixed;
top: 40%;
.ant-btn{
width: 100px !important;
}
......
src/component/ToolType/ToolType.jsx
View file @ dcca1194
......@@ -46,7 +46,7 @@ function ToolType(props) {
})
}
</div>
<div className="child-type">
{/* <div className="child-type">
{
dataCenter?.type?.length && dataCenter.type.filter(v => v.typeId === typeId)[0].typeContent.map(v => {
return (
......@@ -54,7 +54,7 @@ function ToolType(props) {
)
})
}
</div>
</div> */}
</>
)
}
......
src/config/apiConfig.js
View file @ dcca1194
const apiConfig = {
domain: 'http://' + '172.16.231.162' + ':3001',
domain: 'http://' + '172.16.130.180' + ':3001',
}
export default apiConfig
src/dataCenter/Root.jsx
View file @ dcca1194
......@@ -30,6 +30,7 @@ function DataCenter(props) {
fetch(generateUrl(path, requestData), {credentials: 'include'})
.then(res => res.json())
.then(res => {
console.log(res);
if (res.success) {
!!dataName && dispatch(UPDATE_DATA({[dataName]: res.data}))
} 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 PublishModal from "./PublishModal"
......@@ -6,6 +7,7 @@ function PageModal({ visible, onCancel, onPublish }) {
const [publish, setPublish] = useState(false)
const [pageData, setpageData] = useState('')
const { fetchData, updateIndex, dataCenter } = useContext(Root)
const onChangePage = (values) => {
console.log(values);
......@@ -17,20 +19,36 @@ function PageModal({ visible, onCancel, onPublish }) {
// setVisible(false);
};
const columns = [
{
title: '页面Id',
dataIndex: 'pageId',
width: 150,
align: 'center'
},
{
title: '页面名称',
dataIndex: 'name',
dataIndex: 'pageName',
width: 200,
align: 'center'
},
{
title: '页面类型',
dataIndex: 'age',
title: '页面Url',
dataIndex: 'pageUrl',
width: 300,
align: 'center',
render: (text, record) => (
<Space size="middle">
<a href={record.pageUrl}>{record.pageUrl}</a>
</Space>
),
},
{
title: '操作',
key: 'action',
align: 'center',
width: 100,
render: (text, record) => (
<Space size="middle">
......@@ -40,6 +58,17 @@ function PageModal({ visible, onCancel, onPublish }) {
),
},
];
useEffect(() => {
console.log(dataCenter);
dataCenter?.type && fetchData('/page/queryPage', {}, 'queryPage')
.then((res) => {
updateIndex()
})
}, [])
const data = [
{
key: '1',
......@@ -125,7 +154,7 @@ function PageModal({ visible, onCancel, onPublish }) {
onCancel={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>
{publish && <PublishModal
visible={publish}
......
src/modal/PublishModal.jsx
View file @ dcca1194
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 { Button, Modal, Form, Input, Radio, Select, message } from 'antd';
import apiConfig from "../config/apiConfig";
import 'codemirror/addon/display/autorefresh';
import 'codemirror/addon/comment/comment';
......@@ -23,7 +25,8 @@ const PublishModal = ({ visible, onCancel, data }) => {
const [code, setcode] = useState('')
const [pageName, setPageName] = useState('')
const [oldCode, setoldCode] = useState('')
const { fetchData, updateIndex, dataCenter } = useContext(Root)
console.log(data);
const onCreate = (values) => {
console.log(code);
......@@ -31,8 +34,33 @@ const PublishModal = ({ visible, onCancel, data }) => {
message.error('请补全信息！')
return
}
fetch('http://172.16.231.162:3001/submit/release', {
if (data) {
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',
headers: {
'Content-Type': 'application/json'
......@@ -43,13 +71,24 @@ const PublishModal = ({ visible, onCancel, data }) => {
})
})
.then(response => response.json())
.then(data => console.log(data));
.then(data => {
if (data.success) {
onCancel()
message.success('发布成功！')
dataCenter?.type && fetchData('/page/queryPage', {}, 'queryPage')
.then((res) => {
updateIndex()
})
} else {
message.error(data.error || '发布失败')
}
});
}
};
useEffect(() => {
// setPageName(data.name)
}, [])
data&&setPageName(data.pageName)
}, [data])
return (
<Modal
......@@ -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
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 { Button, Modal, Form, Input, Radio, Select } from 'antd';
import React, { useState, useEffect, useContext } from 'react';
import { Root } from "../dataCenter/Root";
import { Button, Modal, Form, Input, Radio, Select, message } from 'antd';
const { Option } = Select;
const ToolModal = ({ visible, onCancel, data }) => {
const [form] = Form.useForm();
const { fetchData, updateIndex, dataCenter } = useContext(Root)
const formItemLayout = {
labelCol: { span: 4 },
wrapperCol: { span: 18 },
};
const onCreate = (values) => {
console.log('Received values of form: ', values);
// setVisible(false);
let input = {
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) => {
switch (value) {
case 'male':
form.setFieldsValue({
note: 'Hi, man!',
type: value,
});
return;
case 'female':
form.setFieldsValue({
note: 'Hi, lady!',
});
return;
case 'other':
fetchData('/query/queryChildType', { typeId: value }, 'childType')
.then((res) => {
updateIndex()
console.log(res);
})
console.log(dataCenter);
};
const onChildGenderChange = (value) => {
form.setFieldsValue({
note: 'Hi there!',
childType: value,
});
}
};
useEffect(() => {
data && form.setFieldsValue({
name: data.toolBoxName,
icon: data.toolBoxIcon,
url: data.toolBoxUrl,
depict: data.toolBoxDesc,
dataCenter?.type && fetchData('/query/queryChildType', { typeId: dataCenter?.type[0]?.typeId }, 'childType')
.then((res) => {
updateIndex()
console.log(res);
})
}, [])
return (
<Modal
visible={visible}
......@@ -53,7 +80,7 @@ const ToolModal = ({ visible, onCancel, data }) => {
form
.validateFields()
.then((values) => {
form.resetFields();
// form.resetFields();
onCreate(values);
})
.catch((info) => {
......@@ -66,9 +93,12 @@ const ToolModal = ({ visible, onCancel, data }) => {
// layout="vertical"
{...formItemLayout}
name="form_in_modal"
initialValues={{
modifier: 'public',
}}
initialValues={data ? {
name: data.toolBoxName,
icon: data.toolBoxIcon,
url: data.toolBoxUrl,
depict: data.toolBoxDesc,
} : { type: dataCenter?.type && dataCenter?.type[0]?.typeId }}
>
<Form.Item
name="name"
......@@ -130,11 +160,35 @@ const ToolModal = ({ visible, onCancel, data }) => {
<Select
placeholder="请选择类型"
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
>
<Option value="male">male</Option>
<Option value="female">female</Option>
<Option value="other">other</Option>
{
dataCenter?.childType?.length && dataCenter?.childType.map(v => {
return (
<Option key={v.childTypeId} value={v.childTypeId}>{v.childTypeName}</Option>
)
})
}
</Select>
</Form.Item>}
</Form>
......
src/modal/TypeModal.jsx
View file @ dcca1194
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 TypeModal = ({ visible, onCancel }) => {
const { TabPane } = Tabs;
const TypeModal = ({ visible, onCancel, data }) => {
console.log(data);
const [form] = Form.useForm();
const formItemLayout = {
labelCol: { span: 4 },
wrapperCol: { span: 18 },
};
const { fetchData, updateIndex } = useContext(Root)
const [value, setValue] = React.useState(1);
const onCreate = (values) => {
console.log('Received values of form: ', values);
// setVisible(false);
console.log(values);
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 (
<Modal
visible={visible}
title="新建类型"
title={`${data ? '修改' : '新建'}类型`}
okText="确定"
cancelText="取消"
onCancel={onCancel}
......@@ -24,7 +54,7 @@ const TypeModal = ({ visible, onCancel }) => {
form
.validateFields()
.then((values) => {
form.resetFields();
// form.resetFields();
onCreate(values);
})
.catch((info) => {
......@@ -39,20 +69,55 @@ const TypeModal = ({ visible, onCancel }) => {
name="form_in_modal"
initialValues={{
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
name="type"
label="类型"
name="select"
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={[
{
required: true,
message: '请输入类型!',
message: '请输入类型名称!',
},
]}
>
<Input placeholder="请输入类型" />
<Input placeholder="请输入类型名称" />
</Form.Item>
</>
}
</Form>
</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