lyc-dev #24
|
@ -0,0 +1,40 @@
|
|||
<template>
|
||||
<svg class="icon file-icon" aria-hidden="true" :style="{'font-size': size + 'px'}">
|
||||
<use :xlink:href="getFileTypeIcon()"></use>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { defineProps } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
fileName: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
size: {
|
||||
type: Number,
|
||||
default: 30
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
const getFileTypeIcon = () => {
|
||||
const name = props.fileName.substr(props.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-name">
|
||||
<span class="name">标题:</span>
|
||||
<svg class="icon icon-ppt" aria-hidden="true">
|
||||
<use :xlink:href="getFileTypeIcon(item.name)"></use>
|
||||
</svg>
|
||||
<FileImage :fileName="item.name" />
|
||||
<span class="text">{{ item.name }}</span>
|
||||
</div>
|
||||
<div class="flex-type flex">
|
||||
|
@ -47,6 +45,7 @@
|
|||
|
||||
<script setup>
|
||||
import { ref, defineProps, defineEmits, watch } from 'vue'
|
||||
import FileImage from '@/components/file-image/index.vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
const props = defineProps({
|
||||
|
@ -65,16 +64,18 @@ const fileType = ref(1)
|
|||
// 资源类型
|
||||
const resourceType = ref([
|
||||
{
|
||||
label: '课件',
|
||||
value: 1
|
||||
text: '素材',
|
||||
value: '素材'
|
||||
},
|
||||
|
||||
{
|
||||
label: '教案',
|
||||
value: 2
|
||||
text: '课件',
|
||||
value: '课件'
|
||||
},
|
||||
|
||||
{
|
||||
label: '素材',
|
||||
value: 3
|
||||
text: '教案',
|
||||
value: '教案'
|
||||
}
|
||||
])
|
||||
|
||||
|
@ -111,27 +112,15 @@ const hanleFileChange = (file) => {
|
|||
return false
|
||||
}
|
||||
if (file.status === 'ready') {
|
||||
// 给一个默认的fileData
|
||||
file.fileData = {
|
||||
fileFlag: 1
|
||||
fileFlag: '课件'
|
||||
}
|
||||
file.callback = successFile
|
||||
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 name = fileName.substr(fileName.lastIndexOf('.') + 1);
|
||||
|
@ -152,14 +141,12 @@ const delFile = (index) => {
|
|||
|
||||
// 关闭弹窗前
|
||||
const beforeClose = (done) => {
|
||||
fileNums = fileList.value.length
|
||||
fileList.value = []
|
||||
emit('update:modelValue', false)
|
||||
done()
|
||||
}
|
||||
// 关闭弹窗
|
||||
const closeDialog = () => {
|
||||
fileNums = fileList.value.length
|
||||
fileList.value = []
|
||||
emit('update:modelValue', false)
|
||||
}
|
||||
|
|
|
@ -1,28 +1,28 @@
|
|||
<template>
|
||||
<div class="resource-list">
|
||||
<div class="resource-list" v-loading="sourceStore.loading">
|
||||
<el-scrollbar height="400px">
|
||||
<el-empty description="暂无数据" v-if="!sourceStore.result.list.length" />
|
||||
<ul>
|
||||
<li class="list-item">
|
||||
|
||||
<li class="list-item" v-for="item in sourceStore.result.list" :key="item.id">
|
||||
<div class="item-left flex">
|
||||
<svg class="icon icon-ppt" aria-hidden="true">
|
||||
<use xlink:href="#icon-ppt"></use>
|
||||
</svg>
|
||||
<FileImage :fileName="item.fileName" :size="50" />
|
||||
<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">
|
||||
<el-tag type="info" class="mr-10">教案</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="gray-text mr-10">下载3次</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-btns" @click.stop>
|
||||
<el-popover placement="bottom-end" trigger="click" popper-class="custom-popover">
|
||||
<el-popover placement="bottom-end" trigger="hover" popper-class="custom-popover"
|
||||
:visible="item.showPopover">
|
||||
<template #reference>
|
||||
<el-button link type="primary"> <i class="iconfont icon-shenglvehao"></i></el-button>
|
||||
<el-button link type="primary" > <i
|
||||
class="iconfont icon-shenglvehao"></i></el-button>
|
||||
</template>
|
||||
<template #default>
|
||||
<div class="item-popover">
|
||||
|
@ -30,7 +30,7 @@
|
|||
<i class="iconfont icon-bianji"></i>
|
||||
<span>编辑</span>
|
||||
</div>
|
||||
<div class="item-popover-item">
|
||||
<div class="item-popover-item" @click="delRow(item)">
|
||||
<i class="iconfont icon-shanchu"></i>
|
||||
<span>删除</span>
|
||||
</div>
|
||||
|
@ -48,24 +48,39 @@
|
|||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="pagination-box">
|
||||
<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
|
||||
:page-sizes="[100, 200, 300, 400]" background layout="total, sizes, prev, pager, next, jumper" :total="400"
|
||||
@size-change="handleSizeChange" @current-change="handleCurrentChange" />
|
||||
</div>
|
||||
|
||||
</el-scrollbar>
|
||||
<div class="pagination-box">
|
||||
<el-pagination v-model:current-page="sourceStore.query.pageNum" v-model:page-size="sourceStore.query.pageSize"
|
||||
:page-sizes="[10, 20, 30, 50]" background layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="sourceStore.result.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { deleteSmarttalk } from '@/api/file'
|
||||
import useResoureStore from '../store'
|
||||
import FileImage from '@/components/file-image/index.vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
const currentPage = ref(1)
|
||||
const pageSize = ref(100)
|
||||
const sourceStore = useResoureStore()
|
||||
|
||||
const handleSizeChange = () => { }
|
||||
const handleCurrentChange = () => { }
|
||||
// 删除
|
||||
const delRow = (item) => {
|
||||
sourceStore.loading = true
|
||||
try {
|
||||
deleteSmarttalk(item.id).then(() => {
|
||||
ElMessage.success('操作成功')
|
||||
sourceStore.handleQuery()
|
||||
})
|
||||
} finally {
|
||||
sourceStore.loading = false
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
@ -82,6 +97,7 @@ const handleCurrentChange = () => { }
|
|||
justify-content: center;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
|
||||
.iconfont {
|
||||
margin-right: 5px;
|
||||
color: #a2a2a2;
|
||||
|
@ -97,6 +113,7 @@ const handleCurrentChange = () => { }
|
|||
|
||||
.resource-list {
|
||||
.list-item {
|
||||
flex: 1;
|
||||
padding: 10px 20px;
|
||||
border-bottom: solid #f1f1f1 1px;
|
||||
display: flex;
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<el-row justify="space-between">
|
||||
<el-col :span="12" class="tab-btns flex">
|
||||
<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-col>
|
||||
<el-col :span="12" class="search-box flex">
|
||||
|
@ -12,14 +12,14 @@
|
|||
</el-row>
|
||||
<el-row class="resoure-btns">
|
||||
<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">
|
||||
<el-option v-for="item in sourceStore.formatList" :key="item.value" :label="item.label"
|
||||
:value="item.value" />
|
||||
</el-select>
|
||||
<div class="line"></div>
|
||||
<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>
|
||||
</div>
|
||||
<div>
|
||||
|
@ -48,9 +48,26 @@ const openDialog = ()=>{
|
|||
isDialogOpen.value = true
|
||||
}
|
||||
|
||||
const submitFile = (fileList)=>{
|
||||
// console.log(toRaw(fileList))
|
||||
// uploaderState().pushFile(toRaw(fileList))
|
||||
const submitFile = (data)=>{
|
||||
let fileList = toRaw(data)
|
||||
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>
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
@ -15,6 +15,7 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted } from 'vue'
|
||||
import useResoureStore from './store'
|
||||
import ChooseTextbook from '@/components/choose-textbook/index.vue'
|
||||
import ResoureSearch from './container/resoure-search.vue'
|
||||
|
@ -25,15 +26,32 @@ const sourceStore = useResoureStore()
|
|||
const { ipcRenderer } = window.electron || {}
|
||||
// ipcRenderer.send('set-winsize',{x:1100,y: 700})
|
||||
|
||||
// 切换教材
|
||||
const changeBook = (data) => {
|
||||
getData(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>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
@ -1,76 +1,112 @@
|
|||
import { defineStore } from 'pinia'
|
||||
import { getSmarttalkPage } from '@/api/file/index'
|
||||
|
||||
const tabs = [
|
||||
{
|
||||
type: '',
|
||||
text: '平台资源',
|
||||
id: 1
|
||||
value: '平台'
|
||||
},
|
||||
{
|
||||
type: '',
|
||||
text: '校本资源',
|
||||
id: 2
|
||||
value: '校本'
|
||||
}
|
||||
]
|
||||
|
||||
const typeList = [
|
||||
{
|
||||
type: '',
|
||||
text: '全部',
|
||||
id: 1
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
type: '',
|
||||
text: '素材',
|
||||
id: 2
|
||||
value: '素材'
|
||||
},
|
||||
|
||||
|
||||
{
|
||||
type: '',
|
||||
text: '课件',
|
||||
id: 4
|
||||
value: '课件'
|
||||
},
|
||||
|
||||
|
||||
{
|
||||
type: '',
|
||||
text: '教案',
|
||||
id: 6
|
||||
},
|
||||
|
||||
value: '教案'
|
||||
}
|
||||
]
|
||||
// 资源格式
|
||||
const formatList = [
|
||||
{
|
||||
label: '资源格式',
|
||||
value: -1
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
label: 'word',
|
||||
value: 1
|
||||
value: 'word'
|
||||
},
|
||||
{
|
||||
label: 'ppt',
|
||||
value: 2
|
||||
value: 'ppt'
|
||||
},
|
||||
{
|
||||
label: 'mp3',
|
||||
value: 'mp3'
|
||||
},
|
||||
{
|
||||
label: 'mp4',
|
||||
value: 'mp4'
|
||||
}
|
||||
]
|
||||
|
||||
const structQuery = {
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
}
|
||||
|
||||
export default defineStore('resource', {
|
||||
state: () => ({
|
||||
tabs,
|
||||
typeList,
|
||||
formatList,
|
||||
curTab: 1,
|
||||
curType: 1,
|
||||
|
||||
curFormat: -1,
|
||||
searchKey: '',
|
||||
// 新建资源
|
||||
isCreate: false,
|
||||
loading: false,
|
||||
//查询条件
|
||||
query: {
|
||||
fileSource: '平台',
|
||||
fileSuffix: '',
|
||||
fileFlag: '',
|
||||
fileRoot: '资源',
|
||||
orderByColumn: 'uploadTime',
|
||||
isAsc: 'desc',
|
||||
...structQuery
|
||||
},
|
||||
result: {
|
||||
list: [],
|
||||
total: 0
|
||||
}
|
||||
}),
|
||||
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) {
|
||||
this.curTab = val
|
||||
this.query.fileSource = val
|
||||
this.handleQuery()
|
||||
},
|
||||
changeType(val) {
|
||||
this.curType = val
|
||||
this.query.fileFlag = val
|
||||
this.handleQuery()
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
Loading…
Reference in New Issue