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="公共镜像(云脑1)" name="first" v-loading="loading">
                <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 class="column right aligned">
                            <el-dropdown>
                                <span class="el-dropdown-link">
                                    排序<i class="el-icon-caret-bottom"></i>
                                </span>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item>最早创建</el-dropdown-item>
                                    <el-dropdown-item>最新创建</el-dropdown-item>
                                    <el-dropdown-item divided>按镜像字母顺序排序</el-dropdown-item>
                                    <el-dropdown-item>按镜像字母逆序排序</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </div> -->
                    </div>
                </div>

                <el-row style="margin-top:15px;">

                    <el-table
                        :data="tableData"
                        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" style="cursor:default;color:#426290" :title="scope.row.name">{{ 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="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-size="pageSize"
                            :page-sizes="[5,10,20]"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="totalNum">
                        </el-pagination>
                </div>
                    
                
            </el-tab-pane>
            <el-tab-pane label="自定义镜像(云脑1)" name="second" v-loading="loading1">
                <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 class="column right aligned">
                            <el-dropdown>
                                <span class="el-dropdown-link">
                                    排序<i class="el-icon-caret-bottom"></i>
                                </span>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item>最早创建</el-dropdown-item>
                                    <el-dropdown-item>最新创建</el-dropdown-item>
                                    <el-dropdown-item divided>按镜像字母顺序排序</el-dropdown-item>
                                    <el-dropdown-item>按镜像字母逆序排序</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </div> -->
                        
                    </div>
                    
                </div>

                <el-row style="margin-top:15px;">

                    <el-table
                        :data="tableData1"
                        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="handleSizeChange1"
                            @current-change="handleCurrentChange1"
                            :current-page="currentPage1"
                            :page-size="pageSize1"
                            :page-sizes="[5,10,20]"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="totalNum1">
                        </el-pagination>
                </div>
                

            </el-tab-pane>
            <el-tab-pane label="公共镜像(云脑2)" name="third">
                
                <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 class="column right aligned">
                            <el-dropdown>
                                <span class="el-dropdown-link">
                                    排序<i class="el-icon-caret-bottom"></i>
                                </span>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item>最早创建</el-dropdown-item>
                                    <el-dropdown-item>最新创建</el-dropdown-item>
                                    <el-dropdown-item divided>按镜像字母顺序排序</el-dropdown-item>
                                    <el-dropdown-item>按镜像字母逆序排序</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </div> -->
                        
                    </div>
                    
                </div>

                <el-empty :image-size="200"></el-empty>
            </el-tab-pane>
            <el-tab-pane label="自定义镜像(云脑2)" name="fourth">
                
                <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 class="column right aligned">
                            <el-dropdown>
                                <span class="el-dropdown-link">
                                    排序<i class="el-icon-caret-bottom"></i>
                                </span>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item>最早创建</el-dropdown-item>
                                    <el-dropdown-item>最新创建</el-dropdown-item>
                                    <el-dropdown-item divided>按镜像字母顺序排序</el-dropdown-item>
                                    <el-dropdown-item>按镜像字母逆序排序</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </div>  -->
                    </div>
                </div>

                <el-empty :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:'',
      currentPage:1,
      pageSize:10,
      totalNum:0,
      params:{page:1,size:10,name:''},
      tableData: [],
      loading:false,

      currentPage1:1,
      pageSize1:10,
      totalNum1:0,
      params1:{page:1,size:10,name:''},
      tableData1: [],
      loading1:false
    };
  },
  methods: {
    handleClick(tab, event) {
        if(tab.name=="first"){
            this.getImageList()
        }
        if(tab.name=="second"){
            this.getImageList1()
        }
        
      },
    tableHeaderStyle({row,column,rowIndex,columnIndex}){
        
        if(rowIndex===0){
            return 'background:#f5f5f6;color:#606266'
        }
        
    },
    handleSizeChange(val){
        this.params.size = val
        this.getImageList()


    },
    handleCurrentChange(val){
        this.params.page = val
        this.getImageList()

    },
    handleSizeChange1(val){
        this.params1.size = val
        this.getImageList1()


    },
    handleCurrentChange1(val){
        this.params1.page = val
        this.getImageList1()

    },
    getImageList(){
        this.loading = true
        this.$axios.get('/explore/images/public',{
            params:this.params
        }).then((res)=>{
            
            this.totalNum = res.data.count
            this.tableData = res.data.rows
            this.loading = false 
        })
    },

    getImageList1(){
        this.loading1 = true
        this.$axios.get('/explore/images/custom',{
            params:this.params1
        }).then((res)=>{
            
            this.totalNum1 = res.data.count
            this.tableData1 = res.data.rows
            this.loading1 = false
        })
    },
    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.params.name = this.search
            this.params.page = 1
            this.getImageList()
        }
        if(this.activeName=='second'){
            this.params1.name = this.search
            this.params1.page = 1
            this.getImageList1()
        }
        
    }

  },
  filters:{
    



      clearP(value){
          if(!value) return ''
          const reg = /\<\/?p\>/g;
          value = value.replace(reg,'')
          return value

      },
      transformTimestamp(timestamp){
                let a = new Date(timestamp).getTime();
                const date = new Date(a);
                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.params.name = val
              this.getImageList()
          }
          if(!val && this.activeName=='second'){
              this.params1.name = val
              this.getImageList1()
          }
      }

  },
  mounted() {
      this.getImageList()
  },
  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;
}
</style>