Skip to content

C
confucius
Commit 27e880a4 authored by 黄奎's avatar 黄奎
Browse files
Options

新增页面

parent 5eb64b6c
Hide whitespace changes
Inline Side-by-side
Showing with 181 additions and 55 deletions
src/pages/course/course.vue
View file @ 27e880a4
...@@ -3,100 +3,221 @@ ...@@ -3,100 +3,221 @@
<div class="page-search row items-center"> <div class="page-search row items-center">
<div class="col row wrap q-mr-lg q-col-gutter-md"> <div class="col row wrap q-mr-lg q-col-gutter-md">
<div class="col-3"> <div class="col-3">
<q-input ref="filter" filled v-model="keyWords" label="分类名称"> <q-input @change="resetSearch" clearable standout="bg-primary text-white" v-model="msg.MenuName"
<template v-slot:append> label="菜单名称" />
<q-icon v-if="keyWords !== ''" name="clear" class="cursor-pointer" @click="resetFilter" /> </div>
</template> <div class="col-3">
</q-input> <q-input @change="resetSearch" clearable standout="bg-primary text-white" v-model="msg.MenuUrl"
label="菜单地址" />
</div>
<div class="col-3">
<q-select @input="resetSearch" standout="bg-primary text-white" v-model="msg.MenuType" :options="MenuTypeOpts"
emit-value map-options label="菜单类型" />
</div>
<div class="col-3">
<q-select @input="resetSearch" standout="bg-primary text-white" v-model="msg.MenuLevel"
:options="MenuLevelOpts" emit-value map-options label="菜单等级" />
</div>
<div class="col-3">
<q-select @input="resetSearch" standout="bg-primary text-white" v-model="msg.Status" :options="ShowOpts"
emit-value map-options label="状态" />
</div> </div>
</div> </div>
<div class="page-option"> <div class="page-option">
<q-btn color="accent" class="q-mr-md" icon="add" label="新增分类" @click="EditMenu(null)" /> <q-btn color="accent" class="q-mr-md" icon="add" label="新增菜单" @click="EditMenu(null)" />
</div> </div>
</div> </div>
<div class="page-content"> <div class="page-content">
<div class="q-pa-md q-gutter-sm"> <q-table :pagination="msg" :loading="loading" no-data-label="暂无相关数据" flat class="sticky-tow-column-table"
<q-tree v-if="isShow" :nodes="data" node-key="CateId" label-key="CateName" children-key="ChildList" separator="none" title="菜单信息" :data="data" :columns="columns" row-key="name">
:filter="keyWords" :filter-method="myFilterMethod" default-expand-all no-results-label="暂无相关数据"> <template v-slot:body-cell-Status="props">
<template v-slot:default-header="prop"> <q-td :props="props">
<div class="row items-center"> <q-badge :color="props.value==1?'negative':'primary'" :label="props.value==0?'正常':'禁用'" />
<div class="text-weight-bold text-primary">{{ prop.node.CateName }}</div> </q-td>
<template v-if="prop.node.ChildList && prop.node.ChildList.length>0"> </template>
&nbsp; <template v-slot:bottom>
<q-btn round icon="add" size="xs" @click="EditMenu(null)" /> <q-pagination class="full-width justify-end" v-model="msg.pageIndex" color="primary" :max="pageCount"
</template> :input="true" @input="changePage" />
&nbsp; </template>
<q-btn round icon="edit" size="xs" @click="EditMenu(prop.node)" /> <template v-slot:body-cell-optioned="props">
</div> <q-td :props="props">
</template> <q-btn flat size="xs" icon="edit" color="accent" style="font-weight:400" label="编辑"
</q-tree> @click="EditMenu(props.row)" />
</div> </q-td>
<category-form v-if="isShowCategory" :save-obj="categoryObj" @close="closeCagegoryForm" @success="refreshPage"> </template>
</category-form> </q-table>
<course-form v-if="isShowMenuForm" :save-obj="menuObjOption" @close="closeMenuSaveForm" @success="refreshPage">
</course-form>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { import {
queryCourseCategoryTree queryCoursePage
} from '../../api/course/index' } from '../../api/course/index'
import categoryForm from '../../components/course/category-form' import courseForm from '../../components/course/course-form'
export default { export default {
meta: { meta: {
title: "课程分类" title: "菜单管理"
}, },
components: { components: {
categoryForm, courseForm,
}, },
data() { data() {
return { return {
currentUrl: "", currentUrl: "",
columns: [{
name: 'MenuId',
label: '菜单编号',
field: 'MenuId',
align: 'left'
},
{
name: 'MenuName',
required: true,
label: '菜单名称',
align: 'left',
field: row => row.MenuName
},
{
name: 'MenuUrl',
label: '菜单地址',
field: 'MenuUrl',
align: 'left'
},
{
name: 'MenuTypeStr',
label: '菜单类型',
field: 'MenuTypeStr',
align: 'left'
},
{
name: 'MenuLevel',
label: '菜单等级',
field: 'MenuLevel',
align: 'left'
},
{
name: 'MenuIcon',
label: '图标',
field: 'MenuIcon',
align: 'left'
},
{
name: 'SortNum',
label: '排序',
field: 'SortNum',
align: 'left'
},
{
name: 'CreateTimeStr',
label: '创建时间',
field: 'CreateTimeStr',
align: 'left'
},
{
name: 'Status',
label: '状态',
align: 'left',
field: 'Status'
},
{
name: 'optioned',
label: '操作',
field: 'MenuId'
}
],
data: [], data: [],
keyWords: '', loading: true,
isShowCategory: false, ShowOpts: [{
isShow: false, label: '全部',
categoryObj: {}, value: '-1'
},
{
label: '正常',
value: '0'
},
{
label: '删除',
value: '1'
}
],
//菜单等级
MenuLevelOpts: [],
//菜单类型
MenuTypeOpts: [],
msg: {
pageIndex: 1,
pageSize: 12,
rowsPerPage: 12,
MenuName: "",
MenuUrl: "",
MenuLevel: -1,
MenuType: -1,
Status: "-1",
},
pageCount: 0,
isShowMenuForm: false,
menuObjOption: null,
} }
}, },
mounted() { mounted() {
this.initData();
this.currentUrl = this.$route.path this.currentUrl = this.$route.path
this.getcoursecategorytree() this.getcourselist()
}, },
methods: { methods: {
//搜索分类 //初始化下拉框
myFilterMethod(node, filter) { initData() {
return node.CateName && node.CateName.indexOf(filter) > -1; this.MenuTypeOpts = getMenuTypeList();
this.MenuLevelOpts = getMenuLevelList();
}, },
//重置搜索关键词 //重新查询
resetFilter() { resetSearch() {
this.keyWords = '' this.msg.pageIndex = 1;
this.$refs.filter.focus() this.getcourselist();
}, },
//刷新页面 //翻页
refreshPage() { changePage(val) {
this.getcoursecategorytree(); this.msg.pageIndex = val;
this.getcourselist()
}, },
//获取课程分类树形结构 //获取菜单分页列表
getcoursecategorytree() { getcourselist() {
this.isShow = false; this.loading = true;
queryCourseCategoryTree({}).then(res => { queryCoursePage(this.msg).then(res => {
this.isShow = true; this.loading = false
this.data = res.Data; this.data = res.Data.PageData
this.pageCount = res.Data.PageCount
}).catch(() => {
this.loading = false
}) })
}, },
//新增修改角色 //刷新页面
refreshPage() {
if (!this.menuObjOption) {
this.msg.pageIndex = 1;
this.msg.MenuName = "";
this.msg.MenuUrl = "";
this.msg.MenuLevel = -1;
this.msg.MenuType = -1;
this.msg.Status = "-1";
}
this.getmenulist()
},
//新增修改菜单
EditMenu(obj) { EditMenu(obj) {
if (obj) { if (obj) {
this.categoryObj = obj this.menuObjOption = obj
} else { } else {
this.categoryObj = null this.menuObjOption = null
} }
this.isShowCategory = true; this.isShowMenuForm = true
}, },
//关闭弹窗 //关闭弹窗
closeCagegoryForm() { closeMenuSaveForm() {
this.isShowCategory = false this.isShowMenuForm = false
} }
} }
} }
......
src/router/routes.js
View file @ 27e880a4
...@@ -47,6 +47,11 @@ const routes = [{ ...@@ -47,6 +47,11 @@ const routes = [{
component: () => component: () =>
import ("pages/course/catagory.vue") import ("pages/course/catagory.vue")
}, },
{
path: "/course/course", //课程管理
component: () =>
import ("pages/course/course.vue")
},
{ {
path: "/test", //API测试 path: "/test", //API测试
component: () => component: () =>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment