aiforge/web_src/js/features/images.js

import Images from '../components/Images.vue';
import Vue from 'vue';
export default async function initImage(){
    function validate() {
        $("#form_image")
        .form({
            on: 'blur',
            // inline:true,
            fields: {
                tag: {
                    identifier  : 'tag',
                    rules: [
                    {
                        type: 'regExp[/^[A-Za-z0-9_.-]{1,100}[A-Za-z0-9_.]$/]',
                    }
                    ]
                },
                description:{
                    identifier  : 'description',
                    rules: [
                    {
                        type: 'empty',
                        
                    }
                    ]
                },
            }
        })
    }
    function initDropdown(){
        $('#dropdown_image')
        .dropdown({
            allowAdditions: true,
            onChange: function(value, text, $selectedItem) {
                $('#course_label_item').empty()
            }
        })
        $('#dropdown_image input.search').bind('input propertychange', function (event) {
            // $("#dropdown_container").removeAttr("style"); 
            const query  = $('input.search').val()
            if(!query){
                $('#course_label_item').empty()
            }else{
                $.get(`/api/v1/topics/search?q=${query}`,(data)=>{
                    if(data.topics.length!==0){
                        let html=''
                        $('#course_label_item').empty()
                        data.topics.forEach(element => {
                            html += `<div class="item" data-value="${element.topic_name}">${element.topic_name}</div>`
                        });
                        $('#course_label_item').append(html)
                    }
                })
            }
        });
        
    }
    validate()
    initDropdown()
    let link = $('.submit-image-tmplvalue').data('link')
    $('.ui.create_image.green.button').click(()=>{
        console.log($('#form_image').serialize())
        $.ajax({
            url:link,
            type:'POST',
            data:$('#form_image').serialize(),
            success:function(res){
                console.log("res",res)
                if(res.Code===1){
                    $('.alert').html(res.Message).removeClass('alert-success').addClass('alert-danger').show().delay(1500).fadeOut();
                }
            },
            error: function(xhr){
            // 隐藏 loading
            // 只有请求不正常（状态码不为200）才会执行
                // $('.ui.error.message').text(xhr.responseText)
                // $('.ui.error.message').css('display','block')
                $('.alert').html(xhr.responseText).removeClass('alert-success').addClass('alert-danger').show().delay(1500).fadeOut();
            },
            complete:function(xhr){
                $("#mask").css({"display":"none","z-index":"1"})
            }
        })
    })
    $('#cancel_submit_image').click(()=>{
        if(link.includes('cloudbrain')){
            let repoLink = link.split('cloudbrain')[0]
            location.href = `${window.config.AppSubUrl}${repoLink}debugjob?debugListType=all`
        }
    })
    console.log("initImage")
    
    function initVueImages() {
        const el = document.getElementById('images');
        console.log(el)
        
        if (!el) {
            return;
        }
        
        new Vue({
            el:el,            
            render: h => h(Images)
        });
    }
    initVueImages()
}