html
<template>
<div style="margin:20px; display: flex; ">
<div class="ocontent" style="width:100%;">
<div class="search">
<p>
<span>用户名：</span>
<el-input class="oinput" v-model="person.userName" placeholder="请输入用户名"></el-input>
</p>
<p>
<span>真实姓名：</span>
<el-input class="oinput" v-model="person.loginName" placeholder="请输入真实姓名"></el-input>
</p>
<p>
<el-button slot="reference" type="primary" @click="getList" icon="el-icon-search">查询</el-button>
<el-button type="" @click="reset">重置</el-button>
<el-button slot="" type="primary" @click="dialogFormVisible = true" icon="el-icon-circle-plus-outline">添加帐号</el-button>
</p>
</div>
<el-table :header-cell-style="{background:'#3498db',color:'#fff'}" ref="multipleTable" border :row-class-name="tableRowClassName"
:data="needImportList" tooltip-effect="dark" style="width: 100%">
<el-table-column prop="userName" label="用户姓名"> </el-table-column>
<el-table-column prop="loginName" label="真实姓名"> </el-table-column>
<el-table-column prop="roleName" label="角色类别"> </el-table-column>
<el-table-column label="操作">
<template scope="scope">
<el-button size="small" @click="handleEdit(scope.$index, scope.row,false)">编辑</el-button>
<el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<div style="text-align:right;margin:20px 0;">
<el-pagination background @size-change="sizeChange" @current-change="currentChange" layout="sizes,prev, pager, next"
:total="totalSize">
</el-pagination>
</div>
</div>
<el-dialog title="添加帐号" :visible.sync="dialogFormVisible">
<el-form ref="form" :model="form" label-width="120px">
<el-form-item label="用户登录名">
<el-input v-model="form.userName"></el-input>
</el-form-item>
<el-form-item label="用户真实姓名">
<el-input v-model="form.loginName"></el-input>
</el-form-item>
<el-form-item label="角色分类">
<el-cascader expand-trigger="hover" :props="casrule" :options="options" v-model="roleId">
</el-cascader>
</el-form-item>
<el-form-item label="用户登录密码">
<el-input v-model="form.password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">立即创建</el-button>
</el-form-item>
</el-form>
</el-dialog>
<el-dialog title="编辑" :visible.sync="dialogFormVisible1" @close='closeDialog'>
<el-form :model="editForm" label-width="120px" ref="editForm" :rules="rules">
<el-form-item label="用户姓名" prop="userName">
<el-input v-model="editForm.userName" placeholder="请输入用户姓名"></el-input>
</el-form-item>
<el-form-item label="真实姓名" prop="loginName">
<el-input v-model="editForm.loginName" placeholder="请输入真实姓名"></el-input>
</el-form-item>
<el-form-item label="角色类别" prop="roleName">
<el-input v-model="editForm.roleName" placeholder="请输入角色类别" name="resourcesname" @change="checkname" v-show="show"></el-input>
<template>
<el-cascader expand-trigger="hover" :props="casrule" :options="options" v-model="roleId" v-show="show2">
</el-cascader>
</template>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('editForm')">确认修改</el-button>
</el-form-item>
</el-form>
</el-dialog>
</div>
</template>
js
<script>
export default {
data() {
return {
form: {
userName: '',
loginName: '',
password: ''
},
dialogFormVisible: false,
dialogFormVisible1: false,
roleId: [],
options: [],
casrule: {
label: 'roleName',
value: 'roleId',
children: 'child'
},
tableData: [],
person: {},
select: [],
needImportList: [],
editForm: {
userName: '',
loginName: '',
//password: '',
roleName: '',
//roleId:'',
},
rules: {
userName: [{
required: true,
message: '请输入用户姓名',
trigger: 'blur'
}, ],
loginName: [{
required: true,
message: '请输入真实姓名',
trigger: 'blur'
}, ],
},
show: true,
show2: false,
totalSize: 0,
current: 1,
size: 10,
selectedOptions3: ['zujian', 'data', 'tag']
}
},
mounted() {
this.getRoleList()
},
methods: {
onSubmit() {
for (const key in this.form) {
if (!this.form[key]) {
this.$message.error('请完善信息')
return;
}
}
if (!this.roleId.length) {
this.$message.error('请完善信息')
return;
}
this.$request.post('sysUser/insert', {
...this.form,
roleId: this.roleId[1]
}, res => {
if (res.result == '1') {
this.$message('创建成功')
} else {
this.$message(res.msg)
}
})
},
getRoleList() {
this.$request.get('zzRole/listForTree', {
current: 1,
size: 100
}, res => {
this.options = res.data;
this.getList()
})
},
getList() {
var _this = this;
this.$request.get('/sysUser/listPage', {
loginName: _this.person.userName,
userName: _this.person.loginName,
current: this.current,
size: this.size
}, function(res) {
//console.log(res)
_this.needImportList = res.data.records;
_this.totalSize = res.data.total
})
},
tableRowClassName({
row,
rowIndex
}) {
if (rowIndex % 2) {
return 'bg-f6'
}
return ''
},
sizeChange(val) {
this.size = val;
this.getList();
},
currentChange(val) {
this.current = val;
this.getList();
},
find() {
this.getList();
},
reset() {
this.person = {}
this.getList();
},
handleEdit(index, row) {
this.dialogFormVisible1 = true;
this.editForm = Object.assign({}, row);
},
//删除
handleDelete(index, row) {
this.$request.post('sysUser/delete', {
id: row.id,
}, res => {
if (res.result == '1') {
this.$message('删除成功')
location.reload()
} else {}
})
},
//重置
resetForm(formName) {
this.$refs[formName].resetFields();
},
checkname: function() {
if (this.resourcesname != "") {
this.$message('请重新选择角色类别')
this.show = false;
this.show2 = true;
} else {
}
},
//修改
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.$request.post('sysUser/update', {
...this.editForm,
}, res => {
if (res.result == '1') {
this.$message('修改成功')
} else {
console.log(res.msg)
}
})
}
if (this.resourcesname != "") {
this.$request.post('sysUser/update', {
...this.editForm,
roleId: this.roleId[1],
}, res => {
if (res.result == '1') {
this.$message('修改成功')
} else {}
})
} else {
console.log('error submit!!');
return false;
}
});
},
closeDialog() {
location.reload()
},
}
}
</script>
