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 type="text" name="image" :value="imageAddress" placeholder="选择镜像或输入镜像地址">
    <el-button type="text" @click="dialogVisible = true" icon="el-icon-plus">选择镜像</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" @click="searchName()"></i>
            <input type="text" placeholder="" v-model="search" @keyup.enter="searchName()">
        </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;">
                                <span class="panel_dataset_name text-over" style="margin-left: 0;">{{publicData.tag}} </span>
                                <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 :title="publicData.userName" style="cursor: default;"> 
                                    <img class="ui avatar mini image" style="width: 20px;height: 20px;" :src="publicData.relAvatarLink">
                                </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 :title="customData.userName" style="cursor: default;"> 
                                    <img class="ui avatar mini image" style="width: 20px;height: 20px;" :src="customData.relAvatarLink">
                                </a>
                                <span class="panel_datset_desc">{{customData.description}}</span>
                            </div>
                        </div>
                        <div>
                            <button  class="ui primary basic button mini" @click.stop.prevent="selectImages(customData.place,customData.tag)">使用</button>
                        </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;">
                                <span class="panel_dataset_name text-over" style="margin-left: 0;">{{starData.tag}} </span>
                                <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 :title="starData.userName" style="cursor: default;"> 
                                    <img class="ui avatar mini image" style="width: 20px;height: 20px;" :src="starData.relAvatarLink">
                                </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)=>{
            console.log("res",res.data)
            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)=>{
            console.log("res",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)=>{
            console.log("res",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){
          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;
}
.el-dropdown-menu__item--divided{
    border-top: 1px solid blue;
}
.el-table thead{
    background-color: #f5f5f6;
}
/deep/ .el-tabs__item:hover{
    color: #000;
    font-weight: 500;
    
}
/deep/ .el-tabs__item.is-active {
    color: #000;
    font-weight: 500;
}
/deep/ .el-tabs__active-bar{
    background-color:#000
}

/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #5bb973;
  color: #FFF;
}
/deep/ .el-pagination.is-background .el-pager li.active {
  color: #fff;
  cursor: default;
}
/deep/ .el-pagination.is-background .el-pager li:hover {
  color: #5bb973;
}
/deep/ .el-pagination.is-background .el-pager li:not(.disabled):hover {
  color: #5bb973;
}
/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active:hover {
  background-color: #5bb973;
  color: #FFF;
}

/deep/ .el-pager li.active {
  color: #08C0B9;
  cursor: default;
}
/deep/ .el-pagination .el-pager li:hover {
  color: #08C0B9;
}
/deep/ .el-pagination .el-pager li:not(.disabled):hover {
  color: #08C0B9;
}
#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>