yexuejc007/PlayEdu-backend
1
0
Fork 0
mirror of https://github.com/PlayEdu/backend synced 2025-06-28 08:05:03 +08:00
Code Issues Packages Projects Releases Wiki Activity

弹窗组件open外置并使用三元运算

Browse Source
This commit is contained in:
unknown 2023-08-03 09:42:13 +08:00
parent 354bd23fc9
commit eb1e82fc12
20 changed files with 1592 additions and 1552 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/compenents/create-rs-category/index.tsx
View File

@ -40,23 +40,25 @@ export const CreateResourceCategory = (props: PropInterface) => {
shape="circle"
icon={<PlusOutlined />}
/>
<Modal
onCancel={() => {
setShowModal(false);
}}
onOk={confirm}
open={showModal}
title="创建分类"
>
<Input
placeholder="请输入分类名"
value={name}
onChange={(e) => {
setName(e.target.value);
{showModal ? (
<Modal
onCancel={() => {
setShowModal(false);
}}
allowClear
/>
</Modal>
onOk={confirm}
open={true}
title="创建分类"
>
<Input
placeholder="请输入分类名"
value={name}
onChange={(e) => {
setName(e.target.value);
}}
allowClear
/>
</Modal>
) : null}
</>
);
};

46
src/compenents/select-attachment/index.tsx
View File

@ -47,28 +47,30 @@ export const SelectAttachment = (props: PropsInterface) => {
return (
<>
<Modal
title="资源素材库"
centered
closable={false}
onCancel={() => {
setSelectKeys([]);
setSelectVideos([]);
props.onCancel();
}}
open={props.open}
width={800}
maskClosable={false}
onOk={() => {
props.onSelected(selectKeys, selectVideos);
setSelectKeys([]);
setSelectVideos([]);
}}
>
<Row>
<Tabs defaultActiveKey="1" items={items} onChange={onChange} />
</Row>
</Modal>
{props.open ? (
<Modal
title="资源素材库"
centered
closable={false}
onCancel={() => {
setSelectKeys([]);
setSelectVideos([]);
props.onCancel();
}}
open={true}
width={800}
maskClosable={false}
onOk={() => {
props.onSelected(selectKeys, selectVideos);
setSelectKeys([]);
setSelectVideos([]);
}}
>
<Row>
<Tabs defaultActiveKey="1" items={items} onChange={onChange} />
</Row>
</Modal>
) : null}
</>
);
};

46
src/compenents/select-resource/index.tsx
View File

@ -47,28 +47,30 @@ export const SelectResource = (props: PropsInterface) => {
return (
<>
<Modal
title="资源素材库"
centered
closable={false}
onCancel={() => {
setSelectKeys([]);
setSelectVideos([]);
props.onCancel();
}}
open={props.open}
width={800}
maskClosable={false}
onOk={() => {
props.onSelected(selectKeys, selectVideos);
setSelectKeys([]);
setSelectVideos([]);
}}
>
<Row>
<Tabs defaultActiveKey="1" items={items} onChange={onChange} />
</Row>
</Modal>
{props.open ? (
<Modal
title="资源素材库"
centered
closable={false}
onCancel={() => {
setSelectKeys([]);
setSelectVideos([]);
props.onCancel();
}}
open={true}
width={800}
maskClosable={false}
onOk={() => {
props.onSelected(selectKeys, selectVideos);
setSelectKeys([]);
setSelectVideos([]);
}}
>
<Row>
<Tabs defaultActiveKey="1" items={items} onChange={onChange} />
</Row>
</Modal>
) : null}
</>
);
};

704
src/pages/course/compenents/create.tsx
View File

@ -464,386 +464,388 @@ export const CourseCreate: React.FC<PropInterface> = ({
return (
<>
<Drawer
title="新建课程"
onClose={onCancel}
maskClosable={false}
open={open}
footer={
<Space className="j-r-flex">
<Button onClick={() => onCancel()}>取 消</Button>
<Button onClick={() => form.submit()} type="primary">
确 认
</Button>
</Space>
}
width={634}
>
<div className="float-left mt-24">
<SelectResource
defaultKeys={
chapterType == 0 ? hours : changeChapterHours(chapterHours)
}
open={videoVisible}
onCancel={() => {
setVideoVisible(false);
}}
onSelected={(arr: any, videos: any) => {
if (chapterType === 0) {
selectData(arr, videos);
} else {
selectChapterData(arr, videos);
{open ? (
<Drawer
title="新建课程"
onClose={onCancel}
maskClosable={false}
open={true}
footer={
<Space className="j-r-flex">
<Button onClick={() => onCancel()}>取 消</Button>
<Button onClick={() => form.submit()} type="primary">
确 认
</Button>
</Space>
}
width={634}
>
<div className="float-left mt-24">
<SelectResource
defaultKeys={
chapterType == 0 ? hours : changeChapterHours(chapterHours)
}
}}
/>
<SelectAttachment
defaultKeys={attachments}
open={attachmentVisible}
onCancel={() => {
setAttachmentVisible(false);
}}
onSelected={(arr: any, videos: any) => {
selectAttachmentData(arr, videos);
}}
></SelectAttachment>
<Form
form={form}
name="create-basic"
labelCol={{ span: 5 }}
wrapperCol={{ span: 19 }}
initialValues={{ remember: true }}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
autoComplete="off"
>
<Form.Item
label="课程分类"
name="category_ids"
rules={[{ required: true, message: "请选择课程分类!" }]}
open={videoVisible}
onCancel={() => {
setVideoVisible(false);
}}
onSelected={(arr: any, videos: any) => {
if (chapterType === 0) {
selectData(arr, videos);
} else {
selectChapterData(arr, videos);
}
}}
/>
<SelectAttachment
defaultKeys={attachments}
open={attachmentVisible}
onCancel={() => {
setAttachmentVisible(false);
}}
onSelected={(arr: any, videos: any) => {
selectAttachmentData(arr, videos);
}}
></SelectAttachment>
<Form
form={form}
name="create-basic"
labelCol={{ span: 5 }}
wrapperCol={{ span: 19 }}
initialValues={{ remember: true }}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
autoComplete="off"
>
<TreeSelect
showCheckedStrategy={TreeSelect.SHOW_ALL}
allowClear
multiple
style={{ width: 424 }}
treeData={categories}
placeholder="请选择课程分类"
treeDefaultExpandAll
/>
</Form.Item>
<Form.Item
label="课程名称"
name="title"
rules={[{ required: true, message: "请在此处输入课程名称!" }]}
>
<Input
style={{ width: 424 }}
placeholder="请在此处输入课程名称"
allowClear
/>
</Form.Item>
<Form.Item
label="课程属性"
name="isRequired"
rules={[{ required: true, message: "请选择课程属性!" }]}
>
<Radio.Group>
<Radio value={1}>必修课</Radio>
<Radio value={0} style={{ marginLeft: 22 }}>
选修课
</Radio>
</Radio.Group>
</Form.Item>
<Form.Item
label="指派部门"
name="type"
rules={[{ required: true, message: "请选择指派部门!" }]}
>
<Radio.Group onChange={getType}>
<Radio value="open">全部部门</Radio>
<Radio value="elective">选择部门</Radio>
</Radio.Group>
</Form.Item>
{type === "elective" && (
<Form.Item
label="选择部门"
name="dep_ids"
rules={[
{
required: true,
message: "请选择部门!",
},
]}
label="课程分类"
name="category_ids"
rules={[{ required: true, message: "请选择课程分类!" }]}
>
<TreeSelect
showCheckedStrategy={TreeSelect.SHOW_ALL}
style={{ width: 424 }}
treeData={departments}
multiple
allowClear
multiple
style={{ width: 424 }}
treeData={categories}
placeholder="请选择课程分类"
treeDefaultExpandAll
placeholder="请选择部门"
/>
</Form.Item>
)}
<Form.Item
label="课程封面"
name="thumb"
rules={[{ required: true, message: "请上传课程封面!" }]}
>
<div className="d-flex">
<Image
src={thumb}
width={160}
height={120}
style={{ borderRadius: 6 }}
preview={false}
<Form.Item
label="课程名称"
name="title"
rules={[{ required: true, message: "请在此处输入课程名称!" }]}
>
<Input
style={{ width: 424 }}
placeholder="请在此处输入课程名称"
allowClear
/>
<div className="c-flex ml-8 flex-1">
<div className="d-flex mb-28">
<div
className={
thumb === defaultThumb1
? styles["thumb-item-avtive"]
: styles["thumb-item"]
}
onClick={() => {
setThumb(defaultThumb1);
form.setFieldsValue({
thumb: defaultThumb1,
});
}}
>
<Image
src={defaultThumb1}
width={80}
height={60}
style={{ borderRadius: 6 }}
preview={false}
/>
</Form.Item>
<Form.Item
label="课程属性"
name="isRequired"
rules={[{ required: true, message: "请选择课程属性!" }]}
>
<Radio.Group>
<Radio value={1}>必修课</Radio>
<Radio value={0} style={{ marginLeft: 22 }}>
选修课
</Radio>
</Radio.Group>
</Form.Item>
<Form.Item
label="指派部门"
name="type"
rules={[{ required: true, message: "请选择指派部门!" }]}
>
<Radio.Group onChange={getType}>
<Radio value="open">全部部门</Radio>
<Radio value="elective">选择部门</Radio>
</Radio.Group>
</Form.Item>
{type === "elective" && (
<Form.Item
label="选择部门"
name="dep_ids"
rules={[
{
required: true,
message: "请选择部门!",
},
]}
>
<TreeSelect
showCheckedStrategy={TreeSelect.SHOW_ALL}
style={{ width: 424 }}
treeData={departments}
multiple
allowClear
treeDefaultExpandAll
placeholder="请选择部门"
/>
</Form.Item>
)}
<Form.Item
label="课程封面"
name="thumb"
rules={[{ required: true, message: "请上传课程封面!" }]}
>
<div className="d-flex">
<Image
src={thumb}
width={160}
height={120}
style={{ borderRadius: 6 }}
preview={false}
/>
<div className="c-flex ml-8 flex-1">
<div className="d-flex mb-28">
<div
className={
thumb === defaultThumb1
? styles["thumb-item-avtive"]
: styles["thumb-item"]
}
onClick={() => {
setThumb(defaultThumb1);
form.setFieldsValue({
thumb: defaultThumb1,
});
}}
>
<Image
src={defaultThumb1}
width={80}
height={60}
style={{ borderRadius: 6 }}
preview={false}
/>
</div>
<div
className={
thumb === defaultThumb2
? styles["thumb-item-avtive"]
: styles["thumb-item"]
}
onClick={() => {
setThumb(defaultThumb2);
form.setFieldsValue({
thumb: defaultThumb2,
});
}}
>
<Image
src={defaultThumb2}
width={80}
height={60}
style={{ borderRadius: 6 }}
preview={false}
/>
</div>
<div
className={
thumb === defaultThumb3
? styles["thumb-item-avtive"]
: styles["thumb-item"]
}
onClick={() => {
setThumb(defaultThumb3);
form.setFieldsValue({
thumb: defaultThumb3,
});
}}
>
<Image
src={defaultThumb3}
width={80}
height={60}
style={{ borderRadius: 6 }}
preview={false}
/>
</div>
</div>
<div
className={
thumb === defaultThumb2
? styles["thumb-item-avtive"]
: styles["thumb-item"]
}
onClick={() => {
setThumb(defaultThumb2);
form.setFieldsValue({
thumb: defaultThumb2,
});
}}
>
<Image
src={defaultThumb2}
width={80}
height={60}
style={{ borderRadius: 6 }}
preview={false}
/>
<div className="d-flex">
<UploadImageButton
text="更换封面"
onSelected={(url) => {
setThumb(url);
form.setFieldsValue({ thumb: url });
}}
></UploadImageButton>
<span className="helper-text ml-16">
（推荐尺寸:400x300px）
</span>
</div>
<div
className={
thumb === defaultThumb3
? styles["thumb-item-avtive"]
: styles["thumb-item"]
}
onClick={() => {
setThumb(defaultThumb3);
form.setFieldsValue({
thumb: defaultThumb3,
});
}}
>
<Image
src={defaultThumb3}
width={80}
height={60}
style={{ borderRadius: 6 }}
preview={false}
/>
</div>
</div>
<div className="d-flex">
<UploadImageButton
text="更换封面"
onSelected={(url) => {
setThumb(url);
form.setFieldsValue({ thumb: url });
}}
></UploadImageButton>
<span className="helper-text ml-16">
（推荐尺寸:400x300px）
</span>
</div>
</div>
</div>
</Form.Item>
<Form.Item
label="课时列表"
name="hasChapter"
rules={[{ required: true, message: "请选择课时列表!" }]}
>
<Radio.Group onChange={getChapterType}>
<Radio value={0}>无章节</Radio>
<Radio value={1} style={{ marginLeft: 22 }}>
有章节
</Radio>
</Radio.Group>
</Form.Item>
{chapterType === 0 && (
<div className="c-flex mb-24">
<Form.Item>
<div className="ml-120">
<Button
onClick={() => setVideoVisible(true)}
type="primary"
>
添加课时
</Button>
</Form.Item>
<Form.Item
label="课时列表"
name="hasChapter"
rules={[{ required: true, message: "请选择课时列表!" }]}
>
<Radio.Group onChange={getChapterType}>
<Radio value={0}>无章节</Radio>
<Radio value={1} style={{ marginLeft: 22 }}>
有章节
</Radio>
</Radio.Group>
</Form.Item>
{chapterType === 0 && (
<div className="c-flex mb-24">
<Form.Item>
<div className="ml-120">
<Button
onClick={() => setVideoVisible(true)}
type="primary"
>
添加课时
</Button>
</div>
</Form.Item>
<div className={styles["hous-box"]}>
{treeData.length === 0 && (
<span className={styles["no-hours"]}>
请点击上方按钮添加课时
</span>
)}
{treeData.length > 0 && (
<TreeHours
data={treeData}
onRemoveItem={(id: number) => {
delHour(id);
}}
onUpdate={(arr: any[]) => {
transHour(arr);
}}
/>
)}
</div>
</div>
)}
{chapterType === 1 && (
<div className="c-flex mb-24">
{chapters.length > 0 &&
chapters.map((item: any, index: number) => {
return (
<div
key={item.hours.length + "章节" + index}
className={styles["chapter-item"]}
>
<div className="d-flex">
<div className={styles["label"]}>
章节{index + 1}：
</div>
<Input
value={item.name}
className={styles["input"]}
onChange={(e) => {
setChapterName(index, e.target.value);
}}
allowClear
placeholder="请在此处输入章节名称"
/>
<Button
className="mr-16"
type="primary"
onClick={() => {
setVideoVisible(true);
setAddvideoCurrent(index);
}}
>
添加课时
</Button>
<Button onClick={() => delChapter(index)}>
删除章节
</Button>
</div>
<div className={styles["chapter-hous-box"]}>
{item.hours.length === 0 && (
<span className={styles["no-hours"]}>
请点击上方按钮添加课时
</span>
)}
{item.hours.length > 0 && (
<TreeHours
data={item.hours}
onRemoveItem={(id: number) => {
delChapterHour(index, id);
}}
onUpdate={(arr: any[]) => {
transChapterHour(index, arr);
}}
/>
)}
</div>
</div>
);
})}
<Form.Item>
<div className="ml-120">
<Button onClick={() => addNewChapter()}>添加章节</Button>
</div>
</Form.Item>
</div>
)}
<Form.Item label="更多选项">
<div
className={showDrop ? "drop-item active" : "drop-item"}
onClick={() => setShowDrop(!showDrop)}
>
<i
style={{ fontSize: 14 }}
className="iconfont icon-icon-xiala c-red"
/>
<span>(课程简介、课件)</span>
</div>
</Form.Item>
<div
className="c-flex"
style={{ display: showDrop ? "block" : "none" }}
>
<Form.Item label="课程简介" name="short_desc">
<Input.TextArea
style={{ width: 424, minHeight: 80 }}
allowClear
placeholder="请输入课程简介（最多200字）"
maxLength={200}
/>
</Form.Item>
<Form.Item label="课程附件">
<Button
onClick={() => setAttachmentVisible(true)}
type="primary"
>
添加课件
</Button>
</Form.Item>
<div className={styles["hous-box"]}>
{treeData.length === 0 && (
{attachmentData.length === 0 && (
<span className={styles["no-hours"]}>
请点击上方按钮添加课时
请点击上方按钮添加课件
</span>
)}
{treeData.length > 0 && (
<TreeHours
data={treeData}
{attachmentData.length > 0 && (
<TreeAttachments
data={attachmentData}
onRemoveItem={(id: number) => {
delHour(id);
delAttachments(id);
}}
onUpdate={(arr: any[]) => {
transHour(arr);
transAttachments(arr);
}}
/>
)}
</div>
</div>
)}
{chapterType === 1 && (
<div className="c-flex mb-24">
{chapters.length > 0 &&
chapters.map((item: any, index: number) => {
return (
<div
key={item.hours.length + "章节" + index}
className={styles["chapter-item"]}
>
<div className="d-flex">
<div className={styles["label"]}>
章节{index + 1}：
</div>
<Input
value={item.name}
className={styles["input"]}
onChange={(e) => {
setChapterName(index, e.target.value);
}}
allowClear
placeholder="请在此处输入章节名称"
/>
<Button
className="mr-16"
type="primary"
onClick={() => {
setVideoVisible(true);
setAddvideoCurrent(index);
}}
>
添加课时
</Button>
<Button onClick={() => delChapter(index)}>
删除章节
</Button>
</div>
<div className={styles["chapter-hous-box"]}>
{item.hours.length === 0 && (
<span className={styles["no-hours"]}>
请点击上方按钮添加课时
</span>
)}
{item.hours.length > 0 && (
<TreeHours
data={item.hours}
onRemoveItem={(id: number) => {
delChapterHour(index, id);
}}
onUpdate={(arr: any[]) => {
transChapterHour(index, arr);
}}
/>
)}
</div>
</div>
);
})}
<Form.Item>
<div className="ml-120">
<Button onClick={() => addNewChapter()}>添加章节</Button>
</div>
</Form.Item>
</div>
)}
<Form.Item label="更多选项">
<div
className={showDrop ? "drop-item active" : "drop-item"}
onClick={() => setShowDrop(!showDrop)}
>
<i
style={{ fontSize: 14 }}
className="iconfont icon-icon-xiala c-red"
/>
<span>(课程简介、课件)</span>
</div>
</Form.Item>
<div
className="c-flex"
style={{ display: showDrop ? "block" : "none" }}
>
<Form.Item label="课程简介" name="short_desc">
<Input.TextArea
style={{ width: 424, minHeight: 80 }}
allowClear
placeholder="请输入课程简介（最多200字）"
maxLength={200}
/>
</Form.Item>
<Form.Item label="课程附件">
<Button
onClick={() => setAttachmentVisible(true)}
type="primary"
>
添加课件
</Button>
</Form.Item>
<div className={styles["hous-box"]}>
{attachmentData.length === 0 && (
<span className={styles["no-hours"]}>
请点击上方按钮添加课件
</span>
)}
{attachmentData.length > 0 && (
<TreeAttachments
data={attachmentData}
onRemoveItem={(id: number) => {
delAttachments(id);
}}
onUpdate={(arr: any[]) => {
transAttachments(arr);
}}
/>
)}
</div>
</div>
</Form>
</div>
</Drawer>
</Form>
</div>
</Drawer>
) : null}
</>
);
};

276
src/pages/course/compenents/hour-update.tsx
View File

@ -363,146 +363,148 @@ export const CourseHourUpdate: React.FC<PropInterface> = ({
return (
<>
<Drawer
title="课时管理"
onClose={onCancel}
maskClosable={false}
open={open}
width={634}
>
<div className={styles["top-content"]}>
<p>1.线上课课时调整及时生效，操作不可逆，请谨慎操作。</p>
<p>2.课时调整后，已有学习进度会在学员学习时重新计算。</p>
</div>
<div className="float-left mt-24">
<SelectResource
defaultKeys={
chapterType === 0 ? hours : changeChapterHours(chapterHours)
}
open={videoVisible}
onCancel={() => {
setVideoVisible(false);
}}
onSelected={(arr: any, videos: any) => {
if (chapterType === 0) {
selectData(arr, videos);
} else {
selectChapterData(arr, videos);
{open ? (
<Drawer
title="课时管理"
onClose={onCancel}
maskClosable={false}
open={true}
width={634}
>
<div className={styles["top-content"]}>
<p>1.线上课课时调整及时生效，操作不可逆，请谨慎操作。</p>
<p>2.课时调整后，已有学习进度会在学员学习时重新计算。</p>
</div>
<div className="float-left mt-24">
<SelectResource
defaultKeys={
chapterType === 0 ? hours : changeChapterHours(chapterHours)
}
}}
/>
<Form
form={form}
name="hour-update-basic"
labelCol={{ span: 5 }}
wrapperCol={{ span: 19 }}
initialValues={{ remember: true }}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
autoComplete="off"
>
{chapterType === 0 && (
<div className="c-flex">
<Form.Item>
<div className="ml-42">
<Button
onClick={() => setVideoVisible(true)}
type="primary"
>
添加课时
</Button>
</div>
</Form.Item>
<div className={styles["hous-box"]}>
{treeData.length === 0 && (
<span className={styles["no-hours"]}>
请点击上方按钮添加课时
</span>
)}
{treeData.length > 0 && (
<TreeHours
data={treeData}
onRemoveItem={(id: number) => {
delHour(id);
}}
onUpdate={(arr: any[]) => {
transHour(arr);
}}
/>
)}
</div>
</div>
)}
{chapterType === 1 && (
<div className="c-flex">
{chapters.length > 0 &&
chapters.map((item: any, index: number) => {
return (
<div
key={item.hours.length + "章节" + index}
className={styles["chapter-item"]}
open={videoVisible}
onCancel={() => {
setVideoVisible(false);
}}
onSelected={(arr: any, videos: any) => {
if (chapterType === 0) {
selectData(arr, videos);
} else {
selectChapterData(arr, videos);
}
}}
/>
<Form
form={form}
name="hour-update-basic"
labelCol={{ span: 5 }}
wrapperCol={{ span: 19 }}
initialValues={{ remember: true }}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
autoComplete="off"
>
{chapterType === 0 && (
<div className="c-flex">
<Form.Item>
<div className="ml-42">
<Button
onClick={() => setVideoVisible(true)}
type="primary"
>
<div className="d-flex">
<div className={styles["label"]}>
章节{index + 1}：
</div>
<Input
value={item.name}
className={styles["input"]}
onChange={(e) => {
setChapterName(index, e.target.value);
}}
onBlur={(e) => {
saveChapterName(index, e.target.value);
}}
placeholder="请在此处输入章节名称"
allowClear
/>
<Button
className="mr-16"
type="primary"
onClick={() => {
setVideoVisible(true);
setAddvideoCurrent(index);
}}
>
添加课时
</Button>
<Button onClick={() => delChapter(index)}>
删除章节
</Button>
</div>
<div className={styles["chapter-hous-box"]}>
{item.hours.length === 0 && (
<span className={styles["no-hours"]}>
请点击上方按钮添加课时
</span>
)}
{item.hours.length > 0 && (
<TreeHours
data={item.hours}
onRemoveItem={(id: number) => {
delChapterHour(index, id);
}}
onUpdate={(arr: any[]) => {
transChapterHour(index, arr);
}}
/>
)}
</div>
</div>
);
})}
<Form.Item>
<div className="ml-42">
<Button onClick={() => addNewChapter()}>添加章节</Button>
添加课时
</Button>
</div>
</Form.Item>
<div className={styles["hous-box"]}>
{treeData.length === 0 && (
<span className={styles["no-hours"]}>
请点击上方按钮添加课时
</span>
)}
{treeData.length > 0 && (
<TreeHours
data={treeData}
onRemoveItem={(id: number) => {
delHour(id);
}}
onUpdate={(arr: any[]) => {
transHour(arr);
}}
/>
)}
</div>
</Form.Item>
</div>
)}
</Form>
</div>
</Drawer>
</div>
)}
{chapterType === 1 && (
<div className="c-flex">
{chapters.length > 0 &&
chapters.map((item: any, index: number) => {
return (
<div
key={item.hours.length + "章节" + index}
className={styles["chapter-item"]}
>
<div className="d-flex">
<div className={styles["label"]}>
章节{index + 1}：
</div>
<Input
value={item.name}
className={styles["input"]}
onChange={(e) => {
setChapterName(index, e.target.value);
}}
onBlur={(e) => {
saveChapterName(index, e.target.value);
}}
placeholder="请在此处输入章节名称"
allowClear
/>
<Button
className="mr-16"
type="primary"
onClick={() => {
setVideoVisible(true);
setAddvideoCurrent(index);
}}
>
添加课时
</Button>
<Button onClick={() => delChapter(index)}>
删除章节
</Button>
</div>
<div className={styles["chapter-hous-box"]}>
{item.hours.length === 0 && (
<span className={styles["no-hours"]}>
请点击上方按钮添加课时
</span>
)}
{item.hours.length > 0 && (
<TreeHours
data={item.hours}
onRemoveItem={(id: number) => {
delChapterHour(index, id);
}}
onUpdate={(arr: any[]) => {
transChapterHour(index, arr);
}}
/>
)}
</div>
</div>
);
})}
<Form.Item>
<div className="ml-42">
<Button onClick={() => addNewChapter()}>添加章节</Button>
</div>
</Form.Item>
</div>
)}
</Form>
</div>
</Drawer>
) : null}
</>
);
};

380
src/pages/course/compenents/update.tsx
View File

@ -169,209 +169,211 @@ export const CourseUpdate: React.FC<PropInterface> = ({
return (
<>
<Drawer
title="编辑课程"
onClose={onCancel}
maskClosable={false}
open={open}
footer={
<Space className="j-r-flex">
<Button onClick={() => onCancel()}>取 消</Button>
<Button onClick={() => form.submit()} type="primary">
确 认
</Button>
</Space>
}
width={634}
>
<div className="float-left mt-24">
<Form
form={form}
name="update-basic"
labelCol={{ span: 5 }}
wrapperCol={{ span: 19 }}
initialValues={{ remember: true }}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
autoComplete="off"
>
<Form.Item
label="课程分类"
name="category_ids"
rules={[{ required: true, message: "请选择课程分类!" }]}
{open ? (
<Drawer
title="编辑课程"
onClose={onCancel}
maskClosable={false}
open={true}
footer={
<Space className="j-r-flex">
<Button onClick={() => onCancel()}>取 消</Button>
<Button onClick={() => form.submit()} type="primary">
确 认
</Button>
</Space>
}
width={634}
>
<div className="float-left mt-24">
<Form
form={form}
name="update-basic"
labelCol={{ span: 5 }}
wrapperCol={{ span: 19 }}
initialValues={{ remember: true }}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
autoComplete="off"
>
<TreeSelect
showCheckedStrategy={TreeSelect.SHOW_ALL}
allowClear
multiple
style={{ width: 424 }}
treeData={categories}
placeholder="请选择课程分类"
treeDefaultExpandAll
/>
</Form.Item>
<Form.Item
label="课程名称"
name="title"
rules={[{ required: true, message: "请在此处输入课程名称!" }]}
>
<Input
allowClear
style={{ width: 424 }}
placeholder="请在此处输入课程名称"
/>
</Form.Item>
<Form.Item
label="课程属性"
name="isRequired"
rules={[{ required: true, message: "请选择课程属性!" }]}
>
<Radio.Group>
<Radio value={1}>必修课</Radio>
<Radio value={0} style={{ marginLeft: 22 }}>
选修课
</Radio>
</Radio.Group>
</Form.Item>
<Form.Item
label="指派部门"
name="type"
rules={[{ required: true, message: "请选择指派部门!" }]}
>
<Radio.Group onChange={getType}>
<Radio value="open">全部部门</Radio>
<Radio value="elective">选择部门</Radio>
</Radio.Group>
</Form.Item>
{type === "elective" && (
<Form.Item
label="选择部门"
name="dep_ids"
rules={[
{
required: true,
message: "请选择部门!",
},
]}
label="课程分类"
name="category_ids"
rules={[{ required: true, message: "请选择课程分类!" }]}
>
<TreeSelect
showCheckedStrategy={TreeSelect.SHOW_ALL}
style={{ width: 424 }}
treeData={departments}
multiple
allowClear
multiple
style={{ width: 424 }}
treeData={categories}
placeholder="请选择课程分类"
treeDefaultExpandAll
placeholder="请选择部门"
/>
</Form.Item>
)}
<Form.Item
label="课程封面"
name="thumb"
rules={[{ required: true, message: "请上传课程封面!" }]}
>
<div className="d-flex">
<Image
src={thumb}
width={160}
height={120}
style={{ borderRadius: 6 }}
preview={false}
<Form.Item
label="课程名称"
name="title"
rules={[{ required: true, message: "请在此处输入课程名称!" }]}
>
<Input
allowClear
style={{ width: 424 }}
placeholder="请在此处输入课程名称"
/>
<div className="c-flex ml-8 flex-1">
<div className="d-flex mb-28">
<div
className={
thumb === defaultThumb1
? styles["thumb-item-avtive"]
: styles["thumb-item"]
}
onClick={() => {
setThumb(defaultThumb1);
form.setFieldsValue({
thumb: defaultThumb1,
});
}}
>
<Image
src={defaultThumb1}
width={80}
height={60}
style={{ borderRadius: 6 }}
preview={false}
/>
</Form.Item>
<Form.Item
label="课程属性"
name="isRequired"
rules={[{ required: true, message: "请选择课程属性!" }]}
>
<Radio.Group>
<Radio value={1}>必修课</Radio>
<Radio value={0} style={{ marginLeft: 22 }}>
选修课
</Radio>
</Radio.Group>
</Form.Item>
<Form.Item
label="指派部门"
name="type"
rules={[{ required: true, message: "请选择指派部门!" }]}
>
<Radio.Group onChange={getType}>
<Radio value="open">全部部门</Radio>
<Radio value="elective">选择部门</Radio>
</Radio.Group>
</Form.Item>
{type === "elective" && (
<Form.Item
label="选择部门"
name="dep_ids"
rules={[
{
required: true,
message: "请选择部门!",
},
]}
>
<TreeSelect
showCheckedStrategy={TreeSelect.SHOW_ALL}
style={{ width: 424 }}
treeData={departments}
multiple
allowClear
treeDefaultExpandAll
placeholder="请选择部门"
/>
</Form.Item>
)}
<Form.Item
label="课程封面"
name="thumb"
rules={[{ required: true, message: "请上传课程封面!" }]}
>
<div className="d-flex">
<Image
src={thumb}
width={160}
height={120}
style={{ borderRadius: 6 }}
preview={false}
/>
<div className="c-flex ml-8 flex-1">
<div className="d-flex mb-28">
<div
className={
thumb === defaultThumb1
? styles["thumb-item-avtive"]
: styles["thumb-item"]
}
onClick={() => {
setThumb(defaultThumb1);
form.setFieldsValue({
thumb: defaultThumb1,
});
}}
>
<Image
src={defaultThumb1}
width={80}
height={60}
style={{ borderRadius: 6 }}
preview={false}
/>
</div>
<div
className={
thumb === defaultThumb2
? styles["thumb-item-avtive"]
: styles["thumb-item"]
}
onClick={() => {
setThumb(defaultThumb2);
form.setFieldsValue({
thumb: defaultThumb2,
});
}}
>
<Image
src={defaultThumb2}
width={80}
height={60}
style={{ borderRadius: 6 }}
preview={false}
/>
</div>
<div
className={
thumb === defaultThumb3
? styles["thumb-item-avtive"]
: styles["thumb-item"]
}
onClick={() => {
setThumb(defaultThumb3);
form.setFieldsValue({
thumb: defaultThumb3,
});
}}
>
<Image
src={defaultThumb3}
width={80}
height={60}
style={{ borderRadius: 6 }}
preview={false}
/>
</div>
</div>
<div
className={
thumb === defaultThumb2
? styles["thumb-item-avtive"]
: styles["thumb-item"]
}
onClick={() => {
setThumb(defaultThumb2);
form.setFieldsValue({
thumb: defaultThumb2,
});
}}
>
<Image
src={defaultThumb2}
width={80}
height={60}
style={{ borderRadius: 6 }}
preview={false}
/>
<div className="d-flex">
<UploadImageButton
text="更换封面"
onSelected={(url) => {
setThumb(url);
form.setFieldsValue({ thumb: url });
}}
></UploadImageButton>
<span className="helper-text ml-16">
（推荐尺寸:400x300px）
</span>
</div>
<div
className={
thumb === defaultThumb3
? styles["thumb-item-avtive"]
: styles["thumb-item"]
}
onClick={() => {
setThumb(defaultThumb3);
form.setFieldsValue({
thumb: defaultThumb3,
});
}}
>
<Image
src={defaultThumb3}
width={80}
height={60}
style={{ borderRadius: 6 }}
preview={false}
/>
</div>
</div>
<div className="d-flex">
<UploadImageButton
text="更换封面"
onSelected={(url) => {
setThumb(url);
form.setFieldsValue({ thumb: url });
}}
></UploadImageButton>
<span className="helper-text ml-16">
（推荐尺寸:400x300px）
</span>
</div>
</div>
</div>
</Form.Item>
<Form.Item label="课程简介" name="short_desc">
<Input.TextArea
style={{ width: 424, minHeight: 80 }}
allowClear
placeholder="请输入课程简介（最多200字）"
maxLength={200}
/>
</Form.Item>
</Form>
</div>
</Drawer>
</Form.Item>
<Form.Item label="课程简介" name="short_desc">
<Input.TextArea
style={{ width: 424, minHeight: 80 }}
allowClear
placeholder="请输入课程简介（最多200字）"
maxLength={200}
/>
</Form.Item>
</Form>
</div>
</Drawer>
) : null}
</>
);
};

102
src/pages/department/compenents/create.tsx
View File

@ -105,57 +105,59 @@ export const DepartmentCreate: React.FC<PropInterface> = ({
return (
<>
<Modal
title="新建部门"
centered
forceRender
open={open}
width={416}
onOk={() => form.submit()}
onCancel={() => onCancel()}
maskClosable={false}
>
<div className="float-left mt-24">
<Form
form={form}
name="basic"
labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }}
initialValues={{ remember: true }}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
autoComplete="off"
>
<Form.Item
label="所属上级"
name="parent_id"
rules={[{ required: true, message: "请选择所属上级!" }]}
{open ? (
<Modal
title="新建部门"
centered
forceRender
open={true}
width={416}
onOk={() => form.submit()}
onCancel={() => onCancel()}
maskClosable={false}
>
<div className="float-left mt-24">
<Form
form={form}
name="basic"
labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }}
initialValues={{ remember: true }}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
autoComplete="off"
>
<Cascader
style={{ width: 200 }}
allowClear
placeholder="请选择所属上级"
onChange={handleChange}
options={departments}
changeOnSelect
expand-trigger="hover"
displayRender={displayRender}
/>
</Form.Item>
<Form.Item
label="部门名称"
name="name"
rules={[{ required: true, message: "请输入部门名称!" }]}
>
<Input
style={{ width: 200 }}
allowClear
placeholder="请输入部门名称"
/>
</Form.Item>
</Form>
</div>
</Modal>
<Form.Item
label="所属上级"
name="parent_id"
rules={[{ required: true, message: "请选择所属上级!" }]}
>
<Cascader
style={{ width: 200 }}
allowClear
placeholder="请选择所属上级"
onChange={handleChange}
options={departments}
changeOnSelect
expand-trigger="hover"
displayRender={displayRender}
/>
</Form.Item>
<Form.Item
label="部门名称"
name="name"
rules={[{ required: true, message: "请输入部门名称!" }]}
>
<Input
style={{ width: 200 }}
allowClear
placeholder="请输入部门名称"
/>
</Form.Item>
</Form>
</div>
</Modal>
) : null}
</>
);
};

94
src/pages/department/compenents/update.tsx
View File

@ -129,53 +129,55 @@ export const DepartmentUpdate: React.FC<PropInterface> = ({
return (
<>
<Modal
title="编辑部门"
centered
forceRender
open={open}
width={416}
onOk={() => form.submit()}
onCancel={() => onCancel()}
maskClosable={false}
>
<div className="float-left mt-24">
<Form
form={form}
name="basic"
labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }}
initialValues={{ remember: true }}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
autoComplete="off"
>
<Form.Item
label="所属上级"
name="parent_id"
rules={[{ required: true, message: "请选择所属上级!" }]}
{open ? (
<Modal
title="编辑部门"
centered
forceRender
open={true}
width={416}
onOk={() => form.submit()}
onCancel={() => onCancel()}
maskClosable={false}
>
<div className="float-left mt-24">
<Form
form={form}
name="basic"
labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }}
initialValues={{ remember: true }}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
autoComplete="off"
>
<Cascader
style={{ width: 200 }}
allowClear
placeholder="请选择所属上级"
onChange={handleChange}
options={departments}
changeOnSelect
expand-trigger="hover"
displayRender={displayRender}
/>
</Form.Item>
<Form.Item
label="部门名称"
name="name"
rules={[{ required: true, message: "请输入部门名称!" }]}
>
<Input style={{ width: 200 }} placeholder="请输入部门名称" />
</Form.Item>
</Form>
</div>
</Modal>
<Form.Item
label="所属上级"
name="parent_id"
rules={[{ required: true, message: "请选择所属上级!" }]}
>
<Cascader
style={{ width: 200 }}
allowClear
placeholder="请选择所属上级"
onChange={handleChange}
options={departments}
changeOnSelect
expand-trigger="hover"
displayRender={displayRender}
/>
</Form.Item>
<Form.Item
label="部门名称"
name="name"
rules={[{ required: true, message: "请输入部门名称!" }]}
>
<Input style={{ width: 200 }} placeholder="请输入部门名称" />
</Form.Item>
</Form>
</div>
</Modal>
) : null}
</>
);
};

188
src/pages/member/compenents/create.tsx
View File

@ -105,102 +105,104 @@ export const MemberCreate: React.FC<PropInterface> = ({
return (
<>
<Modal
title="添加学员"
centered
forceRender
open={open}
width={484}
onOk={() => form.submit()}
onCancel={() => onCancel()}
maskClosable={false}
>
<div className="member-form float-left mt-24">
<Form
form={form}
name="create-basic"
labelCol={{ span: 7 }}
wrapperCol={{ span: 17 }}
initialValues={{ remember: true }}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
autoComplete="off"
>
<Form.Item
label="学员头像"
labelCol={{ style: { marginTop: 15, marginLeft: 46 } }}
name="avatar"
rules={[{ required: true, message: "请上传学员头像!" }]}
{open ? (
<Modal
title="添加学员"
centered
forceRender
open={true}
width={484}
onOk={() => form.submit()}
onCancel={() => onCancel()}
maskClosable={false}
>
<div className="member-form float-left mt-24">
<Form
form={form}
name="create-basic"
labelCol={{ span: 7 }}
wrapperCol={{ span: 17 }}
initialValues={{ remember: true }}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
autoComplete="off"
>
<div className="d-flex">
{avatar && (
<img className="form-avatar mr-16" src={avatar} alt="" />
)}
<Form.Item
label="学员头像"
labelCol={{ style: { marginTop: 15, marginLeft: 46 } }}
name="avatar"
rules={[{ required: true, message: "请上传学员头像!" }]}
>
<div className="d-flex">
<UploadImageButton
text="更换头像"
onSelected={(url) => {
setAvatar(url);
form.setFieldsValue({ avatar: url });
}}
></UploadImageButton>
{avatar && (
<img className="form-avatar mr-16" src={avatar} alt="" />
)}
<div className="d-flex">
<UploadImageButton
text="更换头像"
onSelected={(url) => {
setAvatar(url);
form.setFieldsValue({ avatar: url });
}}
></UploadImageButton>
</div>
</div>
</div>
</Form.Item>
<Form.Item
label="学员姓名"
name="name"
rules={[{ required: true, message: "请输入学员姓名!" }]}
>
<Input style={{ width: 274 }} placeholder="请填写学员姓名" />
</Form.Item>
<Form.Item
label="登录邮箱"
name="email"
rules={[{ required: true, message: "请输入登录邮箱!" }]}
>
<Input
allowClear
style={{ width: 274 }}
placeholder="请输入学员登录邮箱"
/>
</Form.Item>
<Form.Item
label="登录密码"
name="password"
rules={[{ required: true, message: "请输入登录密码!" }]}
>
<Input.Password
allowClear
style={{ width: 274 }}
placeholder="请输入登录密码"
/>
</Form.Item>
<Form.Item
label="所属部门"
name="dep_ids"
rules={[{ required: true, message: "请选择学员所属部门!" }]}
>
<TreeSelect
showCheckedStrategy={TreeSelect.SHOW_ALL}
style={{ width: 274 }}
treeData={departments}
multiple
allowClear
treeDefaultExpandAll
placeholder="请选择学员所属部门"
/>
</Form.Item>
<Form.Item label="身份证号" name="idCard">
<Input
style={{ width: 274 }}
allowClear
placeholder="请填写学员身份证号"
/>
</Form.Item>
</Form>
</div>
</Modal>
</Form.Item>
<Form.Item
label="学员姓名"
name="name"
rules={[{ required: true, message: "请输入学员姓名!" }]}
>
<Input style={{ width: 274 }} placeholder="请填写学员姓名" />
</Form.Item>
<Form.Item
label="登录邮箱"
name="email"
rules={[{ required: true, message: "请输入登录邮箱!" }]}
>
<Input
allowClear
style={{ width: 274 }}
placeholder="请输入学员登录邮箱"
/>
</Form.Item>
<Form.Item
label="登录密码"
name="password"
rules={[{ required: true, message: "请输入登录密码!" }]}
>
<Input.Password
allowClear
style={{ width: 274 }}
placeholder="请输入登录密码"
/>
</Form.Item>
<Form.Item
label="所属部门"
name="dep_ids"
rules={[{ required: true, message: "请选择学员所属部门!" }]}
>
<TreeSelect
showCheckedStrategy={TreeSelect.SHOW_ALL}
style={{ width: 274 }}
treeData={departments}
multiple
allowClear
treeDefaultExpandAll
placeholder="请选择学员所属部门"
/>
</Form.Item>
<Form.Item label="身份证号" name="idCard">
<Input
style={{ width: 274 }}
allowClear
placeholder="请填写学员身份证号"
/>
</Form.Item>
</Form>
</div>
</Modal>
) : null}
</>
);
};

74
src/pages/member/compenents/progress.tsx
View File

@ -210,43 +210,45 @@ export const MemberLearnProgressDialog: React.FC<PropInterface> = ({
return (
<>
<Modal
title="课时学习进度"
centered
forceRender
open={open}
width={1000}
onOk={() => onCancel()}
onCancel={() => onCancel()}
maskClosable={false}
footer={null}
>
<div className="d-flex mt-24">
<PerButton
type="primary"
text="重置学习记录"
class="c-white"
icon={null}
p="user-learn-destroy"
onClick={() => {
clearProgress();
}}
disabled={null}
/>
</div>
<div
className="d-flex mt-24"
style={{ maxHeight: 800, overflowY: "auto" }}
{open ? (
<Modal
title="课时学习进度"
centered
forceRender
open={true}
width={1000}
onOk={() => onCancel()}
onCancel={() => onCancel()}
maskClosable={false}
footer={null}
>
<Table
columns={column}
dataSource={list}
loading={loading}
rowKey={(record) => record.id}
pagination={false}
/>
</div>
</Modal>
<div className="d-flex mt-24">
<PerButton
type="primary"
text="重置学习记录"
class="c-white"
icon={null}
p="user-learn-destroy"
onClick={() => {
clearProgress();
}}
disabled={null}
/>
</div>
<div
className="d-flex mt-24"
style={{ maxHeight: 800, overflowY: "auto" }}
>
<Table
columns={column}
dataSource={list}
loading={loading}
rowKey={(record) => record.id}
pagination={false}
/>
</div>
</Modal>
) : null}
</>
);
};

188
src/pages/member/compenents/update.tsx
View File

@ -134,102 +134,104 @@ export const MemberUpdate: React.FC<PropInterface> = ({
return (
<>
<Modal
title="编辑学员"
centered
forceRender
open={open}
width={484}
onOk={() => form.submit()}
onCancel={() => onCancel()}
maskClosable={false}
>
<div className="float-left mt-24">
<Form
form={form}
name="update-basic"
labelCol={{ span: 7 }}
wrapperCol={{ span: 17 }}
initialValues={{ remember: true }}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
autoComplete="off"
>
<Form.Item
label="学员头像"
labelCol={{ style: { marginTop: 15, marginLeft: 46 } }}
name="avatar"
rules={[{ required: true, message: "请上传学员头像!" }]}
{open ? (
<Modal
title="编辑学员"
centered
forceRender
open={true}
width={484}
onOk={() => form.submit()}
onCancel={() => onCancel()}
maskClosable={false}
>
<div className="float-left mt-24">
<Form
form={form}
name="update-basic"
labelCol={{ span: 7 }}
wrapperCol={{ span: 17 }}
initialValues={{ remember: true }}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
autoComplete="off"
>
<div className="d-flex">
{avatar && (
<img className="form-avatar mr-16" src={avatar} alt="" />
)}
<Form.Item
label="学员头像"
labelCol={{ style: { marginTop: 15, marginLeft: 46 } }}
name="avatar"
rules={[{ required: true, message: "请上传学员头像!" }]}
>
<div className="d-flex">
<UploadImageButton
text="更换头像"
onSelected={(url) => {
setAvatar(url);
form.setFieldsValue({ avatar: url });
}}
></UploadImageButton>
{avatar && (
<img className="form-avatar mr-16" src={avatar} alt="" />
)}
<div className="d-flex">
<UploadImageButton
text="更换头像"
onSelected={(url) => {
setAvatar(url);
form.setFieldsValue({ avatar: url });
}}
></UploadImageButton>
</div>
</div>
</div>
</Form.Item>
<Form.Item
label="学员姓名"
name="name"
rules={[{ required: true, message: "请输入学员姓名!" }]}
>
<Input
allowClear
style={{ width: 274 }}
placeholder="请填写学员姓名"
/>
</Form.Item>
<Form.Item
label="登录邮箱"
name="email"
rules={[{ required: true, message: "请输入登录邮箱!" }]}
>
<Input
style={{ width: 274 }}
allowClear
placeholder="请输入学员登录邮箱"
/>
</Form.Item>
<Form.Item label="登录密码" name="password">
<Input.Password
style={{ width: 274 }}
allowClear
placeholder="请输入登录密码"
/>
</Form.Item>
<Form.Item
label="所属部门"
name="dep_ids"
rules={[{ required: true, message: "请选择学员所属部门!" }]}
>
<TreeSelect
showCheckedStrategy={TreeSelect.SHOW_ALL}
style={{ width: 274 }}
treeData={departments}
multiple
allowClear
treeDefaultExpandAll
placeholder="请选择学员所属部门"
/>
</Form.Item>
<Form.Item label="身份证号" name="idCard">
<Input
allowClear
style={{ width: 274 }}
placeholder="请填写学员身份证号"
/>
</Form.Item>
</Form>
</div>
</Modal>
</Form.Item>
<Form.Item
label="学员姓名"
name="name"
rules={[{ required: true, message: "请输入学员姓名!" }]}
>
<Input
allowClear
style={{ width: 274 }}
placeholder="请填写学员姓名"
/>
</Form.Item>
<Form.Item
label="登录邮箱"
name="email"
rules={[{ required: true, message: "请输入登录邮箱!" }]}
>
<Input
style={{ width: 274 }}
allowClear
placeholder="请输入学员登录邮箱"
/>
</Form.Item>
<Form.Item label="登录密码" name="password">
<Input.Password
style={{ width: 274 }}
allowClear
placeholder="请输入登录密码"
/>
</Form.Item>
<Form.Item
label="所属部门"
name="dep_ids"
rules={[{ required: true, message: "请选择学员所属部门!" }]}
>
<TreeSelect
showCheckedStrategy={TreeSelect.SHOW_ALL}
style={{ width: 274 }}
treeData={departments}
multiple
allowClear
treeDefaultExpandAll
placeholder="请选择学员所属部门"
/>
</Form.Item>
<Form.Item label="身份证号" name="idCard">
<Input
allowClear
style={{ width: 274 }}
placeholder="请填写学员身份证号"
/>
</Form.Item>
</Form>
</div>
</Modal>
) : null}
</>
);
};

98
src/pages/resource/courseware/compenents/update-dialog/index.tsx
View File

@ -96,55 +96,57 @@ export const CoursewareUpdateDialog: React.FC<PropInterface> = ({
return (
<>
<Modal
title="编辑课件"
centered
forceRender
open={open}
width={416}
onOk={() => form.submit()}
onCancel={() => onCancel()}
maskClosable={false}
>
<div className="float-left mt-24">
<Form
form={form}
name="videos-update"
labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }}
initialValues={{ remember: true }}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
autoComplete="off"
>
<Form.Item
label="课件分类"
name="category_id"
rules={[{ required: true, message: "请选择课件分类!" }]}
{open ? (
<Modal
title="编辑课件"
centered
forceRender
open={true}
width={416}
onOk={() => form.submit()}
onCancel={() => onCancel()}
maskClosable={false}
>
<div className="float-left mt-24">
<Form
form={form}
name="videos-update"
labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }}
initialValues={{ remember: true }}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
autoComplete="off"
>
<TreeSelect
showCheckedStrategy={TreeSelect.SHOW_ALL}
allowClear
style={{ width: 200 }}
treeData={categories}
placeholder="课件分类"
treeDefaultExpandAll
/>
</Form.Item>
<Form.Item
label="课件名称"
name="name"
rules={[{ required: true, message: "请输入课件名称!" }]}
>
<Input
allowClear
style={{ width: 200 }}
placeholder="请输入课件名称"
/>
</Form.Item>
</Form>
</div>
</Modal>
<Form.Item
label="课件分类"
name="category_id"
rules={[{ required: true, message: "请选择课件分类!" }]}
>
<TreeSelect
showCheckedStrategy={TreeSelect.SHOW_ALL}
allowClear
style={{ width: 200 }}
treeData={categories}
placeholder="课件分类"
treeDefaultExpandAll
/>
</Form.Item>
<Form.Item
label="课件名称"
name="name"
rules={[{ required: true, message: "请输入课件名称!" }]}
>
<Input
allowClear
style={{ width: 200 }}
placeholder="请输入课件名称"
/>
</Form.Item>
</Form>
</div>
</Modal>
) : null}
</>
);
};

102
src/pages/resource/resource-category/compenents/create.tsx
View File

@ -105,57 +105,59 @@ export const ResourceCategoryCreate: React.FC<PropInterface> = ({
return (
<>
<Modal
title="新建分类"
centered
forceRender
maskClosable={false}
open={open}
width={416}
onOk={() => form.submit()}
onCancel={() => onCancel()}
>
<div className="float-left mt-24">
<Form
form={form}
name="basic"
labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }}
initialValues={{ remember: true }}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
autoComplete="off"
>
<Form.Item
label="所属上级"
name="parent_id"
rules={[{ required: true, message: "请选择所属上级!" }]}
{open ? (
<Modal
title="新建分类"
centered
forceRender
maskClosable={false}
open={true}
width={416}
onOk={() => form.submit()}
onCancel={() => onCancel()}
>
<div className="float-left mt-24">
<Form
form={form}
name="basic"
labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }}
initialValues={{ remember: true }}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
autoComplete="off"
>
<Cascader
style={{ width: 200 }}
allowClear
placeholder="请选择所属上级"
onChange={handleChange}
options={categories}
changeOnSelect
expand-trigger="hover"
displayRender={displayRender}
/>
</Form.Item>
<Form.Item
label="分类名称"
name="name"
rules={[{ required: true, message: "请输入分类名称!" }]}
>
<Input
style={{ width: 200 }}
allowClear
placeholder="请输入分类名称"
/>
</Form.Item>
</Form>
</div>
</Modal>
<Form.Item
label="所属上级"
name="parent_id"
rules={[{ required: true, message: "请选择所属上级!" }]}
>
<Cascader
style={{ width: 200 }}
allowClear
placeholder="请选择所属上级"
onChange={handleChange}
options={categories}
changeOnSelect
expand-trigger="hover"
displayRender={displayRender}
/>
</Form.Item>
<Form.Item
label="分类名称"
name="name"
rules={[{ required: true, message: "请输入分类名称!" }]}
>
<Input
style={{ width: 200 }}
allowClear
placeholder="请输入分类名称"
/>
</Form.Item>
</Form>
</div>
</Modal>
) : null}
</>
);
};

102
src/pages/resource/resource-category/compenents/update.tsx
View File

@ -127,57 +127,59 @@ export const ResourceCategoryUpdate: React.FC<PropInterface> = ({
return (
<>
<Modal
title="编辑分类"
centered
forceRender
open={open}
width={416}
onOk={() => form.submit()}
onCancel={() => onCancel()}
maskClosable={false}
>
<div className="float-left mt-24">
<Form
form={form}
name="basic"
labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }}
initialValues={{ remember: true }}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
autoComplete="off"
>
<Form.Item
label="所属上级"
name="parent_id"
rules={[{ required: true, message: "请选择所属上级!" }]}
{open ? (
<Modal
title="编辑分类"
centered
forceRender
open={true}
width={416}
onOk={() => form.submit()}
onCancel={() => onCancel()}
maskClosable={false}
>
<div className="float-left mt-24">
<Form
form={form}
name="basic"
labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }}
initialValues={{ remember: true }}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
autoComplete="off"
>
<Cascader
style={{ width: 200 }}
allowClear
placeholder="请选择所属上级"
onChange={handleChange}
options={categories}
changeOnSelect
expand-trigger="hover"
displayRender={displayRender}
/>
</Form.Item>
<Form.Item
label="分类名称"
name="name"
rules={[{ required: true, message: "请输入分类名称!" }]}
>
<Input
style={{ width: 200 }}
allowClear
placeholder="请输入分类名称"
/>
</Form.Item>
</Form>
</div>
</Modal>
<Form.Item
label="所属上级"
name="parent_id"
rules={[{ required: true, message: "请选择所属上级!" }]}
>
<Cascader
style={{ width: 200 }}
allowClear
placeholder="请选择所属上级"
onChange={handleChange}
options={categories}
changeOnSelect
expand-trigger="hover"
displayRender={displayRender}
/>
</Form.Item>
<Form.Item
label="分类名称"
name="name"
rules={[{ required: true, message: "请输入分类名称!" }]}
>
<Input
style={{ width: 200 }}
allowClear
placeholder="请输入分类名称"
/>
</Form.Item>
</Form>
</div>
</Modal>
) : null}
</>
);
};

98
src/pages/resource/videos/compenents/update-dialog/index.tsx
View File

@ -89,55 +89,57 @@ export const VideosUpdateDialog: React.FC<PropInterface> = ({
return (
<>
<Modal
title="编辑视频"
centered
forceRender
open={open}
width={416}
onOk={() => form.submit()}
onCancel={() => onCancel()}
maskClosable={false}
>
<div className="float-left mt-24">
<Form
form={form}
name="videos-update"
labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }}
initialValues={{ remember: true }}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
autoComplete="off"
>
<Form.Item
label="视频分类"
name="category_id"
rules={[{ required: true, message: "请选择视频分类!" }]}
{open ? (
<Modal
title="编辑视频"
centered
forceRender
open={true}
width={416}
onOk={() => form.submit()}
onCancel={() => onCancel()}
maskClosable={false}
>
<div className="float-left mt-24">
<Form
form={form}
name="videos-update"
labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }}
initialValues={{ remember: true }}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
autoComplete="off"
>
<TreeSelect
showCheckedStrategy={TreeSelect.SHOW_ALL}
allowClear
style={{ width: 200 }}
treeData={categories}
placeholder="视频分类"
treeDefaultExpandAll
/>
</Form.Item>
<Form.Item
label="视频名称"
name="name"
rules={[{ required: true, message: "请输入视频名称!" }]}
>
<Input
allowClear
style={{ width: 200 }}
placeholder="请输入视频名称"
/>
</Form.Item>
</Form>
</div>
</Modal>
<Form.Item
label="视频分类"
name="category_id"
rules={[{ required: true, message: "请选择视频分类!" }]}
>
<TreeSelect
showCheckedStrategy={TreeSelect.SHOW_ALL}
allowClear
style={{ width: 200 }}
treeData={categories}
placeholder="视频分类"
treeDefaultExpandAll
/>
</Form.Item>
<Form.Item
label="视频名称"
name="name"
rules={[{ required: true, message: "请输入视频名称!" }]}
>
<Input
allowClear
style={{ width: 200 }}
placeholder="请输入视频名称"
/>
</Form.Item>
</Form>
</div>
</Modal>
) : null}
</>
);
};

158
src/pages/system/administrator/compenents/create.tsx
View File

@ -85,86 +85,88 @@ export const SystemAdministratorCreate: React.FC<PropInterface> = ({
return (
<>
<Modal
title="添加管理员"
centered
forceRender
open={open}
width={416}
onOk={() => form.submit()}
onCancel={() => onCancel()}
maskClosable={false}
>
<div className="float-left mt-24">
<Form
form={form}
name="basic"
labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }}
initialValues={{ remember: true }}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
autoComplete="off"
>
<Form.Item
label="选择角色"
name="roleIds"
rules={[{ required: true, message: "请选择角色!" }]}
{open ? (
<Modal
title="添加管理员"
centered
forceRender
open={true}
width={416}
onOk={() => form.submit()}
onCancel={() => onCancel()}
maskClosable={false}
>
<div className="float-left mt-24">
<Form
form={form}
name="basic"
labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }}
initialValues={{ remember: true }}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
autoComplete="off"
>
<Select
style={{ width: 200 }}
mode="multiple"
allowClear
placeholder="请选择角色"
onChange={handleChange}
options={roles}
/>
</Form.Item>
<Form.Item
label="管理员姓名"
name="name"
rules={[{ required: true, message: "请输入管理员姓名!" }]}
>
<Input
allowClear
style={{ width: 200 }}
placeholder="请输入管理员姓名"
/>
</Form.Item>
<Form.Item
label="邮箱"
name="email"
rules={[{ required: true, message: "请输入学员邮箱!" }]}
>
<Input
allowClear
style={{ width: 200 }}
placeholder="请输入学员邮箱"
/>
</Form.Item>
<Form.Item
label="密码"
name="password"
rules={[{ required: true, message: "请输入登录密码!" }]}
>
<Input.Password
autoComplete="new-password"
allowClear
style={{ width: 200 }}
placeholder="请输入登录密码"
/>
</Form.Item>
<Form.Item
label="选择角色"
name="roleIds"
rules={[{ required: true, message: "请选择角色!" }]}
>
<Select
style={{ width: 200 }}
mode="multiple"
allowClear
placeholder="请选择角色"
onChange={handleChange}
options={roles}
/>
</Form.Item>
<Form.Item
label="管理员姓名"
name="name"
rules={[{ required: true, message: "请输入管理员姓名!" }]}
>
<Input
allowClear
style={{ width: 200 }}
placeholder="请输入管理员姓名"
/>
</Form.Item>
<Form.Item
label="邮箱"
name="email"
rules={[{ required: true, message: "请输入学员邮箱!" }]}
>
<Input
allowClear
style={{ width: 200 }}
placeholder="请输入学员邮箱"
/>
</Form.Item>
<Form.Item
label="密码"
name="password"
rules={[{ required: true, message: "请输入登录密码!" }]}
>
<Input.Password
autoComplete="new-password"
allowClear
style={{ width: 200 }}
placeholder="请输入登录密码"
/>
</Form.Item>
<Form.Item
label="禁止登录"
name="is_ban_login"
valuePropName="checked"
>
<Switch onChange={onChange} />
</Form.Item>
</Form>
</div>
</Modal>
<Form.Item
label="禁止登录"
name="is_ban_login"
valuePropName="checked"
>
<Switch onChange={onChange} />
</Form.Item>
</Form>
</div>
</Modal>
) : null}
</>
);
};

150
src/pages/system/administrator/compenents/update.tsx
View File

@ -93,81 +93,83 @@ export const SystemAdministratorUpdate: React.FC<PropInterface> = ({
return (
<>
<Modal
title="编辑管理人员"
centered
forceRender
open={open}
width={416}
onOk={() => form.submit()}
onCancel={() => onCancel()}
maskClosable={false}
>
<div className="float-left mt-24">
<Form
form={form}
name="basic"
labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }}
initialValues={{ remember: true }}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
autoComplete="off"
>
<Form.Item
label="选择角色"
name="roleIds"
rules={[{ required: true, message: "请选择角色!" }]}
{open ? (
<Modal
title="编辑管理人员"
centered
forceRender
open={true}
width={416}
onOk={() => form.submit()}
onCancel={() => onCancel()}
maskClosable={false}
>
<div className="float-left mt-24">
<Form
form={form}
name="basic"
labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }}
initialValues={{ remember: true }}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
autoComplete="off"
>
<Select
style={{ width: 200 }}
mode="multiple"
allowClear
placeholder="请选择角色"
onChange={handleChange}
options={roles}
/>
</Form.Item>
<Form.Item
label="管理员姓名"
name="name"
rules={[{ required: true, message: "请输入管理员姓名!" }]}
>
<Input
allowClear
style={{ width: 200 }}
placeholder="请输入管理员姓名"
/>
</Form.Item>
<Form.Item
label="邮箱"
name="email"
rules={[{ required: true, message: "请输入学员邮箱!" }]}
>
<Input
allowClear
style={{ width: 200 }}
placeholder="请输入学员邮箱"
/>
</Form.Item>
<Form.Item label="密码" name="password">
<Input.Password
autoComplete="new-password"
style={{ width: 200 }}
allowClear
placeholder="请输入登录密码"
/>
</Form.Item>
<Form.Item
label="禁止登录"
name="is_ban_login"
valuePropName="checked"
>
<Switch onChange={onChange} />
</Form.Item>
</Form>
</div>
</Modal>
<Form.Item
label="选择角色"
name="roleIds"
rules={[{ required: true, message: "请选择角色!" }]}
>
<Select
style={{ width: 200 }}
mode="multiple"
allowClear
placeholder="请选择角色"
onChange={handleChange}
options={roles}
/>
</Form.Item>
<Form.Item
label="管理员姓名"
name="name"
rules={[{ required: true, message: "请输入管理员姓名!" }]}
>
<Input
allowClear
style={{ width: 200 }}
placeholder="请输入管理员姓名"
/>
</Form.Item>
<Form.Item
label="邮箱"
name="email"
rules={[{ required: true, message: "请输入学员邮箱!" }]}
>
<Input
allowClear
style={{ width: 200 }}
placeholder="请输入学员邮箱"
/>
</Form.Item>
<Form.Item label="密码" name="password">
<Input.Password
autoComplete="new-password"
style={{ width: 200 }}
allowClear
placeholder="请输入登录密码"
/>
</Form.Item>
<Form.Item
label="禁止登录"
name="is_ban_login"
valuePropName="checked"
>
<Switch onChange={onChange} />
</Form.Item>
</Form>
</div>
</Modal>
) : null}
</>
);
};

56
src/pages/system/adminlog/compenents/detail-dialog.tsx
View File

@ -25,33 +25,35 @@ export const AdminLogDetailDialog: React.FC<PropInterface> = ({
return (
<>
<Modal
title="日志详情"
centered
forceRender
open={open}
width={416}
onOk={() => onCancel()}
onCancel={() => onCancel()}
footer={null}
maskClosable={false}
>
<div className="mt-24">
<Form
form={form}
name="adminlog-detail"
labelCol={{ span: 5 }}
wrapperCol={{ span: 19 }}
initialValues={{ remember: true }}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
autoComplete="off"
>
<Form.Item label="Param">{param}</Form.Item>
<Form.Item label="Result">{result}</Form.Item>
</Form>
</div>
</Modal>
{open ? (
<Modal
title="日志详情"
centered
forceRender
open={true}
width={416}
onOk={() => onCancel()}
onCancel={() => onCancel()}
footer={null}
maskClosable={false}
>
<div className="mt-24">
<Form
form={form}
name="adminlog-detail"
labelCol={{ span: 5 }}
wrapperCol={{ span: 19 }}
initialValues={{ remember: true }}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
autoComplete="off"
>
<Form.Item label="Param">{param}</Form.Item>
<Form.Item label="Result">{result}</Form.Item>
</Form>
</div>
</Modal>
) : null}
</>
);
};

124
src/pages/system/adminroles/compenents/create.tsx
View File

@ -151,68 +151,70 @@ export const SystemAdminrolesCreate: React.FC<PropInterface> = ({
return (
<>
<Drawer
title="新建角色"
onClose={onCancel}
maskClosable={false}
open={open}
footer={
<Space className="j-r-flex">
<Button onClick={() => onCancel()}>取 消</Button>
<Button onClick={() => form.submit()} type="primary">
确 认
</Button>
</Space>
}
width={634}
>
<div className="float-left mt-24">
<Form
form={form}
name="adminroles-create"
labelCol={{ span: 5 }}
wrapperCol={{ span: 19 }}
initialValues={{ remember: true }}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
autoComplete="off"
>
<Form.Item
label="角色名称"
name="name"
rules={[{ required: true, message: "请输入角色名称!" }]}
{open ? (
<Drawer
title="新建角色"
onClose={onCancel}
maskClosable={false}
open={true}
footer={
<Space className="j-r-flex">
<Button onClick={() => onCancel()}>取 消</Button>
<Button onClick={() => form.submit()} type="primary">
确 认
</Button>
</Space>
}
width={634}
>
<div className="float-left mt-24">
<Form
form={form}
name="adminroles-create"
labelCol={{ span: 5 }}
wrapperCol={{ span: 19 }}
initialValues={{ remember: true }}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
autoComplete="off"
>
<Input
style={{ width: 424 }}
placeholder="请在此处输入角色名称"
allowClear
/>
</Form.Item>
<Form.Item label="操作权限" name="action_ids">
<TreeSelect
listHeight={600}
style={{ width: 424 }}
treeCheckable={true}
placeholder="请选择权限"
multiple
allowClear
treeData={actions}
/>
</Form.Item>
<Form.Item label="数据权限" name="permission_ids">
<TreeSelect
listHeight={600}
style={{ width: 424 }}
treeCheckable={true}
placeholder="请选择权限"
multiple
allowClear
treeData={permissions}
/>
</Form.Item>
</Form>
</div>
</Drawer>
<Form.Item
label="角色名称"
name="name"
rules={[{ required: true, message: "请输入角色名称!" }]}
>
<Input
style={{ width: 424 }}
placeholder="请在此处输入角色名称"
allowClear
/>
</Form.Item>
<Form.Item label="操作权限" name="action_ids">
<TreeSelect
listHeight={600}
style={{ width: 424 }}
treeCheckable={true}
placeholder="请选择权限"
multiple
allowClear
treeData={actions}
/>
</Form.Item>
<Form.Item label="数据权限" name="permission_ids">
<TreeSelect
listHeight={600}
style={{ width: 424 }}
treeCheckable={true}
placeholder="请选择权限"
multiple
allowClear
treeData={permissions}
/>
</Form.Item>
</Form>
</div>
</Drawer>
) : null}
</>
);
};

124
src/pages/system/adminroles/compenents/update.tsx
View File

@ -165,68 +165,70 @@ export const SystemAdminrolesUpdate: React.FC<PropInterface> = ({
return (
<>
<Drawer
title="编辑角色权限"
onClose={onCancel}
maskClosable={false}
open={open}
footer={
<Space className="j-r-flex">
<Button onClick={() => onCancel()}>取 消</Button>
<Button onClick={() => form.submit()} type="primary">
确 认
</Button>
</Space>
}
width={634}
>
<div className="float-left mt-24">
<Form
form={form}
name="adminroles-update"
labelCol={{ span: 5 }}
wrapperCol={{ span: 19 }}
initialValues={{ remember: true }}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
autoComplete="off"
>
<Form.Item
label="角色名"
name="name"
rules={[{ required: true, message: "请输入角色名!" }]}
{open ? (
<Drawer
title="编辑角色权限"
onClose={onCancel}
maskClosable={false}
open={true}
footer={
<Space className="j-r-flex">
<Button onClick={() => onCancel()}>取 消</Button>
<Button onClick={() => form.submit()} type="primary">
确 认
</Button>
</Space>
}
width={634}
>
<div className="float-left mt-24">
<Form
form={form}
name="adminroles-update"
labelCol={{ span: 5 }}
wrapperCol={{ span: 19 }}
initialValues={{ remember: true }}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
autoComplete="off"
>
<Input
style={{ width: 424 }}
allowClear
placeholder="请输入角色名"
/>
</Form.Item>
<Form.Item label="操作权限" name="action_ids">
<TreeSelect
style={{ width: 424 }}
listHeight={600}
treeCheckable={true}
placeholder="请选择权限"
multiple
allowClear
treeData={actions}
/>
</Form.Item>
<Form.Item label="数据权限" name="permission_ids">
<TreeSelect
style={{ width: 424 }}
listHeight={600}
treeCheckable={true}
placeholder="请选择权限"
multiple
allowClear
treeData={permissions}
/>
</Form.Item>
</Form>
</div>
</Drawer>
<Form.Item
label="角色名"
name="name"
rules={[{ required: true, message: "请输入角色名!" }]}
>
<Input
style={{ width: 424 }}
allowClear
placeholder="请输入角色名"
/>
</Form.Item>
<Form.Item label="操作权限" name="action_ids">
<TreeSelect
style={{ width: 424 }}
listHeight={600}
treeCheckable={true}
placeholder="请选择权限"
multiple
allowClear
treeData={actions}
/>
</Form.Item>
<Form.Item label="数据权限" name="permission_ids">
<TreeSelect
style={{ width: 424 }}
listHeight={600}
treeCheckable={true}
placeholder="请选择权限"
multiple
allowClear
treeData={permissions}
/>
</Form.Item>
</Form>
</div>
</Drawer>
) : null}
</>
);
};