aiforge/web_src/js/components/images/selectImages.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="选择镜像或输入镜像地址" required>
        <input v-else type="text" name="image" :value="imageAddress" placeholder="选择镜像或输入镜像地址" required>
        <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-tab-pane label="我的镜像" name="second" v-loading="loadingCustom">
                    <div style="display: flex;align-items: center;justify-content: space-between;padding: 1rem 0;border-bottom:1px solid #F5F5F5"
                        v-for="(customData,index) in tableDataCustom" :key="index">
                        <div style="width: 90%;">
                            <div style="display: flex;align-items: center;justify-content: space-between;">
                                <span class="panel_dataset_name text-over" style="margin-left: 0;">{{customData.tag}}
                                </span>
                                <div v-if="!!customData.topics" class="text-over">
                                    <span v-for="(topic,index) in customData.topics"
                                        class="ui repo-topic label topic">{{topic}}</span>
                                </div>
                            </div>
                            <div style="margin-top: 8px;display: flex;">
                                <a v-if="customData.relAvatarLink||customData.userName" :title="customData.userName"
                                    style="cursor: default;">
                                    <img class="ui avatar mini image" style="width: 20px;height: 20px;"
                                        :src="customData.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">{{customData.description}}</span>
                            </div>
                        </div>
                        <div>
                            <button v-if="customData.status===1" class="ui primary basic button mini"
                                @click.stop.prevent="selectImages(customData.place,customData.tag)">使用</button>
                            <span v-if="customData.status===0" style="display: flex;align-items: center;">
                                <i class="CREATING"></i>
                                <span style="margin-left: 0.4em;font-size: 12px;color: #5A5A5A;">提交中</span>
                            </span>
                            <span v-if="customData.status===2" style="display: flex;align-items: center;">
                                <i class="FAILED"></i>
                                <el-tooltip class="item" effect="dark" content="检测提交镜像是否大小超过20G！" placement="left">
                                    <span style="margin-left: 0.4em;font-size: 12px;color:red;">提交失败</span>
                                </el-tooltip>

                            </span>
                        </div>
                    </div>
                    <div class="ui container" style="margin-top:50px;text-align:center">
                        <el-pagination background @current-change="handleCurrentChangeCustom"
                            :current-page="currentPageCustom" :page-size="pageSizeCustom"
                            layout="total, prev, pager, next" :total="totalNumCustom">
                        </el-pagination>
                    </div>
                </el-tab-pane>

                <el-tab-pane label="我收藏的镜像" name="third">
                    <div style="display: flex;align-items: center;justify-content: space-between;padding: 1rem 0;border-bottom:1px solid #F5F5F5"
                        v-for="(starData,index) in tableDataStar" :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;">{{starData.tag}}
                                    </span>
                                    <img v-if="starData.type==5" src="/img/jian.svg" style="margin-left: 0.5rem;">
                                </div>

                                <div v-if="!!starData.topics" class="text-over">
                                    <span v-for="(topic,index) in starData.topics"
                                        class="ui repo-topic label topic">{{topic}}</span>
                                </div>
                            </div>
                            <div style="margin-top: 8px;display: flex;">
                                <a v-if="starData.relAvatarLink||starData.userName" :title="starData.userName"
                                    style="cursor: default;">
                                    <img class="ui avatar mini image" style="width: 20px;height: 20px;"
                                        :src="starData.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">{{starData.description}}</span>
                            </div>
                        </div>
                        <div>
                            <button class="ui primary basic button mini"
                                @click.stop.prevent="selectImages(starData.place,starData.tag)">使用</button>
                        </div>
                    </div>
                    <div class="ui container" style="margin-top:50px;text-align:center">
                        <el-pagination background @current-change="handleCurrentChangeStar"
                            :current-page="currentPageStar" :page-size="pageSizeStar" layout="total, prev, pager, next"
                            :total="totalNumStar">
                        </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 },
                tableDataPublic: [],
                loadingPublic: false,

                currentPageCustom: 1,
                pageSizeCustom: 5,
                totalNumCustom: 0,
                paramsCustom: { page: 1, pageSize: 5, q: '' },
                tableDataCustom: [],
                starCustom: [],
                loadingCustom: false,

                currentPageStar: 1,
                pageSizeStar: 5,
                totalNumStar: 0,
                paramsStar: { page: 1, pageSize: 5, q: '' },
                tableDataStar: [],
                loadingStar: false
            };
        },
        methods: {
            handleClick(tab, event) {
                this.search = ''
                if (tab.name == "first") {
                    this.paramsPublic.q = ''
                    this.getImageListPublic()
                }
                if (tab.name == "second") {
                    this.getImageListCustom()
                }
                if (tab.name == "third") {
                    this.getImageListStar()
                }

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

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

            },

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

            },

            handleCurrentChangeCustom(val) {
                this.paramsCustom.page = val
                this.getImageListCustom()

            },
            handleCurrentChangeStar(val) {
                this.paramsStar.page = val
                this.getImageListStar()

            },
            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
                })
            },

            getImageListCustom() {
                this.loadingCustom = true
                this.$axios.get('/explore/images/custom', {
                    params: this.paramsCustom
                }).then((res) => {
                    this.totalNumCustom = res.data.count
                    this.tableDataCustom = res.data.images
                    this.tableDataCustom.forEach(element => {
                        this.starCustom.push({ id: element.id, })

                    });
                    this.loadingCustom = false
                })
            },

            getImageListStar() {
                this.loadingStar = true
                this.$axios.get('/explore/images/star', {
                    params: this.paramsStar
                }).then((res) => {
                    this.totalNumStar = res.data.count
                    this.tableDataStar = res.data.images
                    this.loadingStar = false
                })
            },
            searchName() {
                if (this.activeName == 'first') {
                    this.paramsPublic.q = this.search
                    this.paramsPublic.page = 1
                    this.getImageListPublic()
                }
                if (this.activeName == 'second') {
                    this.paramsCustom.q = this.search
                    this.paramsCustom.page = 1
                    this.getImageListCustom()
                }
                if (this.activeName == 'third') {
                    this.paramsStar.q = this.search
                    this.paramsStar.page = 1
                    this.getImageListStar()
                }

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

        },
        watch: {
            search(val) {
                if (this.activeName == 'first') {
                    this.paramsPublic.q = val
                    this.getImageListPublic()
                }
                if (this.activeName == 'second') {
                    this.paramsCustom.q = val
                    this.getImageListCustom()
                }
                if (this.activeName == 'third') {
                    this.paramsStar.q = val
                    this.getImageListStar()
                }
            }

        },
        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>