index.vue 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526
  1. <template>
  2. <div class="app-container">
  3. <el-form
  4. :model="queryParams"
  5. ref="queryForm"
  6. size="small"
  7. :inline="true"
  8. v-show="showSearch"
  9. >
  10. <el-form-item label="菜单名称" prop="menuName">
  11. <el-input
  12. v-model="queryParams.menuName"
  13. placeholder="请输入菜单名称"
  14. clearable
  15. @keyup.enter.native="handleQuery"
  16. />
  17. </el-form-item>
  18. <el-form-item label="状态" prop="status">
  19. <el-select v-model="queryParams.status" placeholder="菜单状态" clearable>
  20. <el-option
  21. v-for="dict in dict.type.sys_normal_disable"
  22. :key="dict.value"
  23. :label="dict.label"
  24. :value="dict.value"
  25. />
  26. </el-select>
  27. </el-form-item>
  28. <el-form-item>
  29. <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"
  30. >搜索</el-button
  31. >
  32. <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
  33. </el-form-item>
  34. </el-form>
  35. <el-row :gutter="10" class="mb8">
  36. <el-col :span="1.5">
  37. <el-button
  38. type="primary"
  39. plain
  40. icon="el-icon-plus"
  41. size="mini"
  42. @click="handleAdd"
  43. v-hasPermi="['system:menu:add']"
  44. >新增</el-button
  45. >
  46. </el-col>
  47. <el-col :span="1.5">
  48. <el-button
  49. type="info"
  50. plain
  51. icon="el-icon-sort"
  52. size="mini"
  53. @click="toggleExpandAll"
  54. >展开/折叠</el-button
  55. >
  56. </el-col>
  57. <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
  58. </el-row>
  59. <el-table
  60. v-if="refreshTable"
  61. v-loading="loading"
  62. :data="menuList"
  63. border
  64. row-key="menuId"
  65. :default-expand-all="isExpandAll"
  66. :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
  67. @cell-dblclick="handleUpdate"
  68. >
  69. <el-table-column
  70. prop="menuName"
  71. label="菜单名称"
  72. :show-overflow-tooltip="true"
  73. width="160"
  74. ></el-table-column>
  75. <el-table-column prop="icon" label="图标" align="center" width="100">
  76. <template slot-scope="scope">
  77. <svg-icon :icon-class="scope.row.icon" />
  78. </template>
  79. </el-table-column>
  80. <el-table-column prop="orderNum" label="排序" width="60"></el-table-column>
  81. <el-table-column
  82. prop="perms"
  83. label="权限标识"
  84. :show-overflow-tooltip="true"
  85. ></el-table-column>
  86. <el-table-column
  87. prop="component"
  88. label="组件路径"
  89. :show-overflow-tooltip="true"
  90. ></el-table-column>
  91. <el-table-column prop="status" label="状态" width="80">
  92. <template slot-scope="scope">
  93. <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status" />
  94. </template>
  95. </el-table-column>
  96. <el-table-column label="创建时间" align="center" prop="createTime">
  97. <template slot-scope="scope">
  98. <span>{{ parseTime(scope.row.createTime) }}</span>
  99. </template>
  100. </el-table-column>
  101. <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
  102. <template slot-scope="scope">
  103. <el-button
  104. size="mini"
  105. type="text"
  106. icon="el-icon-edit"
  107. @click="handleUpdate(scope.row)"
  108. v-hasPermi="['system:menu:edit']"
  109. >修改</el-button
  110. >
  111. <el-button
  112. size="mini"
  113. type="text"
  114. icon="el-icon-plus"
  115. @click="handleAdd(scope.row)"
  116. v-hasPermi="['system:menu:add']"
  117. >新增</el-button
  118. >
  119. <el-button
  120. size="mini"
  121. type="text"
  122. icon="el-icon-delete"
  123. @click="handleDelete(scope.row)"
  124. v-hasPermi="['system:menu:remove']"
  125. >删除</el-button
  126. >
  127. </template>
  128. </el-table-column>
  129. </el-table>
  130. <!-- 添加或修改菜单对话框 -->
  131. <el-dialog :title="title" :visible.sync="open" width="680px" append-to-body>
  132. <el-form ref="form" :model="form" :rules="rules" label-width="100px">
  133. <el-row>
  134. <el-col :span="24">
  135. <el-form-item label="上级菜单" prop="parentId">
  136. <treeselect
  137. v-model="form.parentId"
  138. :options="menuOptions"
  139. :normalizer="normalizer"
  140. :show-count="true"
  141. placeholder="选择上级菜单"
  142. />
  143. </el-form-item>
  144. </el-col>
  145. <el-col :span="24">
  146. <el-form-item label="菜单类型" prop="menuType">
  147. <el-radio-group v-model="form.menuType">
  148. <el-radio label="M">目录</el-radio>
  149. <el-radio label="C">菜单</el-radio>
  150. <el-radio label="F">按钮</el-radio>
  151. </el-radio-group>
  152. </el-form-item>
  153. </el-col>
  154. <el-col :span="24" v-if="form.menuType != 'F'">
  155. <el-form-item label="菜单图标" prop="icon">
  156. <el-popover
  157. placement="bottom-start"
  158. width="460"
  159. trigger="click"
  160. @show="$refs['iconSelect'].reset()"
  161. >
  162. <IconSelect
  163. ref="iconSelect"
  164. @selected="selected"
  165. :active-icon="form.icon"
  166. />
  167. <el-input
  168. slot="reference"
  169. v-model="form.icon"
  170. placeholder="点击选择图标"
  171. readonly
  172. >
  173. <svg-icon
  174. v-if="form.icon"
  175. slot="prefix"
  176. :icon-class="form.icon"
  177. style="width: 25px"
  178. />
  179. <i v-else slot="prefix" class="el-icon-search el-input__icon" />
  180. </el-input>
  181. </el-popover>
  182. </el-form-item>
  183. </el-col>
  184. <el-col :span="12">
  185. <el-form-item label="菜单名称" prop="menuName">
  186. <el-input v-model="form.menuName" placeholder="请输入菜单名称" />
  187. </el-form-item>
  188. </el-col>
  189. <el-col :span="12">
  190. <el-form-item label="显示排序" prop="orderNum">
  191. <el-input-number
  192. v-model="form.orderNum"
  193. controls-position="right"
  194. :min="0"
  195. />
  196. </el-form-item>
  197. </el-col>
  198. <el-col :span="12" v-if="form.menuType != 'F'">
  199. <el-form-item prop="isFrame">
  200. <span slot="label">
  201. <el-tooltip
  202. content="选择是外链则路由地址需要以`http(s)://`开头"
  203. placement="top"
  204. >
  205. <i class="el-icon-question"></i>
  206. </el-tooltip>
  207. 是否外链
  208. </span>
  209. <el-radio-group v-model="form.isFrame">
  210. <el-radio label="0">是</el-radio>
  211. <el-radio label="1">否</el-radio>
  212. </el-radio-group>
  213. </el-form-item>
  214. </el-col>
  215. <el-col :span="12" v-if="form.menuType != 'F'">
  216. <el-form-item prop="path">
  217. <span slot="label">
  218. <el-tooltip
  219. content="访问的路由地址,如:`user`,如外网地址需内链访问则以`http(s)://`开头"
  220. placement="top"
  221. >
  222. <i class="el-icon-question"></i>
  223. </el-tooltip>
  224. 路由地址
  225. </span>
  226. <el-input v-model="form.path" placeholder="请输入路由地址" />
  227. </el-form-item>
  228. </el-col>
  229. <el-col :span="12" v-if="form.menuType == 'C'">
  230. <el-form-item prop="component">
  231. <span slot="label">
  232. <el-tooltip
  233. content="访问的组件路径,如:`system/user/index`,默认在`views`目录下"
  234. placement="top"
  235. >
  236. <i class="el-icon-question"></i>
  237. </el-tooltip>
  238. 组件路径
  239. </span>
  240. <el-input v-model="form.component" placeholder="请输入组件路径" />
  241. </el-form-item>
  242. </el-col>
  243. <el-col :span="12" v-if="form.menuType != 'M'">
  244. <el-form-item prop="perms">
  245. <el-input
  246. v-model="form.perms"
  247. placeholder="请输入权限标识"
  248. maxlength="100"
  249. />
  250. <span slot="label">
  251. <el-tooltip
  252. content="控制器中定义的权限字符,如:@PreAuthorize(`@ss.hasPermi('system:user:list')`)"
  253. placement="top"
  254. >
  255. <i class="el-icon-question"></i>
  256. </el-tooltip>
  257. 权限字符
  258. </span>
  259. </el-form-item>
  260. </el-col>
  261. <el-col :span="12" v-if="form.menuType == 'C'">
  262. <el-form-item prop="query">
  263. <el-input
  264. v-model="form.query"
  265. placeholder="请输入路由参数"
  266. maxlength="255"
  267. />
  268. <span slot="label">
  269. <el-tooltip
  270. content='访问路由的默认传递参数,如:`{"id": 1, "name": "ry"}`'
  271. placement="top"
  272. >
  273. <i class="el-icon-question"></i>
  274. </el-tooltip>
  275. 路由参数
  276. </span>
  277. </el-form-item>
  278. </el-col>
  279. <el-col :span="12" v-if="form.menuType == 'C'">
  280. <el-form-item prop="isCache">
  281. <span slot="label">
  282. <el-tooltip
  283. content="选择是则会被`keep-alive`缓存,需要匹配组件的`name`和地址保持一致"
  284. placement="top"
  285. >
  286. <i class="el-icon-question"></i>
  287. </el-tooltip>
  288. 是否缓存
  289. </span>
  290. <el-radio-group v-model="form.isCache">
  291. <el-radio label="0">缓存</el-radio>
  292. <el-radio label="1">不缓存</el-radio>
  293. </el-radio-group>
  294. </el-form-item>
  295. </el-col>
  296. <el-col :span="12" v-if="form.menuType != 'F'">
  297. <el-form-item prop="visible">
  298. <span slot="label">
  299. <el-tooltip
  300. content="选择隐藏则路由将不会出现在侧边栏,但仍然可以访问"
  301. placement="top"
  302. >
  303. <i class="el-icon-question"></i>
  304. </el-tooltip>
  305. 显示状态
  306. </span>
  307. <el-radio-group v-model="form.visible">
  308. <el-radio
  309. v-for="dict in dict.type.sys_show_hide"
  310. :key="dict.value"
  311. :label="dict.value"
  312. >{{ dict.label }}</el-radio
  313. >
  314. </el-radio-group>
  315. </el-form-item>
  316. </el-col>
  317. <el-col :span="12" v-if="form.menuType != 'F'">
  318. <el-form-item prop="status">
  319. <span slot="label">
  320. <el-tooltip
  321. content="选择停用则路由将不会出现在侧边栏,也不能被访问"
  322. placement="top"
  323. >
  324. <i class="el-icon-question"></i>
  325. </el-tooltip>
  326. 菜单状态
  327. </span>
  328. <el-radio-group v-model="form.status">
  329. <el-radio
  330. v-for="dict in dict.type.sys_normal_disable"
  331. :key="dict.value"
  332. :label="dict.value"
  333. >{{ dict.label }}</el-radio
  334. >
  335. </el-radio-group>
  336. </el-form-item>
  337. </el-col>
  338. </el-row>
  339. </el-form>
  340. <div slot="footer" class="dialog-footer">
  341. <el-button type="primary" @click="submitForm">确 定</el-button>
  342. <el-button @click="cancel">取 消</el-button>
  343. </div>
  344. </el-dialog>
  345. </div>
  346. </template>
  347. <script>
  348. import { listMenu, getMenu, delMenu, addMenu, updateMenu } from "@/api/system/menu";
  349. import Treeselect from "@riophae/vue-treeselect";
  350. import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  351. import IconSelect from "@/components/IconSelect";
  352. export default {
  353. name: "Menu",
  354. dicts: ["sys_show_hide", "sys_normal_disable"],
  355. components: { Treeselect, IconSelect },
  356. data() {
  357. return {
  358. // 遮罩层
  359. loading: true,
  360. // 显示搜索条件
  361. showSearch: true,
  362. // 菜单表格树数据
  363. menuList: [],
  364. // 菜单树选项
  365. menuOptions: [],
  366. // 弹出层标题
  367. title: "",
  368. // 是否显示弹出层
  369. open: false,
  370. // 是否展开,默认全部折叠
  371. isExpandAll: false,
  372. // 重新渲染表格状态
  373. refreshTable: true,
  374. // 查询参数
  375. queryParams: {
  376. menuName: undefined,
  377. visible: undefined,
  378. },
  379. // 表单参数
  380. form: {},
  381. // 表单校验
  382. rules: {
  383. menuName: [{ required: true, message: "菜单名称不能为空", trigger: "blur" }],
  384. orderNum: [{ required: true, message: "菜单顺序不能为空", trigger: "blur" }],
  385. path: [{ required: true, message: "路由地址不能为空", trigger: "blur" }],
  386. },
  387. };
  388. },
  389. created() {
  390. this.getList();
  391. },
  392. methods: {
  393. // 选择图标
  394. selected(name) {
  395. this.form.icon = name;
  396. },
  397. /** 查询菜单列表 */
  398. getList() {
  399. this.loading = true;
  400. listMenu(this.queryParams).then((response) => {
  401. this.menuList = this.handleTree(response.data, "menuId");
  402. this.loading = false;
  403. });
  404. },
  405. /** 转换菜单数据结构 */
  406. normalizer(node) {
  407. if (node.children && !node.children.length) {
  408. delete node.children;
  409. }
  410. return {
  411. id: node.menuId,
  412. label: node.menuName,
  413. children: node.children,
  414. };
  415. },
  416. /** 查询菜单下拉树结构 */
  417. getTreeselect() {
  418. listMenu().then((response) => {
  419. this.menuOptions = [];
  420. const menu = { menuId: 0, menuName: "主类目", children: [] };
  421. menu.children = this.handleTree(response.data, "menuId");
  422. this.menuOptions.push(menu);
  423. });
  424. },
  425. // 取消按钮
  426. cancel() {
  427. this.open = false;
  428. this.reset();
  429. },
  430. // 表单重置
  431. reset() {
  432. this.form = {
  433. menuId: undefined,
  434. parentId: 0,
  435. menuName: undefined,
  436. icon: undefined,
  437. menuType: "M",
  438. orderNum: undefined,
  439. isFrame: "1",
  440. isCache: "0",
  441. visible: "0",
  442. status: "0",
  443. };
  444. this.resetForm("form");
  445. },
  446. /** 搜索按钮操作 */
  447. handleQuery() {
  448. this.getList();
  449. },
  450. /** 重置按钮操作 */
  451. resetQuery() {
  452. this.resetForm("queryForm");
  453. this.handleQuery();
  454. },
  455. /** 新增按钮操作 */
  456. handleAdd(row) {
  457. this.reset();
  458. this.getTreeselect();
  459. if (row != null && row.menuId) {
  460. this.form.parentId = row.menuId;
  461. } else {
  462. this.form.parentId = 0;
  463. }
  464. this.open = true;
  465. this.title = "添加菜单";
  466. },
  467. /** 展开/折叠操作 */
  468. toggleExpandAll() {
  469. this.refreshTable = false;
  470. this.isExpandAll = !this.isExpandAll;
  471. this.$nextTick(() => {
  472. this.refreshTable = true;
  473. });
  474. },
  475. /** 修改按钮操作 */
  476. handleUpdate(row) {
  477. this.reset();
  478. this.getTreeselect();
  479. getMenu(row.menuId).then((response) => {
  480. this.form = response.data;
  481. this.open = true;
  482. this.title = "修改菜单";
  483. });
  484. },
  485. /** 提交按钮 */
  486. submitForm: function () {
  487. this.$refs["form"].validate((valid) => {
  488. if (valid) {
  489. if (this.form.menuId != undefined) {
  490. updateMenu(this.form).then((response) => {
  491. this.$modal.msgSuccess("修改成功");
  492. this.open = false;
  493. this.getList();
  494. });
  495. } else {
  496. addMenu(this.form).then((response) => {
  497. this.$modal.msgSuccess("新增成功");
  498. this.open = false;
  499. this.getList();
  500. });
  501. }
  502. }
  503. });
  504. },
  505. /** 删除按钮操作 */
  506. handleDelete(row) {
  507. this.$modal
  508. .confirm('是否确认删除名称为"' + row.menuName + '"的数据项?')
  509. .then(function () {
  510. return delMenu(row.menuId);
  511. })
  512. .then(() => {
  513. this.getList();
  514. this.$modal.msgSuccess("删除成功");
  515. })
  516. .catch(() => {});
  517. },
  518. },
  519. };
  520. </script>