From e64f4b83c8f6cd01ea352ad7040e205613ea87d3 Mon Sep 17 00:00:00 2001 From: 疯狂的狮子Li <15040126243@163.com> Date: 星期五, 14 七月 2023 22:39:34 +0800 Subject: [PATCH] update 优化 toggleRowSelection 缺失一个参数警告问题 --- src/views/system/user/authRole.vue | 164 +++++++++++++++++++++++++++--------------------------- 1 files changed, 82 insertions(+), 82 deletions(-) diff --git a/src/views/system/user/authRole.vue b/src/views/system/user/authRole.vue index 0616f67..e869ba3 100644 --- a/src/views/system/user/authRole.vue +++ b/src/views/system/user/authRole.vue @@ -1,9 +1,64 @@ +<template> + <div class="p-2"> + <div class="panel"> + <h4 class="panel-title">鍩烘湰淇℃伅</h4> + <el-form :model="form" label-width="80px" :inline="true"> + <el-row :gutter="10"> + <el-col :span="2.5"> + <el-form-item label="鐢ㄦ埛鏄电О" prop="nickName"> + <el-input v-model="form.nickName" disabled /> + </el-form-item> + </el-col> + <el-col :span="2.5"> + <el-form-item label="鐧诲綍璐﹀彿" prop="userName"> + <el-input v-model="form.userName" disabled /> + </el-form-item> + </el-col> + </el-row> + </el-form> + </div> + <div class="panel"> + <h4 class="panel-title">瑙掕壊淇℃伅</h4> + <div> + <el-table + v-loading="loading" + :row-key="getRowKey" + @row-click="clickRow" + ref="tableRef" + @selection-change="handleSelectionChange" + :data="roles.slice((pageNum - 1) * pageSize, pageNum * pageSize)" + > + <el-table-column label="搴忓彿" width="55" type="index" align="center"> + <template #default="scope"> + <span>{{ (pageNum - 1) * pageSize + scope.$index + 1 }}</span> + </template> + </el-table-column> + <el-table-column type="selection" :reserve-selection="true" width="55"></el-table-column> + <el-table-column label="瑙掕壊缂栧彿" align="center" prop="roleId" /> + <el-table-column label="瑙掕壊鍚嶇О" align="center" prop="roleName" /> + <el-table-column label="鏉冮檺瀛楃" align="center" prop="roleKey" /> + <el-table-column label="鍒涘缓鏃堕棿" align="center" prop="createTime" width="180"> + <template #default="scope"> + <span>{{ parseTime(scope.row.createTime) }}</span> + </template> + </el-table-column> + </el-table> + <pagination v-show="total > 0" :total="total" v-model:page="pageNum" v-model:limit="pageSize" /> + <div style="text-align: center;margin-left:-120px;margin-top:30px;"> + <el-button type="primary" @click="submitForm()">鎻愪氦</el-button> + <el-button @click="close()">杩斿洖</el-button> + </div> + <div></div> + </div> + </div> + </div> +</template> + <script setup name="AuthRole" lang="ts"> -import { RoleVO } from '@/api/system/role/types'; -import { getAuthRole, updateAuthRole } from '@/api/system/user'; -import { UserForm } from '@/api/system/user/types'; -import { ElTable } from "element-plus"; -import { ComponentInternalInstance } from 'vue'; +import { RoleVO } from "@/api/system/role/types"; +import { getAuthRole, updateAuthRole } from "@/api/system/user"; +import { UserForm } from "@/api/system/user/types"; + const route = useRoute(); const { proxy } = getCurrentInstance() as ComponentInternalInstance; @@ -15,15 +70,16 @@ const roles = ref<RoleVO[]>([]); const form = ref<Partial<UserForm>>({ nickName: undefined, - userName: '', + userName: "", userId: undefined }); -const tableRef = ref(ElTable) +const tableRef = ref<ElTableInstance>(); /** 鍗曞嚮閫変腑琛屾暟鎹� */ const clickRow = (row: RoleVO) => { - tableRef.value.toggleRowSelection(row); + // ele鐨勬柟娉曟湁闂锛宻elected搴旇涓哄彲閫夊弬鏁� + tableRef.value?.toggleRowSelection(row, false); }; /** 澶氶�夋閫変腑鏁版嵁 */ const handleSelectionChange = (selection: RoleVO[]) => { @@ -42,86 +98,30 @@ const submitForm = async () => { const userId = form.value.userId; const rIds = roleIds.value.join(","); - await updateAuthRole({ userId: userId as string, roleIds: rIds }) - proxy?.$modal.msgSuccess("鎺堟潈鎴愬姛"); - close(); + await updateAuthRole({ userId: userId as string, roleIds: rIds }); + proxy?.$modal.msgSuccess("鎺堟潈鎴愬姛"); + close(); }; -const getList = async() => { +const getList = async () => { const userId = route.params && route.params.userId; if (userId) { loading.value = true; - const res = await getAuthRole(userId as string); - Object.assign(form.value, res.data.user) - Object.assign(roles.value, res.data.roles) - total.value = roles.value.length; - await nextTick(() => { - roles.value.forEach(row => { - if (row?.flag) { - tableRef.value.toggleRowSelection(row); - } - }); - }); - loading.value = false; + const res = await getAuthRole(userId as string); + Object.assign(form.value, res.data.user); + Object.assign(roles.value, res.data.roles); + total.value = roles.value.length; + await nextTick(() => { + roles.value.forEach(row => { + if (row?.flag) { + tableRef.value?.toggleRowSelection(row, true); + } + }); + }); + loading.value = false; } -} +}; onMounted(() => { getList(); -}) +}); </script> - -<template> - <div class="p-2"> - <div class="panel"> - <h4 class="panel-title">鍩烘湰淇℃伅</h4> - <el-form :model="form" label-width="80px" :inline="true"> - <el-row :gutter="10"> - <el-col :span="2.5"> - <el-form-item label="鐢ㄦ埛鏄电О" prop="nickName"> - <el-input v-model="form.nickName" disabled /> - </el-form-item> - </el-col> - <el-col :span="2.5"> - <el-form-item label="鐧诲綍璐﹀彿" prop="userName"> - <el-input v-model="form.userName" disabled /> - </el-form-item> - </el-col> - </el-row> - </el-form> - </div> - <div class="panel"> - <h4 class="panel-title">瑙掕壊淇℃伅</h4> - <div> - <el-table - v-loading="loading" - :row-key="getRowKey" - @row-click="clickRow" - ref="tableRef" - @selection-change="handleSelectionChange" - :data="roles.slice((pageNum - 1) * pageSize, pageNum * pageSize)" - > - <el-table-column label="搴忓彿" width="55" type="index" align="center"> - <template #default="scope"> - <span>{{ (pageNum - 1) * pageSize + scope.$index + 1 }}</span> - </template> - </el-table-column> - <el-table-column type="selection" :reserve-selection="true" width="55"></el-table-column> - <el-table-column label="瑙掕壊缂栧彿" align="center" prop="roleId" /> - <el-table-column label="瑙掕壊鍚嶇О" align="center" prop="roleName" /> - <el-table-column label="鏉冮檺瀛楃" align="center" prop="roleKey" /> - <el-table-column label="鍒涘缓鏃堕棿" align="center" prop="createTime" width="180"> - <template #default="scope"> - <span>{{ parseTime(scope.row.createTime) }}</span> - </template> - </el-table-column> - </el-table> - <pagination v-show="total > 0" :total="total" v-model:page="pageNum" v-model:limit="pageSize" /> - <div style="text-align: center;margin-left:-120px;margin-top:30px;"> - <el-button type="primary" @click="submitForm()">鎻愪氦</el-button> - <el-button @click="close()">杩斿洖</el-button> - </div> - <div></div> - </div> - </div> - </div> -</template> -- Gitblit v1.9.3