index.vue 15 KB

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