save

src/forge/Issues/Component/menus.jsx

@@ -1,40 +1,67 @@
-import React from 'react';
+import React ,{ useImperativeHandle ,forwardRef , useState } from 'react';
 import { Dropdown , Icon , Menu } from 'antd';
 
-function Menus(){
-  const dropmenu=[
-    {
-      name:"发布人",
-      menu:["caishi","he","xiao","jiang"]
-    },
-    {
-      name:"标记",
-      menu:["caishi","he","xiao","jiang"]
-    },
-    {
-      name:"里程碑",
-      menu:["caishi","he","xiao","jiang"]
-    },
-    {
-      name:"负责人",
-      menu:["caishi","he","xiao","jiang"]
-    },
-    {
-      name:"状态",
-      menu:["caishi","he","xiao","jiang"]
-    },
-    {
-      name:"排序",
-      menu:["caishi","he","xiao","jiang"]
-    }
-  ]
+const menus=[
+  {
+    id:1,
+    name:"发布人",
+    choose:0,
+    menu:["caishi","he","xiao","jiang"]
+  },
+  {
+    id:2,
+    name:"标记",
+    choose:0,
+    menu:["caishi","he","xiao","jiang"]
+  },
+  {
+    id:3,
+    name:"里程碑",
+    choose:0,
+    menu:["caishi","he","xiao","jiang"]
+  },
+  {
+    id:4,
+    name:"负责人",
+    choose:0,
+    menu:["caishi","he","xiao","jiang"]
+  },
+  {
+    id:5,
+    name:"状态",
+    choose:0,
+    menu:["新增","正在解决","已解决","反馈","关闭","拒绝"]
+  },
+  {
+    id:6,
+    name:"排序",
+    choose:0,
+    menu:["最新创建","最早创建","最近更新","最早更新","高优先级","低优先级"]
+  }
+]
+function Menus(props,ref){
+  const [ dropmenu , setDropMenu ] =  useState(menus);
 
-  function menu(menu){
+  useImperativeHandle(ref, () => ({
+    clearChoose: () => {
+      // 父组件按钮：清除筛选条件，将dropmenu里的choose字段全部改为0
+      changeMenusValue(0);
+    }
+  }))
+
+  // 修改menus数组里的字段值
+  function changeMenusValue(value,id){
+    let todoList = [...dropmenu]; 
+    let list =  todoList.map((item,key)=>id ? item : {...item,choose:value});
+    setDropMenu(list);
+  }
+
+  function menu(menu,choose){
     if(menu && menu.length>0){
-      return <Menu>
+      return <Menu selectedKeys={[`${choose}`]}>
         {
           menu.map((i,j)=>{
-            return <Menu.Item key={j}>{i}</Menu.Item>
+            return <Menu.Item key={j+1} value={j}>{i}</Menu.Item>
           })
         }
         </Menu>
@@ -49,7 +76,7 @@ function Menus(){
       {
         dropmenu.map((item,i)=>{
           return(
-            <Dropdown overlay={menu(item.menu)} trigger={['click']} placement="bottomRight" arrow={{pointAtCenter: true}}>
+            <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>
             </Dropdown>
           )
@@ -59,4 +86,4 @@ function Menus(){
     :<div></div>
   )
 }
-export default Menus;
+export default forwardRef(Menus);

src/forge/Issues/Pages/list.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React , { useRef } from 'react';
 import { Dropdown , Menu , Icon , Input , Checkbox , Pagination } from 'antd';
 import bj from '../Img/biaoji.png';
 import create from '../Img/create.png';
@@ -9,7 +9,7 @@ const { Search } = Input;
 
 
 function List(props){
-
+  const menuRef = useRef(null);
   const menu = (
     <Menu>
       <Menu.Item key={0}>全部</Menu.Item>
@@ -20,6 +20,13 @@ function List(props){
     </Menu>
   )
 
+  //清除筛选条件
+  function clearCondition(){
+    // 清除下拉选项
+    menuRef.current && menuRef.current.clearChoose();
+    // 清除后重新获取列表数据
+  }
+
     
   return(
     <div>
@@ -33,7 +40,7 @@ function List(props){
             onSearch={value => console.log(value)}
             style={{ width: 354 , height : 32 , marginLeft: 20 }}
           />
-          <a className="color-blue ml25" style={{ display: "flex" , alignItems: "center"}}><i className="iconfont icon-roundclose font-16 mr5"></i>清除筛选条件</a>
+          <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>
@@ -48,7 +55,7 @@ function List(props){
             <li>开启中<span>111</span></li>
             <li>已关闭<span>111</span></li>
           </ul>
-          <Menus />
+          <Menus ref={menuRef}/>
         </div>
         <Datas />
         <div className="pt25 pb30" style={{textAlign:"right"}}>