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 docxSvg
    case "ppt":
      return pptSvg
    case "excel":
      return excelSvg
    case "pdf":
      return pdfSvg
    default:
      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.results
    console.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.results
    console.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、增加新建和导入按钮