From 80561b2bc83bb35582ba62e0c21a63c3ee5a0e82 Mon Sep 17 00:00:00 2001
From: lohir <3399054449@qq.com>
Date: 星期三, 16 十月 2024 17:15:00 +0800
Subject: [PATCH] bug
---
src/views/education/resource/list.vue | 282 +++++++++++++++++++++++++++++++++++++-------------------
1 files changed, 185 insertions(+), 97 deletions(-)
diff --git a/src/views/education/resource/list.vue b/src/views/education/resource/list.vue
index 04229c2..8879b7d 100644
--- a/src/views/education/resource/list.vue
+++ b/src/views/education/resource/list.vue
@@ -3,11 +3,27 @@
<div class="search">
<el-form :inline="true" :model="searchForm" class="demo-form-inline">
<el-form-item label="涓婚">
- <el-input v-model="searchForm.introduction" size="small" placeholder="涓婚鍐呭" clearable @clear="page"></el-input>
+ <el-input v-model="searchForm.introduction" size="small" placeholder="涓婚鍐呭" clearable
+ @clear="page" @input="page"></el-input>
+ </el-form-item>
+ <el-form-item label="鐝骇">
+ <el-select v-model="searchForm.classId" clearable @clear="page" @change="page" placeholder="鐝骇">
+ <el-option v-for="item in classesIds" :key="item.id" :label="item.className" :value="item.id"/>
+ </el-select>
</el-form-item>
<el-form-item label="绉戠洰">
<el-select v-model="searchForm.subjectId" clearable @clear="page" @change="page" placeholder="绉戠洰">
<el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id">
+ </el-option>
+ </el-select>
+ </el-form-item>
+ <el-form-item label="鏂囦欢绫诲瀷">
+ <el-select v-model="searchForm.contentType" clearable @clear="page" @change="page" placeholder="鏂囦欢绫诲瀷">
+ <el-option
+ v-for="item in contentTypeList"
+ :key="item.value"
+ :label="item.name"
+ :value="item.value">
</el-option>
</el-select>
</el-form-item>
@@ -17,15 +33,18 @@
</el-form>
<div>
<el-button type="primary" @click="handlerAdd" size="small">娣诲姞</el-button>
- <el-button type="danger" @click="batchRemove" size="small" style="margin-left: 5px">鍒犻櫎</el-button>
+ <el-popconfirm title="纭鎵归噺鍒犻櫎鍚楋紵" @confirm="batchRemove">
+ <el-button slot="reference" type="danger" size="small" style="margin-left: 5px">鍒犻櫎</el-button>
+ </el-popconfirm>
</div>
</div>
-
<el-table :data="tableData" border @selection-change="handleSelectionChange" style="width: 100%">
<el-table-column type="selection" width="55">
</el-table-column>
<el-table-column fixed prop="introduction" label="涓婚绠�浠�">
+ </el-table-column>
+ <el-table-column prop="className" label="鐝骇">
</el-table-column>
<el-table-column prop="typeName" label="绉戠洰">
</el-table-column>
@@ -34,26 +53,43 @@
<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" />
+ class="showContent"/>
<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>
+ <audio controls v-if="scope.row.contentType === 'audio'"
+ class="showContent">
+ <source :src="'/api/files/' + scope.row.contentUrl.url">
+ </audio>
+ <el-link type="primary"
+ v-if="scope.row.contentType !== 'video' && scope.row.contentType !== 'audio' && scope.row.contentType !== 'img'"
+ class="showContent"
+ @click="check(scope.row)">鐐瑰嚮鏌ョ湅
+ </el-link>
</template>
</el-table-column>
<el-table-column prop="attachment" label="闄勪欢">
<template slot-scope="scope">
<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>
+ <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 prop="visitUrl" label="璁块棶閾炬帴">
+ <template slot-scope="scope">
+ <div v-if="scope.row.contentType === 'video'">
+ {{ scope.row.visitUrl }}
</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>
+ 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>
@@ -62,13 +98,22 @@
</el-table>
<pagination v-show="total > 0" :total="total" :page.sync="searchForm.pageNum" :limit.sync="searchForm.pageSize"
- @pagination="page" />
+ @pagination="page"/>
<el-dialog :title="dialogTitle" :visible.sync="open" width="600px" :close-on-click-modal="false"
:before-close="handleClose">
<el-form label-position="left" label-width="120px" ref="form" :rules="rules" :model="form">
<el-form-item label="涓婚绠�浠�" prop="introduction">
<el-input v-model="form.introduction" placeholder="涓婚鍐呭"></el-input>
+ </el-form-item>
+ <el-form-item label="鐝骇">
+ <el-select
+ v-model="form.classId"
+ placeholder="鐝骇"
+ clearable
+ >
+ <el-option v-for="item in classesIds" :key="item.id" :label="item.className" :value="item.id"/>
+ </el-select>
</el-form-item>
<el-form-item label="绉戠洰" prop="subjectId">
<el-select v-model="form.subjectId" placeholder="绉戠洰">
@@ -78,18 +123,21 @@
</el-form-item>
<el-form-item label="鏂囦欢绫诲瀷" prop="contentType">
<el-select v-model="form.contentType" placeholder="涓嶅悓绫诲瀷鐨勬枃浠堕槄瑙堟柟寮忎笉鍚岋紝澶氫綑鏂囦欢璇蜂互闄勪欢褰㈠紡涓婁紶" @change="fileChange">
- <el-option label="瑙嗛" value="video"></el-option>
- <el-option label="PDF" value="pdf"></el-option>
- <el-option label="鍥剧墖" value="img"></el-option>
+ <el-option
+ v-for="item in contentTypeList"
+ :key="item.value"
+ :label="item.name"
+ :value="item.value">
+ </el-option>
</el-select>
</el-form-item>
<el-form-item label="涓婁紶鏂囦欢(涓�涓�)" prop="contentUrl">
<upload v-show="form.contentType" ref="upload" :fileUrl="form.contentUrl" :fileType="form.contentType"
- :fileSizeLimitM="1024" :uploadNum="1" @getUploadUrl="getUploadUrl" @removeFile="removeFile" />
+ :fileSizeLimitM="1024" :uploadNum="1" @getUploadUrl="getUploadUrl" @removeFile="removeFile"/>
</el-form-item>
<el-form-item label="闄勪欢(鏈�澶�3涓�)" prop="attachment">
<upload :fileSizeLimitM="1024" :uploadNum="3" :fileUrl="form.attachment"
- @getUploadUrl="getUploadAttachmentUrl" @removeFile="removeAttachmentFile" />
+ @getUploadUrl="getUploadAttachmentUrl" @removeFile="removeAttachmentFile"/>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
@@ -105,31 +153,44 @@
</template>
<script>
-import Pagination from '@/components/Pagination';
-import EducationResourceAPI from '@/api/educationResource';
-import SubjectAPI from '@/api/subject';
-import Upload from '@/components/UploadC';
+import Pagination from '@/components/Pagination'
+import EducationResourceAPI from '@/api/educationResource'
+import SubjectAPI from '@/api/subject'
+import Upload from '@/components/UploadC'
+import { myClasses } from '@/api/classes'
-import VueOfficePdf from '@vue-office/pdf';
+import VueOfficePdf from '@vue-office/pdf'
+
export default {
name: 'type',
components: { Upload, Pagination, VueOfficePdf },
computed: {
fileContentUrl: () => {
- return this.form ? this.form.contentUrl ? [this.form.contentUrl] : [] : [];
+ return this.form ? this.form.contentUrl ? [this.form.contentUrl] : [] : []
}
},
- data() {
+ data () {
return {
pdf: '',
dialogTitle: '娣诲姞瀛︿範鍐呭',
ids: [],
typeList: [],
+ contentTypeList: [
+ { name: '瑙嗛', value: 'video' },
+ { name: '鍥剧墖', value: 'img' },
+ { name: '闊抽', value: 'audio' },
+ { name: 'PDF', value: 'pdf' },
+ { name: 'EXCEL', value: 'excel' },
+ { name: 'WORD', value: 'word' },
+ { name: 'PPT', value: 'ppt' }
+ ],
+ classesIds: [],
searchForm: {
pageNum: 1,
pageSize: 5,
subjectId: null,
- introduction: null
+ introduction: null,
+ contentType: null
},
total: 0,
tableData: [],
@@ -139,16 +200,17 @@
contentType: 'video',
introduction: '',
belongType: 2,
+ classId: null,
contentUrl: [],
attachment: [],
temp: []
},
rules: {
contentUrl: [
- { required: true, message: '璇蜂笂浼犳枃浠�', trigger: 'blur' },
+ { required: true, message: '璇蜂笂浼犳枃浠�', trigger: 'blur' }
],
introduction: [
- { required: true, message: '璇疯緭鍏ヤ富棰樺唴瀹�', trigger: 'blur' },
+ { required: true, message: '璇疯緭鍏ヤ富棰樺唴瀹�', trigger: 'blur' }
],
belongType: [
{ required: true, message: '璇烽�夋嫨瀛︿範鍒嗙被', trigger: 'change' }
@@ -157,101 +219,123 @@
{ required: true, message: '璇烽�夋嫨鏂囦欢绫诲瀷', trigger: 'change' }
]
}
- };
+ }
},
methods: {
- checkPdf(url) {
- this.pdf = url;
- this.pdfDialog = true;
+ // 鑾峰彇鎴戠殑鐝骇
+ getClasses () {
+ myClasses().then(re => {
+ this.classesIds = re.data.data
+ })
},
- closePdfDialog() {
- this.pdfDialog = false;
+ check (row) {
+ // this.pdf = url
+ // this.pdfDialog = true
+ window.open(row.visitUrl)
},
- rendered() {
+ closePdfDialog () {
+ this.pdfDialog = false
+ },
+ rendered () {
},
- fileChange() {
- this.form.contentUrl = [];
+ fileChange () {
+ this.form.contentUrl = []
},
- handleSelectionChange(val) {
- this.ids = val.map(item => item.id);
+ handleSelectionChange (val) {
+ this.ids = val.map(item => item.id)
},
- typeFormatter(row) {
+ typeFormatter (row) {
if (row.contentType === 'video') {
- return "瑙嗛";
+ return '瑙嗛'
}
if (row.contentType === 'img') {
- return "鍥剧墖";
+ return '鍥剧墖'
+ }
+ if (row.contentType === 'audio') {
+ return '闊抽'
}
if (row.contentType === 'pdf') {
- return "PDF";
+ return 'PDF'
}
+ if (row.contentType === 'excel') {
+ return 'EXCEL'
+ }
+ if (row.contentType === 'word') {
+ return 'WORD'
+ }
+ if (row.contentType === 'ppt') {
+ return 'PPT'
+ }
+
},
- clearFile() {
- this.form.contentUrl = [];
- this.$refs.upload.clearFile();
+ clearFile () {
+ this.form.contentUrl = []
+ this.$refs.upload.clearFile()
},
- removeFile() {
- this.form.contentUrl = [];
+ removeFile () {
+ this.form.contentUrl = []
},
removeAttachmentFile (fileList, fileName) {
- this.form.attachment = fileList.filter(item => item.name !== fileName);
+ this.form.attachment = fileList.filter(item => item.name !== fileName)
},
getUploadAttachmentUrl (uploadData) {
- this.form.attachment = uploadData;
+ this.form.attachment = uploadData
},
getUploadUrl (uploadData) {
- this.form.contentUrl = uploadData;
+ this.form.contentUrl = uploadData
},
remove (id) {
EducationResourceAPI.remove([id]).then(res => {
if (res.code === 1) {
- this.$message.success('鍒犻櫎鎴愬姛');
+ this.$message.success('鍒犻櫎鎴愬姛')
this.page()
}
- });
+ })
},
- batchRemove() {
+ batchRemove () {
if (this.ids.length < 1) {
- this.$message.warning("璇烽�夋嫨瑕佸垹闄ょ殑鏁版嵁");
+ this.$message.warning('璇烽�夋嫨瑕佸垹闄ょ殑鏁版嵁')
+ } else {
+ EducationResourceAPI.remove(this.ids).then(res => {
+ if (res.code === 1) {
+ this.$message.success('鍒犻櫎鎴愬姛')
+ this.ids = []
+ }
+ this.page()
+ })
}
- EducationResourceAPI.remove(this.ids).then(res => {
- if (res.code === 1) {
- this.$message.success('鍒犻櫎鎴愬姛');
- this.ids = [];
- }
- });
},
getTitle (typeName) {
- return '纭畾瑕佸垹闄�' + typeName + '杩欎釜鏂囦欢鍚楋紵';
+ return '纭畾瑕佸垹闄�' + typeName + '杩欎釜鏂囦欢鍚楋紵'
},
handlerSubmit () {
this.$refs['form'].validate((valid) => {
if (valid) {
- const temp = JSON.parse(JSON.stringify(this.form));
+ const temp = JSON.parse(JSON.stringify(this.form))
// this.form.contentUrl = this.form.contentUrl[0]
- temp.contentUrl = temp.contentUrl[0];
+ temp.contentUrl = temp.contentUrl[0]
if (temp.id) {
EducationResourceAPI.update(temp).then(res => {
if (res.code === 1) {
- this.$message.success('淇敼鎴愬姛');
- this.open = false;
- this.page();
+ this.$message.success('淇敼鎴愬姛')
+ this.open = false
+ this.page()
}
- });
+ })
} else {
EducationResourceAPI.add(temp).then(res => {
if (res.code === 1) {
- this.$message.success('娣诲姞鎴愬姛');
- this.open = false;
- this.page();
+ this.$message.success('娣诲姞鎴愬姛')
+ this.open = false
+ this.page()
}
- });
+ })
}
}
- });
+ })
},
- resetForm() {
+ resetForm () {
this.form = {
contentType: 'video',
introduction: '',
@@ -259,45 +343,48 @@
contentUrl: [],
attachment: [],
temp: []
- };
+ }
},
- handleClose() {
- this.open = false;
- this.resetForm();
+ handleClose () {
+ this.open = false
+ this.resetForm()
},
- handlerAdd() {
- this.resetForm();
- this.open = true;
- this.dialogTitle = '娣诲姞瀛︿範鍐呭';
+ handlerAdd () {
+ this.resetForm()
+ this.open = true
+ this.dialogTitle = '娣诲姞瀛︿範鍐呭'
},
- page() {
+ page () {
EducationResourceAPI.page(this.searchForm).then(res => {
if (res.code === 1) {
- this.tableData = res.data;
- this.total = res.total;
+ this.tableData = res.data
+ this.total = res.total
}
- });
+ })
},
- handleUpdate(row) {
- this.form.id = row.id;
- this.form.contentType = row.contentType;
- this.form.contentUrl = [row.contentUrl] || [];
- this.form.attachment = row.attachment || [];
- this.form.introduction = row.introduction;
- this.form.belongType = row.belongType;
- this.dialogTitle = '淇敼瀛︿範鍐呭';
- this.open = true;
- }
+ handleUpdate (row) {
+ this.form.id = row.id
+ this.form.contentType = row.contentType
+ this.form.classesId = row.classesId
+ this.form.subjectId = row.subjectId
+ this.form.contentUrl = [row.contentUrl] || []
+ this.form.attachment = row.attachment || []
+ this.form.introduction = row.introduction
+ this.form.belongType = row.belongType
+ this.dialogTitle = '淇敼瀛︿範鍐呭'
+ this.open = true
+ },
},
- mounted() {
- this.page();
+ mounted () {
+ this.page()
+ this.getClasses()
SubjectAPI.list().then(res => {
if (res.code === 1) {
- this.typeList = res.data;
+ this.typeList = res.data
}
- });
+ })
}
-};
+}
</script>
<style scoped>
@@ -314,6 +401,7 @@
.search {
margin-top: 10px;
}
+
::v-deep .el-image__error {
position: absolute;
top: 0;
--
Gitblit v1.8.0