zhuhao
/
AIx_Smarttalk
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 26 Wiki Activity

Merge pull request '二期：样式修改' (#93) from zhuhao_dev into main 

Reviewed-on: #93
This commit is contained in:
朱浩 2024-08-02 14:18:51 +08:00
parent f32dd848cc ae4f7d3b49
commit 1a51af93f6
3 changed files with 137 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
src/renderer/src/views/prepare/container/file-list-item.vue
View File

@ -6,36 +6,53 @@
</div> </div>
<div class="prepare-body-main-item-info" @click="openFileWin(item)"> <div class="prepare-body-main-item-info" @click="openFileWin(item)">
<div class="prepare-item-info-title" :title="item.fileShowName"> <div class="prepare-item-info-title" :title="item.fileShowName">
{{ item.fileShowName }} <div></div>
<div
style="
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 200px;
"
>
{{ item.fileShowName }}
</div>
</div> </div>
<div class="prepare-item-info-message"> <div class="prepare-item-info-message">
<div style="width: 60px"> <div style="width: 60px">
<template v-if="item.uniquekey"> <template v-if="item.uniquekey">
{{ item.worktype }} {{ item.worktype }}
</template> </template>
<template v-else> <template v-else>
<el-icon <el-icon
v-loading="item.async === 'on'" v-loading="item.async === 'on'"
style="background-color: green; border-radius: 20px; color: white; top: 2px" style="background-color: green; border-radius: 20px; color: white; top: 2px"
> >
<Check v-if="item.async === true" /> <Check v-if="item.async === true" />
<UploadFilled v-if="!item.async" /> <UploadFilled v-if="!item.async" />
</el-icon> </el-icon>
{{ item.async === true ? '已同步' : '' }} {{ item.async === true ? '已同步' : '' }}
{{ !item.async ? '待同步' : '' }} {{ !item.async ? '待同步' : '' }}
{{ item.async === 'on' ? '同步中' : '' }} {{ item.async === 'on' ? '同步中' : '' }}
</template> </template>
</div> </div>
<template v-if="item.fileSize">|</template> <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> <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">|&nbsp;</template> <template v-if="item.levelFirstName">|&nbsp;</template>
<div <div
v-if="item.levelFirstName" v-if="item.levelFirstName"
style=" style="
flex: 1; flex: 1;
text-align: left; text-align: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 200px;
" "
:title=" :title="
item.levelFirstName + item.levelFirstName +
@ -145,7 +162,7 @@ export default {
emits: { 'on-move': null, 'on-delete': null, 'on-set': null }, emits: { 'on-move': null, 'on-delete': null, 'on-set': null },
data() { data() {
return { return {
listenList: [], listenList: []
} }
}, },
methods: { methods: {
@ -229,7 +246,7 @@ export default {
}) })
}, },
//布置 //布置
setHomeWork(item){ setHomeWork(item) {
this.$emit('on-set', item) this.$emit('on-set', item)
} }
} }
@ -259,9 +276,9 @@ export default {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
.icon-zuoye{ .icon-zuoye {
font-size: 40px; font-size: 40px;
color: #707070 color: #707070;
} }
} }
@ -281,9 +298,7 @@ export default {
.prepare-item-info-title { .prepare-item-info-title {
text-align: left; text-align: left;
font-size: 16px; font-size: 16px;
white-space: nowrap; display: flex;
overflow: hidden;
text-overflow: ellipsis;
} }
.prepare-item-info-message { .prepare-item-info-message {

108
src/renderer/src/views/resource/container/resoure-list.vue
View File

@ -1,13 +1,31 @@
<template> <template>
<div class="resource-list" v-loading="sourceStore.loading"> <div v-loading="sourceStore.loading" class="resource-list">
<el-scrollbar height="400px"> <el-scrollbar>
<el-empty description="暂无数据" v-if="!sourceStore.result.list.length" /> <el-empty v-if="!sourceStore.result.list.length" description="暂无数据" />
<ul> <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"> <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="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"> <div class="item-tags flex">
<el-tag type="info" class="mr-10">{{ item.fileFlag }}</el-tag> <el-tag type="info" class="mr-10">{{ item.fileFlag }}</el-tag>
<el-tag type="info" class="mr-10">{{ getFileSuffix(item.fileShowName) }}</el-tag> <el-tag type="info" class="mr-10">{{ getFileSuffix(item.fileShowName) }}</el-tag>
@ -18,10 +36,16 @@
</div> </div>
</div> </div>
<div class="item-btns" @click.stop> <div class="item-btns" @click.stop>
<el-popover placement="bottom-end" trigger="hover" popper-class="custom-popover" <el-popover
:visible="item.showPopover"> placement="bottom-end"
trigger="hover"
popper-class="custom-popover"
:visible="item.showPopover"
>
<template #reference> <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>
<template #default> <template #default>
<div class="item-popover"> <div class="item-popover">
@ -29,7 +53,11 @@
<i class="iconfont icon-bianji"></i> <i class="iconfont icon-bianji"></i>
<span>编辑</span> <span>编辑</span>
</div> </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> <i class="iconfont icon-shanchu"></i>
<span>删除</span> <span>删除</span>
</div> </div>
@ -37,24 +65,29 @@
<i class="iconfont icon-xiazai"></i> <i class="iconfont icon-xiazai"></i>
<span>下载</span> <span>下载</span>
</div> </div>
</div> </div>
</template> </template>
</el-popover> </el-popover>
<el-button size="small" plain round type="primary" @click="addLesson(item)"> <el-button size="small" plain round type="primary" @click="addLesson(item)">
<i class="iconfont icon-jiahao"></i> <i class="iconfont icon-jiahao"></i>
备课</el-button> 备课</el-button
>
</div> </div>
</li> </li>
</ul> </ul>
</el-scrollbar> </el-scrollbar>
<div class="pagination-box"> <div class="pagination-box">
<el-pagination v-model:current-page="sourceStore.query.pageNum" v-model:page-size="sourceStore.query.pageSize" <el-pagination
:page-sizes="[10, 20, 30, 50]" background layout="total, sizes, prev, pager, next, jumper" v-model:current-page="sourceStore.query.pageNum"
:total="sourceStore.result.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" /> 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>
</div> </div>
</template> </template>
@ -69,17 +102,17 @@ import useUserStore from '@/store/modules/user'
import useResoureStore from '../store' import useResoureStore from '../store'
const { ipcRenderer } = window.electron || {} const { ipcRenderer } = window.electron || {}
const userstore = useUserStore() const userstore = useUserStore()
const sourceStore = useResoureStore() const sourceStore = useResoureStore()
const userInfo = userstore.user const userInfo = userstore.user
// 分页change // 分页change
const handleSizeChange = (limit) => { const handleSizeChange = (limit) => {
sourceStore.query.pageSize = limit sourceStore.query.pageSize = limit
sourceStore.handleQuery() sourceStore.handleQuery()
} }
const handleCurrentChange = (page) => { const handleCurrentChange = (page) => {
sourceStore.query.pageNum = page sourceStore.query.pageNum = page
sourceStore.handleQuery() sourceStore.handleQuery()
} }
@ -108,7 +141,7 @@ const editRow = (item) => {
} }
}) })
}) })
.catch(() => { }) .catch(() => {})
} }
// 删除 // 删除
const delRow = (item) => { const delRow = (item) => {
@ -128,7 +161,7 @@ const addLesson = ({ id }) => {
let data = { let data = {
id, id,
fileRoot: '备课', fileRoot: '备课',
...(toRaw(sourceStore.nodeData)), ...toRaw(sourceStore.nodeData)
} }
// 过滤空值 // 过滤空值
for (let key in data) { for (let key in data) {
@ -136,19 +169,18 @@ const addLesson = ({ id }) => {
delete data[key] delete data[key]
} }
} }
try { try {
sourceStore.loading = true sourceStore.loading = true
addFileToPrepare(data).then(() => { addFileToPrepare(data).then(() => {
ElMessage.success('操作成功') ElMessage.success('操作成功')
}) })
} } finally {
finally {
sourceStore.loading = false sourceStore.loading = false
} }
} }
// //
const handleRow = () =>{ const handleRow = () => {
ElMessage.warning('请先加入备课，在备课里面进行预览！') ElMessage.warning('请先加入备课，在备课里面进行预览！')
} }
</script> </script>
@ -181,6 +213,10 @@ const handleRow = () =>{
} }
.resource-list { .resource-list {
flex: 1;
display: flex;
flex-direction: column;
overflow: auto;
.list-item { .list-item {
flex: 1; flex: 1;
padding: 10px 20px; padding: 10px 20px;
@ -189,10 +225,13 @@ const handleRow = () =>{
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
&:hover {
background-color: rgba(144, 147, 153, 0.2);
cursor: pointer;
}
.item-left { .item-left {
align-items: center; align-items: center;
flex: 1;
.icon { .icon {
font-size: 50px; font-size: 50px;
} }
@ -200,12 +239,14 @@ const handleRow = () =>{
.item-left-content { .item-left-content {
margin-left: 10px; margin-left: 10px;
flex-direction: column; flex-direction: column;
flex: 1;
text-align: left;
} }
.name { .name {
font-size: 14px; font-size: 14px;
color: #3b3b3b; color: #3b3b3b;
margin-bottom: 10px margin-bottom: 10px;
} }
.line { .line {
@ -226,7 +267,6 @@ const handleRow = () =>{
color: #909399; color: #909399;
font-size: 13px; font-size: 13px;
} }
} }
&:last-child { &:last-child {
@ -258,15 +298,13 @@ const handleRow = () =>{
margin-right: 3px; margin-right: 3px;
font-weight: bold; font-weight: bold;
} }
} }
} }
.pagination-box { .pagination-box {
margin-top: 20px;
display: flex; display: flex;
justify-content: center; justify-content: center;
height: 65px;
} }
} }
</style> </style>

46
src/renderer/src/views/resource/index.vue
View File

@ -1,21 +1,28 @@
<template> <template>
<div class="page-resource flex"> <div class="page-resource flex">
<!--左侧 教材 目录--> <!--左侧 教材 目录-->
<ChooseTextbook @changeBook="getData" @nodeClick="getData" /> <ChooseTextbook @change-book="getData" @node-click="getData" />
<div class="page-right"> <div class="page-right">
<!-- 搜索 --> <!-- 搜索 -->
<ResoureSearch #add> <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> <i class="iconfont icon-jiahao"></i>
新建资源</el-button> 新建资源</el-button
>
</ResoureSearch> </ResoureSearch>
<!-- 列表 --> <!-- 列表 -->
<ResoureList /> <ResoureList />
</div> </div>
</div> </div>
<!-- 上传弹窗 --> <!-- 上传弹窗 -->
<uploadDialog v-model="isDialogOpen" @submitFile="submitFile" /> <uploadDialog v-model="isDialogOpen" @submit-file="submitFile" />
<!-- <el-button @click="testClick">测试</el-button> --> <!-- <el-button @click="testClick">测试</el-button> -->
</template> </template>
@ -40,7 +47,7 @@ onMounted(async () => {
// const res = await ipcMsgSend('tool-sphere:create', params) // const res = await ipcMsgSend('tool-sphere:create', params)
// console.log('消息返回：', res) // console.log('消息返回：', res)
}) })
const testClick = async() => { const testClick = async () => {
const win = await createWindow('tool-sphere', { url: '/tool/sphere' }) const win = await createWindow('tool-sphere', { url: '/tool/sphere' })
console.log('消息返回：', win) console.log('消息返回：', win)
} }
@ -48,12 +55,11 @@ const testClick = async() => {
const getData = (data) => { const getData = (data) => {
const { textBook, node } = data const { textBook, node } = data
let textbookId = textBook.curBookId let textbookId = textBook.curBookId
let levelSecondId = node.id let levelSecondId = node.id
let levelFirstId let levelFirstId
if(node.parentNode){ if (node.parentNode) {
levelFirstId = node.parentNode.id levelFirstId = node.parentNode.id
} } else {
else{
levelFirstId = node.id levelFirstId = node.id
levelSecondId = '' levelSecondId = ''
} }
@ -63,7 +69,7 @@ const getData = (data) => {
sourceStore.nodeData = { sourceStore.nodeData = {
textbookId, textbookId,
levelFirstId, levelFirstId,
levelSecondId, levelSecondId
} }
sourceStore.handleQuery() sourceStore.handleQuery()
} }
@ -73,7 +79,7 @@ const submitFile = (data) => {
let fileList = toRaw(data) let fileList = toRaw(data)
const { textbookId, levelFirstId, levelSecondId, fileSource, fileRoot } = sourceStore.query const { textbookId, levelFirstId, levelSecondId, fileSource, fileRoot } = sourceStore.query
// 给每个文件添加属性 // 给每个文件添加属性
fileList.forEach(item => { fileList.forEach((item) => {
let fileData = { textbookId, levelFirstId, levelSecondId, fileSource, fileRoot } let fileData = { textbookId, levelFirstId, levelSecondId, fileSource, fileRoot }
fileData.fileShowName = item.fileData.fileShowName fileData.fileShowName = item.fileData.fileShowName
fileData.fileFlag = item.fileData.fileFlag fileData.fileFlag = item.fileData.fileFlag
@ -83,17 +89,15 @@ const submitFile = (data) => {
uploaderState().pushFile(fileList) uploaderState().pushFile(fileList)
} }
const fileCallBack = (res) => { const fileCallBack = (res) => {
if (res.code == 200) { if (res.code == 200) {
sourceStore.handleQuery() sourceStore.handleQuery()
} }
} }
onMounted(()=>{ onMounted(() => {
sourceStore.getCreate() sourceStore.getCreate()
}) })
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -103,6 +107,8 @@ onMounted(()=>{
.page-right { .page-right {
min-width: 0; min-width: 0;
display: flex;
flex-direction: column;
flex: 1; flex: 1;
margin-left: 20px; margin-left: 20px;
height: 100%; height: 100%;
@ -111,12 +117,12 @@ onMounted(()=>{
box-shadow: 0px 0px 20px 0px rgba(99, 99, 99, 0.06); box-shadow: 0px 0px 20px 0px rgba(99, 99, 99, 0.06);
} }
.icon-jiahao { .icon-jiahao {
font-size: 12px; font-size: 12px;
margin-right: 3px; margin-right: 3px;
font-weight: bold; font-weight: bold;
} }
} }
.create-btn{ .create-btn {
font-size: 13px; font-size: 13px;
padding: 5px 13px; padding: 5px 13px;
} }