插件列表： 列表中显示：序号、标识、名称、类型、是否启用、插件状态、作者、说明

在操作列中显示：删除，启用/停用，详情

src/api/system/index.ts

@@ -146,7 +146,8 @@ export default {
   },
   plugin: {
     getList: (params: object) => get('/system/plugins/list', params),
-    changeStatus: (params: object) => post('/system/plugins/set', params),
+    del: (ids: object) => del('/system/plugins/set', {ids}),
+    changeStatus: (data: object) => post('/system/plugins/set', data),
   },
   blackList: {
     getList: (params: object) => get('/system/blacklist/list', params),

src/views/system/api/index.vue

@@ -1,106 +1,112 @@
 <template>
-  <div class="page">
-    <el-card shadow="hover">
-      <div class="search">
-        <el-form :model="params" :inline="true" ref="queryRef">
-          <el-form-item label="接口名称" prop="name">
-            <el-input v-model="params.name" placeholder="请输入接口名称" clearablestyle="width: 240px" @keyup.enter.native="getList(1)" />
-          </el-form-item>
-          <el-form-item label="接口地址" prop="address">
-            <el-input v-model="params.address" placeholder="请输入接口地址" clearablestyle="width: 240px" @keyup.enter.native="getList(1)" />
-          </el-form-item>
-          <el-form-item label="状态" prop="status" style="width: 200px">
-            <el-select v-model="params.status" placeholder="接口状态" clearablestyle="width: 240px">
-              <el-option label="全部" :value="-1" />
-              <el-option label="启用" :value="1" />
-              <el-option label="禁用" :value="0" />
-            </el-select>
-          </el-form-item>
-          <el-form-item>
-            <el-button size="default" type="primary" class="ml10" @click="getList(1)">
-              <el-icon>
-                <ele-Search />
-              </el-icon>
-              查询
-            </el-button>
-            <el-button size="default" @click="resetQuery()">
-              <el-icon>
-                <ele-Refresh />
-              </el-icon>
-              重置
-            </el-button>
-            <el-button type="success" @click="addOrEdit()" v-auth="'add'">
-              <el-icon>
-                <ele-FolderAdd />
-              </el-icon>
-              新增接口
-            </el-button>
-          </el-form-item>
-        </el-form>
-      </div>
-      <el-table :data="tableData" style="width: 100%" v-loading="loading" row-key="id" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
-        <el-table-column type="index" label="序号" width="60" align="center" />
-        <el-table-column prop="name" v-col="'name'" label="接口名称" show-overflow-tooltip></el-table-column>
-        <el-table-column prop="address" v-col="'address'" label="接口地址" show-overflow-tooltip></el-table-column>
-        <el-table-column prop="status" v-col="'status'" label="状态" min-width="100" align="center">
-          <template #default="scope">
-            <el-tag type="success" size="small" v-if="scope.row.status">启用</el-tag>
-            <el-tag type="info" size="small" v-else>禁用</el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" width="100" align="center" v-col="'handle'">
-          <template #default="scope">
-            <el-button size="small" text type="warning" @click="addOrEdit(scope.row)" v-auth="'edit'">修改</el-button>
-            <el-button size="small" text type="danger" @click="onDel(scope.row)" v-auth="'del'">删除</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>
-    <EditForm ref="editFormRef" @getList="getList()"></EditForm>
-  </div>
+	<div class="page">
+		<el-card shadow="hover">
+			<div class="search">
+				<el-form :model="params" :inline="true" ref="queryRef">
+					<el-form-item label="接口名称" prop="name">
+						<el-input v-model="params.name" placeholder="请输入接口名称" clearablestyle="width: 240px" @keyup.enter.native="getList(1)" />
+					</el-form-item>
+					<el-form-item label="接口地址" prop="address">
+						<el-input v-model="params.address" placeholder="请输入接口地址" clearablestyle="width: 240px" @keyup.enter.native="getList(1)" />
+					</el-form-item>
+					<el-form-item label="状态" prop="status" style="width: 200px">
+						<el-select v-model="params.status" placeholder="接口状态" clearablestyle="width: 240px">
+							<el-option label="全部" :value="-1" />
+							<el-option label="启用" :value="1" />
+							<el-option label="禁用" :value="0" />
+						</el-select>
+					</el-form-item>
+					<el-form-item>
+						<el-button size="default" type="primary" class="ml10" @click="getList(1)">
+							<el-icon>
+								<ele-Search />
+							</el-icon>
+							查询
+						</el-button>
+						<el-button size="default" @click="resetQuery()">
+							<el-icon>
+								<ele-Refresh />
+							</el-icon>
+							重置
+						</el-button>
+						<el-button type="success" @click="addOrEdit()" v-auth="'add'">
+							<el-icon>
+								<ele-FolderAdd />
+							</el-icon>
+							新增接口
+						</el-button>
+					</el-form-item>
+				</el-form>
+			</div>
+			<el-table
+				:data="tableData"
+				style="width: 100%"
+				v-loading="loading"
+				row-key="id"
+				:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+			>
+				<el-table-column type="index" label="序号" width="60" align="center" />
+				<el-table-column prop="name" v-col="'name'" label="接口名称" show-overflow-tooltip></el-table-column>
+				<el-table-column prop="address" v-col="'address'" label="接口地址" show-overflow-tooltip></el-table-column>
+				<el-table-column prop="status" v-col="'status'" label="状态" min-width="100" align="center">
+					<template #default="scope">
+						<el-tag type="success" size="small" v-if="scope.row.status">启用</el-tag>
+						<el-tag type="info" size="small" v-else>禁用</el-tag>
+					</template>
+				</el-table-column>
+				<el-table-column label="操作" width="100" align="center" v-col="'handle'">
+					<template #default="scope">
+						<el-button size="small" text type="warning" @click="addOrEdit(scope.row)" v-auth="'edit'">修改</el-button>
+						<el-button size="small" text type="danger" @click="onDel(scope.row)" v-auth="'del'">删除</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>
+		<EditForm ref="editFormRef" @getList="getList()"></EditForm>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
-import EditForm from './component/edit.vue';
-import { ApiRow } from '/@/api/model/system/menu';
-import api from '/@/api/system';
-import { ElMessageBox, ElMessage } from 'element-plus';
-import { useSearch } from '/@/hooks/useCommon';
+import { ref } from 'vue'
+import EditForm from './component/edit.vue'
+import { ApiRow } from '/@/api/model/system/menu'
+import api from '/@/api/system'
+import { ElMessageBox, ElMessage } from 'element-plus'
+import { useSearch } from '/@/hooks/useCommon'
 
-const editFormRef = ref();
-const queryRef = ref();
+const editFormRef = ref()
+const queryRef = ref()
 
-const { params, tableData, getList, loading } = useSearch<ApiRow[]>(api.api.getList, 'Info', { name: '', address: '', types: -1 });
+const { params, tableData, getList, loading } = useSearch<ApiRow[]>(api.api.getList, 'Info', { name: '', address: '', types: -1 })
 
-getList();
+getList()
 
 const addOrEdit = async (row?: ApiRow) => {
-  if (row) {
-    const res = await api.api.detail(row.id as number);
-    editFormRef.value.open(res);
-    return;
-  } else {
-    editFormRef.value.open();
-  }
-};
+	if (row) {
+		const res = await api.api.detail(row.id as number)
+		editFormRef.value.open(res)
+		return
+	} else {
+		editFormRef.value.open()
+	}
+}
 
 // 重置表单
 const resetQuery = () => {
-  queryRef.value.resetFields();
-  getList(1);
-};
+	queryRef.value.resetFields()
+	getList(1)
+}
 
 const onDel = (row: ApiRow) => {
-  ElMessageBox.confirm(`此操作将删除接口：“${row.name}”，是否继续?`, '提示', {
-    confirmButtonText: '确认',
-    cancelButtonText: '取消',
-    type: 'warning',
-  }).then(async () => {
-    await api.api.del(row.id as number);
-    ElMessage.success('删除成功');
-    getList();
-  });
-};
+	ElMessageBox.confirm(`此操作将删除接口：“${row.name}”，是否继续?`, '提示', {
+		confirmButtonText: '确认',
+		cancelButtonText: '取消',
+		type: 'warning',
+	}).then(async () => {
+		await api.api.del(row.id as number)
+		ElMessage.success('删除成功')
+		getList()
+	})
+}
 </script>

src/views/system/monitor/plugin/index.vue

@@ -2,18 +2,18 @@
 	<div class="system-plugin-container">
 		<el-card shadow="hover">
 			<div class="system-user-search mb15">
-				<el-form :model="tableData.param" ref="queryRef" :inline="true" label-width="68px">
+				<el-form :model="params" ref="queryRef" :inline="true" label-width="68px">
 					<el-form-item label="关键字" prop="keyWord">
-						<el-input v-model="tableData.param.keyWord" placeholder="请输入关键字" clearable style="width: 180px" size="default" @keyup.enter="dataList" />
+						<el-input v-model="params.keyWord" placeholder="请输入关键字" clearable style="width: 180px" size="default" @keyup.enter="getList" />
 					</el-form-item>
 					<el-form-item>
-						<el-button size="default" type="primary" class="ml10" @click="dataList">
+						<el-button size="default" type="primary" class="ml10" @click="getList">
 							<el-icon>
 								<ele-Search />
 							</el-icon>
 							查询
 						</el-button>
-						<el-button size="default" @click="resetQuery(queryRef)">
+						<el-button size="default" @click="resetQuery()">
 							<el-icon>
 								<ele-Refresh />
 							</el-icon>
@@ -22,10 +22,14 @@
 					</el-form-item>
 				</el-form>
 			</div>
-			<el-table :data="tableData.data" style="width: 100%" v-loading="tableData.loading">
-				<el-table-column label="插件类型" align="center" prop="types" />
+			<el-table :data="tableData" style="width: 100%" v-loading="loading">
+				<el-table-column label="序号" align="center">
+					<template #default="{ $index }">{{params.pageSize * (params.pageNum - 1) +  ($index + 1) }} </template>
+				</el-table-column>
 				<el-table-column label="名称" v-col="'name'" align="center" prop="name" />
-				<el-table-column label="介绍" v-col="'intro'" align="center" prop="intro" />
+				<el-table-column label="通信方式" v-col="'types'" align="center" prop="types" />
+				<el-table-column label="功能类型" v-col="'handleType'" align="center" prop="handleType" />
+				<el-table-column label="说明" v-col="'description'" align="center" prop="description" />
 				<el-table-column label="作者" v-col="'author'" align="center" prop="author" />
 				<el-table-column label="状态" v-col="'status'" align="center" prop="status" width="80">
 					<template #default="scope">
@@ -35,97 +39,88 @@
 						<el-tag type="info" size="small" v-else>-</el-tag>
 					</template>
 				</el-table-column>
-				<el-table-column label="操作" width="100" align="center" fixed="right" v-col="'handle'">
+				<el-table-column label="操作" width="200" align="center" fixed="right" v-col="'handle'">
 					<template #default="scope">
-						<el-button :disabled="scope.row.status == 0" type='danger' text='danger' size="small" link @click="changeStatus(scope.row, 0)" v-auth="'stop'">停用</el-button>
-						<el-button :disabled="scope.row.status == 1" size="small" type='success' text='success' link @click="changeStatus(scope.row, 1)" v-auth="'start'">启用</el-button>
+						<el-button
+							:disabled="scope.row.status == 0"
+							type="warning"
+							text="warning"
+							size="small"
+							link
+							@click="changeStatus(scope.row, 0)"
+							v-auth="'stop'"
+							>停用</el-button
+						>
+						<el-button
+							:disabled="scope.row.status == 1"
+							size="small"
+							type="success"
+							text="success"
+							link
+							@click="changeStatus(scope.row, 1)"
+							v-auth="'start'"
+							>启用</el-button
+						>
+						<el-button
+							:disabled="scope.row.status == 1"
+							size="small"
+							type="danger"
+							text="danger"
+							link
+							@click="onDel(scope.row)"
+							v-auth="'del'"
+							>删除</el-button
+						>
+						<el-button
+							size="small"
+							type="primary"
+							text="primary"
+							link
+							v-auth="'detail'"
+							>详情</el-button
+						>
 					</template>
 				</el-table-column>
 			</el-table>
-			<pagination v-show="tableData.total > 0" :total="tableData.total" v-model:page="tableData.param.pageNum" v-model:limit="tableData.param.pageSize" @pagination="dataList" />
+			<pagination :total="params.total" v-model:page="params.pageNum" v-model:limit="params.pageSize" @pagination="getList" />
 		</el-card>
 	</div>
 </template>
 
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import api from '/@/api/system'
+import { useSearch } from '/@/hooks/useCommon'
+
+const queryRef = ref()
 
+const { params, tableData, getList, loading } = useSearch(api.plugin.getList, 'list', { keyWord: '' })
 
-<script lang="ts">
-//  插件型类，名称，介绍，作者，状态
-import { toRefs, reactive, onMounted, ref, defineComponent, getCurrentInstance } from 'vue';
-import { ElMessageBox, ElMessage, FormInstance } from 'element-plus';
-import api from '/@/api/system';
+getList()
 
-interface TableDataState {
-	ids: number[];
-	tableData: {
-		data: Array<any>;
-		total: number;
-		loading: boolean;
-		param: {
-			pageNum: number;
-			pageSize: number;
-			keyWord: string;
-		};
-	};
+const changeStatus = (row: any, status: number) => {
+	api.plugin.changeStatus({ id: row.id, status: status }).then((res: any) => {
+		ElMessage.success('操作成功')
+		getList()
+	})
 }
 
-export default defineComponent({
-	name: 'apiV1SystemPluginList',
-	setup() {
-		const { proxy } = getCurrentInstance() as any;
-		const queryRef = ref();
-		const state = reactive<TableDataState>({
-			ids: [],
-			tableData: {
-				data: [],
-				total: 0,
-				loading: false,
-				param: {
-					pageNum: 1,
-					pageSize: 10,
-					keyWord: ""
-				},
-			},
-		});
-		// 初始化表格数据
-		const initTableData = () => {
-			dataList();
-		};
-		const dataList = () => {
-			state.tableData.loading = true;
-			api.plugin
-				.getList(state.tableData.param)
-				.then((res: any) => {
-					state.tableData.data = res.list;
-					state.tableData.total = res.total;
-				})
-				.finally(() => {
-					state.tableData.loading = false;
-				});
-		};
-		const changeStatus = (row: any, status: number) => {
-			api.plugin.changeStatus({ id: row.id, status: status }).then((res: any) => {
-				ElMessage.success('操作成功');
-				dataList();
-			})
-		};
-		// 页面加载时
-		onMounted(() => {
-			initTableData();
-		});
-		/** 重置按钮操作 */
-		const resetQuery = (formEl: FormInstance | undefined) => {
-			if (!formEl) return;
-			formEl.resetFields();
-			dataList();
-		};
-		return {
-			queryRef,
-			changeStatus,
-			dataList,
-			resetQuery,
-			...toRefs(state),
-		};
-	},
-});
+// 重置表单
+const resetQuery = () => {
+	queryRef.value.resetFields()
+	getList(1)
+}
+
+const onDel = (row: any) => {
+	ElMessageBox.confirm(`此操作将删除接口：“${row.name}”，是否继续?`, '提示', {
+		confirmButtonText: '确认',
+		cancelButtonText: '取消',
+		type: 'warning',
+	}).then(async () => {
+		await api.plugin.del([row.id])
+		ElMessage.success('删除成功')
+		getList(1)
+	})
+}
 </script>