py4fbma29
/
mall-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

119

Browse Source
pull/8/head
cwy 3 months ago
parent 0cc4c7b440
commit fa3736d39b
1 changed files with 258 additions and 142 deletions
Show Stats Download Patch File Download Diff File

400
src/views/ums/role/allocResource.vue
Unescape View File

@ -1,187 +1,303 @@
<template>
<!-- 使用 el-card 组件创建一个表单容器卡片，设置阴影效果为无 -->
<el-card class="form-container" shadow="never">
<!-- 使用 v-for 指令循环遍历 allResourceCate 数组中的每个元素（cate），同时传递索引（index） -->
<!-- 根据索引判断是否添加 'top-line' 类名（第一个元素添加，用于样式区分，可能是添加顶部边框之类的效果），并设置了唯一的 key 值 -->
<div v-for="(cate,index) in allResourceCate" :class="index===0?'top-line':null" :key="'cate'+cate.id">
<!-- el-row 组件，添加了 'table-layout' 类名用于样式布局，设置了背景颜色 -->
<el-row class="table-layout" style="background: #F2F6FC;">
<!-- el-checkbox 复选框组件，双向绑定 cate 对象的 checked 属性，通过调用 isIndeterminate 方法设置不确定状态，绑定 change 事件到 handleCheckAllChange 方法 -->
<!-- 复选框显示的文本为 cate 对象的 name 属性值 -->
<el-checkbox v-model="cate.checked"
:indeterminate="isIndeterminate(cate.id)"
@change="handleCheckAllChange(cate)">
{{cate.name}}
</el-checkbox>
</el-row>
<!-- 另一个 el-row 组件，同样添加了 'table-layout' 类名用于样式布局 -->
<el-row class="table-layout">
<!-- 使用 v-for 指令循环遍历当前分类（cate）下的资源列表（通过 getResourceByCate 方法获取），每个资源对应一个 el-checkbox 组件 -->
<!-- 设置了 el-col 组件的占比为 8，给每个复选框添加了上下内边距为 4px 的样式 -->
<el-col :span="8" v-for="resource in getResourceByCate(cate.id)" :key="resource.id" style="padding: 4px 0">
<!-- el-checkbox 复选框组件，双向绑定 resource 对象的 checked 属性，绑定 change 事件到 handleCheckChange 方法 -->
<!-- 复选框显示的文本为 resource 对象的 name 属性值 -->
<el-checkbox v-model="resource.checked" @change="handleCheckChange(resource)">
{{resource.name}}
</el-checkbox>
</el-col>
</el-row>
</div>
<!-- 包含两个按钮的 div 容器，设置了顶部外边距为 20px，并使其内容居中对齐 -->
<div style="margin-top: 20px" align="center">
<!-- 保存按钮，类型为主要（primary），点击时调用 handleSave 方法 -->
<el-button type="primary" @click="handleSave()">保存</el-button>
<!-- 清空按钮，点击时调用 handleClear 方法 -->
<el-button @click="handleClear()">清空</el-button>
</div>
</el-card>
</template>
<script>
import {fetchAllResourceList} from '@/api/resource';
import {listAllCate} from '@/api/resourceCategory';
import {allocResource,listResourceByRole} from '@/api/role';
// 从 @/api/resource 模块中导入获取所有资源列表数据的 API 函数
import {fetchAllResourceList} from '@/api/resource';
// 从 @/api/resourceCategory 模块中导入获取所有资源分类列表数据的 API 函数
import {listAllCate} from '@/api/resourceCategory';
// 从 @/api/role 模块中导入分配资源以及根据角色获取已分配资源列表的 API 函数
import {allocResource, listResourceByRole} from '@/api/role';
export default {
name: "allocResource",
data() {
return {
roleId: null,
allResource: null,
allResourceCate: null
};
},
created() {
this.roleId = this.$route.query.roleId;
this.getAllResourceCateList();
},
methods: {
getAllResourceList() {
fetchAllResourceList().then(response => {
this.allResource = response.data;
for (let i = 0; i < this.allResource.length; i++) {
this.allResource[i].checked = false;
}
this.getResourceByRole(this.roleId);
});
},
getAllResourceCateList() {
listAllCate().then(response => {
this.allResourceCate = response.data;
for (let i = 0; i < this.allResourceCate.length; i++) {
this.allResourceCate[i].checked = false;
}
this.getAllResourceList();
});
},
getResourceByCate(categoryId) {
let cateResource = [];
if (this.allResource == null) return null;
export default {
name: "allocResource",
data() {
return {
// 存储当前操作的角色 ID，初始值为 null，后续从路由参数中获取赋值
roleId: null,
// 用于存储所有资源数据，初始值为 null，后续通过 API 获取并赋值
allResource: null,
// 用于存储所有资源分类数据，初始值为 null，后续通过 API 获取并赋值
allResourceCate: null
};
},
created() {
// 从路由参数中获取角色 ID，并赋值给 roleId 属性，用于后续相关操作的参数传递等
this.roleId = this.$route.query.roleId;
// 调用获取所有资源分类列表数据的方法，用于初始化相关数据
this.getAllResourceCateList();
},
methods: {
// 方法用于获取所有资源列表数据
getAllResourceList() {
// 调用获取所有资源列表数据的 API 函数，该函数返回一个 Promise，成功获取数据后进行如下处理
fetchAllResourceList().then(response => {
// 将获取到的资源列表数据赋值给 allResource 属性，用于后续操作和页面展示
this.allResource = response.data;
// 循环遍历所有资源数据，将每个资源对象的 checked 属性初始化为 false，表示初始未选中状态
for (let i = 0; i < this.allResource.length; i++) {
let resource = this.allResource[i];
if (resource.categoryId === categoryId) {
cateResource.push(resource);
}
}
return cateResource;
},
getResourceByRole(roleId){
listResourceByRole(roleId).then(response=>{
let allocResource = response.data;
this.allResource.forEach(item=>{
item.checked = this.getResourceChecked(item.id,allocResource);
});
this.allResourceCate.forEach(item=>{
item.checked = this.isAllChecked(item.id);
});
this.$forceUpdate();
});
},
getResourceChecked(resourceId,allocResource){
if(allocResource==null||allocResource.length===0) return false;
for(let i=0;i<allocResource.length;i++){
if(allocResource[i].id===resourceId){
return true;
}
}
return false;
},
isIndeterminate(categoryId) {
let cateResources = this.getResourceByCate(categoryId);
if (cateResources == null) return false;
let checkedCount = 0;
for (let i = 0; i < cateResources.length; i++) {
if (cateResources[i].checked === true) {
checkedCount++;
}
this.allResource[i].checked = false;
}
return !(checkedCount === 0 || checkedCount === cateResources.length);
},
isAllChecked(categoryId) {
let cateResources = this.getResourceByCate(categoryId);
if (cateResources == null) return false;
let checkedCount = 0;
for (let i = 0; i < cateResources.length; i++) {
if (cateResources[i].checked === true) {
checkedCount++;
}
// 调用根据角色获取已分配资源的方法，传入当前角色 ID，用于设置对应资源的选中状态等操作
this.getResourceByRole(this.roleId);
});
},
// 方法用于获取所有资源分类列表数据，并进一步获取资源列表数据
getAllResourceCateList() {
// 调用获取所有资源分类列表数据的 API 函数，该函数返回一个 Promise，成功获取数据后进行如下处理
listAllCate().then(response => {
// 将获取到的资源分类列表数据赋值给 allResourceCate 属性，用于后续操作和页面展示
this.allResourceCate = response.data;
// 循环遍历所有资源分类数据，将每个资源分类对象的 checked 属性初始化为 false，表示初始未选中状态
for (let i = 0; i < this.allResourceCate.length; i++) {
this.allResourceCate[i].checked = false;
}
if(checkedCount===0){
return false;
// 调用获取所有资源列表数据的方法，以进一步完善数据初始化流程
this.getAllResourceList();
});
},
// 方法根据给定的资源分类 ID，从所有资源列表中筛选出属于该分类的资源列表并返回
getResourceByCate(categoryId) {
// 用于存储属于指定分类的资源列表，初始为空数组
let cateResource = [];
// 判断所有资源数据是否为空，如果为空则直接返回 null
if (this.allResource == null) return null;
// 循环遍历所有资源数据
for (let i = 0; i < this.allResource.length; i++) {
// 取出每一个资源对象
let resource = this.allResource[i];
// 如果资源的分类 ID 与传入的分类 ID 相等，将该资源对象添加到属于该分类的资源列表中
if (resource.categoryId === categoryId) {
cateResource.push(resource);
}
return checkedCount === cateResources.length;
},
handleSave() {
this.$confirm('是否分配资源？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let checkedResourceIds = new Set();
if (this.allResource != null && this.allResource.length > 0) {
this.allResource.forEach(item => {
if (item.checked) {
checkedResourceIds.add(item.id);
}
});
}
let params = new URLSearchParams();
params.append("roleId", this.roleId);
params.append("resourceIds", Array.from(checkedResourceIds));
allocResource(params).then(response => {
this.$message({
message: '分配成功',
type: 'success',
duration: 1000
});
this.$router.back();
})
})
},
handleClear() {
this.allResourceCate.forEach(item => {
item.checked = false;
});
}
return cateResource;
},
// 方法根据角色 ID 获取该角色已分配的资源，并设置相关资源和资源分类的选中状态
getResourceByRole(roleId) {
// 调用根据角色获取已分配资源列表的 API 函数，传入角色 ID，该函数返回一个 Promise，成功获取数据后进行如下处理
listResourceByRole(roleId).then(response => {
// 获取到的已分配资源列表数据赋值给 allocResource 变量，方便后续操作
let allocResource = response.data;
// 循环遍历所有资源数据，调用 getResourceChecked 方法设置每个资源的选中状态
this.allResource.forEach(item => {
item.checked = false;
item.checked = this.getResourceChecked(item.id, allocResource);
});
// 循环遍历所有资源分类数据，调用 isAllChecked 方法设置每个资源分类的选中状态
this.allResourceCate.forEach(item => {
item.checked = this.isAllChecked(item.id);
});
// 强制更新组件，确保数据变化能及时在页面上反映出来（可能因为数据嵌套较深等情况需要手动触发更新）
this.$forceUpdate();
},
handleCheckAllChange(cate) {
let cateResources = this.getResourceByCate(cate.id);
for (let i = 0; i < cateResources.length; i++) {
cateResources[i].checked = cate.checked;
});
},
// 方法判断给定资源 ID 的资源是否在已分配资源列表中，返回对应的布尔值（是否选中状态）
getResourceChecked(resourceId, allocResource) {
// 如果已分配资源列表为空，则直接返回 false，表示未选中
if (allocResource == null || allocResource.length === 0) return false;
// 循环遍历已分配资源列表
for (let i = 0; i < allocResource.length; i++) {
// 如果找到资源 ID 匹配的已分配资源，返回 true，表示该资源已选中
if (allocResource[i].id === resourceId) {
return true;
}
this.$forceUpdate();
},
handleCheckChange(resource) {
this.allResourceCate.forEach(item=>{
if(item.id===resource.categoryId){
item.checked = this.isAllChecked(resource.categoryId);
}
return false;
},
// 方法判断给定资源分类下的资源选中状态是否为不确定（部分选中），返回对应的布尔值
isIndeterminate(categoryId) {
// 获取给定资源分类下的资源列表
let cateResources = this.getResourceByCate(categoryId);
// 如果资源列表为空，返回 false，表示不是不确定状态
if (cateResources == null) return false;
// 用于统计已选中资源的数量，初始为 0
let checkedCount = 0;
// 循环遍历资源列表，统计已选中资源的数量
for (let i = 0; i < cateResources.length; i++) {
if (cateResources[i].checked === true) {
checkedCount++;
}
}
// 如果已选中资源数量既不是 0（全未选）也不是资源列表长度（全选），则返回 true，表示处于不确定状态
return!(checkedCount === 0 || checkedCount === cateResources.length);
},
// 方法判断给定资源分类下的资源是否全部选中，返回对应的布尔值
isAllChecked(categoryId) {
// 获取给定资源分类下的资源列表
let cateResources = this.getResourceByCate(categoryId);
// 如果资源列表为空，返回 false，表示未全部选中
if (cateResources == null) return false;
// 用于统计已选中资源的数量，初始为 0
let checkedCount = 0;
// 循环遍历资源列表，统计已选中资源的数量
for (let i = 0; i < cateResources.length; i++) {
if (cateResources[i].checked === true) {
checkedCount++;
}
}
// 如果已选中资源数量为 0，直接返回 false，表示未全部选中
if (checkedCount === 0) {
return false;
}
// 如果已选中资源数量等于资源列表长度，返回 true，表示全部选中
return checkedCount === cateResources.length;
},
// 方法用于处理保存资源分配的操作
handleSave() {
// 创建一个 Set 数据结构，用于存储选中资源的 ID，可自动去重
let checkedResourceIds = new Set();
// 判断所有资源数据不为空且有数据时，进行循环遍历
if (this.allResource!= null && this.allResource.length > 0) {
// 循环遍历所有资源数据，将选中资源（checked 属性为 true）的 ID 添加到 Set 集合中
this.allResource.forEach(item => {
if (item.checked) {
checkedResourceIds.add(item.id);
}
});
this.$forceUpdate();
}
// 创建 URLSearchParams 对象，用于构建请求参数，通常用于向服务器传递数据
let params = new URLSearchParams();
// 将当前角色 ID 添加到请求参数中
params.append("roleId", this.roleId);
// 将处理后的选中资源 ID 集合（通过 Array.from 转换为普通数组）添加到请求参数中
params.append("resourceIds", Array.from(checkedResourceIds));
// 调用分配资源的 API 函数，传入构建好的请求参数，该函数返回一个 Promise，成功分配资源后进行如下处理
allocResource(params).then(response => {
// 显示分配成功的提示消息，消息类型为成功（success），停留 1000 毫秒
this.$message({
message: '分配成功',
type: 'success',
duration: 1000
});
// 通过路由导航返回上一页，一般用于完成操作后回到之前的页面
this.$router.back();
})
},
// 方法用于清空所有资源和资源分类的选中状态
handleClear() {
// 循环遍历所有资源分类数据，将每个资源分类对象的 checked 属性设置为 false
this.allResourceCate.forEach(item => {
item.checked = false;
});
// 循环遍历所有资源数据，将每个资源对象的 checked 属性设置为 false
this.allResource.forEach(item => {
item.checked = false;
});
// 强制更新组件，确保页面上的显示状态能及时更新为未选中状态
this.$forceUpdate();
},
// 方法用于处理资源分类复选框全选/全不选状态改变的操作
handleCheckAllChange(cate) {
// 获取当前资源分类下的资源列表
let cateResources = this.getResourceByCate(cate.id);
// 循环遍历资源列表，将每个资源的选中状态设置为与资源分类复选框的选中状态一致
for (let i = 0; i < cateResources.length; i++) {
cateResources[i].checked = cate.checked;
}
// 强制更新组件，确保页面上资源的选中状态能及时更新
this.$forceUpdate();
},
// 方法用于处理单个资源复选框选中状态改变的操作
handleCheckChange(resource) {
// 循环遍历所有资源分类数据，找到与当前资源所属分类相同的资源分类对象
this.allResourceCate.forEach(item => {
if (item.id === resource.categoryId) {
// 根据该资源分类下的所有资源是否全部选中，更新资源分类复选框的选中状态
item.checked = this.isAllChecked(resource.categoryId);
}
});
// 强制更新组件，确保页面上资源分类复选框的选中状态能及时更新
this.$forceUpdate();
}
}
}
</script>
<style scoped>
.table-layout {
padding: 20px;
border-left: 1px solid #DCDFE6;
border-right: 1px solid #DCDFE6;
border-bottom: 1px solid #DCDFE6;
}
/* 定义了名为 'table-layout' 的类选择器样式规则，用于设置布局相关的样式 */
.table-layout {
/* 设置内边距为 20px，使内部元素有合适的间距 */
padding: 20px;
/* 设置左边框样式，颜色为 #DCDFE6，线条样式为实线，宽度为 1px */
border-left: 1px solid #DCDFE6;
/* 设置右边框样式，与左边框相同 */
border-right: 1px solid #DCDFE6;
/* 设置下边框样式，与左右边框相同 */
border-bottom: 1px solid #DCDFE6;
}
.top-line {
border-top: 1px solid #DCDFE6;
}
/* 定义了名为 'top-line' 的类选择器样式规则，用于给元素添加顶部边框，可能用于区分不同部分等样式效果 */
.top-line {
border-top: 1px solid #DCDFE6;
}
</style><style scoped>
/* 定义了名为 'table-layout' 的类选择器样式规则，用于设置布局相关的样式 */
.table-layout {
/* 设置内边距为 20px，使内部元素有合适的间距 */
padding: 20px;
/* 设置左边框样式，颜色为 #DCDFE6，线条样式为实线，宽度为 1px */
border-left: 1px solid #DCDFE6;
/* 设置右边框样式，与左边框相同 */
border-right: 1px solid #DCDFE6;
/* 设置下边框样式，与左右边框相同 */
border-bottom: 1px solid #DCDFE6;
}
/* 定义了名为 'top-line' 的类选择器样式规则，用于给元素添加顶部边框，可能用于区分不同部分等样式效果 */
.top-line {
border-top: 1px solid #DCDFE6;
}
</style><style scoped>
/* 定义了名为 'table-layout' 的类选择器样式规则，用于设置布局相关的样式 */
.table-layout {
/* 设置内边距为 20px，使内部元素有合适的间距 */
padding: 20px;
/* 设置左边框样式，颜色为 #DCDFE6，线条样式为实线，宽度为 1px */
border-left: 1px solid #DCDFE6;
/* 设置右边框样式，与左边框相同 */
border-right: 1px solid #DCDFE6;
/* 设置下边框样式，与左右边框相同 */
border-bottom: 1px solid #DCDFE6;
}
/* 定义了名为 'top-line' 的类选择器样式规则，用于给元素添加顶部边框，可能用于区分不同部分等样式效果 */
.top-line {
border-top: 1px solid #DCDFE6;
}
</style>

Write Preview
Loading…
Cancel
Save