优化方法：容器追加液体对象

src/services/liquid/liquidManage.ts

@@ -2,16 +2,16 @@ import type { BaseResponse } from "../httpRequest";
 import httpRequest from "../httpRequest";
 
 export type Liquid = {
-    id: number;
-    name: string;
-}
+	id: number;
+	name: string;
+};
 
 export function getLiquidList(params: { pageNum: number; pageSize: number }) {
-    return httpRequest<BaseResponse<{ list: Liquid[]; total: number }>>({ url: "/api/sols/list", params });
+	return httpRequest<BaseResponse<{ list: Liquid[]; total: number }>>({ url: "/api/sols/list", params });
 }
-export function createLiquid(params: { name: string; }) {
-    return httpRequest<BaseResponse>({ url: "/api/sols/", method: "POST", params });
+export function createLiquid(params: { name: string }) {
+	return httpRequest<BaseResponse>({ url: "/api/sols/", method: "POST", params });
 }
 export function deleteLiquid(ids: string) {
-    return httpRequest<BaseResponse>({ url: `/api/sols/${ids}`, method: "DELETE" });
-}
+	return httpRequest<BaseResponse>({ url: `/api/sols/${ids}`, method: "DELETE" });
+}

src/services/sysConfig/sysConfig.ts

@@ -31,6 +31,7 @@ export type Container = {
 	type: 0 | 1; // 0:酸液 1:废液
 	solutionId: number;
 };
+
 export function getContainerList() {
 	return httpRequest<BaseResponse<Container[]>>({ url: "/api/container/list" });
 }

src/stores/setting.ts

@@ -4,6 +4,8 @@ import { defineStore } from "pinia";
 import { computed, ref } from "vue";
 import * as R from "ramda";
 
+export type ContainerWithLiquid = Container & { solution: Liquid };
+
 export const useSettingStore = defineStore("setting", () => {
 	const configs = ref<ConfigItem[] | undefined>();
 	const setConfigs = (usr: ConfigItem[]) => {
@@ -20,10 +22,16 @@ export const useSettingStore = defineStore("setting", () => {
 	const setLiquidList = (liquids: Liquid[]) => {
 		liquidList.value = liquids;
 	};
-	// 酸液列表 ID映射表： 使用方法 liquidIdMap[液体ID] -> Liquid对象
+	// 酸液列表 ID映射表： 使用方法 liquidIdMap.value[液体ID] -> Liquid对象
 	const liquidIdMap = computed(() => {
-		//@ts-ignore
-		return R.groupBy(l => l.id, liquidList.value || []);
+		return R.reduce(
+			(acc: { [p: number]: Liquid }, curr: Liquid) => {
+				acc[curr.id] = curr;
+				return acc;
+			},
+			{},
+			liquidList.value || []
+		);
 	});
 	// 8个酸桶
 	const heatContainers = computed(() => {
@@ -32,7 +40,9 @@ export const useSettingStore = defineStore("setting", () => {
 	});
 	// 配置了酸液的桶
 	const heatContainerWithLiquid = computed(() => {
-		return heatContainers.value.filter(c => c.solutionId);
+		return heatContainers.value
+			.filter(c => c.solutionId)
+			.map(c => ({ ...c, solution: liquidIdMap.value[c.solutionId] } as ContainerWithLiquid));
 	});
 	// 配置了桶的酸液
 	const availableLiquids = computed(() => {