From 4ebaa7ab93f8a1c8f862fd02833214843917c2d6 Mon Sep 17 00:00:00 2001
From: zhangxiao <898441624@qq.com>
Date: 星期二, 13 八月 2024 18:17:20 +0800
Subject: [PATCH] fix: 修改样式
---
src/views/authority/users/index.vue | 136 +++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 131 insertions(+), 5 deletions(-)
diff --git a/src/views/authority/users/index.vue b/src/views/authority/users/index.vue
index 65eb01d..ab35e07 100644
--- a/src/views/authority/users/index.vue
+++ b/src/views/authority/users/index.vue
@@ -249,7 +249,7 @@
</div>
</a-modal>
<a-modal
- width="30%"
+ width="70%"
v-model:visible="resourcevisible"
v-if="resourcevisible"
title="鏉冮檺閰嶇疆"
@@ -266,7 +266,7 @@
鑿滃崟
</template>
<a-tree
- class="tree-demo"
+ class="tree-demo-box"
v-model:checked-keys="checkedKeysMenu"
v-model:expanded-keys="expandKdysMenu"
:checkable="true"
@@ -275,12 +275,72 @@
@check="onCheckMenu"
:fieldNames="{
key: 'menuId',
- title: 'menuName',
+
children: 'children',
}"
:check-strictly="checkStrictlyMenu"
>
+ <template #extra="nodeData">
+ <div :class="{ 'custom-class': nodeData.menuType == 1 }">
+ <span>
+ {{ nodeData.menuName }}
+ </span>
+ </div>
+ </template>
+ <!-- <template #extra="nodeData"> {{ nodeData.menuName }}) </template> -->
</a-tree>
+ <!-- <a-space class="space_select_all">
+ <a-button type="primary">鍏ㄩ��</a-button>
+ <a-button>鍙栨秷鍏ㄩ��</a-button>
+ </a-space>
+
+ <div class="table_box" v-if="treeDataMenu[0].children">
+ <div class="table_row1">
+ <div
+ class="row1_list"
+ v-for="(item, index) in treeDataMenu[0].children"
+ :key="item.menuId"
+ >
+ <div class="row1_clo">
+ <a-checkbox
+ :checked="item.menuId"
+ @change="onCheckChange(item, $event)"
+ >
+ {{ item.menuName }}
+ </a-checkbox>
+ </div>
+ <div v-if="item.children" class="row1_clo2">
+ <div
+ class="row2_clo2_1"
+ v-for="(item2, index2) in item.children"
+ :key="item2.menuId"
+ >
+ <div class="row1_clo2_1">
+ <a-checkbox
+ :checked="item2.menuId"
+ @change="onCheckChange(item2, $event)"
+ >
+ {{ item2.menuName }}
+ </a-checkbox>
+ </div>
+ <div v-if="item2.children" class="row1_clo2_2">
+ <div
+ v-for="(item3, index3) in item2.children"
+ :key="item3.menuId"
+ >
+ <a-checkbox
+ :checked="item3.menuId"
+ @change="onCheckChange(item3, $event)"
+ >
+ {{ item3.menuName }}</a-checkbox
+ >
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div> -->
</a-tab-pane>
<a-tab-pane key="2">
<template #title>
@@ -375,7 +435,7 @@
</template>
<script lang="ts" setup>
- import { computed, reactive, ref } from 'vue';
+ import { computed, reactive, ref, h, onMounted } from 'vue';
import { useI18n } from 'vue-i18n';
import useLoading from '@/hooks/loading';
import { Pagination } from '@/types/global';
@@ -395,13 +455,14 @@
} from '@/api/authority';
import { Modal } from '@arco-design/web-vue';
import Authheader from '@/views/authority/components/authheader.vue';
+ import { create } from 'lodash';
let treeData = ref([]);
let checkedKeys = ref([]);
let expandKdys = ref([]);
let checkStrictly = ref([]);
- let treeDataMenu = ref([]);
+ let treeDataMenu = ref<any>([]);
let checkedKeysMenu = ref([]);
let expandKdysMenu = ref([]);
let checkStrictlyMenu = ref([]);
@@ -446,6 +507,13 @@
let deptvisible = ref(false);
let resourcevisible = ref(false);
let selectUser = ref({});
+ // const treeDataList = ref([]);
+ const checked1 = ref(false);
+
+ //琛ㄦ牸澶嶉�夋閫夋嫨
+ const onCheckChange = (checkedKeysValue: (string | number)[], e: any) => {
+ console.log('onCheckChange', checkedKeysValue, e);
+ };
const onCheck = (newCheckedKeys, event) => {
let o = { deptId: event.node.deptId, deptName: event.node.deptName };
@@ -805,9 +873,12 @@
treeData.value = [...res.rows];
});
};
+ const objArr = ref<any>([]);
const MenuData = async (key) => {
await ResourceList(key).then((res) => {
treeDataMenu.value = [...res.rows];
+ // addClassToLeafNodes(treeDataMenu.value);
+ treeDataList.value = res.rows;
});
};
@@ -862,6 +933,61 @@
}
}
}
+ .space_select_all {
+ display: flex;
+ justify-content: end;
+ margin-bottom: 15px;
+ }
+ .table_box {
+ display: flex;
+
+ border: 1px solid #e8e8e8;
+ border-bottom: none;
+ .row1_clo {
+ min-width: 200px;
+ display: flex;
+ padding-left: 20px;
+ border-right: 1px solid #e8e8e8;
+ }
+ .table_row1 {
+ width: 100%;
+ .row1_list {
+ display: flex;
+ min-height: 40px;
+ border-bottom: 1px solid #e8e8e8;
+ // line-height: 40px;
+ }
+ }
+ .row1_clo2 {
+ width: 100%;
+ border-top: none;
+ .row2_clo2_1 {
+ display: flex;
+ width: 100%;
+ min-height: 40px;
+ line-height: 40px;
+ border-bottom: 1px solid #e8e8e8;
+ .row1_clo2_1 {
+ border-right: 1px solid #e8e8e8;
+ min-width: 310px;
+ padding-left: 20px;
+ }
+ .row1_clo2_2 {
+ border-top: none;
+ border-right: none;
+ width: 100%;
+ display: flex;
+ flex-wrap: wrap;
+ div {
+ margin-left: 20px;
+ }
+ }
+ }
+ }
+ .row2_clo2_1:last-child {
+ border-bottom: none;
+ }
+ }
</style>
<style lang="less">
.ant-table-wrapper {
--
Gitblit v1.8.0