@wuipkg/arco-component

基于 @arco-design/web-vue 二次封装的中后台系统高级组件包，将“表单控制对话框驱动”以及“表格筛选拉取驱动”的常规模式抽象融合成了便捷调用体系。

安装

pnpm install @wuipkg/arco-component

API 详细说明与用法示例

1. ProTable (高级表格引擎)

实现了表单条件关联检索与数据源拉取的内嵌融合表格。集成了对 @wuipkg/hooks#useBaseTable 的支持，拥有内置分页器、远端接力等功能能力。

Props 核心属性配置 | 参数 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | request | (params) => Promise<{total, data}> | - | 表格数据的远端拉取桥段配置核心对接点。 | | columns | ProTableColumn[] | - | 提供对 Arco-vue 原生 columns 的侵入强化修饰扩展，支持携带查询控件配置。 | | search | boolean \| ProTableSearch | true | 是否启用关联该主体的内部化过滤顶部搜索视图组合区（提供 span 分解）。 | | beforeSearch | Function | - | 查询接管钩子前置函数，触发内部请求抛给 request 层之前允许阻断截获甚至修改入参并 return 过去重构的新条件流。 | | manualRequest| boolean | false | 置为 true 将屏蔽并在 Vue 生命周期 onMounted 当口放过发起的自动表首筛触发加载动作。 | | formRef / formProps| Object \| VNodeRef | - | 提供反穿并控制底层为了呈现 search 而衍生内部生成建构的内置查询 Form 层。 |

Exposed (模板外露实例 API 方法)

• refresh(page?: number): 在原地或是指定某页码的进行数据再查一次（触发 request 调用点）。
• reset(reload?: boolean): 连带重挂清除表单数据并且退回至一号排页面的初始回归刷（可通过重置标记决定要否接管发起 request行为）。

用法示例及代码:

<template>
  <ProTable 
    ref="proTableIns"
    rowKey="id"
    :title="'权限账户指引清单'"
    :request="fetchData" 
    :columns="columns" 
    :search="{ span: 8 }"
  >
     <!-- 用于定制化表头顶侧的功能或新增操作占位出口 -->
     <template #headerExtra>
       <a-button type="primary" @click="handleCreate">新增子项目</a-button>
     </template>
  </ProTable>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ProTable } from '@wuipkg/arco-component'

const proTableIns = ref(null)

// 强化的表头结构：不仅可以渲染表格表头，配置了 search 即可作为顶部联级关联筛补形态输入栏。
const columns = [
  { 
    title: '用户编号', 
    dataIndex: 'user_id', 
    // 配置了 search 之后他就会被收集去建立一个自带 input 框的过滤字段
    search: { type: 'input', props: { placeholder: '请补齐编号' } } 
  },
  { 
    title: '所属职级', 
    dataIndex: 'level', 
    // 支持下拉类型快速组装
    search: { 
      type: 'select', 
      props: { options: [{ label: 'VIP', value: 1 }] } 
    } 
  }
]

// 暴露为后端桥接接口即可跑通拉锯过程
const fetchData = async (params) => {
  // params 收到比如 { page: 1, pageSize: 10, user_id: '...', level: 1 }
  const resp = await ajax.post('/user-list', params)
  return {
    data: resp.list,
    total: resp.totalCount
  }
}

const handleCreate = () => {
    // 处理相关操作结束后可通过此命令从组件外再次击活刷新这支组件列表
    proTableIns.value.refresh()
}
</script>

2. FormModal (表单动作弹窗收发器)

通过整合并绑定弹层底层核心 “取消” / “提交” 和带表单输入 “是否校验成功判断” 的组合钩子实现低代码快速弹窗提交态。

Props 与 Emits核心属性 | 参数 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | visible | boolean | false | [绑定模型] 同步暴露开/关响应体。 | | request | () => Promise<boolean \| void> | - | 对应“确定提交”的行为句柄。若 formModel 及 Rules 被击碎则不放行通过走入它；成功校验的话将在被响应处理时提供内联 Button 加载避免双击并发流。返回 false 则不关闭窗。 | | data | Function \| Promise \| Object | - | 用于诸如“编辑态回填”场景：窗态一打开并且检测到此提供钩子，便呈现全局 Spin 等待执行拉取并将同 key 反填合并赋予主 formModel 使用。 | | formModel | Record<string,any> | - | 建立收集在当前主表单上所双绑关联控制收集池。 | | ok (事件) | () | - | 表单正确校验且 request 执行通过承诺态返回后的回勾动作点。 |

用法示例：

<template>
  <a-button @click="openToEdit">修改用户数据</a-button>

  <FormModal
    v-model:visible="visible"
    title="管理用户修改"
    :type="'update'"
    :formModel="formData"
    :request="handleSubmitLogic"
    :data="asyncDetailFetch"
    @ok="onSystemAcknowledgeFinished"
  >
    <a-form-item field="name" title="名称" :rules="[{ required: true }]">
       <a-input v-model="formData.name" />
    </a-form-item>
    <a-form-item field="age" title="年龄" :rules="[{ required: true }]">
       <DigitalInput v-model="formData.age" />
    </a-form-item>
  </FormModal>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { FormModal, DigitalInput } from '@wuipkg/arco-component'

const visible = ref(false)
const formData = reactive({ name: '', age: undefined })
let editId = ''

const openToEdit = () => {
  editId = '1000'
  visible.value = true // 激活将自带挂载清空拦截且并执行内部回拉表
}

// 供编辑状态拉出并被装载进 formData（由组件内替接管生命中的局部 loading 遮罩层效果）
const asyncDetailFetch = async () => {
  const detailObj = await window.fetch(`/api/user/${editId}`).then(r => r.json())
  // 仅需确保对象键存在对撞它就会合并去目标，不再需要我们主动赋一遍 formData 取值
  return detailObj
}

// 我们所需要交代的真正“完成保存提交”的向后台发出异步发信请求点内容：
// ※ 只要此句柄存在它便自带表单前置检验、自动捕捉其是否符合 rules。没验证全他就不去跑这些。
const handleSubmitLogic = async () => {
  await window.fetch('/api/user/save', { 
    method: 'POST', 
    body: JSON.stringify({ id: editId, ...formData }) 
  })
}

// 真正跑完提交一切安全并关闭视图后的动作指令
const onSystemAcknowledgeFinished = () => {
  console.log('数据存储完毕')
}
</script>

3. DigitalInput (数字安全限定输入框)

在原有 ArcoDesign 上封装并覆盖对非数字字符串带有自修复及白名单阻拦剔非体系的安全沙箱。

用法释义示例：

<template>
  <!-- 常规用途：受限约束确保出来的东西必定是安全类型整数或触发 undefined 而非非预斯 NaN 错串 -->
  <DigitalInput v-model="formAge" placeholder="输入整数数字" />

  <!-- 开启 allowAny：允许特殊数字符文本以 string 形态反出，如前端保存工号等特定前置补零规则要求字体的场景：比如 '0098'  -->
  <DigitalInput 
    v-model="employeeNumStr" 
    :allowAny="true" 
    placeholder="在此打数字保留原始前缀 0" 
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { DigitalInput } from '@wuipkg/arco-component'

const formAge = ref<number>()
const employeeNumStr = ref<string>('')
</script>