Home.vue 9.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272
  1. <template>
  2. <div class="home">
  3. <header class="header">
  4. <div class="left">
  5. 产品管理系统
  6. <el-button
  7. @click="onMenuCollapse"
  8. circle
  9. style="font-size: 20px"
  10. :icon="menuCollapse? 'el-icon-s-unfold' : 'el-icon-s-fold'"
  11. ></el-button>
  12. </div>
  13. <div class="right">
  14. <span class="warp">
  15. <el-dropdown @command="onLogOut">
  16. <span class="el-dropdown-link">
  17. 账号管理
  18. <i class="el-icon-arrow-down el-icon--right"></i>
  19. </span>
  20. <el-dropdown-menu slot="dropdown">
  21. <el-dropdown-item>退出登录</el-dropdown-item>
  22. <el-dropdown-item>切换账号</el-dropdown-item>
  23. </el-dropdown-menu>
  24. </el-dropdown>
  25. </span>
  26. <span>
  27. <el-dropdown @command="onLogOut">
  28. <span class="el-dropdown-link">
  29. 权限切换
  30. <i class="el-icon-arrow-down el-icon--right"></i>
  31. </span>
  32. <el-dropdown-menu slot="dropdown">
  33. <el-dropdown-item disabled>权限一</el-dropdown-item>
  34. <el-dropdown-item divided>权限二</el-dropdown-item>
  35. </el-dropdown-menu>
  36. </el-dropdown>
  37. </span>
  38. </div>
  39. </header>
  40. <section class="section">
  41. <div class="tac">
  42. <div class="col1">
  43. <el-menu
  44. default-active="2"
  45. class="el-menu-vertical-demo"
  46. @open="handleOpen"
  47. @close="handleClose"
  48. :collapse="menuCollapse"
  49. :unique-opened="true"
  50. :default-openeds="defaultUnfoldedMenu"
  51. select="1-1"
  52. background-color="#545c64"
  53. text-color="#fff"
  54. active-text-color="#ffd04b"
  55. >
  56. <div v-for="(item) in menuData " :key="item.index">
  57. <el-submenu
  58. v-if="item.childList && item.childList.length > 0"
  59. :index="item.index"
  60. >
  61. <template slot="title">
  62. <i :class="item.iconClassName"></i>
  63. <span slot="title">{{ !menuCollapse? item.optionName : '' }}</span>
  64. <!-- <span slot="title">{{ item.oneMenuName }}</span> -->
  65. </template>
  66. <el-menu-item
  67. v-for="(item1) in item.childList"
  68. :key="item1.index"
  69. :index="item1.index"
  70. :routerName="item1.routerName"
  71. @click="onClickMenu(item1)"
  72. >{{ item1.optionName }}</el-menu-item>
  73. </el-submenu>
  74. <el-menu-item
  75. v-else
  76. :index="item.index"
  77. :disabled="item.disabled"
  78. :routerName="item.routerName"
  79. @click="onClickMenu(item)"
  80. >
  81. <i :class="item.iconClassName"></i>
  82. <span slot="title">{{ !menuCollapse? item.optionName : '' }}</span>
  83. </el-menu-item>
  84. </div>
  85. </el-menu>
  86. </div>
  87. <div class="col2">
  88. <div class="warp">
  89. <router-view />
  90. </div>
  91. </div>
  92. </div>
  93. </section>
  94. </div>
  95. </template>
  96. <script>
  97. import { menuData } from "./mencCofig.js";
  98. export default {
  99. data() {
  100. return {
  101. // 菜单配置
  102. menuData,
  103. menuCollapse: false, //是否水平折叠收起菜单
  104. defaultUnfoldedMenu: [menuData[0].index] // 默认展开第一项
  105. };
  106. },
  107. created() {
  108. // 获取屠宰批次 给后面下拉选择器使用
  109. this.$store.dispatch("getSlaughterBatchIdList");
  110. this.defaultUnfoldedMenu = [
  111. localStorage.getItem("defaultUnfoldedMenu")
  112. ];
  113. this.menuCollapse = JSON.parse(localStorage.getItem("menuCollapse"));
  114. /* 筛选菜单 */
  115. var target = this.$route.query.target;
  116. if (target) {
  117. localStorage.setItem("target", target);
  118. } else {
  119. target = localStorage.getItem("target");
  120. }
  121. this.filterMenu(target);
  122. },
  123. watch: {
  124. "$route.query.target"(v) {
  125. if (v) {
  126. localStorage.setItem("target", v);
  127. this.filterMenu(v);
  128. }
  129. }
  130. },
  131. methods: {
  132. /*
  133. http://hzsheep.ifarmcloud.com/butcher/#/home?target=定点屠宰智能管控
  134. http://hzsheep.ifarmcloud.com/butcher/#/home?target=产品制作智能监控
  135. http://hzsheep.ifarmcloud.com/butcher/#/home?target=鲜肉储运智能管控
  136. http://hzsheep.ifarmcloud.com/yield
  137. */
  138. /* 筛选菜单 */
  139. /*
  140. http://localhost:8080/#/home?target=定点屠宰智能管控
  141. http://localhost:8080/#/home?target=产品制作智能监控
  142. http://localhost:8080/#/home?target=鲜肉储运智能管控
  143. */
  144. filterMenu(target) {
  145. console.log(target);
  146. let path;
  147. switch (target) {
  148. case "定点屠宰智能管控":
  149. var func = item => item.index == 1 || item.index == 2;
  150. path = "firmBuy";
  151. break;
  152. case "产品制作智能监控":
  153. var func = item => item.index == 3;
  154. path = "productInfo";
  155. break;
  156. case "鲜肉储运智能管控":
  157. var func = item => item.index == 4;
  158. path = "dispatching";
  159. break;
  160. }
  161. this.menuData = menuData.filter(func);
  162. if (path && path != this.$route.name) {
  163. this.$router.push({ name: path });
  164. }
  165. },
  166. // 收取菜单按钮
  167. onMenuCollapse() {
  168. this.menuCollapse = !this.menuCollapse;
  169. localStorage.setItem("menuCollapse", this.menuCollapse);
  170. this.defaultUnfoldedMenu = [
  171. localStorage.getItem("defaultUnfoldedMenu")
  172. ];
  173. },
  174. // 菜单展开
  175. handleOpen(key, keyPath) {
  176. localStorage.setItem("defaultUnfoldedMenu", "" + key);
  177. },
  178. // 菜单收取
  179. handleClose(key, keyPath) {},
  180. // 点击菜单项
  181. onClickMenu(item) {
  182. // 如果要跳转的路由和当前路由一致就 return
  183. if (this.$router.history.current.name == item.routerName) return;
  184. this.$router.push({
  185. name: item.routerName
  186. });
  187. },
  188. onLogOut() {
  189. this.$router.replace("login");
  190. }
  191. }
  192. };
  193. </script>
  194. <style lang="scss" scoped>
  195. .home {
  196. height: 100%;
  197. overflow: hidden;
  198. box-sizing: border-box;
  199. background-color: #eee;
  200. display: flex;
  201. flex-direction: column;
  202. > .header {
  203. background-color: #4b545e;
  204. height: 40px;
  205. padding: 10px 20px;
  206. margin-bottom: 5px;
  207. display: flex;
  208. justify-content: space-between;
  209. align-items: center;
  210. .left {
  211. font-size: 25px;
  212. color: #fff;
  213. /deep/ .is-circle {
  214. margin-left: 40px;
  215. }
  216. }
  217. .right {
  218. .warp {
  219. margin-right: 20px;
  220. }
  221. }
  222. }
  223. .section {
  224. flex: 1;
  225. box-sizing: border-box;
  226. overflow: auto;
  227. .tac {
  228. flex: 1;
  229. display: flex;
  230. height: 96%;
  231. box-sizing: border-box;
  232. .col1 {
  233. margin-right: 5px;
  234. background-color: #545c64;
  235. // background-image: linear-gradient(to bottom, rgb(85, 70, 148) , rgb(41, 33, 85), rgb(41, 33, 85));
  236. }
  237. .col2 {
  238. flex: 1;
  239. background-color: #fff;
  240. padding: 0 15px 15px 15px;
  241. border-radius: 5px;
  242. margin-right: 5px;
  243. height: 100%;
  244. overflow: auto;
  245. .warp {
  246. margin: 15px;
  247. }
  248. }
  249. }
  250. }
  251. // border: 1px solid #f00;
  252. }
  253. .el-menu-vertical-demo:not(.el-menu--collapse) {
  254. width: 200px;
  255. min-height: 400px;
  256. }
  257. // 下拉菜单
  258. .el-dropdown-link {
  259. cursor: pointer;
  260. color: #fff;
  261. }
  262. .el-icon-arrow-down {
  263. font-size: 12px;
  264. }
  265. </style>