# Lugia组件V2说明

## 使用前配置

```tsx
安装axios element-plus vue3.x版本
npm i '@fatewa/lugia'
或
yarn add '@fatewa/lugia'
```

```tsx
// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import ElementUI from 'element-plus'
import 'element-plus/dist/index.css'
import Lugia from '@fatewa/lugia'

createApp(App)
  .use(ElementUI)
	// 全局注册组件
  .use(Lugia)
  .mount('#app')
```

## 组件内使用

```tsx
<template>
  <Lugia :renderer="renderer" :options="config" />
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { ElementRenderer } from '@fatewa/lugia'
import config from './config.jsx'
export default defineComponent({
  name: 'Test-Index',
  data () {
    return {
      renderer: new ElementRenderer(),
      config
    }
  }
})
</script>

<style scoped>

</style>

```



## provider 配置详解

### lang 配置

配置整体所有功能按钮的语言配置(不填默认内置语言)

| 字段名      | 类型   | 描述                 |
| ----------- | ------ | -------------------- |
| filter      | String | 搜索按钮文字配置     |
| resetFilter | String | 重置搜索按钮文字配置 |
| create      | String | 新建按钮文字配置     |
| update      | String | 编辑按钮文字配置     |
| delete      | String | 删除按钮文字配置     |
| operation   | String | 操作列列名文字配置   |

### features 配置

配置分页、新建、编辑、删除功能是否存在(不填默认所有功能都有)

| 参数   | 类型    | 描述         |
| ------ | ------- | ------------ |
| page   | Boolean | 分页是否存在 |
| create | Boolean | 新建是否存在 |
| update | Boolean | 编辑是否存在 |
| delete | Boolean | 删除是否存在 |

### adapters 配置

配置全局的http请求适配器、response响应适配器、page分页适配器

| 参数     | 类型        | 描述                                 |
| -------- | ----------- | ------------------------------------ |
| http     | BaseAdapter | AbstractHttpAdapter 抽象类的实现     |
| response | BaseAdapter | AbstractResponseAdapter 抽象类的实现 |
| page     | BaseAdapter | AbstractPageAdapter 抽象类的实现     |



### provider 使用示例

```tsx
import Lugia, {Provider} from '@fatewa/lugia'

Lugia.provider({
    // 全局语言配置 不填默认内置语言
    lang: {
        filter: '搜索',
        resetFilter: '重置',
        create: '新建',
        update: '编辑',
        delete: '删除',
        // 操作列名
        operation: '操作'
    },
    // 全局功能配置 不填默认所有功能都有
    features: {
        page: true,
        create: true,
        update: true,
        delete: true
    },
    // 全局适配器配置 不填默认内置adapter
    adapters: {
      http: new CustomHttpAdapter(),
      response: new CustomResponseAdapter(),
      page: new CustomPageAdapter()
    }
} as Provider)
```

## 组件配置详解

### props 参数

- **options: 组件参数配置项**
- **renderer: UI渲染器实例**

#### options参数说明

| 字段名    | 类型             | 描述                             |
| --------- | ---------------- | -------------------------------- |
| templates | Array            | 表格字段信息的描述               |
| baseURL   | String           | 请求的基础地址信息               |
| dic       | Array            | 需要使用的字典数据配置           |
| api       | String \| Object | 接口的请求路径                   |
| lang      | Object           | 组件内文字配置                   |
| features  | Object           | 组件内功能开启/关闭配置          |
| adapters  | Object           | 对http、response、page参数做适配 |
| table     | Object           | 表格属性配置                     |
| operation | Object           | 表格操作列属性配置               |

##### templates: Array 参数说明

- **text: String**  表格中展示的列名，新增或修改时展示的中文描述

- **field: String**  表格中绑定的列字段名，新增或修改时绑定的字段名

- **group: Object**  对筛选或新增或修改时，展示的字段在一行内占据的宽度配置，参数为filter，edit

  | 字段名 | 类型   | 描述             |
    | ------ | ------ | ---------------- |
  | filter | Number | 不写默认 3       |
  | edit   | Number | 不写默认占据一行 |

- **alias: Object**  字段参数的别名

  | 字段名 | 类型   | 描述             |
    | ------ | ------ | ---------------- |
  | create | String | 新增时的参数名   |
  | update | String | 更新时的参数名   |
  | filter | String | 筛选时的参数名   |
  | query  | String | 表格展示的参数名 |

- **filter: Object**  筛选配置

  | 字段名      | 类型   | 描述                                                         |
    | ----------- | ------ | ------------------------------------------------------------ |
  | tactics     | String | 可选值 'eq' \| 'like' \| 'lt' \| 'gt \| 'lte' \| 'gte' \| 'between' |
  | placeholder | String | input输入框的占位符                                          |

- **column: Object**  表格列参数配置(目前适配el-table-column的配置参数)

- **visible: Object**  对筛选、新增、修改、表格展示的显示控制，参数为filter，update、create、query

  | 字段名 | 类型    | 描述                         |
    | ------ | ------- | ---------------------------- |
  | filter | Boolean | 不写默认没有该字段的筛选功能 |
  | create | Boolean | 不写默认该字段可新增         |
  | update | Boolean | 不写默认该字段可修改         |
  | query  | Boolean | 不写默认该字段展示           |

- **renderer: Object**  自定义渲染组件，针对新增、修改、筛选、表格展示，参数为filter，update、create、query

    - 当参数为**String**类型时可选值有 'input' | 'select' | 'radio' | 'checkbox' | 'date' | 'datetime' | 'textarea'
    - ElementEnum 是一个枚举类，提供了对应String类型的枚举值(**推荐使用**)，**详细介绍请看枚举renderer**

  | 字段名 | 类型                              | 描述                          |
    | ------ | --------------------------------- | ----------------------------- |
  | create | Function \| String \| ElementEnum | 函数类型必须return一个dom元素 |
  | filter | Function \| String \| ElementEnum | 函数类型必须return一个dom元素 |
  | update | Function \| String \| ElementEnum | 函数类型必须return一个dom元素 |
  | query  | Function \| String \| ElementEnum | 函数类型必须return一个dom元素 |

    - 回调函数参数为h，row

- **rules: Array**  配置字段新增修改时的校验规则（使用可参照**element-plus**重表单验证的使用方式）

  | 字段名    | 类型     | 描述                                                         |
    | --------- | -------- | ------------------------------------------------------------ |
  | type      | String   | 可选参数'string' \| 'number' \| 'boolean' \| 'array' \| 'date' \| 'url' \| 'email' |
  | required  | Boolean  | 是否必填 true是 false否                                      |
  | message   | String   | 错误提示信息                                                 |
  | trigger   | String   | 触发方式，可选值'blur' \| 'change'                           |
  | min       | Number   | 最小                                                         |
  | max       | Number   | 最大                                                         |
  | validator | Function | 自定义验证函数                                               |


##### api 参数配置详解

- **当api值为String时**，我们默认了CRUD四个接口，统一使用统一地址

- **当api值为Object**，参数为filter，update、create、query

  | 字段名 | 类型   | 描述                            |
    | ------ | ------ | ------------------------------- |
  | filter | Object | 筛选接口配置，参数为uri，method |
  | create | Object | 创建接口配置，参数为uri，method |
  | update | Object | 编辑接口配置，参数为uri，method |
  | query  | Object | 删除接口配置，参数为uri，method |

##### lang: Object 参数配置详解

| 字段名      | 类型   | 描述                   |
| ----------- | ------ | ---------------------- |
| create      | String | 新增按钮文字配置       |
| operation   | String | 表格操作列表头文字配置 |
| filter      | String | 搜索按钮文字配置       |
| resetFilter | String | 重置按钮文字配置       |
| update      | String | 编辑按钮文字配置       |
| delete      | String | 删除按钮文字配置       |

##### features: Object 参数配置详解

| 字段名 | 类型    | 描述         |
| ------ | ------- | ------------ |
| create | Boolean | 是否开启创建 |
| page   | Boolean | 是否开启分页 |
| update | Boolean | 是否开启编辑 |
| delete | Boolean | 是否开启删除 |

##### adapters: Object 参数配置详解

- http  **AbstractHttpAdapter**类的实现类的实例，**详情请见示例**
- response  **AbstractResponseAdapter**类的实现类的实例，**详情请见示例**
- page  **AbstractPageAdapter**类的实现类的实例，**详情请见示例**

##### dic: Array 参数配置详解

| 字段名  | 类型                 | 描述                            |
| ------- | -------------------- | ------------------------------- |
| key     | String               | 与templates中关联的字段的参数名 |
| options | String \| DicOptions | 字典数据的配置                  |

- **当options值为String时**，参数**必须为字典接口地址**我们默认请求这个地址获取字典数据

- **当options值为DicOptions**，参数为url，label、value、data，**详细配置请看完整配置**

DicOptions 类型介绍

| 字段名 | 类型   | 描述               |
| ------ | ------ | ------------------ |
| url    | String | 字典数据的请求地址 |
| label  | String | 对应显示的字段名   |
| value  | String | 对应选择的字段名   |
| data   | Array  | 自定义的字典数据   |

## 插槽

- **header插槽**

  ```vue
  <Lugia ref="lugia" :options="ProdTmpl" :renderer="renderer">
    <template v-slot:header>
  		<el-button>详情</el-button>
    </template>
  </Lugia>
  ```

  **备注：**刷新表格请使用ref调用组件的query方法

- table插槽

  ```vue
  <Lugia ref="lugia" :options="ProdTmpl" :renderer="renderer">
    <template v-slot:table="row">
      <el-button>详情</el-button>
      <el-button>详情</el-button>
    </template>
  </Lugia>
  ```

  **备注：**row为表格当前行的数据。刷新表格请使用ref调用组件的query方法

## 自定义renderer实现

通过**templates**配置中的**renderer**参数用户可自定义配置需要渲染的的dom或组件

- 组件内部在接受到传入的**options**配置后，在执行**render函数**中，将循环**templates**中的每一项，先会检查**visible**中的参数是否为true或undefined
    - 是, 将会判断**renderer参数**重是否存在对应的自定义dom
        - 否, 将会渲染成输入框
        - 是, 将会在执行**render**的过程中使用**执行自定义render，渲染自定义dom**
    - 否, 将不会对此字段执行渲染

## 枚举类 ElementEnum

v2.0版本我们新增了一部分表单的枚举值，用于自定义renderer中，保存在**枚举类ElementEnum**中，值如下：

- INPUT：输入框表单
- SELECT：下拉选择框表单
- RADIO：单选框组表单
- CHECKBOX：多选框组表单
- DATE：日期选择器表单
- DATE_TIME：日期时间选择器表单
- TEXTAREA：文本域表单

具体使用请看完整配置

## 完整配置

```tsx
import {
    ElementEnum,
    SampleHttpAdapter,
    SamplePageAdapter,
    SampleResponseAdapter,
    TemplateConfiguration
} from "@fatewa/lugia";

export default {
    // 基础api地址
    baseURL: 'http://127.0.0.1:3000/v1/api',
    // 接口api配置 第一种
    // api: '/sjl',
    // 接口api配置 第二种
    api: {
        query: {
            method: 'get',
            uri: '/sjl'
        },
        create: {
            method: 'post',
            uri: '/sjl'
        },
        update: {
            method: 'patch',
            uri: '/sjl'
        },
        delete: {
            method: 'delete',
            uri: '/sjl'
        }
    },
    // 字典数据配置 第一种
    // dic: [
    //     {
    // templates 未设置 alias别名 同filed字段
    //         key: 'type_id',
    //         options: '/sjl/all/type'
    //     }
    // ],
    // 字典数据配置 第二种
    // dic: [
    //     {
    //         key: 'type_id',
    //         options: {
    //             url: '/sjl/all/type'
    //         }
    //     }
    // ],
    // 字典数据配置 第三种 映射绑定字段 label默认name value默认id
    // dic: [
    //     {
    // templates 未设置 alias别名 同filed字段
    //         key: 'type_id',
    //         options: {
    //             url: '/sjl/all/type',
    //             label: 'name',
    //             value: 'id'
    //         }
    //     }
    // ],
    // 字典数据配置 第四种 label默认name value默认id
    // dic: [
    //     {
    // templates 未设置 alias别名 同filed字段
    //         key: 'type_id',
    //         options: {
    //             data: [
    //                 {
    //                     name: '测试',
    //                     id: 1
    //                 }
    //             ]
    //         }
    //     }
    // ],
    // 字典数据配置 第五种
    dic: [
        {
            // templates 未设置 alias别名 同filed字段
            key: 'type_id',
            options: {
                label: 'label',
                value: 'code',
                data: [
                    {
                        label: '测试',
                        code: 1
                    }
                ]
            }
        }
    ],
    // 表格配置项 目前适配的element-plus的表格属性 字段名驼峰式
    table: {
        width: '50%',
        border: true
    },
    // 操作列的配置 目前适配的element-plus的table-column属性 字段名驼峰式
    operation: {
        fixed: 'right',
        width: 200
    },
    // 组件功能配置
    features: {
        page: true,
        create: true,
        update: true,
        delete: true
    },
    // 组件内语言的配置
    lang: {
        filter: '搜索',
        resetFilter: '重置',
        create: '新建',
        update: '编辑',
        delete: '删除',
        // 操作列名
        operation: '操作'
    },
    // 适配器配置
    adapters: {
        // http请求适配器 需要传入请求基础路径 不传默认当前项目的访问地址
        http: new SampleHttpAdapter('http://127.0.0.1:3000/v1/api'),
        // 分页参数适配器
        page: new SamplePageAdapter(),
        // response参数适配器
        response: new SampleResponseAdapter()
    },
    // 模版配置
    templates: [
        {
            // 字段展示名称
            text: '姓名',
            // 字段名
            field: 'name',
            // 是否可见
            visible: {
                // 筛选时 不配置默认false
                filter: true,
                // 展示时 不配置默认为true
                query: true,
                // 新增时 不配置默认为true
                create: true,
                // 修改时 不配置默认为true
                update: true
            },
            // 别名配置
            alias: {
                // 筛选时
                filter: 'name',
                // 展示时
                query: 'name',
                // 新增时
                create: 'name',
                // 修改时
                update: 'name',
            },
            // 表格列配置 目前适配的element-plus的table-column属性 字段名驼峰式
            column: {
                width: '150px'
            },
            // 字段校验规则配置 目前适配的element-plus
            rules: [
                { required: true, message: '姓名不能为空', trigger: 'blur' }
            ],
            // 字段是否一行展示
            group: {
                // 筛选时
                filter: 4,
                // 新增或修改时
                edit: 11
            },
            // 筛选配置
            filter: {
                // 筛选方式
                tactics: 'eq',
                // 输入框的提示文字
                placeholder: '请输入名称筛选'
            },
            /**
             * h 渲染函数
             * row 当前行绑定数据
             * dict 字典数据
             * (h, row, dict) => {}
             */
            renderer: {
                // 函数式自定义
                create: (h: any, row: any, dict: any[]) => {
                    return (<el-input v-model={row.name}/>)
                },
                // 枚举类型 INPUT SELECT RADIO DATE DATE_TIME CHECKBOX TEXTAREA
                update: ElementEnum.INPUT,
                // 字符串 'input' | 'select' | 'radio' | 'checkbox' | 'date' | 'datetime' | 'textarea'
                filter: 'select'
            }
        }
    ]
} as TemplateConfiguration

```