roleList.vue 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320
  1. <template>
  2. <div>
  3. <a-card size="small" :bordered="false" class="roleList-wrap searchBoxNormal">
  4. <div ref="tableSearch" class="table-page-search-wrapper">
  5. <!-- 搜索条件 -->
  6. <a-form layout="inline" id="roleList-form" @keyup.enter.native="$refs.table.refresh(true)">
  7. <a-row :gutter="15">
  8. <a-col :md="6" :sm="24">
  9. <a-form-item label="角色名称">
  10. <a-input
  11. allowClear
  12. v-model.trim="queryParam.name"
  13. placeholder="请输入角色名称"
  14. :maxLength="30"
  15. id="roleList-name"
  16. @pressEnter="$refs.table.refresh(true)" />
  17. </a-form-item>
  18. </a-col>
  19. <a-col :md="6" :sm="24">
  20. <a-form-item label="状态">
  21. <v-select code="ENABLE_FLAG" v-model="queryParam.isEnable" allowClear placeholder="请选择状态" id="roleList-isEnable"></v-select>
  22. </a-form-item>
  23. </a-col>
  24. <a-col :md="6" :sm="24">
  25. <a-button type="primary" @click="$refs.table.refresh(true)" id="roleList-handSubmit" style="margin-right: 10px;">查询</a-button>
  26. <a-button type="" @click="reset" id="roleList-reset">重置</a-button>
  27. </a-col>
  28. </a-row>
  29. </a-form>
  30. </div>
  31. </a-card>
  32. <a-card size="small" :bordered="false">
  33. <!-- 操作按钮 -->
  34. <a-spin :spinning="spinning" tip="Loading...">
  35. <div class="table-operator">
  36. <a-button type="primary" v-if="$hasPermissions('B_power_role_add')" @click="openModal" id="roleList-openModal">新增</a-button>
  37. </div>
  38. <!-- 列表 -->
  39. <s-table
  40. class="sTable fixPagination"
  41. ref="table"
  42. :style="{ height: tableHeight+70+'px' }"
  43. size="small"
  44. rowKey="id"
  45. :columns="columns"
  46. :data="loadData"
  47. :scroll="{ y: tableHeight }"
  48. style="word-break: break-all;"
  49. :defaultLoadData="false"
  50. bordered>
  51. <!-- 启用禁用 -->
  52. <span slot="status" slot-scope="text, record">
  53. <a-switch
  54. v-if="$hasPermissions('B_power_role_enable')"
  55. checkedChildren="启用"
  56. unCheckedChildren="禁用"
  57. :id="'roleList-isEnable-btn'+record.id"
  58. v-model="record.isEnable"
  59. @change="changeFlagHandle(text, record)" />
  60. <span v-else>{{ record.isEnable==1?'已启用':'已禁用' }}</span>
  61. </span>
  62. <!-- 角色描述 -->
  63. <template slot="remarks" slot-scope="text, record">
  64. <span class="text-overflows" :title="record.remarks">{{ record.remarks ?record.remarks : '--' }}</span>
  65. </template>
  66. <!-- 操作 -->
  67. <span slot="action" slot-scope="text, record">
  68. <a-button
  69. size="small"
  70. type="link"
  71. class="button-info"
  72. :id="'roleList-usePower-btn'+record.id"
  73. v-if="$hasPermissions('M_power_role_menu')"
  74. @click="openMenuModal(record,1)"
  75. >
  76. 功能权限
  77. </a-button>
  78. <a-button
  79. size="small"
  80. type="link"
  81. class="button-info"
  82. :id="'roleList-pricePower-btn'+record.id"
  83. v-if="$hasPermissions('M_power_role_menu')"
  84. @click="openMenuModal(record,0)"
  85. >
  86. 价格权限
  87. </a-button>
  88. <a-button
  89. size="small"
  90. type="link"
  91. class="button-info"
  92. :id="'roleList-edit-btn'+record.id"
  93. v-if="$hasPermissions('B_power_role_edit')"
  94. @click="handleEdit(record)"
  95. >
  96. 编辑
  97. </a-button>
  98. <a-button
  99. size="small"
  100. type="link"
  101. class="button-error"
  102. :id="'roleList-del-btn'+record.id"
  103. v-if="!record.isEnable && $hasPermissions('B_power_role_del')"
  104. @click="delect(record)"
  105. >
  106. 删除
  107. </a-button>
  108. <span v-if="!$hasPermissions('M_power_role_menu') && !$hasPermissions('B_power_role_edit') && (record.isEnable && !$hasPermissions('B_power_role_del'))">--</span>
  109. </span>
  110. </s-table>
  111. </a-spin>
  112. <!-- 添加角色弹窗 -->
  113. <roleModal :visible="showModal" @refresh="$refs.table.refresh()" :nowData="itemData" @close="closeRole"></roleModal>
  114. <!-- 价格权限、功能权限弹窗 -->
  115. <menuModal :visible="showMenuModal" @refresh="$refs.table.refresh()" :nowData="menuData" @close="showMenuModal = false"></menuModal>
  116. </a-card>
  117. </div>
  118. </template>
  119. <script>
  120. import { commonMixin } from '@/utils/mixin'
  121. // 组件
  122. import { STable, VSelect } from '@/components'
  123. import roleModal from './roleModal.vue'
  124. import menuModal from './menuModal.vue'
  125. // 接口
  126. import { getPowerRoleList, updateEnableStatus, delectRolePower, getMenuList } from '@/api/power-role.js'
  127. export default {
  128. name: 'PowerRoleList',
  129. mixins: [commonMixin],
  130. components: { STable, VSelect, roleModal, menuModal },
  131. data () {
  132. return {
  133. spinning: false,
  134. tableHeight: 0, // 表格高度
  135. // 查询参数
  136. queryParam: {
  137. name: '', // 角色名称
  138. isEnable: ''// 状态
  139. },
  140. showModal: false, // 角色弹窗
  141. showMenuModal: false, // 权限弹窗
  142. itemData: {}, // 编辑行数据
  143. menuData: {}, // 角色列表
  144. // 表头
  145. columns: [
  146. { title: '序号', dataIndex: 'no', width: '5%', align: 'center' },
  147. { title: '创建时间', dataIndex: 'createDate', width: '15%', align: 'center' },
  148. { title: '角色名称', dataIndex: 'name', width: '25%', align: 'center' },
  149. { title: '角色描述', dataIndex: 'remarks', width: '25%', align: 'center', scopedSlots: { customRender: 'remarks' } },
  150. { title: '状态', width: '15%', align: 'center', scopedSlots: { customRender: 'status' } },
  151. { title: '操作', width: '15%', align: 'center', scopedSlots: { customRender: 'action' } }
  152. ],
  153. // 加载数据方法 必须为 Promise 对象
  154. loadData: parameter => {
  155. this.spinning = true
  156. // 获取列表数据 有分页
  157. return getPowerRoleList(Object.assign(parameter, this.queryParam)).then(res => {
  158. let data
  159. if (res.status == 200) {
  160. data = res.data
  161. // 计算表格序号
  162. const no = (data.pageNo - 1) * data.pageSize
  163. for (let i = 0; i < data.list.length; i++) {
  164. const _item = data.list[i]
  165. _item.no = no + i + 1
  166. _item.isEnable = _item.isEnable + '' === '1'
  167. }
  168. }
  169. this.spinning = false
  170. return data
  171. })
  172. },
  173. optionAlertShow: false
  174. }
  175. },
  176. beforeRouteEnter (to, from, next) {
  177. next(vm => {
  178. // vm.$refs.table.refresh()
  179. })
  180. },
  181. methods: {
  182. // 关闭角色弹窗
  183. closeRole () {
  184. this.showModal = false
  185. this.itemData = {}
  186. },
  187. // 刷新列表
  188. refreshTable () {
  189. this.$refs.table.refresh(true)
  190. },
  191. // 重置
  192. reset () {
  193. this.queryParam.name = ''
  194. this.queryParam.isEnable = ''
  195. this.refreshTable()
  196. },
  197. // 新增
  198. openModal () {
  199. this.showModal = true
  200. this.itemData = {}
  201. },
  202. // 打开分配权限弹窗
  203. openMenuModal (row, type) {
  204. this.getMenuList(row.id, type)
  205. },
  206. // 获取菜单树列表
  207. getMenuList (id, type) {
  208. const _this = this
  209. getMenuList({
  210. id: id
  211. }).then(res => {
  212. if (res.status == 200) {
  213. _this.menuData = res.data
  214. _this.menuData.type = type
  215. this.showMenuModal = true
  216. }
  217. })
  218. },
  219. // 删除
  220. delect (row) {
  221. const _this = this
  222. this.$confirm({
  223. title: '警告',
  224. content: '删除后无法恢复,确认删除?',
  225. centered: true,
  226. onOk () {
  227. _this.spinning = true
  228. delectRolePower({
  229. id: row.id
  230. }).then(res => {
  231. if (res.status == 200) {
  232. _this.$message.success(res.message)
  233. _this.$refs.table.refresh()
  234. _this.spinning = false
  235. } else {
  236. _this.spinning = false
  237. }
  238. })
  239. }
  240. })
  241. },
  242. // 编辑
  243. handleEdit (row) {
  244. this.showModal = true
  245. this.itemData = row
  246. },
  247. // 修改状态
  248. changeFlagHandle (text, record) {
  249. const _data = {
  250. id: record.id,
  251. flag: record.isEnable ? '1' : '0'
  252. }
  253. this.spinning = true
  254. updateEnableStatus(_data).then(res => {
  255. if (res.status == 200) {
  256. this.$message.success(res.message)
  257. this.$refs.table.refresh()
  258. this.spinning = false
  259. } else {
  260. this.$refs.table.refresh()
  261. this.spinning = false
  262. }
  263. })
  264. },
  265. // 初始化
  266. pageInit () {
  267. const _this = this
  268. this.$nextTick(() => { // 页面渲染完成后的回调
  269. _this.setTableH()
  270. })
  271. },
  272. // 计算表格高度
  273. setTableH () {
  274. const tableSearchH = this.$refs.tableSearch.offsetHeight
  275. this.tableHeight = window.innerHeight - tableSearchH - 236
  276. }
  277. },
  278. watch: {
  279. '$store.state.app.winHeight' (newValue, oldValue) { // 窗口变更时,需同时更改表格高度
  280. this.setTableH()
  281. }
  282. },
  283. mounted () {
  284. if (!this.$store.state.app.isNewTab) { // 页签刷新时调用
  285. this.pageInit()
  286. this.reset()
  287. }
  288. },
  289. activated () {
  290. // 如果是新页签打开,则重置当前页面
  291. if (this.$store.state.app.isNewTab) {
  292. this.pageInit()
  293. this.reset()
  294. }
  295. // 仅刷新列表,不重置页面
  296. if (this.$store.state.app.updateList) {
  297. this.pageInit()
  298. this.$refs.table.refresh()
  299. }
  300. }
  301. }
  302. </script>
  303. <style scoped>
  304. .action-button {
  305. line-height: 40px;
  306. white-space: nowrap;
  307. padding: 5px 10px;
  308. background-color: #1890ff;
  309. border-radius: 4px;
  310. color: #fff;
  311. margin-right: 5px;
  312. }
  313. .red-text {
  314. background-color: red;
  315. }
  316. .menu-text {
  317. background-color: #f90;
  318. }
  319. </style>