页面修改

src/pages/course/chapter.vue

@@ -3,67 +3,36 @@
     <div class="page-search row items-center">
       <div class="col row wrap q-mr-lg q-col-gutter-md"></div>
       <div class="page-option">
-        <q-btn
-          color="accent"
-          size="sm"
-          class="q-mr-md"
-          icon="add"
-          label="编辑章节"
-          @click="EditChapter(null)"
-        />
+        <q-btn v-if="IsOperateAuth" color="accent" size="sm" class="q-mr-md" icon="add" label="编辑章节"
+          @click="EditChapter(null)" />
       </div>
     </div>
     <div class="page-content" style="height:calc(100% - 42px)">
-      <q-scroll-area
-        :thumb-style="thumbStyle"
-        :content-style="contentStyle"
-        :content-active-style="contentActiveStyle"
-        style="height: 100%; width: 100%;"
-      >
-        <el-table
-          :data="dataList"
-          v-loading="loading"
-          :expand-row-keys="expandKeys"
-          :default-expand-all="true"
-          :row-class-name="tableRowClassName"
-          class="tree-tab-chapter"
-          style="width: 100%;margin-bottom: 20px;"
-          row-key="ChapterId"
-          ref="chapterTab"
-          @row-click="rowsClick"
-          :tree-props="{ children: 'ChildList', hasChildren: 'hasChildren' }"
-        >
+      <q-scroll-area :thumb-style="thumbStyle" :content-style="contentStyle" :content-active-style="contentActiveStyle"
+        style="height: 100%; width: 100%;">
+        <el-table :data="dataList" v-loading="loading" :expand-row-keys="expandKeys" :default-expand-all="true"
+          :row-class-name="tableRowClassName" class="tree-tab-chapter" style="width: 100%;margin-bottom: 20px;"
+          row-key="ChapterId" ref="chapterTab" @row-click="rowsClick"
+          :tree-props="{ children: 'ChildList', hasChildren: 'hasChildren' }">
           <el-table-column prop="date" label="章节" width="450">
             <template slot-scope="scope">
               <div style="display: inline-block;">
                 <div class="flex q-ml-md">
-                  <div
-                    class="catalog_num"
-                    v-if="scope.row.ChapterNo.indexOf('.') == -1"
-                  >
+                  <div class="catalog_num" v-if="scope.row.ChapterNo.indexOf('.') == -1">
                     <span>
                       <i>{{ scope.row.ChapterNo }}</i>
                     </span>
                   </div>
-                  <div
-                    style="margin-left: 36px;width:360px;"
-                    class="ellipsis"
-                    v-if="scope.row.ChapterNo.indexOf('.') == -1"
-                  >
+                  <div style="margin-left: 36px;width:360px;" class="ellipsis"
+                    v-if="scope.row.ChapterNo.indexOf('.') == -1">
                     {{ scope.row.ChapterName }}
                   </div>
-                  <div
-                    v-if="scope.row.ChapterNo.indexOf('.') != -1"
-                    :style="{ marginLeft: 20 * (scope.row.ChapterNo.split('.').length+1 - 2) + 'px' }"
-                  >
+                  <div v-if="scope.row.ChapterNo.indexOf('.') != -1"
+                    :style="{ marginLeft: 20 * (scope.row.ChapterNo.split('.').length+1 - 2) + 'px' }">
                     {{ scope.row.ChapterNo }}
                   </div>
-                  <div
-                    v-if="scope.row.ChapterNo.indexOf('.') != -1"
-                    style="margin-left: 12px;"
-                    class="ellipsis"
-                    :style="{width:(350-(20 * (scope.row.ChapterNo.split('.').length+1 - 2)))+'px'}"
-                  >
+                  <div v-if="scope.row.ChapterNo.indexOf('.') != -1" style="margin-left: 12px;" class="ellipsis"
+                    :style="{width:(350-(20 * (scope.row.ChapterNo.split('.').length+1 - 2)))+'px'}">
                     {{ scope.row.ChapterName }}
                   </div>
                 </div>
@@ -77,7 +46,8 @@
           </el-table-column>
           <el-table-column prop="address" label="章节详情" width="200">
             <template slot-scope="scope">
-              <q-btn flat color="primary"  v-if="scope.row.ChapterNo.indexOf('.') != -1" @click.stop="viewDetail(scope.row)">章节详情</q-btn>
+              <q-btn flat color="primary" v-if="scope.row.ChapterNo.indexOf('.') != -1"
+                @click.stop="viewDetail(scope.row)">章节详情</q-btn>
             </template>
           </el-table-column>
           <el-table-column prop="address" label="状态" width="100">
@@ -91,28 +61,11 @@
           <el-table-column label="操作">
             <template slot-scope="scope">
               <div class="text-right op-box">
-                <q-btn
-                  size="xs"
-                  class="q-mr-md"
-                  color="dark"
-                  @click.stop="EditChapter(scope.row.ChapterId)"
-                  >修改</q-btn
-                >
-                <!--<q-btn
-                  size="xs"
-                  flat
-                  color="primary"
-                  @click.stop=""
-                  class="q-mr-md"
-                  >设置</q-btn
-                >-->
-                <q-btn
-                  size="xs"
-                  flat
-                  color="negative"
-                  @click.stop="deleteObj(scope.row)"
-                  >删除</q-btn
-                >
+                <template v-if="IsOperateAuth">
+                  <q-btn size="xs" class="q-mr-md" color="dark" @click.stop="EditChapter(scope.row.ChapterId)">修改
+                  </q-btn>
+                  <q-btn size="xs" flat color="negative" @click.stop="deleteObj(scope.row)">删除</q-btn>
+                </template>
               </div>
             </template>
           </el-table-column>
@@ -129,7 +82,8 @@
 
         <q-card-section>
           <div class="text-subtitle1 q-mb-md">章节学习内容</div>
-          <div v-html="viewObj.ChapterContent" v-if="viewObj.ChapterContent!=''" class="q-pa-md bg-grey-2 rounded-borders"></div>
+          <div v-html="viewObj.ChapterContent" v-if="viewObj.ChapterContent!=''"
+            class="q-pa-md bg-grey-2 rounded-borders"></div>
           <div class="text-grey-3 text-center" v-else>未添加内容</div>
         </q-card-section>
         <q-card-section>
@@ -148,13 +102,15 @@
 </template>
 
 <script>
-import {
+  import {
     queryChapterTree,
     batchUpdateChapterNo,
     deleteChapters
-} from "../../api/course/index";
-import { openURL } from "quasar";
-export default {
+  } from "../../api/course/index";
+  import {
+    openURL
+  } from "quasar";
+  export default {
     meta: {
       title: "章节管理"
     },
@@ -174,12 +130,10 @@ export default {
           backgroundColor: "rgba(0,0,0,0.02)",
           color: "#555"
         },
-
         contentActiveStyle: {
           backgroundColor: "#eee",
           color: "black"
         },
-
         thumbStyle: {
           right: "2px",
           borderRadius: "5px",
@@ -191,10 +145,20 @@ export default {
         updateChapters: [],
         updateNo: false,
         viewObj: null,
-      isViewer:false
+        isViewer: false,
+        IsOperateAuth: false, //是否有章节【新增、修改、删除】权限
       };
     },
     created() {
+      var localStorageData = window.localStorage["loginUserInfo"];
+      let ActionMenuList = JSON.parse(localStorageData).data.ActionMenuList
+      if (ActionMenuList && ActionMenuList.length > 0) {
+        ActionMenuList.forEach(x => {
+          if (x.FunctionCode == 'Operate_CourseChapter') {
+            this.IsOperateAuth = true;
+          }
+        })
+      }
       if (this.$route.query.CourseId) {
         this.CourseId = this.$route.query.CourseId;
         this.msg.CourseId = this.CourseId;
@@ -205,18 +169,21 @@ export default {
       this.getchaperTree();
     },
     methods: {
-    viewDetail(obj){
+      viewDetail(obj) {
         try {
-        obj.ChapterContent=decodeURIComponent(obj.ChapterContent)
-        obj.Objectives=decodeURIComponent(obj.Objectives)
-        obj.Requirement=decodeURIComponent(obj.Requirement)
+          obj.ChapterContent = decodeURIComponent(obj.ChapterContent)
+          obj.Objectives = decodeURIComponent(obj.Objectives)
+          obj.Requirement = decodeURIComponent(obj.Requirement)
         } catch (error) {
 
         }
-      this.viewObj=obj
-      this.isViewer=true
+        this.viewObj = obj
+        this.isViewer = true
       },
-    tableRowClassName({ row, rowIndex }) {
+      tableRowClassName({
+        row,
+        rowIndex
+      }) {
         if (row.ChapterNo.indexOf(".") == -1) {
           return "first-level-node";
         }
@@ -226,8 +193,7 @@ export default {
         this.$q
           .dialog({
             title: "删除确认",
-          message:
-            "删除章节节点将会连同下属章节也会一并删除且无法恢复，你确定要这样执行吗",
+            message: "删除章节节点将会连同下属章节也会一并删除且无法恢复，你确定要这样执行吗",
             cancel: {
               label: "取消删除",
               flat: true
@@ -334,29 +300,30 @@ export default {
           });
       }
     }
-};
+  };
+
 </script>
 
 <style>
-.tree-tab-chapter thead {
+  .tree-tab-chapter thead {
     display: none;
-}
+  }
 
-.tree-tab-chapter td {
+  .tree-tab-chapter td {
     border-bottom: none !important;
     padding: 5px 0 !important;
-}
+  }
 
-.tree-tab-chapter::before {
+  .tree-tab-chapter::before {
     display: none !important;
-}
+  }
 
-.tree-tab-chapter .el-table__expand-icon {
+  .tree-tab-chapter .el-table__expand-icon {
     /* display: none !important; */
     margin-right: 0 !important;
-}
+  }
 
-.tree-tab-chapter .catalog_num {
+  .tree-tab-chapter .catalog_num {
     height: 20px;
     padding-left: 14px;
     background: #d0d5db;
@@ -366,9 +333,9 @@ export default {
     left: 15px;
     top: 50%;
     margin-top: -10px;
-}
+  }
 
-.tree-tab-chapter .catalog_num > span {
+  .tree-tab-chapter .catalog_num>span {
     min-width: 24px;
     height: 24px;
     padding: 4px;
@@ -376,9 +343,9 @@ export default {
     background: #d0d5db;
     display: block;
     border-radius: 20px;
-}
+  }
 
-.tree-tab-chapter .catalog_num > span > i {
+  .tree-tab-chapter .catalog_num>span>i {
     min-width: 16px;
     height: 16px;
     padding: 0 2px;
@@ -391,34 +358,38 @@ export default {
     display: block;
     text-align: center;
     font-style: normal;
-}
+  }
 
-.tree-tab-chapter .first-level-node {
+  .tree-tab-chapter .first-level-node {
     background-color: #f5f7fa !important;
-}
+  }
 
-.tree-tab-chapter .first-level-node td:first-child {
+  .tree-tab-chapter .first-level-node td:first-child {
     border-top-left-radius: 12px;
     border-bottom-left-radius: 12px;
-}
+  }
 
-.tree-tab-chapter .first-level-node td:last-child {
+  .tree-tab-chapter .first-level-node td:last-child {
     border-top-right-radius: 12px;
     border-bottom-right-radius: 12px;
-}
+  }
 
-.tree-tab-chapter tr .op-box {
+  .tree-tab-chapter tr .op-box {
     display: none;
-}
+  }
 
-.tree-tab-chapter tr:hover .op-box {
+  .tree-tab-chapter tr:hover .op-box {
     display: block;
-}
-.tree-tab-chapter .el-table__indent{
+  }
+
+  .tree-tab-chapter .el-table__indent {
     display: none !important;
-}
-.tree-tab-chapter .el-table__expand-icon{
+  }
+
+  .tree-tab-chapter .el-table__expand-icon {
     display: none !important;
-}
-/**@import url('~assets/css/table.sass')*/
+  }
+
+  /**@import url('~assets/css/table.sass')*/
+
 </style>