页面修改

src/components/course/category-form.vue

@@ -2,28 +2,19 @@
   <q-dialog v-model="persistent" content-class="bg-grey-1" persistent transition-show="scale" transition-hide="scale">
     <q-card style="width: 800px;max-width:900px;">
       <q-card-section>
-        <div class="text-h6">{{objOption.CateId==0?'新增课程分类信息':'修改课程分类信息'}}</div>
+        <div class="text-h6">{{objOption.CateId==0?'新增系列':'修改系列'}}</div>
       </q-card-section>
       <q-card-section class="q-pt-none scroll" style="max-height: 70vh">
-        <div class="text-caption q-mb-lg q-px-md text-grey-6">课程分类信息</div>
+        <div class="text-caption q-mb-lg q-px-md text-grey-6">系列信息</div>
         <div class="row wrap">
           <q-input filled stack-label maxlength="50" :dense="false" v-model="objOption.CateName" ref="CateName"
-            class="col-6 q-pr-lg q-pb-lg" label="分类名称" :rules="[val => !!val || '请填写分类名称']" />
+            class="col-6 q-pr-lg q-pb-lg" label="系列名称" :rules="[val => !!val || '系列名称']" />
           <q-input filled stack-label maxlength="100" :dense="false" v-model="objOption.SortNum" ref="SortNum"
-            class="col-6 q-pr-lg q-pb-lg" label="排序" />
+            class="col-6 q-pr-lg q-pb-lg" label="排序" @keyup.native="checkInteger(objOption,'SortNum')" />
           <div class="col-12 q-pr-lg q-pb-lg q-pt-lg">
             <q-toggle size="md" label="状态" color="primary" :false-value="1" :true-value="0" v-model="objOption.Status"
               title="注意：关闭后，分类将无法正常使用." />
           </div>
-          <div class="col-12 q-pr-lg q-pb-lg q-pt-lg">
-            上级分类:
-            <div class="q-pa-md q-gutter-sm">
-              <q-tree v-if="isShow" style="max-width:300px;" :nodes="TreeCategoryList" node-key="CateId"
-                label-key="CateName" children-key="ChildList" tick-strategy="strict" :default-expand-all="true"
-                no-connectors :ticked.sync="chooseCategroyArray">
-              </q-tree>
-            </div>
-          </div>
         </div>
       </q-card-section>
       <q-separator />
@@ -55,7 +46,7 @@
         objOption: {
           CateId: 0, //分类编号
           ParentId: 0, //父级编号
-          CateName: "", //分类名称
+          CateName: "", //系列名称
           SortNum: 0, //排序
           Status: 0, //状态(0-正常,1-禁用)},
         },
@@ -95,9 +86,9 @@
               this.chooseCategroyArray.push(res.Data.ParentId);
             }
           })
-          this.optionTitle = "修改课程分类信息"
+          this.optionTitle = "修改系列信息"
         } else {
-          this.optionTitle = "新增课程分类"
+          this.optionTitle = "新增系列"
           this.objOption.CateId = 0;
           this.objOption.ParentId = 0;
           this.objOption.CateName = "";

src/pages/course/catagory.vue

@@ -3,33 +3,50 @@
     <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 ref="filter" filled v-model="keyWords" label="分类名称">
-            <template v-slot:append>
-              <q-icon v-if="keyWords !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
-            </template>
-          </q-input>
+          <q-input @input="refreshPage" clearable standout="bg-primary text-white" v-model="msg.CateName" label="系列名称"
+            @clear="refreshPage" maxlength="20" />
         </div>
       </div>
-      <div class="page-option">
-        <q-btn color="accent" class="q-mr-md" icon="add" label="新增分类" @click="EditCategory(null)" />
-      </div>
     </div>
     <div class="page-content">
       <div class="q-pa-md q-gutter-sm">
-        <q-tree v-if="isShow" :nodes="data" node-key="CateId" label-key="CateName" children-key="ChildList"
-          :filter="keyWords" :filter-method="myFilterMethod" default-expand-all no-results-label="暂无相关数据">
-          <template v-slot:default-header="prop">
-            <div class="row items-center">
-              <div class="text-weight-bold text-primary">{{ prop.node.CateName }}</div>
-              <template v-if="prop.node.ChildList && prop.node.ChildList.length>0">
-                &nbsp;
-                <q-btn round icon="add" size="xs" @click="EditCategory(null)" />
-              </template>
-              &nbsp;
-              <q-btn round icon="edit" size="xs" @click="EditCategory(prop.node)" />
+        <q-table :pagination="msg" :loading="loading" no-data-label="暂无相关数据" flat class="sticky-tow-column-table"
+          separator="none" :data="data" :columns="columns" row-key="name">
+          <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="EditCategory(null)" />
             </div>
           </template>
-        </q-tree>
+          <template v-slot:body-cell-CoverImg="props">
+            <q-td :props="props">
+              <q-img :src="props.value" spinner-color="white" style="height: 54px; max-width: 100px"
+                class="rounded-borders">
+              </q-img>
+            </q-td>
+          </template>
+
+          <template v-slot:body-cell-Status="props">
+            <q-td :props="props">
+              <q-badge :color="props.value==1?'negative':'primary'" :label="props.value==0?'正常':'禁用'" />
+            </q-td>
+          </template>
+          <template v-slot:bottom>
+            <q-pagination class="full-width justify-end" v-model="msg.pageIndex" color="primary" :max="pageCount"
+              :input="true" @input="changePage" />
+          </template>
+          <template v-slot:body-cell-optioned="props">
+            <q-td :props="props">
+              <q-btn flat size="xs" icon="edit" color="accent" style="font-weight:400" label="编辑"
+                @click="EditCategory(props.row)" />
+
+              <q-btn flat size="xs" icon="edit" color="negative" style="font-weight:400"
+                @click="deleteCategory(props.row)" label="删除" />
+              </q-btn>
+            </q-td>
+          </template>
+        </q-table>
       </div>
       <category-form v-if="isShowCategory" :save-obj="categoryObj" @close="closeCagegoryForm" @success="refreshPage">
       </category-form>
@@ -39,7 +56,8 @@
 
 <script>
   import {
-    queryCourseCategoryTree
+    queryCourseCategoryPage,
+    deleteCourseCategory
   } from '../../api/course/index'
   import categoryForm from '../../components/course/category-form'
   export default {
@@ -57,32 +75,84 @@
         isShowCategory: false,
         isShow: false,
         categoryObj: {},
+        msg: {
+          CateName: "",
+          pageIndex: 1,
+          pageSize: 10,
+          rowsPerPage: 10,
+        },
+        columns: [{
+            name: 'CateId',
+            label: '编号',
+            field: 'CateId',
+            align: 'left'
+          },
+          {
+            name: 'CateName',
+            label: '系列名称',
+            field: 'CateName',
+            align: 'left'
+          },
+          {
+            name: 'SortNum',
+            label: '排序',
+            field: 'SortNum',
+            align: 'left'
+          },
+          {
+            name: 'Status',
+            label: '状态',
+            align: 'left',
+            field: 'Status'
+          },
+          {
+            name: 'optioned',
+            label: '操作',
+            field: 'CourseId'
+          }
+        ],
+        data: [],
+        loading: true,
+        ShowOpts: [{
+            label: '全部',
+            value: '-1'
+          },
+          {
+            label: '正常',
+            value: '0'
+          },
+          {
+            label: '删除',
+            value: '1'
+          }
+        ],
+        pageCount: 0,
       }
     },
     mounted() {
       this.currentUrl = this.$route.path
-      this.getcoursecategorytree()
+      this.getCourseCategoryPage()
     },
     methods: {
-      //搜索分类
-      myFilterMethod(node, filter) {
-        return node.CateName && node.CateName.indexOf(filter) > -1;
-      },
-      //重置搜索关键词
-      resetFilter() {
-        this.keyWords = ''
-        this.$refs.filter.focus()
-      },
       //刷新页面
       refreshPage() {
-        this.getcoursecategorytree();
+        this.msg.pageIndex = 1;
+        this.getCourseCategoryPage();
+      },
+      //翻页
+      changePage(val) {
+        this.msg.pageIndex = val;
+        this.getCourseCategoryPage()
       },
       //获取课程分类树形结构
-      getcoursecategorytree() {
-        this.isShow = false;
-        queryCourseCategoryTree({}).then(res => {
-          this.isShow = true;
-          this.data = res.Data;
+      getCourseCategoryPage() {
+        this.loading = true;
+        queryCourseCategoryPage(this.msg).then(res => {
+          this.loading = false;
+          if (res.Code == 1) {
+            this.data = res.Data.PageData;
+            this.pageCount = res.Data.PageCount
+          }
         })
       },
       //新增修改角色
@@ -97,7 +167,36 @@
       //关闭弹窗
       closeCagegoryForm() {
         this.isShowCategory = false
-      }
+      },
+      //删除系列
+      deleteCategory(item) {
+        let delMsg = {
+          CateId: item.CateId,
+        };
+        this.$q.dialog({
+          title: '提示信息',
+          message: '是否确定删除该系列？',
+          cancel: true,
+          persistent: true,
+          ok: "确定",
+          cancel: "取消",
+        }).onOk(() => {
+          deleteCourseCategory(delMsg).then(res => {
+            if (res.Code == 1) {
+              this.$q.notify({
+                icon: 'iconfont icon-chenggong',
+                color: 'accent',
+                timeout: 2000,
+                message: '删除成功！',
+                position: 'top'
+              })
+              this.refreshPage();
+            }
+          })
+        }).onCancel(() => {
+
+        });
+      },
     }
   }