溶液管理页面接口

src/services/liquid/liquidManage.ts

@@ -0,0 +1,17 @@
+import type { BaseResponse } from "../httpRequest";
+import httpRequest from "../httpRequest";
+
+export type Liquid = {
+    id: number;
+    name: string;
+}
+
+export function getLiquidList(params: { pageNum: number; pageSize: number }) {
+    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 deleteLiquid(ids: string) {
+    return httpRequest<BaseResponse>({ url: `/api/sols/${ids}`, method: "DELETE" });
+}

src/services/txn.ts

@@ -3,7 +3,7 @@ import type { DebugCmd } from "./debug/debugApi";
 let _lastTimestamp = 0;
 export function generateTxnNo() {
 	const txnNo = Date.now();
-	// 确保前后两条指定的txn 不一样
+	// 确保前后两条指令的txn 不一样
 	if (txnNo !== _lastTimestamp) {
 		if (txnNo < _lastTimestamp) {
 			_lastTimestamp++;

src/views/debug/debug.vue

@@ -209,7 +209,7 @@ onMounted(() => {
 			const cmdInfo = getTxnRecord(data.data.commandId, "debug");
 			if (cmdInfo) {
 				const cmdName = CmdDescMap[cmdInfo.command];
-				const result = data.data.success ? "执行完毕" : "执行失败";
+				const result = data.data.success ? "执行完毕" : `执行失败 ${data.data.message}`;
 				ElMessage({
 					message: `${cmdName} ${result}`,
 					type: data.data.success ? "success" : "error",

src/views/liquidConfig/components/AddLiquid.vue

@@ -0,0 +1,35 @@
+<template>
+	<div class="bg-white text-xl text-text px-5 py-7 rounded">
+		<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="name" />
+			</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 { showToast } from "vant";
+import { ref } from "vue";
+
+const emit = defineEmits<{
+	(e: "confirm", name: string): void;
+	(e: "cancel"): void;
+}>();
+
+const name = ref<string>('');
+
+function onConfirm() {
+    if (name.value === "") {
+        showToast("名称不能为空")
+        return
+    }
+	emit("confirm", name.value);
+}
+</script>

src/views/liquidConfig/index.vue

@@ -1,31 +1,47 @@
 <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">添加溶液</button>
-			<button :disabled="opDisable" class="btn-light px-3 py-1 text-xs disabled:btn-light-disabled">编辑溶液</button>
-			<button class="btn-light px-3 py-1 text-xs">删除溶液</button>
+			<button class="btn-light px-3 py-1 text-xs" @click="onAddLiquid">添加溶液</button>
+			<button
+				:disabled="selectedIds.length === 0"
+				class="btn-light px-3 py-1 text-xs disabled:btn-light-disabled"
+				@click="onDeleteLiquid">
+				删除溶液
+			</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">
-					<img class="w-4 h-4" src="@/assets/Icon-unselect.svg" alt="icon" />
+				<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 === liquidList.length
+									? icon_select
+									: icon_partial
+								: icon_unselect
+						"
+						alt="icon" />
 				</div>
-                <p class="w-16">序号</p>
+				<p class="w-16">ID</p>
 				<p>溶液名称</p>
 			</header>
-			<div class="h-10 flex items-center text-xs pr-3 text-[#6e6e6e]  border-b border-b-[#f8f8f8]">
+			<div
+				v-for="liquid in liquidList"
+				class="h-10 flex items-center text-xs pr-3 text-[#6e6e6e] border-b border-b-[#f8f8f8]"
+				@click="onItemSelect(liquid)">
 				<div class="w-10 self-stretch flex justify-center items-center">
-					<img class="w-4 h-4" :src="isSelect ? icon_select : icon_unselect" alt="" />
+					<img class="w-4 h-4" :src="selectedIds.includes(liquid.id) ? icon_select : icon_unselect" alt="" />
 				</div>
-                <p class="w-16">1</p>
-				<p class="flex-auto">溶液名称1</p>
+				<p class="w-16">{{ liquid.id }}</p>
+				<p class="flex-auto">{{ liquid.name }}</p>
 			</div>
 		</section>
 
 		<van-overlay :show="showEditDialog">
 			<div class="flex justify-center items-center h-full">
-				
+				<AddLiquid @confirm="addLiquid" @cancel="showEditDialog = false" />
 			</div>
 		</van-overlay>
 	</div>
@@ -34,10 +50,69 @@
 <script lang="ts" setup>
 import icon_unselect from "@/assets/Icon-unselect.svg";
 import icon_select from "@/assets/Icon-select.svg";
-import { ref } from "vue";
+import icon_partial from "@/assets/Icon-partial-select.svg";
+
+import { onMounted, ref } from "vue";
+import { createLiquid, deleteLiquid, getLiquidList, type Liquid } from "@/services/liquid/liquidManage";
+import { showToast } from "vant";
+import AddLiquid from "./components/AddLiquid.vue";
 
-const isSelect = ref<boolean>(true);
-const opDisable = ref<boolean>(true);
 const showEditDialog = ref<boolean>(false);
 
+const liquidList = ref<Liquid[]>([]);
+const selectedIds = ref<number[]>([]);
+
+function getLiquid() {
+	getLiquidList({ pageNum: 1, pageSize: 9999 }).then(res => {
+		if (res.success) {
+			liquidList.value = res.data.list;
+		} else {
+			showToast(res.msg);
+		}
+	});
+}
+
+onMounted(() => {
+	getLiquid();
+});
+
+function onAddLiquid() {
+	showEditDialog.value = true;
+}
+
+function onItemSelect(user: Liquid) {
+	if (selectedIds.value.includes(user.id)) {
+		selectedIds.value = selectedIds.value.filter(id => id !== user.id);
+	} else {
+		selectedIds.value = [...selectedIds.value, user.id];
+	}
+}
+function onSelectAll() {
+	if (selectedIds.value.length === liquidList.value.length) {
+		selectedIds.value = [];
+	} else {
+		selectedIds.value = liquidList.value.map(liquid => liquid.id);
+	}
+}
+function addLiquid(name: string) {
+	createLiquid({ name }).then(res => {
+		if (res.success) {
+			showEditDialog.value = false;
+			getLiquid();
+		} else {
+			showToast(res.msg);
+		}
+	});
+}
+function onDeleteLiquid() {
+	if (selectedIds.value.length === 0) return;
+	deleteLiquid(selectedIds.value.join(",")).then(res => {
+		if (res.success) {
+			selectedIds.value = [];
+			getLiquid();
+		} else {
+			showToast(res.msg);
+		}
+	});
+}
 </script>