From bb719014528b4b0bb7d06a1ab5fdea0773f1c4c7 Mon Sep 17 00:00:00 2001
From: guofei <guofeichu@gmail.com>
Date: Tue, 8 Oct 2024 13:53:06 +0800
Subject: [PATCH] feat: add pagiation feature

---
 src/pages/SystemCharter/index.vue | 136 +++++++++++++++---------------
 1 file changed, 70 insertions(+), 66 deletions(-)

diff --git a/src/pages/SystemCharter/index.vue b/src/pages/SystemCharter/index.vue
index 1427071..4632982 100644
--- a/src/pages/SystemCharter/index.vue
+++ b/src/pages/SystemCharter/index.vue
@@ -11,7 +11,6 @@
 					<template #default="scope">
 						<div class="truncate">{{ scope.row.roleSetting }}</div>
 					</template>
-
 				</el-table-column>
 				<el-table-column prop="prologue" label="开场白" />
 				<el-table-column>
@@ -20,27 +19,27 @@
 					</template>
 				</el-table-column>
 			</ElTable>
-			<div class="flex justify-end mt-2 mr-2 ">
-				<ElPagination background size="small" layout="prev, pager, next" :total="count" />
+			<div class="flex justify-end mt-2 mr-2">
+				<ElPagination v-model:current-page="paginationInfo.currentPage"
+					v-model:page-size="paginationInfo.pageSize" background size="small" layout="sizes,prev, pager, next"
+					:total="count" />
 			</div>
 		</div>
 	</div>
 	<div v-else class="m-4 flex mt-6">
-		<el-row style=" width: 100%;" :gutter="20">
+		<el-row style="width: 100%" :gutter="20">
 			<el-col :span="18">
 				<el-card>
 					<el-form ref="formRef" :model="submitForm" label-width="auto" style="max-width: 1200px"
 						:rules="rules">
 						<el-form-item>
-							<div style="text-align: right;width: 100%;">
-								<el-button type="primary" @click="handleSubmit()">{{ submitForm.id ? '修改' : '添加'
+							<div style="text-align: right; width: 100%">
+								<el-button type="primary" @click="handleSubmit()">{{ submitForm.id ? "修改" : "添加"
 									}}</el-button>
 								<el-button @click="handleBack()">返回</el-button>
 							</div>
 						</el-form-item>
-						<el-form-item label="角色背景">
-							待开发...
-						</el-form-item>
+						<el-form-item label="角色背景"> 待开发... </el-form-item>
 						<el-form-item label="角色名称" prop="roleName">
 							<el-input v-model="submitForm.roleName" placeholder="请输入角色名称" />
 						</el-form-item>
@@ -56,34 +55,33 @@
 						<el-form-item label="对话示例">
 							<ElButton @click="addChartLines()" type="primary">添加对话</ElButton>
 							<el-row :gutter="20" v-for="(item, index) in submitForm.roleLines" :key="index"
-								style="width: 100%;margin-top: 10px;">
+								style="width: 100%; margin-top: 10px">
 								<el-col :span="12">
 									<ElSelect v-model="item.sender_name" @change="roleLinesChange(index)"
-										style="width: 100%;" placeholder="选择机器人类型">
+										style="width: 100%" placeholder="选择机器人类型">
 										<el-option label="用户" value="用户"></el-option>
 										<el-option :label="submitForm.roleName"
 											:value="submitForm.roleName"></el-option>
 									</ElSelect>
 								</el-col>
 								<el-col :span="10">
-									<el-input v-model="item.text" style="width: 100%;" placeholder="输入对话文本" />
+									<el-input v-model="item.text" style="width: 100%" placeholder="输入对话文本" />
 								</el-col>
 								<el-col :span="2">
-									<el-icon style="font-size: 20px; cursor: pointer;margin-top: 8px"
+									<el-icon style="font-size: 20px; cursor: pointer; margin-top: 8px"
 										@click="handleRemoveSampleItem(index)">
 										<Remove />
 									</el-icon>
 								</el-col>
 							</el-row>
-
 						</el-form-item>
 					</el-form>
 				</el-card>
 			</el-col>
 			<el-col :span="6">
-				<div style="width: 100%;">
+				<div style="width: 100%">
 					<el-input v-model="formatJson" :rows="13" type="textarea" placeholder="粘贴格式化" />
-					<el-button type="primary" style="margin-top: 10px;" @click="handleAutoFormat">自动填充</el-button>
+					<el-button type="primary" style="margin-top: 10px" @click="handleAutoFormat">自动填充</el-button>
 				</div>
 			</el-col>
 		</el-row>
@@ -91,18 +89,22 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted } from "vue";
+import { ref, onMounted, reactive, watch } from "vue";
 import { addSystemCharterAPI, querySystemCharterAPI, editSystemCharterAPI } from "@/api/SystemCharter";
 import { ElButton, ElLoading, ElMessage, ElTable, FormInstance, ElPagination } from "element-plus";
-import { Remove } from '@element-plus/icons-vue'
+import { Remove } from "@element-plus/icons-vue";
 
 const dataSource = ref([]);
+const paginationInfo = reactive({
+	currentPage: 1,
+	pageSize: 10,
+});
 const count = ref(0);
 const formRef = ref<FormInstance>();
 const isAdd = ref(false);
 
 // 格式化json
-const formatJson = ref('')
+const formatJson = ref("");
 const submitForm = ref();
 
 const rules = ref({
@@ -114,9 +116,13 @@ const rules = ref({
 
 onMounted(() => {
 	handleReset();
-	initSystemCharterDataSource()
+	initSystemCharterDataSource();
 });
 
+watch(() => [paginationInfo.currentPage, paginationInfo.pageSize], () => {
+	initSystemCharterDataSource()
+})
+
 const handleReset = () => {
 	submitForm.value = {
 		id: null,
@@ -128,94 +134,92 @@ const handleReset = () => {
 	};
 };
 
-
-
 const addSystemCharter = () => {
-	handleReset()
+	handleReset();
 	isAdd.value = true;
 };
 
 const initSystemCharterDataSource = () => {
-	querySystemCharterAPI().then(result => {
-		dataSource.value = result.data
-		count.value = result.meta.total
-	})
-}
+	querySystemCharterAPI({ current: paginationInfo.currentPage, pageSize: paginationInfo.pageSize }).then((result) => {
+		dataSource.value = result.data;
+		count.value = result.meta.total;
+	});
+};
 
 // 添加系统对话
 const addChartLines = () => {
 	submitForm.value?.roleLines.push({
 		sender_type: null,
 		sender_name: null,
-		text: ''
-	})
-}
+		text: "",
+	});
+};
 
 // 选择了对话类型
 const roleLinesChange = (index) => {
 	console.error(index);
-}
+};
 
 const handleSubmit = async () => {
 	await formRef.value?.validate(async (valid: any) => {
 		if (valid) {
-			const loading = ElLoading.service()
+			const loading = ElLoading.service();
 			try {
-				const _submitForm = JSON.parse(JSON.stringify(submitForm.value))
-				_submitForm.roleLines = JSON.stringify(_submitForm.roleLines)
+				const _submitForm = JSON.parse(JSON.stringify(submitForm.value));
+				_submitForm.roleLines = JSON.stringify(_submitForm.roleLines);
 				if (!submitForm.value.id) {
 					await addSystemCharterAPI(_submitForm);
-					ElMessage.success('添加成功')
+					ElMessage.success("添加成功");
 				} else {
 					await editSystemCharterAPI(_submitForm);
-					ElMessage.success('修改成功')
+					ElMessage.success("修改成功");
 				}
 
-				initSystemCharterDataSource()
-				isAdd.value = false
+				initSystemCharterDataSource();
+				isAdd.value = false;
 			} finally {
-				loading.close()
+				loading.close();
 			}
 		}
 	});
 };
 
 const handleRemoveSampleItem = (index) => {
-	submitForm.value.roleLines.splice(index, 1)
-	ElMessage.success('删除成功')
-}
+	submitForm.value.roleLines.splice(index, 1);
+	ElMessage.success("删除成功");
+};
 
 const handleEdit = (row) => {
 	handleReset();
-	const _currentRow = JSON.parse(JSON.stringify(row))
-	Object.keys(submitForm.value).forEach(key => {
-		if (key === 'roleLines') {
-			submitForm.value[key] = JSON.parse(_currentRow[key])
+	const _currentRow = JSON.parse(JSON.stringify(row));
+	Object.keys(submitForm.value).forEach((key) => {
+		if (key === "roleLines") {
+			submitForm.value[key] = JSON.parse(_currentRow[key]);
 		} else {
-			submitForm.value[key] = _currentRow[key]
+			submitForm.value[key] = _currentRow[key];
 		}
-	})
-	isAdd.value = true
-}
+	});
+	isAdd.value = true;
+};
 
 const handleBack = () => {
-	isAdd.value = false
-}
+	isAdd.value = false;
+};
 
 // 自动填充
 const handleAutoFormat = () => {
-	const loading = ElLoading.service()
+	const loading = ElLoading.service();
 	try {
-		const object = JSON.parse(formatJson.value)
-		const roleName = object.reply_constraints.sender_name
-		const roleSettingItem = object.bot_setting.find(item => item.bot_name.trim() == roleName.trim())
-		const sampleMessages = object.sample_messages.map(item => {
+		const object = JSON.parse(formatJson.value);
+		const roleName = object.reply_constraints.sender_name;
+		const roleSettingItem = object.bot_setting.find((item) => item.bot_name.trim() == roleName.trim());
+		const sampleMessages = object.sample_messages.map((item) => {
 			return {
 				sender_type: item.sender_type,
-				sender_name: item.sender_type == 'BOT' ? roleName : item.sender_name,
+				sender_name: item.sender_type == "BOT" ? roleName : item.sender_name,
 				text: item.text,
-			}
-		})
+			};
+		});
 		submitForm.value = {
 			id: null,
 			roleName: roleName,
@@ -224,12 +228,12 @@ const handleAutoFormat = () => {
 			intro: "", // 开场白
 			roleLines: sampleMessages,
 		};
-		formatJson.value = ''
-		ElMessage.success('格式化成功')
+		formatJson.value = "";
+		ElMessage.success("格式化成功");
 	} catch {
-		ElMessage.error('格式化失败')
+		ElMessage.error("格式化失败");
 	} finally {
-		loading.close()
+		loading.close();
 	}
-}
+};
 </script>