Skip to content

O
oa-client
Commit 1b71189f authored by 朱招明's avatar 朱招明
Browse files
Options

update

parent d01ea530
Hide whitespace changes
Inline Side-by-side
Showing with 1016 additions and 336 deletions
src/api/auth.js 0 → 100644
View file @ 1b71189f
import request from '@/utils/request'
export function login(data) {
return request({
url: '/auth/login',
method: 'post',
data
})
}
export function getInfo(token) {
return request({
url: '/auth/info',
method: 'get',
params: { token }
})
}
export function logout() {
return request({
url: '/auth/login_out',
method: 'put'
})
}
export function getConfigs() {
return request({
url: '/configs',
method: 'get'
})
}
src/api/system/announcement.js 0 → 100644
View file @ 1b71189f
import request from '@/utils/request'
export function announcementList(parameter) {
return request({
url: '/announcement/list',
method: 'get',
params: parameter
})
}
export function announcementAdd(parameter) {
return request({
url: '/announcement/add',
method: 'post',
data: parameter
})
}
export function announcementEdit(id, parameter) {
return request({
url: '/announcement/' + id + '/edit',
method: 'put',
data: parameter
})
}
export function announcementChange(id, parameter) {
return request({
url: '/announcement/' + id + '/change',
method: 'put',
data: parameter
})
}
export function announcementDetail(id) {
return request({
url: '/announcement/' + id + '/detail',
method: 'get'
})
}
export function announcementDel(id) {
return request({
url: '/announcement/' + id + '/delete',
method: 'delete'
})
}
src/api/system/company/department.js 0 → 100644
View file @ 1b71189f
import request from '@/utils/request'
export function departmentList(parameter) {
return request({
url: '/department/list',
method: 'get',
params: parameter
})
}
export function departmentDataList(parameter) {
return request({
url: '/department/data_list',
method: 'get',
params: parameter
})
}
export function departmentAdd(parameter) {
return request({
url: '/department/add',
method: 'post',
data: parameter
})
}
export function departmentEdit(id, parameter) {
return request({
url: '/department/' + id + '/edit',
method: 'put',
data: parameter
})
}
export function departmentDetail(id) {
return request({
url: '/department/' + id + '/detail',
method: 'get'
})
}
export function departmentDel(id) {
return request({
url: '/department/' + id + '/delete',
method: 'delete'
})
}
src/api/user.js → src/api/system/company/user.js
View file @ 1b71189f
import request from '@/utils/request'
export function login(data) {
return request({
url: '/auth/login',
method: 'post',
data
})
}
export function getInfo(token) {
return request({
url: '/auth/info',
method: 'get',
params: { token }
})
}
export function logout() {
return request({
url: '/auth/login_out',
method: 'put'
})
}
export function getConfigs() {
return request({
url: '/configs',
method: 'get'
})
}
export function userList(parameter) {
return request({
url: '/user/list',
......
src/api/role.js → src/api/system/power/role.js
View file @ 1b71189f
......@@ -4,7 +4,15 @@ export function roleList(parameter) {
return request({
url: '/role/list',
method: 'get',
data: parameter
params: parameter
})
}
export function roleDataList(parameter) {
return request({
url: '/role/data_list',
method: 'get',
params: parameter
})
}
......
src/api/table.js deleted 100644 → 0
View file @ d01ea530
import request from '@/utils/request'
export function getList(params) {
return request({
url: '/vue-admin-template/table/list',
method: 'get',
params
})
}
src/layout/components/Navbar.vue
View file @ 1b71189f
......@@ -61,9 +61,22 @@ export default {
...mapGetters([
'sidebar',
'avatar',
'device'
'device',
'announcements'
])
},
created() {
const announcements = this.announcements
announcements.forEach((item) => {
setTimeout(() => {
this.$notify({
title: item.title,
message: item.content,
duration: 0
})
}, 1)
})
},
methods: {
toggleSideBar() {
this.$store.dispatch('app/toggleSideBar')
......
src/permission.js
View file @ 1b71189f
......@@ -36,7 +36,6 @@ router.beforeEach(async(to, from, next) => {
resetRouter() // 重置路由 防止退出重新登录或者 token 过期后页面未刷新，导致的路由重复添加
router.addRoutes(store.getters.addRouters)
next({ ...to, replace: true })
} catch (error) {
Message.error('获取配置失败，请重新登录')
......
src/router/config.js
View file @ 1b71189f
// 路由标识对应页面
export const constantRouterComponents = {
// 权限管理
'role': () => import('@/views/system/power/role/index'),
'user': () => import('@/views/system/power/user/index'),
'menu': () => import('@/views/system/power/menu/index')
'role.index': () => import('@/views/system/power/role/index'),
'user.index': () => import('@/views/system/company/user/index'),
'user.add': () => import('@/views/system/company/user/add'),
'user.edit': () => import('@/views/system/company/user/edit'),
'menu.index': () => import('@/views/system/power/menu/index'),
'department.index': () => import('@/views/system/company/department/index'),
'announcement.index': () => import('@/views/system/announcement/index')
}
src/router/generator-routers.js
View file @ 1b71189f
......@@ -68,6 +68,11 @@ export const generator = (routerMap, parent) => {
}
}
if (item.is_menu === 0) {
currentRouter.hidden = true
currentRouter.meta.activeMenu = parent.path
}
// 是否有子菜单，并递归处理
if (item.children && item.children.length > 0) {
// Recursion
......@@ -75,6 +80,11 @@ export const generator = (routerMap, parent) => {
currentRouter.component = RouteView
currentRouter.redirect = 'noRedirect'
const index_view = item.children.find(item => item.key === currentRouter.name + '.index')
if (index_view) {
currentRouter.redirect = currentRouter.path + '/' + index_view.key
}
}
return currentRouter
})
......
src/store/getters.js
View file @ 1b71189f
......@@ -8,6 +8,7 @@ const getters = {
token: state => state.user.token,
avatar: state => state.user.avatar,
name: state => state.user.name,
announcements: state => state.user.announcements,
addRouters: state => state.permission.addRouters,
multiTab: state => state.app.multiTab,
menuSet: state => state.permission.menuSet,
......
src/store/modules/user.js
View file @ 1b71189f
import { login, logout, getInfo, getConfigs } from '@/api/user'
import { login, logout, getInfo, getConfigs } from '@/api/auth'
import { getToken, setToken, removeToken } from '@/utils/auth'
import { resetRouter } from '@/router'
......@@ -6,7 +6,10 @@ const getDefaultState = () => {
return {
token: getToken(),
name: '',
avatar: ''
avatar: '',
user_info: null,
announcements: null
}
}
......@@ -27,6 +30,9 @@ const mutations = {
},
SET_AVATAR: (state, avatar) => {
state.avatar = avatar
},
SET_ANNOUNCEMENTS: (state, announcements) => {
state.announcements = announcements
}
}
......@@ -76,11 +82,12 @@ const actions = {
return reject('获取配置失败，请重新登录')
}
const { user_info } = data
const { user_info, announcements } = data
commit('SET_USER_INFO', user_info)
commit('SET_NAME', user_info.name)
commit('SET_AVATAR', user_info.avatar_full_url)
commit('SET_ANNOUNCEMENTS', announcements)
resolve(data)
}).catch(error => {
......
src/views/system/announcement/index.vue 0 → 100644
View file @ 1b71189f
<template>
<div class="app-container">
<el-button :loading="listLoading" icon="el-icon-refresh" @click="getAnnouncements" />
<el-button type="primary" @click="handleAdd">添加</el-button>
<el-table v-loading="listLoading" :data="data" style="width: 100%;margin-top:30px;" border>
<el-table-column align="center" label="ID" width="220">
<template slot-scope="scope">
{{ scope.row.id }}
</template>
</el-table-column>
<el-table-column align="center" label="名称" width="220">
<template slot-scope="scope">
{{ scope.row.title }}
</template>
</el-table-column>
<el-table-column align="header-center" label="描述">
<template slot-scope="scope">
{{ scope.row.content }}
</template>
</el-table-column>
<el-table-column align="center" label="操作">
<template slot-scope="scope">
<el-button :loading="listLoading" size="small" @click="handleChange(scope,'show')">{{ !scope.row.show?'显示':'隐藏' }}</el-button>
<el-button :loading="listLoading" size="small" @click="handleChange(scope,'top')">置顶</el-button>
<el-button type="primary" size="small" @click="handleEdit(scope)">编辑</el-button>
<el-button :loading="listLoading" type="danger" size="small" @click="handleDelete(scope)">删除</el-button>
</template>
</el-table-column>
</el-table>
<pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getAnnouncements" />
<el-dialog :visible.sync="dialogVisible" :title="dialogType==='edit'?'编辑':'添加'">
<el-form :model="form" label-width="80px" label-position="left">
<el-form-item label="名称">
<el-input v-model="form.title" placeholder="名称" />
</el-form-item>
<el-form-item label="描述">
<el-input
v-model="form.content"
:autosize="{ minRows: 2, maxRows: 4}"
type="textarea"
placeholder="描述"
/>
</el-form-item>
</el-form>
<div style="text-align:right;">
<el-button type="danger" @click="dialogVisible=false">取消</el-button>
<el-button :loading="loading" type="primary" @click="confirmForm">提交</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { announcementAdd, announcementDel, announcementEdit, announcementList, announcementChange } from '@/api/system/announcement'
import { deepClone } from '@/utils/util'
import { Message } from 'element-ui'
import Pagination from '@/components/Pagination'
export default {
components: { Pagination },
data() {
return {
listLoading: false,
total: 0,
listQuery: {
page: 1,
limit: 20
},
loading: false,
form: {
title: '',
content: '',
show: true
},
menuTreeData: [],
data: [],
dialogVisible: false,
dialogType: 'new',
checkStrictly: false,
defaultProps: {
children: 'children',
label: 'title'
}
}
},
computed: {
},
created() {
this.getAnnouncements()
},
methods: {
async getAnnouncements() {
this.listLoading = true
announcementList({ page: this.listQuery.page, per_page: this.listQuery.limit }).then((res) => {
const { data, meta } = res
this.data = data
this.total = meta.pagination.total
}).finally(() => {
this.listLoading = false
})
},
handleAdd() {
this.form = Object.assign({})
this.dialogType = 'new'
this.dialogVisible = true
},
handleEdit(scope) {
this.dialogType = 'edit'
this.dialogVisible = true
this.form = deepClone(scope.row)
},
handleDelete({ $index, row }) {
this.$confirm('确定要删除嘛?', '删除', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(async() => {
this.listLoading = true
await announcementDel(row.id).finally(() => {
this.listLoading = false
})
this.data.splice($index, 1)
this.$message({
type: 'success',
message: '已删除'
})
})
.catch(err => { console.error(err) })
},
async confirmForm() {
this.loading = true
const isEdit = this.dialogType === 'edit'
if (isEdit) {
await announcementEdit(this.form.id, this.form).finally(() => { this.loading = false })
for (let index = 0; index < this.data.length; index++) {
if (this.data[index].id === this.form.id) {
this.data.splice(index, 1, Object.assign({}, this.form))
break
}
}
Message.success('已修改')
} else {
const { data } = await announcementAdd(this.form).finally(() => { this.loading = false })
this.data.push(data)
Message.success('已添加')
}
this.dialogVisible = false
},
handleChange(scope, type) {
const { $index, row } = scope
this.listLoading = true
announcementChange(row.id, { type: type })
.then(() => {
switch (type) {
case 'show':
row.show = !row.show
this.data.splice($index, 1, Object.assign({}, row))
break
case 'top':
this.data.splice($index, 1)
this.data.unshift(Object.assign({}, row))
break
}
})
.finally(() => { this.listLoading = false })
}
}
}
</script>
<style lang="scss" scoped>
.app-container {
.roles-table {
margin-top: 30px;
}
.permission-tree {
margin-bottom: 30px;
}
}
</style>
src/views/system/company/department/index.vue 0 → 100644
View file @ 1b71189f
<template>
<div class="app-container">
<el-button type="primary" @click="handleAdd">添加</el-button>
<el-table v-loading="listLoading" :data="data" style="width: 100%;margin-top:30px;" border>
<el-table-column align="center" label="ID" width="220">
<template slot-scope="scope">
{{ scope.row.id }}
</template>
</el-table-column>
<el-table-column align="center" label="名称" width="220">
<template slot-scope="scope">
{{ scope.row.name }}
</template>
</el-table-column>
<el-table-column align="header-center" label="描述">
<template slot-scope="scope">
{{ scope.row.desc }}
</template>
</el-table-column>
<el-table-column align="center" label="操作">
<template slot-scope="scope">
<el-button type="primary" size="small" @click="handleEdit(scope)">编辑</el-button>
<el-button type="danger" size="small" @click="handleDelete(scope)">删除</el-button>
</template>
</el-table-column>
</el-table>
<pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getDepartments" />
<el-dialog :visible.sync="dialogVisible" :title="dialogType==='edit'?'编辑':'添加'">
<el-form :model="form" label-width="80px" label-position="left">
<el-form-item label="名称">
<el-input v-model="form.name" placeholder="名称" />
</el-form-item>
<el-form-item label="描述">
<el-input
v-model="form.desc"
:autosize="{ minRows: 2, maxRows: 4}"
type="textarea"
placeholder="描述"
/>
</el-form-item>
</el-form>
<div style="text-align:right;">
<el-button type="danger" @click="dialogVisible=false">取消</el-button>
<el-button :loading="loading" type="primary" @click="confirmForm">提交</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { departmentAdd, departmentDel, departmentEdit, departmentList } from '@/api/system/company/department'
import { deepClone } from '@/utils/util'
import { Message } from 'element-ui'
import Pagination from '@/components/Pagination'
export default {
components: { Pagination },
data() {
return {
listLoading: false,
total: 0,
listQuery: {
page: 1,
limit: 20
},
loading: false,
form: {
name: '',
desc: ''
},
menuTreeData: [],
data: [],
dialogVisible: false,
dialogType: 'new',
checkStrictly: false,
defaultProps: {
children: 'children',
label: 'title'
}
}
},
computed: {
},
created() {
this.getDepartments()
},
methods: {
async getDepartments() {
this.listLoading = true
departmentList({ page: this.listQuery.page, per_page: this.listQuery.limit }).then((res) => {
const { data, meta } = res
this.data = data
this.total = meta.pagination.total
}).finally(() => {
this.listLoading = false
})
},
handleAdd() {
this.form = Object.assign({})
this.dialogType = 'new'
this.dialogVisible = true
},
handleEdit(scope) {
this.dialogType = 'edit'
this.dialogVisible = true
this.form = deepClone(scope.row)
},
handleDelete({ $index, row }) {
this.$confirm('确定要删除嘛?', '删除', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(async() => {
await departmentDel(row.id)
this.data.splice($index, 1)
this.$message({
type: 'success',
message: '已删除'
})
})
.catch(err => { console.error(err) })
},
async confirmForm() {
this.loading = true
const isEdit = this.dialogType === 'edit'
if (isEdit) {
await departmentEdit(this.form.id, this.form).finally(() => { this.loading = false })
for (let index = 0; index < this.data.length; index++) {
if (this.data[index].id === this.form.id) {
this.data.splice(index, 1, Object.assign({}, this.form))
break
}
}
Message.success('已修改')
} else {
const { data } = await departmentAdd(this.form).finally(() => { this.loading = false })
this.data.push(data)
Message.success('已添加')
}
this.dialogVisible = false
}
}
}
</script>
<style lang="scss" scoped>
.app-container {
.roles-table {
margin-top: 30px;
}
.permission-tree {
margin-bottom: 30px;
}
}
</style>
src/views/system/company/user/add.vue 0 → 100644
View file @ 1b71189f
<template>
<div class="app-container">
<el-form ref="addForm" label-width="80px" :model="form" :rules="rules">
<el-tabs v-model="activeTab">
<el-tab-pane label="账号信息" name="account">
<el-form-item label="登录账号" prop="username">
<el-input v-model="form.username" placeholder="登录账号" />
</el-form-item>
<el-form-item label="登录密码" prop="password">
<el-input v-model="form.password" placeholder="不填默认123456" />
</el-form-item>
<el-form-item label="头像" prop="avatar">
<el-upload
ref="uploader"
class="avatar-uploader"
action=""
:http-request="upload"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
>
<el-avatar v-if="form.avatar_full_url" :size="60" :src="form.avatar_full_url">
<img :src="form.avatar_full_url">
</el-avatar>
<i v-else class="el-icon-plus avatar-uploader-icon" />
</el-upload>
</el-form-item>
<el-form-item label="角色" prop="role_id">
<el-select v-model="form.role_id" placeholder="请选择">
<el-option
v-for="item in roleData"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
</el-tab-pane>
<el-tab-pane label="员工信息" name="staff">
<el-form-item label="姓名" prop="name">
<el-input v-model="form.name" placeholder="姓名" />
</el-form-item>
<el-form-item label="手机号码" prop="phone">
<el-input v-model="form.phone" placeholder="手机号码" />
</el-form-item>
<el-form-item label="入职时间" prop="entry_time">
<el-date-picker
v-model="form.entry_time"
type="date"
placeholder="选择日期"
/>
</el-form-item>
<el-form-item label="部门" prop="department_id">
<el-select v-model="form.department_id" placeholder="部门">
<el-option
v-for="item in departmentData"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item label="职位" prop="job_name">
<el-input v-model="form.job_name" placeholder="职位" />
</el-form-item>
</el-tab-pane>
</el-tabs>
<el-form-item>
<el-button :loading="loading" type="primary" @click="submit">提交</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import { uploadFile, userAdd } from '@/api/system/company/user'
import { roleDataList } from '@/api/system/power/role'
import { departmentDataList } from '@/api/system/company/department'
import { Message } from 'element-ui'
export default {
data() {
return {
form: {
username: '',
password: '',
name: '',
avatar: '',
avatar_full_url: '',
role_id: '',
phone: '',
entry_time: '',
department_id: '',
skill: [],
job_name: ''
},
rules: {
username: [{ required: true, message: '登录账号不能为空', trigger: 'blur' }],
name: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
role_id: [{ required: true, message: '请选择角色', trigger: 'blur' }]
},
loading: false,
activeTab: 'account',
roleData: [],
departmentData: []
}
},
created() {
this.init()
},
methods: {
init() {
this.getRoles()
this.getDepartmentList()
},
getRoles() {
roleDataList()
.then((res) => {
this.roleData = res.data
})
},
getDepartmentList() {
departmentDataList().then((res) => {
this.departmentData = res.data
})
},
submit() {
this.$refs['addForm'].validate((valid, fields) => {
if (valid) {
userAdd(this.form).then((res) => {
this.$refs['addForm'].resetFields()
this.$refs['addForm'].clearValidate()
this.activeTab = 'account'
this.form = Object.assign({})
Message.success('添加成功')
})
}
})
},
async upload(file) {
const formData = new FormData()
formData.append('file', file.file)
formData.append('type', 'avatar')
const res = await uploadFile(formData)
this.form.avatar = res.data.path
return res
},
handleAvatarSuccess(res, file) {
this.form.avatar_full_url = URL.createObjectURL(file.raw)
},
beforeAvatarUpload(file) {
// const isJPG = file.type === 'image/jpeg'
// const isLt2M = file.size / 1024 / 1024 < 2
//
// if (!isJPG) {
// this.$message.error('上传头像图片只能是 JPG 格式!')
// }
// if (!isLt2M) {
// this.$message.error('上传头像图片大小不能超过 2MB!')
// }
// return isJPG && isLt2M
}
}
}
</script>
<style lang="scss" scoped>
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 60px;
height: 60px;
line-height: 60px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
</style>
src/views/system/company/user/edit.vue 0 → 100644
View file @ 1b71189f
<template>
<div class="app-container">
<el-form ref="editForm" v-loading="loading" label-width="80px" :model="form" :rules="rules">
<el-tabs v-model="activeTab">
<el-tab-pane label="账号信息" name="account">
<el-form-item label="登录账号" prop="username">
<el-input v-model="form.username" placeholder="登录账号" />
</el-form-item>
<el-form-item label="登录密码" prop="password">
<el-input v-model="form.password" placeholder="不填默认123456" />
</el-form-item>
<el-form-item label="头像" prop="avatar">
<el-upload
ref="uploader"
class="avatar-uploader"
action=""
:http-request="upload"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
>
<el-avatar v-if="form.avatar_full_url" :size="60" :src="form.avatar_full_url">
<img :src="form.avatar_full_url">
</el-avatar>
<i v-else class="el-icon-plus avatar-uploader-icon" />
</el-upload>
</el-form-item>
<el-form-item label="角色" prop="role_id">
<el-select v-model="form.role_id" placeholder="请选择">
<el-option
v-for="item in roleData"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
</el-tab-pane>
<el-tab-pane label="员工信息" name="staff">
<el-form-item label="姓名" prop="name">
<el-input v-model="form.name" placeholder="姓名" />
</el-form-item>
<el-form-item label="手机号码" prop="phone">
<el-input v-model="form.phone" placeholder="手机号码" />
</el-form-item>
<el-form-item label="入职时间" prop="entry_time">
<el-date-picker
v-model="form.entry_time"
type="date"
placeholder="选择日期"
/>
</el-form-item>
<el-form-item label="部门" prop="department_id">
<el-select v-model="form.department_id" placeholder="部门">
<el-option
v-for="item in departmentData"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item label="职位" prop="job_name">
<el-input v-model="form.job_name" placeholder="职位" />
</el-form-item>
</el-tab-pane>
</el-tabs>
<el-form-item>
<el-button :loading="loading" type="primary" @click="submit">提交</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import { uploadFile, userEdit, userDetail } from '@/api/system/company/user'
import { roleDataList } from '@/api/system/power/role'
import { departmentDataList } from '@/api/system/company/department'
import { Message } from 'element-ui'
export default {
data() {
return {
form: {
id: '',
username: '',
password: '',
name: '',
avatar: '',
avatar_full_url: '',
role_id: '',
phone: '',
entry_time: '',
department_id: '',
skill: [],
job_name: ''
},
rules: {
username: [{ required: true, message: '登录账号不能为空', trigger: 'blur' }],
name: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
role_id: [{ required: true, message: '请选择角色', trigger: 'blur' }]
},
loading: false,
activeTab: 'account',
roleData: [],
departmentData: [],
tempRoute: {}
}
},
created() {
this.init()
},
beforeRouteEnter(to, from, next) {
// 在路由进入前执行操作
// 无法访问组件实例的 this
next()
},
beforeRouteLeave(to, from, next) {
this.$store.dispatch('tagsView/delView', from)
next()
},
methods: {
init() {
const id = this.$route.params && this.$route.params.id
if (!id) {
const parentMatchedRoute = this.$route.matched[this.$route.matched.length - 2]
this.$router.push({ name: parentMatchedRoute.name })
return
}
this.tempRoute = Object.assign({}, this.$route)
this.getRoles()
this.getDepartmentList()
this.getUserDetail(id)
},
getRoles() {
roleDataList()
.then((res) => {
this.roleData = res.data
})
},
getDepartmentList() {
departmentDataList().then((res) => {
this.departmentData = res.data
})
},
getUserDetail(id) {
this.loading = true
userDetail(id).then((res) => {
this.form = res.data
}).finally(() => { this.loading = false })
},
submit() {
this.$refs['editForm'].validate((valid, fields) => {
if (valid) {
this.loading = true
userEdit(this.form.id, this.form).then((res) => {
this.$router.go(-1)
Message.success('编辑成功')
}).finally(() => { this.loading = false })
}
})
},
async upload(file) {
const formData = new FormData()
formData.append('file', file.file)
formData.append('type', 'avatar')
this.loading = true
const res = await uploadFile(formData).finally(() => { this.loading = false })
this.form.avatar = res.data.path
return res
},
handleAvatarSuccess(res, file) {
this.form.avatar_full_url = URL.createObjectURL(file.raw)
},
beforeAvatarUpload(file) {
// const isJPG = file.type === 'image/jpeg'
// const isLt2M = file.size / 1024 / 1024 < 2
//
// if (!isJPG) {
// this.$message.error('上传头像图片只能是 JPG 格式!')
// }
// if (!isLt2M) {
// this.$message.error('上传头像图片大小不能超过 2MB!')
// }
// return isJPG && isLt2M
},
setTagsViewTitle() {
const title = 'Edit Article'
const route = Object.assign({}, this.tempRoute, { title: `${title}-${this.postForm.id}` })
this.$store.dispatch('tagsView/updateVisitedView', route)
},
setPageTitle() {
const title = 'Edit Article'
document.title = `${title} - ${this.postForm.id}`
}
}
}
</script>
<style lang="scss" scoped>
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 60px;
height: 60px;
line-height: 60px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
</style>
src/views/system/power/user/index.vue → src/views/system/company/user/index.vue
View file @ 1b71189f
<template>
<div class="app-container">
<el-button :loading="listLoading" icon="el-icon-refresh" @click="getUsers" />
<el-button type="primary" @click="handleAddRole">添加</el-button>
<el-table v-loading="listLoading" :data="data" style="width: 100%;margin-top:30px;" border>
......@@ -38,7 +39,7 @@
<el-table-column align="center" label="操作">
<template slot-scope="scope">
<el-button type="primary" size="small" @click="handleEdit(scope)">编辑</el-button>
<el-button v-if="!scope.row.is_admin" type="danger" size="small" @click="handleDelete(scope)">删除</el-button>
<el-button v-if="!scope.row.is_admin" :loading="listLoading" type="danger" size="small" @click="handleDelete(scope)">删除</el-button>
</template>
</el-table-column>
</el-table>
......@@ -93,10 +94,10 @@
</template>
<script>
import { userAdd, userDel, userEdit, userList, uploadFile } from '@/api/user'
import { deepClone } from '@/utils/util'
import { userAdd, userDel, userEdit, userList, uploadFile } from '@/api/system/company/user'
// import { deepClone } from '@/utils/util'
import { Message } from 'element-ui'
import { roleList } from '@/api/role'
import { roleList } from '@/api/system/power/role'
import Pagination from '@/components/Pagination'
export default {
......@@ -158,27 +159,34 @@ export default {
},
handleAddRole() {
this.user = Object.assign({})
this.dialogType = 'new'
this.dialogVisible = true
// this.user = Object.assign({})
// this.dialogType = 'new'
// this.dialogVisible = true
const parentMatchedRoute = this.$route.matched[this.$route.matched.length - 2]
const parent_name = parentMatchedRoute.name
this.$router.push({ name: parent_name + '.add' })
},
handleEdit(scope) {
this.dialogType = 'edit'
this.dialogVisible = true
const row = deepClone(scope.row)
// this.user = row
// this.user.role_id = row.roles.data.id
this.user = {
id: row.id,
username: row.username,
password: '',
name: row.name,
avatar: row.avatar,
avatar_full_url: row.avatar_full_url,
role_id: row.role.data.id,
is_admin: row.is_admin,
created_at: row.created_at
}
const parentMatchedRoute = this.$route.matched[this.$route.matched.length - 2]
const parent_name = parentMatchedRoute.name
this.$router.push({ name: parent_name + '.edit', params: { id: scope.row.id }})
// this.dialogType = 'edit'
// this.dialogVisible = true
// const row = deepClone(scope.row)
// // this.user = row
// // this.user.role_id = row.roles.data.id
// this.user = {
// id: row.id,
// username: row.username,
// password: '',
// name: row.name,
// avatar: row.avatar,
// avatar_full_url: row.avatar_full_url,
// role_id: row.role.data.id,
// is_admin: row.is_admin,
// created_at: row.created_at
// }
},
handleDelete({ $index, row }) {
this.$confirm('确定要删除嘛?', '删除', {
......@@ -187,7 +195,8 @@ export default {
type: 'warning'
})
.then(async() => {
await userDel(row.id)
this.listLoading = true
await userDel(row.id).finally(() => { this.listLoading = false })
this.data.splice($index, 1)
this.$message({
type: 'success',
......
src/views/system/power/menu/index.vue
View file @ 1b71189f
......@@ -8,7 +8,10 @@
default-expand-all
>
<span slot-scope="{ node, data }" class="custom-tree-node">
<span>{{ node.label }} </span>
<span>
<el-tag v-if="data.is_menu === 1">{{ node.label }}</el-tag>
<el-tag v-else type="info">{{ node.label }}</el-tag>
</span>
<span>
<el-button
type="text"
......@@ -78,7 +81,7 @@
</template>
<script>
import { menuList, menuAdd, menuDel, menuEdit } from '@/api/menu'
import { menuList, menuAdd, menuDel, menuEdit } from '@/api/system/power/menu'
import { Message } from 'element-ui'
export default {
......
src/views/system/power/role/index.vue
View file @ 1b71189f
......@@ -2,7 +2,7 @@
<div class="app-container">
<el-button type="primary" @click="handleAddRole">添加</el-button>
<el-table :data="data" style="width: 100%;margin-top:30px;" border>
<el-table v-loading="listLoading" :data="data" style="width: 100%;margin-top:30px;" border>
<el-table-column align="center" label="ID" width="220">
<template slot-scope="scope">
{{ scope.row.id }}
......@@ -26,6 +26,8 @@
</el-table-column>
</el-table>
<pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getRoles" />
<el-dialog :visible.sync="dialogVisible" :title="dialogType==='edit'?'编辑':'添加'">
<el-form :model="role" label-width="80px" label-position="left">
<el-form-item label="名称">
......@@ -62,14 +64,23 @@
</template>
<script>
import { roleAdd, roleDel, roleEdit, roleList } from '@/api/role'
import { roleAdd, roleDel, roleEdit, roleList } from '@/api/system/power/role'
import { deepClone } from '@/utils/util'
import { menuList } from '@/api/menu'
import { menuList } from '@/api/system/power/menu'
import { Message } from 'element-ui'
import Pagination from '@/components/Pagination'
export default {
components: { Pagination },
data() {
return {
listLoading: false,
total: 0,
listQuery: {
page: 1,
limit: 20
},
loading: false,
role: {
name: '',
......@@ -126,9 +137,16 @@ export default {
})
},
async getRoles() {
const res = await roleList()
this.data = res.data
getRoles() {
this.listLoading = true
roleList({ page: this.listQuery.page, per_page: this.listQuery.limit })
.then((res) => {
const { data, meta } = res
this.data = data
this.total = meta.pagination.total
}).finally(() => {
this.listLoading = false
})
},
handleAddRole() {
......
src/views/system/power/user/list.vue deleted 100644 → 0
View file @ d01ea530
<template>
<div class="app-container">
<el-button type="primary" @click="handleAddRole">添加</el-button>
<el-table :data="data" style="width: 100%;margin-top:30px;" border>
<el-table-column align="center" label="ID" width="220">
<template slot-scope="scope">
{{ scope.row.id }}
</template>
</el-table-column>
<el-table-column align="center" label="用户名" width="220">
<template slot-scope="scope">
{{ scope.row.username }}
</template>
</el-table-column>
<el-table-column align="center" label="名称" width="220">
<template slot-scope="scope">
{{ scope.row.name }}
</template>
</el-table-column>
<el-table-column align="center" label="角色" width="220">
<template slot-scope="scope">
{{ scope.row.roles.data.name }}
</template>
</el-table-column>
<el-table-column align="header-center" label="头像">
<template slot-scope="scope">
{{ scope.row.avatar }}
</template>
</el-table-column>
<el-table-column align="header-center" label="创建时间">
<template slot-scope="scope">
{{ scope.row.created_at }}
</template>
</el-table-column>
<el-table-column align="center" label="操作">
<template slot-scope="scope">
<el-button type="primary" size="small" @click="handleEdit(scope)">编辑</el-button>
<el-button v-if="!scope.row.is_admin" type="danger" size="small" @click="handleDelete(scope)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-dialog :visible.sync="dialogVisible" :title="dialogType==='edit'?'编辑':'添加'">
<el-form :model="user" label-width="80px" label-position="left">
<el-form-item label="用户名">
<el-input v-model="user.username" placeholder="用户名" />
</el-form-item>
<el-form-item v-if="dialogType==='new'" label="密码">
<el-input v-model="user.password" placeholder="不填默认123456" />
</el-form-item>
<el-form-item v-if="dialogType==='edit'" label="密码">
<el-input v-model="user.password" placeholder="为空不修改" />
</el-form-item>
<el-form-item label="头像">
<el-upload
class="avatar-uploader"
action="https://jsonplaceholder.typicode.com/posts/"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
>
<img v-if="imageUrl" alt="" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon" />
</el-upload>
</el-form-item>
<el-form-item label="名称">
<el-input v-model="user.name" placeholder="名称" />
</el-form-item>
<el-form-item v-if="!user.is_admin" label="角色">
<el-select v-model="user.role_id" placeholder="请选择">
<el-option
v-for="item in roleData"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
</el-form>
<div style="text-align:right;">
<el-button type="danger" @click="dialogVisible=false">取消</el-button>
<el-button type="primary" @click="confirmRole">提交</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { userAdd, userDel, userEdit, userList } from '@/api/user'
import { deepClone } from '@/utils/util'
import { Message } from 'element-ui'
import { roleList } from '@/api/role'
export default {
data() {
return {
imageUrl: '',
user: {
username: '',
password: '',
name: '',
avatar: '',
role_id: 1,
is_admin: false
},
data: [],
roleData: [],
dialogVisible: false,
dialogType: 'new',
checkStrictly: false,
defaultProps: {
children: 'children',
label: 'title'
}
}
},
computed: {
},
created() {
this.getRoles()
this.getUsers()
},
methods: {
async getRoles() {
const res = await roleList()
this.roleData = res.data
},
async getUsers() {
const res = await userList({ include: 'roles' })
this.data = res.data
},
handleAddRole() {
this.user = Object.assign({})
this.dialogType = 'new'
this.dialogVisible = true
},
handleEdit(scope) {
this.dialogType = 'edit'
this.dialogVisible = true
const row = deepClone(scope.row)
// this.user = row
this.user = {
id: row.id,
username: row.username,
password: '',
name: row.name,
avatar: row.avatar,
role_id: row.roles.data.id,
is_admin: row.is_admin
}
},
handleDelete({ $index, row }) {
this.$confirm('确定要删除嘛?', '删除', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(async() => {
await userDel(row.id)
this.data.splice($index, 1)
this.$message({
type: 'success',
message: '已删除'
})
})
.catch(err => { console.error(err) })
},
async confirmRole() {
const isEdit = this.dialogType === 'edit'
if (isEdit) {
await userEdit(this.user.id, this.user)
const newData = this.user
newData.roles = {
data: {
id: this.user.role_id,
name: this.roleData.find(item => item.id === this.user.role_id).name
}
}
for (let index = 0; index < this.data.length; index++) {
if (this.data[index].id === this.user.id) {
this.data.splice(index, 1, Object.assign({}, newData))
break
}
}
Message.success('已修改')
} else {
const { data } = await userAdd(this.user)
this.user.id = data.id
const newData = this.user
newData.create_at = data.create_at
newData.roles = {
data: {
id: data.role.id,
name: data.role.name
}
}
this.data.push(newData)
Message.success('已添加')
}
this.dialogVisible = false
},
handleAvatarSuccess(res, file) {
this.imageUrl = URL.createObjectURL(file.raw)
},
beforeAvatarUpload(file) {
const isJPG = file.type === 'image/jpeg'
const isLt2M = file.size / 1024 / 1024 < 2
if (!isJPG) {
this.$message.error('上传头像图片只能是 JPG 格式!')
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!')
}
return isJPG && isLt2M
}
}
}
</script>
<style lang="scss" scoped>
.app-container {
.roles-table {
margin-top: 30px;
}
.permission-tree {
margin-bottom: 30px;
}
}
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment