前端对接接口

Yi.Vue/src/layouts/default/Drawer.vue

@@ -65,20 +65,18 @@
   // import { get, sync } from 'vuex-pathify'
 
   export default {
+
+
     data:()=>({
-        gradient: [
+      image:'https://demos.creative-tim.com/material-dashboard-pro/assets/img/sidebar-1.jpg',
-    '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)',
-  ],
-        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',
-  ],
-      dark:null,
       mini: false,
+      drawer: null,
+       drawerImage: true,
+        gradient: 
+    'rgba(228, 226, 226, 1), rgba(255, 255, 255, 0.7)',
+
+      dark:null,
+     
       items: [
       {
         title: "首页",
@@ -86,34 +84,46 @@
         to: "/"
       },
       {
-        title: "用户管理",
+        title: "用户角色管理",
         icon: "mdi-account",
-        to: "/admuser/",
+        to: "",
+        children:[{
+          title:"用户管理",
+          icon:"mdi-account",
+          to:"/admuser/",
+          children:[]
+        },
+        {
+          title:"角色管理",
+          icon:"mdi-account",
+          to:"/admrole/",
+          children:[]
+        }
+        ]
       },
       {
-        title: "角色管理",
+        title: "菜单接口管理",
         icon: "mdi-clipboard-outline",
-        to: "/admrole/",
+        to: "",
-      },
+        children:[{
-      {
+          title:"菜单管理",
-        title: "Typography",
+          icon:"mdi-account",
-        icon: "mdi-format-font",
+          to:"/admMenu/",
-        to: "/components/typography/",
+          children:[]
-      },
+        },
-      {
+        {
-        title: "Icons",
+          title:"接口管理",
-        icon: "mdi-chart-bubble",
+          icon:"mdi-account",
-        to: "/components/icons/",
+          to:"/admMould/",
-      },
+          children:[]
-      {
+        },
-        title: "Google Maps",
+                {
-        icon: "mdi-map-marker",
+          title:"角色菜单分配管理",
-        to: "/maps/google/",
+          icon:"mdi-account",
-      },
+          to:"/admrole/",
-      {
+          children:[]
-        title: "Notifications",
+        },
-        icon: "mdi-bell",
+        ]
-        to: "/components/notifications/",
       },
     ],
     }),

Yi.Vue/src/layouts/default/Index.vue

@@ -8,7 +8,7 @@
 
     <default-footer />
 
-    <!-- <default-settings /> -->
+    <default-settings />
   </v-app>
 </template>
 
@@ -29,10 +29,10 @@
         /* webpackChunkName: "default-footer" */
         './Footer'
       ),
-      // DefaultSettings: () => import(
+      DefaultSettings: () => import(
-      //   /* webpackChunkName: "default-settings" */
+        /* webpackChunkName: "default-settings" */
-      //   './Settings'
+        './Settings'
-      // ),
+      ),
       DefaultView: () => import(
         /* webpackChunkName: "default-view" */
         './View'

Yi.Vue/src/layouts/default/List.vue

@@ -7,7 +7,7 @@
   >
     <template v-for="(item, i) in items">
       <default-list-group
-        v-if="item.items"
+        v-if="item.children"
         :key="`group-${i}`"
         :item="item"
       />

Yi.Vue/src/layouts/default/ListGroup.vue

@@ -24,7 +24,7 @@
       </v-list-item-content>
     </template>
 
-    <template v-for="(child, i) in item.items">
+    <template v-for="(child, i) in item.children">
       <default-list-group
         v-if="child.items"
         :key="`sub-group-${i}`"

Yi.Vue/src/layouts/default/Settings.vue

@@ -0,0 +1,301 @@
+<template>
+  <div id="settings-wrapper">
+    <v-card
+      id="settings"
+      class="py-2 px-4"
+      color="rgba(0, 0, 0, .3)"
+      dark
+      flat
+      link
+      min-width="100"
+      style="position: fixed; top: 115px; right: -35px; border-radius: 8px; z-index: 1;"
+    >
+      <v-icon large>
+        mdi-cog
+      </v-icon>
+    </v-card>
+
+    <v-menu
+      v-model="menu"
+      :close-on-content-click="false"
+      activator="#settings"
+      bottom
+      content-class="v-settings"
+      left
+      nudge-left="8"
+      offset-x
+      origin="top right"
+      transition="scale-transition"
+    >
+      <v-card
+        class="text-center mb-0"
+        width="300"
+      >
+        <v-card-text>
+          <strong class="mb-3 d-inline-block">SIDEBAR FILTERS</strong>
+
+          <v-item-group
+            v-model="color"
+            mandatory
+          >
+            <v-item
+              v-for="color in colors"
+              :key="color"
+              :value="color"
+            >
+              <template v-slot="{ active, toggle }">
+                <v-avatar
+                  :class="active && 'v-settings__item--active'"
+                  :color="color"
+                  class="v-settings__item mx-1"
+                  size="25"
+                  @click="toggle"
+                />
+              </template>
+            </v-item>
+          </v-item-group>
+
+          <v-divider class="my-4 secondary" />
+
+          <strong class="mb-3 d-inline-block">SIDEBAR BACKGROUND</strong>
+
+          <v-item-group
+            v-model="gradient"
+            mandatory
+          >
+            <v-item
+              v-for="(scrim, index) in gradients"
+              :key="scrim"
+              :value="index"
+              class="mx-1"
+            >
+              <template v-slot="{ active, toggle }">
+                <v-avatar
+                  :class="active && 'v-settings__item--active'"
+                  :color="scrim"
+                  class="v-settings__item"
+                  size="24"
+                  @click="toggle"
+                />
+              </template>
+            </v-item>
+          </v-item-group>
+
+          <v-divider class="my-4 secondary" />
+
+          <v-row
+            align="center"
+            no-gutters
+          >
+            <v-col cols="auto">
+              Dark Mode
+            </v-col>
+
+            <v-spacer />
+
+            <v-col cols="auto">
+              <v-switch
+                v-model="$vuetify.theme.dark"
+                class="ma-0 pa-0"
+                color="secondary"
+                hide-details
+              />
+            </v-col>
+          </v-row>
+
+          <v-divider class="my-4 secondary" />
+
+          <v-row
+            align="center"
+            no-gutters
+          >
+            <v-col cols="auto">
+              Sidebar Mini
+            </v-col>
+
+            <v-spacer />
+
+            <v-col cols="auto">
+              <v-switch
+                v-model="mini"
+                class="ma-0 pa-0"
+                color="secondary"
+                hide-details
+              />
+            </v-col>
+          </v-row>
+
+          <v-divider class="my-4 secondary" />
+
+          <v-row
+            align="center"
+            no-gutters
+          >
+            <v-col cols="auto">
+              Sidebar Image
+            </v-col>
+
+            <v-spacer />
+
+            <v-col cols="auto">
+              <v-switch
+                v-model="drawerImage"
+                class="ma-0 pa-0"
+                color="secondary"
+                hide-details
+              />
+            </v-col>
+          </v-row>
+
+          <v-divider class="my-4 secondary" />
+
+          <strong class="mb-3 d-inline-block">IMAGES</strong>
+
+          <v-card
+            :disabled="!drawerImage"
+            flat
+          >
+            <v-item-group
+              v-model="image"
+              class="d-flex justify-space-between mb-3"
+            >
+              <v-item
+                v-for="(img, index) in images"
+                :key="img"
+                :value="index"
+                class="mx-1"
+              >
+                <template v-slot="{ active, toggle }">
+                  <v-sheet
+                    :class="active && 'v-settings__item--active'"
+                    class="d-inline-block v-settings__item"
+                    @click="toggle"
+                  >
+                    <v-img
+                      :src="img"
+                      height="100"
+                      width="50"
+                    />
+                  </v-sheet>
+                </template>
+              </v-item>
+            </v-item-group>
+          </v-card>
+
+          <v-btn
+            block
+            class="mb-3"
+            color="grey darken-1"
+            dark
+            href="https://vuetifyjs.com/components/api-explorer"
+            rel="noopener"
+            target="_blank"
+          >
+            Vuetify Documentation
+          </v-btn>
+
+          <v-btn
+            block
+            color="info"
+            href="https://store.vuetifyjs.com/products/vuetify-material-dashboard-free"
+            rel="noopener"
+            target="_blank"
+          >
+            Get Free Demo
+          </v-btn>
+
+          <div class="my-12" />
+
+          <div>
+            <strong class="mb-3 d-inline-block">THANK YOU FOR SHARING!</strong>
+          </div>
+
+          <v-btn
+            class="ma-1"
+            color="#55acee"
+            dark
+            rounded
+          >
+            <v-icon>mdi-twitter</v-icon>
+            - 45
+          </v-btn>
+
+          <v-btn
+            class="ma-1"
+            color="#3b5998"
+            dark
+            default
+            rounded
+          >
+            <v-icon>mdi-facebook</v-icon>
+            - 50
+          </v-btn>
+        </v-card-text>
+      </v-card>
+    </v-menu>
+  </div>
+</template>
+
+<script>
+  // Mixins
+  import Proxyable from 'vuetify/lib/mixins/proxyable'
+
+  // Vuex
+  // import { get, sync } from 'vuex-pathify'
+
+  export default {
+    name: 'DashboardCoreSettings',
+
+    mixins: [Proxyable],
+
+    data: () => ({
+      color: '#E91E63',
+      colors: [
+        '#9C27b0',
+        '#00CAE3',
+        '#4CAF50',
+        '#ff9800',
+        '#E91E63',
+        '#FF5252',
+      ],
+      menu: false,
+      saveImage: '',
+    }),
+
+    // computed: {
+    //   ...sync('app', [
+    //     'drawer',
+    //     'drawerImage',
+    //     'mini',
+    //   ]),
+    //   ...sync('user', [
+    //     'drawer@gradient',
+    //     'drawer@image',
+    //   ]),
+    //   ...get('user', [
+    //     'images',
+    //     'gradients',
+    //   ]),
+    // },
+
+    watch: {
+      color (val) {
+        this.$vuetify.theme.themes[this.isDark ? 'dark' : 'light'].primary = val
+      },
+    },
+  }
+</script>
+
+<style lang="sass">
+  .v-settings
+    .v-item-group > *
+      cursor: pointer
+
+    &__item
+      border-width: 3px
+      border-style: solid
+      border-color: transparent !important
+
+      &--active
+        border-color: #00cae3 !important
+</style>

Yi.Vue/src/layouts/default/widgets/DrawerToggle.vue

@@ -17,6 +17,9 @@
   // import { sync } from 'vuex-pathify'
 
   export default {
+    data:()=>({
+      mini:false
+    }),
     name: 'DefaultDrawerToggle',
 
     computed: {

Yi.Vue/src/main.js

@@ -3,12 +3,13 @@ import App from './App.vue'
 import router from './router'
 import vuetify from './plugins/vuetify'
 import './plugins'
-import './store/index'
+import store from './store/index'
 
 Vue.config.productionTip = false
 
 new Vue({
     router,
+    store,
     vuetify,
     render: function(h) { return h(App) }
 }).$mount('#app')

Yi.Vue/src/router/index.js

@@ -1,9 +1,7 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 
-import LayoutLogin from '../layouts/login/LayoutLogin.vue'
+
-import login from '../views/login.vue'
-import register from '../views/register.vue'
 import { trailingSlash } from '@/util/helpers'
 import {
     layout,
@@ -22,28 +20,19 @@ const router = new VueRouter({
 
         return { x: 0, y: 0 }
     },
-    routes: [{
+    routes: [
-            path: '/layoutLogin',
-            name: 'layoutLogin',
-            component: LayoutLogin,
-            redirect: "/login",
-            children: [{
-                    path: "/login",
-                    name: "login",
-                    component: login
-                },
-                {
-                    path: '/register',
-                    name: 'register',
-                    component: register
-                }
-            ]
-        },
         layout('Default', [
             route('Index'),
             route('AdmUser', null, 'AdmUser'),
             route('AdmRole', null, 'AdmRole'),
+            route('AdmMenu', null, 'AdmMenu'),
+            route('AdmMould', null, 'AdmMould'),
+        ]),
+        layout('Login', [
+            route('login', null, 'login'),
+            route('register', null, 'register')
         ])
+
     ]
 })
 router.beforeEach((to, from, next) => {

Yi.Vue/src/views/AdmMenu.vue

@@ -0,0 +1,32 @@
+<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",
+  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 }
+    ],
+   defaultItem: {
+      role_name: "test",
+      introduce: "用于测试",
+    },
+  }),
+};
+</script>

Yi.Vue/src/views/AdmMould.vue

@@ -0,0 +1,32 @@
+<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",
+  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 }
+    ],
+   defaultItem: {
+      role_name: "test",
+      introduce: "用于测试",
+    },
+  }),
+};
+</script>