tangxuan
/
yy_rms_39zhiyao_duizhao
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(src/views/user): 用户增删改查 及权限列表接口接入

Browse Source
duizhaopin_ui
duan 2 years ago
parent fac4262763
commit 79327b463b
4 changed files with 198 additions and 86 deletions
Show Stats Download Patch File Download Diff File

58
src/api/user/user.js
Unescape View File

@ -8,17 +8,61 @@ export function login(data) {
}) })
} }
export function getInfo(token) { export function get_user_list(data) {
return request({ return request({
url: '/vue-admin-template/user/info', url: '/api/user/get_user_list',
method: 'get', method: 'post',
params: { token } data
})
}
// /api/user/add
export function add(data) {
return request({
url: '/api/user/add',
method: 'post',
data
}) })
} }
export function logout() { // /api/power/user_power
export function user_power(data) {
return request({ return request({
url: '/api/user/logout', url: '/api/power/user_power',
method: 'post' method: 'post',
data
}) })
} }
// /api/user/update
export function update(data) {
return request({
url: '/api/user/update',
method: 'post',
data
})
}
// /api/user/del
export function del(data) {
return request({
url: '/api/user/del',
method: 'post',
data
})
}
// export function getInfo(token) {
// return request({
// url: '/vue-admin-template/user/info',
// method: 'get',
// params: { token }
// })
// }
//
// export function logout() {
// return request({
// url: '/api/user/logout',
// method: 'post'
// })
// }

81
src/components/UserForm/index.vue
Unescape View File

@ -3,20 +3,20 @@
<el-row :gutter="15"> <el-row :gutter="15">
<el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="80px"> <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="80px">
<el-col :span="12"> <el-col :span="12">
<el-form-item label="姓名" prop="姓名"> <el-form-item label="姓名" prop="real_name">
<el-input v-model="formData.姓名" placeholder="请输入姓名" clearable :style="{width: '100%'}" /> <el-input v-model="formData.real_name" placeholder="请输入姓名" clearable :style="{width: '100%'}" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="手机号码" prop="field101"> <el-form-item label="手机号码" prop="mobile">
<el-input v-model="formData.field101" placeholder="请输入手机号码" clearable :style="{width: '100%'}" /> <el-input v-model="formData.mobile" placeholder="请输入手机号码" clearable :style="{width: '100%'}" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="性别" prop="field103"> <el-form-item label="性别" prop="sex">
<el-select v-model="formData.field103" placeholder="请选择性别" clearable :style="{width: '100%'}"> <el-select v-model="formData.sex" placeholder="请选择性别" clearable :style="{width: '100%'}">
<el-option <el-option
v-for="(item, index) in field103Options" v-for="(item, index) in sexOptions"
:key="index" :key="index"
:label="item.label" :label="item.label"
:value="item.value" :value="item.value"
@ -26,36 +26,35 @@
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="电子邮箱" prop="field104"> <el-form-item label="电子邮箱" prop="email">
<el-input v-model="formData.field104" placeholder="请输入电子邮箱" clearable :style="{width: '100%'}" /> <el-input v-model="formData.email" placeholder="请输入电子邮箱" clearable :style="{width: '100%'}" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="工号" prop="field105"> <el-form-item label="工号" prop="user_code">
<el-input v-model="formData.field105" placeholder="请输入工号" clearable :style="{width: '100%'}" /> <el-input v-model="formData.user_code" placeholder="请输入工号" clearable :style="{width: '100%'}" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="QQ号码" prop="field106"> <el-form-item label="QQ号码" prop="qq">
<el-input v-model="formData.field106" placeholder="请输入QQ号码" clearable :style="{width: '100%'}" /> <el-input v-model="formData.qq" placeholder="请输入QQ号码" clearable :style="{width: '100%'}" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="角色" prop="field107"> <el-form-item label="角色" prop="role_id">
<el-select v-model="formData.field107" placeholder="请选择角色" clearable :style="{width: '100%'}"> <el-select v-model="formData.role_id" placeholder="请选择角色" clearable :style="{width: '100%'}">
<el-option <el-option
v-for="(item, index) in field107Options" v-for="item in roledata"
:key="index" :key="item.module_id"
:label="item.label" :label="item.module_name"
:value="item.value" :value="item.module_id"
:disabled="item.disabled"
/> />
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="是否启用" prop="field108" required> <el-form-item label="是否启用" prop="is_enabled" required>
<el-switch v-model="formData.field108" /> <el-switch v-model="formData.is_enabled" />
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-form> </el-form>
@ -71,52 +70,52 @@ export default {
name: 'UserForm', name: 'UserForm',
components: {}, components: {},
// eslint-disable-next-line vue/require-prop-types // eslint-disable-next-line vue/require-prop-types
props: ['handlecancel', 'propsformdata', 'handlesubmit'], props: ['handlecancel', 'propsformdata', 'handlesubmit', 'roledata'],
data() { data() {
return { return {
formData: { formData: {
姓名: undefined, real_name: undefined,
field101: undefined, mobile: undefined,
field103: undefined, sex: undefined,
field104: undefined, email: undefined,
field105: undefined, user_code: undefined,
field106: undefined, qq: undefined,
field107: undefined, role_id: undefined,
field108: false is_enabled: false
}, },
rules: { rules: {
姓名: [{ real_name: [{
required: true, required: true,
message: '请输入姓名', message: '请输入姓名',
trigger: 'blur' trigger: 'blur'
}], }],
field101: [{ mobile: [{
required: true, required: true,
message: '请输入手机号码', message: '请输入手机号码',
trigger: 'blur' trigger: 'blur'
}], }],
field103: [{ sex: [{
required: true, required: true,
message: '请选择性别', message: '请选择性别',
trigger: 'change' trigger: 'change'
}], }],
field104: [], email: [],
field105: [], user_code: [],
field106: [], qq: [],
field107: [{ role_id: [{
required: true, required: true,
message: '请选择角色', message: '请选择角色',
trigger: 'change' trigger: 'change'
}] }]
}, },
field103Options: [{ sexOptions: [{
'label': '男', 'label': '男',
'value': 1 'value': 1
}, { }, {
'label': '女', 'label': '女',
'value': 2 'value': 0
}], }],
field107Options: [{ role_idOptions: [{
'label': '选项一', 'label': '选项一',
'value': 1 'value': 1
}, { }, {

6
src/styles/index.scss
Unescape View File

@ -63,3 +63,9 @@ div:focus {
.app-container { .app-container {
padding: 20px; padding: 20px;
} }
.el-dialog__title{
font-size: 1.125rem;
font-weight: 400;
color: #000000;
}

139
src/views/user/index.vue
Unescape View File

@ -2,18 +2,27 @@
<div class="main-container"> <div class="main-container">
<div class="title">用户管理</div> <div class="title">用户管理</div>
<div class="header"> <div class="header">
<el-input placeholder="请输入工号" /> <el-input v-model="user_code" placeholder="请输入工号" />
<el-input placeholder="请输入姓名" /> <el-input v-model="real_name" placeholder="请输入姓名" />
<el-select placeholder="请输入角色" :value="manageer" /> <el-select v-model="role_id" placeholder="请输入角色" :value="manageer">
<el-select placeholder="账号状态" :value="manageer" /> <el-option
v-for="item in roleData"
:key="item.module_id"
:label="item.module_name"
:value="item.module_id"
/>
</el-select>
<el-select v-model="is_enabled" placeholder="账号状态" :value="manageer" />
<el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button> <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
<el-button type="primary" plain @click="handleAddUser()"><i class="el-icon-plus" />新增用户</el-button> <el-button type="primary" plain @click="handleAddUser"><i class="el-icon-plus" />新增用户</el-button>
<div class="header-right"> <div class="header-right">
<el-button icon="el-icon-delete" circle @click="handleDelTem" /> <el-button icon="el-icon-delete" circle @click="handleDelTem" />
<el-button icon="el-icon-refresh" circle @click="handleRefresh" /> <el-button icon="el-icon-refresh" circle @click="handleRefresh" />
</div> </div>
</div> </div>
<el-table <el-table
v-loading="loading"
element-loading-text="拼命加载中"
:data="tableData" :data="tableData"
:header-cell-style="headerStyle" :header-cell-style="headerStyle"
height="460" height="460"
@ -25,47 +34,59 @@
align="center" align="center"
/> />
<el-table-column <el-table-column
prop="date" prop="user_code"
label="工号" label="工号"
align="center" align="center"
/> />
<el-table-column <el-table-column
prop="name" prop="real_name"
label="姓名" label="姓名"
align="center" align="center"
/> >
<template slot-scope="scope">
<el-tag type="success">{{ scope.row.real_name }}</el-tag>
</template>
</el-table-column>
<el-table-column <el-table-column
prop="address" prop="role_name"
label="角色" label="角色"
align="center" align="center"
/> />
<el-table-column <el-table-column
prop="address" prop="sex"
label="性别" label="性别"
align="center" align="center"
/> >
<template slot-scope="scope">
{{ scope.row.sex === 1?'男':'女' }}
</template>
</el-table-column>
<el-table-column <el-table-column
show-overflow-tooltip show-overflow-tooltip
prop="address" prop="mobile"
label="联系电话" label="联系电话"
align="center" align="center"
/> />
<el-table-column <el-table-column
show-overflow-tooltip show-overflow-tooltip
prop="address" prop="email"
label="电子邮箱" label="电子邮箱"
align="center" align="center"
/> />
<el-table-column <el-table-column
prop="address" prop="create_date"
label="创建时间" label="创建时间"
align="center" align="center"
/> />
<el-table-column <el-table-column
prop="address" prop="is_enabled"
label="status" label="状态"
align="center" align="center"
/> >
<template slot-scope="scope">
<el-tag :type="scope.row.is_enabled === 1?'success':'danger'">{{ scope.row.is_enabled === 1?'启用':'未启用' }}</el-tag>
</template>
</el-table-column>
<el-table-column <el-table-column
prop="address" prop="address"
label="操作" label="操作"
@ -95,7 +116,7 @@
width="38%" width="38%"
@close="userFormDialogClose" @close="userFormDialogClose"
> >
<UserForm :propsformdata="userFormData" @handlesubmit="handleUserSubmit" @handlecancel="handleUserFormCancel" /> <UserForm :propsformdata="userFormData" :roledata="roleData" @handlesubmit="handleUserSubmit" @handlecancel="handleUserFormCancel" />
</el-dialog> </el-dialog>
<el-dialog <el-dialog
title="分配用户权限" title="分配用户权限"
@ -126,17 +147,14 @@
<script> <script>
import UserForm from '@/components/UserForm' import UserForm from '@/components/UserForm'
import { get_user_list, add, user_power, update, del } from '@/api/user/user'
import stringify from '@/utils/stringify'
export default { export default {
name: 'User', name: 'User',
components: { UserForm }, components: { UserForm },
data() { data() {
return { return {
tableData: [ tableData: [],
{
date: 1,
name: 'test'
}
],
manageer: null, manageer: null,
headerStyle: { 'background': '#E6E6E6' }, headerStyle: { 'background': '#E6E6E6' },
dialogVisible: false, dialogVisible: false,
@ -152,10 +170,40 @@ export default {
isIndeterminate: true, isIndeterminate: true,
page: 1, page: 1,
page_size: 15, page_size: 15,
total: 0 total: 0,
user_code: '',
real_name: '',
role_id: '',
is_enabled: '',
loading: false,
roleData: []
} }
}, },
created() {
this.getList()
this.getRoleList()
},
methods: { methods: {
getRoleList() {
user_power().then(
res => (this.roleData = res.data)
)
},
getList() {
const data = {
page: this.page,
page_size: this.page_size,
user_code: this.user_code,
real_name: this.real_name,
role_id: this.role_id,
is_enabled: this.is_enabled
}
this.loading = true
get_user_list(stringify(data)).then(res => {
this.total = res.data.total_count
this.tableData = res.data.data_list
}).finally(() => (this.loading = false))
},
pageChange(page) { pageChange(page) {
this.page = page this.page = page
}, },
@ -176,8 +224,19 @@ export default {
...this.userFormData, ...this.userFormData,
...formdata ...formdata
} }
// TODO 提交表单 data.is_enabled = data.is_enabled ? 1 : 0
console.log(data) data.role_name = this.roleData.find(item => item.module_id === data.role_id).module_name
if (this.userFormTitle === '新增用户') {
add(stringify(data)).then(res => {
this.$message.success(res.msg)
this.dialogVisible = false
})
} else {
update(stringify(data)).then(res => {
this.$message.success(res.msg)
this.dialogVisible = false
})
}
}, },
userFormDialogClose() { userFormDialogClose() {
this.userFormData = {} this.userFormData = {}
@ -192,7 +251,9 @@ export default {
}, },
handleEdit(index, row) { handleEdit(index, row) {
this.userFormTitle = '编辑用户' this.userFormTitle = '编辑用户'
this.userFormData = row const data = JSON.parse(JSON.stringify(row))
data.is_enabled = data.is_enabled !== 0
this.userFormData = data
this.dialogVisible = true this.dialogVisible = true
}, },
handleFace(index, row) { handleFace(index, row) {
@ -202,20 +263,22 @@ export default {
this.roleDialogVisible = true this.roleDialogVisible = true
}, },
handleDelTem() { handleDelTem() {
if (this.multipleSelection.length === 0) { if (this.multipleSelection.length !== 1) {
this.$message.warning('请选择需要删除的用户') this.$message.warning('请选择1个需要删除的用户')
return return
} }
this.$confirm('确定要删除用户“陈小红”吗?', '提示', { this.$confirm('确定要删除用户“陈小红”吗?', '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning' type: 'warning'
}).then(() => { }).then(() =>
this.$message({ del(stringify({ 'user_id': this.multipleSelection[0].user })).then(
type: 'success', res => this.$message.success({
message: '删除成功!' type: 'success',
}) message: '删除成功!'
}).catch(() => { })
)
).catch(() => {
this.$message({ this.$message({
type: 'info', type: 'info',
message: '已取消删除' message: '已取消删除'
@ -223,10 +286,10 @@ export default {
}) })
}, },
handleRefresh() { handleRefresh() {
this.getList()
}, },
handleSearch() { handleSearch() {
this.getList()
} }
} }
} }

Write Preview
Loading…
Cancel
Save