aiforge/web_src/js/components/Images.vue

<template>
<div>
    <div class="header-wrapper">
        <div class="ui container">
            <el-row class="image_text">
                <h1>云脑镜像</h1>
            </el-row>    
        </div>
    </div>
    <div class="ui container" id="header">
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="公开镜像" name="first" v-loading="loadingPublic">
            <template v-if="tableDataPublic.length!==0">
                <div class="ui sixteen wide column">
                    <div class="ui two column stackable grid">
                        <div class="column">
                            <el-input placeholder="请输入镜像名称关健词" v-model="search" class="input-with-select" @keyup.enter.native="searchName()">
                                <el-button id="success" slot="append" icon="el-icon-search" @click="searchName()">搜索</el-button>
                            </el-input>
                        </div>
                    </div>
                </div>
                <el-row style="margin-top:15px;">

                        <el-table
                        :data="tableDataPublic"
                        style="width: 100%"
                        :header-cell-style="tableHeaderStyle"
                        >
                        <el-table-column
                            label="镜像名称"
                            min-width="19%"
                            align="left"
                            prop="tag"
                            >
                            <template slot-scope="scope">
                                <div style="display: flex;align-items: center;">
                                    <a class="text-over image_title" :title="scope.row.tag">{{ scope.row.tag }}</a>
                                    <i class="ri-lock-2-line" style="color: #fa8c16;" v-if="scope.row.isPrivate"></i>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="镜像描述"
                            min-width="28%"
                            align="left"
                            prop="description"
                            >
                            <template slot-scope="scope">
                                <div class="image_desc" :title="scope.row.description">{{ scope.row.description}}</div>
                                <div v-if="!!scope.row.topics">
                                    <span v-for="(topic,index) in scope.row.topics" class="ui repo-topic label topic">{{topic}}</span>
                                </div>
                                
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="type"
                            label="可用集群"
                            min-width="10%"
                            align="center"
                            >
                            <template slot-scope="scope">
                                {{scope.row.type | transformType}}
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="creator"
                            label="创建者"
                            min-width="8%"
                            align="center"
                            >
                            <template slot-scope="scope">
                                {{scope.row.isPrivate | transformPravite}}
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="createdUnix"
                            label="创建时间"
                            align="center"
                            min-width="14%"
                            >
                            <template slot-scope="scope">
                                {{scope.row.createdUnix | transformTimestamp}}
                            </template>
                        </el-table-column>
                        <el-table-column
                            align="center"
                            min-width="21%"
                            label="操作"
                            >
                            <template slot-scope="scope">
                                    <div style="display: flex;justify-content: flex-end;align-items: center;">
                                        <div style="display: flex;align-items: center;cursor:pointer;padding: 0 1rem;" @click="imageStar(scope.row.id)">
                                            <svg width="1.4em" height="1.4em" viewBox="0 0 32 32" class="heart-stroke"><path d="M4.4 6.54c-1.761 1.643-2.6 3.793-2.36 6.056.24 2.263 1.507 4.521 3.663 6.534a29110.9 29110.9 0 0010.296 9.633l10.297-9.633c2.157-2.013 3.424-4.273 3.664-6.536.24-2.264-.599-4.412-2.36-6.056-1.73-1.613-3.84-2.29-6.097-1.955-1.689.25-3.454 1.078-5.105 2.394l-.4.319-.398-.319c-1.649-1.316-3.414-2.143-5.105-2.394a7.612 7.612 0 00-1.113-.081c-1.838 0-3.541.694-4.983 2.038z"></path></svg>    
                                            <span style="line-height: 2;margin-left:0.3rem;">3</span>
                                        </div>
                                        <span style="padding: 0 1rem;color:#0366d6;cursor:pointer;" @click="copyUrl(scope.row.place)">复制地址</span>
                                    </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-row>
                <div class="ui container" style="margin-top:50px;text-align:center">
                        <el-pagination
                            background
                            @size-change="handleSizeChangePublic"
                            @current-change="handleCurrentChangePublic"
                            :current-page="currentPagePublic"
                            :page-size="pageSizePublic"
                            :page-sizes="[10,15,20]"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="totalNumPublic">
                        </el-pagination>
                </div>
            </template>
            <el-empty v-else :image-size="200"></el-empty>
            </el-tab-pane>
            <el-tab-pane label="我的镜像" name="second" v-loading="loadingCustom">
            <template v-if="tableDataCustom.length!==0">
                <div class="ui sixteen wide column">
                    <div class="ui two column stackable grid">
                        <div class="column">
                            <el-input placeholder="请输入镜像名称关健词" v-model="search" class="input-with-select" @keyup.enter.native="searchName()">
                                <el-button slot="append" id="success" icon="el-icon-search" @click="searchName()">搜索</el-button>
                            </el-input>
                        </div>   
                    </div>
                    
                </div>
                <el-row style="margin-top:15px;">
                    <el-table
                        :data="tableDataCustom"
                        style="width: 100%"
                        :header-cell-style="tableHeaderStyle"
                        >
                        <el-table-column
                            label="镜像名称"
                            min-width="19%"
                            align="left"
                            prop="tag"
                            >
                            <template slot-scope="scope">
                                <div style="display: flex;align-items: center;">
                                    <a class="text-over image_title" :title="scope.row.tag">{{ scope.row.tag }}</a>
                                    <i class="ri-lock-2-line" style="color: #fa8c16;" v-if="scope.row.isPrivate"></i>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="镜像描述"
                            min-width="28%"
                            align="left"
                            prop="description"
                            >
                            <template slot-scope="scope">
                                <div class="image_desc" :title="scope.row.description">{{ scope.row.description}}</div>
                                <div v-if="!!scope.row.topics">
                                    <span v-for="(topic,index) in scope.row.topics" class="ui repo-topic label topic">{{topic}}</span>
                                </div>
                                
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="type"
                            label="可用集群"
                            min-width="10%"
                            align="center"
                            >
                            <template slot-scope="scope">
                                {{scope.row.type | transformType}}
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="isPrivate"
                            label="状态"
                            min-width="8%"
                            align="center"
                            >
                            <template slot-scope="scope">
                                {{scope.row.isPrivate | transformPravite}}
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="createdUnix"
                            label="创建时间"
                            align="center"
                            min-width="14%"
                            >
                            <template slot-scope="scope">
                                {{scope.row.createdUnix | transformTimestamp}}
                            </template>
                        </el-table-column>
                        <el-table-column
                            align="center"
                            min-width="21%"
                            label="操作"
                            >
                            <template slot-scope="scope">
                                    <div style="display: flex;justify-content: flex-end;align-items: center;">
                                        <div style="display: flex;align-items: center;cursor:pointer;padding: 0 1rem;" @click="imageStar(scope.row.id)">
                                            <svg width="1.4em" height="1.4em" viewBox="0 0 32 32" class="heart-stroke"><path d="M4.4 6.54c-1.761 1.643-2.6 3.793-2.36 6.056.24 2.263 1.507 4.521 3.663 6.534a29110.9 29110.9 0 0010.296 9.633l10.297-9.633c2.157-2.013 3.424-4.273 3.664-6.536.24-2.264-.599-4.412-2.36-6.056-1.73-1.613-3.84-2.29-6.097-1.955-1.689.25-3.454 1.078-5.105 2.394l-.4.319-.398-.319c-1.649-1.316-3.414-2.143-5.105-2.394a7.612 7.612 0 00-1.113-.081c-1.838 0-3.541.694-4.983 2.038z"></path></svg>    
                                            <span style="line-height: 2;margin-left:0.3rem;">3</span>
                                        </div>
                                        <span style="padding: 0 1rem;color:#0366d6;cursor:pointer;" @click="copyUrl(scope.row.place)">复制地址</span>
                                        <div style="padding-left:1rem;cursor:pointer;">
                                            <el-dropdown size="medium">
                                            <span class="el-dropdown-link">
                                                更多<i class="el-icon-arrow-down el-icon--right"></i>
                                            </span>
                                            <el-dropdown-menu slot="dropdown">
                                                <el-dropdown-item @click.native="eidtImage(scope.row.id)">编辑</el-dropdown-item>
                                                <el-dropdown-item style="color: red;" @click.native="deleteImage(scope.row.id)">删除</el-dropdown-item>
                                            </el-dropdown-menu>
                                            </el-dropdown>
                                        </div>
                                    </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-row>
                <div class="ui container" style="margin-top:50px;text-align:center">
                        <el-pagination
                            background
                            @size-change="handleSizeChangeCustom"
                            @current-change="handleCurrentChangeCustom"
                            :current-page="currentPageCustom"
                            :page-size="pageSizeCustom"
                            :page-sizes="[5,15,20]"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="totalNumCustom">
                        </el-pagination>
                </div>
            </template>
            <el-empty v-else :image-size="200"></el-empty>
            </el-tab-pane>
            <el-tab-pane label="我收藏的镜像" name="third">
                <template v-if="tableDataStar.length!==0">
                    <div class="ui sixteen wide column">
                        <div class="ui two column stackable grid">
                            <div class="column">
                                <el-input placeholder="请输入镜像名称关健词" v-model="search" class="input-with-select">
                                    <el-button slot="append" id="success" icon="el-icon-search">搜索</el-button>
                                </el-input>
                            </div>
                        </div>
                    </div>
                    <el-row style="margin-top:15px;">
                        <el-table
                            :data="tableDataStar"
                            style="width: 100%"
                            :header-cell-style="tableHeaderStyle"
                            :default-sort="{prop:'createtime',order:'descending'}">
                            <el-table-column
                                label="镜像名称"
                                width="350"
                                align="left"
                                prop="name"
                                sortable
                                >
                                <template slot-scope="scope">
                                    <a class="text-over" :title="scope.row.name" style="cursor:default;color:#426290">{{ scope.row.name }}</a>
                                </template>
                            </el-table-column>
                            <el-table-column
                                label="文件路径/镜像描述"
                                width="450"
                                align="left"
                                
                                >
                                <template slot-scope="scope">
                                    <el-tooltip class="item" effect="dark" content="点击复制文件路径" placement="top">
                                        <a class="text-over" style="display:block;" @click="copyUrl(scope.row.place)">{{ scope.row.place }}</a>
                                    </el-tooltip>
                                    
                                    <span class="text-over" :title="scope.row.description | clearP">{{ scope.row.description | clearP }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="provider"
                                label="提供者"
                                width="120"
                                align="left"
                                sortable>
                            </el-table-column>
                            <el-table-column
                                prop="createtime"
                                label="创建时间"
                                align="center"
                                sortable>
                                <template slot-scope="scope">
                                    {{scope.row.createtime | transformTimestamp}}
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-row>
                    <div class="ui container" style="margin-top:50px;text-align:center">
                            <el-pagination
                                background
                                @size-change="handleSizeChangeStar"
                                @current-change="handleCurrentChangeStar"
                                :current-page="currentPageStar"
                                :page-size="pageSizeStar"
                                :page-sizes="[5,15,20]"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="totalNumStar">
                            </el-pagination>
                    </div>
                </template>
                
                <el-empty v-else :image-size="200"></el-empty>
            </el-tab-pane>
        </el-tabs>
  </div>
</div>

  
</template>

<script>

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




export default {
  components: {
    
  },
  data() {
    return {
      activeName: 'first',
      search:'',
      currentPagePublic:1,
      pageSizePublic:15,
      totalNumPublic:0,
      paramsPublic:{page:1,pageSize:15,q:'',recommend:false},
      tableDataPublic: [],
      loadingPublic:false,

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

      currentPageStar:1,
      pageSizeStar:15,
      totalNumStar:0,
      paramsStar:{page:1,pageSize:15,q:''},
      tableDataStar: [],
      loadingStar:false
    };
  },
  methods: {
    handleClick(tab, event) {
        if(tab.name=="first"){
            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'
        }
        
    },
    handleSizeChangePublic(val){
        this.paramsPublic.pageSize = val
        this.getImageListPublic()


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

    },
    handleSizeChangeCustom(val){
        this.paramsCustom.pageSize = val
        this.getImageListCustom()


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

    },
    handleSizeChangeStar(val){
        this.paramsStar.pageSize = val
        this.getImageListStar()


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

    deleteImage(id){
        this.$axios.delete('/image/'+id).then((res)=>{
            console.log(res)
            this.getImageListCustom()
        })
    },
    eidtImage(id){
        location.href = `/image/${id}/imageSquare`
    },
    copyUrl(url){
        const cInput = document.createElement('input')
        cInput.value = url
        document.body.appendChild(cInput)
        cInput.select()
        document.execCommand('Copy')
        cInput.remove()
    },
    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()
        }
        
    }

  },
  filters:{
      clearP(value){
          if(!value) return ''
          const reg = /\<\/?p\>/g;
          value = value.replace(reg,'')
          return value
      },
      transformType(val){
        if(val==0){
            return "GPU"
        }
      },
      transformPravite(val){
        if(val){
            return "私有"
        }else{
            return "公开"
        }
      },
      transformTimestamp(timestamp){
                // let a = new Date(timestamp).getTime();
                const date = new Date(parseInt(timestamp) * 1000);
                const Y = date.getFullYear() + '-';
                const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
                const D = (date.getDate() < 10 ? '0'+date.getDate() : date.getDate()) + '  ';
                const h = (date.getHours() < 10 ? '0'+date.getHours() : date.getHours()) + ':';
                const m = (date.getMinutes() <10 ? '0'+date.getMinutes() : date.getMinutes()) + ':' ;
                const s = (date.getSeconds() <10 ? '0'+date.getSeconds() : date.getSeconds()) ; // 秒 
                const dateString = Y + M + D + h + m + s;
                // console.log('dateString', dateString); // > dateString 2021-07-06 14:23
                return dateString;
            },
  },
  watch:{
      search(val){
          if(!val && this.activeName=='first'){
              this.paramsPublic.q = val
              this.getImageListPublic()
          }
          if(!val && this.activeName=='second'){
              this.paramsCustom.q = val
              this.getImageListCustom()
          }
          if(!val && this.activeName=='third'){
              this.paramsStar.q = val
              this.getImageListStar()
          }
      }

  },
  mounted() {
      this.getImageListPublic()
  },
  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;
}
/* /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{
    background-color: #5bb973;
    color: #000;
} */
/* /deep/ .el-pager li:hover{
    color: #000;
} */
#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
}
</style>