jk-assembler v1.2.9

jk-assembler

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

快速使用

• 全局引用注册

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

• 按需引用

  # developing

集成组件

JkAssembler

属性值

config 属性

示例代码

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| [表单配置项](#JkAssemblerForm) | Object | {} | 1.0.0 |

> 示例代码

{ 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的实现模型
![avatar](https://hxy-web1.oss-cn-hangzhou.aliyuncs.com/prev/perv2.gif)

### 如何使用
#### 集成组件使用
组件注册器或者注册器中 `filter` `table` `form` 组件的`props.PermissionRole` 属性中添加用户拥有的权限数组

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

window.PermissionRole = 'a1', 'a2'

## [使用内置全局组件](./GC.md)

# 全局组件

## 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' } } , ... }

// 在页面中使用

## 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| [其他属性值](https://element.eleme.cn/#/zh-CN/component/switch)	 | 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: '选择分类' } },

// 在页面中使用 <jk-form-select v-model="addForm.regionId" :option="regionsOpt" optionValue="id" optionLabel="name"

JkFormCheckbox

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

属性值

事件

示例代码

// 集成组件使用
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

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

属性值

事件

示例代码

<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.data0.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.data0.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">点击测试预览图片

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

``` bash
# 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