yanglzh 3 anni fa
parent
commit
0586accc7d

+ 2 - 2
src/views/system/api/index.vue

@@ -32,7 +32,7 @@
 					</el-form-item>
 				</el-form>
 			</div>
-			<el-table :data="tableData" style="width: 100%">
+			<el-table :data="tableData" style="width: 100%" v-loading="loading">
 				<el-table-column type="index" label="序号" width="60" align="center" />
 				<el-table-column prop="name" label="接口名称" show-overflow-tooltip></el-table-column>
 				<el-table-column prop="address" label="接口地址" show-overflow-tooltip></el-table-column>
@@ -65,7 +65,7 @@ import { useSearch } from '/@/hooks/useCommon';
 
 const editFormRef = ref();
 
-const { params, tableData, getList } = useSearch<ApiRow[]>(api.api.getList, 'Info', { name: '', address: '' });
+const { params, tableData, getList, loading } = useSearch<ApiRow[]>(api.api.getList, 'Info', { name: '', address: '' });
 
 getList();
 

+ 97 - 78
src/views/system/config/index.vue

@@ -1,74 +1,89 @@
 <template>
-  <div class="system-dic-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-item label="参数名称" prop="configName">
-            <el-input v-model="tableData.param.configName" placeholder="请输入参数名称" clearable size="default" @keyup.enter.native="dataList" />
-          </el-form-item>
-          <el-form-item label="参数键名" prop="configKey">
-            <el-input v-model="tableData.param.configKey" placeholder="请输入参数键名" clearable size="default" @keyup.enter.native="dataList" />
-          </el-form-item>
-          <el-form-item label="系统内置" prop="configType" style="width: 200px;">
-            <el-select v-model="tableData.param.configType" placeholder="系统内置" clearable size="default" style="width: 240px">
-              <el-option v-for="dict in sys_yes_no" :key="dict.value" :label="dict.label" :value="dict.value" />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="创建时间" prop="dateRange">
-            <el-date-picker v-model="tableData.param.dateRange" size="default" style="width: 240px" value-format="YYYY-MM-DD" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
-          </el-form-item>
-          <el-form-item>
-            <el-button size="default" type="primary" class="ml10" @click="dataList">
-              <el-icon>
-                <ele-Search />
-              </el-icon>
-              查询
-            </el-button>
-            <el-button size="default" @click="resetQuery(queryRef)">
-              <el-icon>
-                <ele-Refresh />
-              </el-icon>
-              重置
-            </el-button>
-            <el-button size="default" type="success" class="ml10" @click="onOpenAddDic">
-              <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">
-        <el-table-column type="selection" width="55" align="center" />
-        <el-table-column label="ID" align="center" prop="configId" width="60" />
-        <el-table-column label="参数名称" prop="configName" :show-overflow-tooltip="true" />
-        <el-table-column label="参数键名" prop="configKey" :show-overflow-tooltip="true" />
-        <el-table-column label="参数键值" prop="configValue" />
-        <el-table-column label="备注" prop="remark" :show-overflow-tooltip="true" />
-        <!-- <el-table-column label="创建时间" prop="createdAt" width="180" align="center" /> -->
-        <el-table-column label="系统内置" align="center" prop="configType" width="100">
-          <template #default="{row}">
-            {{row.configType?'是':'否'}}
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" width="100" align="center" fixed="right">
-          <template #default="scope">
-            <el-button size="small" text type="warning" @click="onOpenEditDic(scope.row)">修改</el-button>
-            <el-button size="small" text type="danger" @click="onRowDel(scope.row)">删除</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" />
-    </el-card>
-    <EditConfig ref="editDicRef" @dataList="dataList" :sysYesNoOptions="sys_yes_no" />
-  </div>
+	<div class="system-dic-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-item label="参数名称" prop="configName">
+						<el-input v-model="tableData.param.configName" placeholder="请输入参数名称" clearable size="default" @keyup.enter.native="dataList" />
+					</el-form-item>
+					<el-form-item label="参数键名" prop="configKey">
+						<el-input v-model="tableData.param.configKey" placeholder="请输入参数键名" clearable size="default" @keyup.enter.native="dataList" />
+					</el-form-item>
+					<el-form-item label="系统内置" prop="configType" style="width: 200px">
+						<el-select v-model="tableData.param.configType" placeholder="系统内置" clearable size="default" style="width: 240px">
+							<el-option v-for="dict in sys_yes_no" :key="dict.value" :label="dict.label" :value="dict.value" />
+						</el-select>
+					</el-form-item>
+					<el-form-item label="创建时间" prop="dateRange">
+						<el-date-picker
+							v-model="tableData.param.dateRange"
+							size="default"
+							style="width: 240px"
+							value-format="YYYY-MM-DD"
+							type="daterange"
+							range-separator="-"
+							start-placeholder="开始日期"
+							end-placeholder="结束日期"
+						></el-date-picker>
+					</el-form-item>
+					<el-form-item>
+						<el-button size="default" type="primary" class="ml10" @click="dataList">
+							<el-icon>
+								<ele-Search />
+							</el-icon>
+							查询
+						</el-button>
+						<el-button size="default" @click="resetQuery(queryRef)">
+							<el-icon>
+								<ele-Refresh />
+							</el-icon>
+							重置
+						</el-button>
+						<el-button size="default" type="success" class="ml10" @click="onOpenAddDic">
+							<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" v-loading="tableData.loading">
+				<el-table-column type="selection" width="55" align="center" />
+				<el-table-column label="ID" align="center" prop="configId" width="60" />
+				<el-table-column label="参数名称" prop="configName" :show-overflow-tooltip="true" />
+				<el-table-column label="参数键名" prop="configKey" :show-overflow-tooltip="true" />
+				<el-table-column label="参数键值" prop="configValue" />
+				<el-table-column label="备注" prop="remark" :show-overflow-tooltip="true" />
+				<!-- <el-table-column label="创建时间" prop="createdAt" width="180" align="center" /> -->
+				<el-table-column label="系统内置" align="center" prop="configType" width="100">
+					<template #default="{ row }">
+						{{ row.configType ? '是' : '否' }}
+					</template>
+				</el-table-column>
+				<el-table-column label="操作" width="100" align="center" fixed="right">
+					<template #default="scope">
+						<el-button size="small" text type="warning" @click="onOpenEditDic(scope.row)">修改</el-button>
+						<el-button size="small" text type="danger" @click="onRowDel(scope.row)">删除</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"
+			/>
+		</el-card>
+		<EditConfig ref="editDicRef" @dataList="dataList" :sysYesNoOptions="sys_yes_no" />
+	</div>
 </template>
 
 <script lang="ts">
@@ -134,10 +149,14 @@ export default defineComponent({
 			dataList();
 		};
 		const dataList = () => {
-			api.config.getList(state.tableData.param).then((res: any) => {
-				state.tableData.data = res.list;
-				state.tableData.total = res.total;
-			});
+			state.tableData.loading = true;
+			api.config
+				.getList(state.tableData.param)
+				.then((res: any) => {
+					state.tableData.data = res.list;
+					state.tableData.total = res.total;
+				})
+				.finally(() => (state.tableData.loading = false));
 		};
 		// 打开新增字典弹窗
 		const onOpenAddDic = () => {
@@ -188,10 +207,10 @@ export default defineComponent({
 		const handleSelectionChange = (selection: TableDataRow[]) => {
 			state.ids = selection.map((item) => item.configId);
 		};
-    // 参数系统内置字典翻译
-    const typeFormat=(row:TableDataRow) => {
-      return proxy.selectDictLabel(unref(sys_yes_no), row.configType);
-    };
+		// 参数系统内置字典翻译
+		const typeFormat = (row: TableDataRow) => {
+			return proxy.selectDictLabel(unref(sys_yes_no), row.configType);
+		};
 		return {
 			addDicRef,
 			editDicRef,

+ 65 - 54
src/views/system/dept/index.vue

@@ -1,55 +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.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">
-              <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' }">
-        <el-table-column prop="deptName" label="部门名称" show-overflow-tooltip> </el-table-column>
-        <el-table-column prop="status" label="部门状态" 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="排序" align="center" min-width="120"></el-table-column>
-        <el-table-column prop="createdAt" label="创建时间" align="center" min-width="180"></el-table-column>
-        <el-table-column label="操作" align="center" width="140">
-          <template #default="scope">
-            <el-button size="small" type="text" @click="onOpenAddDept(scope.row)" v-auth="'edit'">新增</el-button>
-            <el-button size="small" text type="warning" @click="onOpenEditDept(scope.row)">修改</el-button>
-            <el-button size="small" text type="danger" @click="onTabelRowDel(scope.row)">删除</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 :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">
+							<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="部门名称" show-overflow-tooltip> </el-table-column>
+				<el-table-column prop="status" label="部门状态" 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="排序" align="center" min-width="120"></el-table-column>
+				<el-table-column prop="createdAt" label="创建时间" align="center" min-width="180"></el-table-column>
+				<el-table-column label="操作" align="center" width="140">
+					<template #default="scope">
+						<el-button size="small" type="text" @click="onOpenAddDept(scope.row)" v-auth="'edit'">新增</el-button>
+						<el-button size="small" text type="warning" @click="onOpenEditDept(scope.row)">修改</el-button>
+						<el-button size="small" text type="danger" @click="onTabelRowDel(scope.row)">删除</el-button>
+					</template>
+				</el-table-column>
+			</el-table>
+		</el-card>
+		<EditDept ref="editDeptRef" @deptList="deptList" />
+	</div>
 </template>
 
 <script lang="ts">
@@ -101,9 +108,13 @@ export default defineComponent({
 			deptList();
 		};
 		const deptList = () => {
-			api.dept.getList(state.tableData.param).then((res: any) => {
-				state.tableData.data = res;
-			});
+			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) => {

+ 90 - 75
src/views/system/menu/index.vue

@@ -1,77 +1,87 @@
 <template>
-  <div class="system-user-container">
-    <el-card shadow="hover">
-      <div class="system-menu-search ">
-        <el-form inline>
-          <el-form-item label="菜单名称">
-            <el-input v-model="state.queryParams.title" placeholder="请输入菜单名称" size="default" clearable class="w-50" />
-          </el-form-item>
-          <!-- <el-form-item label="组件路径">
+	<div class="system-user-container">
+		<el-card shadow="hover">
+			<div class="system-menu-search">
+				<el-form inline>
+					<el-form-item label="菜单名称">
+						<el-input v-model="state.queryParams.title" placeholder="请输入菜单名称" size="default" clearable class="w-50" />
+					</el-form-item>
+					<!-- <el-form-item label="组件路径">
             <el-input v-model="queryParams.component" placeholder="请输入组件路径" clearable  class="w-50" />
           </el-form-item> -->
-          <el-form-item>
-            <el-button type="primary" class="ml10" @click="handleQuery">
-              <el-icon>
-                <ele-Search />
-              </el-icon>
-              查询
-            </el-button>
-            <el-button type="success" class="ml10" @click="onOpenAddMenu(null)">
-              <el-icon>
-                <ele-FolderAdd />
-              </el-icon>
-              新增菜单
-            </el-button>
-          </el-form-item>
-        </el-form>
-      </div>
-      <el-table :data="state.menuTableData" default-expand-all style="width: 100%" row-key="path" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
-        <el-table-column label="菜单名称" show-overflow-tooltip>
-          <template #default="scope">
-            <SvgIcon :name="scope.row.icon" />
-            <span class="ml10">{{ scope.row.title }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column prop="path" label="路由路径" show-overflow-tooltip></el-table-column>
-        <el-table-column label="组件路径" prop="component" show-overflow-tooltip></el-table-column>
-        <el-table-column label="排序" prop="weigh" width="80" align="center"></el-table-column>
-        <el-table-column label="类型" width="80" align="center">
-          <template #default="scope">
-            <el-tag :type="scope.row.menuType===0?'danger':(scope.row.menuType===1?'success':'warning')" size="small">{{scope.row.menuType===0?'目录':(scope.row.menuType===1?'菜单':'按钮') }}</el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column prop="isHide" label="显示状态" align="center" width="120">
-          <template #default="{row}">
-            {{row.isHide?'隐藏':'显示'}}
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" width="200" align="center" fixed="right">
-          <template #default="scope">
-            <el-button v-if="!scope.row.menuType" size="small" type="text" @click="onOpenAddMenu(scope.row)">新增</el-button>
-            <el-button size="small" text type="warning" @click="onOpenEditMenu(scope.row)">修改</el-button>
-            <el-button size="small" text type="danger" @click="onTabelRowDel(scope.row)">删除</el-button>
-            <el-dropdown v-if="scope.row.menuType">
-              <el-button type="text" size="small" style="margin-top:1px;margin-left:10px">更多
-                <el-icon>
-                  <ele-ArrowDown />
-                </el-icon>
-              </el-button>
-              <template #dropdown>
-                <el-dropdown-menu>
-                  <el-dropdown-item @click.native="authOpen(scope.row,'buttonAuthorizeList')">按钮权限</el-dropdown-item>
-                  <el-dropdown-item @click.native="authOpen(scope.row,'listAuthorizeList')">列表权限</el-dropdown-item>
-                </el-dropdown-menu>
-              </template>
-            </el-dropdown>
-          </template>
-        </el-table-column>
-      </el-table>
-    </el-card>
-    <EditMenu ref="editMenuRef" @menuList="menuList" :menu="state.menuTableData" :visibleOptions="sys_show_hide" :acType="acType" />
-    <ButtonAuthorizeListDrawer ref="buttonAuthorizeList" />
-    <ListAuthorizeListDrawer ref="listAuthorizeList" />
-    <ApiAuthorizeListDrawer ref="apiAuthorizeList" />
-  </div>
+					<el-form-item>
+						<el-button type="primary" class="ml10" @click="handleQuery">
+							<el-icon>
+								<ele-Search />
+							</el-icon>
+							查询
+						</el-button>
+						<el-button type="success" class="ml10" @click="onOpenAddMenu(null)">
+							<el-icon>
+								<ele-FolderAdd />
+							</el-icon>
+							新增菜单
+						</el-button>
+					</el-form-item>
+				</el-form>
+			</div>
+			<el-table
+				:data="state.menuTableData"
+				default-expand-all
+				style="width: 100%"
+				row-key="path"
+				:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+        v-loading="state.loading"
+			>
+				<el-table-column label="菜单名称" show-overflow-tooltip>
+					<template #default="scope">
+						<SvgIcon :name="scope.row.icon" />
+						<span class="ml10">{{ scope.row.title }}</span>
+					</template>
+				</el-table-column>
+				<el-table-column prop="path" label="路由路径" show-overflow-tooltip></el-table-column>
+				<el-table-column label="组件路径" prop="component" show-overflow-tooltip></el-table-column>
+				<el-table-column label="排序" prop="weigh" width="80" align="center"></el-table-column>
+				<el-table-column label="类型" width="80" align="center">
+					<template #default="scope">
+						<el-tag :type="scope.row.menuType === 0 ? 'danger' : scope.row.menuType === 1 ? 'success' : 'warning'" size="small">{{
+							scope.row.menuType === 0 ? '目录' : scope.row.menuType === 1 ? '菜单' : '按钮'
+						}}</el-tag>
+					</template>
+				</el-table-column>
+				<el-table-column prop="isHide" label="显示状态" align="center" width="120">
+					<template #default="{ row }">
+						{{ row.isHide ? '隐藏' : '显示' }}
+					</template>
+				</el-table-column>
+				<el-table-column label="操作" width="200" align="center" fixed="right">
+					<template #default="scope">
+						<el-button v-if="!scope.row.menuType" size="small" type="text" @click="onOpenAddMenu(scope.row)">新增</el-button>
+						<el-button size="small" text type="warning" @click="onOpenEditMenu(scope.row)">修改</el-button>
+						<el-button size="small" text type="danger" @click="onTabelRowDel(scope.row)">删除</el-button>
+						<el-dropdown v-if="scope.row.menuType">
+							<el-button type="text" size="small" style="margin-top: 1px; margin-left: 10px"
+								>更多
+								<el-icon>
+									<ele-ArrowDown />
+								</el-icon>
+							</el-button>
+							<template #dropdown>
+								<el-dropdown-menu>
+									<el-dropdown-item @click.native="authOpen(scope.row, 'buttonAuthorizeList')">按钮权限</el-dropdown-item>
+									<el-dropdown-item @click.native="authOpen(scope.row, 'listAuthorizeList')">列表权限</el-dropdown-item>
+								</el-dropdown-menu>
+							</template>
+						</el-dropdown>
+					</template>
+				</el-table-column>
+			</el-table>
+		</el-card>
+		<EditMenu ref="editMenuRef" @menuList="menuList" :menu="state.menuTableData" :visibleOptions="sys_show_hide" :acType="acType" />
+		<ButtonAuthorizeListDrawer ref="buttonAuthorizeList" />
+		<ListAuthorizeListDrawer ref="listAuthorizeList" />
+		<ApiAuthorizeListDrawer ref="apiAuthorizeList" />
+	</div>
 </template>
 
 <script lang="ts" setup>
@@ -85,6 +95,7 @@ const editMenuRef = ref();
 const buttonAuthorizeList = ref();
 const listAuthorizeList = ref();
 const state = reactive({
+  loading:false,
 	queryParams: {
 		title: '',
 		component: '',
@@ -139,9 +150,13 @@ const handleQuery = () => {
 	menuList();
 };
 const menuList = () => {
-	api.menu.getList(state.queryParams).then((res: any) => {
-		// console.log({...res[0]})
-		state.menuTableData = res || [];
-	});
+	state.loading = true;
+	api.menu
+		.getList(state.queryParams)
+		.then((res: any) => {
+			// console.log({...res[0]})
+			state.menuTableData = res || [];
+		})
+		.finally(() => (state.loading = false));
 };
 </script>

+ 65 - 54
src/views/system/org/index.vue

@@ -1,55 +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">
-              <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' }">
-        <el-table-column prop="name" label="组织名称" show-overflow-tooltip> </el-table-column>
-        <el-table-column prop="status" label="组织状态" 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="排序" align="center" min-width="120"></el-table-column>
-        <el-table-column prop="createdAt" label="创建时间" align="center" min-width="180"></el-table-column>
-        <el-table-column label="操作" align="center" width="140">
-          <template #default="scope">
-            <el-button size="small" type="text" @click="onOpenAddDept(scope.row)">新增</el-button>
-            <el-button size="small" text type="warning" @click="onOpenEditDept(scope.row)">修改</el-button>
-            <el-button size="small" text type="danger" @click="onTabelRowDel(scope.row)">删除</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 :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">
+							<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> </el-table-column>
+				<el-table-column prop="status" label="组织状态" 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="排序" align="center" min-width="120"></el-table-column>
+				<el-table-column prop="createdAt" label="创建时间" align="center" min-width="180"></el-table-column>
+				<el-table-column label="操作" align="center" width="140">
+					<template #default="scope">
+						<el-button size="small" type="text" @click="onOpenAddDept(scope.row)">新增</el-button>
+						<el-button size="small" text type="warning" @click="onOpenEditDept(scope.row)">修改</el-button>
+						<el-button size="small" text type="danger" @click="onTabelRowDel(scope.row)">删除</el-button>
+					</template>
+				</el-table-column>
+			</el-table>
+		</el-card>
+		<EditDept ref="editDeptRef" @deptList="deptList" />
+	</div>
 </template>
 
 <script lang="ts">
@@ -101,9 +108,13 @@ export default defineComponent({
 			deptList();
 		};
 		const deptList = () => {
-			api.org.getList(state.tableData.param).then((res: any) => {
-				state.tableData.data = res;
-			});
+			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) => {

+ 72 - 61
src/views/system/post/index.vue

@@ -1,67 +1,74 @@
 <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">
-              <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 :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">
+							<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' }">
-        <el-table-column type="selection" width="55" align="center" />
-        <el-table-column type="index" label="序号" width="60" align="center" />
-        <el-table-column prop="postCode" label="岗位编码" width="220" show-overflow-tooltip></el-table-column>
-        <el-table-column prop="postName" label="岗位名称" show-overflow-tooltip></el-table-column>
-        <el-table-column prop="postSort" label="排序" width="60" align="center"></el-table-column>
-        <el-table-column prop="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" label="岗位描述" show-overflow-tooltip></el-table-column>
-        <el-table-column prop="createdAt" label="创建时间" width="180" align="center"></el-table-column>
-        <el-table-column label="操作" width="100">
-          <template #default="scope">
-            <el-button size="small" text type="warning" @click="onOpenEditPost(scope.row)">修改</el-button>
-            <el-button size="small" text type="danger" @click="onRowDel(scope.row)">删除</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" label="岗位编码" width="220" show-overflow-tooltip></el-table-column>
+				<el-table-column prop="postName" label="岗位名称" show-overflow-tooltip></el-table-column>
+				<el-table-column prop="postSort" label="排序" width="60" align="center"></el-table-column>
+				<el-table-column prop="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" label="岗位描述" show-overflow-tooltip></el-table-column>
+				<el-table-column prop="createdAt" label="创建时间" width="180" align="center"></el-table-column>
+				<el-table-column label="操作" width="100">
+					<template #default="scope">
+						<el-button size="small" text type="warning" @click="onOpenEditPost(scope.row)">修改</el-button>
+						<el-button size="small" text type="danger" @click="onRowDel(scope.row)">删除</el-button>
+					</template>
+				</el-table-column>
+			</el-table>
+		</el-card>
+		<EditPost ref="editPostRef" @getPostList="postList" />
+	</div>
 </template>
 
 <script lang="ts">
@@ -117,9 +124,13 @@ export default defineComponent({
 			postList();
 		};
 		const postList = () => {
-			api.post.getList(state.tableData.param).then((res: any) => {
-				state.tableData.data = res;
-			});
+			state.tableData.loading = true;
+			api.post
+				.getList(state.tableData.param)
+				.then((res: any) => {
+					state.tableData.data = res;
+				})
+				.finally(() => (state.tableData.loading = false));
 		};
 		// 打开新增岗位弹窗
 		const onOpenAddPost = () => {

+ 71 - 61
src/views/system/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">
-              <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' }">
-        <el-table-column type="index" label="序号" width="60" align="center" />
-        <el-table-column prop="name" label="角色名称" show-overflow-tooltip></el-table-column>
-        <el-table-column prop="remark" label="角色描述" show-overflow-tooltip></el-table-column>
-        <el-table-column prop="listOrder" label="排序" width="60" align="center"></el-table-column>
-        <el-table-column prop="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" label="创建时间" width="170" align="center"></el-table-column>
-        <el-table-column label="操作" width="220" align="center" fixed="right">
-          <template #default="scope">
-            <el-button size="small" type="text" @click="onOpenEditRole(scope.row)">修改</el-button>
-            <el-button size="small" text type="danger" @click="onRowDel(scope.row)">删除</el-button>
-            <el-button size="small" text type="success" @click="permission(scope.row)">角色权限</el-button>
-            <el-button size="small" text type="info" @click="dataPermission(scope.row)">数据权限</el-button>
-            <!-- <el-dropdown size="small">
+	<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">
+							<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" label="角色名称" show-overflow-tooltip></el-table-column>
+				<el-table-column prop="remark" label="角色描述" show-overflow-tooltip></el-table-column>
+				<el-table-column prop="listOrder" label="排序" width="60" align="center"></el-table-column>
+				<el-table-column prop="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" label="创建时间" width="170" align="center"></el-table-column>
+				<el-table-column label="操作" width="220" align="center" fixed="right">
+					<template #default="scope">
+						<el-button size="small" type="text" @click="onOpenEditRole(scope.row)">修改</el-button>
+						<el-button size="small" text type="danger" @click="onRowDel(scope.row)">删除</el-button>
+						<el-button size="small" text type="success" @click="permission(scope.row)">角色权限</el-button>
+						<el-button size="small" text type="info" @click="dataPermission(scope.row)">数据权限</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">
@@ -134,9 +140,13 @@ export default defineComponent({
 				});
 		};
 		const roleList = () => {
-			api.role.getList(state.tableData.param).then((res: Array<TableData>) => {
-				state.tableData.data = res || [];
-			});
+			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 = () => {