Zjyg-ui NPM | npm.io

zjyg ui

# 安装依赖
npm install zjyg-ui

# 引入依赖 main.js
import zjygUi from 'zjyg-ui'
import 'zjyg-ui/zjyg-ui.css'

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

筛选、表格

筛选 zjyg-query-form

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

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

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

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

:::

表格 zjyg-data-table

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

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

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

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

:::

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

默认使用

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

<template>
    <zjyg-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 在 zjyg-crud 中 query-bind 和 table-bind 对象配置组件

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