mirrors/pig-ui
1
0
Fork 0
mirror of https://gitee.com/log4j/pig-ui.git synced 2024-12-23 13:43:51 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

'admin-21.02.27:新增菜单管理、添加颜色全局样式'

Browse Source
This commit is contained in:
lyt-Top 2021-02-27 00:32:39 +08:00
parent 37dc8accb8
commit 1cc3490440
2 changed files with 94 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/theme/app.scss
View File

@ -191,6 +191,24 @@ body,
min-height: 100vh !important; min-height: 100vh !important;
} }
/* 颜色值
------------------------------- */
.color-primary {
color: var(--color-primary);
}
.color-success {
color: var(--color-success);
}
.color-warning {
color: var(--color-warning);
}
.color-danger {
color: var(--color-danger);
}
.color-info {
color: var(--color-info);
}
/* 字体大小全局样式 /* 字体大小全局样式
------------------------------- */ ------------------------------- */
@for $i from 10 through 32 { @for $i from 10 through 32 {

82
src/views/system/menu/index.vue
View File

@ -1,19 +1,89 @@
<template> <template>
<div> <div class="system-menu-container">
systemMenu <el-card shadow="hover">
<el-input v-model="val"></el-input> <el-table :data="menuTableData" stripe style="width: 100%" row-key="path"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}">
<el-table-column label="菜单" show-overflow-tooltip>
<template #default="scope">
<i :class="scope.row.meta.icon"></i>
<span class="ml10">{{ scope.row.meta.title }}</span>
</template>
</el-table-column>
<el-table-column prop="path" label="路由" show-overflow-tooltip width="150"></el-table-column>
<el-table-column prop="component" label="组件" show-overflow-tooltip></el-table-column>
<el-table-column label="外链" show-overflow-tooltip width="70">
<template #default="scope">
<span v-if="scope.row.meta.isLink && !scope.row.meta.isIframe" class="color-primary">是</span>
<span v-else class="color-info">否</span>
</template>
</el-table-column>
<el-table-column label="隐藏" show-overflow-tooltip width="70">
<template #default="scope">
<span v-if="scope.row.meta.isHide" class="color-primary">是</span>
<span v-else class="color-info">否</span>
</template>
</el-table-column>
<el-table-column label="缓存" show-overflow-tooltip width="70">
<template #default="scope">
<span v-if="scope.row.meta.isKeepAlive" class="color-primary">是</span>
<span v-else class="color-info">否</span>
</template>
</el-table-column>
<el-table-column label="固定" show-overflow-tooltip width="70">
<template #default="scope">
<span v-if="scope.row.meta.isAffix" class="color-primary">是</span>
<span v-else class="color-info">否</span>
</template>
</el-table-column>
<el-table-column label="iframe" show-overflow-tooltip width="70">
<template #default="scope">
<span v-if="scope.row.meta.isLink && scope.row.meta.isIframe" class="color-primary">是</span>
<span v-else class="color-info">否</span>
</template>
</el-table-column>
<el-table-column label="权限" show-overflow-tooltip>
<template #default="scope">
<span>{{ scope.row.meta.auth }}</span>
</template>
</el-table-column>
<el-table-column label="操作" show-overflow-tooltip width="125">
<template #default="scope">
<el-button size="mini" type="text">新增</el-button>
<el-button size="mini" type="text">修改</el-button>
<el-button size="mini" type="text" @click="onTabelRowDel(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-card>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { toRefs, reactive } from "vue"; import { toRefs, reactive, computed } from "vue";
import { ElMessageBox } from "element-plus";
import { useStore } from "/@/store/index.ts";
export default { export default {
name: "systemMenu", name: "systemMenu",
setup() { setup() {
const state = reactive({ const store = useStore();
val: "", const state = reactive({});
// 获取 vuex 中的路由
const menuTableData = computed(() => {
return store.state.routes;
}); });
// 删除当前行
const onTabelRowDel = (row) => {
ElMessageBox.confirm("此操作将永久删除路由, 是否继续?", "提示", {
confirmButtonText: "删除",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {})
.catch(() => {});
};
return { return {
menuTableData,
onTabelRowDel,
...toRefs(state), ...toRefs(state),
}; };
}, },