resource preview -- make components

src/views/accurateTeaching/components/resource-preview-button.vue

@@ -0,0 +1,61 @@
+<template>
+  <div style="display: inline;">
+    <div style="display: inline" @click="handleView">
+      <slot>
+        <el-button size="mini" type="text" icon="el-icon-view">
+          <slot name="title">预览</slot>
+        </el-button>
+      </slot>
+    </div>
+    <!--  v-if="dialogVideo" 防止画重复的el-dialog  -->
+    <el-dialog v-if="dialogVideo" :visible.sync="dialogVideo" :title="videoTitle" width="60%">
+      <mx-video :aliIdType="aliIdType" :src="src" controls controlslist="nodownload"
+                disablepictureinpicture></mx-video>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'resource-preview-button',
+  props: {
+    row: Object
+  },
+  data() {
+    return {
+      dialogVideo: false,
+      src: '',
+      aliIdType: '',
+      videoTitle: '查看视频'
+    }
+  },
+  methods: {
+    handleView() {
+      const row = this.row
+      if (row.resourcesUrl.indexOf('.pdf') != -1) {
+        window.open('/pdfView/index.html?src=' + row.resourcesUrl)
+      } else if (
+        row.resourcesUrl.indexOf('.doc') != -1 ||
+        row.resourcesUrl.indexOf('.ppt') != -1 ||
+        row.resourcesUrl.indexOf('.xls') != -1 ||
+        row.resourcesUrl.indexOf('.xlsx') != -1
+      ) {
+        window.open(
+          'https://view.officeapps.live.com/op/view.aspx?src=' +
+          row.resourcesUrl
+        )
+      } else if (row.resourcesUrl.indexOf('.mp4') != -1 || !row.resourcesUrl.includes('.')) {
+        this.aliIdType = row.aliIdType
+        this.src = row.resourcesUrl
+        this.dialogVideo = true
+      } else {
+        this.$message.error('格式错误，无法预览该格式文件！')
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/accurateTeaching/custom/custom.vue

@@ -1,10 +1,12 @@
 <template>
   <div class="app-container">
-    <form-search :searchformShow="searchformShow" @handleQuery="handleQuery" @change="formChange" @resetQuery="resetQuery"></form-search>
+    <form-search :searchformShow="searchformShow" @handleQuery="handleQuery" @change="formChange"
+                 @resetQuery="resetQuery"></form-search>
     <el-card class="box-card" style="margin-bottom:30px">
       <el-row :gutter="24">
         <el-col :span="4" v-if="viewName!='Custom'">
-          <h3 style="padding-left: 11px;border-left: 2px solid #e6a700;color: #e6a700;">{{queryParams.wayType==1?'章节目录':'知识点目录'}}</h3>
+          <h3 style="padding-left: 11px;border-left: 2px solid #e6a700;color: #e6a700;">
+            {{ queryParams.wayType == 1 ? '章节目录' : '知识点目录' }}</h3>
           <div class="head-container">
             <el-input
               v-model="name"
@@ -41,33 +43,40 @@
         <el-col :span="viewName!='Custom'?20:24">
           <el-row :gutter="10" class="mb8">
             <el-col :span="1.5" v-hasPermi="['front:schoolResource:downloadToPersonResourse']">
-              <el-button plain icon="el-icon-download" size="small" @click="downToPersonResourse" :disabled="multiple">下载至个人资源库</el-button>
+              <el-button plain icon="el-icon-download" size="small" @click="downToPersonResourse" :disabled="multiple">
+                下载至个人资源库
+              </el-button>
             </el-col>
             <el-table v-loading="loading" :data="resourcesList" @selection-change="handleSelectionChange">
-              <el-table-column type="selection" width="55" align="center" />
+              <el-table-column type="selection" width="55" align="center"/>
               <el-table-column label="文件" align="center" prop="resourcesName" v-if="viewName=='Index'">
                 <template slot-scope="scope">
-                  <img style="width:130px;height:80px;cursor:pointer" @click="playVideo(scope.row)" :src="img.ship" alt />
+                  <resource-preview-button :row="scope.row">
+                    <img style="width:130px;height:80px;cursor:pointer" :src="img.ship" alt/>
+                  </resource-preview-button>
                 </template>
               </el-table-column>
-              <el-table-column label="文件名" align="center" prop="resourcesName" />
-              <el-table-column label="发布人" align="center" prop="createBy" />
-              <el-table-column label="时间" align="center" prop="createTime" />
-              <el-table-column
-                label="操作"
-                align="center"
-                class-name="small-padding fixed-width"
-                v-if="userInfo && userInfo.roles && userInfo.roles[0].roleId == 5"
-              >
+              <el-table-column label="文件名" align="center" prop="resourcesName"/>
+              <el-table-column label="发布人" align="center" prop="createBy"/>
+              <el-table-column label="时间" align="center" prop="createTime"/>
+              <el-table-column v-if="viewName!='Index'||isFrontMaster" label="操作" align="center"
+                               class-name="small-padding fixed-width">
                 <template slot-scope="scope">
-                  <el-button v-if="viewName!='Index'" size="mini" type="text" icon="el-icon-view" @click="handleView(scope.row)">预览</el-button>
-                  <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
-                  <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
+                  <resource-preview-button v-if="viewName!='Index'" :row="scope.row"/>
+                  <template v-if="isFrontMaster">
+                    <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
+                               :class="{'ml10':viewName!='Index'}">
+                      修改
+                    </el-button>
+                    <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除
+                    </el-button>
+                  </template>
                 </template>
               </el-table-column>
             </el-table>
 
-            <pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" @pagination="getList" />
+            <pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize"
+                        @pagination="getList"/>
           </el-row>
         </el-col>
       </el-row>
@@ -76,7 +85,7 @@
     <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px" v-if="open">
         <el-form-item label="资源名称" prop="resourcesName">
-          <el-input v-model="form.resourcesName" placeholder="请输入资源名称" />
+          <el-input v-model="form.resourcesName" placeholder="请输入资源名称"/>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -92,49 +101,33 @@
       @handleClose="handleClose"
       @dialogVisibleClose="dialogVisibleClose"
     ></upload-dialog>
-    <el-dialog title="查看视频" :visible.sync="dialogVideo" width="60%">
-      <mx-video v-if="dialogVideo" :aliIdType="aliIdType" :src="src" controls></mx-video>
-    </el-dialog>
   </div>
 </template>
 
 <script>
-import {
-  list,
-  add,
-  getInfo,
-  update,
-  remove,
-  exportList,
-  downToPersonResourse,
-} from "@/api/webApi/school";
-import { treeList, knowledgeTree } from "@/api/webApi/webQue.js";
-import { mapGetters } from "vuex";
+import { add, downToPersonResourse, getInfo, list, remove, update } from '@/api/webApi/school'
+import { knowledgeTree, treeList } from '@/api/webApi/webQue.js'
+import { mapGetters } from 'vuex'
+import ResourcePreviewButton from '@/views/accurateTeaching/components/resource-preview-button'
 
 export default {
-  components: {},
+  components: { ResourcePreviewButton },
   data() {
     return {
-      aliIdType: "",
-      src: "",
-      dialogVideo: false,
       img: {
-        ship: require("@/assets/images/ship.png"),
+        ship: require('@/assets/images/ship.png')
       },
       treeLoading: false,
       searchformShow: {},
       dialogVisible: false,
-      img: {
-        ship: require("@/assets/images/ship.png"),
-      },
       treeProps: {
-        children: "children",
-        label: "name",
-        code: "id",
+        children: 'children',
+        label: 'name',
+        code: 'id'
       },
       deptOptions: undefined,
       KnowledgeOptions: [],
-      deptName: "",
+      deptName: '',
       // 遮罩层
       loading: true,
       // 导出遮罩层
@@ -154,8 +147,8 @@ export default {
       // 云库表格数据
       resourcesList: [],
       // 弹出层标题
-      title: "",
-      pageName: "",
+      title: '',
+      pageName: '',
       // 是否显示弹出层
       open: false,
       // 资源类型字典
@@ -166,7 +159,7 @@ export default {
       delFlagOptions: [],
       // 查询参数
       queryParams: {
-        wayType: "1",
+        wayType: '1',
         pageNum: 1,
         pageSize: 10,
         resourcesName: null,
@@ -178,7 +171,7 @@ export default {
         chapterId: null,
         resourcesUrl: null,
         bookId: null,
-        subjectId: null,
+        subjectId: null
       },
       // 表单参数
       form: {},
@@ -187,103 +180,77 @@ export default {
         resourcesName: [
           {
             required: true,
-            message: "资源名称不能为空",
-            trigger: "blur",
-          },
-        ],
+            message: '资源名称不能为空',
+            trigger: 'blur'
+          }
+        ]
       },
-      viewName: "",
-      name: "",
-    };
+      viewName: '',
+      name: ''
+    }
   },
   computed: {
-    ...mapGetters(["currentUser"]),
+    ...mapGetters(['currentUser', 'isFrontMaster']),
     userInfo() {
       // TODO: hht 22.1.5 兼容历史写法，待清理
-      return this.currentUser;
-    },
+      return this.currentUser
+    }
   },
   created() {
-    this.viewName = this.$route.name;
-    if (this.viewName == "Index") {
+    this.viewName = this.$route.name
+    if (this.viewName == 'Index') {
       this.searchformShow = {
-        wayType: "1",
-        subjectid: "",
-        edition: "",
-        slipid: "",
-      };
-    } else if (this.viewName == "Courseware") {
+        wayType: '1',
+        subjectid: '',
+        edition: '',
+        slipid: ''
+      }
+    } else if (this.viewName == 'Courseware') {
       this.searchformShow = {
-        subjectid: "",
-        edition: "",
-        slipid: "",
-        coursewareType: "",
-      };
+        subjectid: '',
+        edition: '',
+        slipid: '',
+        coursewareType: ''
+      }
     } else {
       this.searchformShow = {
-        subjectid: "",
-        resourceType: "",
-      };
+        subjectid: '',
+        resourceType: ''
+      }
     }
-    this.getList();
+    this.getList()
     // this.getTreeselect();
-    this.getDicts("resource_type").then((response) => {
-      this.typeOptions = response.data;
-    });
-    this.getDicts("category").then((response) => {
-      this.categoryOptions = response.data;
-    });
-    this.getDicts("bool_flag").then((response) => {
-      this.delFlagOptions = response.data;
-    });
+    this.getDicts('resource_type').then((response) => {
+      this.typeOptions = response.data
+    })
+    this.getDicts('category').then((response) => {
+      this.categoryOptions = response.data
+    })
+    this.getDicts('bool_flag').then((response) => {
+      this.delFlagOptions = response.data
+    })
   },
   watch: {
     // 根据名称筛选部门树
     name(val) {
-      this.$refs.tree.filter(val);
-    },
+      this.$refs.tree.filter(val)
+    }
   },
   methods: {
-    handleView(row) {
-      if (row.resourcesUrl.indexOf(".pdf") != -1) {
-        window.open("/pdfView/index.html?src=" + row.resourcesUrl);
-      } else if (
-        row.resourcesUrl.indexOf(".doc") != -1 ||
-        row.resourcesUrl.indexOf(".ppt") != -1 ||
-        row.resourcesUrl.indexOf(".xls") != -1 ||
-        row.resourcesUrl.indexOf(".xlsx") != -1
-      ) {
-        window.open(
-          "https://view.officeapps.live.com/op/view.aspx?src=" +
-            row.resourcesUrl
-        );
-      } else if (row.resourcesUrl.indexOf(".mp4") != -1 || !row.resourcesUrl.includes('.')) {
-        this.aliIdType = row.aliIdType;
-        this.src = row.resourcesUrl;
-        this.dialogVideo = true;
-      } else {
-        this.$message.error("格式错误，无法预览该格式文件！");
-      }
-    },
-    playVideo(row) {
-      this.aliIdType = row.aliIdType;
-      this.src = row.resourcesUrl;
-      this.dialogVideo = true;
-    },
     /** 查询个人资源库列表 */
     getList() {
-      this.loading = true;
-      if (this.viewName == "Index") {
-        this.queryParams.category = "微课视频";
-        this.pageName = "微课视频";
-      } else if (this.viewName == "Courseware") {
-        this.queryParams.category = "课件资源";
-        this.pageName = "课件资源";
+      this.loading = true
+      if (this.viewName == 'Index') {
+        this.queryParams.category = '微课视频'
+        this.pageName = '微课视频'
+      } else if (this.viewName == 'Courseware') {
+        this.queryParams.category = '课件资源'
+        this.pageName = '课件资源'
       } else {
-        this.queryParams.category = "自定义";
-        this.pageName = "";
+        this.queryParams.category = '自定义'
+        this.pageName = ''
       }
-      let Ajax = {};
+      let Ajax = {}
       if (this.queryParams.wayType == 1) {
         //章节
         Ajax = {
@@ -294,8 +261,8 @@ export default {
           pageNum: this.pageNum,
           pageSize: this.pageSize,
           category: this.queryParams.category,
-          type: this.queryParams.resourceType,
-        };
+          type: this.queryParams.resourceType
+        }
       } else {
         Ajax = {
           subjectId: this.queryParams.subjectid, ////科目
@@ -305,62 +272,62 @@ export default {
           pageNum: this.pageNum,
           pageSize: this.pageSize,
           category: this.queryParams.category,
-          type: this.queryParams.resourceType,
-        };
+          type: this.queryParams.resourceType
+        }
       }
 
       list(Ajax)
         .then((response) => {
-          this.resourcesList = response.rows;
-          this.total = response.total;
-          this.loading = false;
+          this.resourcesList = response.rows
+          this.total = response.total
+          this.loading = false
         })
         .catch((err) => {
-          this.loading = false;
-        });
+          this.loading = false
+        })
     },
     // 资源类型字典翻译
     typeFormat(row, column) {
-      return this.selectDictLabel(this.typeOptions, row.type);
+      return this.selectDictLabel(this.typeOptions, row.type)
     },
     // 资源分类字典翻译
     categoryFormat(row, column) {
-      return this.selectDictLabel(this.categoryOptions, row.category);
+      return this.selectDictLabel(this.categoryOptions, row.category)
     },
     // 是否删除字典翻译
     delFlagFormat(row, column) {
-      return this.selectDictLabel(this.delFlagOptions, row.delFlag);
+      return this.selectDictLabel(this.delFlagOptions, row.delFlag)
     },
     handleClose(type, name) {
-      let _this = this;
+      let _this = this
       _this.ids.forEach((item, index) => {
         let Ajax = {
-          resourseId: item,
-        };
+          resourseId: item
+        }
         if (name) {
-          Ajax.resourcesName = name;
+          Ajax.resourcesName = name
         }
         downToPersonResourse(Ajax).then(() => {
           if (index == _this.ids.length - 1) {
-            _this.msgSuccess("操作成功");
-            _this.dialogVisible = false;
+            _this.msgSuccess('操作成功')
+            _this.dialogVisible = false
           }
-        });
-      });
+        })
+      })
     },
     downToPersonResourse() {
-      let _this = this;
-      const resourcesIds = this.ids.join(",");
-      this.title = "下载至个人资源库";
-      this.dialogVisible = true;
+      let _this = this
+      const resourcesIds = this.ids.join(',')
+      this.title = '下载至个人资源库'
+      this.dialogVisible = true
     },
     dialogVisibleClose() {
-      this.dialogVisible = false;
+      this.dialogVisible = false
     },
     // 取消按钮
     cancel() {
-      this.open = false;
-      this.reset();
+      this.open = false
+      this.reset()
     },
     // 表单重置
     reset() {
@@ -380,109 +347,109 @@ export default {
         delFlag: null,
         createBy: null,
         createTime: null,
-        remark: null,
-      };
+        remark: null
+      }
     },
     /** 搜索按钮操作 */
     handleQuery(data) {
-      this.pageNum = 1;
-      this.queryParams = Object.assign(this.queryParams, data);
-      this.queryParams.wayType = data.wayType || "1";
-      this.getList();
+      this.pageNum = 1
+      this.queryParams = Object.assign(this.queryParams, data)
+      this.queryParams.wayType = data.wayType || '1'
+      this.getList()
       // this.getTreeselect()
     },
     /** 重置按钮操作 */
     resetQuery(data) {
-      this.queryParams = data;
-      this.queryParams.chapterId = "";
-      this.pageNum = 1;
-      this.getList();
+      this.queryParams = data
+      this.queryParams.chapterId = ''
+      this.pageNum = 1
+      this.getList()
     },
     // 多选框选中数据
     handleSelectionChange(selection) {
-      this.ids = selection.map((item) => item.resourcesId);
-      this.single = selection.length !== 1;
-      this.multiple = !selection.length;
+      this.ids = selection.map((item) => item.resourcesId)
+      this.single = selection.length !== 1
+      this.multiple = !selection.length
     },
     formChange(data, type) {
-      this.queryParams = data;
-      this.queryParams.wayType = data.wayType || "1";
-      if (type == "wayType") {
+      this.queryParams = data
+      this.queryParams.wayType = data.wayType || '1'
+      if (type == 'wayType') {
         if (this.queryParams.wayType == 2) {
           this.searchformShow = {
-            wayType: "1",
-            subjectid: "",
-          };
+            wayType: '1',
+            subjectid: ''
+          }
         } else {
           this.searchformShow = {
-            wayType: "1",
-            subjectid: "",
-            edition: "",
-            slipid: "",
-          };
+            wayType: '1',
+            subjectid: '',
+            edition: '',
+            slipid: ''
+          }
         }
       }
-      this.getTreeselect(type);
+      this.getTreeselect(type)
     },
     /** 新增按钮操作 */
     handleAdd() {
-      this.reset();
-      this.open = true;
-      this.title = "添加个人资源库";
+      this.reset()
+      this.open = true
+      this.title = '添加个人资源库'
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
-      this.reset();
-      const resourcesId = row.resourcesId || this.ids;
+      this.reset()
+      const resourcesId = row.resourcesId || this.ids
       getInfo(resourcesId).then((response) => {
-        this.form = response.data;
-        this.open = true;
-        this.title = "修改个人资源库";
-      });
+        this.form = response.data
+        this.open = true
+        this.title = '修改个人资源库'
+      })
     },
     /** 提交按钮 */
     submitForm() {
-      this.$refs["form"].validate((valid) => {
+      this.$refs['form'].validate((valid) => {
         if (valid) {
           if (this.form.resourcesId != null) {
             update(this.form).then((response) => {
-              this.msgSuccess("修改成功");
-              this.open = false;
-              this.getList();
-            });
+              this.msgSuccess('修改成功')
+              this.open = false
+              this.getList()
+            })
           } else {
             add(this.form).then((response) => {
-              this.msgSuccess("新增成功");
-              this.open = false;
-              this.getList();
-            });
+              this.msgSuccess('新增成功')
+              this.open = false
+              this.getList()
+            })
           }
         }
-      });
+      })
     },
     /** 删除按钮操作 */
     handleDelete(row) {
-      const resourcesIds = row.resourcesId || this.ids;
+      const resourcesIds = row.resourcesId || this.ids
       this.$confirm(
         '是否确认删除校本资源库名称为"' + row.resourcesName + '"的数据项?',
-        "警告",
+        '警告',
         {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
-          type: "warning",
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
         }
       )
-        .then(function () {
-          return remove(resourcesIds);
+        .then(function() {
+          return remove(resourcesIds)
         })
         .then(() => {
-          this.getList();
-          this.msgSuccess("删除成功");
-        });
+          this.getList()
+          this.msgSuccess('删除成功')
+        })
     },
     /** 导出按钮操作 */
     handleExport() {
-      const queryParams = this.queryParams;
+      const queryParams = this.queryParams
       // this.$confirm('是否确认导出所有个人资源库数据项?', '警告', {
       // 	confirmButtonText: '确定',
       // 	cancelButtonText: '取消',
@@ -499,87 +466,87 @@ export default {
     /** 查询章节下拉树结构 */
     getTreeselect(type) {
       if (this.queryParams.wayType == 1) {
-        if (type != "slipid" || this.viewName == "Custom") {
-          this.deptOptions = [];
-          this.KnowledgeOptions = [];
-          this.queryParams.chapterId = "";
-          return;
+        if (type != 'slipid' || this.viewName == 'Custom') {
+          this.deptOptions = []
+          this.KnowledgeOptions = []
+          this.queryParams.chapterId = ''
+          return
         }
         let Ajax = {
           editionId: this.queryParams.edition, //版本
           subjectId: this.queryParams.subjectid, //科目
           pharseId: this.queryParams.pharseId, //pharseId
-          gradeId: this.queryParams.slipid, //学册
+          gradeId: this.queryParams.slipid //学册
           // gradeid:301
-        };
-        if (!Ajax.gradeId) return;
-        this.deptOptions = [];
-        this.treeLoading = true;
+        }
+        if (!Ajax.gradeId) return
+        this.deptOptions = []
+        this.treeLoading = true
         treeList(Ajax)
           .then((response) => {
-            this.deptOptions = response.data;
-            this.treeLoading = false;
+            this.deptOptions = response.data
+            this.treeLoading = false
           })
           .catch((response) => {
-            this.treeLoading = false;
-          });
+            this.treeLoading = false
+          })
       } else {
         if (
-          (type != "subjectid" && type != "wayType") ||
-          this.viewName == "Custom"
+          (type != 'subjectid' && type != 'wayType') ||
+          this.viewName == 'Custom'
         ) {
-          this.deptOptions = [];
-          this.KnowledgeOptions = [];
-          this.queryParams.chapterId = "";
-          return;
+          this.deptOptions = []
+          this.KnowledgeOptions = []
+          this.queryParams.chapterId = ''
+          return
         }
         let Ajax = {
           subjectId: this.queryParams.subjectid,
-          pharseId: this.queryParams.pharseId,
-        };
-        if (!Ajax.subjectId) return;
-        this.KnowledgeOptions = [];
-        this.treeLoading = true;
+          pharseId: this.queryParams.pharseId
+        }
+        if (!Ajax.subjectId) return
+        this.KnowledgeOptions = []
+        this.treeLoading = true
         knowledgeTree(Ajax)
           .then((response) => {
-            let list = this.filterData(response.data, 0);
-            this.KnowledgeOptions = list;
-            this.treeLoading = false;
+            let list = this.filterData(response.data, 0)
+            this.KnowledgeOptions = list
+            this.treeLoading = false
           })
           .catch((response) => {
-            this.treeLoading = false;
-          });
+            this.treeLoading = false
+          })
       }
     },
 
     filterData(data, index) {
-      let children = [];
+      let children = []
       data.forEach((item) => {
-        item.tier = index;
+        item.tier = index
         if (item.children && index < 2) {
-          item.children = this.filterData(item.children, index + 1);
+          item.children = this.filterData(item.children, index + 1)
         } else {
-          item.children = null;
+          item.children = null
         }
-        children.push(item);
-      });
-      return children;
+        children.push(item)
+      })
+      return children
     },
     // 筛选节点
     filterNode(value, data) {
-      if (!value) return true;
-      return data.name.indexOf(value) !== -1;
+      if (!value) return true
+      return data.name.indexOf(value) !== -1
     },
     // 节点单击事件
     handleNodeClick(data) {
       if (!data.children?.length) {
-        this.pageNum = 1;
-        this.queryParams.chapterId = data.id;
-        this.getList();
+        this.pageNum = 1
+        this.queryParams.chapterId = data.id
+        this.getList()
       } else {
-        this.queryParams.chapterId = "";
+        this.queryParams.chapterId = ''
       }
-    },
-  },
-};
+    }
+  }
+}
 </script>

src/views/accurateTeaching/library/index.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="app-container">
-    <form-search :searchformShow="searchformShow" :coursewareUpload="coursewareUpload" @handleQuery="handleQuery" @change="formChange" @resetQuery="resetQuery"></form-search>
+    <form-search :searchformShow="searchformShow" :coursewareUpload="coursewareUpload" @handleQuery="handleQuery"
+                 @change="formChange" @resetQuery="resetQuery"></form-search>
     <el-card class="box-card" style="margin-bottom: 30px">
       <el-row :gutter="24">
         <el-col :span="4" v-if="viewName != 'Custom'">
@@ -10,7 +11,7 @@
               border-left: 2px solid #e6a700;
               color: #e6a700;
             "
-          >{{ queryParams.wayType == 1 ? "章节目录" : "知识点目录" }}</h3>
+          >{{ queryParams.wayType == 1 ? '章节目录' : '知识点目录' }}</h3>
           <div class="head-container">
             <el-input
               v-model="name"
@@ -35,7 +36,7 @@
               @node-click="handleNodeClick"
             >
               <div slot-scope="{node, data}">
-                <div :title="data.name">{{data.name}}</div>
+                <div :title="data.name">{{ data.name }}</div>
               </div>
             </el-tree>
             <el-tree
@@ -49,7 +50,7 @@
               @node-click="handleNodeClick"
             >
               <div slot-scope="{node, data}">
-                <div :title="data.name">{{data.name}}</div>
+                <div :title="data.name">{{ data.name }}</div>
               </div>
             </el-tree>
           </div>
@@ -57,43 +58,57 @@
         <el-col :span="viewName == 'Custom' ? 24 : 20">
           <el-row :gutter="10" class="mb8">
             <el-col :span="1.5" v-hasPermi="['front:personResource:uploadToCloudResourse']">
-              <el-button plain icon="el-icon-upload2" size="small" @click="upToCloudResourse" :disabled="multiple">上传至云库</el-button>
+              <el-button plain icon="el-icon-upload2" size="small" @click="upToCloudResourse" :disabled="multiple">
+                上传至云库
+              </el-button>
             </el-col>
             <el-col :span="1.5" v-hasPermi="['front:personResource:uploadToSchoolResourse']">
-              <el-button plain icon="el-icon-upload2" size="small" @click="upToSchoolResourse" :disabled="multiple">上传至校本资源库</el-button>
+              <el-button plain icon="el-icon-upload2" size="small" @click="upToSchoolResourse" :disabled="multiple">
+                上传至校本资源库
+              </el-button>
             </el-col>
             <el-col :span="1.5" v-hasPermi="['front:personResource:uploadToBoard']">
-              <el-button plain icon="el-icon-upload2" size="small" @click="upToSchoolClass" :disabled="multiple">上传至班牌</el-button>
+              <el-button plain icon="el-icon-upload2" size="small" @click="upToSchoolClass" :disabled="multiple">上传至班牌
+              </el-button>
             </el-col>
             <el-col :span="1.5" v-hasPermi="['front:personResource:uploadToStudent']">
-              <el-button plain icon="el-icon-upload2" size="small" @click="upToSchoolStudent" :disabled="multiple">上传至学生端</el-button>
+              <el-button plain icon="el-icon-upload2" size="small" @click="upToSchoolStudent" :disabled="multiple">
+                上传至学生端
+              </el-button>
             </el-col>
             <el-col :span="1.5" v-hasPermi="['front:personResource:uploadToParent']">
-              <el-button plain icon="el-icon-upload2" size="small" @click="upToSchoolParent" :disabled="multiple">上传至家长端</el-button>
+              <el-button plain icon="el-icon-upload2" size="small" @click="upToSchoolParent" :disabled="multiple">
+                上传至家长端
+              </el-button>
             </el-col>
             <el-col :span="1.5" v-hasPermi="['front:personResource:uploadToQuestion']">
-              <el-button plain icon="el-icon-upload2" size="small" @click="upToQuestion()" :disabled="multiple">上传至试题</el-button>
+              <el-button plain icon="el-icon-upload2" size="small" @click="upToQuestion()" :disabled="multiple">上传至试题
+              </el-button>
             </el-col>
             <el-table v-loading="loading" :data="resourcesList" @selection-change="handleSelectionChange">
-              <el-table-column type="selection" width="55" align="center" />
+              <el-table-column type="selection" width="55" align="center"/>
               <el-table-column label="文件" align="center" prop="resourcesName" v-if="viewName == 'Index'">
                 <template slot-scope="scope">
-                  <img style="width: 130px; height: 80px; cursor: pointer" @click="playVideo(scope.row)" :src="img.ship" alt />
+                  <resource-preview-button :row="scope.row">
+                    <img style="width: 130px; height: 80px; cursor: pointer" :src="img.ship" alt/>
+                  </resource-preview-button>
                 </template>
               </el-table-column>
-              <el-table-column label="文件名" align="center" prop="resourcesName" />
-              <el-table-column label="发布人" align="center" prop="createBy" />
-              <el-table-column label="时间" align="center" prop="createTime" />
+              <el-table-column label="文件名" align="center" prop="resourcesName"/>
+              <el-table-column label="发布人" align="center" prop="createBy"/>
+              <el-table-column label="时间" align="center" prop="createTime"/>
               <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                 <template slot-scope="scope">
-                  <el-button v-if="viewName != 'Index'" size="mini" type="text" icon="el-icon-view" @click="handleView(scope.row)">预览</el-button>
+                  <resource-preview-button v-if="viewName != 'Index'" :row="scope.row" class="mr10"/>
                   <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
-                  <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
+                  <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除
+                  </el-button>
                 </template>
               </el-table-column>
             </el-table>
 
-            <pagination v-show="total > 0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" @pagination="getList" />
+            <pagination v-show="total > 0" :total="total" :page.sync="pageNum" :limit.sync="pageSize"
+                        @pagination="getList"/>
           </el-row>
         </el-col>
       </el-row>
@@ -103,7 +118,7 @@
     <el-dialog :title="title" v-loading="quesLoading" :visible.sync="quesDialog" width="800px" append-to-body>
       <el-form ref="formQuestion" :model="form" :rules="rules2" label-width="80px" v-if="quesDialog">
         <el-form-item label="题目编号" prop="questionId">
-          <el-input v-model="form.questionId" placeholder="题目编号" />
+          <el-input v-model="form.questionId" placeholder="题目编号"/>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -116,7 +131,7 @@
     <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px" v-if="open">
         <el-form-item label="资源名称" prop="resourcesName">
-          <el-input v-model="form.resourcesName" placeholder="请输入资源名称" />
+          <el-input v-model="form.resourcesName" placeholder="请输入资源名称"/>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -134,60 +149,55 @@
       @handleClose="handleClose"
       @dialogVisibleClose="dialogVisibleClose"
     ></upload-dialog>
-    <el-dialog title="查看视频" :visible.sync="dialogVideo" width="60%">
-      <mx-video v-if="dialogVideo" :aliIdType="aliIdType" :src="src" controls controlslist="nodownload" disablepictureinpicture></mx-video>
-    </el-dialog>
   </div>
 </template>
 
 <script>
-import { add, exportList } from "@/api/webApi/school";
+import { add, exportList } from '@/api/webApi/school'
 import {
-  upToCloudResourse,
-  list,
-  upToSchoolResourse,
-  upToSchoolClass,
-  upToSchoolStudent,
-  upToSchoolParent,
   getInfo,
-  remove,
+  list,
   modifyPersonResourceInfo,
+  remove,
   updataQuestion,
-} from "@/api/webApi/person";
-import { treeList, knowledgeTree } from "@/api/webApi/webQue.js";
-import { mapGetters } from "vuex";
+  upToCloudResourse,
+  upToSchoolClass,
+  upToSchoolParent,
+  upToSchoolResourse,
+  upToSchoolStudent
+} from '@/api/webApi/person'
+import { knowledgeTree, treeList } from '@/api/webApi/webQue.js'
+import { mapGetters } from 'vuex'
+import ResourcePreviewButton from '@/views/accurateTeaching/components/resource-preview-button'
 
 export default {
-  components: {},
+  components: { ResourcePreviewButton },
   data() {
-    const blurText = async (rule, value, callback) => {
-      const boolean = new RegExp("^[1-9][0-9]*$").test(value); // console.log(boolean)
+    const blurText = async(rule, value, callback) => {
+      const boolean = new RegExp('^[1-9][0-9]*$').test(value) // console.log(boolean)
       if (!boolean) {
-        callback(new Error("请输入正整数"));
+        callback(new Error('请输入正整数'))
       }
-    };
+    }
     return {
-      aliIdType: "",
-      src: "",
-      dialogVideo: false,
       quesDialog: false,
       quesLoading: false,
-      questionId: "",
+      questionId: '',
       coursewareUpload: false,
       treeLoading: false,
       searchformShow: {},
       dialogVisible: false,
       img: {
-        ship: require("@/assets/images/ship.png"),
+        ship: require('@/assets/images/ship.png')
       },
       treeProps: {
-        children: "children",
-        label: "name",
-        code: "id",
+        children: 'children',
+        label: 'name',
+        code: 'id'
       },
       deptOptions: undefined,
       KnowledgeOptions: [],
-      deptName: "",
+      deptName: '',
       // 遮罩层
       loading: true,
       // 导出遮罩层
@@ -209,8 +219,8 @@ export default {
       // 云库表格数据
       resourcesList: [],
       // 弹出层标题
-      title: "",
-      pageName: "",
+      title: '',
+      pageName: '',
       // 是否显示弹出层
       open: false,
       // 资源类型字典
@@ -221,19 +231,19 @@ export default {
       delFlagOptions: [],
       // 查询参数
       queryParams: {
-        wayType: "1",
+        wayType: '1',
         pageNum: 1,
         pageSize: 10,
-        resourcesName: "",
+        resourcesName: '',
         type: null,
         category: null,
         province: null,
         city: null,
         county: null,
         chapterId: null,
-        resourcesUrl: "",
+        resourcesUrl: '',
         bookId: null,
-        subjectId: null,
+        subjectId: null
       },
       // 表单参数
       form: {},
@@ -242,120 +252,94 @@ export default {
         resourcesName: [
           {
             required: true,
-            message: "资源名称不能为空",
-            trigger: "blur",
-          },
-        ],
+            message: '资源名称不能为空',
+            trigger: 'blur'
+          }
+        ]
       },
       rules2: {
         questionId: [
           {
             required: true,
-            message: "题目编号不能为空",
-            trigger: "blur",
+            message: '题目编号不能为空',
+            trigger: 'blur'
           },
           {
             validator: blurText,
-            trigger: "blur",
-          },
-        ],
+            trigger: 'blur'
+          }
+        ]
       },
 
-      viewName: "",
-      name: "",
+      viewName: '',
+      name: '',
       isZdy: true,
-      selectType: "",
-    };
+      selectType: ''
+    }
   },
   computed: {
-    ...mapGetters(["currentUser"]),
+    ...mapGetters(['currentUser']),
     userInfo() {
       // TODO: hht 22.1.5 兼容历史写法，待清理
-      return this.currentUser;
-    },
+      return this.currentUser
+    }
   },
   created() {
-    this.viewName = this.$route.name;
-    if (this.viewName == "Index") {
-      this.coursewareUpload = false;
+    this.viewName = this.$route.name
+    if (this.viewName == 'Index') {
+      this.coursewareUpload = false
       this.searchformShow = {
-        wayType: "1",
-        subjectid: "",
-        edition: "",
-        slipid: "",
-      };
-    } else if (this.viewName == "Personal") {
-      this.coursewareUpload = true;
+        wayType: '1',
+        subjectid: '',
+        edition: '',
+        slipid: ''
+      }
+    } else if (this.viewName == 'Personal') {
+      this.coursewareUpload = true
       this.searchformShow = {
-        subjectid: "",
-        edition: "",
-        slipid: "",
-        coursewareType: "",
-      };
+        subjectid: '',
+        edition: '',
+        slipid: '',
+        coursewareType: ''
+      }
     } else {
-      this.coursewareUpload = true;
+      this.coursewareUpload = true
       this.searchformShow = {
-        subjectid: "",
-        resourceType: "",
-      };
+        subjectid: '',
+        resourceType: ''
+      }
     }
-    this.handleQuery(this.searchformShow);
+    this.handleQuery(this.searchformShow)
     // this.getTreeselect();
-    this.getDicts("resource_type").then((response) => {
-      this.typeOptions = response.data;
-    });
-    this.getDicts("category").then((response) => {
-      this.categoryOptions = response.data;
-    });
-    this.getDicts("bool_flag").then((response) => {
-      this.delFlagOptions = response.data;
-    });
+    this.getDicts('resource_type').then((response) => {
+      this.typeOptions = response.data
+    })
+    this.getDicts('category').then((response) => {
+      this.categoryOptions = response.data
+    })
+    this.getDicts('bool_flag').then((response) => {
+      this.delFlagOptions = response.data
+    })
   },
   watch: {
     // 根据名称筛选部门树
     name(val) {
-      this.$refs.tree.filter(val);
-    },
+      this.$refs.tree.filter(val)
+    }
   },
   methods: {
-    handleView(row) {
-      if (row.resourcesUrl.indexOf(".pdf") != -1) {
-        window.open("/pdfView/index.html?src=" + row.resourcesUrl);
-      } else if (
-        row.resourcesUrl.indexOf(".doc") != -1 ||
-        row.resourcesUrl.indexOf(".ppt") != -1 ||
-        row.resourcesUrl.indexOf(".xls") != -1 ||
-        row.resourcesUrl.indexOf(".xlsx") != -1
-      ) {
-        window.open(
-          "https://view.officeapps.live.com/op/view.aspx?src=" +
-            row.resourcesUrl
-        );
-      } else if (row.resourcesUrl.indexOf(".mp4") != -1 || !row.resourcesUrl.includes('.')) {
-        this.aliIdType = row.aliIdType;
-        this.src = row.resourcesUrl;
-        this.dialogVideo = true;
-      } else {
-        this.$message.error("格式错误，无法预览该格式文件！");
-      }
-    },
-    playVideo(row) {
-      this.aliIdType = row.aliIdType;
-      this.src = row.resourcesUrl;
-      this.dialogVideo = true;
-    },
     /** 查询个人资源库列表 */
     getList() {
-      this.loading = true;
-      if (this.viewName == "Index") {
-        this.queryParams.category = "微课视频";
-        this.pageName = "微课视频";
-      } else if (this.viewName == "Personal") {
-        this.queryParams.category = "课件资源";
-        this.pageName = "课件资源";
+      this.loading = true
+      if (this.viewName == 'Index') {
+        this.queryParams.category = '微课视频'
+        this.pageName = '微课视频'
+      } else if (this.viewName == 'Personal') {
+        this.queryParams.category = '课件资源'
+        this.pageName = '课件资源'
       } else {
-        this.queryParams.category = "自定义";
-        this.pageName = "自定义";
+        this.queryParams.category = '自定义'
+        this.pageName = '自定义'
       }
       let Ajax = {
         subjectId: this.queryParams.subjectid, //科目
@@ -367,216 +351,216 @@ export default {
         pageSize: this.pageSize,
         category: this.queryParams.category,
         type: this.queryParams.resourceType,
-        linkWay: this.queryParams.wayType,
-      };
+        linkWay: this.queryParams.wayType
+      }
 
       list(Ajax)
         .then((response) => {
-          this.resourcesList = response.rows;
-          this.total = response.total;
-          this.loading = false;
+          this.resourcesList = response.rows
+          this.total = response.total
+          this.loading = false
         })
         .catch((err) => {
-          this.loading = false;
-        });
+          this.loading = false
+        })
     },
     // 资源类型字典翻译
     typeFormat(row, column) {
-      return this.selectDictLabel(this.typeOptions, row.type);
+      return this.selectDictLabel(this.typeOptions, row.type)
     },
     // 资源分类字典翻译
     categoryFormat(row, column) {
-      return this.selectDictLabel(this.categoryOptions, row.category);
+      return this.selectDictLabel(this.categoryOptions, row.category)
     },
     // 是否删除字典翻译
     delFlagFormat(row, column) {
-      return this.selectDictLabel(this.delFlagOptions, row.delFlag);
+      return this.selectDictLabel(this.delFlagOptions, row.delFlag)
     },
     handleClose(type, name, selectData) {
-      console.log("------------");
-      console.log(type);
-      console.log(name);
-      console.log(selectData);
-      let _this = this;
-      if (this.title == "上传至云库") {
+      console.log('------------')
+      console.log(type)
+      console.log(name)
+      console.log(selectData)
+      let _this = this
+      if (this.title == '上传至云库') {
         _this.ids.forEach((item, index) => {
           let Ajax = {
-            resourseId: item,
-          };
+            resourseId: item
+          }
           if (name) {
-            Ajax.resourcesName = name;
+            Ajax.resourcesName = name
           }
           upToCloudResourse(Ajax).then(() => {
             if (index == _this.ids.length - 1) {
-              _this.msgSuccess("操作成功");
-              _this.dialogVisible = false;
+              _this.msgSuccess('操作成功')
+              _this.dialogVisible = false
             }
-          });
-        });
-      } else if (this.title == "上传至校本资源库") {
+          })
+        })
+      } else if (this.title == '上传至校本资源库') {
         _this.ids.forEach((item, index) => {
           let Ajax = {
-            resourseId: item,
-          };
+            resourseId: item
+          }
           if (name) {
-            Ajax.resourcesName = name;
+            Ajax.resourcesName = name
           }
           upToSchoolResourse(Ajax).then(() => {
             if (index == _this.ids.length - 1) {
-              _this.msgSuccess("操作成功");
-              _this.dialogVisible = false;
+              _this.msgSuccess('操作成功')
+              _this.dialogVisible = false
             }
-          });
-        });
-      } else if (this.title == "上传至班牌") {
-        console.log("上传至班牌");
-        console.log(selectData);
+          })
+        })
+      } else if (this.title == '上传至班牌') {
+        console.log('上传至班牌')
+        console.log(selectData)
         _this.ids.forEach((item, index) => {
           let Ajax = {
             resourseId: item,
             classId: selectData.checkedClass,
             studentCodes: selectData.checkedStudent
-              ? selectData.checkedStudent.join(",")
-              : "",
-          };
+              ? selectData.checkedStudent.join(',')
+              : ''
+          }
           if (name) {
-            Ajax.resourcesName = name;
+            Ajax.resourcesName = name
           }
-          console.log("上传至班牌", Ajax);
+          console.log('上传至班牌', Ajax)
           upToSchoolClass(Ajax).then(() => {
             if (index == _this.ids.length - 1) {
-              _this.msgSuccess("操作成功");
-              _this.dialogVisible = false;
+              _this.msgSuccess('操作成功')
+              _this.dialogVisible = false
             }
-          });
-        });
-      } else if (this.title == "上传至学生端") {
-        console.log("上传至学生端");
-        console.log(selectData);
+          })
+        })
+      } else if (this.title == '上传至学生端') {
+        console.log('上传至学生端')
+        console.log(selectData)
         _this.ids.forEach((item, index) => {
           let Ajax = {
             resourseId: item,
             classId: selectData.checkedClass,
             remark: selectData.remark,
-            studentCodes: selectData.checkedStudent.join(","),
-          };
+            studentCodes: selectData.checkedStudent.join(',')
+          }
           if (name) {
-            Ajax.resourcesName = name;
+            Ajax.resourcesName = name
           }
           upToSchoolStudent(Ajax).then(() => {
             if (index == _this.ids.length - 1) {
-              _this.msgSuccess("操作成功");
-              _this.dialogVisible = false;
+              _this.msgSuccess('操作成功')
+              _this.dialogVisible = false
             }
-          });
-        });
-      } else if (this.title == "上传至家长端") {
-        console.log("上传至家长端");
-        console.log(selectData);
+          })
+        })
+      } else if (this.title == '上传至家长端') {
+        console.log('上传至家长端')
+        console.log(selectData)
         _this.ids.forEach((item, index) => {
           let Ajax = {
             resourseId: item,
             classId: selectData.checkedClass,
             remark: selectData.remark,
-            studentCodes: selectData.checkedStudent.join(","),
-          };
+            studentCodes: selectData.checkedStudent.join(',')
+          }
           if (name) {
-            Ajax.resourcesName = name;
+            Ajax.resourcesName = name
           }
           upToSchoolParent(Ajax).then(() => {
             if (index == _this.ids.length - 1) {
-              _this.msgSuccess("操作成功");
-              _this.dialogVisible = false;
+              _this.msgSuccess('操作成功')
+              _this.dialogVisible = false
             }
-          });
-        });
+          })
+        })
       }
     },
     upToCloudResourse() {
-      this.isZdy = false;
-      let _this = this;
-      const resourcesIds = this.ids.join(",");
-      this.title = "上传至云库";
-      this.selectType = "";
-      this.dialogVisible = true;
+      this.isZdy = false
+      let _this = this
+      const resourcesIds = this.ids.join(',')
+      this.title = '上传至云库'
+      this.selectType = ''
+      this.dialogVisible = true
     },
     upToSchoolResourse() {
-      this.isZdy = true;
-      let _this = this;
-      const resourcesIds = this.ids.join(",");
-      this.title = "上传至校本资源库";
-      this.selectType = "";
-      this.dialogVisible = true;
+      this.isZdy = true
+      let _this = this
+      const resourcesIds = this.ids.join(',')
+      this.title = '上传至校本资源库'
+      this.selectType = ''
+      this.dialogVisible = true
     },
     upToSchoolClass() {
-      this.isZdy = false;
-      let _this = this;
-      const resourcesIds = this.ids.join(",");
-      this.title = "上传至班牌";
-      this.selectType = "class";
-      this.dialogVisible = true;
+      this.isZdy = false
+      let _this = this
+      const resourcesIds = this.ids.join(',')
+      this.title = '上传至班牌'
+      this.selectType = 'class'
+      this.dialogVisible = true
     },
     upToSchoolStudent() {
-      this.isZdy = false;
-      let _this = this;
-      const resourcesIds = this.ids.join(",");
-      this.title = "上传至学生端";
-      this.selectType = "student";
-      this.dialogVisible = true;
+      this.isZdy = false
+      let _this = this
+      const resourcesIds = this.ids.join(',')
+      this.title = '上传至学生端'
+      this.selectType = 'student'
+      this.dialogVisible = true
     },
     upToSchoolParent() {
-      this.isZdy = false;
-      let _this = this;
-      const resourcesIds = this.ids.join(",");
-      this.title = "上传至家长端";
-      this.selectType = "parent";
-      this.dialogVisible = true;
+      this.isZdy = false
+      let _this = this
+      const resourcesIds = this.ids.join(',')
+      this.title = '上传至家长端'
+      this.selectType = 'parent'
+      this.dialogVisible = true
     },
 
     upToQuestion() {
       // 只能上传视频文件
       for (var idx = 0; idx < this.idsSel.length; idx++) {
         if (this.idsSel[idx].type != 1) {
-          this.$message.warning("只能上传视频文件！");
-          return;
+          this.$message.warning('只能上传视频文件！')
+          return
         }
       }
-      this.quesDialog = true;
+      this.quesDialog = true
     },
     submitQuestion() {
-      this.$refs["formQuestion"].validate((valid) => {
+      this.$refs['formQuestion'].validate((valid) => {
         if (valid) {
-          this.quesLoading = true;
+          this.quesLoading = true
           this.ids.forEach((item, index) => {
             let paramObj = {
               questionId: this.form.questionId,
-              resourseId: item,
-            };
+              resourseId: item
+            }
             updataQuestion(paramObj)
               .then((response) => {
-                this.msgSuccess("上传成功");
-                this.quesLoading = false;
-                this.cancelQuestion();
+                this.msgSuccess('上传成功')
+                this.quesLoading = false
+                this.cancelQuestion()
               })
               .catch((err) => {
-                console.log(err);
-                this.quesLoading = false;
-              });
-          });
+                console.log(err)
+                this.quesLoading = false
+              })
+          })
         }
-      });
+      })
     },
     cancelQuestion() {
-      this.questionId = "";
-      this.quesDialog = false;
+      this.questionId = ''
+      this.quesDialog = false
     },
     dialogVisibleClose() {
-      this.dialogVisible = false;
+      this.dialogVisible = false
     },
     // 取消按钮
     cancel() {
-      this.open = false;
-      this.reset();
+      this.open = false
+      this.reset()
     },
     // 表单重置
     reset() {
@@ -596,212 +580,212 @@ export default {
         delFlag: null,
         createBy: null,
         createTime: null,
-        remark: null,
-      };
+        remark: null
+      }
     },
     /** 搜索按钮操作 */
     handleQuery(data, type) {
-      this.pageNum = 1;
-      this.queryParams = Object.assign(this.queryParams, data);
-      this.queryParams.wayType = data.wayType || "1";
-      this.getList();
+      this.pageNum = 1
+      this.queryParams = Object.assign(this.queryParams, data)
+      this.queryParams.wayType = data.wayType || '1'
+      this.getList()
       // this.getTreeselect()
     },
     /** 重置按钮操作 */
     resetQuery(data) {
-      this.queryParams = data;
-      this.queryParams.chapterId = "";
-      this.pageNum = 1;
-      this.getList();
+      this.queryParams = data
+      this.queryParams.chapterId = ''
+      this.pageNum = 1
+      this.getList()
     },
     // 多选框选中数据
     handleSelectionChange(selection) {
-      this.idsSel = selection.map((item) => item);
-      this.ids = selection.map((item) => item.resourcesId);
-      this.resourcesNames = selection.map((item) => item.resourcesName);
-      this.single = selection.length !== 1;
-      this.multiple = !selection.length;
+      this.idsSel = selection.map((item) => item)
+      this.ids = selection.map((item) => item.resourcesId)
+      this.resourcesNames = selection.map((item) => item.resourcesName)
+      this.single = selection.length !== 1
+      this.multiple = !selection.length
     },
     formChange(data, type) {
-      this.queryParams = data;
-      this.queryParams.wayType = data.wayType || "1";
-      if (this.viewName == "Index" && this.queryParams.wayType == 2) {
+      this.queryParams = data
+      this.queryParams.wayType = data.wayType || '1'
+      if (this.viewName == 'Index' && this.queryParams.wayType == 2) {
         this.searchformShow = {
-          wayType: "1",
-          subjectid: "",
-        };
+          wayType: '1',
+          subjectid: ''
+        }
       } else {
         this.searchformShow = {
-          wayType: "1",
-          subjectid: "",
-          edition: "",
-          slipid: "",
-          coursewareType: "",
-          resourceType: "",
-        };
+          wayType: '1',
+          subjectid: '',
+          edition: '',
+          slipid: '',
+          coursewareType: '',
+          resourceType: ''
+        }
       }
-      if (type != "coursewareType") this.getTreeselect(type);
+      if (type != 'coursewareType') this.getTreeselect(type)
     },
     /** 新增按钮操作 */
     handleAdd() {
-      this.reset();
-      this.open = true;
-      this.title = "添加个人资源库";
+      this.reset()
+      this.open = true
+      this.title = '添加个人资源库'
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
-      this.reset();
-      const resourcesId = row.resourcesId || this.ids;
+      this.reset()
+      const resourcesId = row.resourcesId || this.ids
       getInfo(resourcesId).then((response) => {
-        this.form = response.data;
-        this.open = true;
-        this.title = "修改个人资源库";
-      });
+        this.form = response.data
+        this.open = true
+        this.title = '修改个人资源库'
+      })
     },
     /** 提交按钮 */
     submitForm() {
-      this.$refs["form"].validate((valid) => {
+      this.$refs['form'].validate((valid) => {
         if (valid) {
           if (this.form.resourcesId != null) {
             modifyPersonResourceInfo(this.form).then((response) => {
-              this.msgSuccess("修改成功");
-              this.open = false;
-              this.getList();
-            });
+              this.msgSuccess('修改成功')
+              this.open = false
+              this.getList()
+            })
           } else {
             add(this.form).then((response) => {
-              this.msgSuccess("新增成功");
-              this.open = false;
-              this.getList();
-            });
+              this.msgSuccess('新增成功')
+              this.open = false
+              this.getList()
+            })
           }
         }
-      });
+      })
     },
     /** 删除按钮操作 */
     handleDelete(row) {
-      const resourcesIds = row.resourcesId || this.ids;
+      const resourcesIds = row.resourcesId || this.ids
       this.$confirm(
         '是否确认删除个人资源库名称为"' + row.resourcesName + '"的数据项?',
-        "警告",
+        '警告',
         {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
-          type: "warning",
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
         }
       )
-        .then(function () {
-          return remove(row.resourcesId);
+        .then(function() {
+          return remove(row.resourcesId)
         })
         .then(() => {
-          this.getList();
-          this.msgSuccess("删除成功");
-        });
+          this.getList()
+          this.msgSuccess('删除成功')
+        })
     },
     /** 导出按钮操作 */
     handleExport() {
-      const queryParams = this.queryParams;
-      this.$confirm("是否确认导出所有个人资源库数据项?", "警告", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
+      const queryParams = this.queryParams
+      this.$confirm('是否确认导出所有个人资源库数据项?', '警告', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
       })
         .then(() => {
-          this.exportLoading = true;
-          return exportList(queryParams);
+          this.exportLoading = true
+          return exportList(queryParams)
         })
         .then((response) => {
-          this.download(response.msg);
-          this.exportLoading = false;
-        });
+          this.download(response.msg)
+          this.exportLoading = false
+        })
     },
 
     /** 查询章节下拉树结构 */
     getTreeselect(type) {
       if (this.queryParams.wayType == 1) {
         if (
-          (type != "slipid" && type != "wayType") ||
-          this.viewName == "Custom"
+          (type != 'slipid' && type != 'wayType') ||
+          this.viewName == 'Custom'
         ) {
-          this.deptOptions = [];
-          this.KnowledgeOptions = [];
-          this.queryParams.chapterId = "";
-          return;
+          this.deptOptions = []
+          this.KnowledgeOptions = []
+          this.queryParams.chapterId = ''
+          return
         }
         let Ajax = {
           editionId: this.queryParams.edition, //版本
           subjectId: this.queryParams.subjectid, //科目
           pharseId: this.queryParams.pharseId, //pharseId
-          gradeId: this.queryParams.slipid, //学册
+          gradeId: this.queryParams.slipid //学册
           // gradeid:301
-        };
-        this.deptOptions = [];
+        }
+        this.deptOptions = []
         if (!Ajax.gradeId) return
-        this.treeLoading = true;
+        this.treeLoading = true
         treeList(Ajax)
           .then((response) => {
-            this.deptOptions = response.data;
-            this.treeLoading = false;
+            this.deptOptions = response.data
+            this.treeLoading = false
           })
           .catch((response) => {
-            this.treeLoading = false;
-          });
+            this.treeLoading = false
+          })
       } else {
         if (
-          (type != "subjectid" && type != "wayType") ||
-          this.viewName == "Custom"
+          (type != 'subjectid' && type != 'wayType') ||
+          this.viewName == 'Custom'
         ) {
-          this.deptOptions = [];
-          this.KnowledgeOptions = [];
-          this.queryParams.chapterId = "";
-          return;
+          this.deptOptions = []
+          this.KnowledgeOptions = []
+          this.queryParams.chapterId = ''
+          return
         }
         let Ajax = {
           subjectId: this.queryParams.subjectid,
-          pharseId: this.queryParams.pharseId,
-        };
-        this.KnowledgeOptions = [];
+          pharseId: this.queryParams.pharseId
+        }
+        this.KnowledgeOptions = []
         if (!Ajax.subjectId) return
-        this.treeLoading = true;
+        this.treeLoading = true
         knowledgeTree(Ajax)
           .then((response) => {
-            let list = this.filterData(response.data, 0);
-            this.KnowledgeOptions = list;
-            this.treeLoading = false;
+            let list = this.filterData(response.data, 0)
+            this.KnowledgeOptions = list
+            this.treeLoading = false
           })
           .catch((response) => {
-            this.treeLoading = false;
-          });
+            this.treeLoading = false
+          })
       }
     },
     filterData(data, index) {
-      let children = [];
+      let children = []
       data.forEach((item) => {
-        item.tier = index;
+        item.tier = index
         if (item.children && index < 2) {
-          item.children = this.filterData(item.children, index + 1);
+          item.children = this.filterData(item.children, index + 1)
         } else {
-          item.children = null;
+          item.children = null
         }
-        children.push(item);
-      });
-      return children;
+        children.push(item)
+      })
+      return children
     },
     // 筛选节点
     filterNode(value, data) {
-      if (!value) return true;
-      return data.name.indexOf(value) !== -1;
+      if (!value) return true
+      return data.name.indexOf(value) !== -1
     },
     // 节点单击事件
     handleNodeClick(data) {
       if (!data.children?.length) {
-        this.pageNum = 1;
-        this.queryParams.chapterId = data.id;
-        this.getList();
+        this.pageNum = 1
+        this.queryParams.chapterId = data.id
+        this.getList()
       } else {
-        this.queryParams.chapterId = "";
+        this.queryParams.chapterId = ''
       }
-    },
-  },
-};
+    }
+  }
+}
 </script>

src/views/cloudTank/index.vue

@@ -1,12 +1,14 @@
 <template>
   <div class="app-container">
-    <form-search :searchformShow="searchformShow" @handleQuery="handleQuery" @change="formChange" @resetQuery="resetQuery"></form-search>
+    <form-search :searchformShow="searchformShow" @handleQuery="handleQuery" @change="formChange"
+                 @resetQuery="resetQuery"></form-search>
     <el-card class="box-card" style="margin-bottom:30px">
       <el-row :gutter="24">
         <el-col :span="4">
           <h3 style="padding-left: 11px;border-left: 2px solid #e6a700;color: #e6a700;">章节目录</h3>
           <div class="head-container">
-            <el-input v-model="deptName" placeholder="请输入部门名称" clearable size="small" prefix-icon="el-icon-search" style="margin-bottom: 20px" />
+            <el-input v-model="deptName" placeholder="请输入部门名称" clearable size="small" prefix-icon="el-icon-search"
+                      style="margin-bottom: 20px"/>
           </div>
           <div class="head-container">
             <el-tree
@@ -22,34 +24,42 @@
         <el-col :span="20">
           <el-row :gutter="10" class="mb8">
             <el-col :span="1.5" v-hasPermi="['front:cloudResource:downloadToPersonResourse']">
-              <el-button plain icon="el-icon-download" size="small" @click="downToPersonResourse" :disabled="multiple">下载至个人资源库</el-button>
+              <el-button plain icon="el-icon-download" size="small" @click="downToPersonResourse" :disabled="multiple">
+                下载至个人资源库
+              </el-button>
             </el-col>
 
             <el-table v-loading="loading" :data="resourcesList" @selection-change="handleSelectionChange">
-              <el-table-column type="selection" width="55" align="center" />
+              <el-table-column type="selection" width="55" align="center"/>
               <el-table-column label="文件" align="center" prop="resourcesName" v-if="viewName=='Index'">
                 <template slot-scope="scope">
-                  <img style="width:130px;height:80px ;cursor:pointer" :src="img.ship" @click="handleView(scope.row)" alt />
+                  <resource-preview-button :row="scope.row">
+                    <img style="width:130px;height:80px ;cursor:pointer" :src="img.ship" alt/>
+                  </resource-preview-button>
                 </template>
               </el-table-column>
-              <el-table-column label="文件名" align="center" prop="resourcesName" />
-              <el-table-column label="发布人" align="center" prop="createBy" />
-              <el-table-column label="时间" align="center" prop="createTime" />
-              <el-table-column
-                label="操作"
-                align="center"
-                class-name="small-padding fixed-width"
-                v-if="userInfo && userInfo.roles && userInfo.roles[0].roleId == 5"
-              >
+              <el-table-column label="文件名" align="center" prop="resourcesName"/>
+              <el-table-column label="发布人" align="center" prop="createBy"/>
+              <el-table-column label="时间" align="center" prop="createTime"/>
+              <el-table-column label="操作" align="center" class-name="small-padding fixed-width"
+                               v-if="viewName!='Index'||isFrontMaster">
                 <template slot-scope="scope">
-                  <el-button v-if="viewName!='Index'" size="mini" type="text" icon="el-icon-view" @click="handleView(scope.row)">预览</el-button>
-                  <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
-                  <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['system:resources:remove']">删除</el-button>
+                  <resource-preview-button v-if="viewName!='Index'" :row="scope.row"/>
+                  <template v-if="isFrontMaster">
+                    <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
+                               :class="{'ml10':viewName!='Index'}">
+                      修改
+                    </el-button>
+                    <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
+                               v-hasPermi="['system:resources:remove']">删除
+                    </el-button>
+                  </template>
                 </template>
               </el-table-column>
             </el-table>
 
-            <pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" @pagination="getList" />
+            <pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize"
+                        @pagination="getList"/>
           </el-row>
         </el-col>
       </el-row>
@@ -58,7 +68,7 @@
     <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="资源名称" prop="resourcesName">
-          <el-input v-model="form.resourcesName" placeholder="请输入资源名称" />
+          <el-input v-model="form.resourcesName" placeholder="请输入资源名称"/>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -74,52 +84,39 @@
       @handleClose="handleClose"
       @dialogVisibleClose="dialogVisibleClose"
     ></upload-dialog>
-    <el-dialog v-if="dialogVideo" title="查看视频" :visible.sync="dialogVideo" width="60%">
-      <mx-video :aliIdType="aliIdType" :src="src" controls></mx-video>
-    </el-dialog>
   </div>
 </template>
 
 <script>
-import aliplayer from "../videocourse/compoent/aliplayer";
 import {
   addCloudResource,
   deleteCloudResource,
+  downToPersonResourse,
+  downToSchoolResourse,
   getCloudResourceDetail,
   getCloudResources,
-  getVideoPlayAuth,
-  modifyCloudResource,
-  downToSchoolResourse,
-  downToPersonResourse,
-} from "@/api/webApi/cloud";
-import { treeList } from "@/api/webApi/webQue.js";
-import { mapGetters } from "vuex";
+  modifyCloudResource
+} from '@/api/webApi/cloud'
+import { treeList } from '@/api/webApi/webQue.js'
+import { mapGetters } from 'vuex'
+import ResourcePreviewButton from '@/views/accurateTeaching/components/resource-preview-button'
 
-import { getUserInfo } from "@/utils/auth";
 export default {
-  components: {
-    aliplayer,
-  },
+  components: { ResourcePreviewButton },
   data() {
     return {
-      src: "",
-      aliIdType: "",
-      coverUrl: "",
-      dialogVideo: false,
-      videoId: null,
-      isVideo: null,
       searchformShow: {},
       dialogVisible: false,
       img: {
-        ship: require("@/assets/images/ship.png"),
+        ship: require('@/assets/images/ship.png')
       },
       treeProps: {
-        children: "children",
-        label: "name",
-        code: "id",
+        children: 'children',
+        label: 'name',
+        code: 'id'
       },
       deptOptions: undefined,
-      deptName: "",
+      deptName: '',
       // 遮罩层
       loading: true,
       // 导出遮罩层
@@ -139,7 +136,7 @@ export default {
       // 云库表格数据
       resourcesList: [],
       // 弹出层标题
-      title: "",
+      title: '',
       // 是否显示弹出层
       open: false,
       // 资源类型字典
@@ -161,102 +158,79 @@ export default {
         chapterId: null,
         resourcesUrl: null,
         bookId: null,
-        subjectId: null,
+        subjectId: null
       },
       // 表单参数
       form: {},
       // 表单校验
       rules: {
         resourcesName: [
-          { required: true, message: "资源名称不能为空", trigger: "blur" },
+          { required: true, message: '资源名称不能为空', trigger: 'blur' }
         ],
         category: [
-          { required: true, message: "资源分类不能为空", trigger: "change" },
+          { required: true, message: '资源分类不能为空', trigger: 'change' }
         ],
         chapterId: [
-          { required: true, message: "章节不能为空", trigger: "blur" },
+          { required: true, message: '章节不能为空', trigger: 'blur' }
         ],
-        bookId: [{ required: true, message: "学册不能为空", trigger: "blur" }],
+        bookId: [{ required: true, message: '学册不能为空', trigger: 'blur' }],
         subjectId: [
-          { required: true, message: "科目不能为空", trigger: "blur" },
+          { required: true, message: '科目不能为空', trigger: 'blur' }
         ],
         delFlag: [
-          { required: true, message: "是否删除不能为空", trigger: "change" },
+          { required: true, message: '是否删除不能为空', trigger: 'change' }
         ],
         createBy: [
-          { required: true, message: "创建者Id不能为空", trigger: "blur" },
-        ],
+          { required: true, message: '创建者Id不能为空', trigger: 'blur' }
+        ]
       },
-      viewName: "",
-    };
+      viewName: ''
+    }
   },
   computed: {
-    ...mapGetters(["currentUser"]),
+    ...mapGetters(['currentUser', 'isFrontMaster']),
     userInfo() {
       // TODO: hht 22.1.5 兼容历史写法，待清理
-      return this.currentUser;
-    },
+      return this.currentUser
+    }
   },
   created() {
-    this.viewName = this.$route.name;
-    if (this.viewName == "Index") {
+    this.viewName = this.$route.name
+    if (this.viewName == 'Index') {
       this.searchformShow = {
-        province: "",
-        subjectid: "",
-        edition: "",
-        slipid: "",
-      };
-    } else if (this.viewName == "Courseware") {
+        province: '',
+        subjectid: '',
+        edition: '',
+        slipid: ''
+      }
+    } else if (this.viewName == 'Courseware') {
       this.searchformShow = {
-        province: "",
-        subjectid: "",
-        edition: "",
-        slipid: "",
-        coursewareType: "",
-      };
+        province: '',
+        subjectid: '',
+        edition: '',
+        slipid: '',
+        coursewareType: ''
+      }
     }
-    this.getList();
-    this.getDicts("resource_type").then((response) => {
-      this.typeOptions = response.data;
-    });
-    this.getDicts("category").then((response) => {
-      this.categoryOptions = response.data;
-    });
-    this.getDicts("bool_flag").then((response) => {
-      this.delFlagOptions = response.data;
-    });
+    this.getList()
+    this.getDicts('resource_type').then((response) => {
+      this.typeOptions = response.data
+    })
+    this.getDicts('category').then((response) => {
+      this.categoryOptions = response.data
+    })
+    this.getDicts('bool_flag').then((response) => {
+      this.delFlagOptions = response.data
+    })
   },
   methods: {
-    handlePlay() {
-      console.log(111);
-    },
-    handleView(row) {
-      if (row.resourcesUrl.indexOf(".pdf") != -1) {
-        window.open("/pdfView/index.html?src=" + row.resourcesUrl);
-      } else if (
-        row.resourcesUrl.indexOf(".doc") != -1 ||
-        row.resourcesUrl.indexOf(".ppt") != -1 ||
-        row.resourcesUrl.indexOf(".xls") != -1 ||
-        row.resourcesUrl.indexOf(".xlsx") != -1
-      ) {
-        window.open(
-          "https://view.officeapps.live.com/op/view.aspx?src=" +
-            row.resourcesUrl
-        );
-      } else {
-        this.src = row.resourcesUrl;
-        this.aliIdType = row.aliIdType;
-        this.dialogVideo = true;
-      }
-    },
-
     /** 查询个人资源库列表 */
     getList() {
-      this.loading = true;
-      if (this.viewName == "Index") {
-        this.queryParams.category = "微课视频";
-      } else if (this.viewName == "Courseware") {
-        this.queryParams.category = "课件资源";
+      this.loading = true
+      if (this.viewName == 'Index') {
+        this.queryParams.category = '微课视频'
+      } else if (this.viewName == 'Courseware') {
+        this.queryParams.category = '课件资源'
       }
       let Ajax = {
         subjectId: this.queryParams.subjectid, //科目
@@ -269,84 +243,84 @@ export default {
         schoolId: this.queryParams.schoolid,
         pageNum: this.pageNum,
         pageSize: this.pageSize,
-        category: this.queryParams.category,
-      };
+        category: this.queryParams.category
+      }
       getCloudResources(Ajax)
         .then((response) => {
-          this.resourcesList = response.rows;
-          this.total = response.total;
-          this.loading = false;
+          this.resourcesList = response.rows
+          this.total = response.total
+          this.loading = false
         })
         .catch((err) => {
-          this.loading = false;
-        });
+          this.loading = false
+        })
     },
     // 资源类型字典翻译
     typeFormat(row, column) {
-      return this.selectDictLabel(this.typeOptions, row.type);
+      return this.selectDictLabel(this.typeOptions, row.type)
     },
     // 资源分类字典翻译
     categoryFormat(row, column) {
-      return this.selectDictLabel(this.categoryOptions, row.category);
+      return this.selectDictLabel(this.categoryOptions, row.category)
     },
     // 是否删除字典翻译
     delFlagFormat(row, column) {
-      return this.selectDictLabel(this.delFlagOptions, row.delFlag);
+      return this.selectDictLabel(this.delFlagOptions, row.delFlag)
     },
 
     handleClose(type, name) {
-      let _this = this;
-      if (this.title == "下载至个人资源库") {
+      let _this = this
+      if (this.title == '下载至个人资源库') {
         _this.ids.forEach((item, index) => {
           let Ajax = {
-            resourseId: item,
-          };
+            resourseId: item
+          }
           if (name) {
-            Ajax.resourcesName = name;
+            Ajax.resourcesName = name
           }
           downToPersonResourse(Ajax).then(() => {
             if (index == _this.ids.length - 1) {
-              _this.msgSuccess("操作成功");
-              _this.dialogVisible = false;
+              _this.msgSuccess('操作成功')
+              _this.dialogVisible = false
             }
-          });
-        });
+          })
+        })
       } else {
         _this.ids.forEach((item, index) => {
           let Ajax = {
-            resourseId: item,
-          };
+            resourseId: item
+          }
           if (name) {
-            Ajax.resourcesName = name;
+            Ajax.resourcesName = name
           }
           downToSchoolResourse(Ajax).then(() => {
             if (index == _this.ids.length - 1) {
-              _this.msgSuccess("操作成功");
-              _this.dialogVisible = false;
+              _this.msgSuccess('操作成功')
+              _this.dialogVisible = false
             }
-          });
-        });
+          })
+        })
       }
     },
     downToPersonResourse() {
-      let _this = this;
-      const resourcesIds = this.ids.join(",");
-      this.title = "下载至个人资源库";
-      this.dialogVisible = true;
+      let _this = this
+      const resourcesIds = this.ids.join(',')
+      this.title = '下载至个人资源库'
+      this.dialogVisible = true
     },
     downToSchoolResourse() {
-      let _this = this;
-      const resourcesIds = this.ids.join(",");
-      this.title = "下载至校本资源库";
-      this.dialogVisible = true;
+      let _this = this
+      const resourcesIds = this.ids.join(',')
+      this.title = '下载至校本资源库'
+      this.dialogVisible = true
     },
     dialogVisibleClose() {
-      this.dialogVisible = false;
+      this.dialogVisible = false
     },
     // 取消按钮
     cancel() {
-      this.open = false;
-      this.reset();
+      this.open = false
+      this.reset()
     },
     // 表单重置
     reset() {
@@ -366,150 +340,150 @@ export default {
         delFlag: null,
         createBy: null,
         createTime: null,
-        remark: null,
-      };
+        remark: null
+      }
     },
     formChange(data, type) {
-      console.log(data);
-      this.queryParams = data;
-      this.getTreeselect(type);
+      console.log(data)
+      this.queryParams = data
+      this.getTreeselect(type)
     },
     /** 搜索按钮操作 */
     handleQuery(data) {
-      this.pageNum = 1;
-      this.queryParams = Object.assign(this.queryParams, data);
-      this.getList();
+      this.pageNum = 1
+      this.queryParams = Object.assign(this.queryParams, data)
+      this.getList()
       // this.getTreeselect()
     },
     /** 重置按钮操作 */
     resetQuery(data) {
-      this.queryParams = data;
-      this.queryParams.chapterId = "";
-      this.pageNum = 1;
-      this.getList();
+      this.queryParams = data
+      this.queryParams.chapterId = ''
+      this.pageNum = 1
+      this.getList()
     },
     // 多选框选中数据
     handleSelectionChange(selection) {
-      this.ids = selection.map((item) => item.resourcesId);
-      this.single = selection.length !== 1;
-      this.multiple = !selection.length;
+      this.ids = selection.map((item) => item.resourcesId)
+      this.single = selection.length !== 1
+      this.multiple = !selection.length
     },
     /** 新增按钮操作 */
     handleAdd() {
-      this.reset();
-      this.open = true;
-      this.title = "添加云库";
+      this.reset()
+      this.open = true
+      this.title = '添加云库'
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
-      this.reset();
+      this.reset()
       getCloudResourceDetail({ resourcesId: row.resourcesId }).then(
         (response) => {
-          this.form = response.data;
-          this.open = true;
-          this.title = "修改云库";
+          this.form = response.data
+          this.open = true
+          this.title = '修改云库'
         }
-      );
+      )
     },
     /** 提交按钮 */
     submitForm() {
-      this.$refs["form"].validate((valid) => {
+      this.$refs['form'].validate((valid) => {
         if (valid) {
           if (this.form.resourcesId != null) {
             modifyCloudResource(this.form).then((response) => {
-              this.msgSuccess("修改成功");
-              this.open = false;
-              this.getList();
-            });
+              this.msgSuccess('修改成功')
+              this.open = false
+              this.getList()
+            })
           } else {
             addCloudResource(this.form).then((response) => {
-              this.msgSuccess("新增成功");
-              this.open = false;
-              this.getList();
-            });
+              this.msgSuccess('新增成功')
+              this.open = false
+              this.getList()
+            })
           }
         }
-      });
+      })
     },
     /** 删除按钮操作 */
     handleDelete(row) {
-      const resourcesIds = row.resourcesId || this.ids;
+      const resourcesIds = row.resourcesId || this.ids
       this.$confirm(
         '是否确认删除云库名称为"' + row.resourcesName + '"的数据项?',
-        "警告",
+        '警告',
         {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
-          type: "warning",
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
         }
       )
-        .then(function () {
-          return deleteCloudResource(row.resourcesId);
+        .then(function() {
+          return deleteCloudResource(row.resourcesId)
         })
         .then(() => {
-          this.getList();
-          this.msgSuccess("删除成功");
-        });
+          this.getList()
+          this.msgSuccess('删除成功')
+        })
     },
     /** 导出按钮操作 */
     handleExport() {
-      const queryParams = this.queryParams;
-      this.$confirm("是否确认导出所有云库数据项?", "警告", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
+      const queryParams = this.queryParams
+      this.$confirm('是否确认导出所有云库数据项?', '警告', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
       })
         .then(() => {
-          this.exportLoading = true;
-          return exportList(queryParams);
+          this.exportLoading = true
+          return exportList(queryParams)
         })
         .then((response) => {
-          this.download(response.msg);
-          this.exportLoading = false;
-        });
+          this.download(response.msg)
+          this.exportLoading = false
+        })
     },
 
     /** 查询部门下拉树结构 */
     getTreeselect(type) {
       if (!this.queryParams.slipid) {
-        this.deptOptions = [];
-        return;
+        this.deptOptions = []
+        return
       }
-      if (type != "slipid") {
-        return;
+      if (type != 'slipid') {
+        return
       }
       let Ajax = {
         editionId: this.queryParams.edition, //版本
         subjectId: this.queryParams.subjectid, //科目
         pharseId: this.queryParams.pharseId, //pharseId
-        gradeId: this.queryParams.slipid, //学册
+        gradeId: this.queryParams.slipid //学册
         // gradeid:301
-      };
-      this.treeLoading = true;
+      }
+      this.treeLoading = true
       treeList(Ajax)
         .then((response) => {
-          this.deptOptions = response.data;
-          this.treeLoading = false;
+          this.deptOptions = response.data
+          this.treeLoading = false
         })
         .catch((response) => {
-          this.treeLoading = false;
-        });
+          this.treeLoading = false
+        })
     },
     // 筛选节点
     filterNode(value, data) {
-      if (!value) return true;
-      return data.label.indexOf(value) !== -1;
+      if (!value) return true
+      return data.label.indexOf(value) !== -1
     },
     // 节点单击事件
     handleNodeClick(data) {
       if (!data.children?.length) {
-        this.pageNum = 1;
-        this.queryParams.chapterId = data.id;
-        this.getList();
+        this.pageNum = 1
+        this.queryParams.chapterId = data.id
+        this.getList()
       } else {
-        this.queryParams.chapterId = "";
+        this.queryParams.chapterId = ''
       }
-    },
-  },
-};
+    }
+  }
+}
 </script>