index.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552
  1. <template>
  2. <div class="app-container">
  3. <div class="search-container">
  4. <el-form ref="queryFormRef" :model="queryParams" :inline="true">
  5. <el-form-item label="关键字" prop="keywords">
  6. <el-input
  7. v-model="queryParams.keywords"
  8. placeholder="菜单名称"
  9. clearable
  10. @keyup.enter="handleQuery"
  11. />
  12. </el-form-item>
  13. <el-form-item>
  14. <el-button type="primary" @click="handleQuery"
  15. ><template #icon><i-ep-search /></template>搜索</el-button
  16. >
  17. <el-button @click="resetQuery">
  18. <template #icon><i-ep-refresh /></template>
  19. 重置</el-button
  20. >
  21. </el-form-item>
  22. </el-form>
  23. </div>
  24. <el-card shadow="never" class="table-container">
  25. <template #header>
  26. <el-button
  27. v-hasPerm="[ButtonPermKeys.SYSTEM.BTNS.menu_add]"
  28. type="primary"
  29. @click="openDialog('0')"
  30. >
  31. <template #icon><i-ep-plus /></template>
  32. 新增</el-button
  33. >
  34. </template>
  35. <el-table
  36. v-loading="loading"
  37. :data="menuList"
  38. highlight-current-row
  39. row-key="id"
  40. :expand-row-keys="['1']"
  41. @row-click="onRowClick"
  42. :tree-props="{
  43. children: 'childs',
  44. hasChildren: 'hasChildren',
  45. }"
  46. >
  47. <el-table-column label="菜单名称" >
  48. <template #default="scope">
  49. <svg-icon :icon-class="scope.row.icon" />
  50. {{ scope.row.menuName }}
  51. </template>
  52. </el-table-column>
  53. <el-table-column label="类型" align="center">
  54. <template #default="scope">
  55. <el-tag
  56. v-if="scope.row.type === MenuTypeEnum.CATALOG"
  57. type="warning"
  58. >目录</el-tag
  59. >
  60. <el-tag v-if="scope.row.type === MenuTypeEnum.MENU" type="success"
  61. >菜单</el-tag
  62. >
  63. <el-tag v-if="scope.row.type === MenuTypeEnum.BUTTON" type="danger"
  64. >按钮</el-tag
  65. >
  66. <el-tag v-if="scope.row.isFrame" type="info">外链</el-tag>
  67. </template>
  68. </el-table-column>
  69. <el-table-column
  70. label="路由路径"
  71. align="left"
  72. prop="path"
  73. />
  74. <el-table-column
  75. label="组件路径"
  76. align="left"
  77. prop="component"
  78. />
  79. <el-table-column
  80. label="权限标识"
  81. align="center"
  82. width="200"
  83. prop="perms"
  84. />
  85. <el-table-column label="状态" align="center" width="80">
  86. <template #default="scope">
  87. <el-tag v-if="scope.row.visible === 0" type="success">显示</el-tag>
  88. <el-tag v-else type="info">隐藏</el-tag>
  89. </template>
  90. </el-table-column>
  91. <el-table-column
  92. label="排序"
  93. align="center"
  94. width="80"
  95. prop="orderNum"
  96. />
  97. <el-table-column fixed="right" align="center" label="操作" width="220">
  98. <template #default="scope">
  99. <el-button
  100. v-hasPerm="[ButtonPermKeys.SYSTEM.BTNS.menu_add]"
  101. v-if="scope.row.type == 0 || scope.row.type == 1"
  102. type="primary"
  103. link
  104. size="small"
  105. @click.stop="openDialog(scope.row.id)"
  106. >
  107. <i-ep-plus />新增
  108. </el-button>
  109. <el-button
  110. v-hasPerm="[ButtonPermKeys.SYSTEM.BTNS.menu_edit]"
  111. type="primary"
  112. link
  113. size="small"
  114. @click.stop="openDialog(undefined, scope.row.id)"
  115. >
  116. <i-ep-edit />编辑
  117. </el-button>
  118. <el-button
  119. v-hasPerm="[ButtonPermKeys.SYSTEM.BTNS.menu_del]"
  120. type="primary"
  121. link
  122. size="small"
  123. @click.stop="handleDelete(scope.row.id)"
  124. ><i-ep-delete />
  125. 删除
  126. </el-button>
  127. </template>
  128. </el-table-column>
  129. </el-table>
  130. </el-card>
  131. <el-dialog
  132. v-model="dialog.visible"
  133. :header="dialog.title"
  134. destroy-on-close
  135. append-to-body
  136. width="1000px"
  137. @close="closeDialog"
  138. top="5vh"
  139. >
  140. <el-form
  141. ref="menuFormRef"
  142. :model="formData"
  143. :rules="rules"
  144. label-width="160px"
  145. >
  146. <el-form-item label="父级菜单" prop="parentId">
  147. <el-tree-select
  148. v-model="formData.parentId"
  149. placeholder="选择上级菜单"
  150. :data="menuOptions"
  151. filterable
  152. check-strictly
  153. :render-after-expand="false"
  154. :props="defaultProps"
  155. node-key="id"
  156. />
  157. </el-form-item>
  158. <el-form-item label="菜单名称" prop="menuName">
  159. <el-input v-model="formData.menuName" placeholder="请输入菜单名称" />
  160. </el-form-item>
  161. <el-row>
  162. <el-col :span="12"
  163. ><el-form-item label="菜单类型" prop="type">
  164. <el-radio-group
  165. v-model="formData.type"
  166. @change="onMenuTypeChange"
  167. >
  168. <el-radio :value="0">目录</el-radio>
  169. <el-radio :value="1">菜单</el-radio>
  170. <el-radio :value="2">按钮</el-radio>
  171. <!-- <el-radio label="EXTLINK">外链</el-radio> -->
  172. </el-radio-group>
  173. </el-form-item>
  174. </el-col>
  175. <el-col :span="12"
  176. ><el-form-item
  177. v-if="formData.type !== MenuTypeEnum.BUTTON"
  178. prop="visible"
  179. label="显示状态"
  180. >
  181. <el-radio-group v-model="formData.visible">
  182. <el-radio :value="0">显示</el-radio>
  183. <el-radio :value="1">隐藏</el-radio>
  184. </el-radio-group>
  185. </el-form-item></el-col
  186. >
  187. </el-row>
  188. <el-form-item
  189. v-if="formData.isFrame === 1"
  190. label="外链地址"
  191. prop="path"
  192. >
  193. <el-input v-model="formData.path" placeholder="请输入外链完整路径" />
  194. </el-form-item>
  195. <el-form-item
  196. v-if="
  197. formData.type == MenuTypeEnum.CATALOG ||
  198. formData.type == MenuTypeEnum.MENU
  199. "
  200. label="路由路径"
  201. prop="path"
  202. >
  203. <el-input
  204. v-model="formData.path"
  205. placeholder="第一层目录:/path。子菜单:path 。如果是外部链接可以直接输入: https://www.xxx.com/"
  206. />
  207. </el-form-item>
  208. <!-- 组件页面完整路径 -->
  209. <el-form-item
  210. v-if="formData.type == MenuTypeEnum.MENU"
  211. label="页面路径"
  212. prop="component"
  213. >
  214. <el-input
  215. v-model="formData.component"
  216. placeholder="system/user/index"
  217. style="width: 95%"
  218. >
  219. <template v-if="formData.type == MenuTypeEnum.MENU" #prepend
  220. >src/views/</template
  221. >
  222. <template v-if="formData.type == MenuTypeEnum.MENU" #append
  223. >.vue</template
  224. >
  225. </el-input>
  226. </el-form-item>
  227. <!-- <el-form-item
  228. v-if="formData.type === MenuTypeEnum.CATALOG"
  229. label="根目录始终显示"
  230. >
  231. <template #label>
  232. <div>
  233. 根目录始终显示
  234. <el-tooltip placement="bottom" effect="light">
  235. <template #content
  236. >是:根目录只有一个子路由显示目录
  237. <br />否:根目录只有一个子路由不显示目录,只显示子路由
  238. </template>
  239. <i-ep-QuestionFilled class="inline-block" />
  240. </el-tooltip>
  241. </div>
  242. </template>
  243. <el-radio-group v-model="formData.alwaysShow">
  244. <el-radio :value="1">是</el-radio>
  245. <el-radio :value="0">否</el-radio>
  246. </el-radio-group>
  247. </el-form-item> -->
  248. <el-row>
  249. <el-col :span="12">
  250. <el-form-item label="排序" prop="orderNum">
  251. <el-input-number
  252. v-model="formData.orderNum"
  253. style="width: 100px"
  254. controls-position="right"
  255. :min="0"
  256. />
  257. </el-form-item>
  258. </el-col>
  259. <el-col :span="12"
  260. ><el-form-item label="是否为外链">
  261. <el-radio-group v-model="formData.isFrame">
  262. <el-radio :value="1">是</el-radio>
  263. <el-radio :value="0">否</el-radio>
  264. </el-radio-group>
  265. </el-form-item></el-col
  266. >
  267. </el-row>
  268. <el-row>
  269. <el-col :span="12">
  270. <el-form-item label="是否启用">
  271. <el-radio-group v-model="formData.state">
  272. <el-radio :value="0">启用</el-radio>
  273. <el-radio :value="1">禁用</el-radio>
  274. </el-radio-group>
  275. </el-form-item></el-col
  276. >
  277. <el-col :span="12">
  278. <el-form-item
  279. v-if="formData.type === MenuTypeEnum.MENU"
  280. label="是否缓存"
  281. >
  282. <el-radio-group v-model="formData.keepAlive">
  283. <el-radio :value="1">是</el-radio>
  284. <el-radio :value="0">否</el-radio>
  285. </el-radio-group>
  286. </el-form-item>
  287. </el-col>
  288. </el-row>
  289. <el-row>
  290. <!-- v-if="formData.type == MenuTypeEnum.BUTTON" -->
  291. <el-col :span="12">
  292. <!-- 权限标识 -->
  293. <el-form-item label="权限标识" prop="perms">
  294. <el-input
  295. v-model="formData.perms"
  296. placeholder="与buttonPermission中的相对应"
  297. />
  298. </el-form-item>
  299. <el-form-item
  300. v-if="formData.type !== MenuTypeEnum.BUTTON"
  301. label="图标"
  302. prop="icon"
  303. >
  304. <!-- 图标选择器 -->
  305. <icon-select v-model="formData.icon" />
  306. </el-form-item>
  307. </el-col>
  308. <el-col :span="12" />
  309. </el-row>
  310. <el-form-item
  311. v-if="formData.type == MenuTypeEnum.CATALOG"
  312. label="跳转路由"
  313. >
  314. <el-input v-model="formData.redirect" placeholder="跳转路由" />
  315. </el-form-item>
  316. </el-form>
  317. <template #footer>
  318. <div class="dialog-footer">
  319. <el-button type="primary" @click="submitForm">确 定</el-button>
  320. <el-button @click="closeDialog">取 消</el-button>
  321. </div>
  322. </template>
  323. </el-dialog>
  324. </div>
  325. </template>
  326. <script setup lang="ts">
  327. defineOptions({
  328. // eslint-disable-next-line vue/no-reserved-component-names
  329. name: "Menu",
  330. inheritAttrs: false,
  331. });
  332. import { MenuQuery, MenuForm, MenuVO } from "@/api/system/menu/types";
  333. import {
  334. listMenus,
  335. getMenuForm,
  336. getMenuOptions,
  337. addMenu,
  338. deleteMenu,
  339. updateMenu,
  340. } from "@/api/system/menu";
  341. import { MenuTypeEnum } from "@/enums/MenuTypeEnum";
  342. import ButtonPermKeys from "@/common/configs/buttonPermission";
  343. const queryFormRef = ref(ElForm);
  344. const menuFormRef = ref(ElForm);
  345. const loading = ref(false);
  346. const dialog = reactive({
  347. title: "",
  348. visible: false,
  349. });
  350. const queryParams = reactive<MenuQuery>({});
  351. const menuList = ref<MenuVO[]>([]);
  352. const menuOptions = ref<any>([]);
  353. const formData = reactive<MenuForm>({
  354. parentId: "0",
  355. visible: 0,
  356. orderNum: 1,
  357. type: MenuTypeEnum.MENU,
  358. alwaysShow: 0,
  359. keepAlive: 0,
  360. isFrame: 0,
  361. state: 0,
  362. });
  363. const rules = reactive({
  364. parentId: [{ required: true, message: "请选择顶级菜单", trigger: "blur" }],
  365. menuName: [{ required: true, message: "请输入菜单名称", trigger: "blur" }],
  366. type: [{ required: true, message: "请选择菜单类型", trigger: "blur" }],
  367. path: [{ required: true, message: "请输入路由路径", trigger: "blur" }],
  368. component: [{ required: true, message: "请输入组件路径", trigger: "blur" }],
  369. // perms: [{ required: true, message: "请输入标识", trigger: "blur" }],
  370. });
  371. const defaultProps = {
  372. children: "childs",
  373. label: "menuName",
  374. };
  375. // 选择表格的行菜单ID
  376. const selectedRowMenuId = ref<number | undefined>();
  377. const menuCacheData = reactive({
  378. type: 0,
  379. path: "",
  380. });
  381. /**
  382. * 查询
  383. */
  384. function handleQuery() {
  385. // 重置父组件
  386. loading.value = true;
  387. listMenus()
  388. .then(({ data }) => {
  389. menuList.value = data;
  390. let treeData = Array.from(data);
  391. menuOptions.value = treeData;
  392. menuOptions.value.unshift({ menuName: "顶级菜单", id: "0" });
  393. })
  394. .then(() => {
  395. loading.value = false;
  396. });
  397. }
  398. /** 重置查询 */
  399. function resetQuery() {
  400. queryFormRef.value.resetFields();
  401. handleQuery();
  402. }
  403. /**行点击事件 */
  404. function onRowClick(row: MenuVO) {
  405. selectedRowMenuId.value = row.id;
  406. }
  407. /**
  408. * 打开表单弹窗
  409. *
  410. * @param parentId 父菜单ID
  411. * @param menuId 菜单ID
  412. */
  413. function openDialog(parentId?: string, menuId?: string) {
  414. dialog.visible = true;
  415. if (menuId) {
  416. dialog.title = "编辑菜单";
  417. getMenuForm(menuId).then(({ data }) => {
  418. Object.assign(formData, data);
  419. // menuCacheData.type = data.type;
  420. // menuCacheData.path = data.path ?? "";
  421. });
  422. } else {
  423. dialog.title = "新增菜单";
  424. formData.parentId = parentId;
  425. }
  426. }
  427. /** 菜单类型切换事件处理 */
  428. function onMenuTypeChange() {
  429. // 如果菜单类型改变,清空路由路径;未改变在切换后还原路由路径
  430. if (formData.type !== menuCacheData.type) {
  431. formData.path = "";
  432. } else {
  433. formData.path = menuCacheData.path;
  434. }
  435. }
  436. /** 菜单保存提交 */
  437. function submitForm() {
  438. menuFormRef.value.validate((isValid: boolean) => {
  439. console.log("submitForm", formData);
  440. if (isValid) {
  441. const menuId = formData.id;
  442. if (!formData.component) {
  443. formData.component = "Layout";
  444. }
  445. if (menuId) {
  446. updateMenu(menuId, formData).then(() => {
  447. ElMessage.success("修改成功");
  448. closeDialog();
  449. handleQuery();
  450. });
  451. } else {
  452. addMenu(formData).then(() => {
  453. ElMessage.success("新增成功");
  454. closeDialog();
  455. handleQuery();
  456. });
  457. }
  458. }
  459. });
  460. }
  461. /** 删除菜单 */
  462. function handleDelete(menuId: string) {
  463. if (!menuId) {
  464. ElMessage.warning("请勾选删除项");
  465. return false;
  466. }
  467. ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
  468. confirmButtonText: "确定",
  469. cancelButtonText: "取消",
  470. type: "warning",
  471. })
  472. .then(() => {
  473. deleteMenu(menuId).then(() => {
  474. ElMessage.success("删除成功");
  475. handleQuery();
  476. });
  477. })
  478. .catch(() => ElMessage.info("已取消删除"));
  479. }
  480. /** 关闭弹窗 */
  481. function closeDialog() {
  482. dialog.visible = false;
  483. resetForm();
  484. }
  485. /** 重置表单 */
  486. function resetForm() {
  487. menuFormRef.value.resetFields();
  488. menuFormRef.value.clearValidate();
  489. formData.id = undefined;
  490. formData.parentId = "0";
  491. formData.visible = 1;
  492. formData.orderNum = 1;
  493. formData.perms = undefined;
  494. formData.component = undefined;
  495. formData.path = undefined;
  496. formData.redirect = undefined;
  497. formData.alwaysShow = undefined;
  498. formData.keepAlive = undefined;
  499. }
  500. onMounted(() => {
  501. handleQuery();
  502. });
  503. </script>
  504. @/common/configs/buttonPermission