panqihua
/
ttsbg-java-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

还原若依用户管理、头像组件

Browse Source
master
panqihua 2 years ago
parent fabbfb0e13
commit 787dd93a9e
2 changed files with 476 additions and 274 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 670
      src/views/system/user/index.vue
  2. 72
      src/views/system/user/profile/userAvatar.vue

670
src/views/system/user/index.vue
Unescape View File

@ -1,175 +1,355 @@
<template> <template>
<div class="app-container"> <div class="app-container">
<el-row :gutter="20"> <el-row :gutter="20">
<!--部门数据-->
<el-col :span="4" :xs="24">
<div class="head-container">
<el-input
v-model="deptName"
placeholder="请输入部门名称"
clearable
size="small"
prefix-icon="el-icon-search"
style="margin-bottom: 20px"
/>
</div>
<div class="head-container">
<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-col>
<!--用户数据--> <!--用户数据-->
<el-col :span="24" :xs="24"> <el-col :span="20" :xs="24">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
label-width="68px"> label-width="68px">
<el-form-item label="用户昵称" prop="nickName"> <el-form-item label="用户名称" prop="userName">
<el-input v-model="queryParams.nickName" placeholder="请输入用户昵称" clearable style="width: 240px" <el-input
@keyup.enter.native="handleQuery" /> v-model="queryParams.userName"
</el-form-item> placeholder="请输入用户名称"
<el-form-item label="ID" prop="userId"> clearable
<el-input v-model="queryParams.userId" placeholder="请输入用户ID" clearable style="width: 240px" style="width: 240px"
@keyup.enter.native="handleQuery" /> @keyup.enter.native="handleQuery"
/>
</el-form-item> </el-form-item>
<el-form-item label="手机号码" prop="phonenumber"> <el-form-item label="手机号码" prop="phonenumber">
<el-input v-model="queryParams.phonenumber" placeholder="请输入手机号码" clearable style="width: 240px" <el-input
@keyup.enter.native="handleQuery" /> v-model="queryParams.phonenumber"
placeholder="请输入手机号码"
clearable
style="width: 240px"
@keyup.enter.native="handleQuery"
/>
</el-form-item> </el-form-item>
<el-form-item label="性别" prop="sex"> <el-form-item label="状态" prop="status">
<el-select v-model="queryParams.sex" placeholder="请选择性别" clearable> <el-select
<el-option v-for="dict in dict.type.sys_user_sex" :key="dict.value" :label="dict.label" v-model="queryParams.status"
:value="dict.value"></el-option> placeholder="用户状态"
clearable
style="width: 240px"
>
<el-option
v-for="dict in dict.type.sys_normal_disable"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="注册时间"> <el-form-item label="创建时间">
<el-date-picker v-model="dateRange" style="width: 240px" value-format="yyyy-MM-dd" type="daterange" <el-date-picker
range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker> v-model="dateRange"
style="width: 240px"
value-format="yyyy-MM-dd"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
></el-date-picker>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-form-item label="状态" prop="status"> <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-select v-model="queryParams.status" placeholder="用户状态" clearable style="width: 240px">
<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-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
<el-row :gutter="10" class="mb8"> <el-row :gutter="10" class="mb8">
<el-col :span="1.5"> <el-col :span="1.5">
<el-button type="primary" size="mini" @click="handleAdd" v-hasPermi="['system:user:add']">新增用户</el-button> <el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['system:user:add']"
>新增
</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['system:user:edit']"
>修改
</el-button>
</el-col> </el-col>
<el-col :span="1.5"> <el-col :span="1.5">
<el-button size="mini" v-hasPermi="['system:user:edit']" @click="updateStatusByUserId('0')">批量开启</el-button> <el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['system:user:remove']"
>删除
</el-button>
</el-col> </el-col>
<el-col :span="1.5"> <el-col :span="1.5">
<el-button size="mini" v-hasPermi="['system:user:edit']" @click="updateStatusByUserId('1')">批量禁用</el-button> <el-button
type="info"
plain
icon="el-icon-upload2"
size="mini"
@click="handleImport"
v-hasPermi="['system:user:import']"
>导入
</el-button>
</el-col> </el-col>
<el-col :span="1.5"> <el-col :span="1.5">
<el-button size="mini" @click="handleExport" v-hasPermi="['system:user:export']">导出</el-button> <el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['system:user:export']"
>导出
</el-button>
</el-col> </el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar> <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
</el-row> </el-row>
<el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange"> <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="50" align="center" /> <el-table-column type="selection" width="50" align="center"/>
<el-table-column label="ID" align="center" key="userId" prop="userId" v-if="columns[0].visible" /> <el-table-column label="用户编号" align="center" key="userId" prop="userId" v-if="columns[0].visible"/>
<el-table-column label="昵称" align="center" key="nickName" prop="nickName" v-if="columns[2].visible" <el-table-column label="用户名称" align="center" key="userName" prop="userName" v-if="columns[1].visible"
:show-overflow-tooltip="true" /> :show-overflow-tooltip="true"/>
<el-table-column label="手机号" align="center" key="phonenumber" prop="phonenumber" v-if="columns[4].visible" <el-table-column label="用户昵称" align="center" key="nickName" prop="nickName" v-if="columns[2].visible"
width="120" /> :show-overflow-tooltip="true"/>
<el-table-column label="微信昵称" align="center" key="wechatNickName" prop="wechatNickName" <el-table-column label="部门" align="center" key="deptName" prop="dept.deptName" v-if="columns[3].visible"
:show-overflow-tooltip="true" /> :show-overflow-tooltip="true"/>
<el-table-column label="账号余额" align="center" key="balance" prop="balance" /> <el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber"
<el-table-column label="头像" align="center"> v-if="columns[4].visible" width="120"/>
<el-table-column label="状态" align="center" key="status" v-if="columns[5].visible">
<template slot-scope="scope"> <template slot-scope="scope">
<el-avatar :size="50" :src="getAvatar(scope.row)" /> <el-switch
v-model="scope.row.status"
active-value="0"
inactive-value="1"
@change="handleStatusChange(scope.row)"
></el-switch>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="性别" align="center"> <el-table-column label="创建时间" align="center" prop="createTime" v-if="columns[6].visible" width="160">
<template slot-scope="scope">
<dict-tag :options="dict.type.sys_user_sex" :value="scope.row.sex" />
</template>
</el-table-column>
<el-table-column label="推荐人" align="center">
<template slot-scope="scope" v-if="scope.row.referrerSysUser">
<span>{{ scope.row.referrerSysUser.nickName }}</span>
</template>
</el-table-column>
<el-table-column label="登陆时间" align="center">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.loginDate) }}</span>
</template>
</el-table-column>
<el-table-column label="注册时间" align="center" prop="createTime" v-if="columns[6].visible" width="160">
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span> <span>{{ parseTime(scope.row.createTime) }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="状态" align="center" v-if="columns[5].visible"> <el-table-column
<template slot-scope="scope"> label="操作"
<dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status" /> align="center"
</template> width="160"
</el-table-column> class-name="small-padding fixed-width"
>
<el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
<template slot-scope="scope" v-if="scope.row.userId !== 1"> <template slot-scope="scope" v-if="scope.row.userId !== 1">
<el-button size="mini" type="text" @click="showDetail(scope.row.userId)" <el-button
v-hasPermi="['system:user:edit']">详情</el-button> size="mini"
<el-button size="mini" type="text" type="text"
@click="updateStatusByUserId(scope.row.status === '0' ? '1' : '0', scope.row.userId)" icon="el-icon-edit"
v-hasPermi="['system:user:edit']">{{ scope.row.status === '0' ? '禁用' : '开启' }}</el-button> @click="handleUpdate(scope.row)"
<el-button size="mini" type="text" @click="showBuyDetail(scope.row.userId)" v-hasPermi="['system:user:edit']"
v-hasPermi="['system:user:edit']">购买明细</el-button> >修改
</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['system:user:remove']"
>删除
</el-button>
<el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)"
v-hasPermi="['system:user:resetPwd', 'system:user:edit']">
<el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="handleResetPwd" icon="el-icon-key"
v-hasPermi="['system:user:resetPwd']">重置密码
</el-dropdown-item>
<el-dropdown-item command="handleAuthRole" icon="el-icon-circle-check"
v-hasPermi="['system:user:edit']">分配角色
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" <pagination
:limit.sync="queryParams.pageSize" @pagination="getList" /> v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</el-col> </el-col>
</el-row> </el-row>
<!-- 添加对话框 --> <!-- 添加或修改用户配置对话框 -->
<el-dialog :title="title" :visible.sync="open" width="800px" append-to-body> <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
<el-divider class="custom-divider" /> <el-form ref="form" :model="form" :rules="rules" label-width="80px">
<base-form :reset="reset" :form="form" :onSuccess="() => { this.open = false; this.getList() }" /> <el-row>
</el-dialog> <el-col :span="12">
<el-form-item label="用户昵称" prop="nickName">
<!-- 用户详情对话框 --> <el-input v-model="form.nickName" placeholder="请输入用户昵称" maxlength="30"/>
<el-dialog :title="title" :visible.sync="detail.open" width="1200px" append-to-body </el-form-item>
@close="getList(); detail.activeName = null"> </el-col>
<el-tabs v-model="detail.activeName" type="card"> <el-col :span="12">
<el-tab-pane label="基本信息" name="base"> <el-form-item label="归属部门" prop="deptId">
<base-form :reset="reset" :form="form" show-detail /> <treeselect v-model="form.deptId" :options="deptOptions" :show-count="true" placeholder="请选择归属部门"/>
</el-tab-pane> </el-form-item>
<el-tab-pane label="钱包明细" name="balance"> </el-col>
<platform-wallet-detail :user-id="form.userId" /> </el-row>
</el-tab-pane> <el-row>
<el-tab-pane label="购买明细" name="buy_detail"> <el-col :span="12">
<platform-buy-detail :user-id="form.userId" /> <el-form-item label="手机号码" prop="phonenumber">
</el-tab-pane> <el-input v-model="form.phonenumber" placeholder="请输入手机号码" maxlength="11"/>
<el-tab-pane v-hasPermi="['platform:address:list']" label="收货地址" name="address"> </el-form-item>
<platform-address :user-id="form.userId" /> </el-col>
</el-tab-pane> <el-col :span="12">
<el-tab-pane label="浏览记录" name="browser_history"> <el-form-item label="邮箱" prop="email">
<platform-history :user-id="form.userId" /> <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50"/>
</el-tab-pane> </el-form-item>
<el-tab-pane label="收藏记录" name="star_history"> </el-col>
<platform-collect :user-id="form.userId" /> </el-row>
</el-tab-pane> <el-row>
<el-tab-pane label="购物车" name="cart"> <el-col :span="12">
<platform-cart :user-id="form.userId" /> <el-form-item v-if="form.userId == undefined" label="用户名称" prop="userName">
</el-tab-pane> <el-input v-model="form.userName" placeholder="请输入用户名称" maxlength="30"/>
<el-tab-pane label="粉丝" name="fans"> </el-form-item>
<platform-follower :user-id="form.userId" /> </el-col>
</el-tab-pane> <el-col :span="12">
<el-tab-pane label="优惠券" name="discount_coupon"> <el-form-item v-if="form.userId == undefined" label="用户密码" prop="password">
<platform-discount :user-id="form.userId" /> <el-input v-model="form.password" placeholder="请输入用户密码" type="password" maxlength="20"
</el-tab-pane> show-password/>
</el-tabs> </el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="用户性别">
<el-select v-model="form.sex" placeholder="请选择性别">
<el-option
v-for="dict in dict.type.sys_user_sex"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="状态">
<el-radio-group v-model="form.status">
<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-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="岗位">
<el-select v-model="form.postIds" multiple placeholder="请选择岗位">
<el-option
v-for="item in postOptions"
:key="item.postId"
:label="item.postName"
:value="item.postId"
:disabled="item.status == 1"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="角色">
<el-select v-model="form.roleIds" multiple placeholder="请选择角色">
<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-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="备注">
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
</el-form-item>
</el-col>
</el-row>
</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>
<!-- 用户导入对话框 --> <!-- 用户导入对话框 -->
<el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body> <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
<el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" <el-upload
:action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading" ref="upload"
:on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag> :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> <i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div> <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<div class="el-upload__tip text-center" slot="tip"> <div class="el-upload__tip text-center" slot="tip">
<div class="el-upload__tip" slot="tip"> <div class="el-upload__tip" slot="tip">
<el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的用户数据 <el-checkbox v-model="upload.updateSupport"/>
是否更新已经存在的用户数据
</div> </div>
<span>仅允许导入xls、xlsx格式文件。</span> <span>仅允许导入xls、xlsx格式文件。</span>
<el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;"
@click="importTemplate">下载模板</el-link> @click="importTemplate">下载模板
</el-link>
</div> </div>
</el-upload> </el-upload>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
@ -181,22 +361,24 @@
</template> </template>
<script> <script>
import { listUser, getUser, delUser, resetUserPwd, changeUserStatus, updateStatus } from "@/api/system/user"; import {
import { getToken } from "@/utils/auth"; addUser,
import { getAvatar } from "@/utils"; changeUserStatus,
import baseForm from "./profile/baseForm" delUser,
import platformAddress from "@/views/platform/user/address" deptTreeSelect,
import platformFollower from "@/views/platform/user/follower" getUser,
import platformCart from "@/views/platform/user/cart" listUser,
import platformCollect from "@/views/platform/user/result/collect" resetUserPwd,
import platformHistory from "@/views/platform/user/result/history" updateUser
import platformDiscount from "@/views/platform/user/discount" } from '@/api/system/user'
import platformBuyDetail from "@/views/platform/user/buyDetail" import { getToken } from '@/utils/auth'
import platformWalletDetail from "@/views/platform/user/walletDetail" import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default { export default {
name: "User", name: 'User',
dicts: ['sys_normal_disable', 'sys_user_sex'], dicts: ['sys_normal_disable', 'sys_user_sex'],
components: { baseForm, platformAddress, platformFollower, platformCart, platformCollect, platformDiscount, platformHistory, platformBuyDetail, platformWalletDetail }, components: { Treeselect },
data() { data() {
return { return {
// 遮罩层 // 遮罩层
@ -214,9 +396,13 @@ export default {
// 用户表格数据 // 用户表格数据
userList: null, userList: null,
// 弹出层标题 // 弹出层标题
title: "", title: '',
// 部门树选项
deptOptions: undefined,
// 是否显示弹出层 // 是否显示弹出层
open: false, open: false,
// 部门名称
deptName: undefined,
// 默认密码 // 默认密码
initPassword: undefined, initPassword: undefined,
// 日期范围 // 日期范围
@ -231,13 +417,6 @@ export default {
children: "children", children: "children",
label: "label" label: "label"
}, },
//用户详情
detail: {
// 是否显示弹出层
open: false,
//激活标签页
activeName: null
},
// 用户导入参数 // 用户导入参数
upload: { upload: {
// 是否显示弹出层（用户导入） // 是否显示弹出层（用户导入）
@ -257,11 +436,10 @@ export default {
queryParams: { queryParams: {
pageNum: 1, pageNum: 1,
pageSize: 10, pageSize: 10,
userId: undefined, userName: undefined,
nickName: undefined,
phonenumber: undefined, phonenumber: undefined,
status: undefined, status: undefined,
sex: undefined deptId: undefined
}, },
// 列信息 // 列信息
columns: [ columns: [
@ -273,66 +451,86 @@ export default {
{ key: 5, label: `状态`, visible: true }, { key: 5, label: `状态`, visible: true },
{ key: 6, label: `创建时间`, visible: true } { key: 6, label: `创建时间`, visible: true }
], ],
// 表单校验
rules: {
userName: [
{ required: true, message: '用户名称不能为空', trigger: 'blur' },
{ min: 2, max: 20, message: '用户名称长度必须介于 2 和 20 之间', trigger: 'blur' }
],
nickName: [
{ required: true, message: '用户昵称不能为空', trigger: 'blur' }
],
password: [
{ required: true, message: '用户密码不能为空', trigger: 'blur' },
{ min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' }
],
email: [
{
type: 'email',
message: '请输入正确的邮箱地址',
trigger: ['blur', 'change']
}
],
phonenumber: [
{
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: '请输入正确的手机号码',
trigger: 'blur'
}
]
}
}; };
}, },
created() { watch: {
this.getList(); // 根据名称筛选部门树
this.getConfigKey("sys.user.initPassword").then(response => { deptName(val) {
this.initPassword = response.msg; this.$refs.tree.filter(val)
}); }
},
methods: {
showBuyDetail(userId) {
this.detail.activeName = 'buy_detail'
this.clickUserId = userId
this.detail.open = true
},
showDetail(userId) {
this.detail.activeName = 'base'
this.clickUserId = userId
}, },
//批量更新用户状态 created() {
updateStatusByUserId(status, userId) {
updateStatus({
userIds: userId === undefined ? this.ids.join(",") : userId,
status
}).then(response => {
this.$modal.msgSuccess(`批量${status === "0" ? "开启" : "禁用"}成功`);
this.getList() this.getList()
this.getDeptTree()
this.getConfigKey('sys.user.initPassword').then(response => {
this.initPassword = response.msg
}) })
}, },
methods: {
getAvatar,
/** 查询用户列表 */ /** 查询用户列表 */
getList() { getList() {
this.loading = true; this.loading = true
listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => { listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
this.userList = response.rows; this.userList = response.rows
this.total = response.total; this.total = response.total
this.loading = false; this.loading = false
} }
); )
},
/** 查询部门下拉树结构 */
getDeptTree() {
deptTreeSelect().then(response => {
this.deptOptions = response.data
})
}, },
// 筛选节点 // 筛选节点
filterNode(value, data) { filterNode(value, data) {
if (!value) return true; if (!value) return true
return data.label.indexOf(value) !== -1; return data.label.indexOf(value) !== -1
}, },
// 节点单击事件 // 节点单击事件
handleNodeClick(data) { handleNodeClick(data) {
this.handleQuery(); this.queryParams.deptId = data.id
this.handleQuery()
}, },
// 用户状态修改 // 用户状态修改
handleStatusChange(row) { handleStatusChange(row) {
let text = row.status === "0" ? "启用" : "停用"; let text = row.status === "0" ? "启用" : "停用";
this.$modal.confirm('确认要"' + text + '""' + row.userName + '"用户吗？').then(function () { this.$modal.confirm('确认要"' + text + '""' + row.userName + '"用户吗？').then(function() {
return changeUserStatus(row.userId, row.status); return changeUserStatus(row.userId, row.status)
}).then(() => { }).then(() => {
this.$modal.msgSuccess(text + "成功"); this.$modal.msgSuccess(text + '成功')
}).catch(function () { }).catch(function() {
row.status = row.status === "0" ? "1" : "0"; row.status = row.status === '0' ? '1' : '0'
}); })
}, },
// 取消按钮 // 取消按钮
cancel() { cancel() {
@ -343,19 +541,17 @@ export default {
reset() { reset() {
this.form = { this.form = {
userId: undefined, userId: undefined,
deptId: undefined,
userName: undefined, userName: undefined,
nickName: undefined, nickName: undefined,
password: undefined, password: undefined,
phonenumber: undefined, phonenumber: undefined,
email: undefined, email: undefined,
sex: undefined, sex: undefined,
status: "0", status: '0',
remark: undefined, remark: undefined,
postIds: [], postIds: [],
roleIds: [], roleIds: []
balance: "0.00",
wechatNickName: undefined,
referrerId: undefined
}; };
this.resetForm("form"); this.resetForm("form");
}, },
@ -366,9 +562,11 @@ export default {
}, },
/** 重置按钮操作 */ /** 重置按钮操作 */
resetQuery() { resetQuery() {
this.dateRange = []; this.dateRange = []
this.resetForm("queryForm"); this.resetForm('queryForm')
this.handleQuery(); this.queryParams.deptId = undefined
this.$refs.tree.setCurrentKey(null)
this.handleQuery()
}, },
// 多选框选中数据 // 多选框选中数据
handleSelectionChange(selection) { handleSelectionChange(selection) {
@ -395,55 +593,76 @@ export default {
getUser().then(response => { getUser().then(response => {
this.postOptions = response.posts; this.postOptions = response.posts;
this.roleOptions = response.roles; this.roleOptions = response.roles;
this.open = true; this.open = true
this.title = "新增用户"; this.title = '添加用户'
this.form.password = this.initPassword; this.form.password = this.initPassword
}); });
}, },
/** 修改按钮操作 */ /** 修改按钮操作 */
handleUpdate() { handleUpdate(row) {
this.reset(); this.reset()
const userId = this.clickUserId const userId = row.userId || this.ids
getUser(userId).then(response => { getUser(userId).then(response => {
this.form = response.data; this.form = response.data
this.postOptions = response.posts; this.postOptions = response.posts
this.roleOptions = response.roles; this.roleOptions = response.roles
this.$set(this.form, "postIds", response.postIds); this.$set(this.form, 'postIds', response.postIds)
this.$set(this.form, "roleIds", response.roleIds); this.$set(this.form, 'roleIds', response.roleIds)
this.title = "用户详情"; this.open = true
this.form.password = ""; this.title = '修改用户'
this.detail.open = true this.form.password = ''
this.form.referrerPhone = this.form.referrerSysUser.phonenumber
}); });
}, },
/** 重置密码按钮操作 */ /** 重置密码按钮操作 */
handleResetPwd(row) { handleResetPwd(row) {
this.$prompt('请输入"' + row.userName + '"的新密码', "提示", { this.$prompt('请输入"' + row.userName + '"的新密码', '提示', {
confirmButtonText: "确定", confirmButtonText: '确定',
cancelButtonText: "取消", cancelButtonText: '取消',
closeOnClickModal: false, closeOnClickModal: false,
inputPattern: /^.{5,20}$/, inputPattern: /^.{5,20}$/,
inputErrorMessage: "用户密码长度必须介于 5 和 20 之间" inputErrorMessage: '用户密码长度必须介于 5 和 20 之间'
}).then(({ value }) => { }).then(({ value }) => {
resetUserPwd(row.userId, value).then(response => { resetUserPwd(row.userId, value).then(response => {
this.$modal.msgSuccess("修改成功，新密码是：" + value); this.$modal.msgSuccess('修改成功，新密码是：' + value)
}); })
}).catch(() => { }); }).catch(() => {
})
}, },
/** 分配角色操作 */ /** 分配角色操作 */
handleAuthRole: function (row) { handleAuthRole: function(row) {
const userId = row.userId; const userId = row.userId
this.$router.push("/system/user-auth/role/" + 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.open = false
this.getList()
})
} else {
addUser(this.form).then(response => {
this.$modal.msgSuccess('新增成功')
this.open = false
this.getList()
})
}
}
})
}, },
/** 删除按钮操作 */ /** 删除按钮操作 */
handleDelete(row) { handleDelete(row) {
const userIds = row.userId || this.ids; const userIds = row.userId || this.ids
this.$modal.confirm('是否确认删除用户编号为"' + userIds + '"的数据项？').then(function () { this.$modal.confirm('是否确认删除用户编号为"' + userIds + '"的数据项？').then(function() {
return delUser(userIds); return delUser(userIds)
}).then(() => { }).then(() => {
this.getList(); this.getList()
this.$modal.msgSuccess("删除成功"); this.$modal.msgSuccess('删除成功')
}).catch(() => { }); }).catch(() => {
})
}, },
/** 导出按钮操作 */ /** 导出按钮操作 */
handleExport() { handleExport() {
@ -477,19 +696,6 @@ export default {
submitFileForm() { submitFileForm() {
this.$refs.upload.submit(); this.$refs.upload.submit();
} }
},
watch: {
'detail.activeName': function (value) {
if (value === 'base' && !this.detail.open) {
this.handleUpdate()
}
}
} }
}; };
</script> </script>
<style scoped lang="scss">
.custom-divider.el-divider {
margin-top: 0 !important;
margin-bottom: 20px !important;
}
</style>

72
src/views/system/user/profile/userAvatar.vue
Unescape View File

@ -1,21 +1,27 @@
<template> <template>
<div> <div>
<div class="user-info-head" :class="{ 'img-circle': circle }" @click="editCropper()"><img v-bind:src="options.img" <div class="user-info-head" @click="editCropper()"><img v-bind:src="options.img" title="点击上传头像"
:title="'点击上传' + title" class="img-lg" :class="{ 'img-circle': circle }" /> class="img-circle img-lg"/></div>
<el-dialog :title="title" :visible.sync="open" width="800px" append-to-body @opened="modalOpened"
</div>
<div v-if="showBottomLabel" style="width: 120px;text-align: center;margin-top: 10px;">{{ title }}</div>
<el-dialog :title="'修改' + title" :visible.sync="open" width="800px" append-to-body @opened="modalOpened"
@close="closeDialog"> @close="closeDialog">
<el-row> <el-row>
<el-col :xs="24" :md="12" :style="{ height: '350px' }"> <el-col :xs="24" :md="12" :style="{height: '350px'}">
<vue-cropper ref="cropper" :img="options.img" :info="true" :autoCrop="options.autoCrop" <vue-cropper
:autoCropWidth="options.autoCropWidth" :autoCropHeight="options.autoCropHeight" :fixedBox="options.fixedBox" ref="cropper"
:outputType="options.outputType" @realTime="realTime" v-if="visible" /> :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>
<el-col :xs="24" :md="12" :style="{ height: '350px' }"> <el-col :xs="24" :md="12" :style="{height: '350px'}">
<div class="avatar-upload-preview" :class="{ 'img-circle': circle }"> <div class="avatar-upload-preview">
<img :src="previews.url" :style="previews.img" /> <img :src="previews.url" :style="previews.img"/>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
@ -29,19 +35,19 @@
</el-button> </el-button>
</el-upload> </el-upload>
</el-col> </el-col>
<el-col :lg="{ span: 1, offset: 2 }" :sm="2" :xs="2"> <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-button icon="el-icon-plus" size="small" @click="changeScale(1)"></el-button>
</el-col> </el-col>
<el-col :lg="{ span: 1, offset: 1 }" :sm="2" :xs="2"> <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-button icon="el-icon-minus" size="small" @click="changeScale(-1)"></el-button>
</el-col> </el-col>
<el-col :lg="{ span: 1, offset: 1 }" :sm="2" :xs="2"> <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-button icon="el-icon-refresh-left" size="small" @click="rotateLeft()"></el-button>
</el-col> </el-col>
<el-col :lg="{ span: 1, offset: 1 }" :sm="2" :xs="2"> <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-button icon="el-icon-refresh-right" size="small" @click="rotateRight()"></el-button>
</el-col> </el-col>
<el-col :lg="{ span: 2, offset: 6 }" :sm="2" :xs="2"> <el-col :lg="{span: 2, offset: 6}" :sm="2" :xs="2">
<el-button type="primary" size="small" @click="uploadImg()">提 交</el-button> <el-button type="primary" size="small" @click="uploadImg()">提 交</el-button>
</el-col> </el-col>
</el-row> </el-row>
@ -50,9 +56,9 @@
</template> </template>
<script> <script>
import store from "@/store"; import store from '@/store'
import { VueCropper } from "vue-cropper"; import { VueCropper } from 'vue-cropper'
import { uploadAvatar } from "@/api/system/user"; import { uploadAvatar } from '@/api/system/user'
import { debounce } from '@/utils' import { debounce } from '@/utils'
export default { export default {
@ -60,17 +66,6 @@ export default {
props: { props: {
user: { user: {
type: Object type: Object
},
circle: {
type: Boolean,
default: true
},
showBottomLabel: {
type: Boolean,
default: false
},
title: {
type: String
} }
}, },
data() { data() {
@ -79,21 +74,22 @@ export default {
open: false, open: false,
// 是否显示cropper // 是否显示cropper
visible: false, visible: false,
// 弹出层标题
title: '修改头像',
options: { options: {
img: store.getters.avatar, //裁剪图片的地址 img: store.getters.avatar, //裁剪图片的地址
autoCrop: true, // 是否默认生成截图框 autoCrop: true, // 是否默认生成截图框
autoCropWidth: 200, // 默认生成截图框宽度 autoCropWidth: 200, // 默认生成截图框宽度
autoCropHeight: 200, // 默认生成截图框高度 autoCropHeight: 200, // 默认生成截图框高度
fixedBox: true, // 固定截图框大小 不允许改变 fixedBox: true, // 固定截图框大小 不允许改变
outputType: "png" // 默认生成截图为PNG格式 outputType: 'png' // 默认生成截图为PNG格式
}, },
previews: {}, previews: {},
resizeHandler: null resizeHandler: null
}; };
}, },
methods: { methods: {
// 编辑 // 编辑头像
editCropper() { editCropper() {
this.open = true; this.open = true;
}, },
@ -144,8 +140,6 @@ export default {
this.$refs.cropper.getCropBlob(data => { this.$refs.cropper.getCropBlob(data => {
let formData = new FormData(); let formData = new FormData();
formData.append("avatarfile", data); formData.append("avatarfile", data);
// TODO:厂商修改LOGO需要更换接口，目前未实现
uploadAvatar(formData).then(response => { uploadAvatar(formData).then(response => {
this.open = false; this.open = false;
this.options.img = process.env.VUE_APP_BASE_API + response.imgUrl; this.options.img = process.env.VUE_APP_BASE_API + response.imgUrl;
@ -172,7 +166,7 @@ export default {
.user-info-head { .user-info-head {
position: relative; position: relative;
display: inline-block; display: inline-block;
background: rgba(0, 0, 0, 0.5); height: 120px;
} }
.user-info-head:hover:after { .user-info-head:hover:after {
@ -183,11 +177,13 @@ export default {
top: 0; top: 0;
bottom: 0; bottom: 0;
color: #eee; color: #eee;
background: rgba(0, 0, 0, 0.5);
font-size: 24px; font-size: 24px;
font-style: normal; font-style: normal;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
cursor: pointer; cursor: pointer;
line-height: 110px; line-height: 110px;
border-radius: 50%;
} }
</style> </style>

Write Preview
Loading…
Cancel
Save