From fc902d4ba26ebebf2de18ead235aaafa37f44fcc Mon Sep 17 00:00:00 2001
From: xiangpei <xiangpei@timesnew.cn>
Date: 星期四, 16 五月 2024 16:49:36 +0800
Subject: [PATCH] 学习文件
---
src/views/onlineStudy/file.vue | 166 ++++++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 133 insertions(+), 33 deletions(-)
diff --git a/src/views/onlineStudy/file.vue b/src/views/onlineStudy/file.vue
index 6788707..14945bb 100644
--- a/src/views/onlineStudy/file.vue
+++ b/src/views/onlineStudy/file.vue
@@ -3,7 +3,17 @@
<div class="search">
<el-form :inline="true" :model="searchForm" class="demo-form-inline">
<el-form-item label="涓婚">
- <el-input v-model="searchForm.typeName" size="small" placeholder="涓婚鍐呭" clearable @clear="page"></el-input>
+ <el-input v-model="searchForm.subject" size="small" placeholder="涓婚鍐呭" clearable @clear="page"></el-input>
+ </el-form-item>
+ <el-form-item label="瀛︿範绫诲瀷">
+ <el-select v-model="searchForm.belongType" clearable @clear="page" @change="page" placeholder="瀛︿範绫诲瀷">
+ <el-option
+ v-for="type in typeList"
+ :key="type.id"
+ :label="type.typeName"
+ :value="type.id">
+ </el-option>
+ </el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="page" size="small">鏌ヨ</el-button>
@@ -11,24 +21,47 @@
</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>
</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="subject"
+ label="涓婚 ">
+ </el-table-column>
+ <el-table-column
prop="typeName"
- label="鍒嗙被鍚嶇О">
+ label="瀛︿範绫诲瀷">
</el-table-column>
<el-table-column
- prop="orderNum"
- label="鎺掑簭鍊�">
+ prop="contentType"
+ :formatter="typeFormatter"
+ label="鏂囦欢绫诲瀷">
</el-table-column>
<el-table-column
- prop="createTime"
- label="鍒涘缓鏃堕棿">
+ label="鏂囦欢鍐呭"
+ >
+ <template slot-scope="scope">
+ <video 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>
+ </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>
+ </template>
</el-table-column>
<el-table-column
fixed="right"
@@ -46,60 +79,78 @@
</template>
</el-table-column>
</el-table>
+ <pagination v-show="total>0" :total="total" :page.sync="searchForm.pageNum" :limit.sync="searchForm.pageSize"
+ @pagination="page"/>
<el-dialog
- title="娣诲姞鏂囦欢"
+ title="娣诲姞瀛︿範鍐呭"
:visible.sync="open"
width="600px"
+ :close-on-click-modal="false"
:before-close="handleClose">
- <el-form label-position="top" label-width="80px" ref="form" :rules="rules" :model="form">
+ <el-form label-position="left" label-width="120px" ref="form" :rules="rules" :model="form">
<el-form-item label="涓婚" prop="subject">
<el-input v-model="form.subject" placeholder="涓婚鍐呭"></el-input>
</el-form-item>
- <el-form-item label="鎵�灞炵被鍨�" prop="belongType">
- <el-input v-model="form.belongType" placeholder="鎵�灞炵被鍨�"></el-input>
+ <el-form-item label="瀛︿範绫诲瀷" prop="belongType">
+ <el-select v-model="form.belongType" placeholder="瀛︿範绫诲瀷">
+ <el-option
+ v-for="type in typeList"
+ :key="type.id"
+ :label="type.typeName"
+ :value="type.id">
+ </el-option>
+ </el-select>
</el-form-item>
<el-form-item label="鏂囦欢绫诲瀷" prop="contentType">
- <el-input v-model="form.contentType" placeholder="涓嶅悓绫诲瀷鐨勬枃浠堕槄瑙堟柟寮忎笉鍚岋紝澶氫綑鏂囦欢璇蜂互闄勪欢褰㈠紡涓婁紶"></el-input>
+ <el-select v-model="form.contentType" placeholder="涓嶅悓绫诲瀷鐨勬枃浠堕槄瑙堟柟寮忎笉鍚岋紝澶氫綑鏂囦欢璇蜂互闄勪欢褰㈠紡涓婁紶">
+ <el-option label="瑙嗛" value="video"></el-option>
+ <el-option label="PDF" value="pdf"></el-option>
+ <el-option label="鍥剧墖" value="img"></el-option>
+ </el-select>
</el-form-item>
- <el-form-item label="涓婁紶鏂囦欢" prop="contentUrl">
- <upload :fileSizeLimitM="1024" :uploadNum="1" @getUploadUrl="getUploadUrl" />
+ <el-form-item label="涓婁紶鏂囦欢(涓�涓�)" prop="contentUrl">
+ <upload v-show="form.contentType" ref="upload" :fileUrl="fileContentUrl" :fileType="form.contentType" :fileSizeLimitM="1024" :uploadNum="1" @getUploadUrl="getUploadUrl" @removeFile="removeFile"/>
</el-form-item>
- <el-form-item label="闄勪欢" prop="attachment">
- <upload :fileSizeLimitM="1024" :uploadNum="3" @getUploadUrl="getUploadAttachmentUrl" />
+ <el-form-item label="闄勪欢(鏈�澶�3涓�)" prop="attachment">
+ <upload :fileSizeLimitM="1024" :uploadNum="3" :fileUrl="form.attachment" @getUploadUrl="getUploadAttachmentUrl" @removeFile="removeAttachmentFile"/>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="open = false">鍙� 娑�</el-button>
- <el-button type="primary" @click="handlerSubmit">娣� 鍔�</el-button>
+ <el-button type="primary" @click="handlerSubmit">淇� 瀛�</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
+import Pagination from '@/components/Pagination'
import OnlineStudyAPI from '@/api/online-study'
+import StudyTypeAPI from '@/api/study-type'
import Upload from '@/components/UploadC'
export default {
name: 'type',
- components: {Upload},
+ components: {Upload, Pagination},
+ computed: {
+ fileContentUrl: function () {
+ return this.form ? this.form.contentUrl ? [this.form.contentUrl] : [] : []
+ }
+ },
data () {
return {
- uploadAttachmentData: [],
- uploadData: {
- url: '',
- originalFilename: ''
- },
+ ids: [],
+ typeList: [],
searchForm: {
pageNum: 1,
pageSize: 10,
typeName: ''
},
+ total: 0,
tableData: [],
open: false,
form: {
- typeName: '',
- orderNum: null
+ contentType: 'video'
},
rules: {
contentUrl: [
@@ -109,7 +160,7 @@
{ required: true, message: '璇疯緭鍏ヤ富棰樺唴瀹�', trigger: 'blur' },
],
belongType: [
- { required: true, message: '璇烽�夋嫨鎵�灞炵被鍨�', trigger: 'change' }
+ { required: true, message: '璇烽�夋嫨瀛︿範鍒嗙被', trigger: 'change' }
],
contentType: [
{ required: true, message: '璇烽�夋嫨鏂囦欢绫诲瀷', trigger: 'change' }
@@ -118,23 +169,57 @@
}
},
methods: {
+ handleSelectionChange(val) {
+ this.ids = val.map(item => item.id);
+ },
+ typeFormatter(row) {
+ if (row.contentType === 'video') {
+ return "瑙嗛"
+ }
+ if (row.contentType === 'img') {
+ return "鍥剧墖"
+ }
+ if (row.contentType === 'pdf') {
+ return "PDF"
+ }
+ },
+ clearFile() {
+ this.form.contentUrl = null
+ this.$refs.upload.clearFile()
+ },
+ removeFile() {
+ this.form.contentUrl = null
+ },
+ removeAttachmentFile(fileList, fileName) {
+ console.log(fileList, fileName, "dddddddd")
+ this.form.attachment = fileList.filter(item => item.name !== fileName)
+ },
getUploadAttachmentUrl (uploadData) {
- this.form.attachment = uploadData.url
- this.uploadAttachmentData = uploadData
+ this.form.attachment = uploadData
},
getUploadUrl(uploadData) {
- this.form.contentUrl = uploadData.url
- this.uploadData = uploadData
+ this.form.contentUrl = uploadData[0]
},
remove (id) {
- OnlineStudyAPI.remove(id).then(res => {
+ OnlineStudyAPI.remove([id]).then(res => {
if (res.code === 1) {
this.$message.success('鍒犻櫎鎴愬姛')
}
})
},
+ batchRemove () {
+ if (this.ids.length < 1) {
+ this.$message.warning("璇烽�夋嫨瑕佸垹闄ょ殑鏁版嵁")
+ }
+ OnlineStudyAPI.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) => {
@@ -161,6 +246,7 @@
},
handleClose () {
this.open = false
+ this.form = {}
},
handlerAdd () {
this.form = {}
@@ -170,23 +256,37 @@
OnlineStudyAPI.page(this.searchForm).then(res => {
if (res.code === 1) {
this.tableData = res.response
+ this.total = res.total
}
})
},
handleUpdate (row) {
- this.form.typeName = row.typeName
- this.form.orderNum = row.orderNum
this.form.id = row.id
+ this.form.contentType = row.contentType
+ this.form.contentUrl = row.contentUrl
+ this.form.attachment = row.attachment
+ this.form.subject = row.subject
+ this.form.belongType = row.belongType
+ console.log(row, "dfddddddd")
this.open = true
}
},
mounted () {
this.page()
+ StudyTypeAPI.list().then(res => {
+ if (res.code === 1) {
+ this.typeList = res.response
+ }
+ })
}
}
</script>
<style scoped>
+.showContent {
+ width: 200px;
+ height: 100px;
+}
.warp {
margin: 40px 10px;
}
--
Gitblit v1.8.0