Vue3學習（二十四）- 文件頁面功能開發

久曲健發表於2024-05-13

Vue

寫在前面

這部分真的感覺超級難，其實也不能說難，主要是真的想不到這個思路應該這麼做，或者說他好厲害，他怎麼知道該這麼設計實現。

說下難點吧，我覺得後天邏輯還好，主要是前端部分真的需要點花點時間來思考，比如佈局、互動設計的實現等等。

文件頁面功能開發

1、任務拆解

增加文件頁面，首頁點選電子書時，跳轉到電子書文件頁面
左邊顯示文件樹
右邊顯示預設選擇第一個節點的內容
文件編輯增加預覽功能
無文件內容時，給出提示
功能最佳化及問題修復

2、增加文件頁面

首頁點選電子書時，跳轉到電子書文件頁面，參考之前電子書列表中文件管理的路由跳轉即可，示例程式碼如下：

<router-link :to="'/doc?ebookId='+item.id">
  {{ item.name }}
</router-link>

3、左邊顯示文件樹

就是把文件管理的樹形資料變成選單，選擇對應選單顯示對應電子書，示例程式碼如下：

<a-row>
  <a-col :span="6">
    <a-tree
        v-if="level1 && level1.length"
        :defaultExpandAllRows="true"
        :tree-data="level1"
        @select="onSelect"
        :fieldNames="{title: 'name', key: 'id', value: 'id'}"
        :defaultExpandAll="true"
    >
    </a-tree>
  </a-col>
  <a-col :span="18">
  </a-col>
</a-row>

4、右邊預設選擇第一個節點

當進入文件頁面時，預設就選擇第一個節點內容，示例程式碼如下：

/**
   * 資料查詢
   **/
  const handleQuery = () => {
    axios.get("/doc/all/" + route.query.ebookId).then((response) => {
      const data = response.data;
      if (data.success) {
        docs.value = data.content;
        level1.value = [];
        level1.value = Tool.array2Tree(docs.value, 0);
        setParent(level1.value)
        if (Tool.isNotEmpty(level1.value)) {
          defaultSelectedKeys.value = [level1.value[0].id];
          handleQueryContent(level1.value[0].id);
        }
      } else {
        message.error(data.message);
      }
    });
  };

5、文件編輯增加預覽功能

就是增加一個按鈕，點選後用一個抽屜顯示即可，示例程式碼如下：

<!-- 預覽按鈕 -->
<a-button type="primary" @click="handlePreviewContent()">
  <EyeOutlined /> 內容預覽
</a-button>
// 抽屜
<a-drawer width="750" placement="right" :closable="false" :visible="drawerVisible" @close="onDrawerClose">
  <div class="wangeditor" :innerHTML="previewHtml"></div>
</a-drawer>

6、無文件內容時，給出提示

判斷介面返回資料，如果長度為0，就返回頁面字串顯示，示例程式碼如下：

 <h3 v-if="level1.length === 0">對不起，找不到相關文件！</h3>

7、部分功能最佳化

圖示的顯示，需要先安裝依賴如下：

npm install --save @ant-design/icons-vue

程式碼部分如下所示：

<a-button type="primary" @click="handlePreviewContent()">
  <EyeOutlined /> 內容預覽
</a-button>

import {SmileOutlined, DownOutlined, ExclamationCircleOutlined,EyeOutlined} from '@ant-design/icons-vue';
 
components: {
  SmileOutlined,
  DownOutlined,
  EyeOutlined
},