feats

src/components/Page/Curd.jsx

@@ -7,12 +7,16 @@ const drawerProps = {
   destroyOnClose: true
 }
 export default (props) => {
-  const { rowKey, columns, request, formProps, renderFormItems, ...leftProps } = props;
+  const { rowKey, columns, request, formProps, renderFormItems, tableRef, ...leftProps } = props;
 
   const [form] = Form.useForm();
   const listRef = React.useRef();
   const rowRef = React.useRef();
   const [open, setOpen] = React.useState(false);
+
+  if (tableRef) {
+    tableRef.current = listRef.current;
+  }
   
   const onAdd = () => {
     rowRef.current = undefined;

src/components/Upload/Upload.jsx

@@ -0,0 +1,10 @@
+import { Upload } from 'antd';
+import { uploadFile } from './request'
+
+export default (props) => {
+  return (
+    <Upload {...props} customRequest={uploadFile} >
+      {props.children}
+    </Upload>
+  )
+}

src/components/Upload/UploadImage.jsx

@@ -0,0 +1,58 @@
+import React, { useState } from 'react';
+import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
+import Upload from './Upload';
+
+function beforeUpload(file) {
+  const isImage = file.type === 'image/jpeg' || file.type === 'image/png'||file.type==='image/gif';
+  if (!isImage) {
+    message.error('请上传 JPG , PNG或GIF 图片!');
+  }
+  const isLt10M = file.size / 1024 / 1024 < 10;
+  if (!isLt10M) {
+    message.error('图片大小必须小于 10MB!');
+  }
+
+  return isImage && isLt10M;
+}
+
+const UploadButton = (props) => (
+  <div>
+    {props.loading ? <LoadingOutlined /> : <PlusOutlined />}
+    <div style={{ marginTop: 8 }}>上传</div>
+  </div>
+);
+
+export default (props) => {
+  const { value, onChange } = props;
+
+  const [loading, setLoading] = useState(false);
+
+  const handleChange = info => {
+    if (info.file.status === 'uploading') {
+      setLoading(true);
+      return;
+    }
+    if (info.file.status === 'error') {
+      setLoading(false);
+      return;
+    }
+
+    if (info.file.status === 'done') {
+      setLoading(false);
+      const { url, fileType } = info.file.response;
+      onChange(url);
+    }
+  };
+
+  return (
+    <Upload
+      listType="picture-card"
+      className="image-uploader"
+      showUploadList={false}
+      beforeUpload={beforeUpload}
+      onChange={handleChange}
+    >
+      {value ? <img src={value} alt="avatar" style={{ width: '100%', height: '100%' }} /> : <UploadButton loading={loading} />}
+    </Upload>
+  );
+}

src/components/Upload/UploadImageList.jsx

@@ -0,0 +1,115 @@
+
+import React, { useEffect, useState } from 'react';
+import { Modal } from 'antd'
+import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
+import Upload from './Upload';
+
+function beforeUpload(file) {
+  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'|| file.type === 'image/gif';
+  if (!isJpgOrPng) {
+    message.error('请上传 JPG,PNG 或 GIF 图片!');
+  }
+  const isLt10M = file.size / 1024 / 1024 < 10;
+  if (!isLt10M) {
+    message.error('图片大小必须小于 10MB!');
+  }
+
+  return isJpgOrPng && isLt10M;
+}
+
+const UploadButton = (props) => (
+  <div>
+    {props.loading ? <LoadingOutlined /> : <PlusOutlined />}
+    <div style={{ marginTop: 8 }}>上传</div>
+  </div>
+);
+
+export default (props) => {
+  const { value, onChange, input, output } = props;
+
+  const [loading, setLoading] = useState(false);
+  const [previewVisible, setPreviewVisible] = useState(false);
+  const [previewImage, setPreviewImage] = useState();
+  const [fileList, setFileList] = useState([]);
+
+  const handleChange = info => {
+    if (info.file.status === 'uploading') {
+      setLoading(true);
+      return;
+    }
+    if (info.file.status === 'error') {
+      setLoading(false);
+      return;
+    }
+
+    if (info.file.status === 'removed') {
+      toggleChange(info.fileList)
+    }
+  };
+
+  const handleSuccess = ({url}) => {
+    setLoading(false)
+    const inx = fileList?.length ? fileList.length + 1 : 1
+    const list = fileList.concat({
+      url,
+      uid: `new-${inx}`,
+      status: 'done'
+    })
+    toggleChange(list)
+  }
+
+  const toggleChange = (list) => {
+    if (output) {
+      onChange(list.map(x => output(x)))
+    } else {
+      onChange(list)
+    }
+  }
+
+  const handlePreview = (file) => {
+    setPreviewImage(file.url)
+    setPreviewVisible(true)
+  }
+
+  useEffect(() => {
+    if (input) {
+      const lst = (value || []).map((it) => {
+        const { uid, url } = input(it)
+        return {
+          uid,
+          url,
+          status: 'done',
+          raw: it,
+        }
+      })
+      setFileList(lst)
+    } else {
+      setFileList(value || [])
+    }
+  }, [value])
+
+  return (
+    <>
+      <Upload
+        listType="picture-card"
+        className="image-uploader"
+        fileList={fileList}
+        beforeUpload={beforeUpload}
+        onChange={handleChange}
+        onPreview={handlePreview}
+        onSuccess={handleSuccess}
+      >
+        <UploadButton loading={loading} />
+      </Upload>
+      <Modal
+        visible={previewVisible}
+        title="图片预览"
+        footer={null}
+        onCancel={() => setPreviewVisible(false)}
+      >
+        <img alt="example" style={{ width: '100%' }} src={previewImage} />
+      </Modal>
+    </>
+  );
+}
+

src/components/Upload/UploadVideo.jsx

@@ -0,0 +1,94 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { Button } from 'antd'
+import Upload from './Upload';
+// import { uplodeNoteImage } from '@/services/note';
+import styles from './style.less';
+
+function beforeUpload(file) {
+  const isMp4 = file.type === 'video/mp4';
+  if (!isMp4) {
+    message.error('请上传 MP4 视频!');
+  }
+
+  return isMp4;
+}
+
+export default (props) => {
+  //onPoster 改变主图事件   isScreenshot判断父组件是否需要截屏按钮
+  const { value, onChange, onPoster, isScreenshot } = props;
+  const [loading, setLoading] = useState(false);//上传按钮loading框
+  const [capturing, setCapturing] = useState(false);//截屏按钮loading框
+  const [video, setVideo] = useState()//当前上传的视频
+  const [isVideoReady, setIsVideoReady] = useState(false)//判断视频是否加载成功
+  
+  const canvasRef = useRef()
+  const videoRef = useRef()
+
+  useEffect(() => {
+    setVideo(value)//父组件的视频获取成功时改变当前页面的视频
+  }, [value])
+
+  const handleChange = info => {
+    if (info.file.status === 'uploading') {
+      setLoading(true);
+      return;
+    }
+    if (info.file.status === 'error') {
+      setLoading(false);
+      return;
+    }
+    if (info.file.status === 'done') {
+      onChange(info.file.response);
+      setLoading(false);
+    }
+  };
+
+  //开始截图
+  const handelScreenshot = () => {
+    const ctx = canvasRef.current.getContext("2d");  
+    ctx.drawImage(videoRef.current, 0, 0);    
+    const image = canvasRef.current.toDataURL("image/png", 0.9)
+    setCapturing(true)
+    // uplodeNoteImage({ base64: image }).then((res) => {
+    //   onPoster(res)
+    //   setCapturing(false)
+    // })
+  }
+
+  //视频加载成功事件
+  const handleVideoReady = (e) => {
+    setIsVideoReady(true)
+    canvasRef.current.width = e.target.videoWidth;
+    canvasRef.current.height = e.target.videoHeight;
+  }
+
+  return (
+    <div className={styles['video-uploader']}>
+      <Upload
+        className="image-uploader"
+        showUploadList={false}
+        beforeUpload={beforeUpload}
+        onChange={handleChange}
+      >
+        <div style={{ maxWidth: '1px', maxHeight: '1px', overflow: 'hidden' }}>
+          <canvas ref={canvasRef}></canvas>
+        </div>
+        <Button loading={loading}>
+          点击上传视频 (MP4)
+        </Button>
+
+      </Upload>
+      {
+        isScreenshot && (
+          // disabled={!isVideoReady} 当视频准备成功时截屏按钮可以点击  否则不能点击
+          <Button loading={capturing} style={{ marginLeft: '1em' }} onClick={handelScreenshot} disabled={!isVideoReady}>截屏</Button>
+        )
+      }
+      {
+        !!video && (
+          <video ref={videoRef} width="320" height='500' crossOrigin='anonymous' controls src={video} onCanPlay={handleVideoReady}></video>
+        )
+      }
+    </div>
+  );
+}

src/components/Upload/index.jsx

@@ -0,0 +1,11 @@
+import Upload from './Upload';
+import UploadImage from './UploadImage';
+import UploadImageList from './UploadImageList';
+import UploadVideo from './UploadVideo';
+
+export {
+  Upload,
+  UploadImage,
+  UploadImageList,
+  UploadVideo,
+}

src/components/Upload/request.js

@@ -0,0 +1,32 @@
+import request from '@/utils/request';
+
+const upload = (file, fileType = 'image') => {
+  const formData = new FormData();
+  formData.append("file", file);
+  formData.append("fileType", fileType);
+
+  return request('/api/admin/file', {
+    method: 'post',
+    data: formData,
+    headers: {
+      'Content-Type': 'multipart/form-data',
+    }
+  });
+}
+
+/**
+ * 上传文件
+ * @returns 
+ */
+export function uploadFile(params) {
+  const { file, onSuccess, onError } = params;
+  upload(file).then((res) => {
+    onSuccess(res, file)
+  }).catch((e) => {
+    onError(e)
+  });
+
+  return {
+    abort: () => {},
+  };
+}

src/components/Upload/style.less

@@ -0,0 +1,7 @@
+.video-uploader {
+  video {
+    margin-top: 2em;
+    width: 100%;
+    max-height: 360px;
+  }
+}

src/components/Wangeditor/index.jsx

@@ -16,7 +16,7 @@ function MyEditor(props) {
 
   const {
     value = '',
-    height = '500px',
+    height = '300px',
     onChange = (e) => {
       setHtml(e);
     },

src/index.less

@@ -128,6 +128,10 @@ html, body, #root {
   // }
 }
 
+.ant-app {
+  height: 100%;
+}
+
 
 // 兼容 360
 .ant-pro-sider-collapsed-button {

src/pages/issueType/list/index.jsx

@@ -75,7 +75,7 @@ export default (props) => {
           type="link"
           onClick={() => {
             console.log(record, "]]");
-            navigate(`/system/issueType/edit?id=${record.typeId}`);
+            navigate(`/dict/issueType/edit?id=${record.typeId}`);
           }}
         >
           编辑
@@ -106,7 +106,7 @@ export default (props) => {
           key="1"
           type="primary"
           onClick={() => {
-            navigate("/system/issueType/edit");
+            navigate("/dict/issueType/edit");
           }}
         >
           新增

src/pages/locType/list/index.jsx

@@ -65,7 +65,7 @@ export default (props) => {
           type="link"
           onClick={() => {
             console.log(record, "]]");
-            navigate(`/system/locType/edit?id=${record.typeId}`);
+            navigate(`/dict/locType/edit?id=${record.typeId}`);
           }}
         >
           编辑
@@ -96,7 +96,7 @@ export default (props) => {
           key="1"
           type="primary"
           onClick={() => {
-            navigate("/system/locType/edit");
+            navigate("/dict/locType/edit");
           }}
         >
           新增

src/pages/notice/index.jsx

@@ -0,0 +1,137 @@
+import React from 'react';
+import { ProForm, ProFormText, ProFormDigit, ProFormSelect } from '@ant-design/pro-components';
+import { Form, Button } from 'antd';
+import Curd from '@/components/Page/Curd';
+import Wangeditor from '@/components/Wangeditor';
+import { UploadImage } from '@/components/Upload';
+import {
+  getTaNotice,
+  getTaNoticeById,
+  postTaNotice,
+  putTaNotice,
+  deleteTaNotice,
+} from '@/service/tanotice';
+
+const request = {
+  list: getTaNotice,
+  save: postTaNotice,
+  update: putTaNotice,
+  del: deleteTaNotice,
+}
+
+export default (props) => {
+  const tableRef = React.useRef();
+
+  const onStatusChange = (row) => {
+    tableRef.current.showLoading('正在操作, 请稍候...');
+    putTaNotice(row.noticeId, {
+      ...row,
+      status: Math.abs(0 - row.status),
+    }).then(() => {
+      tableRef.current.hideLoading();
+      tableRef.current.reload();
+    }).catch(() => {
+      tableRef.current.hideLoading();
+    });
+  }
+
+  const columns = React.useMemo(() => [
+    {
+      title: "日期",
+      dataIndex: "createDate",
+      valueType: 'date',
+      hideInSearch: true,
+    },
+    {
+      title: "标题",
+      dataIndex: "title",
+    },
+    {
+      title: "图片",
+      dataIndex: "thumb",
+      hideInSearch: true,
+      render: t => !t || t.length < 3 ? null : <img src={t} alt="" style={{width: '64px', height: '64px'}} />,
+    },
+    {
+      title: "状态",
+      dataIndex: "status",
+      valueEnum: {
+        0: {
+          text: "未发布",
+          status: "Default",
+        },
+        1: {
+          text: "已发布",
+          status: "Success",
+        },
+      },
+    },
+  ], []);
+
+  const optionRender = React.useCallback((_, record) => {
+    return [
+      <Button style={{ padding: 0 }} type="link" key="pub" onClick={() => onStatusChange(record) }>
+        {record.status == 1 ? '取消发布' : '发布'}
+      </Button>
+    ]
+  }, []);
+
+  return (
+    <Curd
+      rowKey="noticeId"
+      tableRef={tableRef}
+      columns={columns}
+      request={request}
+      optionRender={optionRender}
+      renderFormItems={() => (
+        <>
+          <ProFormText
+            label="标题"
+            name="title"
+            rules={[
+              { required: true, message: '请输入标题' },
+            ]}
+          />
+          <Form.Item label="图片" name="thumb">
+            <UploadImage />
+          </Form.Item>
+          <Form.Item label="正文" name="content">
+            <Wangeditor
+              toolbarConfig={{
+                toolbarKeys: [
+                  'headerSelect',
+                  'blockquote',
+                  '|',
+                  'bold',
+                  'underline',
+                  'italic',
+                  'color',
+                  'fontSize',
+                  '|',
+                  'bulletedList',
+                  'numberedList',
+                ]
+              }}
+            />
+          </Form.Item>
+          <ProForm.Group>
+            <ProFormDigit
+              label="权重"
+              name="weight"
+              min={1}
+              fieldProps={{ precision: 0 }}
+            />
+            <ProFormSelect
+              label="状态"
+              name="status"
+              options={[
+                {label: '未发布', value: 0},
+                {label: '发布', value: 1},
+              ]}
+            />
+          </ProForm.Group>
+        </>
+      )}
+    />
+  )
+}

src/routes/routes.jsx

@@ -9,6 +9,7 @@ import {
   EnvironmentOutlined,
   BranchesOutlined,
   NodeIndexOutlined,
+  NotificationOutlined,
 } from '@ant-design/icons';
 import { Outlet } from 'react-router-dom';
 import AuthLayout from "@/layouts/AuthLayout";
@@ -23,8 +24,6 @@ import OrgList from "@/pages/org/index";
 
 import Index from '@/pages/index';
 import Home from "@/pages/sample/home";
-import BasicForm from '@/pages/sample/form';
-import BasicTable from '@/pages/sample/table';
 
 import PositionList from "@/pages/position/list";
 import PositionEdit from "@/pages/position/edit";
@@ -34,6 +33,7 @@ import IssueTypeList from "@/pages/issueType/list";
 import IssueTypeEdit from "@/pages/issueType/edit";
 import QuestionList from "@/pages/question/list";
 import IssueList from '@/pages/issue';
+import Notice from '@/pages/notice';
 
 /**
  * meta 用来扩展自定义数据数据
@@ -58,6 +58,14 @@ export const authRoutes = [
       menuType: 'group',
     },
     children: [
+      {
+        path: "notice",
+        element: <Notice />,
+        meta: {
+          title: '通知公告',
+          icon: <NotificationOutlined />,
+        }
+      },
       {
         path: "issue",
         element: <IssueList />,
@@ -86,7 +94,7 @@ export const authRoutes = [
     ],
   },
   {
-    path: "system",
+    path: "dict",
     element: <Outlet />,
     meta: {
       title: '基础字典',

vite.config.js

@@ -5,7 +5,7 @@ import react from '@vitejs/plugin-react'
 // https://vitejs.dev/config/
 export default defineConfig({
   server: {
-    port: 3000,
+    port: 3001,
     proxy: {
       '/api': {
         target: 'http://localhost:9087',