menu.vue 37 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874
  1. <template>
  2. <div class="app-container">
  3. <div class="mymain-container">
  4. <div class="btn-group clearfix">
  5. <div class="fl">
  6. <el-button
  7. size="small"
  8. type="primary"
  9. icon="el-icon-plus"
  10. @click="addOrEditParent('add')"
  11. >添加菜单</el-button>
  12. </div>
  13. <div class="fr">
  14. <!-- <el-input placeholder="请输入菜单名称进行搜索" v-model="screenForm.keyword" size="small" style="width: 240px;" clearable>
  15. <el-button slot="append" icon="el-icon-search" size="small" @click="getListByScreen"></el-button>
  16. </el-input> -->
  17. </div>
  18. </div>
  19. <div class="table">
  20. <el-table :data="dataList" row-key="moduleId" border default-expand-all :tree-props="{ children: 'children' }">
  21. <el-table-column prop="moduleName" label="菜单名称" min-width="150" />
  22. <el-table-column prop="url" label="菜单URL" min-width="150" />
  23. <el-table-column align="center" prop="icon" label="菜单图标">
  24. <template slot-scope="scope">
  25. <i :class="scope.row.icon" style="font-size: 18px" />
  26. </template>
  27. </el-table-column>
  28. <el-table-column align="center" prop="sortNum" label="排序" />
  29. <el-table-column align="right" label="操作" width="150" fixed="right">
  30. <template slot-scope="scope">
  31. <el-button
  32. type="primary"
  33. size="mini"
  34. icon="el-icon-plus"
  35. @click="addOrEditChild('add', scope.row.moduleId)"
  36. />
  37. <el-button
  38. v-if="scope.row.level == 1"
  39. type="primary"
  40. size="mini"
  41. icon="el-icon-edit"
  42. @click="addOrEditParent('edit', scope.row.moduleId)"
  43. />
  44. <el-button
  45. v-if="scope.row.level > 1"
  46. type="primary"
  47. size="mini"
  48. icon="el-icon-edit"
  49. @click="addOrEditChild('edit', scope.row.moduleId)"
  50. />
  51. <el-popconfirm
  52. style="margin-left: 10px"
  53. title="确定删除吗?"
  54. @confirm="handleDelete(scope.row.moduleId)"
  55. >
  56. <el-button slot="reference" size="mini" icon="el-icon-delete" />
  57. </el-popconfirm>
  58. </template>
  59. </el-table-column>
  60. </el-table>
  61. </div>
  62. </div>
  63. <!-- 新增编辑 一级菜单 -->
  64. <el-dialog
  65. :title="addParentFormType == 'add' ? '添加菜单' : '编辑菜单'"
  66. :visible.sync="addParentFormVisible"
  67. :show-close="false"
  68. width="40%"
  69. :close-on-click-modal="false"
  70. >
  71. <el-form
  72. ref="addParentForm"
  73. :model="addParentForm"
  74. :rules="addParentFormRules"
  75. label-position="left"
  76. label-width="80px"
  77. >
  78. <el-form-item label="类型" prop="type">
  79. <el-radio-group v-model="addParentForm.type">
  80. <el-radio v-for="item in menuTypeList" :key="item.value" :label="item.label">
  81. {{ item.value }}
  82. </el-radio>
  83. </el-radio-group>
  84. </el-form-item>
  85. <el-form-item label="上级菜单" prop="oneMenu">
  86. <el-cascader
  87. v-model="addParentForm.oneMenu"
  88. style="width: 100%"
  89. :options="dataList"
  90. :props="{ checkStrictly: true, value: 'moduleId', label: 'moduleName' }"
  91. filterable
  92. clearable
  93. />
  94. </el-form-item>
  95. <el-form-item label="菜单名称" prop="twoMenu">
  96. <el-input
  97. v-model="addParentForm.twoMenu"
  98. type="text"
  99. placeholder="请输入菜单名称"
  100. maxlength="10"
  101. show-word-limit
  102. />
  103. </el-form-item>
  104. <el-form-item label="CODE" prop="code">
  105. <el-input v-model="addParentForm.code" placeholder="请输入CODE" />
  106. </el-form-item>
  107. <el-form-item label="URL" prop="url">
  108. <el-input v-model="addParentForm.url" placeholder="请输入URL" />
  109. </el-form-item>
  110. <el-form-item label="全URL" prop="fullUrl">
  111. <el-input v-model="addParentForm.fullUrl" placeholder="请输入全URL" />
  112. </el-form-item>
  113. <el-form-item label="图标" prop="icon">
  114. <div class="iconInput">
  115. <div v-if="addParentForm.icon" class="icon"><i :class="addParentForm.icon" /></div>
  116. <el-input v-model="addParentForm.icon" placeholder="请选择图标" />
  117. <el-button type="primary" @click="toChooseIcon(1)">选择</el-button>
  118. </div>
  119. </el-form-item>
  120. <el-form-item label="排序" prop="sort">
  121. <el-input v-model.number="addParentForm.sort" placeholder="请输入排序" />
  122. </el-form-item>
  123. </el-form>
  124. <div slot="footer" class="dialog-footer">
  125. <el-button @click="cancelAddParentForm">取 消</el-button>
  126. <el-button type="primary" @click="submitAddParentForm">确 定</el-button>
  127. </div>
  128. </el-dialog>
  129. <!-- 新增编辑 二级菜单 -->
  130. <el-dialog
  131. :title="addChildFormType == 'add' ? '添加菜单' : '编辑菜单'"
  132. :visible.sync="addChildFormVisible"
  133. :show-close="false"
  134. width="40%"
  135. :close-on-click-modal="false"
  136. >
  137. <el-form
  138. ref="addChildForm"
  139. :model="addChildForm"
  140. :rules="addChildFormRules"
  141. label-position="left"
  142. label-width="80px"
  143. >
  144. <el-form-item label="类型" prop="type">
  145. <el-radio-group v-model="addChildForm.type">
  146. <el-radio v-for="item in menuTypeList" :key="item.value" :label="item.label">
  147. {{ item.value }}
  148. </el-radio>
  149. </el-radio-group>
  150. </el-form-item>
  151. <el-form-item label="上级菜单" prop="oneMenu">
  152. <el-cascader
  153. v-model="addChildForm.oneMenu"
  154. style="width: 100%"
  155. :options="dataList"
  156. :props="{ checkStrictly: true, value: 'moduleId', label: 'moduleName' }"
  157. filterable
  158. clearable
  159. />
  160. </el-form-item>
  161. <el-form-item label="菜单名称" prop="twoMenu">
  162. <el-input
  163. v-model="addChildForm.twoMenu"
  164. type="text"
  165. placeholder="请输入菜单名称"
  166. maxlength="10"
  167. show-word-limit
  168. />
  169. </el-form-item>
  170. <el-form-item label="CODE" prop="code">
  171. <el-input v-model="addChildForm.code" placeholder="请输入CODE" />
  172. </el-form-item>
  173. <el-form-item label="URL" prop="url">
  174. <el-input v-model="addChildForm.url" placeholder="请输入URL" />
  175. </el-form-item>
  176. <el-form-item label="全URL" prop="fullUrl">
  177. <el-input v-model="addChildForm.fullUrl" placeholder="请输入全URL" />
  178. </el-form-item>
  179. <el-form-item label="图标" prop="icon">
  180. <div class="iconInput">
  181. <div v-if="addChildForm.icon" class="icon"><i :class="addChildForm.icon" /></div>
  182. <el-input v-model="addChildForm.icon" placeholder="请选择图标" />
  183. <el-button type="primary" @click="toChooseIcon(2)">选择</el-button>
  184. </div>
  185. </el-form-item>
  186. <el-form-item label="排序" prop="sort">
  187. <el-input v-model.number="addChildForm.sort" placeholder="请输入排序" />
  188. </el-form-item>
  189. </el-form>
  190. <div slot="footer" class="dialog-footer">
  191. <el-button @click="cancelAddChildForm">取 消</el-button>
  192. <el-button type="primary" @click="submitAddChildForm">确 定</el-button>
  193. </div>
  194. </el-dialog>
  195. <!-- 选择图标 -->
  196. <el-dialog
  197. title="选择图标"
  198. :visible.sync="isChooseIconDialog"
  199. :show-close="true"
  200. width="600px"
  201. :close-on-click-modal="false"
  202. >
  203. <div class="iconList">
  204. <div v-for="(item, index) in iconList" :key="index" class="item" @click="chooseIcon(item.value)">
  205. <i :class="item.value" />
  206. </div>
  207. </div>
  208. </el-dialog>
  209. </div>
  210. </template>
  211. <script>
  212. import { mapGetters } from 'vuex'
  213. import { getToken } from '@/utils/auth'
  214. import { getMenuList, addMenu, editMenu, deleteMenu, getMenuDetail } from '@/api/setting'
  215. export default {
  216. data() {
  217. return {
  218. baseURL: process.env.VUE_APP_BASE_API,
  219. myHeaders: { 'x-token': getToken() },
  220. dataList: [], // 列表数据
  221. listLoading: true, // 列表加载loading
  222. screenForm: {
  223. // 筛选表单数据
  224. keyword: '' // 关键词
  225. },
  226. editParentId: null,
  227. addParentFormType: 'add',
  228. addParentFormVisible: false,
  229. addParentForm: {
  230. oneMenu: '',
  231. twoMenu: '',
  232. code: '',
  233. url: '',
  234. fullUrl: '',
  235. icon: '',
  236. sort: 0,
  237. type: 1
  238. },
  239. addParentFormRules: {
  240. type: [{ required: true, message: '请选择类型', trigger: 'change' }],
  241. // oneMenu: [{ required: true, message: '请选择一级菜单', trigger: 'change' }],
  242. twoMenu: [{ required: true, message: '请填写菜单名称', trigger: 'blur' }],
  243. code: [{ required: true, message: '请填写菜单CODE', trigger: 'blur' }],
  244. url: [{ required: true, message: '请填写菜单URL', trigger: 'blur' }],
  245. icon: [{ required: true, message: '请选择图标', trigger: 'blur' }]
  246. },
  247. editChildId: null,
  248. addChildFormType: 'add',
  249. addChildFormVisible: false,
  250. addChildForm: {
  251. oneMenu: '',
  252. twoMenu: '',
  253. code: '',
  254. url: '',
  255. fullUrl: '',
  256. icon: '',
  257. sort: 0,
  258. type: 1
  259. },
  260. addChildFormRules: {
  261. type: [{ required: true, message: '请选择类型', trigger: 'change' }],
  262. // oneMenu: [{ required: true, message: '请选择一级菜单', trigger: 'change' }],
  263. twoMenu: [{ required: true, message: '请填写菜单名称', trigger: 'blur' }],
  264. code: [{ required: true, message: '请填写菜单CODE', trigger: 'blur' }],
  265. url: [{ required: true, message: '请填写菜单URL', trigger: 'blur' }]
  266. // icon: [
  267. // { required: true, message: '请选择图标', trigger: 'blur' }
  268. // ]
  269. },
  270. isChooseIconDialog: false,
  271. iconList: [
  272. { label: 'el-icon-delete-solid', value: 'el-icon-delete-solid' },
  273. { label: 'el-icon-s-tools', value: 'el-icon-s-tools' },
  274. { label: 'el-icon-user-solid', value: 'el-icon-user-solid' },
  275. { label: 'el-icon-phone', value: 'el-icon-phone' },
  276. { label: 'el-icon-more', value: 'el-icon-more' },
  277. { label: 'el-icon-star-on', value: 'el-icon-star-on' },
  278. { label: 'el-icon-s-goods', value: 'el-icon-s-goods' },
  279. { label: 'el-icon-warning', value: 'el-icon-warning' },
  280. { label: 'el-icon-question', value: 'el-icon-question' },
  281. { label: 'el-icon-info', value: 'el-icon-info' },
  282. { label: 'el-icon-remove', value: 'el-icon-remove' },
  283. { label: 'el-icon-circle-plus', value: 'el-icon-circle-plus' },
  284. { label: 'el-icon-success', value: 'el-icon-success' },
  285. { label: 'el-icon-error', value: 'el-icon-error' },
  286. { label: 'el-icon-zoom-in', value: 'el-icon-zoom-in' },
  287. { label: 'el-icon-zoom-out', value: 'el-icon-zoom-out' },
  288. { label: 'el-icon-remove-outline', value: 'el-icon-remove-outline' },
  289. { label: 'el-icon-circle-plus-outline', value: 'el-icon-circle-plus-outline' },
  290. { label: 'el-icon-circle-check', value: 'el-icon-circle-check' },
  291. { label: 'el-icon-circle-close', value: 'el-icon-circle-close' },
  292. { label: 'el-icon-s-help', value: 'el-icon-s-help' },
  293. { label: 'el-icon-help', value: 'el-icon-help' },
  294. { label: 'el-icon-minus', value: 'el-icon-minus' },
  295. { label: 'el-icon-plus', value: 'el-icon-plus' },
  296. { label: 'el-icon-check', value: 'el-icon-check' },
  297. { label: 'el-icon-close', value: 'el-icon-close' },
  298. { label: 'el-icon-platform-eleme', value: 'el-icon-platform-eleme' },
  299. { label: 'el-icon-eleme', value: 'el-icon-eleme' },
  300. { label: 'el-icon-delete-solid', value: 'el-icon-delete-solid' },
  301. { label: 'el-icon-delete', value: 'el-icon-delete' },
  302. { label: 'el-icon-s-tools', value: 'el-icon-s-tools' },
  303. { label: 'el-icon-setting', value: 'el-icon-setting' },
  304. { label: 'el-icon-user-solid', value: 'el-icon-user-solid' },
  305. { label: 'el-icon-user', value: 'el-icon-user' },
  306. { label: 'el-icon-phone', value: 'el-icon-phone' },
  307. { label: 'el-icon-phone-outline', value: 'el-icon-phone-outline' },
  308. { label: 'el-icon-more', value: 'el-icon-more' },
  309. { label: 'el-icon-more-outline', value: 'el-icon-more-outline' },
  310. { label: 'el-icon-star-on', value: 'el-icon-star-on' },
  311. { label: 'el-icon-star-off', value: 'el-icon-star-off' },
  312. { label: 'el-icon-s-goods', value: 'el-icon-s-goods' },
  313. { label: 'el-icon-goods', value: 'el-icon-goods' },
  314. { label: 'el-icon-warning', value: 'el-icon-warning' },
  315. { label: 'el-icon-warning-outline', value: 'el-icon-warning-outline' },
  316. { label: 'el-icon-question', value: 'el-icon-question' },
  317. { label: 'el-icon-info', value: 'el-icon-info' },
  318. { label: 'el-icon-remove', value: 'el-icon-remove' },
  319. { label: 'el-icon-circle-plus', value: 'el-icon-circle-plus' },
  320. { label: 'el-icon-success', value: 'el-icon-success' },
  321. { label: 'el-icon-error', value: 'el-icon-error' },
  322. { label: 'el-icon-zoom-in', value: 'el-icon-zoom-in' },
  323. { label: 'el-icon-zoom-out', value: 'el-icon-zoom-out' },
  324. { label: 'el-icon-remove-outline', value: 'el-icon-remove-outline' },
  325. { label: 'el-icon-circle-plus-outline', value: 'el-icon-circle-plus-outline' },
  326. { label: 'el-icon-circle-check', value: 'el-icon-circle-check' },
  327. { label: 'el-icon-circle-close', value: 'el-icon-circle-close' },
  328. { label: 'el-icon-s-help', value: 'el-icon-s-help' },
  329. { label: 'el-icon-help', value: 'el-icon-help' },
  330. { label: 'el-icon-minus', value: 'el-icon-minus' },
  331. { label: 'el-icon-plus', value: 'el-icon-plus' },
  332. { label: 'el-icon-check', value: 'el-icon-check' },
  333. { label: 'el-icon-close', value: 'el-icon-close' },
  334. { label: 'el-icon-picture', value: 'el-icon-picture' },
  335. { label: 'el-icon-picture-outline', value: 'el-icon-picture-outline' },
  336. { label: 'el-icon-picture-outline-round', value: 'el-icon-picture-outline-round' },
  337. { label: 'el-icon-upload', value: 'el-icon-upload' },
  338. { label: 'el-icon-upload2', value: 'el-icon-upload2' },
  339. { label: 'el-icon-download', value: 'el-icon-download' },
  340. { label: 'el-icon-camera-solid', value: 'el-icon-camera-solid' },
  341. { label: 'el-icon-camera', value: 'el-icon-camera' },
  342. { label: 'el-icon-video-camera-solid', value: 'el-icon-video-camera-solid' },
  343. { label: 'el-icon-video-camera', value: 'el-icon-video-camera' },
  344. { label: 'el-icon-message-solid', value: 'el-icon-message-solid' },
  345. { label: 'el-icon-bell', value: 'el-icon-bell' },
  346. { label: 'el-icon-s-cooperation', value: 'el-icon-s-cooperation' },
  347. { label: 'el-icon-s-order', value: 'el-icon-s-order' },
  348. { label: 'el-icon-s-platform', value: 'el-icon-s-platform' },
  349. { label: 'el-icon-s-fold', value: 'el-icon-s-fold' },
  350. { label: 'el-icon-s-unfold', value: 'el-icon-s-unfold' },
  351. { label: 'el-icon-s-operation', value: 'el-icon-s-operation' },
  352. { label: 'el-icon-s-promotion', value: 'el-icon-s-promotion' },
  353. { label: 'el-icon-s-home', value: 'el-icon-s-home' },
  354. { label: 'el-icon-s-release', value: 'el-icon-s-release' },
  355. { label: 'el-icon-s-ticket', value: 'el-icon-s-ticket' },
  356. { label: 'el-icon-s-management', value: 'el-icon-s-management' },
  357. { label: 'el-icon-s-open', value: 'el-icon-s-open' },
  358. { label: 'el-icon-s-shop', value: 'el-icon-s-shop' },
  359. { label: 'el-icon-s-marketing', value: 'el-icon-s-marketing' },
  360. { label: 'el-icon-s-flag', value: 'el-icon-s-flag' },
  361. { label: 'el-icon-s-comment', value: 'el-icon-s-comment' },
  362. { label: 'el-icon-s-finance', value: 'el-icon-s-finance' },
  363. { label: 'el-icon-s-claim', value: 'el-icon-s-claim' },
  364. { label: 'el-icon-s-custom', value: 'el-icon-s-custom' },
  365. { label: 'el-icon-s-opportunity', value: 'el-icon-s-opportunity' },
  366. { label: 'el-icon-s-data', value: 'el-icon-s-data' },
  367. { label: 'el-icon-s-check', value: 'el-icon-s-check' },
  368. { label: 'el-icon-s-grid', value: 'el-icon-s-grid' },
  369. { label: 'el-icon-menu', value: 'el-icon-menu' },
  370. { label: 'el-icon-share', value: 'el-icon-share' },
  371. { label: 'el-icon-d-caret', value: 'el-icon-d-caret' },
  372. { label: 'el-icon-caret-left', value: 'el-icon-caret-left' },
  373. { label: 'el-icon-caret-right', value: 'el-icon-caret-right' },
  374. { label: 'el-icon-caret-bottom', value: 'el-icon-caret-bottom' },
  375. { label: 'el-icon-caret-top', value: 'el-icon-caret-top' },
  376. { label: 'el-icon-bottom-left', value: 'el-icon-bottom-left' },
  377. { label: 'el-icon-bottom-right', value: 'el-icon-bottom-right' },
  378. { label: 'el-icon-back', value: 'el-icon-back' },
  379. { label: 'el-icon-right', value: 'el-icon-right' },
  380. { label: 'el-icon-bottom', value: 'el-icon-bottom' },
  381. { label: 'el-icon-top', value: 'el-icon-top' },
  382. { label: 'el-icon-top-left', value: 'el-icon-top-left' },
  383. { label: 'el-icon-top-right', value: 'el-icon-top-right' },
  384. { label: 'el-icon-arrow-left', value: 'el-icon-arrow-left' },
  385. { label: 'el-icon-arrow-right', value: 'el-icon-arrow-right' },
  386. { label: 'el-icon-arrow-down', value: 'el-icon-arrow-down' },
  387. { label: 'el-icon-arrow-up', value: 'el-icon-arrow-up' },
  388. { label: 'el-icon-d-arrow-left', value: 'el-icon-d-arrow-left' },
  389. { label: 'el-icon-d-arrow-right', value: 'el-icon-d-arrow-right' },
  390. { label: 'el-icon-video-pause', value: 'el-icon-video-pause' },
  391. { label: 'el-icon-video-play', value: 'el-icon-video-play' },
  392. { label: 'el-icon-refresh', value: 'el-icon-refresh' },
  393. { label: 'el-icon-refresh-right', value: 'el-icon-refresh-right' },
  394. { label: 'el-icon-refresh-left', value: 'el-icon-refresh-left' },
  395. { label: 'el-icon-finished', value: 'el-icon-finished' },
  396. { label: 'el-icon-sort', value: 'el-icon-sort' },
  397. { label: 'el-icon-sort-up', value: 'el-icon-sort-up' },
  398. { label: 'el-icon-sort-down', value: 'el-icon-sort-down' },
  399. { label: 'el-icon-rank', value: 'el-icon-rank' },
  400. { label: 'el-icon-loading', value: 'el-icon-loading' },
  401. { label: 'el-icon-view', value: 'el-icon-view' },
  402. { label: 'el-icon-c-scale-to-original', value: 'el-icon-c-scale-to-original' },
  403. { label: 'el-icon-date', value: 'el-icon-date' },
  404. { label: 'el-icon-edit', value: 'el-icon-edit' },
  405. { label: 'el-icon-edit-outline', value: 'el-icon-edit-outline' },
  406. { label: 'el-icon-folder', value: 'el-icon-folder' },
  407. { label: 'el-icon-folder-opened', value: 'el-icon-folder-opened' },
  408. { label: 'el-icon-folder-add', value: 'el-icon-folder-add' },
  409. { label: 'el-icon-folder-remove', value: 'el-icon-folder-remove' },
  410. { label: 'el-icon-folder-delete', value: 'el-icon-folder-delete' },
  411. { label: 'el-icon-folder-checked', value: 'el-icon-folder-checked' },
  412. { label: 'el-icon-tickets', value: 'el-icon-tickets' },
  413. { label: 'el-icon-document-remove', value: 'el-icon-document-remove' },
  414. { label: 'el-icon-document-delete', value: 'el-icon-document-delete' },
  415. { label: 'el-icon-document-copy', value: 'el-icon-document-copy' },
  416. { label: 'el-icon-document-checked', value: 'el-icon-document-checked' },
  417. { label: 'el-icon-document', value: 'el-icon-document' },
  418. { label: 'el-icon-document-add', value: 'el-icon-document-add' },
  419. { label: 'el-icon-printer', value: 'el-icon-printer' },
  420. { label: 'el-icon-paperclip', value: 'el-icon-paperclip' },
  421. { label: 'el-icon-takeaway-box', value: 'el-icon-takeaway-box' },
  422. { label: 'el-icon-search', value: 'el-icon-search' },
  423. { label: 'el-icon-monitor', value: 'el-icon-monitor' },
  424. { label: 'el-icon-attract', value: 'el-icon-attract' },
  425. { label: 'el-icon-mobile', value: 'el-icon-mobile' },
  426. { label: 'el-icon-scissors', value: 'el-icon-scissors' },
  427. { label: 'el-icon-umbrella', value: 'el-icon-umbrella' },
  428. { label: 'el-icon-headset', value: 'el-icon-headset' },
  429. { label: 'el-icon-brush', value: 'el-icon-brush' },
  430. { label: 'el-icon-mouse', value: 'el-icon-mouse' },
  431. { label: 'el-icon-coordinate', value: 'el-icon-coordinate' },
  432. { label: 'el-icon-magic-stick', value: 'el-icon-magic-stick' },
  433. { label: 'el-icon-reading', value: 'el-icon-reading' },
  434. { label: 'el-icon-data-line', value: 'el-icon-data-line' },
  435. { label: 'el-icon-data-board', value: 'el-icon-data-board' },
  436. { label: 'el-icon-pie-chart', value: 'el-icon-pie-chart' },
  437. { label: 'el-icon-data-analysis', value: 'el-icon-data-analysis' },
  438. { label: 'el-icon-collection-tag', value: 'el-icon-collection-tag' },
  439. { label: 'el-icon-film', value: 'el-icon-film' },
  440. { label: 'el-icon-suitcase', value: 'el-icon-suitcase' },
  441. { label: 'el-icon-suitcase-1', value: 'el-icon-suitcase-1' },
  442. { label: 'el-icon-receiving', value: 'el-icon-receiving' },
  443. { label: 'el-icon-collection', value: 'el-icon-collection' },
  444. { label: 'el-icon-files', value: 'el-icon-files' },
  445. { label: 'el-icon-notebook-1', value: 'el-icon-notebook-1' },
  446. { label: 'el-icon-notebook-2', value: 'el-icon-notebook-2' },
  447. { label: 'el-icon-toilet-paper', value: 'el-icon-toilet-paper' },
  448. { label: 'el-icon-office-building', value: 'el-icon-office-building' },
  449. { label: 'el-icon-school', value: 'el-icon-school' },
  450. { label: 'el-icon-table-lamp', value: 'el-icon-table-lamp' },
  451. { label: 'el-icon-house', value: 'el-icon-house' },
  452. { label: 'el-icon-no-smoking', value: 'el-icon-no-smoking' },
  453. { label: 'el-icon-smoking', value: 'el-icon-smoking' },
  454. { label: 'el-icon-shopping-cart-full', value: 'el-icon-shopping-cart-full' },
  455. { label: 'el-icon-shopping-cart-1', value: 'el-icon-shopping-cart-1' },
  456. { label: 'el-icon-shopping-cart-2', value: 'el-icon-shopping-cart-2' },
  457. { label: 'el-icon-shopping-bag-1', value: 'el-icon-shopping-bag-1' },
  458. { label: 'el-icon-shopping-bag-2', value: 'el-icon-shopping-bag-2' },
  459. { label: 'el-icon-sold-out', value: 'el-icon-sold-out' },
  460. { label: 'el-icon-sell', value: 'el-icon-sell' },
  461. { label: 'el-icon-present', value: 'el-icon-present' },
  462. { label: 'el-icon-box', value: 'el-icon-box' },
  463. { label: 'el-icon-bank-card', value: 'el-icon-bank-card' },
  464. { label: 'el-icon-money', value: 'el-icon-money' },
  465. { label: 'el-icon-coin', value: 'el-icon-coin' },
  466. { label: 'el-icon-wallet', value: 'el-icon-wallet' },
  467. { label: 'el-icon-discount', value: 'el-icon-discount' },
  468. { label: 'el-icon-price-tag', value: 'el-icon-price-tag' },
  469. { label: 'el-icon-news', value: 'el-icon-news' },
  470. { label: 'el-icon-guide', value: 'el-icon-guide' },
  471. { label: 'el-icon-male', value: 'el-icon-male' },
  472. { label: 'el-icon-female', value: 'el-icon-female' },
  473. { label: 'el-icon-thumb', value: 'el-icon-thumb' },
  474. { label: 'el-icon-cpu', value: 'el-icon-cpu' },
  475. { label: 'el-icon-link', value: 'el-icon-link' },
  476. { label: 'el-icon-connection', value: 'el-icon-connection' },
  477. { label: 'el-icon-open', value: 'el-icon-open' },
  478. { label: 'el-icon-turn-off', value: 'el-icon-turn-off' },
  479. { label: 'el-icon-set-up', value: 'el-icon-set-up' },
  480. { label: 'el-icon-chat-round', value: 'el-icon-chat-round' },
  481. { label: 'el-icon-chat-line-round', value: 'el-icon-chat-line-round' },
  482. { label: 'el-icon-chat-square', value: 'el-icon-chat-square' },
  483. { label: 'el-icon-chat-dot-round', value: 'el-icon-chat-dot-round' },
  484. { label: 'el-icon-chat-dot-square', value: 'el-icon-chat-dot-square' },
  485. { label: 'el-icon-chat-line-square', value: 'el-icon-chat-line-square' },
  486. { label: 'el-icon-message', value: 'el-icon-message' },
  487. { label: 'el-icon-postcard', value: 'el-icon-postcard' },
  488. { label: 'el-icon-position', value: 'el-icon-position' },
  489. { label: 'el-icon-turn-off-microphone', value: 'el-icon-turn-off-microphone' },
  490. { label: 'el-icon-microphone', value: 'el-icon-microphone' },
  491. { label: 'el-icon-close-notification', value: 'el-icon-close-notification' },
  492. { label: 'el-icon-bangzhu', value: 'el-icon-bangzhu' },
  493. { label: 'el-icon-time', value: 'el-icon-time' },
  494. { label: 'el-icon-odometer', value: 'el-icon-odometer' },
  495. { label: 'el-icon-crop', value: 'el-icon-crop' },
  496. { label: 'el-icon-aim', value: 'el-icon-aim' },
  497. { label: 'el-icon-switch-button', value: 'el-icon-switch-button' },
  498. { label: 'el-icon-full-screen', value: 'el-icon-full-screen' },
  499. { label: 'el-icon-copy-document', value: 'el-icon-copy-document' },
  500. { label: 'el-icon-mic', value: 'el-icon-mic' },
  501. { label: 'el-icon-stopwatch', value: 'el-icon-stopwatch' },
  502. { label: 'el-icon-medal-1', value: 'el-icon-medal-1' },
  503. { label: 'el-icon-medal', value: 'el-icon-medal' },
  504. { label: 'el-icon-trophy', value: 'el-icon-trophy' },
  505. { label: 'el-icon-trophy-1', value: 'el-icon-trophy-1' },
  506. { label: 'el-icon-first-aid-kit', value: 'el-icon-first-aid-kit' },
  507. { label: 'el-icon-discover', value: 'el-icon-discover' },
  508. { label: 'el-icon-place', value: 'el-icon-place' },
  509. { label: 'el-icon-location', value: 'el-icon-location' },
  510. { label: 'el-icon-location-outline', value: 'el-icon-location-outline' },
  511. { label: 'el-icon-location-information', value: 'el-icon-location-information' },
  512. { label: 'el-icon-add-location', value: 'el-icon-add-location' },
  513. { label: 'el-icon-delete-location', value: 'el-icon-delete-location' },
  514. { label: 'el-icon-map-location', value: 'el-icon-map-location' },
  515. { label: 'el-icon-alarm-clock', value: 'el-icon-alarm-clock' },
  516. { label: 'el-icon-timer', value: 'el-icon-timer' },
  517. { label: 'el-icon-watch-1', value: 'el-icon-watch-1' },
  518. { label: 'el-icon-watch', value: 'el-icon-watch' },
  519. { label: 'el-icon-lock', value: 'el-icon-lock' },
  520. { label: 'el-icon-unlock', value: 'el-icon-unlock' },
  521. { label: 'el-icon-key', value: 'el-icon-key' },
  522. { label: 'el-icon-service', value: 'el-icon-service' },
  523. { label: 'el-icon-mobile-phone', value: 'el-icon-mobile-phone' },
  524. { label: 'el-icon-bicycle', value: 'el-icon-bicycle' },
  525. { label: 'el-icon-truck', value: 'el-icon-truck' },
  526. { label: 'el-icon-ship', value: 'el-icon-ship' },
  527. { label: 'el-icon-basketball', value: 'el-icon-basketball' },
  528. { label: 'el-icon-football', value: 'el-icon-football' },
  529. { label: 'el-icon-soccer', value: 'el-icon-soccer' },
  530. { label: 'el-icon-baseball', value: 'el-icon-baseball' },
  531. { label: 'el-icon-wind-power', value: 'el-icon-wind-power' },
  532. { label: 'el-icon-light-rain', value: 'el-icon-light-rain' },
  533. { label: 'el-icon-lightning', value: 'el-icon-lightning' },
  534. { label: 'el-icon-heavy-rain', value: 'el-icon-heavy-rain' },
  535. { label: 'el-icon-sunrise', value: 'el-icon-sunrise' },
  536. { label: 'el-icon-sunrise-1', value: 'el-icon-sunrise-1' },
  537. { label: 'el-icon-sunset', value: 'el-icon-sunset' },
  538. { label: 'el-icon-sunny', value: 'el-icon-sunny' },
  539. { label: 'el-icon-cloudy', value: 'el-icon-cloudy' },
  540. { label: 'el-icon-partly-cloudy', value: 'el-icon-partly-cloudy' },
  541. { label: 'el-icon-cloudy-and-sunny', value: 'el-icon-cloudy-and-sunny' },
  542. { label: 'el-icon-moon', value: 'el-icon-moon' },
  543. { label: 'el-icon-moon-night', value: 'el-icon-moon-night' },
  544. { label: 'el-icon-dish', value: 'el-icon-dish' },
  545. { label: 'el-icon-dish-1', value: 'el-icon-dish-1' },
  546. { label: 'el-icon-food', value: 'el-icon-food' },
  547. { label: 'el-icon-chicken', value: 'el-icon-chicken' },
  548. { label: 'el-icon-fork-spoon', value: 'el-icon-fork-spoon' },
  549. { label: 'el-icon-knife-fork', value: 'el-icon-knife-fork' },
  550. { label: 'el-icon-burger', value: 'el-icon-burger' },
  551. { label: 'el-icon-tableware', value: 'el-icon-tableware' },
  552. { label: 'el-icon-sugar', value: 'el-icon-sugar' },
  553. { label: 'el-icon-dessert', value: 'el-icon-dessert' },
  554. { label: 'el-icon-ice-cream', value: 'el-icon-ice-cream' },
  555. { label: 'el-icon-hot-water', value: 'el-icon-hot-water' },
  556. { label: 'el-icon-water-cup', value: 'el-icon-water-cup' },
  557. { label: 'el-icon-coffee-cup', value: 'el-icon-coffee-cup' },
  558. { label: 'el-icon-cold-drink', value: 'el-icon-cold-drink' },
  559. { label: 'el-icon-goblet', value: 'el-icon-goblet' },
  560. { label: 'el-icon-goblet-full', value: 'el-icon-goblet-full' },
  561. { label: 'el-icon-goblet-square', value: 'el-icon-goblet-square' },
  562. { label: 'el-icon-goblet-square-full', value: 'el-icon-goblet-square-full' },
  563. { label: 'el-icon-refrigerator', value: 'el-icon-refrigerator' },
  564. { label: 'el-icon-grape', value: 'el-icon-grape' },
  565. { label: 'el-icon-watermelon', value: 'el-icon-watermelon' },
  566. { label: 'el-icon-cherry', value: 'el-icon-cherry' },
  567. { label: 'el-icon-apple', value: 'el-icon-apple' },
  568. { label: 'el-icon-pear', value: 'el-icon-pear' },
  569. { label: 'el-icon-orange', value: 'el-icon-orange' },
  570. { label: 'el-icon-coffee', value: 'el-icon-coffee' },
  571. { label: 'el-icon-ice-tea', value: 'el-icon-ice-tea' },
  572. { label: 'el-icon-ice-drink', value: 'el-icon-ice-drink' },
  573. { label: 'el-icon-milk-tea', value: 'el-icon-milk-tea' },
  574. { label: 'el-icon-potato-strips', value: 'el-icon-potato-strips' },
  575. { label: 'el-icon-lollipop', value: 'el-icon-lollipop' },
  576. { label: 'el-icon-ice-cream-square', value: 'el-icon-ice-cream-square' },
  577. { label: 'el-icon-ice-cream-round', value: 'el-icon-ice-cream-round' }
  578. ],
  579. chooseIconType: null,
  580. menuTypeList: [
  581. {
  582. label: 1,
  583. value: '目录'
  584. },
  585. {
  586. label: 2,
  587. value: '页面'
  588. },
  589. {
  590. label: 4,
  591. value: '外链'
  592. }
  593. ]
  594. }
  595. },
  596. computed: {
  597. ...mapGetters(['userid', 'name']),
  598. isAdmin() {
  599. const type = JSON.parse(localStorage.getItem('supply_user')).type
  600. return type === 2
  601. }
  602. },
  603. created() {
  604. this.getList()
  605. },
  606. methods: {
  607. getList() {
  608. this.listLoading = true
  609. getMenuList({
  610. adminUserId: this.userid,
  611. flag: 'menu'
  612. }).then(res => {
  613. this.dataList = res.data
  614. })
  615. },
  616. // 筛选后重新获取列表
  617. getListByScreen() {
  618. this.currentPage = 1
  619. this.getList()
  620. },
  621. // 打开 新增编辑 一级菜单
  622. addOrEditParent(type, cid) {
  623. this.addParentFormType = type
  624. this.addParentFormVisible = true
  625. if (type == 'edit') {
  626. this.editParentId = cid
  627. getMenuDetail({ moduleId: cid }).then(res => {
  628. this.addParentForm = {
  629. oneMenu: res.data.parentId,
  630. twoMenu: res.data.moduleName,
  631. code: res.data.code,
  632. url: res.data.url,
  633. fullUrl: res.data.fullUrl,
  634. icon: res.data.icon,
  635. sort: res.data.sortNum,
  636. parentId: res.data.parentId,
  637. type: res.data.type
  638. }
  639. })
  640. }
  641. },
  642. // 取消 新增编辑 一级菜单
  643. cancelAddParentForm() {
  644. this.addParentFormVisible = false
  645. this.$refs.addParentForm.resetFields()
  646. },
  647. // 提交 一级菜单
  648. submitAddParentForm() {
  649. this.$refs.addParentForm.validate(valid => {
  650. if (valid) {
  651. let parentId = null
  652. if (this.addParentForm.oneMenu instanceof Array) {
  653. parentId = this.addParentForm.oneMenu[this.addParentForm.oneMenu.length - 1] || 0
  654. } else {
  655. parentId = this.addParentForm.oneMenu || 0
  656. }
  657. const params = {
  658. moduleName: this.addParentForm.twoMenu,
  659. code: this.addParentForm.code,
  660. url: this.addParentForm.url,
  661. fullUrl: this.addParentForm.fullUrl,
  662. icon: this.addParentForm.icon,
  663. sortNum: this.addParentForm.sort,
  664. parentId,
  665. type: this.addParentForm.type
  666. }
  667. if (this.addParentFormType == 'edit') {
  668. params.moduleId = this.editParentId
  669. editMenu(params).then(res => {
  670. this.cancelAddParentForm()
  671. this.getList()
  672. this.$successMsg('编辑成功')
  673. })
  674. } else {
  675. // params.type = 2;
  676. addMenu(params).then(res => {
  677. this.cancelAddParentForm()
  678. this.getList()
  679. this.$successMsg('添加成功')
  680. })
  681. }
  682. }
  683. })
  684. },
  685. // 打开 新增编辑 二级菜单
  686. addOrEditChild(type, cid) {
  687. this.addChildFormType = type
  688. this.addChildFormVisible = true
  689. if (type == 'add') {
  690. this.addChildForm.oneMenu = cid
  691. }
  692. if (type == 'edit') {
  693. this.editChildId = cid
  694. getMenuDetail({ moduleId: cid }).then(res => {
  695. this.addChildForm = {
  696. oneMenu: res.data.parentId,
  697. twoMenu: res.data.moduleName,
  698. code: res.data.code,
  699. url: res.data.url,
  700. fullUrl: res.data.fullUrl,
  701. icon: res.data.icon,
  702. sort: res.data.sortNum,
  703. parentId: res.data.parentId,
  704. type: res.data.type
  705. }
  706. })
  707. }
  708. },
  709. // 取消 新增编辑 二级菜单
  710. cancelAddChildForm() {
  711. this.addChildFormVisible = false
  712. this.$refs.addChildForm.resetFields()
  713. },
  714. // 提交 二级菜单
  715. submitAddChildForm() {
  716. this.$refs.addChildForm.validate(valid => {
  717. if (valid) {
  718. let params = {}
  719. let parentId = null
  720. if (this.addChildForm.oneMenu instanceof Array) {
  721. parentId = this.addChildForm.oneMenu[this.addChildForm.oneMenu.length - 1] || 0
  722. } else {
  723. parentId = this.addChildForm.oneMenu || 0
  724. }
  725. if (this.addChildFormType == 'edit') {
  726. params = {
  727. parentId,
  728. moduleId: this.editChildId,
  729. moduleName: this.addChildForm.twoMenu,
  730. code: this.addChildForm.code,
  731. url: this.addChildForm.url,
  732. fullUrl: this.addChildForm.fullUrl,
  733. icon: this.addChildForm.icon,
  734. sortNum: this.addChildForm.sort,
  735. type: this.addChildForm.type
  736. }
  737. editMenu(params).then(res => {
  738. this.cancelAddChildForm()
  739. this.getList()
  740. this.$successMsg('编辑成功')
  741. })
  742. } else {
  743. params = {
  744. parentId,
  745. moduleName: this.addChildForm.twoMenu,
  746. code: this.addChildForm.code,
  747. url: this.addChildForm.url,
  748. fullUrl: this.addChildForm.fullUrl,
  749. icon: this.addChildForm.icon,
  750. sortNum: this.addChildForm.sort,
  751. type: this.addChildForm.type
  752. // type: 2
  753. }
  754. addMenu(params).then(res => {
  755. this.cancelAddChildForm()
  756. this.getList()
  757. this.$successMsg('添加成功')
  758. })
  759. }
  760. }
  761. })
  762. },
  763. // 操作 - 删除
  764. handleDelete(id) {
  765. deleteMenu({ id: id }).then(res => {
  766. this.getList()
  767. this.$successMsg()
  768. })
  769. },
  770. // 去选择图标
  771. toChooseIcon(type) {
  772. this.chooseIconType = type
  773. this.isChooseIconDialog = true
  774. },
  775. // 选择图标
  776. chooseIcon(value) {
  777. if (this.chooseIconType === 1) {
  778. this.addParentForm.icon = value
  779. } else if (this.chooseIconType > 1) {
  780. this.addChildForm.icon = value
  781. }
  782. this.isChooseIconDialog = false
  783. }
  784. }
  785. }
  786. </script>
  787. <style scoped lang="scss">
  788. .iconList {
  789. display: flex;
  790. flex-wrap: wrap;
  791. max-height: 40vh;
  792. overflow-y: scroll;
  793. .item {
  794. width: 40px;
  795. height: 40px;
  796. text-align: center;
  797. line-height: 40px;
  798. cursor: pointer;
  799. i {
  800. font-size: 18px;
  801. }
  802. &:hover {
  803. background: #f5f5f5;
  804. i {
  805. color: #409eff;
  806. }
  807. }
  808. }
  809. }
  810. .iconInput {
  811. display: flex;
  812. .icon {
  813. margin-right: 10px;
  814. border-radius: 4px;
  815. border: 1px solid #dcdfe6;
  816. box-sizing: border-box;
  817. color: #606266;
  818. width: 40px;
  819. height: 40px;
  820. text-align: center;
  821. line-height: 40px;
  822. flex-shrink: 0;
  823. i {
  824. font-size: 18px;
  825. }
  826. }
  827. input {
  828. flex: 1;
  829. }
  830. button {
  831. margin-left: 10px;
  832. }
  833. }
  834. </style>
  835. <style lang="scss">
  836. .el-image-viewer__wrapper .el-icon-circle-close {
  837. color: #ffffff !important;
  838. font-size: 60px;
  839. }
  840. .el-table__row.expanded {
  841. background: #f5f5f5;
  842. }
  843. // th {
  844. // text-align: center !important;
  845. // }
  846. </style>