代码导入
This commit is contained in:
117
src/views/system/user/authRole.vue
Normal file
117
src/views/system/user/authRole.vue
Normal file
@@ -0,0 +1,117 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<h4 class="form-header h4">基本信息</h4>
|
||||
<el-form ref="form" :model="form" label-width="80px">
|
||||
<el-row>
|
||||
<el-col :span="8" :offset="2">
|
||||
<el-form-item label="用户昵称" prop="nickName">
|
||||
<el-input v-model="form.nickName" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8" :offset="2">
|
||||
<el-form-item label="登录账号" prop="userName">
|
||||
<el-input v-model="form.userName" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
|
||||
<h4 class="form-header h4">角色信息</h4>
|
||||
<el-table v-loading="loading" :row-key="getRowKey" @row-click="clickRow" ref="table" @selection-change="handleSelectionChange" :data="roles.slice((pageNum-1)*pageSize,pageNum*pageSize)">
|
||||
<el-table-column label="序号" type="index" align="center">
|
||||
<template slot-scope="scope">
|
||||
<span>{{(pageNum - 1) * pageSize + scope.$index + 1}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column type="selection" :reserve-selection="true" width="55"></el-table-column>
|
||||
<el-table-column label="角色编号" align="center" prop="roleId" />
|
||||
<el-table-column label="角色名称" align="center" prop="roleName" />
|
||||
<el-table-column label="权限字符" align="center" prop="roleKey" />
|
||||
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.createTime) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" />
|
||||
|
||||
<el-form label-width="100px">
|
||||
<el-form-item style="text-align: center;margin-left:-120px;margin-top:30px;">
|
||||
<el-button type="primary" @click="submitForm()">提交</el-button>
|
||||
<el-button @click="close()">返回</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAuthRole, updateAuthRole } from "@/api/system/user";
|
||||
|
||||
export default {
|
||||
name: "AuthRole",
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 分页信息
|
||||
total: 0,
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
// 选中角色编号
|
||||
roleIds:[],
|
||||
// 角色信息
|
||||
roles: [],
|
||||
// 用户信息
|
||||
form: {}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
const userId = this.$route.params && this.$route.params.userId;
|
||||
if (userId) {
|
||||
this.loading = true;
|
||||
getAuthRole(userId).then((response) => {
|
||||
this.form = response.user;
|
||||
this.roles = response.roles;
|
||||
this.total = this.roles.length;
|
||||
this.$nextTick(() => {
|
||||
this.roles.forEach((row) => {
|
||||
if (row.flag) {
|
||||
this.$refs.table.toggleRowSelection(row);
|
||||
}
|
||||
});
|
||||
});
|
||||
this.loading = false;
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/** 单击选中行数据 */
|
||||
clickRow(row) {
|
||||
this.$refs.table.toggleRowSelection(row);
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.roleIds = selection.map((item) => item.roleId);
|
||||
},
|
||||
// 保存选中的数据编号
|
||||
getRowKey(row) {
|
||||
return row.roleId;
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
const userId = this.form.userId;
|
||||
const roleIds = this.roleIds.join(",");
|
||||
updateAuthRole({ userId: userId, roleIds: roleIds }).then((response) => {
|
||||
this.$modal.msgSuccess("授权成功");
|
||||
this.close();
|
||||
});
|
||||
},
|
||||
/** 关闭按钮 */
|
||||
close() {
|
||||
const obj = { path: "/system/user" };
|
||||
this.$tab.closeOpenPage(obj);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
561
src/views/system/user/index.vue
Normal file
561
src/views/system/user/index.vue
Normal file
@@ -0,0 +1,561 @@
|
||||
<template>
|
||||
<div class="system-user">
|
||||
<el-row :gutter="10">
|
||||
<!--机构数据-->
|
||||
<el-col :span="4" :xs="24">
|
||||
<el-card>
|
||||
<div class="tree-wrap">
|
||||
<el-input v-model="deptName" :placeholder="$t('user.index.098976-0')" clearable size="small" prefix-icon="el-icon-search" style="margin-bottom: 20px; margin-right: 10px" />
|
||||
<el-tree
|
||||
:data="deptOptions"
|
||||
:props="defaultProps"
|
||||
:expand-on-click-node="false"
|
||||
:filter-node-method="filterNode"
|
||||
ref="tree"
|
||||
node-key="id"
|
||||
default-expand-all
|
||||
highlight-current
|
||||
@node-click="handleNodeClick"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<!--用户数据-->
|
||||
<el-col :span="20" :xs="24">
|
||||
<el-card v-show="showSearch" style="margin-bottom: 10px">
|
||||
<el-form @submit.native.prevent :model="queryParams" ref="queryForm" :inline="true" size="mini" label-width="68px" style="margin-bottom: -18px">
|
||||
<el-form-item :label="$t('user.index.098976-1')" prop="userName">
|
||||
<el-input v-model="queryParams.userName" :placeholder="$t('user.index.098976-2')" clearable @keyup.enter.native="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('user.index.098976-3')" prop="phonenumber">
|
||||
<el-input v-model="queryParams.phonenumber" :placeholder="$t('user.index.098976-4')" clearable @keyup.enter.native="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('user.index.098976-5')" prop="status">
|
||||
<el-select v-model="queryParams.status" :placeholder="$t('user.index.098976-6')" clearable>
|
||||
<el-option v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item style="float: right">
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">{{ $t('search') }}</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t('reset') }}</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
<el-card>
|
||||
<el-row :gutter="10" style="margin-bottom: 15px">
|
||||
<el-col :span="1.5">
|
||||
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['system:user:add']">{{ $t('user.index.098976-7') }}</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="info" plain icon="el-icon-upload2" size="mini" @click="handleImport" v-hasPermi="['system:user:import']">{{ $t('import') }}</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['system:user:export']">{{ $t('export') }}</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5" style="line-height: 28px">
|
||||
<el-checkbox v-model="queryParams.showChild" style="margin: 0px 10px" @change="handleQuery">{{ $t('user.index.098976-8') }}</el-checkbox>
|
||||
<el-tooltip :content="$t('user.index.098976-9')" placement="top"><i class="el-icon-question"></i></el-tooltip>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<div class="table-wrap">
|
||||
<el-table v-loading="loading" :data="userList" :border="false">
|
||||
<el-table-column :label="$t('user.index.098976-10')" align="left" key="userName" prop="userName" v-if="columns[1].visible" :show-overflow-tooltip="true" min-width="200" />
|
||||
<el-table-column :label="$t('user.index.098976-11')" align="left" key="nickName" prop="nickName" v-if="columns[2].visible" :show-overflow-tooltip="true" min-width="200" />
|
||||
<el-table-column :label="$t('user.index.098976-12')" align="left" key="deptName" prop="dept.deptName" v-if="columns[3].visible" :show-overflow-tooltip="true" min-width="200" />
|
||||
<el-table-column :label="$t('user.index.098976-13')" align="left" key="phonenumber" prop="phonenumber" v-if="columns[4].visible" width="120" />
|
||||
<el-table-column :label="$t('status')" align="center" key="status" v-if="columns[5].visible" width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-switch v-model="scope.row.status" active-value="0" inactive-value="1" @change="handleStatusChange(scope.row)"></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="$t('creatTime')" align="center" prop="createTime" v-if="columns[6].visible" width="160">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.createTime) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column fixed="right" :label="$t('opation')" align="center" class-name="small-padding fixed-width" width="280">
|
||||
<template slot-scope="scope" v-if="scope.row.userId !== 1">
|
||||
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:user:edit']">{{ $t('update') }}</el-button>
|
||||
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['system:user:remove']" :disabled="scope.row.manager === true">
|
||||
{{ $t('del') }}
|
||||
</el-button>
|
||||
<el-button size="mini" type="text" icon="el-icon-key" v-hasPermi="['system:user:resetPwd']" @click="handleResetPwd(scope.row)">{{ $t('user.index.098976-15') }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<pagination style="margin-bottom: 20px" v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 添加或修改用户配置对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
|
||||
<div style="margin-top: -55px">
|
||||
<el-divider style="margin-top: -30px"></el-divider>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item :label="$t('user.index.098976-11')" prop="nickName">
|
||||
<el-input v-model="form.nickName" :placeholder="$t('user.index.098976-16')" maxlength="30" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('user.index.098976-12')" prop="deptId">
|
||||
<treeselect
|
||||
v-model="form.deptId"
|
||||
:options="deptOptions"
|
||||
:show-count="true"
|
||||
:placeholder="$t('user.index.098976-17')"
|
||||
:disabled="(this.isEdit == true && form.userId != null) || (this.idEditDept == null && form.userId != null)"
|
||||
@select="(node) => getRoleList(node)"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('user.index.098976-3')" prop="phonenumber">
|
||||
<el-input v-model="form.phonenumber" :placeholder="$t('user.index.098976-18')" maxlength="11" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('user.index.098976-19')" prop="email">
|
||||
<el-input v-model="form.email" :placeholder="$t('user.index.098976-20')" maxlength="50" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.userId == null" :label="$t('user.index.098976-10')" prop="userName">
|
||||
<el-input v-model="form.userName" :placeholder="$t('user.index.098976-2')" maxlength="30" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.userId == null" :label="$t('user.index.098976-21')" prop="password">
|
||||
<el-input v-model="form.password" :placeholder="$t('user.index.098976-22')" type="password" maxlength="20" show-password />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('user.index.098976-5')" prop="status">
|
||||
<el-radio-group v-model="form.status" :disabled="this.isEdit == true && form.userId != null">
|
||||
<el-radio v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('user.index.098976-23')" prop="roleIds">
|
||||
<el-select v-model="form.roleIds" multiple :placeholder="$t('user.index.098976-24')" style="width: 100%" :disabled="this.isEdit == true && form.userId != null">
|
||||
<el-option v-for="item in roleOptions" :key="item.roleId" :label="item.roleName" :value="item.roleId" :disabled="item.status == 1"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('remark')">
|
||||
<el-input v-model="form.remark" type="textarea" :placeholder="$t('plzInput')"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">{{ $t('confirm') }}</el-button>
|
||||
<el-button @click="cancel">{{ $t('cancel') }}</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 用户导入对话框 -->
|
||||
<el-dialog :title="upload.title" :visible.sync="upload.open" width="500px" append-to-body>
|
||||
<div style="margin-top: -55px">
|
||||
<el-divider style="margin-top: -30px"></el-divider>
|
||||
<el-upload
|
||||
ref="upload"
|
||||
:limit="1"
|
||||
accept=".xlsx, .xls"
|
||||
:headers="upload.headers"
|
||||
:action="upload.url + '?updateSupport=' + upload.updateSupport"
|
||||
:disabled="upload.isUploading"
|
||||
:on-progress="handleFileUploadProgress"
|
||||
:on-success="handleFileSuccess"
|
||||
:auto-upload="false"
|
||||
drag
|
||||
>
|
||||
<i class="el-icon-upload"></i>
|
||||
<div class="el-upload__text">
|
||||
{{ $t('dragFileTips') }}
|
||||
<em>{{ $t('clickFileTips') }}</em>
|
||||
</div>
|
||||
<div class="el-upload__tip" slot="tip">
|
||||
<div class="el-upload__tip" slot="tip" style="margin-top: 10px">
|
||||
<el-checkbox v-model="upload.updateSupport" />
|
||||
{{ $t('user.index.098976-25') }}
|
||||
</div>
|
||||
<div style="margin-top: 10px">
|
||||
<span>{{ $t('user.index.098976-26') }}</span>
|
||||
<el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate">{{ $t('user.index.098976-27') }}</el-link>
|
||||
</div>
|
||||
</div>
|
||||
</el-upload>
|
||||
</div>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitFileForm">{{ $t('confirm') }}</el-button>
|
||||
<el-button @click="upload.open = false">{{ $t('cancel') }}</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listUser, getUser, delUser, addUser, updateUser, resetUserPwd, changeUserStatus, deptsTreeSelect, getRole } from '@/api/system/user';
|
||||
import { getToken } from '@/utils/auth';
|
||||
import Treeselect from '@riophae/vue-treeselect';
|
||||
import '@riophae/vue-treeselect/dist/vue-treeselect.css';
|
||||
|
||||
export default {
|
||||
name: 'User',
|
||||
dicts: ['sys_normal_disable'],
|
||||
components: { Treeselect },
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 用户表格数据
|
||||
userList: null,
|
||||
// 弹出层标题
|
||||
title: '',
|
||||
// 机构树选项
|
||||
deptOptions: undefined,
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 归属机构
|
||||
deptName: undefined,
|
||||
// 默认密码
|
||||
initPassword: undefined,
|
||||
//判断是否为机构管理员
|
||||
isEdit: true,
|
||||
//归属机构是否可选
|
||||
idEditDept: null,
|
||||
// 日期范围
|
||||
dateRange: [],
|
||||
// 角色选项
|
||||
roleOptions: [],
|
||||
// 表单参数
|
||||
form: {},
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'label',
|
||||
},
|
||||
// 用户导入参数
|
||||
upload: {
|
||||
// 是否显示弹出层（用户导入）
|
||||
open: false,
|
||||
// 弹出层标题（用户导入）
|
||||
title: '',
|
||||
// 是否禁用上传
|
||||
isUploading: false,
|
||||
// 是否更新已经存在的用户数据
|
||||
updateSupport: 0,
|
||||
// 设置上传的请求头部
|
||||
headers: { Authorization: 'Bearer ' + getToken() },
|
||||
// 上传的地址
|
||||
url: process.env.VUE_APP_BASE_API + '/system/user/importData',
|
||||
},
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
userName: undefined,
|
||||
phonenumber: undefined,
|
||||
status: undefined,
|
||||
deptId: undefined,
|
||||
showChild: true,
|
||||
},
|
||||
//用户类型
|
||||
options: [
|
||||
{
|
||||
value: true,
|
||||
label: this.$t('user.index.098976-28'),
|
||||
},
|
||||
{
|
||||
value: false,
|
||||
label: this.$t('user.index.098976-29'),
|
||||
},
|
||||
],
|
||||
|
||||
// 列信息
|
||||
columns: [
|
||||
{ key: 0, label: this.$t('user.index.098976-30'), visible: true },
|
||||
{ key: 1, label: this.$t('user.index.098976-10'), visible: true },
|
||||
{ key: 2, label: this.$t('user.index.098976-11'), visible: true },
|
||||
{ key: 3, label: this.$t('user.index.098976-29'), visible: true },
|
||||
{ key: 4, label: this.$t('user.index.098976-3'), visible: true },
|
||||
{ key: 5, label: this.$t('user.index.098976-5'), visible: true },
|
||||
{ key: 6, label: this.$t('creatTime'), visible: true },
|
||||
],
|
||||
// 表单校验
|
||||
rules: {
|
||||
userName: [
|
||||
{ required: true, message: this.$t('user.index.098976-31'), trigger: 'blur' },
|
||||
{ min: 2, max: 20, message: this.$t('user.index.098976-32'), trigger: 'blur' },
|
||||
],
|
||||
nickName: [{ required: true, message: this.$t('user.index.098976-33'), trigger: 'blur' }],
|
||||
password: [
|
||||
{ required: true, message: this.$t('user.index.098976-34'), trigger: 'blur' },
|
||||
{ min: 5, max: 20, message: this.$t('user.index.098976-35'), trigger: 'blur' },
|
||||
],
|
||||
roleIds: [{ required: true, message: this.$t('user.index.098976-36'), trigger: 'change' }],
|
||||
status: [{ required: true }],
|
||||
email: [
|
||||
{
|
||||
type: 'email',
|
||||
message: this.$t('user.index.098976-37'),
|
||||
trigger: ['blur', 'change'],
|
||||
},
|
||||
],
|
||||
phonenumber: [
|
||||
{ required: true, message: this.$t('user.index.098976-38'), trigger: 'blur' },
|
||||
{
|
||||
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
|
||||
message: this.$t('user.index.098976-39'),
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
// 根据名称筛选机构树
|
||||
deptName(val) {
|
||||
this.$refs.tree.filter(val);
|
||||
},
|
||||
},
|
||||
created() {
|
||||
const deptId = this.$route.params && this.$route.params.deptId;
|
||||
if (deptId) {
|
||||
this.queryParams.deptId = deptId;
|
||||
this.getList();
|
||||
} else {
|
||||
this.getList();
|
||||
}
|
||||
this.getDeptTree();
|
||||
},
|
||||
methods: {
|
||||
/** 查询用户列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
this.form.deptId = this.queryParams.deptId;
|
||||
listUser(this.addDateRange(this.queryParams, this.dateRange)).then((response) => {
|
||||
this.userList = response.rows;
|
||||
this.total = response.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
/** 查询机构下拉树结构 */
|
||||
getDeptTree() {
|
||||
deptsTreeSelect().then((response) => {
|
||||
this.deptOptions = response.data;
|
||||
});
|
||||
},
|
||||
// 筛选节点
|
||||
filterNode(value, data) {
|
||||
if (!value) return true;
|
||||
return data.label.indexOf(value) !== -1;
|
||||
},
|
||||
// 节点单击事件
|
||||
handleNodeClick(data) {
|
||||
this.queryParams.deptId = data.id;
|
||||
this.handleQuery();
|
||||
},
|
||||
// 用户状态修改
|
||||
handleStatusChange(row) {
|
||||
let text = row.status === '0' ? this.$t('simulate.index.111543-54') : this.$t('simulate.index.111543-55');
|
||||
this.$modal
|
||||
.confirm(this.$t('user.index.098976-40') + text + '""' + row.userName + this.$t('user.index.098976-41'))
|
||||
.then(function () {
|
||||
return changeUserStatus(row.userId, row.status);
|
||||
})
|
||||
.then(() => {
|
||||
this.$modal.msgSuccess(text + this.$t('success'));
|
||||
})
|
||||
.catch(function () {
|
||||
row.status = row.status === '0' ? '1' : '0';
|
||||
});
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
userId: null,
|
||||
deptId: undefined,
|
||||
userName: undefined,
|
||||
nickName: undefined,
|
||||
password: undefined,
|
||||
phonenumber: undefined,
|
||||
email: undefined,
|
||||
sex: undefined,
|
||||
status: '0',
|
||||
remark: undefined,
|
||||
postIds: [],
|
||||
roleIds: [],
|
||||
};
|
||||
this.resetForm('form');
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.dateRange = [];
|
||||
this.resetForm('queryForm');
|
||||
this.queryParams.deptId = undefined;
|
||||
this.$refs.tree.setCurrentKey(null);
|
||||
this.handleQuery();
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset();
|
||||
this.open = true;
|
||||
this.title = '添加用户';
|
||||
this.form.deptId = this.queryParams.deptId;
|
||||
if (this.form.deptId != undefined) {
|
||||
getRole(this.form.deptId).then((response) => {
|
||||
this.roleOptions = response.roles;
|
||||
});
|
||||
}
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset();
|
||||
const userId = row.userId || this.ids;
|
||||
getUser(userId).then((response) => {
|
||||
this.isEdit = row.manager;
|
||||
this.idEditDept = row.deptId;
|
||||
this.form = response.data;
|
||||
this.roleOptions = response.roles;
|
||||
this.$set(this.form, 'postIds', response.postIds);
|
||||
this.$set(this.form, 'roleIds', response.roleIds);
|
||||
this.open = true;
|
||||
this.title = this.$t('user.index.098976-43');
|
||||
this.form.password = '';
|
||||
});
|
||||
},
|
||||
// 根据机构查询角色列表
|
||||
getRoleList(node) {
|
||||
this.form.deptId = node.id;
|
||||
if (this.form.deptId != undefined && this.form.deptId != null) {
|
||||
if (this.isEdit == false && this.form.userId != 0) {
|
||||
this.form.roleIds = [];
|
||||
}
|
||||
const deptId = this.form.deptId;
|
||||
getRole(deptId).then((response) => {
|
||||
this.roleOptions = response.roles;
|
||||
});
|
||||
}
|
||||
},
|
||||
/** 重置密码按钮操作 */
|
||||
handleResetPwd(row) {
|
||||
this.$prompt(this.$t('user.index.098976-44') + row.userName + this.$t('user.index.098976-45'), this.$t('user.index.098976-46'), {
|
||||
confirmButtonText: this.$t('confirm'),
|
||||
cancelButtonText: this.$t('cancel'),
|
||||
closeOnClickModal: false,
|
||||
inputPattern: /^.{5,20}$/,
|
||||
inputErrorMessage: this.$t('user.index.098976-35'),
|
||||
})
|
||||
.then(({ value }) => {
|
||||
resetUserPwd(row.userId, value).then((response) => {
|
||||
this.$modal.msgSuccess(this.$t('user.index.098976-47') + value);
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
/** 分配角色操作 */
|
||||
// handleAuthRole: function (row) {
|
||||
// const userId = row.userId;
|
||||
// this.$router.push("/system/user-auth/role/" + userId);
|
||||
// },
|
||||
/** 提交按钮 */
|
||||
submitForm: function () {
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.form.userId != undefined) {
|
||||
updateUser(this.form).then((response) => {
|
||||
this.$modal.msgSuccess(this.$t('updateSuccess'));
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
} else {
|
||||
addUser(this.form).then((response) => {
|
||||
this.$modal.msgSuccess(this.$t('addSuccess'));
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const userIds = row.userId || this.ids;
|
||||
this.$modal
|
||||
.confirm(this.$t('user.index.098976-48', [userIds]))
|
||||
.then(function () {
|
||||
return delUser(userIds);
|
||||
})
|
||||
.then(() => {
|
||||
this.getList();
|
||||
this.$modal.msgSuccess(this.$t('delSuccess'));
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download(
|
||||
'system/user/export',
|
||||
{
|
||||
...this.queryParams,
|
||||
},
|
||||
`user_${new Date().getTime()}.xlsx`
|
||||
);
|
||||
},
|
||||
/** 导入按钮操作 */
|
||||
handleImport() {
|
||||
this.upload.title = this.$t('user.index.098976-49');
|
||||
this.upload.open = true;
|
||||
},
|
||||
/** 下载模板操作 */
|
||||
importTemplate() {
|
||||
this.download('system/user/importTemplate', {}, `user_template_${new Date().getTime()}.xlsx`);
|
||||
},
|
||||
// 文件上传中处理
|
||||
handleFileUploadProgress(event, file, fileList) {
|
||||
this.upload.isUploading = true;
|
||||
},
|
||||
// 文件上传成功处理
|
||||
handleFileSuccess(response, file, fileList) {
|
||||
this.upload.open = false;
|
||||
this.upload.isUploading = false;
|
||||
this.$refs.upload.clearFiles();
|
||||
this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + '</div>', '导入结果', { dangerouslyUseHTMLString: true });
|
||||
this.getList();
|
||||
},
|
||||
// 提交上传文件
|
||||
submitFileForm() {
|
||||
this.$refs.upload.submit();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.system-user {
|
||||
padding: 20px;
|
||||
|
||||
.tree-wrap {
|
||||
height: 730px;
|
||||
overflow-x: auto;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.table-wrap {
|
||||
height: 545px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
73
src/views/system/user/profile/baseInfo.vue
Normal file
73
src/views/system/user/profile/baseInfo.vue
Normal file
@@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<el-form ref="form" :model="user" :rules="rules" label-width="80px">
|
||||
<el-form-item :label="$t('user.index.098976-11')" prop="nickName">
|
||||
<el-input style="width: 60%" v-model="user.nickName" maxlength="30" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('user.index.098976-13')" prop="phonenumber">
|
||||
<el-input style="width: 60%" v-model="user.phonenumber" maxlength="11" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('user.index.098976-19')" prop="email">
|
||||
<el-input style="width: 60%" v-model="user.email" maxlength="50" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('user.userInfo.560923-1')">
|
||||
<el-radio-group v-model="user.sex">
|
||||
<el-radio label="0">{{ $t('user.userInfo.560923-2') }}</el-radio>
|
||||
<el-radio label="1">{{ $t('user.userInfo.560923-3') }}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" size="mini" @click="submit">{{ $t('save') }}</el-button>
|
||||
<el-button type="danger" size="mini" @click="close">{{ $t('close') }}</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { updateUserProfile } from '@/api/system/user';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
user: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 表单校验
|
||||
rules: {
|
||||
nickName: [{ required: true, message: this.$t('user.index.098976-33'), trigger: 'blur' }],
|
||||
email: [
|
||||
{ required: true, message: this.$t('user.userInfo.560923-0'), trigger: 'blur' },
|
||||
{
|
||||
type: 'email',
|
||||
message: this.$t('user.index.098976-37'),
|
||||
trigger: ['blur', 'change'],
|
||||
},
|
||||
],
|
||||
phonenumber: [
|
||||
{ required: true, message: this.$t('user.index.098976-38'), trigger: 'blur' },
|
||||
{
|
||||
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
|
||||
message: this.$t('user.index.098976-39'),
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
submit() {
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
updateUserProfile(this.user).then((response) => {
|
||||
this.$modal.msgSuccess(this.$t('updateSuccess'));
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
close() {
|
||||
this.$tab.closePage();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
186
src/views/system/user/profile/index.vue
Normal file
186
src/views/system/user/profile/index.vue
Normal file
@@ -0,0 +1,186 @@
|
||||
<template>
|
||||
<div class="user-profile">
|
||||
<el-card :body-style="{ padding: '0px' }">
|
||||
<div class="card-body">
|
||||
<div class="left-wrap">
|
||||
<userAvatar :user="user" />
|
||||
<div class="user-name">{{ user.userName }}</div>
|
||||
<ul class="ul-wrap">
|
||||
<li :class="{ 'li-wrap': true, 'li-active': tabIndex === 0 }" @click="handleTabClick(0)">
|
||||
<i class="el-icon-user icon"></i>
|
||||
<span class="title">个人信息</span>
|
||||
</li>
|
||||
<li :class="{ 'li-wrap': true, 'li-active': tabIndex === 1 }" @click="handleTabClick(1)">
|
||||
<i class="el-icon-postcard icon"></i>
|
||||
<span class="title">基本资料</span>
|
||||
</li>
|
||||
<li :class="{ 'li-wrap': true, 'li-active': tabIndex === 2 }" @click="handleTabClick(2)">
|
||||
<svg-icon icon-class="password" class="icon" />
|
||||
<span class="title">修改密码</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="right-wrap">
|
||||
<div class="body-wrap" v-show="tabIndex === 0">
|
||||
<div class="header">个人信息</div>
|
||||
<div class="content">
|
||||
<userInfo :user="user" :postGroup="postGroup" :roleGroup="roleGroup" :wxbind="wxbind" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="body-wrap" v-show="tabIndex === 1">
|
||||
<div class="header">基本资料</div>
|
||||
<div class="content">
|
||||
<baseInfo :user="user" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="body-wrap" v-show="tabIndex === 2">
|
||||
<div class="header">修改密码</div>
|
||||
<div class="content">
|
||||
<resetPwd />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import userAvatar from './userAvatar';
|
||||
import userInfo from './userInfo';
|
||||
import baseInfo from './baseInfo';
|
||||
import resetPwd from './resetPwd';
|
||||
import { getUserProfile } from '@/api/system/user';
|
||||
|
||||
export default {
|
||||
name: 'Profile',
|
||||
components: { userAvatar, userInfo, baseInfo, resetPwd },
|
||||
data() {
|
||||
return {
|
||||
tabIndex: 0,
|
||||
user: {},
|
||||
roleGroup: '',
|
||||
postGroup: '',
|
||||
wxbind: '',
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getUser();
|
||||
},
|
||||
methods: {
|
||||
// tab 切换
|
||||
handleTabClick(index) {
|
||||
this.tabIndex = index;
|
||||
},
|
||||
getUser() {
|
||||
getUserProfile().then((response) => {
|
||||
this.user = response.data;
|
||||
this.wxbind = response.wxBind;
|
||||
this.roleGroup = response.roleGroup;
|
||||
this.postGroup = response.postGroup;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.user-profile {
|
||||
padding: 20px;
|
||||
|
||||
.card-body {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
.left-wrap {
|
||||
width: 230px;
|
||||
height: 730px;
|
||||
background-color: #f7f7f7;
|
||||
text-align: center;
|
||||
padding: 40px 20px;
|
||||
|
||||
.user-name {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.ul-wrap {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
|
||||
.li-wrap {
|
||||
margin-top: 35px;
|
||||
cursor: pointer;
|
||||
padding: 10px 49px;
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
transition: 0.1s;
|
||||
font-size: 14px;
|
||||
|
||||
.icon {
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-left: 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.li-active {
|
||||
border-radius: 20px;
|
||||
color: #fff;
|
||||
background-color: #1890ff;
|
||||
border-color: #1890ff;
|
||||
|
||||
.icon {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right-wrap {
|
||||
flex: 1;
|
||||
|
||||
.body-wrap {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 20px;
|
||||
|
||||
.header {
|
||||
padding: 10px 0;
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
border-bottom: 1px solid #e6ebf5;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 20px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 自定义二维码样式
|
||||
.impowerBox .title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.impowerBox .status.status_browser {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.impowerBox .qrcode {
|
||||
border: none;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.impowerBox .status {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
87
src/views/system/user/profile/resetPwd.vue
Normal file
87
src/views/system/user/profile/resetPwd.vue
Normal file
@@ -0,0 +1,87 @@
|
||||
<template>
|
||||
<el-form ref="form" :model="user" :rules="rules" label-width="80px">
|
||||
<el-form-item :label="$t('user.resetPwd.450986-0')" prop="oldPassword">
|
||||
<el-input style="width: 60%" v-model="user.oldPassword" :placeholder="$t('user.resetPwd.450986-1')"
|
||||
type="password" show-password />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('user.resetPwd.450986-2')" prop="newPassword">
|
||||
<el-input style="width: 60%" v-model="user.newPassword" :placeholder="$t('user.resetPwd.450986-3')"
|
||||
type="password" show-password />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('user.resetPwd.450986-4')" prop="confirmPassword">
|
||||
<el-input style="width: 60%" v-model="user.confirmPassword" :placeholder="$t('user.resetPwd.450986-5')"
|
||||
type="password" show-password />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" size="mini" @click="submit">{{ $t('save') }}</el-button>
|
||||
<el-button type="danger" size="mini" @click="close">{{ $t('close') }}</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { updateUserPwd } from '@/api/system/user';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
const equalToPassword = (rule, value, callback) => {
|
||||
if (this.user.newPassword !== value) {
|
||||
callback(new Error(this.$t('user.resetPwd.450986-6')));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
return {
|
||||
user: {
|
||||
oldPassword: undefined,
|
||||
newPassword: undefined,
|
||||
confirmPassword: undefined,
|
||||
},
|
||||
// 表单校验
|
||||
rules: {
|
||||
oldPassword: [{ required: true, message: this.$t('user.resetPwd.450986-7'), trigger: 'blur' }],
|
||||
newPassword: [
|
||||
{ required: true, message: this.$t('user.resetPwd.450986-8'), trigger: 'blur' },
|
||||
{ min: 6, max: 20, message: this.$t('user.resetPwd.450986-9'), trigger: 'blur' },
|
||||
{
|
||||
trigger: 'blur',
|
||||
validator: (rule, value, callback) => {
|
||||
// 两种及以上
|
||||
var passwordreg = /(?![A-Z]*$)(?![a-z]*$)(?![0-9]*$)(?![^a-zA-Z0-9]*$)/
|
||||
if (!passwordreg.test(value)) {
|
||||
callback(new Error(this.$t('system.dept.780956-30')))
|
||||
}
|
||||
// 四种
|
||||
// var passwordreg = /(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9])/
|
||||
// if (!passwordreg.test(value)) {
|
||||
// callback(new Error('密码必须包含大写字母、小写字母、数字、特殊符号'))
|
||||
// }
|
||||
else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
},
|
||||
],
|
||||
confirmPassword: [
|
||||
{ required: true, message: this.$t('user.resetPwd.450986-10'), trigger: 'blur' },
|
||||
{ required: true, validator: equalToPassword, trigger: 'blur' },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
submit() {
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
updateUserPwd(this.user.oldPassword, this.user.newPassword).then((response) => {
|
||||
this.$modal.msgSuccess(this.$t('updateSuccess'));
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
close() {
|
||||
this.$tab.closePage();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
186
src/views/system/user/profile/userAvatar.vue
Normal file
186
src/views/system/user/profile/userAvatar.vue
Normal file
@@ -0,0 +1,186 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="user-info-head" @click="editCropper()"><img v-bind:src="options.img" :title="$t('user.resetPwd.450986-11')" class="img-circle img-lg" /></div>
|
||||
<el-dialog :title="title" :visible.sync="open" width="800px" append-to-body @opened="modalOpened" @close="closeDialog">
|
||||
<el-row>
|
||||
<el-col :xs="24" :md="12" :style="{ height: '350px' }">
|
||||
<vue-cropper
|
||||
ref="cropper"
|
||||
:img="options.img"
|
||||
:info="true"
|
||||
:autoCrop="options.autoCrop"
|
||||
:autoCropWidth="options.autoCropWidth"
|
||||
:autoCropHeight="options.autoCropHeight"
|
||||
:fixedBox="options.fixedBox"
|
||||
:outputType="options.outputType"
|
||||
@realTime="realTime"
|
||||
v-if="visible"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :xs="24" :md="12" :style="{ height: '350px' }">
|
||||
<div class="avatar-upload-preview">
|
||||
<img :src="previews.url" :style="previews.img" />
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<br />
|
||||
<el-row>
|
||||
<el-col :lg="2" :sm="3" :xs="3">
|
||||
<el-upload action="#" :http-request="requestUpload" :show-file-list="false" :before-upload="beforeUpload">
|
||||
<el-button size="small">
|
||||
{{ $t('select') }}
|
||||
<i class="el-icon-upload el-icon--right"></i>
|
||||
</el-button>
|
||||
</el-upload>
|
||||
</el-col>
|
||||
<el-col :lg="{ span: 1, offset: 2 }" :sm="2" :xs="2">
|
||||
<el-button icon="el-icon-plus" size="small" @click="changeScale(1)"></el-button>
|
||||
</el-col>
|
||||
<el-col :lg="{ span: 1, offset: 1 }" :sm="2" :xs="2">
|
||||
<el-button icon="el-icon-minus" size="small" @click="changeScale(-1)"></el-button>
|
||||
</el-col>
|
||||
<el-col :lg="{ span: 1, offset: 1 }" :sm="2" :xs="2">
|
||||
<el-button icon="el-icon-refresh-left" size="small" @click="rotateLeft()"></el-button>
|
||||
</el-col>
|
||||
<el-col :lg="{ span: 1, offset: 1 }" :sm="2" :xs="2">
|
||||
<el-button icon="el-icon-refresh-right" size="small" @click="rotateRight()"></el-button>
|
||||
</el-col>
|
||||
<el-col :lg="{ span: 2, offset: 6 }" :sm="2" :xs="2">
|
||||
<el-button type="primary" size="small" @click="uploadImg()">{{ $t('submit') }}</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import store from '@/store';
|
||||
import { VueCropper } from 'vue-cropper';
|
||||
import { uploadAvatar } from '@/api/system/user';
|
||||
import { debounce } from '@/utils';
|
||||
|
||||
export default {
|
||||
components: { VueCropper },
|
||||
props: {
|
||||
user: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 是否显示cropper
|
||||
visible: false,
|
||||
// 弹出层标题
|
||||
title: this.$t('user.resetPwd.450986-12'),
|
||||
options: {
|
||||
img: store.getters.avatar, //裁剪图片的地址
|
||||
autoCrop: true, // 是否默认生成截图框
|
||||
autoCropWidth: 200, // 默认生成截图框宽度
|
||||
autoCropHeight: 200, // 默认生成截图框高度
|
||||
fixedBox: true, // 固定截图框大小 不允许改变
|
||||
outputType: 'png', // 默认生成截图为PNG格式
|
||||
},
|
||||
previews: {},
|
||||
resizeHandler: null,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 编辑头像
|
||||
editCropper() {
|
||||
this.open = true;
|
||||
},
|
||||
// 打开弹出层结束时的回调
|
||||
modalOpened() {
|
||||
this.visible = true;
|
||||
if (!this.resizeHandler) {
|
||||
this.resizeHandler = debounce(() => {
|
||||
this.refresh();
|
||||
}, 100);
|
||||
}
|
||||
window.addEventListener('resize', this.resizeHandler);
|
||||
},
|
||||
// 刷新组件
|
||||
refresh() {
|
||||
this.$refs.cropper.refresh();
|
||||
},
|
||||
// 覆盖默认的上传行为
|
||||
requestUpload() {},
|
||||
// 向左旋转
|
||||
rotateLeft() {
|
||||
this.$refs.cropper.rotateLeft();
|
||||
},
|
||||
// 向右旋转
|
||||
rotateRight() {
|
||||
this.$refs.cropper.rotateRight();
|
||||
},
|
||||
// 图片缩放
|
||||
changeScale(num) {
|
||||
num = num || 1;
|
||||
this.$refs.cropper.changeScale(num);
|
||||
},
|
||||
// 上传预处理
|
||||
beforeUpload(file) {
|
||||
if (file.type.indexOf('image/') == -1) {
|
||||
this.$modal.msgError(this.$t('user.resetPwd.450986-13'));
|
||||
} else {
|
||||
const reader = new FileReader();
|
||||
reader.readAsDataURL(file);
|
||||
reader.onload = () => {
|
||||
this.options.img = reader.result;
|
||||
};
|
||||
}
|
||||
},
|
||||
// 上传图片
|
||||
uploadImg() {
|
||||
this.$refs.cropper.getCropBlob((data) => {
|
||||
let formData = new FormData();
|
||||
formData.append('avatarfile', data);
|
||||
uploadAvatar(formData).then((response) => {
|
||||
this.open = false;
|
||||
this.options.img = process.env.VUE_APP_BASE_API + response.imgUrl;
|
||||
store.commit('SET_AVATAR', this.options.img);
|
||||
this.$modal.msgSuccess(this.$t('updateSuccess'));
|
||||
this.visible = false;
|
||||
});
|
||||
});
|
||||
},
|
||||
// 实时预览
|
||||
realTime(data) {
|
||||
this.previews = data;
|
||||
},
|
||||
// 关闭窗口
|
||||
closeDialog() {
|
||||
this.options.img = store.getters.avatar;
|
||||
this.visible = false;
|
||||
window.removeEventListener('resize', this.resizeHandler);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.user-info-head {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
height: 110px;
|
||||
}
|
||||
|
||||
.user-info-head:hover:after {
|
||||
content: '+';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
color: #eee;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
font-size: 24px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
cursor: pointer;
|
||||
line-height: 110px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
</style>
|
||||
177
src/views/system/user/profile/userInfo.vue
Normal file
177
src/views/system/user/profile/userInfo.vue
Normal file
@@ -0,0 +1,177 @@
|
||||
<template>
|
||||
<div class="user-info">
|
||||
<el-descriptions :column="3">
|
||||
<el-descriptions-item :label="$t('user.profile.index.894502-1')">{{ user.userName }}</el-descriptions-item>
|
||||
<el-descriptions-item :label="$t('user.index.098976-13')">{{ user.phonenumber }}</el-descriptions-item>
|
||||
<el-descriptions-item :label="$t('user.profile.index.894502-2')">{{ user.email }}</el-descriptions-item>
|
||||
<el-descriptions-item :label="$t('user.profile.index.894502-3')">{{ postGroup ? `${user.dept.deptName} / ${postGroup}` : `${user.dept.deptName}` }}</el-descriptions-item>
|
||||
<el-descriptions-item :label="$t('user.profile.index.894502-4')">{{ roleGroup }}</el-descriptions-item>
|
||||
<el-descriptions-item :label="$t('user.profile.index.894502-5')">{{ user.createTime }}</el-descriptions-item>
|
||||
<el-descriptions-item :label="$t('user.profile.index.894502-6')">
|
||||
<el-button v-if="wxbind" type="warning" size="mini" @click="handleUnBindWeChat">{{ $t('user.profile.index.894502-7') }}</el-button>
|
||||
<el-button v-else type="primary" size="mini" @click="handleBindWeChat">{{ $t('user.profile.index.894502-8') }}</el-button>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<!-- 绑定微信 -->
|
||||
<el-dialog :title="'绑定微信'" :visible.sync="isBindWeChat" width="500px" append-to-body>
|
||||
<div class="bindWeChatDialog">
|
||||
<div class="dec">请通过微信扫一扫，进行微信绑定。</div>
|
||||
<div class="weChat">
|
||||
<div id="weChatLogin" style="height: 200px"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div slot="footer">
|
||||
<el-button type="primary" size="small" @click="isBindWeChat = false">{{ $t('close') }}</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 解除微信绑定 -->
|
||||
<el-dialog :title="$t('user.profile.index.894502-11')" :visible.sync="isUnBindWeChat" width="600px" append-to-body>
|
||||
<div class="unBindWeChatDialog">
|
||||
<el-form label-width="150px">
|
||||
<el-form-item :label="$t('user.profile.index.894502-12')" prop="pasaward">
|
||||
<el-input style="width: 80%" v-model="unBindWeChat.password" :type="pwdtype">
|
||||
<template slot="suffix">
|
||||
<span style="margin-right: 8px" class="el-icon-view" @click="pwdTypeChange()"></span>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="small" @click="isUnBindWeChat = false">{{ $t('close') }}</el-button>
|
||||
<el-button size="small" type="primary" @click="confirmUnBindWeChat">{{ $t('confirm') }}</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getLoginParam, secureBind } from '@/api/system/user';
|
||||
import { getWxBindMsg } from '@/api/login';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
user: {
|
||||
type: Object,
|
||||
default: {},
|
||||
},
|
||||
postGroup: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
roleGroup: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
wxbind: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isBindWeChat: false,
|
||||
isUnBindWeChat: false,
|
||||
pwdtype: 'password',
|
||||
unBindWeChat: {
|
||||
password: '',
|
||||
verifyType: 1,
|
||||
},
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
const { wxBindMsgId } = this.$route.query;
|
||||
if (wxBindMsgId) {
|
||||
this.getWxBindMsg();
|
||||
} else {
|
||||
console.log('此时没有进行绑定操作！');
|
||||
}
|
||||
const script = document.createElement('script');
|
||||
(script.type = 'text/javascript'), (script.src = 'http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js'), document.body.appendChild(script);
|
||||
},
|
||||
methods: {
|
||||
// 绑定微信
|
||||
handleBindWeChat() {
|
||||
getLoginParam().then((response) => {
|
||||
const s = document.createElement('script');
|
||||
s.type = 'text/javascript';
|
||||
s.src = 'https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js';
|
||||
const wxElement = document.body.appendChild(s);
|
||||
wxElement.onload = function () {
|
||||
new WxLogin({
|
||||
self_redirect: false,
|
||||
id: 'weChatLogin',
|
||||
appid: response.data.appid,
|
||||
scope: response.data.scope,
|
||||
redirect_uri: response.data.redirectUri,
|
||||
state: response.data.state,
|
||||
style: 'black',
|
||||
href: 'data:text/css;base64,LmltcG93ZXJCb3ggLnRpdGxlIHsKIGRpc3BsYXk6IG5vbmU7Cn0KLmltcG93ZXJCb3ggLnN0YXR1cy5zdGF0dXNfYnJvd3NlciB7CiBkaXNwbGF5OiBub25lOwp9Ci5pbXBvd2VyQm94IC5xcmNvZGUgewogYm9yZGVyOm5vbmU7CiB3aWR0aDogMjAwcHg7CiBoZWlnaHQ6IDIwMHB4OwogbWFyZ2luOjAgYXV0bzsKfQouaW1wb3dlckJveCAuc3RhdHVzewogZGlzcGxheTogbm9uZQp9',
|
||||
});
|
||||
};
|
||||
});
|
||||
this.isBindWeChat = true;
|
||||
},
|
||||
// 解除微信绑定
|
||||
handleUnBindWeChat() {
|
||||
this.isUnBindWeChat = true;
|
||||
},
|
||||
pwdTypeChange() {
|
||||
this.pwdtype == 'password' ? (this.pwdtype = 'text') : (this.pwdtype = 'password');
|
||||
},
|
||||
// 解除微信绑定
|
||||
confirmUnBindWeChat() {
|
||||
const params = {
|
||||
...this.unBindWeChat,
|
||||
};
|
||||
secureBind(params).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.getUser();
|
||||
this.$modal.msgSuccess(res.msg);
|
||||
}
|
||||
this.secureBindDialog = false;
|
||||
});
|
||||
},
|
||||
// 获取微信绑定返回结果信息
|
||||
getWeChatBindMsg() {
|
||||
const { wxBindMsgId } = this.$route.query;
|
||||
getWxBindMsg(wxBindMsgId).then((res) => {
|
||||
this.$modal.msgSuccess(res.msg).catch(() => {
|
||||
setTimeout(() => {
|
||||
this.$modal.msgError(res.msg);
|
||||
}, 1000);
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.user-info {
|
||||
::v-deep .el-descriptions-item__cell {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
::v-deep .el-button--mini {
|
||||
padding: 5px 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.bindWeChatDialog {
|
||||
.dec {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.weChat {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.unBindWeChatDialog {
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user