jk-assembler 2.1.0

基于配置快速实现管理系统中搜索、表格、表单、分页功能。 基于vue2版本的 element-ui 库进行的二次封装的动态组件

快速使用

• 全局引用注册

import JKAssembler from 'jk-assembler';
Vue.use(JKAssembler);

• 按需引用

 # developing

集成组件

| 组件名称 | 组件描述 | 组件使用方式 | | --------------------- | --------------------------- | ------------------------------ | | JkAssembler | 集成表单 | 查看 | | JkAssemblerFilter | 集成表单-搜索组件 | 查看 | | JkAssemblerTable | 集成表单-表格组件 | 查看 | | JkAssemblerForm | 集成表单-表单组件 | 查看 | | JkAssemblerFormPanel | 集成表单-表单组件(弹窗模式) | 查看 | | JkAssemblerPagination | 集成表单-分页组件 | 查看 | | JkAssemblerDynamic | 集成表单-分页组件 | 查看 |

JkAssembler

属性值

| 属性名称 | 属性描述 | 类型 | 默认值 | | --------------- | ------------------ | -------- | ------ | | config | 集成注册器的设置项 | Function | ()=>{} | | padding | 是否设置内边距 | Boolean | true | | immediatelyPull | 是否立即开始查询 | Boolean | true |

config 属性

| 属性名称 | 属性描述 | 类型 | 默认值 | 配置详情 | | -------- | ------------------------ | ------ | ------ | ----------------- | | search | 检索方法和自定义检索条件 | Object | {} | 查看 | | filter | 检索配置 | Object | {} | 查看 | | table | 表格配置 | Object | {} | 查看 | | form | 表单配置 | Object | {} | 查看 |

示例

<template>
  <jk-assembler :config="config" />
</template>
<script>
export default {
  data() {
    return {
      config: baseConfig.bind(this)
    };
  }
};
</script>

配置属性

const config = {
  search: {
    // 默认检索参数
    default: {},
    // 数据索引
    structure: {
      page: 'page',
      size: 'size',
      total: 'total',
      data: 'data'
    },
    handle: query => {
      console.log('query: ', query);
    }
  },

  filter: {},
  formPanel: {},
  form: {},
  table: {},
  pagination: {
    // sizes: [],
    // hideSingle: false
  }
};

JkAssemblerFilter

属性值

| 属性名称 | 属性描述 | 类型 | 默认值 | | --------- | ------------------- | --------------- | ------ | | props | Filter 表单属性配置 | Object,Function | {} | | events | Filter 表单方法 | Object,Function | {} | | operation | Filter 按钮配置 | Array | [] | | columns | Filter 检索条件 | Array | [] |

示例

const filter = {
  value: {}, // 绑定数据源，推荐使用 v-model
  props: {}, // 表单基础属性
  events: ({ value, data }) => {}, // 表单事件
  columns: [
    {
      prop: '',
      label: '',
      props: ({ data }) => ({}),
      permission: ({ data }) => false, // 这个是无权限 返回值为 true false
      ifVisible: ({ data }) => true, // 是否显示 返回值为 true false

      // 开启组件模式
      component: {
        is: '',
        props: ({ data }) => ({}),
        events: ({ value, data }) => {}
      },

      render: (h, { value, data, rows, index }) => {}
    }
  ],
  operation: {
    add: {
      label: '',
      props: {},
      handle: ({ data }) => {}
    },
    search: {
      label: '',
      props: {},
      handle: ({ data }) => {}
    },
    butns: []
  }
};

JkAssemblerTable

属性值

| 属性名称 | 属性描述 | 类型 | 默认值 | | --------- | ----------------------------------- | ------------ | ------ | | data | 绑定的数据 | Array | [] | | props | 表格中可以 bind 的所有值 | Object,Array | {} | | events | 表格中可以 bind 的所有 Table Events | Object,Array | {} | | columns | 表格列表项声明 | Array | [] | | operation | 表格默认操作项 -- 按钮组 | Array | [] |

示例

const table = {
  data: [],
  props: {},
  events: {},
  columns: [
    {
      prop: '',
      label: '',
      props: ({ data }) => ({}),
      permission: ({ data }) => false, // 这个是无权限 返回值为 true false
      ifVisible: ({ data }) => true, // 是否显示 返回值为 true false
      // 开启组件模式
      component: {
        is: '',
        props: ({ data }) => ({}),
        events: ({ value, data }) => {}
      },

      render: (h, { value, data, rows, index }) => {},
      slotKey: 'slotKey'
    }
  ],

  operation: [
    {
      props: {},
      butns: [
        {
          label: '启用',
          props: {
            type: 'text'
          },
          handle: ({ data }) => {
            console.log('data: ', data);
          }
        },
        {
          label: '禁用',
          props: {
            type: 'text'
          },
          handle: () => {}
        }
      ]
    },
    {
      props: {},
      butns: [
        { label: '编辑', emit: 'edit', props: {}, handle: () => {} },
        { label: '删除', emit: 'del', props: {}, handle: () => {} }
      ]
    }
  ]
};

JkAssemblerForm

属性值

| 属性名称 | 属性描述 | 类型 | 默认值 | | ---------- | -------------------- | ----------------- | ------ | | props | 表单绑定属性值 | Object,Function | {} | | events | 表单绑定事件 | Object,Function | {} | | operation | 表单按钮组 | Object | {} | | columns | 表单项 | Array | [] | | permission | 可操作表单的权限数组 | Boolean,Function, | [] |

示例

const filter = {
  value: {}, // 绑定数据源，推荐使用 v-model
  props: {}, // 表单基础属性
  events: ({ value, data }) => {}, // 表单事件
  columns: [
    {
      prop: '',
      label: '',
      props: ({ data }) => ({}),
      permission: ({ data }) => false, // 这个是无权限 返回值为 true false
      ifVisible: ({ data }) => true, // 是否显示 返回值为 true false
      // 开启组件模式
      component: {
        is: '',
        props: ({ data }) => ({}),
        events: ({ value, data }) => {}
      },

      render: (h, { value, data, rows, index }) => {},
      slotKey: ''
    }
  ],
  operation: {
    submit: {
      label: '',
      props: {},
      handle: ({ data }) => {}
    },
    cancel: {
      label: '',
      props: {},
      handle: ({ data }) => {}
    },
    butns: []
  }
};

JkAssemblerFormPanel

属性值

| 属性名称 | 属性描述 | 类型 | 默认值 | | ------------- | -------------- | --------------- | ------ | | value/v-model | 表单绑定值 | Object | {} | | visible | 显示影藏 | Boolean | false | | title | 弹窗标题 | String | '' | | props | 弹窗绑定属性值 | Object,Function | {} | | events | 弹窗绑定事件 | Object,Function | {} | | config | 表单绑定属性 | Object | {} |

示例

const form = {
  value: {}, // 绑定数据源，推荐使用 v-model
  props: {}, // 表单基础属性
  events: ({ value, data }) => {}, // 表单事件
  columns: [
    {
      prop: '',
      label: '',
      props: ({ data }) => ({}),
      permission: ({ data }) => false, // 这个是无权限 返回值为 true false
      ifVisible: ({ data }) => true, // 是否显示 返回值为 true false
      // 开启组件模式
      component: {
        is: '',
        props: ({ data }) => ({}),
        events: ({ value, data }) => {}
      },

      render: (h, { value, data, rows, index }) => {}
    }
  ],
  operation: {
    submit: {
      label: '',
      props: {},
      handle: ({ data }) => {}
    },
    cancel: {
      label: '',
      props: {},
      handle: ({ data }) => {}
    },
    butns: []
  }
};

const formPabel = {
  value: {}, // 绑定数据源，推荐使用 v-model
  config: form,

  title: '',
  visible: false,
  props: {}, // 表单基础属性
  events: ({ value, data }) => {} // 表单事件
};

JkAssemblerPagination

属性值

| 属性名称 | 属性描述 | 类型 | 默认值 | | ------------- | ----------------------- | ------- | ----------------- | | value/v-model | 分页属性 | Object | {} | | total | 总页数 | Number | 0 | | sizes | 每页显示个数 | Array | [10, 20, 50, 100] | | hideSingle | 单页是否显示 pagination | Boolean | false |

事件

| 事件名称 | 事件描述 | 回调参数 | | -------- | --------------------------------------------------------- | -------- | | Change | 监听 change 事件，page 变化返回 false，size 变化返回 true | Boolean |

示例

<template>
  <JkPagination
    v-model="option"
    :total="100"
    :hideSingle="false"
    :sizes="[20, 30, 50, 100]"
    @change="changePage"
  />
</template>
<script>
export default {
  components: { JkPagination },
  data() {
    return {
      //pagination配置项
      //默认单页不显示分页
      //监听change事件，page变化返回false，size变化返回true
      option: {
        page: 1,
        size: 10
      }
    };
  },
  computed: {},
  created() {},
  methods: {
    changePage(val) {
      console.log('changePage: ', val);
    }
  }
};
</script>

JkAssemblerDynamic

| 属性名称 | 属性描述 | 类型 | 默认值 | | -------- | -------------- | ------ | ------ | | is | 使用哪一个组件 | String | 0 | | 属性 | 透传 | Object | | | 事件 | 透传 | Object | |

示例

<template>
  <div>
    <el-card header="基础配置">
      <JkAssemblerDynamic is="JkAssembler" :config="config" />
    </el-card>

    <el-card header="普通的查询表单">
      <JkAssemblerDynamic
        is="JkAssemblerFilter"
        v-model="query"
        v-bind="filterConfig"
        @search="search"
        @add="add"
      />

      <el-card>
        {{ query }}
      </el-card>
    </el-card>
  </div>
</template>

<script>
import JkAssemblerDynamic from '../../../packages/jk-assembler/dynamic';
import { baseConfig } from '../configs/assembler/base';
import { filterConfig } from '../configs/filter/filter-base';

export default {
  components: { JkAssemblerDynamic },
  data() {
    return {
      config: baseConfig,
      filterConfig,
      query: {
        active: false,
        age: ''
      }
    };
  },
  computed: {},
  created() {},
  methods: {
    handleSearch(data) {
      console.log('data: ', data);
    },
    search() {
      this.$message('触发了查询的emit');
    },
    add() {
      this.$message('触发了添加按钮的emit');
    }
  }
};
</script>

<style lang="scss" scoped></style>