Skip to content

C
confucius
Commit 2b33afc3 authored by 罗超's avatar 罗超
Browse files
Options

新增菜单和列表功能

parent 76aaac5b
Hide whitespace changes
Inline Side-by-side
Showing with 333 additions and 65 deletions
src/App.vue
View file @ 2b33afc3
......@@ -12,14 +12,47 @@ export default {
<style>
@import url('~assets/css/font.css');
@import url('//at.alicdn.com/t/font_2077629_t78k31ibux.css');
@import url('//at.alicdn.com/t/font_2077629_1ir2chvd0bu.css');
html,
body,
#q-app {
min-height: 100vh;
min-width: 100%;
/* font-family:'微软雅黑',' Microsoft YaHei','PingFang','PingFangR';
-webkit-font-smoothing: antialiased; */
font-family: '微软雅黑', ' Microsoft YaHei', 'PingFang', 'PingFangR';
-webkit-font-smoothing: antialiased;
}
.page-body {
border-radius: 8px;
background: #FFF;
padding: 30px;
}
.page-search {
margin-bottom: 16px;
font-family: "perfectFont";
}
.page-content .q-table__title {
font-family: "perfectFont";
}
.page-content .q-table__container .scroll::-webkit-scrollbar {
width: 10px;
height: 5px;
}
.page-content .q-table__container .scroll::-webkit-scrollbar-thumb {
border-radius: 10px;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: #535353;
}
.page-content .q-table__container .scroll::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
border-radius: 10px;
background: #EDEDED;
}
</style>
src/assets/css/table.sass 0 → 100644
View file @ 2b33afc3
.sticky-column-table
max-width: 100%
thead
background: rgb(245, 246, 247)
thead tr th
font-size: 12px
font-weight: 400
color: rgb(168, 168, 179)
line-height: 14px
height: 40px
thead tr:first-child th:first-child
background-color: rgb(245, 246, 247)
td:first-child
background-color: #fff
th:first-child,
td:first-child
position: sticky
left: 0
z-index: 1
box-shadow: rgba(0, 0, 0, 0.05) 2px 0px 0px
\ No newline at end of file
src/layouts/MainLayout.vue
View file @ 2b33afc3
......@@ -8,8 +8,8 @@
<q-toolbar-title style="font-family:perfectFont">
{{name}}
</q-toolbar-title>
<q-tabs inline-label style="margin:0 auto; font-family:perfectFont;height:60px" class="text-white" shrink stretch v-if="userInfo">
<q-route-tab v-for="(x, i) in userInfo.MenuList" :key="i" :name="`navs_${i}`" :to="x.MenuUrl" :label="x.MenuName" :icon="x.MenuIcon" />
<q-tabs v-model="tab" @input="changeNavs" inline-label style="margin:0 auto; font-family:perfectFont;height:60px" class="text-white" shrink stretch v-if="userInfo">
<q-route-tab v-for="(x, i) in userInfo.MenuList" :key="i" :to="x.MenuUrl" :name="`navs_${i}`" :label="x.MenuName" :icon="x.MenuIcon" />
</q-tabs>
<div class="q-pl-lg">
<q-btn-dropdown flat color="primary">
......@@ -115,10 +115,10 @@
</q-item>
</q-list>
</q-btn-dropdown>
<q-btn-dropdown flat color="primary">
<q-btn-dropdown flat color="primary" v-if="userInfo">
<template v-slot:label>
<q-avatar size="28px">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1600423326738&di=ec1433b0230f5e4d56273271e8bcaa0b&imgtype=0&src=http%3A%2F%2Fp0.ifengimg.com%2Fpmop%2F2017%2F0907%2F1507748D95DA5B2BE480B783227F8A153CEF1BF3_size38_w867_h533.jpeg">
<img :src="userInfo.UserIcon">
</q-avatar>
</template>
<div class="row no-wrap q-pa-md">
......@@ -135,9 +135,9 @@
<img src="https://cdn.quasar.dev/img/boy-avatar.png">
</q-avatar>
<div class="text-subtitle1 q-mt-md q-mb-xs">John Doe</div>
<div class="text-subtitle1 q-mt-md q-mb-xs">{{userInfo.AccountName}}</div>
<q-btn color="primary" label="Logout" push size="sm" v-close-popup @click="logout" />
<q-btn color="primary" label="登出系统" push size="sm" v-close-popup @click="logout" />
</div>
</div>
</q-btn-dropdown>
......@@ -146,61 +146,27 @@
</q-header>
<q-page-container class="window-height">
<div class="row items-stretch full-height">
<div style="width:242px;border-right:1px solid #e6e6e6;font-family:perfectFont" class="text-subtitle2">
<div style="width:180px;box-shadow: 2px 0 10px 0 rgba(237,238,240,0.50);font-family:perfectFont" class="text-subtitle2" v-if="secondNavs && secondNavs.length>0">
<q-list>
<q-item to="/school/manager" clickable v-ripple :active="currentPath=='/school/manager'">
<q-item-section avatar>
<q-icon name="iconfont icon-xuexiaoxiaoquguanli" size="20px" />
</q-item-section>
<q-item-section>校区管理</q-item-section>
</q-item>
<q-expansion-item expand-separator icon="iconfont icon-jiangshi" label="讲师管理">
<q-item clickable v-ripple>
<q-item-section avatar>
<q-icon name="iconfont icon-xuexiaoxiaoquguanli" size="20px" />
</q-item-section>
<q-item-section>校区管理</q-item-section>
</q-item>
<q-item clickable v-ripple>
<template v-for="(x,i) in secondNavs">
<q-item :to="x.MenuUrl" clickable v-ripple :active="currentPath==x.MenuUrl" v-if="x.SubList.length==0" :key="i">
<q-item-section avatar>
<q-icon name="iconfont icon-xuexiaoxiaoquguanli" size="20px" />
<q-icon :name="x.MenuIcon" size="20px" />
</q-item-section>
<q-item-section>校区管理</q-item-section>
<q-item-section>{{x.MenuName}}</q-item-section>
</q-item>
</q-expansion-item>
<q-item to="/home" clickable v-ripple :active="currentPath=='/home'">
<q-item-section avatar>
<q-icon name="iconfont icon-jiedujiaoyu-fuzhujiaoyu" size="20px" />
</q-item-section>
<q-item-section>助教管理</q-item-section>
</q-item>
<q-item clickable v-ripple>
<q-item-section avatar>
<q-icon name="iconfont icon-banji" size="20px" />
</q-item-section>
<q-item-section>班级管理</q-item-section>
</q-item>
<q-item clickable v-ripple>
<q-item-section avatar>
<q-icon name="iconfont icon-xueyuan" size="20px" />
</q-item-section>
<q-item-section>学员管理</q-item-section>
</q-item>
<q-item clickable v-ripple>
<q-item-section avatar>
<q-icon name="iconfont icon-yiyuanguanliyuan" size="20px" />
</q-item-section>
<q-item-section>后台用户管理</q-item-section>
</q-item>
<q-item clickable v-ripple>
<q-item-section avatar>
<q-icon name="iconfont icon-jiaoseguanli" size="20px" />
</q-item-section>
<q-item-section>角色管理</q-item-section>
</q-item>
<q-expansion-item expand-separator icon="iconfont icon-jiangshi" label="讲师管理" v-else>
<q-item :to="y.MenuUrl" clickable v-ripple :active="currentPath==y.MenuUrl" v-for="(y, yi) in x.SubList" :key="yi">
<q-item-section avatar>
<q-icon :name="y.MenuIcon" size="20px" />
</q-item-section>
<q-item-section>{{y.MenuName}}</q-item-section>
</q-item>
</q-expansion-item>
</template>
</q-list>
</div>
<div class="col">
<div class="col" style="background: #f2f4f7;padding:20px">
<router-view />
</div>
</div>
......@@ -223,8 +189,9 @@ export default {
return {
leftDrawerOpen: false,
//essentialLinks: linksData
tab: "navs_1",
currentPath: ""
tab: "navs_0",
currentPath: "",
secondNavs: []
}
},
watch: {
......@@ -242,6 +209,9 @@ export default {
'name'
]),
},
mounted() {
this.secondNavs = this.userInfo ? this.userInfo.MenuList[0].SubList : []
},
methods: {
logout() {
this.$store
......@@ -250,6 +220,10 @@ export default {
this.$router.push('/login')
})
.catch(() => {})
},
changeNavs(val) {
let i = val.split('_')[1]
this.secondNavs = this.userInfo.MenuList[i].SubList
}
},
}
......
src/pages/school/manager.vue
View file @ 2b33afc3
<template>
<div>
This is school {{currentUrl}}
<div class="page-body">
<div class="page-search row items-center">
<div class="col row wrap q-mr-lg q-col-gutter-md">
<div class="col-3">
<q-input clearable standout="bg-primary text-white" v-model="msg.SchoolName" label="校区名称" />
</div>
<div class="col-3">
<q-select standout="bg-primary text-white" v-model="msg.Status" :options="StatusOpts" option-value="value" option-label="label" label="校区状态" />
</div>
</div>
<div class="page-option">
<!-- 原则上不能操作过三个按钮，建议不要使用查询按钮，增加用户操作次数 -->
<!-- <q-btn color="primary" outline label="立即查询" /> -->
<q-btn color="accent" class="q-mr-md" icon="add" label="新增校区" />
<q-btn-dropdown outline color="dark" label="更多">
<q-list>
<q-item clickable v-close-popup @click="onItemClick">
<!-- <q-item-section side>
<q-icon name="style" />
</q-item-section> -->
<q-item-section>
<q-item-label>导出</q-item-label>
</q-item-section>
</q-item>
<q-item clickable v-close-popup @click="onItemClick">
<q-item-section>
<q-item-label>导入</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-btn-dropdown>
</div>
</div>
<div class="page-content">
<q-table flat class="sticky-column-table" separator="none" title="校区信息" :data="data" :columns="columns" row-key="name" />
</div>
</div>
</template>
......@@ -8,15 +43,216 @@
export default {
data() {
return {
currentUrl: ""
currentUrl: "",
columns: [{
name: 'name',
required: true,
label: '公司名称',
align: 'left',
field: row => row.name,
format: val => `${val}`,
sortable: true
},
{
name: 'caloriesss',
align: 'center',
label: '联系人',
field: 'calories',
sortable: true
},
{
name: 'fatss',
label: '联系电话',
field: 'fat',
sortable: true
},
{
name: 'carbs',
label: '状态',
field: 'carbs'
},
{
name: 'protein',
label: '是否显示',
field: 'protein'
},
{
name: 'sodium',
label: 'B2B是否显示',
field: 'sodium'
},
{
name: 'calcium',
label: '公司类型',
field: 'calcium',
sortable: true,
sort: (a, b) => parseInt(a, 10) - parseInt(b, 10)
},
{
name: 'iron',
label: '服务费率',
field: 'iron',
sortable: true,
sort: (a, b) => parseInt(a, 10) - parseInt(b, 10)
},
{
name: 'calories',
align: 'center',
label: '操作类型',
field: 'calories',
sortable: true
},
{
name: 'fat',
label: '下属',
field: 'fat',
sortable: true
},
{
name: 'caloriess',
align: 'center',
label: 'Calories',
field: 'calories',
sortable: true
},
{
name: 'fats',
label: 'Fat (g)',
field: 'fat',
sortable: true
},
],
data: [{
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
sodium: 87,
calcium: '14%',
iron: '1%'
},
{
name: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3,
sodium: 129,
calcium: '8%',
iron: '1%'
},
{
name: 'Eclair',
calories: 262,
fat: 16.0,
carbs: 23,
protein: 6.0,
sodium: 337,
calcium: '6%',
iron: '7%'
},
{
name: 'Cupcake',
calories: 305,
fat: 3.7,
carbs: 67,
protein: 4.3,
sodium: 413,
calcium: '3%',
iron: '8%'
},
{
name: 'Gingerbread',
calories: 356,
fat: 16.0,
carbs: 49,
protein: 3.9,
sodium: 327,
calcium: '7%',
iron: '16%'
},
{
name: 'Jelly bean',
calories: 375,
fat: 0.0,
carbs: 94,
protein: 0.0,
sodium: 50,
calcium: '0%',
iron: '0%'
},
{
name: 'Lollipop',
calories: 392,
fat: 0.2,
carbs: 98,
protein: 0,
sodium: 38,
calcium: '0%',
iron: '2%'
},
{
name: 'Honeycomb',
calories: 408,
fat: 3.2,
carbs: 87,
protein: 6.5,
sodium: 562,
calcium: '0%',
iron: '45%'
},
{
name: 'Donut',
calories: 452,
fat: 25.0,
carbs: 51,
protein: 4.9,
sodium: 326,
calcium: '2%',
iron: '22%'
},
{
name: 'KitKat',
calories: 518,
fat: 26.0,
carbs: 65,
protein: 7,
sodium: 54,
calcium: '12%',
iron: '6%'
}
],
StatusOpts: [{
label: '全部',
value: ''
},
{
label: '开启',
value: '1'
},
{
label: '关闭',
value: '0'
}
],
msg: {
SchoolName: "",
Status: ""
}
}
},
mounted() {
this.currentUrl = this.$route.path
},
methods: {
onItemClick() {
}
},
}
</script>
<style>
<style lang="sass">
@import url('~assets/css/table.sass');
</style>
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