parent
94a40e7db4
commit
2ce13ea143
@ -0,0 +1,140 @@
|
||||
<template>
|
||||
<div style="margin: 20px">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-input v-model="search" placeholder="输入关键字搜索" suffix-icon="el-icon-search"/>
|
||||
</el-col>
|
||||
<el-col :span="16" style="text-align: left">
|
||||
<el-button type="success" style="width: 120px;text-align: left" icon="el-icon-circle-plus-outline"
|
||||
@click="addUser">新增用户
|
||||
</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-table
|
||||
ref="multipleTable"
|
||||
:data="tableDataComputed"
|
||||
border
|
||||
style="width: 100%;margin-top: 20px">
|
||||
<el-table-column type="selection" width="40" align="center"></el-table-column>
|
||||
<el-table-column prop="username" label="工号" sortable></el-table-column>
|
||||
<el-table-column prop="position" label="职位" sortable></el-table-column>
|
||||
<el-table-column prop="nickname" label="姓名" sortable></el-table-column>
|
||||
<el-table-column prop="tel" label="联系电话"></el-table-column>
|
||||
<el-table-column prop="office" label="办公室" sortable></el-table-column>
|
||||
<el-table-column prop="email" label="邮箱"></el-table-column>
|
||||
<el-table-column fixed="right" label="操作" width="300">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="handleClick(scope.row)" size="mini" plain>查看课表</el-button>
|
||||
<el-button @click="editUser(scope.row)" type="primary" size="mini" plain icon="el-icon-edit">编辑
|
||||
</el-button>
|
||||
<el-button @click="deleteUser(scope.row)" type="danger" size="mini" plain icon="el-icon-delete">删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<user-edit-form
|
||||
:dialog-form-visible="dialogFormVisible"
|
||||
:edit="edit"
|
||||
:user-form="userForm"
|
||||
@cancel="cancel"
|
||||
@confirm="confirm"
|
||||
></user-edit-form>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {get, post} from "~/utils";
|
||||
import {showDialog, showFail, showSuccess} from "~/utils/dialog";
|
||||
import userEditForm from "~/components/supManager/userEditForm";
|
||||
|
||||
export default {
|
||||
components: {userEditForm},
|
||||
data() {
|
||||
return {
|
||||
search: '',
|
||||
tableData: [{
|
||||
nickname: "",
|
||||
tel: "",
|
||||
email: "",
|
||||
username: "",
|
||||
office: "",
|
||||
position:'',
|
||||
uid: 0
|
||||
}],
|
||||
dialogFormVisible: false,
|
||||
edit: false,
|
||||
userForm: {
|
||||
nickname: "",
|
||||
tel: "",
|
||||
email: "",
|
||||
username: "",
|
||||
office: "",
|
||||
position: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
,
|
||||
methods: {
|
||||
async load() {
|
||||
this.tableData = await get('lb/user/getUserList')
|
||||
},
|
||||
handleClick(row) {
|
||||
console.log(row);
|
||||
},
|
||||
addUser() {
|
||||
this.edit = false
|
||||
this.userForm = {
|
||||
nickname: "",
|
||||
tel: "",
|
||||
email: "",
|
||||
username: "",
|
||||
office: "",
|
||||
position: ''
|
||||
}
|
||||
this.dialogFormVisible = true
|
||||
},
|
||||
// 删除用户
|
||||
async deleteUser(item) {
|
||||
await showDialog("确认要删除吗?", this)
|
||||
await post('lb/user/deleteUser', {
|
||||
uid: item.uid
|
||||
}).then(() => {
|
||||
showSuccess("删除成功", this)
|
||||
this.load()
|
||||
}).catch(e => {
|
||||
showFail("删除失败 " + e.msg, this)
|
||||
})
|
||||
},
|
||||
// 编辑用户
|
||||
async editUser(item) {
|
||||
await showDialog('确认编辑该用户吗?',this)
|
||||
this.edit = true
|
||||
this.userForm = item
|
||||
this.dialogFormVisible = true
|
||||
},
|
||||
cancel(){
|
||||
console.log(1)
|
||||
this.dialogFormVisible = false
|
||||
},
|
||||
confirm(){
|
||||
this.load()
|
||||
this.cancel()
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
tableDataComputed() {
|
||||
return this.tableData.filter(data => !this.search
|
||||
|| data.username.toLowerCase().includes(this.search.toLowerCase())
|
||||
|| data.tel.toLowerCase().includes(this.search.toLowerCase())
|
||||
|| data.nickname.toLowerCase().includes(this.search.toLowerCase())
|
||||
|| data.office.toLowerCase().includes(this.search.toLowerCase())
|
||||
|| data.email.toLowerCase().includes(this.search.toLowerCase())
|
||||
)
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
this.load()
|
||||
}
|
||||
}
|
||||
</script>
|
Loading…
Reference in new issue