简介

基于 ant-desgin-vue 二次封装组件库。

• 与 ant-desgin-vue ConfigProvider 搭配自定义主题
• typescript
• 国际化

安装

yarn add loong3-dv 或 npm install loong3-dv

lg-table

import { lgTable } from "loong3-dv"
import type { TableProps } from "loong3-dv"

//template
<lg-table
  :tableSource="tableData"
  :columns="columns"
  @onload="getList"
  @add="handleOpen"
  :initParam="{}"
>

</lg-table>

// script

const tableData = ref<TableProps['tableSource']>()

const getList = async (params:any)=>{
  // axios 请求
  const {data:{current,total,pageSize,list}} = await fetchApi.sysUserList(params)
  tableData.value = {
    current,total,pageSize,list
  }
}

// 点击新增按钮触发方法
const handleOpen = ()=> {}

// 列配置项 配置参数参考下方
const columns:TableProps['columns'] = [{
    title: "tanStar",
    search: true,
    dataIndex: "name",
  },]

组件参数

| 属性 | 描述 | 参数 | | ------------ | ---------------------------- | --------------------------------------------------------------------- | | columns | 表格列设置 object[] 参考下表 | 参考下表 | | pagination | 使用分页 | boolean 默认 true 开启 | | initParam | 表格请求额外参数 | 默认 {} | | hiddenRule | 隐藏某筛选条件 | 默认 {} 参数为 表格项 dataIndex:((params // 当前筛选条件数据)=> boolean) 返回boolean值 true或不写则展示 可参考表单示例 | | border | 使用边框 | 默认 false 不使用 | | childrenName | 树形时子列表 key | 默认 'children' | | useSelection | 使用多选 | 使用多选 | 默认 false 关闭 | | tableSource | 表格数据 | [] | | shouldEdit | 是否使用新增按钮 | 默认 true 开启 | | draggle | 表格拖拽 | 默认 false 关闭 | | merge | 合并列 | 默认 [] 关闭合并列 可传入数组开启例 :merge="['name']" | | mergeRow | 合并行 | 合并行接收二维数组并传入列号 例 [[1,2,3]] 表示 1,2,3 列的同行数据合并 |

column 列参数

| 属性 | 描述 | 参数 | | --------------- | -------------------------- | ---------------------- | | dataIndex | 表格字段唯一标识 | string | | ellipsis | 超出省略已默认开启 | boolean | | title | 单元格标题 | string | | width | 列宽 | number | | fixed | 固定列 | 'left'或'right' | | search | 是否为搜索项 | boolean | | searchType | 搜索项类型 | 见下表 SearchType | | searchProps | 搜索项参数继承 antdv 文档 | { [key: string]: any } | | searchInitParam | 搜索项初始值 | any | | enum | select checkbox 等可选列表 | { 见下表 EnumProps[] | | align | 文字对齐 | 'center' 或 'left' | | resizable | 开启表格列拖拽 | boolean | | minWidth | 表格列拖拽最小值 | number | | maxWidth | 表格列拖拽最大值 | number |

SearchType 表格搜索项参数

'text'
'select'
'number'
'switch'
'slider'
'radio'
'checkbox'
'rate'
'date'
'rangeDate'
'time'
'treeSelect'
'textarea'

EnumProps

| 属性 | 描述 | 参数 | | -------- | ---------------- | ------- | | label | 选项框显示的文字 | string | | value | 选项框值 | any | | disabled | 是否禁用此选项 | boolean | | children | 为树形选择 | [] | | locale | 多语言切换当前使用语言文字 | {ch:"中文",en:"English"} |

事件

| 名称 | 描述 | 回调参数 | | --------------------- | -------------------------- | --------------- | | changeSelectedRowKeys | 多选时触发 | 当前选中的 id | | onload | 页面加载完成时或点击搜索等 | 当前搜索项内容 | | add | 页面新增按钮 | void | | changeSortIndex | 拖拽排序时返回变化的下标 | [number,number] |

插槽

| 名称 | 描述 | | -------- | ------------------------ | | title | 表格标题 和 筛选条件标题 | | bodyCell | 表格内容 |

// 示例
<template #title="item">
  <div v-if="item.dataIndex == 'index'">hahah</div>
  <div v-else>{{ item.title }}</div>
</template>

lg-form

import { lgForm } from 'loong3-dv';
import type { FormProps, FormInstance } from 'loong3-dv';

// template

<lg-form
  ref="lgformRef"
  :initParam="{}"
  :configure="configure"
  :validate="validate"
  :hiddenRule="hiddenRule"
  :colNum="1"
  @onFinish="onFinish"
  @onFinishFailed="onFinishFailed"
>
  <template #title="item">
    {{ item.label }}
  </template>
  <template #d="{ searchParam, item }">
    <a-upload
      v-model:fileList="searchParam[item.prop]"
      v-bind="item.searchProps"
      name="files"
    >
      <a-button>
        <template #icon>
          <UploadOutlined />
        </template>
        中英文
      </a-button>
    </a-upload>
  </template>
</lg-form>

// script
const lgformRef = ref<FormInstance>()
const configure: FormProps['configure'] = [
  {
    label: '名称',
    prop: 'a',
    searchInitParam: '1',
    searchProps: {},
  }
]

const validate: FormProps['validate'] = {
  a: [
    {
      type: 'string',
      required: true,
      max: 6,
      min: 3,
      message: '请输入3-6个字符的名称',
      trigger: ['change', 'blur'],
    },
     {
    type: 'date',
    prop: 'b',
    label: '时间',
    searchInitParam: '2023-04-03',
  },
  {
    type: 'select',
    prop: 'c',
    label: '下拉选择',
    enum: [
      { label: '男', value: 1 },
      { label: '女', value: 2 },
      { label: '中立', value: 3 },
    ],
  },
  {
    type: 'upload',
    prop: 'd',
    label: '上传',
  },
  {
    type: 'textarea',
    prop: 'e',
    label: '描述',
  },
  {
    type: 'checkbox',
    prop: 'f',
    label: '复选框',
    enum: [
      { label: '男', value: 1 },
      { label: '女', value: 2 },
      { label: '中立', value: 3 },
    ],
    searchInitParam: [1],
  },
  {
    type: 'number',
    prop: 'h',
    label: '数字输入',
    searchProps: { max: 10, min: 0, precision: 2, step: 0.1 },
  },
  {
    type: 'radio',
    prop: 'i',
    label: '单选',
    enum: [
      { label: '男', value: 1 },
      { label: '女', value: 2 },
      { label: '中立', value: 3 },
    ],
  },
  {
    type: 'rangeDate',
    prop: 'j',
    label: '时间段',
  },
  {
    type: 'treeSelect',
    prop: 'k',
    label: '树菜单',
    enum: [
      { label: '男', value: 1, locale: { ch: '男', en: 'man' } },
      { label: '女', value: 2, locale: { ch: '女', en: 'woman' } },
      { label: '中立', value: 3, locale: { ch: '中立', en: 'other' } },
    ],
  },
  ],
};

// 表单项是否展示
const hiddenRule = {
  d: ({ c }: { c: number }) => c === 1,
  f: ({ c }: { c: number }) => c === 1,
};

const onFinish = (params)=>{}
const onFinishFailed = (error)=>{error}

组件参数

| 属性 | 描述 | 参数 | | ------------ | ---------------------------- | -------- | | configure | 表单设置设置 object[] 参考下表| 参考下表 | | initParam | 表单额外参数 | Object | | layout | 表单标题与内容布局比例 遵循24列 | 默认 [6, 14] | | showButton | 展示底部默认提交重置按钮 | 默认 true | | colNum | 表单列数 | 默认 1 | | isvalidate | 是否使用表单验证 | 默认 true | | validate | 表单验证规则 参考 async-validator | Object | | hiddenRule | 表单隐藏项见下表 | 默认 {} 参数为 表格项 dataIndex:((params // 当前筛选条件数据)=> boolean) 返回boolean值 true或不写则展示 |

configure 参数

| 属性 | 描述 | 参数 | | --------------- | -------------------------- | ---------------------- | | type | 表单类型 | InputType 见下表 | | label | 表单名称 | string | | prop | 表单key | string | | searchProps | 表单其他参数可参考antdv 表单参数 | string | | searchInitParam| 搜索项初始值 | any | | enum | select checkbox 等可选列表 | { 见下表 EnumProps[] |

SearchType 表格搜索项参数

'text'
'select'
'number'
'switch'
'slider'
'radio'
'checkbox'
'rate'
'date'
'rangeDate'
'time'
'treeSelect'
'textarea'
'upload'

EnumProps

| 属性 | 描述 | 参数 | | -------- | ---------------- | ------- | | label | 选项框显示的文字 | string | | value | 选项框值 | any | | disabled | 是否禁用此选项 | boolean | | children | 为树形选择 | [] |

事件

| 名称 | 描述 | 回调参数 | | --------------------- | -------------------------- | --------------- | | onFinish | 表单通过验证触发 | 参数表单值 | | onFinishFailed | 表单验证失败触发 | error |

插槽

| 名称 | 描述 | | -------- | ------------------------ | | title | 表单标题 | | [prop] | 表单插槽将覆盖默认对应表单 |

// 示例
  <template #upload="{searchParam,item}">
    <a-upload
      v-model:fileList="searchParam[item.prop!]"
      v-bind="item.searchProps"
      name="files"
      >
      <a-button>
        <template #icon>
          <UploadOutlined />
        </template>
        中英文
      </a-button>
    </a-upload>
  </template>