❤
npm
Sign UpSign In

jk-assembler2

2.1.0 • Public • Published

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>

Readme

Keywords

Package Sidebar

Install

npm i jk-assembler2

Weekly Downloads

3

Version

2.1.0

License

MIT

Unpacked Size

888 kB

Total Files

14

Last publish

Collaborators

  • daqiang5252
Try on RunKit
Report malware