日志列表接口

src/services/experience/experienceList.ts

@@ -15,6 +15,13 @@ export type ExperienceRecord = {
 	steps: ExperienceStep[];
 };
 
+export type LogRecord = {
+	id: number;
+	createUser: number;
+	text: string;
+	createTime: string;
+};
+
 export function getExperienceRecords(params: { pageNum: number; pageSize: number }) {
 	return httpRequest<BaseResponse<{ list: ExperienceRecord[]; total: number }>>({ url: "/api/tasks/list", params });
 }
@@ -22,3 +29,11 @@ export function getExperienceRecords(params: { pageNum: number; pageSize: number
 export function deleteExperienceRecords(ids: string) {
 	return httpRequest<BaseResponse>({ url: `/api/tasks/${ids}`, method: "DELETE" });
 }
+
+export function getLogs(params: { pageNum: number; pageSize: number }) {
+	return httpRequest<BaseResponse<{ list: LogRecord[]; total: number }>>({ url: "/api/logs/list", params });
+}
+
+export function deleteLogs(ids: string) {
+	return httpRequest<BaseResponse>({ url: `/api/logs/${ids}`, method: "DELETE" });
+}

src/views/logRecord/index.vue

@@ -1,33 +1,53 @@
 <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 :disabled="selectedIds.length === 0" class="btn-light px-3 py-1 text-xs disabled:btn-light-disabled">
+				导出
+			</button>
+			<!-- <button
+				:disabled="selectedIds.length === 0"
+				class="btn-light px-3 py-1 text-xs disabled:btn-light-disabled"
+				@click="onDeleteRecords">
+				删除
+			</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 === recordList.length
+									? icon_select
+									: icon_partial
+								: icon_unselect
+						"
+						alt="icon" />
 				</div>
-                <p class="w-[10rem]">时间</p>
+				<p class="w-[10rem]">时间</p>
 				<p class="w-[8rem]">操作员</p>
-                <p>操作记录</p>
+				<p>操作记录</p>
 			</header>
-			<div class="h-10 flex items-center text-xs pr-3 text-[#6e6e6e]  border-b border-b-[#f8f8f8]">
-				<div class="w-10 self-stretch flex justify-center items-center">
-					<img class="w-4 h-4" :src="isSelect ? icon_select : icon_unselect" alt="" />
+			<main class="overflow-auto" style="max-height: calc(100vh - var(--headerHeight) - var(--footerHeight) - 120px)">
+				<div
+					v-for="record in recordList"
+					:key="record.id"
+					class="h-10 flex items-center text-xs pr-3 text-[#6e6e6e] border-b border-b-[#f8f8f8]"
+					@click="onItemSelect(record)">
+					<div class="w-10 self-stretch flex justify-center items-center">
+						<img class="w-4 h-4" :src="selectedIds.includes(record.id) ? icon_select : icon_unselect" alt="" />
+					</div>
+					<p class="w-[10rem]">{{ record.createTime }}</p>
+					<p class="w-[8rem]">{{ userStore.userIdMap[record.createUser].nickname }}</p>
+					<p class="w-[10rem]">{{ record.text }}</p>
 				</div>
-				<p class="w-[10rem]">2025年6月24日 13:16:45</p>
-				<p class="w-[8rem]">admin</p>
-                <p>操作记录xxxxxx</p>
-			</div>
+			</main>
 		</section>
 
 		<van-overlay :show="showEditDialog">
-			<div class="flex justify-center items-center h-full">
-				
-			</div>
+			<div class="flex justify-center items-center h-full"></div>
 		</van-overlay>
 	</div>
 </template>
@@ -35,10 +55,63 @@
 <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 { useUserStore } from "@/stores/user";
+import { deleteLogs, getLogs, type LogRecord } from "@/services/experience/experienceList";
+import { showToast } from "vant";
+import { ElMessageBox } from "element-plus";
 
-const isSelect = ref<boolean>(true);
-const opDisable = ref<boolean>(true);
+const userStore = useUserStore();
 const showEditDialog = ref<boolean>(false);
 
+const recordList = ref<LogRecord[]>([]);
+const selectedIds = ref<number[]>([]);
+
+function getRecords() {
+	getLogs({ pageNum: 1, pageSize: 9999 }).then(res => {
+		if (res.success) {
+			recordList.value = res.data.list;
+		} else {
+			showToast(res.msg);
+		}
+	});
+}
+
+onMounted(() => {
+	getRecords();
+});
+
+function onItemSelect(record: LogRecord) {
+	if (selectedIds.value.includes(record.id)) {
+		selectedIds.value = selectedIds.value.filter(id => id !== record.id);
+	} else {
+		selectedIds.value = [...selectedIds.value, record.id];
+	}
+}
+function onSelectAll() {
+	if (selectedIds.value.length === recordList.value.length) {
+		selectedIds.value = [];
+	} else {
+		selectedIds.value = recordList.value.map(record => record.id);
+	}
+}
+
+function onDeleteRecords() {
+	if (selectedIds.value.length === 0) return;
+	ElMessageBox.confirm("确定删除记录？", {
+		confirmButtonText: "确定",
+		cancelButtonText: "取消",
+		center: true,
+	}).then(() => {
+		deleteLogs(selectedIds.value.join(",")).then(res => {
+			if (res.success) {
+				selectedIds.value = [];
+				getRecords();
+			} else {
+				showToast(res.msg);
+			}
+		});
+	});
+}
 </script>