set.vue 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. <template>
  2. <div class="common-box" style="margin-top: 20px; height: 263px">
  3. <div class="sys-container">
  4. <div
  5. v-for="(item, index) in sysData"
  6. :key="index"
  7. class="sys-item"
  8. @click="openSetPage"
  9. >
  10. <svg-icon
  11. :icon-class="item.icon"
  12. alt=""
  13. class="sys-item-img"
  14. size="60"
  15. />
  16. <h3
  17. v-if="userStore.user.canSetPermission"
  18. class="sys-item-title"
  19. @click="gotoUserPage"
  20. >
  21. {{ item.menuName }}
  22. </h3>
  23. <h3
  24. v-if="userStore.user.canSetIP"
  25. class="sys-item-title"
  26. @click="openDrawer"
  27. >
  28. 配置IP地址
  29. </h3>
  30. </div>
  31. </div>
  32. <el-drawer
  33. v-model="drawerVisible"
  34. :destroy-on-close="true"
  35. title="配置IP地址"
  36. >
  37. <Addresss @finish="saveAddressFinish" />
  38. </el-drawer>
  39. </div>
  40. </template>
  41. <script lang="ts" setup>
  42. import { useUserStore } from "@/store";
  43. import Addresss from "@/views/sets/address.vue";
  44. const userStore = useUserStore();
  45. const sysData = ref<any[]>([{ menuName: "设置权限", icon: "set" }]);
  46. const openSetPage = () => {};
  47. const drawerVisible = ref(false);
  48. const openDrawer = () => {
  49. drawerVisible.value = true;
  50. };
  51. const saveAddressFinish = () => {
  52. drawerVisible.value = false;
  53. };
  54. const router = useRouter();
  55. const gotoUserPage = () => {
  56. router.push("/users");
  57. };
  58. </script>
  59. <style lang="scss" scoped>
  60. .sys-container {
  61. height: 100%;
  62. display: flex;
  63. flex-wrap: wrap;
  64. justify-content: center;
  65. align-items: center;
  66. }
  67. .sys-item {
  68. min-width: 150px;
  69. padding: 10px;
  70. display: flex;
  71. flex-direction: column;
  72. align-items: center;
  73. .sys-item-img {
  74. width: 50px;
  75. }
  76. .sys-item-title {
  77. font-size: 18px;
  78. font-weight: bold;
  79. margin-bottom: 5px;
  80. cursor: pointer;
  81. }
  82. }
  83. //.sys-item:hover {
  84. // background-color: #87cefa;
  85. // cursor: pointer;
  86. //}
  87. </style>