fix: 菜单权限列表分页无效问题修复

Former-commit-id: bc12d32bce0eafad7159e252f496805254fff1ac
This commit is contained in:
郝先瑞
2022-04-25 18:34:13 +08:00
parent 99c5b19b5f
commit cf3ee574ec
12 changed files with 99 additions and 99 deletions

View File

@@ -226,7 +226,7 @@ onMounted(() => {
<!-- 分页工具条 --> <!-- 分页工具条 -->
<pagination <pagination
v-show="total > 0" v-if="total > 0"
:total="total" :total="total"
v-model:page="queryParams.pageNum" v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize" v-model:limit="queryParams.pageSize"

View File

@@ -199,7 +199,7 @@ onMounted(() => {
</el-table> </el-table>
<!-- 分页工具条 --> <!-- 分页工具条 -->
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" <pagination v-if="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
@pagination="handleQuery" /> @pagination="handleQuery" />
<!-- 表单弹窗 --> <!-- 表单弹窗 -->

View File

@@ -250,7 +250,7 @@ onMounted(() => {
<!-- 分页工具条 --> <!-- 分页工具条 -->
<pagination <pagination
v-show="total > 0" v-if="total > 0"
:total="total" :total="total"
v-model:page="queryParams.pageNum" v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize" v-model:limit="queryParams.pageSize"

View File

@@ -193,7 +193,7 @@ onMounted(() => {
</el-table> </el-table>
<!-- 分页工具条 --> <!-- 分页工具条 -->
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" <pagination v-if="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
@pagination="handleQuery" /> @pagination="handleQuery" />
<!-- 表单弹窗 --> <!-- 表单弹窗 -->

View File

@@ -209,7 +209,7 @@ onMounted(() => {
</el-table> </el-table>
<!-- 分页工具条 --> <!-- 分页工具条 -->
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" <pagination v-if="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
@pagination="handleQuery" /> @pagination="handleQuery" />
<!-- 表单弹窗 --> <!-- 表单弹窗 -->

View File

@@ -45,7 +45,7 @@ export default {
</el-table-column> </el-table-column>
</el-table> </el-table>
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" <pagination v-if="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
@pagination="handleQuery" /> @pagination="handleQuery" />
<!-- 弹窗表单 --> <!-- 弹窗表单 -->

View File

@@ -34,7 +34,7 @@
</el-table-column> </el-table-column>
</el-table> </el-table>
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" <pagination v-if="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
@pagination="handleQuery" /> @pagination="handleQuery" />
<!-- 表单弹窗 --> <!-- 表单弹窗 -->

View File

@@ -1,85 +1,3 @@
<template>
<div claas="component-container">
<!-- 搜索表单 -->
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item>
<el-button type="success" :icon="Plus" :disabled="!menuId" @click="handleAdd">新增</el-button>
<el-button type="danger" :icon="Delete" :disabled="multiple" @click="handleDelete">删除</el-button>
</el-form-item>
<el-form-item prop="name">
<el-input v-model="queryParams.name" placeholder="权限名称" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item>
<el-button type="primary" :icon="Search" @click="handleQuery">搜索</el-button>
<el-button :icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<!-- 数据表格 -->
<el-table :data="permList" v-loading="loading" @selection-change="handleSelectionChange" border>
<el-table-column type="selection" width="40" align="center" />
<el-table-column label="权限名称" prop="name" width="150" />
<el-table-column label="URL权限" align="center">
<el-table-column prop="serviceName" label="所属服务" />
<el-table-column prop="requestMethod" label="请求方式" />
<el-table-column prop="requestPath" label="请求路径" />
</el-table-column>
<el-table-column label="按钮权限" prop="btnPerm" width="200" />
<el-table-column label="操作" align="center" width="150">
<template #default="scope">
<el-button type="primary" :icon="Edit" circle plain @click="handleUpdate(scope.row)" />
<el-button type="danger" :icon="Delete" circle plain @click="handleDelete(scope.row)" />
</template>
</el-table-column>
</el-table>
<!-- 分页工具条 -->
<pagination v-show="total > 0" :total="total" :v-model:page="queryParams.pageNum" :v-model:limit="queryParams.pageSize"
@pagination="handleQuery" />
<!-- 表单弹窗 -->
<el-dialog :title="dialog.title" v-model="dialog.visible" width="700px">
<el-form ref="dataFormRef" :model="formData" :rules="rules" label-width="120px">
<el-form-item label="权限名称" prop="name">
<el-input v-model="formData.name" placeholder="请输入权限名称" />
</el-form-item>
<el-form-item label="URL权限标识" prop="urlPerm">
<el-input placeholder="/api/v1/users" v-model="urlPerm.requestPath">
<template #prepend>
<el-select v-model="urlPerm.serviceName" style="width: 130px" placeholder="所属服务" clearable>
<el-option v-for="item in microServiceOptions" :key="item.value" :value="item.value"
:label="item.label" />
</el-select>
<el-select v-model="urlPerm.requestMethod" style="width: 120px; margin-left: 20px" placeholder="请求方式"
clearable>
<el-option v-for="item in requestMethodOptions" :key="item.value" :value="item.value"
:label="item.label" />
</el-select>
</template>
</el-input>
<el-link v-show="urlPerm.requestMethod">
{{ urlPerm.requestMethod }}:/{{
urlPerm.serviceName
}}{{ urlPerm.requestPath }}
</el-link>
</el-form-item>
<el-form-item label="按钮权限标识" prop="btnPerm">
<el-input v-model="formData.btnPerm" placeholder="sys:user:add" />
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="submitForm"> </el-button>
<el-button @click="cancel"> </el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup lang="ts"> <script setup lang="ts">
import { import {
@@ -117,9 +35,7 @@ const dataFormRef = ref(ElForm);
const props = defineProps({ const props = defineProps({
menuId: { menuId: {
type: String, type: String,
default: () => { default: () => { }
return ''
}
}, },
}); });
@@ -333,7 +249,89 @@ onMounted(() => {
}); });
</script> </script>
<style scoped> <template>
<div claas="component-container">
<!-- 搜索表单 -->
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item>
<el-button type="success" :icon="Plus" :disabled="!menuId" @click="handleAdd">新增</el-button>
<el-button type="danger" :icon="Delete" :disabled="multiple" @click="handleDelete">删除</el-button>
</el-form-item>
<el-form-item prop="name">
<el-input v-model="queryParams.name" placeholder="权限名称" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item>
<el-button type="primary" :icon="Search" @click="handleQuery">搜索</el-button>
<el-button :icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<!-- 数据表格 -->
<el-table :data="permList" v-loading="loading" @selection-change="handleSelectionChange" border>
<el-table-column type="selection" width="40" align="center" />
<el-table-column label="权限名称" prop="name" width="150" />
<el-table-column label="URL权限" align="center">
<el-table-column prop="serviceName" label="所属服务" />
<el-table-column prop="requestMethod" label="请求方式" />
<el-table-column prop="requestPath" label="请求路径" />
</el-table-column>
<el-table-column label="按钮权限" prop="btnPerm" width="200" />
<el-table-column label="操作" align="center" width="150">
<template #default="scope">
<el-button type="primary" :icon="Edit" circle plain @click="handleUpdate(scope.row)" />
<el-button type="danger" :icon="Delete" circle plain @click="handleDelete(scope.row)" />
</template>
</el-table-column>
</el-table>
<!-- 分页工具条 -->
<pagination v-if="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
@pagination="handleQuery" />
<!-- 表单弹窗 -->
<el-dialog :title="dialog.title" v-model="dialog.visible" width="700px">
<el-form ref="dataFormRef" :model="formData" :rules="rules" label-width="120px">
<el-form-item label="权限名称" prop="name">
<el-input v-model="formData.name" placeholder="请输入权限名称" />
</el-form-item>
<el-form-item label="URL权限标识" prop="urlPerm">
<el-input placeholder="/api/v1/users" v-model="urlPerm.requestPath">
<template #prepend>
<el-select v-model="urlPerm.serviceName" style="width: 130px" placeholder="所属服务" clearable>
<el-option v-for="item in microServiceOptions" :key="item.value" :value="item.value"
:label="item.label" />
</el-select>
<el-select v-model="urlPerm.requestMethod" style="width: 120px; margin-left: 20px" placeholder="请求方式"
clearable>
<el-option v-for="item in requestMethodOptions" :key="item.value" :value="item.value"
:label="item.label" />
</el-select>
</template>
</el-input>
<el-link v-show="urlPerm.requestMethod">
{{ urlPerm.requestMethod }}:/{{
urlPerm.serviceName
}}{{ urlPerm.requestPath }}
</el-link>
</el-form-item>
<el-form-item label="按钮权限标识" prop="btnPerm">
<el-input v-model="formData.btnPerm" placeholder="sys:user:add" />
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="submitForm"> </el-button>
<el-button @click="cancel"> </el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<style lang="scss" scoped>
.component-container { .component-container {
margin-bottom: 20px; margin-bottom: 20px;
} }

View File

@@ -187,7 +187,7 @@ onMounted(() => {
</el-table> </el-table>
<!-- 分页工具条 --> <!-- 分页工具条 -->
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" <pagination v-if="total > 0" :total="total" v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize" @pagination="handleQuery" /> v-model:limit="queryParams.pageSize" @pagination="handleQuery" />
<!-- 表单弹窗 --> <!-- 表单弹窗 -->

View File

@@ -29,7 +29,7 @@
<el-col :span="8" :xs="24"> <el-col :span="8" :xs="24">
<el-card class="box-card" shadow="always"> <el-card class="box-card" shadow="always">
<template #header> <template #header>
<svg-icon color="#333" icon-class="perm" /> <svg-icon icon-class="perm" />
<span style="margin: 0 5px">权限分配</span> <span style="margin: 0 5px">权限分配</span>
<el-tag type="success" style="margin: 0 5px 0 0" v-if="role.id"> <el-tag type="success" style="margin: 0 5px 0 0" v-if="role.id">
@@ -46,7 +46,7 @@
> >
<el-tag type="success" v-if="menu.id" size="small"> <el-tag type="success" v-if="menu.id" size="small">
<svg-icon color="red" icon-class="menu" /> <svg-icon icon-class="menu" />
{{ menu.name }} {{ menu.name }}
</el-tag> </el-tag>
<el-tag type="warning" v-else size="small"> 请选择菜单</el-tag> <el-tag type="warning" v-else size="small"> 请选择菜单</el-tag>

View File

@@ -465,6 +465,8 @@ onMounted(() => {
loadData(); loadData();
}); });
</script> </script>
<template> <template>
<div class="app-container"> <div class="app-container">
<el-row :gutter="20"> <el-row :gutter="20">
@@ -498,7 +500,7 @@ onMounted(() => {
<el-form-item prop="status"> <el-form-item prop="status">
<el-select v-model="queryParams.status" placeholder="用户状态" clearable style="width: 200px"> <el-select v-model="queryParams.status" placeholder="用户状态" clearable style="width: 200px">
<el-option label="正常" value="1" /> <el-option label="正常" value="1" />
<el-option label="用" value="0" /> <el-option label="用" value="0" />
</el-select> </el-select>
</el-form-item> </el-form-item>
@@ -554,7 +556,7 @@ onMounted(() => {
</el-table-column> </el-table-column>
</el-table> </el-table>
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" <pagination v-if="total > 0" :total="total" v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize" @pagination="handleQuery" /> v-model:limit="queryParams.pageSize" @pagination="handleQuery" />
</el-card> </el-card>
</el-col> </el-col>

View File

@@ -140,7 +140,7 @@ onMounted(() => {
</el-table> </el-table>
<!-- 分页工具条 --> <!-- 分页工具条 -->
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" <pagination v-if="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
@pagination="handleQuery" /> @pagination="handleQuery" />
</div> </div>
</template> </template>