index.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352
  1. <template>
  2. <div class="app-container">
  3. <el-form :inline="true">
  4. <el-form-item label="菜单名称">
  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="状态">
  14. <el-select v-model="queryParams.visible" placeholder="菜单状态" clearable size="small">
  15. <el-option
  16. v-for="dict in visibleOptions"
  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 type="primary" icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['system:menu:add']">新增</el-button>
  26. </el-form-item>
  27. </el-form>
  28. <el-table
  29. v-loading="loading"
  30. :data="menuList"
  31. row-key="menuId"
  32. :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
  33. >
  34. <el-table-column prop="menuName" label="菜单名称" :show-overflow-tooltip="true" width="160"></el-table-column>
  35. <el-table-column prop="icon" label="图标" align="center" width="100">
  36. <template slot-scope="scope">
  37. <svg-icon :icon-class="scope.row.icon" />
  38. </template>
  39. </el-table-column>
  40. <el-table-column prop="orderNum" label="排序" width="60"></el-table-column>
  41. <el-table-column prop="perms" label="权限标识" :show-overflow-tooltip="true"></el-table-column>
  42. <el-table-column prop="component" label="组件路径" :show-overflow-tooltip="true"></el-table-column>
  43. <el-table-column prop="visible" label="可见" :formatter="visibleFormat" width="80"></el-table-column>
  44. <el-table-column label="创建时间" align="center" prop="createTime">
  45. <template slot-scope="scope">
  46. <span>{{ parseTime(scope.row.createTime) }}</span>
  47. </template>
  48. </el-table-column>
  49. <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
  50. <template slot-scope="scope">
  51. <el-button size="mini"
  52. type="text"
  53. icon="el-icon-edit"
  54. @click="handleUpdate(scope.row)"
  55. v-hasPermi="['system:menu:edit']"
  56. >修改</el-button>
  57. <el-button
  58. size="mini"
  59. type="text"
  60. icon="el-icon-plus"
  61. @click="handleAdd(scope.row)"
  62. v-hasPermi="['system:menu:add']"
  63. >新增</el-button>
  64. <el-button
  65. size="mini"
  66. type="text"
  67. icon="el-icon-delete"
  68. @click="handleDelete(scope.row)"
  69. v-hasPermi="['system:menu:remove']"
  70. >删除</el-button>
  71. </template>
  72. </el-table-column>
  73. </el-table>
  74. <!-- 添加或修改菜单对话框 -->
  75. <el-dialog :title="title" :visible.sync="open" width="600px">
  76. <el-form ref="form" :model="form" :rules="rules" label-width="80px">
  77. <el-row>
  78. <el-col :span="24">
  79. <el-form-item label="上级菜单">
  80. <treeselect
  81. v-model="form.parentId"
  82. :options="menuOptions"
  83. :normalizer="normalizer"
  84. :show-count="true"
  85. placeholder="选择上级菜单"
  86. />
  87. </el-form-item>
  88. </el-col>
  89. <el-col :span="24">
  90. <el-form-item label="菜单类型" prop="menuType">
  91. <el-radio-group v-model="form.menuType">
  92. <el-radio label="M">目录</el-radio>
  93. <el-radio label="C">菜单</el-radio>
  94. <el-radio label="F">按钮</el-radio>
  95. </el-radio-group>
  96. </el-form-item>
  97. </el-col>
  98. <el-col :span="24">
  99. <el-form-item v-if="form.menuType != 'F'" label="菜单图标">
  100. <el-popover
  101. placement="bottom-start"
  102. width="460"
  103. trigger="click"
  104. @show="$refs['iconSelect'].reset()"
  105. >
  106. <IconSelect ref="iconSelect" @selected="selected" />
  107. <el-input slot="reference" v-model="form.icon" placeholder="点击选择图标" readonly>
  108. <svg-icon
  109. v-if="form.icon"
  110. slot="prefix"
  111. :icon-class="form.icon"
  112. class="el-input__icon"
  113. style="height: 32px;width: 16px;"
  114. />
  115. <i v-else slot="prefix" class="el-icon-search el-input__icon" />
  116. </el-input>
  117. </el-popover>
  118. </el-form-item>
  119. </el-col>
  120. <el-col :span="12">
  121. <el-form-item label="菜单名称" prop="menuName">
  122. <el-input v-model="form.menuName" placeholder="请输入菜单名称" />
  123. </el-form-item>
  124. </el-col>
  125. <el-col :span="12">
  126. <el-form-item label="显示排序" prop="orderNum">
  127. <el-input-number v-model="form.orderNum" controls-position="right" :min="0" />
  128. </el-form-item>
  129. </el-col>
  130. <el-col :span="12">
  131. <el-form-item v-if="form.menuType != 'F'" label="是否外链">
  132. <el-radio-group v-model="form.isFrame">
  133. <el-radio label="0">是</el-radio>
  134. <el-radio label="1">否</el-radio>
  135. </el-radio-group>
  136. </el-form-item>
  137. </el-col>
  138. <el-col :span="12">
  139. <el-form-item v-if="form.menuType != 'F'" label="路由地址" prop="path">
  140. <el-input v-model="form.path" placeholder="请输入路由地址" />
  141. </el-form-item>
  142. </el-col>
  143. <el-col :span="12" v-if="form.menuType == 'C'">
  144. <el-form-item label="组件路径" prop="component">
  145. <el-input v-model="form.component" placeholder="请输入组件路径" />
  146. </el-form-item>
  147. </el-col>
  148. <el-col :span="12">
  149. <el-form-item v-if="form.menuType != 'M'" label="权限标识">
  150. <el-input v-model="form.perms" placeholder="请权限标识" maxlength="50" />
  151. </el-form-item>
  152. </el-col>
  153. <el-col :span="24">
  154. <el-form-item v-if="form.menuType != 'F'" label="菜单状态">
  155. <el-radio-group v-model="form.visible">
  156. <el-radio
  157. v-for="dict in visibleOptions"
  158. :key="dict.dictValue"
  159. :label="dict.dictValue"
  160. >{{dict.dictLabel}}</el-radio>
  161. </el-radio-group>
  162. </el-form-item>
  163. </el-col>
  164. </el-row>
  165. </el-form>
  166. <div slot="footer" class="dialog-footer">
  167. <el-button type="primary" @click="submitForm">确 定</el-button>
  168. <el-button @click="cancel">取 消</el-button>
  169. </div>
  170. </el-dialog>
  171. </div>
  172. </template>
  173. <script>
  174. import { listMenu, getMenu, delMenu, addMenu, updateMenu } from "@/api/system/menu";
  175. import Treeselect from "@riophae/vue-treeselect";
  176. import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  177. import IconSelect from "@/components/IconSelect";
  178. export default {
  179. name: "Menu",
  180. components: { Treeselect, IconSelect },
  181. data() {
  182. return {
  183. // 遮罩层
  184. loading: true,
  185. // 菜单表格树数据
  186. menuList: [],
  187. // 菜单树选项
  188. menuOptions: [],
  189. // 弹出层标题
  190. title: "",
  191. // 是否显示弹出层
  192. open: false,
  193. // 菜单状态数据字典
  194. visibleOptions: [],
  195. // 查询参数
  196. queryParams: {
  197. menuName: undefined,
  198. visible: undefined
  199. },
  200. // 表单参数
  201. form: {},
  202. // 表单校验
  203. rules: {
  204. menuName: [
  205. { required: true, message: "菜单名称不能为空", trigger: "blur" }
  206. ],
  207. orderNum: [
  208. { required: true, message: "菜单顺序不能为空", trigger: "blur" }
  209. ],
  210. path: [
  211. { required: true, message: "路由地址不能为空", trigger: "blur" }
  212. ]
  213. }
  214. };
  215. },
  216. created() {
  217. this.getList();
  218. this.getDicts("sys_show_hide").then(response => {
  219. this.visibleOptions = response.data;
  220. });
  221. },
  222. methods: {
  223. // 选择图标
  224. selected(name) {
  225. this.form.icon = name;
  226. },
  227. /** 查询菜单列表 */
  228. getList() {
  229. this.loading = true;
  230. listMenu(this.queryParams).then(response => {
  231. this.menuList = this.handleTree(response.data, "menuId");
  232. this.loading = false;
  233. });
  234. },
  235. /** 转换菜单数据结构 */
  236. normalizer(node) {
  237. if (node.children && !node.children.length) {
  238. delete node.children;
  239. }
  240. return {
  241. id: node.menuId,
  242. label: node.menuName,
  243. children: node.children
  244. };
  245. },
  246. /** 查询菜单下拉树结构 */
  247. getTreeselect() {
  248. listMenu().then(response => {
  249. this.menuOptions = [];
  250. const menu = { menuId: 0, menuName: '主类目', children: [] };
  251. menu.children = this.handleTree(response.data, "menuId");
  252. this.menuOptions.push(menu);
  253. });
  254. },
  255. // 菜单显示状态字典翻译
  256. visibleFormat(row, column) {
  257. if (row.menuType == "F") {
  258. return "";
  259. }
  260. return this.selectDictLabel(this.visibleOptions, row.visible);
  261. },
  262. // 取消按钮
  263. cancel() {
  264. this.open = false;
  265. this.reset();
  266. },
  267. // 表单重置
  268. reset() {
  269. this.form = {
  270. menuId: undefined,
  271. parentId: 0,
  272. menuName: undefined,
  273. icon: undefined,
  274. menuType: "M",
  275. orderNum: undefined,
  276. isFrame: "1",
  277. visible: "0"
  278. };
  279. this.resetForm("form");
  280. },
  281. /** 搜索按钮操作 */
  282. handleQuery() {
  283. this.getList();
  284. },
  285. /** 新增按钮操作 */
  286. handleAdd(row) {
  287. this.reset();
  288. this.getTreeselect();
  289. if (row != null) {
  290. this.form.parentId = row.menuId;
  291. }
  292. this.open = true;
  293. this.title = "添加菜单";
  294. },
  295. /** 修改按钮操作 */
  296. handleUpdate(row) {
  297. this.reset();
  298. this.getTreeselect();
  299. getMenu(row.menuId).then(response => {
  300. this.form = response.data;
  301. this.open = true;
  302. this.title = "修改菜单";
  303. });
  304. },
  305. /** 提交按钮 */
  306. submitForm: function() {
  307. this.$refs["form"].validate(valid => {
  308. if (valid) {
  309. if (this.form.menuId != undefined) {
  310. updateMenu(this.form).then(response => {
  311. if (response.code === 200) {
  312. this.msgSuccess("修改成功");
  313. this.open = false;
  314. this.getList();
  315. } else {
  316. this.msgError(response.msg);
  317. }
  318. });
  319. } else {
  320. addMenu(this.form).then(response => {
  321. if (response.code === 200) {
  322. this.msgSuccess("新增成功");
  323. this.open = false;
  324. this.getList();
  325. } else {
  326. this.msgError(response.msg);
  327. }
  328. });
  329. }
  330. }
  331. });
  332. },
  333. /** 删除按钮操作 */
  334. handleDelete(row) {
  335. this.$confirm('是否确认删除名称为"' + row.menuName + '"的数据项?', "警告", {
  336. confirmButtonText: "确定",
  337. cancelButtonText: "取消",
  338. type: "warning"
  339. }).then(function() {
  340. return delMenu(row.menuId);
  341. }).then(() => {
  342. this.getList();
  343. this.msgSuccess("删除成功");
  344. }).catch(function() {});
  345. }
  346. }
  347. };
  348. </script>