Skip to content

9
91isoft_vue_manage
Commit f329a8f0 authored by 杨硕's avatar 杨硕
Browse files
Options

自定义按钮组件

parent caebd246
Hide whitespace changes
Inline Side-by-side
Showing with 154 additions and 48 deletions
src/components/coolbutton/index.vue 0 → 100644
View file @ f329a8f0
<template>
<el-button
v-hasPermi="hasper"
:size="size"
:type="type"
:icon="icon"
@click="defaultClick"
>{{ name }}</el-button>
</template>
<script>
import { getInfo } from '@/api/login'
export default {
name: 'CoolButton',
props: {// 调用该组件时需要传递过来的属性
name: {
type: String
},
type: {
type: String
},
haspermi: {
type: Array
},
size: {
type: String
},
icon: {
type: String
}
},
data() {
return {
isShow: true,
hasper: '',
butname: this.name
}
},
computed: {},
created() {
this.getInfoMessage()
},
methods: {
defaultClick() {
this.$emit('btn-click')
},
getInfoMessage() {
const data = this.haspermi
getInfo().then(res => {
if (res.data.permissions[0] === '*:*:*') {
this.isShow = true
this.hasper = []
} else {
this.hasper = data
}
// TODO: clear this log
console.log(`this.hasper`, this.hasper)
})
}
}
}
</script>
<style scoped>
/*按钮样式*/
input{
border: none;
padding: 2px 10px;
border-radius: 6px;
margin: 2px 6px;
color:#fff
}
/*不同属性按钮颜色不同*/
.primary{background-color: #409eff}
.danger{background-color: #f56c6c}
.success{background-color: #67c23a}
.warning{background-color: #e6a23c}
</style>
src/permission.js
View file @ f329a8f0
......@@ -21,10 +21,9 @@ router.beforeEach((to, from, next) => {
} else {
if (store.getters.roles.length === 0) {
// 判断当前用户是否已拉取完user_info信息
store.dispatch('GetInfo').then(res => {
// 判断用户是否有权限 有角色
if (res.data.roles && res.data.roles.length > 0 && res.data.permissions && res.data.permissions.length > 0) {
if (res.data.permissions && res.data.permissions.length > 0) {
// 拉取user_info
const roles = res.data.roles
store.dispatch('GenerateRoutes', { roles }).then((routers) => {
......
src/views/system/user/index.vue
View file @ f329a8f0
......@@ -51,14 +51,15 @@
<!-- icon="el-icon-plus"-->
<!-- @click="handleFormAdd"-->
<!-- >表单页新增模板</el-button>-->
<el-button
v-hasPermi="['sys:user:add']"
style="padding: 8px 7px;"
type="primary"
size="small"
icon="el-icon-plus"
@click="handleAdd"
>新增</el-button>
<!-- <el-button-->
<!-- v-hasPermi="['sys:user:add']"-->
<!-- style="padding: 8px 7px;"-->
<!-- type="primary"-->
<!-- size="small"-->
<!-- icon="el-icon-plus"-->
<!-- @click="handleAdd"-->
<!-- >新增</el-button>-->
<coolbutton style="padding: 8px 7px;" :type="typePrimary" :name="addName" :size="smallSize" :icon="addIcon" :haspermi="addHaspermi" @btn-click="handleAdd" />
<el-button
style="padding: 8px 7px;"
type="warning"
......@@ -66,14 +67,15 @@
size="small"
@click="handleImport"
>导入</el-button>
<el-button
v-hasPermi="['sys:user:export']"
style="padding: 8px 7px;"
type="success"
size="small"
icon="el-icon-download"
@click="handleExport"
>导出</el-button>
<!-- <el-button-->
<!-- v-hasPermi="['sys:user:export']"-->
<!-- style="padding: 8px 7px;"-->
<!-- type="success"-->
<!-- size="small"-->
<!-- icon="el-icon-download"-->
<!-- @click="handleExport"-->
<!-- >导出</el-button>-->
<coolbutton style="padding: 8px 7px;" :type="typeSuccess" :name="exportName" :size="smallSize" :icon="exportIcon" :haspermi="addHaspermi" @btn-click="handleExport" />
</el-form-item>
</el-form>
</div>
......@@ -161,28 +163,31 @@
class-name="small-padding fixed-width"
>
<template slot-scope="scope">
<el-button
v-hasPermi="['sys:user:update']"
size="mini"
type="text"
style="color: #49cec9"
@click="handleUpdate(scope.row)"
>修改</el-button>
<el-button
v-hasPermi="['sys:user:resetPwd']"
size="mini"
type="text"
:loading="addLoading"
@click="handleResetPwd(scope.row)"
>重置</el-button>
<el-button
v-if="scope.row.businessId !== 1"
v-hasPermi="['sys:user:delete']"
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
>删除</el-button>
<!-- <el-button-->
<!-- v-hasPermi="['sys:user:update']"-->
<!-- size="mini"-->
<!-- type="text"-->
<!-- style="color: #49cec9"-->
<!-- @click="handleUpdate(scope.row)"-->
<!-- >修改</el-button>-->
<coolbutton style="color: #49cec9" :type="typeParent" :name="updataName" :size="size" :haspermi="updateHaspermi" @btn-click="handleUpdate(scope.row)" />
<!-- <el-button-->
<!-- v-hasPermi="['sys:user:resetPwd']"-->
<!-- size="mini"-->
<!-- type="text"-->
<!-- :loading="addLoading"-->
<!-- @click="handleResetPwd(scope.row)"-->
<!-- >重置</el-button>-->
<coolbutton :type="typeParent" :name="resetName" :size="size" :haspermi="resetHaspermi" @btn-click="handleResetPwd(scope.row)" />
<!-- <el-button-->
<!-- v-if="scope.row.businessId !== 1"-->
<!-- v-hasPermi="['sys:user:delete']"-->
<!-- size="mini"-->
<!-- type="text"-->
<!-- icon="el-icon-delete"-->
<!-- @click="handleDelete(scope.row)"-->
<!-- >删除</el-button>-->
<coolbutton v-if="scope.row.businessId !== 1" :type="typeParent" :name="nameParent" :size="size" :icon="delicon" :haspermi="haspermi" @btn-click="handleDelete(scope.row)" />
</template>
</el-table-column>
</el-table>
......@@ -397,14 +402,14 @@ import {
// userLoginManage
} from '@/api/system/user'
import { getToken } from '@/utils/auth'
import { getChildrenDept, treeselect } from '@/api/system/dept'
import { treeselect } from '@/api/system/dept'
import TreeSelect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { getlistRole, listRole } from '@/api/system/role'
import { getlistRole } from '@/api/system/role'
import Coolbutton from '@/components/coolbutton'
export default {
name: 'User',
components: { TreeSelect },
components: { TreeSelect, Coolbutton },
data() {
var trueGroupName = (rule, value, callback) => {
if (value && !value.trim()) {
......@@ -445,6 +450,25 @@ export default {
text: true,
password: false
},
typeParent: 'text',
typePrimary: 'primary',
typeSuccess: 'success',
nameParent: '删除',
resetName: '重置',
addName: '新增',
exportName: '导出',
updataName: '修改',
size: 'mini',
smallSize: 'small',
delicon: 'el-icon-delete',
addIcon: 'el-icon-plus',
exportIcon: 'el-icon-download',
resetIcon: '',
haspermi: ['sys:user:delete'],
resetHaspermi: ['sys:user:resetPwd'],
updateHaspermi: ['sys:user:update'],
addHaspermi: ['sys:user:add'],
exportHaspermi: ['sys:user:export'],
pwdType: 'password',
// 遮罩层
loading: true,
......@@ -639,14 +663,17 @@ export default {
changeValue() {
this.$refs.form.validateField('id')
},
a() {
console.log('调用按钮组件')
},
/** 查询用户列表 */
getList() {
this.loading = true
listUser(this.queryParams).then(response => {
this.userList = response.rows
this.total = response.total
this.loading = false
}
this.userList = response.rows
this.total = response.total
this.loading = false
}
)
},
roleChange(e) {
......
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