xwl2023/Yi.Framework
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改前端组件、后端添加jwt

Browse Source
This commit is contained in:
橙子
2021-10-14 20:29:07 +08:00
parent 40f34618a2
commit 9ce9d4ed98
17 changed files with 407 additions and 208 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
Yi.Vue/src/components/ccCombobox.vue Normal file
View File

@@ -0,0 +1,68 @@
<template>
<v-dialog v-model="dialog" persistent max-width="600px">
<template v-slot:activator="{ on, attrs }">
<v-btn color="primary" dark v-bind="attrs" v-on="on">
{{ headers }}
</v-btn>
</template>
<v-card>
<v-card-title>
<span class="text-h5">{{ headers }}</span>
</v-card-title>
<v-card-text>
<v-container>
<v-row>
<v-col cols="12">
<v-combobox
v-model="select"
:items="items"
label="请点击选择"
multiple
chips
:item-text="itemText"
></v-combobox>
</v-col>
</v-row>
</v-container>
<small>*可多选</small>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="blue darken-1" text @click="dialog = false"> 关闭 </v-btn>
<v-btn color="blue darken-1" text @click="dialog = false"> 保存 </v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
<script>
export default {
props: {
headers: {
type: String
},
items:{
type:Array
},
itemText:{
type: String
}
},
name: "ccCombobox",
data() {
return {
dialog: false,
select: [],
};
},
watch:{
select:{//深度监听，可监听到对象、数组的变化
handler(val, oldVal){
this.$emit("select",val);
},
deep:true
}
},
};
</script>

2
Yi.Vue/src/components/Table.vue → Yi.Vue/src/components/ccTable.vue
View File

@@ -113,7 +113,7 @@
<script>
import itemApi from "./TableApi.js";
export default {
name: "Tables",
name: "ccTable",
props: {
defaultItem: {
type: Object,

43
Yi.Vue/src/components/ccTreeview.vue Normal file
View File

@@ -0,0 +1,43 @@
<template>
<v-treeview
selectable
:items="items"
:selection-type="selectionType"
v-model="selection"
return-object
open-all
hoverable
item-text="menu_name"
>
<template v-slot:append="{ item }">
<v-btn>{{ item.id }}</v-btn>
<v-btn>设置接口权限</v-btn>
</template>
</v-treeview>
</template>
<script>
export default {
name: "ccTreeview",
props: {
items: {
type: Array,
},
},
data: () => ({
selectionType: "leaf",
selection: [],
}),
watch:{
selection:{//深度监听，可监听到对象、数组的变化
handler(val, oldVal){
this.$emit("selection",val);
},
deep:true
}
},
methods:{
}
};
</script>

21
Yi.Vue/src/layouts/default/Settings.vue
View File

@@ -249,6 +249,27 @@
mixins: [Proxyable],
data: () => ({
image:'https://demos.creative-tim.com/material-dashboard-pro/assets/img/sidebar-1.jpg',
mini: false,
drawer: null,
drawerImage: true,
gradient:
'rgba(228, 226, 226, 1), rgba(255, 255, 255, 0.7)',
images: [
'https://demos.creative-tim.com/material-dashboard-pro/assets/img/sidebar-1.jpg',
'https://demos.creative-tim.com/material-dashboard-pro/assets/img/sidebar-2.jpg',
'https://demos.creative-tim.com/material-dashboard-pro/assets/img/sidebar-3.jpg',
'https://demos.creative-tim.com/material-dashboard-pro/assets/img/sidebar-4.jpg',
],
gradients: [
'rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)',
'rgba(228, 226, 226, 1), rgba(255, 255, 255, 0.7)',
'rgba(244, 67, 54, .8), rgba(244, 67, 54, .8)',
],
dark:null,
color: '#E91E63',
colors: [
'#9C27b0',

59
Yi.Vue/src/views/AdmMenu.vue
View File

@@ -1,34 +1,47 @@
<template>
<v-card class="mx-auto" width="100%">
<v-btn>设置接口权限</v-btn>
<ccTable :defaultItem="defaultItem" :headers="headers" :axiosUrls="axiosUrls" ></ccTable>
<ccTreeview :items="Menuitems"></ccTreeview>
</v-card>
</template>
<script>
import ccTable from "@/components/Table.vue"
export default {
components: {
ccTable
},
data: () => ({
axiosUrls:{
get:"role/getrole",
update:"role/updaterole",
del:"role/delListrole",
add:"role/addrole"
},
headers: [
{text: "编号",align: "start",value: "id"},
{ text: "角色名", value: "role_name", sortable: false },
{ text: "简介", value: "introduce", sortable: false },
{ text: "操作", value: "actions", sortable: false }
Menuitems: [
{
id: 1,
menu_name: "用户角色管理",
children: [
{
id: 2,
menu_name: "用户管理",
children: [
{
id: 4,
menu_name: "添加",
children: [],
},
{
id: 5,
menu_name: "修改",
children: [],
},
{
id: 7,
menu_name: "删除",
children: [],
},
{
id: 8,
menu_name: "查询",
children: [],
},
],
},
{ id: 3, menu_name: "角色管理" },
],
},
],
defaultItem: {
role_name: "test",
introduce: "用于测试",
},
}),
})
};
</script>

4
Yi.Vue/src/views/AdmMould.vue
View File

@@ -5,11 +5,7 @@
</template>
<script>
import ccTable from "@/components/Table.vue"
export default {
components: {
ccTable
},
data: () => ({
axiosUrls:{
get:"role/getrole",

6
Yi.Vue/src/views/AdmRole.vue
View File

@@ -1,18 +1,12 @@
<template>
<v-card class="mx-auto" width="100%">
<ccTable :defaultItem="defaultItem" :headers="headers" :axiosUrls="axiosUrls" >
</ccTable>
</v-card>
</template>
<script>
import ccTable from "@/components/Table.vue"
export default {
components: {
ccTable
},
data: () => ({
axiosUrls:{
get:"role/getrole",

219
Yi.Vue/src/views/AdmRoleMenu.vue
View File

@@ -1,148 +1,87 @@
<template>
<v-card class="mx-auto" width="100%">
<v-row>
<v-col cols="6">
<v-list
flat
subheader
three-line
>
<v-subheader>General</v-subheader>
<v-row>
<v-col cols="12" md="4" lg="4">
<v-card class="mx-auto" width="100%">
<v-treeview
selectable
:items="RoleItems"
v-model="selectionRole"
return-object
open-all
hoverable
item-text="role_name"
>
</v-treeview>
</v-card>
</v-col>
<v-list-item-group
v-model="settings"
multiple
active-class=""
<v-col cols="12" md="8" lg="8">
<v-card class="mx-auto" width="100%">
<v-treeview
selectable
:items="Menuitems"
selection-type="leaf"
v-model="selectionMenu"
return-object
open-all
hoverable
item-text="menu_name"
>
<template v-slot:append="{ item }">
<v-btn>{{ item.id }}</v-btn>
</template>
</v-treeview>
</v-card></v-col
>
<v-list-item>
<template v-slot:default="{ active }">
<v-list-item-action>
<v-checkbox :input-value="active"></v-checkbox>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>Notifications</v-list-item-title>
<v-list-item-subtitle>Notify me about updates to apps or games that I downloaded</v-list-item-subtitle>
</v-list-item-content>
</template>
</v-list-item>
</v-row>
<v-list-item>
<template v-slot:default="{ active }">
<v-list-item-action>
<v-checkbox :input-value="active"></v-checkbox>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>Sound</v-list-item-title>
<v-list-item-subtitle>Auto-update apps at any time. Data charges may apply</v-list-item-subtitle>
</v-list-item-content>
</template>
</v-list-item>
<v-list-item>
<template v-slot:default="{ active }">
<v-list-item-action>
<v-checkbox :input-value="active"></v-checkbox>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>Auto-add widgets</v-list-item-title>
<v-list-item-subtitle>Automatically add home screen widgets when downloads complete</v-list-item-subtitle>
</v-list-item-content>
</template>
</v-list-item>
</v-list-item-group>
</v-list>
</v-col>
<v-col cols="6"> <v-treeview
selectable
:items="items"
></v-treeview></v-col>
</v-row>
</v-card>
</template>
<script>
export default {
data: () => ({
items: [
{
id: 1,
name: 'Applications :',
children: [
{ id: 2, name: 'Calendar : app' },
{ id: 3, name: 'Chrome : app' },
{ id: 4, name: 'Webstorm : app' },
],
},
{
id: 5,
name: 'Documents :',
children: [
{
id: 6,
name: 'vuetify :',
children: [
{
id: 7,
name: 'src :',
children: [
{ id: 8, name: 'index : ts' },
{ id: 9, name: 'bootstrap : ts' },
],
},
],
},
{
id: 10,
name: 'material2 :',
children: [
{
id: 11,
name: 'src :',
children: [
{ id: 12, name: 'v-btn : ts' },
{ id: 13, name: 'v-card : ts' },
{ id: 14, name: 'v-window : ts' },
],
},
],
},
],
},
{
id: 15,
name: 'Downloads :',
children: [
{ id: 16, name: 'October : pdf' },
{ id: 17, name: 'November : pdf' },
{ id: 18, name: 'Tutorial : html' },
],
},
{
id: 19,
name: 'Videos :',
children: [
{
id: 20,
name: 'Tutorials :',
children: [
{ id: 21, name: 'Basic layouts : mp4' },
{ id: 22, name: 'Advanced techniques : mp4' },
{ id: 23, name: 'All about app : dir' },
],
},
{ id: 24, name: 'Intro : mov' },
{ id: 25, name: 'Conference introduction : avi' },
],
},
],
}),
}
export default {
data: () => ({
selectionMenu: [],
selectionRole: [],
RoleItems: [
{ id: 1, role_name: "管理员", sex: "测试" },
{ id: 2, role_name: "超级管理员", sex: "测试" },
],
Menuitems: [
{
id: 1,
menu_name: "用户角色管理",
children: [
{
id: 2,
menu_name: "用户管理",
children: [
{
id: 4,
menu_name: "添加",
children: [],
},
{
id: 5,
menu_name: "修改",
children: [],
},
{
id: 7,
menu_name: "删除",
children: [],
},
{
id: 8,
menu_name: "查询",
children: [],
},
],
},
{ id: 3, menu_name: "角色管理" },
],
},
],
}),
};
</script>

53
Yi.Vue/src/views/AdmUser.vue
View File

@@ -1,41 +1,48 @@
<template>
<v-card class="mx-auto" width="100%">
<v-btn>设置角色</v-btn>
<ccTable :defaultItem="defaultItem" :headers="headers" :axiosUrls="axiosUrls" ></ccTable>
</v-card>
<v-card class="mx-auto" width="100%">
{{select}}
<ccCombobox headers='设置角色' :items="items" @select="getSelect" itemText="role_name"></ccCombobox>
<ccTable
:defaultItem="defaultItem"
:headers="headers"
:axiosUrls="axiosUrls"
></ccTable>
</v-card>
</template>
<script>
import ccTable from "@/components/Table.vue"
export default {
components: {
ccTable
methods:{
getSelect(data){
this.select=data;
}
},
data: () => ({
axiosUrls:{
get:"user/getuser",
update:"user/updateuser",
del:"user/delListuser",
add:"user/adduser"
},
select:[],
items: [{id:1,role_name:"管理员"},{id:1,role_name:"超级管理员"}],
axiosUrls: {
get: "user/getuser",
update: "user/updateuser",
del: "user/delListuser",
add: "user/adduser",
},
headers: [
{text: "编号",align: "start",value: "id"},
{ text: "编号", align: "start", value: "id" },
{ text: "用户名", value: "username", sortable: false },
{ text: "密码", value: "password", sortable: false },
{ text: "图标", value: "icon", sortable: false },
{ text: "昵称", value: "nick", sortable: true },
{ text: "邮箱", value: "email", sortable: true },
{ text: "IP", value: "ip", sortable: false },
{ text: "年龄", value: "age", sortable: false },
{ text: "昵称", value: "nick", sortable: true },
{ text: "邮箱", value: "email", sortable: true },
{ text: "IP", value: "ip", sortable: false },
{ text: "年龄", value: "age", sortable: false },
{ text: "操作", value: "actions", sortable: false },
],
defaultItem: {
defaultItem: {
username: "test",
password: "123",
icon: "mdi-lock",
nick:"橙子",
age:18
}
nick: "橙子",
age: 18,
},
}),
};
</script>

13
Yi.Vue/src/views/Index.vue
View File

@@ -1,3 +1,14 @@
<template>
<div>首页</div>
<div>
<MaterialCard title="首页卡片" subtitle="微软（Microsoft）是一家美国跨国科技企业，由比尔·盖茨和保罗·艾伦于1975年4月4日创立。" heading="头部" color='#E91E63' :fullHeader='false' icon='mdi-view-dashboard'></MaterialCard>
<MaterialCharCard></MaterialCharCard>
<MaterialSnackbar></MaterialSnackbar>
<MaterialStatCard value="微软（Microsoft）是一家美国跨国科技企业，由比尔·盖茨和保罗·艾伦于1975年4月4日创立。">
<template v-slot>
还有什么呢？
</template>
</MaterialStatCard>
</div>
</template>