极客观点
项目管理
HarmonyOS
每次点新增，打开，都是上次的数据
<template>
<div>
<!-- 面包屑导航 -->
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>系统管理</el-breadcrumb-item>
<el-breadcrumb-item>用户管理</el-breadcrumb-item>
</el-breadcrumb>
<!-- 卡片视图 -->
<el-card>
<el-form :model="queryInfo" label-width="80px">
<el-row :gutter="20">
<el-col :span="6">
<el-form-item label="用户名">
<el-input v-model="queryInfo.userId"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="用户姓名">
<el-input v-model="queryInfo.userName"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="身份证号">
<el-input v-model="queryInfo.paperNo"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="手机号码">
<el-input v-model="queryInfo.mobileTel"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="6">
<!-- 筛选条件机构树 -->
<el-form-item label="所属机构">
<!-- <el-input style="width:280px" v-model="queryInfo.deptId" placeholder="维护机构"></el-input> -->
<el-popover v-model="treeShow" trigger="click" placement="bottom-start">
<div class="org-tree">
<div class="scroll-style">
<!-- <el-tree ref="orgTree" :data="orgTree" show-checkbox :filter-node-method="filterOrgNode" node-key="deptCode" :props="orgTreeProps" > </el-tree> -->
<el-tree ref="orgTree" show-checkbox node-key="deptCode" :props="props" :load="loadNode" lazy> </el-tree>
</div>
<div class="org-tree-button">
<el-button size="small" type="primary" @click="treeOk">确认</el-button>
<el-button size="small" @click="treeCancel">取消</el-button>
</div>
</div>
<el-input slot="reference" style="width: 100%" readonly @click="treeClick" v-model="queryInfo.deptName" placeholder="请选择机构" />
</el-popover>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="系统角色">
<el-select style="width: 100%" v-model="queryInfo.roleId" placeholder="请选择">
<el-option v-for="item in rolesList" :key="item.roleId" :label="item.roleName" :value="item.roleId"> </el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="用户状态">
<el-select style="width: 100%" v-model="queryInfo.userState" placeholder="请选择用户状态">
<el-option label="激活" value="0"></el-option>
<el-option label="锁定" value="1"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="启用状态">
<el-select style="width: 100%" v-model="queryInfo.userAble" placeholder="请选择用户状态">
<el-option label="启用" value="0"></el-option>
<el-option label="停用" value="1"></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
<!-- 添加按钮 -->
<el-row >
<el-col :span="10">
<el-button type="primary" @click="addMethod">新增</el-button>
<el-button type="primary" @click="getUserList1">查询</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-col>
</el-row>
<!-- 用户列表 -->
<el-table :data="userList" border stripe :header-cell-style="{ background: '#98DBFF', color: 'black' }">
<el-table-column label="用户名" prop="userId"></el-table-column>
<el-table-column label="姓名" prop="userName"></el-table-column>
<el-table-column label="身份证号" prop="paperNo"></el-table-column>
<el-table-column label="所属机构" prop="deptName"></el-table-column>
<!-- <el-table-column label="系统角色" prop="roleName"></el-table-column> -->
<el-table-column label="手机号码" prop="mobileTel"></el-table-column>
<el-table-column label="用户状态" width="150px">
<!-- 自定义列模板，使用作用域插槽，通过scope.row获取当前行的数据修2 -->
<template slot-scope="scope">
<el-switch active-value="0" inactive-value="1" v-model="scope.row.userState" @change="userStateChange(scope.row)"></el-switch>
</template>
</el-table-column>
<el-table-column label="启用状态" width="150px">
<template slot-scope="scope">
<el-switch active-value="0" inactive-value="1" v-model="scope.row.userAble" @change="userAbleChange(scope.row)"></el-switch>
</template>
</el-table-column>
<el-table-column label="操作" width="250px">
<template slot-scope="scope">
<el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.id)"></el-button>
<!-- <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeUserById(scope.row.id)"></el-button> -->
<el-tooltip effect="dark" content="查看用户角色" placement="top" :enterable="false">
<el-button type="warning" icon="el-icon-setting" size="mini" @click="showRoleDialog(scope.row.id)"></el-button>
</el-tooltip>
<el-tooltip effect="dark" content="重置用户密码" placement="top" :enterable="false">
<el-button type="warning" icon="el-icon-refresh" size="mini" @click="showResetDialog(scope.row.id)"></el-button>
</el-tooltip>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="queryInfo.pagenum"
:page-sizes="[10, 30, 50, 100]"
:page-size="queryInfo.pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
>
</el-pagination>
</el-card>
<!-- 添加用户的对话框 -->
<el-dialog :close-on-click-modal="false" :close-on-press-escape="false" title="添加用户" :visible.sync="addDialogVisible" width="30%" @close="addDialogClosed">
<el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="80px" class="demo-ruleForm">
<el-form-item label="用户名" prop="userId" class="demo-form-inline">
<el-input v-model="addForm.userId" placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item label="姓名" prop="userName" class="demo-form-inline">
<el-input v-model="addForm.userName" placeholder="请输入姓名"></el-input>
</el-form-item>
<el-form-item label="身份证号" prop="paperNo" class="demo-form-inline">
<el-input v-model="addForm.paperNo" placeholder="请输入身份证号"></el-input>
</el-form-item>
<!-- 新增用户的所属机构 -->
<el-form-item label="所属机构" class="demo-form-inline">
<!-- <el-input style="width:280px" v-model="queryInfo.deptId" placeholder="维护机构"></el-input> -->
<el-popover v-model="treeShow1" trigger="click" placement="bottom-start">
<div class="org-tree">
<div class="scroll-style">
<!-- <el-tree ref="orgTree1" :data="orgTree1" show-checkbox check-strictly :filter-node-method="filterOrgNode1" node-key="deptCode" :props="orgTreeProps1" @check="checkOrgTree1"> </el-tree> -->
<el-tree ref="orgTree1" show-checkbox node-key="deptCode" :props="props" :load="loadNode" lazy @check="checkOrgTree1"> </el-tree>
</div>
<div class="org-tree-button">
<el-button size="small" type="primary" @click="treeOk1">确认</el-button>
<el-button size="small" @click="treeCancel1">取消</el-button>
</div>
</div>
<el-input slot="reference" style="width: 100%" readonly @click="treeClick1" v-model="addForm.deptName" placeholder="请选择机构" />
</el-popover>
</el-form-item>
<el-form-item label="系统角色" prop="roleId">
<el-select style="width: 100%" v-model="addForm.roleId" placeholder="请选择系统角色" clearable multiple>
<el-option v-for="item in rolesList" :key="item.roleId" :label="item.roleName" :value="item.roleId"> </el-option>
</el-select>
</el-form-item>
<el-form-item label="手机号码" prop="mobileTel" class="demo-form-inline">
<el-input v-model="addForm.mobileTel"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer" style="display: flex; justify-content: center">
<el-button type="primary" @click="addUser">确 定</el-button>
<el-button @click="addDialogVisible = false">取 消</el-button>
</span>
</el-dialog>
<!-- 修改用户的对话框 -->
<el-dialog :close-on-click-modal="false" :close-on-press-escape="false" title="修改用户" :visible.sync="editDialogVisible" width="30%" @close="editDialogClosed">
<el-form :model="editForm" ref="editFormRef" :rules="addFormRules" label-width="80px" class="demo-ruleForm">
<el-form-item label="用户名" prop="userId" class="demo-form-inline">
<el-input v-model="editForm.userId" disabled></el-input>
</el-form-item>
<el-form-item label="姓名" prop="userName" class="demo-form-inline">
<el-input v-model="editForm.userName"></el-input>
</el-form-item>
<el-form-item label="身份证号" prop="paperNo" class="demo-form-inline">
<el-input v-model="editForm.paperNo" disabled></el-input>
</el-form-item>
<el-form-item label="所属机构" prop="deptCode" class="demo-form-inline">
<!-- <el-input v-model="editForm.deptCode"></el-input> -->
<el-popover v-model="treeShow2" trigger="click" placement="bottom-start">
<div class="org-tree">
<div class="scroll-style">
<el-tree ref="orgTree2" :data="orgTree2" show-checkbox check-strictly :filter-node-method="filterOrgNode2" node-key="deptCode" :props="orgTreeProps2" @check="checkOrgTree2"> </el-tree>
</div>
<div class="org-tree-button">
<el-button size="small" type="primary" @click="treeOk2">确认</el-button>
<el-button size="small" @click="treeCancel2">取消</el-button>
</div>
</div>
<el-input slot="reference" style="width: 100%" readonly @click="treeClick1" v-model="editForm.deptName" placeholder="请选择机构" />
</el-popover>
</el-form-item>
<el-form-item label="系统角色" prop="roleId">
<el-select style="width: 100%" v-model="editForm.roleId" placeholder="请选择" @change="$forceUpdate()" clearable multiple>
<el-option v-for="item in rolesList" :key="item.roleId" :label="item.roleName" :value="item.roleId"> </el-option>
</el-select>
</el-form-item>
<el-form-item label="手机号码" prop="mobileTel" class="demo-form-inline">
<el-input v-model="editForm.mobileTel"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer" style="display: flex; justify-content: center">
<el-button type="primary" @click="editUser">确 定</el-button>
<el-button @click="editDialogVisible = false">取 消</el-button>
</span>
</el-dialog>
<el-dialog :close-on-click-modal="false" :close-on-press-escape="false" title="用户角色列表" :visible.sync="roleDialogVisible" width="30%" append-to-body>
<el-table :data="showRole" border style="width: 100%">
<el-table-column header-align="center" align="center" prop="roleName" label="角色名称"> </el-table-column>
</el-table>
<span slot="footer">
<el-button @click="roleDialogVisible = false">取 消</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
// form: {
// userId:"",
// userName:"",
// paperNo:"",
// mobileTel:"",
// deptId:"",
// roleId:"",
// userState:"",
// },
// 查询用户列表的参数对象
queryInfo: {
// userId:this.form.userId,
// userName:this.form.userName,
// paperNo:this.form.paperNo,
// mobileTel:this.form.mobileTel,
// deptId:this.form.deptId,
// roleId:this.form.roleId,
// userState:this.form.userState,
userId: '',
userName: '',
paperNo: '',
mobileTel: '',
deptId: '',
roleId: '',
userState: '',
userAble: '',
pagenum: 1, // 页码
pagesize: 10, // 页大小
deptName: '',
deptCode: '',
},
// 用户列表数据
userList: [],
// 总记录数
total: 0,
// 添加对话框的显示或隐藏
addDialogVisible: false,
// 添加用户的表单数据对象
addForm: {
userId: '',
userName: '',
paperNo: '',
mobileTel: '',
deptCode: '',
roleId: '',
deptName: '',
rolesId: '',
},
// 添加用户的校验规则
addFormRules: {
userId: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ max: 20, message: '长度最多20个字符', required: true, trigger: 'change' },
],
userName: [
{ required: true, message: '请输入姓名', trigger: 'blur' },
{ max: 10, message: '长度最多10个字符', required: true, trigger: 'change' },
],
roleId: [
{ required: true, message: '请输入系统角色', trigger: 'blur' },
],
paperNo: [
{ required: true, message: '请输入身份证号', trigger: 'blur' },
{
pattern: /^(([1-9][0-9]{5}(19|20)[0-9]{2}((0[1-9])|(1[0-2]))([0-2][1-9]|10|20|30|31)[0-9]{3}([0-9]|X|x))|([1-9][0-9]{5}[0-9]{2}((0[1-9])|(1[0-2]))([0-2][1-9]|10|20|30|31)[0-9]{3}))$/,
required: true,
message: '请输入正确身份证号',
trigger: 'change',
},
],
mobileTel: [
{ required: true, message: '请输入手机号', trigger: 'blur' },
{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, required: true, message: '请输入正确的手机号码', trigger: 'change' },
],
},
// 修改对话框的显示或隐藏
editDialogVisible: false,
editForm: {},
roleDialogVisible: false,
userInfo: {
userId: '',
// userName:'',
// roleName:'',
},
rolesList: [],
selectedRoleId: null,
treeShow: false, // 机构数展开与隐藏
orgTree: [], // 机构列表
props: {
label: 'deptName',
},
orgList: [],
treeShow1: false, // 机构数展开与隐藏
orgTree1: [], // 机构列表
orgTreeProps1: {
children: 'childList',
label: 'deptName',
},
orgList1: [],
treeShow2: false, // 机构数展开与隐藏
orgTree2: [], // 机构列表
orgTreeProps2: {
children: 'childList',
label: 'deptName',
},
orgList2: [],
showRole: {},
}
},
created() {
this.getUserList()
//this.getOrgTree()
},
methods: {
// 获取顶级
async getFirstOrg(resolve) {
const { data: res } = await this.$http.post('dept/getFirstOrg', {
firstOrgType:"admin"
})
if (res.code !== '1') {
return this.$message.error(res.msg)
}
//判断请求回来数据是不是空的
if(res.obj.deptInfo.length > 0){
let orgList = res.obj.deptInfo;
//将处理好的数据扔给resolve函数,数据就会自动渲染到树形上
return resolve(orgList);
}else{
//如果数据是空的 直接扔空数组给resolve
return resolve([])
}
},
//获取下一级
async getNewOrgLazy(resolve,id) {
const { data: res } = await this.$http.post('dept/getNewOrgLazy', {
deptCode:id
})
//判断请求回来数据是不是空的
if(res.obj.deptInfo.length > 0){
let orgList = res.obj.deptInfo;
//将处理好的数据给resolve函数,数据就会自动渲染到树形上
return resolve(orgList);
}else{
//如果数据是空的 直接扔空数组给resolve
return resolve([])
}
},
loadNode(node, resolve) {
//node.level判断当前是不是第一级
if (node.level === 0) {
//当前为第一级
this.getFirstOrg(resolve)
}else{
//查询下级
this.getNewOrgLazy(resolve,node.data.deptCode)
}
},
resetForm() {
this.queryInfo = {
userId: '',
userName: '',
paperNo: '',
mobileTel: '',
deptId: '',
roleId: '',
userState: '',
userAble: '',
pagenum: 1, // 页码
pagesize: 10, // 页大小
deptName: '',
deptCode: '',
}
// this.getUserList()
},
// 数据重组
resetOrgList(list) {
console.log('list', list, list.length)
const that = this
for (let i = 0; i < list.length; i++) {
let obj = list[i]
// delete obj.childList
this.orgList.push(obj)
if (list[i].childList) {
that.resetOrgList(list[i].childList)
}
}
},
resetOrgList1(list) {
console.log('list', list, list.length)
const that = this
for (let i = 0; i < list.length; i++) {
let obj = list[i]
// delete obj.childList
this.orgList1.push(obj)
if (list[i].childList) {
that.resetOrgList1(list[i].childList)
}
}
},
resetOrgList2(list) {
console.log('list', list, list.length)
const that = this
for (let i = 0; i < list.length; i++) {
let obj = list[i]
// delete obj.childList
this.orgList2.push(obj)
if (list[i].childList) {
that.resetOrgList2(list[i].childList)
}
}
},
// 获取机构列表
async getOrgTree() {
const { data: res } = await this.$http.get('dept/getDeptAdmin', {
params: { keyWord: '' },
})
if (res.code !== '1') {
return this.$message.error(res.msg)
}
this.orgTree = res.obj.deptInfo
// 重组上级机构数据为列表，用于下拉框
this.orgList = []
this.resetOrgList(this.orgTree)
},
async getOrgTree1() {
const { data: res } = await this.$http.get('dept/getDeptAdmin', {
params: { keyWord: '' },
})
if (res.code !== '1') {
return this.$message.error(res.msg)
}
this.orgTree1 = res.obj.deptInfo
// 重组上级机构数据为列表，用于下拉框
this.orgList1 = []
this.resetOrgList1(this.orgTree1)
},
async getOrgTree2() {
const { data: res } = await this.$http.get('dept/getDeptAdmin', {
params: { keyWord: '' },
})
if (res.code !== '1') {
return this.$message.error(res.msg)
}
this.orgTree2 = res.obj.deptInfo
// 重组上级机构数据为列表，用于下拉框
this.orgList2 = []
this.resetOrgList2(this.orgTree2)
},
// 点击机构选择确定按钮
treeOk() {
const checkNodes = this.$refs.orgTree.getCheckedNodes()
this.queryInfo.deptName = ''
this.queryInfo.deptCode = ''
if (checkNodes.length < 1) {
this.$message.warning('请选择机构!')
} else if (checkNodes.length >= 1) {
for (let index = 0; index < checkNodes.length; index++) {
this.queryInfo.deptName += checkNodes[index].deptName + ','
this.queryInfo.deptCode += checkNodes[index].deptCode + ','
}
this.queryInfo.deptName = this.queryInfo.deptName.substring(0,this.queryInfo.deptName.lastIndexOf(','));
this.queryInfo.deptCode = this.queryInfo.deptCode.substring(0,this.queryInfo.deptCode.lastIndexOf(','));
this.treeShow = false
}
},
treeOk1() {
const checkNodes1 = this.$refs.orgTree1.getCheckedNodes()
if (checkNodes1.length < 1) {
this.$message.warning('请选择机构!')
} else if (checkNodes1.length >= 1) {
this.addForm.deptName = checkNodes1[0].deptName
this.addForm.deptCode = checkNodes1[0].deptCode
this.treeShow1 = false
}
},
treeOk2() {
const checkNodes2 = this.$refs.orgTree2.getCheckedNodes()
if (checkNodes2.length < 1) {
this.$message.warning('请选择机构!')
} else if (checkNodes2.length >= 1) {
this.editForm.deptName = checkNodes2[0].deptName
this.editForm.deptCode = checkNodes2[0].deptCode
this.treeShow2 = false
}
},
// 点击机构数取消按钮
treeCancel() {
this.treeShow = false
},
treeCancel1() {
this.treeShow1 = false
},
treeCancel2() {
this.treeShow2 = false
},
// 点击机构数确认按钮
checkOrgTree(a, b) {
if (b.checkedKeys.length > 0) {
this.$refs.orgTree.setCheckedKeys([a.deptCode])
}
},
checkOrgTree1(a, b) {
if (b.checkedKeys.length > 0) {
this.$refs.orgTree1.setCheckedKeys([a.deptCode])
}
},
checkOrgTree2(a, b) {
if (b.checkedKeys.length > 0) {
this.$refs.orgTree2.setCheckedKeys([a.deptCode])
}
},
// 点击机构数输入框
treeClick() {
this.treeShow = !this.treeShow
},
treeClick1() {
this.treeShow1 = !this.treeShow1
},
treeClick2() {
this.treeShow2 = !this.treeShow2
},
// 过滤
filterOrgNode(value, data) {
if (!value) return true
return data.deptName.indexOf(value) !== -1
},
filterOrgNode1(value, data) {
if (!value) return true
return data.deptName.indexOf(value) !== -1
},
filterOrgNode2(value, data) {
if (!value) return true
return data.deptName.indexOf(value) !== -1
},
//查询
getUserList1(){
this.queryInfo.pagenum =1
this.queryInfo.pagesize = 10
this.getUserList()
},
// 获取用户列表数据
async getUserList() {
const { data: res } = await this.$http.post('user/getUsersPage', this.queryInfo)
if (res.code !== '1') {
return this.$message.error(res.msg)
}
this.userList = res.obj.userList
this.total = res.obj.count
this.updateMethod()
},
// 监听pagesize改变的事件
handleSizeChange(pagesize) {
this.queryInfo.pagesize = pagesize
this.getUserList()
},
// 监听pagenum的事件
handleCurrentChange(pagenum) {
this.queryInfo.pagenum = pagenum
this.getUserList()
},
// 监听 switch 开关状态的改变
async userStateChange(userinfo) {
const { data: res } = await this.$http.get('user/enableOrDisableUser', {
params: {
userId: userinfo.userId,
userStatus: userinfo.userState,
},
})
if (res.code !== '1') {
userinfo.userStatus = userinfo.userStatus == 1 ? '0' : '1'
return this.$message.error(res.msg)
}
if(userinfo.userState=='0'){
this.$message.success('用户已激活！')
}else{
this.$message.success('用户已锁定！')
}
},
// 监听 是否停用的 switch 开关状态的改变
async userAbleChange(userinfo) {
const { data: res } = await this.$http.get('user/enableOrUserAble', {
params: {
userId: userinfo.userId,
userAble: userinfo.userAble,
},
})
if (res.code !== '1') {
userinfo.userAble = userinfo.userAble == 1 ? '0' : '1'
return this.$message.error(res.msg)
}
this.$message.success('更新用户停用状态成功！')
},
// 监听添加用户对话框的关闭事件
addDialogClosed() {
this.$refs.addFormRef.resetFields()
},
async addMethod() {
this.addForm.deptName = ''
this.addDialogVisible = true
//this.getOrgTree1()
},
// 添加用户
addUser() {
this.$refs.addFormRef.validate(async (valid) => {
if (!valid) {
return
}
if(this.addForm.deptName ==''||this.addForm.deptName==undefined||this.addForm.deptName==null){
return this.$message.warning("请选择所属机构")
}
let ids = this.addForm.roleId
this.addForm.rolesId = ids.toString()
const { data: res } = await this.$http.post('user/createUsers', this.addForm)
if (res.code !== '1') {
return this.$message.error(res.msg)
}
// 关闭对话框
this.addDialogVisible = false
// 刷新用户列表
this.getUserList()
// 提示添加成功
this.$message.success(res.msg)
this.addForm.roleId = ''
})
},
// 获取用户信息角色列表
async showRoleDialog(id) {
const { data: res } = await this.$http.get('user/getRoleById', {
params: {
id: id,
},
})
if (res.code !== '1') {
return this.$message.error(res.msg)
}
this.showRole = res.obj.userInfo
this.roleDialogVisible = true
},
// 显示编辑用户对话框
async showEditDialog(id) {
const { data: res } = await this.$http.get('user/getUserInfoById', {
params: {
id: id,
},
})
if (res.code !== '1') {
return this.$message.error(res.msg)
}
this.editForm = res.obj.userInfo
let roleId = res.obj.userInfo.roleList.toString()
let ids = roleId.split(',')
for (var i = 0; i < ids.length; i++) {
ids[i] = parseInt(ids[i])
}
this.editForm.roleId = ids
this.editDialogVisible = true
this.updateMethod()
this.getOrgTree2()
},
async updateMethod() {
const { data: res } = await this.$http.get('/role/getRolesByAdmin')
if (res.code !== '1') {
return this.$message.error('获取角色列表失败')
}
this.rolesList = res.obj.rolesList
},
// 修改用户
editUser() {
this.$refs.editFormRef.validate(async (valid) => {
if (!valid) {
return
}
if(this.editForm.deptName ==''||this.editForm.deptName==undefined||this.editForm.deptName==null){
return this.$message.warning("请选择所属机构")
}
let ids = this.editForm.roleId
this.editForm.rolesId = ids.toString()
this.editForm.roleId = ''
const { data: res } = await this.$http.post('user/updateUser', this.editForm)
if (res.code !== '1') {
return this.$message.error(res.msg)
}
this.editDialogVisible = false
this.getUserList()
this.$message.success('修改用户成功！')
})
},
// 监听修改用户对话框的关闭事件
editDialogClosed() {
this.$refs.editFormRef.resetFields()
},
// 根据ID删除用户
removeUserById(id) {
this.$confirm('确定要删除该用户吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
.then(async () => {
const { data: res } = await this.$http.get('user/delUserInfoById', {
params: {
id: id,
},
})
if (res.code !== '1') {
return this.$message.error(res.msg)
}
this.getUserList()
this.$message.success('删除用户成功！')
})
.catch(() => {
this.$message.info('已取消删除')
})
},
// 根据ID重置用户密码
showResetDialog(id) {
this.$confirm('确定要重置该用户吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
.then(async () => {
const { data: res } = await this.$http.get('user/resetUserInfoById', {
params: {
id: id,
},
})
if (res.code !== '1') {
return this.$message.error(res.msg)
}
this.getUserList()
this.$message.success('重置成功,用户初始密码为Ab111111')
})
.catch(() => {
this.$message.info('已取消用户密码重置')
})
},
},
}
</script>
<style lang="less" scoped>
.demo-form-inline /deep/.el-input__inner {
text-align: center;
}
.scroll-style {
max-height: 200px;
overflow: auto;
border-radius: 5px;
}
</style>
vue 是数据驱动，所以你只需要给数据的值清空即可。
如果是组件内部维护状态，那么一般来说是让组件重新渲染，你加一个
v-if="addDialogVisible"即可