roleList.vue 7.9 KB

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