jk-assembler2 v2.1.0

jk-assembler 2.1.0

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

快速使用

• 全局引用注册

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

• 按需引用

 # developing

集成组件

JkAssembler

属性值

config 属性

示例

<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

属性值

示例

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

属性值

示例

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

属性值

示例

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

属性值

示例

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

属性值

事件

示例

<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

示例

<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>