分组管理页面

src/layouts/MainLayout.vue

@@ -58,6 +58,20 @@ const linksList = [
       }
     ]
   },
+  {
+    MenuId: 10,
+    MenuName: '引流',
+    MenuIcon: 'school',
+    SubList: [
+      {
+        MenuId: 10-1,
+        MenuName: '素材分组',
+        MenuIcon: 'school',
+        MenuUrl: '/groupingManage'
+      },
+     
+    ]
+  },
   {
     MenuId: 2,
     MenuName: '数据看板',

src/module/drainage/groupingManageModule.ts

+import { StaticConfig } from '@/config/app'
+import { useMeta } from 'quasar'
+import { reactive,ref } from 'vue'
+interface LoginParams {
+    Name: string,
+    pageIndex: number,
+    pageSize: number,
+    rowsPerPage: number,
+    pageCount: number,
+  }
+  interface addParams {
+    Id: number, Name: string, Sort: number
+  } 
+const groupingManageModule = () => {
+    const msg: LoginParams = reactive({
+        Name: '',
+        pageIndex: 1,
+        pageSize: 15,
+        rowsPerPage:15,
+        pageCount:1
+      })
+    const addMsg: addParams = reactive({
+        Id: 0, Name: '', Sort: 1
+    })  
+  const title = ref(StaticConfig.appsuffix)
+  useMeta(() => {
+    return {
+      title: title.value
+    }
+  })
+  //输入框的事件
+  const resetSearch = () => {
+    console.log(msg.Name)
+  }
+  
+
+
+
+  const setTitle = (pageTitle: string, suffix = true) => {
+    if (suffix) {
+      title.value = `${pageTitle}-${StaticConfig.appsuffix}`
+    } else {
+      title.value = pageTitle
+    }
+  }
+ 
+
+  return { setTitle,msg,addMsg ,resetSearch}
+}
+
+export default groupingManageModule

src/pages/drainage/groupingManage.vue

+<template>
+  <div class="q-pa-md">
+    <q-page padding style="background: #FFF;border-radius: 10px;">
+      <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 @keyup.enter.native="resetSearch" clearable standout="bg-primary text-white" v-model="msg.Name"
+              label="分组名称" @clear="resetSearch" maxlength="20" />
+          </div>
+        </div>
+      </div>
+      <div class="page-content">
+        <q-table :pagination="msg" :rows="rows" :columns="columns" row-key="name" no-data-label="暂无相关数据" flat
+          class="sticky-column-table">
+          <!-- <template v-slot:top="props">
+            <div class="col-2 q-table__title">分组列表</div>
+            <q-space />
+            <div class="page-option">
+              <q-btn color="accent" size="sm" class="q-mr-md" icon="add" label="新增分组"
+                @click="alert = true,addMsg.Name=''" />
+            </div>
+          </template> -->
+          <template v-slot:bottom>
+            <q-pagination class="full-width justify-end" v-model="msg.pageIndex" color="primary" :max="msg.pageCount"
+              :input="true" @input="changePage" />
+          </template>
+        </q-table>
+      </div>
+      <q-dialog v-model="alert">
+        <q-card style="width: 520px; max-width: 80vw;">
+          <q-card-section>
+            <div class="text-h6">新增分组</div>
+          </q-card-section>
+          <q-separator />
+          <q-card-section class="q-pt-none">
+            <q-input filled v-model="addMsg.Name" label="分组名称" standout="bg-primary text-white"
+              style="margin-top:20px" />
+            <q-input filled v-model="addMsg.Sort" label="分组排序" standout="bg-primary text-white"
+              style="margin-top:20px" />
+          </q-card-section>
+          <q-separator />
+          <q-card-actions align="right">
+            <q-btn class="q-mr-md" label="取消" @click="alert = false" />
+            <q-btn color="accent" class="q-mr-md" label="确定" @click="submit()" />
+          </q-card-actions>
+        </q-card>
+      </q-dialog>
+    </q-page>
+  </div>
+
+</template>
+
+<script lang="ts">
+  // import { Todo, Meta } from '@/components/models'
+
+  import groupingManageModule from '@/module/drainage/groupingManageModule'
+
+  import { defineComponent, ref } from 'vue'
+
+  export default defineComponent({
+    name: 'groupingManage',
+    //   components: { ExampleComponent },
+    setup() {
+      let { setTitle, msg, addMsg, resetSearch } = groupingManageModule()
+      setTitle('难受', false)
+      const changePage = () => {
+        console.log('打印')
+      }
+      const submit = () => {
+        console.log('打印确定')
+      }
+
+      const columns = [
+        { name: 'ID', required: true, label: 'ID', align: 'left', field: 'name', },
+        { name: '排序', align: 'center', label: '排序', field: 'calories', },
+        { name: '分组名称', label: '分组名称', field: 'fat', },
+        { name: '创建人', label: '创建人', field: 'carbs' },
+        { name: '创建时间', label: '创建时间', field: 'protein' },
+        { name: '操作', label: '操作', field: 'sodium' },
+
+      ]
+      const rows = [
+        {
+          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%'
+        }
+      ]
+      return { setTitle, msg, addMsg, resetSearch, columns, rows, changePage, alert: ref(false), submit }
+    }
+  })
+</script>
\ No newline at end of file

src/router/routes.ts

@@ -6,6 +6,12 @@ const routes: RouteRecordRaw[] = [
 		component: () => import('@/layouts/MainLayout.vue'),
 		children: [{ path: '', component: () => import('@/pages/Index.vue') }]
 	},
+	{
+		path: '/groupingManage',
+		component: () => import('@/layouts/MainLayout.vue'),
+		children: [{ path: '', component: () => import('@/pages/drainage/groupingManage.vue') }]
+	},
+	
 	{
 		path:'/auth/login',
 		component: () => import('@/pages/auth/login.vue')
@@ -14,6 +20,7 @@ const routes: RouteRecordRaw[] = [
 		path:'/auth/regist',
 		component: () => import('@/pages/auth/regist.vue')
 	},
+	
 	// Always leave this as last one,
 	// but you can also remove it
 	{