wang_yp
/
ball_admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

first commit

This commit is contained in:
wang_yp 2025-01-21 22:03:04 +08:00
parent 484e918229
commit b08c912644
16 changed files with 200 additions and 188 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/components/b_table.tsx
View File

@ -1,6 +1,5 @@
import {
Button,
message,
Pagination,
PaginationProps,
Popconfirm,
@ -10,7 +9,15 @@ import {
} from "antd";
import { useState } from "react";
const BTable = (props: any) => {
const { store, dataSource, selectCallback, scroll } = props;
const {
store,
dataSource,
selectCallback,
scroll,
editCallback,
deleteCallback,
actionCloumn,
} = props;
const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
setSelectedRowKeys(newSelectedRowKeys);
@ -33,30 +40,37 @@ const BTable = (props: any) => {
Size: 20,
});
};
const cancel: PopconfirmProps["onCancel"] = (e) => {
message.error("Click on No");
};
const confirm: PopconfirmProps["onConfirm"] = (e) => {
message.success("Click on Yes");
};
const actionColumn = {
const cancel: PopconfirmProps["onCancel"] = (e) => {};
const actionDefultColumn = {
title: "操作",
fixed: "right",
with: 200,
render: (any, record) => (
<Space wrap>
<Button type="dashed" size="small">
<Button
type="dashed"
size="small"
onClick={() => {
editCallback(record);
}}
>
编辑
</Button>
{actionCloumn}
<Popconfirm
title="Delete the task"
description="Are you sure to delete this task?"
onConfirm={confirm}
title="删除确认"
description="您是否需要删除该数据?"
onConfirm={() => {
deleteCallback(record.identity);
}}
onCancel={cancel}
okText="Yes"
cancelText="No"
>
<Button type="dashed" danger size="small">删除</Button>
<Button type="dashed" danger size="small">
删除
</Button>
</Popconfirm>
</Space>
),
@ -69,7 +83,7 @@ const BTable = (props: any) => {
scroll={scroll}
loading={store.listStatus}
rowSelection={rowSelection}
columns={[...props.columns, actionColumn]}
columns={[...props.columns, actionDefultColumn]}
dataSource={dataSource}
/>
<div style={{ textAlign: "right", padding: "10px" }}>

2
src/components/form/interface.ts
View File

@ -37,7 +37,7 @@ export interface SimpleFormData {
initialValues?: Object | null | undefined,
onFinish: Function,
formRef?: React.RefObject<FormInstance<any>>,
onFinishFailed: Function,
onFinishFailed?: Function,
formDatas: Array<FormDatas>,
createCallback?: Function
children?: React.ReactElement

8
src/components/form/simple_form.tsx
View File

@ -41,7 +41,7 @@ const SimpleForm = (props: SimpleFormData) => {
name={v.name}
rules={v.rules}
>
<Input defaultValue={v.value} value={v.value} />
<Input />
</Form.Item>
);
case FormType.inputNumber:
@ -52,7 +52,7 @@ const SimpleForm = (props: SimpleFormData) => {
name={v.name}
rules={v.rules}
>
<InputNumber defaultValue={v.value} value={v.value} />
<InputNumber />
</Form.Item>
);
case FormType.password:
@ -63,7 +63,7 @@ const SimpleForm = (props: SimpleFormData) => {
name={v.name}
rules={v.rules}
>
<Input.Password value={v.name} />
<Input.Password />
</Form.Item>
);
case FormType.cehckbox:
@ -87,7 +87,6 @@ const SimpleForm = (props: SimpleFormData) => {
>
<Checkbox.Group
options={v.checkboxData}
defaultValue={["Pear"]}
onChange={(res) => {
form.setFieldValue(v.name, res);
}}
@ -116,7 +115,6 @@ const SimpleForm = (props: SimpleFormData) => {
<AliUpload
imgList={form.getFieldValue(v.name) ?? []}
onChnage={(res) => {
console.log(res);
form.setFieldValue(v.name, res);
}}
/>

27
src/components/layout/layout.tsx
View File

@ -22,6 +22,18 @@ const LayOut = (props: Store) => {
justifyContent: "space-between",
};
const logoStyle = { width: 60, color: "white" };
const contentstyle = {
padding: 12,
margin: 0,
minHeight: 280,
background: colorBgContainer,
borderRadius: borderRadiusLG,
};
const breadItem = [
{ title: "首页" },
{ title: "数据集管理" },
{ title: "数据管理" },
];
useEffect(() => {
// if (usrStore.isNeedLogin) {
// nav("/login");
@ -59,19 +71,8 @@ const LayOut = (props: Store) => {
/>
</Sider>
<Layout style={{ padding: "0 15px 15px" }}>
<Breadcrumb
items={[{ title: "Home" }, { title: "List" }, { title: "App" }]}
style={{ margin: "10px 0" }}
/>
<Content
style={{
padding: 12,
margin: 0,
minHeight: 280,
background: colorBgContainer,
borderRadius: borderRadiusLG,
}}
>
<Breadcrumb items={breadItem} style={{ margin: "10px 0" }} />
<Content style={contentstyle}>
<Outlet />
</Content>
<Footer style={{ textAlign: "center" }}>

77
src/pages/source/source.tsx
View File

@ -1,36 +1,68 @@
import React, { useEffect, useState } from "react";
import { Button, Space, Modal, FormInstance } from "antd";
import { Store } from "antd/lib/form/interface";
import { inject, observer } from "mobx-react";
import BTable from "@/components/b_table";
import { useEffect, useState } from "react";
import { Store } from "antd/lib/form/interface";
import React from "react";
import { columns } from "./source_config";
import SimpleForm from "@/components/form/simple_form";
import { columns, defaultConfig } from "./source_config";
import "./source.less";
import { base as baseHttp } from '@/service/base';
const Source = (props: Store) => {
const { usrStore } = props;
const { sourceStore } = props;
const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
const formRef = React.useRef<FormInstance>(null);
const [userId, setId] = useState<Number | null>(null);
const [record, setRecord] = useState<any>(null);
useEffect(() => {}, []);
const addHandler = () => {};
// 获取列表数据
useEffect(() => {
sourceStore.getlist();
}, [sourceStore]);
const gotoDetail = () => {};
const upload = (e) => {
console.log("upload", e.target.files);
let param = new FormData();
param.append("file", e.target.files[0]);
baseHttp.upload("public/fts/upload",param)
};
return (
<div className="contentBox">
<Space direction="vertical" size="middle" style={{ display: "flex" }}>
<Button type="default" onClick={() => addHandler()}>
添加用户
<Button type="default" onClick={() => setIsModalOpen(true)}>
添加数据集
</Button>
<BTable
store={usrStore}
store={sourceStore}
scroll={{ x: "max-content" }}
columns={columns}
dataSource={usrStore.list}
dataSource={sourceStore.list}
deleteCallback={(id) => {
sourceStore.deleteItem(id);
}}
actionCloumn={
<>
<Button size="small" onClick={() => gotoDetail()}>
查看数据集
</Button>
<input
type="file"
name="文件上传"
accept=".xlsx"
onChange={upload}
/>
</>
}
editCallback={(record) => {
setIsModalOpen(true);
formRef.current?.setFieldsValue(record);
setRecord(record);
setId(record.id);
}}
/>
<Modal
title={!userId ? "添加用户" : "编辑用户"}
title={!userId ? "添加数据集" : "编辑数据集"}
width={800}
open={isModalOpen}
afterClose={() => formRef.current?.resetFields()}
@ -39,12 +71,27 @@ const Source = (props: Store) => {
cancelText="取消"
onCancel={() => {
setId(null);
setRecord(null);
setIsModalOpen(false);
}}
></Modal>
>
<SimpleForm
formName={"source_form"}
formRef={formRef}
colProps={25}
onFinish={() => {
sourceStore.add(formRef.current?.getFieldsValue());
setIsModalOpen(false);
}}
createCallback={() => {
formRef.current?.setFieldsValue(record);
}}
formDatas={defaultConfig as any}
></SimpleForm>
</Modal>
</Space>
</div>
);
};
export default inject("usrStore")(observer(Source));
export default inject("sourceStore")(observer(Source));

94
src/pages/source/source_config.tsx
View File

@ -1,97 +1,35 @@
import { FormType } from "@/components/form/interface";
import { UserDataType } from "@/model/userModel";
import { ColumnsType } from "antd/lib/table";
import { Image } from "antd";
import { getBirthDateAndGender } from "@/util/util";
export const defaultConfig = (team, per) => [
import dayjs from "dayjs";
export const defaultConfig = [
{
type: FormType.input,
label: "用户名",
name: "user_name",
label: "数据集名称",
name: "resource_name",
value: "",
rules: [{ required: true, message: "请输入用户名称!" }],
},
{
type: FormType.inputNumber,
label: "年龄",
name: "age",
value: "",
rules: [{ required: true, message: "请输入年龄" }],
},
{
type: FormType.input,
label: "身份证",
name: "id_card",
value: "",
rules: [{ required: true, message: "请输入身份证" }],
},
{
type: FormType.input,
label: "登录账号",
name: "account",
value: "",
rules: [{ required: true, message: "请输入登录账号" }],
},
{
type: FormType.input,
label: "联系电话",
name: "tel",
value: "",
},
{
type: FormType.input,
label: "邮箱",
name: "email",
value: "",
},
{
type: FormType.upload,
label: "头像",
name: "head_img",
value: [],
},
];
export const columns: ColumnsType<UserDataType> = [
{
title: "用户名",
title: "数据集名称",
dataIndex: "resource_name",
width: 200,
},
{
title: "上传用户",
dataIndex: "user_name",
width: 200,
fixed: "left",
},
{
title: "性别",
width: 150,
render: (render) => (
<span>{getBirthDateAndGender(render.id_card)?.gender}</span>
title: "上传时间",
dataIndex: "created_at",
width: 200,
render: (created_at) => (
<span>{dayjs(created_at).format("YYYY-MM-DD")}</span>
),
},
{
title: "头像",
dataIndex: "head_img",
width: 150,
render: (head_img) => {
return <Image src={head_img}></Image>;
},
},
{
title: "登录账号",
width: 150,
dataIndex: "account",
},
{
title: "身份证",
width: 150,
dataIndex: "id_card",
},
{
title: "联系电话",
width: 150,
dataIndex: "tel",
},
];

29
src/pages/user/user.tsx
View File

@ -4,25 +4,26 @@ import BTable from "@/components/b_table";
import { useEffect, useState } from "react";
import { Store } from "antd/lib/form/interface";
import React from "react";
import { columns } from "./user_config";
import { columns, defaultConfig } from "./user_config";
import "./user.less";
import SimpleForm from "@/components/form/simple_form";
const User = (props: Store) => {
const { usrStore } = props;
const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
const formRef = React.useRef<FormInstance>(null);
const [userId, setId] = useState<Number | null>(null);
const [record, setRecord] = useState<any>(null);
// 获取列表数据
useEffect(() => {
usrStore.getlist();
}, [usrStore]);
const addHandler = () => {};
return (
<div className="contentBox">
<Space direction="vertical" size="middle" style={{ display: "flex" }}>
<Button type="default" onClick={() => addHandler()}>
<Button type="default" onClick={() => setIsModalOpen(true)}>
添加用户
</Button>
<BTable
@ -30,6 +31,12 @@ const User = (props: Store) => {
scroll={{ x: "max-content" }}
columns={columns}
dataSource={usrStore.list}
editCallback={(record) => {
setIsModalOpen(true);
formRef.current?.setFieldsValue(record);
setRecord(record);
setId(record.id);
}}
/>
<Modal
@ -42,9 +49,23 @@ const User = (props: Store) => {
cancelText="取消"
onCancel={() => {
setId(null);
setRecord(null);
setIsModalOpen(false);
}}
></Modal>
>
<SimpleForm
formName={"user_form"}
formRef={formRef}
colProps={25}
onFinish={() => {
usrStore.add(formRef.current?.getFieldsValue())
}}
createCallback={() => {
formRef.current?.setFieldsValue(record);
}}
formDatas={defaultConfig as any}
></SimpleForm>
</Modal>
</Space>
</div>
);

12
src/pages/user/user_config.tsx
View File

@ -3,7 +3,7 @@ import { UserDataType } from "@/model/userModel";
import { ColumnsType } from "antd/lib/table";
import { Image } from "antd";
import { getBirthDateAndGender } from "@/util/util";
export const defaultConfig = (team, per) => [
export const defaultConfig = [
{
type: FormType.input,
label: "用户名",
@ -11,14 +11,6 @@ export const defaultConfig = (team, per) => [
value: "",
rules: [{ required: true, message: "请输入用户名称!" }],
},
{
type: FormType.inputNumber,
label: "年龄",
name: "age",
value: "",
rules: [{ required: true, message: "请输入年龄" }],
},
{
type: FormType.input,
label: "身份证",
@ -33,14 +25,12 @@ export const defaultConfig = (team, per) => [
value: "",
rules: [{ required: true, message: "请输入登录账号" }],
},
{
type: FormType.input,
label: "联系电话",
name: "tel",
value: "",
},
{
type: FormType.input,
label: "邮箱",

3
src/service/base.ts
View File

@ -72,6 +72,9 @@ class BaseHttps {
};
async upload(url: string, params: any) {
let res = await axios({
headers: {
'Content-Type': 'multipart/form-data'
},
method: 'post',
url: url,
data: params

8
src/service/source_config.ts Normal file
View File

@ -0,0 +1,8 @@
class SourceConfig {
static ADD: string = "/desc";
static EDIT: string = "/desc";
static LIST: string = "/desc/list";
static DELETE: string = "/desc";
}
export default SourceConfig;

25
src/service/user.ts
View File

@ -1,25 +0,0 @@
import { base } from '@/service/base';
class UserService {
static configAdd: string = "/user";
static configEdit: string = "/user";
static configList: string = "/user/list";
static configDelete: string = "/user";
static async add(params) {
return await base.post(UserService.configAdd, params);
}
static async edit(identity: string, params: any) {
return await base.put(UserService.configEdit + "/" + identity, params);
}
static async remove(identity) {
return await base.delete(UserService.configEdit + "/" + identity, {});
}
static async list(params) {
return await base.get(UserService.configList, params);
}
}
export default UserService ;

9
src/service/user_config.ts Normal file
View File

@ -0,0 +1,9 @@
class UserConfig {
static LOGINURI: string = "/anth/login/pc"
static ADD: string = "/user";
static EDIT: string = "/user";
static LIST: string = "/user/list";
static DELETE: string = "/user";
}
export default UserConfig;

18
src/store/baseStore.ts
View File

@ -1,5 +1,4 @@
import {base} from "@/service/base";
import userService from "@/service/user";
import { Pages } from "@/util/model/interface";
import { message } from "antd";
import { action, makeObservable, observable, runInAction } from "mobx";
@ -31,6 +30,7 @@ class BaseStore<B> implements BaseStoreInterface<B> {
add: action,
listStatus: observable,
})
console.log(urlConfig)
this.urlConfig = urlConfig;
}
@ -51,7 +51,7 @@ class BaseStore<B> implements BaseStoreInterface<B> {
// 添加
async add(param: any, listParam?: any) {
try {
let res = await userService.add(param);
let res = await base.post(this.urlConfig.ADD, param)
if (res.code !== 200) {
message.error(res.msg)
return false
@ -66,7 +66,7 @@ class BaseStore<B> implements BaseStoreInterface<B> {
// 更新
async putItem(id: string, param: any, listParam?: any) {
try {
let res = await userService.edit(id, param)
let res = await base.put(this.urlConfig.EDIT + "/" + id, param)
if (res.code !== 200) {
message.error(res.msg)
return false
@ -82,23 +82,23 @@ class BaseStore<B> implements BaseStoreInterface<B> {
async getlist(params?: any) {
this.listStatus = true;
try {
let res = await userService.list({
let res = await base.get(this.urlConfig.LIST, {
size: this.page?.Size ?? 20,
offset: this.page?.Offset ?? 1,
...params
});
this.listStatus = false;
let data: Array<B> = []
if (!res?.data) {
if (!res?.data?.record) {
runInAction(() => {
this.list = data;
})
this.listStatus = false;
return;
}
for (let i = 0; i < res.data.length; i++) {
for (let i = 0; i < res.data.record.length; i++) {
data.push({
key: res.data[i].id,
...res.data[i]
key: res.data.record[i].id,
...res.data.record[i]
})
}
runInAction(() => {

2
src/store/index.ts
View File

@ -1,7 +1,9 @@
import usrStore from '@/store/user'
import sourceStore from '@/store/source';
const store = {
usrStore,
sourceStore
};
export default store;

14
src/store/source.ts Normal file
View File

@ -0,0 +1,14 @@
import { makeObservable } from "mobx";
import BaseStore from "./baseStore";
import { UserDataType } from "@/model/userModel";
import SourceConfig from "@/service/source_config";
class SourceStore extends BaseStore<UserDataType> {
constructor() {
super(SourceConfig)
makeObservable(this, {
})
}
}
const sourceStore = new SourceStore();
export default sourceStore;

12
src/store/user.ts
View File

@ -1,18 +1,14 @@
import { action, computed, makeObservable, observable } from "mobx";
// 用户信息
import { base } from "@/service/base";
import BaseStore from "./baseStore";
import { UserDataType, UserInfos } from "@/model/userModel";
import { message } from "antd";
class UserConfig {
static LOGINURI: string = "/anth/login/pc"
}
import UserConfig from "@/service/user_config";
class UserStore extends BaseStore<UserDataType> {
_userinfo: UserInfos = {}; // 用户信息
userDetail = {}
isNeedLogin: boolean = false; // 是否需要登录
poverDetail: boolean = false; // 是否展示民兵详情
constructor() {
super(UserConfig)
@ -21,7 +17,6 @@ class UserStore extends BaseStore<UserDataType> {
login: action,
_userinfo: observable,
isNeedLogin: observable,
poverDetail: observable,
userDetail: observable,
openLoginDilog: action,
userInfo: computed,
@ -32,7 +27,6 @@ class UserStore extends BaseStore<UserDataType> {
if (!this._userinfo.token) {
let token = window.localStorage.getItem("token")
this._userinfo.token = token;
}
return this._userinfo;
}
@ -68,9 +62,7 @@ class UserStore extends BaseStore<UserDataType> {
closeLoginDilog() {
this.isNeedLogin = false;
}
setPoverDe(status: boolean) {
this.poverDetail = status
}
setUserDetaul(data) {
this.userDetail = data
}