index.vue 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503
  1. <template>
  2. <BasicLayout>
  3. <template #wrapper>
  4. <el-card class="box-card">
  5. <el-form :inline="true">
  6. <el-form-item label="菜单名称">
  7. <el-input
  8. v-model="queryParams.title"
  9. placeholder="请输入菜单名称"
  10. clearable
  11. size="small"
  12. @keyup.enter.native="handleQuery"
  13. />
  14. </el-form-item>
  15. <el-form-item label="状态">
  16. <el-select v-model="queryParams.visible" placeholder="菜单状态" clearable size="small">
  17. <el-option
  18. v-for="dict in visibleOptions"
  19. :key="dict.dictValue"
  20. :label="dict.dictLabel"
  21. :value="dict.dictValue"
  22. />
  23. </el-select>
  24. </el-form-item>
  25. <el-form-item>
  26. <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
  27. <el-button
  28. v-permisaction="['admin:sysMenu:add']"
  29. type="primary"
  30. icon="el-icon-plus"
  31. size="mini"
  32. @click="handleAdd"
  33. >新增</el-button>
  34. </el-form-item>
  35. </el-form>
  36. <el-table
  37. v-loading="loading"
  38. :data="menuList"
  39. border
  40. row-key="menuId"
  41. :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
  42. >
  43. <el-table-column prop="title" label="菜单名称" :show-overflow-tooltip="true" width="180px" />
  44. <el-table-column prop="icon" label="图标" align="center" width="100px">
  45. <template slot-scope="scope">
  46. <svg-icon :icon-class="scope.row.icon" />
  47. </template>
  48. </el-table-column>
  49. <el-table-column prop="sort" label="排序" width="60px" />
  50. <el-table-column prop="permission" label="权限标识" :show-overflow-tooltip="true" />
  51. <el-table-column prop="path" label="组建路径" :show-overflow-tooltip="true">
  52. <template slot-scope="scope">
  53. <span v-if="scope.row.menuType=='A'">{{ scope.row.path }}</span>
  54. <span v-else>{{ scope.row.component }}</span>
  55. </template>
  56. </el-table-column>
  57. <el-table-column prop="visible" label="可见" :formatter="visibleFormat" width="80">
  58. <template slot-scope="scope">
  59. <el-tag
  60. :type="scope.row.visible === '1' ? 'danger' : 'success'"
  61. disable-transitions
  62. >{{ visibleFormat(scope.row) }}</el-tag>
  63. </template>
  64. </el-table-column>
  65. <el-table-column label="创建时间" align="center" prop="createdAt" width="180">
  66. <template slot-scope="scope">
  67. <span>{{ parseTime(scope.row.createdAt) }}</span>
  68. </template>
  69. </el-table-column>
  70. <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180">
  71. <template slot-scope="scope">
  72. <el-button
  73. v-permisaction="['admin:sysMenu:edit']"
  74. size="mini"
  75. type="text"
  76. icon="el-icon-edit"
  77. @click="handleUpdate(scope.row)"
  78. >修改</el-button>
  79. <el-button
  80. v-permisaction="['admin:sysMenu:add']"
  81. size="mini"
  82. type="text"
  83. icon="el-icon-plus"
  84. @click="handleAdd(scope.row)"
  85. >新增</el-button>
  86. <el-button
  87. v-permisaction="['admin:sysMenu:remove']"
  88. size="mini"
  89. type="text"
  90. icon="el-icon-delete"
  91. @click="handleDelete(scope.row)"
  92. >删除</el-button>
  93. </template>
  94. </el-table-column>
  95. </el-table>
  96. <!-- 添加或修改菜单对话框 -->
  97. <el-drawer
  98. ref="drawer"
  99. :title="title"
  100. :before-close="handleClose"
  101. :visible.sync="open"
  102. direction="rtl"
  103. custom-class="demo-drawer"
  104. size="830px"
  105. >
  106. <div class="demo-drawer__content">
  107. <el-form ref="form" :model="form" :rules="rules" label-width="80px">
  108. <el-row>
  109. <el-col :span="24">
  110. <el-form-item label="上级菜单">
  111. <treeselect
  112. v-model="form.parentId"
  113. :options="menuOptions"
  114. :normalizer="normalizer"
  115. :show-count="true"
  116. placeholder="选择上级菜单"
  117. />
  118. </el-form-item>
  119. </el-col>
  120. <el-col :span="12">
  121. <el-form-item label="菜单标题" prop="title">
  122. <el-input v-model="form.title" placeholder="请输入菜单标题" />
  123. </el-form-item>
  124. </el-col>
  125. <el-col :span="12">
  126. <el-form-item label="显示排序" prop="sort">
  127. <el-input-number v-model="form.sort" controls-position="right" :min="0" />
  128. </el-form-item>
  129. </el-col>
  130. <el-col :span="24">
  131. <el-form-item label="菜单类型" prop="menuType">
  132. <el-radio-group v-model="form.menuType">
  133. <el-radio label="M">目录</el-radio>
  134. <el-radio label="C">菜单</el-radio>
  135. <el-radio label="F">按钮</el-radio>
  136. </el-radio-group>
  137. </el-form-item>
  138. </el-col>
  139. <el-col :span="24">
  140. <el-form-item label="菜单图标">
  141. <el-popover
  142. placement="bottom-start"
  143. width="460"
  144. trigger="click"
  145. @show="$refs['iconSelect'].reset()"
  146. >
  147. <IconSelect ref="iconSelect" @selected="selected" />
  148. <el-input slot="reference" v-model="form.icon" placeholder="点击选择图标" readonly>
  149. <svg-icon
  150. v-if="form.icon"
  151. slot="prefix"
  152. :icon-class="form.icon"
  153. class="el-input__icon"
  154. style="height: 32px;width: 16px;"
  155. />
  156. <i v-else slot="prefix" class="el-icon-search el-input__icon" />
  157. </el-input>
  158. </el-popover>
  159. </el-form-item>
  160. </el-col>
  161. <el-col :span="12">
  162. <el-form-item v-if="form.menuType == 'M' || form.menuType == 'C'" label="路由名称" prop="menuName">
  163. <el-input v-model="form.menuName" placeholder="请输入路由名称" />
  164. </el-form-item>
  165. </el-col>
  166. <el-col v-if="form.menuType == 'M' || form.menuType == 'C'" :span="12">
  167. <el-form-item label="组件路径" prop="component">
  168. <el-input v-model="form.component" placeholder="请输入组件路径" />
  169. </el-form-item>
  170. </el-col>
  171. <el-col :span="12">
  172. <el-form-item v-if="form.menuType == 'M' || form.menuType == 'C'" label="是否外链">
  173. <el-radio-group v-model="form.isFrame">
  174. <el-radio label="0">是</el-radio>
  175. <el-radio label="1">否</el-radio>
  176. </el-radio-group>
  177. </el-form-item>
  178. </el-col>
  179. <el-col :span="12">
  180. <el-form-item v-if="form.menuType != 'F'" label="路由地址" prop="path">
  181. <el-input v-model="form.path" placeholder="请输入路由地址" />
  182. </el-form-item>
  183. </el-col>
  184. <el-col :span="12">
  185. <el-form-item v-if="form.menuType == 'F' || form.menuType == 'C'" label="权限标识">
  186. <el-input v-model="form.permission" placeholder="请权限标识" maxlength="50" />
  187. </el-form-item>
  188. </el-col>
  189. <el-col :span="12">
  190. <el-form-item v-if="form.menuType != 'F'" label="菜单状态">
  191. <el-radio-group v-model="form.visible">
  192. <el-radio
  193. v-for="dict in visibleOptions"
  194. :key="dict.dictValue"
  195. :label="dict.dictValue"
  196. >{{ dict.dictLabel }}</el-radio>
  197. </el-radio-group>
  198. </el-form-item>
  199. </el-col>
  200. <el-col :span="24">
  201. <el-form-item v-if="form.menuType == 'F' || form.menuType == 'C'" label="api权限">
  202. <el-transfer
  203. v-model="form.apis"
  204. style="text-align: left; display: inline-block"
  205. filterable
  206. :props="{
  207. key: 'id',
  208. label: 'title'
  209. }"
  210. :titles="['Source', 'Target']"
  211. :button-texts="['到左边', '到右边 ']"
  212. :format="{
  213. noChecked: '${total}',
  214. hasChecked: '${checked}/${total}'
  215. }"
  216. class="panel"
  217. :data="sysapiList"
  218. @change="handleChange"
  219. >
  220. <span slot-scope="{ option }">{{ option.id }} - {{ option.title }}</span>
  221. </el-transfer>
  222. </el-form-item>
  223. </el-col>
  224. </el-row>
  225. </el-form>
  226. <div class="demo-drawer__footer">
  227. <el-button type="primary" @click="submitForm">确 定</el-button>
  228. <el-button @click="cancel">取 消</el-button>
  229. </div>
  230. </div>
  231. </el-drawer>
  232. </el-card>
  233. </template>
  234. </BasicLayout>
  235. </template>
  236. <script>
  237. import { listMenu, getMenu, delMenu, addMenu, updateMenu } from '@/api/admin/sys-menu'
  238. import { listSysApi } from '@/api/admin/sys-api'
  239. import Treeselect from '@riophae/vue-treeselect'
  240. import '@riophae/vue-treeselect/dist/vue-treeselect.css'
  241. import IconSelect from '@/components/IconSelect'
  242. export default {
  243. name: 'SysMenuManage',
  244. components: { Treeselect, IconSelect },
  245. data() {
  246. return {
  247. // 遮罩层
  248. loading: true,
  249. // 菜单表格树数据
  250. menuList: [],
  251. sysapiList: [],
  252. // 菜单树选项
  253. menuOptions: [],
  254. // 弹出层标题
  255. title: '',
  256. // 是否显示弹出层
  257. open: false,
  258. // 菜单状态数据字典
  259. visibleOptions: [],
  260. // 查询参数
  261. queryParams: {
  262. title: undefined,
  263. visible: undefined
  264. },
  265. // 表单参数
  266. form: {
  267. apis: [],
  268. sysApi: []
  269. },
  270. // 表单校验
  271. rules: {
  272. title: [{ required: true, message: '菜单标题不能为空', trigger: 'blur' }],
  273. sort: [{ required: true, message: '菜单顺序不能为空', trigger: 'blur' }]
  274. }
  275. }
  276. },
  277. created() {
  278. this.getList()
  279. this.getApiList()
  280. this.getDicts('sys_show_hide').then(response => {
  281. this.visibleOptions = response.data
  282. })
  283. },
  284. methods: {
  285. handleChange(value, direction, movedKeys) {
  286. console.log(value, direction, movedKeys)
  287. const list = this.form.sysApi
  288. this.form.apis = value
  289. if (direction === 'right') {
  290. for (let x = 0; x < movedKeys.length; x++) {
  291. for (let index = 0; index < this.sysapiList.length; index++) {
  292. const element = this.sysapiList[index]
  293. if (element.id === movedKeys[x]) {
  294. list.push(element)
  295. break
  296. }
  297. }
  298. }
  299. this.form.sysApi = list
  300. } else if (direction === 'left') {
  301. const l = []
  302. for (let index = 0; index < movedKeys.length; index++) {
  303. const element = movedKeys[index]
  304. for (let x = 0; x < list.length; x++) {
  305. const e = list[x]
  306. if (element !== e.id) {
  307. l.push()
  308. break
  309. }
  310. }
  311. }
  312. this.form.sysApi = l
  313. }
  314. // this.setApis(this.form.SysApi)
  315. console.log(this.form.sysApi)
  316. },
  317. getApiList() {
  318. this.loading = true
  319. listSysApi({ 'pageSize': 10000 }).then(response => {
  320. this.sysapiList = response.data.list
  321. // this.total = response.data.count
  322. this.loading = false
  323. }
  324. )
  325. },
  326. handleClose(done) {
  327. if (this.loading) {
  328. return
  329. }
  330. this.$confirm('需要提交表单吗?')
  331. .then(_ => {
  332. this.loading = true
  333. this.timer = setTimeout(() => {
  334. done()
  335. // 动画关闭需要一定的时间
  336. setTimeout(() => {
  337. this.loading = false
  338. }, 400)
  339. }, 1000)
  340. })
  341. .catch(_ => {})
  342. },
  343. // 选择图标
  344. selected(name) {
  345. this.form.icon = name
  346. },
  347. /** 查询菜单列表 */
  348. getList() {
  349. this.loading = true
  350. listMenu(this.queryParams).then(response => {
  351. this.menuList = response.data
  352. this.loading = false
  353. })
  354. },
  355. /** 转换菜单数据结构 */
  356. normalizer(node) {
  357. if (node.children && !node.children.length) {
  358. delete node.children
  359. }
  360. return {
  361. id: node.menuId,
  362. label: node.title,
  363. children: node.children
  364. }
  365. },
  366. /** 查询菜单下拉树结构 */
  367. getTreeselect() {
  368. listMenu().then(response => {
  369. this.menuOptions = []
  370. const menu = { menuId: 0, title: '主类目', children: [] }
  371. menu.children = response.data
  372. this.menuOptions.push(menu)
  373. })
  374. },
  375. // 菜单显示状态字典翻译
  376. visibleFormat(row) {
  377. if (row.menuType === 'F') {
  378. return '-- --'
  379. }
  380. return this.selectDictLabel(this.visibleOptions, row.visible)
  381. },
  382. // 取消按钮
  383. cancel() {
  384. this.open = false
  385. this.reset()
  386. },
  387. // 表单重置
  388. reset() {
  389. this.form = {
  390. menuId: undefined,
  391. parentId: 0,
  392. menuName: undefined,
  393. icon: undefined,
  394. menuType: 'M',
  395. apis: [],
  396. sort: 0,
  397. action: this.form.menuType === 'A' ? this.form.action : '',
  398. isFrame: '1',
  399. visible: '0'
  400. }
  401. this.resetForm('form')
  402. },
  403. /** 搜索按钮操作 */
  404. handleQuery() {
  405. this.getList()
  406. },
  407. /** 新增按钮操作 */
  408. handleAdd(row) {
  409. this.reset()
  410. this.getTreeselect()
  411. if (row != null) {
  412. this.form.parentId = row.menuId
  413. }
  414. this.open = true
  415. this.title = '添加菜单'
  416. },
  417. /** 修改按钮操作 */
  418. handleUpdate(row) {
  419. this.reset()
  420. this.getTreeselect()
  421. getMenu(row.menuId).then(response => {
  422. this.form = response.data
  423. this.open = true
  424. this.title = '修改菜单'
  425. })
  426. },
  427. setApis(apiArray) {
  428. var l = []
  429. for (var index = 0; index < apiArray.length; index++) {
  430. const element = apiArray[index]
  431. l.push(element.id)
  432. }
  433. this.form.apis = l
  434. },
  435. /** 提交按钮 */
  436. submitForm: function() {
  437. this.$refs['form'].validate(valid => {
  438. if (valid) {
  439. if (this.form.menuId !== undefined) {
  440. updateMenu(this.form, this.form.menuId).then(response => {
  441. if (response.code === 200) {
  442. this.msgSuccess('修改成功')
  443. this.open = false
  444. this.getList()
  445. } else {
  446. this.msgError(response.msg)
  447. }
  448. })
  449. } else {
  450. addMenu(this.form).then(response => {
  451. if (response.code === 200) {
  452. this.msgSuccess('新增成功')
  453. this.open = false
  454. this.getList()
  455. } else {
  456. this.msgError(response.msg)
  457. }
  458. })
  459. }
  460. }
  461. })
  462. },
  463. /** 删除按钮操作 */
  464. handleDelete(row) {
  465. this.$confirm('是否确认删除名称为"' + row.title + '"的数据项?', '警告', {
  466. confirmButtonText: '确定',
  467. cancelButtonText: '取消',
  468. type: 'warning'
  469. }).then(function() {
  470. var Ids = (row.menuId && [row.menuId]) || this.ids
  471. return delMenu({ 'ids': Ids })
  472. }).then(() => {
  473. this.getList()
  474. this.msgSuccess('删除成功')
  475. }).catch(function() {})
  476. }
  477. }
  478. }
  479. </script>
  480. <style lang="css">
  481. .panel .el-transfer__buttons{
  482. width: 150px;
  483. }
  484. .panel .el-transfer__buttons .el-button + .el-button{
  485. margin-left:0;
  486. }
  487. .panel .el-transfer-panel{
  488. width: 260px;
  489. }
  490. </style>