|
|
@@ -0,0 +1,482 @@ |
|
|
|
import { PlusOutlined } from '@ant-design/icons'; |
|
|
|
import ProTable from '@ant-design/pro-table'; |
|
|
|
import { PageContainer } from '@ant-design/pro-layout'; |
|
|
|
import { Button, Card, Image, Select, message, Modal, Input, Upload, Popconfirm } from 'antd'; |
|
|
|
import React, { useRef, useState } from 'react'; |
|
|
|
import appletAPI from "../service"; |
|
|
|
import { useEffect } from 'react'; |
|
|
|
import styles from "./index.less"; |
|
|
|
import axios from 'axios'; |
|
|
|
|
|
|
|
const getBase64 = (file) => |
|
|
|
new Promise((resolve, reject) => { |
|
|
|
const reader = new FileReader(); |
|
|
|
reader.readAsDataURL(file); |
|
|
|
reader.onload = () => resolve(reader.result); |
|
|
|
reader.onerror = (error) => reject(error); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const Material = () => { |
|
|
|
const actionRef = useRef(); |
|
|
|
const [selectedStore, setSelectedStore] = useState(''); |
|
|
|
const [storeList, setStoreList] = useState([]); |
|
|
|
const [isModalVisible, setIsModalVisible] = useState(false); |
|
|
|
const [currentImage, setCurrentImage] = useState({ |
|
|
|
id: '', |
|
|
|
pageId: '', |
|
|
|
materialName: '', |
|
|
|
materialCode: '', |
|
|
|
materialPath: [], |
|
|
|
materialType: 0 |
|
|
|
}); |
|
|
|
|
|
|
|
const [previewVisible, setPreviewVisible] = useState(false); |
|
|
|
const [previewImage, setPreviewImage] = useState(''); |
|
|
|
const [previewTitle, setPreviewTitle] = useState(''); |
|
|
|
const [fileList, setFileList] = useState([]); |
|
|
|
|
|
|
|
const [miniPageList, setMiniPageList] = useState([]); |
|
|
|
|
|
|
|
const [currentPage, setCurrentPage] = useState(1); |
|
|
|
const [pageSize, setPageSize] = useState(10); |
|
|
|
const [total, setTotal] = useState(0); |
|
|
|
|
|
|
|
const handleCancel = () => setPreviewVisible(false); |
|
|
|
const handlePreview = async (file) => { |
|
|
|
if (!file.url && !file.preview) { |
|
|
|
file.preview = await getBase64(file.originFileObj); |
|
|
|
} |
|
|
|
setPreviewImage(file.url || file.preview); |
|
|
|
setPreviewVisible(true); |
|
|
|
setPreviewTitle(file.name || file.url.substring(file.url.lastIndexOf('/') + 1)); |
|
|
|
}; |
|
|
|
|
|
|
|
const handleChange = ({ fileList: newFileList }) => { |
|
|
|
newFileList.forEach(item => { |
|
|
|
item.status = 'done' |
|
|
|
}); |
|
|
|
setFileList(newFileList) |
|
|
|
}; |
|
|
|
|
|
|
|
const columns = [ |
|
|
|
{ |
|
|
|
title: '素材名称', |
|
|
|
dataIndex: 'materialName', |
|
|
|
ellipsis: true, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '素材编码', |
|
|
|
dataIndex: 'materialCode', |
|
|
|
ellipsis: true, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '素材图片', |
|
|
|
dataIndex: 'materialPath', |
|
|
|
render: (_, record) => ( |
|
|
|
<Image |
|
|
|
style={{width: '50%', height: '50%'}} |
|
|
|
src={JSON.parse(record.materialPath)[0]} |
|
|
|
fallback="data:image/png;base64,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"> |
|
|
|
</Image> |
|
|
|
) |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '操作', |
|
|
|
valueType: 'option', |
|
|
|
key: 'option', |
|
|
|
render: (_, record) => [ |
|
|
|
<a onClick={() => onEditMaterial(record)}> |
|
|
|
编辑 |
|
|
|
</a>, |
|
|
|
<Popconfirm |
|
|
|
title="确定要删除此素材吗?" |
|
|
|
onConfirm={() => onDeleteMaterial(record)} |
|
|
|
okText="确定" |
|
|
|
cancelText="取消" |
|
|
|
> |
|
|
|
<a href="#">删除</a> |
|
|
|
</Popconfirm> |
|
|
|
] |
|
|
|
}, |
|
|
|
]; |
|
|
|
|
|
|
|
const uploadButton = ( |
|
|
|
<div> |
|
|
|
<PlusOutlined /> |
|
|
|
<div |
|
|
|
style={{ |
|
|
|
marginTop: 8, |
|
|
|
}} |
|
|
|
> |
|
|
|
Upload |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
); |
|
|
|
|
|
|
|
/** |
|
|
|
* 获取店铺列表 |
|
|
|
*/ |
|
|
|
const onFetchStoreList = async () => { |
|
|
|
const response = await appletAPI.GetAllStore(); |
|
|
|
if (response.isSuccess) { |
|
|
|
setStoreList(response.data); |
|
|
|
setSelectedStore(response.data[0].id); |
|
|
|
} else { |
|
|
|
message.error(response.msg || '获取店铺列表失败'); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
const uploadProp = { |
|
|
|
name: 'file', |
|
|
|
showUploadList: true, |
|
|
|
multiple: false, |
|
|
|
accept: '.png, .jpg, .jpeg, .gif', |
|
|
|
// 这里需要指定文件上传的content-type |
|
|
|
headers: { |
|
|
|
'Content-Type': 'application/octet-stream', |
|
|
|
}, |
|
|
|
customRequest({ |
|
|
|
action, |
|
|
|
file, |
|
|
|
headers, |
|
|
|
onError, |
|
|
|
onProgress, |
|
|
|
withCredentials, |
|
|
|
}) { |
|
|
|
//覆盖action 上传之前获取上传地址 |
|
|
|
var index = file.name.lastIndexOf("."); |
|
|
|
var ext = file.name.substr(index + 1); |
|
|
|
let fileData = null; |
|
|
|
appletAPI.GetCosRequestURL({ directory: "applet", fileExtension: ext, method: "PUT" }).then((r) => { |
|
|
|
action = r.allUrl; |
|
|
|
const reader = new FileReader(); |
|
|
|
reader.readAsArrayBuffer(file); |
|
|
|
reader.onload = (e) => { |
|
|
|
fileData = e.target.result; |
|
|
|
axios.put(action, fileData, { |
|
|
|
withCredentials, |
|
|
|
headers, |
|
|
|
onUploadProgress: ({ total, loaded }) => { |
|
|
|
onProgress({ percent: Math.round(loaded / total * 100).toFixed(2) }, file); |
|
|
|
}, |
|
|
|
}).then(response => { |
|
|
|
if (response.status == 200 || response.statusText == 'OK') { |
|
|
|
const tempUploadImage = JSON.parse(JSON.stringify(currentImage)); |
|
|
|
tempUploadImage.materialPath.push(r.seeUrl); |
|
|
|
setCurrentImage(tempUploadImage); |
|
|
|
message.success('上传成功!'); |
|
|
|
} |
|
|
|
}).catch(onError); |
|
|
|
}; |
|
|
|
}); |
|
|
|
return { |
|
|
|
abort() { |
|
|
|
console.log('upload progress is aborted.'); |
|
|
|
}, |
|
|
|
}; |
|
|
|
}, |
|
|
|
}; |
|
|
|
|
|
|
|
/** |
|
|
|
* 添加、更新页面素材 |
|
|
|
*/ |
|
|
|
const onAddPageMaterial = async () => { |
|
|
|
console.log('currentImage>>>>', currentImage, !currentImage.pageId); |
|
|
|
if (!currentImage.pageId) { |
|
|
|
message.info('请选择所属页面'); |
|
|
|
return; |
|
|
|
} else if (!currentImage.materialName) { |
|
|
|
message.info('请填写素材名称'); |
|
|
|
return; |
|
|
|
} else if (!currentImage.materialCode) { |
|
|
|
message.info('请填写素材编码'); |
|
|
|
return; |
|
|
|
} else if (currentImage.materialPath.length === 0) { |
|
|
|
message.info('请选择至少上传一张素材图片'); |
|
|
|
return; |
|
|
|
} |
|
|
|
const jsonData = { |
|
|
|
pageId: currentImage.pageId, |
|
|
|
materialName: currentImage.materialName, |
|
|
|
materialCode: currentImage.materialCode, |
|
|
|
materialPath: JSON.stringify(currentImage.materialPath), |
|
|
|
materialType: currentImage.materialType |
|
|
|
} |
|
|
|
if (!currentImage.id) { |
|
|
|
jsonData.id = currentImage.id; |
|
|
|
const response = await appletAPI.UpdateMiniMaterial(jsonData); |
|
|
|
if (response.statusCode === 200) { |
|
|
|
message.success('更新成功'); |
|
|
|
setIsModalVisible(false); |
|
|
|
actionRef.current.reload(); |
|
|
|
} else { |
|
|
|
message.error('更新失败') |
|
|
|
} |
|
|
|
} else { |
|
|
|
const response = await appletAPI.AddMinimaterial(jsonData); |
|
|
|
if (response.statusCode === 200) { |
|
|
|
message.success('添加成功'); |
|
|
|
setIsModalVisible(false); |
|
|
|
actionRef.current.reload(); |
|
|
|
} else { |
|
|
|
message.error('添加失败') |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
* 编辑素材 |
|
|
|
* @param {*} record |
|
|
|
*/ |
|
|
|
const onEditMaterial = (record) => { |
|
|
|
const materialPath = JSON.parse(record.materialPath); |
|
|
|
const material = { |
|
|
|
id: record.id, |
|
|
|
pageId: record.pageId, |
|
|
|
materialName: record.materialName, |
|
|
|
materialCode: record.materialCode, |
|
|
|
materialPath: materialPath |
|
|
|
} |
|
|
|
if (materialPath.length > 1) { |
|
|
|
material.materialType = 1; |
|
|
|
} else { |
|
|
|
material.materialType = 0; |
|
|
|
} |
|
|
|
const fileList = []; |
|
|
|
materialPath.forEach((item, index) => { |
|
|
|
fileList.push({ |
|
|
|
uid: index, |
|
|
|
name: item.split('/applet/')[1] || "图片.jpg", |
|
|
|
status: 'done', |
|
|
|
url: item, |
|
|
|
}); |
|
|
|
}); |
|
|
|
setFileList(fileList); |
|
|
|
setCurrentImage(material); |
|
|
|
setIsModalVisible(true); |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
* 删除素材 |
|
|
|
* @param {*} record |
|
|
|
*/ |
|
|
|
const onDeleteMaterial = async (record) => { |
|
|
|
const response = await appletAPI.DeleteMiniMaterial(record.id); |
|
|
|
if (response.statusCode === 200) { |
|
|
|
actionRef.current.reload(); |
|
|
|
message.success('删除成功'); |
|
|
|
} else { |
|
|
|
message.error(response.errors || '删除失败'); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
* 获取小程序页面 |
|
|
|
*/ |
|
|
|
const onFetchMiniPageList = async () => { |
|
|
|
const response = await appletAPI.MiniPageList({ |
|
|
|
current: 1, |
|
|
|
pageSize: 999, |
|
|
|
storeId: selectedStore |
|
|
|
}); |
|
|
|
if (response.statusCode === 200) { |
|
|
|
setMiniPageList(response.data.items); |
|
|
|
} else { |
|
|
|
message.error(response.errors || '获取页面列表失败') |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
const onBeforeCreate = () => { |
|
|
|
setFileList([]); |
|
|
|
setCurrentImage({ |
|
|
|
pageId: '', |
|
|
|
materialName: '', |
|
|
|
materialCode: '', |
|
|
|
materialPath: [], |
|
|
|
materialType: 0 |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
onFetchStoreList(); |
|
|
|
}, []); |
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
if (!selectedStore) return; |
|
|
|
onFetchMiniPageList(); |
|
|
|
actionRef.current.reload(); |
|
|
|
}, [selectedStore]); |
|
|
|
|
|
|
|
return <PageContainer> |
|
|
|
<Card style={{ marginBottom: '10px' }}> |
|
|
|
<div className={styles.table_search_item}> |
|
|
|
<div> |
|
|
|
当前门店: |
|
|
|
</div> |
|
|
|
<Select style={{ width: 300 }} value={selectedStore} onChange={(value) => { |
|
|
|
setSelectedStore(value); |
|
|
|
}}> |
|
|
|
{ |
|
|
|
storeList.map(item => { |
|
|
|
return <Option value={item.id} key={item.id}>{item.store_Name}</Option> |
|
|
|
}) |
|
|
|
} |
|
|
|
</Select> |
|
|
|
</div> |
|
|
|
</Card> |
|
|
|
<ProTable |
|
|
|
search={false} |
|
|
|
columns={columns} |
|
|
|
actionRef={actionRef} |
|
|
|
cardBordered |
|
|
|
editable={{ |
|
|
|
type: 'multiple', |
|
|
|
}} |
|
|
|
request={async () => { |
|
|
|
if (!selectedStore) return; |
|
|
|
const jsonData = { |
|
|
|
"current": currentPage, |
|
|
|
"pageSize": pageSize, |
|
|
|
"storeId": selectedStore |
|
|
|
} |
|
|
|
const response = await appletAPI.MinimaterialListByStore(jsonData); |
|
|
|
const pageList = []; |
|
|
|
response.data.forEach(item => { |
|
|
|
pageList.push(...item.list); |
|
|
|
}); |
|
|
|
return { |
|
|
|
data: pageList, |
|
|
|
success: true, |
|
|
|
total: 10, |
|
|
|
} |
|
|
|
}} |
|
|
|
columnsState={{ |
|
|
|
persistenceKey: 'pro-table-singe-demos', |
|
|
|
persistenceType: 'localStorage', |
|
|
|
onChange(value) { |
|
|
|
console.log('value: ', value); |
|
|
|
}, |
|
|
|
}} |
|
|
|
rowKey="id" |
|
|
|
options={{ |
|
|
|
setting: { |
|
|
|
listsHeight: 400, |
|
|
|
}, |
|
|
|
}} |
|
|
|
pagination={{ |
|
|
|
pageSize: 5, |
|
|
|
onChange: (page) => console.log(page), |
|
|
|
}} |
|
|
|
dateFormatter="string" |
|
|
|
headerTitle="图片管理" |
|
|
|
toolBarRender={() => [ |
|
|
|
<Button key="button" icon={<PlusOutlined />} type="primary" onClick={() => { setIsModalVisible(true); onBeforeCreate() }}> |
|
|
|
新建 |
|
|
|
</Button> |
|
|
|
]} |
|
|
|
/> |
|
|
|
<Modal title="编辑素材" visible={isModalVisible} onOk={onAddPageMaterial} onCancel={() => setIsModalVisible(false)}> |
|
|
|
<div className={styles.edit_image_card}> |
|
|
|
<div className={styles.edit_image_item}> |
|
|
|
<div className={styles.edit_image_prev}> |
|
|
|
素材名称: |
|
|
|
</div> |
|
|
|
<div className={styles.edit_image_suffix}> |
|
|
|
<Input placeholder='请输入素材名称' value={currentImage.materialName} onChange={value => { |
|
|
|
const tempImg = JSON.parse(JSON.stringify(currentImage)); |
|
|
|
tempImg.materialName = value.target.value; |
|
|
|
setCurrentImage(tempImg); |
|
|
|
}}></Input> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div className={styles.edit_image_item}> |
|
|
|
<div className={styles.edit_image_prev}> |
|
|
|
素材编码: |
|
|
|
</div> |
|
|
|
<div className={styles.edit_image_suffix}> |
|
|
|
<Input placeholder='请输入素材编码' value={currentImage.materialCode} onChange={value => { |
|
|
|
const tempImg = JSON.parse(JSON.stringify(currentImage)); |
|
|
|
tempImg.materialCode = value.target.value; |
|
|
|
setCurrentImage(tempImg); |
|
|
|
}}></Input> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div className={styles.edit_image_item}> |
|
|
|
<div className={styles.edit_image_prev}> |
|
|
|
所属页面: |
|
|
|
</div> |
|
|
|
<div className={styles.edit_image_suffix}> |
|
|
|
<Select placeholder="请选择所在页面" style={{ width: '100%' }} value={currentImage.pageId} onChange={(value) => { |
|
|
|
const tempImg = JSON.parse(JSON.stringify(currentImage)); |
|
|
|
tempImg.pageId = value; |
|
|
|
setCurrentImage(tempImg); |
|
|
|
}}> |
|
|
|
{ |
|
|
|
miniPageList.map(item => { |
|
|
|
return <Option value={item.id} key={item.id}>{item.pageName}</Option> |
|
|
|
}) |
|
|
|
} |
|
|
|
</Select> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div className={styles.edit_image_item}> |
|
|
|
<div className={styles.edit_image_prev}> |
|
|
|
数量: |
|
|
|
</div> |
|
|
|
<div className={styles.edit_image_suffix}> |
|
|
|
<Select placeholder="请选择素材数量" style={{ width: '100%' }} value={currentImage.materialType} onChange={(value) => { |
|
|
|
const tempImg = JSON.parse(JSON.stringify(currentImage)); |
|
|
|
tempImg.materialType = value; |
|
|
|
setCurrentImage(tempImg); |
|
|
|
}}> |
|
|
|
<Option value={0} key={0}>单张</Option> |
|
|
|
<Option value={1} key={1}>多张</Option> |
|
|
|
</Select> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<Upload |
|
|
|
listType="picture-card" |
|
|
|
fileList={fileList} |
|
|
|
onPreview={handlePreview} |
|
|
|
onChange={handleChange} |
|
|
|
onRemove={(remove) => { |
|
|
|
const findIndex = fileList.findIndex(item => item.uid === remove.uid); |
|
|
|
if (findIndex > -1) { |
|
|
|
const tempUpload = JSON.parse(JSON.stringify(currentImage)); |
|
|
|
tempUpload.materialPath.splice(findIndex, 1); |
|
|
|
setCurrentImage(tempUpload); |
|
|
|
} |
|
|
|
}} |
|
|
|
{...uploadProp} |
|
|
|
> |
|
|
|
{ |
|
|
|
(() => { |
|
|
|
if (currentImage.materialType === 0) { |
|
|
|
if (fileList.length >= 1) { |
|
|
|
return null; |
|
|
|
} else { |
|
|
|
return uploadButton |
|
|
|
} |
|
|
|
} else { |
|
|
|
return <>{fileList.length >= 9 ? null : uploadButton}</> |
|
|
|
} |
|
|
|
})() |
|
|
|
} |
|
|
|
</Upload> |
|
|
|
</div> |
|
|
|
</Modal> |
|
|
|
<Modal visible={previewVisible} title={previewTitle} footer={null} onCancel={handleCancel}> |
|
|
|
<img |
|
|
|
alt="example" |
|
|
|
style={{ |
|
|
|
width: '100%', |
|
|
|
}} |
|
|
|
src={previewImage} |
|
|
|
/> |
|
|
|
</Modal> |
|
|
|
</PageContainer > |
|
|
|
} |
|
|
|
|
|
|
|
export default Material; |