Vue3 development rejects cv, quickly use crud

The development and management background is basically the daily needs of the enterprise. Basically, every front-end project must have a back-end project to follow. Although it is a necessity, everyone seems to not care about it. After all, it is only used by administrators. Today we will talk about "add, delete, modify and check" "Component: crud-vue .

crud-vue Complete "add, delete, modify and check" can be realized through simple JSON configuration.

Note : crud-vue is based on ant-design-vue, so in further development, ant components can be used directly

Install

 yarn add crud-vue

use

Below is a simple form, only need to configure columns and done fields.

columns is the configuration of the table component in the "ant" component library, which is used to configure the columns.

done is a field defined by "crud-vue", the value is a function, used to format the data returned by the interface, the function returns {total:10,list:[{xx:1}]} This data table will be displayed.

 <script setup lang="ts">
import crud,{defineR} from 'crud-vue';
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>
  <crud :primaryKey="primaryKey" :r="r"></crud>
</template>

API

By configuring the " c/u/r/d " 4 fields of the "crud-vue" component, "add, delete, modify and check" is realized.

primaryKey (primary key)

Required , a-table in ant is required, just select the field that can " represent a unique id " in the data.

r (read)

Required , mainly configure "table" and "data", the table here is actually the table component of 🐜ant, using defineR function definition.

 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 };
  },
});

View "r"'s full documentation

c (new)

Optional, used to construct a "new" form, defined with the --- 435d94ad92a367e6c9cc38bd829da997 defineC function.

 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: '姓名' },

View "c"'s full documentation

u(edit)

Optional, used to construct an "edit" form, defined with the --- 5e683ed780a99e384704c4e719d83411 defineU function. Basically the same configuration as " c ".

View "u" full documentation

d (delete)

Not required , it is used to configure "delete operation", which is defined by the defineD function. d There is only one attribute done :

done

The required field, done is a function, which is triggered after clicking the "Delete" button, and the logic of requesting the deletion of the interface needs to be written in the function.

 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];
    }
  },
});

You can use the done parameter to determine whether to delete a batch or a single row.

pay attention

1. done must be a function that returns " promise ", you can also use "async", and its return value is also " promise ".
2. done The return value of the function must be [boolean,string?] format, "boolean" is used to indicate whether the operation is successful, "string" is optional, it is the text displayed in the message box after success/failure, If not filled, no message will be displayed.