index.vue 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250
  1. <template>
  2. <div id="detail">
  3. <el-row>
  4. <el-col :span="24" class="style">
  5. <el-col :span="24" class="top">
  6. <top></top>
  7. </el-col>
  8. <el-col :span="24" class="main">
  9. <div class="w_1200">
  10. <el-col :span="5" class="left">
  11. <el-col :span="24" class="top">
  12. <i class="el-icon-s-unfold"></i>
  13. <span>个人中心</span>
  14. </el-col>
  15. <el-col :span="24" class="menus">
  16. <!-- <el-col class="menuList" :span="24" v-for="(item, index) in menuList" :key="index">
  17. <p @click="changeMenu(item.name, index)" :style="`color:${menuIndex == index ? menuColor : ''}`">
  18. {{ item.name }}
  19. </p>
  20. </el-col> -->
  21. <el-menu :default-active="num" @select="selectMenu" text-color="black" active-text-color="#044b79">
  22. <el-menu-item index="1">
  23. <template slot="title">
  24. <span>基本信息</span>
  25. </template>
  26. </el-menu-item>
  27. <el-menu-item index="2">
  28. <template slot="title">
  29. <span>需求管理</span>
  30. </template>
  31. </el-menu-item>
  32. <el-menu-item index="3" v-if="user.type === '0' || user.type === '1'">
  33. <template slot="title">
  34. <span>信息管理</span>
  35. </template>
  36. </el-menu-item>
  37. <el-menu-item index="4" v-if="user.type === '0'">
  38. <template slot="title">
  39. <span>人员管理</span>
  40. </template>
  41. </el-menu-item>
  42. <el-menu-item index="5" v-if="user.type === '0'">
  43. <template slot="title">
  44. <span>部门管理</span>
  45. </template>
  46. </el-menu-item>
  47. <el-menu-item index="6" v-if="user.type === '0'">
  48. <template slot="title">
  49. <span>职务管理</span>
  50. </template>
  51. </el-menu-item>
  52. <el-menu-item index="7">
  53. <template slot="title">
  54. <span>修改密码</span>
  55. </template>
  56. </el-menu-item>
  57. <el-menu-item index="8">
  58. <template slot="title">
  59. <span @click="logoutBtn()">退出登录</span>
  60. </template>
  61. </el-menu-item>
  62. </el-menu>
  63. </el-col>
  64. </el-col>
  65. <el-col :span="18" class="right">
  66. <span v-if="columnName == '基本信息'">
  67. <el-col :span="24" class="infoTop"> <span>|</span><span>基本信息</span> </el-col>
  68. <pinfo></pinfo>
  69. </span>
  70. <span v-else-if="columnName == '需求管理'">
  71. <el-col :span="24" class="infoTop"> <span>|</span><span>需求管理</span> </el-col>
  72. <demand></demand>
  73. </span>
  74. <span v-else-if="columnName == '信息管理'">
  75. <el-col :span="24" class="infoTop" style="margin-bottom:0;"> <span>|</span><span>信息管理</span> </el-col>
  76. <el-col :span="24">
  77. <infoAdmin></infoAdmin>
  78. </el-col>
  79. </span>
  80. <span v-else-if="columnName == '人员管理'">
  81. <el-col :span="24" class="infoTop"> <span>|</span><span>人员管理</span> </el-col>
  82. </span>
  83. <span v-else-if="columnName == '部门管理'">
  84. <el-col :span="24" class="infoTop"> <span>|</span><span>部门管理</span> </el-col>
  85. <department></department>
  86. </span>
  87. <span v-else-if="columnName == '职务管理'">
  88. <el-col :span="24" class="infoTop"> <span>|</span><span>职务管理</span> </el-col>
  89. <level></level>
  90. </span>
  91. <span v-else-if="columnName == '修改密码'">
  92. <el-col :span="24" class="infoTop"> <span>|</span><span>修改密码</span> </el-col>
  93. <uppasswd></uppasswd>
  94. </span>
  95. </el-col>
  96. </div>
  97. </el-col>
  98. <el-col :span="24" class="foot">
  99. <div class="w_1200">
  100. <foot></foot>
  101. </div>
  102. </el-col>
  103. </el-col>
  104. </el-row>
  105. </div>
  106. </template>
  107. <script>
  108. import top from '@/layout/common/top.vue';
  109. import foot from '@/layout/common/foot.vue';
  110. import infoAdmin from './parts/infoAdmin.vue';
  111. import demand from '@/views/pcenter/demand.vue';
  112. import pinfo from '@/views/pcenter/pinfo.vue';
  113. import uppasswd from '@/views/pcenter/uppasswd.vue';
  114. import department from '@/views/pcenter/department.vue';
  115. import level from '@/views/pcenter/level.vue';
  116. import { mapState, createNamespacedHelpers } from 'vuex';
  117. const { mapActions: login } = createNamespacedHelpers('login');
  118. export default {
  119. name: 'detail',
  120. props: {},
  121. components: {
  122. top,
  123. foot,
  124. infoAdmin, //信息管理
  125. pinfo,
  126. uppasswd,
  127. demand,
  128. department,
  129. level,
  130. },
  131. data: function() {
  132. return {
  133. columnName: '基本信息',
  134. num: '1',
  135. };
  136. },
  137. created() {
  138. this.selectMenu();
  139. },
  140. methods: {
  141. ...login({ logout: 'logout' }),
  142. // 选择栏目
  143. selectMenu(key) {
  144. if (key == 1) {
  145. this.columnName = '基本信息';
  146. } else if (key == 2) {
  147. this.columnName = '需求管理';
  148. } else if (key == 3) {
  149. this.columnName = '信息管理';
  150. } else if (key == 4) {
  151. this.columnName = '人员管理';
  152. } else if (key == 5) {
  153. this.columnName = '部门管理';
  154. } else if (key == 6) {
  155. this.columnName = '职务管理';
  156. } else if (key == 7) {
  157. this.columnName = '修改密码';
  158. } else if (key == 8) {
  159. this.columnName = '退出登录';
  160. }
  161. },
  162. // 点击选择菜单
  163. changeMenu(name, index) {
  164. this.menuIndex = index;
  165. this.columnName = name;
  166. this.menuColor = 'rgb(5,73,130)';
  167. },
  168. // 退出登录
  169. logoutBtn() {
  170. this.logout();
  171. this.$router.push({ path: '/' });
  172. },
  173. },
  174. computed: {
  175. ...mapState(['user']),
  176. pageTitle() {
  177. return `${this.$route.meta.title}`;
  178. },
  179. },
  180. metaInfo() {
  181. return { title: this.$route.meta.title };
  182. },
  183. };
  184. </script>
  185. <style lang="less" scoped>
  186. .w_1200 {
  187. width: 1200px;
  188. margin: 0 auto;
  189. }
  190. .style {
  191. .menu {
  192. height: 70px;
  193. margin: 0 0 10px 0;
  194. }
  195. .main {
  196. min-height: 600px;
  197. margin: 0 0 10px 0;
  198. .left {
  199. min-height: 600px;
  200. background: #fff;
  201. margin: 0 10px 0 0;
  202. .top {
  203. height: 60px;
  204. line-height: 60px;
  205. background-color: #054982;
  206. color: #fff;
  207. font-size: 25px;
  208. font-weight: 600;
  209. letter-spacing: 2px;
  210. text-align: center;
  211. }
  212. /deep/.el-menu-item {
  213. height: 50px;
  214. line-height: 50px;
  215. text-align: center;
  216. border-bottom: 1px solid #ccc;
  217. span {
  218. font-size: 20px;
  219. font-weight: bold;
  220. }
  221. }
  222. }
  223. .right {
  224. width: 78%;
  225. min-height: 600px;
  226. background: #fff;
  227. }
  228. }
  229. .foot {
  230. height: 135px;
  231. }
  232. }
  233. .infoTop {
  234. height: 50px;
  235. border-bottom: 1px dashed #ccc;
  236. margin: 0 auto;
  237. margin-bottom: 20px;
  238. float: none;
  239. width: 98%;
  240. padding: 20px 0 5px 0;
  241. }
  242. .infoTop span {
  243. font-size: 20px;
  244. color: #005293;
  245. font-weight: bold;
  246. margin-right: 10px;
  247. }
  248. </style>