aiforge/templates/org/course_list.tmpl

<style>
    .text-right{
        float:right !important;
    }
    .header{
        font-weight:bold;
        font-size: 18px;
        font-family: SourceHanSansSC-medium;
    }
    .cor{
		color:#0366D6 !important;
	}
    .header_card{
        /* color:#003A8C !important; */
        color:#101010 !important;
        margin: 10px 0 0px 0;
        height: 25px;
        font-size: 18px;
    }
    .marg{
        margin: 0 5px !important;
    }

    .content_list{
        max-height: 130px;
        overflow: auto;
    }
    .Relist{
        color:#0366D6 !important;
	} 
    .descript_height{
        color: #999999 !important;
        margin: 10px 0;
        height: 40px !important;
        word-break:break-all;
        line-height: 20px; 
        overflow: hidden;
        /* overflow: hidden!important;
        word-wrap:break-word!important; */


    }

    .tags_height{
        height: 30px !important;
    }
    .full_height{
        height: 100%;
    }
    .omit{
        overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    }
    /deep/ ui.checkbox input[type=checkbox]::after{
        border: 1px solid #0366D6 !important;
    }
    .nowrap-2 {
        /* height: 2.837em; */
        /* line-height: 1.4285em; */
        overflow: hidden;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .ui.label{
        color:#0366D6 !important;
        background-color: #B3DBDB !important;
        font-weight:normal !important
    }
    .tag_text{
        /* margin-top: 2px; */
        /* margin-left: 0.5em; */
        font-size: 14px;
    }
	.card{
        box-shadow: 0px 4px 4px 0px rgba(232, 232, 232, 60) !important;
        border-radius: 5px;
        border: 1px solid rgba(232, 232, 232, 100)    
	}

</style>

    <div style="width: 100%;">
  
        <div class="ui three cards" style="margin-bottom: 10px;">
            {{range .Repos}}
                <div class="card " >
                
                    <div class="extra full_height cor"  >
                        <div class="content " >
                            {{if .Topics }} 
                                <div class="  tags "  style="position: relative;">
                                    {{range .Topics}}
                                            {{if ne . "" }}<a  style="max-width:100%;margin: 5px 0;display:inline-flex;" href="{{AppSubUrl}}/explore/repos?q={{.}}&topic={{$.Topic}}" ><span class="ui small label topic omit"  >{{.}}</span></a>{{end}}
                                    {{end}}
                                    
                                </div>
                            {{end}}  
                            
                        </div> 

                        <div class=" header header_card omit" >
                            <a class="header_card image poping up "   href="{{.Link}}" data-content="{{.Alias}}" data-position="top left" data-variation="tiny inverted">  {{.Alias}}</a>
                        </div>
                        
                        <div class='content descript_height nowrap-2'>
                            {{.Description}}
                        </div>
                        
                        
                                                        
                        
                    </div>
                    <div class=" extra content" style="color:#888888;border-top: none !important;padding-top: 0px;margin-bottom: 15px;">                            
                        <div class="left aligned author">
                        <!-- <span > -->
                           
                            {{if  .Creator }}
                                <img class="ui avatar image" style="width: 22px;height:22px;margin-top:-5px"  src="{{.Creator.RelAvatarLink}}">
                            {{else}}
                                <img class="ui avatar image" style="width: 22px;height:22px;margin-top:-5px"  src="{{.Owner.RelAvatarLink}}">
                            {{end}}

                            {{$.i18n.Tr "org.repo_updated"}}&nbsp;: &nbsp; {{TimeSinceUnixShort .UpdatedUnix}}
                        <!-- </span> -->
                        </div>
                    </div>
                </div>   
            {{end}}
        </div>
                    
    </div>

<script>
    var data;
    var filterData=[];
    var num=0;

    function showcreate(obj){
        document.getElementById("search_selectPro").value=''
        $('.ui.modal')
        .modal({
            centered: false,
            onShow:function(){
                $("#org_list").empty()                
                getPro(1)
                
            },
            onHide:function(){
  
            }
        })
        .modal('show')
    }
    function getPro(typeTag){

        $.ajax({
            type:"GET",
            url:"/org/{{.Org.Name}}/org_tag/repo_list?tagId="+typeTag,
            dataType:"json",
            async:false,
            success:function(json){
                data = json.data;
                var n_length = data.length
                pro_html = getHTML(data)
                $("#org_list").append(pro_html)
                // console.log('原始',data)
                checkedNum(0)
            }
        });
    }
    function getHTML(data){
        let pro_html=''
        for (let i=0;i<data.length;i++){
            if (data[i].Selected==true){
                console.log("data[i]:",data[i])
                pro_html += `<div class="ui checkbox" style="width: 33%;margin-bottom:10px" > <input type="checkbox" id = " ${i}" checked="" onclick="checkedNum(${i})" class="Relist" name ='select_pro_name' data-repoid="${data[i].RepoID}" data-reponame="${data[i].RepoName}"  data-selected=${data[i].Selected} > <label class='omit image poping up' data-content=${data[i].RepoName}  data-position="top left " data-variation="mini"> ${data[i].RepoName}</label></div>`
                pro_html += '</div>'
            }
            else{
                pro_html += `<div class="ui checkbox" style="width: 33%;margin-bottom:10px" > <input type="checkbox" id = "${i}"  onclick="checkedNum(${i})" class="Relist" name ='select_pro_name' data-repoid="${data[i].RepoID}" data-reponame="${data[i].RepoName}" data-selected= ${data[i].Selected}> <label class='omit image poping up' data-content=${data[i].RepoName}  data-position="top left " data-variation="mini"> ${data[i].RepoName} </label></div>`
                pro_html += '</div>'
            }
        }
        return pro_html
    }
    function saveSeletedPro(typeTag){
        var saveData=[];
        $('input[name="select_pro_name"]:checked').each(function(){
            // console.log('值',this.dataset.repoid)

            saveData.push(parseInt(this.dataset.repoid));
        })
        if(saveData.length>9){
            alert("最多可选9个，保存失败")
            return
        }
        // saveData = getSelecteDataID();
        // console.log("数据：",saveData)
        $.ajax({
         type:"POST",
         url:"/org/{{.Org.Name}}/org_tag/repo_submit?tagId="+typeTag,
         contentType:'application/json',
         dataType:"json",
         async:false,
         data:JSON.stringify({'repoList':saveData
               }),        
           success:function(res){
             console.log('保存成功');
             location.reload()  

          }
         });
    }

    function getSelecteData(){
        var selectedData=[];
        $('input[name="select_pro_name"]:checked').each(function(){
            // console.log(this)
            // console.log('值',this.dataset.selected)

            selectedData.push({"RepoID":parseInt(this.dataset.repoid),"RepoName":this.dataset.reponame,"Selected":JSON.parse(this.dataset.selected)});
        })
        return selectedData
    }
    function search(){
        var selectedData = getSelecteData();
        var searchValue = document.getElementById("search_selectPro").value;
        filterData=[];
        console.log("searchValue:",searchValue)
        for (let i=0;i<data.length;i++){
            var isInclude=false; 
            if(data[i].RepoName.toLowerCase().includes(searchValue.toLowerCase())){
                filterData.push(data[i])
            }
        }
        console.log("选中的值:",selectedData)
        console.log("筛选包括选中的值:",filterData)
        var showData=[];
        for(i=0;i<selectedData.length;i++){
            filterData =filterData.filter((item)=>{
                return item.RepoID!=selectedData[i].RepoID
            });
        }
        console.log("筛选后不包括选中的值:",filterData)
        $("#org_list").empty()
        if(searchValue!=""){
            if (filterData.length!=0){
                
                var pro_html = getHTML(selectedData);
                console.log("selectedData_pro_html:",pro_html)
                $("#org_list").append(pro_html)
                pro_html= getHTML(filterData);
                $("#org_list").append(pro_html)
            }else{
                var pro_html = getHTML(selectedData);
                $("#org_list").append(pro_html)
            }
        }else{
            var pro_html = getHTML(data);
            $("#org_list").append(pro_html)
        }
    }

    function checkedNum(id){

        num=0;
        var inputs = document.getElementsByName("select_pro_name")
        for (var i=0;i<inputs.length;i++){
            if(inputs[i].checked){
                num++
                if(num>9){
                    document.getElementById(id).checked=false
                    alert("选择超过9个，请重新选择！")
                    return
                }
            }
                
        }

        var show_num = 9-num;
        document.getElementById("recommend").innerHTML="还能推荐"+show_num+"个"

    }

</script>