新增页面

src/api/common/common.js

+import request from '../../utils/request'
+
+/**
+ * 获取富文本编辑器Toolbar
+ */
+export function getToolBarConfig() {
+  return [
+    [{
+      label: '对齐',
+      icon: this.$q.iconSet.editor.align,
+      fixedLabel: true,
+      list: 'only-icons',
+      options: ['left', 'center', 'right', 'justify']
+    }],
+    ['bold', 'italic', 'strike', 'underline', 'subscript', 'superscript'],
+    [{
+        label: '格式',
+        icon: this.$q.iconSet.editor.formatting,
+        list: 'no-icons',
+        fixedLabel: true,
+        fixedIcon: true,
+        options: [
+          'p',
+          'h1',
+          'h2',
+          'h3',
+          'h4',
+          'h5',
+          'h6',
+          'code'
+        ]
+      },
+      {
+        label: '字号',
+        icon: this.$q.iconSet.editor.fontSize,
+        fixedLabel: true,
+        fixedIcon: true,
+        list: 'no-icons',
+        options: [
+          'size-1',
+          'size-2',
+          'size-3',
+          'size-4',
+          'size-5',
+          'size-6',
+          'size-7'
+        ]
+      },
+      {
+        label: '字体',
+        icon: this.$q.iconSet.editor.font,
+        fixedLabel: true,
+        fixedIcon: true,
+        list: 'no-icons',
+        options: [
+          'default_font',
+          'arial',
+          'arial_black',
+          'comic_sans',
+          'courier_new',
+          'impact',
+          'lucida_grande',
+          'times_new_roman',
+          'verdana'
+        ]
+      },
+      'removeFormat'
+    ],
+    ['ordered', 'outdent', 'indent'],
+  ];
+}
+
+/**
+ * 获取富文本编辑器Font
+ */
+export function getFontConfig() {
+  return {
+    arial: 'Arial',
+    arial_black: 'Arial Black',
+    comic_sans: 'Comic Sans MS',
+    courier_new: 'Courier New',
+    impact: 'Impact',
+    lucida_grande: 'Lucida Grande',
+    times_new_roman: 'Times New Roman',
+    verdana: 'Verdana'
+  };
+}
+
+/**
+ * 文件上传配置
+ */
+export function uploadConfig() {
+  var uploadMsg = {
+    imgDomain: "http://imgfile.oytour.com",
+    action: "http://upload.oytour.com/Upload?filePath=",
+  }
+  return uploadMsg;
+}

src/components/course/course-form.vue

+<template>
+  <q-dialog v-model="persistent" persistent transition-show="scale" transition-hide="scale">
+    <q-card style="width: 800px;max-width:900px;">
+      <q-card-section>
+        <div class="text-h6">{{objOption.MenuId==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="row wrap">
+          <q-input filled stack-label maxlength="20" :dense="false" v-model="objOption.CourseName" ref="CourseName"
+            class="col-6 q-pr-lg q-pb-lg" label="课程名称" :rules="[val => !!val || '请填写课程名称']" />
+          <div class="col-6 q-pr-lg q-pb-lg">
+            <selectTree v-if="TreeCategoryList&&TreeCategoryList.length>0" :treeData='TreeCategoryList'
+              :id.sync="returnString" nodeKey="CateId" :multiple="false" labelKey="CateName" childrenKey="ChildList"
+              tipText="课程分类" @getChild="getChild"></selectTree>
+          </div>
+          <div class="col-6 q-pb-lg upload-assiatant-box">
+            <q-uploader flat @uploaded="uploadSuccess" hide-upload-btn max-files="1" @rejected="onRejected" label="助教头像"
+              :max-file-size="512*1024" accept=".jpg, image/*" auto-upload :url="action">
+            </q-uploader>
+          </div>
+        </div>
+        <div class="text-caption q-my-md q-px-xs text-grey-6">课程介绍
+        </div>
+        <q-editor :toolbar="toolbar" :fonts="fonts" v-model="objOption.CourseIntro" class="col-12"
+          :definitions="{bold: {label: 'Bold', icon: null, tip: 'My bold tooltip'}}" />
+      </q-card-section>
+      <q-separator />
+      <q-card-actions align="right" class="bg-white">
+        <q-btn label="取消" color="dark" 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 {
+    queryCourseCategoryTree,
+    saveCourseInfo,
+    queryCourseInfo,
+  } from '../../api/course/index'
+  import {
+    getToolBarConfig,
+    getFontConfig
+  } from '../../api/common/common'
+  import selectTree from '../common/select-tree'
+  export default {
+    components: {
+      selectTree
+    },
+    props: {
+      saveObj: {
+        type: Object,
+        default: null
+      }
+    },
+    data() {
+      return {
+        imgDomain: "http://imgfile.oytour.com",
+        action: "http://upload.oytour.com/Upload?filePath=" + encodeURIComponent('/course/'),
+        persistent: true,
+        objOption: {
+          CourseId: 0, //课程编号
+          CoverImg: "", //课程封面图
+          CourseName: "", //课程名称
+          CourseIntro: "", //课程介绍
+          CateId: 0, //课程编号
+        },
+        optionTitle: "",
+        returnString: "",
+        saveCourseLoading: false,
+        TreeCategoryList: [], //课程分类树形列表
+        toolbar: [],
+        fonts: {}
+      }
+    },
+    mounted() {
+      this.initToolBar();
+      this.getCategorytree();
+      this.initObj()
+    },
+    methods: {
+      initToolBar() {
+        this.toolbar = getToolBarConfig();
+        this.fonts = getFontConfig();
+      },
+      getChild(obj) {
+        this.objOption.CateId = obj;
+      },
+      onRejected(rejectedEntries) {
+        this.$q.notify({
+          type: 'negative',
+          position: "top",
+          message: `文件验证失败，请重新上传`
+        })
+      },
+      uploadSuccess(info) {
+        if (info.xhr.status == '200') {
+          let res = JSON.parse(info.xhr.response)
+          this.objOption.CoverImg = this.imgDomain + res.FilePath
+        }
+      },
+      getCategorytree() {
+        this.TreeCategoryList = [];
+        var qMsg = {}
+        queryCourseCategoryTree(qMsg).then(res => {
+          this.TreeCategoryList = res.Data;
+        })
+      },
+      //初始化表单
+      initObj() {
+        if (this.saveObj && this.saveObj.CourseId > 0) {
+          queryCourseInfo({
+            CourseId: this.saveObj.CourseId
+          }).then(res => {
+            this.objOption.CourseId = res.Data.CourseId;
+            this.objOption.CoverImg = res.Data.CoverImg;
+            this.objOption.CourseName = res.Data.CourseName;
+            this.objOption.CourseIntro = res.Data.CourseIntro;
+            this.objOption.CateId = res.Data.CateId;
+          })
+          this.optionTitle = "修改课程信息"
+        } else {
+          this.optionTitle = "新增课程"
+          this.objOption.CourseId = 0;
+          this.objOption.CoverImg = "";
+          this.objOption.CourseName = "";
+          this.objOption.CourseIntro = "";
+          this.objOption.CateId = 0;
+        }
+      },
+      //关闭弹窗
+      closeCourseForm() {
+        this.$emit('close')
+        this.persistent = false
+      },
+      //保存菜单
+      saveCourse() {
+        this.saveCourseLoading = true
+        saveCourseInfo(this.objOption).then(res => {
+          this.saveCourseLoading = false
+          this.$q.notify({
+            icon: 'iconfont icon-chenggong',
+            color: 'accent',
+            timeout: 2000,
+            message: '数据保存成功！',
+            position: 'top'
+          })
+          this.$emit("success")
+          this.closeSaveForm()
+        }).catch(() => {
+          this.saveCourseLoading = false
+        })
+      }
+    },
+  }
+
+</script>

src/components/system/role-form.vue

@@ -18,14 +18,14 @@
         </div>
         <div class="text-caption q-mb-lg q-px-md text-grey-6">权限设置</div>
         <div class="row wrap">
-          <!-- <div class="q-pa-md q-gutter-sm">
+          <div class="q-pa-md q-gutter-sm">
             <q-tree :nodes="TreeMenuList" node-key="MenuId" label-key="MenuName" children-key="SubList"
               tick-strategy="leaf-filtered" default-expand-all :ticked.sync="checkMenuArray" no-connectors>
             </q-tree>
-          </div> -->
-          <selectTree v-if="TreeMenuList&&TreeMenuList.length>0" :treeData='TreeMenuList' :id.sync="returnString"
+          </div>
+          <!-- <selectTree v-if="TreeMenuList&&TreeMenuList.length>0" :treeData='TreeMenuList' :id.sync="returnString"
             nodeKey="MenuId" :multiple="false" labelKey="MenuName" childrenKey="SubList" tipText="课程分类"
-            @getChild="getChild"></selectTree>
+            @getChild="getChild"></selectTree> -->
         </div>
       </q-card-section>
       <q-separator />

src/pages/system/menu.vue

@@ -256,6 +256,8 @@
               that.getmenulist();
             }
           })
+        }).onCancel(() => {
+          obj.Status = obj.Status == 1 ? 0 : 1;
         });
       }
     }

src/pages/system/role.vue

@@ -210,6 +210,8 @@
               that.getRolelist();
             }
           })
+        }).onCancel(() => {
+          obj.Status = obj.Status == 1 ? 0 : 1;
         });
       }
     }