|
|
|
@ -1,69 +1,109 @@ |
|
|
|
<template> |
|
|
|
<div class="user-add-or-update"> |
|
|
|
<el-dialog width="530px" @close="closeDialog" :title="!dataForm.id ? buttons.add :buttons.edit" :close-on-click-modal="false" :visible.sync="visible"> |
|
|
|
<el-form :inline="true" :model="dataForm" label-position="top" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px"> |
|
|
|
<el-form> |
|
|
|
<el-form-item :label="buttons.username||'用户账号'" prop="userName"> |
|
|
|
<el-input v-model="dataForm.userName" style="width: 150px;" placeholder="登录帐号"></el-input> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item :label="buttons.password||'密码'" prop="password" :class="{ 'is-required': !dataForm.id }"> |
|
|
|
<el-input v-model="dataForm.password" style="width: 150px;" type="password" ></el-input> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item :label="buttons.comfirmPassword||'确认密码'" prop="comfirmPassword" :class="{ 'is-required': !dataForm.id }"> |
|
|
|
<el-input v-model="dataForm.comfirmPassword" style="width: 150px;" type="password"></el-input> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
<el-form> |
|
|
|
<el-form-item :label="buttons.userDisplay||'用户名'" prop="email"> |
|
|
|
<el-input v-model="dataForm.userDisplay" style="width: 150px;" ></el-input> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item :label="buttons.email||'邮箱'" prop="email"> |
|
|
|
<el-input v-model="dataForm.email" style="width: 150px;" ></el-input> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item :label="buttons.mobile||'手机号'" prop="mobile"> |
|
|
|
<el-input v-model="dataForm.mobile" style="width: 150px;" placeholder="手机号"></el-input> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
<el-form> |
|
|
|
<el-form-item> |
|
|
|
<span slot="label" style="" @click="getBaseList(93)"><a herf="#">{{buttons.site||'工厂'}}</a></span> |
|
|
|
<el-input v-model="dataForm.site" style="width: 150px;" placeholder="工厂"></el-input> |
|
|
|
</el-form-item> |
|
|
|
<!-- <el-form-item :label="buttons.language||'语言'" prop="languageDefault">--> |
|
|
|
<!-- <el-select filterable v-model="dataForm.languageDefault" clearable style="width: 150px;">--> |
|
|
|
<!-- <el-option :label="item.languageName" :value="item.languageCode" v-for="(item,index) in languageList " :key="index"></el-option>--> |
|
|
|
<!-- </el-select>--> |
|
|
|
<!-- </el-form-item>--> |
|
|
|
</el-form> |
|
|
|
<el-form> |
|
|
|
<el-form-item label="角色" size="mini" prop="roleIdList"> |
|
|
|
<el-checkbox-group v-model="dataForm.roleIdList"> |
|
|
|
<el-checkbox |
|
|
|
v-for="role in roleList" |
|
|
|
:key="role.roleId" |
|
|
|
:label="role.roleId">{{role.roleName}} |
|
|
|
</el-checkbox> |
|
|
|
</el-checkbox-group> |
|
|
|
<el-dialog |
|
|
|
width="600px" |
|
|
|
@close="closeDialog" |
|
|
|
:title="!dataForm.id ? buttons.add : buttons.edit" |
|
|
|
:close-on-click-modal="false" |
|
|
|
:visible.sync="visible" |
|
|
|
custom-class="user-dialog"> |
|
|
|
<el-form :model="dataForm" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="85px" size="small"> |
|
|
|
<!-- 基本信息 --> |
|
|
|
<div class="form-section"> |
|
|
|
<div class="section-title">基本信息</div> |
|
|
|
<el-row :gutter="16"> |
|
|
|
<el-col :span="12"> |
|
|
|
<el-form-item label="用户账号" prop="userName"> |
|
|
|
<el-input v-model="dataForm.userName" placeholder="请输入登录账号"></el-input> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
<el-col :span="12"> |
|
|
|
<el-form-item label="人员编码" prop="userNo"> |
|
|
|
<el-input v-model="dataForm.userNo" placeholder="请输入人员编码"></el-input> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
<el-row :gutter="16"> |
|
|
|
<el-col :span="12"> |
|
|
|
<el-form-item label="用户名" prop="userDisplay"> |
|
|
|
<el-input v-model="dataForm.userDisplay" placeholder="请输入用户名"></el-input> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
<el-col :span="12"> |
|
|
|
<el-form-item prop="site"> |
|
|
|
<span slot="label" @click="getBaseList(93)" style="cursor: pointer; color: #409eff;">工厂</span> |
|
|
|
<el-input v-model="dataForm.site" placeholder="请选择工厂"></el-input> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
<el-row :gutter="16"> |
|
|
|
<el-col :span="12"> |
|
|
|
<el-form-item :label="buttons.password||'密码'" prop="password" :class="{ 'is-required': !dataForm.id }"> |
|
|
|
<el-input v-model="dataForm.password" type="password" placeholder="请输入密码" show-password></el-input> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
<el-col :span="12"> |
|
|
|
<el-form-item :label="buttons.comfirmPassword||'确认密码'" prop="comfirmPassword" :class="{ 'is-required': !dataForm.id }"> |
|
|
|
<el-input v-model="dataForm.comfirmPassword" type="password" placeholder="请确认密码" show-password></el-input> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 联系方式 --> |
|
|
|
<div class="form-section"> |
|
|
|
<div class="section-title">联系方式</div> |
|
|
|
<el-row :gutter="16"> |
|
|
|
<el-col :span="12"> |
|
|
|
<el-form-item label="邮箱" prop="email"> |
|
|
|
<el-input v-model="dataForm.email" placeholder="请输入邮箱"></el-input> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
<el-col :span="12"> |
|
|
|
<el-form-item label="手机号" prop="mobile"> |
|
|
|
<el-input v-model="dataForm.mobile" placeholder="请输入手机号"></el-input> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 角色配置 --> |
|
|
|
<div class="form-section"> |
|
|
|
<div class="section-title">角色配置</div> |
|
|
|
<el-form-item label="角色" prop="roleIdList" class="role-form-item"> |
|
|
|
<div class="role-list-container"> |
|
|
|
<el-checkbox-group v-model="dataForm.roleIdList"> |
|
|
|
<el-checkbox |
|
|
|
v-for="role in roleList" |
|
|
|
:key="role.roleId" |
|
|
|
:label="role.roleId" |
|
|
|
class="role-checkbox"> |
|
|
|
{{role.roleName}} |
|
|
|
</el-checkbox> |
|
|
|
</el-checkbox-group> |
|
|
|
</div> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
<el-form> |
|
|
|
<el-form-item label="状态" size="mini" prop="status"> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 状态设置 --> |
|
|
|
<div class="form-section"> |
|
|
|
<div class="section-title">状态设置</div> |
|
|
|
<el-form-item label="状态" prop="status"> |
|
|
|
<el-radio-group v-model="dataForm.status"> |
|
|
|
<el-radio :label="0">{{buttons.disable||'禁用'}}</el-radio> |
|
|
|
<el-radio :label="1">{{buttons.normal||'正常'}}</el-radio> |
|
|
|
<el-radio :label="1">正常</el-radio> |
|
|
|
<el-radio :label="0">禁用</el-radio> |
|
|
|
</el-radio-group> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
</div> |
|
|
|
</el-form> |
|
|
|
<span slot="footer" class="dialog-footer"> |
|
|
|
<el-button type="primary" @click="dataFormSubmit()">{{buttons.submit||'确定'}}</el-button> |
|
|
|
<el-button @click="visible = false">{{buttons.close||'取消'}}</el-button> |
|
|
|
<el-button @click="visible = false">取消</el-button> |
|
|
|
<el-button type="primary" @click="dataFormSubmit()">确定</el-button> |
|
|
|
</span> |
|
|
|
</el-dialog> |
|
|
|
|
|
|
|
<Chooselist ref="baseList" @getBaseData="getBaseData"></Chooselist> |
|
|
|
<Chooselist ref="baseList" @getBaseData="getBaseData"></Chooselist> |
|
|
|
</div> |
|
|
|
|
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
@ -87,6 +127,7 @@ export default { |
|
|
|
dataForm: { |
|
|
|
id: 0, |
|
|
|
userName: '', |
|
|
|
userNo: '', |
|
|
|
password: '', |
|
|
|
comfirmPassword: '', |
|
|
|
languageDefault: '', |
|
|
|
@ -102,6 +143,7 @@ export default { |
|
|
|
add: '添加', |
|
|
|
edit: '编辑', |
|
|
|
username: '用户账号', |
|
|
|
userNo: '人员编码', |
|
|
|
userDisplay: '用户名', |
|
|
|
email: '邮箱', |
|
|
|
mobile: '手机号', |
|
|
|
@ -182,13 +224,14 @@ export default { |
|
|
|
}).then(({data}) => { |
|
|
|
if (data && data.code === 0) { |
|
|
|
this.dataForm.userName = data.user.username |
|
|
|
this.dataForm.userNo = data.user.userNo || '' |
|
|
|
this.dataForm.salt = data.user.salt |
|
|
|
this.dataForm.email = data.user.email |
|
|
|
this.dataForm.mobile = data.user.mobile |
|
|
|
this.dataForm.roleIdList = data.user.roleIdList |
|
|
|
this.dataForm.status = data.user.status |
|
|
|
this.dataForm.languageDefault = data.user.languageDefault |
|
|
|
this.dataForm.site = data.user.site.toString() |
|
|
|
this.dataForm.site = data.user.site ? data.user.site.toString() : '' |
|
|
|
this.dataForm.userDisplay = data.user.userDisplay |
|
|
|
} |
|
|
|
}) |
|
|
|
@ -206,6 +249,7 @@ export default { |
|
|
|
data: this.$http.adornData({ |
|
|
|
'userId': this.dataForm.id || undefined, |
|
|
|
'username': this.dataForm.userName, |
|
|
|
'userNo': this.dataForm.userNo, |
|
|
|
'password': this.dataForm.password, |
|
|
|
'salt': this.dataForm.salt, |
|
|
|
'email': this.dataForm.email, |
|
|
|
@ -232,6 +276,7 @@ export default { |
|
|
|
closeDialog () { |
|
|
|
this.dataForm.id = 0 |
|
|
|
this.dataForm.userName = '' |
|
|
|
this.dataForm.userNo = '' |
|
|
|
this.dataForm.password = '' |
|
|
|
this.dataForm.comfirmPassword = '' |
|
|
|
this.dataForm.email = '' |
|
|
|
@ -248,5 +293,145 @@ export default { |
|
|
|
} |
|
|
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
|
|
/* 对话框样式 */ |
|
|
|
/deep/ .user-dialog { |
|
|
|
border-radius: 4px; |
|
|
|
} |
|
|
|
|
|
|
|
/deep/ .user-dialog .el-dialog__header { |
|
|
|
padding: 15px 20px; |
|
|
|
border-bottom: 1px solid #e8e8e8; |
|
|
|
background: #fafafa; |
|
|
|
} |
|
|
|
|
|
|
|
/deep/ .user-dialog .el-dialog__title { |
|
|
|
font-size: 16px; |
|
|
|
font-weight: 500; |
|
|
|
color: #333; |
|
|
|
} |
|
|
|
|
|
|
|
/deep/ .user-dialog .el-dialog__body { |
|
|
|
padding: 20px; |
|
|
|
max-height: 65vh; |
|
|
|
overflow-y: auto; |
|
|
|
} |
|
|
|
|
|
|
|
/deep/ .user-dialog .el-dialog__footer { |
|
|
|
padding: 12px 20px; |
|
|
|
border-top: 1px solid #e8e8e8; |
|
|
|
background: #fafafa; |
|
|
|
} |
|
|
|
|
|
|
|
/* 表单区域样式 */ |
|
|
|
.form-section { |
|
|
|
margin-bottom: 20px; |
|
|
|
padding: 15px; |
|
|
|
background: #fff; |
|
|
|
border: 1px solid #e8e8e8; |
|
|
|
border-radius: 4px; |
|
|
|
} |
|
|
|
|
|
|
|
.form-section:last-child { |
|
|
|
margin-bottom: 0; |
|
|
|
} |
|
|
|
|
|
|
|
.section-title { |
|
|
|
font-size: 14px; |
|
|
|
font-weight: 500; |
|
|
|
color: #333; |
|
|
|
margin-bottom: 15px; |
|
|
|
padding-bottom: 10px; |
|
|
|
border-bottom: 1px solid #f0f0f0; |
|
|
|
} |
|
|
|
|
|
|
|
/* 表单项样式 */ |
|
|
|
/deep/ .el-form-item { |
|
|
|
margin-bottom: 15px; |
|
|
|
} |
|
|
|
|
|
|
|
/deep/ .el-form-item:last-child { |
|
|
|
margin-bottom: 0; |
|
|
|
} |
|
|
|
|
|
|
|
/deep/ .el-form-item__label { |
|
|
|
color: #666; |
|
|
|
font-weight: normal; |
|
|
|
} |
|
|
|
|
|
|
|
/deep/ .el-input__inner { |
|
|
|
border-radius: 4px; |
|
|
|
} |
|
|
|
|
|
|
|
/deep/ .el-input__inner:focus { |
|
|
|
border-color: #409eff; |
|
|
|
} |
|
|
|
|
|
|
|
/* 角色区域样式 */ |
|
|
|
.role-form-item { |
|
|
|
margin-bottom: 0 !important; |
|
|
|
} |
|
|
|
|
|
|
|
.role-list-container { |
|
|
|
max-height: 180px; |
|
|
|
overflow-y: auto; |
|
|
|
padding: 10px; |
|
|
|
border: 1px solid #e8e8e8; |
|
|
|
border-radius: 4px; |
|
|
|
background: #fafafa; |
|
|
|
} |
|
|
|
|
|
|
|
.role-checkbox { |
|
|
|
display: inline-block; |
|
|
|
width: calc(50% - 10px); |
|
|
|
margin-right: 10px; |
|
|
|
margin-bottom: 8px; |
|
|
|
padding: 6px 10px; |
|
|
|
background: #fff; |
|
|
|
border: 1px solid #e8e8e8; |
|
|
|
border-radius: 4px; |
|
|
|
transition: all 0.2s; |
|
|
|
} |
|
|
|
|
|
|
|
.role-checkbox:hover { |
|
|
|
border-color: #409eff; |
|
|
|
} |
|
|
|
|
|
|
|
/deep/ .role-checkbox.is-checked { |
|
|
|
border-color: #409eff; |
|
|
|
background: #f0f7ff; |
|
|
|
} |
|
|
|
|
|
|
|
/deep/ .role-checkbox .el-checkbox__label { |
|
|
|
font-size: 13px; |
|
|
|
color: #333; |
|
|
|
padding-left: 8px; |
|
|
|
} |
|
|
|
|
|
|
|
/* 滚动条样式 */ |
|
|
|
.role-list-container::-webkit-scrollbar { |
|
|
|
width: 6px; |
|
|
|
} |
|
|
|
|
|
|
|
.role-list-container::-webkit-scrollbar-track { |
|
|
|
background: #f0f0f0; |
|
|
|
border-radius: 3px; |
|
|
|
} |
|
|
|
|
|
|
|
.role-list-container::-webkit-scrollbar-thumb { |
|
|
|
background: #c0c0c0; |
|
|
|
border-radius: 3px; |
|
|
|
} |
|
|
|
|
|
|
|
.role-list-container::-webkit-scrollbar-thumb:hover { |
|
|
|
background: #a0a0a0; |
|
|
|
} |
|
|
|
|
|
|
|
/* 底部按钮样式 */ |
|
|
|
.dialog-footer { |
|
|
|
text-align: right; |
|
|
|
} |
|
|
|
|
|
|
|
.dialog-footer .el-button { |
|
|
|
min-width: 80px; |
|
|
|
} |
|
|
|
</style> |