aiforge/web_src/js/components/images/selectGrampusImages.vue

<template>

    <div class="inline required field" :class="{ 'unite': benchmarkNew, 'min_title': benchmarkNew}">
        <label v-if="benchmarkNew" style="font-weight: normal;">镜像</label>
        <label v-else>镜像</label>
        <span v-if="benchmarkNew">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <input v-if="benchmarkNew" type="text" name="image" :value="imageAddress" style="width: 48.5%;"
            placeholder="选择镜像或输入镜像地址">
        <input v-else type="text" name="image" :value="imageAddress" placeholder="选择镜像或输入镜像地址">
        <el-button type="text" @click="dialogVisible = true" icon="el-icon-plus" style="color: #0366d6;">选择镜像
        </el-button>
        <el-dialog title="选择镜像" :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"></i>
                <input type="text" placeholder="搜镜像Tag/描述/标签..." v-model="search">
            </div>
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="公开镜像" name="first" v-loading="loadingPublic">
                    <div style="display: flex;align-items: center;justify-content: space-between;padding: 1rem 0;border-bottom:1px solid #F5F5F5"
                        v-for="(publicData,index) in tableDataPublic" :key="index">
                        <div style="width: 90%;">
                            <div style="display: flex;align-items: center;justify-content: space-between;">
                                <div style="display: flex;align-items: center;">
                                    <span class="panel_dataset_name text-over"
                                        style="margin-left: 0;">{{publicData.tag}} </span>
                                    <img v-if="publicData.type==5" src="/img/jian.svg" style="margin-left: 0.5rem;">
                                </div>

                                <div v-if="!!publicData.topics" class="text-over">
                                    <span v-for="(topic,index) in publicData.topics"
                                        class="ui repo-topic label topic">{{topic}}</span>
                                </div>
                            </div>
                            <div style="margin-top: 8px;display: flex;">
                                <a v-if="publicData.relAvatarLink||publicData.userName" :title="publicData.userName"
                                    style="cursor: default;">
                                    <img class="ui avatar mini image" style="width: 20px;height: 20px;"
                                        :src="publicData.relAvatarLink">
                                </a>
                                <a v-else><img class="ui avatar mini image" title="Ghost" src="/user/avatar/ghost/-1"
                                        style="width: 20px;height: 20px;"></a>
                                <span class="panel_datset_desc">{{publicData.description}}</span>
                            </div>
                        </div>
                        <div>
                            <button class="ui primary basic button mini"
                                @click.stop.prevent="selectImages(publicData.place,publicData.tag)">使用</button>
                        </div>
                    </div>
                    <div class="ui container" style="margin-top:50px;text-align:center">
                        <el-pagination background @current-change="handleCurrentChangePublic"
                            :current-page="currentPagePublic" :page-size="pageSizePublic"
                            layout="total, prev, pager, next" :total="totalNumPublic">
                        </el-pagination>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </el-dialog>
    </div>



</template>

<script>

    const { _AppSubUrl, _StaticUrlPrefix, csrf } = window.config;




    export default {
        components: {

        },
        data() {
            return {
                dialogVisible: false,
                benchmarkNew: false,
                imageAddress: '',
                activeName: 'first',
                search: '',
                checked: false,
                currentPagePublic: 1,
                pageSizePublic: 5,
                totalNumPublic: 0,
                paramsPublic: { page: 1, pageSize: 5, q: '', recommend: false,cloudbrainType: 2 },
                tableDataPublic: [],
                loadingPublic: false,

            };
        },
        methods: {
            handleClick(tab, event) {
                this.search = ''
                if (tab.name == "first") {
                    this.paramsPublic.q = ''
                    this.getImageListPublic()
                }

            },
            tableHeaderStyle({ row, column, rowIndex, columnIndex }) {

                if (rowIndex === 0) {
                    return 'background:#f5f5f6;color:#606266'
                }

            },

            handleCurrentChangePublic(val) {
                this.paramsPublic.page = val
                this.getImageListPublic()

            },

            getImageListPublic() {
                this.loadingPublic = true
                this.$axios.get('/explore/images/public', {
                    params: this.paramsPublic
                }).then((res) => {
                    this.totalNumPublic = res.data.count
                    this.tableDataPublic = res.data.images
                    this.loadingPublic = false
                })
            },

            searchName() {
                if (this.activeName == 'first') {
                    this.paramsPublic.q = this.search
                    this.paramsPublic.page = 1
                    this.getImageListPublic()
                }

            },

            selectImages(place) {
                this.imageAddress = place
                this.dialogVisible = false
            },

        },
        watch: {
            search(val) {
                if (this.activeName == 'first') {
                    this.paramsPublic.q = val
                    this.getImageListPublic()
                }
            }

        },
        mounted() {
            this.getImageListPublic()
            if (location.href.indexOf('benchmark') !== -1 || location.href.indexOf('train-job') !== -1) {
                this.benchmarkNew = true
            }
        },
        created() {

        }

    };
</script>

<style scoped>
    .header-wrapper {
        background-color: #f5f5f6;
        padding-top: 15px;
    }

    .image_text {
        padding: 25px 0 55px 0;
    }

    #header {
        position: relative;
        top: -40px;
    }

    #success {
        background-color: #5bb973;
        color: white;
    }

    .text-over {
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: middle;
        white-space: nowrap;
    }

    .image_title {
        display: inline-block;
        width: 80%;
        cursor: default;
        color: rgb(66, 98, 144);
    }

    .image_desc {
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .heart-stroke {
        stroke: #666;
        stroke-width: 2;
        fill: #fff
    }

    .stars_active {
        fill: #FA8C16 !important;
        stroke: #FA8C16 !important
    }
</style>