Able to manage channels now
This commit is contained in:
parent
63da6dc6a0
commit
9fc375c604
@ -94,4 +94,9 @@ const (
|
|||||||
ChannelTypeUnknown = 0
|
ChannelTypeUnknown = 0
|
||||||
ChannelTypeOpenAI = 1
|
ChannelTypeOpenAI = 1
|
||||||
ChannelTypeAPI2D = 2
|
ChannelTypeAPI2D = 2
|
||||||
|
ChannelTypeAzure = 3
|
||||||
|
ChannelTypeCloseAI = 4
|
||||||
|
ChannelTypeOpenAISB = 5
|
||||||
|
ChannelTypeOpenAIMax = 6
|
||||||
|
ChannelTypeOhMyGPT = 7
|
||||||
)
|
)
|
||||||
|
@ -82,6 +82,8 @@ func AddChannel(c *gin.Context) {
|
|||||||
})
|
})
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
channel.CreatedTime = common.GetTimestamp()
|
||||||
|
channel.AccessedTime = common.GetTimestamp()
|
||||||
err = channel.Insert()
|
err = channel.Insert()
|
||||||
if err != nil {
|
if err != nil {
|
||||||
c.JSON(http.StatusOK, gin.H{
|
c.JSON(http.StatusOK, gin.H{
|
||||||
@ -136,6 +138,7 @@ func UpdateChannel(c *gin.Context) {
|
|||||||
c.JSON(http.StatusOK, gin.H{
|
c.JSON(http.StatusOK, gin.H{
|
||||||
"success": true,
|
"success": true,
|
||||||
"message": "",
|
"message": "",
|
||||||
|
"data": channel,
|
||||||
})
|
})
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
@ -9,7 +9,7 @@ type Channel struct {
|
|||||||
Type int `json:"type" gorm:"default:0"`
|
Type int `json:"type" gorm:"default:0"`
|
||||||
Key string `json:"key"`
|
Key string `json:"key"`
|
||||||
Status int `json:"status" gorm:"default:1"`
|
Status int `json:"status" gorm:"default:1"`
|
||||||
Name string `json:"name" gorm:"unique;index"`
|
Name string `json:"name" gorm:"index"`
|
||||||
Weight int `json:"weight"`
|
Weight int `json:"weight"`
|
||||||
CreatedTime int64 `json:"created_time" gorm:"bigint"`
|
CreatedTime int64 `json:"created_time" gorm:"bigint"`
|
||||||
AccessedTime int64 `json:"accessed_time" gorm:"bigint"`
|
AccessedTime int64 `json:"accessed_time" gorm:"bigint"`
|
||||||
|
@ -1,40 +1,48 @@
|
|||||||
import React, { useEffect, useState } from 'react';
|
import React, { useEffect, useState } from 'react';
|
||||||
import { Button, Form, Label, Pagination, Table } from 'semantic-ui-react';
|
import { Button, Form, Label, Pagination, Table } from 'semantic-ui-react';
|
||||||
import { Link } from 'react-router-dom';
|
import { Link } from 'react-router-dom';
|
||||||
import { API, showError, showSuccess } from '../helpers';
|
import { API, copy, showError, showSuccess, timestamp2string } from '../helpers';
|
||||||
|
|
||||||
import { ITEMS_PER_PAGE } from '../constants';
|
import { CHANNEL_OPTIONS, ITEMS_PER_PAGE } from '../constants';
|
||||||
|
|
||||||
function renderRole(role) {
|
function renderTimestamp(timestamp) {
|
||||||
switch (role) {
|
return (
|
||||||
case 1:
|
<>
|
||||||
return <Label>普通用户</Label>;
|
{timestamp2string(timestamp)}
|
||||||
case 10:
|
</>
|
||||||
return <Label color='yellow'>管理员</Label>;
|
);
|
||||||
case 100:
|
}
|
||||||
return <Label color='orange'>超级管理员</Label>;
|
|
||||||
default:
|
let type2label = undefined;
|
||||||
return <Label color='red'>未知身份</Label>;
|
|
||||||
|
function renderType(type) {
|
||||||
|
if (!type2label) {
|
||||||
|
type2label = new Map;
|
||||||
|
for (let i = 0; i < CHANNEL_OPTIONS.length; i++) {
|
||||||
|
type2label[CHANNEL_OPTIONS[i].value] = CHANNEL_OPTIONS[i];
|
||||||
}
|
}
|
||||||
|
type2label[0] = { value: 0, text: '未知类型', color: 'grey' };
|
||||||
|
}
|
||||||
|
return <Label basic color={type2label[type].color}>{type2label[type].text}</Label>;
|
||||||
}
|
}
|
||||||
|
|
||||||
const ChannelsTable = () => {
|
const ChannelsTable = () => {
|
||||||
const [users, setUsers] = useState([]);
|
const [channels, setChannels] = useState([]);
|
||||||
const [loading, setLoading] = useState(true);
|
const [loading, setLoading] = useState(true);
|
||||||
const [activePage, setActivePage] = useState(1);
|
const [activePage, setActivePage] = useState(1);
|
||||||
const [searchKeyword, setSearchKeyword] = useState('');
|
const [searchKeyword, setSearchKeyword] = useState('');
|
||||||
const [searching, setSearching] = useState(false);
|
const [searching, setSearching] = useState(false);
|
||||||
|
|
||||||
const loadUsers = async (startIdx) => {
|
const loadChannels = async (startIdx) => {
|
||||||
const res = await API.get(`/api/user/?p=${startIdx}`);
|
const res = await API.get(`/api/channel/?p=${startIdx}`);
|
||||||
const { success, message, data } = res.data;
|
const { success, message, data } = res.data;
|
||||||
if (success) {
|
if (success) {
|
||||||
if (startIdx === 0) {
|
if (startIdx === 0) {
|
||||||
setUsers(data);
|
setChannels(data);
|
||||||
} else {
|
} else {
|
||||||
let newUsers = users;
|
let newChannels = channels;
|
||||||
newUsers.push(...data);
|
newChannels.push(...data);
|
||||||
setUsers(newUsers);
|
setChannels(newChannels);
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
showError(message);
|
showError(message);
|
||||||
@ -44,55 +52,63 @@ const ChannelsTable = () => {
|
|||||||
|
|
||||||
const onPaginationChange = (e, { activePage }) => {
|
const onPaginationChange = (e, { activePage }) => {
|
||||||
(async () => {
|
(async () => {
|
||||||
if (activePage === Math.ceil(users.length / ITEMS_PER_PAGE) + 1) {
|
if (activePage === Math.ceil(channels.length / ITEMS_PER_PAGE) + 1) {
|
||||||
// In this case we have to load more data and then append them.
|
// In this case we have to load more data and then append them.
|
||||||
await loadUsers(activePage - 1);
|
await loadChannels(activePage - 1);
|
||||||
}
|
}
|
||||||
setActivePage(activePage);
|
setActivePage(activePage);
|
||||||
})();
|
})();
|
||||||
};
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
loadUsers(0)
|
loadChannels(0)
|
||||||
.then()
|
.then()
|
||||||
.catch((reason) => {
|
.catch((reason) => {
|
||||||
showError(reason);
|
showError(reason);
|
||||||
});
|
});
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const manageUser = (username, action, idx) => {
|
const manageChannel = async (id, action, idx) => {
|
||||||
(async () => {
|
let data = { id };
|
||||||
const res = await API.post('/api/user/manage', {
|
let res;
|
||||||
username,
|
switch (action) {
|
||||||
action,
|
case 'delete':
|
||||||
});
|
res = await API.delete(`/api/channel/${id}/`);
|
||||||
|
break;
|
||||||
|
case 'enable':
|
||||||
|
data.status = 1;
|
||||||
|
res = await API.put('/api/channel/', data);
|
||||||
|
break;
|
||||||
|
case 'disable':
|
||||||
|
data.status = 2;
|
||||||
|
res = await API.put('/api/channel/', data);
|
||||||
|
break;
|
||||||
|
}
|
||||||
const { success, message } = res.data;
|
const { success, message } = res.data;
|
||||||
if (success) {
|
if (success) {
|
||||||
showSuccess('操作成功完成!');
|
showSuccess('操作成功完成!');
|
||||||
let user = res.data.data;
|
let channel = res.data.data;
|
||||||
let newUsers = [...users];
|
let newChannels = [...channels];
|
||||||
let realIdx = (activePage - 1) * ITEMS_PER_PAGE + idx;
|
let realIdx = (activePage - 1) * ITEMS_PER_PAGE + idx;
|
||||||
if (action === 'delete') {
|
if (action === 'delete') {
|
||||||
newUsers[realIdx].deleted = true;
|
newChannels[realIdx].deleted = true;
|
||||||
} else {
|
} else {
|
||||||
newUsers[realIdx].status = user.status;
|
newChannels[realIdx].status = channel.status;
|
||||||
newUsers[realIdx].role = user.role;
|
|
||||||
}
|
}
|
||||||
setUsers(newUsers);
|
setChannels(newChannels);
|
||||||
} else {
|
} else {
|
||||||
showError(message);
|
showError(message);
|
||||||
}
|
}
|
||||||
})();
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const renderStatus = (status) => {
|
const renderStatus = (status) => {
|
||||||
switch (status) {
|
switch (status) {
|
||||||
case 1:
|
case 1:
|
||||||
return <Label basic>已激活</Label>;
|
return <Label basic color='green'>已启用</Label>;
|
||||||
case 2:
|
case 2:
|
||||||
return (
|
return (
|
||||||
<Label basic color='red'>
|
<Label basic color='red'>
|
||||||
已封禁
|
已禁用
|
||||||
</Label>
|
</Label>
|
||||||
);
|
);
|
||||||
default:
|
default:
|
||||||
@ -104,18 +120,18 @@ const ChannelsTable = () => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const searchUsers = async () => {
|
const searchChannels = async () => {
|
||||||
if (searchKeyword === '') {
|
if (searchKeyword === '') {
|
||||||
// if keyword is blank, load files instead.
|
// if keyword is blank, load files instead.
|
||||||
await loadUsers(0);
|
await loadChannels(0);
|
||||||
setActivePage(1);
|
setActivePage(1);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
setSearching(true);
|
setSearching(true);
|
||||||
const res = await API.get(`/api/user/search?keyword=${searchKeyword}`);
|
const res = await API.get(`/api/channel/search?keyword=${searchKeyword}`);
|
||||||
const { success, message, data } = res.data;
|
const { success, message, data } = res.data;
|
||||||
if (success) {
|
if (success) {
|
||||||
setUsers(data);
|
setChannels(data);
|
||||||
setActivePage(1);
|
setActivePage(1);
|
||||||
} else {
|
} else {
|
||||||
showError(message);
|
showError(message);
|
||||||
@ -127,28 +143,28 @@ const ChannelsTable = () => {
|
|||||||
setSearchKeyword(value.trim());
|
setSearchKeyword(value.trim());
|
||||||
};
|
};
|
||||||
|
|
||||||
const sortUser = (key) => {
|
const sortChannel = (key) => {
|
||||||
if (users.length === 0) return;
|
if (channels.length === 0) return;
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
let sortedUsers = [...users];
|
let sortedChannels = [...channels];
|
||||||
sortedUsers.sort((a, b) => {
|
sortedChannels.sort((a, b) => {
|
||||||
return ('' + a[key]).localeCompare(b[key]);
|
return ('' + a[key]).localeCompare(b[key]);
|
||||||
});
|
});
|
||||||
if (sortedUsers[0].id === users[0].id) {
|
if (sortedChannels[0].id === channels[0].id) {
|
||||||
sortedUsers.reverse();
|
sortedChannels.reverse();
|
||||||
}
|
}
|
||||||
setUsers(sortedUsers);
|
setChannels(sortedChannels);
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Form onSubmit={searchUsers}>
|
<Form onSubmit={searchChannels}>
|
||||||
<Form.Input
|
<Form.Input
|
||||||
icon='search'
|
icon='search'
|
||||||
fluid
|
fluid
|
||||||
iconPosition='left'
|
iconPosition='left'
|
||||||
placeholder='搜索用户的 ID,用户名,显示名称,以及邮箱地址 ...'
|
placeholder='搜索渠道的 ID 和名称 ...'
|
||||||
value={searchKeyword}
|
value={searchKeyword}
|
||||||
loading={searching}
|
loading={searching}
|
||||||
onChange={handleKeywordChange}
|
onChange={handleKeywordChange}
|
||||||
@ -161,87 +177,78 @@ const ChannelsTable = () => {
|
|||||||
<Table.HeaderCell
|
<Table.HeaderCell
|
||||||
style={{ cursor: 'pointer' }}
|
style={{ cursor: 'pointer' }}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
sortUser('username');
|
sortChannel('id');
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
用户名
|
ID
|
||||||
</Table.HeaderCell>
|
</Table.HeaderCell>
|
||||||
<Table.HeaderCell
|
<Table.HeaderCell
|
||||||
style={{ cursor: 'pointer' }}
|
style={{ cursor: 'pointer' }}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
sortUser('display_name');
|
sortChannel('name');
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
显示名称
|
名称
|
||||||
</Table.HeaderCell>
|
</Table.HeaderCell>
|
||||||
<Table.HeaderCell
|
<Table.HeaderCell
|
||||||
style={{ cursor: 'pointer' }}
|
style={{ cursor: 'pointer' }}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
sortUser('email');
|
sortChannel('type');
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
邮箱地址
|
类型
|
||||||
</Table.HeaderCell>
|
</Table.HeaderCell>
|
||||||
<Table.HeaderCell
|
<Table.HeaderCell
|
||||||
style={{ cursor: 'pointer' }}
|
style={{ cursor: 'pointer' }}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
sortUser('role');
|
sortChannel('status');
|
||||||
}}
|
|
||||||
>
|
|
||||||
用户角色
|
|
||||||
</Table.HeaderCell>
|
|
||||||
<Table.HeaderCell
|
|
||||||
style={{ cursor: 'pointer' }}
|
|
||||||
onClick={() => {
|
|
||||||
sortUser('status');
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
状态
|
状态
|
||||||
</Table.HeaderCell>
|
</Table.HeaderCell>
|
||||||
|
<Table.HeaderCell
|
||||||
|
style={{ cursor: 'pointer' }}
|
||||||
|
onClick={() => {
|
||||||
|
sortChannel('created_time');
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
创建时间
|
||||||
|
</Table.HeaderCell>
|
||||||
|
<Table.HeaderCell
|
||||||
|
style={{ cursor: 'pointer' }}
|
||||||
|
onClick={() => {
|
||||||
|
sortChannel('accessed_time');
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
访问时间
|
||||||
|
</Table.HeaderCell>
|
||||||
<Table.HeaderCell>操作</Table.HeaderCell>
|
<Table.HeaderCell>操作</Table.HeaderCell>
|
||||||
</Table.Row>
|
</Table.Row>
|
||||||
</Table.Header>
|
</Table.Header>
|
||||||
|
|
||||||
<Table.Body>
|
<Table.Body>
|
||||||
{users
|
{channels
|
||||||
.slice(
|
.slice(
|
||||||
(activePage - 1) * ITEMS_PER_PAGE,
|
(activePage - 1) * ITEMS_PER_PAGE,
|
||||||
activePage * ITEMS_PER_PAGE
|
activePage * ITEMS_PER_PAGE
|
||||||
)
|
)
|
||||||
.map((user, idx) => {
|
.map((channel, idx) => {
|
||||||
if (user.deleted) return <></>;
|
if (channel.deleted) return <></>;
|
||||||
return (
|
return (
|
||||||
<Table.Row key={user.id}>
|
<Table.Row key={channel.id}>
|
||||||
<Table.Cell>{user.username}</Table.Cell>
|
<Table.Cell>{channel.id}</Table.Cell>
|
||||||
<Table.Cell>{user.display_name}</Table.Cell>
|
<Table.Cell>{channel.name ? channel.name : '无'}</Table.Cell>
|
||||||
<Table.Cell>{user.email ? user.email : '无'}</Table.Cell>
|
<Table.Cell>{renderType(channel.type)}</Table.Cell>
|
||||||
<Table.Cell>{renderRole(user.role)}</Table.Cell>
|
<Table.Cell>{renderStatus(channel.status)}</Table.Cell>
|
||||||
<Table.Cell>{renderStatus(user.status)}</Table.Cell>
|
<Table.Cell>{renderTimestamp(channel.created_time)}</Table.Cell>
|
||||||
|
<Table.Cell>{renderTimestamp(channel.accessed_time)}</Table.Cell>
|
||||||
<Table.Cell>
|
<Table.Cell>
|
||||||
<div>
|
<div>
|
||||||
<Button
|
|
||||||
size={'small'}
|
|
||||||
positive
|
|
||||||
onClick={() => {
|
|
||||||
manageUser(user.username, 'promote', idx);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
提升
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
size={'small'}
|
|
||||||
color={'yellow'}
|
|
||||||
onClick={() => {
|
|
||||||
manageUser(user.username, 'demote', idx);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
降级
|
|
||||||
</Button>
|
|
||||||
<Button
|
<Button
|
||||||
size={'small'}
|
size={'small'}
|
||||||
negative
|
negative
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
manageUser(user.username, 'delete', idx);
|
manageChannel(channel.id, 'delete', idx);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
删除
|
删除
|
||||||
@ -249,19 +256,19 @@ const ChannelsTable = () => {
|
|||||||
<Button
|
<Button
|
||||||
size={'small'}
|
size={'small'}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
manageUser(
|
manageChannel(
|
||||||
user.username,
|
channel.id,
|
||||||
user.status === 1 ? 'disable' : 'enable',
|
channel.status === 1 ? 'disable' : 'enable',
|
||||||
idx
|
idx
|
||||||
);
|
);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{user.status === 1 ? '禁用' : '启用'}
|
{channel.status === 1 ? '禁用' : '启用'}
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
size={'small'}
|
size={'small'}
|
||||||
as={Link}
|
as={Link}
|
||||||
to={'/user/edit/' + user.id}
|
to={'/channel/edit/' + channel.id}
|
||||||
>
|
>
|
||||||
编辑
|
编辑
|
||||||
</Button>
|
</Button>
|
||||||
@ -275,8 +282,8 @@ const ChannelsTable = () => {
|
|||||||
<Table.Footer>
|
<Table.Footer>
|
||||||
<Table.Row>
|
<Table.Row>
|
||||||
<Table.HeaderCell colSpan='6'>
|
<Table.HeaderCell colSpan='6'>
|
||||||
<Button size='small' as={Link} to='/user/add' loading={loading}>
|
<Button size='small' as={Link} to='/channel/add' loading={loading}>
|
||||||
添加新的用户
|
添加新的渠道
|
||||||
</Button>
|
</Button>
|
||||||
<Pagination
|
<Pagination
|
||||||
floated='right'
|
floated='right'
|
||||||
@ -285,8 +292,8 @@ const ChannelsTable = () => {
|
|||||||
size='small'
|
size='small'
|
||||||
siblingRange={1}
|
siblingRange={1}
|
||||||
totalPages={
|
totalPages={
|
||||||
Math.ceil(users.length / ITEMS_PER_PAGE) +
|
Math.ceil(channels.length / ITEMS_PER_PAGE) +
|
||||||
(users.length % ITEMS_PER_PAGE === 0 ? 1 : 0)
|
(channels.length % ITEMS_PER_PAGE === 0 ? 1 : 0)
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
</Table.HeaderCell>
|
</Table.HeaderCell>
|
||||||
|
@ -115,7 +115,7 @@ const TokensTable = () => {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
setSearching(true);
|
setSearching(true);
|
||||||
const res = await API.get(`/api/token/search?keyword=${searchKeyword}/`);
|
const res = await API.get(`/api/token/search?keyword=${searchKeyword}`);
|
||||||
const { success, message, data } = res.data;
|
const { success, message, data } = res.data;
|
||||||
if (success) {
|
if (success) {
|
||||||
setTokens(data);
|
setTokens(data);
|
||||||
|
9
web/src/constants/channel.constants.js
Normal file
9
web/src/constants/channel.constants.js
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
export const CHANNEL_OPTIONS = [
|
||||||
|
{ key: 1, text: 'OpenAI', value: 1, color: 'green' },
|
||||||
|
{ key: 2, text: 'API2D', value: 2, color: 'blue' },
|
||||||
|
{ key: 3, text: 'Azure', value: 3, color: 'olive' },
|
||||||
|
{ key: 4, text: 'CloseAI', value: 4, color: 'teal' },
|
||||||
|
{ key: 5, text: 'OpenAI-SB', value: 5, color: 'brown' },
|
||||||
|
{ key: 6, text: 'OpenAI Max', value: 6, color: 'violet' },
|
||||||
|
{ key: 7, text: 'OhMyGPT', value: 7, color: 'purple' }
|
||||||
|
];
|
@ -1,3 +1,4 @@
|
|||||||
export * from './toast.constants';
|
export * from './toast.constants';
|
||||||
export * from './user.constants';
|
export * from './user.constants';
|
||||||
export * from './common.constant';
|
export * from './common.constant';
|
||||||
|
export * from './channel.constants';
|
@ -1,26 +1,27 @@
|
|||||||
import React, { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
import { Button, Form, Header, Segment } from 'semantic-ui-react';
|
import { Button, Form, Header, Segment } from 'semantic-ui-react';
|
||||||
import { API, showError, showSuccess } from '../../helpers';
|
import { API, showError, showSuccess } from '../../helpers';
|
||||||
|
import { CHANNEL_OPTIONS } from '../../constants';
|
||||||
|
|
||||||
const AddChannel = () => {
|
const AddChannel = () => {
|
||||||
const originInputs = {
|
const originInputs = {
|
||||||
username: '',
|
name: '',
|
||||||
display_name: '',
|
type: 1,
|
||||||
password: '',
|
key: ''
|
||||||
};
|
};
|
||||||
const [inputs, setInputs] = useState(originInputs);
|
const [inputs, setInputs] = useState(originInputs);
|
||||||
const { username, display_name, password } = inputs;
|
const { name, type, key } = inputs;
|
||||||
|
|
||||||
const handleInputChange = (e, { name, value }) => {
|
const handleInputChange = (e, { name, value }) => {
|
||||||
setInputs((inputs) => ({ ...inputs, [name]: value }));
|
setInputs((inputs) => ({ ...inputs, [name]: value }));
|
||||||
};
|
};
|
||||||
|
|
||||||
const submit = async () => {
|
const submit = async () => {
|
||||||
if (inputs.username === '' || inputs.password === '') return;
|
if (inputs.name === '' || inputs.key === '') return;
|
||||||
const res = await API.post(`/api/user/`, inputs);
|
const res = await API.post(`/api/channel/`, inputs);
|
||||||
const { success, message } = res.data;
|
const { success, message } = res.data;
|
||||||
if (success) {
|
if (success) {
|
||||||
showSuccess('用户账户创建成功!');
|
showSuccess('渠道创建成功!');
|
||||||
setInputs(originInputs);
|
setInputs(originInputs);
|
||||||
} else {
|
} else {
|
||||||
showError(message);
|
showError(message);
|
||||||
@ -30,38 +31,37 @@ const AddChannel = () => {
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Segment>
|
<Segment>
|
||||||
<Header as="h3">创建新用户账户</Header>
|
<Header as='h3'>创建新的渠道</Header>
|
||||||
<Form autoComplete="off">
|
<Form autoComplete='off'>
|
||||||
|
<Form.Field>
|
||||||
|
<Form.Select
|
||||||
|
label='类型'
|
||||||
|
name='type'
|
||||||
|
options={CHANNEL_OPTIONS}
|
||||||
|
value={inputs.type}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
/>
|
||||||
|
</Form.Field>
|
||||||
<Form.Field>
|
<Form.Field>
|
||||||
<Form.Input
|
<Form.Input
|
||||||
label="用户名"
|
label='名称'
|
||||||
name="username"
|
name='name'
|
||||||
placeholder={'请输入用户名'}
|
placeholder={'请输入名称'}
|
||||||
onChange={handleInputChange}
|
onChange={handleInputChange}
|
||||||
value={username}
|
value={name}
|
||||||
autoComplete="off"
|
autoComplete='off'
|
||||||
required
|
required
|
||||||
/>
|
/>
|
||||||
</Form.Field>
|
</Form.Field>
|
||||||
<Form.Field>
|
<Form.Field>
|
||||||
<Form.Input
|
<Form.Input
|
||||||
label="显示名称"
|
label='密钥'
|
||||||
name="display_name"
|
name='key'
|
||||||
placeholder={'请输入显示名称'}
|
placeholder={'请输入密钥'}
|
||||||
onChange={handleInputChange}
|
onChange={handleInputChange}
|
||||||
value={display_name}
|
value={key}
|
||||||
autoComplete="off"
|
// type='password'
|
||||||
/>
|
autoComplete='off'
|
||||||
</Form.Field>
|
|
||||||
<Form.Field>
|
|
||||||
<Form.Input
|
|
||||||
label="密码"
|
|
||||||
name="password"
|
|
||||||
type={'password'}
|
|
||||||
placeholder={'请输入密码'}
|
|
||||||
onChange={handleInputChange}
|
|
||||||
value={password}
|
|
||||||
autoComplete="off"
|
|
||||||
required
|
required
|
||||||
/>
|
/>
|
||||||
</Form.Field>
|
</Form.Field>
|
||||||
|
@ -2,32 +2,23 @@ import React, { useEffect, useState } from 'react';
|
|||||||
import { Button, Form, Header, Segment } from 'semantic-ui-react';
|
import { Button, Form, Header, Segment } from 'semantic-ui-react';
|
||||||
import { useParams } from 'react-router-dom';
|
import { useParams } from 'react-router-dom';
|
||||||
import { API, showError, showSuccess } from '../../helpers';
|
import { API, showError, showSuccess } from '../../helpers';
|
||||||
|
import { CHANNEL_OPTIONS } from '../../constants';
|
||||||
|
|
||||||
const EditChannel = () => {
|
const EditChannel = () => {
|
||||||
const params = useParams();
|
const params = useParams();
|
||||||
const userId = params.id;
|
const channelId = params.id;
|
||||||
const [loading, setLoading] = useState(true);
|
const [loading, setLoading] = useState(true);
|
||||||
const [inputs, setInputs] = useState({
|
const [inputs, setInputs] = useState({
|
||||||
username: '',
|
name: '',
|
||||||
display_name: '',
|
key: '',
|
||||||
password: '',
|
type: 1,
|
||||||
github_id: '',
|
|
||||||
wechat_id: '',
|
|
||||||
email: '',
|
|
||||||
});
|
});
|
||||||
const { username, display_name, password, github_id, wechat_id, email } =
|
|
||||||
inputs;
|
|
||||||
const handleInputChange = (e, { name, value }) => {
|
const handleInputChange = (e, { name, value }) => {
|
||||||
setInputs((inputs) => ({ ...inputs, [name]: value }));
|
setInputs((inputs) => ({ ...inputs, [name]: value }));
|
||||||
};
|
};
|
||||||
|
|
||||||
const loadUser = async () => {
|
const loadChannel = async () => {
|
||||||
let res = undefined;
|
let res = await API.get(`/api/channel/${channelId}`);
|
||||||
if (userId) {
|
|
||||||
res = await API.get(`/api/user/${userId}`);
|
|
||||||
} else {
|
|
||||||
res = await API.get(`/api/user/self`);
|
|
||||||
}
|
|
||||||
const { success, message, data } = res.data;
|
const { success, message, data } = res.data;
|
||||||
if (success) {
|
if (success) {
|
||||||
data.password = '';
|
data.password = '';
|
||||||
@ -38,19 +29,14 @@ const EditChannel = () => {
|
|||||||
setLoading(false);
|
setLoading(false);
|
||||||
};
|
};
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
loadUser().then();
|
loadChannel().then();
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const submit = async () => {
|
const submit = async () => {
|
||||||
let res = undefined;
|
let res = await API.put(`/api/channel/`, { ...inputs, id: parseInt(channelId) });
|
||||||
if (userId) {
|
|
||||||
res = await API.put(`/api/user/`, { ...inputs, id: parseInt(userId) });
|
|
||||||
} else {
|
|
||||||
res = await API.put(`/api/user/self`, inputs);
|
|
||||||
}
|
|
||||||
const { success, message } = res.data;
|
const { success, message } = res.data;
|
||||||
if (success) {
|
if (success) {
|
||||||
showSuccess('用户信息更新成功!');
|
showSuccess('渠道更新成功!');
|
||||||
} else {
|
} else {
|
||||||
showError(message);
|
showError(message);
|
||||||
}
|
}
|
||||||
@ -59,69 +45,38 @@ const EditChannel = () => {
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Segment loading={loading}>
|
<Segment loading={loading}>
|
||||||
<Header as='h3'>更新用户信息</Header>
|
<Header as='h3'>更新渠道信息</Header>
|
||||||
<Form autoComplete='off'>
|
<Form autoComplete='off'>
|
||||||
<Form.Field>
|
<Form.Field>
|
||||||
<Form.Input
|
<Form.Select
|
||||||
label='用户名'
|
label='类型'
|
||||||
name='username'
|
name='type'
|
||||||
placeholder={'请输入新的用户名'}
|
options={CHANNEL_OPTIONS}
|
||||||
|
value={inputs.type}
|
||||||
onChange={handleInputChange}
|
onChange={handleInputChange}
|
||||||
value={username}
|
|
||||||
autoComplete='off'
|
|
||||||
/>
|
/>
|
||||||
</Form.Field>
|
</Form.Field>
|
||||||
<Form.Field>
|
<Form.Field>
|
||||||
<Form.Input
|
<Form.Input
|
||||||
label='密码'
|
label='名称'
|
||||||
name='password'
|
name='name'
|
||||||
type={'password'}
|
placeholder={'请输入新的名称'}
|
||||||
placeholder={'请输入新的密码'}
|
|
||||||
onChange={handleInputChange}
|
onChange={handleInputChange}
|
||||||
value={password}
|
value={inputs.name}
|
||||||
autoComplete='off'
|
autoComplete='off'
|
||||||
/>
|
/>
|
||||||
</Form.Field>
|
</Form.Field>
|
||||||
<Form.Field>
|
<Form.Field>
|
||||||
<Form.Input
|
<Form.Input
|
||||||
label='显示名称'
|
label='密钥'
|
||||||
name='display_name'
|
name='key'
|
||||||
placeholder={'请输入新的显示名称'}
|
placeholder={'请输入新的密钥'}
|
||||||
onChange={handleInputChange}
|
onChange={handleInputChange}
|
||||||
value={display_name}
|
value={inputs.key}
|
||||||
|
// type='password'
|
||||||
autoComplete='off'
|
autoComplete='off'
|
||||||
/>
|
/>
|
||||||
</Form.Field>
|
</Form.Field>
|
||||||
<Form.Field>
|
|
||||||
<Form.Input
|
|
||||||
label='已绑定的 GitHub 账户'
|
|
||||||
name='github_id'
|
|
||||||
value={github_id}
|
|
||||||
autoComplete='off'
|
|
||||||
placeholder='此项只读,需要用户通过个人设置页面的相关绑定按钮进行绑定,不可直接修改'
|
|
||||||
readOnly
|
|
||||||
/>
|
|
||||||
</Form.Field>
|
|
||||||
<Form.Field>
|
|
||||||
<Form.Input
|
|
||||||
label='已绑定的微信账户'
|
|
||||||
name='wechat_id'
|
|
||||||
value={wechat_id}
|
|
||||||
autoComplete='off'
|
|
||||||
placeholder='此项只读,需要用户通过个人设置页面的相关绑定按钮进行绑定,不可直接修改'
|
|
||||||
readOnly
|
|
||||||
/>
|
|
||||||
</Form.Field>
|
|
||||||
<Form.Field>
|
|
||||||
<Form.Input
|
|
||||||
label='已绑定的邮箱账户'
|
|
||||||
name='email'
|
|
||||||
value={email}
|
|
||||||
autoComplete='off'
|
|
||||||
placeholder='此项只读,需要用户通过个人设置页面的相关绑定按钮进行绑定,不可直接修改'
|
|
||||||
readOnly
|
|
||||||
/>
|
|
||||||
</Form.Field>
|
|
||||||
<Button onClick={submit}>提交</Button>
|
<Button onClick={submit}>提交</Button>
|
||||||
</Form>
|
</Form>
|
||||||
</Segment>
|
</Segment>
|
||||||
|
Loading…
Reference in New Issue
Block a user