index.vue 7.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367
  1. <template>
  2. <div class="role">
  3. <div class="tree">
  4. <treeList
  5. :data="treeListData"
  6. v-model="sourceList.pagination.tenantId"
  7. node-key="id"
  8. @change="treeChange"
  9. >
  10. </treeList>
  11. </div>
  12. <div class="content">
  13. <byTable
  14. :source="sourceList.data"
  15. :pagination="sourceList.pagination"
  16. :config="config"
  17. :loading="loading"
  18. highlight-current-row
  19. :selectConfig="selectConfig"
  20. :table-events="{
  21. //element talbe事件都能传
  22. 'select': select,
  23. }"
  24. :action-list="[
  25. {
  26. text: '权限配置',
  27. plain: true,
  28. //type: 'warning',
  29. action: () => openRoomModal(),
  30. disabled:selection.data.length != 1,
  31. },
  32. {
  33. text: '添加角色',
  34. action: () => openModal('add'),
  35. disabled:!sourceList.pagination.tenantId
  36. },
  37. ]"
  38. @get-list="getList"
  39. >
  40. <template #slotName="{ item }">
  41. {{ item.createTime }}
  42. </template>
  43. </byTable>
  44. </div>
  45. <el-dialog
  46. :title="modalType == 'add' ? '新增' : '编辑'"
  47. v-model="dialogVisible"
  48. width="500"
  49. v-loading="loading"
  50. >
  51. <byForm
  52. :formConfig="formConfig"
  53. :formOption="formOption"
  54. v-model="formData.data"
  55. :rules="rules"
  56. ref="byform"
  57. >
  58. </byForm>
  59. <template #footer>
  60. <el-button @click="dialogVisible = false" size="large"
  61. >取 消</el-button
  62. >
  63. <el-button
  64. type="primary"
  65. @click="submitForm('byform')"
  66. size="large"
  67. :loading="submitLoading">
  68. 确 定
  69. </el-button>
  70. </template>
  71. </el-dialog>
  72. <el-dialog
  73. title="权限配置"
  74. v-model="roomDialogVisible"
  75. width="500"
  76. :before-close="handleClose"
  77. v-loading="loading">
  78. <el-tree
  79. :data="treeData"
  80. :show-checkbox="true"
  81. v-model="formData.treeData"
  82. ref="tree"
  83. node-key="id"
  84. >
  85. </el-tree>
  86. <template #footer>
  87. <el-button @click="roomDialogVisible = false" size="large"
  88. >取 消</el-button
  89. >
  90. <el-button
  91. type="primary"
  92. @click="submitTree('byform')"
  93. size="large"
  94. :loading="submitLoading">
  95. 确 定
  96. </el-button>
  97. </template>
  98. </el-dialog>
  99. </div>
  100. </template>
  101. <script setup>
  102. /* eslint-disable vue/no-unused-components */
  103. import { ElMessage, ElMessageBox } from 'element-plus'
  104. import byTable from '@/components/byTable/index'
  105. import byForm from '@/components/byForm/index'
  106. import treeList from '@/components/treeList/index'
  107. import { computed, defineComponent, ref } from 'vue'
  108. const loading = ref(false)
  109. const submitLoading = ref(false)
  110. const sourceList = ref({
  111. data: [],
  112. pagination: {
  113. total: 3,
  114. pageNum: 1,
  115. pageSize: 10,
  116. },
  117. })
  118. let dialogVisible = ref(false)
  119. let roomDialogVisible = ref(false)
  120. let modalType = ref('add')
  121. let rules = ref({
  122. roleKey: [{ required: true, message: '请输入角色编码', trigger: 'blur' }],
  123. roleName: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
  124. })
  125. const { proxy } = getCurrentInstance()
  126. const selectConfig = computed(() => {
  127. return [
  128. ]
  129. })
  130. const config = computed(() => {
  131. return [
  132. {
  133. type: 'selection',
  134. attrs: {
  135. label: '多选',
  136. prop: 'remark',
  137. },
  138. },
  139. {
  140. attrs: {
  141. label: '角色编码',
  142. prop: 'roleKey',
  143. },
  144. },
  145. {
  146. attrs: {
  147. label: '角色名称',
  148. prop: 'roleName',
  149. align: 'left',
  150. },
  151. },
  152. {
  153. attrs: {
  154. label: '创建时间',
  155. prop: 'createTime',
  156. },
  157. },
  158. {
  159. attrs: {
  160. label: '操作',
  161. width: '200',
  162. align: 'right',
  163. },
  164. // 渲染 el-button,一般用在最后一列。
  165. renderHTML(row) {
  166. return [
  167. {
  168. attrs: {
  169. label: '修改',
  170. type: 'primary',
  171. text: true,
  172. },
  173. el: 'button',
  174. click() {
  175. getDtl(row)
  176. },
  177. },
  178. {
  179. attrs: {
  180. label: '删除',
  181. type: 'danger',
  182. text: true,
  183. },
  184. el: 'button',
  185. click() {
  186. // 弹窗提示是否删除
  187. ElMessageBox.confirm('此操作将永久删除该数据, 是否继续?', '提示', {
  188. confirmButtonText: '确定',
  189. cancelButtonText: '取消',
  190. type: 'warning',
  191. })
  192. .then(() => {
  193. // 删除
  194. proxy.post('/tenantRole/' + row.roleId, {
  195. id: row.roleId,
  196. },'delete').then((res) => {
  197. ElMessage({
  198. message: '删除成功',
  199. type: 'success',
  200. })
  201. getList()
  202. })
  203. })
  204. },
  205. },
  206. ]
  207. },
  208. },
  209. ]
  210. })
  211. let formData = reactive({
  212. data:{},
  213. treeData:[],
  214. })
  215. const formOption = reactive({
  216. inline: true,
  217. labelWidth: 100,
  218. itemWidth: 100,
  219. rules: [],
  220. })
  221. const byform = ref(null)
  222. const treeData = ref([])
  223. const treeListData = ref([])
  224. const formConfig = computed(() => {
  225. return [
  226. {
  227. type: 'input',
  228. prop: 'roleKey',
  229. label: '角色编码',
  230. required: true,
  231. itemWidth: 100,
  232. //disabled:true,
  233. itemType: 'text',
  234. },
  235. {
  236. type: 'input',
  237. prop: 'roleName',
  238. label: '角色名称',
  239. required: true,
  240. itemWidth: 100,
  241. //disabled:true,
  242. itemType: 'text',
  243. },
  244. ]
  245. })
  246. const getTreeList = () => {
  247. proxy.post('/tenantInfo/list').then((message) => {
  248. message.map((item) => {
  249. item.label = item.enterpriseName
  250. item.id = item.tenantId
  251. item.children = []
  252. })
  253. treeListData.value = message
  254. console.log(treeListData.value)
  255. })
  256. }
  257. const getList = async (req) => {
  258. sourceList.value.pagination = { ...sourceList.value.pagination, ...req }
  259. loading.value = true
  260. proxy.get('/tenantRole/list',sourceList.value.pagination).then((message) => {
  261. console.log(message)
  262. sourceList.value.data = message.rows
  263. sourceList.value.pagination.total = message.total
  264. setTimeout(() => {
  265. loading.value = false
  266. }, 200)
  267. })
  268. }
  269. const treeChange = ((e) => {
  270. console.log(e)
  271. sourceList.value.pagination.tenantId = e.id
  272. getList({tenantId:e.id})
  273. })
  274. const openModal = () => {
  275. dialogVisible.value = true
  276. modalType.value = 'add'
  277. formData.data = {}
  278. }
  279. const TreetenantId = ref('')
  280. const selection = ref({
  281. data:[],
  282. })
  283. const select = (_selection, row) => {
  284. selection.value.data = _selection
  285. console.log(_selection.length)
  286. }
  287. const openRoomModal = () => {
  288. roomDialogVisible.value = true
  289. proxy.get('/tenantRole/roleMenuTreeSelect/' + selection.value.data[0].roleId).then((res) => {
  290. if(res.code == 200){
  291. treeData.value = res.menus
  292. formData.treeData = res.checkedKeys
  293. tree.value.setCheckedKeys(res.checkedKeys)
  294. }
  295. })
  296. }
  297. const tree = ref(null)
  298. const submitTree = () => {
  299. proxy.post('/tenantRole', {
  300. ... selection.value.data[0],
  301. menuIds:tree.value.getCheckedKeys(),
  302. },'PUT').then((res) => {
  303. ElMessage({
  304. message: '保存成功',
  305. type: 'success',
  306. })
  307. roomDialogVisible.value = false
  308. })
  309. }
  310. const submitForm = () => {
  311. byform.value.handleSubmit((valid) => {
  312. const method = modalType.value == 'add' ? 'POST' : 'PUT'
  313. console.log(method)
  314. proxy.post(
  315. '/tenantRole',
  316. {...formData.data,
  317. tenantId:sourceList.value.pagination.tenantId,
  318. roleSort:1,
  319. status:"0"},
  320. method
  321. ).then((res) => {
  322. ElMessage({
  323. message: modalType.value == 'add' ? '添加成功' : '编辑成功',
  324. type: 'success',
  325. })
  326. dialogVisible.value = false
  327. getList()
  328. })
  329. })
  330. }
  331. const getDtl = (row) => {
  332. formData.data = {...row}
  333. modalType.value = 'edit'
  334. console.log(modalType.value)
  335. dialogVisible.value = true
  336. }
  337. getTreeList()
  338. getList()
  339. </script>
  340. <style lang="scss" scoped>
  341. .role {
  342. padding: 20px;
  343. display: flex;
  344. justify-content: space-between;
  345. .tree{
  346. width: 300px;
  347. }
  348. .content{
  349. width:calc(100% - 320px);
  350. }
  351. }
  352. </style>