@fatewa/lugia

使用前配置

安装axios element-plus vue3.x版本

npm i '@fatewa/lugia'

或

yarn add '@fatewa/lugia'

// 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')

组件内使用

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

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

<style scoped>

</style>

Provider 全局配置函数使用

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

Lugia.provider({
    // 全局语言配置
    lang: {
        filter: '搜索',
        resetFilter: '重置',
        create: '新建',
        update: '编辑',
        delete: '删除',
        // 操作列名
        operation: '操作'
    },
    // 全局功能配置
    features: {
        page: true,
        create: true,
        update: true,
        delete: true
    },
    // 全局适配器配置
    adapters: {}
} as Provider)

完整配置

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: 'put',
            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