-
-
Notifications
You must be signed in to change notification settings - Fork 317
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Showing
14 changed files
with
330 additions
and
115 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,105 @@ | ||
import { Input, Modal, Form, Radio } from 'antd'; | ||
import { useImperativeHandle, useState, forwardRef, useMemo } from 'react'; | ||
import { addProject } from '@/api'; | ||
import { usePageStore } from '@/stores/pageStore'; | ||
import UploadImages from './UploadImages/UploadImages'; | ||
import { message } from '@/utils/AntdGlobal'; | ||
|
||
/** | ||
* 创建项目 | ||
*/ | ||
const CreateProject = (props: { update: () => void }, ref: any) => { | ||
const [form] = Form.useForm(); | ||
const [visible, setVisible] = useState(false); | ||
const [loading, setLoading] = useState(false); | ||
const userId = usePageStore((store) => store.userInfo.userId); | ||
|
||
// 暴露方法 | ||
useImperativeHandle(ref, () => ({ | ||
open() { | ||
setVisible(true); | ||
}, | ||
})); | ||
|
||
// 提交 | ||
const handleOk = async () => { | ||
try { | ||
await form.validateFields(); | ||
const values = form.getFieldsValue(); | ||
setLoading(true); | ||
await addProject({ ...initValue, ...values }); | ||
message.success('创建成功'); | ||
props.update(); | ||
setLoading(false); | ||
setVisible(false); | ||
} catch (error) { | ||
setLoading(false); | ||
} | ||
}; | ||
|
||
// 关闭 | ||
const handleCancel = () => { | ||
form.resetFields(); | ||
setVisible(false); | ||
}; | ||
|
||
const initValue = useMemo(() => { | ||
return { | ||
layout: 1, | ||
menu_mode: 'inline', | ||
menu_theme_color: 'dark', | ||
system_theme_color: '#1677ff', | ||
breadcrumb: true, | ||
tag: true, | ||
footer: false, | ||
logo: 'https://marsview.cdn.bcebos.com/mars-logo.png', | ||
is_public: 1, | ||
is_edit: 2, | ||
}; | ||
}, []); | ||
return ( | ||
<Modal | ||
title="创建项目" | ||
open={visible} | ||
confirmLoading={loading} | ||
onOk={handleOk} | ||
onCancel={handleCancel} | ||
width={600} | ||
okText="确定" | ||
cancelText="取消" | ||
> | ||
<Form form={form} labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} initialValues={initValue}> | ||
<Form.Item label="名称" name="name" rules={[{ required: true, message: '请输入页面名称' }]}> | ||
<Input placeholder="请输入项目名称" maxLength={15} showCount /> | ||
</Form.Item> | ||
<Form.Item label="描述" name="remark"> | ||
<Input placeholder="请输入项目描述" maxLength={20} showCount /> | ||
</Form.Item> | ||
<Form.Item label="LOGO" name="logo" rules={[{ required: true, message: '请上传项目Logo' }]}> | ||
<UploadImages /> | ||
</Form.Item> | ||
<Form.Item | ||
label="权限" | ||
name="is_public" | ||
rules={[{ required: true, message: '请选择访问类型' }]} | ||
extra="公开页面支持所有人访问。私有页面仅自己可访问。" | ||
> | ||
<Radio.Group> | ||
<Radio value={1}>公开</Radio> | ||
<Radio value={2}>私有</Radio> | ||
{/* 普通用户暂不开放模板设置 */} | ||
{userId == 50 ? <Radio value={3}>公开模板</Radio> : null} | ||
</Radio.Group> | ||
</Form.Item> | ||
<Form.Item label="模式" name="is_edit" rules={[{ required: true, message: '请选择编辑模式' }]} extra="公开后设置他人可查看或编辑;"> | ||
<Radio.Group> | ||
<Radio value={1}>编辑</Radio> | ||
<Radio value={2}>查看</Radio> | ||
</Radio.Group> | ||
</Form.Item> | ||
</Form> | ||
</Modal> | ||
); | ||
}; | ||
|
||
export default forwardRef(CreateProject); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,82 @@ | ||
import React, { useState, useMemo } from 'react'; | ||
import { Segmented, Select } from 'antd'; | ||
import * as icons from '@ant-design/icons'; | ||
import { styled } from 'styled-components'; | ||
|
||
const BoxWrapper = styled.div` | ||
display: flex; | ||
flex-wrap: wrap; | ||
width: 100%; | ||
height: 300px; | ||
overflow: auto; | ||
`; | ||
|
||
const IconItem = styled.div` | ||
width: 50px; | ||
height: 50px; | ||
padding: 10px; | ||
cursor: pointer; | ||
`; | ||
/** | ||
* 菜单中,自定义图标选择列表 | ||
*/ | ||
export default function CustomIconOptions({ value, onChange }: any) { | ||
const [open, setOpen] = useState(false); | ||
const [type, setType] = useState('线框风格'); | ||
|
||
const allList = useMemo(() => { | ||
// 获取所有的antd图标,动态渲染到下拉框中 | ||
const iconsList: { [key: string]: any } = icons; | ||
|
||
return Object.keys(icons) | ||
.filter((item) => !['default', 'createFromIconfontCN', 'getTwoToneColor', 'setTwoToneColor', 'IconProvider'].includes(item)) | ||
.map((key) => ({ value: key, label: React.createElement(iconsList[key], { style: { fontSize: '24px', verticalAlign: 'middle' } }) })); | ||
}, []); | ||
|
||
// 过滤出不同风格的图标 | ||
const outlined = useMemo(() => allList.filter((item) => item.value.includes('Outlined')), []); | ||
const filled = useMemo(() => allList.filter((item) => item.value.includes('Filled')), []); | ||
const twoTone = useMemo(() => allList.filter((item) => item.value.includes('TwoTone')), []); | ||
|
||
const options = useMemo(() => { | ||
switch (type) { | ||
case '线框风格': | ||
return outlined; | ||
case '实底风格': | ||
return filled; | ||
default: | ||
return twoTone; | ||
} | ||
}, [type]); | ||
return ( | ||
<Select | ||
placeholder="请选择图标" | ||
allowClear | ||
value={value} | ||
open={open} | ||
options={options} | ||
onDropdownVisibleChange={(visible) => setOpen(visible)} | ||
onClear={() => onChange('')} | ||
dropdownRender={() => ( | ||
<div> | ||
<Segmented options={['线框风格', '实底风格', '双色风格']} block value={type} onChange={setType}></Segmented> | ||
<BoxWrapper> | ||
{options.map((item) => { | ||
return ( | ||
<IconItem | ||
key={item.value} | ||
onClick={() => { | ||
onChange(item.value); | ||
setOpen(false); | ||
}} | ||
> | ||
{item.label} | ||
</IconItem> | ||
); | ||
})} | ||
</BoxWrapper> | ||
</div> | ||
)} | ||
/> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters