gaoaoyun-enheng-st

基于 Element Plus 的 Vue3 表单弹窗组件封装，提供 SearchTable（搜索表格）和 DialogDrawerForm（弹窗表单）两大核心组件。

安装

npm install @gaoaoyun/gaoaoyun-enheng-st

前提条件

需要先安装 Element Plus 和相关依赖：

npm install element-plus @element-plus/icons-vue vue

快速开始

全量引入

import { createApp } from 'vue'
import App from './App.vue'

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import GEnhengSt from '@gaoaoyun/gaoaoyun-enheng-st'
import '@gaoaoyun/gaoaoyun-enheng-st/dist/style.css'

const app = createApp(App)

app.use(ElementPlus)
app.use(GEnhengSt)

app.mount('#app')

按需引入

import { SearchTable, DialogDrawerForm } from '@gaoaoyun/gaoaoyun-enheng-st'

export default {
  components: { SearchTable, DialogDrawerForm }
}

组件列表

| 组件 | 说明 | |------------------|--------------------------------------------------| | SearchTable | 搜索表格组件，集成搜索表单 + 表格 + 分页 | | DialogDrawerForm | 弹窗/抽屉表单组件，支持 dialog 和 drawer 两种模式 | | Table | 表格组件，支持列配置（隐藏、冻结、过滤、排序） | | Dict | 字典翻译组件，根据 value 显示对应 label | | TableListXY | 表格列配置组件，配合 SearchTable 使用 | | NumberRange | 数字范围输入组件 |

SearchTable 使用

基础用法

<template>
  <SearchTable :form-options="formOptions" />
</template>

<script setup>
import { reactive } from 'vue'

const formOptions = reactive({
  form: [
    {
      component: 'Input',
      fieldName: 'name',
      label: '姓名',
      componentProps: {
        placeholder: '请输入姓名',
        valueWidth: '200px'
      }
    },
    {
      component: 'Select',
      fieldName: 'status',
      label: '状态',
      componentProps: {
        options: [
          { label: '启用', value: 1 },
          { label: '禁用', value: 0 }
        ],
        // api: () => getDictOption("LIST_TYPE"),//字典
        valueWidth: '200px',
        formatter: (value) => {},//请求前操作
        parser: (value) => {}，//请求后
      }
    }
  ],
  // 数据请求配置
  proxyConfig: {
    ajax: {
      page: 1,
      pageSize: 10,
      query: async (params) => {
        const res = await api.getList(params)
        return { total: res.total, data: res.records }
      }
    }
  },
  // 表格列配置
  dataListConfig: {
    dataList: [
      { field: 'name', title: '姓名', type: 'index' },
      { field: 'status', title: '状态', component: 'Select', cellRender: { options: [{ label: '启用', value: 1 }, { label: '禁用', value: 0 }] } },
      { field: 'actions', title: '操作', type: 'actions' }
    ],
    border: true
  },
  searchShowNum: 4, // 默认显示表单项数量
  btnSubmit: '检索',
  bntReset: '重置'
})
</script>

支持的表单项类型

| component | 说明 | 额外 Props | |-----------|----------|---------------------------------------------------------------------------| | Input | 输入框 | type, placeholder, maxlength, minlength, readonly, suffixIcon, prefixIcon | | Select | 下拉选择 | options, multiple, filterable, placeholder | | Picker | 日期选择 | type, format, valueFormat, showNow | | Radio | 单选框 | options, border | | Checkbox | 多选框 | options, min, max, border | | InputTag | 标签输入 | draggable, tagType, tagEffect, max | | Upload | 文件上传 | listType (text/picture/picture-card), autoUpload, limit |

表格列类型

| type | 说明 | |-----------|--------| | selection | 多选列 | | index | 索引列 | | actions | 操作列 |

插槽说明

| 插槽名 | 说明 | 作用域 | |------------------|----------------|----------| | column-{field} | 自定义列内容 | row, col | | action | 操作列自定义 | row | | toolbar-actions | 工具栏右侧区域 | - | | footer | 搜索按钮区域 | - |

DialogDrawerForm 使用

基础用法

<template>
  <DialogDrawerForm
    ref="dialogRef"
    :dialog-id="'user-dialog'"
    :form-options="dialogOptions"
  >
    <template #content>表单内容区域</template>
  </DialogDrawerForm>

  <el-button @click="openDialog">打开弹窗</el-button>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { dialogDrawerFormMethods } from '@gaoaoyun/gaoaoyun-enheng-st'

const dialogRef = ref()
const dialogOptions = reactive({
  modalDrawer: 'dialog', // 或 'drawer'
  modalTitle: '用户详情',
  size: '600px',
  form: [
    {
      component: 'Input',
      fieldName: 'username',
      label: '用户名',
      componentProps: { placeholder: '请输入' }
    }
  ],
  handleSubmit: (values) => {
    console.log('提交数据:', values)
  }
})

// 方式1：通过 ref 调用
const openDialog = () => {
  dialogRef.value?.modalShow(true)
}

// 方式2：通过方法调用（需传入 dialogId）
const openDialog2 = () => {
  dialogDrawerFormMethods.modalShowClick('user-dialog')
}
</script>

Props

| 属性 | 说明 | 类型 | 默认值 | |-------------|--------------|-------------------------|----------| | dialogId | 弹窗唯一标识 | string | 自动生成 | | formOptions | 表单配置 | DialogDrawerFormOptions | {} |

formOptions 配置

interface DialogDrawerFormOptions {
  modalDrawer?: 'dialog' | 'drawer'  // 弹窗类型
  modalTitle?: string                 // 标题
  size?: string | number              // 尺寸
  fullscreen?: boolean                // 是否全屏
  showClose?: boolean                 // 显示关闭按钮
  center?: boolean                    // 标题居中
  inline?: boolean                    // 行内表单
  labelWidth?: string | number        // 标签宽度
  form?: FormItem[]                   // 表单项配置
  tableConfig?: {                     // 内嵌表格配置
    dividerTitle?: string
    dataList?: any[]
  }
  handleSubmit?: (values) => void     // 提交回调
  DDSubmit?: string                   // 提交按钮文本
  DDReset?: string                    // 取消按钮文本
}

Expose 方法

| 方法 | 说明 | |----------------|------------------| | modalShow(val) | 设置弹窗显示状态 | | formRef | 表单实例 | | formValues | 表单数据 | | handleSubmit | 提交表单 | | handleCancel | 取消/关闭 | | validateForm | 校验表单 |

Dict 字典翻译

<template>
  <!-- 单个值 -->
  <Dict :options="statusOptions" :value="row.status" />

  <!-- 多个值（逗号分隔） -->
  <Dict :options="statusOptions" :value="'1,2,3'" />
</template>

<script setup>
const statusOptions = [
  { label: '启用', value: 1 },
  { label: '禁用', value: 0 }
]
</script>

NumberRange 数字范围

<template>
  <NumberRange
    v-model="rangeValue"
    :min-limit="0"
    :max-limit="100"
    placeholder-min="最小值"
    placeholder-max="最大值"
  />
</template>

<script setup>
import { ref } from 'vue'
const rangeValue = ref('10-50') // 支持 string、array、object 格式
</script>

API 方法

SearchTable Methods

import { searchTableMethods } from '@gaoaoyun/gaoaoyun-enheng-st'

searchTableMethods.search(isResetPage)  // 执行搜索，isResetPage=true 重置页码
searchTableMethods.init(context)         // 初始化上下文
searchTableMethods.clear()              // 清空上下文

DialogDrawerForm Methods

import { dialogDrawerFormMethods } from '@gaoaoyun/gaoaoyun-enheng-st'

dialogDrawerFormMethods.modalShowClick(id?)     // 打开弹窗
dialogDrawerFormMethods.submit(id?)             // 提交表单
dialogDrawerFormMethods.cancel(id?)             // 关闭弹窗
dialogDrawerFormMethods.getFormRef(id?)         // 获取表单实例
dialogDrawerFormMethods.validateForm(id?)       // 校验表单
dialogDrawerFormMethods.setCurrentDialogId(id)  // 设置当前弹窗 ID

类型定义

完整类型定义参考 types/index.ts

注意事项

1. 多实例支持：DialogDrawerForm 支持多实例，通过 dialogId 区分；SearchTable 目前单例模式
2. 响应式：组件内部会修改传入的配置对象用于响应式，建议外部传入 reactive 对象
3. 字典接口：通过 componentProps.api 配置异步加载选项
4. 文件上传：需配合后端实现上传接口，前端仅做 UI 展示

更新日志

v0.1.0

• 初始版本
• 支持 SearchTable、DialogDrawerForm 核心组件
• 支持 Input、Select、Picker、Radio、Checkbox、InputTag、Upload 表单类型
• 支持表格列配置（隐藏、冻结、过滤、排序）