jhp ui

# 安装依赖
npm install jhp-ui

# 引入依赖 main.js
import jhpUi from 'jhp-ui'
import 'jhp-ui/jhp-ui.css'

# 使用
<jhp-query-form/>
<jhp-data-table/>
<jhp-crud/>

筛选、表格

筛选 jhp-query-form

包含输入、下拉、时间联动表单

::: demo 在 jhp-query-form 可以配置 input、select、date、date-link

<template>
    <jhp-query-form :forms="forms" @query="handleQuery" @finish="finish"/>
</template>
<script>
  export default {
    data() {
      return {
      }
    },
    computed:{
        forms(){
            return [
                {
                    label:'测试名称',
                    prop:'testName',
                    type:'input'
                },
                {
                    label:'测试下拉',
                    prop:'testSelect',
                    type:'select',
                    config:{
                        oprions:[{
                            label:'test',
                            value:'1'
                        }]
                    }
                }

            ]
        }
    },
    methods:{
        finish(form){
          console.log(form)
        },
        //搜索、重置
        handleQuery(form){
            console.log(form)
        }
    }
  }
</script>

jhp-query-form

Attributes

| 参数 | 说明 | 类型 | 是否必传 | 默认值 | |-----|--------|--------|--------|-------| | forms | 表头参数 | array | 是 | — |

forms 参数说明

| 参数 | 说明 | 类型 | 是否必传 | 默认值 | |-----|--------|--------|--------|-------| | label | 名称 | string | 是 | title | | prop | 键值 | string | 是 | — | | type | 表单类型 | {string,'input，select，multiple，checkbox，radio，date，date-link'} | 是 | — | | config | {options:'下拉框的数据 { label,value }',表单类型:'select,multiple，checkbox，radio 必填' } | array | - | — |

event

| 参数 | 说明 | 参数 | |-----|--------|-------| | finish | 表单渲染完成回调 | form | | query | 搜索和重置回调 | form | | change | 单一表单更改触发 | form |

:::

表格 jhp-data-table

配置表头和对应字段的数据

::: demo 当 data-table 元素中注入 heads 对象数组后，用prop 键名,label属性来定义表格的列名。datas 对象数组中 key 对应headsprop 键名即可填入数据

<template>
    <jhp-data-table :heads="heads" :datas="list" @edit="edit"/>
</template>
<script>
  export default {
    data() {
      return {
        heads:[
            {
                label:'测试1',
                prop:'test1'
            },
            {
                label:'测试2',
                prop:'test2',
                dataType:'event',
                config:{
                    type:'text',
                    event:'edit',
                    style:{
                        color:'#999'
                    }
                }
            },
            {
                label:'测试3',
                prop:'test3'
            },
            {
                label:'测试4',
                prop:'test4'
            },
            {
                label:'测试5',
                prop:'test5'
            }
        ],
        list:[
            {test1:'111111',test2:'2222222222',test3:'3333333',test4:'444444444',test5:'5555555'}
        ]
      }
    },
    methods:{
        //event
        edit(row){
            console.log(row)
        }
    }
  }
</script>

jhp-data-table

Attributes

| 参数 | 说明 | 类型 | 是否必传 | 默认值 | |-----|--------|--------|--------|-------| | heads | 表头参数 | array | 是 | — | | datas | 显示的数据 | array | 是 | — |

heads 参数说明

| 参数 | 说明 | 类型 | 是否必传 | 默认值 | |-----|--------|--------|--------|-------| | label | 名称 | string | 是 | title | | prop | 键值 | string | 是 | — | | width | 宽度 | number/string | 否 | — | | dataType | 数据展示类型 | string / event / slot| 是 | string | | slotName | 插槽名称 | string | dataType=slot 是 | - | | isPagination | 是否展示分页 | boolean | 否 | true | | config | {event:'dataType是event 配置的事件名称',type:'展示的类型（按钮/文本）',style:'样式'} | object/array | 否 | — |

event

| 参数 | 说明 | 参数 | |-----|--------|-------| | event | config里面event配置的回掉事件 | row |

slot

| name | 说明 | |-----|-----| | 保持和参数slotName一致 | 自定义表格插槽，参数为 {row}| :::

组合 jhp-crud 结合筛选、表格、分页

默认使用

::: demo 在 jhp-crud 中 query-bind 和 table-bind 对象配置组件

<template>
    <jhp-crud 
      getListName="getData"
      :query-bind="queryBind" 
      :table-bind="tableBind" 
      :total="total" 
    />
</template>
<script>
export default {
  props: {
    msg: String
  },
  data(){
    return {
        //form 
        form:null,
         total:0,
        //表头
        heads:[
          {
            label:'名字',
            prop:'name'
          }
          {
            label:'年龄',
            prop:'age'
          }
          {
            label:'性别',
            prop:'sex'
          }
        ],
        //表格数据
        list:[]
    }
  },
  created(){
  },
  computed:{
    forms(){
      return [
        {
            label: "MB/L No.",
            prop: "mainOrderNo",
            type: "input"
          },
          {
            label: "select",
            prop: "sale",
            type: "select",
            config:{
              options:[
                {
                    label:'aaa',
                    value:'aaaa'
                },
                {
                    label:'bbbb',
                    value:'bbbb'
                }
                ]
            }
          },
      ]
    },
    //筛选 bind
    queryBind(){
      return {
        forms:this.forms
      }
    },
    //表格 bind
    tableBind(){
      return {
        heads:this.heads,
        datas:this.list
      }
    }
  },
  methods:{
    getData(form,page){
      setTimeout(() => {
        const param=this.form
        ajaxFun({...form},{...page}).then(res=>{
            res={total:10,rows:[{name:'aaa',age:12,sex:'男'}]}
            this.list=res.rows
            this.total=res.total
        })
      }, 1000);
    }
  }
}
</script>

自定义筛选和分页

::: demo 在 jhp-crud 中 query-bind 和 table-bind 对象配置组件

<template>
    <jhp-crud 
      :query-bind="queryBind" 
      :table-bind="tableBind" 
      :pagination="page" 
      :total="total" 
      @query="handleQuery" 
      @current-change="currentChange" 
      @size-change="sizeChange"/>
</template>
<script>
export default {
  props: {
    msg: String
  },
  data(){
    return {
        //form 
        form:null,
        //分页
       page:{
            pageSize:20,
            pageNum:1,
           
        },
         total:0,
        //表头
      heads:[
        {
          label:'名字',
          prop:'name'
        }
        {
          label:'年龄',
          prop:'age'
        }
        {
          label:'性别',
          prop:'sex'
        }
      ],
      //表格数据
      list:[]
    }
  },
  created(){
    this.getData()
  },
  computed:{
    forms(){
      return [
        {
            label: "MB/L No.",
            prop: "mainOrderNo",
            type: "input"
          },
          {
            label: "select",
            prop: "sale",
            type: "select",
            config:{
              options:[
                {
                    label:'aaa',
                    value:'aaaa'
                },
                {
                    label:'bbbb',
                    value:'bbbb'
                }
                ]
            }
          },
      ]
    },
    //筛选 bind
    queryBind(){
      return {
        forms:this.forms
      }
    },
    //表格 bind
    tableBind(){
      return {
        heads:this.heads,
        datas:this.list
      }
    }
  },
  methods:{
    getData(){
      setTimeout(() => {
        const param=this.form
        ajaxFun(param,{pageSize:this.page.pageSize,pageNum:this.page.pageNum}).then(res=>{
            res={total:10,rows:[{name:'aaa',age:12,sex:'男'}]}
            this.list=res.rows
            this.total=res.total
        })
      }, 1000);
    },
    //搜索重置
    handleQuery(form){
        this.form=form
        this.page.pageNum=1
        getData()
    },
    //分页
    currentChange(p){
        this.page.pageNum=p
        this.getData()
    },
    sizeChange(s){
        this.page.pageSize=s
        this.getData()
    }
  }
}
</script>

jhp-data-table

Attributes

| 参数 | 说明 | 类型 | 是否必传 | 默认值 | |-----|--------|--------|--------|-------| | queryBind | 筛选表单 | object | 是 | — | | tableBind | 表格 | object | 是 | — | | getListName | 获取列表数据方法名称 | string | 否 | - |

queryBind 参数说明

| 说明 | |--------| | 参考jhp-data-table参数说明 |

tabkeBind 参数说明

| 说明 | |--------| | 参考jhp-query-form参数说明 |

event

| 参数 | 说明 | |-----|--------| | event | 参考 jhp-data-table 和 jhp-query-form 事件|

slot

| name | 说明 | |-----|-----| | 保持和参数slotName一致 | 自定义表格插槽，参数为 {row} |

:::