实现新增文档功能

使用路由参数实现数据传递，以实现新增文档功能。
本篇仅涉及前端代码的修改。

• web/src/router/index.ts

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import Home from '../views/Home.vue'
import About from "../views/About.vue";
import AdminEbook from "../views/admin/admin-ebook.vue";
import AdminCategory from "../views/admin/admin-category.vue";
import AdminDoc from "../views/admin/admin-doc.vue";

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component:About
  },
  {
    path:"/admin/ebook",
    name:"AdminEbook",
    component:AdminEbook
  },
  {
    path:"/admin/category",
    name:"AdminCategory",
    component:AdminCategory
  },
  {
    path:"/admin/doc/:ebookId",
    name:"AdminDoc",
    component:AdminDoc
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

• web/src/views/admin/admin-ebook.vue

<template>
  <a-layout>
    <a-layout-content
        :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }"
    >
      <p>
        <a-form :model="param" layout="inline">
          <a-form-item>
            <a-input v-model:value="param.name" placeholder="请输入名称"></a-input>
          </a-form-item>
          <a-form-item>
            <a-button type="primary"  @click="handleQuery({page:1,size:pagination.pageSize})">查询</a-button>
          </a-form-item>
          <a-form-item>
            <a-button type="primary"  @click="add">新增</a-button>
          </a-form-item>
        </a-form>
      </p>
      <a-table :columns="columns"
               :dataSource="ebooks"
               :row-key="record=>record.id"
               :pagination="pagination"
               :loading="loading"
               @change="handleTableChange">
        <template #cover="{text:cover}">
          <img v-if="cover" :src="cover" alt="avatar">
        </template>
        <template #category="{text,record}">
          <text>{{getCategoryName(record.category1Id)}}/{{getCategoryName(record.category2Id)}}</text>
        </template>
        <template #action="{text,record}">
          <a-space>
            <router-link :to="'/admin/doc/'+record.id">
              <a-button type="primary">文档管理</a-button>
            </router-link>
            <a-button type="primary" @click="edit(record)">编辑</a-button>
            <a-popconfirm
                title="删除后不可恢复，确认删除?"
                ok-text="确定"
                cancel-text="取消"
                @confirm="handleDelete(record)"
            >
              <a-button type="danger">删除</a-button>
            </a-popconfirm>
          </a-space>
        </template>
      </a-table>
    </a-layout-content>

  </a-layout>

  <a-modal
      title="电子书表单"
      v-model:visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
  >
    <a-form :model="ebook" :label-col="{span:4}" :wrapper-col="{span:16}">
      <a-form-item label="封面">
        <a-input v-model:value="ebook.cover" />
      </a-form-item>
      <a-form-item label="名称">
        <a-input v-model:value="ebook.name" />
      </a-form-item>
      <a-form-item label="选择分类">
        <a-cascader v-model:value="categoryIds" :options="options"
                    :field-names="{label:'name',value:'id',children:'children'}"/>
      </a-form-item>
      <a-form-item label="描述">
        <a-input v-model:value="ebook.description" />
      </a-form-item>
    </a-form>
  </a-modal>

</template>


<script lang="ts">

import {defineComponent, ref, onMounted, reactive} from 'vue';
import axios from "axios";
import {message} from "ant-design-vue";
import {arrayToTree} from "@/tools/tool";

export default defineComponent({
  name:"AdminEbook",
  setup: function () {
    const ebooks = ref();
    const pagination = ref({
      current: 1,
      pageSize: 4,
      total: 0
    });
    const loading = ref(false);
    const columns = [
      {
        title: "封面",
        dataIndex: "cover",
        key: "cover",
        slots: {customRender: 'cover'}
      },
      {
        title: "名称",
        key: "name",
        dataIndex: "name"
      },
      {
        title: "分类",
        key: "categoryId",
        slots:{customRender: "category"}
      },
      {
        title: "文档数",
        key: "docCount",
        dataIndex: "docCount"
      },
      {
        title: "阅读数",
        key: "viewCount",
        dataIndex: "viewCount"
      },
      {
        title: "点赞数",
        key: "vouteCount",
        dataIndex: "voteCount"
      },
      {
        title: "操作",
        key: "action",
        dataIndex: "action",
        slots: {customRender: 'action'}

      }
    ];

    let categorys:any = [];
    const categoryIds = ref();
    const options = ref();
    const handleCategoryQuery = () => {
      axios.get("/category/all").then(response => {
        const data = response.data;
        if(data.success){
          categorys = data.content;
          const result = arrayToTree(data.content,0);
          console.log("get options successfully,",result);
          options.value = result;
        }else{
          console.log("get options failed");
        }
      })
    }
    const getCategoryName = (categoryId:number) => {
      let name = "";
      for(let i=0;i<categorys.length;i++){
        let item = categorys[i]
        if(Number(item.id) === Number(categoryId)){
          name = item.name;
          break;
        }
      }
      return name;
    }

    const visible = ref(false);
    const modalText = ref('test');
    const confirmLoading = ref(false);
    const ebook = ref();
    const param = reactive({
      name:""
    });
    const handleQuery = (params: any) => {
      loading.value = true;
      axios.get("/ebook/list", {params: {
          page:params.page,
          size:params.size,
          name:param.name
        }}).then(response => {
        loading.value = false;
        const data = response.data;
        const content = data.content;
        if (data.success) {
          ebooks.value = content.list;
          pagination.value.total = content.total;
          pagination.value.current = params.page;
        } else {
          message.warn(data.message);
        }
      })
    };

    const handleTableChange = (pagination: any) => {
      handleQuery({
        page: pagination.current,
        size: pagination.pageSize
      });
    }

    const edit = (record: any) => {
      visible.value = true;
      ebook.value = JSON.parse(JSON.stringify(record));
      categoryIds.value = [ebook.value.category1Id,ebook.value.category2Id];
    }
    const add = () => {
      visible.value = true;
      ebook.value = {};
    }
    const handleDelete = (record: any) => {
      axios.delete("ebook/delete/" + record.id).then(response => {
        const data = response.data;
        if (data.success) {
          handleQuery({
            page: pagination.value.current,
            size: pagination.value.pageSize
          })
        }
      })
    }
    const handleOk = () => {
      ebook.value.category1Id = categoryIds.value[0];
      ebook.value.category2Id = categoryIds.value[1];
      axios.post("/ebook/save", ebook.value).then(response => {
        const data = response.data;
        if (data.success) {
          visible.value = false;
          confirmLoading.value = false;

          handleQuery({
            page: pagination.value.current,
            size: pagination.value.pageSize
          })
        } else {
          message.warn(data.message);
        }

      })
    };

    onMounted(() => {
      handleCategoryQuery();
      handleQuery({
        page: 1,
        size: pagination.value.pageSize
      });

    })

    return {
      columns,
      ebooks,
      loading,
      pagination,
      visible,
      modalText,
      confirmLoading,
      ebook,
      param,
      categoryIds,
      options,
      handleTableChange,
      edit,
      add,
      handleDelete,
      handleOk,
      handleQuery,
      getCategoryName
    }
  }
})
</script>


<style scoped>
img{
  width: 48px;
  height: 48px;
}
</style>

• web/src/views/admin/admin-doc.vue

<template>
  <a-layout>
    <a-layout-content :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }">
      <p>
        <a-button type="primary" @click="handleAdd">新增</a-button>
      </p>
      <a-table :columns="columns" :data-source="docs" :row-key="record=>record.id"
               :loading="loading" :pagination="false" @change="handleChange">
        <template #action="{text,record}">
          <a-space>
            <a-button type="primary" @click="edit(record)">编辑</a-button>
            <a-popconfirm
                title="删除后不可恢复，确认删除?"
                ok-text="确定"
                cancel-text="取消"
                @confirm="confirm(record)"
            >
              <a-button type="danger">删除</a-button>
            </a-popconfirm>
          </a-space>
        </template>
      </a-table>
    </a-layout-content>
  </a-layout>
    <a-modal :visible="visible" title="文档管理" @ok="handleOk" @cancel="handleCancel">
      <a-form :model="doc" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }">
        <a-form-item label="名称">
          <a-input v-model:value="doc.name" />
        </a-form-item>
        <a-form-item label="文档">
          <a-input v-model:value="doc.parent" />
          <a-tree-select
              v-model:value="doc.parent"
              :replace-fields="{children:'children', title:'name', key:'id', value: 'id' }"
              style="width: 100%"
              :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
              :tree-data="treeData"
              placeholder="请选择父文档"
              tree-default-expand-all
          >
          </a-tree-select>
        </a-form-item>
        <a-form-item label="排序">
          <a-input v-model:value="doc.sort" />
        </a-form-item>
      </a-form>
    </a-modal>
</template>


<script lang="ts">
import {defineComponent, onMounted, ref} from 'vue';
import axios from "axios";
import {arrayToTree} from "@/tools/tool";
import {useRoute} from "vue-router";

interface docItem {
  id:number,
  name:string,
  parent?:number,
  sort?:number,
  children?:docItem[],
  ebookId?:number,
  viewCount?: number,
  voteCount?: number,
  disabled?:boolean,
}
const setDisable = (arr:docItem[],targetId:number|string) => {
  if(arr.length === 0) return ;
  for(let i=0;i<arr.length;i++){
    let node = arr[i];
    if(Number(node.id)=== Number(targetId)){
      node.disabled = true;
      let children = node.children;
      if(children && children.length){
        for(let j=0;j<children.length;j++){
          setDisable(children,children[j].id);
        }
      }
    }else{
      let children = node.children;
      if(children && children.length){
        setDisable(children,targetId);
      }
    }
  }
}
export default defineComponent({
  name:"AdminDoc",
  setup: function () {
    const columns = [
      {
        dataIndex: 'name',
        key: 'name',
        title: "名称"
      },
      {
        dataIndex: 'parent',
        key: 'parent',
        title: "父文档"
      },
      {
        dataIndex: 'sort',
        key: 'sort',
        title: "排序"
      },
      {
        title: 'Action',
        key: 'action',
        slots: {customRender: 'action'},
      },
    ];
    const loading = ref(false);
    const docs = ref();
    const visible = ref(false);
    const doc = ref();
    const treeData = ref();
    const route = useRoute();
    const handleQuery = () => {
      loading.value = true;
      axios.get("/doc/all").then(response => {
        loading.value = false;
        const data = response.data;
        if (data.success) {
          let result = arrayToTree(data.content, 0);
          console.log("result of arrayToTree:", result);
          docs.value = result;
        }
      })
    }
    const handleSave = (params: any) => {
      axios.post("/doc/save", params).then(response => {
        visible.value = false;
        const data = response.data;
        if (data.success) {
          handleQuery();
        } else {
          console.log("save failed");
        }
      })
    }
    const handleDelete = (record: any) => {
      axios.delete("/doc/delete/" + record.id).then(response => {
        const data = response.data;
        if (data.success) {
          handleQuery();
        } else {
          console.log("delete failed");
        }
      })
    }

    const handleChange = (p: any) => {
      handleQuery();
    }
    const edit = (record: any) => {
      visible.value = true;
      doc.value = JSON.parse(JSON.stringify(record));
      treeData.value = JSON.parse(JSON.stringify(docs.value));
      treeData.value.unshift({id: 0, name: "无"});
      setDisable(treeData.value, record.id);
    }
    const handleOk = () => {
      handleSave(doc.value);
    }
    const handleCancel = () => {
      visible.value = false;
    }
    const confirm = (record: any) => {
      handleDelete(record)
    }
    const handleSearch = () => {
      handleQuery();
    }
    const handleAdd = () => {
      doc.value = {
        id: "",
        parent: "",
        name: "",
        sort: "",
        ebookId:route.params.ebookId
      }

      visible.value = true;
      treeData.value = JSON.parse(JSON.stringify(docs.value));
      treeData.value.unshift({id: 0, name: "无"});
    }
    onMounted(() => {
      handleQuery();
    })

    return {
      docs,
      columns,
      loading,
      visible,
      doc,
      treeData,
      handleQuery,
      handleChange,
      edit,
      handleOk,
      handleCancel,
      confirm,
      handleSearch,
      handleAdd
    };

  }

});
</script>


<style scoped>

</style>