页面修改

src/components/course/course-form.vue

 <template>
-  <q-dialog
-    v-model="persistent"
-    persistent
-    content-class="bg-grey-1"
-    transition-show="scale"
-    transition-hide="scale"
-  >
+  <q-dialog v-model="persistent" persistent content-class="bg-grey-1" transition-show="scale" transition-hide="scale">
     <q-card style="width: 800px; max-width: 900px">
       <q-card-section>
         <div class="text-h6">
@@ -15,460 +9,185 @@
       <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="row wrap">
-          <q-input
-            filled
-            stack-label
-            :dense="false"
-            v-model="objOption.CourseName"
-            ref="CourseName"
-            class="col-6 q-pr-lg q-pb-lg"
-            label="课程名称"
-            :rules="[val => !!val || '请填写课程名称']"
-          />
-          <q-select
-            filled
-            stack-label
-            option-value="TId"
-            option-label="TeacherName"
-            v-model="chooseTeacher"
-            ref="Teacher_Id"
-            :options="TeacherList"
-            label="教师团队"
-            :dense="false"
-            class="col-6 q-pr-lg q-pb-lg"
-            emit-value
-            map-options
-            multiple
-          />
+          <q-input filled stack-label :dense="false" v-model="objOption.CourseName" ref="CourseName"
+            class="col-6 q-pr-lg q-pb-lg" label="课程名称" :rules="[val => !!val || '请填写课程名称']" />
+          <q-select filled stack-label option-value="TId" option-label="TeacherName" v-model="chooseTeacher"
+            ref="Teacher_Id" :options="TeacherList" label="教师团队" :dense="false" class="col-6 q-pr-lg q-pb-lg" emit-value
+            map-options multiple />
         </div>
         <div class="row wrap">
           <div class="col-6 q-pb-lg q-pr-lg">
-            <q-uploader
-              :style="{ backgroundImage: 'url(' + objOption.CoverImg + ')' }"
-              style="width: auto; height: 139px"
-              flat
-              hide-upload-btn
-              max-files="1"
-              label="课程封面"
-              accept=".jpg, image/*"
-              :factory="uploadFile"
-              auto-upload
-            >
+            <q-uploader :style="{ backgroundImage: 'url(' + objOption.CoverImg + ')' }"
+              style="width: auto; height: 139px" flat hide-upload-btn max-files="1" label="课程封面" accept=".jpg, image/*"
+              :factory="uploadFile" auto-upload>
             </q-uploader>
           </div>
           <div class="col-6 q-pr-lg q-pb-lg">
-            <q-input
-              v-model="objOption.CourseFeature"
-              filled
-              type="textarea"
-              placeholder="课程特色"
-            />
-          </div>
-        </div>
-        <div
-          class="text-caption q-mb-lg q-px-md text-grey-6"
-          v-if="isShowPrice == 1"
-        >
+            <q-input v-model="objOption.CourseFeature" filled type="textarea" placeholder="课程特色" />
+          </div>
+        </div>
+        <div class="text-caption q-mb-lg q-px-md text-grey-6" v-if="isShowPrice == 1">
           价格设置
-          <q-toggle
-            style="float: right"
-            size="md"
-            left-label
-            label="阶梯定价"
-            color="primary"
-            :false-value="0"
-            :true-value="1"
-            v-model="objOption.IsOpenStepPrice"
-          />
+          <q-toggle style="float: right" size="md" left-label label="阶梯定价" color="primary" :false-value="0"
+            :true-value="1" v-model="objOption.IsOpenStepPrice" />
         </div>
         <div class="row wrap" v-if="isShowPrice == 1">
           <div class="col-6">
-            <q-input
-              filled
-              stack-label
-              :dense="false"
-              v-model="objOption.OriginalPrice"
-              ref="OriginalPrice"
-              class="col-6 q-pr-lg q-pb-lg"
-              label="原价"
-              @keyup.native="checkPrice(objOption, 'OriginalPrice')"
-              :rules="[val => !!val || '请填写原价']"
-            />
+            <q-input filled stack-label :dense="false" v-model="objOption.OriginalPrice" ref="OriginalPrice"
+              class="col-6 q-pr-lg q-pb-lg" label="原价" @keyup.native="checkPrice(objOption, 'OriginalPrice')"
+              :rules="[val => !!val || '请填写原价']" />
           </div>
           <div class="col-6">
-            <q-input
-              filled
-              stack-label
-              :dense="false"
-              v-model="objOption.SellPrice"
-              ref="SellPrice"
-              class="col-6 q-pr-lg q-pb-lg"
-              label="卖价"
-              @keyup.native="checkPrice(objOption, 'SellPrice')"
-              :rules="[val => !!val || '请填写卖价']"
-            />
+            <q-input filled stack-label :dense="false" v-model="objOption.SellPrice" ref="SellPrice"
+              class="col-6 q-pr-lg q-pb-lg" label="卖价" @keyup.native="checkPrice(objOption, 'SellPrice')"
+              :rules="[val => !!val || '请填写卖价']" />
           </div>
         </div>
         <div class="row wrap" style="margin: 20px 0" v-if="isShowPrice == 1">
           <div class="col-6">
-            <q-btn
-              v-if="objOption.IsOpenStepPrice == 1"
-              size="10px"
-              @click="addStepPrice()"
-              round
-              color="primary"
-              icon="iconfont icon-img_haha"
-            />
+            <q-btn v-if="objOption.IsOpenStepPrice == 1" size="10px" @click="addStepPrice()" round color="primary"
+              icon="iconfont icon-img_haha" />
           </div>
         </div>
         <template v-if="objOption.IsOpenStepPrice == 1 && isShowPrice == 1">
-          <div
-            class="row wrap"
-            v-for="(item, index) in ladderPriceList"
-            :key="index"
-          >
+          <div class="row wrap" v-for="(item, index) in ladderPriceList" :key="index">
             <div class="col-6">
-              <q-input
-                filled
-                stack-label
-                v-model="item.PersionNum"
-                @keyup.native="checkInteger(item, 'PersionNum')"
-                :dense="false"
-                class="col-6 q-pr-lg q-pb-lg"
-                label="人"
-              />
+              <q-input filled stack-label v-model="item.PersionNum" @keyup.native="checkInteger(item, 'PersionNum')"
+                :dense="false" class="col-6 q-pr-lg q-pb-lg" label="人" />
             </div>
             <div class="col-6" style="position: relative">
-              <q-input
-                filled
-                stack-label
-                v-model="item.PersionPrice"
-                @keyup.native="checkPrice(item, 'PersionPrice')"
-                :dense="false"
-                class="col-6 q-pr-lg q-pb-lg"
-                label="价格"
-              />
-              <q-btn
-                style="position: absolute; right: -5px; top: 20px"
-                size="6px"
-                @click="delStepPrice(index)"
-                round
-                color="red"
-                icon="iconfont icon-guanbi1"
-              />
+              <q-input filled stack-label v-model="item.PersionPrice" @keyup.native="checkPrice(item, 'PersionPrice')"
+                :dense="false" class="col-6 q-pr-lg q-pb-lg" label="价格" />
+              <q-btn style="position: absolute; right: -5px; top: 20px" size="6px" @click="delStepPrice(index)" round
+                color="red" icon="iconfont icon-guanbi1" />
             </div>
           </div>
         </template>
-        <div
-          class="text-caption q-mb-lg q-px-md text-grey-6"
-          v-if="isShowPrice == 1"
-        >
+        <div class="text-caption q-mb-lg q-px-md text-grey-6" v-if="isShowPrice == 1">
           可续费课程
-          <q-toggle
-            style="float: right"
-            size="md"
-            left-label
-            label="可续费课程"
-            color="primary"
-            :false-value="0"
-            :true-value="1"
-            v-model="objOption.IsRenew"
-          />
+          <q-toggle style="float: right" size="md" left-label label="可续费课程" color="primary" :false-value="0"
+            :true-value="1" v-model="objOption.IsRenew" />
         </div>
         <div class="row wrap" v-if="objOption.IsRenew == 1 && isShowPrice == 1">
           <div class="col-6">
-            <q-input
-              filled
-              stack-label
-              :dense="false"
-              v-model="objOption.RenewOgPrice"
-              ref="RenewOgPrice"
-              class="col-6 q-pr-lg q-pb-lg"
-              label="续费原价"
-              @keyup.native="checkPrice(objOption, 'RenewOgPrice')"
-              :rules="[val => !!val || '请填写续费原价']"
-            />
+            <q-input filled stack-label :dense="false" v-model="objOption.RenewOgPrice" ref="RenewOgPrice"
+              class="col-6 q-pr-lg q-pb-lg" label="续费原价" @keyup.native="checkPrice(objOption, 'RenewOgPrice')"
+              :rules="[val => !!val || '请填写续费原价']" />
           </div>
           <div class="col-6">
-            <q-input
-              filled
-              stack-label
-              :dense="false"
-              v-model="objOption.RenewSlPrice"
-              ref="RenewSlPrice"
-              class="col-6 q-pr-lg q-pb-lg"
-              label="续费售价"
-              @keyup.native="checkPrice(objOption, 'RenewSlPrice')"
-              :rules="[val => !!val || '请填写续费售价']"
-            />
+            <q-input filled stack-label :dense="false" v-model="objOption.RenewSlPrice" ref="RenewSlPrice"
+              class="col-6 q-pr-lg q-pb-lg" label="续费售价" @keyup.native="checkPrice(objOption, 'RenewSlPrice')"
+              :rules="[val => !!val || '请填写续费售价']" />
           </div>
         </div>
         <div class="row wrap">
           <div class="col-6">
-            <q-input
-              filled
-              stack-label
-              :disable="!isHaveCourseHoursEdit"
-              @keyup.native="checkPrice(objOption, 'ClassHours')"
-              reverse-fill-mask
-              v-model="objOption.ClassHours"
-              ref="ClassHours"
-              class="col-6 q-pr-lg q-pb-lg"
-              label="课时数量"
-              :rules="[val => !!val || '请填写课时信息']"
-            />
+            <q-input filled stack-label :disable="!isHaveCourseHoursEdit"
+              @keyup.native="checkPrice(objOption, 'ClassHours')" reverse-fill-mask v-model="objOption.ClassHours"
+              ref="ClassHours" class="col-6 q-pr-lg q-pb-lg" label="课时数量" :rules="[val => !!val || '请填写课时信息']" />
           </div>
           <div class="col-6">
-            <q-select
-              filled
-              stack-label
-              @input="getCourseSubject(objOption.CateId)"
-              option-value="CateId"
-              option-label="CateName"
-              v-model="objOption.CateId"
-              ref="CateId"
-              :options="TreeCategoryList"
-              label="所属系列"
-              class="col-6 q-pr-lg q-pb-lg"
-              emit-value
-              map-options
-              :rules="[val => !!val || '请选择课程所属系列']"
-            />
+            <q-select filled stack-label @input="changeCourseSubject(objOption.CateId)" option-value="CateId"
+              option-label="CateName" v-model="objOption.CateId" ref="CateId" :options="TreeCategoryList" label="所属系列"
+              class="col-6 q-pr-lg q-pb-lg" emit-value map-options :rules="[val => !!val || '请选择课程所属系列']" />
           </div>
         </div>
         <div class="row wrap">
           <div class="col-6">
-            <q-select
-              filled
-              stack-label
-              option-value="Id"
-              disable
-              option-label="SubjectName"
-              v-model="objOption.CourseSubject"
-              ref="CourseSubject"
-              :options="courseSubjectList"
-              label="所属科目"
-              class="col-6 q-pr-lg q-pb-lg"
-              emit-value
-              map-options
-            />
+            <q-select filled stack-label option-value="Id" disable option-label="SubjectName"
+              v-model="objOption.CourseSubject" ref="CourseSubject" :options="courseSubjectList" label="所属科目"
+              class="col-6 q-pr-lg q-pb-lg" emit-value map-options />
           </div>
           <div class="col-6">
-            <q-select
-              filled
-              stack-label
-              option-value="Id"
-              option-label="Name"
-              v-model="objOption.CourseRate"
-              ref="CourseRate"
-              :options="courseLevelList"
-              label="课程等级"
-              class="col-6 q-pr-lg q-pb-lg"
-              emit-value
-              map-options
-            />
+            <q-select filled stack-label option-value="Id" option-label="Name" v-model="objOption.CourseRate"
+              ref="CourseRate" :options="courseLevelList" label="课程等级" class="col-6 q-pr-lg q-pb-lg" emit-value
+              map-options />
           </div>
         </div>
 
         <div class="row">
-          <q-field
-            label="是否支持约课报名"
-            stack-label
-            filled
-            class="col-6 q-pr-lg q-pb-lg"
-          >
+          <q-field label="是否支持约课报名" stack-label filled class="col-6 q-pr-lg q-pb-lg">
             <template v-slot:control>
               <div class="row col-12">
-                <q-radio
-                  v-model="objOption.IsScrollClass"
-                  :val="0"
-                  label="否"
-                  size="xs"
-                />
-                <q-radio
-                  v-model="objOption.IsScrollClass"
-                  :val="1"
-                  label="是"
-                  size="xs"
-                />
+                <q-radio v-model="objOption.IsScrollClass" :val="0" label="否" size="xs" />
+                <q-radio v-model="objOption.IsScrollClass" :val="1" label="是" size="xs" />
               </div>
             </template>
           </q-field>
-          <q-select
-            filled
-            stack-label
-            option-value="Id"
-            option-label="Name"
-            v-model="objOption.CourseTimeId"
-            ref="CourseTime"
-            :options="CourseTimeList"
-            label="关联上课时段"
-            class="col-6 q-pr-lg q-pb-lg"
-            emit-value
-            map-options
-          />
+          <q-select filled stack-label option-value="Id" option-label="Name" v-model="objOption.CourseTimeId"
+            ref="CourseTime" :options="CourseTimeList" label="关联上课时段" class="col-6 q-pr-lg q-pb-lg" emit-value
+            map-options />
         </div>
         <div class="row" v-if="objOption.IsScrollClass==1">
-          <q-input
-            filled
-            stack-label
-            v-model="objOption.ScrollMinNum"
-            ref="ScrollMinNum"
-            class="col-6 q-pr-lg q-pb-lg"
-            label="最小上课人数"
-            :rules="[val => !!val || '请填写最小上课人数']"
-          />
-          <q-input
-            filled
-            stack-label
-            v-model="objOption.ScrollMaxNum"
-            ref="ScrollMaxNum"
-            class="col-6 q-pr-lg q-pb-lg"
-            label="最大上课人数"
-            :rules="[val => !!val || '请填写最大上课人数']"
-          />
+          <q-input filled stack-label v-model="objOption.ScrollMinNum" ref="ScrollMinNum" class="col-6 q-pr-lg q-pb-lg"
+            label="最小上课人数" :rules="[val => !!val || '请填写最小上课人数']" />
+          <q-input filled stack-label v-model="objOption.ScrollMaxNum" ref="ScrollMaxNum" class="col-6 q-pr-lg q-pb-lg"
+            label="最大上课人数" :rules="[val => !!val || '请填写最大上课人数']" />
         </div>
         <div class="row wrap">
           <div class="col-6">
-            <q-select
-              filled
-              stack-label
-              option-value="Id"
-              option-label="Name"
-              v-model="CourseEmphasis"
-              multiple
-              use-chips
-              ref="CourseEmphasis"
-              :options="keynoteList"
-              label="课程重点"
-              class="col-6 q-pr-lg q-pb-lg"
-              emit-value
-              map-options
-            />
+            <q-select filled stack-label option-value="Id" option-label="Name" v-model="CourseEmphasis" multiple
+              use-chips ref="CourseEmphasis" :options="keynoteList" label="课程重点" class="col-6 q-pr-lg q-pb-lg"
+              emit-value map-options />
           </div>
           <div class="col-6 q-pb-lg q-pr-lg">
-            <q-uploader
-              :style="{ backgroundImage: 'url(' + objOption.B2BIcon + ')' }"
-              style="width: auto; "
-              flat
-              hide-upload-btn
-              max-files="1"
-              label="图标"
-              accept=".jpg, image/*"
-              :factory="uploadFile2"
-              auto-upload
-            >
+            <q-uploader :style="{ backgroundImage: 'url(' + objOption.B2BIcon + ')' }" style="width: auto; " flat
+              hide-upload-btn max-files="1" label="图标" accept=".jpg, image/*" :factory="uploadFile2" auto-upload>
             </q-uploader>
-            <q-input
-              filled
-              label="背景颜色"
-              v-model="objOption.B2BBackground"
-              :rules="['anyColor']"
-              class="my-input"
-            >
+            <q-input filled label="背景颜色" v-model="objOption.B2BBackground" :rules="['anyColor']" class="my-input">
               <template v-slot:append>
                 <q-icon name="colorize" class="cursor-pointer">
-                  <q-popup-proxy
-                    transition-show="scale"
-                    transition-hide="scale"
-                  >
+                  <q-popup-proxy transition-show="scale" transition-hide="scale">
                     <q-color v-model="objOption.B2BBackground" />
                   </q-popup-proxy>
                 </q-icon>
               </template>
             </q-input>
-            <img
-              id="background"
-              :src="objOption.B2BIcon"
-              height="100"
-              width="100"
-              crossorigin="anonymous"
-              style="display:none"
-            />
+            <img id="background" :src="objOption.B2BIcon" height="100" width="100" crossorigin="anonymous"
+              style="display:none" />
           </div>
         </div>
         <div class="row wrap">
           <div class="col-12 q-pr-lg q-pb-lg">
-            <q-input
-              v-model="objOption.ContractInfo"
-              filled
-              type="textarea"
-              placeholder="合同补充协议"
-            />
+            <q-input v-model="objOption.ContractInfo" filled type="textarea" placeholder="合同补充协议" />
           </div>
         </div>
         <div class="text-caption q-my-md q-px-xs text-grey-6">课程介绍</div>
-        <ext-editor
-          :defaultMsg="objOption.CourseIntro"
-          classStr="col-12"
-          @getEditValue="getEditValue"
-        ></ext-editor>
+        <ext-editor :defaultMsg="objOption.CourseIntro" classStr="col-12" @getEditValue="getEditValue"></ext-editor>
         <div class="row wrap">
           <div class="col-9">
             <span>上架端口：</span>
             <template v-for="(item, index) in SaleplatList">
-              <q-checkbox
-                v-model="choosePlat"
-                :label="item.Name"
-                :val="item.Id"
-                :key="index"
-              />
+              <q-checkbox v-model="choosePlat" :label="item.Name" :val="item.Id" :key="index" />
             </template>
           </div>
           <div class="col-3">
-            <q-toggle
-              style="float: right"
-              size="md"
-              left-label
-              label="K12课程"
-              color="primary"
-              :false-value="0"
-              :true-value="1"
-              v-model="objOption.IsKCourse"
-            />
+            <q-toggle style="float: right" size="md" left-label label="K12课程" color="primary" :false-value="0"
+              :true-value="1" v-model="objOption.IsKCourse" />
           </div>
         </div>
         <div class="row col-12" v-if="choosePlat.find(e => e == 4)">
           <span class="q-mb-sm">选择分类：</span>
           <q-card class="full-width">
-            <q-tree
-              class="col-sm-6"
-              :nodes="goodClassify"
-              node-key="Id"
-              label-key="Name"
-              children-key="ChildList"
-              tick-strategy="strict"
-              :ticked.sync="chooseGoodsClassify"
-              default-expand-all
-              @update:ticked="handleCheckChange"
-            />
+            <q-tree class="col-sm-6" :nodes="goodClassify" node-key="Id" label-key="Name" children-key="ChildList"
+              tick-strategy="strict" :ticked.sync="chooseGoodsClassify" default-expand-all
+              @update:ticked="handleCheckChange" />
           </q-card>
         </div>
       </q-card-section>
       <q-separator />
       <q-card-actions align="right" class="bg-white">
-        <q-btn
-          label="取消"
-          flat
-          color="grey-10"
-          style="font-weight: 400 !important"
-          @click="closeCourseForm"
-        />
-        <q-btn
-          label="立即提交"
-          color="accent q-px-md"
-          style="font-weight: 400 !important"
-          :loading="saveCourseLoading"
-          @click="saveCourse"
-        />
+        <q-btn label="取消" flat color="grey-10" style="font-weight: 400 !important" @click="closeCourseForm" />
+        <q-btn label="立即提交" color="accent q-px-md" style="font-weight: 400 !important" :loading="saveCourseLoading"
+          @click="saveCourse" />
       </q-card-actions>
     </q-card>
   </q-dialog>
 </template>
 
 <script>
-import ColorThief from "colorthief";
-import {
+  import ColorThief from "colorthief";
+  import {
     queryCourseCategoryTree,
     saveCourseInfo,
     queryCourseInfo,
@@ -476,13 +195,21 @@ import {
     getCourseRate,
     getCourseSubject,
     getCourseEmphasisEnumList
-} from "../../api/course/index";
-import { getTeacherDropDownList } from "../../api/school/index";
-import { UploadSelfFile } from "../../api/common/common";
-import { getScrollCourseTimeList } from "../../api/course/roll";
-import extEditor from "../common/ext-editor";
-import { mapState } from "vuex";
-export default {
+  } from "../../api/course/index";
+  import {
+    getTeacherDropDownList
+  } from "../../api/school/index";
+  import {
+    UploadSelfFile
+  } from "../../api/common/common";
+  import {
+    getScrollCourseTimeList
+  } from "../../api/course/roll";
+  import extEditor from "../common/ext-editor";
+  import {
+    mapState
+  } from "vuex";
+  export default {
     components: {
       extEditor
     },
@@ -547,14 +274,17 @@ export default {
       };
     },
     created() {
+      this.getCategorytree();
       this.GetTeacherList();
       this.getSaleplat();
+      //获取电商商品分类
       this.getGoodsClassify();
       this.getCourseRateList();
       this.getCourseEmphasisList(); //获取课程重点枚举列表
       this.initObj();
     },
     computed: mapState({
+      //是否有编辑课时权限
       isHaveCourseHoursEdit(state) {
         if (
           state.user.userInfo &&
@@ -578,7 +308,7 @@ export default {
     },
     methods: {
       //根据系列改变获取所属科目
-    getCourseSubject(Id) {
+      changeCourseSubject(Id) {
         if (Id > 0) {
           let val = this.TreeCategoryList.find(x => x.CateId == Id);
           this.objOption.CourseSubject = val.CourseSubject;
@@ -633,13 +363,6 @@ export default {
       getEditValue(obj) {
         this.objOption.CourseIntro = obj;
       },
-    getChild(obj) {
-      if (obj == "") {
-        this.objOption.CateId = 0;
-      } else {
-        this.objOption.CateId = obj;
-      }
-    },
       uploadFile(files) {
         UploadSelfFile("course", files[0], res => {
           if (res.Code == 1) {
@@ -698,17 +421,12 @@ export default {
           return string;
         }
       },
+      //获取课程系列
       getCategorytree() {
         this.TreeCategoryList = [];
         var qMsg = {};
         queryCourseCategoryTree(qMsg).then(res => {
           this.TreeCategoryList = res.Data;
-        // if (this.objOption.CateId > 0) {
-        //   let val = this.TreeCategoryList.find(
-        //     x => x.CourseSubject == this.objOption.CateId
-        //   );
-        //   this.objOption.CourseSubject = val.CourseSubject;
-        // }
         });
       },
       //新增阶梯定价
@@ -791,7 +509,6 @@ export default {
               });
             }
             this.defaultArray.push(res.Data.CateId);
-          this.getCategorytree();
             this.handleCheckChange();
           });
           this.optionTitle = "修改课程信息";
@@ -820,7 +537,6 @@ export default {
           this.objOption.ScrollMinNum = 0;
           this.objOption.ScrollMaxNum = 0;
           this.objOption.CourseTimeId = 0;
-        this.getCategorytree();
         }
       },
       //关闭弹窗
@@ -949,6 +665,7 @@ export default {
           });
         });
       },
+      //关联上课时间段
       getCourseTimeList() {
         getScrollCourseTimeList({}).then(res => {
           if (res.Code == 1) {
@@ -957,5 +674,5 @@ export default {
         });
       }
     }
-};
+  };
 </script>
\ No newline at end of file