graphite_vue/src/views/oreManage/index.vue

<template>
	<div class="component-page">
		<section class="flex items-center h-20 gap-3 pl-3">
			<button class="btn-light px-3 py-1 text-xs" @click="onAddOre">添加矿石</button>
			<button
				:disabled="selectedIds.length !== 1"
				class="btn-light px-3 py-1 text-xs disabled:btn-light-disabled"
				@click="onEditOre">
				编辑矿石
			</button>
			<button
				:disabled="selectedIds.length === 0"
				class="btn-light px-3 py-1 text-xs disabled:btn-light-disabled"
				@click="onDeleteOre">
				删除矿石
			</button>

			<button
				:disabled="selectedIds.length !== 1"
				class="btn-light px-3 py-1 text-xs ml-12 disabled:btn-light-disabled"
				@click="onAddCraft">
				添加工艺
			</button>
			<button
				:disabled="selectedCraftIds.length !== 1"
				class="btn-light px-3 py-1 text-xs disabled:btn-light-disabled"
				@click="onEditCraft">
				编辑工艺
			</button>
			<button
				:disabled="selectedCraftIds.length === 0"
				class="btn-light px-3 py-1 text-xs disabled:btn-light-disabled"
				@click="onDeleteCraft">
				删除工艺
			</button>
		</section>

		<section>
			<header class="h-10 flex items-center bg-[#000]/[0.02] text-xs pr-3 text-text">
				<div class="w-10 self-stretch flex justify-center items-center" @click="onSelectAll">
					<img
						class="w-4 h-4"
						:src="
							selectedIds.length > 0
								? selectedIds.length === oreList.length
									? icon_select
									: icon_partial
								: icon_unselect
						"
						alt="icon" />
				</div>
				<p class="w-14">ID</p>
				<p class="w-[18rem]">矿石名称</p>
				<p>工艺</p>
			</header>
			<main class="overflow-auto" style="max-height: calc(100vh - var(--headerHeight) - var(--footerHeight) - 120px)">
				<div
					v-for="ore in oreList"
					:key="ore.id"
					class="min-h-10 flex items-center text-xs pr-3 text-[#6e6e6e] border-b border-b-[#f8f8f8]"
					@click="onItemSelect(ore)">
					<div class="w-10 self-stretch flex justify-center items-center">
						<img class="w-4 h-4" :src="selectedIds.includes(ore.id) ? icon_select : icon_unselect" alt="" />
					</div>
					<p class="w-14">{{ ore.id }}</p>
					<p class="w-[18rem]">{{ ore.oresName }}</p>
					<div class="flex-auto">
						<ul class="appearance-none flex items-center gap-3 text-sm flex-wrap my-2">
							<li
								v-for="craft in ore.craftsList"
								:key="craft.id"
								class="bg-[#F4F4F4] rounded-sm px-2 h-7 leading-7"
								:class="`${selectedCraftIds.includes(craft.id) && 'bg-primary text-white'}`"
								@click.stop="onCraftItemSelect(craft)">
								{{ craft.name }}
							</li>
						</ul>
					</div>
				</div>
			</main>
		</section>

		<van-overlay v-if="showCraftEditDialog" :show="true">
			<div class="flex justify-center items-center h-full">
				<CraftConfig :craft="craftOnEdit" @ok="confirmCraftEdit" @cancel="showCraftEditDialog = false" />
			</div>
		</van-overlay>

		<van-overlay v-if="showEditDialog" :show="true">
			<div class="flex justify-center items-center h-full">
				<AddOre :ore="oreOnEdit" @confirm="addOrUpdateOre" @cancel="showEditDialog = false" />
			</div>
		</van-overlay>
	</div>
</template>

<script lang="ts" setup>
import CraftConfig from "./components/CraftConfig.vue";
import icon_unselect from "@/assets/Icon-unselect.svg";
import icon_select from "@/assets/Icon-select.svg";
import icon_partial from "@/assets/Icon-partial-select.svg";

import { onMounted, ref } from "vue";
import { showToast } from "vant";
import {
	createCraft,
	createOre,
	deleteCraft,
	deleteOre,
	getOreList,
	updateCraft,
	updateOre,
	type Craft,
	type Ore,
} from "@/services/ore/oreManage";
import AddOre from "./components/AddOre.vue";
import * as R from "ramda";
import { ElMessageBox } from "element-plus";

const showEditDialog = ref<boolean>(false);
const oreOnEdit = ref<Ore | undefined>();
const showCraftEditDialog = ref<boolean>(false);
const craftOnEdit = ref<Craft | undefined>();

const oreList = ref<Ore[]>([]);
const selectedIds = ref<number[]>([]);

const selectedCraftIds = ref<number[]>([]);

function getOres() {
	getOreList({ pageNum: 1, pageSize: 9999 }).then(res => {
		if (res.success) {
			oreList.value = res.data.list;
		} else {
			showToast(res.msg);
		}
	});
}

onMounted(() => {
	getOres();
});

function onItemSelect(ore: Ore) {
	if (selectedIds.value.includes(ore.id)) {
		selectedIds.value = selectedIds.value.filter(id => id !== ore.id);
	} else {
		selectedIds.value = [...selectedIds.value, ore.id];
	}
}

function onCraftItemSelect(craft: Craft) {
	if (selectedCraftIds.value.includes(craft.id)) {
		selectedCraftIds.value = selectedCraftIds.value.filter(id => id !== craft.id);
	} else {
		selectedCraftIds.value = [...selectedCraftIds.value, craft.id];
	}
}

function onSelectAll() {
	if (selectedIds.value.length === oreList.value.length) {
		selectedIds.value = [];
	} else {
		selectedIds.value = oreList.value.map(ore => ore.id);
	}
}
function addOrUpdateOre(ore: Ore) {
	let req;
	if (ore.id) {
		req = updateOre({ id: ore.id, name: ore.oresName });
	} else {
		req = createOre({ name: ore.oresName });
	}
	req.then(res => {
		if (res.success) {
			showEditDialog.value = false;
			getOres();
		} else {
			showToast(res.msg);
		}
	});
}
function onAddOre() {
	oreOnEdit.value = undefined;
	showEditDialog.value = true;
}
function onEditOre() {
	if (selectedIds.value.length === 0) return;
	oreOnEdit.value = oreList.value.find(ore => ore.id === selectedIds.value[0]);
	showEditDialog.value = true;
}
function onDeleteOre() {
	if (selectedIds.value.length === 0) return;
	ElMessageBox.confirm("确定删除矿石？", {
		confirmButtonText: "确定",
		cancelButtonText: "取消",
		center: true,
	}).then(() => {
		deleteOre(selectedIds.value.join(",")).then(res => {
			if (res.success) {
				selectedIds.value = [];
				getOres();
			} else {
				showToast(res.msg);
			}
		});
	});
}
function onAddCraft() {
	craftOnEdit.value = undefined;
	showCraftEditDialog.value = true;
}
function onEditCraft() {
	if (selectedCraftIds.value.length === 0) return;
	const allCrafts = R.pipe(R.pluck("craftsList"), R.flatten)(oreList.value);
	craftOnEdit.value = allCrafts.find(craft => craft.id === selectedCraftIds.value[0]);
	showCraftEditDialog.value = true;
}
function onDeleteCraft() {
	if (selectedCraftIds.value.length === 0) return;

	ElMessageBox.confirm("确定删除工艺？", {
		confirmButtonText: "确定",
		cancelButtonText: "取消",
		center: true,
	}).then(() => {
		deleteCraft(selectedCraftIds.value.join(",")).then(res => {
			if (res.success) {
				selectedCraftIds.value = [];
				getOres();
			} else {
				showToast(res.msg);
			}
		});
	});
}
function confirmCraftEdit(craft: Craft) {
	let req;
	if (craft.id) {
		req = updateCraft({ id: craft.id, name: craft.name, steps: craft.steps });
	} else {
		req = createCraft({ name: craft.name, steps: craft.steps, oresId: selectedIds.value[0] });
	}
	req.then(res => {
		if (res.success) {
			showCraftEditDialog.value = false;
			getOres();
		} else {
			showToast(res.msg);
		}
	});
}
</script>