graphite_vue/src/views/oreManage/components/AddOre.vue

<template>
	<div class="bg-white text-xl text-text px-5 py-7 rounded-lg">
		<h1 class="font-medium">添加矿石</h1>
		<section>
			<div class="grid grid-cols-[5rem_1fr] gap-x-8 gap-y-4 min-w-[30rem] mt-4 mb-7 px-4">
				<span class="text-right">矿石名称</span>
				<input type="text" class="border border-[#eee] rounded-sm px-2" v-model="oreObj.oresName" />
			</div>
		</section>
		<footer class="flex justify-center gap-x-6">
			<button class="btn-dark px-6 py-1" @click="onConfirm">确定</button>
			<button class="btn-light px-6 py-1" @click="$emit('cancel')">取消</button>
		</footer>
	</div>
</template>

<script setup lang="ts">
import type { Ore } from "@/services/ore/oreManage";
import { showToast } from "vant";
import { ref } from "vue";

const props = defineProps<{ ore: Ore | undefined }>();

const oreObj = ref<Ore>(props.ore || { oresName: "" } as Ore);

const emit = defineEmits<{
	(e: "confirm", ore: Ore): void;
	(e: "cancel"): void;
}>();


function onConfirm() {
	if (oreObj.value.oresName === "") {
		showToast("名称不能为空");
		return;
	}
	emit("confirm", oreObj.value);
}
</script>