🚀 Socket Launch Week Day 5:Introducing Repository Access Permissions and Custom Roles.Learn more →
Sign In

tian-lazyit-tools

Package Overview
Dependencies
Maintainers
1
Versions
12
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

tian-lazyit-tools

封装的Ant组件

latest
npmnpm
Version
1.0.11
Version published
Maintainers
1
Created
Source

lz-table表格组件1.0.11

template

 <lz-table ref="myTable">
   <!--工具条-->
   <div slot="tools">
     <a-button icon="plus" @click="showAdd" type="primary">
     	添加
     </a-button>
     <a-button icon="delete" @click="dels" style="margin-left: 10px;" type="danger">
     	批量删除
     </a-button>
     <a-button icon="import" @click="imports" style="margin-left: 10px;" type="default">
     	导入
     </a-button>
     <a-button icon="export" @click="exports" style="margin-left: 10px;" type="default">
     	导出
     </a-button>
   </div>
 </lz-table>

script

init方法应放到 mounted 中进行初始化

this.$refs.myTable.init({
      url: globalConf.baseURL + '/base/label/getList', // 请求url
      columns: [{
        field: 'title',
        title: '标签名称',
        sorter: 'true',
        align: 'left'
      }],
      operate: {
        width: 200,
        items: [
          {
            label: '编辑',
            color: 'success',
            permission: 'table:edit',
            event: row => {
              this.$refs.edit.showModal(row.id)
            },
            //按钮隐藏条件
            hidden: row => {
              if(row.state===1){
                return true //隐藏
              }else{
                return false
              }
            }
          },
          {
            label: '删除',
            color: 'danger',
            permission: 'table:edit',
            event: row => {
              this.$confirm({
                title: '确认删除？',
                content: '删除后将无法恢复！',
                onOk: () => {
                  this.$axios({
                    url: globalConf.baseURL + '/base/label/del',
                    method: 'post',
                    data: {
                      id: row.id
                    }
                  }).then(() => {
                    this.$message.success('删除成功')
                    this.$refs.myTable.selectedRowKeys = []
                    this.search({})
                  })
                }
              })
            }
          }
        ]
      }
    }, () => {
      this.search({})
    })

属性

init的更多属性-下面展示的为默认值

属性说明是否必填类型默认值
url请求链接是String
method请求方式否post/getget
pagination是否显示分页否booleantrue
queryParams默认参数否Object{}
pageNumber初始化加载第一页，默认第一页否Number1
pageSize每页的记录行数（*）否Number10
pageList可供选择的每页的行数否Array[10, 25, 50, 100]
showColumns是否显示所有的列否booleantrue
showRefresh是否显示刷新按钮否booleantrue
changeSize允许改变列大小否booleantrue
showCheckBox显示复选框否booleanfalse
showIndex显示序号否booleantrue
height行高，如果没有设置height属性，表格自动根据记录条数设置表格高度否Number500
columns定义列是Array
operate定义操作否Array

columns示例

[{

field: 'title', //字段名

title: '标签名称', //显示名 sorter: 'true', //是否可以排序 permission: 'table:edit', //权限标识 width:'200px',//宽度 ，不配置则自适应宽度 align: 'left'//对齐方式 可选：left center right }, { field: 'name', title: '名称', sorter: 'true', align: 'left' }]


columns字段格式化显示

格式化文本： -- 常用于标题，点击查看详情

```javascript
{
field: 'title',
title: '名称',
sorter: 'true',
align: 'left',
width: 100,
formatter: {
type: 'text', //格式化方式
format: row => {
   return {
       value: row.title, //显示文本（必填）
         color: 'primary', // 显示颜色 'primary','danger','success','warning','info','default'
         event:()=>{ // 点击触发事件
            // ...
          }
       }
   }
   }
   }

格式化为 图片

用于显示单个图片 比如头像，商品主图

{
  field: 'headImage',
  title: '状态',
  sorter: 'true',
  align: 'center',
  width: 100,
  formatter: {
    type: 'image', //格式化方式
    format: row => {
      return {
      	name:'',// 名称
      	url:''  // 图片路径
      }
    }
  }
}

格式化为图文

可用来显示 头像+名称效果，或者商品主图+名称+价格效果

{
  field: 'name',
  title: '状态',
  sorter: 'true',
  align: 'center',
  width: 100,
  formatter: {
    type: 'image-text', //格式化方式
    format: row => {
      return {
      	name:'',// 名称
      	url:''  // 图片路径
      	text:[ //显示文本内容， 建议一行或两行
          {
            content:'显示文本'
          },
          {
            content:'显示文本'
          }
      	]
      }
    }
  }
}

格式化为开关

常用于状态切换列，比如：是|否

{
  field: 'state',
  title: '状态',
  sorter: 'true',
  align: 'center',
  width: 100,
  formatter: {
    type: 'switch', //格式化方式
    format: row => {
      return {
      	value:true,// 是否选中  true | false
      	change:()=>{// change事件回调
          const v = !row.state
          // ...
        }
      }
    }
  }
}

格式化徽章

常用于显示各种状态 如，等待审核-gray，审核通过-blue，审核拒绝-red

{
  field: 'state',
  title: '状态',
  sorter: 'true',
  align: 'center',
  width: 100,
  formatter: {
    type: 'badge', //格式化方式
    format: row => {
      return {
      	value:'审核通过',
      	color:'blue'//徽章颜色'blue','green','gray','orange','yellow','red' 等
      }
    }
  }
}

方法

this.$refs.myTable.selectedRowKeys //获取或设置选中的行，[id,id,id,id]

this.$refs.myTable.selectedRows //获取或设置选中的行，[{row},{},{}]

this.$refs.myTable.search(param || {}) // 执行搜索，param{k:v} json参数

this.$refs.myTable.getSelected() //获取选中项 {selectedRowKeys,selectedRows}

this.$refs.myTable.setSelected(selectedRowKeys,selectedRows)//设置选中项

lz-search搜索组件

更新日志

  • 2020-09-15：新增树形下拉懒加载数据
  • 2020-05-15：新增月份选择框

template

  <lz-search ref="searchBar" :items="items" @search="search"></lz-search>

items说明

export default [
//文本
  {
    type: 'text', //组件类型
    dataIndex: 'name', //组件key
    label: '名称', //组件显示名称
    defaultValue: '' //默认值
  },
  //下拉静态数据
  {
    type: 'select',
    dataIndex: 'state',
    label: '状态',
    defaultValue: '',
    options: [ //选项配置
      {
        label: '启用',//名称
        value: '1' //值
      },
      {
        label: '禁用',
        value: '0'
      }
    ]
  },
  //下拉动态数据
   {
    type: 'select',
    dataIndex: 'state',
    label: '状态',
    defaultValue: '',
    options: [],
    optionsConfig: { //动态数据配置
       url:'http://localhost:8102/base/classify/getAll',//数据请求地址result:{code:1,content:[]}
       label: 'title',// label对应key  不设置默认label
       value: 'id' //value 对应key  不设置默认value
    }
  },
    //树形下拉
   {
    type: 'tree-select',
    dataIndex: 'dept',
    label: '树形下拉',
    defaultValue: '',
    allowLv: '>=0',//允许选择层级的条件===n,!==n ,>=n ,<=n,>n,<n,false 不使用条件(不使用条件时，可通过返回结果内增加disabled=[true|false]控制是否可选)
    asyncLoad:false,//是否开启数据懒加载（开启后会在请求url上增加参数?pid=value）
    optionsConfig: {
       url:'http://localhost:8102/base/classify/getAll',//数据请求地址result:{code:1,content:[{label,value,lv,[disabled]}]}
       label: 'title',// label对应key  不设置默认title
       value: 'id', //value 对应key  不设置默认value
       lv: 'lv'//层级 不设置 默认 lv
    }
  },
  //日期范围
  {
    type: 'range-picker',
    dataIndex: 'dates',
    label: '日期范围',
    defaultValue: ''
  },
  //月选择框
  {
    type: 'month-picker',
    dataIndex: 'month',
    label: '月份选择',
    defaultValue: ''
  }
]

事件

事件名称说明回调参数
search节点点击事件function(values)

values：搜索条件值

方法

事件名称说明使用示例
getValues主动获取搜索条件值this.$refs.searchBar.getValues()

lz-tree 树形

template

<lz-tree ref="lzTree" :replaceFields="{
             key: 'key',
            title: 'title',
            children: 'children'
        }"
        :asyncLoad="asyncLoad"
        @click="nodeClick"></lz-tree>

asyncLoad：异步加载数据，不需要异步时可不配置

script

 this.$refs.lzTree.init(treeData)//treeData 为初始化数组，异步时treeData若不填，则默认请求一次asyncLoad({id:0})

属性说明

属性说明类型默认值
replaceFields替换结果集中key，title，children为对应字段Object{
key: 'key',
title: 'title',
children: 'children'
}
asyncLoad异步加载数据function（node）-

replaceFields示例

{
    key: 'id',  // 唯一值 ，默认id
    title: 'name', // 显示内容，默认name
    children: 'children' //直接点键
  }

asyncLoad实例

asyncLoad({id}){
  return new Promise(resolve => {
    this.$axios({
      url:'http://localhost:7001/center/pc/serve/goods/category/getTree',
      params:{pid:id}
    }).then(res=>{
      resolve(res.data) //子节点数据 []
    })
  })
},

事件说明

事件名称说明回调参数
click节点点击事件function(value)

value:当前选中节点json数据

方法说明

方法名称参数说明
refreshByPidid属性某节点下数据

例：

this.$refs.lzTree.refreshByPid("1308741694174265344");//刷新id 1308741694174265344下的直接点数据

lz-text文本预览

template

<lz-text :value="lztext" color="primary" @click="textClick"></lz-text>

属性说明

属性说明类型默认值
color颜色（primary,success,warning,error）String

事件

事件名称说明回调参数
click点击事件，返回参数 lztextfunction(value)

value说明：传入值lztext

lz-upload-tools 文件上传-表格工具条

单文件上传，常用于table表格工具条

template

<lz-upload-tools
        @beforeUpload="beforeUpload"
        @doneUpload="doneUpload"
        label="导入"
        :size="1"
        accept=".xlsx,.xls"
        action='http://localhost:8102/base/common/upload/image'
/>

属性

属性说明类型默认值
label组件名称String导入
size允许上传文件大小 单位MBNumber2
accept允许上传文件类型String
action文件上传路径String

事件

事件名称说明回调参数
beforeUpload文件开始上传前调用function(values)
doneUpload文件上传完成后调用function(values)

values示例

{
		file:File,
		id: "1qgc04h0lsclr7bhtcby"
    name: "文件名.xlsx"
    original: "源文件路径"
    path: "压缩文件路径"
    state: 2 //状态，1开始上传，2上传成功，3上传失败
	}

lz-upload文件上传-表单

多文件上传

template

<lz-upload
        v-model="uploadList"
        :max-num="5"
        :size="1"
        @change="uploadChange"
        accept=".jpg,.png,.xlsx"
        :disabled="false"
        imgBasePath="https://echftp.yqzhfw.com/"
        action='http://localhost:8102/base/common/upload/image'
        :replaceFields="{
          name: 'name',
          path: 'path',
          original: 'original',
          size: 'size',
          suffix: 'suffix',
        }"
        :step="{ size: 1024 }"
/>

属性说明

属性说明类型默认值
value(v-model)设置上传文件默认值Array[]
max-num允许最大文件数Number0
size单位MBNumber2
accept允许上传文件类型String几乎所有文件
disabled是否禁用booleanfalse
imgBasePath文件访问跟路径String
action文件上传路径String
replaceFields结果 key替换Object{
name: 'name',
path: 'path',
original: 'original',
size: 'size',
suffix: 'suffix',
}
step开启分片上传Objectfalse

step说明

属性说明类型默认值
size分片大小，单位kbNumber无

事件

事件名称说明回调参数
change文件发生改变后调用Change(values)

values示例

[{
        name: '音频服务.png',  //必须
        path: '/basis/2020/7/10/13acde2b08e84fc7bae4e9c0195facfc.png' //必须
	}]

lz-image 图片预览

<lz-image url="path" :data-list="dataList"></lz-image>

属性

属性说明类型默认值
urldataList 中视频访问地址keyStringpath
dataList视频列表Array
baseUrlurl跟地址String

dataList

[
  {
  	path: 'https://echftp.yqzhfw.com/xxx.png'
  },
  {
  	path: 'https://echftp.yqzhfw.com/xxx.png'
  },
  {
  	path: 'https://echftp.yqzhfw.com/xxx.png'
  }
]

lz-video 视频预览

template

<lz-video url="path" :data-list="videoDataList"></lz-video>

属性

属性说明类型默认值
urldataList 中视频访问地址keyStringpath
dataList视频列表Array
baseUrlurl跟地址String

dataList示例

[
  {
  	path: 'https://echftp.yqzhfw.com/xxx.mp4'
  },
  {
  	path: 'https://echftp.yqzhfw.com/xxx.mp4
  },
  {
  	path: 'https://echftp.yqzhfw.com/xxx.mp4'
  }
]

lz-tinymce 富文本

template

<lz-tinymce
            v-model="a"
            height="300px"
            staticPath="https://ksource.yqzhfw.com/resource"
            action="https://ksource.yqzhfw.com/basis/api/base/v1/base/common/file/fileUpload"
            basePath="https://echftp.yqzhfw.com/"
  />

属性说明

属性说明类型默认值
value(v-model)用于设置当前富文本的内容String
disabled设置当前是否可编辑booleanfalse
skin皮肤["light", "dark"]Stringlight
width宽度String100%
height高度String300px
staticPath静态资源路径（可设为网络跟地址）String/static
action上传地址String
basePath文件访问跟地址String

事件

事件名称说明回调参数
input输入时回调function(values)
change内容变化时回调function(values)

values示例

<p>xxx</p>

lz-multiple-selector多选选择器

效果图

wg8yb6.jpg

template

<lz-multiple-selector
               action="http://localhost:7001/center/pc/serve/goods/category/getList"
               :replaceFields="{
                    title:'cateName,cateCode',
                    description:'createTime'
               }"
               v-model="ms"
               @change="msChange"
            />

属性说明

属性说明类型默认值
value(v-model)用于设置已选内容Array[]
action左侧数据请求url
（自动附加请求参数：pageSize，pageNumber，keyword）		String
replaceFields显示的内容可以用(,)分割在一行展示多列Object{
title: 'title',
description: 'description'
}
show-description是否显示描述行BooleanTrue

事件

事件名称说明回调参数
change结果发生改变时调用function(values)

values示例

[
  {
    id:'1',
    title:'title1',
    description:'description1'
  },
  {
    id:'2',
    title:'title2',
    description:'description2'
  }
]

Lz-tree-select 下拉树选择

whBNOP.jpg whBtyt.jpg

template

<lz-tree-select
        ref="lzTreeSelect"
        :replaceFields="{
                key: 'id',
                value: 'id',
                title: 'cateName',
                children: 'children'
            }"
        v-model="treeSelect"
        @change="lzTreeSelectChange"
        :multiple="true"
        :asyncLoad="asyncLoad"
/>

asyncLoad：异步加载数据，不需要异步时可不配置

script

this.$refs.lzTreeSelect.init(treeData)//treeData 为初始化数组，异步时treeData若不填，则默认请求一次asyncLoad({id:0})

属性说明

属性说明类型默认值
replaceFields替换结果集中key，value,title，children为对应字段Object{
key: 'key',
value:'value',
title: 'title',
children: 'children'
}
v-model(value)绑定值单选时String ，多选时 ArrayString/Array
multiple是否开启多选Booleanfalse
asyncLoad异步加载数据function（node）-

asyncLoad实例

asyncLoad({id}) {
    return new Promise(resolve => {
        this.$axios({
            url: 'http://localhost:7001/center/pc/serve/goods/category/getTree',
            params: {pid: id}
        }).then(res => {
            resolve(res.data)
        })
    })
},

事件说明

事件名称说明回调参数
change选中值改变触发function(value)

lz-report报表展示

0SjV4x.jpg

template

 <lz-report
          ref="lzReport"
          domain="http://localhost:7001"
          reportId="ff80808174b5c3c80174b88705050003"
          reportName="供货单"
        >
        <a-button @click="hideModal">关闭</a-button>
        </lz-report>

属性

属性说明类型默认值
domain报表服务请求域名String
reportId报表IDString
reportName报表导出名称String:reportId

扩展

slot 内容将插入在顶部按钮后方，经常用于扩展一个页面关闭按钮

Script - init初始化

this.$refs.lzReport.init(param, () => {
  this.spinning = false
})

说明

属性说明类型默认值
param报表请求参数String
callback初始化成功回调function()

lz-amap-choose-address高德地图选点

09BRFx.md.jpg 09BWY6.md.jpg

template

<lz-amap-choose-address
        map-key="87ff1e887140aa980a075c096a434940"
        placeholder="请设置地址"
        v-model="chooseArddr"
        @change="chooseArddrChange"/>

属性

属性说明类型默认值
map-key高德地图注册申请的keyString
v-model(:value)绑定的值Object{
addr:''
lat:'',
lng:''
}
placeholder空提示String

事件

事件名称说明回调参数
change内容改变时触发function(value)

示例

<template>
  <div>
    <lz-amap-choose-address
      map-key="87ff1e887140aa980a075c096a434940"
      placeholder="请设置地址"
      v-model="chooseArddr"
      @change="chooseArddrChange"
    />
    选择结果：{{chooseArddr}}
  </div>
</template>
<script>
export default {
  data() {
    return {
      chooseArddr: {
        addr: "河南省郑州市金水区文化路街道河南省农业科学院1",
        lat: "34.788996",
        lng: "113.679317",
      },
    };
  },
  created() {},
  mounted() {},
  methods: {
    chooseArddrChange(val) {
      console.log(val);
    },
  },
};
</script>
<style></style>

lz-one-selector单选

1.0VAh8I.jpg 2.0VA5xP.md.jpg 3.0VA42t.jpg

template

<lz-one-selector
                    action="http://localhost:7001/center/pc/serve/goods/category/getList"
                    :replaceFields="{
                        title: 'cateName,cateCode',
                        description: 'createTime',
                    }"
                    v-model="os"
                    @change="osChange"
                    :show-description="true"
                />

属性说明

属性说明类型默认值
value(v-model)用于设置已选内容Array[]
action左侧数据请求url
（自动附加请求参数：pageSize，pageNumber，keyword）		String
replaceFields显示的内容可以用(,)分割在一行展示多列Object{
title: 'title',
description: 'description'
}
show-description是否显示描述行BooleanTrue

事件

事件名称说明回调参数
change结果发生改变时调用function(values)

values示例

	{
    id:'1',
    title:'title1',
    description:'description1'
  }

lz-export-tools 工具条报表导出

Template

<lz-export-tools
        ref="lzExportTools"
        domain="http://localhost:7001"
        reportId="ff80808174d28d1b0174d43fb7e40001"
        reportName="测试导出"
         @click="exportClick" />

属性

属性说明类型默认值
domain报表服务请求域名String
reportId报表IDString
reportName报表导出名称String:reportId

事件

事件名称说明回调参数
click按钮点击事件

方法

方法名称说明参数格式
exportExcel导出excelObject
exportWord导出wordObject
exportPdf导出pdfObject

示例：

exportClick(){
  this.$refs.lzExportTools.exportExcel(param)
},

示例说明

属性说明类型默认值
param报表请求参数Object

FAQs

Package last updated on 16 Jan 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

Introducing Repository Access Permissions and Custom Roles

Product

Introducing Repository Access Permissions and Custom Roles

Socket now supports Custom Roles and Repository Access Permissions so organizations can control who can access specific repositories and actions.

By Joe Werle  -  Jun 19, 2026