roleList.vue 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271
  1. <template>
  2. <a-card size="small" :bordered="false">
  3. <a-spin :spinning="spinning" tip="Loading...">
  4. <div class="table-page-search-wrapper">
  5. <a-form layout="inline">
  6. <a-row :gutter="48">
  7. <a-col :md="6" :sm="24">
  8. <a-form-item label="角色名称">
  9. <a-input
  10. allowClear
  11. v-model.trim="queryParam.name"
  12. placeholder="请输入角色名称"
  13. :maxLength="30"
  14. id="roleList-name"
  15. @pressEnter="$refs.table.refresh(true)" />
  16. </a-form-item>
  17. </a-col>
  18. <a-col :md="6" :sm="24">
  19. <a-form-item label="状态">
  20. <v-select code="ENABLE_FLAG" v-model="queryParam.isEnable" allowClear placeholder="请选择状态" id="roleList-isEnable"></v-select>
  21. </a-form-item>
  22. </a-col>
  23. <a-col :md="6" :sm="24">
  24. <a-button type="primary" @click="$refs.table.refresh(true)" id="roleList-handSubmit" style="margin-right: 10px;">查询</a-button>
  25. <a-button type="" @click="reset" id="roleList-reset">重置</a-button>
  26. </a-col>
  27. </a-row>
  28. </a-form>
  29. </div>
  30. <div class="table-operator">
  31. <a-button v-if="$hasPermissions('B_powerMD_role_add')" type="primary" class="button-error" @click="openModal" id="roleList-openModal">新增</a-button>
  32. </div>
  33. <s-table
  34. ref="table"
  35. size="default"
  36. rowKey="id"
  37. :columns="columns"
  38. :data="loadData"
  39. style="word-break: break-all;"
  40. bordered>
  41. <!-- 启用禁用 -->
  42. <span slot="status" slot-scope="text, record">
  43. <a-switch
  44. v-if="$hasPermissions('B_powerMD_role_enable')"
  45. checkedChildren="启用"
  46. unCheckedChildren="禁用"
  47. id="roleList-isEnable"
  48. v-model="record.isEnable"
  49. @change="changeFlagHandle(text, record)" />
  50. <span v-else>{{ record.isEnable==1?'已启用':'已禁用' }}</span>
  51. </span>
  52. <!-- 角色描述 -->
  53. <template slot="remarks" slot-scope="text, record">
  54. <span class="text-overflows" :title="record.remarks">{{ record.remarks ?record.remarks : '--' }}</span>
  55. </template>
  56. <!-- 操作 -->
  57. <span slot="action" slot-scope="text, record">
  58. <a-icon v-if="$hasPermissions('M_powerMD_role_menu')" type="setting" title="菜单权限" :style="{ fontSize: '20px', color: '#e29e14', padding: '0 10px' }" @click="openMenuModal(record)" />
  59. <a-icon v-if="$hasPermissions('B_powerMD_role_edit')" type="edit" title="编辑" :style="{fontSize: '20px',color:' #1890FF',padding:' 0 10px'}" @click="handleEdit(record)" />
  60. <a-icon
  61. type="delete"
  62. title="删除"
  63. :style="{fontSize: '20px',color: '#f00',padding: '0 10px'}"
  64. v-if="!record.isEnable && $hasPermissions('B_powerMD_role_del')"
  65. @click="delect(record)" />
  66. </span>
  67. </s-table>
  68. </a-spin>
  69. <roleModal :visible="showModal" :data="itemData" @refresh="refreshTable" @close="showModal = false"></roleModal>
  70. <menuModal :visible="showMenuModal" :data="menuData" @close="showMenuModal = false"></menuModal>
  71. </a-card>
  72. </template>
  73. <script>
  74. import {
  75. STable,
  76. VSelect
  77. } from '@/components'
  78. import roleModal from './roleModal.vue'
  79. import menuModal from './menuModal.vue'
  80. import {
  81. getPowerRoleList,
  82. updateEnableStatus,
  83. delectRolePower,
  84. getMenuList
  85. } from '@/api/powerRole-md.js'
  86. export default {
  87. name: 'RoleList',
  88. components: {
  89. STable,
  90. VSelect,
  91. roleModal,
  92. menuModal
  93. },
  94. data () {
  95. return {
  96. spinning: false,
  97. // 查询参数
  98. queryParam: {
  99. name: '',
  100. isEnable: ''
  101. },
  102. showModal: false,
  103. showMenuModal: false,
  104. itemData: {}, // 编辑行数据
  105. menuData: {},
  106. // 表头
  107. columns: [{
  108. title: '序号',
  109. dataIndex: 'no',
  110. width: 60,
  111. align: 'center'
  112. },
  113. {
  114. title: '创建时间',
  115. dataIndex: 'createDate',
  116. width: 150,
  117. align: 'center'
  118. },
  119. {
  120. title: '角色名称',
  121. dataIndex: 'name',
  122. width: 150,
  123. align: 'center'
  124. },
  125. {
  126. title: '角色描述',
  127. dataIndex: 'remarks',
  128. width: 200,
  129. align: 'center',
  130. scopedSlots: {
  131. customRender: 'remarks'
  132. }
  133. },
  134. {
  135. title: '状态',
  136. width: 150,
  137. align: 'center',
  138. scopedSlots: {
  139. customRender: 'status'
  140. }
  141. },
  142. {
  143. title: '操作',
  144. width: 150,
  145. align: 'center',
  146. scopedSlots: {
  147. customRender: 'action'
  148. }
  149. }
  150. ],
  151. // 加载数据方法 必须为 Promise 对象
  152. loadData: parameter => {
  153. return getPowerRoleList(Object.assign(parameter, this.queryParam)).then(res => {
  154. const no = (res.data.pageNo - 1) * res.data.pageSize
  155. for (let i = 0; i < res.data.list.length; i++) {
  156. const _item = res.data.list[i]
  157. _item.no = no + i + 1
  158. _item.isEnable = _item.isEnable + '' === '1'
  159. }
  160. return res.data
  161. })
  162. },
  163. optionAlertShow: false
  164. }
  165. },
  166. beforeRouteEnter (to, from, next) {
  167. next(vm => {
  168. // vm.$refs.table.refresh()
  169. })
  170. },
  171. methods: {
  172. // 刷新列表
  173. refreshTable () {
  174. this.$refs.table.refresh(true)
  175. },
  176. // 重置
  177. reset () {
  178. this.queryParam.name = ''
  179. this.queryParam.isEnable = ''
  180. this.refreshTable()
  181. },
  182. // 新增
  183. openModal () {
  184. this.showModal = true
  185. this.itemData = {}
  186. },
  187. // 打开分配权限弹窗
  188. openMenuModal (row) {
  189. this.getMenuList(row.id)
  190. },
  191. // 获取菜单树列表
  192. getMenuList (id) {
  193. const _this = this
  194. getMenuList({
  195. id: id
  196. }).then(res => {
  197. if (res.status == 200) {
  198. _this.menuData = res.data
  199. this.showMenuModal = true
  200. }
  201. })
  202. },
  203. // 删除
  204. delect (row) {
  205. const _this = this
  206. this.$confirm({
  207. title: '警告',
  208. content: '删除后无法恢复,确认删除?',
  209. centered: true,
  210. onOk () {
  211. _this.spinning = true
  212. delectRolePower({
  213. id: row.id
  214. }).then(res => {
  215. if (res.status == 200) {
  216. _this.$message.success(res.message)
  217. _this.$refs.table.refresh()
  218. _this.spinning = false
  219. } else {
  220. _this.spinning = false
  221. }
  222. })
  223. }
  224. })
  225. },
  226. handleEdit (row) {
  227. this.showModal = true
  228. this.itemData = row
  229. },
  230. // 修改状态
  231. changeFlagHandle (text, record) {
  232. const _data = {
  233. id: record.id,
  234. flag: record.isEnable ? '1' : '0'
  235. }
  236. this.spinning = true
  237. updateEnableStatus(_data).then(res => {
  238. if (res.status == 200) {
  239. this.$message.success(res.message)
  240. this.$refs.table.refresh()
  241. this.spinning = false
  242. } else {
  243. this.$refs.table.refresh()
  244. this.spinning = false
  245. }
  246. })
  247. }
  248. }
  249. }
  250. </script>
  251. <style scoped>
  252. .action-button {
  253. line-height: 40px;
  254. white-space: nowrap;
  255. padding: 5px 10px;
  256. background-color: #1890ff;
  257. border-radius: 4px;
  258. color: #fff;
  259. margin-right: 5px;
  260. }
  261. .red-text {
  262. background-color: red;
  263. }
  264. .menu-text {
  265. background-color: #f90;
  266. }
  267. </style>