@pluve/magic-search-table

@pluve/magic-search-table 待投入生产

安装

# 依赖 [email protected]/[email protected]
yarn add @pluve/magic-search-table

MagicSearchTable

基于 ant-desgin-vue form table input select datePicker treeSelect cascader 组件进行二次封装--搜索和列表联动的业务组件，

特性

• 基于 ant-desgin-vue form table input select datePicker treeSelect cascader 组件结合现有的业务进行二次封装
• 与 ant-desgin-vue form table input select datePicker treeSelect cascader 组件API 对齐
• 提供配置属性，具体参考下面使用示例

配置属性

properties ｜ messenger | 属性 | 默认值 | 描述 | | --- | --- | --- | | properties | 参见表单及表格的属性值传值示例 | 表单和表格的属性集合 | | messenger | 无 | 查询列表的方法（必传） |

API

参数和ant-desgin-vue保持一致，特殊处理增加的API如下

select dataPicker

| 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | handleSelect | 不同的select之间的联动处理 | function可选 | 无 | | operations | 列表里的操作项处理 | IOperations[]可选 | 无 | | maxSelectRange | 限制时间可选范围 | number可选 | 无 |

使用示例

<template>
  <div class="container">
    <magic-search-table v-bind="properties" :messenger="messenger">
      <template #searchBtn="slotProps">
        <a-button type="primary" @click="handleExport(slotProps)">导出</a-button>
      </template>
    </magic-search-table>
  </div>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'
import type { Properties } from '@pluve/magic-search-table';
import dayjs from 'dayjs'

async function messenger(page: number, pageSize: number, query: { [key: string]: any }) {
  console.log('查询条件', page, pageSize, query)
  return {
    list: [
      {
        key: 1,
        name: '撒到速递哦阿松iu嗲速度奥i速冻死u啊的',
        age: 18,
        phone: '110',
        address: '上海市普陀区金沙江路 1518 弄'
      },
      {
        key: 2,
        name: '张三',
        age: 18,
        phone: '119',
        address: '上海市普陀区金沙江路 1518 弄'
      },
      {
        key: 3,
        name: '里斯',
        age: 19,
        phone: '11934',
        address: '上海市普陀区金沙江路 1518 弄'
      }
    ],
    total: 98
  }
}

const properties = reactive<Properties>({
  search: {
    labelWidth: '70px',
    collapse: false,
    buttonRight: 10,
    fields: [
      {
        type: 'input',
        label: '姓名',
        name: 'name',
        isRequired: true,
        rules: [{ required: true, message: '请输入姓名' }],
        props: {
          placeholder: ' 请输入',
          allowClear: true,
        },
        defaultValue: ''
      },
      {
        type: 'input',
        label: '电话',
        name: 'phone',
        props: {
          placeholder: ' 请输入',
          allowClear: true
        },
        defaultValue: ''
      },
      {
        type: 'select',
        label: '性别',
        name: 'sex',
        props: {
          handleSelect: (val: any, formState: any) => {
            if (formState.sex === 'male') {
              const rale = properties.search.fields.find(item => item.name === 'rale') as any;
              if (rale) {
                rale.props.options = [
                  {
                    value: '1',
                    label: '选男的'
                  },
                  {
                    value: '2',
                    label: '选女的'
                  },
                ] ?? []
              }
              // formState.rale = '1'
            } else {
              formState.rale = '2'
            }
          },
          placeholder: '请选择',
          allowClear: false,
          options: [
            {
              value: 'male',
              label: '男'
            },
            {
              value: 'female',
              label: '女'
            }
          ]
        },
        defaultValue: 'male'
      },
      {
        type: 'select',
        label: '联动项',
        name: 'rale',
        props: {
          placeholder: '请选择',
          allowClear: false,
          options: [
            {
              value: '1',
              label: '选男的'
            },
            {
              value: '2',
              label: '选女的'
            },
            {
              value: '3',
              label: '不男不女'
            },
            {
              value: '4',
              label: '未知'
            }
          ]
        },
        defaultValue: ''
      },
      {
        type: 'cascader',
        label: '级联选择',
        name: 'city',
        props: {
          placeholder: '请选择',
          allowClear: false,
          multiple: true,
          options: [
            {
              label: 'Bamboo',
              value: 'bamboo',
              children: [
                {
                  label: 'Bamboo1',
                  value: 'bamboo1',
                },
                {
                  label: 'Bamboo2',
                  value: 'bamboo2',
                },
                {
                  label: 'Bamboo3',
                  value: 'bamboo3',
                }
              ]
            },
            {
              label: 'Bamboo2号',
              value: 'Bamboo2号',
              children: [
                {
                  label: 'Bamboo1',
                  value: 'bamboo1',
                },
                {
                  label: 'Bamboo2',
                  value: 'bamboo2',
                },
                {
                  label: 'Bamboo3',
                  value: 'bamboo3',
                }
              ]
            }
          ]
        }
      },
      {
        type: 'treeSelect',
        label: '树选择',
        name: 'treeProp',
        props: {
          placeholder: '请选择',
          allowClear: false,
          multiple: true,
          treeData: [{
            title: 'Node1',
            value: '0-0',
            children: [
              {
                title: 'Child Node1',
                value: '0-0-0',
              },
            ],
          },
          {
            title: 'Node2',
            value: '0-1',
            children: [
              {
                title: 'Child Node3',
                value: '0-1-0',
                disabled: true,
              },
              {
                title: 'Child Node4',
                value: '0-1-1',
              },
              {
                title: 'Child Node5',
                value: '0-1-2',
              },
            ],
          },
          ]

        }
      },
      {
        type: 'dataPicker',
        label: '时间',
        name: 'timeRange',
        props: {
          maxSelectRange: 30,
          allowClear: true,
        },
        defaultValue: [dayjs('2023-03-01', 'YYYY-MM-DD'), dayjs('2023-03-28', 'YYYY-MM-DD')]
      }
    ]
  },
  table: {
    bordered: false,
    rowSelection: {},
    columns: [
      {
        title: '序号',
        dataIndex: 'key',
        key: 'key',
        resizable: true,
        width: 200,
      },
      {
        title: '姓名',
        key: 'name',
        resizable: true,
        width: 60,
        ellipsis: true,
        customRender: ({record}: any) => {
          // 修改
          return record.name
        }
      },
      {
        title: '年龄',
        dataIndex: 'age',
        key: 'age',
      },
      {
        title: '手机号',
        dataIndex: 'phone',
        key: 'phone',
      },
      {
        title: '地址',
        dataIndex: 'address',
        key: 'address',
      },
      {
        title: '操作',
        dataIndex: '',
        key: 'action',
        operations: [
          {
            title: '编辑',
            key: 'edit',
            icon: 'edit',
            onClick: (row: any) => console.log('edit-->', row)
          },
          {
            title: '删除',
            key: 'delete',
            icon: 'delete'
          }
        ]
      }
    ]
  }
})

function handleExport(formState: any) {
  console.log('导出', formState)
}

</script>

后续加loading，继续完善