jk-assembler

集成组件系统 集成组件是提供了一个快速集成表格和操作项，可以快速完成一个管理系统的表格

快速使用

• 全局引用注册

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

• 按需引用

  # developing
  

集成组件

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

JkAssembler

属性值

属性名称| 属性描述 | 类型 | 默认值 | 版本支持 -|-|-|-|- config| 集成注册器的设置项 | Function | | 1.0.0 |

config 属性

属性名称| 属性描述 | 类型 | 默认值 | 版本支持 -|-|-|-|- __searchList| 检索方法 | Function | | 1.0.0 | filter| 检索配置 | Object | | 1.0.0 | table| 表格配置 | Object | | 1.0.0 | form| 表单配置 | Object | | 1.0.0 |

示例代码

function baseAssemblerConfig(Vue) {
  return {
    __searchList: (queryParams = {}) => {
      return TableApi.getList(queryParams)
    },
    filter: {
      ...
    },
    table: {
      ...
    },
    form: {
      ...
    }
  }
}

JkAssemblerFilter

属性值

属性名称| 属性描述 | 类型 | 默认值 | 版本支持 -|-|-|-|- realTimeRemoteSearch| 是否开启实时搜索 | Boolean | false | 1.0.0 | showSearchButton| 显示搜索按钮 | Boolean, Function | false | 1.0.0 | filterDefault| 自定义检索条件 | Object | {} | 1.0.0 | filterOptions| 检索条件 | Array | [] | 1.0.0 | custemFilterButn| 自定义按钮 | Array | [] | 1.0.0 |

示例代码

// 搜索栏配置项
filter: {
  // 是否开启实时搜索
  realTimeRemoteSearch: false,  // default false

  // 显示搜索按钮
  showSearchButton: true,  // default true

  // 是否显示添加按钮, boolean function 如果是function则会执行此方法
  showAddButton: true,  // default false

  // 自定义检索条件
  filterDefault: {
    key: 'value'
  },

  // 检索条件
  filterOptions: [
    {
      label: '测试',
      prop: 'name', // 绑定key
      is: 'el-input', // 声明使用组件
      // 绑定属性
      props: {
        placeholder: '请输入'
      }
    },
    {
      prop: 'status',
      is: 'select-opt',
      props: {
        option: [
          { key: 'UNLOCKED', name: '已解锁' },
          { key: 'LOCKED', name: '未解锁' }
        ],
        optionValue: 'key',
        optionLabel: 'name',
        placeholder: '解锁状态'
      }
    }
  ],
  // 自定义按钮
  custemFilterButn: [
    {
      name: '导出客户',
      props: {
        type: 'success',
        icon: 'el-icon-download'
      },
      event: async() => {
        console.log('custom butn click')
      }
    },
    ...
  ]
}

JkAssemblerTable

属性值

属性名称| 属性描述 | 类型 | 默认值 | 版本支持 -|-|-|-|- data| 绑定的数据 | Array | [] | 1.0.0 | tableProps| 表格中可以bind的所有值 | Object | {} | 1.0.0 | tableEvents| 表格中可以bind的所有Table Events | Object | {} | 1.0.0 | tableColumns| 表格列表项声明 | Array | [] | 1.0.0 | rowOperateList| 表格操作项 -- 按钮组 | Array | [] | 1.0.0 |

示例代码

function tableConfig() {
  return {
    // 绑定的数据
    data: [],

    // 表格中可以bind的所有值
    tableProps: {},

    // 表格中可以bind的所有Table Events
    tableEvents: {
      'sort-change': ({ column, prop, order }) => {
        if (order === 'ascending') {
          order = 'asc'
        } else if (order === 'descending') {
          order = 'desc'
        }
        const orderObj = { sort: null }
        if (order) {
          orderObj.sort = `${prop},${order}`
        }
        Vue.__setFilterListQuery(orderObj)
      },
    },

    // 表格列表项声明
    tableColumns: [
      
      // 展示选择按钮
      { type: 'selection' },

      // 展示序号
      { type: 'index' },

      // 展示为一个可展开的按钮，展开内容为prop绑定的值
      { type: 'expand', prop: 'title' },

      // 展示为一个可展开的按钮，展开内容为自定义render
      { 
        type: 'expand',
        prop: 'title',  // 绑定属性值
        render: (h,, { value, record, index }) => <div>{value}</div>
      },

      // 普通的 table-item
      {
        prop: 'id', 
        label: '编号'
      },

      // 开启sortable, 需配合table-event使用
      {
        prop: 'title',
        label: '直播标题',
        sortable: 'custom' 
      },

      // 使用全局组件
      {
        prop: 'image',
        label: '二维码',
        component: {
          is: 'table-column-images' 
        }
      },

      // 使用一个完整并且带配置的组件
      {
        prop: 'status',
        label: '上架状态',
        // 设置表单项为一个组件，组件需要全局注册，并且使用双向绑定
        component: {
          is: 'table-column-status',
          props: {
            'inactive-value': 'OFFLINE',
            'active-value': 'ONLINE'
          },
          events: function(row) {
            return {
              change: async(val) => {
                console.log(val)
              }
            }
          }
        }
      },

      // 使用自定义render
      {
        prop: 'startDate',
        label: '有效期',
        render: (h, { value, record }) =>
          <span>{ parseTime(record.startDate) } —— { parseTime(record.endDate) }</span>
      },
      {
        prop: 'status',
        label: '状态',
        sortable: 'custom',
        render: (h, { value, record }) => {
          if (value === 'ONLINE') return <el-tag type='success'>使用中</el-tag>
          return <el-tag>已失效</el-tag>
        }
      }
    ],


    // 表格操作项 -- 按钮组
    rowOperateList: [
      {
        key: 'edit', // 使用编辑key
        name: '编辑', // 按钮文字
        props: {
          icon: 'el-icon-edit-outline',
          type: 'success',
          plain: true
        }
      },
      {
        props: {
          icon: 'el-icon-document-delete',
          type: 'danger',
          plain: true
        },
        event: async(record, index, rows) => {
          // console.log('record, index, rows: ', record, index, rows)
          await Vue.$confirm('你确定要删除吗', '温馨提示', { type: 'warning' })
          const { code } = await TableApi.del(record.id)
          if (code === 200) {
            Vue.refresh()
            Vue.$message.success('删除成功！')
          }
        }
      }
    ]
  }
}

JkAssemblerForm

属性值

属性名称| 属性描述 | 类型 | 默认值 | 版本支持 -|-|-|-|- fields| 表单项 | Array | [] | 1.0.0 | formProps| 表单绑定属性值 | Object | {} | 1.0.0 | tableEveformEventsnts| 表单绑定事件 | Object | {} | 1.0.0 | submit| 点击确定-回调事件 | Function | ()=>{} | 1.0.0 | cancel| 点击确定-回调事件 | Function | ()=>{} | 1.0.0 |

事件

事件名称| 事件描述 |回调参数| 版本支持 -|-|-|- submit| 点击确定-回调事件 |formProps| 1.0.0 | cancel| 点击确定-回调事件 || 1.0.0 |

示例代码

// form configs
form: {
  // 表单项
  fields: [
    {
      prop: 'title',
      rules: [{ required: true, message: '必填项' }],
      // form-item props
      attributes: {
        label: '标题'
      },
      // form-item使用的组件
      component: {
        is: 'el-input',
        props: {
          placeholder: '请输入'
        },
        events: {}
      }
    },
    {
      prop: 'image',
      rules: [{ required: true, message: '必填项' }],
      attributes: {
        label: '封面图'
      },
      component: {
        is: 'upload-image',
        props: {},
        events: {}
      }
    }
  ],

  // 表单绑定属性值
  formProps: {},

  // 表单绑定事件
  formEvents: {},

  // 点击确定-回调事件
  submit: async(row) => {
    console.log('form submit event: ', row)
  },

  // 点击取消-回调事件
  cancel: (row) => {
    console.log('form cancel event')
  }
}

JkAssemblerFormPanel

属性值

属性名称| 属性描述 | 类型 | 默认值 | 版本支持 -|-|-|-|- data/v-model | 显示弹窗 | Boolean | [] | 1.0.0 | formModel| 表单绑定的model值 | Object | {} | 1.0.0 | config| 表单配置项 | Object | {} | 1.0.0 |

示例代码

<jk-form-panel
  v-model="show"
  :formModel="formModel"
  :config="form"
  />

{
  formModel: {},
  show: false,
  form: {
    ...
  }
}

JkAssemblerPagination

属性值

属性名称| 属性描述 | 类型 | 默认值 | 版本支持 -|-|-|-|- value/v-model | 分页属性 | Object | {currentPage: 1,pageSize: 10} | 1.0.0 | totalCount| 总页数 | Number | 0 | 1.0.0 |

事件

事件名称| 事件描述 | 回调参数| 版本支持 -|-|-|- pageSizeChange | 页数size改变 | true | 1.0.0 | currentPageChange| 当前页码改变 | false | 1.0.0 |

示例代码

<jk-assembler-pagination
  v-model="pageOptions"
  :totalCount="totalCount"
  @pageSizeChange="search"
  @currentPageChange="search"
  />

使用permission

组件提供了一个permission的实现模型

如何使用

集成组件使用

组件注册器或者注册器中 filter table form 组件的props.PermissionRole 属性中添加用户拥有的权限数组

<jk-assembler :config="config" :PermissionRole="['a1','a2']"/>

在项目中使用 v-permission 指令

需要使用 window.PermissionRole告知用户的权限信息

<el-button v-permission="['a2']">点击测试第二组件</el-button>

import { permission } from 'jk-assembler'
Vue.use(permission)

window.PermissionRole = ['a1', 'a2']

使用内置全局组件

全局组件

jkColumnImages

提供给表格中的图片项

属性值

属性名称| 属性描述 | 类型 | 默认值 | 版本支持 -|-|-|-|- value/v-model | 图片数组 | [String, Array] | ()=>[] | 1.0.1 | dataKey| 数组中图片key | String | | 1.0.1 |

示例代码

// 在集成注册器使用
table: {
  ...
  tableColumns: [
    {
      prop: 'image',
      label: 'jk-column-images',
      component: {
        is: 'jk-column-images'
      }
    }
  ],
  ...
}

// 在页面中使用
<jk-column-images v-model="imageList"/>

JkColumnStatus

该组件提供了一个表格项中的上下架和修改状态的switch

属性值

属性名称| 属性描述 | 类型 | 默认值 | 版本支持 -|-|-|-|- value/v-model|绑定的状态值| [Boolean, String, Number] | false | 1.0.2 | activeValue|switch 打开时的值| [Boolean, String, Number] | true | 1.0.2 | inactiveValue|switch 关闭时的值|[Boolean, String, Number] | false | 1.0.2 | disabled| 是否禁用| Boolean | false | 1.0.2 | props| 其他属性值| Object | {} | 1.0.2 |

事件

事件名称| 事件描述 | 回调参数| 版本支持 -|-|-|- change | 开关值改变 | value | 1.0.2 |

示例代码

// 在集成注册器使用
table: {
  ...
  tableColumns: [
    {
      prop: 'status',
      label: '上架状态',
      component: {
        is: 'jk-column-status',
        props: {
          'inactive-value': 'OFFLINE',
          'active-value': 'ONLINE'
        },
        events: function(row) {
          return {
            change: async(val) => {
              console.log(val)
            }
          }
        }
      }
    },
  ],
  ...
}

JkColumnSort

这个组件是提供表格中一个改变sort的按钮组

属性值

属性名称| 属性描述 | 类型 | 默认值 | 版本支持 -|-|-|-|- value/v-model | 图片 | [String, Array] | | 1.0.2 | scope| table-column属性 | Object | | 1.0.2 | scope.index| table-column的index | Number | | 1.0.2 | scope.record| table-column的row值 | Object | | 1.0.2 | scope.rows| table的data数组值 | Array | | 1.0.2 |

事件

事件名称| 事件描述 | 回调参数| 版本支持 -|-|-|- up | 点击向上按钮 | 两项的id {id1,id2} | 1.0.0 | down| 点击向下按钮 | 两项的id {id1,id2} | 1.0.0 |

示例代码

// 在集成注册器使用
table: {
  ...
  tableColumns: [
    {
      prop: 'id',
      label: '排序值',
      component: {
        is: 'table-column-sort',
        events: (row) => {
          return {
            up: async(val) => {
              // console.log('val: ', val)
              await TableApi.sequence(val)
              await Vue.refresh()
            },
            down: async(val) => {
              // console.log('val: ', val)
              await TableApi.sequence(val)
              await Vue.refresh()
            }
          }
        }

      }
    }
  ],
  ...
}

JkFormSelect

这个组件是提供一个选择器组件，用在集成表单和filter中

属性值

属性名称| 属性描述 | 类型 | 默认值 | 版本支持 -|-|-|-|- value/v-model | 绑定的属性值 | [String, Number] | '' | 1.0.2 | option| 选择项数组 | [Function, Array, Promise] | [] | 1.0.2 | optionValue| 选择项的结果 | [String, Number, Object] | [] | 1.0.2 | optionLabel| 选择项的展示文本 | String | | 1.0.2 | optionDefaultItem| 默认选项，需和option数组项一样，默认插入头部 | [String, Object] | | 1.0.2 | disabled| 是否禁用| Boolean | false | 1.0.2 |

事件

事件名称| 事件描述 | 回调参数| 版本支持 -|-|-|- change | 选择值改变 | optionValue | 1.0.2 |

示例代码

// 集成组件使用
filter: {
  {
    prop: 'status',
    is: 'jk-form-select',
    props: {
      option: [
        { key: 'UNLOCKED', name: '已解锁' },
        { key: 'LOCKED', name: '未解锁' }
      ],
      optionValue: 'key',
      optionLabel: 'name',
      placeholder: '解锁状态'
    }
  }
}

// 使用请求
async function getCourseCategories() {
  const { data } = await CourseCategories.getList()
  return data
}
{
  prop: 'categoryId',
  is: 'jk-form-select',
  props: {
    option: getCourseCategories(),
    optionValue: 'id',
    optionLabel: 'name',
    placeholder: '选择分类'
  }
},

// 在页面中使用
<el-form-item label="区域" prop="regionId">
  <jk-form-select
    v-model="addForm.regionId"
    :option="regionsOpt"
    optionValue="id"
    optionLabel="name"
  ></jk-form-select>
</el-form-item>

JkFormCheckbox

这个组件是提供一个checkbox组件，用在集成表单页中

属性值

属性名称| 属性描述 | 类型 | 默认值 | 版本支持 -|-|-|-|- value/v-model | 绑定的属性值 | [String, Number] | '' | 1.0.2 | option| 选择项数组 | [Function, Array, Promise] | [] | 1.0.2 | optionValue| 选择项的结果 | [String, Number, Object] | [] | 1.0.2 | optionLabel| 选择项的展示文本 | String | | 1.0.2 |

事件

事件名称| 事件描述 | 回调参数| 版本支持 -|-|-|- change | 选择值改变 | optionValue | 1.0.2 |

示例代码

// 集成组件使用
async function getCourseCategories() {
  const { data } = await CourseCategories.getOnlineList()
  return data
}
{
  prop: 'categories',
  rules: [{ required: true, message: '请至少选择一项' }],
  attributes: {
    label: '适用范围'
  },
  component: {
    is: 'jk-form-checkbox',
    props: {
      option: getCourseCategories(),
      optionValue: 'id',
      optionLabel: 'name'
    }
  }
}

JkFormUploadImage

这个组件是提供一个单图片上传组件

属性值

属性名称| 属性描述 | 类型 | 默认值 | 版本支持 -|-|-|-|- image/v-model | 绑定的属性值 | String | '' | 1.0.2 | request| 图片上传Request | Function | | 1.0.2 |

事件

事件名称| 事件描述 | 回调参数| 版本支持 -|-|-|- success | 图片长传成功 | url | 1.0.2 |

示例代码

<jk-form-upload-image
  v-model="image"
  :request="request"
  @success="setUpload"/>

function uploadFile(file) {
  const formdata = new FormData()
  formdata.append('files', file)
  return new Promise((resolve, reject) => {
    request({
      url: `/files`,
      headers: {
        'Content-Type': 'multipart/form-data;charset=UTF-8'
      },
      method: 'post',
      data: formdata
    }).then(res => {
      console.log('uploadFile: ', res)
      resolve(res.data[0].url)
    }).catch(err => {
      reject(err)
    })
  })
}

export default {
  data() {
    return {
      image: '',
      request: uploadFile
    }
  },
  methods: {
    setUpload(url) {
      // this.image = url
    }
  }
}

JkFormUploadVideo

这个组件是提供一个单媒体（视频，音频）上传组件

属性值

属性名称| 属性描述 | 类型 | 默认值 | 版本支持 -|-|-|-|- video/v-model | 绑定的属性值 | String | '' | 1.0.2 | butnText | 按钮名称 | String | '上传' | 1.0.2 | times | 媒体事件 | [String, Number] | '' | 1.0.2 | request| 图片上传Request | Function | | 1.0.2 |

事件

事件名称| 事件描述 | 回调参数| 版本支持 -|-|-|- success | 长传成功 | url | 1.0.2 |

示例代码

<jk-form-upload-video
  v-model="image"
  :time="time"
  :request="request"
  @success="setUpload"/>

function uploadFile(file) {
  const formdata = new FormData()
  formdata.append('files', file)
  return new Promise((resolve, reject) => {
    request({
      url: `/files`,
      headers: {
        'Content-Type': 'multipart/form-data;charset=UTF-8'
      },
      method: 'post',
      data: formdata
    }).then(res => {
      console.log('uploadFile: ', res)
      resolve(res.data[0].url)
    }).catch(err => {
      reject(err)
    })
  })
}

export default {
  components: { Upload },
  data() {
    return {
      video: '',
      time: '',
      request: uploadFile
    }
  },
  methods: {
    setUpload(url) {
      // this.image = url
    }
  }
}

JkPreviewImage

这个组件是提供一个函数调用组件，用来预览图片

属性值

属性名称| 属性描述 | 类型 | 默认值 | 版本支持 -|-|-|-|- imgList | 图片 | [String, Array] | ()=>[] | 1.0.1 | index| 第几个图片 | Number | 0 | 1.0.1 |

示例代码

<el-button @click="showPrev">点击测试预览图片</el-button>

const imgList = []
const img = 'https://img10.360buyimg.com/n12/jfs/t23431/303/1885264711/153012/fe4ae9b8/5b6be240N82f3fc92.jpg'
const index = 1
showPrev() {
  this.$previewImage(img)
  this.$previewImage(imgList)
  this.$previewImage(imgList, index)
}

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# publish npm
npm publish