4、cool-admin搜索和新增的修改

---

前言

因为搜索功能还没有，新增按钮不太符合我的需求，所以需要修改一下。

---

一、搜索功能

为了方便，我提前新增了两条数据。可以看到，现在的搜索功能是没有实现的

只需要在后端代码 src/controller/admin/category.ts 中的@CoolController 里加上以下代码即可实现搜索

  pageQueryOp: {
    keyWordLikeFields: ['name'],
  },

完整代码如下：

@CoolController({
 api: ['add', 'delete', 'update', 'info', 'list', 'page'],
 entity: VideoCategoryEntity,
 pageQueryOp: {
   keyWordLikeFields: ['name'],
 },
})

二、新增功能

可以看到自动生成的新增功能是很简陋的，我想要的是新增时可以根据上级分类的名称来选择，分类等级不需要自己填写，选择了上级分类之后自己就可以计算出来。所以现在我们要到前端页面去改造一下。为了后续测试，我们可以再多增几条数据上去。

这是现在的数据，我一共添加了12条

我们可以在前端代码 src/video/view/category.vue中进行修改。
根据官方文档可以很简单进行修改

因此我们的代码可以修改为

  {
      label: "父节点id，根节点为0",
      prop: "categoryList",
      hook: "number",
      component: {
        name: "el-select",
        options: [],
      },
      required: true,
    }

async onOpen() {
    service.video.category.list().then((res) => {
      Upsert.value?.setOptions(
        "categoryList",
        res.map((e) => {
          return {
            label: e.name || "",
            value: e.id,
          };
        })
      );
    });
  },

完成之后效果为

仍然不是很理想，我想要的是类似下列效果

因此我们将代码修改为

<template>
  <cl-crud ref="Crud">
    <cl-row>
      <!-- 刷新按钮 -->
      <cl-refresh-btn />
      <!-- 新增按钮 -->
      <cl-add-btn />
      <!-- 删除按钮 -->
      <cl-multi-delete-btn />
      <cl-flex1 />
      <!-- 关键字搜索 -->
      <cl-search-key />
    </cl-row>

    <cl-row>
      <!-- 数据表格 -->
      <cl-table ref="Table" />
    </cl-row>

    <cl-row>
      <cl-flex1 />
      <!-- 分页控件 -->
      <cl-pagination />
    </cl-row>

    <!-- 新增、编辑 -->
    <cl-upsert ref="Upsert">
      <template #slot-name="{ scope }">
        <el-cascader v-model="value" :options="categoryTree" :props="props" clearable />
      </template>
    </cl-upsert>
  </cl-crud>
</template>

<script lang="ts" name="video-category" setup>
import { ref } from "vue";
import { generateTree } from "../utils";
import { useCrud, useTable, useUpsert } from "@cool-vue/crud";
import { useCool } from "/@/cool";

const { service } = useCool();

const value = ref();
const categoryTree = ref<any>([]);
const props = {
  checkStrictly: true,
};
// cl-upsert
const Upsert = useUpsert({
  items: [
    {
      prop: "parentId",
      label: "上级分类",
      component: {
        name: "slot-name",
        options: [],
      },
    },
    {
      label: "分类名称",
      prop: "name",
      component: { name: "el-input", props: { clearable: true } },
      required: true,
    },
    {
      label: "分类等级",
      prop: "level",
      hook: "number",
      component: { name: "el-input-number" },
      required: true,
    },
    {
      label: "排序号",
      prop: "displayOrder",
      hook: "number",
      component: { name: "el-input-number" },
      required: true,
    },
  ],

  async onOpen() {
    // 设置权限列表
    service.video.category.list().then((res: any) => {
      console.log("res:", res);
      const result = generateTree(res);
      categoryTree.value = result;
    });
  },
});

// cl-table
const Table = useTable({
  columns: [
    { type: "selection" },
    { label: "父节点id，根节点为0", prop: "parentId", minWidth: 140 },
    { label: "分类名称", prop: "name", minWidth: 140 },
    { label: "分类等级", prop: "level", minWidth: 140 },
    { label: "排序号", prop: "displayOrder", minWidth: 140 },
    {
      label: "创建时间",
      prop: "createTime",
      minWidth: 160,
      component: { name: "cl-date-text" },
    },
    {
      label: "更新时间",
      prop: "updateTime",
      minWidth: 160,
      component: { name: "cl-date-text" },
    },
    { type: "op", buttons: ["edit", "delete"] },
  ],
});

// cl-crud
const Crud = useCrud(
  {
    service: service.video.category,
  },
  (app) => {
    app.refresh();
  }
);
</script>

便可实现下列效果