# zjyg-ui

> ```bash # 安装依赖 npm install zjyg-ui

Latest version **1.1.4** (published 2023-03-03) · ISC license · 0 weekly downloads

## Install

```sh
npm install zjyg-ui
pnpm add zjyg-ui
yarn add zjyg-ui
bun add zjyg-ui
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.4 |
| Published | 2023-03-03 |
| First published | 2023-02-27 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 3.9 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | xiechangwang |

## Links

- npm: https://www.npmjs.com/package/zjyg-ui
- npm.io page: https://npm.io/package/zjyg-ui

## Recent versions

- 1.1.4 (latest) — 2023-03-03
- 1.1.3 — 2023-03-03
- 1.1.2 — 2023-03-03
- 1.1.1 — 2023-03-03
- 1.1.0 — 2023-03-03
- 1.0.9 — 2023-03-02
- 1.0.8 — 2023-03-01
- 1.0.7 — 2023-02-28
- 1.0.6 — 2023-02-28
- 1.0.5 — 2023-02-28
- 1.0.4 — 2023-02-28
- 1.0.2 — 2023-02-28
- 1.0.1 — 2023-02-27
- 0.1.0 — 2023-02-27

## README

# zjyg ui 

```bash
# 安装依赖
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
```html
<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` 对应`heads`prop 键名即可填入数据
```html
<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 对象配置组件
```html
<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 对象配置组件
```html
<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>
```


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

### queryBind 参数说明
| 说明  |
|--------|
| 参考zjyg-data-table参数说明 |

### tabkeBind 参数说明
| 说明  |
|--------|
| 参考zjyg-query-form参数说明 |


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

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

:::

---
_Source: https://npm.io/package/zjyg-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._