xiaoxian521
3 years ago
12 changed files with 423 additions and 44 deletions
-
33mock/asyncRoutes.ts
-
5package.json
-
0src/api/routes.ts
-
3src/main.ts
-
61src/plugins/i18n/config.ts
-
119src/plugins/vxe-table/index.ts
-
6src/router/index.ts
-
25src/views/permission/button/index.vue
-
33src/views/permission/page/index.vue
-
16vite.config.ts
-
156yarn.lock
@ -0,0 +1,119 @@ |
|||
import "xe-utils"; |
|||
import { App } from "vue"; |
|||
import { i18n } from "../i18n/index"; |
|||
import "font-awesome/css/font-awesome.css"; |
|||
import { |
|||
// 核心
|
|||
VXETable, |
|||
|
|||
// 表格功能
|
|||
Header, |
|||
Footer, |
|||
Icon, |
|||
Filter, |
|||
Edit, |
|||
Menu, |
|||
Export, |
|||
Keyboard, |
|||
Validator, |
|||
|
|||
// 可选组件
|
|||
Column, |
|||
Colgroup, |
|||
Grid, |
|||
Tooltip, |
|||
Toolbar, |
|||
Pager, |
|||
Form, |
|||
FormItem, |
|||
FormGather, |
|||
Checkbox, |
|||
CheckboxGroup, |
|||
Radio, |
|||
RadioGroup, |
|||
RadioButton, |
|||
Switch, |
|||
Input, |
|||
Select, |
|||
Optgroup, |
|||
Option, |
|||
Textarea, |
|||
Button, |
|||
Modal, |
|||
List, |
|||
Pulldown, |
|||
|
|||
// 表格
|
|||
Table |
|||
} from "vxe-table"; |
|||
|
|||
// 全局默认参数
|
|||
VXETable.setup({ |
|||
size: "medium", |
|||
version: 0, |
|||
zIndex: 100, |
|||
table: { |
|||
// 自动监听父元素的变化去重新计算表格
|
|||
autoResize: true, |
|||
// 鼠标移到行是否要高亮显示
|
|||
highlightHoverRow: true |
|||
}, |
|||
input: { |
|||
clearable: true |
|||
}, |
|||
// 对组件内置的提示语进行国际化翻译
|
|||
// @ts-ignore
|
|||
i18n: (key, args) => i18n.global.t(key, args), |
|||
// 可选，对参数中的列头、校验提示..等进行自动翻译（只对支持国际化的有效）
|
|||
translate(key, args) { |
|||
// 例如，只翻译 "message." 开头的键值
|
|||
if (key && key.indexOf("message.") > -1) { |
|||
return i18n.global.t(key, args); |
|||
} |
|||
if (key && key.indexOf("el.") > -1) { |
|||
return i18n.global.t(key, args); |
|||
} |
|||
return key; |
|||
} |
|||
}); |
|||
|
|||
export function useTable(app: App) { |
|||
app |
|||
.use(Header) |
|||
.use(Footer) |
|||
.use(Icon) |
|||
.use(Filter) |
|||
.use(Edit) |
|||
.use(Menu) |
|||
.use(Export) |
|||
.use(Keyboard) |
|||
.use(Validator) |
|||
|
|||
// 可选组件
|
|||
.use(Column) |
|||
.use(Colgroup) |
|||
.use(Grid) |
|||
.use(Tooltip) |
|||
.use(Toolbar) |
|||
.use(Pager) |
|||
.use(Form) |
|||
.use(FormItem) |
|||
.use(FormGather) |
|||
.use(Checkbox) |
|||
.use(CheckboxGroup) |
|||
.use(Radio) |
|||
.use(RadioGroup) |
|||
.use(RadioButton) |
|||
.use(Switch) |
|||
.use(Input) |
|||
.use(Select) |
|||
.use(Optgroup) |
|||
.use(Option) |
|||
.use(Textarea) |
|||
.use(Button) |
|||
.use(Modal) |
|||
.use(List) |
|||
.use(Pulldown) |
|||
// 安装表格
|
|||
.use(Table); |
|||
} |
|||
@ -0,0 +1,25 @@ |
|||
<script setup lang="ts"> |
|||
import { ref } from "vue"; |
|||
import { storageSession } from "/@/utils/storage"; |
|||
|
|||
const auth = ref<boolean>(storageSession.getItem("info").username || "admin"); |
|||
|
|||
function changRole(value) { |
|||
storageSession.setItem("info", { |
|||
username: value, |
|||
accessToken: `eyJhbGciOiJIUzUxMiJ9.${value}` |
|||
}); |
|||
window.location.reload(); |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<div class="app-container"> |
|||
<el-radio-group v-model="auth" @change="changRole"> |
|||
<el-radio-button label="admin"></el-radio-button> |
|||
<el-radio-button label="test"></el-radio-button> |
|||
</el-radio-group> |
|||
<p v-auth="'v-admin'">只有admin可看</p> |
|||
<p v-auth="'v-test'">只有test可看</p> |
|||
</div> |
|||
</template> |
|||
@ -0,0 +1,33 @@ |
|||
<script setup lang="ts"> |
|||
import { ref, unref } from "vue"; |
|||
import { storageSession } from "/@/utils/storage"; |
|||
let purview = ref<string>(storageSession.getItem("info").username); |
|||
function changRole() { |
|||
if (unref(purview) === "admin") { |
|||
storageSession.setItem("info", { |
|||
username: "test", |
|||
accessToken: "eyJhbGciOiJIUzUxMiJ9.test" |
|||
}); |
|||
window.location.reload(); |
|||
} else { |
|||
storageSession.setItem("info", { |
|||
username: "admin", |
|||
accessToken: "eyJhbGciOiJIUzUxMiJ9.admin" |
|||
}); |
|||
window.location.reload(); |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<div class="app-container"> |
|||
<h4> |
|||
当前角色： |
|||
<span style="font-size: 26px">{{ purview }}</span> |
|||
<p style="color: #ffa500"> |
|||
查看左侧菜单变化(系统管理)，模拟后台根据不同角色返回对应路由 |
|||
</p> |
|||
</h4> |
|||
<el-button type="primary" @click="changRole">切换角色</el-button> |
|||
</div> |
|||
</template> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue