aiforge/templates/repo/modelmanage/index.tmpl

<!-- 头部导航栏 -->
{{template "base/head" .}}
<style>
.width70{
    width: 70% !important;
}
.width83{
    width: 83% !important;
}
.content-padding{
    padding: 40px !important;
}
</style>
<!-- 弹窗 -->
<div id="mask">
    <div id="loadingPage">
        <div class="rect1"></div>
        <div class="rect2"></div>
        <div class="rect3"></div>
        <div class="rect4"></div>
        <div class="rect5"></div>
    </div>
</div>
{{$repository := .Repository.ID}}
<!-- 提示框 -->
<div class="alert"></div>

<div class="repository release dataset-list view">
    {{template "repo/header" .}}
    <!-- 列表容器 -->
    <div class="ui container active loader" id="loadContainer">
        {{template "base/alert" .}}
        <div class="ui two column stackable grid ">
            <div class="column"></div>
            <div class="column right aligned">
                <!--  -->
                <a class="ui button {{if .Permission.CanWrite $.UnitTypeCloudBrain}} green {{else}} disabled {{end}}" onclick="showcreate(this)">{{$.i18n.Tr "repo.model.manage.import_new_model"}}</a>
            </div>
        </div>

        <!-- 中下列表展示区 -->
        <div class="ui grid">
            <div class="row" style="padding-top: 0;">
                <div class="ui sixteen wide column">
                    <!-- 任务展示 -->
                    <div class="dataset list" id="model_list">
                        <!-- 表头 -->
                    </div>
                </div>
            </div>
        </div>

    </div>

</div>

<!-- div full height-->
</div>



<!-- 确认模态框 -->
<div id="deletemodel">
    <div class="ui basic modal first">
        <div class="ui icon header">
            <i class="trash icon"></i> 删除任务
        </div>

        <div class="content">
            <p>你确认删除该任务么？此任务一旦删除不可恢复。</p>
        </div>
        <div class="actions">
            <div class="ui red basic inverted cancel button">
                <i class="remove icon"></i> 取消操作
            </div>
            <div class="ui green basic inverted ok button">
                <i class="checkmark icon"></i> 确定操作
            </div>
        </div>
    </div>
</div>
<div id="newmodel">
    <div class="ui modal second">
        <div class="header" style="padding: 1rem;background-color: rgba(240, 240, 240, 100);">
            <h4>导入新模型</h4>
        </div>
        <div class="content content-padding">
            <form id="formId" method="POST" class="ui form">
                <div class="ui error message">
                    <!-- <p>asdasdasd</p> -->
                </div>
                <input type="hidden" name="_csrf" value="">
                <div class="two inline fields ">   
                    <div class="required ten wide field">
                        <label style="margin-left: -23px;">选择训练任务</label>
                        <div class="ui dropdown selection search width83 loading" id="choice_model">
                            <input type="hidden" id="JobId" name="JobId" required>
                            <div class="default text">选择训练任务</div>
                            <i class="dropdown icon"></i>
                            <div class="menu" id="job-name">
                            </div>
                        </div>
                        
                    </div>
                    <div class="required six widde field">
                        <label>版本</label>
                        <div class="ui dropdown selection search width70" id="choice_version">
                            <input type="hidden" id="VersionName" name="VersionName" required>
                            <div class="default text">选择版本</div>
                            <i class="dropdown icon"></i>
                            <div class="menu" id="job-version">
                                
                            </div>
                        </div>
                    </div>
                </div>

                <div class="required inline field" id="modelname">
                    <label>模型名称</label>
                    <input style="width: 45%;" id="name" name="Name" required maxlength="25" onkeyup="this.value=this.value.replace(/[, ]/g,'')">
                </div>
                <div class="required inline field" id="verionname">
                    <label>模型版本</label>
                    <input style="width: 45%;" id="version" name="Version" value="" readonly required maxlength="255">
                </div>
                <div class="inline field">
                    <label>模型标签</label>
                    <input style="width: 83%;margin-left: 7px;" name="Label" maxlength="255">
                </div>
                <div class="inline field">
                    <label for="description">模型描述</label>
                    <textarea style="width: 83%;margin-left: 7px;" id="Description" name="Description" rows="3" maxlength="255" placeholder={{.i18n.Tr "repo.modelarts.train_job.new_place"}} onchange="this.value=this.value.substring(0, 255)" onkeydown="this.value=this.value.substring(0, 255)" onkeyup="this.value=this.value.substring(0, 256)"></textarea>
                </div>

                <div class="inline field" style="margin-left: 75px;">
                    <button id="submitId" type="button" class="ui create_train_job green button" style="position: absolute;">
                    {{.i18n.Tr "repo.cloudbrain.new"}}
                    </button>
                </div>
            </form>
            <div class="actions" style="display: inline-block;margin-left: 180px;">
                <button class="ui button cancel" >{{.i18n.Tr "repo.cloudbrain.cancel"}}</button>
            </div>
        </div>
        
    
</div>


{{template "base/footer" .}}

<script>
    let repolink =  {{.RepoLink}}
    let repoId = {{$repository}}
    let url_href = window.location.pathname.split('show_model')[0] + 'create_model'
    const {_AppSubUrl, _StaticUrlPrefix, csrf} = window.config;
    $('input[name="_csrf"]').val(csrf)

    function createModelName(){
        let repoName = location.pathname.split('/')[2]
        let modelName = repoName + '_model_' + Math.random().toString(36).substr(2, 4)
        $('#name').val(modelName)
        $('#version').val("0.0.1")
    }
    function showcreate(obj){
        $('.ui.modal.second')
        .modal({
            centered: false,
            onShow:function(){
                $('.ui.dimmer').css({"background-color":"rgb(136, 136, 136,0.7)"})
                $("#job-name").empty()
                createModelName()
                loadTrainList()
            },
            onHide:function(){
                document.getElementById("formId").reset();
                $('#choice_model').dropdown('clear')
                $('#choice_version').dropdown('clear')
                $('.ui.dimmer').css({"background-color":""})
                $('.ui.error.message').css('display','none')
                
            }
        })
        .modal('show')
    }

    $(function(){
        $('#choice_model').dropdown({
        onChange:function(value){
            $(".ui.dropdown.selection.search.width70").addClass("loading")
            $("#job-version").empty()
            loadTrainVersion(value)
            }
        })
    })
    function versionAdd(version){
        let versionArray = version.split('.')
        if(versionArray[2]=='9'){
            if(versionArray[1]=='9'){
                versionArray[0] = String(Number(versionArray[1])+1)
                versionArray[1] = '0'
            }else{
                versionArray[1]=String(Number(versionArray[1])+1)
            }
            versionArray[2]='0'
        }else{
            versionArray[2]=String(Number(versionArray[2])+1)
        }
        return versionArray.join('.')
    }
    function loadTrainList(){
        $.get(`${repolink}/modelmanage/query_train_job?repoId=${repoId}`, (data) => {
            const n_length = data.length
            let train_html=''
            for (let i=0;i<n_length;i++){
                train_html += `<div class="item" data-value="${data[i].JobID}">${data[i].JobName}</div>`
                train_html += '</div>'
            }
            $("#job-name").append(train_html)
            $(".ui.dropdown.selection.search.width83").removeClass("loading")      
        })
    }
    function loadTrainVersion(value){
        $.get(`${repolink}/modelmanage/query_train_job_version?JobID=${value}`, (data) => {
            const n_length = data.length
            let train_html=''
            for (let i=0;i<n_length;i++){
                train_html += `<div class="item" data-value="${data[i].VersionName}">${data[i].VersionName}</div>`
                train_html += '</div>'
            }
            $("#job-version").append(train_html)
            $(".ui.dropdown.selection.search.width70").removeClass("loading")
        })
    }

    function check(){
        let jobid = document.getElementById("JobId").value
        let versionname = document.getElementById("VersionName").value
        let name= document.getElementById("name").value
        let version= document.getElementById("version").value
        if(jobid==""){
            $(".required.ten.wide.field").addClass("error")
            return false
        }else{
            $(".required.ten.wide.field").removeClass("error")
        }
        if(versionname==""){
            $(".required.six.widde.field").addClass("error")
            return false
        }else{
            $(".required.six.widde.field").removeClass("error")
        }
        if(name==""){
            $("#modelname").addClass("error")
            return false
        }else{
            $("#modelname").removeClass("error")
        }
        if(versionname==""){
            $("#verionname").addClass("error")
            return false
        }else{
            $("#verionname").removeClass("error")
        }
        return true
        
    }
    
    $('#submitId').click(function(){
        let flag=check()
        if(flag){
            let data = $("#formId").serialize()
            $("#mask").css({"display":"block","z-index":"9999"})
            $.ajax({
                url:url_href,
                type:'POST',
                data:data,
                success:function(res){
                    $('.ui.modal.second').modal('hide')
                    window.location.href=location.href
                },
                error: function(xhr){
                // 隐藏 loading
                // 只有请求不正常（状态码不为200）才会执行
                    console.log("-------------",xhr)
                    $('.ui.error.message').text(xhr.responseText)
                    $('.ui.error.message').css('display','block')
                },
                complete:function(xhr){
                    $("#mask").css({"display":"none","z-index":"1"})
                }
            })
        }else{
            return false
        }
        
    })  
</script>