forked from Gitlink/forgeplus-react
save
This commit is contained in:
parent
34ba9c0c57
commit
99914c46a6
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,52 @@
|
|||
import React , { useState } from 'react';
|
||||
import { Form , Modal , Input, Button } from 'antd';
|
||||
import ColorCard from './colorCard';
|
||||
|
||||
function AddTagsBox({visible,onCancel,onSuccess , form}){
|
||||
const { getFieldDecorator , getFieldsValue } = form;
|
||||
const [ colors , setColors ] = useState(undefined);
|
||||
|
||||
function saveFunc(){
|
||||
|
||||
}
|
||||
|
||||
function getColor(colors){
|
||||
setColors(colors);
|
||||
console.log(colors);
|
||||
}
|
||||
|
||||
return(
|
||||
<Modal
|
||||
visible={visible}
|
||||
width="475px"
|
||||
title={"创建新标记"}
|
||||
onCancel={onCancel}
|
||||
footer={null}
|
||||
className="addTagsModal"
|
||||
>
|
||||
<Form className="addTags_form" hideRequiredMark={true}>
|
||||
<Form.Item label="标记名称" colon={false}>
|
||||
{getFieldDecorator('name',{
|
||||
rules:[
|
||||
{
|
||||
required:true,
|
||||
message:"请输入标记名称"
|
||||
}
|
||||
],
|
||||
validateTrigger:"onInput",
|
||||
})(<Input placeholder="名称15字以内"/>)}
|
||||
</Form.Item>
|
||||
<Form.Item label="标记描述" colon={false}>
|
||||
{getFieldDecorator('desc',{rules:[],
|
||||
validateTrigger:"onInput",
|
||||
})(<Input placeholder="描述30字以内"/>)}
|
||||
</Form.Item>
|
||||
<Form.Item label={"标记色值"}>
|
||||
<ColorCard getColor={getColor}/>
|
||||
</Form.Item>
|
||||
<Button onClick={saveFunc} type="primary" style={{width:'100%',marginTop:45}} className="mb25">保存</Button>
|
||||
</Form>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
export default Form.create({ name: 'Bind' })(AddTagsBox);
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
import React,{ useState } from 'react';
|
||||
import { SketchPicker } from 'react-color';
|
||||
|
||||
function ColorCard({getColor}){
|
||||
const [ displayColorPicker , setDisplayColorPicker ] = useState(false);
|
||||
const [ color , setColor ] = useState({r: '241',g: '112',b: '19',a: '1',});
|
||||
const [ textcolor , setTextColor ] = useState("#F17013");
|
||||
|
||||
// 切换色卡
|
||||
function handleChange(color){
|
||||
setColor(color.rgb);
|
||||
setTextColor(color.hex);
|
||||
getColor(color);
|
||||
}
|
||||
|
||||
// 隐藏色卡
|
||||
function handleClick(){
|
||||
setDisplayColorPicker(!displayColorPicker);
|
||||
reduction();
|
||||
}
|
||||
|
||||
// 还原色卡
|
||||
function reduction(){
|
||||
setTextColor("#F17013");
|
||||
setColor({r: '241',g: '112',b: '19',a: '1',});
|
||||
}
|
||||
return(
|
||||
<div>
|
||||
<div className="swatch" onClick={handleClick}>
|
||||
<div className="color" style={{backgroundColor:`rgba(${color.r}, ${color.g}, ${color.b}, ${color.a})`}}></div>
|
||||
<p style={{ paddingLeft: 5 }}>{textcolor}</p>
|
||||
</div>
|
||||
{displayColorPicker ? (
|
||||
<div className="popover">
|
||||
<div className="cover" onClick={()=>{setDisplayColorPicker(false)}} />
|
||||
<SketchPicker color={color} onChange={handleChange} />
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default ColorCard;
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
import React from 'react';
|
||||
import { Input } from 'antd';
|
||||
|
||||
|
||||
function Add(){
|
||||
return(
|
||||
<div className="addcomments">
|
||||
<img src={`https://testforgeplus.trustie.net/images/avatars/User/36480?t=1672730523`} alt="" />
|
||||
<div style={{flex:1}}>
|
||||
<Input placeholder="添加评论" style={{width:"100%",height:"36px"}}/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default Add;
|
||||
|
|
@ -1,31 +1,32 @@
|
|||
import React from 'react';
|
||||
import { Checkbox , Tooltip } from 'antd';
|
||||
import { getImageUrl } from 'educoder';
|
||||
import issue from '../Img/issue.png';
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
// issue列表显示
|
||||
function Datas({checkbox}){
|
||||
function Datas({checkbox ,item , projectsId,owner}){
|
||||
return(
|
||||
<div className="listdatas">
|
||||
<div>
|
||||
<div className="issuedetail">
|
||||
{checkbox}
|
||||
<div className="ilog">
|
||||
<span className="status normal">正常</span>
|
||||
<span className="number">#1</span>
|
||||
<span className="status normal">{item.priority_name}</span>
|
||||
{item.project_issues_index && <span className="number"><Tooltip title="点击复制链接" placement="bottom">#{item.project_issues_index}</Tooltip></span>}
|
||||
</div>
|
||||
<div style={{marginTop:"-2px"}}>
|
||||
<div className="idetails">
|
||||
<div className="idetails mt2">
|
||||
<img src={issue} alt="" width="16px" className="mr5" />
|
||||
<p>如何参与到项目的开发，提升技术能力？</p>
|
||||
<Tooltip title="点击复制链接" placement="bottom"><span style={{color: "#ee955a"}}><i className="iconfont icon-biaoji mr3 font-12"></i>invalid</span></Tooltip>
|
||||
<Link to={`/${owner}/${projectsId}/issues/${item.project_issues_index}`}>{item.subject}</Link>
|
||||
<span style={{color: "#ee955a"}} className="ml5"><i className="iconfont icon-biaoji mr3 font-12"></i>invalid</span>
|
||||
</div>
|
||||
<div className="infos">
|
||||
<img src={"https://testforgeplus.trustie.net/images/avatars/User/36480?t=1672730523"} alt="" />
|
||||
<span className="mr20">张嘉佳</span>
|
||||
<span className="mr25">2022/11/25 15:25 发布</span>
|
||||
<span className="mr50">2022/11/29 15:25更新</span>
|
||||
<span><i className="iconfont icon-lichengbeiicon1 font-12 mr2"></i>里程碑名称标题</span>
|
||||
<img src={`${getImageUrl(item.author && item.author.image_url)}`} alt="" />
|
||||
<span className="mr20">{item.author && item.author.name}</span>
|
||||
<span className="mr25">{item.created_at} 发布</span>
|
||||
<span className="mr50">{item.updated_at}更新</span>
|
||||
{item.milestone_name && <span><i className="iconfont icon-lichengbeiicon1 font-12 mr2"></i>{item.milestone_name}</span> }
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -38,11 +39,11 @@ function Datas({checkbox}){
|
|||
<img style={{right:`${20-7}px`,zIndex:5}} src={"https://testforgeplus.trustie.net/images/avatars/User/36480?t=1672730523"} alt="" />
|
||||
<span>...</span>
|
||||
</div>
|
||||
<div>正在解决</div>
|
||||
<div className="commentnum"><i className="iconfont icon-a-xiaoxi1 mr5 font-15"></i>10</div>
|
||||
<div>{item.status_name}</div>
|
||||
<div className="commentnum"><i className="iconfont icon-a-xiaoxi1 mr5 font-15"></i>{item.comment_journals_count}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
{/* <div>
|
||||
<div className="issuedetail">
|
||||
<Checkbox style={{marginRight: "16px"}} value={1}></Checkbox>
|
||||
<div className="ilog">
|
||||
|
|
@ -139,7 +140,7 @@ function Datas({checkbox}){
|
|||
<div>反馈</div>
|
||||
<div className="commentnum"><i className="iconfont icon-a-xiaoxi1 mr5 font-15"></i>10</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import { findDOMNode } from 'react-dom';
|
|||
|
||||
const { Search } = Input;
|
||||
|
||||
function EditMenus({name,list,value}){
|
||||
function EditMenus({name,list,value , onAdd , searchFlag}){
|
||||
const [ menus , setMenus ] = useState([]);
|
||||
const [ searchValue , setSearchValue ]= useState(undefined);
|
||||
const [ showValue , setShowValue ] = useState(undefined);
|
||||
|
|
@ -52,22 +52,27 @@ function EditMenus({name,list,value}){
|
|||
<Dropdown visible={visible} overlayClassName={"overlayStyle"} placement="bottomLeft" trigger={['click']}
|
||||
overlay={
|
||||
<div className="branch-tagBox" ref={refFa}>
|
||||
{menus && menus.length>0 ?
|
||||
<div>
|
||||
<div className="searchbox">
|
||||
<Search placeholder={`搜索${name}`} value={searchValue} onChange={changeSearchvalue} style={{marginRight:"18px"}}/>
|
||||
</div>
|
||||
<Menu>
|
||||
{
|
||||
menus.map((i,k)=>{
|
||||
return(
|
||||
<Menu.Item key={i.id} onClick={chooseMenu}>{i.name}</Menu.Item>
|
||||
)
|
||||
})
|
||||
}
|
||||
</Menu>
|
||||
{ searchFlag &&
|
||||
<div className="searchbox">
|
||||
<Search placeholder={`搜索${name}`} value={searchValue} onChange={changeSearchvalue} style={{marginRight:"18px"}}/>
|
||||
</div>
|
||||
}
|
||||
{
|
||||
menus && menus.length >0?
|
||||
<Menu>
|
||||
{
|
||||
menus.map((i,k)=>{
|
||||
return(
|
||||
<Menu.Item key={i.id} onClick={chooseMenu}>{i.name}</Menu.Item>
|
||||
)
|
||||
})
|
||||
}
|
||||
</Menu>
|
||||
:
|
||||
<div className="menusEmpty">
|
||||
<p>{searchValue ? <span>创建新{showValue}“{searchValue}”</span>: `暂无${name}`}</p>
|
||||
{ name === "标记" && <a className="color-blue font-15" onClick={()=>{setVisible(false);onAdd()}}><i className="iconfont icon-a-bianji12 font-14 mr5"></i>标记管理</a>}
|
||||
</div>
|
||||
:<div>{searchValue ? <span>创建新{showValue}“{searchValue}”</span>: `暂无${showValue}`}</div>
|
||||
}
|
||||
</div>
|
||||
}>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,48 @@
|
|||
import React from 'react';
|
||||
import { Tooltip } from 'antd';
|
||||
import { Box , LongWidth } from '../../Component/layout';
|
||||
import EditMenus from '../Component/editMenus';
|
||||
import Add from '../Component/comments/add';
|
||||
|
||||
function Details(props){
|
||||
const owner = props.match.params.owner;
|
||||
const projectsId = props.match.params.projectsId;
|
||||
const index = props.match.params.index;
|
||||
return(
|
||||
<Box>
|
||||
<LongWidth>
|
||||
<div className="detailbanner">
|
||||
<div className="detailtitle">
|
||||
<div className="ilog">
|
||||
<span className="status normal">正常</span>
|
||||
<span className="number"><Tooltip title="点击复制链接" placement="bottom">#1</Tooltip></span>
|
||||
</div>
|
||||
<div>
|
||||
<p className="name">fork仓库向原仓库发起合并请求，查看文件跳转有误？</p>
|
||||
<div>
|
||||
<a className="author"><img src={`https://testforgeplus.trustie.net/images/avatars/User/36480?t=1672730523`} alt="" />张嘉佳</a>
|
||||
<span className="ml10" style={{color:"#898d9d"}}>添加于2022-09-27 13:59</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul className="detailoperate">
|
||||
<li><a className="color-blue"><i className="iconfont icon-a-bianji12 font-12 mr5"></i>编辑</a></li>
|
||||
<li><a className="color-blue ml20"><i className="iconfont icon-a-fuzhi2 font-12 mr5"></i>复制</a></li>
|
||||
<li><a className="color-red ml20"><i className="iconfont icon-fuzhi-shanchu font-12 mr5"></i>删除</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="pt20 pb30">
|
||||
<Add />
|
||||
</div>
|
||||
</LongWidth>
|
||||
<div className="shortwidth mt25">
|
||||
<EditMenus name="负责人" />
|
||||
<EditMenus name="状态" />
|
||||
<EditMenus name="优先级" />
|
||||
<EditMenus name="标记" />
|
||||
<EditMenus name="里程碑" />
|
||||
</div>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
export default Details;
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import React , { useRef , useState , useEffect } from 'react';
|
||||
import { Dropdown , Menu , Icon , Input , Checkbox , Pagination, Button } from 'antd';
|
||||
import { Dropdown , Menu , Icon , Input , Checkbox , Pagination, Button , Tooltip ,Spin } from 'antd';
|
||||
import bj from '../Img/biaoji.png';
|
||||
import issueEmp from '../Img/issue-big.png';
|
||||
import create from '../Img/create.png';
|
||||
|
|
@ -14,54 +14,80 @@ const { Search } = Input;
|
|||
function List(props){
|
||||
const [ visible , setVisible ] = useState(false);
|
||||
const [ issueList , setIssueList ] = useState(undefined);
|
||||
const [ closedCount , setClosedCount ] = useState(0);
|
||||
const [ openedCount , setOpenedCount ] = useState(0);
|
||||
|
||||
const[ aboutMe , setAboutMe ] = useState("aboutme");
|
||||
const[ value , setValue ] = useState("");
|
||||
const[ keyword , setKeyword ] = useState(undefined);
|
||||
|
||||
const [ category , setCategory] = useState("all");
|
||||
|
||||
const [ allValue , setAllValue ] = useState([]);
|
||||
const [ allIds , setAllIds ] = useState([0,1,2,3]);
|
||||
const [ allIds , setAllIds ] = useState([]);
|
||||
const [ checkAll , setCheckAll ] = useState(false);
|
||||
|
||||
const [ page , setPage ] = useState(1);
|
||||
const [ total , setTotal ] = useState(undefined);
|
||||
const menuRef = useRef(null);
|
||||
const owner = props.match.params.owner;
|
||||
const projectsId = props.match.params.projectsId;
|
||||
|
||||
|
||||
useEffect(()=>{
|
||||
// Init();
|
||||
},[])
|
||||
|
||||
Init();
|
||||
},[aboutMe,keyword,category])
|
||||
// 获取issue列表数据
|
||||
function Init(){
|
||||
const url = `http://172.20.10.4:3000/api/v1/${owner}/${projectsId}/issues`;
|
||||
axios.get(url).then(result=>{
|
||||
setTotal(undefined);
|
||||
const url = `/v1/${owner}/${projectsId}/issues`;
|
||||
axios.get(url,{
|
||||
params:{
|
||||
participant_category:aboutMe,
|
||||
keyword,category
|
||||
}
|
||||
}).then(result=>{
|
||||
if(result){
|
||||
|
||||
setIssueList(result.data.issues);
|
||||
setTotal(result.data.total_count);
|
||||
setClosedCount(result.data.closed_count);
|
||||
setOpenedCount(result.data.opened_count);
|
||||
const ids = result.data.issues.length>0 ? result.data.issues.map(i=>{return i.id}) : [];
|
||||
setAllIds(ids);
|
||||
}
|
||||
}).then(error=>{console.log("error:",error)})
|
||||
}
|
||||
|
||||
// 第一个下拉搜索
|
||||
const menu = (
|
||||
<Menu>
|
||||
<Menu.Item key={0}>全部</Menu.Item>
|
||||
<Menu.Item key={1}>与我相关</Menu.Item>
|
||||
<Menu.Item key={2}>我负责的</Menu.Item>
|
||||
<Menu.Item key={3}>我创建的</Menu.Item>
|
||||
<Menu.Item key={4}>@我的</Menu.Item>
|
||||
<Menu selectedKeys={[`${aboutMe}`]} onClick={chooseAboutMe}>
|
||||
<Menu.Item key={"all"}>全部</Menu.Item>
|
||||
<Menu.Item key={"aboutme"}><Tooltip title="指我创建的、我负责的和@我的疑修">与我相关</Tooltip></Menu.Item>
|
||||
<Menu.Item key={"assignedme"}>我负责的</Menu.Item>
|
||||
<Menu.Item key={"authoredme"}>我创建的</Menu.Item>
|
||||
<Menu.Item key={"atme"}>@我的</Menu.Item>
|
||||
</Menu>
|
||||
)
|
||||
function chooseAboutMe(e){
|
||||
setCategory("all");
|
||||
setAboutMe(e.key);
|
||||
}
|
||||
|
||||
//清除筛选条件
|
||||
function clearCondition(){
|
||||
setKeyword(undefined);
|
||||
setAboutMe("aboutme");
|
||||
// 清除下拉选项
|
||||
menuRef.current && menuRef.current.clearChoose();
|
||||
// 清除后重新获取列表数据
|
||||
}
|
||||
|
||||
// 全选所有issue
|
||||
function chooseAll(e){
|
||||
setCheckAll(e.target.checked);
|
||||
if(e.target.checked){
|
||||
setAllValue([0,1,2,3]);
|
||||
setAllValue(allIds);
|
||||
}else{
|
||||
setAllValue([]);
|
||||
clearCondition();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -97,11 +123,16 @@ function List(props){
|
|||
<div className="pageheader">
|
||||
<div>
|
||||
<Dropdown overlay={menu} trigger={['click']} placement="bottomLeft" arrow={{pointAtCenter: true}}>
|
||||
<span className="dorpdownButton">与我相关<Icon type="caret-down" className="ml5 color-grey-6" /></span>
|
||||
<span className="dorpdownButton">
|
||||
<span>{aboutMe === "all" ? "全部":aboutMe === "aboutme"?"与我相关":aboutMe === "assignedme"?"我负责的":aboutMe === "authoredme"?"我创建的":"@我的"}</span>
|
||||
<Icon type="caret-down" className="ml5 color-grey-6" />
|
||||
</span>
|
||||
</Dropdown>
|
||||
<Search
|
||||
placeholder="输入关键字搜索疑修"
|
||||
onSearch={value => console.log(value)}
|
||||
value={value}
|
||||
onChange={e=>setValue(e.target.value)}
|
||||
onSearch={()=>setKeyword(value)}
|
||||
style={{ width: 354 , height : 32 , marginLeft: 20 }}
|
||||
/>
|
||||
<a className="color-blue ml25" onClick={clearCondition} style={{ display: "flex" , alignItems: "center"}}><i className="iconfont icon-roundclose font-16 mr5"></i>清除筛选条件</a>
|
||||
|
|
@ -111,11 +142,6 @@ function List(props){
|
|||
<Link to={`/${owner}/${projectsId}/issues/new`} className="operateButton ml20"><img src={create} alt="" className="mr5" />创建疑修</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="listempty">
|
||||
<img src={issueEmp} alt="" width="68px" />
|
||||
<p className="font-22 mt5 mb10">欢迎使用疑修(Issue)</p>
|
||||
<p className="font-15">疑修用于记录与跟踪待办事项、项目bug、功能需求等。在使用之前，请您先<a className="color-blue">创建一个疑修</a></p>
|
||||
</div>
|
||||
<div className="lists">
|
||||
<div className="listheader">
|
||||
<div style={{display:"flex"}}>
|
||||
|
|
@ -125,9 +151,9 @@ function List(props){
|
|||
<span>选择{allValue.length}个issue</span>
|
||||
:
|
||||
<ul className="statusul">
|
||||
<li className="active">全部<span>111</span></li>
|
||||
<li>开启中<span>111</span></li>
|
||||
<li>已关闭<span>111</span></li>
|
||||
<li className={category === "all" ?"active":""} onClick={()=>setCategory("all")}>全部<span>{total}</span></li>
|
||||
<li className={category === "opened" ?"active":""} onClick={()=>setCategory("opened")}>开启中<span>{openedCount}</span></li>
|
||||
<li className={category === "closed" ?"active":""} onClick={()=>setCategory("closed")}>已关闭<span>{closedCount}</span></li>
|
||||
</ul>
|
||||
}
|
||||
</div>
|
||||
|
|
@ -144,14 +170,41 @@ function List(props){
|
|||
}
|
||||
</div>
|
||||
</div>
|
||||
<Checkbox.Group name="issues" onChange={checkIssues} value={allValue} style={{ width: "100%" }}>
|
||||
<Datas
|
||||
checkbox={ <Checkbox value={0} key={0} style={{marginRight: "16px"}}></Checkbox> }
|
||||
/>
|
||||
</Checkbox.Group>
|
||||
<div className="pt25 pb30" style={{textAlign:"right"}}>
|
||||
<Pagination total={50} current={page} onChange={changepage} showSizeChanger showQuickJumper />
|
||||
</div>
|
||||
{
|
||||
total === 0 &&
|
||||
<div className="listempty">
|
||||
<img src={issueEmp} alt="" width="68px" />
|
||||
<p className="font-22 mt5 mb10">欢迎使用疑修(Issue)</p>
|
||||
<p className="font-15">疑修用于记录与跟踪待办事项、项目bug、功能需求等。在使用之前，请您先<a className="color-blue">创建一个疑修</a></p>
|
||||
</div>
|
||||
}
|
||||
{
|
||||
total > 0 &&
|
||||
<React.Fragment>
|
||||
<Checkbox.Group name="issues" onChange={checkIssues} value={allValue} style={{ width: "100%" }}>
|
||||
{
|
||||
issueList.map((item,key)=>{
|
||||
return(
|
||||
<Datas
|
||||
checkbox={ <Checkbox value={0} key={0} style={{marginRight: "16px"}}></Checkbox> }
|
||||
item={item}
|
||||
owner={owner}
|
||||
projectsId={projectsId}
|
||||
/>
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
</Checkbox.Group>
|
||||
{
|
||||
total > 10 &&
|
||||
<div className="pt25 pb30" style={{textAlign:"right"}}>
|
||||
<Pagination total={total} current={page} onChange={changepage} showSizeChanger showQuickJumper />
|
||||
</div>
|
||||
}
|
||||
</React.Fragment>
|
||||
}
|
||||
{total === undefined && <div style={{height:344,display:"flex",alignItems:"center",justifyContent:"center"}}><Spin /></div> }
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import Upload from "../../Upload/Index";
|
|||
import Attachments from "../../Upload/attachment";
|
||||
import UploadImg from '../Img/UploadImg.png';
|
||||
import EditMenus from '../Component/editMenus';
|
||||
import AddTagsBox from '../Component/addTagsBox';
|
||||
|
||||
const menus = {
|
||||
milestones:[{id:1,name:"里程碑1"},{id:2,name:"里程碑22"}],
|
||||
|
|
@ -13,6 +14,7 @@ const menus = {
|
|||
}
|
||||
function New(props){
|
||||
const [ content , setContent ] = useState("");
|
||||
const [ visible , setVisible ] = useState(false);
|
||||
const [ fileList , setFileList] = useState(undefined);
|
||||
const [ attachments , setAttachments ] = useState([]);
|
||||
function onContentChange(value){
|
||||
|
|
@ -21,8 +23,18 @@ function New(props){
|
|||
function UploadFunc(fileList){
|
||||
setFileList(fileList);
|
||||
};
|
||||
|
||||
// 标记管理弹框
|
||||
function onSuccess(){
|
||||
|
||||
// 添加标记成功后需更新标记的数据数组
|
||||
|
||||
}
|
||||
|
||||
|
||||
return(
|
||||
<div>
|
||||
<AddTagsBox visible={visible} onCancel={()=>setVisible(false)} onSuccess={onSuccess} />
|
||||
<p className="font-20 color-grey-3 mt20 mb15">新建疑修</p>
|
||||
<Box>
|
||||
<LongWidth>
|
||||
|
|
@ -65,11 +77,11 @@ function New(props){
|
|||
</div>
|
||||
</LongWidth>
|
||||
<div className="shortwidth">
|
||||
<EditMenus name="负责人" list={menus.issue_tags}/>
|
||||
<EditMenus name="状态" list={menus.issue_tags}/>
|
||||
<EditMenus name="优先级" list={menus.issue_tags}/>
|
||||
<EditMenus name="标记" list={menus.issue_tags}/>
|
||||
<EditMenus name="里程碑" list={menus.milestones}/>
|
||||
<EditMenus name="负责人" list={menus.issue_tags} searchFlag/>
|
||||
<EditMenus name="状态" list={menus.issue_tags} searchFlag/>
|
||||
<EditMenus name="优先级" list={[]}/>
|
||||
<EditMenus name="标记" list={[]} onAdd={()=>setVisible(true)} searchFlag/>
|
||||
<EditMenus name="里程碑" list={menus.milestones} searchFlag/>
|
||||
</div>
|
||||
</Box>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,11 @@
|
|||
import React , { useEffect , useState } from 'react';
|
||||
import create from '../Img/create.png';
|
||||
import { Menu , Dropdown , Icon, Input, Button } from 'antd';
|
||||
import { SketchPicker } from 'react-color'
|
||||
import ColorCard from '../Component/colorCard';
|
||||
|
||||
function Sign(){
|
||||
const [ edit , setEdit ] = useState(false);
|
||||
const [ color , setColor ] = useState({r: '241',g: '112',b: '19',a: '1',});
|
||||
const [ displayColorPicker , setDisplayColorPicker ] = useState(false);
|
||||
const [ textcolor , setTextColor ] = useState("#F17013");
|
||||
const [ colors , setColors ] = useState(undefined);
|
||||
|
||||
function arrayList(){
|
||||
|
||||
|
|
@ -30,22 +28,9 @@ function Sign(){
|
|||
</Menu>
|
||||
);
|
||||
|
||||
// 切换色卡
|
||||
function handleChange(color){
|
||||
setColor(color.rgb);
|
||||
setTextColor(color.hex);
|
||||
}
|
||||
|
||||
// 隐藏色卡
|
||||
function handleClick(){
|
||||
setDisplayColorPicker(!displayColorPicker);
|
||||
reduction();
|
||||
}
|
||||
|
||||
// 还原色卡
|
||||
function reduction(){
|
||||
setTextColor("#F17013");
|
||||
setColor({r: '241',g: '112',b: '19',a: '1',});
|
||||
function getColor(colors){
|
||||
setColors(colors);
|
||||
console.log(colors);
|
||||
}
|
||||
return(
|
||||
<div>
|
||||
|
|
@ -58,19 +43,7 @@ function Sign(){
|
|||
<div className="editbar">
|
||||
<Input style={{width:"163px"}} placeholder="名称15字以内"/>
|
||||
<Input style={{width:"276px"}} placeholder="描述30字以内"/>
|
||||
<div>
|
||||
<div className="swatch" onClick={handleClick}>
|
||||
<div className="color" style={{backgroundColor:`rgba(${color.r}, ${color.g}, ${color.b}, ${color.a})`}}>
|
||||
<p style={{ paddingLeft: 25 }}>{textcolor}</p>
|
||||
</div>
|
||||
</div>
|
||||
{displayColorPicker ? (
|
||||
<div className="popover">
|
||||
<div className="cover" onClick={()=>{setDisplayColorPicker(false)}} />
|
||||
<SketchPicker color={color} onChange={handleChange} />
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
<ColorCard getColor={getColor}/>
|
||||
<span>
|
||||
<Button type="primary" ghost>确定</Button>
|
||||
<Button ghost className="ml15" onClick={()=>setEdit(false)}>取消</Button>
|
||||
|
|
|
|||
|
|
@ -8,6 +8,10 @@ const List = Loadable({
|
|||
loader: () => import("./Pages/list"),
|
||||
loading: Loading,
|
||||
});
|
||||
const Detail = Loadable({
|
||||
loader: () => import("./Pages/details"),
|
||||
loading: Loading,
|
||||
});
|
||||
const Sign = Loadable({
|
||||
loader: () => import("./Pages/sign"),
|
||||
loading: Loading,
|
||||
|
|
@ -27,6 +31,12 @@ function Index(props){
|
|||
<New {...props}/>
|
||||
)}
|
||||
></Route>
|
||||
<Route
|
||||
path="/:owner/:projectsId/issues/:index"
|
||||
render={() => (
|
||||
<Detail {...props}/>
|
||||
)}
|
||||
></Route>
|
||||
<Route
|
||||
path="/:owner/:projectsId/issues/sign"
|
||||
render={() => (
|
||||
|
|
|
|||
|
|
@ -20,7 +20,15 @@
|
|||
background-color:#fafbfc;
|
||||
border:1px solid #d0d0d0;
|
||||
border-radius: 4px;
|
||||
display: block;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-width: 107px;
|
||||
box-sizing: border-box;
|
||||
&>span{
|
||||
display: block;
|
||||
width: 56px;
|
||||
text-align: center;
|
||||
}
|
||||
&:hover{
|
||||
background-color: #f3f4f6;
|
||||
}
|
||||
|
|
@ -71,6 +79,9 @@
|
|||
background-color:rgba(196, 0, 14, 0.09)!important;
|
||||
}
|
||||
}
|
||||
.lists{
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
// 列表为空样式
|
||||
.listempty{
|
||||
display: flex;
|
||||
|
|
@ -78,7 +89,8 @@
|
|||
align-items: center;
|
||||
background-color:#fafcff;
|
||||
border:1px solid rgba(42, 97, 255, 0.23);
|
||||
border-radius:4px;
|
||||
border-top: none;
|
||||
border-radius:0px 0px 4px 4px;
|
||||
height: 344px;
|
||||
padding-top: 62px;
|
||||
color: #333;
|
||||
|
|
@ -175,45 +187,6 @@
|
|||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
.ilog{
|
||||
width: 45px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-right: 10px;
|
||||
.status{
|
||||
display: block;
|
||||
height:22px;
|
||||
border-radius:6px;
|
||||
text-align: center;
|
||||
margin-right: 10px;
|
||||
line-height: 22px;
|
||||
color: #fff;
|
||||
width: 100%;
|
||||
&.normal{
|
||||
background-color:#28be6c;
|
||||
}
|
||||
&.hight{
|
||||
background-color: #db7c1d;
|
||||
}
|
||||
&.urgent{
|
||||
background-color: #db3d1d;
|
||||
}
|
||||
&.low{
|
||||
background-color: #1abcb1;
|
||||
}
|
||||
}
|
||||
.number{
|
||||
background-color:rgba(213, 220, 246, 0.36);
|
||||
border-radius:4px;
|
||||
height: 19px;
|
||||
line-height: 19px;
|
||||
color: #666666;
|
||||
width: 30px;
|
||||
text-align: center;
|
||||
display: block;
|
||||
margin-top: 14px;
|
||||
}
|
||||
}
|
||||
.idetails{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -270,7 +243,80 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
// 状态样式-公用
|
||||
|
||||
.ilog{
|
||||
width: 45px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-right: 10px;
|
||||
.status{
|
||||
display: block;
|
||||
height:22px;
|
||||
border-radius:6px;
|
||||
text-align: center;
|
||||
margin-right: 10px;
|
||||
line-height: 22px;
|
||||
color: #fff;
|
||||
width: 100%;
|
||||
&.normal{
|
||||
background-color:#28be6c;
|
||||
}
|
||||
&.hight{
|
||||
background-color: #db7c1d;
|
||||
}
|
||||
&.urgent{
|
||||
background-color: #db3d1d;
|
||||
}
|
||||
&.low{
|
||||
background-color: #1abcb1;
|
||||
}
|
||||
}
|
||||
.number{
|
||||
background-color:rgba(213, 220, 246, 0.36);
|
||||
border-radius:4px;
|
||||
height: 19px;
|
||||
line-height: 19px;
|
||||
color: #666666;
|
||||
width: 30px;
|
||||
text-align: center;
|
||||
display: block;
|
||||
margin-top: 14px;
|
||||
}
|
||||
}
|
||||
// colorCard
|
||||
.color{
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.swatch{
|
||||
padding: 5px;
|
||||
background: #fff;
|
||||
border-radius: 1px;
|
||||
width: 92px;
|
||||
height: 28px;
|
||||
line-height: 20px;
|
||||
box-shadow: 0 0 0 1px rgba(0,0,0,.1);
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
}
|
||||
.popover {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
}
|
||||
.cover {
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
.modalcolor {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
// 标记管理页面
|
||||
.editbar{
|
||||
padding:18px 20px;
|
||||
|
|
@ -279,38 +325,6 @@
|
|||
align-items: center;
|
||||
margin-bottom: 30px;
|
||||
justify-content: space-between;
|
||||
.color{
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.swatch{
|
||||
padding: 5px;
|
||||
background: #fff;
|
||||
border-radius: 1px;
|
||||
width: 92px;
|
||||
height: 28px;
|
||||
line-height: 20px;
|
||||
box-shadow: 0 0 0 1px rgba(0,0,0,.1);
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
}
|
||||
.popover {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
}
|
||||
.cover {
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
.modalcolor {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
.signlist{
|
||||
padding:10px 0px;
|
||||
|
|
@ -385,12 +399,58 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
.addTagsModal{
|
||||
.ant-modal-content{
|
||||
background-image:linear-gradient(359.37deg,#ebf3ff 0%,#f8fbff 55.01%,#f1f5ff 100%);
|
||||
}
|
||||
.ant-modal-header{
|
||||
background-color: unset;
|
||||
padding:0px 24px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
.ant-modal-title{
|
||||
text-align: left;
|
||||
color:#333333;
|
||||
font-size:17px;
|
||||
font-weight: normal!important;
|
||||
height: 50px;
|
||||
line-height: 50px!important;
|
||||
}
|
||||
}
|
||||
.ant-modal-close{
|
||||
top:0px !important;
|
||||
}
|
||||
.addTags_form{
|
||||
.ant-row.ant-form-item{
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.ant-col.ant-form-item-label{
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
}
|
||||
}
|
||||
.popover{
|
||||
left: 94px;
|
||||
top:0px;
|
||||
}
|
||||
}
|
||||
.menusEmpty{
|
||||
padding:12px 20px 10px 16px;
|
||||
&>p{
|
||||
padding:10px 16px;
|
||||
}
|
||||
&>a{
|
||||
padding:10px 16px;
|
||||
display: block;
|
||||
border-top: 1px solid rgba(172, 176, 191, 0.17);
|
||||
}
|
||||
}
|
||||
.overlayStyle{
|
||||
background-color:#ffffff;
|
||||
border-radius:6px;
|
||||
box-shadow:0px 0px 10px rgba(24, 54, 181, 0.17);
|
||||
.searchbox{
|
||||
padding:18px 20px 12px 16px;
|
||||
padding:18px 20px 0px 16px;
|
||||
}
|
||||
.ant-menu{
|
||||
padding:0px 20px 10px 16px;
|
||||
|
|
@ -416,4 +476,55 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
//详情页面
|
||||
.detailbanner{
|
||||
margin-top: 25px;
|
||||
height:82px;
|
||||
background-color:#fafcff;
|
||||
border:1px solid rgba(42, 97, 255, 0.23);
|
||||
border-radius:4px;
|
||||
padding:0px 25px 0px 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.detailtitle{
|
||||
display: flex;
|
||||
.name{
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color:#333;
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
margin-bottom: 9px!important;
|
||||
}
|
||||
.author{
|
||||
img{
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
margin-right: 4px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
color: #466aff;
|
||||
}
|
||||
}
|
||||
.detailoperate{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
// 评论相关
|
||||
.addcomments{
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
background-color:rgba(241, 243, 252, 0.55);
|
||||
border-radius:4px;
|
||||
padding:11px 20px;
|
||||
&>img{
|
||||
height: 36px;
|
||||
width: 36px;
|
||||
border-radius: 50%;
|
||||
margin-right: 13px;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue