二期:样式修改
This commit is contained in:
parent
f32dd848cc
commit
ae4f7d3b49
|
@ -6,8 +6,19 @@
|
|||
</div>
|
||||
<div class="prepare-body-main-item-info" @click="openFileWin(item)">
|
||||
<div class="prepare-item-info-title" :title="item.fileShowName">
|
||||
<div></div>
|
||||
<div
|
||||
style="
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
width: 200px;
|
||||
"
|
||||
>
|
||||
{{ item.fileShowName }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="prepare-item-info-message">
|
||||
<div style="width: 60px">
|
||||
<template v-if="item.uniquekey">
|
||||
|
@ -27,15 +38,21 @@
|
|||
</template>
|
||||
</div>
|
||||
<template v-if="item.fileSize">|</template>
|
||||
<div style="width: 70px" v-if="item.fileSize">{{ formatFileSize(item.fileSize) }}</div>
|
||||
<div v-if="item.fileSize" style="width: 70px">{{ formatFileSize(item.fileSize) }}</div>
|
||||
<template v-if="item.uploadTime">|</template>
|
||||
<div style="width: 70px" v-if="item.uploadTime">{{ toTimeText(item.uploadTime, true) }}</div>
|
||||
<div v-if="item.uploadTime" style="width: 70px">
|
||||
{{ toTimeText(item.uploadTime, true) }}
|
||||
</div>
|
||||
<template v-if="item.levelFirstName">| </template>
|
||||
<div
|
||||
v-if="item.levelFirstName"
|
||||
style="
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
width: 200px;
|
||||
"
|
||||
:title="
|
||||
item.levelFirstName +
|
||||
|
@ -145,7 +162,7 @@ export default {
|
|||
emits: { 'on-move': null, 'on-delete': null, 'on-set': null },
|
||||
data() {
|
||||
return {
|
||||
listenList: [],
|
||||
listenList: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
@ -261,7 +278,7 @@ export default {
|
|||
align-items: center;
|
||||
.icon-zuoye {
|
||||
font-size: 40px;
|
||||
color: #707070
|
||||
color: #707070;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -281,9 +298,7 @@ export default {
|
|||
.prepare-item-info-title {
|
||||
text-align: left;
|
||||
font-size: 16px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.prepare-item-info-message {
|
||||
|
|
|
@ -1,13 +1,31 @@
|
|||
<template>
|
||||
<div class="resource-list" v-loading="sourceStore.loading">
|
||||
<el-scrollbar height="400px">
|
||||
<el-empty description="暂无数据" v-if="!sourceStore.result.list.length" />
|
||||
<div v-loading="sourceStore.loading" class="resource-list">
|
||||
<el-scrollbar>
|
||||
<el-empty v-if="!sourceStore.result.list.length" description="暂无数据" />
|
||||
<ul>
|
||||
<li class="list-item" v-for="item in sourceStore.result.list" :key="item.id" @click="handleRow">
|
||||
<li
|
||||
v-for="item in sourceStore.result.list"
|
||||
:key="item.id"
|
||||
class="list-item"
|
||||
@click="handleRow"
|
||||
>
|
||||
<div class="item-left flex">
|
||||
<FileImage :fileName="item.fileShowName" :size="50" />
|
||||
<FileImage :file-name="item.fileShowName" :size="50" />
|
||||
<div class="flex item-left-content">
|
||||
<div class="name flex">{{ item.fileShowName }}</div>
|
||||
<div class="name flex" :title="item.fileShowName">
|
||||
<div></div>
|
||||
<div
|
||||
style="
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
width: 200px;
|
||||
"
|
||||
>
|
||||
{{ item.fileShowName }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-tags flex">
|
||||
<el-tag type="info" class="mr-10">{{ item.fileFlag }}</el-tag>
|
||||
<el-tag type="info" class="mr-10">{{ getFileSuffix(item.fileShowName) }}</el-tag>
|
||||
|
@ -18,10 +36,16 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="item-btns" @click.stop>
|
||||
<el-popover placement="bottom-end" trigger="hover" popper-class="custom-popover"
|
||||
:visible="item.showPopover">
|
||||
<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">
|
||||
|
@ -29,7 +53,11 @@
|
|||
<i class="iconfont icon-bianji"></i>
|
||||
<span>编辑</span>
|
||||
</div>
|
||||
<div class="item-popover-item" v-if="userInfo.userId == item.uploadUserId" @click="delRow(item)">
|
||||
<div
|
||||
v-if="userInfo.userId == item.uploadUserId"
|
||||
class="item-popover-item"
|
||||
@click="delRow(item)"
|
||||
>
|
||||
<i class="iconfont icon-shanchu"></i>
|
||||
<span>删除</span>
|
||||
</div>
|
||||
|
@ -37,24 +65,29 @@
|
|||
<i class="iconfont icon-xiazai"></i>
|
||||
<span>下载</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
</el-popover>
|
||||
<el-button size="small" plain round type="primary" @click="addLesson(item)">
|
||||
<i class="iconfont icon-jiahao"></i>
|
||||
备课</el-button>
|
||||
备课</el-button
|
||||
>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</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" />
|
||||
<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>
|
||||
|
||||
|
@ -128,7 +161,7 @@ const addLesson = ({ id }) => {
|
|||
let data = {
|
||||
id,
|
||||
fileRoot: '备课',
|
||||
...(toRaw(sourceStore.nodeData)),
|
||||
...toRaw(sourceStore.nodeData)
|
||||
}
|
||||
// 过滤空值
|
||||
for (let key in data) {
|
||||
|
@ -142,8 +175,7 @@ const addLesson = ({ id }) => {
|
|||
addFileToPrepare(data).then(() => {
|
||||
ElMessage.success('操作成功')
|
||||
})
|
||||
}
|
||||
finally {
|
||||
} finally {
|
||||
sourceStore.loading = false
|
||||
}
|
||||
}
|
||||
|
@ -181,6 +213,10 @@ const handleRow = () =>{
|
|||
}
|
||||
|
||||
.resource-list {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: auto;
|
||||
.list-item {
|
||||
flex: 1;
|
||||
padding: 10px 20px;
|
||||
|
@ -189,10 +225,13 @@ const handleRow = () =>{
|
|||
justify-content: space-between;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(144, 147, 153, 0.2);
|
||||
cursor: pointer;
|
||||
}
|
||||
.item-left {
|
||||
align-items: center;
|
||||
|
||||
flex: 1;
|
||||
.icon {
|
||||
font-size: 50px;
|
||||
}
|
||||
|
@ -200,12 +239,14 @@ const handleRow = () =>{
|
|||
.item-left-content {
|
||||
margin-left: 10px;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 14px;
|
||||
color: #3b3b3b;
|
||||
margin-bottom: 10px
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.line {
|
||||
|
@ -226,7 +267,6 @@ const handleRow = () =>{
|
|||
color: #909399;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
|
@ -258,15 +298,13 @@ const handleRow = () =>{
|
|||
margin-right: 3px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.pagination-box {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
height: 65px;
|
||||
}
|
||||
}
|
||||
</style>
|
|
@ -1,21 +1,28 @@
|
|||
<template>
|
||||
<div class="page-resource flex">
|
||||
<!--左侧 教材 目录-->
|
||||
<ChooseTextbook @changeBook="getData" @nodeClick="getData" />
|
||||
<ChooseTextbook @change-book="getData" @node-click="getData" />
|
||||
|
||||
<div class="page-right">
|
||||
<!-- 搜索 -->
|
||||
<ResoureSearch #add>
|
||||
<el-button v-if="sourceStore.isCreate" type="primary" round @click="openDialog" class="create-btn">
|
||||
<el-button
|
||||
v-if="sourceStore.isCreate"
|
||||
type="primary"
|
||||
round
|
||||
class="create-btn"
|
||||
@click="openDialog"
|
||||
>
|
||||
<i class="iconfont icon-jiahao"></i>
|
||||
新建资源</el-button>
|
||||
新建资源</el-button
|
||||
>
|
||||
</ResoureSearch>
|
||||
<!-- 列表 -->
|
||||
<ResoureList />
|
||||
</div>
|
||||
</div>
|
||||
<!-- 上传弹窗 -->
|
||||
<uploadDialog v-model="isDialogOpen" @submitFile="submitFile" />
|
||||
<uploadDialog v-model="isDialogOpen" @submit-file="submitFile" />
|
||||
<!-- <el-button @click="testClick">测试</el-button> -->
|
||||
</template>
|
||||
|
||||
|
@ -52,8 +59,7 @@ const getData = (data) => {
|
|||
let levelFirstId
|
||||
if (node.parentNode) {
|
||||
levelFirstId = node.parentNode.id
|
||||
}
|
||||
else{
|
||||
} else {
|
||||
levelFirstId = node.id
|
||||
levelSecondId = ''
|
||||
}
|
||||
|
@ -63,7 +69,7 @@ const getData = (data) => {
|
|||
sourceStore.nodeData = {
|
||||
textbookId,
|
||||
levelFirstId,
|
||||
levelSecondId,
|
||||
levelSecondId
|
||||
}
|
||||
sourceStore.handleQuery()
|
||||
}
|
||||
|
@ -73,7 +79,7 @@ const submitFile = (data) => {
|
|||
let fileList = toRaw(data)
|
||||
const { textbookId, levelFirstId, levelSecondId, fileSource, fileRoot } = sourceStore.query
|
||||
// 给每个文件添加属性
|
||||
fileList.forEach(item => {
|
||||
fileList.forEach((item) => {
|
||||
let fileData = { textbookId, levelFirstId, levelSecondId, fileSource, fileRoot }
|
||||
fileData.fileShowName = item.fileData.fileShowName
|
||||
fileData.fileFlag = item.fileData.fileFlag
|
||||
|
@ -83,7 +89,6 @@ const submitFile = (data) => {
|
|||
uploaderState().pushFile(fileList)
|
||||
}
|
||||
|
||||
|
||||
const fileCallBack = (res) => {
|
||||
if (res.code == 200) {
|
||||
sourceStore.handleQuery()
|
||||
|
@ -93,7 +98,6 @@ const fileCallBack = (res) => {
|
|||
onMounted(() => {
|
||||
sourceStore.getCreate()
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
@ -103,6 +107,8 @@ onMounted(()=>{
|
|||
|
||||
.page-right {
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
margin-left: 20px;
|
||||
height: 100%;
|
||||
|
|
Loading…
Reference in New Issue