add animation

src/components/ali_upload.tsx

@@ -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";
-
+import { UploadFileProps } from "./form/interface";
-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;
-}
 
 const getBase64 = (file: RcFile): Promise<string> =>
   new Promise((resolve, reject) => {
@@ -45,8 +31,8 @@ const AliUpload = (props: UploadFileProps) => {
   };
 
   useEffect(() => {
-    setFileList(props.imgList);
+    setFileList(props.value ?? []);
-  }, [props.imgList]);
+  }, [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}

src/components/edittor.tsx

@@ -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;
+  value?: string;
-  onChange: (value: string) => void;
+  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 ?? "");
-      setHtml(props.value);
+  }, [props.value]);
-    }
-  }, [props]);
 
   // 工具栏配置
   const toolbarConfig: Partial<IToolbarConfig> = {}; // TS 语法
@@ -56,8 +55,7 @@ function MyEditor(props: EditorProps) {
   }, [editor]);
 
   return (
-    <>
+    <div style={{ border: "1px solid #ccc", zIndex: 100 }} id={props.id}>
-      <div style={{ border: "1px solid #ccc", zIndex: 100 }}>
       <Toolbar
         editor={editor}
         defaultConfig={toolbarConfig}
@@ -70,14 +68,13 @@ function MyEditor(props: EditorProps) {
         onCreated={setEditor}
         onChange={(editor) => {
           setHtml(editor.getHtml());
-            props.onChange(editor.getHtml());
+          props.onChange!(editor.getHtml());
         }}
         mode="default"
         style={{ height: "500px", overflowY: "hidden" }}
       />
     </div>
-    </>
   );
-}
+};
 
 export default MyEditor;

src/components/form/interface.ts

@@ -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"
 }
 
@@ -56,3 +57,19 @@ 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;
+}

src/components/form/simple_form.tsx

@@ -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}
                 getValueFromEvent={(e) => {
                   if (Array.isArray(e)) {
                     return e;
@@ -125,12 +125,7 @@ const SimpleForm = (props: SimpleFormData) => {
                   return e && e.fileList;
                 }}
               >
-                <AliUpload
+                <AliUpload />
-                  imgList={v.value ?? []}
-                  onChnage={(res) => {
-                    form.setFieldValue(v.name, res);
-                  }}
-                />
               </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
+                <MyEditor value="" onChange={(vs)=>{
-                  value={v.value}
+                  form.setFieldValue(v.name,vs)
-                  onChange={function (value: string): void {
+                }} />
-                    form.setFieldValue(v.name, value);
-                  }}
-                />
               </Form.Item>
             );
           case FormType.radio:

src/components/map/mapUtil.ts

@@ -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添加到数组

src/pages/home/home_check.tsx

@@ -81,7 +81,7 @@ const HomeCheck = (props: Store) => {
           title: element.user_name,
           users: element,
           clicks: (v) => {
-            setId("01JDGZGAKDRK1K5R5AF9JFHCTN")
+            setId(v)
             setOpen(true)
           },
         });

src/pages/home/home_video.tsx

@@ -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") {

src/pages/polRegulations/regulations.tsx

@@ -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);
+    let url = Config.baseUrl+"uploads/" + records.file_url;
-    setRecord(record);
+    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);

src/pages/politicalStudy/index.tsx

@@ -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) => {
+  const edit = (records) => {
-    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);
     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);

src/pages/system/banner.tsx

@@ -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>
   );
 };

src/pages/training/task_archives.tsx

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

src/pages/user/user.tsx

@@ -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),
+      team_link_user: record.team.map((item) => item.team_identity),
-      pers_link_user:record.pers.map(item=>item.pers_identity),
+      pers_link_user: record.pers.map((item) => item.pers_identity),
-      head_img:[{ url: record.head_img }],
+      head_img: [{ url: record.head_img }],
     };
-    let config = defaultConfig(team, per)
+    setProjectConfig(defaultConfig(team, per));
-    config.forEach((e:any)=>{
-      if (e.name==="head_img"){
-        e.value =[{ url: record.head_img }];
-      }
-    })
-    setProjectConfig(config);
     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>

src/pages/user/user_config.tsx

@@ -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: "是否党员",
+    title: "党员",
-    width: 150,
+    width: 100,
     dataIndex: "p_member",
     render: (p_member) => <span>{p_member === 1 ? "是" : "否"}</span>,
   },
   {
-    title: "是否退役军人",
+    title: "退役军人",
-    width: 150,
+    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",
   },
 ];

src/store/user.ts

@@ -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")

src/util/config.ts

@@ -1,6 +1,6 @@
 class Config {
-    static baseUrl = "https://www.hswzct.cn:12016/";
+    // static baseUrl = "https://www.hswzct.cn:12016/";
-    // static baseUrl = "http://127.0.0.1:12214/";
+    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"; //