aiforge/templates/custom/select_dataset.tmpl

<style>
.loading{
    animation: load 2s linear infinite;
}
@-webkit-keyframes load
{
    from{-webkit-transform:rotate(0deg);}
    to{-webkit-transform:rotate(360deg);}
}
@-moz-keyframes load
{
    from{-moz-transform:rotate(0deg);}
    to{-moz-transform:rotate(360deg);}
}
@-o-keyframes load
{
    from{-o-transform:rotate(0deg);}
    to{-o-transform:rotate(360deg);}
}</style>
<div class="dataset-repolink" id="dataset-repolink-init" style="display: none;" data-repolink="{{.RepoLink}}" data-cloudranin-type="{{.cloudbraintype}}"></div>
<div class="inline required field" id="dataset-base">
    <label>{{.i18n.Tr "dataset.dataset"}}</label>
    <input type="hidden" name="attachment" :value="dataset_uuid">
    <input type="text" :value="dataset_name" disabled>
    <el-button type="text" @click="dialogVisible = true" icon="el-icon-plus"> {{.i18n.Tr "dataset.select_dataset"}}</el-button>
    <el-dialog
    title="{{.i18n.Tr "dataset.select_dataset"}}"
    :visible.sync="dialogVisible"
    width="50%"
    >
    <div class="ui icon input" style="z-index: 9999;position: absolute;right: 50px;height:30px;">
        <i class="search icon" style="cursor: pointer;pointer-events:auto" @click="searchDataset()"></i>
        <input type="text" placeholder="{{.i18n.Tr "dataset.search_dataset"}}" v-model="searchDataItem" @keyup.enter="searchDataset()">
    </div>
    
    <el-tabs v-model="activeName" @tab-click="handleClick('{{.RepoLink}}',activeName,{{.cloudbraintype}})">
        <el-tab-pane label="{{.i18n.Tr "dataset.current_project"}}" name="first">
            <div style="display: flex;align-items: center;justify-content: space-between;padding: 1rem 0;border-bottom:1px solid #F5F5F5" v-for="(dataset,index) in currentRepoDataset" :key="index">
                <div style="width: 90%;">
                    <div style="display: flex;align-items: center;"><span class="panel_creator_reponam">${dataset.Repo.OwnerName}/${dataset.Repo.Alias} </span><span class="panel_dataset_name">${dataset.Name} </span></div>
                    <div style="margin-top: 8px;display: flex;">
                        <a :title="dataset.Repo.OwnerName"> 
                            <img class="ui avatar mini image" style="width: 20px;height: 20px;" :src="dataset.RelAvatarLink">
                        </a>
                        <span class="panel_datset_desc">${dataset.Description}</span>
                    </div>
                </div>
                <div>
                    <button v-if="dataset.DecompressState===1" class="ui primary basic button mini" @click.stop.prevent="selectDataset(dataset.UUID,dataset.Name)">{{.i18n.Tr "dataset.use"}}</button>
                    <span v-if="dataset.DecompressState===2" style="display: flex;align-items: center;">
                        <i class="CREATING"></i>
                        <span style="margin-left: 0.4em;font-size: 12px;color: #5A5A5A;" data-tooltip="{{$.i18n.Tr "dataset.unzip_tooltips"}}" data-inverted="" data-variation="mini" data-position="left center">解压中</span>
                    </span>
                    <span v-if="dataset.DecompressState===3" style="display: flex;align-items: center;">
                        <i class="FAILED"></i>
                        <span style="margin-left: 0.4em;font-size: 12px;color:red;" data-tooltip="{{$.i18n.Tr "dataset.zip_failed"}}" data-inverted="" data-variation="mini" data-position="left center">解压失败</span>
                    </span>
                </div>
            </div>
            
            
        </el-tab-pane>
        <el-tab-pane label="{{.i18n.Tr "dataset.owner_dataset"}}" name="second">
            <div style="display: flex;align-items: center;justify-content: space-between;padding: 1rem 0;border-bottom:1px solid #F5F5F5" v-for="(dataset,index) in myDataset" :key="index">
                <div style="width: 90%;">
                    <div style="display: flex;align-items: center;"><span class="panel_creator_reponam">${dataset.Repo.OwnerName}/${dataset.Repo.Alias}</span><span class="panel_dataset_name">${dataset.Name}</span></div>
                    <div style="margin-top: 8px;display: flex;">
                        <a :title="dataset.Repo.OwnerName"> 
                            <img class="ui avatar mini image" style="width: 20px;height: 20px;" :src="dataset.RelAvatarLink">
                        </a>
                        <span class="panel_datset_desc">${dataset.Description}</span>
                    </div>
                </div>
                <div>
                    <button v-if="dataset.DecompressState===1" class="ui primary basic button mini" @click.stop.prevent="selectDataset(dataset.UUID,dataset.Name)">{{.i18n.Tr "dataset.use"}}</button>
                    <span v-if="dataset.DecompressState===2" style="display: flex;align-items: center;">
                        <i class="CREATING"></i>
                        <span style="margin-left: 0.4em;font-size: 12px;color: #5A5A5A;" data-tooltip="{{$.i18n.Tr "dataset.unzip_tooltips"}}" data-inverted="" data-variation="mini" data-position="left center">解压中</span>
                    </span>
                    <span v-if="dataset.DecompressState===3" style="display: flex;align-items: center;">
                        <i class="FAILED"></i>
                        <span style="margin-left: 0.4em;font-size: 12px;color:red;" data-tooltip="{{$.i18n.Tr "dataset.zip_failed"}}" data-inverted="" data-variation="mini" data-position="left center">解压失败</span>
                    </span>
                </div>
            </div>

        </el-tab-pane>
        <el-tab-pane label="{{.i18n.Tr "dataset.public_dataset"}}" name="third">
            <div style="display: flex;align-items: center;justify-content: space-between;padding: 1rem 0;border-bottom:1px solid #F5F5F5" v-for="(dataset,index) in publicDataset" :key="index">
                <div style="width: 90%;">
                    <div style="display: flex;align-items: center;"><span class="panel_creator_reponam">${dataset.Repo.OwnerName}/${dataset.Repo.Alias}</span><span class="panel_dataset_name">${dataset.Name}</span></div>
                    <div style="margin-top: 8px;display: flex;">
                        <a :title="dataset.UserName"> 
                            <img class="ui avatar mini image" style="width: 20px;height: 20px;" :src="dataset.RelAvatarLink">
                        </a>
                        <span class="panel_datset_desc">${dataset.Description}</span>
                    </div>
                </div>
                <div>
                    <button v-if="dataset.DecompressState===1" class="ui primary basic button mini" @click.stop.prevent="selectDataset(dataset.UUID,dataset.Name)">{{.i18n.Tr "dataset.use"}}</button>
                    <span v-if="dataset.DecompressState===2" style="display: flex;align-items: center;">
                        <i class="CREATING"></i>
                        <span style="margin-left: 0.4em;font-size: 12px;color: #5A5A5A;" data-tooltip="{{$.i18n.Tr "dataset.unzip_tooltips"}}" data-inverted="" data-variation="mini" data-position="left center">解压中</span>
                    </span>
                    <span v-if="dataset.DecompressState===3" style="display: flex;align-items: center;">
                        <i class="FAILED"></i>
                        <span style="margin-left: 0.4em;font-size: 12px;color:red;" data-tooltip="{{$.i18n.Tr "dataset.zip_failed"}}" data-inverted="" data-variation="mini" data-position="left center">解压失败</span>
                    </span>
                </div>
            </div>

        </el-tab-pane>
        <el-tab-pane label="{{.i18n.Tr "dataset.I_liked"}}" name="fourth">
            <div style="display: flex;align-items: center;justify-content: space-between;padding: 1rem 0;border-bottom:1px solid #F5F5F5" v-for="(dataset,index) in myFavoriteDataset" :key="index">
                <div style="width: 90%;">
                    <div style="display: flex;align-items: center;"><span class="panel_creator_reponam">${dataset.Repo.OwnerName}/${dataset.Repo.Alias}</span><span class="panel_dataset_name">${dataset.Name}</span></div>
                    <div style="margin-top: 8px;display: flex;">
                        <a :title="dataset.Repo.OwnerName"> 
                            <img class="ui avatar mini image" style="width: 20px;height: 20px;" :src="dataset.RelAvatarLink">
                        </a>
                        <span class="panel_datset_desc">${dataset.Description}</span>
                    </div>
                </div>
                <div>
                    <button v-if="dataset.DecompressState===1" class="ui primary basic button mini" @click.stop.prevent="selectDataset(dataset.UUID,dataset.Name)">{{.i18n.Tr "dataset.use"}}</button>
                    <span v-if="dataset.DecompressState===2" style="display: flex;align-items: center;">
                        <i class="CREATING"></i>
                        <span style="margin-left: 0.4em;font-size: 12px;color: #5A5A5A;" data-tooltip="{{$.i18n.Tr "dataset.unzip_tooltips"}}" data-inverted="" data-variation="mini" data-position="left center">解压中</span>
                    </span>
                    <span v-if="dataset.DecompressState===3" style="display: flex;align-items: center;">
                        <i class="FAILED"></i>
                        <span style="margin-left: 0.4em;font-size: 12px;color:red;" data-tooltip="{{$.i18n.Tr "dataset.zip_failed"}}" data-inverted="" data-variation="mini" data-position="left center">解压失败</span>
                    </span>
                </div>
            </div>

        </el-tab-pane>
    </el-tabs>
    <div class="center">
        <el-pagination
        background
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-size="5"
        layout="total,prev, pager, next"
        :total="totalnums">
        </el-pagination>
    </div>
    </el-dialog>


</div>