课程页面修改

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,325 +101,285 @@
         </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 {
-  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 {
-  meta: {
-    title: "课程管理"
-  },
-  components: {
-    courseForm,
-    selectTree,
-    coursepriceForm
-  },
-  data() {
-    return {
-      currentUrl: "",
-      columns: [
-        {
-          name: "CoverImg",
-          label: "课程封面",
-          field: "CoverImg",
-          align: "left"
-        },
-        // {
-        //   name: 'CourseId',
-        //   label: '课程编号',
-        //   field: 'CourseId',
-        //   align: 'left'
-        // },
-        {
-          name: "CourseName",
-          required: true,
-          label: "课程名称",
-          align: "left",
-          field: row => row.CourseName
-        },
-        {
-          name: "CateName",
-          required: true,
-          label: "系列",
-          align: "left",
-          field: row => row.CateName
-        },
-        {
-          name: "OriginalPrice",
-          required: true,
-          label: "原价",
-          align: "left",
-          field: row => row.OriginalPrice.toFixed(2)
-        },
-        {
-          name: "SellPrice",
-          required: true,
-          label: "售价",
-          align: "left",
-          field: row => row.SellPrice.toFixed(2)
-        },
-        {
-          name: "PreferentialList",
-          required: true,
-          label: "优惠政策",
-          align: "left",
-          field: row => row.PreferentialList
-        },
-        {
-          name: "PreferentialListSellCommission",
-          required: true,
-          label: "销售佣金",
-          align: "left",
-          field: row => row.PreferentialList
-        },
-        {
-          name: "PreferentialListB2BCommission",
-          required: true,
-          label: "同行佣金",
-          align: "left",
-          field: row => row.PreferentialList
-        },
-        {
-          name: "ClassHours",
-          label: "课时长度",
-          field: "ClassHours",
-          align: "left",
-          format: (val, row) => `${val}课时`
-        },
+  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 {
+    meta: {
+      title: "课程管理"
+    },
+    components: {
+      courseForm,
+      selectTree,
+      coursepriceForm
+    },
+    data() {
+      return {
+        currentUrl: "",
+        columns: [{
+            name: "CoverImg",
+            label: "课程封面",
+            field: "CoverImg",
+            align: "left"
+          },
 
-        {
-          name: "CreateByName",
-          label: "创建人",
-          field: "CreateByName",
-          align: "left"
-        },
-        {
-          name: "UpdateTimeStr",
-          label: "更新时间",
-          field: "UpdateTimeStr",
-          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"
-        }
-      ],
-      msg: {
-        pageIndex: 1,
-        pageSize: 12,
-        rowsPerPage: 12,
-        CourseName: "",
-        QCateIds: "",
-        IsQPrice: 1,
-        Status: "-1"
-      },
-      //课程分类树形列表
-      TreeCategoryList: [],
-      returnString: [], //默认值
-      pageCount: 0,
-      isShowCourseForm: false, //是否显示课程表单
-      isShowCoursePriceForm: false, //是否显示课程价格表单
-      courseObjOption: null, //课程对象
-      isShowPriceEditBtn: 1 //是否显示价格设置
-    };
-  },
-  computed: mapState({
-    isHavePriceAction(state) {
-      if (state.user.userInfo.ActionMenuList) {
-        let action = state.user.userInfo.ActionMenuList.find(x => {
-          if (x.FunctionCode == "Edit_CoursePrice") {
-            return x;
+          {
+            name: "CourseName",
+            required: true,
+            label: "课程名称",
+            align: "left",
+            field: row => row.CourseName
+          },
+          {
+            name: "CateName",
+            required: true,
+            label: "系列",
+            align: "left",
+            field: row => row.CateName
+          },
+          {
+            name: "OriginalPrice",
+            required: true,
+            label: "原价",
+            align: "left",
+            field: row => row.OriginalPrice.toFixed(2)
+          },
+          {
+            name: "SellPrice",
+            required: true,
+            label: "售价",
+            align: "left",
+            field: row => row.SellPrice.toFixed(2)
+          },
+          {
+            name: "PreferentialList",
+            required: true,
+            label: "优惠政策",
+            align: "left",
+            field: row => row.PreferentialList
+          },
+          {
+            name: "PreferentialListSellCommission",
+            required: true,
+            label: "销售佣金",
+            align: "left",
+            field: row => row.PreferentialList
+          },
+          {
+            name: "PreferentialListB2BCommission",
+            required: true,
+            label: "同行佣金",
+            align: "left",
+            field: row => row.PreferentialList
+          },
+          {
+            name: "ClassHours",
+            label: "课时长度",
+            field: "ClassHours",
+            align: "left",
+            format: (val, row) => `${val}课时`
+          },
+
+          {
+            name: "CreateByName",
+            label: "创建人",
+            field: "CreateByName",
+            align: "left"
+          },
+          {
+            name: "UpdateTimeStr",
+            label: "更新时间",
+            field: "UpdateTimeStr",
+            align: "left"
+          },
+          {
+            name: "Status",
+            label: "状态",
+            align: "left",
+            field: "Status"
+          },
+          {
+            name: "optioned",
+            label: "操作",
+            field: "CourseId"
           }
-        });
-        return action && action.FunctionCode;
-      }
-      return false;
-    }
-  }),
-  mounted() {
-    this.getCategorytree();
-    this.currentUrl = this.$route.path;
-    this.getcourselist();
-  },
-  methods: {
-    gotoSub(obj, routeStr) {
-      var tempStr = "/course/" + routeStr + "?CourseId=" + obj.CourseId;
-      this.$router.push({
-        path: tempStr
-      });
+        ],
+        data: [],
+        loading: true,
+        ShowOpts: [{
+            label: "全部",
+            value: "-1"
+          },
+          {
+            label: "正常",
+            value: "0"
+          },
+          {
+            label: "删除",
+            value: "1"
+          }
+        ],
+        msg: {
+          pageIndex: 1,
+          pageSize: 12,
+          rowsPerPage: 12,
+          CourseName: "",
+          QCateIds: "",
+          IsQPrice: 1,
+          Status: "-1"
+        },
+        //课程分类树形列表
+        TreeCategoryList: [],
+        returnString: [], //默认值
+        pageCount: 0,
+        isShowCourseForm: false, //是否显示课程表单
+        isShowCoursePriceForm: false, //是否显示课程价格表单
+        courseObjOption: null, //课程对象
+        isShowPriceEditBtn: 1 //是否显示价格设置
+      };
     },
-    //分类改变
-    getChild(cateObj) {
-      var tempStr = "";
-      if (cateObj && cateObj != "") {
-        tempStr = cateObj;
+    computed: mapState({
+      isHavePriceAction(state) {
+        if (state.user.userInfo.ActionMenuList) {
+          let action = state.user.userInfo.ActionMenuList.find(x => {
+            if (x.FunctionCode == "Edit_CoursePrice") {
+              return x;
+            }
+          });
+          return action && action.FunctionCode;
+        }
+        return false;
       }
-      this.msg.QCateIds = tempStr;
-      this.msg.pageIndex = 1;
+    }),
+    mounted() {
+      this.getCategorytree();
+      this.currentUrl = this.$route.path;
       this.getcourselist();
     },
-    getCategorytree() {
-      this.TreeCategoryList = [];
-      var qMsg = {};
-      queryCourseCategoryTree(qMsg).then(res => {
-        this.TreeCategoryList = res.Data;
-      });
-    },
-    //重新查询
-    resetSearch() {
-      this.msg.pageIndex = 1;
-      this.getcourselist();
-    },
-    //翻页
-    changePage(val) {
-      this.msg.pageIndex = val;
-      this.getcourselist();
-    },
-    //获取菜单分页列表
-    getcourselist() {
-      this.loading = true;
-      queryCoursePage(this.msg)
-        .then(res => {
-          this.loading = false;
-          this.data = res.Data.PageData;
-          this.pageCount = res.Data.PageCount;
-        })
-        .catch(() => {
-          this.loading = false;
+    methods: {
+      gotoSub(obj, routeStr) {
+        var tempStr = "/course/" + routeStr + "?CourseId=" + obj.CourseId;
+        this.$router.push({
+          path: tempStr
+        });
+      },
+      //分类改变
+      getChild(cateObj) {
+        var tempStr = "";
+        if (cateObj && cateObj != "") {
+          tempStr = cateObj;
+        }
+        this.msg.QCateIds = tempStr;
+        this.msg.pageIndex = 1;
+        this.getcourselist();
+      },
+      getCategorytree() {
+        this.TreeCategoryList = [];
+        var qMsg = {};
+        queryCourseCategoryTree(qMsg).then(res => {
+          this.TreeCategoryList = res.Data;
+        });
+      },
+      //重新查询
+      resetSearch() {
+        this.msg.pageIndex = 1;
+        this.getcourselist();
+      },
+      //翻页
+      changePage(val) {
+        this.msg.pageIndex = val;
+        this.getcourselist();
+      },
+      //获取菜单分页列表
+      getcourselist() {
+        this.loading = true;
+        queryCoursePage(this.msg)
+          .then(res => {
+            this.loading = false;
+            this.data = res.Data.PageData;
+            this.pageCount = res.Data.PageCount;
+          })
+          .catch(() => {
+            this.loading = false;
+          });
+      },
+      //刷新页面
+      refreshPage() {
+        this.isShowCourseForm = false;
+        this.isShowCoursePriceForm = false;
+        this.getcourselist();
+      },
+      //新增修改课程及价格
+      EditCourse(obj, type) {
+        if (obj) {
+          this.courseObjOption = obj;
+        } else {
+          this.courseObjOption = null;
+        }
+        if (type == 1) {
+          this.isShowCourseForm = true;
+        } else {
+          this.isShowCoursePriceForm = true;
+        }
+      },
+      //关闭弹窗
+      closeMenuSaveForm() {
+        this.isShowCourseForm = false;
+        this.isShowCoursePriceForm = false;
+      },
+      //跳转至我的课程
+      goMycourse(obj) {
+        var tempStr = "/course/courseinfo?CourseId=" + obj.CourseId;
+        this.$router.push({
+          path: tempStr
         });
-    },
-    //刷新页面
-    refreshPage() {
-      this.isShowCourseForm = false;
-      this.isShowCoursePriceForm = false;
-      this.getcourselist();
-    },
-    //新增修改课程及价格
-    EditCourse(obj, type) {
-      if (obj) {
-        this.courseObjOption = obj;
-      } else {
-        this.courseObjOption = null;
-      }
-      if (type == 1) {
-        this.isShowCourseForm = true;
-      } else {
-        this.isShowCoursePriceForm = true;
       }
-    },
-    //关闭弹窗
-    closeMenuSaveForm() {
-      this.isShowCourseForm = false;
-      this.isShowCoursePriceForm = false;
-    },
-    //跳转至我的课程
-    goMycourse(obj) {
-      var tempStr = "/course/courseinfo?CourseId=" + obj.CourseId;
-      this.$router.push({
-        path: tempStr
-      });
     }
-  }
-};
+  };
+
 </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>