jcloud/dashboard/src2/components/server/ServerActionCell.vue

<template>
	<div class="flex items-center justify-between gap-1">
		<div>
			<h3 class="text-base font-medium">{{ props.actionLabel }}</h3>
			<p class="mt-1 text-p-base text-gray-600">{{ props.description }}</p>
		</div>
		<Button
			v-if="server?.pg"
			class="whitespace-nowrap"
			@click="getServerActionHandler(props.actionLabel)"
		>
			<p
				:class="
					group === 'Dangerous Actions' ? 'text-red-600' : 'text-gray-800'
				"
			>
				{{ props.buttonLabel }}
			</p>
		</Button>
	</div>
</template>

<script setup>
import { getCachedDocumentResource, createDocumentResource } from 'jingrow-ui';
import { toast } from 'vue-sonner';
import { confirmDialog } from '../../utils/components';
import router from '../../router';

const props = defineProps({
	serverName: { type: String, required: true },
	serverType: { type: String, required: true },
	actionLabel: { type: String, required: true },
	method: { type: String, required: true },
	description: { type: String, required: true },
	buttonLabel: { type: String, required: true },
	group: { type: String, required: false }
});

const server = getCachedDocumentResource(props.serverType, props.serverName);

function getServerActionHandler(action) {
	const actionHandlers = {
		'Reboot server': onRebootServer,
		'Rename server': onRenameServer,
		'Drop server': onDropServer
	};
	if (actionHandlers[action]) {
		actionHandlers[action].call(this);
	}
}

function onRebootServer() {
	confirmDialog({
		title: '重启服务器',
		message: `您确定要重启服务器 <b>${server.pg.name}</b> 吗？`,
		fields: [
			{
				label: '请输入服务器名称以确认',
				fieldname: 'confirmServerName'
			}
		],
		primaryAction: {
			label: '重启服务器'
		},
		onSuccess({ hide, values }) {
			if (server.reboot.loading) return;
			if (values.confirmServerName !== server.pg.name) {
				throw new Error('服务器名称不匹配');
			}
			toast.promise(
				server.reboot.submit(null, {
					onSuccess() {
						hide();
					}
				}),
				{
					loading: '正在重启...',
					success: '服务器已重启',
					error: '重启服务器失败'
				}
			);
		}
	});
}

function onRenameServer() {
	confirmDialog({
		title: '重命名服务器',
		fields: [
			{
				label: '输入服务器的新名称',
				fieldname: 'title'
			}
		],
		primaryAction: {
			label: '重命名'
		},
		onSuccess({ hide, values }) {
			if (server.rename.loading) return;
			toast.promise(
				server.rename.submit(
					{
						title: values.title
					},
					{
						onSuccess() {
							hide();
						}
					}
				),
				{
					loading: '正在更新名称...',
					success: '名称已更新',
					error: '更新名称失败'
				}
			);
		}
	});
}

function onDropServer() {
	const databaseServer = createDocumentResource({
		pagetype: 'Database Server',
		name: server.pg.database_server
	});

	confirmDialog({
		title: '删除服务器',
		message: `<div class="prose text-base">您确定要删除您的服务器吗？<br><br>以下服务器将被删除<ul><li>${server.pg.title} (<b>${server.pg.name}</b>)</li><li>${databaseServer.pg.title} (<b>${server.pg.database_server}</b>)</li></ul><br>此操作无法撤销。</div>`,
		fields: [
			{
				label: "请输入服务器名称或标题以确认",
				fieldname: 'confirmServerName'
			}
		],
		primaryAction: {
			label: '删除服务器',
			theme: 'red'
		},
		onSuccess({ hide, values }) {
			if (server.dropServer.loading) return;
			if (
				values.confirmServerName !== server.pg.name &&
				values.confirmServerName !== server.pg.database_server &&
				values.confirmServerName.trim() !== server.pg.title.trim() &&
				values.confirmServerName.trim() !== databaseServer.pg.title.trim()
			) {
				throw new Error('服务器名称不匹配');
			}
toast.promise(server.dropServer.submit().then(hide), {
				loading: '正在删除...',
				success: () => {
					router.push({ name: 'Server List' });
					return '服务器已删除';
				},
				error: error =>
					error.messages.length
						? error.messages.join('\n')
						: '删除服务器失败'
			});
		}
	});
}
</script>