1Panel/frontend/src/views/app-store/installed/index.vue

<template>
    <ComplexTable :pagination-config="paginationConfig" :data="data" @search="search" v-loading="loading">
        <el-table-column :label="$t('app.name')" prop="name"></el-table-column>
        <!-- <el-table-column :label="$t('app.description')" prop="description"></el-table-column> -->
        <el-table-column :label="$t('app.appName')" prop="appName"></el-table-column>
        <el-table-column :label="$t('app.version')" prop="version"></el-table-column>
        <el-table-column :label="$t('app.container')">
            <template #default="{ row }">
                {{ row.ready / row.total }}
            </template>
        </el-table-column>
        <el-table-column :label="$t('app.status')">
            <template #default="{ row }">
                <el-popover
                    v-if="row.status === 'Error'"
                    placement="bottom"
                    :width="400"
                    trigger="hover"
                    :content="row.message"
                >
                    <template #reference>
                        <el-tag type="error">{{ row.status }}</el-tag>
                    </template>
                </el-popover>
                <el-tag v-else>{{ row.status }}</el-tag>
            </template>
        </el-table-column>
        <el-table-column
            prop="createdAt"
            :label="$t('commons.table.date')"
            :formatter="dateFromat"
            show-overflow-tooltip
        />
        <fu-table-operations
            width="200px"
            :ellipsis="10"
            :buttons="buttons"
            :label="$t('commons.table.operate')"
            fixed="right"
            fix
        />
    </ComplexTable>
    <el-dialog v-model="open" :title="$t('commons.msg.operate')" :before-close="handleClose" width="30%">
        <el-alert :title="getMsg(operateReq.operate)" type="warning" :closable="false" show-icon />
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="handleClose">{{ $t('commons.button.cancel') }}</el-button>
                <el-button type="primary" @click="operate">{{ $t('commons.button.confirm') }}</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import { GetAppInstalled, InstalledOp } from '@/api/modules/app';
import { onMounted, reactive, ref } from 'vue';
import ComplexTable from '@/components/complex-table/index.vue';
import { dateFromat } from '@/utils/util';
import i18n from '@/lang';
import { ElMessage } from 'element-plus';

let data = ref<any>();
let loading = ref(false);
const paginationConfig = reactive({
    currentPage: 1,
    pageSize: 20,
    total: 0,
});
let open = ref(false);
let operateReq = reactive({
    installId: 0,
    operate: '',
});

const search = () => {
    const req = {
        page: paginationConfig.currentPage,
        pageSize: paginationConfig.pageSize,
    };

    GetAppInstalled(req).then((res) => {
        data.value = res.data.items;
        paginationConfig.total = res.data.total;
    });
};

const openOperate = (row: any, op: string) => {
    operateReq.installId = row.id;
    operateReq.operate = op;
    open.value = true;
};

const operate = async () => {
    open.value = false;
    loading.value = true;
    await InstalledOp(operateReq)
        .then(() => {
            ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
            search();
        })
        .finally(() => {
            loading.value = false;
        });
};

const handleClose = () => {
    open.value = false;
};

const getMsg = (op: string) => {
    let tip = '';
    switch (op) {
        case 'up':
            tip = i18n.global.t('app.up');
            break;
        case 'down':
            tip = i18n.global.t('app.down');
            break;
        case 'restart':
            tip = i18n.global.t('app.restart');
            break;
        case 'delete':
            tip = i18n.global.t('app.deleteWarn');
            break;
        default:
    }
    return tip;
};

const buttons = [
    {
        label: i18n.global.t('app.restart'),
        click: (row: any) => {
            openOperate(row, 'restart');
        },
    },
    {
        label: i18n.global.t('app.up'),
        click: (row: any) => {
            openOperate(row, 'up');
        },
    },
    {
        label: i18n.global.t('app.down'),
        click: (row: any) => {
            openOperate(row, 'down');
        },
    },
    {
        label: i18n.global.t('app.delete'),
        click: (row: any) => {
            openOperate(row, 'delete');
        },
    },
];

onMounted(() => {
    search();
});
</script>

<style lang="scss">
.i-card {
    height: 60px;
    cursor: pointer;
    .content {
        .image {
            width: auto;
            height: auto;
        }
    }
}
.i-card:hover {
    border: 1px solid;
    border-color: $primary-color;
    z-index: 1;
}
</style>