framework / eagle-web-toolkit

scheme.md 11.5 KB

Scheme 方案

Scheme是一个数据驱动的解决方案，通过既定的业务配置参数，生成可模块化编辑的CURD业务视图。本组件核心是将一个list解析为Search、Table、Form三个组件的配置项，再将这几个组件组合使用。

58dc1f766b322e4fb613a73bb5457c60d2252618/examples/views/docs/component/scheme.md#">基础用法

配置一个数据项列表快速生成一个增删改查业务视图，默认为静态数据维护。

::: snippet 使用list属性设置数据源，列表项中的type指定组件类型，其它参数包括Form、Table、Search组件的配置参数格式。可以使用include和exclude设置需要包括或者排除在哪个组件中，支持String和Array，不传则表示默认存在所有组件中。

<template>
  <eagle-scheme v-model="tableData" :list="list">
    <el-table-column type="selection" min-width="40"></el-table-column>
  </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: '类型', include: ['table', 'form'] },
        { type: 'el-input-number', key: 'sort', label: '排序', include: 'form', sortable: true },
        { type: 'el-input', key: 'status', label: '状态' },
      ],
    }
  },
}
</script>

:::

58dc1f766b322e4fb613a73bb5457c60d2252618/examples/views/docs/component/scheme.md#">表单分组

与Form组件配置类似，将表单分组显示。

::: snippet 组件formProps设置表单参数，在配置项属性中设置group参数配置分组。

<template>
  <eagle-scheme v-model="tableData" :list="list" :formProps="{ collapse: true }"></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: '类型', include: ['table', 'form'], group: '其它信息' },
        { type: 'el-input-number', key: 'sort', label: '排序', include: 'form', sortable: true, group: '其它信息' },
        { type: 'el-input', key: 'status', label: '状态', group: { key: 'sys', icon: 'edit-outline', label: '系统信息' } },
      ],
    }
  },
}
</script>

:::

58dc1f766b322e4fb613a73bb5457c60d2252618/examples/views/docs/component/scheme.md#">动态列

设置表格列可以动态的控制显示状态

::: snippet option中设置dynamicColumn: true即可

<template>
  <eagle-scheme v-model="tableData" :list="list" :option="{ dynamicColumn: true }"></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: '名称' },
        { type: 'el-input', key: 'code', label: '编码' },
        { type: 'el-input', key: 'type', label: '类型' },
        { type: 'el-input-number', key: 'sort', label: '排序' },
        { type: 'el-input', key: 'status', label: '状态' },
      ],
    }
  },
}
</script>

:::

58dc1f766b322e4fb613a73bb5457c60d2252618/examples/views/docs/component/scheme.md#">弹出框类型

设置编辑表格时弹出框的类型

::: snippet 设置dialogComponent，默认为el-dialog，若设置为el-drawer，则可在dialogProps中可以设置direction弹出方向。

<template>
  <eagle-scheme v-model="tableData" :list="list" dialogComponent="el-drawer" :dialogProps="{ direction: 'rtl' }"></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: '名称' },
        { type: 'el-input', key: 'code', label: '编码' },
        { type: 'el-input', key: 'type', label: '类型' },
        { type: 'el-input-number', key: 'sort', label: '排序' },
        { type: 'el-input', key: 'status', label: '状态' },
      ],
    }
  },
}
</script>

:::

58dc1f766b322e4fb613a73bb5457c60d2252618/examples/views/docs/component/scheme.md#">自定义内容

与Form、Table、Search组件相同，可以在Scheme中设置具名插槽替换相关组件。

::: snippet 配置Form组件的插槽有：form-key表单分组、form-item-key表单项、form-label-key表单项标题；配置Table组件的插槽有：table-value-key表格值渲染插槽、table-key表格列插槽、table-append表格后置列追加、table-operation表格操作栏自定义、table-operation-btn-edit表格编辑按钮自定义、table-operation-btn-append表格操作栏按钮追加；配置Search组件的插槽有：search-key搜索表单项；配置Detail组件的插槽有：view-key详情分组、view-item-key详情项；其它插槽有：action-bar按钮栏自定义、action-button按钮追加、action-btn-new新增按钮自定义、render-key表格和详情表单渲染插槽、field-key搜索表单和编辑表单项渲染插槽

<template>
  <eagle-scheme v-model="tableData" :list="list">
    <template #field-type="{ model }">
      <el-select v-model="model.type">
        <el-option value="NORMAL" label="正常"></el-option>
        <el-option value="BROKEN" label="已损坏"></el-option>
      </el-select>
    </template>
    <template #render-type="{ value, row }">
      <el-tag :type="value === 'BROKEN' ? 'danger' : 'success'">
        {{ value === 'BROKEN' ? '已损坏' : '正常' }}
      </el-tag>
    </template>
    <template #view-item-code="{ value }">
      <el-tag size="small">{{ value }}</el-tag>
    </template>
    <template #form-item-status="{ model }">
      <el-input-number v-model="model.status" :min="0" :max="1" />
    </template>
  </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: '名称' },
        { type: 'el-input', key: 'code', label: '编码' },
        { type: 'el-input', key: 'type', label: '类型' },
        { type: 'el-input-number', key: 'sort', label: '排序' },
        { type: 'el-input', key: 'status', label: '状态', formatter: (r, c, v) => v === '1' ? '启用' : '禁用' },
      ],
    }
  },
}
</script>

:::

API快速配置

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

::: snippet 配置option参数设置组件配置项，其中$http为配置好拦截器的支持Promise的http框架、url基础url地址。currPageAlias分页当前页别名、pageSizeAlias分页每页数据量别名、totalCountAliasresponse返回分页条件中总数据量的别名。API交互逻辑处理见说明

<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编辑保存

<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

List 表单项配置列表

参数|说明|类型|可选值|默认值 -|-|-|-|- include | 包含在哪些组件中 | String,Array | - | ['search', 'table', 'form'] exclude | 不包含在哪些组件中 | String,Array | - | [] 其它参数 | 同时包含Form、Table、Search、Detail配置项的参数 测试 | - | - | -