# Scheme 方案

Scheme是一个数据驱动的解决方案，通过既定的业务配置参数，生成可模块化编辑的`CURD`业务视图

## 基础用法

配置一个数据项列表快速生成一个增删改查业务视图

::: snippet 使用`list`属性设置数据源，列表项中的`type`指定组件类型，其它包括**Form**、**Detail**、**Search**组件的配置参数格式

```html
<template>
  <eagle-scheme v-model="tableData" :list="list"></eagle-scheme>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '产品A', code: 'P0001', type: 'NORMAL', sort: 0, status: '0' },
        { name: '产品B', code: 'P0002', type: 'BROKEN', sort: 1, status: '1' },
        { name: '产品C', code: 'P0003', type: 'NORMAL', sort: 0, status: '0' },
        { name: '产品D', code: 'P0004', type: 'BROKEN', sort: 1, status: '1' },
      ],
      list: [
        { type: 'el-input', key: 'name', label: '名称', rules: [{ required: true, message: '请输入名称' }] },
        { type: 'el-input', key: 'code', label: '编码', rules: [{ required: true, message: '请输入编码' }], exclude: 'search' },
        { type: 'el-input', key: 'type', label: '类型' },
        { type: 'el-input-number', key: 'sort', label: '排序', include: ['form', 'table'], sortable: true },
        { type: 'el-input', key: 'status', label: '状态' },
      ],
    }
  },
}
</script>
```

:::

## API快速配置

传入CURD对应API的Promise方法及URL地址，返回指定格式的结果

::: snippet 配置`option`参数设置组件配置项，其中`$http`为配置好拦截器的支持Promise的http框架、`url`基础url地址

```html
<template>
  <eagle-scheme :list="list"
    :option="{ $http: $axios, url: 'product', currPageAlias: 'page', pageSizeAlias: 'size', totalCountAlias: 'total' }">
  </eagle-scheme>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { type: 'el-input', key: 'name', label: '产品名称' },
        { type: 'el-input', key: 'type', label: '类型' },
        { type: 'el-input', key: 'status', label: '状态' },
        { type: 'el-input', key: 'remark', label: '备注', span: 24, exclude: 'search', minWidth: 200, 'show-overflow-tooltip': true,
          props: { type: 'textarea', rows: 5 },
        },
      ],
    }
  },
  methods: {
  }
}
</script>
```

:::

## API配置

传入CURD对应API的Promise方法，返回指定格式的结果

::: snippet 配置`option`参数设置组件配置项，**searchAPI**查询、**detailAPI**查询详情、**getAPI**编辑查询数据、**deleteAPI**删除、**newAPI**新增保存、**editAPI**编辑保存

```html
<template>
  <eagle-scheme :list="list" :option="{ currPageAlias: 'page', pageSizeAlias: 'count', searchAPI, detailAPI: getAPI, getAPI }"></eagle-scheme>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { type: 'el-input', key: 'name', label: '昵称' },
        { type: 'el-input', key: 'passtime', label: '时间' },
        { type: 'el-input', key: 'text', label: '段子', span: 24, exclude: 'search', minWidth: 300, 'show-overflow-tooltip': true,
          props: { type: 'textarea', rows: 5 },
        },
      ],
    }
  },
  methods: {
    async searchAPI(param) {
      return await this.$axios.get('https://api.apiopen.top/getJoke', { params: { ...param, type: 'text' } })
        .then((response) => {
          const { result = [], totalCount = 100 } = response;
          return { result, totalCount };
        });
    },
    async getAPI(param) {
      return await this.$axios.get('https://api.apiopen.top/getSingleJoke', { params: { sid: param.sid } })
        .then((response) => {
          const { result = {} } = response;
          return result;
        });
    },
  }
}
</script>
```

:::

## API

## Attribute 属性

参数|说明|类型|可选值|默认值
-|-|-|-|-
value / v-model |	绑定值 | Array | - | []
list | 表单项配置列表 | Array | - | []
searchScheme | search域做配置 | Object | - | -
formScheme | form域做配置 | Object | - | -
tableScheme | table域做配置 | Object | - | -
其它参数 | 同时包含Form、Table、Search、Detail配置项的参数 | - | - | -

## Methods 方法

方法名|说明|参数
-|-|-
setModelValue | 设置表单值 | model
setDialog | 打开并设置弹出框模式 | { title, type, model }

## Events 事件

事件名称|说明|回调参数
-|-|-
change | 表单model发生变化时触发 | model对象
dialog-change | 设置弹出框类型或类型变化时触发 | dialogType
selection | 选中表格内容时触发 | selection