系统管理-区域管理/部门管理/岗位管理/角色管理中缺一个重置按钮，系统配置菜单管理中缺重置按钮

src/views/system/manage/dept/index.vue

@@ -1,55 +1,61 @@
 <template>
-	<div class="system-dept-container">
-		<el-card shadow="hover">
-			<div class="system-dept-search mb15">
-				<el-form :inline="true">
-					<el-form-item label="部门名称">
-						<el-input size="default" v-model="tableData.param.deptName" placeholder="请输入部门名称" class="w-50" clearable />
-					</el-form-item>
-					<el-form-item label="状态">
-						<el-select size="default" placeholder="请选择状态" class="w-50" v-model="tableData.param.status">
-							<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="deptList">
-							<el-icon>
-								<ele-Search />
-							</el-icon>
-							查询
-						</el-button>
-						<el-button size="default" type="success" class="ml10" @click="onOpenAddDept" v-auth="'add'">
-							<el-icon>
-								<ele-FolderAdd />
-							</el-icon>
-							新增部门
-						</el-button>
-					</el-form-item>
-				</el-form>
-			</div>
-			<el-table :data="tableData.data" style="width: 100%" row-key="deptId" default-expand-all :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" v-loading="tableData.loading">
-				<el-table-column prop="deptName" label="部门名称" v-col="'handle'" show-overflow-tooltip> </el-table-column>
-				<el-table-column prop="status" label="部门状态" v-col="'status'" align="center" min-width="120">
-					<template #default="scope">
-						<el-tag type="success" size="small" v-if="scope.row.status === 1">启用</el-tag>
-						<el-tag type="info" size="small" v-else>禁用</el-tag>
-					</template>
-				</el-table-column>
-				<el-table-column prop="orderNum" label="排序" v-col="'orderNum'" align="center" min-width="120"></el-table-column>
-				<el-table-column prop="createdAt" label="创建时间" v-col="'createdAt'" align="center" min-width="180"></el-table-column>
-				<el-table-column label="操作" align="center" width="140" v-col="'handle'">
-					<template #default="scope">
-						<el-button size="small" type="text" @click="onOpenAddDept(scope.row)" v-auth="'add'">新增</el-button>
-						<el-button size="small" text type="warning" @click="onOpenEditDept(scope.row)" v-auth="'edit'">修改</el-button>
-						<el-button size="small" text type="danger" @click="onTabelRowDel(scope.row)" v-auth="'del'">删除</el-button>
-					</template>
-				</el-table-column>
-			</el-table>
-		</el-card>
-		<EditDept ref="editDeptRef" @deptList="deptList" />
-	</div>
+  <div class="system-dept-container">
+    <el-card shadow="hover">
+      <div class="system-dept-search mb15">
+        <el-form :model="tableData.param" :inline="true" ref="queryRef">
+          <el-form-item label="部门名称" prop="deptName">
+            <el-input size="default" v-model="tableData.param.deptName" placeholder="请输入部门名称" class="w-50" clearable />
+          </el-form-item>
+          <el-form-item label="状态" prop="status">
+            <el-select size="default" placeholder="请选择状态" class="w-50" v-model="tableData.param.status">
+              <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="deptList">
+              <el-icon>
+                <ele-Search />
+              </el-icon>
+              查询
+            </el-button>
+            <el-button size="default" @click="resetQuery()">
+              <el-icon>
+                <ele-Refresh />
+              </el-icon>
+              重置
+            </el-button>
+            <el-button size="default" type="success" class="ml10" @click="onOpenAddDept" v-auth="'add'">
+              <el-icon>
+                <ele-FolderAdd />
+              </el-icon>
+              新增部门
+            </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+      <el-table :data="tableData.data" style="width: 100%" row-key="deptId" default-expand-all :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" v-loading="tableData.loading">
+        <el-table-column prop="deptName" label="部门名称" v-col="'handle'" show-overflow-tooltip> </el-table-column>
+        <el-table-column prop="status" label="部门状态" v-col="'status'" align="center" min-width="120">
+          <template #default="scope">
+            <el-tag type="success" size="small" v-if="scope.row.status === 1">启用</el-tag>
+            <el-tag type="info" size="small" v-else>禁用</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="orderNum" label="排序" v-col="'orderNum'" align="center" min-width="120"></el-table-column>
+        <el-table-column prop="createdAt" label="创建时间" v-col="'createdAt'" align="center" min-width="180"></el-table-column>
+        <el-table-column label="操作" align="center" width="140" v-col="'handle'">
+          <template #default="scope">
+            <el-button size="small" type="text" @click="onOpenAddDept(scope.row)" v-auth="'add'">新增</el-button>
+            <el-button size="small" text type="warning" @click="onOpenEditDept(scope.row)" v-auth="'edit'">修改</el-button>
+            <el-button size="small" text type="danger" @click="onTabelRowDel(scope.row)" v-auth="'del'">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+    <EditDept ref="editDeptRef" @deptList="deptList" />
+  </div>
 </template>
 
 <script lang="ts">
@@ -60,88 +66,96 @@ import api from '/@/api/system';
 
 // 定义接口来定义对象的类型
 interface TableDataRow {
-	deptId: number;
-	parentId: number;
-	deptName: string;
-	status: number;
-	orderNum: number;
-	leader: string;
-	phone: string;
-	email: string;
-	children?: TableDataRow[];
+  deptId: number;
+  parentId: number;
+  deptName: string;
+  status: number;
+  orderNum: number;
+  leader: string;
+  phone: string;
+  email: string;
+  children?: TableDataRow[];
 }
 interface TableDataState {
-	tableData: {
-		data: Array<TableDataRow>;
-		loading: boolean;
-		param: {
-			deptName: string;
-			status: number;
-		};
-	};
+  tableData: {
+    data: Array<TableDataRow>;
+    loading: boolean;
+    param: {
+      deptName: string;
+      status: number;
+    };
+  };
 }
 
 export default defineComponent({
-	name: 'systemOrg',
-	components: { EditDept },
-	setup() {
-		const editDeptRef = ref();
-		const state = reactive<TableDataState>({
-			tableData: {
-				data: [],
-				loading: false,
-				param: {
-					deptName: '',
-					status: -1,
-				},
-			},
-		});
-		// 初始化表格数据
-		const initTableData = () => {
-			deptList();
-		};
-		const deptList = () => {
-			state.tableData.loading = true;
-			api.dept
-				.getList(state.tableData.param)
-				.then((res: any) => {
-					state.tableData.data = res;
-				})
-				.finally(() => (state.tableData.loading = false));
-		};
-		// 打开新增菜单弹窗
-		const onOpenAddDept = (row?: TableDataRow) => {
-			editDeptRef.value.openDialog(row?.deptId);
-		};
-		// 打开编辑菜单弹窗
-		const onOpenEditDept = (row: TableDataRow) => {
-			editDeptRef.value.openDialog(row);
-		};
-		// 删除当前行
-		const onTabelRowDel = (row: TableDataRow) => {
-			ElMessageBox.confirm(`此操作将永久删除部门：${row.deptName}, 是否继续?`, '提示', {
-				confirmButtonText: '删除',
-				cancelButtonText: '取消',
-				type: 'warning',
-			}).then(() => {
-				api.dept.del(row.deptId).then(() => {
-					ElMessage.success('删除成功');
-					deptList();
-				});
-			});
-		};
-		// 页面加载时
-		onMounted(() => {
-			initTableData();
-		});
-		return {
-			editDeptRef,
-			deptList,
-			onOpenAddDept,
-			onOpenEditDept,
-			onTabelRowDel,
-			...toRefs(state),
-		};
-	},
+  name: 'systemOrg',
+  components: { EditDept },
+  setup() {
+    const editDeptRef = ref();
+    const queryRef = ref();
+    const state = reactive<TableDataState>({
+      tableData: {
+        data: [],
+        loading: false,
+        param: {
+          deptName: '',
+          status: -1,
+        },
+      },
+    });
+    // 初始化表格数据
+    const initTableData = () => {
+      deptList();
+    };
+    const deptList = () => {
+      state.tableData.loading = true;
+      api.dept
+        .getList(state.tableData.param)
+        .then((res: any) => {
+          state.tableData.data = res;
+        })
+        .finally(() => (state.tableData.loading = false));
+    };
+    // 打开新增菜单弹窗
+    const onOpenAddDept = (row?: TableDataRow) => {
+      editDeptRef.value.openDialog(row?.deptId);
+    };
+    // 打开编辑菜单弹窗
+    const onOpenEditDept = (row: TableDataRow) => {
+      editDeptRef.value.openDialog(row);
+    };
+    // 重置表单
+    const resetQuery = () => {
+      queryRef.value.resetFields();
+      deptList();
+    };
+    // 删除当前行
+    const onTabelRowDel = (row: TableDataRow) => {
+      ElMessageBox.confirm(`此操作将永久删除部门：${row.deptName}, 是否继续?`, '提示', {
+        confirmButtonText: '删除',
+        cancelButtonText: '取消',
+        type: 'warning',
+      }).then(() => {
+        api.dept.del(row.deptId).then(() => {
+          ElMessage.success('删除成功');
+          deptList();
+        });
+      });
+    };
+    // 页面加载时
+    onMounted(() => {
+      initTableData();
+    });
+    return {
+      queryRef,
+      resetQuery,
+      editDeptRef,
+      deptList,
+      onOpenAddDept,
+      onOpenEditDept,
+      onTabelRowDel,
+      ...toRefs(state),
+    };
+  },
 });
 </script>

src/views/system/manage/org/index.vue

@@ -1,56 +1,62 @@
 <template>
-	<div class="system-dept-container">
-		<el-card shadow="hover">
-			<div class="system-dept-search mb15">
-				<el-form :inline="true">
-					<el-form-item label="区域名称">
-						<el-input size="default" v-model="tableData.param.name" placeholder="请输入区域名称" class="w-50" clearable />
-					</el-form-item>
-					<el-form-item label="状态">
-						<el-select size="default" placeholder="请选择状态" class="w-50" v-model="tableData.param.status">
-							<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="deptList">
-							<el-icon>
-								<ele-Search />
-							</el-icon>
-							查询
-						</el-button>
-						<el-button size="default" type="success" class="ml10" @click="onOpenAddDept" v-auth="'add'">
-							<el-icon>
-								<ele-FolderAdd />
-							</el-icon>
-							新增区域
-						</el-button>
-					</el-form-item>
-				</el-form>
-			</div>
-			<el-table :data="tableData.data" style="width: 100%" default-expand-all row-key="id" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" v-loading="tableData.loading">
-				<el-table-column prop="name" label="区域名称" show-overflow-tooltip v-col="'name'"> </el-table-column>
-				<el-table-column prop="number" label="区域编号" show-overflow-tooltip v-col="'number'"> </el-table-column>
-				<el-table-column prop="status" label="区域状态" align="center" min-width="120" v-col="'status'">
-					<template #default="scope">
-						<el-tag type="success" size="small" v-if="scope.row.status === 1">启用</el-tag>
-						<el-tag type="info" size="small" v-else>禁用</el-tag>
-					</template>
-				</el-table-column>
-				<el-table-column prop="orderNum" label="排序" align="center" min-width="120" v-col="'orderNum'"></el-table-column>
-				<el-table-column prop="createdAt" label="创建时间" align="center" min-width="180" v-col="'createdAt'"></el-table-column>
-				<el-table-column label="操作" align="center" v-col="'handle'" width="140">
-					<template #default="scope">
-						<el-button size="small" type="text" @click="onOpenAddDept(scope.row)" v-auth="'add'">新增</el-button>
-						<el-button size="small" text type="warning" @click="onOpenEditDept(scope.row)" v-auth="'edit'">修改</el-button>
-						<el-button size="small" text type="danger" @click="onTabelRowDel(scope.row)" v-auth="'del'">删除</el-button>
-					</template>
-				</el-table-column>
-			</el-table>
-		</el-card>
-		<EditDept ref="editDeptRef" @deptList="deptList" />
-	</div>
+  <div class="system-dept-container">
+    <el-card shadow="hover">
+      <div class="system-dept-search mb15">
+        <el-form :model="tableData.param" :inline="true" ref="queryRef">
+          <el-form-item label="区域名称" prop="name">
+            <el-input size="default" v-model="tableData.param.name" placeholder="请输入区域名称" class="w-50" clearable />
+          </el-form-item>
+          <el-form-item label="状态" prop="status">
+            <el-select size="default" placeholder="请选择状态" class="w-50" v-model="tableData.param.status">
+              <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="deptList">
+              <el-icon>
+                <ele-Search />
+              </el-icon>
+              查询
+            </el-button>
+            <el-button size="default" @click="resetQuery()">
+              <el-icon>
+                <ele-Refresh />
+              </el-icon>
+              重置
+            </el-button>
+            <el-button size="default" type="success" class="ml10" @click="onOpenAddDept" v-auth="'add'">
+              <el-icon>
+                <ele-FolderAdd />
+              </el-icon>
+              新增区域
+            </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+      <el-table :data="tableData.data" style="width: 100%" default-expand-all row-key="id" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" v-loading="tableData.loading">
+        <el-table-column prop="name" label="区域名称" show-overflow-tooltip v-col="'name'"> </el-table-column>
+        <el-table-column prop="number" label="区域编号" show-overflow-tooltip v-col="'number'"> </el-table-column>
+        <el-table-column prop="status" label="区域状态" align="center" min-width="120" v-col="'status'">
+          <template #default="scope">
+            <el-tag type="success" size="small" v-if="scope.row.status === 1">启用</el-tag>
+            <el-tag type="info" size="small" v-else>禁用</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="orderNum" label="排序" align="center" min-width="120" v-col="'orderNum'"></el-table-column>
+        <el-table-column prop="createdAt" label="创建时间" align="center" min-width="180" v-col="'createdAt'"></el-table-column>
+        <el-table-column label="操作" align="center" v-col="'handle'" width="140">
+          <template #default="scope">
+            <el-button size="small" type="text" @click="onOpenAddDept(scope.row)" v-auth="'add'">新增</el-button>
+            <el-button size="small" text type="warning" @click="onOpenEditDept(scope.row)" v-auth="'edit'">修改</el-button>
+            <el-button size="small" text type="danger" @click="onTabelRowDel(scope.row)" v-auth="'del'">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+    <EditDept ref="editDeptRef" @deptList="deptList" />
+  </div>
 </template>
 
 <script lang="ts">
@@ -61,90 +67,99 @@ import api from '/@/api/system';
 
 // 定义接口来定义对象的类型
 interface TableDataRow {
-	id: number;
-	parentId: number;
-	name: string;
-	status: number;
-	orderNum: number;
-	leader: string;
-	phone: string;
-	email: string;
-	children?: TableDataRow[];
+  id: number;
+  parentId: number;
+  name: string;
+  status: number;
+  orderNum: number;
+  leader: string;
+  phone: string;
+  email: string;
+  children?: TableDataRow[];
 }
 interface TableDataState {
-	tableData: {
-		data: Array<TableDataRow>;
-		loading: boolean;
-		param: {
-			name: string;
-			status: number;
-		};
-	};
+  tableData: {
+    data: Array<TableDataRow>;
+    loading: boolean;
+    param: {
+      name: string;
+      status: number;
+    };
+  };
 }
 
 export default defineComponent({
-	name: 'systemOrg',
-	components: { EditDept },
-	setup() {
-		const editDeptRef = ref();
-		const state = reactive<TableDataState>({
-			tableData: {
-				data: [],
-				loading: false,
-				param: {
-					name: '',
-					status: -1,
-				},
-			},
-		});
-		// 初始化表格数据
-		const initTableData = () => {
-			deptList();
-		};
-		const deptList = () => {
-			state.tableData.loading = true;
-			api.org
-				.getList(state.tableData.param)
-				.then((res: any) => {
-					state.tableData.data = res;
-				})
-				.finally(() => (state.tableData.loading = false));
-		};
-		// 打开新增菜单弹窗
-		const onOpenAddDept = (row?: TableDataRow) => {
-			editDeptRef.value.openDialog(row?.id);
-		};
-		// 打开编辑菜单弹窗
-		const onOpenEditDept = (row: TableDataRow) => {
-			editDeptRef.value.openDialog(row);
-		};
-		// 删除当前行
-		const onTabelRowDel = (row: TableDataRow) => {
-			ElMessageBox.confirm(`此操作将永久删除组织：${row.name}, 是否继续?`, '提示', {
-				confirmButtonText: '删除',
-				cancelButtonText: '取消',
-				type: 'warning',
-			})
-				.then(() => {
-					api.org.del(row.id).then(() => {
-						ElMessage.success('删除成功');
-						deptList();
-					});
-				})
-				.catch(() => { });
-		};
-		// 页面加载时
-		onMounted(() => {
-			initTableData();
-		});
-		return {
-			editDeptRef,
-			deptList,
-			onOpenAddDept,
-			onOpenEditDept,
-			onTabelRowDel,
-			...toRefs(state),
-		};
-	},
+  name: 'systemOrg',
+  components: { EditDept },
+  setup() {
+    const editDeptRef = ref();
+    const queryRef = ref();
+    const state = reactive<TableDataState>({
+      tableData: {
+        data: [],
+        loading: false,
+        param: {
+          name: '',
+          status: -1,
+        },
+      },
+    });
+    // 初始化表格数据
+    const initTableData = () => {
+      deptList();
+    };
+    const deptList = () => {
+      state.tableData.loading = true;
+      api.org
+        .getList(state.tableData.param)
+        .then((res: any) => {
+          state.tableData.data = res;
+        })
+        .finally(() => (state.tableData.loading = false));
+    };
+    // 打开新增菜单弹窗
+    const onOpenAddDept = (row?: TableDataRow) => {
+      editDeptRef.value.openDialog(row?.id);
+    };
+    // 打开编辑菜单弹窗
+    const onOpenEditDept = (row: TableDataRow) => {
+      editDeptRef.value.openDialog(row);
+    };
+
+    // 重置表单
+    const resetQuery = () => {
+      queryRef.value.resetFields();
+      deptList();
+    };
+    // 删除当前行
+    const onTabelRowDel = (row: TableDataRow) => {
+      ElMessageBox.confirm(`此操作将永久删除组织：${row.name}, 是否继续?`, '提示', {
+        confirmButtonText: '删除',
+        cancelButtonText: '取消',
+        type: 'warning',
+      })
+        .then(() => {
+          api.org.del(row.id).then(() => {
+            ElMessage.success('删除成功');
+            deptList();
+          });
+        })
+        .catch(() => { });
+    };
+    // 页面加载时
+    onMounted(() => {
+      initTableData();
+    });
+    return {
+      queryRef,
+      resetQuery,
+      editDeptRef,
+      deptList,
+      onOpenAddDept,
+      onOpenEditDept,
+      onTabelRowDel,
+      ...toRefs(state),
+    };
+  },
 });
 </script>

src/views/system/manage/post/index.vue

@@ -1,67 +1,73 @@
 <template>
-	<div class="system-post-container">
-		<el-card shadow="hover">
-			<div class="system-user-search mb15">
-				<el-form :inline="true">
-					<el-form-item label="岗位名称">
-						<el-input size="default" v-model="tableData.param.postName" placeholder="请输入岗位名称" class="w-50" clearable />
-					</el-form-item>
-					<el-form-item label="岗位编码">
-						<el-input size="default" v-model="tableData.param.postCode" placeholder="请输入岗位编码" class="w-50" clearable />
-					</el-form-item>
-					<el-form-item label="状态">
-						<el-select size="default" placeholder="请选择状态" class="w-50" v-model="tableData.param.status">
-							<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="postList">
-							<el-icon>
-								<ele-Search />
-							</el-icon>
-							查询
-						</el-button>
-						<el-button size="default" type="success" class="ml10" @click="onOpenAddPost" v-auth="'add'">
-							<el-icon>
-								<ele-FolderAdd />
-							</el-icon>
-							新增岗位
-						</el-button>
-						<!-- <el-button size="default" type="danger" class="ml10" @click="onRowDel(null)">
+  <div class="system-post-container">
+    <el-card shadow="hover">
+      <div class="system-user-search mb15">
+        <el-form :model="tableData.param" :inline="true" ref="queryRef">
+          <el-form-item label="岗位名称" prop="postName">
+            <el-input size="default" v-model="tableData.param.postName" placeholder="请输入岗位名称" class="w-50" clearable />
+          </el-form-item>
+          <el-form-item label="岗位编码" prop="postCode">
+            <el-input size="default" v-model="tableData.param.postCode" placeholder="请输入岗位编码" class="w-50" clearable />
+          </el-form-item>
+          <el-form-item label="状态" prop="status">
+            <el-select size="default" placeholder="请选择状态" class="w-50" v-model="tableData.param.status">
+              <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="postList">
+              <el-icon>
+                <ele-Search />
+              </el-icon>
+              查询
+            </el-button>
+            <el-button size="default" @click="resetQuery()">
+              <el-icon>
+                <ele-Refresh />
+              </el-icon>
+              重置
+            </el-button>
+            <el-button size="default" type="success" class="ml10" @click="onOpenAddPost" v-auth="'add'">
+              <el-icon>
+                <ele-FolderAdd />
+              </el-icon>
+              新增岗位
+            </el-button>
+            <!-- <el-button size="default" type="danger" class="ml10" @click="onRowDel(null)">
               <el-icon>
                 <ele-Delete />
               </el-icon>
               删除岗位
             </el-button> -->
-					</el-form-item>
-				</el-form>
-			</div>
-			<el-table :data="tableData.data" style="width: 100%" @selection-change="handleSelectionChange" row-key="postId" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" v-loading="tableData.loading">
-				<el-table-column type="selection" width="55" align="center" />
-				<el-table-column type="index" label="序号" width="60" align="center" />
-				<el-table-column prop="postCode" v-col="'postCode'" label="岗位编码" width="220" show-overflow-tooltip></el-table-column>
-				<el-table-column prop="postName" v-col="'postName'" label="岗位名称" show-overflow-tooltip></el-table-column>
-				<el-table-column prop="postSort" v-col="'postSort'" label="排序" width="60" align="center"></el-table-column>
-				<el-table-column prop="status" v-col="'status'" label="岗位状态" width="120" align="center">
-					<template #default="scope">
-						<el-tag type="success" size="small" v-if="scope.row.status === 1">启用</el-tag>
-						<el-tag type="info" size="small" v-else>禁用</el-tag>
-					</template>
-				</el-table-column>
-				<el-table-column prop="remark" v-col="'remark'" label="岗位描述" show-overflow-tooltip></el-table-column>
-				<el-table-column prop="createdAt" v-col="'createdAt'" label="创建时间" width="180" align="center"></el-table-column>
-				<el-table-column label="操作" width="100" v-col="'handle'">
-					<template #default="scope">
-						<el-button size="small" text type="warning" @click="onOpenEditPost(scope.row)" v-auth="'edit'">修改</el-button>
-						<el-button size="small" text type="danger" @click="onRowDel(scope.row)" v-auth="'del'">删除</el-button>
-					</template>
-				</el-table-column>
-			</el-table>
-		</el-card>
-		<EditPost ref="editPostRef" @getPostList="postList" />
-	</div>
+          </el-form-item>
+        </el-form>
+      </div>
+      <el-table :data="tableData.data" style="width: 100%" @selection-change="handleSelectionChange" row-key="postId" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" v-loading="tableData.loading">
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column type="index" label="序号" width="60" align="center" />
+        <el-table-column prop="postCode" v-col="'postCode'" label="岗位编码" width="220" show-overflow-tooltip></el-table-column>
+        <el-table-column prop="postName" v-col="'postName'" label="岗位名称" show-overflow-tooltip></el-table-column>
+        <el-table-column prop="postSort" v-col="'postSort'" label="排序" width="60" align="center"></el-table-column>
+        <el-table-column prop="status" v-col="'status'" label="岗位状态" width="120" align="center">
+          <template #default="scope">
+            <el-tag type="success" size="small" v-if="scope.row.status === 1">启用</el-tag>
+            <el-tag type="info" size="small" v-else>禁用</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="remark" v-col="'remark'" label="岗位描述" show-overflow-tooltip></el-table-column>
+        <el-table-column prop="createdAt" v-col="'createdAt'" label="创建时间" width="180" align="center"></el-table-column>
+        <el-table-column label="操作" width="100" v-col="'handle'">
+          <template #default="scope">
+            <el-button size="small" text type="warning" @click="onOpenEditPost(scope.row)" v-auth="'edit'">修改</el-button>
+            <el-button size="small" text type="danger" @click="onRowDel(scope.row)" v-auth="'del'">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+    <EditPost ref="editPostRef" @getPostList="postList" />
+  </div>
 </template>
 
 <script lang="ts">
@@ -71,113 +77,121 @@ import EditPost from './component/editPost.vue';
 import api from '/@/api/system';
 // 定义接口来定义对象的类型
 interface TableData {
-	postId: number;
-	postCode: string;
-	postName: string;
-	postSort: number;
-	status: number;
-	remark: string;
-	createdAt: string;
+  postId: number;
+  postCode: string;
+  postName: string;
+  postSort: number;
+  status: number;
+  remark: string;
+  createdAt: string;
 }
 interface TableDataState {
-	ids: number[];
-	tableData: {
-		data: Array<TableData>;
-		total: number;
-		loading: boolean;
-		param: {
-			postName: string;
-			status: number;
-			postCode?: string;
-		};
-	};
+  ids: number[];
+  tableData: {
+    data: Array<TableData>;
+    total: number;
+    loading: boolean;
+    param: {
+      postName: string;
+      status: number;
+      postCode?: string;
+    };
+  };
 }
 
 export default defineComponent({
-	name: 'apiV1SystemPostList',
-	components: { EditPost },
-	setup() {
-		const addPostRef = ref();
-		const editPostRef = ref();
-		const state = reactive<TableDataState>({
-			ids: [],
-			tableData: {
-				data: [],
-				total: 0,
-				loading: false,
-				param: {
-					postName: '',
-					status: -1,
-					postCode: '',
-				},
-			},
-		});
-		// 初始化表格数据
-		const initTableData = () => {
-			postList();
-		};
-		const postList = () => {
-			state.tableData.loading = true;
-			api.post
-				.getList(state.tableData.param)
-				.then((res: any) => {
-					state.tableData.data = res;
-				})
-				.finally(() => (state.tableData.loading = false));
-		};
-		// 打开新增岗位弹窗
-		const onOpenAddPost = () => {
-			editPostRef.value.openDialog();
-		};
-		// 打开修改岗位弹窗
-		const onOpenEditPost = (row: Object) => {
-			editPostRef.value.openDialog(toRaw(row));
-		};
-		// 删除岗位
-		const onRowDel = (row: any) => {
-			let msg = '你确定要删除所选岗位？';
-			// let ids: number[] = [];
-			// if (row) {
-			msg = `此操作将永久删除岗位：“${row.postName}”，是否继续?`;
-			// ids = [row.postId];
-			// } else {
-			// 	ids = state.ids;
-			// }
-			// if (ids.length === 0) {
-			// 	ElMessage.error('请选择要删除的数据。');
-			// 	return;
-			// }
-			ElMessageBox.confirm(msg, '提示', {
-				confirmButtonText: '确认',
-				cancelButtonText: '取消',
-				type: 'warning',
-			})
-				.then(() => {
-					api.post.del(row.postId).then(() => {
-						ElMessage.success('删除成功');
-						postList();
-					});
-				})
-				.catch(() => { });
-		};
-		// 页面加载时
-		onMounted(() => {
-			initTableData();
-		});
-		// 多选框选中数据
-		const handleSelectionChange = (selection: Array<TableData>) => {
-			state.ids = selection.map((item) => item.postId);
-		};
-		return {
-			addPostRef,
-			editPostRef,
-			onOpenAddPost,
-			onOpenEditPost,
-			onRowDel,
-			postList,
-			handleSelectionChange,
-			...toRefs(state),
-		};
-	},
+  name: 'apiV1SystemPostList',
+  components: { EditPost },
+  setup() {
+    const addPostRef = ref();
+    const editPostRef = ref();
+    const queryRef = ref();
+    const state = reactive<TableDataState>({
+      ids: [],
+      tableData: {
+        data: [],
+        total: 0,
+        loading: false,
+        param: {
+          postName: '',
+          status: -1,
+          postCode: '',
+        },
+      },
+    });
+    // 初始化表格数据
+    const initTableData = () => {
+      postList();
+    };
+    const postList = () => {
+      state.tableData.loading = true;
+      api.post
+        .getList(state.tableData.param)
+        .then((res: any) => {
+          state.tableData.data = res;
+        })
+        .finally(() => (state.tableData.loading = false));
+    };
+    // 打开新增岗位弹窗
+    const onOpenAddPost = () => {
+      editPostRef.value.openDialog();
+    };
+    // 打开修改岗位弹窗
+    const onOpenEditPost = (row: Object) => {
+      editPostRef.value.openDialog(toRaw(row));
+    };
+    // 删除岗位
+    const onRowDel = (row: any) => {
+      let msg = '你确定要删除所选岗位？';
+      // let ids: number[] = [];
+      // if (row) {
+      msg = `此操作将永久删除岗位：“${row.postName}”，是否继续?`;
+      // ids = [row.postId];
+      // } else {
+      // 	ids = state.ids;
+      // }
+      // if (ids.length === 0) {
+      // 	ElMessage.error('请选择要删除的数据。');
+      // 	return;
+      // }
+      ElMessageBox.confirm(msg, '提示', {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning',
+      })
+        .then(() => {
+          api.post.del(row.postId).then(() => {
+            ElMessage.success('删除成功');
+            postList();
+          });
+        })
+        .catch(() => { });
+    };
+    // 重置表单
+    const resetQuery = () => {
+      queryRef.value.resetFields();
+      initTableData();
+    };
+    // 页面加载时
+    onMounted(() => {
+      initTableData();
+    });
+    // 多选框选中数据
+    const handleSelectionChange = (selection: Array<TableData>) => {
+      state.ids = selection.map((item) => item.postId);
+    };
+    return {
+      queryRef,
+      resetQuery,
+      addPostRef,
+      editPostRef,
+      onOpenAddPost,
+      onOpenEditPost,
+      onRowDel,
+      postList,
+      handleSelectionChange,
+      ...toRefs(state),
+    };
+  },
 });
 </script>

src/views/system/manage/role/index.vue

@@ -1,53 +1,59 @@
 <template>
-	<div class="system-role-container">
-		<el-card shadow="hover">
-			<div class="system-user-search mb15">
-				<el-form :inline="true">
-					<el-form-item label="角色名称">
-						<el-input size="default" v-model="tableData.param.name" placeholder="请输入角色名称" class="w-50" clearable />
-					</el-form-item>
-					<el-form-item label="状态">
-						<el-select size="default" placeholder="请选择状态" class="w-50" v-model="tableData.param.status">
-							<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="roleList">
-							<el-icon>
-								<ele-Search />
-							</el-icon>
-							查询
-						</el-button>
-						<el-button size="default" type="success" class="ml10" @click="onOpenAddRole" v-auth="'add'">
-							<el-icon>
-								<ele-FolderAdd />
-							</el-icon>
-							新增角色
-						</el-button>
-					</el-form-item>
-				</el-form>
-			</div>
-			<el-table :data="tableData.data" style="width: 100%" row-key="id" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" v-loading="tableData.loading">
-				<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="remark" v-col="'remark'" label="角色描述" show-overflow-tooltip></el-table-column>
-				<el-table-column prop="listOrder" v-col="'listOrder'" label="排序" width="60" align="center"></el-table-column>
-				<el-table-column prop="status" v-col="'status'" label="角色状态" width="100" align="center">
-					<template #default="scope">
-						<el-tag type="success" size="small" v-if="scope.row.status === 1">启用</el-tag>
-						<el-tag type="info" size="small" v-else>禁用</el-tag>
-					</template>
-				</el-table-column>
-				<el-table-column prop="createdAt" v-col="'createdAt'" label="创建时间" width="170" align="center"></el-table-column>
-				<el-table-column label="操作" width="220" v-col="'handle'" align="center" fixed="right">
-					<template #default="scope">
-						<el-button size="small" type="text" @click="onOpenEditRole(scope.row)" v-auth="'edit'">修改</el-button>
-						<el-button size="small" text type="danger" @click="onRowDel(scope.row)" v-auth="'del'">删除</el-button>
-						<el-button size="small" text type="success" @click="permission(scope.row)" v-auth="'role-premission'">角色权限</el-button>
-						<el-button size="small" text type="info" @click="dataPermission(scope.row)" v-auth="'data-premission'">数据权限</el-button>
-						<!-- <el-dropdown size="small">
+  <div class="system-role-container">
+    <el-card shadow="hover">
+      <div class="system-user-search mb15">
+        <el-form :model="tableData.param" :inline="true" ref="queryRef">
+          <el-form-item label="角色名称" prop="name">
+            <el-input size="default" v-model="tableData.param.name" placeholder="请输入角色名称" class="w-50" clearable />
+          </el-form-item>
+          <el-form-item label="状态" prop="status">
+            <el-select size="default" placeholder="请选择状态" class="w-50" v-model="tableData.param.status">
+              <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="roleList">
+              <el-icon>
+                <ele-Search />
+              </el-icon>
+              查询
+            </el-button>
+            <el-button size="default" @click="resetQuery()">
+              <el-icon>
+                <ele-Refresh />
+              </el-icon>
+              重置
+            </el-button>
+            <el-button size="default" type="success" class="ml10" @click="onOpenAddRole" v-auth="'add'">
+              <el-icon>
+                <ele-FolderAdd />
+              </el-icon>
+              新增角色
+            </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+      <el-table :data="tableData.data" style="width: 100%" row-key="id" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" v-loading="tableData.loading">
+        <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="remark" v-col="'remark'" label="角色描述" show-overflow-tooltip></el-table-column>
+        <el-table-column prop="listOrder" v-col="'listOrder'" label="排序" width="60" align="center"></el-table-column>
+        <el-table-column prop="status" v-col="'status'" label="角色状态" width="100" align="center">
+          <template #default="scope">
+            <el-tag type="success" size="small" v-if="scope.row.status === 1">启用</el-tag>
+            <el-tag type="info" size="small" v-else>禁用</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="createdAt" v-col="'createdAt'" label="创建时间" width="170" align="center"></el-table-column>
+        <el-table-column label="操作" width="220" v-col="'handle'" align="center" fixed="right">
+          <template #default="scope">
+            <el-button size="small" type="text" @click="onOpenEditRole(scope.row)" v-auth="'edit'">修改</el-button>
+            <el-button size="small" text type="danger" @click="onRowDel(scope.row)" v-auth="'del'">删除</el-button>
+            <el-button size="small" text type="success" @click="permission(scope.row)" v-auth="'role-premission'">角色权限</el-button>
+            <el-button size="small" text type="info" @click="dataPermission(scope.row)" v-auth="'data-premission'">数据权限</el-button>
+            <!-- <el-dropdown size="small">
               <el-button type="text" size="small" style="margin-top:1px;margin-left:10px">更多
                 <el-icon>
                   <ele-ArrowDown />
@@ -60,15 +66,15 @@
                 </el-dropdown-menu>
               </template>
             </el-dropdown> -->
-					</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="roleList" /> -->
-		</el-card>
-		<EditRole ref="editRoleRef" @getList="roleList" :list="tableData.data" />
-		<permissionVue ref="permissionRef" />
-		<EditPer ref="dataPermissionRef" :dept-data="deptData" />
-	</div>
+          </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="roleList" /> -->
+    </el-card>
+    <EditRole ref="editRoleRef" @getList="roleList" :list="tableData.data" />
+    <permissionVue ref="permissionRef" />
+    <EditPer ref="dataPermissionRef" :dept-data="deptData" />
+  </div>
 </template>
 
 <script lang="ts">
@@ -80,123 +86,131 @@ import permissionVue from './component/permission.vue';
 import api from '/@/api/system';
 // 定义接口来定义对象的类型
 interface TableData {
-	id: number;
-	status: number;
-	listOrder: number;
-	name: string;
-	remark: string;
-	dataScope: number;
-	createdAt: string;
+  id: number;
+  status: number;
+  listOrder: number;
+  name: string;
+  remark: string;
+  dataScope: number;
+  createdAt: string;
 }
 interface TableDataState {
-	deptData: any[];
-	tableData: {
-		data: Array<TableData>;
-		// total: number;
-		loading: boolean;
-		param: {
-			name: string;
-			status: number;
-		};
-	};
+  deptData: any[];
+  tableData: {
+    data: Array<TableData>;
+    // total: number;
+    loading: boolean;
+    param: {
+      name: string;
+      status: number;
+    };
+  };
 }
 
 export default defineComponent({
-	name: 'apiV1SystemRoleList',
-	components: { EditRole, permissionVue, EditPer },
-	setup() {
-		const { proxy } = getCurrentInstance() as any;
-		const addRoleRef = ref();
-		const editRoleRef = ref();
-		const permissionRef = ref();
-		const dataPermissionRef = ref();
-		const state = reactive<TableDataState>({
-			deptData: [],
-			tableData: {
-				data: [],
-				// total: 0,
-				loading: false,
-				param: {
-					name: '',
-					status: -1,
-				},
-			},
-		});
-		// 初始化表格数据
-		const initTableData = () => {
-			roleList();
-			api.dept
-				.getList({
-					status: 1,
-				})
-				.then((res: any) => {
-					state.deptData = res;
-				});
-		};
-		const roleList = () => {
-			state.tableData.loading = true;
-			api.role
-				.getList(state.tableData.param)
-				.then((res: Array<TableData>) => {
-					state.tableData.data = res || [];
-				})
-				.finally(() => (state.tableData.loading = false));
-		};
-		// 打开新增角色弹窗
-		const onOpenAddRole = () => {
-			editRoleRef.value.openDialog();
-		};
-		// 打开修改角色弹窗
-		const onOpenEditRole = (row: Object) => {
-			editRoleRef.value.openDialog(toRaw(row));
-		};
-		// 删除角色
-		const onRowDel = (row: any) => {
-			ElMessageBox.confirm(`此操作将永久删除角色：“${row.name}”，是否继续?`, '提示', {
-				confirmButtonText: '确认',
-				cancelButtonText: '取消',
-				type: 'warning',
-			}).then(() => {
-				api.role.deleteRole(row.id).then(() => {
-					ElMessage.success('删除成功');
-					proxy.$refs['editRoleRef'].resetMenuSession();
-					roleList();
-				});
-			});
-		};
+  name: 'apiV1SystemRoleList',
+  components: { EditRole, permissionVue, EditPer },
+  setup() {
+    const { proxy } = getCurrentInstance() as any;
+    const addRoleRef = ref();
+    const queryRef = ref();
+    const editRoleRef = ref();
+    const permissionRef = ref();
+    const dataPermissionRef = ref();
+    const state = reactive<TableDataState>({
+      deptData: [],
+      tableData: {
+        data: [],
+        // total: 0,
+        loading: false,
+        param: {
+          name: '',
+          status: -1,
+        },
+      },
+    });
+    // 初始化表格数据
+    const initTableData = () => {
+      roleList();
+      api.dept
+        .getList({
+          status: 1,
+        })
+        .then((res: any) => {
+          state.deptData = res;
+        });
+    };
+    const roleList = () => {
+      state.tableData.loading = true;
+      api.role
+        .getList(state.tableData.param)
+        .then((res: Array<TableData>) => {
+          state.tableData.data = res || [];
+        })
+        .finally(() => (state.tableData.loading = false));
+    };
+    // 打开新增角色弹窗
+    const onOpenAddRole = () => {
+      editRoleRef.value.openDialog();
+    };
+    // 打开修改角色弹窗
+    const onOpenEditRole = (row: Object) => {
+      editRoleRef.value.openDialog(toRaw(row));
+    };
+    // 删除角色
+    const onRowDel = (row: any) => {
+      ElMessageBox.confirm(`此操作将永久删除角色：“${row.name}”，是否继续?`, '提示', {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning',
+      }).then(() => {
+        api.role.deleteRole(row.id).then(() => {
+          ElMessage.success('删除成功');
+          proxy.$refs['editRoleRef'].resetMenuSession();
+          roleList();
+        });
+      });
+    };
 
-		// 设置权限
-		const permission = async (row: any) => {
-			const { isAllow } = await api.role.auth.isAllow(row.id);
-			if (isAllow) {
-				permissionRef.value.openDialog(row);
-			} else {
-				ElMessage.error('该角色禁止被授权');
-			}
-		};
-		// 设置数据权限
-		const dataPermission = async (row: any) => {
-			dataPermissionRef.value.openDialog(row);
-		};
+    // 设置权限
+    const permission = async (row: any) => {
+      const { isAllow } = await api.role.auth.isAllow(row.id);
+      if (isAllow) {
+        permissionRef.value.openDialog(row);
+      } else {
+        ElMessage.error('该角色禁止被授权');
+      }
+    };
+    // 设置数据权限
+    const dataPermission = async (row: any) => {
+      dataPermissionRef.value.openDialog(row);
+    };
 
-		// 页面加载时
-		onMounted(() => {
-			initTableData();
-		});
+    // 页面加载时
+    onMounted(() => {
+      initTableData();
+    });
+    // 重置表单
+    const resetQuery = () => {
+      queryRef.value.resetFields();
+      initTableData();
+    };
 
-		return {
-			addRoleRef,
-			editRoleRef,
-			permissionRef,
-			dataPermissionRef,
-			dataPermission,
-			permission,
-			onOpenAddRole,
-			onOpenEditRole,
-			onRowDel,
-			roleList,
-			...toRefs(state),
-		};
-	},
+    return {
+      queryRef,
+      resetQuery,
+      addRoleRef,
+      editRoleRef,
+      permissionRef,
+      dataPermissionRef,
+      dataPermission,
+      permission,
+      onOpenAddRole,
+      onOpenEditRole,
+      onRowDel,
+      roleList,
+      ...toRefs(state),
+    };
+  },
 });
 </script>

src/views/system/menu/index.vue

@@ -2,8 +2,8 @@
   <div class="system-user-container">
     <el-card shadow="hover">
       <div class="system-menu-search">
-        <el-form inline>
-          <el-form-item label="菜单名称">
+        <el-form :model="state.queryParams" :inline="true" ref="queryRef">
+          <el-form-item label="菜单名称" prop="title">
             <el-input v-model="state.queryParams.title" placeholder="请输入菜单名称" size="default" clearable class="w-50" />
           </el-form-item>
           <!-- <el-form-item label="组件路径">
@@ -16,6 +16,12 @@
               </el-icon>
               查询
             </el-button>
+            <el-button size="default" @click="resetQuery()">
+              <el-icon>
+                <ele-Refresh />
+              </el-icon>
+              重置
+            </el-button>
             <el-button type="success" class="ml10" @click="onOpenAddMenu(null)" v-auth="'add'">
               <el-icon>
                 <ele-FolderAdd />
@@ -84,6 +90,7 @@ import api from '/@/api/system';
 import ButtonAuthorizeListDrawer from './component/btn.vue';
 import ListAuthorizeListDrawer from './component/list.vue';
 const editMenuRef = ref();
+const queryRef = ref();
 const buttonAuthorizeList = ref();
 const listAuthorizeList = ref();
 const state = reactive({
@@ -141,6 +148,11 @@ onBeforeMount(() => {
 const handleQuery = () => {
   menuList();
 };
+// 重置表单
+const resetQuery = () => {
+  queryRef.value.resetFields();
+  handleQuery();
+};
 const menuList = () => {
   state.loading = true;
   api.menu