| | |
| | | </el-table-column> |
| | | <el-table-column prop="contentType" :formatter="typeFormatter" label="文件类型"> |
| | | </el-table-column> |
| | | <el-table-column label="文件内容"> |
| | | <el-table-column label="文件内容" width="240"> |
| | | <template slot-scope="scope"> |
| | | <video controls v-if="scope.row.contentType === 'video'" :src="'/api/files/' + scope.row.contentUrl.url" |
| | | class="showContent" /> |
| | | <img v-if="scope.row.contentType === 'img'" :src="'/api/files/' + scope.row.contentUrl.url" |
| | | class="showContent" /> |
| | | <el-link type="primary" v-if="scope.row.contentType === 'pdf'" :src="'/api/files/' + scope.row.contentUrl.url" |
| | | class="showContent">点击查看</el-link> |
| | | <el-image v-if="scope.row.contentType === 'img'" :src="'/api/files/' + scope.row.contentUrl.url" |
| | | class="showContent"></el-image> |
| | | <!-- <img v-if="scope.row.contentType === 'img'" :src="'/api/files/' + scope.row.contentUrl.url" |
| | | class="showContent" /> --> |
| | | <el-link type="primary" v-if="scope.row.contentType === 'pdf'" class="showContent" |
| | | @click="checkPdf('/api/files/' + scope.row.contentUrl.url)">点击查看</el-link> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="attachment" label="附件"> |
| | | <template slot-scope="scope"> |
| | | <el-link type="primary" v-for="item in scope.row.attachment">{{ item.name }}</el-link> |
| | | <div v-for="item in scope.row.attachment" :key="item.url"> |
| | | <el-link type="primary" :href="'/api/upload/download?url=' + item.url +'&fileName=' + item.name" >{{ item.name }}</el-link> |
| | | </div> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column fixed="right" label="操作" width="140"> |
| | | <template slot-scope="scope"> |
| | | <el-button @click="handleUpdate(scope.row)" type="primary" size="small" |
| | | style="margin-right: 5px">修改</el-button> |
| | | |
| | | <el-popconfirm :title="getTitle(scope.row.typeName)" @confirm="remove(scope.row.id)"> |
| | | <el-button slot="reference" type="danger" size="small">删除</el-button> |
| | | </el-popconfirm> |
| | |
| | | <el-button type="primary" @click="handlerSubmit">保 存</el-button> |
| | | </span> |
| | | </el-dialog> |
| | | |
| | | <el-dialog title="PDF查看" :visible.sync="pdfDialog" width="80%" :before-close="closePdfDialog"> |
| | | <vue-office-pdf :src="pdf" @rendered="rendered" /> |
| | | </el-dialog> |
| | | </div> |
| | | </template> |
| | | |
| | |
| | | import OnlineStudyAPI from '@/api/online-study'; |
| | | import StudyTypeAPI from '@/api/study-type'; |
| | | import Upload from '@/components/UploadC'; |
| | | |
| | | import VueOfficePdf from '@vue-office/pdf'; |
| | | export default { |
| | | name: 'type', |
| | | components: { Upload, Pagination }, |
| | | components: { Upload, Pagination, VueOfficePdf }, |
| | | computed: { |
| | | fileContentUrl: () => { |
| | | return this.form ? this.form.contentUrl ? [this.form.contentUrl] : [] : []; |
| | |
| | | }, |
| | | data() { |
| | | return { |
| | | pdf: '', |
| | | dialogTitle: '添加学习内容', |
| | | ids: [], |
| | | typeList: [], |
| | | searchForm: { |
| | | pageNum: 1, |
| | | pageSize: 10, |
| | | pageSize: 5, |
| | | typeName: '' |
| | | }, |
| | | total: 0, |
| | | tableData: [], |
| | | open: false, |
| | | pdfDialog: false, |
| | | form: { |
| | | contentType: 'video', |
| | | subject: '', |
| | |
| | | }; |
| | | }, |
| | | methods: { |
| | | checkPdf(url) { |
| | | this.pdf = url; |
| | | this.pdfDialog = true; |
| | | }, |
| | | closePdfDialog() { |
| | | this.pdfDialog = false; |
| | | }, |
| | | rendered() { |
| | | |
| | | }, |
| | | fileChange() { |
| | | this.form.contentUrl = []; |
| | | }, |
| | |
| | | OnlineStudyAPI.remove([id]).then(res => { |
| | | if (res.code === 1) { |
| | | this.$message.success('删除成功'); |
| | | this.page() |
| | | } |
| | | }); |
| | | }, |
| | |
| | | contentUrl: [], |
| | | attachment: [], |
| | | temp: [] |
| | | } |
| | | }; |
| | | }, |
| | | handleClose() { |
| | | this.open = false; |
| | |
| | | |
| | | <style scoped> |
| | | .showContent { |
| | | width: 200px; |
| | | height: 100px; |
| | | width: 100%; |
| | | min-height: 80px; |
| | | object-fit: contain; |
| | | } |
| | | |
| | | .warp { |
| | |
| | | .search { |
| | | margin-top: 10px; |
| | | } |
| | | ::v-deep .el-image__error { |
| | | position: absolute; |
| | | top: 0; |
| | | bottom: 0; |
| | | } |
| | | </style> |