forked from Gitlink/forgeplus-react
标记管理-issueissue
This commit is contained in:
parent
1b1298c568
commit
70cdc5d9cc
|
|
@ -1,14 +1,15 @@
|
|||
import React from 'react';
|
||||
import { Checkbox , Tooltip } from 'antd';
|
||||
import issue from '../Img/issue.png';
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
// issue列表显示
|
||||
function Datas(){
|
||||
function Datas({checkbox}){
|
||||
return(
|
||||
<div className="listdatas">
|
||||
<div>
|
||||
<div className="issuedetail">
|
||||
<Checkbox style={{marginRight: "16px"}} value="0"></Checkbox>
|
||||
{checkbox}
|
||||
<div className="ilog">
|
||||
<span className="status normal">正常</span>
|
||||
<span className="number">#1</span>
|
||||
|
|
@ -43,7 +44,7 @@ function Datas(){
|
|||
</div>
|
||||
<div>
|
||||
<div className="issuedetail">
|
||||
<Checkbox style={{marginRight: "16px"}} value="0"></Checkbox>
|
||||
<Checkbox style={{marginRight: "16px"}} value={1}></Checkbox>
|
||||
<div className="ilog">
|
||||
<span className="status urgent">紧急</span>
|
||||
<span className="number">#2</span>
|
||||
|
|
@ -77,7 +78,7 @@ function Datas(){
|
|||
</div>
|
||||
<div>
|
||||
<div className="issuedetail">
|
||||
<Checkbox style={{marginRight: "16px"}} value="0"></Checkbox>
|
||||
<Checkbox style={{marginRight: "16px"}} value={2}></Checkbox>
|
||||
<div className="ilog">
|
||||
<span className="status hight">高</span>
|
||||
<span className="number">#3</span>
|
||||
|
|
@ -85,7 +86,7 @@ function Datas(){
|
|||
<div style={{marginTop:"-2px"}}>
|
||||
<div className="idetails">
|
||||
<img src={issue} alt="" width="16px" className="mr5" />
|
||||
<p>如何参与到项目的开发，提升技术能力？</p>
|
||||
<Link to={``}>如何参与到项目的开发，提升技术能力？</Link>
|
||||
<Tooltip title="点击复制链接" placement="bottom"><span style={{color: "#c1a30d"}}><i className="iconfont icon-biaoji mr3 font-12"></i>feature</span></Tooltip>
|
||||
</div>
|
||||
<div className="infos">
|
||||
|
|
@ -109,7 +110,7 @@ function Datas(){
|
|||
</div>
|
||||
<div>
|
||||
<div className="issuedetail">
|
||||
<Checkbox style={{marginRight: "16px"}} value="0"></Checkbox>
|
||||
<Checkbox style={{marginRight: "16px"}} value={3}></Checkbox>
|
||||
<div className="ilog">
|
||||
<span className="status low">低</span>
|
||||
<span className="number">#3</span>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import React ,{ useImperativeHandle ,forwardRef , useState } from 'react';
|
||||
import React ,{ useImperativeHandle ,forwardRef , useState , useEffect } from 'react';
|
||||
import { Dropdown , Icon , Menu } from 'antd';
|
||||
|
||||
const menus=[
|
||||
|
|
@ -8,27 +8,37 @@ const menus=[
|
|||
choose:0,
|
||||
menu:["caishi","he","xiao","jiang"]
|
||||
},
|
||||
{
|
||||
id:7,
|
||||
updateName:"更换优先级",
|
||||
choose:0,
|
||||
menu:["紧急","正常","低","高"]
|
||||
},
|
||||
{
|
||||
id:2,
|
||||
name:"标记",
|
||||
updateName:"更换标记",
|
||||
choose:0,
|
||||
menu:["caishi","he","xiao","jiang"]
|
||||
},
|
||||
{
|
||||
id:3,
|
||||
name:"里程碑",
|
||||
updateName:"更换里程碑",
|
||||
choose:0,
|
||||
menu:["caishi","he","xiao","jiang"]
|
||||
},
|
||||
{
|
||||
id:4,
|
||||
name:"负责人",
|
||||
updateName:"更换负责人",
|
||||
choose:0,
|
||||
menu:["caishi","he","xiao","jiang"]
|
||||
},
|
||||
{
|
||||
id:5,
|
||||
name:"状态",
|
||||
updateName:"更换状态",
|
||||
choose:0,
|
||||
menu:["新增","正在解决","已解决","反馈","关闭","拒绝"]
|
||||
},
|
||||
|
|
@ -39,9 +49,10 @@ const menus=[
|
|||
menu:["最新创建","最早创建","最近更新","最早更新","高优先级","低优先级"]
|
||||
}
|
||||
]
|
||||
function Menus(props,ref){
|
||||
function Menus({update},ref){
|
||||
const [ dropmenu , setDropMenu ] = useState(menus);
|
||||
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
clearChoose: () => {
|
||||
// 父组件按钮：清除筛选条件，将dropmenu里的choose字段全部改为0
|
||||
|
|
@ -49,19 +60,32 @@ function Menus(props,ref){
|
|||
}
|
||||
}))
|
||||
|
||||
useEffect(()=>{
|
||||
if(update){
|
||||
|
||||
}
|
||||
},[update])
|
||||
|
||||
// 修改menus数组里的字段值
|
||||
function changeMenusValue(value,id){
|
||||
let todoList = [...dropmenu];
|
||||
let list = todoList.map((item,key)=>id ? item : {...item,choose:value});
|
||||
let list = [];
|
||||
if(id){
|
||||
list = todoList.map((i,k)=>id===i.id ? {...i,choose:value} : i);
|
||||
}else{
|
||||
list = todoList.map((i,k)=>id ? i : {...i,choose:value});
|
||||
}
|
||||
setDropMenu(list);
|
||||
// 修改后调用父组件方法重新查询数据
|
||||
|
||||
}
|
||||
|
||||
function menu(menu,choose){
|
||||
function menu(menu,choose,id){
|
||||
if(menu && menu.length>0){
|
||||
return <Menu selectedKeys={[`${choose}`]}>
|
||||
{
|
||||
menu.map((i,j)=>{
|
||||
return <Menu.Item key={j+1} value={j}>{i}</Menu.Item>
|
||||
return <Menu.Item key={j+1} onClick={()=>changeMenusValue(j+1,id)}>{i}</Menu.Item>
|
||||
})
|
||||
}
|
||||
</Menu>
|
||||
|
|
@ -76,8 +100,9 @@ function Menus(props,ref){
|
|||
{
|
||||
dropmenu.map((item,i)=>{
|
||||
return(
|
||||
<Dropdown overlay={menu(item.menu,item.choose)} trigger={['click']} placement="bottomRight" arrow={{pointAtCenter: true}}>
|
||||
<li><span className="task-hide">{item.name}</span><Icon type="caret-down" className="ml5 color-grey-6" /></li>
|
||||
((!update && item.name) || (update && item.updateName)) &&
|
||||
<Dropdown overlay={menu(item.menu,item.choose,item.id)} placement="bottomRight" >
|
||||
<li><span className="task-hide">{item.choose !== 0 ? item.menu[item.choose-1]:(update ? item.updateName : item.name)}</span><Icon type="caret-down" className="ml5 color-grey-6" /></li>
|
||||
</Dropdown>
|
||||
)
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,15 +1,22 @@
|
|||
import React , { useRef } from 'react';
|
||||
import { Dropdown , Menu , Icon , Input , Checkbox , Pagination } from 'antd';
|
||||
import React , { useRef , useState } from 'react';
|
||||
import { Dropdown , Menu , Icon , Input , Checkbox , Pagination, Button } from 'antd';
|
||||
import bj from '../Img/biaoji.png';
|
||||
import create from '../Img/create.png';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { Link } from "react-router-dom";
|
||||
import Menus from '../Component/menus';
|
||||
import Datas from '../Component/datas';
|
||||
const { Search } = Input;
|
||||
|
||||
|
||||
function List(props){
|
||||
const [ allValue , setAllValue ] = useState([]);
|
||||
const [ allIds , setAllIds ] = useState([0,1,2,3]);
|
||||
const [ checkAll , setCheckAll ] = useState(false);
|
||||
|
||||
const [ page , setPage ] = useState(1);
|
||||
const menuRef = useRef(null);
|
||||
const owner = props.match.params.owner;
|
||||
const projectsId = props.match.params.projectsId;
|
||||
const menu = (
|
||||
<Menu>
|
||||
<Menu.Item key={0}>全部</Menu.Item>
|
||||
|
|
@ -27,6 +34,38 @@ function List(props){
|
|||
// 清除后重新获取列表数据
|
||||
}
|
||||
|
||||
// 全选所有issue
|
||||
function chooseAll(e){
|
||||
setCheckAll(e.target.checked);
|
||||
if(e.target.checked){
|
||||
setAllValue([0,1,2,3]);
|
||||
}else{
|
||||
setAllValue([]);
|
||||
clearCondition();
|
||||
}
|
||||
}
|
||||
|
||||
// 选择列表里的issue
|
||||
function checkIssues(value){
|
||||
setAllValue(value);
|
||||
if(value.length === allIds.length){
|
||||
setCheckAll(true);
|
||||
}else{
|
||||
setCheckAll(false);
|
||||
}
|
||||
}
|
||||
|
||||
// 取消
|
||||
function cancelUpdate(){
|
||||
setAllValue([]);
|
||||
setCheckAll(false);
|
||||
}
|
||||
|
||||
// 切换页码
|
||||
function changepage(page){
|
||||
setPage(page);
|
||||
}
|
||||
|
||||
|
||||
return(
|
||||
<div>
|
||||
|
|
@ -43,23 +82,45 @@ function List(props){
|
|||
<a className="color-blue ml25" onClick={clearCondition} style={{ display: "flex" , alignItems: "center"}}><i className="iconfont icon-roundclose font-16 mr5"></i>清除筛选条件</a>
|
||||
</div>
|
||||
<div>
|
||||
<Link to="" className="dorpdownButton"><img src={bj} alt="" className="mr5" />标记管理</Link>
|
||||
<Link to={`/${owner}/${projectsId}/issues/sign`} className="dorpdownButton"><img src={bj} alt="" className="mr5" />标记管理</Link>
|
||||
<Link to="" className="operateButton ml20"><img src={create} alt="" className="mr5" />创建疑修</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="lists">
|
||||
<div className="listheader">
|
||||
<ul>
|
||||
<Checkbox value="all" style={{marginRight: "16px"}}></Checkbox>
|
||||
<li className="active">全部<span>111</span></li>
|
||||
<li>开启中<span>111</span></li>
|
||||
<li>已关闭<span>111</span></li>
|
||||
</ul>
|
||||
<Menus ref={menuRef}/>
|
||||
<div style={{display:"flex"}}>
|
||||
<Checkbox value="all" style={{marginRight: "16px"}} checked={checkAll} onChange={chooseAll}></Checkbox>
|
||||
{
|
||||
allValue && allValue.length>0 ?
|
||||
<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>
|
||||
</ul>
|
||||
}
|
||||
</div>
|
||||
<div className="menusul">
|
||||
<Menus ref={menuRef} update={allValue && allValue.length>0}/>
|
||||
{
|
||||
allValue && allValue.length>0 ?
|
||||
<div>
|
||||
<Button type="primary" ghost>确定</Button>
|
||||
<Button type="danger" ghost className="ml10">删除</Button>
|
||||
<Button ghost className="ml10 mr10" onClick={cancelUpdate}>取消</Button>
|
||||
</div>
|
||||
:""
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<Datas />
|
||||
<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={1} showSizeChanger showQuickJumper />
|
||||
<Pagination total={50} current={page} onChange={changepage} showSizeChanger showQuickJumper />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,139 @@
|
|||
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'
|
||||
|
||||
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");
|
||||
|
||||
function arrayList(){
|
||||
|
||||
}
|
||||
|
||||
const menu = (
|
||||
<Menu onClick={arrayList}>
|
||||
<Menu.Item key={"created_at"} value="desc">
|
||||
按创建时间降序排序
|
||||
</Menu.Item>
|
||||
<Menu.Item key={"created_at"} value="asc">
|
||||
按创建时间升序排序
|
||||
</Menu.Item>
|
||||
<Menu.Item key={"issues_count"} value="desc">
|
||||
按issue个数降序排序
|
||||
</Menu.Item>
|
||||
<Menu.Item key={"issues_count"} value="asc">
|
||||
按issue个数升序排序
|
||||
</Menu.Item>
|
||||
</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',});
|
||||
}
|
||||
return(
|
||||
<div>
|
||||
<div className="between mt30 mb25">
|
||||
<span>Issue / 项目标记</span>
|
||||
<a className="operateButton" onClick={()=>setEdit(true)}><img src={create} alt="" className="mr5"/>创建标记</a>
|
||||
</div>
|
||||
{
|
||||
edit &&
|
||||
<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>
|
||||
<span>
|
||||
<Button type="primary" ghost>确定</Button>
|
||||
<Button ghost className="ml15" onClick={()=>setEdit(false)}>取消</Button>
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
<div className="between bluebar">
|
||||
<span>项目标记(10)</span>
|
||||
<Dropdown overlay={menu} trigger={["click"]} placement="bottomRight">
|
||||
<a>标记<Icon type="caret-down" className="ml5 color-grey-6" /></a>
|
||||
</Dropdown>
|
||||
</div>
|
||||
<ul className="signlist">
|
||||
<li>
|
||||
<p>
|
||||
<span className="square mr10" style={{backgroundColor:"#d92d4c"}}></span>
|
||||
<i className="iconfont icon-biaoji mr3 font-12 " style={{color:"#d92d4c"}}></i>
|
||||
缺陷
|
||||
</p>
|
||||
<p>表示项目存在问题</p>
|
||||
<p>
|
||||
<span className="mr12">0 Issue</span>
|
||||
<span className="line">12 合并请求</span>
|
||||
</p>
|
||||
<p>
|
||||
<a className="color-blue mr12">编辑</a>
|
||||
<a className="color-red line">删除</a>
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>
|
||||
<span className="square mr10" style={{backgroundColor:"#2d6ddc"}}></span>
|
||||
<i className="iconfont icon-biaoji mr3 font-12 " style={{color:"#2d6ddc"}}></i>
|
||||
疑问
|
||||
</p>
|
||||
<p>表示存在的问题</p>
|
||||
<p>
|
||||
<span className="mr12">0 Issue</span>
|
||||
<span className="line">12 合并请求</span>
|
||||
</p>
|
||||
<p>
|
||||
<a className="color-blue mr12">编辑</a>
|
||||
<a className="color-red line">删除</a>
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>
|
||||
<span className="square mr10" style={{backgroundColor:"#ee955a"}}></span>
|
||||
<i className="iconfont icon-biaoji mr3 font-12 " style={{color:"#ee955a"}}></i>
|
||||
功能
|
||||
</p>
|
||||
<p>表示新功能申请</p>
|
||||
<p>
|
||||
<span className="mr12">0 Issue</span>
|
||||
<span className="line">12 合并请求</span>
|
||||
</p>
|
||||
<p>
|
||||
<a className="color-blue mr12">编辑</a>
|
||||
<a className="color-red line">删除</a>
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default Sign;
|
||||
|
|
@ -8,11 +8,21 @@ const List = Loadable({
|
|||
loader: () => import("./Pages/list"),
|
||||
loading: Loading,
|
||||
});
|
||||
const Sign = Loadable({
|
||||
loader: () => import("./Pages/sign"),
|
||||
loading: Loading,
|
||||
});
|
||||
|
||||
function Index(props){
|
||||
return(
|
||||
<div className="pagebox">
|
||||
<Switch>
|
||||
<Route
|
||||
path="/:owner/:projectsId/issues/sign"
|
||||
render={() => (
|
||||
<Sign {...props}/>
|
||||
)}
|
||||
></Route>
|
||||
<Route
|
||||
path="/:owner/:projectsId/issues"
|
||||
render={() => (
|
||||
|
|
|
|||
|
|
@ -34,6 +34,36 @@
|
|||
border-color:#708cff;
|
||||
}
|
||||
}
|
||||
// flex-左右，上下居中
|
||||
.between{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
// 蓝色背景操作栏
|
||||
.bluebar{
|
||||
height:50px;
|
||||
background-color:#fafcff;
|
||||
border:1px solid rgba(42, 97, 255, 0.23);
|
||||
border-radius:4px 4px 0px 0px;
|
||||
padding:0px 26px;
|
||||
}
|
||||
// 按钮样式
|
||||
.ant-btn-background-ghost{
|
||||
border-color:#acb0bf;
|
||||
color: #acb0bf;
|
||||
background-color: #fff!important;
|
||||
&.ant-btn-primary{
|
||||
color: #466aff;
|
||||
border-color: #466aff;
|
||||
background-color: #fff!important;
|
||||
}
|
||||
&.ant-btn-danger{
|
||||
color: #f60011;
|
||||
border-color: #f60011;
|
||||
background-color:rgba(196, 0, 14, 0.09)!important;
|
||||
}
|
||||
}
|
||||
// 列表页面样式
|
||||
.pageheader{
|
||||
display: flex;
|
||||
|
|
@ -55,10 +85,14 @@
|
|||
border-color:rgba(42, 97, 255, 0.23);
|
||||
border-radius:4px 4px 0px 0px;
|
||||
padding-left: 18px;
|
||||
.menusul{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
ul{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&:first-child{
|
||||
&.statusul{
|
||||
li{
|
||||
width: 106px;
|
||||
&>span{
|
||||
|
|
@ -217,4 +251,88 @@
|
|||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 标记管理页面
|
||||
.editbar{
|
||||
padding:18px 20px;
|
||||
background-color:rgba(218, 225, 251, 0.24);
|
||||
display: flex;
|
||||
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;
|
||||
margin-bottom: 40px!important;
|
||||
&>li{
|
||||
display: flex;
|
||||
margin-bottom: 5px;
|
||||
padding:10px 20px;
|
||||
&>p{
|
||||
flex:1;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
color: 40424a;
|
||||
&:first-child{
|
||||
flex:1.2;
|
||||
}
|
||||
&:last-child{
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.square{
|
||||
display: block;
|
||||
width: 22px;
|
||||
height: 15px;
|
||||
border-radius:2px;
|
||||
}
|
||||
.line{
|
||||
position: relative;
|
||||
padding-left: 13px;
|
||||
&::before{
|
||||
position: absolute;
|
||||
height:13px;
|
||||
width: 1px;
|
||||
left: 0px;
|
||||
top:7px;
|
||||
background-color:#d5d5d5;
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -804,11 +804,11 @@ class Detail extends Component {
|
|||
></Route>
|
||||
|
||||
{/* 任务详情 */}
|
||||
<Route path="/:owner/:projectsId/issues/:orderId"
|
||||
{/* <Route path="/:owner/:projectsId/issues/:orderId"
|
||||
render={
|
||||
(props) => (<OrderDetail {...this.props} {...this.state} {...props} {...common} />)
|
||||
}
|
||||
></Route>
|
||||
></Route> */}
|
||||
{/* 动态 */}
|
||||
<Route path="/:owner/:projectsId/activity"
|
||||
render={
|
||||
|
|
|
|||
Loading…
Reference in New Issue