edit
This commit is contained in:
parent
166c601075
commit
3a9f596487
|
@ -0,0 +1,47 @@
|
||||||
|
<template>
|
||||||
|
<svg class="icon file-icon" aria-hidden="true" :style="{'font-size': size + 'px'}">
|
||||||
|
<use :xlink:href="getFileTypeIcon"></use>
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { watch, defineProps } from 'vue'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
fileName: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
type: String,
|
||||||
|
default: '30'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
console.log(1000)
|
||||||
|
|
||||||
|
watch (() => props.fileName, (newVal, oldVal) => {
|
||||||
|
console.log(newVal,oldVal)
|
||||||
|
getFileTypeIcon(newVal)
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
const getFileTypeIcon = (fileName) => {
|
||||||
|
console.log(props.fileName)
|
||||||
|
const name = fileName.substr(fileName.lastIndexOf('.') + 1);
|
||||||
|
const iconObj = {
|
||||||
|
pdf: 'icon-pdf',
|
||||||
|
ppt: 'icon-ppt',
|
||||||
|
pptx: 'icon-pptx',
|
||||||
|
doc: 'icon-word',
|
||||||
|
docx: 'icon-word',
|
||||||
|
mp4: 'icon-video',
|
||||||
|
mov: 'icon-mov',
|
||||||
|
|
||||||
|
}
|
||||||
|
return '#' + iconObj[name]
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
|
@ -16,9 +16,7 @@
|
||||||
<div class="file-list-item flex" v-for="(item, index) in fileList" :key="item.uid">
|
<div class="file-list-item flex" v-for="(item, index) in fileList" :key="item.uid">
|
||||||
<div class="file-name">
|
<div class="file-name">
|
||||||
<span class="name">标题:</span>
|
<span class="name">标题:</span>
|
||||||
<svg class="icon icon-ppt" aria-hidden="true">
|
<!-- <FileImage fileName="item.name" /> -->
|
||||||
<use :xlink:href="getFileTypeIcon(item.name)"></use>
|
|
||||||
</svg>
|
|
||||||
<span class="text">{{ item.name }}</span>
|
<span class="text">{{ item.name }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex-type flex">
|
<div class="flex-type flex">
|
||||||
|
@ -47,6 +45,7 @@
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, defineProps, defineEmits, watch } from 'vue'
|
import { ref, defineProps, defineEmits, watch } from 'vue'
|
||||||
|
import FileImage from '@/components/file-image/index.vue'
|
||||||
import { ElMessage } from 'element-plus'
|
import { ElMessage } from 'element-plus'
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
|
@ -111,6 +110,7 @@ const hanleFileChange = (file) => {
|
||||||
return false
|
return false
|
||||||
}
|
}
|
||||||
if (file.status === 'ready') {
|
if (file.status === 'ready') {
|
||||||
|
// 给一个默认的fileData
|
||||||
file.fileData = {
|
file.fileData = {
|
||||||
textbookId: '123',
|
textbookId: '123',
|
||||||
levelFirstId: '123',
|
levelFirstId: '123',
|
||||||
|
@ -119,24 +119,11 @@ const hanleFileChange = (file) => {
|
||||||
fileFlag: 1,
|
fileFlag: 1,
|
||||||
fileRoot: '资源'
|
fileRoot: '资源'
|
||||||
}
|
}
|
||||||
file.callback = successFile
|
|
||||||
fileList.value.push(file)
|
fileList.value.push(file)
|
||||||
}
|
}
|
||||||
return false
|
|
||||||
}
|
}
|
||||||
|
|
||||||
let fileSuccessAry = []
|
|
||||||
let fileNums = 0;
|
|
||||||
const successFile = (res) => {
|
|
||||||
fileSuccessAry.push(res)
|
|
||||||
if(fileSuccessAry.length == fileNums){
|
|
||||||
let flag = fileSuccessAry.every(item => item.code == 200)
|
|
||||||
if(flag){
|
|
||||||
ElMessage.success('上传成功!')
|
|
||||||
fileNums = 0
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const getFileTypeIcon = (fileName) => {
|
const getFileTypeIcon = (fileName) => {
|
||||||
const name = fileName.substr(fileName.lastIndexOf('.') + 1);
|
const name = fileName.substr(fileName.lastIndexOf('.') + 1);
|
||||||
|
@ -157,14 +144,12 @@ const delFile = (index) => {
|
||||||
|
|
||||||
// 关闭弹窗前
|
// 关闭弹窗前
|
||||||
const beforeClose = (done) => {
|
const beforeClose = (done) => {
|
||||||
fileNums = fileList.value.length
|
|
||||||
fileList.value = []
|
fileList.value = []
|
||||||
emit('update:modelValue', false)
|
emit('update:modelValue', false)
|
||||||
done()
|
done()
|
||||||
}
|
}
|
||||||
// 关闭弹窗
|
// 关闭弹窗
|
||||||
const closeDialog = () => {
|
const closeDialog = () => {
|
||||||
fileNums = fileList.value.length
|
|
||||||
fileList.value = []
|
fileList.value = []
|
||||||
emit('update:modelValue', false)
|
emit('update:modelValue', false)
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,19 +1,19 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="resource-list">
|
<div class="resource-list" v-loading="sourceStore.loading">
|
||||||
<el-scrollbar height="400px">
|
<el-scrollbar height="400px">
|
||||||
|
<el-empty description="暂无数据" v-if="!sourceStore.result.list.length" />
|
||||||
<ul>
|
<ul>
|
||||||
<li class="list-item">
|
<li class="list-item" v-for="item in sourceStore.result.list" :key="item.id">
|
||||||
|
|
||||||
<div class="item-left flex">
|
<div class="item-left flex">
|
||||||
<svg class="icon icon-ppt" aria-hidden="true">
|
<svg class="icon icon-ppt" aria-hidden="true">
|
||||||
<use xlink:href="#icon-ppt"></use>
|
<use xlink:href="#icon-ppt"></use>
|
||||||
</svg>
|
</svg>
|
||||||
<div class="flex item-left-content">
|
<div class="flex item-left-content">
|
||||||
<div class="name flex">第1课《春》课后巩固练习 2022-2023学年部编版语文七年级上册</div>
|
<div class="name flex">{{ item.fileName }}</div>
|
||||||
<div class="item-tags flex">
|
<div class="item-tags flex">
|
||||||
<el-tag type="info" class="mr-10">教案</el-tag>
|
<el-tag type="info" class="mr-10">教案</el-tag>
|
||||||
<el-tag type="info" class="mr-10">PPT</el-tag>
|
<el-tag type="info" class="mr-10">PPT</el-tag>
|
||||||
<span class="gray-text mr-10">2024-07-13上传</span>
|
<span class="gray-text mr-10">{{ item.uploadTime }}上传</span>
|
||||||
<span class="line mr-10"></span>
|
<span class="line mr-10"></span>
|
||||||
<span class="gray-text mr-10">下载3次</span>
|
<span class="gray-text mr-10">下载3次</span>
|
||||||
</div>
|
</div>
|
||||||
|
@ -49,19 +49,19 @@
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<div class="pagination-box">
|
<div class="pagination-box">
|
||||||
<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
|
<el-pagination v-model:current-page="sourceStore.query.pageNum" v-model:page-size="sourceStore.query.pageSize"
|
||||||
:page-sizes="[100, 200, 300, 400]" background layout="total, sizes, prev, pager, next, jumper" :total="400"
|
hide-on-single-page :page-sizes="[10, 20, 30, 50]" background layout="total, sizes, prev, pager, next, jumper"
|
||||||
@size-change="handleSizeChange" @current-change="handleCurrentChange" />
|
:total="sourceStore.result.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
|
||||||
</div>
|
</div>
|
||||||
</el-scrollbar>
|
</el-scrollbar>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref } from 'vue'
|
|
||||||
|
|
||||||
const currentPage = ref(1)
|
import useResoureStore from '../store'
|
||||||
const pageSize = ref(100)
|
const sourceStore = useResoureStore()
|
||||||
|
|
||||||
|
|
||||||
const handleSizeChange = () => { }
|
const handleSizeChange = () => { }
|
||||||
const handleCurrentChange = () => { }
|
const handleCurrentChange = () => { }
|
||||||
|
@ -82,6 +82,7 @@ const handleCurrentChange = () => { }
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
.iconfont {
|
.iconfont {
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
color: #a2a2a2;
|
color: #a2a2a2;
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<el-row justify="space-between">
|
<el-row justify="space-between">
|
||||||
<el-col :span="12" class="tab-btns flex">
|
<el-col :span="12" class="tab-btns flex">
|
||||||
<el-button text v-for="item in sourceStore.tabs" :key="item.id"
|
<el-button text v-for="item in sourceStore.tabs" :key="item.id"
|
||||||
:type="sourceStore.curTab == item.id ? 'primary' : ''" @click="sourceStore.changeTab(item.id)">{{ item.text
|
:type="sourceStore.query.fileSource == item.value ? 'primary' : ''" @click="sourceStore.changeTab(item.value)">{{ item.text
|
||||||
}}</el-button>
|
}}</el-button>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="12" class="search-box flex">
|
<el-col :span="12" class="search-box flex">
|
||||||
|
@ -12,14 +12,14 @@
|
||||||
</el-row>
|
</el-row>
|
||||||
<el-row class="resoure-btns">
|
<el-row class="resoure-btns">
|
||||||
<el-col :span="24" class="query-row flex">
|
<el-col :span="24" class="query-row flex">
|
||||||
<div class="flex"> <el-select v-model="sourceStore.curFormat" placeholder="Select" size="small"
|
<div class="flex"> <el-select v-model="sourceStore.query.fileSuffix" placeholder="Select" size="small"
|
||||||
style="width: 100px">
|
style="width: 100px">
|
||||||
<el-option v-for="item in sourceStore.formatList" :key="item.value" :label="item.label"
|
<el-option v-for="item in sourceStore.formatList" :key="item.value" :label="item.label"
|
||||||
:value="item.value" />
|
:value="item.value" />
|
||||||
</el-select>
|
</el-select>
|
||||||
<div class="line"></div>
|
<div class="line"></div>
|
||||||
<el-button size="small" v-for="item in sourceStore.typeList" :key="item.id"
|
<el-button size="small" v-for="item in sourceStore.typeList" :key="item.id"
|
||||||
:type="sourceStore.curType == item.id ? 'primary' : ''" round @click="sourceStore.changeType(item.id)">{{
|
:type="sourceStore.query.fileFlag == item.value ? 'primary' : ''" round @click="sourceStore.changeType(item.value)">{{
|
||||||
item.text }}</el-button>
|
item.text }}</el-button>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
|
@ -48,9 +48,26 @@ const openDialog = ()=>{
|
||||||
isDialogOpen.value = true
|
isDialogOpen.value = true
|
||||||
}
|
}
|
||||||
|
|
||||||
const submitFile = (fileList)=>{
|
const submitFile = (data)=>{
|
||||||
// console.log(toRaw(fileList))
|
let fileList = toRaw(data)
|
||||||
// uploaderState().pushFile(toRaw(fileList))
|
const { textBookId, levelFirstId, levelSecondId, fileSource, fileRoot} = sourceStore.query
|
||||||
|
console.log(textBookId)
|
||||||
|
let fileData = { textBookId, levelFirstId, levelSecondId, fileSource, fileRoot }
|
||||||
|
fileList.forEach(item => {
|
||||||
|
fileData.fileFlag = item.fileData.fileFlag
|
||||||
|
item.fileData = fileData
|
||||||
|
item.callback = fileCallBack
|
||||||
|
})
|
||||||
|
console.log(fileList)
|
||||||
|
uploaderState().pushFile(fileList)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
const fileCallBack = (res)=>{
|
||||||
|
console.log(res)
|
||||||
|
if(res.code == 200){
|
||||||
|
sourceStore.handleQuery()
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
|
@ -15,6 +15,7 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
|
import { onMounted } from 'vue'
|
||||||
import useResoureStore from './store'
|
import useResoureStore from './store'
|
||||||
import ChooseTextbook from '@/components/choose-textbook/index.vue'
|
import ChooseTextbook from '@/components/choose-textbook/index.vue'
|
||||||
import ResoureSearch from './container/resoure-search.vue'
|
import ResoureSearch from './container/resoure-search.vue'
|
||||||
|
@ -25,13 +26,30 @@ const sourceStore = useResoureStore()
|
||||||
const { ipcRenderer } = window.electron || {}
|
const { ipcRenderer } = window.electron || {}
|
||||||
// ipcRenderer.send('set-winsize',{x:1100,y: 700})
|
// ipcRenderer.send('set-winsize',{x:1100,y: 700})
|
||||||
|
|
||||||
|
// 切换教材
|
||||||
|
const changeBook = (data) => {
|
||||||
|
getData(data)
|
||||||
|
}
|
||||||
|
// 节点点击
|
||||||
const nodeClick = (data) => {
|
const nodeClick = (data) => {
|
||||||
console.log(data)
|
getData(data)
|
||||||
}
|
}
|
||||||
|
|
||||||
const changeBook = (data) => {
|
// 查询
|
||||||
console.log(data)
|
const getData = (data) => {
|
||||||
|
const { textBook, node } = data
|
||||||
|
let textBookId = textBook.curBookId
|
||||||
|
let levelFirstId = node.id
|
||||||
|
let levelSecondId = node.parentNode ? node.parentNode.id : ''
|
||||||
|
sourceStore.query = {
|
||||||
|
textBookId,
|
||||||
|
levelFirstId,
|
||||||
|
levelSecondId,
|
||||||
|
...sourceStore.query
|
||||||
}
|
}
|
||||||
|
sourceStore.handleQuery()
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -1,76 +1,110 @@
|
||||||
import { defineStore } from 'pinia'
|
import { defineStore } from 'pinia'
|
||||||
|
import { getSmarttalkPage } from '@/api/file/index'
|
||||||
|
|
||||||
const tabs = [
|
const tabs = [
|
||||||
{
|
{
|
||||||
type: '',
|
|
||||||
text: '平台资源',
|
text: '平台资源',
|
||||||
id: 1
|
value: '平台'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: '',
|
|
||||||
text: '校本资源',
|
text: '校本资源',
|
||||||
id: 2
|
value: '校本'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
const typeList = [
|
const typeList = [
|
||||||
{
|
{
|
||||||
type: '',
|
|
||||||
text: '全部',
|
text: '全部',
|
||||||
id: 1
|
value: '全部'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: '',
|
|
||||||
text: '素材',
|
text: '素材',
|
||||||
id: 2
|
value: '素材'
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
type: '',
|
|
||||||
text: '课件',
|
text: '课件',
|
||||||
id: 4
|
value: '课件'
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
type: '',
|
|
||||||
text: '教案',
|
text: '教案',
|
||||||
id: 6
|
value: '教案'
|
||||||
},
|
}
|
||||||
|
|
||||||
]
|
]
|
||||||
// 资源格式
|
// 资源格式
|
||||||
const formatList = [
|
const formatList = [
|
||||||
{
|
{
|
||||||
label: '资源格式',
|
label: '资源格式',
|
||||||
value: -1
|
value: '全部'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: 'word',
|
label: 'word',
|
||||||
value: 1
|
value: 'word'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: 'ppt',
|
label: 'ppt',
|
||||||
value: 2
|
value: 'ppt'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'mp3',
|
||||||
|
value: 'mp3'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'mp4',
|
||||||
|
value: 'mp4'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
|
const structQuery = {
|
||||||
|
pageNum: 1,
|
||||||
|
pageSize: 10
|
||||||
|
}
|
||||||
|
|
||||||
export default defineStore('resource', {
|
export default defineStore('resource', {
|
||||||
state: () => ({
|
state: () => ({
|
||||||
tabs,
|
tabs,
|
||||||
typeList,
|
typeList,
|
||||||
formatList,
|
formatList,
|
||||||
curTab: 1,
|
|
||||||
curType: 1,
|
|
||||||
curFormat: -1,
|
curFormat: -1,
|
||||||
searchKey: '',
|
searchKey: '',
|
||||||
// 新建资源
|
// 新建资源
|
||||||
isCreate: false,
|
isCreate: false,
|
||||||
|
loading: false,
|
||||||
|
//查询条件
|
||||||
|
query: {
|
||||||
|
fileSource: '平台',
|
||||||
|
fileSuffix: '全部',
|
||||||
|
fileFlag: '全部',
|
||||||
|
fileRoot: '资源',
|
||||||
|
orderByColumn: 'uploadTime',
|
||||||
|
isAsc: 'desc',
|
||||||
|
...structQuery
|
||||||
|
},
|
||||||
|
result: {
|
||||||
|
list: [],
|
||||||
|
total: 0
|
||||||
|
}
|
||||||
}),
|
}),
|
||||||
actions: {
|
actions: {
|
||||||
|
handleQuery() {
|
||||||
|
try {
|
||||||
|
this.loading = true
|
||||||
|
getSmarttalkPage(this.query).then((res) => {
|
||||||
|
this.result.total = res.total
|
||||||
|
this.result.list = res.rows
|
||||||
|
|
||||||
|
})
|
||||||
|
} finally {
|
||||||
|
this.loading = false
|
||||||
|
}
|
||||||
|
},
|
||||||
changeTab(val) {
|
changeTab(val) {
|
||||||
this.curTab = val
|
this.query.fileSource = val
|
||||||
},
|
},
|
||||||
changeType(val) {
|
changeType(val) {
|
||||||
this.curType = val
|
this.query.fileFlag = val
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
Loading…
Reference in New Issue