Commit 1d4a2616 authored by GuanHua's avatar GuanHua
parents c814a9bd 19aee0c2
/**
* 内容管理
* @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;
......@@ -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",
......
......@@ -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
......@@ -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>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment