mirror of
https://github.com/dataease/dataease.git
synced 2025-02-25 12:03:05 +08:00
fix: 修复导航栏收放 用户管理筛选逻辑 api数据源优化
This commit is contained in:
dataeaseShu
parent
19f43e551d
commit
92ae311970
@ -169,6 +169,15 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.el-table::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
border-top: 1px solid rgba(31, 35, 41, 0.15);;
|
||||
}
|
||||
|
||||
::v-deep .el-table__fixed-body-wrapper {
|
||||
tr {
|
||||
background-color: var(--TableBG, #ffffff) !important;
|
||||
|
||||
@ -64,6 +64,36 @@ export const bottom2TopDrag = {
|
||||
}
|
||||
}
|
||||
|
||||
const closePress = {
|
||||
inserted: function (el) {
|
||||
el.querySelector('.el-drawer__close-btn').onmousedown = function (e) {
|
||||
e.currentTarget.style.background = '#d2d3d4';
|
||||
}
|
||||
el.querySelector('.el-drawer__close-btn').onmouseup = function (e) {
|
||||
e.currentTarget.style.background = 'none';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// const btnPress = {
|
||||
// inserted: function (el) {
|
||||
// el.onmousedown = function () {
|
||||
// el.style.background = '#EFF0F1';
|
||||
// }
|
||||
// el.onmouseenter = function () {
|
||||
// el.style.background = '#F5F6F7 !important';
|
||||
// }
|
||||
// el.onmouseleave = function () {
|
||||
// el.style.background = 'none';
|
||||
// }
|
||||
// el.onmouseup = function () {
|
||||
// el.style.background = 'none';
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// #EFF0F1
|
||||
|
||||
export default {
|
||||
install(Vue) {
|
||||
// Vue.directive('data-permission', dataPermission)
|
||||
@ -71,6 +101,8 @@ export default {
|
||||
Vue.directive('left-to-right-drag', left2RightDrag)
|
||||
Vue.directive('right-to-left-drag', right2LeftDrag)
|
||||
Vue.directive('bottom-to-top-drag', bottom2TopDrag)
|
||||
Vue.directive('closePress', closePress)
|
||||
// Vue.directive('btnPress', btnPress)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
<template>
|
||||
<!-- <div :class="{'has-logo':showLogo}" :style="{'--active-bg': activeBg, '--theme':$store.state.settings.theme , '--left-menu-hovor': variables.leftMenuHovor}"> -->
|
||||
<div :class="{ 'has-logo': showLogo }">
|
||||
<div :class="{ 'has-logo': showLogo }" class="de-sidebar-container">
|
||||
<logo v-if="showLogo" :collapse="isCollapse" />
|
||||
<el-menu
|
||||
:default-active="activeMenu"
|
||||
:collapse="isCollapse"
|
||||
:unique-opened="false"
|
||||
:collapse-transition="false"
|
||||
class="de-el-menu"
|
||||
mode="vertical"
|
||||
>
|
||||
<sidebar-item
|
||||
@ -31,7 +32,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from "vuex";
|
||||
import { mapGetters, mapState } from "vuex";
|
||||
import Logo from "./Logo";
|
||||
import SidebarItem from "./SidebarItem";
|
||||
import variables from "@/styles/variables.scss";
|
||||
@ -39,9 +40,11 @@ import path from "path";
|
||||
import { isExternal } from "@/utils/validate";
|
||||
export default {
|
||||
components: { SidebarItem, Logo },
|
||||
|
||||
computed: {
|
||||
...mapGetters(["sidebar"]),
|
||||
...mapState({
|
||||
isCollapse: state => state.isCollapse,
|
||||
}),
|
||||
routes() {
|
||||
// return this.$router.options.routes
|
||||
if (this.isCollapse) {
|
||||
@ -67,14 +70,9 @@ export default {
|
||||
return variables;
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isCollapse: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
changeSideWidth() {
|
||||
this.isCollapse = !this.isCollapse;
|
||||
this.$store.commit('setIsCollapse', !this.isCollapse);
|
||||
this.$emit("changeSideWidth", this.isCollapse ? "70px" : "");
|
||||
},
|
||||
resolvePath(routePath) {
|
||||
@ -113,9 +111,18 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.de-sidebar-container {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.de-el-menu {
|
||||
overflow-y: auto;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
.sidebar-collapse-btn {
|
||||
height: 48px;
|
||||
position: fixed;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
border-top: 1px solid #1f232926;
|
||||
|
||||
@ -175,13 +175,13 @@ export default {
|
||||
}
|
||||
.le-aside-container {
|
||||
.sidebar-container {
|
||||
width: 100% !important;
|
||||
position: initial !important;
|
||||
height: calc(100vh - 80px) !important;
|
||||
overflow-x: hidden !important;
|
||||
overflow-y: auto !important;
|
||||
width: 100%;
|
||||
position: relative !important;
|
||||
height: 100%;
|
||||
top: 0 !important;
|
||||
background-color: var(--SiderBG) !important;
|
||||
}
|
||||
overflow: hidden;
|
||||
}
|
||||
.full-height {
|
||||
height: 100vh !important;
|
||||
|
||||
@ -108,6 +108,8 @@ const data = {
|
||||
y: 600
|
||||
},
|
||||
scrollAutoMove: 0,
|
||||
// 系统管理菜单是否收缩
|
||||
isCollapse: false,
|
||||
// 视图是否编辑记录
|
||||
panelViewEditInfo: {},
|
||||
// 仪表板视图明细
|
||||
@ -151,7 +153,9 @@ const data = {
|
||||
setEditMode(state, mode) {
|
||||
state.editMode = mode
|
||||
},
|
||||
|
||||
setIsCollapse(state, isCollapse) {
|
||||
state.isCollapse = isCollapse
|
||||
},
|
||||
setCanvasStyle(state, style) {
|
||||
if (style) {
|
||||
style['selfAdaption'] = true
|
||||
|
||||
@ -391,4 +391,9 @@ export default {
|
||||
float: right;
|
||||
margin-right: 45px;
|
||||
}
|
||||
|
||||
::v-deep .el-tabs__nav-wrap::after,
|
||||
::v-deep .el-tabs__active-bar {
|
||||
height: 1px !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -407,6 +407,7 @@
|
||||
:visible.sync="edit_api_item"
|
||||
custom-class="api-datasource-drawer"
|
||||
size="840px"
|
||||
v-closePress
|
||||
:before-close="closeEditItem"
|
||||
direction="rtl"
|
||||
>
|
||||
@ -463,7 +464,7 @@
|
||||
</el-form-item>
|
||||
|
||||
<div v-loading="loading">
|
||||
<div class="row-rules">
|
||||
<div class="row-rules mr40">
|
||||
<span>{{ $t("datasource.req_param") }}</span>
|
||||
</div>
|
||||
<!-- HTTP 请求参数 -->
|
||||
@ -977,7 +978,6 @@ export default {
|
||||
},
|
||||
closeEditItem() {
|
||||
this.active = 0;
|
||||
console.log(1, this.$refs.apiItem);
|
||||
this.$refs.apiItem.clearValidate();
|
||||
this.edit_api_item = false;
|
||||
},
|
||||
@ -1008,7 +1008,6 @@ export default {
|
||||
);
|
||||
},
|
||||
handleCheckAllChange(row) {
|
||||
console.log(row);
|
||||
this.handleCheckChange(row);
|
||||
this.apiItem.fields = [];
|
||||
this.handleFiledChange();
|
||||
@ -1102,14 +1101,30 @@ export default {
|
||||
<style lang="scss">
|
||||
.api-datasource-drawer {
|
||||
.el-drawer__header {
|
||||
padding: 24px;
|
||||
padding: 16px 24px;
|
||||
margin: 0;
|
||||
font-family: PingFang SC;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
color: #1f2329;
|
||||
position: relative;
|
||||
border-bottom: 1px solid rgba(187, 191, 196, 0.5);
|
||||
|
||||
.el-drawer__close-btn {
|
||||
position: absolute;
|
||||
right: 24px;
|
||||
top: 16px;
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center
|
||||
}
|
||||
|
||||
.el-drawer__close-btn:hover {
|
||||
background: #e9e9ea;
|
||||
}
|
||||
}
|
||||
.el-drawer__body {
|
||||
padding: 0 24px 81px 24px;
|
||||
@ -1124,7 +1139,7 @@ export default {
|
||||
font-weight: 500;
|
||||
line-height: 22px;
|
||||
padding-left: 10px;
|
||||
margin: 24px 0;
|
||||
margin: 24px 0 16px 0;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
@ -1141,8 +1156,10 @@ export default {
|
||||
.input-with-select {
|
||||
.el-input-group__prepend {
|
||||
background-color: #fff;
|
||||
border-color: #bbbfc4;
|
||||
.el-select {
|
||||
width: 84px !important;
|
||||
color: #1f2329;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1195,6 +1212,7 @@ export default {
|
||||
line-height: 22px;
|
||||
text-align: center;
|
||||
color: #1f2329;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.is-process {
|
||||
@ -1224,6 +1242,18 @@ export default {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.el-form-item__label {
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.mr40 {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
border-radius: 4px;
|
||||
padding: 5px 26px 5px 26px;
|
||||
|
||||
@ -4,6 +4,7 @@
|
||||
:visible.sync="userDrawer"
|
||||
custom-class="user-drawer"
|
||||
size="680px"
|
||||
v-closePress
|
||||
direction="rtl"
|
||||
>
|
||||
<div class="filter">
|
||||
@ -24,7 +25,7 @@
|
||||
@click="activeDeptChange(ele.id)"
|
||||
:class="[activeDept.includes(ele.id) ? 'active' : '']"
|
||||
:key="ele.id"
|
||||
v-for="ele in selectDepts"
|
||||
v-for="ele in selectDeptsCahe"
|
||||
>{{ ele.label }}</span>
|
||||
<el-popover
|
||||
placement="bottom"
|
||||
@ -42,7 +43,7 @@
|
||||
:load="loadNode"
|
||||
:lazy="true"
|
||||
:expand-on-click-node="false"
|
||||
:data="depts"
|
||||
:data="deptsComputed"
|
||||
:props="defaultProps"
|
||||
@node-click="handleNodeClick"
|
||||
></el-tree>
|
||||
@ -54,8 +55,6 @@
|
||||
popper-class="tree-select"
|
||||
multiple
|
||||
:placeholder="$t('commons.please_select')"
|
||||
@change="changeRole"
|
||||
@remove-tag="changeRole"
|
||||
value-key="id"
|
||||
>
|
||||
<el-option
|
||||
@ -77,7 +76,7 @@
|
||||
@click="activeRoleChange(ele.id)"
|
||||
:class="[activeRole.includes(ele.id) ? 'active' : '']"
|
||||
:key="ele.id"
|
||||
v-for="ele in rolesValue"
|
||||
v-for="ele in rolesValueCopy"
|
||||
>{{ ele.name }}</span
|
||||
>
|
||||
<el-popover
|
||||
@ -96,7 +95,7 @@
|
||||
value-key="id"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in roles"
|
||||
v-for="item in rolesComputed"
|
||||
:key="item.name"
|
||||
:label="item.name"
|
||||
:value="item"
|
||||
@ -126,7 +125,8 @@ import { getDeptTree, treeByDeptId } from "@/api/system/dept";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: [],
|
||||
roleCahe: [],
|
||||
deptCahe: [],
|
||||
roles: [],
|
||||
status: [{
|
||||
id: 1,
|
||||
@ -140,6 +140,7 @@ export default {
|
||||
activeRole: [],
|
||||
depts: [],
|
||||
selectDepts: [],
|
||||
selectDeptsCahe: [],
|
||||
activeDept: [],
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
@ -149,6 +150,17 @@ export default {
|
||||
userDrawer: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
rolesComputed() {
|
||||
return this.roles.filter(ele => !this.activeRole.includes(ele.id))
|
||||
},
|
||||
rolesValueCopy() {
|
||||
return this.roleCahe.filter(ele => this.activeRole.includes(ele.id))
|
||||
},
|
||||
deptsComputed() {
|
||||
return this.depts.filter(ele => !this.activeDept.includes(ele.id))
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initRoles();
|
||||
},
|
||||
@ -156,37 +168,53 @@ export default {
|
||||
// 获取弹窗内部门数据
|
||||
treeByDeptId() {
|
||||
treeByDeptId(0).then((res) => {
|
||||
this.depts = res.data || [];
|
||||
this.depts = (res.data || []).map(ele => {
|
||||
return {
|
||||
...ele,
|
||||
leaf: !ele.hasChildren,
|
||||
}
|
||||
})
|
||||
});
|
||||
},
|
||||
changeRole() {
|
||||
const roles = this.rolesValue.map((item) => item.id);
|
||||
this.activeRole = this.activeRole.filter((ele) => roles.includes(ele));
|
||||
if (this.roleCahe.length > this.rolesValue.length + this.activeRole.length) {
|
||||
this.roleCahe = this.roleCahe.filter(ele => this.rolesValue.map(ele => ele.id).concat(this.activeRole).includes(ele.id));
|
||||
return;
|
||||
}
|
||||
const roleIdx = this.rolesValue.findIndex(ele => !this.roleCahe.map(ele => ele.id).concat(this.activeRole).includes(ele.id));
|
||||
if (roleIdx === -1) return
|
||||
this.activeRole.push(this.rolesValue[roleIdx].id)
|
||||
this.roleCahe.push(this.rolesValue[roleIdx]);
|
||||
this.rolesValue.splice(roleIdx, 1)
|
||||
},
|
||||
activeRoleChange(id) {
|
||||
const roleIndex = this.activeRole.findIndex((ele) => ele === id);
|
||||
if (roleIndex === -1) {
|
||||
this.activeRole.push(id);
|
||||
this.rolesValue = this.rolesValue.filter((ele) => ele.id !== id);
|
||||
} else {
|
||||
this.activeRole.splice(roleIndex, 1);
|
||||
const role = this.roleCahe.find((ele) => ele.id === id);
|
||||
this.rolesValue.push(role);
|
||||
}
|
||||
},
|
||||
handleNodeClick({ id, label }) {
|
||||
const deptIndex = this.selectDepts.findIndex((ele) => ele.id === id);
|
||||
if (deptIndex === -1) {
|
||||
this.selectDepts.push({ id, label });
|
||||
} else {
|
||||
this.selectDepts.splice(deptIndex, 1);
|
||||
this.changeDepts();
|
||||
const deptIdx = this.selectDepts.findIndex((ele) => ele.id === id);
|
||||
if (deptIdx !== -1) {
|
||||
this.selectDepts.splice(deptIdx, 1);
|
||||
this.selectDeptsCahe = this.selectDeptsCahe.filter(ele => ele.id !== id)
|
||||
this.deptCahe = this.deptCahe.filter(ele => ele.id !== id)
|
||||
return;
|
||||
}
|
||||
this.activeDept.push(id)
|
||||
this.selectDeptsCahe.push({ id, label });
|
||||
this.deptCahe.push({ id, label });
|
||||
},
|
||||
activeDeptChange(id) {
|
||||
const deptIndex = this.activeDept.findIndex((ele) => ele === id);
|
||||
if (deptIndex === -1) {
|
||||
this.activeDept.push(id);
|
||||
} else {
|
||||
this.activeDept.splice(deptIndex, 1);
|
||||
}
|
||||
const dept = this.deptCahe.find((ele) => ele.id === id)
|
||||
this.selectDepts.push(dept);
|
||||
this.activeDept = this.activeDept.filter(ele => ele !== id)
|
||||
this.selectDeptsCahe = this.selectDeptsCahe.filter(ele => ele.id !== id)
|
||||
},
|
||||
statusChange(id) {
|
||||
const statusIndex = this.activeStatus.findIndex((ele) => ele === id);
|
||||
@ -206,8 +234,9 @@ export default {
|
||||
return;
|
||||
}
|
||||
getDeptTree(node.data.id).then((res) => {
|
||||
const filterDept = (res.data || []).filter(ele => !this.activeDept.includes(ele.deptId))
|
||||
resolve(
|
||||
res.data.map((dept) => {
|
||||
filterDept.map((dept) => {
|
||||
return this.normalizer(dept);
|
||||
})
|
||||
);
|
||||
@ -227,7 +256,21 @@ export default {
|
||||
},
|
||||
search() {
|
||||
this.userDrawer = false;
|
||||
this.$emit('search', this.formatCondition())
|
||||
this.$emit('search', this.formatCondition(), this.formatText())
|
||||
},
|
||||
formatText() {
|
||||
const params = [];
|
||||
if (this.activeStatus.length) {
|
||||
let str = `状态:${this.activeStatus.reduce((pre,next) => (this.status.find(ele => ele.id === next) || {}).label + '、' + pre, '')}`;
|
||||
params.push(str.slice(0, str.length - 1 ))
|
||||
}
|
||||
if (this.activeDept.length) {
|
||||
params.push(`组织:${this.selectDeptsCahe.reduce((pre,next) => pre.label + '、' + next.label)}`)
|
||||
}
|
||||
if (this.activeRole.length) {
|
||||
params.push(`角色:${this.rolesValueCopy.reduce((pre,next) => pre.label + '、' + next.labele)}`)
|
||||
}
|
||||
return params;
|
||||
},
|
||||
formatCondition() {
|
||||
const fildMap = {'r.role_id': this.activeRole, 'd.dept_id': this.activeDept, 'u.enabled': this.activeStatus}
|
||||
@ -259,16 +302,33 @@ export default {
|
||||
<style lang="scss">
|
||||
.user-drawer {
|
||||
.el-drawer__header {
|
||||
padding: 16px 21px 16px 24px;
|
||||
padding: 16px 24px;
|
||||
margin: 0;
|
||||
font-family: PingFang SC;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
letter-spacing: 0px;
|
||||
text-align: left;
|
||||
color: #1f2329;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
height: 57px;
|
||||
mix-blend-mode: normal;
|
||||
border-bottom: 1px solid rgba(187, 191, 196, 0.5);
|
||||
margin: 0;
|
||||
|
||||
.el-drawer__close-btn {
|
||||
position: absolute;
|
||||
right: 24px;
|
||||
top: 16px;
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center
|
||||
}
|
||||
|
||||
.el-drawer__close-btn:hover {
|
||||
background: #e9e9ea;
|
||||
}
|
||||
}
|
||||
|
||||
.el-drawer__body {
|
||||
@ -351,8 +411,9 @@ export default {
|
||||
}
|
||||
.tree-select {
|
||||
.el-select-dropdown__empty,
|
||||
.el-scrollbar__wrap,
|
||||
.popper__arrow {
|
||||
display: none;
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -26,9 +26,12 @@
|
||||
</el-input>
|
||||
<el-button
|
||||
class="normal btn"
|
||||
icon="el-icon-setting"
|
||||
icon="iconfont icon-icon-filter"
|
||||
@click="filterShow"
|
||||
>筛选</el-button
|
||||
>筛选<template v-if="filterTexts.length">
|
||||
({{ filterTexts.length }})
|
||||
</template>
|
||||
</el-button
|
||||
>
|
||||
<el-dropdown trigger="click" :hide-on-click="false">
|
||||
<el-button class="normal btn" icon="el-icon-setting"
|
||||
@ -54,7 +57,18 @@
|
||||
</el-dropdown>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="table-container">
|
||||
<div class="filter-texts" v-if="filterTexts.length">
|
||||
<span class="sum">{{ paginationConfig.total }}</span>
|
||||
<span class="title">个结果</span>
|
||||
<el-divider direction="vertical"></el-divider>
|
||||
<p class="text" v-for="ele in filterTexts" :key="ele">{{ ele }} <i class="el-icon-close"></i></p>
|
||||
<el-button
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="clearFilter"
|
||||
>{{ $t("user.create") }}</el-button>
|
||||
</div>
|
||||
<div class="table-container" :class="[filterTexts.length ? 'table-container-filter' : '']">
|
||||
<grid-table
|
||||
v-if="canLoadDom"
|
||||
v-loading="$store.getters.loadingMap[$store.getters.currentPath]"
|
||||
@ -160,7 +174,7 @@
|
||||
width="321"
|
||||
:ref="'initPwd' + scope.row.userId"
|
||||
popper-class="reset-pwd"
|
||||
trigger="hover"
|
||||
trigger="click"
|
||||
>
|
||||
<i class="el-icon-warning"></i>
|
||||
<div class="tips">是否恢复为初始密码?</div>
|
||||
@ -207,44 +221,6 @@
|
||||
</el-table-column>
|
||||
</grid-table>
|
||||
</div>
|
||||
<el-dialog
|
||||
:close-on-click-modal="false"
|
||||
:title="$t('member.edit_password')"
|
||||
:visible.sync="editPasswordVisible"
|
||||
width="30%"
|
||||
:destroy-on-close="true"
|
||||
left
|
||||
@close="handleClose"
|
||||
>
|
||||
<el-form
|
||||
ref="editPasswordForm"
|
||||
:model="ruleForm"
|
||||
label-position="right"
|
||||
label-width="120px"
|
||||
:rules="rule"
|
||||
class="demo-ruleForm"
|
||||
@keypress.enter.native="editUserPassword('editPasswordForm')"
|
||||
>
|
||||
<el-form-item :label="$t('member.new_password')" prop="newPassword">
|
||||
<el-input
|
||||
v-model="ruleForm.newPassword"
|
||||
type="password"
|
||||
autocomplete="off"
|
||||
show-password
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="text" @click="editPasswordVisible = false">{{
|
||||
$t("commons.cancel")
|
||||
}}</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="editUserPassword('editPasswordForm')"
|
||||
>{{ $t("commons.confirm") }}</el-button
|
||||
>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<keep-alive>
|
||||
<filterUser ref="filterUser" @search="filterDraw" ></filterUser>
|
||||
</keep-alive>
|
||||
@ -310,8 +286,8 @@ export default {
|
||||
total: 0,
|
||||
},
|
||||
data: [],
|
||||
filterTexts: [],
|
||||
dialogVisible: false,
|
||||
editPasswordVisible: false,
|
||||
form: {
|
||||
roles: [
|
||||
{
|
||||
@ -376,6 +352,9 @@ export default {
|
||||
document.removeEventListener('keypress', this.entryKey)
|
||||
},
|
||||
methods: {
|
||||
clearFilter() {
|
||||
|
||||
},
|
||||
entryKey (event) {
|
||||
const keyCode = event.keyCode
|
||||
if (keyCode === 13) {
|
||||
@ -438,8 +417,9 @@ export default {
|
||||
this.paginationConfig.currentPage = currentPage;
|
||||
this.search();
|
||||
},
|
||||
filterDraw(condition) {
|
||||
filterDraw(condition, filterTexts = []) {
|
||||
this.cacheCondition = condition;
|
||||
this.filterTexts = filterTexts;
|
||||
this.initSearch()
|
||||
},
|
||||
search() {
|
||||
@ -467,11 +447,6 @@ export default {
|
||||
edit(row) {
|
||||
this.$refs.userEditer.init(row);
|
||||
},
|
||||
editPassword(row) {
|
||||
this.editPasswordVisible = true;
|
||||
const tempForm = Object.assign({}, row);
|
||||
this.ruleForm = { userId: tempForm.userId };
|
||||
},
|
||||
del(row) {
|
||||
this.$confirm(this.$t("确定删除该用户吗？"), "", {
|
||||
confirmButtonText: this.$t("commons.delete"),
|
||||
@ -499,23 +474,6 @@ export default {
|
||||
customClass: "de-message-success de-message",
|
||||
});
|
||||
},
|
||||
editUserPassword(editPasswordForm) {
|
||||
this.$refs[editPasswordForm].validate((valid) => {
|
||||
if (valid) {
|
||||
editPassword(this.ruleForm).then((res) => {
|
||||
this.$success(this.$t("commons.modify_success"));
|
||||
this.editPasswordVisible = false;
|
||||
this.initSearch();
|
||||
this.user &&
|
||||
this.user.userId &&
|
||||
this.user.userId === editPasswordForm.userId &&
|
||||
window.location.reload();
|
||||
});
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
handleClose() {
|
||||
this.depts = null;
|
||||
this.formType = "add";
|
||||
@ -566,12 +524,57 @@ export default {
|
||||
margin: 0 -2px 0 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.table-container-filter {
|
||||
height: calc(100% - 110px);
|
||||
}
|
||||
.filter-texts {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 17px 0;
|
||||
font-family: 'PingFang SC';
|
||||
font-weight: 400;
|
||||
|
||||
.sum {
|
||||
color: #1F2329;;
|
||||
}
|
||||
|
||||
.title {
|
||||
color: #999999;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.text {
|
||||
max-width: 280px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
padding: 1px 22px 1px 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #0C296E;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
background: rgba(51, 112, 255, 0.1);
|
||||
border-radius: 2px;
|
||||
margin: 0;
|
||||
margin-right: 8px;
|
||||
position: relative;
|
||||
i {
|
||||
position: absolute;
|
||||
right: 2px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
.top-operate {
|
||||
margin-bottom: 16px;
|
||||
|
||||
.btn {
|
||||
border-radius: 4px;
|
||||
padding: 5px 12px 5px 12px;
|
||||
padding: 5px 12px;
|
||||
//styleName: 中文/桌面端/正文 14 22 Regular;
|
||||
font-family: PingFang SC;
|
||||
font-size: 14px;
|
||||
@ -581,6 +584,11 @@ export default {
|
||||
text-align: center;
|
||||
border: none;
|
||||
box-sizing: border-box;
|
||||
|
||||
|
||||
::v-deep span {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.normal {
|
||||
@ -602,6 +610,9 @@ export default {
|
||||
|
||||
.name-email-search {
|
||||
width: 240px;
|
||||
::v-deep input {
|
||||
border-color: #bbbfc4;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -99,18 +99,39 @@
|
||||
:label="$t('commons.organization')"
|
||||
prop="deptId"
|
||||
>
|
||||
<treeselect
|
||||
ref="deptTreeSelect"
|
||||
<el-popover
|
||||
placement="bottom"
|
||||
popper-class="user-popper dept"
|
||||
width="384"
|
||||
trigger="click"
|
||||
>
|
||||
<el-tree
|
||||
v-if="dialogVisible"
|
||||
:load="loadNode"
|
||||
:lazy="true"
|
||||
:expand-on-click-node="false"
|
||||
:data="depts"
|
||||
:props="defaultProps"
|
||||
@node-click="handleNodeClick"
|
||||
></el-tree>
|
||||
|
||||
<el-select
|
||||
ref="roleSelect"
|
||||
v-model="form.deptId"
|
||||
:options="depts"
|
||||
:load-options="loadDepts"
|
||||
:auto-load-root-options="false"
|
||||
:placeholder="$t('user.choose_org')"
|
||||
:no-children-text="$t('commons.treeselect.no_children_text')"
|
||||
:no-options-text="$t('commons.treeselect.no_options_text')"
|
||||
:no-results-text="$t('commons.treeselect.no_results_text')"
|
||||
@open="filterData"
|
||||
clearable
|
||||
slot="reference"
|
||||
class="form-gender-select"
|
||||
popper-class="tree-select"
|
||||
:placeholder="$t('commons.please_select')"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in selectDepts"
|
||||
:key="item.label"
|
||||
:label="item.label"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-popover>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@ -170,16 +191,15 @@ import { PHONE_REGEX } from "@/utils/validate";
|
||||
import { getDeptTree, treeByDeptId } from "@/api/system/dept";
|
||||
import { addUser, editUser, allRoles } from "@/api/system/user";
|
||||
import { pluginLoaded, defaultPwd } from "@/api/user";
|
||||
import {
|
||||
LOAD_CHILDREN_OPTIONS,
|
||||
LOAD_ROOT_OPTIONS,
|
||||
} from "@riophae/vue-treeselect";
|
||||
import Treeselect from "@riophae/vue-treeselect";
|
||||
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
||||
export default {
|
||||
components: { Treeselect },
|
||||
data() {
|
||||
return {
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "label",
|
||||
isLeaf: "leaf",
|
||||
},
|
||||
selectDepts: [],
|
||||
form: {
|
||||
roles: [
|
||||
{
|
||||
@ -302,7 +322,7 @@ export default {
|
||||
phonePrefix: "+86",
|
||||
roleIds: [2],
|
||||
},
|
||||
depts: null,
|
||||
depts: [],
|
||||
roles: [],
|
||||
roleDatas: [],
|
||||
userRoles: [],
|
||||
@ -331,7 +351,6 @@ export default {
|
||||
}
|
||||
},
|
||||
create() {
|
||||
this.depts = null;
|
||||
this.formType = "add";
|
||||
this.form = Object.assign({}, this.defaultForm);
|
||||
},
|
||||
@ -342,7 +361,8 @@ export default {
|
||||
this.create();
|
||||
return;
|
||||
}
|
||||
this.depts = null;
|
||||
const { deptId:id, deptName:label } = row.dept;
|
||||
this.selectDepts = [{id, label}]
|
||||
this.formType = "modify";
|
||||
this.dialogVisible = true;
|
||||
this.form = Object.assign({}, row);
|
||||
@ -354,59 +374,54 @@ export default {
|
||||
if (!this.form.phonePrefix) {
|
||||
this.form.phonePrefix = '+86';
|
||||
}
|
||||
this.initDeptTree();
|
||||
},
|
||||
initRoles() {
|
||||
allRoles().then((res) => {
|
||||
this.roles = res.data;
|
||||
});
|
||||
},
|
||||
initDeptTree() {
|
||||
treeByDeptId(this.form.deptId || 0).then((res) => {
|
||||
const results = res.data.map((node) => {
|
||||
if (node.hasChildren && !node.children) {
|
||||
node.children = null;
|
||||
// delete node.children
|
||||
}
|
||||
return node;
|
||||
});
|
||||
this.depts = results;
|
||||
});
|
||||
},
|
||||
// 获取弹窗内部门数据
|
||||
loadDepts({ action, parentNode, callback }) {
|
||||
if (action === "LOAD_ROOT_OPTIONS" && !this.form.deptId) {
|
||||
const _self = this;
|
||||
treeByDeptId(0).then((res) => {
|
||||
const results = res.data.map((node) => {
|
||||
if (node.hasChildren && !node.children) {
|
||||
node.children = null;
|
||||
}
|
||||
return node;
|
||||
});
|
||||
_self.depts = results;
|
||||
callback();
|
||||
});
|
||||
handleNodeClick({ id, label }) {
|
||||
const [ dept ] = this.selectDepts;
|
||||
if (!dept || dept.id !== id) {
|
||||
this.selectDepts = [{ id, label }];
|
||||
this.form.deptId = id
|
||||
return
|
||||
}
|
||||
|
||||
if (action === "LOAD_CHILDREN_OPTIONS") {
|
||||
const _self = this;
|
||||
getDeptTree(parentNode.id).then((res) => {
|
||||
parentNode.children = res.data.map(function (obj) {
|
||||
return _self.normalizer(obj);
|
||||
});
|
||||
callback();
|
||||
});
|
||||
if (dept.id === id) {
|
||||
this.selectDepts = [];
|
||||
this.form.deptId = null
|
||||
}
|
||||
},
|
||||
normalizer(node) {
|
||||
if (node.hasChildren) {
|
||||
node.children = null;
|
||||
// 获取弹窗内部门数据
|
||||
treeByDeptId() {
|
||||
treeByDeptId(0).then((res) => {
|
||||
this.depts = (res.data || []).map(ele => {
|
||||
return {
|
||||
...ele,
|
||||
leaf: !ele.hasChildren,
|
||||
}
|
||||
})
|
||||
});
|
||||
},
|
||||
loadNode(node, resolve) {
|
||||
if (!this.depts.length) {
|
||||
this.treeByDeptId();
|
||||
return;
|
||||
}
|
||||
getDeptTree(node.data.id).then((res) => {
|
||||
resolve(
|
||||
res.data.map((dept) => {
|
||||
return this.normalizer(dept);
|
||||
})
|
||||
);
|
||||
});
|
||||
},
|
||||
normalizer(node) {
|
||||
return {
|
||||
id: node.deptId,
|
||||
label: node.name,
|
||||
children: node.children,
|
||||
leaf: !node.hasChildren,
|
||||
};
|
||||
},
|
||||
deleteTag(value) {
|
||||
@ -428,6 +443,7 @@ export default {
|
||||
);
|
||||
},
|
||||
reset() {
|
||||
this.depts = [];
|
||||
this.$refs.createUserForm.resetFields();
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
@ -446,21 +462,6 @@ export default {
|
||||
}
|
||||
});
|
||||
},
|
||||
filterData(instanceId) {
|
||||
this.$refs.roleSelect &&
|
||||
this.$refs.roleSelect.blur &&
|
||||
this.$refs.roleSelect.blur();
|
||||
if (!this.depts) {
|
||||
return;
|
||||
}
|
||||
const results = this.depts.map((node) => {
|
||||
if (node.hasChildren) {
|
||||
node.children = null;
|
||||
}
|
||||
return node;
|
||||
});
|
||||
this.depts = results;
|
||||
},
|
||||
onCopy(e) {
|
||||
this.$success(this.$t("commons.copy_success"));
|
||||
},
|
||||
@ -571,8 +572,22 @@ export default {
|
||||
.form-gender-select {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.tree-select {
|
||||
display: none !important;
|
||||
}
|
||||
.user-popper {
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
.popper__arrow {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
.user-popper.dept {
|
||||
height: 300px;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user