Change router view to page view component for /interface route

pull/9/head
johnniang 2019-04-12 10:15:08 +08:00
parent 534617d1f0
commit 0c8dcea2b6
4 changed files with 146 additions and 114 deletions

View File

@ -2,7 +2,6 @@
import { BasicLayout, RouteView, BlankLayout, PageView } from '@/layouts' import { BasicLayout, RouteView, BlankLayout, PageView } from '@/layouts'
export const asyncRouterMap = [ export const asyncRouterMap = [
{ {
path: '/', path: '/',
name: 'index', name: 'index',
@ -10,7 +9,6 @@ export const asyncRouterMap = [
meta: { title: '首页' }, meta: { title: '首页' },
redirect: '/dashboard', redirect: '/dashboard',
children: [ children: [
// dashboard // dashboard
{ {
path: '/dashboard', path: '/dashboard',
@ -111,7 +109,7 @@ export const asyncRouterMap = [
{ {
path: '/interface', path: '/interface',
name: 'Interface', name: 'Interface',
component: RouteView, component: PageView,
redirect: '/interface/themes', redirect: '/interface/themes',
meta: { title: '外观', icon: 'skin' }, meta: { title: '外观', icon: 'skin' },
children: [ children: [
@ -184,7 +182,9 @@ export const asyncRouterMap = [
] ]
}, },
{ {
path: '*', redirect: '/404', hidden: true path: '*',
redirect: '/404',
hidden: true
} }
] ]

View File

@ -1,77 +1,113 @@
<template> <template>
<page-view> <a-row :gutter="12">
<a-row :gutter="12"> <a-col
<a-col :xl="10"
:xl="10" :lg="10"
:lg="10" :md="10"
:md="10" :sm="24"
:sm="24" :xs="24"
:xs="24" :style="{ 'padding-bottom': '12px' }"
:style="{ 'padding-bottom': '12px' }"> >
<a-card title="添加菜单"> <a-card title="添加菜单">
<a-form layout="horizontal"> <a-form layout="horizontal">
<a-form-item label="名称:" help="* 页面上所显示的名称"> <a-form-item
<a-input v-model="menuToCreate.name" /> label="名称:"
</a-form-item> help="* 页面上所显示的名称"
<a-form-item label="路径:" help="* 菜单的路径"> >
<a-input v-model="menuToCreate.url" /> <a-input v-model="menuToCreate.name" />
</a-form-item> </a-form-item>
<a-form-item label="上级菜单:"> <a-form-item
<a-select v-model="menuToCreate.parentId"> label="路径:"
<a-select-option v-for="(menu,index) in menus" :key="index" :value="menu.id">{{ menu.name }}</a-select-option> help="* 菜单的路径"
</a-select> >
</a-form-item> <a-input v-model="menuToCreate.url" />
<a-form-item label="排序编号:"> </a-form-item>
<a-input type="number" v-model="menuToCreate.sort" /> <a-form-item label="上级菜单:">
</a-form-item> <a-select v-model="menuToCreate.parentId">
<a-form-item label="图标:" help="* 请根据主题的支持选填"> <a-select-option
<a-input v-model="menuToCreate.icon" /> v-for="(menu,index) in menus"
</a-form-item> :key="index"
<a-form-item label="打开方式:"> :value="menu.id"
<a-select defaultValue="_self" v-model="menuToCreate.target"> >{{ menu.name }}</a-select-option>
<a-select-option value="_self">当前窗口</a-select-option> </a-select>
<a-select-option value="_blank">新窗口</a-select-option> </a-form-item>
</a-select> <a-form-item label="排序编号:">
</a-form-item> <a-input
<a-form-item> type="number"
<a-button type="primary" @click="createMenu"></a-button> v-model="menuToCreate.sort"
</a-form-item> />
</a-form> </a-form-item>
</a-card> <a-form-item
</a-col> label="图标:"
<a-col help="* 请根据主题的支持选填"
:xl="14" >
:lg="14" <a-input v-model="menuToCreate.icon" />
:md="14" </a-form-item>
:sm="24" <a-form-item label="打开方式:">
:xs="24" <a-select
:style="{ 'padding-bottom': '12px' }"> defaultValue="_self"
<a-card title="所有菜单"> v-model="menuToCreate.target"
<a-table :columns="columns" :dataSource="menus" :loading="loading"> >
<ellipsis :length="30" tooltip slot="name" slot-scope="text"> <a-select-option value="_self">当前窗口</a-select-option>
{{ text }} <a-select-option value="_blank">新窗口</a-select-option>
</ellipsis> </a-select>
<span slot="action" slot-scope="text, record"> </a-form-item>
<a href="javascript:;" @click="editMenu(record.id)"></a> <a-form-item>
<a-divider type="vertical" /> <a-button
<a-popconfirm type="primary"
:title="'你确定要删除【' + record.name + '】菜单?'" @click="createMenu"
@confirm="deleteMenu(record.id)" >保存</a-button>
okText="确定" </a-form-item>
cancelText="取消" </a-form>
> </a-card>
<a href="javascript:;">删除</a> </a-col>
</a-popconfirm> <a-col
</span> :xl="14"
</a-table> :lg="14"
</a-card> :md="14"
</a-col> :sm="24"
</a-row> :xs="24"
</page-view> :style="{ 'padding-bottom': '12px' }"
>
<a-card title="所有菜单">
<a-table
:columns="columns"
:dataSource="menus"
:loading="loading"
>
<ellipsis
:length="30"
tooltip
slot="name"
slot-scope="text"
>
{{ text }}
</ellipsis>
<span
slot="action"
slot-scope="text, record"
>
<a
href="javascript:;"
@click="editMenu(record.id)"
>编辑</a>
<a-divider type="vertical" />
<a-popconfirm
:title="'你确定要删除【' + record.name + '】菜单?'"
@confirm="deleteMenu(record.id)"
okText="确定"
cancelText="取消"
>
<a href="javascript:;">删除</a>
</a-popconfirm>
</span>
</a-table>
</a-card>
</a-col>
</a-row>
</template> </template>
<script> <script>
import { PageView } from '@/layouts'
import { Ellipsis } from '@/components' import { Ellipsis } from '@/components'
import menuApi from '@/api/menu' import menuApi from '@/api/menu'
const columns = [ const columns = [
@ -100,7 +136,6 @@ const columns = [
] ]
export default { export default {
components: { components: {
PageView,
Ellipsis Ellipsis
}, },
data() { data() {

View File

@ -1,47 +1,45 @@
<template> <template>
<page-view> <a-row :gutter="12">
<a-row :gutter="12"> <a-col
<a-col :xl="18"
:xl="18" :lg="18"
:lg="18" :md="18"
:md="18" :sm="24"
:sm="24" :xs="24"
:xs="24" :style="{'padding-bottom':'12px'}"
:style="{'padding-bottom':'12px'}"> >
<a-card> <a-card>
<a-form layout="vertical"> <a-form layout="vertical">
<a-form-item> <a-form-item>
<codemirror :value="value"></codemirror> <codemirror :value="value"></codemirror>
</a-form-item> </a-form-item>
<a-form-item> <a-form-item>
<a-button type="primary">保存</a-button> <a-button type="primary">保存</a-button>
</a-form-item> </a-form-item>
</a-form> </a-form>
</a-card> </a-card>
</a-col> </a-col>
<a-col <a-col
:xl="6" :xl="6"
:lg="6" :lg="6"
:md="6" :md="6"
:sm="24" :sm="24"
:xs="24" :xs="24"
:style="{'padding-bottom':'12px'}"> :style="{'padding-bottom':'12px'}"
<a-card title="Anatole 主题"> >
<theme-file :files="files" /> <a-card title="Anatole 主题">
</a-card> <theme-file :files="files" />
</a-col> </a-card>
</a-row> </a-col>
</page-view> </a-row>
</template> </template>
<script> <script>
import themeApi from '@/api/theme' import themeApi from '@/api/theme'
import ThemeFile from './components/ThemeFile' import ThemeFile from './components/ThemeFile'
import { codemirror } from 'vue-codemirror-lite' import { codemirror } from 'vue-codemirror-lite'
import { PageView } from '@/layouts'
export default { export default {
components: { components: {
PageView,
codemirror, codemirror,
ThemeFile ThemeFile
}, },

View File

@ -1,5 +1,6 @@
<template> <template>
<page-view> <div>
<a-row <a-row
:gutter="12" :gutter="12"
type="flex" type="flex"
@ -165,15 +166,13 @@
</a-col> </a-col>
</a-row> </a-row>
</a-drawer> </a-drawer>
</page-view> </div>
</template> </template>
<script> <script>
import { PageView } from '@/layouts'
import themeApi from '@/api/theme' import themeApi from '@/api/theme'
export default { export default {
components: { PageView },
data() { data() {
return { return {
optionLoading: true, optionLoading: true,