vue3setup语法糖+ts pure-admin后台开发基本使用

第一次使用pure-admin 包括列列表 搜索 重置 新增编辑删除功能 

index.vue中写的是列表里面的内容
<script setup lang="ts">
import { ref } from "vue";
//这个先不用管是什么
import { useDepartment } from "./utils/hook";
//pure的列表相当于
import { PureTableBar } from "@/components/RePureTableBar";
//pure封装的图标使用下面那几个都是图标
import { useRenderIcon } from "@/components/ReIcon/src/hooks";

import AddFill from "@iconify-icons/ri/add-circle-line";
import Delete from "@iconify-icons/ep/delete";
import EditPen from "@iconify-icons/ep/edit-pen";
import Search from "@iconify-icons/ep/search";
import Refresh from "@iconify-icons/ep/refresh";
import FolderOpened from "@iconify-icons/ep/folder-opened"; // 列表

defineOptions({
  // name 作为一种规范最好必须写上并且和路由的name保持一致
  name: "Department"
});
const {
  form,
  columns,
  dataList,
  handleDelete,
  handleSizeChange,
  handleSelectionChange,
  handleCurrentChange,
  pageTitle,
  pagination,
  onSearch,
  loading,
  resetForm,
  // 编辑删除新增
  openDialog
} = useDepartment();  //这个是功能页导出的useDepartment 然后在这个页面里面接收
const tableRef = ref();
const formRef = ref();
</script>
<template>
  <div class="main">
    <el-form
      class="bg-bg_color w-full px-4 pt-[18px] overflow-hidden"
      :inline="true"
      ref="formRef"
      :model="form"
    >
      <el-form-item label="关键字" prop="name">
        <el-input
          class="!w-[200px]"
          placeholder="请输入"
          clearable
//用于搜索
          v-model="form.name"
        />
      </el-form-item>
      <el-form-item
        ><el-button
          type="primary"
          :icon="useRenderIcon(Search)"
          @click="onSearch"
          :loading="loading"
          >搜索</el-button
        >
        <el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
          重置
        </el-button>
      </el-form-item>
    </el-form>

    <PureTableBar :columns="columns" @refresh="onSearch" :loading="loading">
      <template #title>
        <div class="flex items-center">
          <I