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

<template>
<div>
    <div class="ui container" style="width: 80%;">
        <div class="row" style="border: 1px solid #d4d4d5;margin-top: 15px;padding-top: 0;">
            
            <div class="ui attached segment">
                <div class="ui form ignore-dirty">
                    <div class="ui fluid action input">
                        <input type="text"  placeholder="搜镜像Tag/描述/标签..." v-model="search" @keyup.enter="searchName()">
                        <button class="ui blue button" @click="searchName()">搜索</button>
                    </div>
                </div>
            </div>
            <el-row style="padding: 1rem;">
                <el-col :span="2" style="margin-right: 1rem;">
                    <el-checkbox v-model="checked" style="padding: 0.5rem 1rem;">仅显示平台推荐</el-checkbox>
                </el-col>
                <el-col :span="6">
                    <el-dropdown @command="handleCommand" trigger="click" style="border: 1px solid rgba(34,36,38,.15);border-radius: 4px;padding: 0.5rem 1rem;">
                        <span class="el-dropdown-link">
                            {{dropdownPrivate}}<i class="el-icon-caret-bottom el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item :command="{label:'全部',private:''}">全部</el-dropdown-item>
                            <el-dropdown-item :command="{label:'公开',private:false}">公开</el-dropdown-item>
                            <el-dropdown-item :command="{label:'公开',private:true}">私有</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </el-col>
            </el-row>
            <el-row>
                <el-table
                    :data="tableDataCustom"
                    style="width: 100%"
                    :header-cell-style="tableHeaderStyle"
                    >
                    <el-table-column
                        label="镜像Tag"
                        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;padding: 0 1rem;" v-if="scope.row.isPrivate"></i>
                                <img v-if="scope.row.type==5"  src="/img/jian.svg" style="margin-left: 0.5rem;">
                            </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" style="cursor: default;">{{topic}}</span>
                            </div>
                            
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="cloudbrainType"
                        label="可用集群"
                        min-width="10%"
                        align="center"
                        >
                        <template slot-scope="scope">
                            {{scope.row.cloudbrainType | transformType}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="isPrivate"
                        label="状态"
                        min-width="8%"
                        align="center"
                        >
                        <template slot-scope="scope">
                            <span v-if="scope.row.isPrivate" style="color: rgb(250, 140, 22);">私有</span>
                            <span v-else style="color: rgb(19, 194, 141);">公开</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="creator"
                        label="创建者"
                        min-width="8%"
                        align="center"
                        >
                        <template slot-scope="scope">
                            <a :href="'/' + scope.row.userName" :title="scope.row.userName">
                                <img :src="scope.row.relAvatarLink" class="ui avatar image">
                            </a>
                        </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: default;;padding: 0 1rem;">
                                        <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;">{{scope.row.numStars}}</span>
                                    </div>
                                    <template v-if="!scope.row.isPrivate">
                                            <span style="padding: 0 1rem;color: rgb(250, 140, 22);cursor:pointer;" v-if="scope.row.type==5" @click="unSetRecommend(scope.$index,scope.row.id)">取消推荐</span>
                                            <span style="padding: 0 1rem;color: rgb(19, 194, 141);cursor:pointer;" v-else @click="setRecommend(scope.$index,scope.row.id)">设为推荐</span>
                                    </template>
                                    
                                    
                                    <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="padding:2rem 0;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>
        </div>
  </div>
</div>

  
</template>

<script>

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




export default {
  components: {
    
  },
  data() {
    return {
      search:'',
      dropdownPrivate:'全部',
      checked:false,
      currentPageCustom:1,
      pageSizeCustom:15,
      totalNumCustom:0,
      paramsCustom:{page:1,pageSize:15,q:'',recommend:false},
      tableDataCustom: [],
      starCustom:[],
      loadingCustom:false,
    };
  },
  methods: {
    tableHeaderStyle({row,column,rowIndex,columnIndex}){
        if(rowIndex===0){
            return 'background:#f5f5f6;color:#606266'
        }
    },

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


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

    },

    getImageListCustom(){
        this.loadingCustom = true
        this.$axios.get('/admin/images/data',{
            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
        })
    },
    deleteImage(id){
        console.log("deleteImage")
        let flag=1
        let _this = this
        $('.ui.basic.modal.images')
        .modal({
            onDeny: function() {
                flag = false
            },
            onApprove: function() {
                _this.$axios.delete('/image/'+id).then((res)=>{
                    console.log(res)
                    _this.getImageListCustom()
                })
                flag = true
            },
            onHidden: function() {
                if (flag == false) {
                    $('.alert').html('您已取消操作').removeClass('alert-success').addClass('alert-danger').show().delay(1500).fadeOut();
                }else{
                    $('.alert').html('删除成功').removeClass('alert-danger').addClass('alert-success').show().delay(1500).fadeOut();
                }
            }
        })
        .modal('show')
    },
    eidtImage(id){
        location.href = `/image/${id}/imageAdmin`
    },
    imageStar(index,id,isStar){
        if(isStar){
            this.$axios.put(`/image/${id}/action/unstar`).then((res)=>{
                console.log(res)
                this.tableDataPublic[index].numStars = this.tableDataPublic[index].numStars - 1
                this.tableDataPublic[index].isStar = false
            })
        }else{
            this.$axios.put(`/image/${id}/action/star`).then((res)=>{
                console.log(res)
                this.tableDataPublic[index].numStars = this.tableDataPublic[index].numStars + 1
                this.tableDataPublic[index].isStar = true
            })
        }
        
    },
    copyUrl(url){
        const cInput = document.createElement('input')
        cInput.value = url
        document.body.appendChild(cInput)
        cInput.select()
        document.execCommand('Copy')
        cInput.remove()
    },
    searchName(){
        this.paramsCustom.q = this.search
        this.paramsCustom.page = 1
        this.getImageListCustom()
        
    },
    setRecommend(index,id){
        this.$axios.put(`/admin/image/${id}/action/recommend`).then((res)=>{
            console.log(res)
            this.tableDataCustom[index].type = 5

        })
    },
    unSetRecommend(index,id){
        this.$axios.put(`/admin/image/${id}/action/unrecommend`).then((res)=>{
            console.log(res)
            this.tableDataCustom[index].type = 0
        })
    },
    handleCommand(command){
        console.log(command)
        this.dropdownPrivate = command.label
        this.paramsCustom.private = command.private
        this.getImageListCustom()

    }

  },
  filters:{
      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){
        this.paramsCustom.q = val
        this.getImageListCustom()
    },
    checked(val){
        this.paramsCustom.recommend = val
        this.getImageListCustom()
    }

  },
  mounted() {
      this.getImageListCustom()
  },
  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-icon--right{
    margin-left: 1.5rem;
}
/* /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;
    
    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: #FA8C16;
    stroke-width: 2;
    fill: #fff
}
.stars_active{
    fill: #FA8C16 !important;
    stroke:#FA8C16 !important
}
.header-new-drop{
    width: 100%;
}
</style>