内容能力相关

config/routes/contentRoute.ts

+/**
+ * 内容管理
+ * @author Bill
+ */
+
+ const router = {
+	path: '/content',
+	name: 'content',
+	icon: 'SmileOutlined',
+	key: 'content',
+	routes:[
+    {
+      path: '/content/category',
+      name: '分类管理',
+      component: '@/pages/content/category'
+    },
+		{
+			path: '/content/columnsManagement',
+			name: 'columnManagement',
+			component: '@/pages/content/columnManagement',
+		},
+		// 新增栏目
+		{
+			path: '/content/columnsManagement/add',
+			name: 'columnAdd',
+			component: '@/pages/content/columnManagement/columnInfo',
+			hideInMenu: true,
+			hidePageHeader: true,
+		},
+		{
+			path: '/content/columnsManagement/detail',
+			name: 'columnInfo',
+			component: '@/pages/content/columnManagement/columnInfo',
+			hideInMenu: true,
+			hidePageHeader: true,
+		},
+		// 标签管理
+		{
+			path: '/content/tagsManagement',
+			name: 'tagsManagement',
+			component: '@/pages/content/tagsManagement'
+		},
+		{
+			path: '/content/tagsManagement/add',
+			name: 'tagsAdd',
+			component: '@/pages/content/tagsManagement/tagsInfo',
+			hideInMenu: true,
+			hidePageHeader: true,
+		},
+		{
+			path: '/content/tagsManagement/detail',
+			name: 'tagsInfo',
+			component: '@/pages/content/tagsManagement/tagsInfo',
+			hideInMenu: true,
+			hidePageHeader: true,
+		},
+		{
+			path: '/content/infomations',
+			name: 'infomations',
+			component: '@/pages/content/infomation'
+		},
+		{
+			path: '/content/infomations/add',
+			name: 'infomationAdd',
+			component: '@/pages/content/infomation/infomationInfo',
+			hideInMenu: true,
+			hidePageHeader: true,
+		},
+		{
+			path: '/content/infomations/detail',
+			name: 'infomationAdd',
+			component: '@/pages/content/infomation/infomationInfo',
+			hideInMenu: true,
+			hidePageHeader: true,
+		},
+		{
+			path: '/content/advertisement',
+			name: 'advertisement',
+			component: '@/pages/content/advertisement',
+		},
+		{
+			path: '/content/advertisement/add',
+			name: 'advertisementAdd',
+			component: '@/pages/content/advertisement/advertisementInfo',
+			hideInMenu: true,
+			hidePageHeader: true,
+		},
+		{
+			path: '/content/advertisement/detail',
+			name: 'advertisementInfo',
+			component: '@/pages/content/advertisement/advertisementInfo',
+			hideInMenu: true,
+			hidePageHeader: true,
+		},
+		{
+			path: '/content/announcements',
+			name: 'announcements',
+			component: '@/pages/content/announcements'
+		},
+		{
+			path: '/content/announcements/add',
+			name: 'announceAdd',
+			component: '@/pages/content/announcements/announceInfo',
+			hideInMenu: true,
+			hidePageHeader: true,
+		},
+		{
+			path: '/content/announcements/detail',
+			name: 'announceInfo',
+			component: '@/pages/content/announcements/announceInfo',
+			hideInMenu: true,
+			hidePageHeader: true,
+		},
+		{
+			path: '/content/imagesManagement',
+			name: 'imagesManagement',
+			component: '@/pages/content/imagesManagement'
+		},
+		{
+			path: '/content/imagesManagement/add',
+			name: 'imageAdd',
+			component: '@/pages/content/imagesManagement/imageInfo',
+			hideInMenu: true,
+			hidePageHeader: true,
+		},
+		{
+			path: '/content/imagesManagement/detail',
+			name: 'imageInfo',
+			component: '@/pages/content/imagesManagement/imageInfo',
+			hideInMenu: true,
+			hidePageHeader: true,
+		}
+	]
+}
+
+
+ export default router;

package.json

@@ -104,7 +104,8 @@
     "typescript": "^3.9.7",
     "umi": "~3.2.28",
     "video-react": "^0.14.1",
-    "yorkie": "^2.0.0"
+    "yorkie": "^2.0.0",
+    "braft-editor": "^2.3.9"
   },
   "devDependencies": {
     "@types/qrcode": "^1.3.4",

src/components/ImgUpload/index.tsx

@@ -4,14 +4,14 @@ import { Upload, message, UploadProps, Modal, Space } from 'antd'
 import styles from './index.less'
 
 export interface IProps extends Omit<UploadProps, 'onChange'> {
-  //   maxNameLength?: number // 图片名字最大长度
   maxSize?: number // 图片大小(默认单位：MB)
-  fileType?: string[] // 图片类型
+  fileType?: Array<'image/jpeg' | 'image/png' | 'image/jpg'| 'image/gif'> // 图片类型
   unit?: 'MB' | 'KB' // 图片大小单位
   onChange?: (imgData: string[] | string, fileList?: any[]) => void // 结果回调
   tips?: string | boolean // 上传提示
   disabled?: boolean // 是否禁用
-  imgSizeText?: string // 图片尺寸
+  imgSizeText?: string // 图片尺寸文本提示
+  urlKey?: string // 接口相应数据图片url对应的字段
 }
 
 export interface imgUploadRefProps {
@@ -23,7 +23,6 @@ export interface imgUploadRefProps {
  * @param {IProps} props
  * @param ref
  *  * props 参数说明：
- * + nameLength {number} - 图片名字最大长度, 默认 64，图片名字长度过长会导致上传失败
  * + maxCount {number} - 图片数量, 默认 1
  * + maxSize {number} - 图片大小, 默认 10
  * + unit {'MB' | 'KB'} - 图片大小单位
@@ -31,12 +30,12 @@ export interface imgUploadRefProps {
  * + onChange - 结果回调
  * + tips {string} - 提示语
  * + disabled {boolean} - 是否禁用
- * + imgSizeText {string} - 图片尺寸
+ * + imgSizeText {string} - 图片尺寸文本提示
+ * + urlKey {string} - 接口相应数据图片url对应的字段
  * @returns
  */
-const ZImgUpload = forwardRef((props: IProps, ref: any) => {
+const ImgUpload = forwardRef((props: IProps, ref: any) => {
   const {
-    // maxNameLength = 64, // 图片名字最大长度
     maxCount = 1, // 图片数量
     maxSize = 10, // 图片大小(单位：M)
     imgSizeText = '???', // 图片尺寸
@@ -45,6 +44,7 @@ const ZImgUpload = forwardRef((props: IProps, ref: any) => {
     onChange,
     tips = true,
     disabled = false,
+    urlKey,
     ...rest
   } = props
 
@@ -62,25 +62,21 @@ const ZImgUpload = forwardRef((props: IProps, ref: any) => {
           url: item,
         }
       })
-      setFileList(newFileList)
+      // 直接走一次回调，使值可以set进表单
+      handleChange({ file: { status: 'success' }, fileList: newFileList})
+      // setFileList(newFileList)
     },
   }))
 
   // 图片上传限制验证
   const beforeUpload = (file: any) => {
     let { type, size, name } = file
-    // let fileNameOutcome = true
-    //  name.length <= maxNameLength
 
     let fileTypeOutcome = fileType.includes(type)
     let fileTypeTips = fileType.map((item) => item.replace('image/', '').toLocaleUpperCase()).join('/')
 
     let fileSizeOutcome = unit === 'MB' ? size / 1024 / 1024 <= maxSize : size / 1024 <= maxSize
 
-    // 图片名字长度校验
-    // if (!fileNameOutcome) {
-    //   message.error(`图片名字过长，请控制名字长度在${maxNameLength}位以下`)
-    // }
     // 图片类型校验
     if (!fileTypeOutcome) {
       message.error(`仅支持上传 ${fileTypeTips} 类型!`)
@@ -106,28 +102,23 @@ const ZImgUpload = forwardRef((props: IProps, ref: any) => {
     let imgData: string[] = []
     fileList.map((item: any) => {
       if (item.url || (item.response && item.response.data)) {
-        imgData.push(item.url || item.response.data)
+        const url = item.url || (urlKey ? item.response.data[urlKey] : item.response.data)
+        imgData.push(url)
       }
     })
+    console.log(`imgData`, imgData)
     onChange && onChange(maxCount === 1 ? imgData[0] : imgData, fileList)
   }
 
   // 查看图片
   const handlePreview = (file: any) => {
     if (file.status === 'done') {
-      setPreviewImage(file.url || file.response.data)
+      const url = file.url || (urlKey ? file.response.data[urlKey] : file.response.data)
+      setPreviewImage(url)
       setShowImage(true)
     }
   }
 
-  // 上传框按钮样式
-  const uploadButtonElement = (
-    <div>
-      <PlusOutlined />
-      <div className="ant-upload-text">上传图片</div>
-    </div>
-  )
-
   return (
     <div>
       <Space size={16}>
@@ -162,4 +153,29 @@ const ZImgUpload = forwardRef((props: IProps, ref: any) => {
   )
 })
 
-export default ZImgUpload
+// 处理fileList格式
+const fnDealFileList = (fileList: any[]) => {
+  const newFileList = fileList.map(item => {
+    if (typeof item === 'string') {
+      return {
+        uid: item,
+        name: 'image.png',
+        status: 'done',
+        url: item,
+      }
+    } else {
+      return item
+    }
+  })
+  return newFileList
+}
+
+// 上传框按钮样式
+const uploadButtonElement = (
+  <div>
+    <PlusOutlined />
+    <div className="ant-upload-text">上传图片</div>
+  </div>
+)
+
+export default ImgUpload

src/pages/ownMall/ownMallManager/ownMallAboutUs/index.tsx

@@ -200,8 +200,7 @@ const OwnMallAboutUs = () => {
             <ImgUpload
               ref={workshopImgRef}
               maxCount={10}
-              maxSize={100}
-              unit='KB'
+              maxSize={1}
               fileType={['image/jpeg', 'image/png', 'image/jpg']}
             />
           </Form.Item>