乐趣区

关于前端:vue3开发拒绝cv-快使用curd

jiezi

开发治理后盾根本是企业的日常需要, 根本每个前台我的项目都必有一个后盾我的项目跟着, 尽管是必需品, 然而大家如同有不是那么在意他, 毕竟只有管理员用, 明天咱们讲一下 ” 增删改查 ” 组件:v-curd.

v-curd通过简略的 JSON 配置即可实现残缺的 ” 增删改查 ”.

留神: v-curd 是基于 ant-design-vue 的, 所以更进一步的开发中, 可间接应用 ant 的组件

装置

yarn add v-curd

应用

上面是一个简略的表格, 只须要配置 columns 和done字段.

columns就是 ”ant” 组件库中 table 组件的配置, 用来配置列.

done是 ”v-curd” 定义的字段, 值是个函数, 用来格式化接口返回数据, 函数返回 {total:10,list:[{xx:1}]} 这样的数据表格就会显示.

<script setup lang="ts">
import curd,{defineR} from 'v-curd';
const primaryKey = 'id';
const r = defineR({
  columns: [
    {
      title: 'name',
      dataIndex: 'name',
    },

    {
      title: '操作',
      key: 'operation',
      width: 250,
    },
  ],

  async done() {const { data} = await http('/role');
    return {list: data.list, total: data.total};
  },
});
</script>

<template>
  <curd :primaryKey="primaryKey" :r="r"></curd>
</template>

API

通过配置 ”v-curd” 组件的 ”c/u/r/d“4 个字段实现 ” 增删改查 ”.

primaryKey(主键)

必填项 , ant 中的a-table 须要, 选用数据中的能 ”示意惟一的 id“ 字段即可.

r(读取)

必填项 , 次要配置 ” 表格 ” 和 ” 数据 ”, 这里的表格理论就是🐜ant 的 table 组件, 应用defineR 函数定义.

const r = defineR({
  // 列配置
  columns: [{title: 'name', dataIndex: 'name'}],

  // 筛选条件配置
  conditionItems: [{name: 'name', is: 'a-input'}],

  // 列表接口数据处理
  async done() {const { data} = await http('/user');
    return {list: data.xxList, total: data.xxTotal};
  },
});

查看 ”r” 的残缺文档

c(新增)

非必填 , 用来结构 ” 新建 ” 表单, 用defineC 函数来定义.

const c = defineC({async before() {await Promise.all([getRoleOptions(), getDepartmentOptions(), getPositionOptions()]);
  },
  async done(formData) {const { status, data} = await http.post('/user', formData);
    return [200 === status, data.msg];
  },
  formProps: {labelCol: { span: 2} },
  items: () => [{ is: 'a-input', name: 'userName', label: '账号', rules: [{ required: true, message: '必填项'}] },
    {is: 'a-input', name: 'realName', label: '姓名'},

查看 ”c” 的残缺文档

u(编辑)

非必填 , 用来结构 ” 编辑 ” 表单, 用defineU 函数来定义. 根本和 ”c“ 的配置一样.

查看 ”u” 残缺的文档

d(删除)

非必填 , 用来配置 ” 删除操作 ”, 用defineD 函数来定义. d暂只有一个属性done:

done

必填项 , done 是个函数, 点击 ” 删除 ” 按钮后触发, 函数内须要写申请删除接口的逻辑.

const d = defineD({async done(idList) {
    // 判断 idList 长度辨别是否批量删除
    // 批量删除
    if (1 < idList.length) {const { data, status} = await http.delete('/user/' + idList.join(','));
      return [200 === status, data.msg];
    } else {
      // 删除一条
      const {data, status} = await http.delete('/user/' + idList[0]);
      return [200 === status, data.msg];
    }
  },
});

能够通过 done 的参数来判断是批量删除还是单行删除.

特地留神

  1. done必须是一个返回 ”promise“ 的函数, 也能够用 ”async”, 其返回值也是 ”promise“.
  2. done函数的返回值必须是 [boolean,string?] 格局, “boolean” 用来示意是否操作胜利, “string” 是选填, 是胜利 / 失败后音讯框显示的文字, 如果不填, 不进行音讯显示.
退出移动版