jiaxing.zhou

refactor(userRoleConfig): 优化用户角色配置弹窗数据加载逻辑

- 添加 isDataLoaded 变量用于控制数据加载状态
- 在弹窗打开时重置数据加载状态
- 在数据加载完成后设置 isDataLoaded 为 true
- 在数据加载失败时设置 isDataLoaded 为 true 并显示提示信息
- 关闭弹窗时重置数据加载状态
1 <template> 1 <template>
2 <el-dialog 2 <el-dialog
3 + v-if="isDataLoaded"
3 class="entryDialog classCUploadDialog" 4 class="entryDialog classCUploadDialog"
4 :title="title" 5 :title="title"
5 :visible.sync="outerVisible" 6 :visible.sync="outerVisible"
...@@ -275,24 +276,33 @@ export default { ...@@ -275,24 +276,33 @@ export default {
275 submitLoading: false, 276 submitLoading: false,
276 }, 277 },
277 loadingText: "", 278 loadingText: "",
279 + isDataLoaded: false, // 新增变量
278 }; 280 };
279 }, 281 },
280 watch: { 282 watch: {
281 outerVisible(val) { 283 outerVisible(val) {
282 if (val) { 284 if (val) {
283 - this.loadings.dialogLoading = false; 285 + this.loadings.dialogLoading = true;
286 + this.isDataLoaded = false; // 重置数据加载状态
284 this.searchUserData(this.active.id); 287 this.searchUserData(this.active.id);
285 if (this.type == "update") { 288 if (this.type == "update") {
286 } else if (this.type == "roleChange") { 289 } else if (this.type == "roleChange") {
287 this.searchRoleData(); 290 this.searchRoleData();
288 } 291 }
292 + } else {
293 + this.isDataLoaded = false; // 关闭弹窗时重置数据加载状态
294 + }
295 + },
296 + isDataLoaded(val) {
297 + if (val) {
298 + this.loadings.dialogLoading = false;
299 + this.$emit('update:outerVisible', true); // 设置 outerVisible 为 true
289 } 300 }
290 }, 301 },
291 }, 302 },
292 methods: { 303 methods: {
293 - //查询用户信息详情 304 + // 查询用户信息详情
294 searchUserData(id) { 305 searchUserData(id) {
295 - this.loadings.dialogLoading = true;
296 getUserDetailData({ id: id }) 306 getUserDetailData({ id: id })
297 .then((res) => { 307 .then((res) => {
298 if (res.code === "200") { 308 if (res.code === "200") {
...@@ -300,14 +310,15 @@ export default { ...@@ -300,14 +310,15 @@ export default {
300 } else { 310 } else {
301 this.alertWarningMsg(res.message); 311 this.alertWarningMsg(res.message);
302 } 312 }
303 - this.loadings.dialogLoading = false; 313 + this.isDataLoaded = true; // 设置数据加载完成
304 }) 314 })
305 .catch((err) => { 315 .catch((err) => {
306 console.log(err); 316 console.log(err);
307 - this.loadings.dialogLoading = false; 317 + this.alertWarningMsg("数据加载失败,请重试");
318 + this.isDataLoaded = true; // 设置数据加载完成
308 }); 319 });
309 }, 320 },
310 - //查询角色 321 + // 查询角色
311 searchRoleData() { 322 searchRoleData() {
312 getUserRoleType({ userId: this.active.id }) 323 getUserRoleType({ userId: this.active.id })
313 .then((res) => { 324 .then((res) => {
...@@ -315,9 +326,12 @@ export default { ...@@ -315,9 +326,12 @@ export default {
315 let unassigned = res.data.unassigned.concat(res.data.assigned); 326 let unassigned = res.data.unassigned.concat(res.data.assigned);
316 this.portDataInfo(unassigned, res.data.assigned); 327 this.portDataInfo(unassigned, res.data.assigned);
317 } 328 }
329 + this.isDataLoaded = true; // 设置数据加载完成
318 }) 330 })
319 .catch((err) => { 331 .catch((err) => {
320 console.log(err); 332 console.log(err);
333 + this.alertWarningMsg("数据加载失败,请重试");
334 + this.isDataLoaded = true; // 设置数据加载完成
321 }); 335 });
322 }, 336 },
323 //数据保存 337 //数据保存
......