MenuMa.html 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="renderer" content="webkit">
  6. <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  7. <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  8. <meta http-equiv="pragma" content="no-cache">
  9. <meta http-equiv="Cache" content="no-cache">
  10. <meta http-equiv="cache-control" content="no-cache, must-revalidate">
  11. <meta http-equiv="expires" content="0">
  12. <meta name="viewport"
  13. content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  14. <title>部门管理</title>
  15. <link rel="stylesheet" href="../css/index.css">
  16. <link rel="stylesheet" href="../css/style.css">
  17. <link rel="stylesheet" href="../css/element.css">
  18. <script src="../js/vue.min.js"></script>
  19. <script src="../js/jquery.min.js"></script>
  20. <script src="../js/index.js"></script>
  21. <script src="../js/yz/init.js"></script>
  22. <script>
  23. checkLogin();
  24. </script>
  25. <style type="text/css">
  26. *{
  27. padding: 0;
  28. margin: 0;
  29. box-sizing: border-box;
  30. }
  31. body{
  32. padding: 10px;
  33. background-color: #040d32;
  34. }
  35. .search_ input {
  36. position: relative;
  37. width: 100%;
  38. height: 32px;
  39. line-height: 32px;
  40. border-radius: 4px;
  41. font-size: 14px;
  42. padding: 0 5px 0 25px;
  43. color: #dcdcdc;
  44. background-color: rgba(255, 255, 255, 0.2);
  45. border: 1px solid rgba(232, 232, 232, 0.3);
  46. }
  47. .search_ input::-webkit-input-placeholder {
  48. color: #dcdcdc;
  49. }
  50. .search_ .el-icon-search {
  51. position: absolute;
  52. left: 12px;
  53. top: 16px;
  54. color: #dcdcdc;
  55. }
  56. .elTable{
  57. width: 100%;
  58. border: 1px solid rgba(255, 255, 255, 0.2);
  59. }
  60. .el-table::before{
  61. height: 0;
  62. }
  63. .el-table::after{
  64. width: 0;
  65. }
  66. .el-table,.el-table__expanded-cell {
  67. color: #ddd;
  68. background-color: transparent !important;
  69. }
  70. .el-table tr,
  71. .el-table td {
  72. font-size: 14px;
  73. background-color: transparent !important;
  74. }
  75. .el-table td.el-table__cell,.el-table th.el-table__cell.is-leaf{
  76. border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  77. }
  78. .el-table--border .el-table__cell{
  79. border-right: 1px solid rgba(255, 255, 255, 0.2);
  80. }
  81. .el-dialog__header{
  82. padding: 10px;
  83. }
  84. .el-dialog__title{
  85. font-size: 15px;
  86. }
  87. .el-dialog__headerbtn{
  88. top: 14px;
  89. }
  90. .el-dialog__body{
  91. padding: 10px;
  92. color: #fff;
  93. background-color: #082041;
  94. }
  95. .br{
  96. border: 1px solid rgba(255, 255, 255, 0.2);
  97. }
  98. .el-input__inner{
  99. height: 34px;
  100. line-height: 34px;
  101. }
  102. ._Form>div{
  103. border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  104. }
  105. ._Form .formTxt{
  106. width: 100px;
  107. height: 60px;
  108. line-height: 60px;
  109. border-right: 1px solid rgba(255, 255, 255, 0.2);
  110. border-left: 1px solid rgba(255, 255, 255, 0.2);
  111. }
  112. ._Form .formInp{
  113. width: calc(100% - 100px);
  114. padding: 0 10px;
  115. }
  116. .el-input__inner{
  117. color: #ececec;
  118. border-color: transparent;
  119. background-color: rgba(255, 255, 255, 0.2);
  120. }
  121. .el-input__inner::-webkit-input-placeholder {
  122. color: #a1a1a1;
  123. }
  124. .el-select .el-input__inner::-webkit-input-placeholder {
  125. color: #ececec;
  126. }
  127. ._Form .el-radio{
  128. color: #fff;
  129. }
  130. .el-radio__input.is-checked .el-radio__inner,
  131. .el-checkbox__input.is-checked .el-checkbox__inner,
  132. .el-checkbox__input.is-indeterminate .el-checkbox__inner,
  133. .el-button--success{
  134. border-color: #39b54a;
  135. background: #39b54a;
  136. }
  137. .el-radio__input.is-checked+.el-radio__label{
  138. color: #39b54a;
  139. }
  140. .el-icon-arrow-right{
  141. color: #fff;
  142. }
  143. .el-select-dropdown__item{
  144. height: auto;
  145. }
  146. .el-tree{
  147. color: #fff;
  148. background-color: transparent;
  149. }
  150. .el-select-dropdown__item.hover, .el-select-dropdown__item:hover,
  151. .el-tree-node__content:hover,.el-tree-node:focus>.el-tree-node__content{
  152. background-color: transparent;
  153. }
  154. .el-popper[x-placement^=bottom] .popper__arrow::after{
  155. border-bottom-color: #707070;
  156. }
  157. .el-select-dropdown{
  158. background-color: #707070;
  159. }
  160. </style>
  161. </head>
  162. <body>
  163. <div id="app">
  164. <div>
  165. <div class="flex align-center margin-bottom-sm">
  166. <div>
  167. <el-input placeholder="请输入关键词" v-model="inpKey" @input="_Search">
  168. <i slot="prefix" class="el-input__icon el-icon-search"></i>
  169. </el-input>
  170. </div>
  171. <div class="tableTool">
  172. <el-button type="primary" size="small" class="margin-left-sm">查询</el-button>
  173. <el-button type="success" size="small" @click="newAdd">新增</el-button>
  174. </div>
  175. </div>
  176. <el-table
  177. :data="tableData"
  178. :header-cell-style="{background:'#082041',color:'#fff'}"
  179. class="elTable"
  180. row-key="menuId"
  181. border
  182. lazy
  183. load="load"
  184. :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
  185. <el-table-column align="center" prop="menuName" label="菜单名称"> </el-table-column>
  186. <el-table-column align="center" prop="icon" label="图标">
  187. <template slot-scope="scope">
  188. <i :class="'iconfont '+scope.row.icon"></i>
  189. </template>
  190. </el-table-column>
  191. <el-table-column align="center" prop="perms" label="权限标识"> </el-table-column>
  192. <el-table-column align="center" prop="orderNum" label="排序"> </el-table-column>
  193. <el-table-column align="center" prop="path" label="页面路径"> </el-table-column>
  194. <el-table-column align="center" prop="status" label="状态">
  195. <template slot-scope="scope">
  196. <el-switch
  197. :value="scope.row.status == 0"
  198. disabled
  199. active-color="#13ce66"
  200. inactive-color="#ff4949">
  201. </el-switch>
  202. </template>
  203. </el-table-column>
  204. <el-table-column align="center" prop="createTime" label="创建时间"> </el-table-column>
  205. <el-table-column
  206. align="center"
  207. width="200"
  208. label="操作">
  209. <template slot-scope="scope">
  210. <el-button type="text" size="small" @click="newAdd(scope.row)" class="text-sray">
  211. <i class="el-icon-plus"></i>新增
  212. </el-button>
  213. <el-button type="text" size="small" @click="Edit(scope.row)" class="text-green">
  214. <i class="el-icon-edit"></i>编辑
  215. </el-button>
  216. <el-button type="text" size="small" @click="Delete(scope.row)" class="text-red">
  217. <i class="el-icon-delete"></i>删除
  218. </el-button>
  219. </template>
  220. </el-table-column>
  221. </el-table>
  222. </div>
  223. <el-dialog title="部门信息" :visible.sync="dialogVisible" width="60%">
  224. <div class="br" style="text-align: center;">
  225. <div class="_Form">
  226. <div class="flex align-center">
  227. <div class="formTxt" style="border-left: none;">上级菜单</div>
  228. <div class="formInp">
  229. <el-select :placeholder="parentName.menuName" ref="conSelect" style="width: 100%;">
  230. <el-option>
  231. <el-tree
  232. ref="tree"
  233. node-key="id"
  234. :data="TreeData"
  235. :props="defaultProps"
  236. @node-click="nodeClick"
  237. />
  238. </el-option>
  239. </el-select>
  240. </div>
  241. </div>
  242. <div class="flex align-center">
  243. <div class="formTxt" style="border-left: none;">菜单类型</div>
  244. <div class="formInp text-left">
  245. <el-radio v-model="nowForm.menuType" label="M">目录</el-radio>
  246. <el-radio v-model="nowForm.menuType" label="C">菜单</el-radio>
  247. </div>
  248. </div>
  249. <div class="flex align-center">
  250. <div class="formTxt" style="border-left: none;">菜单图标</div>
  251. <div class="formInp"><el-input v-model="nowForm.icon" placeholder="菜单图标"></el-input></div>
  252. </div>
  253. <div class="flex align-center">
  254. <div class="flex-sub flex align-center">
  255. <div class="formTxt" style="border-left: none;"><span class="text-red">*</span>菜单名称</div>
  256. <div class="formInp"><el-input v-model="nowForm.menuName" placeholder="菜单名称"></el-input></div>
  257. </div>
  258. <div class="flex-sub flex align-center">
  259. <div class="formTxt">权限标识</div>
  260. <div class="formInp"><el-input v-model="nowForm.perms" placeholder="权限标识"></el-input></div>
  261. </div>
  262. </div>
  263. <div class="flex align-center">
  264. <div class="flex-sub flex align-center">
  265. <div class="formTxt" style="border-left: none;"><span class="text-red">*</span>页面路径</div>
  266. <div class="formInp"><el-input v-model="nowForm.path" placeholder="页面路径"></el-input></div>
  267. </div>
  268. <div class="flex-sub flex align-center">
  269. <div class="formTxt"><span class="text-red">*</span>显示顺序</div>
  270. <div class="formInp"><el-input type="number" min="0" v-model="nowForm.orderNum" placeholder="角色顺序"></el-input></div>
  271. </div>
  272. </div>
  273. <div class="flex align-center" style="border: none;">
  274. <div class="flex-sub flex align-center">
  275. <div class="formTxt" style="border-left: none;">显示状态</div>
  276. <div class="text-left formInp">
  277. <el-radio v-model="nowForm.visible" label="0">显示</el-radio>
  278. <el-radio v-model="nowForm.visible" label="1">隐藏</el-radio>
  279. </div>
  280. </div>
  281. <div class="flex-sub flex align-center">
  282. <div class="formTxt">状态</div>
  283. <div class="text-left formInp">
  284. <el-radio v-model="nowForm.status" label="0">正常</el-radio>
  285. <el-radio v-model="nowForm.status" label="1">停用</el-radio>
  286. </div>
  287. </div>
  288. </div>
  289. </div>
  290. </div>
  291. <div class="padding-sm text-center">
  292. <el-button size="small" @click="dialogVisible = false;">取消</el-button>
  293. <el-button size="small" type="success" @click="conFirm">提交</el-button>
  294. </div>
  295. </el-dialog>
  296. </div>
  297. <script>
  298. var _this, dataObj=[];
  299. new Vue({
  300. el: '#app',
  301. data: function() {
  302. return {
  303. tableData: [],
  304. TreeData:[],
  305. nowForm:{
  306. icon: "",
  307. isCache: "0",
  308. isFrame: "1",
  309. menuName: "",
  310. menuType: "M",
  311. orderNum: "0",
  312. parentId: 0,
  313. path: "",
  314. status: "0",
  315. visible: "0",
  316. perms:""
  317. },
  318. dialogVisible:false,
  319. inpKey:"",
  320. defaultProps: {
  321. children: 'children',
  322. label: 'label'
  323. },
  324. parentName: {
  325. menuName: "请选择",
  326. menuId: ""
  327. }
  328. }
  329. },
  330. created() {
  331. _this = this;
  332. _this.getList();
  333. },
  334. methods: {
  335. getList() {
  336. let data1 = {
  337. pageNum:1,
  338. pageSize:100
  339. };
  340. let _opts = {
  341. url: "/system/menu/list",
  342. type:"GET"
  343. };
  344. tokenAjax(_opts, data1)
  345. .then(function(res) {
  346. if (res.code == 200) {
  347. _this.tableData = _this.getTrees(res.data, 0)
  348. _this.TreeData = [{
  349. id: 0,
  350. label: "主类目",
  351. menuName:"主类目",
  352. menuId:0,
  353. children:(res.data.length? _this.getTrees(res.data, 0):[])
  354. }];
  355. dataObj = res.data;
  356. }else{
  357. _this.$message.error(res.msg);
  358. }
  359. })
  360. },
  361. getTrees(data, parentId) {
  362. var tree = [];
  363. var temp;
  364. for (var i = 0; i < data.length; i++) {
  365. data[i].label = data[i].menuName;
  366. data[i].id = data[i].menuId;
  367. if (data[i].parentId == parentId) {
  368. var obj = data[i];
  369. temp = _this.getTrees(data, data[i].menuId);
  370. if (temp.length > 0) {
  371. obj.children = [...temp];
  372. }
  373. tree.push(obj);
  374. }
  375. }
  376. return tree;
  377. },
  378. _Search(_key){
  379. let newArr = [],_ovj = dataObj;
  380. if(_key == ""){
  381. newArr = dataObj;
  382. }else{
  383. for(var i=0;i<_ovj.length;i++){
  384. if( JSON.stringify(_ovj[i]).indexOf(_key) != -1){
  385. newArr.push(_ovj[i])
  386. }
  387. }
  388. }
  389. _this.tableData = _this.getTrees(newArr, 0);
  390. },
  391. newAdd(_row){
  392. if(_row.menuId != undefined){
  393. _this.parentName = {
  394. menuName: _row.menuName,
  395. menuId: _row.menuId
  396. };
  397. }else{
  398. _this.parentName = {
  399. menuName: _this.TreeData[0].menuName,
  400. menuId: _this.TreeData[0].menuId
  401. };
  402. }
  403. _this.nowForm = {
  404. icon:_row.menuId != undefined? "#":"",
  405. isCache: "0",
  406. isFrame: "1",
  407. menuName: "",
  408. menuType:_row.menuId != undefined?"C" :"M",
  409. orderNum: "0",
  410. parentId:_row.menuId != undefined? _row.menuId:0,
  411. path: "",
  412. status: "0",
  413. visible: "0",
  414. perms:""
  415. };
  416. _this.dialogVisible = true;
  417. },
  418. Edit(_row){
  419. let data1 = {};
  420. let _opts = {
  421. url: "/system/menu/" + _row.menuId,
  422. type:"GET"
  423. };
  424. tokenAjax(_opts, data1)
  425. .then(function(res) {
  426. if (res.code == 200) {
  427. if(_row.parentId == 0){
  428. _this.parentName = {
  429. menuName:"主类目",
  430. menuId:0,
  431. };
  432. }else{
  433. dataObj.forEach((it,ind)=>{
  434. if(it.menuId == _row.parentId){
  435. _this.parentName = {
  436. menuName: it.menuName,
  437. menuId: it.menuId
  438. };
  439. }
  440. })
  441. }
  442. _this.nowForm = res.data;
  443. _this.dialogVisible = true;
  444. }
  445. })
  446. },
  447. Delete(_row){
  448. _this.$confirm('是否确认删除编号为"'+_row.menuId+'"的数据项?', '温馨提示', {
  449. confirmButtonText: '确定',
  450. cancelButtonText: '取消',
  451. type: 'warning'
  452. }).then(() => {
  453. let data1 = {};
  454. let _opts = {
  455. url: "/system/menu/"+_row.menuId,
  456. type:"DELETE"
  457. };
  458. tokenAjax(_opts, data1)
  459. .then(function(res) {
  460. if(res.code == 200){
  461. _this.$message({
  462. type: 'success',
  463. message: '删除成功!'
  464. });
  465. _this.getList();
  466. }else{
  467. _this.$message.error(res.msg);
  468. }
  469. })
  470. }).catch(() => {
  471. });
  472. },
  473. conFirm(){
  474. _this.nowForm.parentId = _this.parentName.menuId;
  475. if(_this.nowForm.menuName == ""){
  476. _this.$message({
  477. type: 'warning',
  478. message: "请输入菜单名称"
  479. });
  480. return;
  481. }
  482. if(_this.nowForm.path == ""&&_this.nowForm.menuType == "C"){
  483. _this.$message({
  484. type: 'warning',
  485. message: '请输入页面路径',
  486. })
  487. return;
  488. }
  489. let data1 = _this.nowForm;
  490. let _opts = {
  491. url:"/system/menu",
  492. type: _this.nowForm.menuId == undefined?"POST":"PUT"
  493. };
  494. tokenPostAjax(_opts,data1)
  495. .then(function(res){
  496. if(res.code == 200){
  497. _this.$message({
  498. type: 'success',
  499. message: '操作成功!'
  500. });
  501. _this.getList();
  502. _this.dialogVisible = false;
  503. }else{
  504. _this.$message.error(res.msg);
  505. }
  506. })
  507. },
  508. nodeClick(_e){
  509. _this.parentName = {
  510. menuName: _e.menuName,
  511. menuId: _e.menuId
  512. };
  513. this.$refs.conSelect.blur();
  514. }
  515. }
  516. })
  517. </script>
  518. </body>
  519. </html>