404 lines
9.4 KiB
Vue
404 lines
9.4 KiB
Vue
<!--
|
|
* @Author: zwq
|
|
* @Date: 2021-04-06 19:33:11
|
|
* @LastEditors: gtz
|
|
* @LastEditTime: 2022-07-25 10:36:54
|
|
* @Description:
|
|
-->
|
|
<template>
|
|
<div class="app-container system-manage-landpage">
|
|
<el-container>
|
|
<el-aside>
|
|
<TestTree v-if="menuList.length > 0" :menu-list="menuList" @getOrganization="getOrganization" />
|
|
<!-- <side-tree v-if="menuList.length > 0" :menu-list="menuList" @getOrganization="getOrganization" /> -->
|
|
</el-aside>
|
|
<el-main>
|
|
<el-form ref="dataForm" :model="dataForm" :inline="true" size="mini" label-position="left">
|
|
<el-row>
|
|
<el-col style="margin: 0 0 28px;">
|
|
<!-- <el-form-item class="has-icon" label-width="100px" :label="$t('userManage.orgName')"> -->
|
|
<el-form-item class="has-icon">
|
|
<span v-if="dataForm.orgName">{{ dataForm.orgName }}</span>
|
|
<span v-else>用户管理</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col>
|
|
<el-form-item :label="$t('userManage.userName')" prop="name">
|
|
<el-input
|
|
v-model="dataForm.name"
|
|
:placeholder="['placeholder.input', $t('userManage.userName')] | i18nFilterForm"
|
|
clearable
|
|
:style="{ width: '100%' }"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="getList()">{{ 'btn.search' | i18nFilter }}</el-button>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
<base-table
|
|
:top-btn-config="topBtnConfig"
|
|
:table-config="tableProps"
|
|
:table-data="list"
|
|
:is-loading="listLoading"
|
|
:page="dataForm.current"
|
|
:limit="dataForm.size"
|
|
@clickTopBtn="clickTopBtn"
|
|
>
|
|
<method-btn
|
|
v-if="tableBtn.length"
|
|
slot="handleBtn"
|
|
:width="trueWidth"
|
|
:method-list="tableBtn"
|
|
@clickBtn="handleClick"
|
|
/>
|
|
</base-table>
|
|
<pagination
|
|
v-show="total > 0"
|
|
:total="total"
|
|
:page.sync="dataForm.page"
|
|
:limit.sync="dataForm.limit"
|
|
@pagination="getList"
|
|
/>
|
|
|
|
<add-user-form :visible.sync="showDialog" @refreshDataList="getList" />
|
|
<edit-user-form :visible.sync="showEditDialog" :target-info="{ id: curEditId }" @refreshDataList="getList" />
|
|
<assign-Role :visible.sync="AssignRoleDialog" :user-id="userId" @refreshDataList="getList" />
|
|
</el-main>
|
|
</el-container>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import TestTree from './TestTree.vue'
|
|
import sideTree from '../system-manage/sideTree'
|
|
import { getOrgList } from '@/api/org'
|
|
import AddUserForm from './AddUserForm'
|
|
import EditUserForm from './EditUser'
|
|
import AssignRole from './AssignRole'
|
|
import BaseTable from '@/components/BaseTable'
|
|
// edit here
|
|
import { getUserList, delUser } from '@/api/user'
|
|
import { getRoleList } from '@/api/role'
|
|
|
|
import Pagination from '@/components/Pagination'
|
|
import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
|
|
import dataDict from '@/filters/DataDict'
|
|
import i18n from '@/lang'
|
|
const topBtnConfig = [
|
|
{
|
|
type: 'add',
|
|
btnName: 'btn.add'
|
|
}
|
|
]
|
|
// edit here
|
|
const tableBtn = [
|
|
{
|
|
type: 'edit',
|
|
btnName: 'btn.edit'
|
|
},
|
|
{
|
|
type: 'EmPower',
|
|
btnName: i18n.t('userManage.AssignRole')
|
|
},
|
|
{
|
|
type: 'delete',
|
|
btnName: 'btn.delete'
|
|
}
|
|
]
|
|
// birthday
|
|
// orgId
|
|
// sex
|
|
// code
|
|
// remark
|
|
const tableProps = [
|
|
{
|
|
prop: 'name',
|
|
label: i18n.t('userManage.userName')
|
|
},
|
|
{
|
|
prop: 'email',
|
|
label: i18n.t('userManage.email')
|
|
},
|
|
{
|
|
prop: 'mobile',
|
|
label: i18n.t('userManage.mobile')
|
|
},
|
|
// {
|
|
// prop: 'birthday',
|
|
// label: i18n.t('userManage.birthday'),
|
|
//
|
|
// },
|
|
{
|
|
prop: 'orgName',
|
|
label: i18n.t('userManage.orgName')
|
|
},
|
|
{
|
|
prop: 'roleName',
|
|
label: i18n.t('roleManage.roleName')
|
|
},
|
|
// {
|
|
// prop: 'sex',
|
|
// label: i18n.t('userManage.sex'),
|
|
//
|
|
// filter: dataDict('sex')
|
|
// },
|
|
{
|
|
prop: 'code',
|
|
label: i18n.t('userManage.code')
|
|
},
|
|
{
|
|
prop: 'enabled',
|
|
label: i18n.t('userManage.status'),
|
|
|
|
filter: dataDict('enableState')
|
|
},
|
|
{
|
|
prop: 'remark',
|
|
label: i18n.t('userManage.remark')
|
|
}
|
|
]
|
|
export default {
|
|
components: { TestTree, sideTree, Pagination, BaseTable, MethodBtn, AddUserForm, EditUserForm, AssignRole },
|
|
data() {
|
|
return {
|
|
topBtnConfig,
|
|
menuList: [],
|
|
tableBtn,
|
|
tableProps,
|
|
list: [],
|
|
total: 0,
|
|
trueWidth: 120,
|
|
listLoading: true,
|
|
showDialog: false,
|
|
curEditId: null,
|
|
userId: '',
|
|
showEditDialog: false,
|
|
AssignRoleDialog: false,
|
|
defaultProps: {
|
|
children: 'children',
|
|
label: 'label'
|
|
},
|
|
roleNameOptions: [],
|
|
dataForm: {
|
|
name: '',
|
|
sex: '',
|
|
roleName: '',
|
|
orgId: '',
|
|
orgName: '',
|
|
current: 1,
|
|
size: 20
|
|
},
|
|
sexOptions: [
|
|
{
|
|
label: '全部',
|
|
value: ''
|
|
},
|
|
{
|
|
label: '男',
|
|
value: 1
|
|
},
|
|
{
|
|
label: '女',
|
|
value: 2
|
|
}
|
|
]
|
|
}
|
|
},
|
|
created() {
|
|
this.getOrgList()
|
|
this.getList()
|
|
},
|
|
methods: {
|
|
async getOrgList() {
|
|
// edit here
|
|
const params = {
|
|
current: 1,
|
|
size: 500
|
|
}
|
|
this.roleNameOptions.splice(0, this.roleNameOptions.length)
|
|
const res = await getRoleList(params)
|
|
if (res.code === 0) {
|
|
this.roleNameOptions = res.data
|
|
}
|
|
this.menuList.splice(0, this.menuList.length)
|
|
const res1 = await getOrgList(params)
|
|
if (res1.code === 0) {
|
|
this.menuList = res1.data.records
|
|
console.log('menulist===>', this.menuList)
|
|
}
|
|
},
|
|
getOrganization(data) {
|
|
this.dataForm.orgId = data.id
|
|
this.dataForm.orgName = data.name
|
|
this.getList()
|
|
},
|
|
handleClick(raw) {
|
|
switch (raw.type) {
|
|
case 'delete':
|
|
this.$confirm(i18n.t('deleteMsgBox.content'), i18n.t('deleteMsgBox.hint'), {
|
|
confirmButtonText: i18n.t('btn.confirm'),
|
|
cancelButtonText: i18n.t('btn.cancel'),
|
|
type: 'warning'
|
|
}).then(async () => {
|
|
// 走接口
|
|
const result = await delUser({
|
|
id: raw.data.id
|
|
})
|
|
if (result.code === 0) {
|
|
this.$message({
|
|
type: 'success',
|
|
message: i18n.t('deleteMsgBox.doneMsg')
|
|
})
|
|
this.getList()
|
|
}
|
|
})
|
|
break
|
|
case 'edit':
|
|
this.showEditDialog = true
|
|
this.curEditId = raw.data.id
|
|
break
|
|
case 'EmPower':
|
|
this.AssignRoleDialog = true
|
|
this.userId = raw.data.id
|
|
break
|
|
}
|
|
},
|
|
async getList() {
|
|
this.listLoading = true
|
|
// edit here
|
|
const res = await getUserList(this.dataForm)
|
|
if (res.code === 0) {
|
|
this.list = res.data.records
|
|
this.list.forEach(item => {
|
|
item.roleName = item.stringList.toString()
|
|
})
|
|
this.total = res.data.total
|
|
this.listLoading = false
|
|
}
|
|
},
|
|
btnClick(val) {
|
|
this.headFormValue = val
|
|
// 如果点击的是搜索栏的其他按钮在这里继续写判断
|
|
if (this.headFormValue.btnName === 'search') {
|
|
this.getList()
|
|
}
|
|
},
|
|
clickTopBtn(val) {
|
|
if (val === 'add') {
|
|
this.showDialog = true // 新增
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
.el-container >>> .el-aside {
|
|
border-radius: 8px;
|
|
background-color: #fff;
|
|
width: 256px !important;
|
|
margin: 0;
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
aside {
|
|
padding: 0;
|
|
}
|
|
.el-container >>> .el-main {
|
|
border-radius: 8px;
|
|
background-color: #fff;
|
|
border: unset;
|
|
}
|
|
.el-container >>> .el-tree-node__content {
|
|
padding-left: 16px !important;
|
|
padding-right: 16px !important;
|
|
}
|
|
.el-container >>> .el-tree-node__content:hover {
|
|
background-color: #e3efff;
|
|
}
|
|
.el-container >>> .el-tree-node:focus > .el-tree-node__content {
|
|
background-color: #e3efff;
|
|
}
|
|
/* .el-container >>> .el-icon-caret-right {
|
|
display: inline-block;
|
|
width: 4px;
|
|
height: 4px;
|
|
border-radius: 50%;
|
|
border: 1px solid #000;
|
|
background-color: transparent;
|
|
} */
|
|
.el-container >>> .el-icon-caret-right::before {
|
|
/* content: '';
|
|
display: inline-block;
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
border: 1px solid #000;
|
|
background-color: transparent; */
|
|
}
|
|
|
|
.system-manage-landpage {
|
|
background: unset;
|
|
padding: 0;
|
|
display: flex;
|
|
}
|
|
|
|
.el-container {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.el-container >>> .el-tree-node__label {
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
letter-spacing: 0.88px;
|
|
color: #161616;
|
|
}
|
|
|
|
.has-icon {
|
|
position: relative;
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.has-icon::before {
|
|
content: '';
|
|
width: 4px;
|
|
border-radius: 2px;
|
|
height: 55%;
|
|
position: absolute;
|
|
/* top: 13%; */
|
|
left: 0;
|
|
background: #0b58ff;
|
|
}
|
|
|
|
:not(.has-icon) >>> .el-form-item__label {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.has-icon >>> .el-form-item__label {
|
|
position: relative;
|
|
left: 12px;
|
|
font-size: 16px;
|
|
}
|
|
.has-icon >>> .el-form-item__content {
|
|
font-size: 16px;
|
|
margin-left: 12px;
|
|
}
|
|
|
|
.el-button--mini {
|
|
padding: 6px 12px;
|
|
border-radius: 4px;
|
|
}
|
|
/* .has-icon >>> .el-form-item__content {
|
|
position: absolute;
|
|
left: 24px;
|
|
} */
|
|
|
|
.el-form-item {
|
|
margin: 0;
|
|
}
|
|
</style>
|