https://github.com/holyhigh2/cruda-element-plus

A Cruda adapter for element-plus
https://github.com/holyhigh2/cruda-element-plus

Last synced: 8 days ago
JSON representation

A Cruda adapter for element-plus

• Host: GitHub
• URL: https://github.com/holyhigh2/cruda-element-plus
• Owner: holyhigh2
• License: mit
• Created: 2023-02-03T16:12:06.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2024-02-26T14:30:49.000Z (10 months ago)
• Last Synced: 2024-12-19T00:11:45.245Z (9 days ago)
• Language: TypeScript
• Size: 30.3 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# cruda-element-plus

A Cruda adapter for element-plus.

## Demo

- [element-plus](https://stackblitz.com/edit/cruda-element-plus?file=src%2FApp.vue)

## Usage

### 1. Install

```js

// Usually init cruda in main.js

import request from 'axios'

import CRUD from 'cruda-element-plus'

// set requester

createApp(App).use(CRUD, { request: request })

```

### 2. Activate

```html

  import { useCrud } from 'cruda-element-plus'

  //通过useCrud函数获取$crud实例

  //对象方式激活时与element-ui行为一致

  const $crud = useCrud('/api/single')

  

  //Reload on mounted 

  onMounted(() => {

    $crud.reload()

  })

```

You can pass custom parameters to Cruda besides the URL when you activate it in object form

```js

const $crud = useCrud({url:'/api/single',permission:'a_b_c'}) object way

```

then you can read it via `params`

```js

this.$crud.params.permission

```

that's very useful if you want to do additional UI control like Auth

### 3. Multi-instance

```html

  import { useCruds } from 'cruda-element-plus'

  const $cruds = useCruds({

    t1: '/api/single',

    t2: {

      url: '/api/multiple',

    },

  })

  //Reload instance 't1' on mounted 

  onMounted(() => {

    $cruds.t1.reload()

  })

```

```html

  import { useCruds } from 'cruda-element-plus'

  const $cruds = useCruds({

    t1: {

      url:'/api/single',

      query:{type:'1'}

    },

    t2: {

      url: '/api/single',

      query:{type:'2'}

    },

  })

  //Reload instance 't1' with '?type=1' on mounted 

  onMounted(() => {

    //Same paramters will merged into query string

    $cruds.t1.reload({type:3})

  })

```

### 4. HOOK

```html

  import CRUD, { onHook } from 'cruda-element-plus'

  const $crud = useCrud()

  onHook(CRUD.HOOK.AFTER_SUBMIT, (crud) => {

    ElNotification.success('提交成功')

    crud.toQuery()

  })

```

### 5. CRUD component

The first thing you create a CRUD component is to get `$crud`. Use `lookUpCrud()` to get that then you can do other business like do queries, toggle views and so on

```html

   $crud.changeSort(o)">

    

    

    

    

      

        Edit

        Delete

      

    

  

  import { lookUpCrud } from 'cruda-element-plus'

  // In element-plus, the lookUpCrud has only one optional argument `crudName`

  const $crud = lookUpCrud()

  function toDelete(row: Record<string, any>) {

    ElMessageBox.confirm('确认删除?').then(() => {

      $crud.toDelete(row)

    })

  }

```

### 6. URL params

Cruda supports URL param by **`:varName`** which makes you can build dynamic URLs. See below 

```html

  import { useCruds } from 'cruda-element-plus'

  const $cruds = useCruds({

    org: '/api/orgs',

    //param 'orgId' is used in 'user' instance

    user: '/api/orgs/:orgId/users'

  })

  //fill the param

  function setOrg(orgId){

    this.$cruds.user.setURLParams({orgId})

    this.$cruds.user.toQuery()

  }

```

## Exportable

```js

import CRUD,{...} from 'cruda-element-plus'

```

- useCrud(restURL) : CRUD

  > return a single instance 

- useCruds(restURLMap) : Record

  > return a multi instance map 

- lookUpCrud(crudName?) : CRUD | null

  > look up the nearest crud instance then return

- onHook(hookName,hook) : void

  > register a hook

## Cruda

CRUD API please to [Cruda](https://github.com/holyhigh2/cruda)