commit -谢思加入issue改版

src/forge/Issues/Component/drop.jsx

@@ -0,0 +1,47 @@
+import React,{useState, useEffect, useRef, useImperativeHandle,forwardRef} from 'react';
+import { Dropdown ,Icon } from 'antd';
+import { findDOMNode } from 'react-dom';
+
+function Drop({overlay,value},ref){
+  const [ visible , setVisible ] = useState(false);
+  const refFa = useRef(null);
+  const refBox = useRef(null);
+
+  useImperativeHandle(ref, () => ({
+    clearVisible: (value) => {
+      // 父组件按钮：清除筛选条件，将dropmenu里的choose字段全部改为0
+      setVisible(value);
+    }
+  }))
+
+  useEffect(() => {
+    document.addEventListener('click', clickMe , false);
+  }, [])
+
+  const clickMe = ({ target }) => {
+    // 查找父组件
+    const faComponent = findDOMNode(refFa.current);
+    const boxComponent = findDOMNode(refBox.current);
+    if (faComponent && boxComponent) {
+      const isChild = faComponent.contains(target);
+      const isBox = boxComponent.contains(target);
+      if(!isChild && !isBox){
+        setVisible(false);
+      }
+    }
+  }
+  return(
+    <Dropdown 
+      placement={"bottomRight"} 
+      visible={visible} 
+      overlay={<div ref={refFa}>{overlay}</div>} 
+      trigger={['click']}
+    >
+      <li ref={refBox} onClick={()=>setVisible(visible ? false : true)}>
+        <span className="task-hide">{value}</span>
+        <Icon type="caret-down" className="ml5 color-grey-6" />
+      </li>
+    </Dropdown>
+  )
+}
+export default forwardRef(Drop);

src/forge/Issues/Component/menus.jsx

@@ -1,58 +1,112 @@
-import React ,{ useImperativeHandle ,forwardRef , useState , useEffect } from 'react';
-import { Dropdown , Icon , Menu } from 'antd';
+import React ,{ useImperativeHandle ,forwardRef , useState , useEffect , useRef } from 'react';
+import { Input , Menu } from 'antd';
+import { getImageUrl } from 'educoder';
+import Drop from './drop';
+import axios from 'axios';
+const { Search } = Input;
 
+// id:固定位置顺序的唯一
+// name：未选择时显示的内容
+// updateName：勾选列表后默认显示的内容
+// choose：选择的项的id
+// menu：下拉列表，从接口获取，需一一填充
+// imgControl:控制是否显示头像
+// size:下拉框宽度，small：120px,large:260px;
 const menus=[
   {
     id:1,
     name:"发布人",
     choose:0,
-    menu:["caishi","he","xiao","jiang"]
+    imgControl:true,
+    size:"large",
+    menu:[{id:1,name:"111",image_url:'https://testforgeplus.trustie.net/images/avatars/User/36480?t=1672730523'},{id:2,name:"222",image_url:''},{id:3,name:"333",image_url:''},{id:4,name:"4444",image_url:''}]
   },
   {
     id:7,
     updateName:"更换优先级",
     choose:0,
-    menu:["紧急","正常","低","高"]
+    menu:[{id:1,name:"紧急"},{id:2,name:"正常"},{id:3,name:"低"},{id:4,name:"高"}]
   },
   {
     id:2,
     name:"标记",
     updateName:"更换标记",
     choose:0,
-    menu:["caishi","he","xiao","jiang"]
+    size:"large",
+    menu:[{id:1,name:"red"},{id:2,name:"blue"},{id:3,name:"orange"},{id:4,name:"yellow"}]
   },
   {
     id:3,
     name:"里程碑",
     updateName:"更换里程碑",
     choose:0,
-    menu:["caishi","he","xiao","jiang"]
+    size:"large",
+    menu:[{id:1,name:"11-11"},{id:2,name:"22-22"},{id:3,name:"33-33"},{id:4,name:"44-44"}]
   },
   {
     id:4,
     name:"负责人",
     updateName:"更换负责人",
     choose:0,
-    menu:["caishi","he","xiao","jiang"]
+    size:"large",
+    menu:[{id:1,name:"you",img:''},{id:2,name:"she",img:''},{id:3,name:"he",img:''},{id:4,name:"they",img:''}]
   },
   {
     id:5,
     name:"状态",
     updateName:"更换状态",
     choose:0,
-    menu:["新增","正在解决","已解决","反馈","关闭","拒绝"]
+    size:"small",
+    menu:[{id:1,name:"新增"},{id:2,name:"正在解决"},{id:3,name:"已解决"},{id:4,name:"反馈"},{id:5,name:"关闭"},{id:6,name:"拒绝"}]
   },
   {
     id:6,
     name:"排序",
     choose:0,
-    menu:["最新创建","最早创建","最近更新","最早更新","高优先级","低优先级"]
+    size:"small",
+    menu:[{id:1,name:"最新创建"},{id:2,name:"最早创建"},{id:3,name:"最近更新"},{id:4,name:"最早更新"},{id:5,name:"高优先级"},{id:6,name:"低优先级"}]
   }
 ]
-function Menus({update},ref){
+function Menus({update,owner,projectsId},ref){
   const [ dropmenu , setDropMenu ] =  useState(menus);
 
 
+  const dropRef = useRef(null);
+
+  useEffect(()=>{
+    getSendPerson();
+    getSign();
+  },[])
+
+  // 获取发布人
+  function getSendPerson(){
+    const url = `/v1/${owner}/${projectsId}/issue_authors`;
+    axios.get(url).then(result=>{
+      if(result && result.data){
+        let l = MenusControl(1,result.data.authors,dropmenu);
+        getSign(l);
+      }
+    })
+  }
+  // 获取标记
+  function getSign(copymenus){
+    const url = `/v1/${owner}/${projectsId}/issue_tags`;
+    axios.get(url).then(result=>{
+      if(result && result.data){
+        let l = MenusControl(2,result.data.issue_tags,copymenus);
+      }
+    })
+  }
+
+  function MenusControl(num,data,copymenus){
+    let list = [...copymenus]; 
+    let todolist = [];
+    todolist = list.map((i,k)=>i.id === num ? {...i,menu:data} : i);
+    // setDropMenu(todolist);
+    return todolist;
+  }
+
+
   useImperativeHandle(ref, () => ({
     clearChoose: () => {
       // 父组件按钮：清除筛选条件，将dropmenu里的choose字段全部改为0
@@ -76,19 +130,28 @@ function Menus({update},ref){
       list =  todoList.map((i,k)=>id ? i : {...i,choose:value});
     }
     setDropMenu(list);
+    dropRef.current && dropRef.current.clearVisible(false);
     // 修改后调用父组件方法重新查询数据
 
   }
 
-  function menu(menu,choose,id){
-    if(menu && menu.length>0){
-      return <Menu selectedKeys={[`${choose}`]}>
-        {
-          menu.map((i,j)=>{
-            return <Menu.Item key={j+1} onClick={()=>changeMenusValue(j+1,id)}>{i}</Menu.Item>
-          })
-        }
-        </Menu>
+  function menu(item){
+    if(item.menu && item.menu.length>0){
+      return <div className={`overlaydrop ${item.size}`}>
+          { item.size !== "small" && 
+            <div className="pb10"><Search placeholder={`搜索${item.name}`} /></div>
+          }
+          <Menu selectedKeys={[`${item.choose}`]}>
+          {
+            item.menu.map((i,j)=>{
+              return <Menu.Item key={i.id}>
+                {item.imgControl && <img src={getImageUrl(i.image_url)} alt=""/>}
+                <span onClick={()=>changeMenusValue(i.id,item.id)}>{i.name}</span>
+                </Menu.Item>
+            })
+          }
+          </Menu>
+        </div>
       }
     else{
       return "";
@@ -99,11 +162,14 @@ function Menus({update},ref){
       <ul className="dropboxul">
       {
         dropmenu.map((item,i)=>{
+          let ichoose = item.choose !== 0 && item.menu.filter(k=>k.id === item.choose);
           return(
             ((!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>
+            <Drop 
+              ref={dropRef}
+              overlay={menu(item)}
+              value={item.choose !== 0 ? (ichoose.length>0 && ichoose[0].name):(update ? item.updateName : item.name)}
+            />
           )
         })
       }

src/forge/Issues/Pages/list.jsx

@@ -158,7 +158,12 @@ function List(props){
             }
           </div>
           <div className="menusul">
-            <Menus ref={menuRef} update={allValue && allValue.length>0}/>
+            <Menus 
+              ref={menuRef} 
+              owner={owner} 
+              projectsId={projectsId} 
+              update={allValue && allValue.length>0}
+            />
             {
               allValue && allValue.length>0 ?
                 <div>

src/forge/Issues/index.scss

@@ -527,4 +527,52 @@
     border-radius: 50%;
     margin-right: 13px;
   }
+}
+.overlaydrop{
+  &.large{
+    width: 260px;
+  }
+  &.small{
+    width: 120px;
+    padding:12px 0px!important;
+  }
+  padding:18px 15px;
+  position: relative;
+  border-radius:6px;
+  box-shadow:0px 0px 10px rgba(24, 54, 181, 0.17);
+  background-color: #fff;
+  .ant-menu{
+    max-height: 288px;
+    overflow-y: auto;
+    li{
+      height: 38px;
+      line-height: 38px;
+      border-bottom: none!important;
+      display: flex;
+      align-items: center;
+      padding-left: 6px;
+      padding-right: 0px;
+      img{
+        width: 24px;
+        height: 24px;
+        border-radius: 50%;
+      }
+      span{
+        display: block;
+        width: 100%;
+        margin-left: 10px;
+      }
+      &:hover,&.ant-menu-item-selected{
+        background-color:rgba(70, 106, 255, 0.07);
+        color:#40424a;
+      }
+      &.ant-menu-item-selected::before{
+        content:"✓";
+        position: absolute;
+        right: 15px;
+        color: #acb0bf;
+        top: 0px;
+      }
+    }
+  }
 }