blog的后端代码
view | history | commit | commitdiff
inleft
2022-03-01 88f419df77ade235ea5e5e24be204842a24b7b33
commit | author | age
9bcb19 1 <template>
I 2   <div>
3     <x-card v-if="hasPerm('sysRole:page')">
4       <div slot="content" class="table-page-search-wrapper">
5         <a-form layout="inline">
6           <a-row :gutter="48">
7             <a-col :md="8" :sm="24">
8               <a-form-item label="角色名">
9                 <a-input v-model="queryParam.name" allow-clear placeholder="请输入角色名"/>
10               </a-form-item>
11             </a-col>
12             <a-col :md="8" :sm="24">
13               <a-form-item label="唯一编码">
14                 <a-input v-model="queryParam.code" allow-clear placeholder="请输入唯一编码"/>
15               </a-form-item>
16             </a-col>
17             <a-col :md="8" :sm="24">
18               <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
19               <a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
20             </a-col>
21           </a-row>
22         </a-form>
23       </div>
24     </x-card>
25     <a-card :bordered="false">
26       <s-table
27         ref="table"
28         :columns="columns"
29         :data="loadData"
30         :alert="false"
31         :rowKey="(record) => record.id"
32       >
33         <template slot="operator" v-if="hasPerm('sysRole:add')">
34           <a-button @click="$refs.addForm.add()" icon="plus" type="primary" v-if="hasPerm('sysRole:add')">新增角色</a-button>
35         </template>
36         <span slot="action" slot-scope="text, record">
37           <a v-if="hasPerm('sysRole:edit')" @click="$refs.editForm.edit(record)">编辑</a>
38           <a-divider type="vertical" v-if="hasPerm('sysRole:edit')"/>
39           <a-dropdown v-if="hasPerm('sysRole:grantMenu') || hasPerm('sysRole:grantData') || hasPerm('sysRole:delete')">
40             <a class="ant-dropdown-link">
41               更多 <a-icon type="down" />
42             </a>
43             <a-menu slot="overlay">
44               <a-menu-item v-if="hasPerm('sysRole:grantMenu')">
45                 <a @click="$refs.roleMenuForm.roleMenu(record)">授权菜单</a>
46               </a-menu-item>
47               <a-menu-item v-if="hasPerm('sysRole:grantData')">
48                 <a @click="$refs.roleOrgForm.roleOrg(record)">授权数据</a>
49               </a-menu-item>
50               <a-menu-item v-if="hasPerm('sysRole:delete')">
51                 <a-popconfirm placement="topRight" title="确认删除？" @confirm="() => sysRoleDelete(record)">
52                   <a>删除</a>
53                 </a-popconfirm>
54               </a-menu-item>
55             </a-menu>
56           </a-dropdown>
57         </span>
58
59       </s-table>
60
61       <add-form ref="addForm" @ok="handleOk" />
62       <edit-form ref="editForm" @ok="handleOk" />
63       <role-menu-form ref="roleMenuForm" @ok="handleOk"/>
64       <role-org-form ref="roleOrgForm" @ok="handleOk"/>
65
66     </a-card>
67   </div>
68 </template>
69
70 <script>
71   import { STable, XCard } from '@/components'
72   import { getRolePage, sysRoleDelete } from '@/api/modular/system/roleManage'
73   import addForm from './addForm'
74   import editForm from './editForm'
75   import roleMenuForm from './roleMenuForm'
76   import roleOrgForm from './roleOrgForm'
77   export default {
78     components: {
79       XCard,
80       STable,
81       addForm,
82       editForm,
83       roleMenuForm,
84       roleOrgForm
85     },
86
87     data () {
88       return {
89         // 查询参数
90         queryParam: {},
91         // 表头
92         columns: [
93           {
94             title: '角色名',
95             dataIndex: 'name'
96           },
97           {
98             title: '唯一编码',
99             dataIndex: 'code'
100           },
101           {
102             title: '排序',
103             dataIndex: 'sort'
104           }
105         ],
106         // 加载数据方法 必须为 Promise 对象
107         loadData: parameter => {
108           return getRolePage(Object.assign(parameter, this.queryParam)).then((res) => {
109             return res.data
110           })
111         }
112     }
113     },
114
115     created () {
116       if (this.hasPerm('sysRole:edit') || this.hasPerm('sysRole:grantMenu') || this.hasPerm('sysRole:grantData') || this.hasPerm('sysRole:delete')) {
117         this.columns.push({
118           title: '操作',
119           width: '150px',
120           dataIndex: 'action',
121           scopedSlots: { customRender: 'action' }
122         })
123       }
124     },
125
126     methods: {
127       sysRoleDelete (record) {
128         sysRoleDelete(record).then((res) => {
129           if (res.success) {
130             this.$message.success('删除成功')
131             this.$refs.table.refresh()
132           } else {
133             this.$message.error('删除失败：' + res.message)
134           }
135         }).catch((err) => {
136           this.$message.error('删除错误：' + err.message)
137         })
138       },
139
140       handleOk () {
141         this.$refs.table.refresh()
142       }
143     }
144
145   }
146 </script>
147
148 <style lang="less">
149   .table-operator {
150     margin-bottom: 18px;
151   }
152   button {
153     margin-right: 8px;
154   }
155
156 </style>