zdppy+vue3+onlyoffice开发文档系统实战20240807上课笔记 解决了最近文档页面几个遗留的文档

小技巧

vite配置 open: true 可以自动打开浏览器。

目前

遗留任务

1、在名称前面，渲染这个文档的图标
2、大小的基本的单位是kb，超过1024kb则换成mb，主要是这两个单位
3、数据按照最近访问时间倒序
4、给文件名价格链接，实现和编辑按钮相同的功能
5、实现编辑的功能
6、实现删除的功能
7、分享的功能暂时往后放，因为目前没有用户，等有了用户之后再考虑做

在名称前面，渲染这个文档的图标

之前实现了一半，但是没有做成根据类型切换动态图标，需要完善。

动态计算的方法：

const getSvg = (typeStr) => {switch (typeStr) {case "word":return docxSvgcase "ppt":return pptSvgcase "excel":return excelSvgcase "pdf":return pdfSvgdefault:return otherSvg}
}

在模板中使用：

<template v-else-if="column.key === 'name'"><div class="flex items-center justify-center"><img :src="getSvg(record.category)" class="w-5 h-5 mr-1"><span>{{ record[column.key] }}</span></div>
</template>

效果预览：不同的类型，不同图标

剩下的问题

1、大小的基本的单位是kb，超过1024kb则换成mb，主要是这两个单位
2、数据按照最近访问时间倒序
3、给文件名价格链接，实现和编辑按钮相同的功能
4、实现编辑的功能
5、实现删除的功能
6、分享的功能暂时往后放，因为目前没有用户，等有了用户之后再考虑做

先解决大小的问题

也是定义一个方法，传入size的整数，返回一个字符串，这个字符串格式为1kb，1mb等等。

测试代码

定义方法如下：

const getSizeStr = (size) => {return "1kb"
}const size = 333
console.log(getSizeStr(size))

实现计算kb的算法

const getSizeStr = (size) => {// kb 的算法size /= 1024;if (size < 1024) {return size.toFixed(2) + "kb";}return "1kb"
}const size = 333
console.log(getSizeStr(size))

实现计算mb的算法

const getSizeStr = (size) => {// kb 的算法size /= 1024;if (size < 1024) {return size.toFixed(2) + "kb";}// mb 的算法size /= 1024;if (size < 1024) {return size.toFixed(2) + "mb";}return "1kb"
}const size = 33333333
console.log(getSizeStr(size))

实现gb的算法

const getSizeStr = (size) => {// kb 的算法size /= 1024;if (size < 1024) {return size.toFixed(2) + " KB";}// mb 的算法size /= 1024;if (size < 1024) {return size.toFixed(2) + " MB";}// gb 的算法size /= 1024;return size.toFixed(2) + " GB";
}const size = 33333333333
console.log(getSizeStr(size))

将计算字节大小的算法整合到vue3中

<template v-else-if="column.key === 'size'"><span>{{ getSizeStr(record.size) }}</span>
</template>

此时的页面效果预览如下：

剩下的问题

1、数据按照最近访问时间倒序
2、给文件名价格链接，实现和编辑按钮相同的功能
3、实现编辑的功能
4、实现删除的功能
5、分享的功能暂时往后放，因为目前没有用户，等有了用户之后再考虑做

数据按照最近访问时间倒序

zdppy_amcrud生成的查询接口中，支持传递order这个参数。

我们只需要设置：{order: “-latest_view_time”} 即可。

修改前，页面数据的最近访问时间列呈现无序的状态，如下图：

修改之前，加载页面数据的代码如下：

onMounted(() => {axios({method: "get",url: "http://192.168.234.138:18888/file",}).then(resp => {const results = resp.data.data.resultsconsole.log(results)data.value = results})
})

改写代码如下：

onMounted(() => {axios({method: "get",url: "http://192.168.234.138:18888/file",params: {order: "-latest_view_time",}}).then(resp => {const results = resp.data.data.resultsconsole.log(results)data.value = results})
})

此时页面的预览效果如下：

很明显的能够看出来，此时的数据在最近访问时间这一列上，呈现按时间倒序的状态。

剩下的问题

1、给文件名加个链接，实现和编辑按钮相同的功能
2、实现编辑的功能
3、实现删除的功能
4、分享的功能暂时往后放，因为目前没有用户，等有了用户之后再考虑做

实现编辑功能

本质上而言就是一点击就跳转到文档页面。

定义如下方法：

const editDocument = () => {router.push({path: '/document', query: {key: 'abc'}})
}

修改编辑按钮：

<a-button @click="editDocument">编辑</a-button>

修改name列：

<template v-else-if="column.key === 'name'"><div class="flex items-center"><img :src="getSvg(record.category)" class="w-5 h-5 mr-1"><a @click.prevent="editDocument" class="link-text">{{ record[column.key] }}</a></div>
</template>

添加样式：

.link-text {color: black;
}.link-text:hover {color: dodgerblue;
}

此时的效果预览：

点击会跳转到文档页面：

剩下的问题

1、实现删除的功能
2、分享的功能暂时往后放，因为目前没有用户，等有了用户之后再考虑做
3、增加新建和导入按钮