|
|
@@ -6,12 +6,12 @@ |
|
|
|
* @Description: |
|
|
|
--> |
|
|
|
<template> |
|
|
|
<div class="app-container"> |
|
|
|
<div class="app-container system-manage-landpage"> |
|
|
|
<el-container> |
|
|
|
<el-aside> |
|
|
|
<side-tree 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 style="border:2px solid #E4E4E4;border-radius:10px;margin-left:10px"> |
|
|
|
<el-main> |
|
|
|
<el-form |
|
|
|
ref="dataForm" |
|
|
|
:model="dataForm" |
|
|
@@ -20,11 +20,16 @@ |
|
|
|
label-width="100px" |
|
|
|
label-position="left" |
|
|
|
> |
|
|
|
<el-form-item label-width="60px" :label="$t('userManage.orgName')+':'"> |
|
|
|
<el-form-item label-width="60px" :label="$t('userManage.orgName') + ':'"> |
|
|
|
<span style="margin: 0 5px;color:#1890FF">{{ dataForm.orgName }}</span> |
|
|
|
</el-form-item> |
|
|
|
<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 :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> |
|
|
@@ -47,15 +52,20 @@ |
|
|
|
@clickBtn="handleClick" |
|
|
|
/> |
|
|
|
</base-table> |
|
|
|
<pagination v-show="total > 0" :total="total" :page.sync="dataForm.page" :limit.sync="dataForm.limit" @pagination="getList" /> |
|
|
|
<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" /> |
|
|
|
<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> |
|
|
@@ -80,69 +90,79 @@ const topBtnConfig = [ |
|
|
|
} |
|
|
|
] |
|
|
|
// edit here |
|
|
|
const tableBtn = [{ |
|
|
|
type: 'edit', |
|
|
|
btnName: 'btn.edit' |
|
|
|
}, { |
|
|
|
type: 'EmPower', |
|
|
|
btnName: i18n.t('userManage.AssignRole') |
|
|
|
}, { |
|
|
|
type: 'delete', |
|
|
|
btnName: 'btn.delete' |
|
|
|
}] |
|
|
|
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'), |
|
|
|
align: 'center' |
|
|
|
}, { |
|
|
|
prop: 'email', |
|
|
|
label: i18n.t('userManage.email'), |
|
|
|
align: 'center' |
|
|
|
}, { |
|
|
|
prop: 'mobile', |
|
|
|
label: i18n.t('userManage.mobile'), |
|
|
|
align: 'center' |
|
|
|
}, |
|
|
|
// { |
|
|
|
// prop: 'birthday', |
|
|
|
// label: i18n.t('userManage.birthday'), |
|
|
|
// align: 'center' |
|
|
|
// }, |
|
|
|
{ |
|
|
|
prop: 'orgName', |
|
|
|
label: i18n.t('userManage.orgName'), |
|
|
|
align: 'center' |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: 'roleName', |
|
|
|
label: i18n.t('roleManage.roleName'), |
|
|
|
align: 'center' |
|
|
|
}, |
|
|
|
// { |
|
|
|
// prop: 'sex', |
|
|
|
// label: i18n.t('userManage.sex'), |
|
|
|
// align: 'center', |
|
|
|
// filter: dataDict('sex') |
|
|
|
// }, |
|
|
|
{ |
|
|
|
prop: 'code', |
|
|
|
label: i18n.t('userManage.code'), |
|
|
|
align: 'center' |
|
|
|
}, { |
|
|
|
prop: 'enabled', |
|
|
|
label: i18n.t('userManage.status'), |
|
|
|
align: 'center', |
|
|
|
filter: dataDict('enableState') |
|
|
|
}, { |
|
|
|
prop: 'remark', |
|
|
|
label: i18n.t('userManage.remark'), |
|
|
|
align: 'center' |
|
|
|
}] |
|
|
|
const tableProps = [ |
|
|
|
{ |
|
|
|
prop: 'name', |
|
|
|
label: i18n.t('userManage.userName'), |
|
|
|
align: 'center' |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: 'email', |
|
|
|
label: i18n.t('userManage.email'), |
|
|
|
align: 'center' |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: 'mobile', |
|
|
|
label: i18n.t('userManage.mobile'), |
|
|
|
align: 'center' |
|
|
|
}, |
|
|
|
// { |
|
|
|
// prop: 'birthday', |
|
|
|
// label: i18n.t('userManage.birthday'), |
|
|
|
// align: 'center' |
|
|
|
// }, |
|
|
|
{ |
|
|
|
prop: 'orgName', |
|
|
|
label: i18n.t('userManage.orgName'), |
|
|
|
align: 'center' |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: 'roleName', |
|
|
|
label: i18n.t('roleManage.roleName'), |
|
|
|
align: 'center' |
|
|
|
}, |
|
|
|
// { |
|
|
|
// prop: 'sex', |
|
|
|
// label: i18n.t('userManage.sex'), |
|
|
|
// align: 'center', |
|
|
|
// filter: dataDict('sex') |
|
|
|
// }, |
|
|
|
{ |
|
|
|
prop: 'code', |
|
|
|
label: i18n.t('userManage.code'), |
|
|
|
align: 'center' |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: 'enabled', |
|
|
|
label: i18n.t('userManage.status'), |
|
|
|
align: 'center', |
|
|
|
filter: dataDict('enableState') |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: 'remark', |
|
|
|
label: i18n.t('userManage.remark'), |
|
|
|
align: 'center' |
|
|
|
} |
|
|
|
] |
|
|
|
export default { |
|
|
|
components: { sideTree, Pagination, BaseTable, MethodBtn, AddUserForm, EditUserForm, AssignRole }, |
|
|
|
data() { |
|
|
@@ -174,16 +194,20 @@ export default { |
|
|
|
current: 1, |
|
|
|
size: 20 |
|
|
|
}, |
|
|
|
sexOptions: [{ |
|
|
|
'label': '全部', |
|
|
|
'value': '' |
|
|
|
}, { |
|
|
|
'label': '男', |
|
|
|
'value': 1 |
|
|
|
}, { |
|
|
|
'label': '女', |
|
|
|
'value': 2 |
|
|
|
}] |
|
|
|
sexOptions: [ |
|
|
|
{ |
|
|
|
label: '全部', |
|
|
|
value: '' |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: '男', |
|
|
|
value: 1 |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: '女', |
|
|
|
value: 2 |
|
|
|
} |
|
|
|
] |
|
|
|
} |
|
|
|
}, |
|
|
|
created() { |
|
|
@@ -220,7 +244,7 @@ export default { |
|
|
|
confirmButtonText: i18n.t('btn.confirm'), |
|
|
|
cancelButtonText: i18n.t('btn.cancel'), |
|
|
|
type: 'warning' |
|
|
|
}).then(async() => { |
|
|
|
}).then(async () => { |
|
|
|
// 走接口 |
|
|
|
const result = await delUser({ |
|
|
|
id: raw.data.id |
|
|
@@ -266,19 +290,70 @@ export default { |
|
|
|
}, |
|
|
|
clickTopBtn(val) { |
|
|
|
if (val === 'add') { |
|
|
|
this.showDialog = true// 新增 |
|
|
|
this.showDialog = true // 新增 |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
<style scoped> |
|
|
|
.el-container >>> .el-aside{ |
|
|
|
border:2px solid #E4E4E4; |
|
|
|
border-radius:10px; |
|
|
|
background-color: white; |
|
|
|
min-height:550px; |
|
|
|
width:30%; |
|
|
|
padding-top:20px |
|
|
|
.el-container >>> .el-aside { |
|
|
|
border-radius: 8px; |
|
|
|
background-color: #fff; |
|
|
|
width: 256px !important; |
|
|
|
padding-top: 20px; |
|
|
|
margin: 0; |
|
|
|
padding-left: 0; |
|
|
|
padding-right: 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; |
|
|
|
} |
|
|
|
</style> |