1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798 |
- <template>
- <div class="common-box" style="margin-top: 20px; height: 263px">
- <div class="sys-container">
- <div
- v-for="(item, index) in sysData"
- :key="index"
- class="sys-item"
- @click="openSetPage"
- >
- <svg-icon
- :icon-class="item.icon"
- alt=""
- class="sys-item-img"
- size="60"
- />
- <h3
- v-if="userStore.user.canSetPermission"
- class="sys-item-title"
- @click="gotoUserPage"
- >
- {{ item.menuName }}
- </h3>
- <h3
- v-if="userStore.user.canSetIP"
- class="sys-item-title"
- @click="openDrawer"
- >
- 配置IP地址
- </h3>
- </div>
- </div>
- <el-drawer
- v-model="drawerVisible"
- :destroy-on-close="true"
- title="配置IP地址"
- >
- <Addresss @finish="saveAddressFinish" />
- </el-drawer>
- </div>
- </template>
- <script lang="ts" setup>
- import { useUserStore } from "@/store";
- import Addresss from "@/views/sets/address.vue";
- const userStore = useUserStore();
- const sysData = ref<any[]>([{ menuName: "设置权限", icon: "set" }]);
- const openSetPage = () => {};
- const drawerVisible = ref(false);
- const openDrawer = () => {
- drawerVisible.value = true;
- };
- const saveAddressFinish = () => {
- drawerVisible.value = false;
- };
- const router = useRouter();
- const gotoUserPage = () => {
- router.push("/users");
- };
- </script>
- <style lang="scss" scoped>
- .sys-container {
- height: 100%;
- display: flex;
- flex-wrap: wrap;
- justify-content: center;
- align-items: center;
- }
- .sys-item {
- min-width: 150px;
- padding: 10px;
- display: flex;
- flex-direction: column;
- align-items: center;
- .sys-item-img {
- width: 50px;
- }
- .sys-item-title {
- font-size: 18px;
- font-weight: bold;
- margin-bottom: 5px;
- cursor: pointer;
- }
- }
- //.sys-item:hover {
- // background-color: #87cefa;
- // cursor: pointer;
- //}
- </style>
|