完善组态列表的查询，编辑，删除，新建功能

src/api/configuration/index.ts

@@ -2,7 +2,7 @@ import { get, del, post } from '/@/utils/request';
 
 export default {
   getFolder: () => get('/configure/folder/list'),
-  getList: (folderId: number) => get('/configure/diagram/getInfoByFolderId', { folderId }),
-  del: (ids: string[]) => del('/screen/project/delProjectById', { ids }),
+  getList: (data: any) => get('/configure/diagram/getList', data),
+  del: (id: number) => del('/configure/diagram/del', { id }),
   add: (data: any) => post('/screen/project/add', data),
 }

src/hooks/useCommon.ts

@@ -35,16 +35,19 @@ export function useSearch<T>(api: any, resKey: string, expandParams?: any) {
     ...expandParams
   })
 
+  const loading = ref(false)
+
   const tableData = ref<T | []>([])
 
   const getList = async (pageNum?: number) => {
     pageNum && (params.pageNum = pageNum);
     tableData.value = [];
+    loading.value = true;
     params.total = 0;
-    let res = await api(params)
+    let res = await api(params).finally(() => loading.value = false)
     tableData.value = (resKey ? (res[resKey]) : (res)) || [];
     params.total = res.total;
   };
 
-  return { params, tableData, getList }
+  return { params, tableData, getList, loading }
 }

src/views/configuration/list.vue

@@ -3,8 +3,17 @@
 		<div class="search">
 			<el-form :inline="true">
 				<el-form-item>
-					<el-input size="default" style="width: 200px; margin-left: 20px" class="search-input" placeholder="请输入搜索关键字" clearable> </el-input>
-					<el-button size="default" type="primary" class="ml10">
+					<el-input
+						size="default"
+						v-model="params.keyWord"
+						style="width: 200px; margin-left: 20px"
+						class="search-input"
+						placeholder="请输入搜索关键字"
+						@keyup.enter.native="getList(1)"
+						clearable
+					>
+					</el-input>
+					<el-button size="default" type="primary" class="ml10" @click="getList(1)">
 						<el-icon>
 							<ele-Search />
 						</el-icon>
@@ -21,60 +30,62 @@
 				</el-form-item>
 			</el-form>
 		</div>
-		<el-table :data="tableData" style="width: 100%" row-key="id" lazy :load="load" :tree-props="{ children: 'children', hasChildren: 'types' }">
+		<el-table :data="tableData" style="width: 100%" row-key="id" v-loading="loading">
 			<!-- <el-table-column type="index" label="序号" width="60" align="center" /> -->
-			<el-table-column prop="id" label="ID" show-overflow-tooltip></el-table-column>
-			<el-table-column prop="folderName" label="文件夹名称" show-overflow-tooltip></el-table-column>
+			<el-table-column prop="id" label="ID" width="60" show-overflow-tooltip></el-table-column>
 			<el-table-column prop="name" label="组态图名称" show-overflow-tooltip></el-table-column>
 			<el-table-column prop="createdAt" label="创建时间" min-width="100" align="center"></el-table-column>
 			<el-table-column prop="updatedAt" label="更新时间" min-width="100" align="center"></el-table-column>
-			<el-table-column label="操作" width="100" align="center">
+			<el-table-column label="操作" width="160" align="center">
 				<template #default="scope">
 					<el-button size="small" text type="primary" v-if="!scope.row.folderName" @click="view(scope.row)">预览</el-button>
-					<!-- <el-button size="small" text type="warning" @click="edit(scope.row)">编辑</el-button>
-						<el-button size="small" text type="danger" @click="onDel(scope.row)">删除</el-button> -->
+					<el-button size="small" text type="warning" @click="edit(scope.row)">编辑</el-button>
+					<el-button size="small" text type="danger" @click="del(scope.row)">删除</el-button>
 				</template>
 			</el-table-column>
 		</el-table>
+		<pagination v-if="params.total" :total="params.total" v-model:page="params.pageNum" v-model:limit="params.pageSize" @pagination="getList()" />
 	</el-card>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
 import api from '/@/api/configuration';
 import { Session } from '/@/utils/storage';
+import { useSearch } from '/@/hooks/useCommon';
+import { ElMessageBox, ElMessage } from 'element-plus';
 
-const tableData = ref<any[]>([]);
+const { params, tableData, getList, loading } = useSearch<any[]>(api.getList, 'data', { keyWord: '' });
 
-api.getFolder().then((res: any) => {
-	tableData.value = (res.topology || []).map((item: any) => {
-		return {
-			...item,
-			name: '',
-			folderName: item.name,
-		};
-	});
-});
-
-const load = (row: any, treeNode: unknown, resolve: any) => {
-	api
-		.getList(row.id)
-		.then((res: any) => {
-			resolve(res.data || []);
-		})
-		.catch(() => {
-			resolve([]);
-		});
-};
+getList();
 
 const view = (row: any) => {
-	const url = import.meta.env.VITE_TOPO_URL + '/?token=' + encodeURIComponent(Session.get('token')) + `&bgColor=FF9900` +  '#/show/' + row.id;
-	console.log(url)
+	const url = import.meta.env.VITE_TOPO_URL + '/?token=' + encodeURIComponent(Session.get('token')) + '#/show/' + row.id;
+	// const url = import.meta.env.VITE_TOPO_URL + '/?token=' + encodeURIComponent(Session.get('token')) + `&bgColor=FF9900` + '#/show/' + row.id;
+	// console.log(url);
 	window.open(url);
 };
 
 const add = () => {
-	const url = import.meta.env.VITE_TOPO_URL + '/?token=' + encodeURIComponent(Session.get('token'));
+	const url = import.meta.env.VITE_TOPO_URL + '/?token=' + encodeURIComponent(Session.get('token')) + '#/editor/new';
+	// console.log(url);
 	window.open(url);
 };
+
+const edit = (row: any) => {
+	const url = import.meta.env.VITE_TOPO_URL + '/?token=' + encodeURIComponent(Session.get('token')) + '#/editor/' + row.id;
+	// console.log(url);
+	window.open(url);
+};
+
+const del = (row: any) => {
+	ElMessageBox.confirm(`此操作将删除图形：“${row.name}”，是否继续?`, '提示', {
+		confirmButtonText: '确认',
+		cancelButtonText: '取消',
+		type: 'warning',
+	}).then(async () => {
+		await api.del(row.id);
+		ElMessage.success('删除成功');
+		getList(1);
+	});
+};
 </script>