import { sendRequest } from '@/utils/antdUtils';
|
import { CloseOutlined, LoadingOutlined, PlusOutlined } from '@ant-design/icons';
|
import { PageContainer } from '@ant-design/pro-components';
|
import { history, useLocation } from '@umijs/max';
|
import { Button, Card, Col, Form, Image, Input, message, Row, Select, Upload } from 'antd';
|
import { useEffect, useState } from 'react';
|
import { add, edit, subjectInfo, 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: '自主学习二' },
|
{ deptName: '自主学习三', deptId: '自主学习三' },
|
{ deptName: '自主学习四', deptId: '自主学习四' },
|
{ deptName: '自主学习五', deptId: '自主学习五' },
|
]);
|
const [loading, setLoading] = useState(false);
|
const [imgUrl, setImgUrl] = useState(''); // 分享图片
|
const [correctMp3Url, setCorrectMp3UrlUrl] = useState(''); // 正确音效
|
const [errMp3Url, setErrMp3UrlUrl] = useState(''); // 错误音效
|
const [errMp3Url1, setErrMp3UrlUrl1] = useState(''); // 错误音效
|
|
const [firstTypeList, setFirstTypeList] = useState([]);
|
const [secondTypeList, setSecondTypeList] = useState([]);
|
|
useEffect(() => {
|
tCategoryList({ state: 1 }).then((res) => {
|
setFirstTypeList(res.data);
|
});
|
|
if (searchParams.get('id')) {
|
subjectInfo(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('type') === 'copy'
|
? '复制题目'
|
: searchParams.get('type') === 'edit'
|
? '编辑题目'
|
: '新增题目';
|
setTitle(title);
|
}, []);
|
const getTypeList = (id) => {
|
tCategorylistById({ id: id }).then((res) => {
|
setSecondTypeList(res.data);
|
});
|
};
|
|
// 分享图片
|
const handleChange = (info) => {
|
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) => {
|
return new Promise(async (resolve, reject) => {
|
// setLoading(true)
|
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,
|
correct: correctMp3Url,
|
firstCategory: values.firstCategory,
|
secondCategory: values.secondCategory,
|
type: (values.type || []).join('、'),
|
error: errMp3Url ? errMp3Url + ',' + errMp3Url1 : '',
|
};
|
let state = false;
|
if (searchParams.get('id')) {
|
if (searchParams.get('type') === 'copy') {
|
state = await sendRequest(add, params);
|
} else {
|
params = {
|
id: searchParams.get('id'),
|
...params,
|
};
|
state = await sendRequest(edit, 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 style={{ width: '200px' }} placeholder="请输入" />
|
</Form.Item>
|
</Col>
|
<Col span={24}>
|
<Form.Item
|
name="english"
|
label="英文释义"
|
required
|
rules={[
|
{
|
required: true,
|
message: '请输入英文释义',
|
},
|
]}
|
>
|
<Input style={{ width: '200px' }} placeholder="请输入" />
|
</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
|
extra={
|
<div>
|
<div style={{ color: 'red' }}>推荐尺寸：684px x 456px </div>
|
<div style={{ color: 'red' }}>推荐大小：300kb以内</div>
|
</div>
|
}
|
rules={[
|
{
|
required: true,
|
message: '请上传图片',
|
},
|
]}
|
>
|
<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}
|
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="error" 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={errMp3Url}
|
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;
|
