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

add animation

This commit is contained in:
wang_yp 2025-03-14 22:17:16 +08:00
parent 41d4a359af
commit 20cfaf00bb
15 changed files with 137 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/ali_upload.tsx
View File

@ -3,21 +3,7 @@ import { PlusOutlined } from "@ant-design/icons";
import Upload, { RcFile, UploadFile, UploadProps } from "antd/lib/upload";
import { useEffect, useState } from "react";
import Config from "@/util/config";
interface UploadFileProps {
imgList: Array<UploadFileEx>;
onChnage: Function;
maxCount?: number;
}
interface UploadFileEx extends UploadFile {
systemImageId?: number;
bannerName?: string;
file_name?: string;
file_url?: string;
redictUrl?: string;
id?: number;
}
import { UploadFileProps } from "./form/interface";
const getBase64 = (file: RcFile): Promise<string> =>
new Promise((resolve, reject) => {
@ -45,8 +31,8 @@ const AliUpload = (props: UploadFileProps) => {
};
useEffect(() => {
setFileList(props.imgList);
}, [props.imgList]);
setFileList(props.value ?? []);
}, [props.value]);
const handleChange: UploadProps["onChange"] = ({ fileList: newFileList }) => {
newFileList.forEach((i) => {
@ -54,7 +40,7 @@ const AliUpload = (props: UploadFileProps) => {
i.fileName = i.name;
});
setFileList(newFileList);
props.onChnage(newFileList);
props.onChange!(newFileList);
};
const uploadButton = (
<div>
@ -64,8 +50,9 @@ const AliUpload = (props: UploadFileProps) => {
);
return (
<div style={{ margin: 10 }}>
<div style={{ margin: 10 }} id={props.id}>
<Upload
{...props}
listType="picture-card"
fileList={files}
action={`${Config.baseUrl}/v1/public/fts/upload`}
@ -73,7 +60,7 @@ const AliUpload = (props: UploadFileProps) => {
maxCount={props.maxCount ?? 4}
onChange={handleChange}
>
{files.length >= (props.maxCount??4) ? null : uploadButton}
{files.length >= (props.maxCount ?? 4) ? null : uploadButton}
</Upload>
<Modal
open={previewOpen}

57
src/components/edittor.tsx
View File

@ -6,21 +6,20 @@ import { Editor, Toolbar } from "@wangeditor/editor-for-react";
import { IDomEditor, IEditorConfig, IToolbarConfig } from "@wangeditor/editor";
import Config from "@/util/config";
interface EditorProps {
value: string;
onChange: (value: string) => void;
value?: string;
onChange?: (value: string) => void;
id?: string;
}
function MyEditor(props: EditorProps) {
const MyEditor = (props: EditorProps) => {
// editor 实例
const [editor, setEditor] = useState<IDomEditor | null>(null); // TS 语法
// 编辑器内容
const [html, setHtml] = useState("<p></p>");
const [html, setHtml] = useState("");
// 模拟 ajax 请求，异步设置 html
useEffect(() => {
if (props.value) {
setHtml(props.value);
}
}, [props]);
setHtml(props.value ?? "");
}, [props.value]);
// 工具栏配置
const toolbarConfig: Partial<IToolbarConfig> = {}; // TS 语法
@ -56,28 +55,26 @@ function MyEditor(props: EditorProps) {
}, [editor]);
return (
<>
<div style={{ border: "1px solid #ccc", zIndex: 100 }}>
<Toolbar
editor={editor}
defaultConfig={toolbarConfig}
mode="default"
style={{ borderBottom: "1px solid #ccc" }}
/>
<Editor
defaultConfig={editorConfig}
value={html}
onCreated={setEditor}
onChange={(editor) => {
setHtml(editor.getHtml());
props.onChange(editor.getHtml());
}}
mode="default"
style={{ height: "500px", overflowY: "hidden" }}
/>
</div>
</>
<div style={{ border: "1px solid #ccc", zIndex: 100 }} id={props.id}>
<Toolbar
editor={editor}
defaultConfig={toolbarConfig}
mode="default"
style={{ borderBottom: "1px solid #ccc" }}
/>
<Editor
defaultConfig={editorConfig}
value={html}
onCreated={setEditor}
onChange={(editor) => {
setHtml(editor.getHtml());
props.onChange!(editor.getHtml());
}}
mode="default"
style={{ height: "500px", overflowY: "hidden" }}
/>
</div>
);
}
};
export default MyEditor;

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

@ -1,4 +1,4 @@
import { FormInstance } from "antd"
import { FormInstance, UploadFile } from "antd"
import React from "react"
export enum FormType {
input = "input",
@ -42,6 +42,7 @@ export interface SimpleFormData {
createCallback?: Function
children?: React.ReactElement
childrenPosi?: boolean
current?:any
layout?: "vertical" | "horizontal" | "inline"
}
@ -55,4 +56,20 @@ export interface rules {
export interface selectItem {
name: string,
id: number,
}
}
export interface UploadFileProps {
value?: Array<UploadFileEx>;
onChange?: (value: Array<UploadFileEx>) => void;
maxCount?: number;
id?: string;
}
export interface UploadFileEx extends UploadFile {
systemImageId?: number;
bannerName?: string;
file_name?: string;
file_url?: string;
redictUrl?: string;
id?: number;
}

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

@ -10,6 +10,7 @@ const { TextArea } = Input;
const SimpleForm = (props: SimpleFormData) => {
const [form] = Form.useForm();
const onFinish = (values: any) => {
console.log("Success:", values);
props.onFinish(values);
};
useEffect(() => {
@ -22,6 +23,7 @@ const SimpleForm = (props: SimpleFormData) => {
<Form
name={props.formName}
ref={props.formRef}
preserve={false}
autoComplete="on"
form={form}
labelCol={{ span: props.span ?? 4 }}
@ -114,10 +116,8 @@ const SimpleForm = (props: SimpleFormData) => {
<Form.Item
key={v.label}
label={v.label}
valuePropName="file_list"
name={v.name}
rules={v.rules}
initialValue={v.value}
rules={v.rules}
getValueFromEvent={(e) => {
if (Array.isArray(e)) {
return e;
@ -125,12 +125,7 @@ const SimpleForm = (props: SimpleFormData) => {
return e && e.fileList;
}}
>
<AliUpload
imgList={v.value ?? []}
onChnage={(res) => {
form.setFieldValue(v.name, res);
}}
/>
<AliUpload />
</Form.Item>
);
case FormType.textarea:
@ -142,7 +137,7 @@ const SimpleForm = (props: SimpleFormData) => {
rules={v.rules}
>
<TextArea
value={v.name}
value={v.value}
placeholder="Controlled autosize"
autoSize={{ minRows: 3, maxRows: 5 }}
/>
@ -156,12 +151,9 @@ const SimpleForm = (props: SimpleFormData) => {
name={v.name}
rules={v.rules}
>
<MyEditor
value={v.value}
onChange={function (value: string): void {
form.setFieldValue(v.name, value);
}}
/>
<MyEditor value="" onChange={(vs)=>{
form.setFieldValue(v.name,vs)
}} />
</Form.Item>
);
case FormType.radio:

2
src/components/map/mapUtil.ts
View File

@ -51,7 +51,7 @@ class MapUtl {
});
marker.on("click", (e) => {
infoWindow.open(MapUtl.amap, e.target.getPosition());
clicks(users.id)
clicks(users.identity)
});
MapUtl.amap?.add(marker);
// 将maker添加到数组

4
src/pages/home/home_check.tsx
View File

@ -75,13 +75,13 @@ const HomeCheck = (props: Store) => {
let list = res.data.record;
list.forEach((element) => {
if (!element.lat || !element.long) return;
MapUtl.addMaker({
MapUtl.addMaker({
lng: element.long,
lat: element.lat,
title: element.user_name,
users: element,
clicks: (v) => {
setId("01JDGZGAKDRK1K5R5AF9JFHCTN")
setId(v)
setOpen(true)
},
});

3
src/pages/home/home_video.tsx
View File

@ -26,6 +26,9 @@ const HomeVideo = (props: Store) => {
textAlign: "right",
zIndex: 999,
marginRight: "20px",
position: "absolute",
right: "0px",
top: "-7px",
}}
onClick={() => {
if (obj.width === "300px") {

14
src/pages/polRegulations/regulations.tsx
View File

@ -8,6 +8,7 @@ import React from "react";
import { columns, defaultConfig } from "./regulations_column";
import { Form } from "antd";
import dayjs from "dayjs";
import Config from "@/util/config";
const { Option } = Select;
const Regulations = (props: Store) => {
const { regulationsStore, regulationsCatStore } = props;
@ -56,15 +57,20 @@ const Regulations = (props: Store) => {
</Space>
);
};
const edit = (record) => {
const edit = (records) => {
setIsModalOpen(true);
record.expiry_date = dayjs(record.expiry_date);
setRecord(record);
let url = Config.baseUrl+"uploads/" + records.file_url;
let data = {
...records,
file_url: [{url:url ?? ""}],
};
records.expiry_date = dayjs(records.expiry_date);
setRecord(data);
};
const onFinish = (values: any) => {
let data = {
...values,
file_url: (values.file_url.length>0)? values.file_url[0].name:'',
file_url: values.file_url?.length > 0 ? values.file_url[0].name : "",
};
if (!record?.id) {
regulationsStore.add(data);

30
src/pages/politicalStudy/index.tsx
View File

@ -1,7 +1,7 @@
import { Button, Space, Modal, FormInstance, Form } from "antd";
import { Button, Space, Modal, FormInstance } from "antd";
import { inject, observer } from "mobx-react";
import BTable from "@/components/b_table";
import { useEffect, useState } from "react";
import { useEffect, useRef, useState } from "react";
import { Store } from "antd/lib/form/interface";
import SimpleForm from "@/components/form/simple_form";
import React from "react";
@ -13,6 +13,8 @@ const PoliticalStudy = (props: Store) => {
const [projectConfig, setProjectConfig] = useState<any>([]);
const formRef = React.useRef<FormInstance>(null);
const [record, setRecord] = useState<any>(null);
const recordRef = useRef<any>(null);
useEffect(() => {
politicalStudyStore.getlist();
setProjectConfig(defaultConfig);
@ -35,7 +37,7 @@ const PoliticalStudy = (props: Store) => {
danger
size="small"
onClick={() => {
politicalStudyStore.deleteItem(record.id);
politicalStudyStore.deleteItem(record.identity);
}}
>
删除
@ -43,20 +45,15 @@ const PoliticalStudy = (props: Store) => {
</Space>
);
};
const edit = (record) => {
let data = {
...record,
file_url: [record.file_url],
};
let config = defaultConfig;
config.forEach((e: any) => {
if (e.name === "file_url") {
e.value = [{ url: record.file_url }];
}
});
setProjectConfig(config);
setRecord(data);
const edit = (records) => {
setIsModalOpen(true);
let data = {
...records,
file_url: [{url:records.file_url ?? ""}],
};
setRecord(data);
formRef.current?.setFieldsValue(recordRef.current);
};
const onFinish = (values: any) => {
let data = {
@ -119,6 +116,7 @@ const PoliticalStudy = (props: Store) => {
>
<SimpleForm
formRef={formRef}
current={record}
createCallback={() => {
if (record?.id) {
formRef.current?.setFieldsValue(record);

2
src/pages/system/banner.tsx
View File

@ -37,7 +37,7 @@ const Banner = (props: Store) => {
<Button type="dashed" onClick={save}>
保存
</Button>
<AliUpload imgList={files} onChnage={uploadChange} />
<AliUpload value={files} onChange={uploadChange} />
</div>
);
};

4
src/pages/training/task_archives.tsx
View File

@ -157,9 +157,9 @@ const TaskArchives = (props: TaskArchivesProps) => {
</Flex>
<Divider dashed />
<AliUpload
imgList={imageList}
value={imageList}
maxCount={100}
onChnage={(v) => {
onChange={(v) => {
setImageList(v);
}}
/>

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

@ -28,17 +28,11 @@ const User = (props: Store) => {
...record,
vet_in_time: dayjs(record.vet_in_time),
vet_out_time: dayjs(record.vet_out_time),
team_link_user:record.team.map(item => item.team_identity),
pers_link_user:record.pers.map(item=>item.pers_identity),
head_img:[{ url: record.head_img }],
team_link_user: record.team.map((item) => item.team_identity),
pers_link_user: record.pers.map((item) => item.pers_identity),
head_img: [{ url: record.head_img }],
};
let config = defaultConfig(team, per)
config.forEach((e:any)=>{
if (e.name==="head_img"){
e.value =[{ url: record.head_img }];
}
})
setProjectConfig(config);
setProjectConfig(defaultConfig(team, per));
setIsModalOpen(true);
setRecord(records);
setId(records.id);
@ -66,6 +60,7 @@ const User = (props: Store) => {
};
useEffect(() => {
usrStore.getlist();
usrStore.getDropList();
usrStore.getTeam().then((res) => {
let data = res.data?.record ?? [];
for (let index = 0; index < data.length; index++) {
@ -211,6 +206,7 @@ const User = (props: Store) => {
onFinish={onFinish}
initialValues={true}
onFinishFailed={onFinishFailed}
current={record}
>
<>
<Form.Item
@ -228,6 +224,21 @@ const User = (props: Store) => {
})}
</Select>
</Form.Item>
<Form.Item
key="p_member"
label="政治面貌"
name="p_member"
>
<Select placeholder="">
{usrStore.dropList?.map((v: any) => {
return (
<Option key={v.identity} value={v.identity}>
{v.name}
</Option>
);
})}
</Select>
</Form.Item>
</>
</SimpleForm>
</Modal>

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

@ -170,24 +170,6 @@ export const defaultConfig =(team,per)=>
value: "",
rules: [{ required: true, message: "请选择个人身份属性" }],
},
{
type: FormType.radio,
label: "政治面貌",
name: "p_member",
value: 1,
radioData: [
{
key: "是",
val: 1,
},
{
key: "否",
val: 2,
},
],
rules: [{ required: true, message: "是否党员不能为空" }],
},
{
type: FormType.radio,
label: "是否退役军人",
@ -291,17 +273,17 @@ export const columns: ColumnsType<UserDataType> = [
{
title: "用户名",
dataIndex: "user_name",
width: 200,
width: 100,
fixed: "left",
},
{
title: "性别",
width: 150,
width: 100,
render: (render) => <span>{getBirthDateAndGender(render.id_card)?.gender}</span>,
},
{
title: "年龄",
width: 150,
width: 100,
render: (render) => <span>{getAgeByIDCard(render.id_card)}岁</span>,
},
{
@ -344,32 +326,32 @@ export const columns: ColumnsType<UserDataType> = [
dataIndex: "tel",
},
{
title: "是否党员",
width: 150,
title: "党员",
width: 100,
dataIndex: "p_member",
render: (p_member) => <span>{p_member === 1 ? "是" : "否"}</span>,
},
{
title: "是否退役军人",
width: 150,
title: "退役军人",
width: 100,
dataIndex: "vet",
render: (vet) => <span>{vet === 1 ? "是" : "否"}</span>,
},
{
title: "是否两委人员",
title: "两委人员",
dataIndex: "two_committees",
width: 150,
width: 100,
render: (vet) => <span>{vet === 1 ? "是" : "否"}</span>,
},
{
title: "是否微网格员",
title: "微网格员",
dataIndex: "grid_letter_user",
width: 150,
width: 100,
render: (vet) => <span>{vet === 1 ? "是" : "否"}</span>,
},
{
title: "备注",
width: 150,
width: 300,
dataIndex: "remark",
},
];

8
src/store/user.ts
View File

@ -12,6 +12,7 @@ class UserConfig {
static EDIT: string = "/v1/user"
static pover: string = "/v1/user/userPower"
static poverList: string = "/v1/user/poverList"
static dropList: string = "/v1/sys/drop"
static team: string = "/v1/team/list"
static per: string = "/v1/persMgmt/list"
static serch: string = "/v1/user/serch"
@ -28,6 +29,7 @@ class UserStore extends BaseStore<UserDataType> {
isNeedLogin: boolean = false; // 是否需要登录
poverDetail: boolean = false; // 是否展示民兵详情
poverList: any = []
dropList: any = []
constructor() {
super(UserConfig)
@ -43,6 +45,7 @@ class UserStore extends BaseStore<UserDataType> {
getPatrol: action,
getSite: action,
_userinfo: observable,
dropList: observable,
isNeedLogin: observable,
poverDetail: observable,
userDetail: observable,
@ -82,6 +85,11 @@ class UserStore extends BaseStore<UserDataType> {
this.poverList = res.data.record
}
async getDropList() {
let res = await baseHttp.get(UserConfig.dropList, { "drop_type": 2 })
this.dropList = res.data.record
}
get userInfo(): UserInfos {
if (!this._userinfo.token) {
let token = window.localStorage.getItem("token")

4
src/util/config.ts
View File

@ -1,6 +1,6 @@
class Config {
static baseUrl = "https://www.hswzct.cn:12016/";
// static baseUrl = "http://127.0.0.1:12214/";
// static baseUrl = "https://www.hswzct.cn:12016/";
static baseUrl = "http://127.0.0.1:12214/";
static ws = "wss://www.hswzct.cn:12016/wsadmin?id=admin";
static userStatic = "https://www.hswzct.cn:12016/api/uploads/user/";
static videoApi = "https://sprh.hswzct.cn:4443"; //