Sfoglia il codice sorgente

fix(core): 修改一些BUG

wjx 1 anno fa
parent
commit
ccc9690153

+ 10 - 1
src/components/Material/index.tsx

@@ -20,7 +20,16 @@ const Material: React.FC<Props> = ({ items = [], resourceUrl, claimJson }) => {
           素材尺寸:{size?.[0]} * {size?.[1]}
         </Typography.Text>
         <Typography.Text>
-          素材大小:{extent?.[0]}MB ~ {extent?.[1]}MB
+          素材大小:
+          <Space direction="vertical" size={0}>
+            <Typography.Text>
+              {extent?.[0]}MB ~ {extent?.[1]}MB
+            </Typography.Text>
+            <Typography.Text>
+              {extent?.[0] ? extent?.[0] * 1024 : extent?.[0]}KB ~{' '}
+              {extent?.[1] ? extent?.[1] * 1024 : extent?.[1]}KB
+            </Typography.Text>
+          </Space>
         </Typography.Text>
       </Flex>
 

+ 122 - 107
src/components/UploadImgs/index.tsx

@@ -1,120 +1,135 @@
-import { message, Space, Upload, Image, Button } from "antd"
-import { PlusOutlined, LoadingOutlined, DeleteOutlined } from "@ant-design/icons";
-import { RcFile } from "antd/lib/upload";
-import React, { useState } from "react";
-import './index.less'
-import { getBase64, getImgSizeProper } from "@/utils";
-import { getOssInfo } from "@/services/ant-design-pro/api";
-import { request } from "@umijs/max";
+import { getOssInfo } from '@/services/ant-design-pro/api';
+import { getBase64, getImgSizeProper } from '@/utils';
+import { DeleteOutlined, LoadingOutlined, PlusOutlined } from '@ant-design/icons';
+import { request } from '@umijs/max';
+import { Button, Image, message, Space, Upload } from 'antd';
+import { RcFile } from 'antd/lib/upload';
+import React, { useState } from 'react';
+import './index.less';
 
 interface Props {
-    value?: string[],  // 图片地址
-    maxCount?: number
-    onChange?: (data: RcFile[] | string[]) => void,
-    tooltip?: JSX.Element
-    isUpload?: boolean, // 是否上传
-    sizeData?: {
-        width: number,
-        height: number
-    }
+  value?: string[]; // 图片地址
+  maxCount?: number;
+  onChange?: (data: RcFile[] | string[]) => void;
+  tooltip?: JSX.Element;
+  isUpload?: boolean; // 是否上传
+  sizeData?: {
+    width: number;
+    height: number;
+  };
 }
 const UploadImgs: React.FC<Props> = (props) => {
+  /** 变量START */
+  const { value, maxCount = 1, tooltip, sizeData, isUpload = false, onChange } = props;
+  const [imageFile, setImageFile] = useState<string[]>(value || []);
+  const [loading, setLoading] = useState<boolean>(false);
+  /** 变量END */
 
-    /** 变量START */
-    const { value, maxCount = 1, tooltip, sizeData, isUpload = false, onChange } = props
-    const [imageFile, setImageFile] = useState<string[]>(value || []);
-    const [loading, setLoading] = useState<boolean>(false)
-    /** 变量END */
-
-    const beforeUpload = async (file: RcFile) => {
-        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
-        if (!isJpgOrPng) {
-            message.error('您只能上传JPG/PNG文件!');
-        }
-        const isLt2M = file.size / 1024 / 1024 < 2;
-        if (!isLt2M) {
-            message.error('图像必须小于2MB!');
-        }
+  const beforeUpload = async (file: RcFile) => {
+    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
+    if (!isJpgOrPng) {
+      message.error('您只能上传JPG/PNG文件!');
+    }
+    const isLt2M = file.size / 1024 / 1024 < 2;
+    if (!isLt2M) {
+      message.error('图像必须小于2MB!');
+    }
 
-        if (sizeData) {
-            let imgData: any = await getImgSizeProper(file)
-            if (sizeData?.width !== imgData.width || sizeData?.height !== imgData.height) {
-                message.error(`传入的图片大小不符, 图片大小${imgData.width}*${imgData.height}, 需要图片大小${sizeData.width}*${sizeData.height}`)
-                return false
-            }
-        }
-        return isJpgOrPng && isLt2M;
-    };
+    if (sizeData) {
+      let imgData: any = await getImgSizeProper(file);
+      if (sizeData?.width !== imgData.width || sizeData?.height !== imgData.height) {
+        message.error(
+          `传入的图片大小不符, 图片大小${imgData.width}*${imgData.height}, 需要图片大小${sizeData.width}*${sizeData.height}`,
+        );
+        return false;
+      }
+    }
+    return isJpgOrPng && isLt2M;
+  };
 
-    const uploadButton = (
-        <div>
-            {loading ? <LoadingOutlined /> : <PlusOutlined />}
-        </div>
-    );
+  const uploadButton = <div>{loading ? <LoadingOutlined /> : <PlusOutlined />}</div>;
 
-    const clearHandle = (index: number) => {
-        if (index > -1) {
-            let newImageFile = JSON.parse(JSON.stringify(imageFile))
-            newImageFile.splice(index, 1)
-            console.log(newImageFile)
-            setImageFile(newImageFile);
-            onChange?.(newImageFile)
-        }
+  const clearHandle = (index: number) => {
+    if (index > -1) {
+      let newImageFile = JSON.parse(JSON.stringify(imageFile));
+      newImageFile.splice(index, 1);
+      console.log(newImageFile);
+      setImageFile(newImageFile);
+      onChange?.(newImageFile);
     }
+  };
 
-    return <div className="myUpload">
-        <Image.PreviewGroup preview={{ onChange: (current, prev) => console.log(`current index: ${current}, prev index: ${prev}`), }}>
-            <Space wrap>
-                {imageFile.map((item, index) => <div key={index} className="preViewContent" style={{ width: 100, height: 100 }}>
-                    <Image src={item} style={{ width: '100%', height: '100%' }} />
-                    <div className="clear">
-                        <Button icon={<DeleteOutlined />} onClick={() => clearHandle(index)} type="link" danger style={{ padding: 0, width: 'auto', height: 'auto' }} />
-                    </div>
-                </div>)}
-                <Upload
-                    name="avatar"
-                    listType="picture-card"
-                    accept='image/gif,image/jpeg,image/png,image/jpg'
-                    className="avatar-uploader"
-                    beforeUpload={beforeUpload}
-                    showUploadList={false}
-                    customRequest={async (options: any) => {
-                        if (isUpload) { // 上传oss
-                            try {
-                                setLoading(true)
-                                let res = await getOssInfo({ type: 'image/jpeg', fileType: 'image' })
-                                let formData = new FormData();
-                                Object.keys(res.data).forEach((key: string) => {
-                                    if (key !== 'url') {
-                                        formData.append(key, res.data[key])
-                                    }
-                                })
-                                formData.append('file', options.file)
-                                let urlData = await request(res?.data?.ossUrl, { method: 'POST', data: formData })
-                                setLoading(false)
-                                imageFile.push(urlData?.data?.url)
-                                setImageFile(imageFile);
-                                onChange?.(imageFile)
-                            } catch (error) {
-                                setLoading(false)
-                            }
-                        } else {
-                            getBase64(options.file as RcFile, url => {
-                                imageFile.push(url)
-                                setImageFile(imageFile);
-                            })
-                            onChange && onChange(options.file)
-                        }
-                    }}
-                >
-                    {imageFile.length < maxCount && uploadButton}
-                </Upload>
-            </Space>
-        </Image.PreviewGroup>
+  return (
+    <div className="myUpload">
+      <Image.PreviewGroup
+        preview={{
+          onChange: (current, prev) =>
+            console.log(`current index: ${current}, prev index: ${prev}`),
+        }}
+      >
+        <Space wrap>
+          {imageFile.map((item, index) => (
+            <div key={index} className="preViewContent" style={{ width: 100, height: 100 }}>
+              <Image src={item} style={{ width: '100%', height: '100%' }} />
+              <div className="clear">
+                <Button
+                  icon={<DeleteOutlined />}
+                  onClick={() => clearHandle(index)}
+                  type="link"
+                  danger
+                  style={{ padding: 0, width: 'auto', height: 'auto' }}
+                />
+              </div>
+            </div>
+          ))}
+          <Upload
+            name="avatar"
+            listType="picture-card"
+            accept="image/gif,image/jpeg,image/png,image/jpg"
+            className="avatar-uploader"
+            beforeUpload={beforeUpload}
+            showUploadList={false}
+            customRequest={async (options: any) => {
+              if (isUpload) {
+                // 上传oss
+                try {
+                  setLoading(true);
+                  let res = await getOssInfo({ type: 'image/jpeg', fileType: 'image' });
+                  let formData = new FormData();
+                  Object.keys(res.data).forEach((key: string) => {
+                    if (key !== 'url') {
+                      formData.append(key, res.data[key]);
+                    }
+                  });
+                  formData.append('file', options.file);
+                  let urlData = await request(res?.data?.ossUrl, {
+                    method: 'POST',
+                    data: formData,
+                  });
+                  setLoading(false);
+                  imageFile.push(urlData?.data?.url);
+                  setImageFile(imageFile);
+                  onChange?.(imageFile);
+                } catch (error) {
+                  setLoading(false);
+                }
+              } else {
+                getBase64(options.file as RcFile, (url) => {
+                  imageFile.push(url);
+                  setImageFile(imageFile);
+                });
+                onChange && onChange(options.file);
+              }
+            }}
+          >
+            {imageFile.length < maxCount && uploadButton}
+          </Upload>
+        </Space>
+      </Image.PreviewGroup>
 
-        <div>{tooltip && tooltip}</div>
+      <div>{tooltip && tooltip}</div>
     </div>
-}
-
+  );
+};
 
-export default React.memo(UploadImgs)
+export default React.memo(UploadImgs);

+ 1 - 1
src/pages/MyTask/index.tsx

@@ -318,7 +318,7 @@ const MyTask: React.FC = () => {
                   title={
                     <Space size={20}>
                       <Typography.Title level={5} style={{ marginBottom: 0 }}>
-                        {item.name}
+                        {item.name}_任务ID:{item.id}
                       </Typography.Title>
                       {!!item.urgency && (
                         <Space size={4}>

+ 1 - 1
src/pages/MyTask/taskModal.tsx

@@ -436,7 +436,7 @@ const TaskModal: React.FC<Props> = ({ initialValues, visible, onChange, onClose
                     {
                       required: true,
                       validator: async (rule, value) => {
-                        if (!value?.[0]) {
+                        if (!value?.[0] && value?.[0] !== 0) {
                           throw new Error('请填写最小素材大小!');
                         }
                         if (!value?.[1]) {

+ 10 - 8
src/pages/Task/index.tsx

@@ -173,13 +173,15 @@ const Task: React.FC = () => {
                           ? `总消耗 ${item.checkout * 100}%`
                           : `${item.checkout}元(审核合格)`}
                       </Tag>
-                      <SubmitTask
-                        taskId={item.id}
-                        name={item.name}
-                        materialType={item.materialType}
-                        materialClaimJson={item.materialClaimJson}
-                        onChange={() => getTaskMemberList.refresh()}
-                      />
+                      {item.status === 'STATUS_NORMAL' && (
+                        <SubmitTask
+                          taskId={item.id}
+                          name={item.name}
+                          materialType={item.materialType}
+                          materialClaimJson={item.materialClaimJson}
+                          onChange={() => getTaskMemberList.refresh()}
+                        />
+                      )}
                     </Flex>
                   </Flex>
                 }
@@ -211,7 +213,7 @@ const Task: React.FC = () => {
                   title={
                     <Space size={20}>
                       <Typography.Title level={5} style={{ marginBottom: 0 }}>
-                        {item.name}
+                        {item.name}_任务ID:{item.id}
                       </Typography.Title>
                       {!!item.urgency && (
                         <Space size={4}>

+ 4 - 1
src/pages/Task/submitTask.tsx

@@ -68,7 +68,10 @@ const SubmitTask: React.FC<Props> = ({
         <Modal
           title={`提交${(MaterialTypeEnum as any)[materialType]}素材到 ${name}`}
           open={visible}
-          onCancel={() => setVisible(false)}
+          onCancel={() => {
+            setVisible(false);
+            form.resetFields();
+          }}
           onOk={hanldeOk}
         >
           <Form

+ 122 - 114
src/pages/Task/video.tsx

@@ -1,114 +1,122 @@
-import { message, Space, Upload, Spin } from "antd"
-import { InboxOutlined } from "@ant-design/icons";
-import { RcFile } from "antd/lib/upload";
-import React, { useState } from "react";
-import './index.less'
-import { getOssInfo } from "@/services/ant-design-pro/api";
-import { request } from "@umijs/max";
-import { getMD5, videoMessage } from "@/utils";
-import VideoNews from "@/components/VideoNews";
-
-interface Props {
-    materialClaimJson: string,
-    value?: TASKAPI.MaterialBean,
-    onChange?: (value?: TASKAPI.MaterialBean) => void
-}
-/**
- * 视频上传
- * @returns 
- */
-const Video: React.FC<Props> = ({ value, onChange, materialClaimJson }) => {
-    /** 变量START */
-    const [videoFile, setVideoFile] = useState<TASKAPI.MaterialBean | undefined>(value);
-    const [loading, setLoading] = useState<boolean>(false)
-    const { size, extent } = JSON.parse(materialClaimJson)
-    /** 变量END */
-
-    const beforeUpload = async (file: RcFile) => {
-        console.log('file--->', file)
-        const isZipOrRar = file.type === 'video/mp4';
-        if (!isZipOrRar) {
-            message.error('您只能上传MP4文件!');
-        }
-        const [minSize, maxSize] = extent
-        const fileSizeM = file.size / 1024 / 1024
-        const isLt20M = fileSizeM >= minSize && fileSizeM <= maxSize;
-        if (!isLt20M) {
-            message.error(`视频大小必须在${minSize}MB ~ ${maxSize}MB区间!`);
-        }
-        let videoInfo = await videoMessage([file])
-        const { width = 0, height = 0 } = videoInfo[0]
-        const [w, h] = size
-        const isWHCorrect = Number(width) === Number(w) && Number(h) === Number(height)
-        if (!isWHCorrect) {
-            message.error(`视频宽高必须${w} * ${h}!`);
-        }
-        return isZipOrRar && isLt20M && isWHCorrect;
-    };
-
-    return <div className="myUploadVideo">
-        <Space align="start">
-            <Upload.Dragger
-                name="file"
-                accept='video/mp4'
-                className="avatar-uploader"
-                beforeUpload={beforeUpload}
-                maxCount={1}
-                showUploadList={false}
-                disabled={loading}
-                customRequest={(options: any) => {
-                    setLoading(true)
-                    getOssInfo({ type: 'video/mp4', fileType: 'video' }).then(async res => {
-                        try {
-                            let formData = new FormData();
-                            Object.keys(res.data).forEach((key: string) => {
-                                if (key !== 'url') {
-                                    formData.append(key, res.data[key])
-                                }
-                            })
-                            formData.append('file', options.file)
-                            const md5 = await getMD5(options.file)
-                            let urlData = await request(res?.data?.ossUrl, { method: 'POST', data: formData })
-                            setLoading(false)
-                            if (urlData?.data?.url) {
-                                console.log('=====>', {
-                                    url: urlData?.data?.url,
-                                    size: options.file.size,
-                                    md5
-                                })
-                                setVideoFile({
-                                    url: urlData?.data?.url,
-                                    size: options.file.size,
-                                    md5
-                                });
-                                onChange?.({
-                                    url: urlData?.data?.url,
-                                    size: options.file.size,
-                                    md5
-                                })
-                            }
-                        } catch (error) {
-                            setLoading(false)
-                        }
-                    })
-                }}
-            >
-                <Spin spinning={loading}>
-                    {videoFile?.url ? <div className="video-content">
-                        <VideoNews src={videoFile?.url}/>
-                    </div> : <>
-                        <p className="ant-upload-drag-icon">
-                            <InboxOutlined />
-                        </p>
-                        <p className="ant-upload-text">单击或拖动视频到此区域进行上传</p>
-                        <p className="ant-upload-hint" style={{ width: 450 }}>
-                            素材要求:素材尺寸:{size?.[0]} * {size?.[1]},素材大小:{extent?.[0]}MB ~ {extent?.[1]}MB
-                        </p>
-                    </>}
-                </Spin>
-            </Upload.Dragger>
-        </Space>
-    </div>
-}
-
-export default React.memo(Video)
+import VideoNews from '@/components/VideoNews';
+import { getOssInfo } from '@/services/ant-design-pro/api';
+import { getMD5, videoMessage } from '@/utils';
+import { InboxOutlined } from '@ant-design/icons';
+import { request } from '@umijs/max';
+import { message, Space, Spin, Upload } from 'antd';
+import { RcFile } from 'antd/lib/upload';
+import React, { useState } from 'react';
+import './index.less';
+
+interface Props {
+  materialClaimJson: string;
+  value?: TASKAPI.MaterialBean;
+  onChange?: (value?: TASKAPI.MaterialBean) => void;
+}
+/**
+ * 视频上传
+ * @returns
+ */
+const Video: React.FC<Props> = ({ value, onChange, materialClaimJson }) => {
+  /** 变量START */
+  const [videoFile, setVideoFile] = useState<TASKAPI.MaterialBean | undefined>(value);
+  const [loading, setLoading] = useState<boolean>(false);
+  const { size, extent } = JSON.parse(materialClaimJson);
+  /** 变量END */
+
+  const beforeUpload = async (file: RcFile) => {
+    console.log('file--->', file);
+    const isZipOrRar = file.type === 'video/mp4';
+    if (!isZipOrRar) {
+      message.error('您只能上传MP4文件!');
+    }
+    const [minSize, maxSize] = extent;
+    const fileSizeM = file.size / 1024 / 1024;
+    const isLt20M = fileSizeM >= minSize && fileSizeM <= maxSize;
+    if (!isLt20M) {
+      message.error(`视频大小必须在${minSize}MB ~ ${maxSize}MB区间!`);
+    }
+    let videoInfo = await videoMessage([file]);
+    const { width = 0, height = 0 } = videoInfo[0];
+    const [w, h] = size;
+    const isWHCorrect = Number(width) === Number(w) && Number(h) === Number(height);
+    if (!isWHCorrect) {
+      message.error(`视频宽高必须${w} * ${h}!`);
+    }
+    return isZipOrRar && isLt20M && isWHCorrect;
+  };
+
+  return (
+    <div className="myUploadVideo">
+      <Space align="start">
+        <Upload.Dragger
+          name="file"
+          accept="video/mp4"
+          className="avatar-uploader"
+          beforeUpload={beforeUpload}
+          maxCount={1}
+          showUploadList={false}
+          disabled={loading}
+          customRequest={(options: any) => {
+            setLoading(true);
+            getOssInfo({ type: 'video/mp4', fileType: 'video' }).then(async (res) => {
+              try {
+                let formData = new FormData();
+                Object.keys(res.data).forEach((key: string) => {
+                  if (key !== 'url') {
+                    formData.append(key, res.data[key]);
+                  }
+                });
+                formData.append('file', options.file);
+                const md5 = await getMD5(options.file);
+                let urlData = await request(res?.data?.ossUrl, { method: 'POST', data: formData });
+                setLoading(false);
+                if (urlData?.data?.url) {
+                  console.log('=====>', {
+                    url: urlData?.data?.url,
+                    size: options.file.size,
+                    md5,
+                  });
+                  setVideoFile({
+                    url: urlData?.data?.url,
+                    size: options.file.size,
+                    md5,
+                  });
+                  onChange?.({
+                    url: urlData?.data?.url,
+                    size: options.file.size,
+                    md5,
+                  });
+                }
+              } catch (error) {
+                setLoading(false);
+              }
+            });
+          }}
+        >
+          <Spin spinning={loading}>
+            {videoFile?.url ? (
+              <div className="video-content">
+                <VideoNews src={videoFile?.url} />
+              </div>
+            ) : (
+              <>
+                <p className="ant-upload-drag-icon">
+                  <InboxOutlined />
+                </p>
+                <p className="ant-upload-text">单击或拖动视频到此区域进行上传</p>
+                <p className="ant-upload-hint" style={{ width: 450 }}>
+                  素材要求:素材尺寸:{size?.[0]} * {size?.[1]},素材大小:{extent?.[0]}MB ~{' '}
+                  {extent?.[1]}MB({extent?.[0] ? extent?.[0] * 1024 : extent?.[0]}KB ~{' '}
+                  {extent?.[1] ? extent?.[1] * 1024 : extent?.[1]}KB)
+                </p>
+              </>
+            )}
+          </Spin>
+        </Upload.Dragger>
+      </Space>
+    </div>
+  );
+};
+
+export default React.memo(Video);

+ 2 - 0
src/utils/constEnum.tsx

@@ -29,10 +29,12 @@ export const UrgencyEnum = {
 export enum StatusEnum {
   STATUS_NORMAL = '正常',
   STATUS_EXPIRE = '失效',
+  STATUS_TIME_END = '截止',
 }
 export const TaskStatusEle: any = {
   STATUS_NORMAL: <Badge status="success" text="正常" />,
   STATUS_EXPIRE: <Badge status="error" text="失效" />,
+  STATUS_TIME_END: <Badge status="error" text="截止" />,
 };
 
 /**