From a7b5e177db655a98c299d3342538e23bd4e647da Mon Sep 17 00:00:00 2001
From: zhangxiao <898441624@qq.com>
Date: 星期三, 14 八月 2024 14:35:12 +0800
Subject: [PATCH] fix: 模型管理修改
---
src/views/authority/users/index.vue | 352 ++++++++++++++++++++++++++++++++++++++++++++-------------
1 files changed, 269 insertions(+), 83 deletions(-)
diff --git a/src/views/authority/users/index.vue b/src/views/authority/users/index.vue
index 1509a15..6d76315 100644
--- a/src/views/authority/users/index.vue
+++ b/src/views/authority/users/index.vue
@@ -2,71 +2,68 @@
<div class="container">
<authheader :items="menuTips"></authheader>
<a-card ref="account" class="general-card">
- <a-row>
- <a-col :flex="2"></a-col>
- <a-col :flex="1">
- <a-form :model="formModel" style="margin-top: 30px">
- <a-form-item field="name">
- <a-input
- v-model="formModel.name"
- :style="{ width: '320px' }"
- :placeholder="$t('璇疯緭鍏�')"
- />
- </a-form-item>
- </a-form>
- </a-col>
- <a-col :flex="'200px'" style="text-align: right; margin-top: 30px">
- <a-button @click="reset" style="margin-right: 20px">
- <template #icon>
- <icon-refresh />
- </template>
- {{ $t('searchTable.form.reset') }}
- </a-button>
- <a-button type="primary" @click="search">
- <template #icon>
- <icon-search />
- </template>
- {{ $t('searchTable.form.search') }}
- </a-button>
- </a-col>
- </a-row>
- <a-divider style="margin-top: 0" />
- <a-row style="margin-bottom: 16px">
- <a-col :span="12">
- <a-space>
- <a-button type="primary" :align="'right'" @click="operation(0)"
- >+ 鏂板缓璐︽埛</a-button
+ <div class="table-page-search-wrapper">
+ <div class="search-wrapper">
+ <div>
+ <a-input
+ v-model="formModel.name"
+ :style="{ width: '320px' }"
+ :placeholder="$t('璇疯緭鍏�')"
+ />
+ </div>
+ <div>
+ <a-button
+ type="primary"
+ @click="search"
+ style="margin-right: 20px; margin-left: 10px"
>
- </a-space>
- </a-col>
- <a-col
- :span="12"
- style="display: flex; align-items: center; justify-content: end"
- >
- <a-tooltip :content="$t('searchTable.actions.refresh')">
- <div class="action-icon" @click="search">
- <icon-refresh size="18" />
- </div>
- </a-tooltip>
- <a-dropdown @select="handleSelectDensity">
- <a-tooltip :content="$t('searchTable.actions.density')">
- <div class="action-icon">
- <icon-line-height size="18" />
+ <template #icon>
+ <icon-search />
+ </template>
+ {{ $t('searchTable.form.search') }}
+ </a-button>
+ <a-button @click="reset">
+ <template #icon>
+ <icon-refresh />
+ </template>
+ {{ $t('searchTable.form.reset') }}
+ </a-button>
+ </div>
+ </div>
+ <div class="search-wrapper">
+ <div>
+ <a-space>
+ <a-button type="primary" :align="'right'" @click="operation(0)"
+ >+ 鏂板缓璐︽埛</a-button
+ >
+ </a-space></div
+ >
+ <div class="wrapper-icon">
+ <a-tooltip :content="$t('searchTable.actions.refresh')">
+ <div class="action-icon" @click="search">
+ <icon-refresh size="18" />
</div>
</a-tooltip>
- <template #content>
- <a-doption
- v-for="item in densityList"
- :key="item.value"
- :value="item.value"
- :class="{ active: item.value === size }"
- >
- <span>{{ item.name }}</span>
- </a-doption>
- </template>
- </a-dropdown>
- </a-col>
- </a-row>
+ <a-dropdown @select="handleSelectDensity">
+ <a-tooltip :content="$t('searchTable.actions.density')">
+ <div class="action-icon">
+ <icon-line-height size="18" />
+ </div>
+ </a-tooltip>
+ <template #content>
+ <a-doption
+ v-for="item in densityList"
+ :key="item.value"
+ :value="item.value"
+ :class="{ active: item.value === size }"
+ >
+ <span>{{ item.name }}</span>
+ </a-doption>
+ </template>
+ </a-dropdown>
+ </div>
+ </div>
+ </div>
<a-table
row-key="id"
:loading="loading"
@@ -129,17 +126,14 @@
@ok="editHandleOk"
>
<a-form :model="editform">
+ <a-form-item field="email" label="鐢ㄦ埛鍚�">
+ <a-input v-model="editform.email" />
+ </a-form-item>
<a-form-item field="name" label="鏄电О">
<a-input v-model="editform.nickName" />
</a-form-item>
- <a-form-item field="userName" label="鐢ㄦ埛鍚�">
- <a-input v-model="editform.userName" />
- </a-form-item>
<a-form-item field="phoneNumber" label="鎵嬫満鍙�">
<a-input v-model="editform.phoneNumber" />
- </a-form-item>
- <a-form-item field="email" label="閭">
- <a-input v-model="editform.email" />
</a-form-item>
</a-form>
</a-modal>
@@ -187,8 +181,9 @@
</div>
</a-modal>
<a-modal
- width="30%"
+ width="50%"
v-model:visible="resourcevisible"
+ v-if="resourcevisible"
title="鏉冮檺閰嶇疆"
@cancel="handleCancel(3)"
@ok="editResourceHandleOk"
@@ -203,7 +198,7 @@
鑿滃崟
</template>
<a-tree
- class="tree-demo"
+ class="tree-demo-box"
v-model:checked-keys="checkedKeysMenu"
v-model:expanded-keys="expandKdysMenu"
:checkable="true"
@@ -217,7 +212,66 @@
}"
:check-strictly="checkStrictlyMenu"
>
+ <!-- <template #extra="nodeData">
+ <div :class="{ 'custom-class': nodeData.menuType == 1 }">
+ <span>
+ {{ nodeData.menuName }}
+ </span>
+ </div>
+ </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>
@@ -312,7 +366,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';
@@ -332,13 +386,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([]);
@@ -369,7 +424,7 @@
let editform = ref<User>({
createTime: '',
dept: undefined,
- deptName:"",
+ deptName: '',
email: '',
nickName: '',
phoneNumber: '',
@@ -383,6 +438,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 };
@@ -469,7 +531,7 @@
const basePagination: Pagination = {
current: 1,
- pageSize: 20,
+ pageSize: 15,
};
const pagination = reactive({
...basePagination,
@@ -500,7 +562,7 @@
slotName: 'index',
},
{
- title: t('鐧诲綍鍚�'),
+ title: t('鐢ㄦ埛鍚�'),
dataIndex: 'email',
},
{
@@ -651,7 +713,7 @@
record.resources.forEach((val) => {
checkStrictlyMenu.value.push({
menuId: val.menuId,
- menuName: val.menuName
+ menuName: val.menuName,
});
checkedKeysMenu.value.push(val.menuId);
expandKdysMenu.value.push(val.menuId);
@@ -661,7 +723,7 @@
record.knowledges.forEach((val) => {
checkStrictlyKnowledge.value.push({
knowledgeId: val.id,
- knowledgeName: val.name
+ knowledgeName: val.name,
});
checkedKeysKnowledge.value.push(val.id);
});
@@ -670,12 +732,11 @@
record.dialogs.forEach((val) => {
checkStrictlyDialog.value.push({
dialogId: val.id,
- dialogName: val.name
+ dialogName: val.name,
});
checkedKeysDialog.value.push(val.id);
});
}
-
}
//鏈烘瀯
if (t == 5) {
@@ -689,7 +750,7 @@
record.dept.forEach((val) => {
checkStrictly.value.push({
deptId: val.deptId,
- deptName: val.deptName
+ deptName: val.deptName,
});
checkedKeys.value.push(val.deptId);
expandKdys.value.push(val.deptId);
@@ -708,9 +769,9 @@
if (user.dept) {
for (const d of user.dept) {
if (user.deptName) {
- user.deptName += d.deptName + ",";
+ user.deptName += d.deptName + ',';
} else {
- user.deptName = d.deptName + ",";
+ user.deptName = d.deptName + ',';
}
}
}
@@ -743,9 +804,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;
});
};
@@ -772,7 +836,7 @@
};
</script>
-<style scoped>
+<style scoped lang="less">
.card-demo {
width: 460px;
margin-left: 24px;
@@ -782,4 +846,126 @@
.card-demo:hover {
transform: translateY(-4px);
}
+ .table-page-search-wrapper {
+ padding-top: 10px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 20px;
+ padding-bottom: 10px;
+ border-bottom: 1px solid #e8e8e8;
+ .search-wrapper {
+ display: flex;
+ .wrapper-icon {
+ display: flex;
+ align-items: center;
+ margin-left: 40px;
+ // margin-right: 40px;
+ }
+ }
+ }
+ .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 {
+ .ant-table-tbody {
+ tr {
+ td {
+ .ant-table-row-cell-break-word {
+ .ant-table-column-sorter {
+ display: none;
+ }
+ }
+ }
+ }
+ }
+
+ .search-wrapper {
+ display: flex;
+ .wrapper-icon {
+ display: flex;
+ align-items: center;
+ margin-left: 40px;
+ // margin-right: 40px;
+ }
+ }
+ }
+</style>
+<style lang="less">
+ .ant-table-wrapper {
+ .ant-table-tbody {
+ tr {
+ td {
+ .ant-table-row-cell-break-word {
+ .ant-table-column-sorter {
+ display: none;
+ }
+ }
+ }
+ }
+ }
+ }
+</style>
+<style lang="less" scoped>
+ .table-page-search-wrapper {
+ .ant-form-inline {
+ :deep(.ant-form-item) {
+ display: flex;
+ }
+ }
+ }
</style>
--
Gitblit v1.8.0