new preview for office doc

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

@@ -16,8 +16,11 @@
 </template>
 
 <script>
+import PaperActionsMixin from "@/views/questioncenter/components/paper-actions-mixin";
+
 export default {
   name: 'resource-preview-button',
+  mixins: [PaperActionsMixin],
   props: {
     row: Object
   },
@@ -31,22 +34,12 @@ export default {
   },
   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
+      const {resourcesUrl, aliIdType} = this.row
+      if (this._isPDF(resourcesUrl) || this._isOffice(resourcesUrl)) {
+        this._filePreview(resourcesUrl)
+      } else if (this._isVideo(resourcesUrl)) {
+        this.aliIdType = aliIdType
+        this.src = resourcesUrl
         this.dialogVideo = true
       } else {
         this.$message.error('格式错误，无法预览该格式文件！')

src/views/accurateTeaching/recording/files.vue

@@ -1,262 +1,258 @@
-<template>
-  <div class="app-container">
-    <el-card class="box-card" style="margin-bottom:30px">
-      <el-form label-width="80px" ref="queryForm" :inline="true" style="display: flex;">
-        <el-row :gutter="24" class="" style="margin-right: 0;flex: 1;">
-          <el-col :span="24">
-            <el-form-item class="searchRadio" label="类型：" style="margin-bottom: 0;">
-              <el-tag @click="selectType('1')" :class="type == '1' ? 'current-tag' : ''">文档</el-tag>
-              <el-tag @click="selectType('2')" :class="type == '2' ? 'current-tag' : ''">图片</el-tag>
-            </el-form-item>
-          </el-col>
-        </el-row>
-
-        <el-button v-hasPermi="['front:evaluatingAccurateTeachingRecording:uploadToResource']" type="primary" icon="el-icon-upload2" @click="openUpload">本地上传至文件库</el-button>
-      </el-form>
-    </el-card>
-
-    <el-row :gutter="24">
-      <el-table v-loading="loading" :data="resourcesList">
-        <el-table-column label="序号" align="center" type="index" width="60" />
-        <el-table-column label="文件" prop="materialName">
-          <template slot-scope="scope">
-            <el-image v-if="scope.row.picSuffix=='jpg'||scope.row.picSuffix=='png'||scope.row.picSuffix=='jpeg'" style="width: 100px; height: 100px" :src="scope.row.materialUrl" :title="scope.row.materialName" :preview-src-list="[scope.row.materialUrl]">
-            </el-image>
-            <div v-else>{{scope.row.materialName}}</div>
-          </template>
-        </el-table-column>
-        <el-table-column label="发布人" prop="user">
-          <template slot-scope="scope">
-            {{scope.row.user.userName}}
-          </template>
-        </el-table-column>
-        <el-table-column label="时间" prop="createTime" />
-        <el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width">
-          <template slot-scope="scope">
-            <el-button v-if="scope.row.picSuffix!='jpg'&& scope.row.picSuffix!='png'&&scope.row.picSuffix!='jpeg'" size="mini" type="text" icon="el-icon-edit" @click="handleListPreview(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>
-          </template>
-        </el-table-column>
-      </el-table>
-      <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
-    </el-row>
-
-    <!-- 添加或修改个人资源库对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="30%" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px" v-if="open">
-        <el-form-item label="资源名称" prop="materialName">
-          <el-input v-model="form.materialName" placeholder="请输入资源名称" />
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
-      </div>
-    </el-dialog>
-    <el-dialog title="上传" v-if="dialogUploadVisible" :visible.sync="dialogUploadVisible" width="60%" v-loading="dialogUploading">
-      <el-form label-width="80px">
-        <el-form-item label="文件上传">
-          <file-upload :type="5" @input="uploadChanged"></file-upload>
-        </el-form-item>
-        <el-form-item label="资源名称" prop="materialName">
-          <el-input v-model="form.materialName" placeholder="请输入资源名称" />
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="uploadConfirm">确 定</el-button>
-        <el-button @click="dialogUploadVisible=false">取 消</el-button>
-      </div>
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-import {
-  uploadFile2OSS
-} from '@/api/webApi/common.js'
-import {
-  list,
-  add,
-  update,
-  remove
-} from '@/api/webApi/materials.js'
-import {
-  getUserProfile
-} from "@/api/system/user";
-// 导入组件
-import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
-export default {
-  data() {
-    return {
-      type: '1',
-
-      // 遮罩层
-      loading: false,
-
-      dialogUploading: false,
-      dialogUploadVisible: false,
-      uploadFileList: [],
-
-      // 列表数据
-      resourcesList: [],
-
-      // 弹出层标题
-      title: "",
-      fileName: '',
-      // 是否显示弹出层
-      open: false,
-
-      // 总条数
-      total: 0,
-      // 查询参数
-      queryParams: {
-        pageNum: 1,
-        pageSize: 10,
-      },
-      fileType: '1',
-      user: {},
-      form: {
-        materialName: ''
-      },
-      // 表单校验
-      rules: {
-        materialName: [{
-          required: true,
-          message: '文件名称不能为空',
-          trigger: 'blur'
-        }],
-      },
-    };
-  },
-  created() {
-    this.getUser()
-    this.getList()
-  },
-  methods: {
-    getUser() {
-      getUserProfile().then(response => {
-        this.user = response.data;
-      });
-    },
-    getList() {
-      this.loading = true
-      list({
-        type: this.type
-      }).then(response => {
-        this.resourcesList = response.rows
-        this.total = response.total
-        this.loading = false
-      })
-    },
-    openUpload() {
-      this.uploadFileList = [];
-      this.form.materialName = '';
-      this.dialogUploadVisible = true;
-    },
-    uploadChanged(fileList) {
-      this.uploadFileList = fileList
-      this.form.materialName = this.uploadFileList.length ? this.uploadFileList[0].name : ""
-    },
-    uploadConfirm() {
-      if (!this.uploadFileList.length) {
-        this.msgError('请先上传文件')
-        return;
-      }
-      this.dialogUploading = true
-      const file = this.uploadFileList[0]
-      let Ajax = {
-        'type': file.isImage ? 2 : 1, //图片2，文件1
-        "fileSize": file.fileSize,
-        "materialName": this.form.materialName,
-        "materialUrl": file.url,
-        "customerId": this.user.userId
-      }
-      add(Ajax).then(res => {
-        this.msgSuccess('提交成功')
-        this.dialogUploading = true
-        this.dialogUploadVisible = false
-        this.getList()
-      }).catch(_=> this.dialogUploading = false)
-    },
-    selectType(type) {
-      this.type = type
-      this.getList()
-    },
-    closeViewer() {
-      this.showViewer = false
-    },
-    /** 预览按钮操作 */
-    handleListPreview(row, index) {
-      if (row.materialUrl.indexOf('.pdf') != -1) {
-        window.open('/pdfView/index.html?src=' + row.materialUrl)
-      } else if (row.materialUrl.indexOf('.docx') != -1 || row.materialUrl.indexOf('.xlsm') != -1 || row.materialUrl
-        .indexOf('.pptx') != -1 || row.materialUrl.indexOf('.doc') != -1 || row.materialUrl.indexOf('.ppt') != -1 ||
-        row.materialUrl.indexOf('.xls') != -1 || row.materialUrl.indexOf('.xlsx') != -1) {
-        window.open('https://view.officeapps.live.com/op/view.aspx?src=' + row.materialUrl)
-      }
-      console.log(row)
-    },
-
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      this.form = {}
-      this.form = Object.assign({}, row);
-      this.open = true;
-      this.title = "修改文件名称";
-    },
-    /** 提交按钮 */
-    submitForm() {
-      this.$refs['form'].validate(valid => {
-        if (valid) {
-          update(this.form).then(response => {
-            this.msgSuccess('修改成功')
-            this.open = false
-            this.getList()
-          })
-        }
-      })
-    },
-    /** 删除按钮操作 */
-    handleDelete(row) {
-      this.$confirm('是否确认删除文件名为"' + row.materialName + '"的数据?', '警告', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(function () {
-        return remove(row.materialId)
-      }).then(() => {
-        this.getList()
-        this.msgSuccess('删除成功')
-      })
-    },
-
-    // 取消按钮
-    cancel() {
-      this.open = false;
-      this.fileName = '';
-    },
-  }
-};
-</script>
-
-<style scoped>
-.el-tag {
-  cursor: pointer;
-  margin-right: 10px;
-  border-radius: 14px;
-  padding: 0 20px;
-  background-color: #ffffff;
-  border-color: rgba(0, 0, 0, 0.65);
-  color: rgba(0, 0, 0, 0.65);
-}
-
-.current-tag {
-  background-color: #47c6a2;
-  border-color: #47c6a2;
-  color: #ffffff;
-}
-</style>
+<template>
+  <div class="app-container">
+    <el-card class="box-card" style="margin-bottom:30px">
+      <el-form label-width="80px" ref="queryForm" :inline="true" style="display: flex;">
+        <el-row :gutter="24" class="" style="margin-right: 0;flex: 1;">
+          <el-col :span="24">
+            <el-form-item class="searchRadio" label="类型：" style="margin-bottom: 0;">
+              <el-tag @click="selectType('1')" :class="type == '1' ? 'current-tag' : ''">文档</el-tag>
+              <el-tag @click="selectType('2')" :class="type == '2' ? 'current-tag' : ''">图片</el-tag>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-button v-hasPermi="['front:evaluatingAccurateTeachingRecording:uploadToResource']" type="primary" icon="el-icon-upload2" @click="openUpload">本地上传至文件库</el-button>
+      </el-form>
+    </el-card>
+
+    <el-row :gutter="24">
+      <el-table v-loading="loading" :data="resourcesList">
+        <el-table-column label="序号" align="center" type="index" width="60" />
+        <el-table-column label="文件" prop="materialName">
+          <template slot-scope="scope">
+            <el-image v-if="scope.row.picSuffix=='jpg'||scope.row.picSuffix=='png'||scope.row.picSuffix=='jpeg'" style="width: 100px; height: 100px" :src="scope.row.materialUrl" :title="scope.row.materialName" :preview-src-list="[scope.row.materialUrl]">
+            </el-image>
+            <div v-else>{{scope.row.materialName}}</div>
+          </template>
+        </el-table-column>
+        <el-table-column label="发布人" prop="user">
+          <template slot-scope="scope">
+            {{scope.row.user.userName}}
+          </template>
+        </el-table-column>
+        <el-table-column label="时间" prop="createTime" />
+        <el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width">
+          <template slot-scope="scope">
+            <el-button v-if="scope.row.picSuffix!='jpg'&& scope.row.picSuffix!='png'&&scope.row.picSuffix!='jpeg'" size="mini" type="text" icon="el-icon-edit" @click="handleListPreview(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>
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
+    </el-row>
+
+    <!-- 添加或修改个人资源库对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="30%" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px" v-if="open">
+        <el-form-item label="资源名称" prop="materialName">
+          <el-input v-model="form.materialName" placeholder="请输入资源名称" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+    <el-dialog title="上传" v-if="dialogUploadVisible" :visible.sync="dialogUploadVisible" width="60%" v-loading="dialogUploading">
+      <el-form label-width="80px">
+        <el-form-item label="文件上传">
+          <file-upload :type="5" @input="uploadChanged"></file-upload>
+        </el-form-item>
+        <el-form-item label="资源名称" prop="materialName">
+          <el-input v-model="form.materialName" placeholder="请输入资源名称" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="uploadConfirm">确 定</el-button>
+        <el-button @click="dialogUploadVisible=false">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  uploadFile2OSS
+} from '@/api/webApi/common.js'
+import {
+  list,
+  add,
+  update,
+  remove
+} from '@/api/webApi/materials.js'
+import {
+  getUserProfile
+} from "@/api/system/user";
+// 导入组件
+import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
+import PaperActionsMixin from "@/views/questioncenter/components/paper-actions-mixin";
+export default {
+  mixins: [PaperActionsMixin],
+  data() {
+    return {
+      type: '1',
+
+      // 遮罩层
+      loading: false,
+
+      dialogUploading: false,
+      dialogUploadVisible: false,
+      uploadFileList: [],
+
+      // 列表数据
+      resourcesList: [],
+
+      // 弹出层标题
+      title: "",
+      fileName: '',
+      // 是否显示弹出层
+      open: false,
+
+      // 总条数
+      total: 0,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+      },
+      fileType: '1',
+      user: {},
+      form: {
+        materialName: ''
+      },
+      // 表单校验
+      rules: {
+        materialName: [{
+          required: true,
+          message: '文件名称不能为空',
+          trigger: 'blur'
+        }],
+      },
+    };
+  },
+  created() {
+    this.getUser()
+    this.getList()
+  },
+  methods: {
+    getUser() {
+      getUserProfile().then(response => {
+        this.user = response.data;
+      });
+    },
+    getList() {
+      this.loading = true
+      list({
+        type: this.type
+      }).then(response => {
+        this.resourcesList = response.rows
+        this.total = response.total
+        this.loading = false
+      })
+    },
+    openUpload() {
+      this.uploadFileList = [];
+      this.form.materialName = '';
+      this.dialogUploadVisible = true;
+    },
+    uploadChanged(fileList) {
+      this.uploadFileList = fileList
+      this.form.materialName = this.uploadFileList.length ? this.uploadFileList[0].name : ""
+    },
+    uploadConfirm() {
+      if (!this.uploadFileList.length) {
+        this.msgError('请先上传文件')
+        return;
+      }
+      this.dialogUploading = true
+      const file = this.uploadFileList[0]
+      let Ajax = {
+        'type': file.isImage ? 2 : 1, //图片2，文件1
+        "fileSize": file.fileSize,
+        "materialName": this.form.materialName,
+        "materialUrl": file.url,
+        "customerId": this.user.userId
+      }
+      add(Ajax).then(res => {
+        this.msgSuccess('提交成功')
+        this.dialogUploading = true
+        this.dialogUploadVisible = false
+        this.getList()
+      }).catch(_=> this.dialogUploading = false)
+    },
+    selectType(type) {
+      this.type = type
+      this.getList()
+    },
+    closeViewer() {
+      this.showViewer = false
+    },
+    /** 预览按钮操作 */
+    handleListPreview(row, index) {
+      const {materialUrl: url} = row
+      this._filePreview(url)
+    },
+
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.form = {}
+      this.form = Object.assign({}, row);
+      this.open = true;
+      this.title = "修改文件名称";
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs['form'].validate(valid => {
+        if (valid) {
+          update(this.form).then(response => {
+            this.msgSuccess('修改成功')
+            this.open = false
+            this.getList()
+          })
+        }
+      })
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      this.$confirm('是否确认删除文件名为"' + row.materialName + '"的数据?', '警告', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(function () {
+        return remove(row.materialId)
+      }).then(() => {
+        this.getList()
+        this.msgSuccess('删除成功')
+      })
+    },
+
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.fileName = '';
+    },
+  }
+};
+</script>
+
+<style scoped>
+.el-tag {
+  cursor: pointer;
+  margin-right: 10px;
+  border-radius: 14px;
+  padding: 0 20px;
+  background-color: #ffffff;
+  border-color: rgba(0, 0, 0, 0.65);
+  color: rgba(0, 0, 0, 0.65);
+}
+
+.current-tag {
+  background-color: #47c6a2;
+  border-color: #47c6a2;
+  color: #ffffff;
+}
+</style>

src/views/accurateTeaching/task/master-page.vue

@@ -1,126 +1,126 @@
-<template>
-  <div class="app-container">
-    <formSearch :withoutSearchButton="true" :searchformShow="{subjectid:'',workSource:'1'}" @change="handleQuery"
-      @handleQuery="handleQuery">
-    </formSearch>
-    <mx-table :propDefines="propDefines" :rows="dataList">
-      <template #index="{$index}">
-        <span>{{(queryParams.pageNum-1)*queryParams.pageSize+$index+1}}</span>
-      </template>
-      <template #cover-view="{row}">
-        <img @click="playVideo(row)" :src="typeCoverImages[type]" class="videoImage" />
-      </template>
-      <template #icon-title="{value,row}">
-        <img src="../../../assets/images/word.png"
-          v-if="row.resourcesUrl.toLowerCase().endsWith('doc')||row.resourcesUrl.toLowerCase().endsWith('docx')"
-          class="titleIcon" />
-        <img src="../../../assets/images/ppt.png" v-if="row.resourcesUrl.toLowerCase().endsWith('ppt')"
-          class="titleIcon" />
-        <img src="../../../assets/images/pdf.png" v-else-if="row.resourcesUrl.toLowerCase().endsWith('pdf')"
-          class="titleIcon" />
-        <img src="../../../assets/images/icon_dantiweike.png" v-else-if="row.resourcesUrl.toLowerCase().endsWith('mp4')"
-          class="titleIcon" />
-        {{value}}
-      </template>
-      <template #creation-info="{row}">
-        <div>{{row.createBy}}</div>
-        <div>{{row.createTime}}</div>
-      </template>
-      <template #action-preview="{row}">
-        <el-button type="text" icon="el-icon-view" @click="handleView(row)">预览/下载</el-button>
-      </template>
-    </mx-table>
-    <pagination v-show="total > queryParams.pageSize" :total="total" :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize" :page-size="20" @pagination="getList" />
-    <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 * as webQue from '@/api/webApi/webQue.js'
-  export default {
-    props: {
-      type: {
-        type: String | Number,
-        default: '0' // 0:文件 1：视频
-      },
-      propDefines: {
-        type: Object,
-        default: _ => {}
-      }
-    },
-    data() {
-      return {
-        total: 0,
-        dataList: [],
-        typeCoverImages: {
-          '0': require('@/assets/images/ship.png'),
-          '1': require('@/assets/images/ship.png')
-        },
-        queryParams: {
-          pageNum: 1,
-          pageSize: 20,
-
-          subjectId: '',
-          source: '',
-          type: this.type
-        },
-        dialogVideo: false,
-        aliIdType: '',
-        src: ''
-      }
-    },
-    created() {
-
-    },
-    methods: {
-      handleQuery(model = {}) {
-        this.queryParams.pageNum = 1
-        this.queryParams.subjectId = model.subjectid || ''
-        this.queryParams.source = model.workSource || ''
-
-        this.getList()
-      },
-      getList() {
-        webQue.getResources(this.queryParams).then(res => {
-          this.dataList = res.rows
-          this.total = res.total
-        })
-      },
-      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) {
-          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;
-      },
-    }
-  }
-</script>
-
-<style>
-  .videoImage {
-    width: 130px;
-    height: 80px;
-    cursor: pointer
-  }
-
-  .titleIcon {
-    height: 24px;
-    margin-right: 5px;
-  }
-</style>
+<template>
+  <div class="app-container">
+    <formSearch :withoutSearchButton="true" :searchformShow="{subjectid:'',workSource:'1'}" @change="handleQuery"
+      @handleQuery="handleQuery">
+    </formSearch>
+    <mx-table :propDefines="propDefines" :rows="dataList">
+      <template #index="{$index}">
+        <span>{{(queryParams.pageNum-1)*queryParams.pageSize+$index+1}}</span>
+      </template>
+      <template #cover-view="{row}">
+        <img @click="playVideo(row)" :src="typeCoverImages[type]" class="videoImage" />
+      </template>
+      <template #icon-title="{value,row}">
+        <img src="../../../assets/images/word.png"
+          v-if="row.resourcesUrl.toLowerCase().endsWith('doc')||row.resourcesUrl.toLowerCase().endsWith('docx')"
+          class="titleIcon" />
+        <img src="../../../assets/images/ppt.png" v-if="row.resourcesUrl.toLowerCase().endsWith('ppt')"
+          class="titleIcon" />
+        <img src="../../../assets/images/pdf.png" v-else-if="row.resourcesUrl.toLowerCase().endsWith('pdf')"
+          class="titleIcon" />
+        <img src="../../../assets/images/icon_dantiweike.png" v-else-if="row.resourcesUrl.toLowerCase().endsWith('mp4')"
+          class="titleIcon" />
+        {{value}}
+      </template>
+      <template #creation-info="{row}">
+        <div>{{row.createBy}}</div>
+        <div>{{row.createTime}}</div>
+      </template>
+      <template #action-preview="{row}">
+        <el-button type="text" icon="el-icon-view" @click="handleView(row)">预览/下载</el-button>
+      </template>
+    </mx-table>
+    <pagination v-show="total > queryParams.pageSize" :total="total" :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize" :page-size="20" @pagination="getList" />
+    <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 * as webQue from '@/api/webApi/webQue.js'
+  import PaperActionsMixin from "@/views/questioncenter/components/paper-actions-mixin";
+  export default {
+    mixins: [PaperActionsMixin],
+    props: {
+      type: {
+        type: String | Number,
+        default: '0' // 0:文件 1：视频
+      },
+      propDefines: {
+        type: Object,
+        default: _ => {}
+      }
+    },
+    data() {
+      return {
+        total: 0,
+        dataList: [],
+        typeCoverImages: {
+          '0': require('@/assets/images/ship.png'),
+          '1': require('@/assets/images/ship.png')
+        },
+        queryParams: {
+          pageNum: 1,
+          pageSize: 20,
+
+          subjectId: '',
+          source: '',
+          type: this.type
+        },
+        dialogVideo: false,
+        aliIdType: '',
+        src: ''
+      }
+    },
+    created() {
+
+    },
+    methods: {
+      handleQuery(model = {}) {
+        this.queryParams.pageNum = 1
+        this.queryParams.subjectId = model.subjectid || ''
+        this.queryParams.source = model.workSource || ''
+
+        this.getList()
+      },
+      getList() {
+        webQue.getResources(this.queryParams).then(res => {
+          this.dataList = res.rows
+          this.total = res.total
+        })
+      },
+      handleView(row) {
+        const {resourcesUrl, aliIdType} = row
+        if (this._isPDF(resourcesUrl) || this._isOffice(resourcesUrl)) {
+          this._filePreview(resourcesUrl)
+        } else if (this._isVideo(resourcesUrl)) {
+          this.aliIdType = aliIdType;
+          this.src = resourcesUrl;
+          this.dialogVideo = true
+        } else {
+          this.$message.error('格式错误，无法预览该格式文件！');
+        }
+      },
+      playVideo(row) {
+        this.aliIdType = row.aliIdType;
+        this.src = row.resourcesUrl;
+        this.dialogVideo = true;
+      },
+    }
+  }
+</script>
+
+<style>
+  .videoImage {
+    width: 130px;
+    height: 80px;
+    cursor: pointer
+  }
+
+  .titleIcon {
+    height: 24px;
+    margin-right: 5px;
+  }
+</style>

src/views/questioncenter/components/paper-actions-mixin.js

@@ -8,17 +8,29 @@ export default {
       const {osspath, filename} = item
       return `${this.$ossBase}/${osspath}/${filename}`
     },
-    _ossPreview(url) {
-      const pdfSuffixes = ['.pdf']
-      const msSuffixes = ['.doc','.ppt','.xls','.docx', 'pptx', '.xlsx']
-      if (pdfSuffixes.some(s => url.endsWith(s))) {
+    _filePreview(url) {
+      console.log('file preview', url)
+      if (this._isPDF(url)) {
         window.open('/pdfView/index.html?src=' + url)
-      } else if (msSuffixes.some(s => url.endsWith(s))) {
-        window.open('https://view.officeapps.live.com/op/view.aspx?src=' + url)
+      } else if (this._isOffice(url)) {
+        window.open('https://view.xdocin.com/view?src=' + encodeURIComponent(url))
       } else {
         this.$message.error('格式错误，无法预览该格式文件！');
       }
     },
+    _isPDF(url) {
+      const pdfSuffixes = ['.pdf']
+      return pdfSuffixes.some(s => url.endsWith(s))
+    },
+    _isOffice(url) {
+      const msSuffixes = ['.doc','.ppt','.xls','.docx', 'pptx', '.xlsx']
+      return msSuffixes.some(s => url.endsWith(s))
+    },
+    _isVideo(url) {
+      const videoSuffixes = ['.mp4', '.mp3']
+      // ali video is a guid with no suffix.
+      return videoSuffixes.some(s => url.endsWith(s)) || !url.includes('.')
+    },
     paperDownLoad(item) {
       const {id: paperId, paperSource, filename} = item
       if (paperSource == MxConst.enum.paper.paperSource.oss) {
@@ -33,7 +45,7 @@ export default {
       const {id: paperId, papername: paperName, paperSource} = item
       if (paperSource == MxConst.enum.paper.paperSource.oss) {
         const ossFullPath = this._combineOssPath(item)
-        this._ossPreview(ossFullPath)
+        this._filePreview(ossFullPath)
         return
       }
       this.$router.push({