0801
This commit is contained in:
parent
359664fd63
commit
aa6d8ae5f8
@ -815,7 +815,8 @@ export default {
|
||||
this.open = false;
|
||||
let data = {
|
||||
userId: this.form.userId,
|
||||
roleIds: this.form.roleIds
|
||||
roleIds: this.form.roleIds,
|
||||
servicePackageId: 'jiaxiao'
|
||||
}
|
||||
permissionAssign(data)
|
||||
this.getList();
|
||||
@ -828,7 +829,8 @@ export default {
|
||||
this.open = false;
|
||||
let data = {
|
||||
userId: response.data,
|
||||
roleIds: this.form.roleIds
|
||||
roleIds: this.form.roleIds,
|
||||
servicePackageId: 'jiaxiao'
|
||||
}
|
||||
permissionAssign(data)
|
||||
});
|
||||
|
||||
174
src/views/rescue/staff/api/staff.js
Normal file
174
src/views/rescue/staff/api/staff.js
Normal file
@ -0,0 +1,174 @@
|
||||
import request from '@/utils/request'
|
||||
import { praseStrEmpty } from "@/utils/ruoyi";
|
||||
|
||||
// 查询用户列表
|
||||
export function listUser(query) {
|
||||
return request({
|
||||
// url: '/base/dl-drive-school-coach/page',
|
||||
url: '/system/role/selectListByRoleIdJY',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 获取用户精简信息列表
|
||||
export function listSimpleUsers() {
|
||||
return request({
|
||||
url: '/system/user/list-all-simple',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 查询用户详细
|
||||
export function getUser(userId) {
|
||||
return request({
|
||||
url: '/system/rescueInfo/getOnInternal?id=' + praseStrEmpty(userId),
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
// 驾照类型
|
||||
export function getDriverLicenseType(userId) {
|
||||
return request({
|
||||
url: '/common/down/getDriverLicenseType',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 新增用户
|
||||
export function addUser(data) {
|
||||
return request({
|
||||
// url: '/inspectionStaff/save',
|
||||
url: '/system/rescueInfo/addDriverApp',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
// 新增用户
|
||||
export function addFolder(data) {
|
||||
return request({
|
||||
url: '/system/rescueInfo/addFolder',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
// 新增用户
|
||||
export function permissionAssign(data) {
|
||||
return request({
|
||||
url: '/system/permission/assign-user-role',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 修改用户
|
||||
export function updateUser(data) {
|
||||
return request({
|
||||
// url: '/inspectionStaff/update',
|
||||
url: '/system/rescueInfo/updateDriver',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除用户
|
||||
export function delUser(userId) {
|
||||
return request({
|
||||
url: '/system/user/delete?id=' + userId,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
// 导出用户
|
||||
export function exportUser(query) {
|
||||
return request({
|
||||
url: '/base/dl-drive-school-coach/export',
|
||||
method: 'get',
|
||||
params: query,
|
||||
responseType: 'blob'
|
||||
})
|
||||
}
|
||||
|
||||
// 用户密码重置
|
||||
export function resetUserPwd(id, password) {
|
||||
const data = {
|
||||
id,
|
||||
password
|
||||
}
|
||||
return request({
|
||||
url: '/system/user/update-password',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 用户状态修改
|
||||
export function changeUserStatus(id, status) {
|
||||
const data = {
|
||||
id,
|
||||
status
|
||||
}
|
||||
return request({
|
||||
url: '/system/user/update-status',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 查询用户个人信息
|
||||
export function getUserProfile() {
|
||||
return request({
|
||||
url: '/system/user/profile/get',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
// 查询检测岗位
|
||||
export function getPost() {
|
||||
return request({
|
||||
url: '/system/role/pageByQuery',
|
||||
params:{
|
||||
servicePackageId:'jiuyuan'
|
||||
},
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 修改用户个人信息
|
||||
export function updateUserProfile(data) {
|
||||
return request({
|
||||
url: '/system/user/profile/update',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 用户密码重置
|
||||
export function updateUserPwd(oldPassword, newPassword) {
|
||||
const data = {
|
||||
oldPassword,
|
||||
newPassword
|
||||
}
|
||||
return request({
|
||||
url: '/system/user/profile/update-password',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 用户头像上传
|
||||
export function uploadAvatar(data) {
|
||||
return request({
|
||||
url: '/system/user/profile/update-avatar',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 下载用户导入模板
|
||||
export function importTemplate() {
|
||||
return request({
|
||||
// url: '/inspectionStaff/get-import-template',
|
||||
url: '/system/rescueInfo/get-import-template',
|
||||
method: 'get',
|
||||
responseType: 'blob'
|
||||
})
|
||||
}
|
||||
800
src/views/rescue/staff/index.vue
Normal file
800
src/views/rescue/staff/index.vue
Normal file
@ -0,0 +1,800 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!-- 搜索工作栏 -->
|
||||
<el-row :gutter="20">
|
||||
<el-col>
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
|
||||
label-width="68px">
|
||||
<el-form-item label="员工账号" prop="username">
|
||||
<el-input v-model="queryParams.nickname" placeholder="请输入员工账号" clearable style="width: 240px"
|
||||
@keyup.enter.native="handleQuery"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="queryParams.status" placeholder="员工状态" clearable style="width: 240px">
|
||||
<el-option v-for="dict in statusDictDatas" :key="parseInt(dict.value)" :label="dict.label"
|
||||
:value="parseInt(dict.value)"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="info" icon="el-icon-upload2" size="mini" @click="handleImport">导入
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport"
|
||||
:loading="exportLoading">导出
|
||||
</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="userList">
|
||||
<el-table-column label="员工编号" align="center" key="id" prop="id" v-if="columns[0].visible"/>
|
||||
<el-table-column label="员工账号" align="center" key="username" prop="username" v-if="columns[1].visible"
|
||||
:show-overflow-tooltip="true"/>
|
||||
<el-table-column label="员工姓名" align="center" key="nickname" prop="nickname" v-if="columns[2].visible"
|
||||
:show-overflow-tooltip="true"/>
|
||||
<el-table-column label="岗位" align="center" key="roleNames" prop="roleNames" v-if="columns[3].visible"
|
||||
:show-overflow-tooltip="true"/>
|
||||
<el-table-column label="手机号码" align="center" key="mobile" prop="mobile" v-if="columns[4].visible"
|
||||
width="120"/>
|
||||
<el-table-column label="状态" key="status" v-if="columns[5].visible" align="center">
|
||||
<template v-slot="scope">
|
||||
<el-switch v-model="scope.row.status" :active-value="0" :inactive-value="1"
|
||||
@change="handleStatusChange(scope.row)"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
|
||||
<template v-slot="scope">
|
||||
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
|
||||
>修改
|
||||
</el-button>
|
||||
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
|
||||
>删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 添加或修改参数配置对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
|
||||
<el-row v-if="form.userId != null">
|
||||
<el-form-item label="头像" prop="avatar">
|
||||
<ImageUpload v-model="form.avatar" :limit="1"/>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="姓名" prop="nickName">
|
||||
<el-input v-model="form.nickName" placeholder="请输入姓名"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<!-- <el-form-item label="岗位" prop="postIds">
|
||||
<el-select v-model="singleRoleId" placeholder="请选择岗位" @change="onRoleChange">
|
||||
<el-option v-for="item in postOptions" :key="item.id" :label="item.name" :value="item.id"/>
|
||||
</el-select>
|
||||
</el-form-item>-->
|
||||
<el-form-item label="员工性别" prop="sex">
|
||||
<el-select v-model="form.sex" placeholder="请选择" style="width: 100%">
|
||||
<el-option v-for="dict in sexDictDatas" :key="dict.value" :label="dict.label"
|
||||
:value="dict.value"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="手机号码" prop="mobile">
|
||||
<el-input v-model="form.mobile" placeholder="请输入手机号码" maxlength="11"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="年龄" prop="age">
|
||||
<el-input v-model="form.age" placeholder="请输入年龄"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- <el-row>
|
||||
<el-col :span="12">
|
||||
|
||||
</el-col>
|
||||
</el-row>-->
|
||||
|
||||
<el-form-item label="查看附件" v-if="this.form.userId">
|
||||
<div @click="addFolder" style="color: #07c5fc">点击查看附件</div>
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 员工导入对话框 -->
|
||||
<el-dialog :title="upload.title" :visible.sync="upload.open" append-to-body>
|
||||
<el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers"
|
||||
:action="upload.url" :disabled="upload.isUploading"
|
||||
:on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
|
||||
<i class="el-icon-upload"></i>
|
||||
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
||||
<div class="el-upload__tip text-center" slot="tip">
|
||||
<div class="el-upload__tip" slot="tip">
|
||||
<el-checkbox v-model="upload.updateSupport"/>
|
||||
是否更新已经存在的员工数据
|
||||
</div>
|
||||
<span>仅允许导入xls、xlsx格式文件。</span>
|
||||
<el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;"
|
||||
@click="importTemplate">下载模板
|
||||
</el-link>
|
||||
</div>
|
||||
</el-upload>
|
||||
<el-table
|
||||
v-if="isFail"
|
||||
:data="failList"
|
||||
stripe
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
prop="username"
|
||||
label="员工姓名"
|
||||
width="180">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="reason"
|
||||
label="失败原因">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="roleName"
|
||||
label="岗位">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="idCard"
|
||||
label="身份证号">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="age"
|
||||
label="年龄">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="mobile"
|
||||
label="电话号码">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="sex"
|
||||
label="性别">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="seniority"
|
||||
label="教龄">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="carId"
|
||||
label="车牌号">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="address"
|
||||
label="居住地址">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="regAddress"
|
||||
label="户籍地址">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="instructorDesc"
|
||||
label="个人简介">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitFileForm">确 定</el-button>
|
||||
<el-button @click="upload.open = false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
addUser,
|
||||
changeUserStatus,
|
||||
delUser,
|
||||
exportUser,
|
||||
getUser,
|
||||
importTemplate,
|
||||
listUser,
|
||||
resetUserPwd,
|
||||
getDriverLicenseType,
|
||||
updateUser, getPost, permissionAssign, addFolder
|
||||
} from "./api/staff";
|
||||
import Treeselect from "@riophae/vue-treeselect";
|
||||
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
||||
|
||||
import {listSimpleDepts} from "@/api/system/dept";
|
||||
import {listSimplePosts} from "@/api/system/post";
|
||||
|
||||
import {CommonStatusEnum} from "@/utils/constants";
|
||||
import {DICT_TYPE, getDictDatas} from "@/utils/dict";
|
||||
import {assignUserRole, listUserRoles} from "@/api/system/permission";
|
||||
import {listSimpleRoles} from "@/api/system/role";
|
||||
import {getBaseHeader} from "@/utils/request";
|
||||
|
||||
export default {
|
||||
name: "SystemUser",
|
||||
components: {Treeselect},
|
||||
data() {
|
||||
return {
|
||||
failList: [],
|
||||
isFail: false,
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 导出遮罩层
|
||||
exportLoading: false,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 员工表格数据
|
||||
userList: null,
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 部门树选项
|
||||
deptOptions: undefined,
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 部门名称
|
||||
deptName: undefined,
|
||||
// 默认密码
|
||||
initPassword: undefined,
|
||||
// 性别状态字典
|
||||
sexOptions: [],
|
||||
// 岗位选项
|
||||
postOptions: [],
|
||||
// 角色选项
|
||||
roleOptions: [],
|
||||
isInsert: false,
|
||||
// 表单参数
|
||||
form: {
|
||||
driverLicenseTypeArr: []
|
||||
},
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "name"
|
||||
},
|
||||
// 文件列表
|
||||
fileList: [],
|
||||
// 驾驶证类型
|
||||
driverLicenseTypeOptions: [],
|
||||
// 员工导入参数
|
||||
upload: {
|
||||
// 是否显示弹出层（员工导入）
|
||||
open: false,
|
||||
// 弹出层标题（员工导入）
|
||||
title: "",
|
||||
// 是否禁用上传
|
||||
isUploading: false,
|
||||
// 是否更新已经存在的员工数据
|
||||
updateSupport: 0,
|
||||
// 设置上传的请求头部
|
||||
headers: getBaseHeader(),
|
||||
// 导入的地址
|
||||
// url: process.env.VUE_APP_BASE_API + '/admin-api/inspectionStaff/import'
|
||||
url: process.env.VUE_APP_BASE_API + '/admin-api/base/dl-drive-school-coach/import'
|
||||
},
|
||||
//图片
|
||||
imageUpload: {
|
||||
// 是否显示弹出层（员工导入）
|
||||
open: false,
|
||||
// 弹出层标题（员工导入）
|
||||
title: "",
|
||||
// 是否禁用上传
|
||||
isUploading: false,
|
||||
// 设置上传的请求头部
|
||||
headers: getBaseHeader(),
|
||||
// 上传的地址
|
||||
url: process.env.VUE_APP_BASE_API + '/admin-api/infra/file/uploadDetail'
|
||||
},
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
username: undefined,
|
||||
mobile: undefined,
|
||||
status: undefined,
|
||||
postId: undefined,
|
||||
createTime: []
|
||||
},
|
||||
// 列信息
|
||||
columns: [
|
||||
{key: 0, label: `员工编号`, visible: true},
|
||||
{key: 1, label: `员工名称`, visible: true},
|
||||
{key: 2, label: `员工昵称`, visible: true},
|
||||
{key: 3, label: `部门`, visible: true},
|
||||
{key: 4, label: `手机号码`, visible: true},
|
||||
{key: 5, label: `状态`, visible: true},
|
||||
{key: 6, label: `创建时间`, visible: true}
|
||||
],
|
||||
// 表单校验
|
||||
rules: {
|
||||
username: [
|
||||
{required: true, message: "员工名称不能为空", trigger: "blur"}
|
||||
],
|
||||
nickname: [
|
||||
{required: true, message: "员工昵称不能为空", trigger: "blur"}
|
||||
],
|
||||
password: [
|
||||
{required: true, message: "员工密码不能为空", trigger: "blur"}
|
||||
],
|
||||
email: [
|
||||
{
|
||||
type: "email",
|
||||
message: "'请输入正确的邮箱地址",
|
||||
trigger: ["blur", "change"]
|
||||
}
|
||||
],
|
||||
mobile: [
|
||||
{
|
||||
required: true,
|
||||
pattern: /^(?:(?:\+|00)86)?1(?:3[\d]|4[5-79]|5[0-35-9]|6[5-7]|7[0-8]|8[\d]|9[189])\d{8}$/,
|
||||
message: "请输入正确的手机号码",
|
||||
trigger: "blur"
|
||||
}
|
||||
]
|
||||
},
|
||||
// 是否显示弹出层（角色权限）
|
||||
openRole: false,
|
||||
|
||||
// 枚举
|
||||
SysCommonStatusEnum: CommonStatusEnum,
|
||||
// 数据字典
|
||||
statusDictDatas: getDictDatas(DICT_TYPE.COMMON_STATUS),
|
||||
sexDictDatas: getDictDatas(DICT_TYPE.SYSTEM_USER_SEX),
|
||||
|
||||
singleRoleId: null,
|
||||
postTypeMapping: {
|
||||
'教练': 'jl',
|
||||
'业务经理': 'ywjl',
|
||||
},
|
||||
defaultType: 'yg'
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
// 根据名称筛选部门树
|
||||
deptName(val) {
|
||||
this.$refs.tree.filter(val);
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
this.getDriverLicenseType();
|
||||
},
|
||||
methods: {
|
||||
// 更多操作
|
||||
handleCommand(command, index, row) {
|
||||
switch (command) {
|
||||
case 'handleUpdate':
|
||||
this.handleUpdate(row);//修改客户信息
|
||||
break;
|
||||
case 'handleDelete':
|
||||
this.handleDelete(row);//红号变更
|
||||
break;
|
||||
case 'handleResetPwd':
|
||||
this.handleResetPwd(row);
|
||||
break;
|
||||
case 'handleRole':
|
||||
this.handleRole(row);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
},
|
||||
/** 查询员工列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listUser(this.queryParams).then(response => {
|
||||
this.userList = response.data.records;
|
||||
this.total = response.data.total;
|
||||
this.loading = false;
|
||||
}
|
||||
);
|
||||
},
|
||||
addFolder() {
|
||||
if (!this.form.folderId) {
|
||||
addFolder(this.form.userId).then(response => {
|
||||
this.form.folderId = response.data
|
||||
this.$router.push({path: '/rescue/manage/file/jiuyuan', query: {"folderId": this.form.folderId}})
|
||||
})
|
||||
} else {
|
||||
this.$router.push({path: '/rescue/manage/file/jiuyuan', query: {"folderId": this.form.folderId}})
|
||||
}
|
||||
},
|
||||
// 查询驾驶证类型
|
||||
getDriverLicenseType() {
|
||||
getDriverLicenseType().then(response => {
|
||||
this.driverLicenseTypeOptions = response.data;
|
||||
});
|
||||
},
|
||||
onRoleChange(val) {
|
||||
this.form.roleIds = val ? [val] : [];
|
||||
// 根据选择的岗位设置 type
|
||||
const selectedPost = this.postOptions.find(post => post.id === val);
|
||||
if (selectedPost && this.postTypeMapping[selectedPost.name]) {
|
||||
this.form.type = this.postTypeMapping[selectedPost.name];
|
||||
} else if (selectedPost && this.postTypeMapping[selectedPost.id]) {
|
||||
this.form.type = this.postTypeMapping[selectedPost.id];
|
||||
} else {
|
||||
this.form.type = this.defaultType;
|
||||
}
|
||||
},
|
||||
// 筛选节点
|
||||
filterNode(value, data) {
|
||||
if (!value) return true;
|
||||
return data.name.indexOf(value) !== -1;
|
||||
},
|
||||
// 节点单击事件
|
||||
handleNodeClick(data) {
|
||||
this.queryParams.postId = data.id;
|
||||
this.getList();
|
||||
},
|
||||
// 员工状态修改
|
||||
handleStatusChange(row) {
|
||||
let text = row.status === CommonStatusEnum.ENABLE ? "启用" : "停用";
|
||||
this.$modal.confirm('确认要"' + text + '""' + row.username + '"员工吗?').then(function () {
|
||||
return changeUserStatus(row.id, row.status);
|
||||
}).then(() => {
|
||||
this.$modal.msgSuccess(text + "成功");
|
||||
}).catch(function () {
|
||||
row.status = row.status === CommonStatusEnum.ENABLE ? CommonStatusEnum.DISABLE
|
||||
: CommonStatusEnum.ENABLE;
|
||||
});
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
// 取消按钮（角色权限）
|
||||
cancelRole() {
|
||||
this.openRole = false;
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: undefined,
|
||||
postId: undefined,
|
||||
username: undefined,
|
||||
nickname: undefined,
|
||||
password: undefined,
|
||||
mobile: undefined,
|
||||
email: undefined,
|
||||
sex: undefined,
|
||||
age: undefined,
|
||||
seniority: undefined,
|
||||
carId: undefined,
|
||||
status: "0",
|
||||
remark: undefined,
|
||||
postIds: [],
|
||||
roleIds: []
|
||||
};
|
||||
this.fileList = [];
|
||||
this.singleRoleId = null;
|
||||
this.resetForm("form");
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNo = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset();
|
||||
this.isInsert = true;
|
||||
// 获得下拉数据
|
||||
this.getPostsByDeptId();
|
||||
// 打开表单，并设置初始化
|
||||
this.open = true;
|
||||
this.title = "添加员工";
|
||||
this.form.password = this.initPassword;
|
||||
this.form.type = this.defaultType;
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset();
|
||||
const id = row.id;
|
||||
this.isInsert = false;
|
||||
|
||||
this.getPostsByDeptId()
|
||||
.then(() => {
|
||||
return getUser(id);
|
||||
})
|
||||
.then(response => {
|
||||
this.form = response.data;
|
||||
this.fileList = this.form.fileList == null ? [] : this.form.fileList;
|
||||
|
||||
if (this.form.roleIds && this.form.roleIds.length > 0) {
|
||||
this.singleRoleId = this.form.roleIds[0];
|
||||
|
||||
// 设置 type 根据当前岗位
|
||||
const currentPost = this.postOptions.find(post => post.id === this.singleRoleId);
|
||||
if (currentPost && this.postTypeMapping[currentPost.name]) {
|
||||
this.form.type = this.postTypeMapping[currentPost.name];
|
||||
} else if (currentPost && this.postTypeMapping[currentPost.id]) {
|
||||
this.form.type = this.postTypeMapping[currentPost.id];
|
||||
} else {
|
||||
this.form.type = this.defaultType;
|
||||
}
|
||||
} else {
|
||||
this.singleRoleId = null;
|
||||
this.form.type = this.defaultType;
|
||||
}
|
||||
|
||||
this.open = true;
|
||||
this.title = "修改员工";
|
||||
})
|
||||
.catch(error => {
|
||||
console.error("加载数据失败:", error);
|
||||
this.$message.error("加载员工数据失败");
|
||||
});
|
||||
},
|
||||
/** 重置密码按钮操作 */
|
||||
handleResetPwd(row) {
|
||||
this.$prompt('请输入"' + row.username + '"的新密码', "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消"
|
||||
}).then(({value}) => {
|
||||
resetUserPwd(row.id, value).then(response => {
|
||||
this.$modal.msgSuccess("修改成功，新密码是：" + value);
|
||||
});
|
||||
}).catch(() => {
|
||||
});
|
||||
},
|
||||
/** 获取检测岗位集合 */
|
||||
getPostsByDeptId() {
|
||||
return getPost().then(response => {
|
||||
this.postOptions = response.data;
|
||||
return response.data;
|
||||
});
|
||||
},
|
||||
/** 分配员工角色操作 */
|
||||
handleRole(row) {
|
||||
this.reset();
|
||||
const id = row.id
|
||||
// 处理了 form 的员工 username 和 nickname 的展示
|
||||
this.form.id = id;
|
||||
this.form.username = row.username;
|
||||
this.form.nickname = row.nickname;
|
||||
// 打开弹窗
|
||||
this.openRole = true;
|
||||
// 获得角色列表
|
||||
listSimpleRoles().then(response => {
|
||||
console.log('roles', response.data)
|
||||
// 处理 roleOptions 参数
|
||||
this.roleOptions = [];
|
||||
this.roleOptions.push(...response.data);
|
||||
});
|
||||
// 获得角色拥有的菜单集合
|
||||
listUserRoles(id).then(response => {
|
||||
// 设置选中
|
||||
this.form.roleIds = response.data;
|
||||
})
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm: function () {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
this.form.fileList = this.fileList;
|
||||
// this.form.id = this.form.driverId;
|
||||
const requestForm = {
|
||||
id: this.form.driverId,
|
||||
realName: this.form.nickName,
|
||||
userId: this.form.userId,
|
||||
phonenumber: this.form.mobile,
|
||||
age: this.form.age,
|
||||
sex: this.form.sex,
|
||||
avatar: this.form.avatar,
|
||||
};
|
||||
|
||||
if (this.form.userId !== undefined) {
|
||||
updateUser(requestForm)
|
||||
.then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
let data = {
|
||||
userId: this.form.userId,
|
||||
roleIds: this.form.roleIds,
|
||||
};
|
||||
return permissionAssign(data); // 返回 Promise 链
|
||||
})
|
||||
.then(() => {
|
||||
this.getList(); // 确保在权限分配成功后刷新列表
|
||||
})
|
||||
.catch(error => {
|
||||
console.error("操作失败:", error);
|
||||
this.$modal.msgError("操作失败");
|
||||
});
|
||||
} else {
|
||||
this.form.username = this.form.mobile;
|
||||
this.form.password = "123456";
|
||||
addUser(requestForm)
|
||||
.then(response => {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
let data = {
|
||||
userId: response.data,
|
||||
roleIds: this.form.roleIds,
|
||||
};
|
||||
return permissionAssign(data); // 返回 Promise 链
|
||||
})
|
||||
.then(() => {
|
||||
this.getList(); // 确保在权限分配成功后刷新列表
|
||||
})
|
||||
.catch(error => {
|
||||
console.error("操作失败:", error);
|
||||
this.$modal.msgError("操作失败");
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/* submitForm: function () {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
this.form.fileList = this.fileList
|
||||
const requestForm = {
|
||||
realName: this.form.nickName,
|
||||
phonenumber: this.form.mobile,
|
||||
age: this.form.age,
|
||||
sex: this.form.sex,
|
||||
|
||||
}
|
||||
if (this.form.userId !== undefined) {
|
||||
console.log(this.form)
|
||||
|
||||
updateUser(requestForm).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
let data = {
|
||||
userId: this.form.userId,
|
||||
roleIds: this.form.roleIds
|
||||
}
|
||||
permissionAssign(data)
|
||||
this.getList();
|
||||
});
|
||||
} else {
|
||||
this.form.username = this.form.mobile
|
||||
this.form.password = '123456'
|
||||
addUser(requestForm).then(response => {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
let data = {
|
||||
userId: response.data,
|
||||
roleIds: this.form.roleIds
|
||||
}
|
||||
permissionAssign(data)
|
||||
});
|
||||
|
||||
}
|
||||
}
|
||||
});
|
||||
}, */
|
||||
/** 提交按钮（角色权限） */
|
||||
submitRole: function () {
|
||||
if (this.form.userId !== undefined) {
|
||||
assignUserRole({
|
||||
userId: this.form.userId,
|
||||
roleIds: this.form.roleIds,
|
||||
}).then(response => {
|
||||
this.$modal.msgSuccess("分配角色成功");
|
||||
this.openRole = false;
|
||||
this.getList();
|
||||
});
|
||||
}
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const ids = row.id || this.ids;
|
||||
this.$modal.confirm('是否确认删除员工编号为"' + ids + '"的数据项?').then(function () {
|
||||
return delUser(ids);
|
||||
}).then(() => {
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
}).catch(() => {
|
||||
});
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.$modal.confirm('是否确认导出所有员工数据项?').then(() => {
|
||||
// 处理查询参数
|
||||
let params = {...this.queryParams};
|
||||
params.pageNo = undefined;
|
||||
params.pageSize = undefined;
|
||||
this.exportLoading = true;
|
||||
return exportUser(params);
|
||||
}).then(response => {
|
||||
this.$download.excel(response, '员工数据.xls');
|
||||
}).finally(() => {
|
||||
this.exportLoading = false;
|
||||
});
|
||||
},
|
||||
/** 导入按钮操作 */
|
||||
handleImport() {
|
||||
this.upload.title = "员工导入";
|
||||
this.upload.open = true;
|
||||
},
|
||||
/** 下载模板操作 */
|
||||
importTemplate() {
|
||||
importTemplate().then(response => {
|
||||
this.$download.excel(response, '员工导入模板.xls');
|
||||
});
|
||||
},
|
||||
// 文件上传中处理
|
||||
handleFileUploadProgress(event, file, fileList) {
|
||||
this.upload.isUploading = true;
|
||||
},
|
||||
// 文件上传成功处理
|
||||
handleFileSuccess(response, file, fileList) {
|
||||
if (response.code !== 0) {
|
||||
this.$modal.msgError(response.msg)
|
||||
return;
|
||||
}
|
||||
// this.upload.open = false;
|
||||
this.upload.isUploading = false;
|
||||
this.$refs.upload.clearFiles();
|
||||
if (response.data.failList.length > 0) {
|
||||
this.isFail = true
|
||||
console.log('执行了吗')
|
||||
this.$set(this, 'failList', response.data.failList); // 确保响应式
|
||||
console.log(this.failList)
|
||||
}
|
||||
this.getList();
|
||||
},
|
||||
// 提交上传文件
|
||||
submitFileForm() {
|
||||
this.$refs.upload.submit();
|
||||
this.failList = []
|
||||
this.isFail = false
|
||||
console.log('执行')
|
||||
},
|
||||
handlePreview(file) {
|
||||
console.log(file);
|
||||
},
|
||||
handleExceed(files, fileList) {
|
||||
this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
|
||||
},
|
||||
beforeRemove(file, fileList) {
|
||||
return this.$confirm(`确定移除 ${file.name}？`);
|
||||
},
|
||||
// 文件上传成功处理
|
||||
handleFileSuccessAttachments(response, file, fileList) {
|
||||
if (response.code !== 0) {
|
||||
this.$modal.msgError(response.msg)
|
||||
return;
|
||||
}
|
||||
console.log(response)
|
||||
this.fileList.push(response.data)
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
100
src/views/rescue/staff/profile/index.vue
Normal file
100
src/views/rescue/staff/profile/index.vue
Normal file
@ -0,0 +1,100 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6" :xs="24">
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>个人信息</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-center">
|
||||
<userAvatar :user="user" />
|
||||
</div>
|
||||
<ul class="list-group list-group-striped">
|
||||
<li class="list-group-item">
|
||||
<svg-icon icon-class="user" />用户名称
|
||||
<div class="pull-right">{{ user.username }}</div>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<svg-icon icon-class="phone" />手机号码
|
||||
<div class="pull-right">{{ user.mobile }}</div>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<svg-icon icon-class="email" />用户邮箱
|
||||
<div class="pull-right">{{ user.email }}</div>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<svg-icon icon-class="tree" />所属部门
|
||||
<div class="pull-right" v-if="user.dept">{{ user.dept.name }}</div>
|
||||
</li>
|
||||
<!-- <li class="list-group-item">-->
|
||||
<!-- <svg-icon icon-class="tree" />所属岗位-->
|
||||
<!-- <div class="pull-right" v-if="user.posts">{{ user.posts.map(post => post.name).join(',') }}</div>-->
|
||||
<!-- </li>-->
|
||||
<li class="list-group-item">
|
||||
<svg-icon icon-class="peoples" />所属角色
|
||||
<div class="pull-right" v-if="user.roles">{{ user.roles.map(role => role.name).join(',') }}</div>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<svg-icon icon-class="date" />创建日期
|
||||
<div class="pull-right">{{ parseTime(user.createTime) }}</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="18" :xs="24">
|
||||
<el-card>
|
||||
<div slot="header" class="clearfix">
|
||||
<span>基本资料</span>
|
||||
</div>
|
||||
<el-tabs v-model="activeTab">
|
||||
<el-tab-pane label="基本资料" name="userinfo">
|
||||
<userInfo :user="user" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="修改密码" name="resetPwd">
|
||||
<resetPwd :user="user" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="社交信息" name="userSocial">
|
||||
<userSocial :user="user" :getUser="getUser" :setActiveTab="setActiveTab" />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import userAvatar from "./userAvatar";
|
||||
import userInfo from "./userInfo";
|
||||
import resetPwd from "./resetPwd";
|
||||
import userSocial from "./userSocial";
|
||||
import { getUserProfile } from "@/api/system/user";
|
||||
|
||||
export default {
|
||||
name: "Profile",
|
||||
components: { userAvatar, userInfo, resetPwd, userSocial },
|
||||
data() {
|
||||
return {
|
||||
user: {},
|
||||
roleGroup: {},
|
||||
postGroup: {},
|
||||
activeTab: "userinfo"
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getUser();
|
||||
},
|
||||
methods: {
|
||||
getUser() {
|
||||
getUserProfile().then(response => {
|
||||
this.user = response.data;
|
||||
});
|
||||
},
|
||||
setActiveTab(activeTab) {
|
||||
this.activeTab = activeTab
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
71
src/views/rescue/staff/profile/resetPwd.vue
Normal file
71
src/views/rescue/staff/profile/resetPwd.vue
Normal file
@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<el-form ref="form" :model="user" :rules="rules" label-width="80px">
|
||||
<el-form-item label="旧密码" prop="oldPassword">
|
||||
<el-input v-model="user.oldPassword" placeholder="请输入旧密码" type="password" show-password />
|
||||
</el-form-item>
|
||||
<el-form-item label="新密码" prop="newPassword">
|
||||
<el-input v-model="user.newPassword" placeholder="请输入新密码" type="password" show-password />
|
||||
</el-form-item>
|
||||
<el-form-item label="确认密码" prop="confirmPassword">
|
||||
<el-input v-model="user.confirmPassword" placeholder="请确认密码" type="password" show-password />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" size="mini" @click="submit">保存</el-button>
|
||||
<el-button type="danger" size="mini" @click="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("两次输入的密码不一致"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
return {
|
||||
test: "1test",
|
||||
user: {
|
||||
oldPassword: undefined,
|
||||
newPassword: undefined,
|
||||
confirmPassword: undefined
|
||||
},
|
||||
// 表单校验
|
||||
rules: {
|
||||
oldPassword: [
|
||||
{ required: true, message: "旧密码不能为空", trigger: "blur" }
|
||||
],
|
||||
newPassword: [
|
||||
{ required: true, message: "新密码不能为空", trigger: "blur" },
|
||||
{ min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" }
|
||||
],
|
||||
confirmPassword: [
|
||||
{ required: true, message: "确认密码不能为空", 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("修改成功");
|
||||
}
|
||||
);
|
||||
}
|
||||
});
|
||||
},
|
||||
close() {
|
||||
this.$tab.closePage();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
171
src/views/rescue/staff/profile/userAvatar.vue
Normal file
171
src/views/rescue/staff/profile/userAvatar.vue
Normal file
@ -0,0 +1,171 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="user-info-head" @click="editCropper()"><img v-bind:src="options.img" title="点击上传头像" 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"
|
||||
@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" :md="2">
|
||||
<el-upload action="#" :http-request="requestUpload" :show-file-list="false" :before-upload="beforeUpload">
|
||||
<el-button size="small">
|
||||
选择
|
||||
<i class="el-icon-upload el-icon--right"></i>
|
||||
</el-button>
|
||||
</el-upload>
|
||||
</el-col>
|
||||
<el-col :lg="{span: 1, offset: 2}" :md="2">
|
||||
<el-button icon="el-icon-plus" size="small" @click="changeScale(1)"></el-button>
|
||||
</el-col>
|
||||
<el-col :lg="{span: 1, offset: 1}" :md="2">
|
||||
<el-button icon="el-icon-minus" size="small" @click="changeScale(-1)"></el-button>
|
||||
</el-col>
|
||||
<el-col :lg="{span: 1, offset: 1}" :md="2">
|
||||
<el-button icon="el-icon-refresh-left" size="small" @click="rotateLeft()"></el-button>
|
||||
</el-col>
|
||||
<el-col :lg="{span: 1, offset: 1}" :md="2">
|
||||
<el-button icon="el-icon-refresh-right" size="small" @click="rotateRight()"></el-button>
|
||||
</el-col>
|
||||
<el-col :lg="{span: 2, offset: 6}" :md="2">
|
||||
<el-button type="primary" size="small" @click="uploadImg()">提 交</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";
|
||||
|
||||
export default {
|
||||
components: { VueCropper },
|
||||
props: {
|
||||
user: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 是否显示cropper
|
||||
visible: false,
|
||||
// 弹出层标题
|
||||
title: "修改头像",
|
||||
options: {
|
||||
img: store.getters.avatar, //裁剪图片的地址
|
||||
autoCrop: true, // 是否默认生成截图框
|
||||
autoCropWidth: 200, // 默认生成截图框宽度
|
||||
autoCropHeight: 200, // 默认生成截图框高度
|
||||
fixedBox: true // 固定截图框大小 不允许改变
|
||||
},
|
||||
previews: {}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 编辑头像
|
||||
editCropper() {
|
||||
this.open = true;
|
||||
},
|
||||
// 打开弹出层结束时的回调
|
||||
modalOpened() {
|
||||
this.visible = true;
|
||||
},
|
||||
// 覆盖默认的上传行为
|
||||
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("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。");
|
||||
} 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(resp => {
|
||||
this.open = false;
|
||||
// this.options.img = process.env.VUE_APP_BASE_API + response.imgUrl;
|
||||
store.commit('SET_AVATAR', resp.data);
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.visible = false;
|
||||
});
|
||||
});
|
||||
},
|
||||
// 实时预览
|
||||
realTime(data) {
|
||||
this.previews = data;
|
||||
},
|
||||
// 取消截图，关闭对话框
|
||||
closeDialog() {
|
||||
this.options.img = store.getters.avatar
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.user-info-head {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.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>
|
||||
75
src/views/rescue/staff/profile/userInfo.vue
Normal file
75
src/views/rescue/staff/profile/userInfo.vue
Normal file
@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<el-form ref="form" :model="user" :rules="rules" label-width="80px">
|
||||
<el-form-item label="用户昵称" prop="nickName">
|
||||
<el-input v-model="user.nickname" />
|
||||
</el-form-item>
|
||||
<el-form-item label="手机号码" prop="mobile">
|
||||
<el-input v-model="user.mobile" maxlength="11" />
|
||||
</el-form-item>
|
||||
<el-form-item label="邮箱" prop="email">
|
||||
<el-input v-model="user.email" maxlength="50" />
|
||||
</el-form-item>
|
||||
<el-form-item label="性别">
|
||||
<el-radio-group v-model="user.sex">
|
||||
<el-radio :label="1">男</el-radio>
|
||||
<el-radio :label="2">女</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" size="mini" @click="submit">保存</el-button>
|
||||
<el-button type="danger" size="mini" @click="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: "用户昵称不能为空", trigger: "blur" }
|
||||
],
|
||||
email: [
|
||||
{ required: true, message: "邮箱地址不能为空", trigger: "blur" },
|
||||
{
|
||||
type: "email",
|
||||
message: "请输入正确的邮箱地址",
|
||||
trigger: ["blur", "change"]
|
||||
}
|
||||
],
|
||||
mobile: [
|
||||
{ required: true, message: "手机号码不能为空", trigger: "blur" },
|
||||
{
|
||||
pattern: /^1[3|456789][0-9]\d{8}$/,
|
||||
message: "请输入正确的手机号码",
|
||||
trigger: "blur"
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
submit() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
updateUserProfile(this.user).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
close() {
|
||||
this.$tab.closePage();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
100
src/views/rescue/staff/profile/userSocial.vue
Normal file
100
src/views/rescue/staff/profile/userSocial.vue
Normal file
@ -0,0 +1,100 @@
|
||||
<template>
|
||||
<el-table :data="socialUsers" :show-header="false">
|
||||
<el-table-column label="社交平台" align="left" width="120">
|
||||
<template v-slot="scope">
|
||||
<img style="height:20px;vertical-align: middle;" :src="scope.row.img" /> {{ scope.row.title }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="left" >
|
||||
<template v-slot="scope">
|
||||
<div v-if="scope.row.openid">
|
||||
已绑定
|
||||
<el-button size="large" type="text" @click="unbind(scope.row)">(解绑)</el-button>
|
||||
</div>
|
||||
<div v-else>
|
||||
未绑定
|
||||
<el-button size="large" type="text" @click="bind(scope.row)">(绑定)</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import {SystemUserSocialTypeEnum} from "@/utils/constants";
|
||||
import {socialAuthRedirect} from "@/api/login";
|
||||
import {socialBind, socialUnbind} from "@/api/system/socialUser";
|
||||
|
||||
export default {
|
||||
props: {
|
||||
user: {
|
||||
type: Object
|
||||
},
|
||||
getUser: { // 刷新用户
|
||||
type: Function
|
||||
},
|
||||
setActiveTab: { // 设置激活的
|
||||
type: Function
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
socialUsers (){
|
||||
const socialUsers = [];
|
||||
for (const i in SystemUserSocialTypeEnum) {
|
||||
const socialUser = {...SystemUserSocialTypeEnum[i]};
|
||||
socialUsers.push(socialUser);
|
||||
if (this.user.socialUsers) {
|
||||
for (const j in this.user.socialUsers) {
|
||||
if (socialUser.type === this.user.socialUsers[j].type) {
|
||||
socialUser.openid = this.user.socialUsers[j].openid;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return socialUsers;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// 社交绑定
|
||||
const type = this.$route.query.type;
|
||||
const code = this.$route.query.code;
|
||||
const state = this.$route.query.state;
|
||||
if (!code) {
|
||||
return;
|
||||
}
|
||||
socialBind(type, code, state).then(resp => {
|
||||
this.$modal.msgSuccess("绑定成功");
|
||||
this.$router.replace('/user/profile');
|
||||
// 调用父组件, 刷新
|
||||
this.getUser();
|
||||
this.setActiveTab('userSocial');
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
bind(socialUser) {
|
||||
// 计算 redirectUri
|
||||
const redirectUri = location.origin + '/user/profile?type=' + socialUser.type;
|
||||
// 进行跳转
|
||||
socialAuthRedirect(socialUser.type, encodeURIComponent(redirectUri)).then((res) => {
|
||||
// console.log(res.url);
|
||||
window.location.href = res.data;
|
||||
});
|
||||
},
|
||||
unbind(socialUser) {
|
||||
socialUnbind(socialUser.type, socialUser.openid).then(resp => {
|
||||
this.$modal.msgSuccess("解绑成功");
|
||||
socialUser.openid = undefined;
|
||||
});
|
||||
},
|
||||
close() {
|
||||
this.$tab.closePage();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Loading…
Reference in New Issue
Block a user