|
|
@@ -1,9 +1,7 @@
|
|
|
<script>
|
|
|
import publicFunc from "@/utils/publicFunc";
|
|
|
import { requireImg } from "@/utils/requireImg";
|
|
|
-import authAction from "./authAction.vue";
|
|
|
export default {
|
|
|
- components: { authAction },
|
|
|
data() {
|
|
|
const columns = [
|
|
|
{
|
|
|
@@ -24,7 +22,7 @@ export default {
|
|
|
roleGroup: false,
|
|
|
user: false,
|
|
|
},
|
|
|
- inputName:"",
|
|
|
+ inputName: "",
|
|
|
columns,
|
|
|
checkedObj: {
|
|
|
groupChecked: "",
|
|
|
@@ -32,7 +30,7 @@ export default {
|
|
|
},
|
|
|
checkedUsers: [],
|
|
|
userListGroup: [],
|
|
|
- keyDictObj: {},
|
|
|
+ systemModelCollection: {},
|
|
|
roleListData: [
|
|
|
{
|
|
|
id: publicFunc.buildGuid("group"),
|
|
|
@@ -174,7 +172,68 @@ export default {
|
|
|
addedRoleMap: new Map(),
|
|
|
addedRoleArr: [],
|
|
|
// 树选择
|
|
|
- treeData: [],
|
|
|
+ treeData: [
|
|
|
+ {
|
|
|
+ title: "中讯邮电咨询设计院",
|
|
|
+ value: "中讯邮电咨询设计院",
|
|
|
+ key: publicFunc.buildGuid("unit"),
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ title: "智网研究院",
|
|
|
+ value: "智网研究院",
|
|
|
+ key: publicFunc.buildGuid("department"),
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ title: "Alice [普通VIP组]",
|
|
|
+ value: "Alice [普通VIP组]",
|
|
|
+ key: publicFunc.buildGuid("name"),
|
|
|
+ children: [],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "北京电信规划设计院",
|
|
|
+ value: "北京电信规划设计院",
|
|
|
+ key: publicFunc.buildGuid("unit"),
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ title: "销售部",
|
|
|
+ value: "销售部",
|
|
|
+ key: publicFunc.buildGuid("department"),
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ title: "Linda [超级VIP组]",
|
|
|
+ value: "Linda [超级VIP组]",
|
|
|
+ key: publicFunc.buildGuid("name"),
|
|
|
+ children: [],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "创新产品研发中心",
|
|
|
+ value: "创新产品研发中心",
|
|
|
+ key: publicFunc.buildGuid("unit"),
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ title: "市场部",
|
|
|
+ value: "市场部",
|
|
|
+ key: publicFunc.buildGuid("department"),
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ title: "Jacob [超级VIP组]",
|
|
|
+ value: "Jacob [超级VIP组]",
|
|
|
+ key: publicFunc.buildGuid("name"),
|
|
|
+ children: [],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
value: undefined,
|
|
|
};
|
|
|
},
|
|
|
@@ -237,6 +296,7 @@ export default {
|
|
|
group: i.split("-")[0],
|
|
|
system: i.split("-")[1],
|
|
|
role: ele,
|
|
|
+ modelName: this.systemModelCollection[i.split("-")[1]],
|
|
|
});
|
|
|
});
|
|
|
});
|
|
|
@@ -282,17 +342,18 @@ export default {
|
|
|
initData() {
|
|
|
// 获取key及其对应的数据
|
|
|
this.userListGroup = this.userListData.map((v) => {
|
|
|
- this.keyDictObj[v.label] = v.id;
|
|
|
+ // this.systemDictObj[v.label] = v.id;
|
|
|
return {
|
|
|
content: v.label,
|
|
|
value: v.label,
|
|
|
};
|
|
|
});
|
|
|
- this.roleListData.forEach((v, i) => {
|
|
|
- this.keyDictObj[v.label] = v.id;
|
|
|
- });
|
|
|
- this.systemListData.forEach((v, i) => {
|
|
|
- this.keyDictObj[v.label] = v.id;
|
|
|
+
|
|
|
+ this.systemListData.forEach((v) => {
|
|
|
+ let data = v.modelList.map((ele) => {
|
|
|
+ return `[${ele.modelName}]`;
|
|
|
+ });
|
|
|
+ this.systemModelCollection[v.label] = data.join(" ");
|
|
|
});
|
|
|
},
|
|
|
onChange(checkedValues) {
|
|
|
@@ -310,6 +371,10 @@ export default {
|
|
|
},
|
|
|
addRoleGroupEvent() {
|
|
|
console.log("保存新建的角色权限组");
|
|
|
+ this.visible.roleGroup = false;
|
|
|
+ },
|
|
|
+ addUserEvent() {
|
|
|
+ this.visible.user = false;
|
|
|
},
|
|
|
onTreeSelectChange() {},
|
|
|
onTreeSearch() {},
|
|
|
@@ -322,102 +387,116 @@ export default {
|
|
|
<div class="auth-role">
|
|
|
<div class="auth-role-title">配置权限</div>
|
|
|
<div class="auth-role-content">
|
|
|
- <div class="left-box">
|
|
|
- <div class="left-box-inner">
|
|
|
- <div class="left-box-inner-list">
|
|
|
- <div class="add-role-group-box">
|
|
|
- <div class="add-role-group-btn" @click="createRoleDialog">
|
|
|
- 新建角色权限组
|
|
|
+ <div class="auth-role-content-innerbox">
|
|
|
+ <div class="left-box">
|
|
|
+ <div class="left-box-inner">
|
|
|
+ <div class="left-box-inner-list">
|
|
|
+ <div class="add-role-group-box">
|
|
|
+ <div class="add-role-group-btn" @click="createRoleDialog">
|
|
|
+ 新建角色权限组
|
|
|
+ </div>
|
|
|
+ <a-modal
|
|
|
+ v-model="visible.roleGroup"
|
|
|
+ title="新建角色权限组"
|
|
|
+ @ok="addRoleGroupEvent"
|
|
|
+ >
|
|
|
+ <div class="dialog-content">
|
|
|
+ <div class="dialog-content-title">组名:</div>
|
|
|
+ <div class="dialog-content-input">
|
|
|
+ <a-input
|
|
|
+ placeholder="请输入名称"
|
|
|
+ v-model="inputName"
|
|
|
+ ></a-input>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 组名：<a-input
|
|
|
+ placeholder="请输入名称"
|
|
|
+ v-model="inputName"
|
|
|
+ ></a-input> -->
|
|
|
+ </a-modal>
|
|
|
</div>
|
|
|
- <a-modal
|
|
|
- v-model="visible.roleGroup"
|
|
|
- title="新建角色权限组"
|
|
|
- @ok="addRoleGroupEvent"
|
|
|
+ <div
|
|
|
+ class="left-box-inner-list-item"
|
|
|
+ v-for="item in roleListData"
|
|
|
+ :key="item.id"
|
|
|
+ :class="{ active: checkedObj.groupChecked === item.label }"
|
|
|
+ @click="groupClick(item.label)"
|
|
|
>
|
|
|
- 组名：<a-input placeholder="请输入名称" v-model="inputName"></a-input>
|
|
|
- </a-modal>
|
|
|
- </div>
|
|
|
- <div
|
|
|
- class="left-box-inner-list-item"
|
|
|
- v-for="item in roleListData"
|
|
|
- :key="item.id"
|
|
|
- :class="{ active: checkedObj.groupChecked === item.label }"
|
|
|
- @click="groupClick(item.label)"
|
|
|
- >
|
|
|
- <img
|
|
|
- v-if="checkedObj.groupChecked === item.label"
|
|
|
- :src="requireImg('auth/group_blue.png')"
|
|
|
- class="icon-img"
|
|
|
- />
|
|
|
-
|
|
|
- <img
|
|
|
- v-else
|
|
|
- :src="requireImg('auth/group_gray.png')"
|
|
|
- class="icon-img"
|
|
|
- />
|
|
|
- <div class="text">{{ item.label }}</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="left-box-inner-list">
|
|
|
- <div
|
|
|
- class="left-box-inner-list-item"
|
|
|
- v-for="item in systemListData"
|
|
|
- :key="item.id"
|
|
|
- :class="{ active: checkedObj.systemChecked === item.label }"
|
|
|
- @click="systemClick(item.label)"
|
|
|
- >
|
|
|
- <img
|
|
|
- class="icon-img"
|
|
|
- v-if="checkedObj.systemChecked === item.label"
|
|
|
- :src="requireImg('auth/system_blue.png')"
|
|
|
- />
|
|
|
- <img
|
|
|
- class="icon-img"
|
|
|
- v-else
|
|
|
- :src="requireImg('auth/system_gray.png')"
|
|
|
- />
|
|
|
+ <img
|
|
|
+ v-if="checkedObj.groupChecked === item.label"
|
|
|
+ :src="requireImg('auth/group_blue.png')"
|
|
|
+ class="icon-img"
|
|
|
+ />
|
|
|
|
|
|
- <div class="text">{{ item.label }}</div>
|
|
|
+ <img
|
|
|
+ v-else
|
|
|
+ :src="requireImg('auth/group_gray.png')"
|
|
|
+ class="icon-img"
|
|
|
+ />
|
|
|
+ <div class="text">{{ item.label }}</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="left-box-inner-list">
|
|
|
- <a-checkbox-group
|
|
|
- :options="userListGroup"
|
|
|
- v-model="checkedUsers"
|
|
|
- @change="onChange"
|
|
|
- >
|
|
|
- <template #label="value">
|
|
|
+ <div class="left-box-inner-list">
|
|
|
+ <div
|
|
|
+ class="left-box-inner-list-item"
|
|
|
+ v-for="item in systemListData"
|
|
|
+ :key="item.id"
|
|
|
+ :class="{ active: checkedObj.systemChecked === item.label }"
|
|
|
+ @click="systemClick(item.label)"
|
|
|
+ >
|
|
|
<img
|
|
|
- v-if="checkedUsers.includes(value.content)"
|
|
|
- :src="requireImg('auth/role_blue.png')"
|
|
|
class="icon-img"
|
|
|
+ v-if="checkedObj.systemChecked === item.label"
|
|
|
+ :src="requireImg('auth/system_blue.png')"
|
|
|
/>
|
|
|
<img
|
|
|
- v-else
|
|
|
- :src="requireImg('auth/role_gray.png')"
|
|
|
class="icon-img"
|
|
|
+ v-else
|
|
|
+ :src="requireImg('auth/system_gray.png')"
|
|
|
/>
|
|
|
- <span
|
|
|
- :style="{
|
|
|
- color: checkedUsers.includes(value.content)
|
|
|
- ? '#66beff'
|
|
|
- : '#7f7f7f',
|
|
|
- }"
|
|
|
- >{{ value.content }}</span
|
|
|
- >
|
|
|
- </template>
|
|
|
- </a-checkbox-group>
|
|
|
+
|
|
|
+ <div class="text">{{ item.label }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="left-box-inner-list">
|
|
|
+ <a-checkbox-group
|
|
|
+ :options="userListGroup"
|
|
|
+ v-model="checkedUsers"
|
|
|
+ @change="onChange"
|
|
|
+ >
|
|
|
+ <template #label="value">
|
|
|
+ <img
|
|
|
+ v-if="checkedUsers.includes(value.content)"
|
|
|
+ :src="requireImg('auth/role_blue.png')"
|
|
|
+ class="icon-img"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ v-else
|
|
|
+ :src="requireImg('auth/role_gray.png')"
|
|
|
+ class="icon-img"
|
|
|
+ />
|
|
|
+ <span
|
|
|
+ :style="{
|
|
|
+ color: checkedUsers.includes(value.content)
|
|
|
+ ? '#66beff'
|
|
|
+ : '#7f7f7f',
|
|
|
+ }"
|
|
|
+ >{{ value.content }}</span
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </a-checkbox-group>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="right-box">
|
|
|
- <div class="title">权限列表</div>
|
|
|
- <a-table
|
|
|
- :data-source="tableData"
|
|
|
- :columns="columns"
|
|
|
- :scroll="{ y: 230 }"
|
|
|
- bordered
|
|
|
- ></a-table>
|
|
|
+ <div class="right-box">
|
|
|
+ <div class="title">权限列表</div>
|
|
|
+ <a-table
|
|
|
+ :data-source="tableData"
|
|
|
+ :columns="columns"
|
|
|
+ :scroll="{ y: 230 }"
|
|
|
+ bordered
|
|
|
+ ></a-table>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="auth-role-infolist">
|
|
|
@@ -447,6 +526,11 @@ export default {
|
|
|
<img :src="requireImg('auth/role_blue.png')" class="icon-img" />
|
|
|
<span class="selected-item">{{ item.role }}</span>
|
|
|
</a-breadcrumb-item>
|
|
|
+ <a-breadcrumb-item>
|
|
|
+ <span class="selected-item" style="color: #7f7f7f">{{
|
|
|
+ item.modelName
|
|
|
+ }}</span>
|
|
|
+ </a-breadcrumb-item>
|
|
|
</a-breadcrumb>
|
|
|
</div>
|
|
|
<div class="close-btn" @click="deleteEvent(item)"></div>
|
|
|
@@ -477,7 +561,11 @@ export default {
|
|
|
<div class="add-user-btn-icon"><div class="img"></div></div>
|
|
|
<div class="add-user-btn-text">添加用户</div>
|
|
|
</div>
|
|
|
- <a-modal v-model="visible.user" title="添加用户"></a-modal>
|
|
|
+ <a-modal
|
|
|
+ v-model="visible.user"
|
|
|
+ title="添加用户"
|
|
|
+ @ok="addUserEvent"
|
|
|
+ ></a-modal>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -497,6 +585,29 @@ export default {
|
|
|
<style lang="less" scoped>
|
|
|
@fontDefaultColor: #7f7f7f;
|
|
|
@fontColor: #66beff;
|
|
|
+.ant-modal-body {
|
|
|
+ .dialog-content {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ &-title {
|
|
|
+ width: 20%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ &-input {
|
|
|
+ width: 75%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
.auth-role {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
@@ -509,131 +620,139 @@ export default {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: flex-start;
|
|
|
- font-size: 14px;
|
|
|
+ font-size: 16px;
|
|
|
font-weight: bold;
|
|
|
text-indent: 30px;
|
|
|
}
|
|
|
&-content {
|
|
|
width: 100%;
|
|
|
height: 50%;
|
|
|
- // background: peachpuff;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- justify-content: space-around;
|
|
|
- .left-box {
|
|
|
- height: 100%;
|
|
|
- width: 48%;
|
|
|
+ justify-content: center;
|
|
|
+ &-innerbox {
|
|
|
background: #fafafa;
|
|
|
+ width: calc(96% - 5px);
|
|
|
+ height: calc(100% - 5px);
|
|
|
+ border: 1px solid rgba(240, 241, 242, 0.3);
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- justify-content: center;
|
|
|
- &-inner {
|
|
|
- width: calc(100% - 10px);
|
|
|
- height: calc(100% - 10px);
|
|
|
+ justify-content: space-around;
|
|
|
+ .left-box {
|
|
|
+ height: 100%;
|
|
|
+ width: 50%;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- justify-content: space-around;
|
|
|
- &-list {
|
|
|
- height: 100%;
|
|
|
- width: 32%;
|
|
|
- border: 1px solid rgb(240, 241, 242);
|
|
|
- overflow: auto;
|
|
|
- position: relative;
|
|
|
+ justify-content: center;
|
|
|
+ &-inner {
|
|
|
+ width: calc(100% - 2px);
|
|
|
+ height: calc(100% - 10px);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-around;
|
|
|
+ &-list {
|
|
|
+ height: 100%;
|
|
|
+ width: 32%;
|
|
|
+ border: 1px solid #f0f1f2;
|
|
|
+ background: #fff;
|
|
|
+ overflow: auto;
|
|
|
+ position: relative;
|
|
|
|
|
|
- .ant-checkbox-group {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- /deep/ .ant-checkbox-group-item {
|
|
|
- width: 100%;
|
|
|
- height: 40px;
|
|
|
+ .ant-checkbox-group {
|
|
|
display: flex;
|
|
|
- align-items: center;
|
|
|
- margin-bottom: 10px;
|
|
|
- // background: rgba(100, 100, 150, 0.2);
|
|
|
- color: @fontDefaultColor;
|
|
|
- padding-left: 30px;
|
|
|
- .icon-img {
|
|
|
- width: 19.5px;
|
|
|
- height: 19.5px;
|
|
|
- margin-left: 10px;
|
|
|
- margin-right: 10px;
|
|
|
+ flex-direction: column;
|
|
|
+ /deep/ .ant-checkbox-group-item {
|
|
|
+ width: 100%;
|
|
|
+ height: 40px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ // background: rgba(100, 100, 150, 0.2);
|
|
|
+ color: @fontDefaultColor;
|
|
|
+ padding-left: 30px;
|
|
|
+ .icon-img {
|
|
|
+ width: 19.5px;
|
|
|
+ height: 19.5px;
|
|
|
+ margin-left: 10px;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .add-role-group-box {
|
|
|
- position: absolute;
|
|
|
- bottom: 10px;
|
|
|
- width: 100%;
|
|
|
- height: 40px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- .add-role-group-btn {
|
|
|
+ .add-role-group-box {
|
|
|
position: absolute;
|
|
|
- bottom: 5px;
|
|
|
- width: 150px;
|
|
|
- height: 25px;
|
|
|
- background: #2ea8e6;
|
|
|
- color: #fff;
|
|
|
- border-radius: 5px;
|
|
|
+ bottom: 10px;
|
|
|
+ width: 100%;
|
|
|
+ height: 40px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- &-item {
|
|
|
- width: 100%;
|
|
|
- height: 40px;
|
|
|
- padding-left: 10px;
|
|
|
- color: @fontDefaultColor;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- margin-bottom: 10px;
|
|
|
- cursor: pointer;
|
|
|
- .icon-img {
|
|
|
- width: 22px;
|
|
|
- height: 22px;
|
|
|
- margin-left: 10px;
|
|
|
- margin-right: 10px;
|
|
|
- }
|
|
|
- &.active {
|
|
|
- background: rgb(224, 239, 250, 0.8);
|
|
|
- color: @fontColor;
|
|
|
+ .add-role-group-btn {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 5px;
|
|
|
+ width: 150px;
|
|
|
+ height: 25px;
|
|
|
+ background: #2ea8e6;
|
|
|
+ color: #fff;
|
|
|
+ border-radius: 5px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- .text {
|
|
|
- width: calc(100% - 35px);
|
|
|
+ &-item {
|
|
|
+ width: 100%;
|
|
|
height: 40px;
|
|
|
+ padding-left: 10px;
|
|
|
+ color: @fontDefaultColor;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- justify-content: flex-start;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ cursor: pointer;
|
|
|
+ .icon-img {
|
|
|
+ width: 22px;
|
|
|
+ height: 22px;
|
|
|
+ margin-left: 10px;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ &.active {
|
|
|
+ background: rgb(224, 239, 250, 0.8);
|
|
|
+ color: @fontColor;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text {
|
|
|
+ width: calc(100% - 35px);
|
|
|
+ height: 40px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-start;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- .right-box {
|
|
|
- height: 100%;
|
|
|
- width: 45%;
|
|
|
- // background: rgb(255, 165, 0, 0.1);
|
|
|
- .title {
|
|
|
- width: 100%;
|
|
|
- height: 12%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: flex-start;
|
|
|
- font-weight: 400;
|
|
|
- font-size: 16px;
|
|
|
- }
|
|
|
- .table {
|
|
|
- width: 100%;
|
|
|
- height: 88%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
+ .right-box {
|
|
|
+ height: 100%;
|
|
|
+ width: 45%;
|
|
|
+ // background: rgb(255, 165, 0, 0.1);
|
|
|
+ .title {
|
|
|
+ width: 100%;
|
|
|
+ height: 12%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-start;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ .table {
|
|
|
+ width: 100%;
|
|
|
+ height: 88%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
Bella