课程页面修改

src/pages/course/course.vue

@@ -3,75 +3,34 @@
     <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
-            @input="resetSearch"
-            clearable
-            standout="bg-primary text-white"
-            v-model="msg.CourseName"
-            label="课程名称"
-            @clear="resetSearch"
-            maxlength="20"
-          />
+          <q-input @input="resetSearch" clearable standout="bg-primary text-white" v-model="msg.CourseName" label="课程名称"
+            @clear="resetSearch" maxlength="20" />
         </div>
         <div class="col-3">
-          <select-tree
-            :treeData="TreeCategoryList"
-            :defaultArray="returnString"
-            nodeKey="CateId"
-            :multiple="true"
-            labelKey="CateName"
-            childrenKey="ChildList"
-            tipText="课程系列"
-            @getChild="getChild"
-          ></select-tree>
+          <select-tree :treeData="TreeCategoryList" :defaultArray="returnString" nodeKey="CateId" :multiple="true"
+            labelKey="CateName" childrenKey="ChildList" tipText="课程系列" @getChild="getChild"></select-tree>
         </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="状态"
-          />
+          <q-select @input="resetSearch" standout="bg-primary text-white" v-model="msg.Status" :options="ShowOpts"
+            emit-value map-options label="状态" />
         </div>
       </div>
     </div>
     <div class="page-content">
-      <q-table
-        :pagination="msg"
-        :loading="loading"
-        no-data-label="暂无相关数据"
-        flat
-        class="sticky-tow-column-table sticky-right-column-table"
-        separator="none"
-        :data="data"
-        :columns="columns"
-        row-key="name"
-      >
+      <q-table :pagination="msg" :loading="loading" no-data-label="暂无相关数据" flat
+        class="sticky-tow-column-table sticky-right-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="EditCourse(null, 1)"
-            />
+            <q-btn color="accent" size="sm" class="q-mr-md" icon="add" label="新增课程" @click="EditCourse(null, 1)" />
           </div>
         </template>
         <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 :src="props.value" spinner-color="white" style="height: 54px; max-width: 100px"
+              class="rounded-borders">
             </q-img>
           </q-td>
         </template>
@@ -107,12 +66,8 @@
         <template v-slot:body-cell-PreferentialListSellCommission="props">
           <q-td :props="props" style="padding-right:0px;padding-left:0px">
             <div v-for="x in props.value">
-              <div
-                class="border-bottom"
-                style="padding-left: 16px;padding-right: 16px"
-                :class="{ 'text-red': x.SaleCommissionType == 1 }"
-                v-if="x.PriceDiscountType != 0"
-              >
+              <div class="border-bottom" style="padding-left: 16px;padding-right: 16px"
+                :class="{ 'text-red': x.SaleCommissionType == 1 }" v-if="x.PriceDiscountType != 0">
                 {{ x.SaleCommissionType == 1 ? "￥" : ""
                 }}{{ x.SaleCommissionMoney
                 }}{{ x.SaleCommissionType == 0 ? "%" : "" }}
@@ -129,12 +84,8 @@
         <template v-slot:body-cell-PreferentialListB2BCommission="props">
           <q-td :props="props" style="padding-left:0px">
             <div v-for="x in props.value">
-              <div
-                class="border-bottom"
-                style="padding-left: 16px"
-                :class="{ 'text-red': x.B2BCommissionType == 1 }"
-                v-if="x.PriceDiscountType != 0"
-              >
+              <div class="border-bottom" style="padding-left: 16px" :class="{ 'text-red': x.B2BCommissionType == 1 }"
+                v-if="x.PriceDiscountType != 0">
                 {{ x.B2BCommissionType == 1 ? "￥" : ""
                 }}{{ x.B2BCommissionMoney
                 }}{{ x.B2BCommissionType == 0 ? "%" : "" }}
@@ -150,82 +101,45 @@
         </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-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"
-          />
+          <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="EditCourse(props.row, 1)"
-            />
-            <q-btn
-              flat
-              size="xs"
-              icon="edit"
-              color="accent"
-              style="font-weight:400"
-              label="价格设置"
-              @click="EditCourse(props.row, 2)"
-              v-if="isHavePriceAction"
-            />
-            <q-btn
-              flat
-              size="xs"
-              icon="edit"
-              color="accent"
-              style="font-weight:400;display:none;"
-              label="详情"
-              @click="goMycourse(props.row)"
-            />
+            <q-btn flat size="xs" icon="edit" color="accent" style="font-weight:400" label="编辑"
+              @click="EditCourse(props.row, 1)" />
+            <q-btn flat size="xs" icon="edit" color="accent" style="font-weight:400" label="价格设置"
+              @click="EditCourse(props.row, 2)" v-if="isHavePriceAction" />
+            <q-btn flat size="xs" icon="edit" color="accent" style="font-weight:400;display:none;" label="详情"
+              @click="goMycourse(props.row)" />
           </q-td>
         </template>
       </q-table>
-      <course-form
-        v-if="isShowCourseForm"
-        :save-obj="courseObjOption"
-        @close="closeMenuSaveForm"
-        @success="refreshPage"
-      >
+      <course-form v-if="isShowCourseForm" :save-obj="courseObjOption" @close="closeMenuSaveForm"
+        @success="refreshPage">
       </course-form>
-      <courseprice-form
-        v-if="isShowCoursePriceForm"
-        :save-obj="courseObjOption"
-        @close="closeMenuSaveForm"
-        @success="refreshPage"
-      >
+      <courseprice-form v-if="isShowCoursePriceForm" :save-obj="courseObjOption" @close="closeMenuSaveForm"
+        @success="refreshPage">
       </courseprice-form>
     </div>
   </div>
 </template>
 <script>
-import {
+  import {
     queryCoursePage,
     queryCourseCategoryTree
-} from "../../api/course/index";
-import courseForm from "../../components/course/course-form";
-import coursepriceForm from "../../components/course/courseprice-form";
-import selectTree from "../../components/common/select-tree";
-import { mapState } from "vuex";
-export default {
+  } from "../../api/course/index";
+  import courseForm from "../../components/course/course-form";
+  import coursepriceForm from "../../components/course/courseprice-form";
+  import selectTree from "../../components/common/select-tree";
+  import {
+    mapState
+  } from "vuex";
+  export default {
     meta: {
       title: "课程管理"
     },
@@ -237,19 +151,13 @@ export default {
     data() {
       return {
         currentUrl: "",
-      columns: [
-        {
+        columns: [{
             name: "CoverImg",
             label: "课程封面",
             field: "CoverImg",
             align: "left"
           },
-        // {
-        //   name: 'CourseId',
-        //   label: '课程编号',
-        //   field: 'CourseId',
-        //   align: 'left'
-        // },
+
           {
             name: "CourseName",
             required: true,
@@ -333,8 +241,7 @@ export default {
         ],
         data: [],
         loading: true,
-      ShowOpts: [
-        {
+        ShowOpts: [{
             label: "全部",
             value: "-1"
           },
@@ -463,12 +370,16 @@ export default {
         });
       }
     }
-};
+  };
+
 </script>
+<style scoped>
+  .border-bottom {
+    border-bottom: 1px dashed #EEE;
+    padding-bottom: 5px;
+    margin-bottom: 5px;
+  }
+</style>
 <style lang="sass">
-@import url('~assets/css/table.sass')
-.border-bottom
-  border-bottom: 1px dashed #EEE
-  padding-bottom: 5px
-  margin-bottom: 5px
+  @import url('~assets/css/table.sass')
 </style>