|
@@ -11,7 +11,7 @@
|
|
placeholder="请输入角色名称"
|
|
placeholder="请输入角色名称"
|
|
:maxLength="30"
|
|
:maxLength="30"
|
|
id="roleList-name"
|
|
id="roleList-name"
|
|
- @pressEnter="$refs.table.refresh(true)"/>
|
|
|
|
|
|
+ @pressEnter="$refs.table.refresh(true)" />
|
|
</a-form-item>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-col>
|
|
|
|
|
|
@@ -27,7 +27,7 @@
|
|
</a-row>
|
|
</a-row>
|
|
</a-form>
|
|
</a-form>
|
|
</div>
|
|
</div>
|
|
- <a-divider/>
|
|
|
|
|
|
+ <a-divider />
|
|
<div class="table-operator">
|
|
<div class="table-operator">
|
|
<a-button type="primary" icon="plus" @click="openModal" id="roleList-openModal">新建</a-button>
|
|
<a-button type="primary" icon="plus" @click="openModal" id="roleList-openModal">新建</a-button>
|
|
</div>
|
|
</div>
|
|
@@ -38,11 +38,10 @@
|
|
rowKey="id"
|
|
rowKey="id"
|
|
:columns="columns"
|
|
:columns="columns"
|
|
:data="loadData"
|
|
:data="loadData"
|
|
- bordered
|
|
|
|
- >
|
|
|
|
|
|
+ bordered>
|
|
<!-- 启用禁用 -->
|
|
<!-- 启用禁用 -->
|
|
<span slot="status" slot-scope="text, record">
|
|
<span slot="status" slot-scope="text, record">
|
|
- <a-switch checkedChildren="启用" unCheckedChildren="禁用" id="roleList-isEnable" v-model="record.isEnable" @change="changeFlagHandle(text, record)"/>
|
|
|
|
|
|
+ <a-switch checkedChildren="启用" unCheckedChildren="禁用" id="roleList-isEnable" v-model="record.isEnable" @change="changeFlagHandle(text, record)" />
|
|
</span>
|
|
</span>
|
|
<!-- 角色描述 -->
|
|
<!-- 角色描述 -->
|
|
<template slot="remarks" slot-scope="text, record">
|
|
<template slot="remarks" slot-scope="text, record">
|
|
@@ -50,9 +49,17 @@
|
|
</template>
|
|
</template>
|
|
<!-- 操作 -->
|
|
<!-- 操作 -->
|
|
<span slot="action" slot-scope="text, record">
|
|
<span slot="action" slot-scope="text, record">
|
|
- <a class="action-button menu-text" @click="openMenuModal(record)" id="roleList-openMenuModal">菜单权限</a>
|
|
|
|
|
|
+ <a-icon type="key" title="菜单权限" :style="{ fontSize: '20px', color: '#e29e14', padding: '0 10px' }" @click="openMenuModal(record)" />
|
|
|
|
+ <a-icon type="edit" title="编辑" :style="{fontSize: '20px',color:' #1890FF',padding:' 0 10px'}" @click="handleEdit(record)" />
|
|
|
|
+ <a-icon
|
|
|
|
+ type="delete"
|
|
|
|
+ title="删除"
|
|
|
|
+ :style="{fontSize: '20px',color: '#f00',padding: '0 10px'}"
|
|
|
|
+ v-if="!record.isEnable"
|
|
|
|
+ @click="delect(record)" />
|
|
|
|
+ <!-- <a class="action-button menu-text" @click="openMenuModal(record)" id="roleList-openMenuModal">菜单权限</a>
|
|
<a class="action-button" @click="handleEdit(record)" id="roleList-handleEdit">修改</a>
|
|
<a class="action-button" @click="handleEdit(record)" id="roleList-handleEdit">修改</a>
|
|
- <a v-if="!record.isEnable" class="action-button red-text" @click="delect(record)" id="roleList-delect">删除</a>
|
|
|
|
|
|
+ <a v-if="!record.isEnable" class="action-button red-text" @click="delect(record)" id="roleList-delect">删除</a> -->
|
|
</span>
|
|
</span>
|
|
</s-table>
|
|
</s-table>
|
|
<roleModal :visible="showModal" :data="itemData" @refresh="refreshTable" @close="showModal = false"></roleModal>
|
|
<roleModal :visible="showModal" :data="itemData" @refresh="refreshTable" @close="showModal = false"></roleModal>
|
|
@@ -61,14 +68,25 @@
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
-import { STable, VSelect } from '@/components'
|
|
|
|
|
|
+import {
|
|
|
|
+ STable,
|
|
|
|
+ VSelect
|
|
|
|
+} from '@/components'
|
|
import roleModal from './roleModal.vue'
|
|
import roleModal from './roleModal.vue'
|
|
import menuModal from './menuModal.vue'
|
|
import menuModal from './menuModal.vue'
|
|
-import { getPowerRoleList, updateEnableStatus, delectRolePower, getMenuList } from '@/api/power-role.js'
|
|
|
|
|
|
+import {
|
|
|
|
+ getPowerRoleList,
|
|
|
|
+ updateEnableStatus,
|
|
|
|
+ delectRolePower,
|
|
|
|
+ getMenuList
|
|
|
|
+} from '@/api/power-role.js'
|
|
export default {
|
|
export default {
|
|
name: 'RoleList',
|
|
name: 'RoleList',
|
|
components: {
|
|
components: {
|
|
- STable, VSelect, roleModal, menuModal
|
|
|
|
|
|
+ STable,
|
|
|
|
+ VSelect,
|
|
|
|
+ roleModal,
|
|
|
|
+ menuModal
|
|
},
|
|
},
|
|
data () {
|
|
data () {
|
|
return {
|
|
return {
|
|
@@ -82,45 +100,50 @@ export default {
|
|
itemData: {}, // 编辑行数据
|
|
itemData: {}, // 编辑行数据
|
|
menuData: {},
|
|
menuData: {},
|
|
// 表头
|
|
// 表头
|
|
- columns: [
|
|
|
|
- {
|
|
|
|
- title: '序号',
|
|
|
|
- dataIndex: 'no',
|
|
|
|
- width: 60,
|
|
|
|
- align: 'center'
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- title: '创建时间',
|
|
|
|
- dataIndex: 'createDate',
|
|
|
|
- width: '120',
|
|
|
|
- align: 'center'
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- title: '角色名称',
|
|
|
|
- dataIndex: 'name',
|
|
|
|
- width: '100',
|
|
|
|
- align: 'center'
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- title: '角色描述',
|
|
|
|
- dataIndex: 'remarks',
|
|
|
|
- width: '100',
|
|
|
|
- ellipsis: true, // 内容超过宽度 自动出现省略号
|
|
|
|
- align: 'center',
|
|
|
|
- scopedSlots: { customRender: 'remarks' }
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- title: '状态',
|
|
|
|
- width: '100',
|
|
|
|
- align: 'center',
|
|
|
|
- scopedSlots: { customRender: 'status' }
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- title: '操作',
|
|
|
|
- width: '100',
|
|
|
|
- align: 'center',
|
|
|
|
- scopedSlots: { customRender: 'action' }
|
|
|
|
|
|
+ columns: [{
|
|
|
|
+ title: '序号',
|
|
|
|
+ dataIndex: 'no',
|
|
|
|
+ width: 60,
|
|
|
|
+ align: 'center'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '创建时间',
|
|
|
|
+ dataIndex: 'createDate',
|
|
|
|
+ width: 150,
|
|
|
|
+ align: 'center'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '角色名称',
|
|
|
|
+ dataIndex: 'name',
|
|
|
|
+ width: 200,
|
|
|
|
+ align: 'center'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '角色描述',
|
|
|
|
+ dataIndex: 'remarks',
|
|
|
|
+ width: 200,
|
|
|
|
+ ellipsis: true, // 内容超过宽度 自动出现省略号
|
|
|
|
+ align: 'center',
|
|
|
|
+ scopedSlots: {
|
|
|
|
+ customRender: 'remarks'
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '状态',
|
|
|
|
+ width: 150,
|
|
|
|
+ align: 'center',
|
|
|
|
+ scopedSlots: {
|
|
|
|
+ customRender: 'status'
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '操作',
|
|
|
|
+ width: 150,
|
|
|
|
+ align: 'center',
|
|
|
|
+ scopedSlots: {
|
|
|
|
+ customRender: 'action'
|
|
}
|
|
}
|
|
|
|
+ }
|
|
],
|
|
],
|
|
// 加载数据方法 必须为 Promise 对象
|
|
// 加载数据方法 必须为 Promise 对象
|
|
loadData: parameter => {
|
|
loadData: parameter => {
|
|
@@ -167,7 +190,9 @@ export default {
|
|
// 获取菜单树列表
|
|
// 获取菜单树列表
|
|
getMenuList (id) {
|
|
getMenuList (id) {
|
|
const _this = this
|
|
const _this = this
|
|
- getMenuList({ id: id }).then(res => {
|
|
|
|
|
|
+ getMenuList({
|
|
|
|
+ id: id
|
|
|
|
+ }).then(res => {
|
|
if (res.status == 200) {
|
|
if (res.status == 200) {
|
|
_this.menuData = res.data
|
|
_this.menuData = res.data
|
|
this.showMenuModal = true
|
|
this.showMenuModal = true
|
|
@@ -190,13 +215,9 @@ export default {
|
|
}).then(res => {
|
|
}).then(res => {
|
|
console.log(res, 'res1111')
|
|
console.log(res, 'res1111')
|
|
if (res.status == 200) {
|
|
if (res.status == 200) {
|
|
- _this.$message.success('删除成功')
|
|
|
|
|
|
+ _this.$message.success(res.message)
|
|
_this.$refs.table.refresh()
|
|
_this.$refs.table.refresh()
|
|
- } else {
|
|
|
|
- this.$message.error(res.message)
|
|
|
|
}
|
|
}
|
|
- }).catch(() => {
|
|
|
|
- _this.$message.success('删除失败, 请稍后重试')
|
|
|
|
})
|
|
})
|
|
}
|
|
}
|
|
})
|
|
})
|
|
@@ -214,7 +235,7 @@ export default {
|
|
}
|
|
}
|
|
updateEnableStatus(_data).then(res => {
|
|
updateEnableStatus(_data).then(res => {
|
|
if (res.status + '' === '200') {
|
|
if (res.status + '' === '200') {
|
|
- this.$message.success('修改成功')
|
|
|
|
|
|
+ this.$message.success(res.message)
|
|
} else {
|
|
} else {
|
|
record.isEnable = !record.isEnable
|
|
record.isEnable = !record.isEnable
|
|
}
|
|
}
|
|
@@ -224,22 +245,25 @@ export default {
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|
|
<style scoped>
|
|
<style scoped>
|
|
- .table-page-search-wrapper .ant-form-inline .ant-form-item{
|
|
|
|
- margin-bottom: 0;
|
|
|
|
- }
|
|
|
|
- .action-button{
|
|
|
|
- line-height: 40px;
|
|
|
|
- white-space: nowrap;
|
|
|
|
- padding: 5px 10px;
|
|
|
|
- background-color: #1890ff;
|
|
|
|
- border-radius: 4px;
|
|
|
|
- color: #fff;
|
|
|
|
- margin-right: 5px;
|
|
|
|
- }
|
|
|
|
- .red-text{
|
|
|
|
- background-color: red;
|
|
|
|
- }
|
|
|
|
- .menu-text {
|
|
|
|
- background-color: #f90;
|
|
|
|
- }
|
|
|
|
|
|
+ .table-page-search-wrapper .ant-form-inline .ant-form-item {
|
|
|
|
+ margin-bottom: 0;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .action-button {
|
|
|
|
+ line-height: 40px;
|
|
|
|
+ white-space: nowrap;
|
|
|
|
+ padding: 5px 10px;
|
|
|
|
+ background-color: #1890ff;
|
|
|
|
+ border-radius: 4px;
|
|
|
|
+ color: #fff;
|
|
|
|
+ margin-right: 5px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .red-text {
|
|
|
|
+ background-color: red;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .menu-text {
|
|
|
|
+ background-color: #f90;
|
|
|
|
+ }
|
|
</style>
|
|
</style>
|