home

src/components/edittor.tsx

@@ -1,22 +1,24 @@
 import "@wangeditor/editor/dist/css/style.css"; // 引入 css
 
 import React, { useState, useEffect } from "react";
+import baseHttp from "@/service/base";
 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;
 }
-function MyEditor(props:EditorProps) {
+function MyEditor(props: EditorProps) {
   // editor 实例
   const [editor, setEditor] = useState<IDomEditor | null>(null); // TS 语法
   // 编辑器内容
-  const [html, setHtml] = useState("<p>hello</p>");
+  const [html, setHtml] = useState("<p></p>");
 
   // 模拟 ajax 请求，异步设置 html
   useEffect(() => {
-    if (props.value){
-      setHtml(props.value)
+    if (props.value) {
+      setHtml(props.value);
     }
   }, [props]);
 
@@ -25,8 +27,23 @@ function MyEditor(props:EditorProps) {
 
   // 编辑器配置
   const editorConfig: Partial<IEditorConfig> = {
-    // TS 语法
     placeholder: "请输入内容...",
+    MENU_CONF: {
+      uploadImage: {
+        server: Config.baseUrl + "/v1/public/fts/upload",
+        fieldName: "file",
+        async customUpload(file: File, insertFn) {
+          let url = Config.baseUrl + "/uploads/" + file.name;
+          let uploadUrl = Config.baseUrl + "v1/public/fts/upload";
+          const formData = new FormData();
+          formData.append("file", file);
+          let res = await baseHttp.upload(uploadUrl, formData);
+          if (res.code === 200) {
+            insertFn(url, "", "");
+          }
+        },
+      },
+    },
   };
 
   // 及时销毁 editor ，重要！
@@ -52,8 +69,9 @@ function MyEditor(props:EditorProps) {
           value={html}
           onCreated={setEditor}
           onChange={(editor) => {
-            setHtml(editor.getHtml())
-            props.onChange(editor.getHtml())
+            console.log("onChange", editor.getHtml());
+            setHtml(editor.getHtml());
+            props.onChange(editor.getHtml());
           }}
           mode="default"
           style={{ height: "500px", overflowY: "hidden" }}

src/pages/glory_plaque/index.tsx

@@ -1,13 +1,20 @@
 import BTable from "@/components/b_table";
+import { FormType } from "@/components/form/interface";
+import SimpleForm from "@/components/form/simple_form";
 import { UserDataType } from "@/model/userModel";
+import { Button, FormInstance, Modal, Space } from "antd";
 import { Store } from "antd/es/form/interface";
 import { ColumnsType } from "antd/lib/table";
 import dayjs from "dayjs";
 import { inject, observer } from "mobx-react";
+import React, { useState } from "react";
 import { useEffect } from "react";
 
 const GloryPlaque = (props: Store) => {
   const { gpStore } = props;
+  const formRef = React.useRef<FormInstance>(null);
+  const [record, setRecord] = useState<any>(null);
+  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
   useEffect(() => {
     gpStore.getlist();
   }, [gpStore]);
@@ -15,13 +22,119 @@ const GloryPlaque = (props: Store) => {
     { title: "申请人", dataIndex: "user_name" },
     { title: "申请人手机号", dataIndex: "tel" },
     { title: "悬挂地址", dataIndex: "address" },
-    { title: "申请时间", dataIndex: "created_at",render:(created_at)=>(<span>{dayjs(created_at).format("YYYY-MM-DD")}</span>) },
-    { title: "申请原因", dataIndex: "abbr",render: (abbr) => <span>{abbr===2?'更换':'悬挂'}</span> },
+    {
+      title: "申请时间",
+      dataIndex: "created_at",
+      render: (created_at) => (
+        <span>{dayjs(created_at).format("YYYY-MM-DD")}</span>
+      ),
+    },
+    {
+      title: "申请原因",
+      dataIndex: "abbr",
+      render: (abbr) => <span>{abbr === 2 ? "更换" : "悬挂"}</span>,
+    },
     { title: "申请描述", dataIndex: "desc" },
+    {
+      title: "审核状态",
+      dataIndex: "status",
+      render(value, record, index) {
+        return record.status === 1
+          ? "已通过"
+          : record.status === 2
+          ? "已驳回"
+          : "待审批";
+      },
+    },
+    {
+      title: "操作",
+      dataIndex: "id",
+      ellipsis: {
+        showTitle: false,
+      },
+      render: (any, record) => column_widget(any, record),
+    },
   ];
+
+  const edit = (record) => {
+    setIsModalOpen(true);
+    setRecord(record);
+  };
+
+  // 审核通过
+  const access = (record) => {
+    gpStore.access(record.identity, { status: 1 });
+  };
+  const onFinish = (values: any) => {
+    let data = {
+      ...values,
+      status: 2,
+    };
+    // 驳回
+    gpStore.access(record.identity, data);
+    setIsModalOpen(false);
+  };
+  const column_widget = (any, record) => {
+    if (record.status === 0) {
+      return (
+        <Space wrap>
+          <Button
+            type="dashed"
+            size="small"
+            onClick={() => {
+              edit(record);
+            }}
+          >
+            驳回
+          </Button>
+          <Button
+            type="dashed"
+            size="small"
+            onClick={() => {
+              access(record);
+            }}
+          >
+            通过
+          </Button>
+        </Space>
+      );
+    }
+    return <div></div>;
+  };
   return (
     <div>
       <BTable store={gpStore} columns={columns} dataSource={gpStore.list} />
+      <Modal
+        title={"审批"}
+        width={500}
+        open={isModalOpen}
+        afterClose={() => formRef.current?.resetFields()}
+        onOk={() => formRef.current?.submit()}
+        onCancel={() => {
+          setIsModalOpen(false);
+        }}
+        okText="确定"
+        cancelText="取消"
+      >
+        <SimpleForm
+          formRef={formRef}
+          formName="card_basic"
+          colProps={25}
+          subBtnName="提交"
+          formDatas={[
+            {
+              type: FormType.input,
+              label: "驳回原因",
+              name: "reject_mark",
+              value: "",
+              rules: [{ required: true, message: "请输入驳回原因!" }],
+            },
+          ]}
+          onFinish={onFinish}
+          initialValues={true}
+          onFinishFailed={() => {}}
+        />
+      </Modal>
     </div>
   );
 };

src/service/base.ts

@@ -73,7 +73,10 @@ class BaseHttp {
         let res = await axios({
             method: 'post',
             url: url,
-            data: params
+            data: params,
+            headers: {
+                'Content-Type': 'multipart/form-data'
+            }
         });
         return res.data;
     };

src/store/gp.ts

@@ -1,17 +1,26 @@
-import {  makeObservable } from "mobx";
+import { makeObservable } from "mobx";
 // 光荣牌
 import BaseStore from "./baseStore";
 import { TagDataType } from "@/model/userModel";
+import baseHttp from "@/service/base";
+
 class GpConfig {
     static LIST: string = "/v1/gplaque/list"
     static ADD: string = "/v1/gplaque"
     static DELETE: string = "/v1/gplaque"
     static EDIT: string = "/v1/gplaque"
+    static ACCESS: string = "/v1/gplaque/access"
 }
 class GpStore extends BaseStore<TagDataType> {
     constructor() {
         super(GpConfig)
         makeObservable(this, {})
+        // access
+    }
+    // 审核
+    async access(idel: string, param: any) {
+        await baseHttp.put(GpConfig.ACCESS + "/" + idel, param)
+        this.getlist()
     }
 }
 const gpStore = new GpStore()

src/util/config.ts

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