import { PageContainer } from '@ant-design/pro-components';
|
import { LoadingOutlined, PlusOutlined, CloseOutlined } from '@ant-design/icons';
|
import { Button, Card, Col, Form, Select, Input, Row, Image, message, Upload } from "antd"
|
import { useEffect, useState } from "react"
|
import { history, useLocation } from "@umijs/max"
|
import { sendRequest } from '@/utils/antdUtils';
|
import { updateStory, add, storyInfo ,tCategoryList ,tCategorylistById} from './service'
|
|
const SystemSettings = () => {
|
const formItemLayout = {
|
labelCol: { span: 2 },
|
wrapperCol: { span: 8 },
|
};
|
const { search } = useLocation();
|
const searchParams = new URLSearchParams(search);
|
const [title, setTitle] = useState('')
|
const [form] = Form.useForm();
|
const [deptList, setDeptList] = useState([{ deptName: '自主故事一', deptId: '自主故事一' }, { deptName: '自主故事二', deptId: '自主故事二' }])
|
const [loading, setLoading] = useState(false)
|
const [imgUrl, setImgUrl] = useState('');// 分享图片
|
const [correctMp3Url, setCorrectMp3UrlUrl] = useState('');// 正确音效
|
const [errMp3Url, setErrMp3UrlUrl] = useState('');// 错误音效1
|
const [errMp3Url1, setErrMp3UrlUrl1] = useState('');// 错误音效
|
|
const [firstTypeList, setFirstTypeList] = useState([])
|
const [secondTypeList, setSecondTypeList] = useState([])
|
|
useEffect(() => {
|
tCategoryList({state:2}).then(res=>{
|
setFirstTypeList(res.data)
|
})
|
|
if (searchParams.get('id')) {
|
storyInfo(searchParams.get('id')).then(res => {
|
res.data.type = res.data.type.split('、')
|
setImgUrl(res.data.img)
|
setCorrectMp3UrlUrl(res.data.correct)
|
form.setFieldsValue(res.data)
|
if (res.data.type=='') {
|
console.log('---------------------------')
|
form.setFieldsValue({ type: [] })
|
}
|
if(res.data.firstCategory){
|
getTypeList(res.data.firstCategory)
|
}
|
|
if (res.data.error) {
|
let list = res.data.error.split(',')
|
setErrMp3UrlUrl(list[0])
|
setErrMp3UrlUrl1(list[1])
|
form.setFieldValue({ 'error1': list[0] })
|
form.setFieldValue({ 'error2': list[1] })
|
}
|
})
|
}
|
let title = searchParams.get('detail') ? '故事详情' : searchParams.get('edit') ? '编辑故事' : '新增故事'
|
setTitle(title)
|
|
}, [])
|
const getTypeList = (id) => {
|
tCategorylistById({id:id}).then(res => {
|
setSecondTypeList(res.data)
|
})
|
}
|
|
// 分享图片
|
const handleChange = (info) => {
|
console.log('info info ', info)
|
// if (info.file.status === 'uploading') {
|
// setLoading(true);
|
// }
|
if (info.file.status === 'done') {
|
setImgUrl(info.file.response);
|
setLoading(false);
|
}
|
};
|
// 正确音效
|
const handleChangCorrectMp3 = (info) => {
|
setCorrectMp3UrlUrl(info);
|
setLoading(false);
|
};
|
// 错误音效
|
const handleChangeErrMp3 = (info, type) => {
|
if (type == 2) {
|
console.log('error2')
|
setErrMp3UrlUrl1(info);
|
} else {
|
console.log('error1 error1 error1')
|
setErrMp3UrlUrl(info);
|
}
|
};
|
|
// 上传前校验
|
const beforeUpload = (file) => {
|
console.log('file file', file)
|
return new Promise(async (resolve, reject) => {
|
resolve(file)
|
});
|
};
|
|
|
const uploadButton = () => {
|
return <button
|
style={{
|
border: 0,
|
background: 'rgb(233, 233, 233)',
|
width: '200px',
|
height: '132px',
|
}}
|
type="button"
|
>
|
{loading ? <LoadingOutlined /> : <PlusOutlined />}
|
<div
|
style={{
|
marginTop: 24,
|
}}
|
></div>
|
</button>
|
}
|
const close = () => {
|
history.back()
|
}
|
|
|
const save = () => {
|
form.validateFields().then(async (values) => {
|
console.log('value values values values', values)
|
if ((errMp3Url && !errMp3Url1) || (!errMp3Url && errMp3Url1)) {
|
message.error('请上传两个错误语音')
|
return
|
}
|
let params = {
|
english: values.english || '',
|
name: values.name,
|
img: imgUrl,
|
firstCategory:values.firstCategory,
|
secondCategory:values.secondCategory,
|
correct: correctMp3Url,
|
type: (values.type || []).join('、'),
|
error: errMp3Url ? errMp3Url + ',' + errMp3Url1 : ''
|
}
|
let state = false
|
if (searchParams.get('id')) {
|
params = {
|
id: searchParams.get('id'),
|
...params
|
}
|
state = await sendRequest(updateStory, params)
|
} else {
|
state = await sendRequest(add, params)
|
}
|
if (state) {
|
history.back()
|
}
|
})
|
}
|
|
return (
|
<PageContainer loading={loading} title={title}>
|
<Card>
|
<Form scrollToFirstError form={form} {...formItemLayout}>
|
<Row>
|
<Col span={24}>
|
<Form.Item
|
name='firstCategory'
|
label='所属一级分类'
|
rules={[
|
{
|
required: true,
|
message: '请选择所属一级分类'
|
}
|
]}
|
>
|
<Select
|
style={{ width: "200px" }}
|
// mode="multiple"
|
options={firstTypeList}
|
onChange={(id) => getTypeList(id)}
|
fieldNames={{ label: 'name', value: 'id' }}
|
placeholder="请选择" />
|
</Form.Item>
|
</Col>
|
<Col span={24}>
|
<Form.Item
|
name='secondCategory'
|
label='所属二级分类'
|
rules={[
|
{
|
required: true,
|
message: '请选择所属二级分类'
|
}
|
]}
|
>
|
<Select
|
style={{ width: "200px" }}
|
// mode="multiple"
|
options={secondTypeList}
|
fieldNames={{ label: 'name', value: 'id' }}
|
placeholder="请选择" />
|
</Form.Item>
|
</Col>
|
<Col span={24}>
|
<Form.Item
|
name='name'
|
label='故事名称'
|
required
|
rules={[
|
{
|
required: true,
|
message: '请输入故事名称'
|
}
|
]}
|
>
|
<Input placeholder="请输入" style={{ width: "200px" }} />
|
</Form.Item>
|
</Col>
|
<Col span={24}>
|
<Form.Item
|
name='english'
|
label='英文释义'
|
// rules={[
|
// {
|
// required: true,
|
// message: '请输入英文释义'
|
// }
|
// ]}
|
>
|
<Input placeholder="请输入" style={{ width: "200px" }} />
|
</Form.Item>
|
</Col>
|
<Col span={24}>
|
<Form.Item
|
name='type'
|
label='预期故事类型'
|
>
|
<Select style={{ width: "200px" }} mode="multiple" options={deptList} fieldNames={{ label: 'deptName', value: 'deptId' }} placeholder="请选择" />
|
</Form.Item>
|
</Col>
|
<Col span={24}>
|
<Form.Item
|
name='img'
|
label='上传图片'
|
required
|
rules={[
|
{
|
required: true,
|
message: '请上传图片'
|
}
|
]}
|
extra={
|
<div>
|
<div style={{ color: "red" }}>推荐尺寸：1200px x 800px </div>
|
<div style={{ color: "red" }}>推荐大小：300kb以内 </div>
|
</div>
|
}
|
>
|
<Upload
|
name="file"
|
className="avatar-uploader"
|
showUploadList={false}
|
onChange={handleChange}
|
action={BASE_URL + '/management/base/oss/upload'}
|
headers={{ Authorization: localStorage.getItem('token') }}
|
accept="image/png, image/jpeg, image/jpg, image/webp"
|
>
|
{imgUrl ? (
|
<Image
|
width={200}
|
src={imgUrl}
|
/>
|
) : (
|
uploadButton()
|
)}
|
</Upload>
|
</Form.Item>
|
</Col>
|
<Col span={24}>
|
<Form.Item
|
name='correct'
|
label='上传正确语音'
|
required
|
rules={[
|
{
|
required: true,
|
message: '请上传正确语音'
|
}
|
]}
|
>
|
<div style={{ display: 'flex' }}>
|
<Upload
|
maxCount={1}
|
name="file"
|
className="avatar-uploader"
|
showUploadList={false}
|
onChange={handleChangCorrectMp3}
|
onSuccess={handleChangCorrectMp3}
|
beforeUpload={beforeUpload}
|
action={BASE_URL + '/management/base/oss/upload'}
|
headers={{ Authorization: localStorage.getItem('token') }}
|
// fileList={correctMp3Url}
|
accept='.mp3,.wav'
|
>
|
{correctMp3Url ? (
|
<div style={{ display: 'flex' }}>
|
<audio controls src={correctMp3Url}></audio>
|
</div>
|
) : (
|
<Button type="primary" style={{ marginLeft: '20px' }}>添加</Button>
|
)}
|
|
</Upload>
|
{correctMp3Url && (<CloseOutlined onClick={() => setCorrectMp3UrlUrl()} style={{ marginLeft: "20px" }} />)}
|
</div>
|
|
</Form.Item>
|
</Col>
|
<Col span={24}>
|
<Form.Item
|
name='error1'
|
label='上传错误语音'
|
>
|
<div style={{ display: 'flex' }}>
|
<div style={{ marginRight: '10px', lineHeight: '32px' }}>1、</div>
|
<Upload
|
maxCount={1}
|
name="file"
|
className="avatar-uploader"
|
showUploadList={false}
|
onSuccess={(e) => handleChangeErrMp3(e, 1)}
|
beforeUpload={beforeUpload}
|
action={BASE_URL + '/management/base/oss/upload'}
|
headers={{ Authorization: localStorage.getItem('token') }}
|
// fileList={errMp3Url}
|
accept='.mp3,.wav'
|
>{errMp3Url ? (
|
<audio controls src={errMp3Url}></audio>
|
) : (
|
<Button type="primary">添加</Button>
|
|
)}
|
</Upload>
|
{errMp3Url && (<CloseOutlined onClick={() => setErrMp3UrlUrl()} style={{ marginLeft: "20px" }} />)}
|
|
</div>
|
</Form.Item>
|
</Col>
|
|
<Col span={24}>
|
<Form.Item
|
name='error2'
|
label=' '
|
colon={false}
|
>
|
<div style={{ display: 'flex' }}>
|
<div style={{ marginRight: '10px', lineHeight: '32px' }}>2、</div>
|
<Upload
|
maxCount={1}
|
name="file"
|
className="avatar-uploader"
|
showUploadList={false}
|
onSuccess={(e) => handleChangeErrMp3(e, 2)}
|
beforeUpload={beforeUpload}
|
action={BASE_URL + '/management/base/oss/upload'}
|
headers={{ Authorization: localStorage.getItem('token') }}
|
// fileList={errMp3Url1}
|
accept='.mp3,.wav'
|
>
|
{errMp3Url1 ? (
|
<audio controls src={errMp3Url1}></audio>
|
) : (
|
<Button type="primary">添加</Button>
|
|
)}
|
</Upload>
|
{errMp3Url1 && (<CloseOutlined onClick={() => setErrMp3UrlUrl1()} style={{ marginLeft: "20px" }} />)}
|
</div>
|
</Form.Item>
|
</Col>
|
</Row>
|
|
<div style={{ display: 'flex', justifyContent: 'center', marginTop: 20 }}>
|
<Button onClick={close} style={{ marginRight: '20px' }}>关闭</Button>
|
{!searchParams.get('detail') && (<Button type='primary' onClick={save}>确认</Button>)}
|
</div>
|
</Form>
|
</Card>
|
</PageContainer >
|
)
|
}
|
|
export default SystemSettings
|
