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

<template>
    <div>
        <div class="ui container" style="width: 100% !important;padding-right: 0;">
            <div class="ui grid" style="margin: 0 !important">
                <div class="row" style="border: 1px solid #d4d4d5;margin-top:0px;padding-top: 0;">
                    <div class="ui attached segment">
                        <div class="ui form ignore-dirty">
                            <div class="ui fluid action input">
                                <input type="text" :placeholder="$i18n['cloudeBrainMirror']['placeholder']" v-model="search"
                                    @keyup.enter="searchName()">
                                <button class="ui blue button" @click="searchName()">{{$i18n['cloudeBrainMirror']['search']}}</button>
                            </div>
                        </div>
                    </div>

                    <div class="ui ten wide column" style="margin: 1rem 0;">
                        <el-checkbox v-model="checked" style="padding: 0.5rem 1rem;">{{$i18n['cloudeBrainMirror']['platform_recommendations']}}</el-checkbox>
                        <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:$i18n['all'],private:''}">{{$i18n['all']}}</el-dropdown-item>
                                <el-dropdown-item :command="{label:$i18n['cloudeBrainMirror']['public'],private:false}">{{$i18n['cloudeBrainMirror']['public']}}</el-dropdown-item>
                                <el-dropdown-item :command="{label:$i18n['cloudeBrainMirror']['private'],private:true}">{{$i18n['cloudeBrainMirror']['private']}}</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                    <div class="ui six wide column right aligned" style="margin: 1rem 0;">
                        <a class="ui blue small button" href="/admin/images/commit_image">{{$i18n['cloudeBrainMirror']['create_cloud_brain_mirror']}}</a>
                    </div>
                    <div class="ui sixteen wide column" style="padding: 0;overflow-x: auto;">
                        <el-table :data="tableDataCustom" style="width: 100%;min-width:1700px;" :header-cell-style="tableHeaderStyle">
                            <el-table-column :label="$i18n['cloudeBrainMirror']['mirror_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="$i18n['cloudeBrainMirror']['mirror_description']" 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="$i18n['cloudeBrainMirror']['available_clusters']" min-width="10%" align="center">
                                <template slot-scope="scope">
                                    {{scope.row.cloudbrainType | transformType}}
                                </template>
                            </el-table-column>
                            <el-table-column prop="isPrivate" :label="$i18n['cloudeBrainMirror']['state']" min-width="8%" align="center">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.isPrivate" style="color: rgb(250, 140, 22);">{{$i18n['cloudeBrainMirror']['private']}}</span>
                                    <span v-else style="color: rgb(19, 194, 141);">{{$i18n['cloudeBrainMirror']['public']}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="creator" :label="$i18n['cloudeBrainMirror']['creator']" min-width="7%" align="center">
                                <template slot-scope="scope">
                                    <a v-if="scope.row.userName||scope.row.relAvatarLink"
                                        :href="'/' + scope.row.userName" :title="scope.row.userName">
                                        <img :src="scope.row.relAvatarLink" class="ui avatar image">
                                    </a>
                                    <a v-else>
                                        <img class="ui avatar image" title="Ghost" src="/user/avatar/ghost/-1">
                                    </a>
                                </template>
                            </el-table-column>
                            <el-table-column prop="updatedUnix" :label="$i18n['cloudeBrainMirror']['creation_time']" align="center" min-width="13%">
                                <template slot-scope="scope">
                                    {{scope.row.updatedUnix | transformTimestamp}}
                                </template>
                            </el-table-column>
                            <el-table-column align="center" min-width="23%" :label="$i18n['cloudeBrainMirror']['operation']">
                                <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>
                                        <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)">{{$i18n['cloudeBrainMirror']['cancel_recommendation']}}</span>
                                        <span style="padding: 0 1rem;color: rgb(19, 194, 141);cursor:pointer;"
                                            v-if="scope.row.type!==5 && !scope.row.isPrivate"
                                            @click="setRecommend(scope.$index,scope.row.id)">{{$i18n['cloudeBrainMirror']['set_as_recommended']}}</span>
                                        <span style="padding: 0 1rem;color:#0366d6;cursor:pointer;"
                                            @click="copyUrl(scope.row.place)">{{$i18n['cloudeBrainMirror']['copy_address']}}</span>
                                        <div style="padding-left:1rem;cursor:pointer;">
                                            <el-dropdown size="medium">
                                                <span class="el-dropdown-link">
                                                    {{$i18n['cloudeBrainMirror']['more']}}<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)">{{$i18n['cloudeBrainMirror']['edit']}}
                                                    </el-dropdown-item>
                                                    <el-dropdown-item style="color: red;"
                                                        @click.native="deleteImage(scope.row.id)">{{$i18n['cloudeBrainMirror']['delete']}}</el-dropdown-item>
                                                </el-dropdown-menu>
                                            </el-dropdown>
                                        </div>
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <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>
    </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) => {
                    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) {
                let flag = 1
                let _this = this
                $('.ui.basic.modal.images')
                    .modal({
                        onDeny: function () {
                            flag = false
                        },
                        onApprove: function () {
                            _this.$axios.delete('/image/' + id).then((res) => {
                                _this.getImageListCustom()
                            })
                            flag = true
                        },
                        onHidden: function () {
                            if (flag == false) {
                                $('.alert').html(_this.$i18n['canceled_operation']).removeClass('alert-success').addClass('alert-danger').show().delay(1500).fadeOut();
                            } else {
                                $('.alert').html(_this.$i18n['successfully_deleted']).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) => {
                        this.tableDataPublic[index].numStars = this.tableDataPublic[index].numStars - 1
                        this.tableDataPublic[index].isStar = false
                    })
                } else {
                    this.$axios.put(`/image/${id}/action/star`).then((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) => {
                    this.tableDataCustom[index].type = 5
                })
            },
            unSetRecommend(index, id) {
                this.$axios.put(`/admin/image/${id}/action/unrecommend`).then((res) => {
                    this.tableDataCustom[index].type = 0
                })
            },
            handleCommand(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 this.$i18n['cloudeBrainMirror']['private'];
                } else {
                    return this.$i18n['cloudeBrainMirror']['public'];
                }
            },
            transformTimestamp(timestamp) {
                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;
                return dateString;
            },
        },
        watch: {
            checked(val) {
                this.paramsCustom.page = 1
                this.paramsCustom.recommend = val
                this.getImageListCustom()
            }

        },
        mounted() {
            this.getImageListCustom()
        },
        created() {
            this.$i18n = window.i18n;
            this.dropdownPrivate = this.$i18n['all'];
        }

    };
</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
    }

    #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>